Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Merge pull request #126 from ckeditor/t/124
Browse files Browse the repository at this point in the history 
Other: All colors in the styles should be in the HSLa format. Closes #124.
  • Loading branch information
@oleq
oleq authored Feb 6, 2018
2 parents d717139 + dd67220 commit 33c7e0d
Show file tree
Hide file tree
Showing 7 changed files with 143 additions and 143 deletions.
90 changes: 45 additions & 45 deletions docs/_snippets/examples/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ---------------------------------- */
Expand All @@ -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);
}
2 changes: 1 addition & 1 deletion docs/_snippets/examples/extras.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
94 changes: 47 additions & 47 deletions docs/framework/guides/theme-customization.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ---------------------------------- */
Expand All @@ -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);
}
```
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down
Loading

0 comments on commit 33c7e0d

Please sign in to comment.