From a270a1b4d870412bc55789197089922edf358d9b Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Mon, 5 Feb 2018 11:10:33 +0100 Subject: [PATCH 1/5] Standarized colors to hsl/a format. --- docs/_snippets/examples/custom.css | 90 +++++++++---------- docs/_snippets/examples/extras.css | 2 +- docs/framework/guides/theme-customization.md | 90 +++++++++---------- tests/manual/inverted.html | 92 ++++++++++---------- theme/ckeditor5-basic-styles/code.css | 2 +- theme/ckeditor5-ui/globals/_reset.css | 2 +- theme/ckeditor5-widget/widget.css | 4 +- 7 files changed, 141 insertions(+), 141 deletions(-) diff --git a/docs/_snippets/examples/custom.css b/docs/_snippets/examples/custom.css index bb08971..70fb229 100644 --- a/docs/_snippets/examples/custom.css +++ b/docs/_snippets/examples/custom.css @@ -11,71 +11,71 @@ --ck-font-size-base: 14px; /* Helper variables to avoid duplication in the colors. */ - --ck-custom-background: #4A494B; - --ck-custom-foreground: #3a393d; - --ck-custom-border: #383738; - --ck-custom-white: #fff; + --ck-custom-background: hsl(270, 1%, 29%); + --ck-custom-foreground: hsl(255, 3%, 23%); + --ck-custom-border: hsl(300, 1%, 22%); + --ck-custom-white: hsl(0, 0%, 100%); /* -- Overrides generic colors -------------------------------------------------------------- */ - --ck-color-focus-border: #48a3f5; - --ck-color-text: #fafafa; - --ck-color-shadow-drop: rgba( 0, 0, 0, .2 ); - --ck-color-shadow-inner: rgba( 0, 0, 0, .1 ); + --ck-color-focus-border: hsl(208, 90%, 62%); + --ck-color-text: hsl(0, 0%, 98%); + --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2); + --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1); /* -- Overrides the default .ck-button class colors ----------------------------------------- */ --ck-color-button-default-background: var(--ck-custom-background); --ck-color-button-default-border: var(--ck-custom-border); - --ck-color-button-default-focus-background: #434244; - --ck-color-button-default-focus-border: #323232; - --ck-color-button-default-active-background: #3f3e40; - --ck-color-button-default-active-border: #302f30; - --ck-color-button-default-active-shadow: #3b3a3c; + --ck-color-button-default-focus-background: hsl(270, 1%, 26%); + --ck-color-button-default-focus-border: hsl(0, 0%, 20%); + --ck-color-button-default-active-background: hsl(270, 2%, 25%); + --ck-color-button-default-active-border: hsl(300, 1%, 19%); + --ck-color-button-default-active-shadow: hsl(270, 2%, 23%); --ck-color-button-default-disabled-background: var(--ck-custom-background); --ck-color-button-default-disabled-border: var(--ck-custom-border); --ck-color-button-on-background: var(--ck-custom-foreground); --ck-color-button-on-border: var(--ck-custom-border); - --ck-color-button-on-focus-background: #343337; - --ck-color-button-on-focus-border: #323232; - --ck-color-button-on-active-background: #313034; - --ck-color-button-on-active-border: #302f30; - --ck-color-button-on-active-shadow: #2e2e31; + --ck-color-button-on-focus-background: hsl(255, 4%, 21%); + --ck-color-button-on-focus-border: hsl(0, 0%, 20%); + --ck-color-button-on-active-background: hsl(255, 4%, 20%); + --ck-color-button-on-active-border: hsl(300, 1%, 19%); + --ck-color-button-on-active-shadow: hsl(240, 3%, 19%); --ck-color-button-on-disabled-background: var(--ck-custom-foreground); --ck-color-button-on-disabled-border: var(--ck-custom-border); - --ck-color-button-action-background: #1ABC9C; - --ck-color-button-action-border: #49d2b7; - --ck-color-button-action-focus-background: #17a98c; - --ck-color-button-action-focus-border: #42bda5; - --ck-color-button-action-active-background: #16a085; - --ck-color-button-action-active-border: #3eb39c; - --ck-color-button-action-active-shadow: #15967d; - --ck-color-button-action-disabled-background: #1ABC9C; - --ck-color-button-action-disabled-border: #49d2b7; + --ck-color-button-action-background: hsl(168, 76%, 42%); + --ck-color-button-action-border: hsl(168, 60%, 55%); + --ck-color-button-action-focus-background: hsl(168, 76%, 38%); + --ck-color-button-action-focus-border: hsl(168, 48%, 50%); + --ck-color-button-action-active-background: hsl(168, 76%, 36%); + --ck-color-button-action-active-border: hsl(168, 49%, 47%); + --ck-color-button-action-active-shadow: hsl(168, 75%, 34%); + --ck-color-button-action-disabled-background: hsl(168, 76%, 42%); + --ck-color-button-action-disabled-border: hsl(168, 60%, 55%); --ck-color-button-action-text: var(--ck-custom-white); /* -- Overrides the default .ck-dropdown class colors --------------------------------------- */ --ck-color-dropdown-panel-background: var(--ck-custom-background); --ck-color-dropdown-panel-border: var(--ck-custom-foreground); - --ck-color-dropdown-symbol: #f1f1f1; + --ck-color-dropdown-symbol: hsl(0, 0%, 95%); /* -- Overrides the default .ck-input class colors ------------------------------------------ */ --ck-color-input-background: var(--ck-custom-foreground); - --ck-color-input-border: #6b6970; - --ck-color-input-text: #fafafa; - --ck-color-input-disabled-background: #343337; - --ck-color-input-disabled-border: #605f65; - --ck-color-input-disabled-text: #757575; + --ck-color-input-border: hsl(257, 3%, 43%); + --ck-color-input-text: hsl(0, 0%, 98%); + --ck-color-input-disabled-background: hsl(255, 4%, 21%); + --ck-color-input-disabled-border: hsl(250, 3%, 38%); + --ck-color-input-disabled-text: hsl(0, 0%, 46%); /* -- Overrides the default .ck-list class colors ------------------------------------------- */ --ck-color-list-background: var(--ck-custom-background); --ck-color-list-item-background-hover: var(--ck-custom-foreground); - --ck-color-list-item-background-active: #1A8BF1; + --ck-color-list-item-background-active: hsl(208, 88%, 52%); --ck-color-list-item-text-active: var(--ck-custom-white); /* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */ @@ -90,34 +90,34 @@ /* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */ - --ck-color-tooltip-background: #212025; - --ck-color-tooltip-text: #eee; + --ck-color-tooltip-background: hsl(252, 7%, 14%); + --ck-color-tooltip-text: hsl(0, 0%, 93%); /* -- Overrides the default colors used by the editor --------------------------------------- */ --ck-color-editor-border: var(--ck-custom-background); --ck-color-editor-toolbar-background: var(--ck-custom-background); - --ck-color-editor-toolbar-button-on-background: #3c3c3c; + --ck-color-editor-toolbar-button-on-background: hsl(0, 0%, 24%); --ck-color-editor-toolbar-button-on-border: transparent; - --ck-color-editor-toolbar-button-on-focus-background: #353535; + --ck-color-editor-toolbar-button-on-focus-background: hsl(0, 0%, 21%); --ck-color-editor-toolbar-button-on-focus-border: transparent; - --ck-color-editor-toolbar-button-on-active-background: #272727; + --ck-color-editor-toolbar-button-on-active-background: hsl(0, 0%, 15%); --ck-color-editor-toolbar-button-on-active-border: transparent; - --ck-color-editor-toolbar-button-on-active-shadow: #2d2d2d; + --ck-color-editor-toolbar-button-on-active-shadow: hsl(0, 0%, 18%); --ck-color-editor-toolbar-button-on-disabled-background: transparent; --ck-color-editor-toolbar-button-on-disabled-border: transparent; - --ck-color-editor-dropdown-background: #535254; + --ck-color-editor-dropdown-background: hsl(270, 1%, 33%); /* -- Overrides the default colors used by ckeditor5-image package -------------------------- */ - --ck-color-image-caption-background: #f7f7f7; - --ck-color-image-caption-text: #333; + --ck-color-image-caption-background: hsl(0, 0%, 97%); + --ck-color-image-caption-text: hsl(0, 0%, 20%); /* -- Overrides the default colors used by ckeditor5-widget package ------------------------- */ - --ck-color-widget-border-blurred: #ddd; - --ck-color-widget-border-hover: #FFD25C; + --ck-color-widget-border-blurred: hsl(0, 0%, 87%); + --ck-color-widget-border-hover: hsl(43, 100%, 68%); --ck-color-widget-editable-focused-background: var(--ck-custom-white); } diff --git a/docs/_snippets/examples/extras.css b/docs/_snippets/examples/extras.css index 1a6c1cc..90d61b1 100644 --- a/docs/_snippets/examples/extras.css +++ b/docs/_snippets/examples/extras.css @@ -8,7 +8,7 @@ /* The shadow should be 10% brighter than the toolbar background. */ :root { - --ck-shadow-color: #646265; + --ck-shadow-color: hsl(280, 2%, 39%); } .ck-editor-toolbar { diff --git a/docs/framework/guides/theme-customization.md b/docs/framework/guides/theme-customization.md index 6d6fe89..ddcfcbd 100644 --- a/docs/framework/guides/theme-customization.md +++ b/docs/framework/guides/theme-customization.md @@ -78,71 +78,71 @@ The file containing custom variables will be named `custom.css` and it will look --ck-font-size-base: 14px; /* Helper variables to avoid duplication in the colors. */ - --ck-custom-background: #4A494B; - --ck-custom-foreground: #3a393d; - --ck-custom-border: #383738; - --ck-custom-white: #fff; + --ck-custom-background: hsl(270, 1%, 29%); + --ck-custom-foreground: hsl(255, 3%, 23%); + --ck-custom-border: hsl(300, 1%, 22%); + --ck-custom-white: hsl(0, 0%, 100%); /* -- Overrides generic colors -------------------------------------------------------------- */ - --ck-color-focus-border: #48a3f5; - --ck-color-text: #fafafa; - --ck-color-shadow-drop: rgba( 0, 0, 0, .2 ); - --ck-color-shadow-inner: rgba( 0, 0, 0, .1 ); + --ck-color-focus-border: hsl(208, 90%, 62%); + --ck-color-text: hsl(0, 0%, 98%); + --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2); + --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1); /* -- Overrides the default .ck-button class colors ----------------------------------------- */ --ck-color-button-default-background: var(--ck-custom-background); --ck-color-button-default-border: var(--ck-custom-border); - --ck-color-button-default-focus-background: #434244; - --ck-color-button-default-focus-border: #323232; - --ck-color-button-default-active-background: #3f3e40; - --ck-color-button-default-active-border: #302f30; - --ck-color-button-default-active-shadow: #3b3a3c; + --ck-color-button-default-focus-background: hsl(270, 1%, 26%); + --ck-color-button-default-focus-border: hsl(0, 0%, 20%); + --ck-color-button-default-active-background: hsl(270, 2%, 25%); + --ck-color-button-default-active-border: hsl(300, 1%, 19%); + --ck-color-button-default-active-shadow: hsl(270, 2%, 23%); --ck-color-button-default-disabled-background: var(--ck-custom-background); --ck-color-button-default-disabled-border: var(--ck-custom-border); --ck-color-button-on-background: var(--ck-custom-foreground); --ck-color-button-on-border: var(--ck-custom-border); - --ck-color-button-on-focus-background: #343337; - --ck-color-button-on-focus-border: #323232; - --ck-color-button-on-active-background: #313034; - --ck-color-button-on-active-border: #302f30; - --ck-color-button-on-active-shadow: #2e2e31; + --ck-color-button-on-focus-background: hsl(255, 4%, 21%); + --ck-color-button-on-focus-border: hsl(0, 0%, 20%); + --ck-color-button-on-active-background: hsl(255, 4%, 20%); + --ck-color-button-on-active-border: hsl(300, 1%, 19%); + --ck-color-button-on-active-shadow: hsl(240, 3%, 19%); --ck-color-button-on-disabled-background: var(--ck-custom-foreground); --ck-color-button-on-disabled-border: var(--ck-custom-border); - --ck-color-button-action-background: #1ABC9C; - --ck-color-button-action-border: #49d2b7; - --ck-color-button-action-focus-background: #17a98c; - --ck-color-button-action-focus-border: #42bda5; - --ck-color-button-action-active-background: #16a085; - --ck-color-button-action-active-border: #3eb39c; - --ck-color-button-action-active-shadow: #15967d; - --ck-color-button-action-disabled-background: #1ABC9C; - --ck-color-button-action-disabled-border: #49d2b7; + --ck-color-button-action-background: hsl(168, 76%, 42%); + --ck-color-button-action-border: hsl(168, 60%, 55%); + --ck-color-button-action-focus-background: hsl(168, 76%, 38%); + --ck-color-button-action-focus-border: hsl(168, 48%, 50%); + --ck-color-button-action-active-background: hsl(168, 76%, 36%); + --ck-color-button-action-active-border: hsl(168, 49%, 47%); + --ck-color-button-action-active-shadow: hsl(168, 75%, 34%); + --ck-color-button-action-disabled-background: hsl(168, 76%, 42%); + --ck-color-button-action-disabled-border: hsl(168, 60%, 55%); --ck-color-button-action-text: var(--ck-custom-white); /* -- Overrides the default .ck-dropdown class colors --------------------------------------- */ --ck-color-dropdown-panel-background: var(--ck-custom-background); --ck-color-dropdown-panel-border: var(--ck-custom-foreground); - --ck-color-dropdown-symbol: #f1f1f1; + --ck-color-dropdown-symbol: hsl(0, 0%, 95%); /* -- Overrides the default .ck-input class colors ------------------------------------------ */ --ck-color-input-background: var(--ck-custom-foreground); - --ck-color-input-border: #6b6970; - --ck-color-input-text: #fafafa; - --ck-color-input-disabled-background: #343337; - --ck-color-input-disabled-border: #605f65; - --ck-color-input-disabled-text: #757575; + --ck-color-input-border: hsl(257, 3%, 43%); + --ck-color-input-text: hsl(0, 0%, 98%); + --ck-color-input-disabled-background: hsl(255, 4%, 21%); + --ck-color-input-disabled-border: hsl(250, 3%, 38%); + --ck-color-input-disabled-text: hsl(0, 0%, 46%); /* -- Overrides the default .ck-list class colors ------------------------------------------- */ --ck-color-list-background: var(--ck-custom-background); --ck-color-list-item-background-hover: var(--ck-custom-foreground); - --ck-color-list-item-background-active: #1A8BF1; + --ck-color-list-item-background-active: hsl(208, 88%, 52%); --ck-color-list-item-text-active: var(--ck-custom-white); /* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */ @@ -157,35 +157,35 @@ The file containing custom variables will be named `custom.css` and it will look /* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */ - --ck-color-tooltip-background: #212025; - --ck-color-tooltip-text: #eee; + --ck-color-tooltip-background: hsl(252, 7%, 14%); + --ck-color-tooltip-text: hsl(0, 0%, 93%); /* -- Overrides the default colors used by the editor --------------------------------------- */ --ck-color-editor-border: var(--ck-custom-background); --ck-color-editor-toolbar-background: var(--ck-custom-background); - --ck-color-editor-toolbar-button-on-background: #3c3c3c; + --ck-color-editor-toolbar-button-on-background: hsl(0, 0%, 24%); --ck-color-editor-toolbar-button-on-border: transparent; - --ck-color-editor-toolbar-button-on-focus-background: #353535; + --ck-color-editor-toolbar-button-on-focus-background: hsl(0, 0%, 21%); --ck-color-editor-toolbar-button-on-focus-border: transparent; - --ck-color-editor-toolbar-button-on-active-background: #272727; + --ck-color-editor-toolbar-button-on-active-background: hsl(0, 0%, 15%); --ck-color-editor-toolbar-button-on-active-border: transparent; - --ck-color-editor-toolbar-button-on-active-shadow: #2d2d2d; + --ck-color-editor-toolbar-button-on-active-shadow: hsl(0, 0%, 18%); --ck-color-editor-toolbar-button-on-disabled-background: transparent; --ck-color-editor-toolbar-button-on-disabled-border: transparent; - --ck-color-editor-dropdown-background: #535254; + --ck-color-editor-dropdown-background: hsl(270, 1%, 33%); /* -- Overrides the default colors used by ckeditor5-image package -------------------------- */ - --ck-color-image-caption-background: #f7f7f7; - --ck-color-image-caption-text: #333; + --ck-color-image-caption-background: hsl(0, 0%, 97%); + --ck-color-image-caption-text: hsl(0, 0%, 20%); /* -- Overrides the default colors used by ckeditor5-widget package ------------------------- */ - --ck-color-widget-border-blurred: #ddd; - --ck-color-widget-border-hover: #FFD25C; + --ck-color-widget-border-blurred: hsl(0, 0%, 87%); + --ck-color-widget-border-hover: hsl(43, 100%, 68%); --ck-color-widget-editable-focused-background: var(--ck-custom-white); } ``` diff --git a/tests/manual/inverted.html b/tests/manual/inverted.html index d9fddca..4b8fa83 100644 --- a/tests/manual/inverted.html +++ b/tests/manual/inverted.html @@ -5,73 +5,73 @@ :root { /* Helper variables to avoid duplication in the colors. */ - --ck-custom-background: #4A494B; - --ck-custom-foreground: #3a393d; - --ck-custom-border: #383738; - --ck-custom-white: #fff; + --ck-custom-background: hsl(270, 1%, 29%); + --ck-custom-foreground: hsl(255, 3%, 23%); + --ck-custom-border: hsl(300, 1%, 22%); + --ck-custom-white: hsl(0, 0%, 100%); --ck-color-base-foreground: var(--ck-custom-background); /* -- Overrides generic colors -------------------------------------------------------------- */ - --ck-color-focus-border: #48a3f5; - --ck-color-text: #fafafa; - --ck-color-shadow-drop: rgba( 0, 0, 0, .2 ); - --ck-color-shadow-inner: rgba( 0, 0, 0, .1 ); + --ck-color-focus-border: hsl(208, 90%, 62%); + --ck-color-text: hsl(0, 0%, 98%); + --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2); + --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1); /* -- Overrides the default .ck-button class colors ----------------------------------------- */ --ck-color-button-default-background: var(--ck-custom-background); --ck-color-button-default-border: var(--ck-custom-border); - --ck-color-button-default-focus-background: #434244; - --ck-color-button-default-focus-border: #323232; - --ck-color-button-default-active-background: #3f3e40; - --ck-color-button-default-active-border: #302f30; - --ck-color-button-default-active-shadow: #3b3a3c; + --ck-color-button-default-focus-background: hsl(270, 1%, 26%); + --ck-color-button-default-focus-border: hsl(0, 0%, 20%); + --ck-color-button-default-active-background: hsl(270, 2%, 25%); + --ck-color-button-default-active-border: hsl(300, 1%, 19%); + --ck-color-button-default-active-shadow: hsl(270, 2%, 23%); --ck-color-button-default-disabled-background: var(--ck-custom-background); --ck-color-button-default-disabled-border: var(--ck-custom-border); --ck-color-button-on-background: var(--ck-custom-foreground); --ck-color-button-on-border: var(--ck-custom-border); - --ck-color-button-on-focus-background: #343337; - --ck-color-button-on-focus-border: #323232; - --ck-color-button-on-active-background: #313034; - --ck-color-button-on-active-border: #302f30; - --ck-color-button-on-active-shadow: #2e2e31; + --ck-color-button-on-focus-background: hsl(255, 4%, 21%); + --ck-color-button-on-focus-border: hsl(0, 0%, 20%); + --ck-color-button-on-active-background: hsl(255, 4%, 20%); + --ck-color-button-on-active-border: hsl(300, 1%, 19%); + --ck-color-button-on-active-shadow: hsl(240, 3%, 19%); --ck-color-button-on-disabled-background: var(--ck-custom-foreground); --ck-color-button-on-disabled-border: var(--ck-custom-border); - --ck-color-button-action-background: #1ABC9C; - --ck-color-button-action-border: #49d2b7; - --ck-color-button-action-focus-background: #17a98c; - --ck-color-button-action-focus-border: #42bda5; - --ck-color-button-action-active-background: #16a085; - --ck-color-button-action-active-border: #3eb39c; - --ck-color-button-action-active-shadow: #15967d; - --ck-color-button-action-disabled-background: #1ABC9C; - --ck-color-button-action-disabled-border: #49d2b7; + --ck-color-button-action-background: hsl(168, 76%, 42%); + --ck-color-button-action-border: hsl(168, 60%, 55%); + --ck-color-button-action-focus-background: hsl(168, 76%, 38%); + --ck-color-button-action-focus-border: hsl(168, 48%, 50%); + --ck-color-button-action-active-background: hsl(168, 76%, 36%); + --ck-color-button-action-active-border: hsl(168, 49%, 47%); + --ck-color-button-action-active-shadow: hsl(168, 75%, 34%); + --ck-color-button-action-disabled-background: hsl(168, 76%, 42%); + --ck-color-button-action-disabled-border: hsl(168, 60%, 55%); --ck-color-button-action-text: var(--ck-custom-white); /* -- Overrides the default .ck-dropdown class colors --------------------------------------- */ --ck-color-dropdown-panel-background: var(--ck-custom-background); --ck-color-dropdown-panel-border: var(--ck-custom-foreground); - --ck-color-dropdown-symbol: #f1f1f1; + --ck-color-dropdown-symbol: hsl(0, 0%, 95%); /* -- Overrides the default .ck-input class colors ------------------------------------------ */ --ck-color-input-background: var(--ck-custom-foreground); - --ck-color-input-border: #6b6970; - --ck-color-input-text: #fafafa; - --ck-color-input-disabled-background: #343337; - --ck-color-input-disabled-border: #605f65; - --ck-color-input-disabled-text: #757575; + --ck-color-input-border: hsl(257, 3%, 43%); + --ck-color-input-text: hsl(0, 0%, 98%); + --ck-color-input-disabled-background: hsl(255, 4%, 21%); + --ck-color-input-disabled-border: hsl(250, 3%, 38%); + --ck-color-input-disabled-text: hsl(0, 0%, 46%); /* -- Overrides the default .ck-list class colors ------------------------------------------- */ --ck-color-list-background: var(--ck-custom-background); --ck-color-list-item-background-hover: var(--ck-custom-foreground); - --ck-color-list-item-background-active: #1A8BF1; + --ck-color-list-item-background-active: hsl(208, 88%, 52%); --ck-color-list-item-text-active: var(--ck-custom-white); /* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */ @@ -86,40 +86,40 @@ /* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */ - --ck-color-tooltip-background: #212025; - --ck-color-tooltip-text: #eee; + --ck-color-tooltip-background: hsl(252, 7%, 14%); + --ck-color-tooltip-text: hsl(0, 0%, 93%); /* -- Overrides the default colors used by the editor --------------------------------------- */ --ck-color-editor-border: var(--ck-custom-background); --ck-color-editor-toolbar-background: var(--ck-custom-background); - --ck-color-editor-toolbar-button-on-background: #2d2d2d; + --ck-color-editor-toolbar-button-on-background: hsl(0, 0%, 18%); --ck-color-editor-toolbar-button-on-border: transparent; - --ck-color-editor-toolbar-button-on-focus-background: #353535; + --ck-color-editor-toolbar-button-on-focus-background: hsl(0, 0%, 21%); --ck-color-editor-toolbar-button-on-focus-border: transparent; - --ck-color-editor-toolbar-button-on-active-background: #272727; + --ck-color-editor-toolbar-button-on-active-background: hsl(0, 0%, 15%); --ck-color-editor-toolbar-button-on-active-border: transparent; - --ck-color-editor-toolbar-button-on-active-shadow: #2d2d2d; + --ck-color-editor-toolbar-button-on-active-shadow: hsl(0, 0%, 18%); --ck-color-editor-toolbar-button-on-disabled-background: transparent; --ck-color-editor-toolbar-button-on-disabled-border: transparent; - --ck-color-editor-dropdown-background: #535254; + --ck-color-editor-dropdown-background: hsl(270, 1%, 33%); /* -- Overrides the default colors used by ckeditor5-image package -------------------------- */ - --ck-color-image-caption-background: #f7f7f7; - --ck-color-image-caption-text: #333; + --ck-color-image-caption-background: hsl(0, 0%, 97%); + --ck-color-image-caption-text: hsl(0, 0%, 20%); /* -- Overrides the default colors used by ckeditor5-widget package ------------------------- */ - --ck-color-widget-border-blurred: #ddd; - --ck-color-widget-border-hover: #FFD25C; + --ck-color-widget-border-blurred: hsl(0, 0%, 87%); + --ck-color-widget-border-hover: hsl(43, 100%, 68%); --ck-color-widget-editable-focused-background: var(--ck-custom-white); /* -- Overrides the default colors used by ckeditor5-link package ------------------------- */ - --ck-color-link-default: #81eaff; + --ck-color-link-default: hsl(190, 100%, 75%); } diff --git a/theme/ckeditor5-basic-styles/code.css b/theme/ckeditor5-basic-styles/code.css index 22b44fa..cc4ab5f 100644 --- a/theme/ckeditor5-basic-styles/code.css +++ b/theme/ckeditor5-basic-styles/code.css @@ -4,7 +4,7 @@ */ :root { - --ck-color-code: rgba( 200, 200, 200, 0.3 ); + --ck-color-code: hsla(0, 0%, 78%, 0.3); } code { diff --git a/theme/ckeditor5-ui/globals/_reset.css b/theme/ckeditor5-ui/globals/_reset.css index dcbd242..d42465e 100644 --- a/theme/ckeditor5-ui/globals/_reset.css +++ b/theme/ckeditor5-ui/globals/_reset.css @@ -65,7 +65,7 @@ & fieldset { padding: 10px; - border: 2px groove #E0DFE3; + border: 2px groove hsl(255, 7%, 88%); } & button::-moz-focus-inner { diff --git a/theme/ckeditor5-widget/widget.css b/theme/ckeditor5-widget/widget.css index a3b1141..d22fba3 100644 --- a/theme/ckeditor5-widget/widget.css +++ b/theme/ckeditor5-widget/widget.css @@ -8,8 +8,8 @@ :root { --ck-widget-outline-thickness: 3px; - --ck-color-widget-border-blurred: #ddd; - --ck-color-widget-border-hover: #FFD25C; + --ck-color-widget-border-blurred: hsl(0, 0%, 87%); + --ck-color-widget-border-hover: hsl(43, 100%, 68%); --ck-color-widget-editable-focused-background: var(--ck-color-base-background), } From dd67220ac4da77807b319f73863b8247a8884b7d Mon Sep 17 00:00:00 2001 From: dkonopka Date: Tue, 6 Feb 2018 08:30:42 +0100 Subject: [PATCH 2/5] Converted missing hex colors to hsl. --- docs/framework/guides/theme-customization.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/framework/guides/theme-customization.md b/docs/framework/guides/theme-customization.md index ddcfcbd..fa2e05d 100644 --- a/docs/framework/guides/theme-customization.md +++ b/docs/framework/guides/theme-customization.md @@ -221,7 +221,7 @@ In the editor demo presented and the very beginning of this guide, the drop down ```css :root { - --ck-shadow-color: #646265; + --ck-shadow-color: hsl(280, 1.5%, 39%); } .ck-editor-toolbar .ck-button.ck-dropdown__button { @@ -237,7 +237,7 @@ Again, the rule above could be added directly to any stylesheet in the web page /* The shadow should be 10% brighter than the toolbar background. */ :root { - --ck-shadow-color: #646265; + --ck-shadow-color: hsl(280, 1.5%, 39%); } .ck-editor-toolbar { From 213536d17409187be2257081fdf0d28883eaa832 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 6 Feb 2018 13:50:17 +0100 Subject: [PATCH 3/5] Moved content styles to respective styles sheets in the packages. --- theme/ckeditor5-basic-styles/code.css | 14 -------- theme/ckeditor5-block-quote/blockquote.css | 16 --------- theme/ckeditor5-image/image.css | 18 ---------- theme/ckeditor5-image/imagecaption.css | 17 ---------- theme/ckeditor5-image/imagestyle.css | 38 ---------------------- 5 files changed, 103 deletions(-) delete mode 100644 theme/ckeditor5-basic-styles/code.css delete mode 100644 theme/ckeditor5-block-quote/blockquote.css delete mode 100644 theme/ckeditor5-image/image.css delete mode 100644 theme/ckeditor5-image/imagecaption.css delete mode 100644 theme/ckeditor5-image/imagestyle.css diff --git a/theme/ckeditor5-basic-styles/code.css b/theme/ckeditor5-basic-styles/code.css deleted file mode 100644 index cc4ab5f..0000000 --- a/theme/ckeditor5-basic-styles/code.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. - * For licensing, see LICENSE.md. - */ - -:root { - --ck-color-code: hsla(0, 0%, 78%, 0.3); -} - -code { - background-color: var(--ck-color-code); - padding: var(--ck-spacing-tiny); - border-radius: var(--ck-border-radius); -} diff --git a/theme/ckeditor5-block-quote/blockquote.css b/theme/ckeditor5-block-quote/blockquote.css deleted file mode 100644 index b165b50..0000000 --- a/theme/ckeditor5-block-quote/blockquote.css +++ /dev/null @@ -1,16 +0,0 @@ -/** - * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. - * For licensing, see LICENSE.md. - */ - -:root { - --ck-block-quote-border-width: 5px; - --ck-block-quote-padding: 20px; -} - -blockquote { - border-left: solid 5px var(--ck-color-block-quote-border); - padding-left: var(--ck-block-quote-padding); - margin-left: 0; - font-style: italic; -} diff --git a/theme/ckeditor5-image/image.css b/theme/ckeditor5-image/image.css deleted file mode 100644 index 83b9391..0000000 --- a/theme/ckeditor5-image/image.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. - * For licensing, see LICENSE.md. - */ - -.ck-editor__editable { - & .image { - text-align: center; - - & > img { - /* Center the image if its width is smaller than content's width. */ - margin: 0 auto; - - /* Make sure the image never exceeds the size of the parent container (#67). */ - max-width: 100%; - } - } -} diff --git a/theme/ckeditor5-image/imagecaption.css b/theme/ckeditor5-image/imagecaption.css deleted file mode 100644 index 514ff18..0000000 --- a/theme/ckeditor5-image/imagecaption.css +++ /dev/null @@ -1,17 +0,0 @@ -/* - * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. - * For licensing, see LICENSE.md. - */ - -:root { - --ck-color-image-caption-background: var(--ck-color-base-foreground); - --ck-color-image-caption-text: var(--ck-color-base-text); -} - -.ck-editor__editable .image > figcaption { - color: var(--ck-color-image-caption-text); - background-color: var(--ck-color-image-caption-background); - padding: var(--ck-spacing-standard); - font-size: var(--ck-font-size-small); - outline-offset: -1px; -} diff --git a/theme/ckeditor5-image/imagestyle.css b/theme/ckeditor5-image/imagestyle.css deleted file mode 100644 index 182fee0..0000000 --- a/theme/ckeditor5-image/imagestyle.css +++ /dev/null @@ -1,38 +0,0 @@ -/* - * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. - * For licensing, see LICENSE.md. - */ - -:root { - --ck-image-spacing: calc(5 * var(--ck-spacing-small)); - --ck-image-max-width: 50%; -} - -.ck-editor__editable { - & .image-style-side, - & .image-style-align-left, - & .image-style-align-center, - & .image-style-align-right { - max-width: var(--ck-image-max-width); - } - - & .image-style-side { - float: right; - margin-left: var(--ck-image-spacing); - } - - & .image-style-align-left { - float: left; - margin-right: var(--ck-image-spacing); - } - - & .image-style-align-center { - margin-left: auto; - margin-right: auto; - } - - & .image-style-align-right { - float: right; - margin-left: var(--ck-image-spacing); - } -} From b68beb153f620b05b28b5b2c5476303f45470f44 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 6 Feb 2018 13:51:07 +0100 Subject: [PATCH 4/5] Moved ck-color-block-quote-border variable from colors to the block-quote package. --- theme/ckeditor5-ui/globals/_colors.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/theme/ckeditor5-ui/globals/_colors.css b/theme/ckeditor5-ui/globals/_colors.css index 9fc01b6..a04fb0c 100644 --- a/theme/ckeditor5-ui/globals/_colors.css +++ b/theme/ckeditor5-ui/globals/_colors.css @@ -114,10 +114,6 @@ --ck-color-engine-placeholder-text: hsl(0, 0%, 76%); - /* -- Block quote --------------------------------------------------------------------------- */ - - --ck-color-block-quote-border: hsl(0, 0%, 80%); - /* -- Upload -------------------------------------------------------------------------------- */ --ck-color-upload-bar-background: hsl(209, 92%, 70%); From fc5e9f4fa9cbc78bd5b0b61a6307091e4b0292b0 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 6 Feb 2018 14:09:17 +0100 Subject: [PATCH 5/5] Moved heading content styles to ckeditor5-heading. --- theme/ckeditor5-heading/heading.css | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/theme/ckeditor5-heading/heading.css b/theme/ckeditor5-heading/heading.css index 337169a..b286df7 100644 --- a/theme/ckeditor5-heading/heading.css +++ b/theme/ckeditor5-heading/heading.css @@ -3,29 +3,6 @@ * For licensing, see LICENSE.md. */ -.ck-heading_heading1 { - font-size: calc(var(--ck-font-size-normal) * 1.5); -} - -.ck-heading_heading2 { - font-size: calc(var(--ck-font-size-normal) * 1.3); -} - -.ck-heading_heading3 { - font-size: calc(var(--ck-font-size-normal) * 1.1); -} - -/* Using absolute units to make sure each element has the same height and padding. -https://github.com/ckeditor/ckeditor5-heading/issues/63 */ -[class*="ck-heading_"] { - line-height: calc(1.5 * var(--ck-font-size-base)); - padding: calc(0.8 * var(--ck-font-size-base)); -} - -[class*="ck-heading_heading"] { - font-weight: bold; -} - /* Resize dropdown's button label. */ .ck-dropdown.ck-heading-dropdown { & .ck-dropdown__button .ck-button__label {