Merge pull request #139 from ckeditor/t/135

Other: Removed the "generic" layer of the theme to simplify it and improve the maintainability. Closes #135.

BREAKING CHANGE: The `.ck-editor-toolbar` CSS class has been removed.
BREAKING CHANGE: Various CSS variables (mostly colors) have been removed. Please make sure your code uses the latest theme API.
BREAKING CHANGE: From now on there's only one subset of the theme, aligned to the default look of CKEditor 5.

docs/_snippets/examples/custom.css

@@ -35,15 +35,15 @@
 	--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: 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-on-background: hsl(0, 0%, 24%);
+	--ck-color-button-on-border: transparent;
+	--ck-color-button-on-focus-background: hsl(0, 0%, 21%);
+	--ck-color-button-on-focus-border: transparent;
+	--ck-color-button-on-active-background: hsl(0, 0%, 15%);
+	--ck-color-button-on-active-border: transparent;
+	--ck-color-button-on-active-shadow: hsl(0, 0%, 18%);
+	--ck-color-button-on-disabled-background: transparent;
+	--ck-color-button-on-disabled-border: transparent;
 
 	--ck-color-button-action-background: hsl(168, 76%, 42%);
 	--ck-color-button-action-border: hsl(168, 60%, 55%);
@@ -95,20 +95,8 @@
 
 	/* -- 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: hsl(0, 0%, 24%);
-	--ck-color-editor-toolbar-button-on-border: transparent;
-	--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: hsl(0, 0%, 15%);
-	--ck-color-editor-toolbar-button-on-active-border: transparent;
-	--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: hsl(270, 1%, 33%);
+	--ck-color-base-border: var(--ck-custom-background);
+	--ck-color-dropdown-background: hsl(270, 1%, 33%);
 
 	/* -- Overrides the default colors used by ckeditor5-image package -------------------------- */
 

docs/framework/guides/theme-customization.md

@@ -102,15 +102,15 @@ The file containing custom variables will be named `custom.css` and it will look
 	--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: 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-on-background: hsl(0, 0%, 24%);
+	--ck-color-button-on-border: transparent;
+	--ck-color-button-on-focus-background: hsl(0, 0%, 21%);
+	--ck-color-button-on-focus-border: transparent;
+	--ck-color-button-on-active-background: hsl(0, 0%, 15%);
+	--ck-color-button-on-active-border: transparent;
+	--ck-color-button-on-active-shadow: hsl(0, 0%, 18%);
+	--ck-color-button-on-disabled-background: transparent;
+	--ck-color-button-on-disabled-border: transparent;
 
 	--ck-color-button-action-background: hsl(168, 76%, 42%);
 	--ck-color-button-action-border: hsl(168, 60%, 55%);
@@ -152,7 +152,7 @@ The file containing custom variables will be named `custom.css` and it will look
 
 	/* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */
 
-	--ck-color-toolbar-background: var(--ck-custom-foreground);
+	--ck-color-toolbar-background: var(--ck-custom-background);
 	--ck-color-toolbar-border: var(--ck-custom-border);
 
 	/* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */
@@ -162,20 +162,8 @@ The file containing custom variables will be named `custom.css` and it will look
 
 	/* -- 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: hsl(0, 0%, 24%);
-	--ck-color-editor-toolbar-button-on-border: transparent;
-	--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: hsl(0, 0%, 15%);
-	--ck-color-editor-toolbar-button-on-active-border: transparent;
-	--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: hsl(270, 1%, 33%);
+	--ck-color-base-border: var(--ck-custom-background);
+	--ck-color-dropdown-background: hsl(270, 1%, 33%);
 
 	/* -- Overrides the default colors used by ckeditor5-image package -------------------------- */
 

tests/manual/inverted.html

@@ -81,7 +81,7 @@
 
 		/* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */
 
-		--ck-color-toolbar-background: var(--ck-custom-foreground);
+		--ck-color-toolbar-background: var(--ck-custom-background);
 		--ck-color-toolbar-border: var(--ck-custom-border);
 
 		/* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */
@@ -91,20 +91,19 @@
 
 		/* -- 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-base-border: var(--ck-custom-background);
 
-		--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: hsl(0, 0%, 21%);
-		--ck-color-editor-toolbar-button-on-focus-border: transparent;
-		--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: hsl(0, 0%, 18%);
-		--ck-color-editor-toolbar-button-on-disabled-background: transparent;
-		--ck-color-editor-toolbar-button-on-disabled-border: transparent;
+		--ck-color-button-on-background: hsl(0, 0%, 18%);
+		--ck-color-button-on-border: transparent;
+		--ck-color-button-on-focus-background: hsl(0, 0%, 21%);
+		--ck-color-button-on-focus-border: transparent;
+		--ck-color-button-on-active-background: hsl(0, 0%, 15%);
+		--ck-color-button-on-active-border: transparent;
+		--ck-color-button-on-active-shadow: hsl(0, 0%, 18%);
+		--ck-color-button-on-disabled-background: transparent;
+		--ck-color-button-on-disabled-border: transparent;
 
-		--ck-color-editor-dropdown-background: hsl(270, 1%, 33%);
+		--ck-color-editor-background: hsl(270, 1%, 33%);
 
 		/* -- Overrides the default colors used by ckeditor5-image package -------------------------- */
 

tests/manual/theme.html

@@ -53,7 +53,6 @@ <h3>Button: Icon</h3>
 
 		<div id="button-icon-custom"></div>
 
-		<br/>
 		<br/>
 
 		<div id="button-icon-states"></div>
@@ -68,7 +67,6 @@ <h3>Button: Responsiveness</h3>
 
 	<h3>Button: Tooltip</h3>
 	<div id="button-tooltip" class="ck-reset_all"></div>
-<hr/>
 
 <h2>Dropdown</h2>
 
@@ -78,8 +76,6 @@ <h3>ListDropdown</h3>
 	<h3>ButtonDropdown</h3>
 	<div id="button-dropdown" class="ck-reset_all"></div>
 
-<hr/>
-
 <h2>Toolbar</h2>
 
 	<h3>Toolbar: Text</h3>
@@ -100,8 +96,6 @@ <h3>Toolbar: Item separators</h3>
 	<h3>Toolbar: Multi-row</h3>
 	<div id="toolbar-multi-row" class="ck-reset_all"></div>
 
-<hr/>
-
 <h2>Inputs</h2>
 
 	<h3>Labeled</h3>