浏览代码

Merge branch 'master' into t/113

Piotrek Koszuliński 7 年之前
父节点
当前提交
fd50bb971a

+ 45 - 45
packages/ckeditor5-theme-lark/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);
 }

+ 1 - 1
packages/ckeditor5-theme-lark/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 {

+ 47 - 47
packages/ckeditor5-theme-lark/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);
 }
 ```
@@ -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 {

+ 46 - 46
packages/ckeditor5-theme-lark/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%);
 	}
 </style>
 

+ 0 - 14
packages/ckeditor5-theme-lark/theme/ckeditor5-basic-styles/code.css

@@ -1,14 +0,0 @@
-/*
- * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-:root {
-	--ck-color-code: rgba( 200, 200, 200, 0.3 );
-}
-
-code {
-	background-color: var(--ck-color-code);
-	padding: var(--ck-spacing-tiny);
-	border-radius: var(--ck-border-radius);
-}

+ 0 - 16
packages/ckeditor5-theme-lark/theme/ckeditor5-block-quote/blockquote.css

@@ -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;
-}

+ 0 - 23
packages/ckeditor5-theme-lark/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 {

+ 0 - 18
packages/ckeditor5-theme-lark/theme/ckeditor5-image/image.css

@@ -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%;
-		}
-	}
-}

+ 0 - 17
packages/ckeditor5-theme-lark/theme/ckeditor5-image/imagecaption.css

@@ -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;
-}

+ 0 - 38
packages/ckeditor5-theme-lark/theme/ckeditor5-image/imagestyle.css

@@ -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);
-	}
-}

+ 0 - 4
packages/ckeditor5-theme-lark/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%);

+ 1 - 1
packages/ckeditor5-theme-lark/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 {

+ 2 - 2
packages/ckeditor5-theme-lark/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),
 }