Przeglądaj źródła

Refactored theme structure for easier loading.

Aleksander Nowodzinski 8 lat temu
rodzic
commit
2a6da198a1
36 zmienionych plików z 197 dodań i 173 usunięć
  1. 1 0
      packages/ckeditor5-theme-lark/package.json
  2. 0 4
      packages/ckeditor5-theme-lark/theme/ckeditor5-basic-styles/code.css
  3. 1 2
      packages/ckeditor5-theme-lark/theme/ckeditor5-editor-classic/classiceditor.css
  4. 1 5
      packages/ckeditor5-theme-lark/theme/ckeditor5-heading/heading.css
  5. 0 4
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/imagecaption.css
  6. 0 2
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/imagestyle.css
  7. 0 2
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css
  8. 0 2
      packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
  9. 10 13
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button.css
  10. 3 5
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown.css
  11. 6 8
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui.css
  12. 3 5
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/icon.css
  13. 4 5
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext.css
  14. 3 6
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list.css
  15. 2 4
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css
  16. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/stickypanel.css
  17. 1 4
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css
  18. 1 3
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css
  19. 37 4
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css
  20. 11 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_disabled.css
  21. 16 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_focus.css
  22. 0 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_fonts.css
  23. 0 3
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_reset.css
  24. 11 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_rounded.css
  25. 16 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_shadow.css
  26. 13 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_spacing.css
  27. 13 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css
  28. 10 12
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/mixins/_button.css
  29. 4 6
      packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css
  30. 0 13
      packages/ckeditor5-theme-lark/theme/helpers/spacing.css
  31. 0 39
      packages/ckeditor5-theme-lark/theme/helpers/states.css
  32. 11 0
      packages/ckeditor5-theme-lark/theme/mixins/_disabled.css
  33. 13 0
      packages/ckeditor5-theme-lark/theme/mixins/_focus.css
  34. 0 7
      packages/ckeditor5-theme-lark/theme/mixins/_rounded.css
  35. 0 14
      packages/ckeditor5-theme-lark/theme/mixins/_shadow.css
  36. 5 0
      packages/ckeditor5-theme-lark/theme/theme.css

+ 1 - 0
packages/ckeditor5-theme-lark/package.json

@@ -39,6 +39,7 @@
     "lint": "eslint --quiet '**/*.js'",
     "precommit": "lint-staged"
   },
+  "main": "./theme/theme.css",
   "lint-staged": {
     "**/*.js": [
       "eslint --quiet"

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

@@ -3,10 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../helpers/colors.css";
-@import "../helpers/rounded.css";
-@import "../helpers/spacing.css";
-
 :root {
 	--ck-color-code: rgba( 200, 200, 200, 0.3 );
 }

+ 1 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-editor-classic/classiceditor.css

@@ -3,8 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../helpers/colors.css";
-@import "../helpers/rounded.css";
+@import "../mixins/_rounded.css";
 
 .ck-editor__top {
 	& .ck-sticky-panel {

+ 1 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-heading/heading.css

@@ -3,9 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../helpers/fonts.css";
-@import "../helpers/spacing.css";
-
 .ck-heading_heading1 {
 	font-size: 1.5em;
 }
@@ -22,8 +19,7 @@
 https://github.com/ckeditor/ckeditor5-heading/issues/63 */
 [class*="ck-heading_"] {
 	line-height: calc(1.8 * var(--ck-font-size-base));
-	/* Strip the units from $ck-def-spacing here. */
-	padding: calc(var(--ck-spacing-unit) * var(--ck-font-size-base));
+	padding: calc(0.8 * var(--ck-font-size-base));
 }
 
 [class*="ck-heading_heading"] {

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

@@ -3,10 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../helpers/colors.css";
-@import "../helpers/fonts.css";
-@import "../helpers/spacing.css";
-
 :root {
 	--ck-color-image-caption-background: var(--ck-color-base-foreground);
 	--ck-color-image-caption-text: var(--ck-color-base-text);

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

@@ -3,8 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../helpers/spacing.css";
-
 :root {
 	--ck-image-spacing: calc(5 * var(--ck-spacing-small));
 	--ck-image-max-width: 50%;

+ 0 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css

@@ -3,8 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../helpers/spacing.css";
-
 .cke-text-alternative-form {
 	padding: var(--ck-spacing-large);
 

+ 0 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css

@@ -3,8 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../helpers/spacing.css";
-
 .ck-link-form {
 	padding: var(--ck-spacing-large);
 

+ 10 - 13
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button.css

@@ -3,18 +3,15 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../../helpers/colors.css";
-@import "../../helpers/fonts.css";
-@import "../../helpers/rounded.css";
-@import "../../helpers/spacing.css";
-@import "../../helpers/states.css";
-@import "../../helpers/shadow.css";
-
-@import "../helpers/button.css";
+@import "../../mixins/_focus.css";
+@import "../../mixins/_shadow.css";
+@import "../../mixins/_disabled.css";
+@import "../../mixins/_rounded.css";
+@import "../mixins/_button.css";
 
 .ck-button,
 a.ck-button {
-	@mixin ck-button-colors var(--ck-color-button-default-background), var(--ck-color-button-default-border);
+	@mixin ck-button-colors --ck-color-button-default;
 	@mixin ck-rounded-corners;
 
 	border-width: 1px;
@@ -63,7 +60,7 @@ a.ck-button {
 
 	/* A style of the button which is currently on, e.g. its feature is active. */
 	&.ck-on {
-		@mixin ck-button-colors var(--ck-color-button-on-background), var(--ck-color-button-on-border);
+		@mixin ck-button-colors --ck-color-button-on;
 	}
 
 	& .ck-icon {
@@ -89,15 +86,15 @@ a.ck-button {
 /* A style of the button which handles the primary action. */
 .ck-button-action,
 a.ck-button-action {
-	@mixin ck-button-colors var(--ck-color-button-action-background), var(--ck-color-button-action-border);
+	@mixin ck-button-colors --ck-color-button-action;
 
-	text-shadow: 0 -1px color(var(--ck-color-button-action-background) shade(20%));
+	text-shadow: 0 -1px var(--ck-color-button-action-border);
 	color: var(--ck-color-button-action-text);
 
 	&:hover,
 	&:focus,
 	&:active {
-		text-shadow: 0 -1px color(var(--ck-color-button-action-background) shade(20%))
+		text-shadow: 0 -1px var(--ck-color-button-action-active-border);
 	}
 }
 

+ 3 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown.css

@@ -3,11 +3,9 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../../helpers/colors.css";
-@import "../../helpers/rounded.css";
-@import "../../helpers/spacing.css";
-@import "../../helpers/states.css";
-@import "../../helpers/shadow.css";
+@import "../../mixins/_rounded.css";
+@import "../../mixins/_disabled.css";
+@import "../../mixins/_shadow.css";
 
 .ck-dropdown {
 	/* Enable font size inheritance, which allows fluid UI scaling. */

+ 6 - 8
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui.css

@@ -3,13 +3,11 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../../helpers/colors.css";
-@import "../../helpers/rounded.css";
-@import "../../helpers/spacing.css";
-@import "../../helpers/states.css";
-@import "../../helpers/shadow.css";
-
-@import '../helpers/button.css';
+@import "../../mixins/_rounded.css";
+@import "../../mixins/_disabled.css";
+@import "../../mixins/_shadow.css";
+@import "../../mixins/_focus.css";
+@import "../mixins/_button.css";
 
 .ck-editor__editable {
 	@mixin ck-rounded-corners;
@@ -39,7 +37,7 @@
 		}
 
 		&.ck-on {
-			@mixin ck-button-colors color(var(--ck-color-editor-toolbar-button-background) shade(10%)), color(var(--ck-color-button-default-border) shade(10%));
+			@mixin ck-button-colors --ck-color-editor-toolbar-button-on;
 		}
 	}
 

+ 3 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/icon.css

@@ -3,20 +3,18 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../../helpers/fonts.css";
-
 /**
  * Default width/height of an icon. Note that it equals the default
  * height of the line of text, so e.g. it matches the height of the
  * button's label.
  */
 :root {
-	--ck-icon-min-size: calc(var(--ck-font-size-base)*var(--ck-line-height-base));
+	--ck-icon-min-size: calc(var(--ck-font-size-base) * var(--ck-line-height-base));
 }
 
 svg.ck-icon {
-	width: var(--ck-line-height-base)em;
-	height: var(--ck-line-height-base)em;
+	width: calc(var(--ck-line-height-base) * 1em);
+	height: calc(var(--ck-line-height-base) * 1em);
 
 	min-width: var(--ck-icon-min-size);
 	min-height: var(--ck-icon-min-size);

+ 4 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext.css

@@ -3,11 +3,10 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../../helpers/colors.css";
-@import "../../helpers/rounded.css";
-@import "../../helpers/spacing.css";
-@import "../../helpers/states.css";
-@import "../../helpers/shadow.css";
+
+@import "../../mixins/_rounded.css";
+@import "../../mixins/_focus.css";
+@import "../../mixins/_shadow.css";
 
 .ck-input-text {
 	@mixin ck-rounded-corners;

+ 3 - 6
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list.css

@@ -3,15 +3,12 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../../helpers/colors.css";
-@import "../../helpers/rounded.css";
-@import "../../helpers/spacing.css";
-@import "../../helpers/states.css";
-@import "../../helpers/shadow.css";
+
+@import "../../mixins/_rounded.css";
+@import "../../mixins/_shadow.css";
 
 .ck-list {
 	@mixin ck-rounded-corners;
-	@mixin ck-unselectable;
 
 	list-style-type: none;
 	background: var(--ck-color-list-background);

+ 2 - 4
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css

@@ -3,10 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../../../helpers/colors.css";
-@import "../../../helpers/rounded.css";
-@import "../../../helpers/states.css";
-@import "../../../helpers/shadow.css";
+@import "../../../mixins/_rounded.css";
+@import "../../../mixins/_shadow.css";
 
 :root {
 	--ck-balloon-arrow-offset: 2px;

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/stickypanel.css

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../../../helpers/shadow.css";
+@import "../../../mixins/_shadow.css";
 
 .ck-editor {
 	& .ck-sticky-panel {

+ 1 - 4
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css

@@ -3,10 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../../../helpers/colors.css";
-@import "../../../helpers/rounded.css";
-@import "../../../helpers/spacing.css";
-@import "../../../helpers/states.css";
+@import "../../../mixins/_rounded.css";
 
 .ck-toolbar {
 	@mixin ck-rounded-corners;

+ 1 - 3
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip.css → packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css

@@ -3,9 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../../helpers/colors.css";
-@import "../../helpers/rounded.css";
-@import "../../helpers/spacing.css";
+@import "../../../mixins/_rounded.css";
 
 :root {
 	--ck-tooltip-arrow-size: 5px;

+ 37 - 4
packages/ckeditor5-theme-lark/theme/helpers/colors.css → packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css

@@ -6,7 +6,7 @@
 :root {
 	--ck-color-base-foreground: 						#f7f7f7;
 	--ck-color-base-background: 						#fff;
-	--ck-color-base-border: 							color(var(--ck-color-base-background) shade(25%));
+	--ck-color-base-border: 							#BFBFBF;
 	--ck-color-base-action: 							#61B145;
 	--ck-color-base-focus: 								#6ab5f9;
 	--ck-color-base-text: 								#333;
@@ -23,10 +23,33 @@
 
 	--ck-color-button-default-background: 				var(--ck-color-base-background);
 	--ck-color-button-default-border: 					var(--ck-color-base-border);
+	--ck-color-button-default-focus-background: 		#E6E6E6;
+	--ck-color-button-default-focus-border: 			#a5a5a5;
+	--ck-color-button-default-active-background: 		#D9D9D9;
+	--ck-color-button-default-active-border: 			#999999;
+	--ck-color-button-default-active-shadow: 			#BFBFBF;
+	--ck-color-button-default-disabled-background: 		#ffffff;
+	--ck-color-button-default-disabled-border: 			#c6c6c6;
+
 	--ck-color-button-on-background: 					var(--ck-color-base-foreground);
-	--ck-color-button-on-border: 						color(var(--ck-color-base-foreground) shade(25%));
+	--ck-color-button-on-border: 						#B7B7B7;
+	--ck-color-button-on-focus-background: 				#dedede;
+	--ck-color-button-on-focus-border: 					#9e9e9e;
+	--ck-color-button-on-active-background: 			#d1d1d1;
+	--ck-color-button-on-active-border: 				#919191;
+	--ck-color-button-on-active-shadow: 				#777777;
+	--ck-color-button-on-disabled-background: 			#ffffff;
+	--ck-color-button-on-disabled-border: 				#d1d1d1;
+
 	--ck-color-button-action-background: 				var(--ck-color-base-action);
-	--ck-color-button-action-border: 					color(var(--ck-color-base-action) shade(20%));
+	--ck-color-button-action-border: 					#396828;
+	--ck-color-button-action-focus-background: 			#4d8c37;
+	--ck-color-button-action-focus-border: 				#25431a;
+	--ck-color-button-action-active-background: 		#437a30;
+	--ck-color-button-action-active-border: 			#1b3113;
+	--ck-color-button-action-active-shadow: 			#070c05;
+	--ck-color-button-action-disabled-background: 		#7ec366;
+	--ck-color-button-action-disabled-border: 			#4d8d36;
 	--ck-color-button-action-text: 						var(--ck-color-base-background);
 
 	--ck-color-dropdown-panel-background: 				var(--ck-color-base-background);
@@ -53,6 +76,16 @@
 
 	--ck-color-editor-border: 							var(--ck-color-base-border);
 	--ck-color-editor-toolbar-background: 				var(--ck-color-base-foreground);
-	--ck-color-editor-toolbar-button-background: 		var(--ck-color-base-foreground);
+
+	--ck-color-editor-toolbar-button-on-background: 			#dedede;
+	--ck-color-editor-toolbar-button-on-border: 				transparent;
+	--ck-color-editor-toolbar-button-on-focus-background: 		#c5c5c5;
+	--ck-color-editor-toolbar-button-on-focus-border: 			transparent;
+	--ck-color-editor-toolbar-button-on-active-background: 		#b8b8b8;
+	--ck-color-editor-toolbar-button-on-active-border: 			transparent;
+	--ck-color-editor-toolbar-button-on-active-shadow: 			#070c05;
+	--ck-color-editor-toolbar-button-on-disabled-background: 	#dedede;
+	--ck-color-editor-toolbar-button-on-disabled-border: 		transparent;
+
 	--ck-color-editor-dropdown-background: 				var(--ck-color-base-background);
 }

+ 11 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_disabled.css

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	/**
+	 * An opacity value of disabled UI item.
+	 */
+	--ck-disabled-opacity: .5;
+}

+ 16 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_focus.css

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	/**
+	 * A visual style of focused element's outer shadow.
+	 */
+	--ck-focus-outer-shadow: 0 0 3px 2px color(var(--ck-color-border-focus) lightness(+15%));
+
+	/**
+	 * A visual style of focused element's border or outline.
+	 */
+	--ck-focus-ring: 1px solid var(--ck-color-border-focus);
+}

+ 0 - 0
packages/ckeditor5-theme-lark/theme/helpers/fonts.css → packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_fonts.css


+ 0 - 3
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/reset.css → packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_reset.css

@@ -3,9 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../helpers/fonts.css";
-@import "../helpers/colors.css";
-
 @custom-selector :--ck-reset-all
 	.ck-reset_all,
 	.ck-reset_all *,

+ 11 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_rounded.css

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Default border-radius value.
+ */
+:root{
+	--ck-border-radius: 2px;
+}

+ 16 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_shadow.css

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	/**
+	 * A visual style of element's inner shadow (i.e. input).
+	 */
+	--ck-inner-shadow: 2px 2px 3px var(--ck-color-shadow-inner) inset;
+
+	/**
+	 * A visual style of element's drop shadow (i.e. panel).
+	 */
+	--ck-drop-shadow: 0 1px 2px 0 var(--ck-color-shadow-drop);
+}

+ 13 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_spacing.css

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-spacing-unit: 						0.8em;
+	--ck-spacing-large: 					calc(var(--ck-spacing-unit) * 1.5);
+	--ck-spacing-standard: 					var(--ck-spacing-unit);
+	--ck-spacing-medium: 					calc(var(--ck-spacing-unit) * 0.8);
+	--ck-spacing-small: 					calc(var(--ck-spacing-unit) * 0.5);
+	--ck-spacing-tiny: 						calc(var(--ck-spacing-unit) * 0.25);
+}

+ 13 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "./_colors.css";
+@import "./_disabled.css";
+@import "./_focus.css";
+@import "./_fonts.css";
+@import "./_reset.css";
+@import "./_rounded.css";
+@import "./_shadow.css";
+@import "./_spacing.css";

+ 10 - 12
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/helpers/button.css → packages/ckeditor5-theme-lark/theme/ckeditor5-ui/mixins/_button.css

@@ -3,36 +3,34 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../../helpers/colors.css";
-
 /**
  * Implements a button of given background color.
  *
  * @param {String} $background - Background color of the button.
  * @param {String} $border - Border color of the button.
  */
-@define-mixin ck-button-colors $background, $border {
-	background: $background;
-	border-color: $border;
+@define-mixin ck-button-colors $prefix {
+	background: var($(prefix)-background);
+	border-color: var($(prefix)-border);
 
 	&:not(.ck-disabled) {
 		&:hover,
 		&:focus {
-			background: color($background shade(10%));
-			border-color: color($border shade(10%));
+			background: var($(prefix)-focus-background);
+			border-color: var($(prefix)-focus-border);
 		}
 
 		&:active {
-			background: color($background shade(15%));
-			border-color: color($border shade(15%));
-			box-shadow: inset 0 2px 2px color($background shade(25%));
+			background: var($(prefix)-active-background);
+			border-color: var($(prefix)-active-border);
+			box-shadow: inset 0 2px 2px var($(prefix)-active-shadow);
 		}
 	}
 
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
 	&.ck-disabled {
-		background: color($background shade(10%));
-		border-color: color($border tint(10%));
+		background: var($(prefix)-disabled-background);
+		border-color: var($(prefix)-disabled-border);
 	}
 }
 

+ 4 - 6
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

@@ -3,10 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "../helpers/colors.css";
-@import "../helpers/spacing.css";
-@import "../helpers/shadow.css";
-@import "../helpers/states.css";
+@import "../mixins/_focus.css";
+@import "../mixins/_shadow.css";
 
 :root {
 	--ck-widget-outline-thickness: 3px;
@@ -20,7 +18,7 @@
 	margin: var(--ck-spacing-standard) 0;
 	padding: 0;
 
-	&.ck-widget_selected, 
+	&.ck-widget_selected,
 	&.ck-widget_selected:hover {
 		outline: var(--ck-widget-outline-thickness) solid var(--ck-color-border-focus);
 	}
@@ -38,7 +36,7 @@
 
 		/*The `:focus` style is applied before `.ck-editable_focused` class is rendered in the view.
 		These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied.*/
-		&.ck-editable_focused, 
+		&.ck-editable_focused,
 		&:focus {
 			@mixin ck-focus-ring;
 			@mixin ck-box-shadow var(--ck-inner-shadow);

+ 0 - 13
packages/ckeditor5-theme-lark/theme/helpers/spacing.css

@@ -1,13 +0,0 @@
-/*
- * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-:root {
-	--ck-spacing-unit: 						0.8;
-	--ck-spacing-large: 					calc(var(--ck-spacing-unit)*1.5em);
-	--ck-spacing-standard: 					var(--ck-spacing-unit)em;
-	--ck-spacing-medium: 					calc(var(--ck-spacing-unit)*0.8em);
-	--ck-spacing-small: 					calc(var(--ck-spacing-unit)*0.5em);
-	--ck-spacing-tiny: 						calc(var(--ck-spacing-unit)*0.25em);
-}

+ 0 - 39
packages/ckeditor5-theme-lark/theme/helpers/states.css

@@ -1,39 +0,0 @@
-/*
- * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-@import "./colors.css";
-
-:root {
-	/**
-	 * A visual style of focused element's outer shadow.
-	 */
-	--ck-focus-outer-shadow: 0 0 3px 2px color(var(--ck-color-border-focus) lightness(+15%));
-
-	/**
-	 * A visual style of focused element's border or outline.
-	 */
-	--ck-focus-ring: 1px solid var(--ck-color-border-focus);
-
-	/**
-	 * An opacity value of disabled UI item.
-	 */
-	--ck-disabled-opacity: .5;
-}
-
-/**
- * A class which indicates that an element holding it is disabled.
- */
-@define-mixin ck-disabled {
-	opacity: var(--ck-disabled-opacity);
-}
-
-/**
- * A visual style of focused element's border.
- */
-@define-mixin ck-focus-ring {
-	/* Disable native outline. */
-	outline: none;
-	border: var(--ck-focus-ring)
-}

+ 11 - 0
packages/ckeditor5-theme-lark/theme/mixins/_disabled.css

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * A class which indicates that an element holding it is disabled.
+ */
+@define-mixin ck-disabled {
+	opacity: var(--ck-disabled-opacity);
+}

+ 13 - 0
packages/ckeditor5-theme-lark/theme/mixins/_focus.css

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * A visual style of focused element's border.
+ */
+@define-mixin ck-focus-ring {
+	/* Disable native outline. */
+	outline: none;
+	border: var(--ck-focus-ring)
+}

+ 0 - 7
packages/ckeditor5-theme-lark/theme/helpers/rounded.css → packages/ckeditor5-theme-lark/theme/mixins/_rounded.css

@@ -3,13 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-/**
- * Default border-radius value.
- */
-:root{
-	--ck-border-radius: 2px;
-}
-
 /**
  * Implements rounded corner interface for .ck-rounded-corners class.
  *

+ 0 - 14
packages/ckeditor5-theme-lark/theme/helpers/shadow.css → packages/ckeditor5-theme-lark/theme/mixins/_shadow.css

@@ -3,20 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-@import "./colors.css";
-
-:root {
-	/**
-	 * A visual style of element's inner shadow (i.e. input).
-	 */
-	--ck-inner-shadow: 2px 2px 3px var(--ck-color-shadow-inner) inset;
-
-	/**
-	 * A visual style of element's drop shadow (i.e. panel).
-	 */
-	--ck-drop-shadow: 0 1px 2px 0 var(--ck-color-shadow-drop);
-}
-
 /**
  * A helper to combine multiple shadows.
  */

+ 5 - 0
packages/ckeditor5-theme-lark/theme/theme.css

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+