瀏覽代碼

Merge pull request #114 from ckeditor/t/ckeditor5-ui/144

Other: Migrated the theme from SASS to PostCSS (see ckeditor/ckeditor5-ui#144).

BREAKING CHANGE: The styles are no longer developed in SASS which means various `.scss` files (including variables, mixins, etc.) became unavailable. Please refer to the [Theme Customization](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/ui/theme-customization.html) guide to learn more about migration to PostCSS.
Aleksander Nowodzinski 8 年之前
父節點
當前提交
fe7bef9dbd
共有 66 個文件被更改,包括 1671 次插入1205 次删除
  1. 123 0
      packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.css
  2. 0 79
      packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.scss
  3. 21 0
      packages/ckeditor5-theme-lark/docs/_snippets/examples/extras.css
  4. 0 21
      packages/ckeditor5-theme-lark/docs/_snippets/examples/extras.scss
  5. 2 3
      packages/ckeditor5-theme-lark/docs/_snippets/examples/theme-lark.js
  6. 178 162
      packages/ckeditor5-theme-lark/docs/framework/guides/theme-customization.md
  7. 1 0
      packages/ckeditor5-theme-lark/package.json
  8. 0 2
      packages/ckeditor5-theme-lark/tests/manual/theme.js
  9. 14 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-basic-styles/code.css
  10. 16 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-block-quote/blockquote.css
  11. 37 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-editor-classic/classiceditor.css
  12. 9 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-engine/placeholder.css
  13. 34 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-heading/heading.css
  14. 18 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/image.css
  15. 17 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/imagecaption.css
  16. 38 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/imagestyle.css
  17. 27 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css
  18. 39 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
  19. 104 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css
  20. 49 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css
  21. 68 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css
  22. 21 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/icon/icon.css
  23. 33 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css
  24. 8 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/label/label.css
  25. 41 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css
  26. 114 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css
  27. 18 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/stickypanel.css
  28. 47 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css
  29. 82 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css
  30. 124 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css
  31. 11 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_disabled.css
  32. 16 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_focus.css
  33. 16 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_fonts.css
  34. 76 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_reset.css
  35. 11 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_rounded.css
  36. 16 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_shadow.css
  37. 13 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_spacing.css
  38. 13 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css
  39. 45 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/mixins/_button.css
  40. 59 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-upload/imageuploadprogress.css
  41. 46 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css
  42. 0 94
      packages/ckeditor5-theme-lark/theme/components/button.scss
  43. 0 43
      packages/ckeditor5-theme-lark/theme/components/dropdown.scss
  44. 0 66
      packages/ckeditor5-theme-lark/theme/components/editor.scss
  45. 0 7
      packages/ckeditor5-theme-lark/theme/components/icon.scss
  46. 0 25
      packages/ckeditor5-theme-lark/theme/components/inputtext.scss
  47. 0 6
      packages/ckeditor5-theme-lark/theme/components/label.scss
  48. 0 41
      packages/ckeditor5-theme-lark/theme/components/list.scss
  49. 0 113
      packages/ckeditor5-theme-lark/theme/components/panel/balloonpanel.scss
  50. 0 14
      packages/ckeditor5-theme-lark/theme/components/panel/stickypanel.scss
  51. 0 74
      packages/ckeditor5-theme-lark/theme/components/reset.scss
  52. 0 45
      packages/ckeditor5-theme-lark/theme/components/toolbar/toolbar.scss
  53. 0 77
      packages/ckeditor5-theme-lark/theme/components/tooltip.scss
  54. 0 43
      packages/ckeditor5-theme-lark/theme/helpers/_button.scss
  55. 0 96
      packages/ckeditor5-theme-lark/theme/helpers/_colors.scss
  56. 0 45
      packages/ckeditor5-theme-lark/theme/helpers/_fonts.scss
  57. 0 21
      packages/ckeditor5-theme-lark/theme/helpers/_rounded.scss
  58. 0 26
      packages/ckeditor5-theme-lark/theme/helpers/_shadow.scss
  59. 0 34
      packages/ckeditor5-theme-lark/theme/helpers/_spacing.scss
  60. 0 42
      packages/ckeditor5-theme-lark/theme/helpers/_states.scss
  61. 11 0
      packages/ckeditor5-theme-lark/theme/mixins/_disabled.css
  62. 13 0
      packages/ckeditor5-theme-lark/theme/mixins/_focus.css
  63. 19 0
      packages/ckeditor5-theme-lark/theme/mixins/_rounded.css
  64. 18 0
      packages/ckeditor5-theme-lark/theme/mixins/_shadow.css
  65. 5 0
      packages/ckeditor5-theme-lark/theme/theme.css
  66. 0 26
      packages/ckeditor5-theme-lark/theme/theme.scss

+ 123 - 0
packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.css

@@ -0,0 +1,123 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	/* Overrides the border-radius setting in the theme. */
+	--ck-border-radius: 4px;
+
+	/* Overrides the default font size in the theme. */
+	--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;
+
+	/* -- 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 );
+
+	/* -- 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-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-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-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;
+
+	/* -- 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;
+
+	/* -- 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-text-active: var(--ck-custom-white);
+
+	/* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */
+
+	--ck-color-panel-background: var(--ck-custom-background);
+	--ck-color-panel-border: var(--ck-custom-border);
+
+	/* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */
+
+	--ck-color-toolbar-background: var(--ck-custom-foreground);
+	--ck-color-toolbar-border: var(--ck-custom-border);
+
+	/* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */
+
+	--ck-color-tooltip-background: #212025;
+	--ck-color-tooltip-text: #eee;
+
+	/* -- 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-border: transparent;
+	--ck-color-editor-toolbar-button-on-focus-background: #353535;
+	--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-border: transparent;
+	--ck-color-editor-toolbar-button-on-active-shadow: #2d2d2d;
+	--ck-color-editor-toolbar-button-on-disabled-background: transparent;
+	--ck-color-editor-toolbar-button-on-disabled-border: transparent;
+
+	--ck-color-editor-dropdown-background: #535254;
+
+	/* -- Overrides the default colors used by ckeditor5-image package -------------------------- */
+
+	--ck-color-image-caption-background: #f7f7f7;
+	--ck-color-image-caption-text: #333;
+
+	/* -- Overrides the default colors used by ckeditor5-widget package ------------------------- */
+
+	--ck-color-widget-border-blurred: #ddd;
+	--ck-color-widget-border-hover: #FFD25C;
+	--ck-color-widget-editable-focused-background: var(--ck-custom-white);
+}

+ 0 - 79
packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.scss

@@ -1,79 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-// Overrides the border-radius setting in the theme.
-$ck-border-radius: 4px;
-
-// Overrides the default font size in the theme.
-$ck-font-size-base: 14px;
-
-// Helper variables to avoid duplication in $ck-colors.
-$custom-background: #4A494B;
-$custom-foreground: #3a393d;
-$custom-border: #383738;
-$custom-white: #fff;
-
-// Colors used by the ck-color() mixin across the theme.
-$ck-colors: (
-	// Overrides the default focus color used by the ck-focus-ring() mixin.
-	'border-focus': #48a3f5,
-
-	// Overrides the default text color in the theme.
-	'text': #fafafa,
-
-	// Overrides the default shadow colors in the theme.
-	'shadow-drop': rgba( 0, 0, 0, .2 ),
-	'shadow-inner': rgba( 0, 0, 0, .1 ),
-
-	// Overrides the default .ck-button class colors.
-	'button-default-background': $custom-background,
-	'button-default-border': $custom-border,
-	'button-on-background': $custom-foreground,
-	'button-on-border': $custom-border,
-	'button-action-background': #1ABC9C,
-	'button-action-border': #49d2b7,
-	'button-action-text': $custom-white,
-
-	// Overrides the default .ck-dropdown class colors.
-	'dropdown-panel-background': $custom-background,
-	'dropdown-panel-border': $custom-foreground,
-	'dropdown-symbol': #f1f1f1,
-
-	// Overrides the default .ck-input class colors.
-	'input-background': $custom-foreground,
-	'input-border': #6b6970,
-	'input-text': #fafafa,
-
-	// Overrides the default .ck-list class colors.
-	'list-background': $custom-background,
-	'list-item-background-hover': $custom-foreground,
-	'list-item-background-active': #1A8BF1,
-	'list-item-text-active': $custom-white,
-
-	// Overrides the default .ck-balloon-panel class colors.
-	'panel-background': $custom-background,
-	'panel-border': $custom-border,
-
-	// Overrides the default .ck-toolbar class colors.
-	'toolbar-background': $custom-foreground,
-	'toolbar-border': $custom-border,
-
-	// Overrides the default .ck-tooltip class colors.
-	'tooltip-background': #212025,
-	'tooltip-text': #eee,
-
-	// Overrides the default colors used by the editor.
-	'editor-border': $custom-background,
-	'editor-toolbar-background': $custom-background,
-	'editor-toolbar-button-background': $custom-background,
-	'editor-dropdown-background': #535254,
-
-	// Overrides the default colors used by ckeditor5-image package.
-	'image-caption-background': #f7f7f7,
-	'image-caption-text': #333,
-
-	// Overrides the default colors used by ckeditor5-widget package.
-	'widget-border-blurred': #ddd,
-	'widget-border-hover': #FFD25C,
-	'widget-editable-focused-background': $custom-white
-);

+ 21 - 0
packages/ckeditor5-theme-lark/docs/_snippets/examples/extras.css

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* Allow using Lark's ck-box-shadow() mixin. */
+@import '@ckeditor/ckeditor5-theme-lark/theme/mixins/_shadow.css';
+
+/* The shadow should be 10% brighter than the toolbar background. */
+:root {
+	--ck-shadow-color: #646265;
+}
+
+.ck-editor-toolbar {
+	& .ck-button.ck-dropdown__button {
+		/* Apply a dedicated inner box-shadow to the dropdown button. */
+		@mixin ck-box-shadow
+			0 0 0 1px var(--ck-shadow-color) inset,
+			0 0 5px var(--ck-shadow-color) inset;
+	}
+}

+ 0 - 21
packages/ckeditor5-theme-lark/docs/_snippets/examples/extras.scss

@@ -1,21 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-// Allow using Lark's ck-box-shadow() mixin.
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_shadow.scss';
-
-// Allow using colors defined in Lark and the ck-color() mixin.
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_colors.scss';
-
-// The shadow should be 10% brighter than the toolbar background.
-$shadow-color: ck-color( 'editor-toolbar-background', 10 );
-
-.ck-editor-toolbar {
-	.ck-button.ck-dropdown__button {
-		// Apply a dedicated inner box-shadow to the dropdown button.
-		@include ck-box-shadow(
-			0 0 0 1px $shadow-color inset,
-			0 0 5px $shadow-color inset
-		);
-	}
-}

+ 2 - 3
packages/ckeditor5-theme-lark/docs/_snippets/examples/theme-lark.js

@@ -5,11 +5,10 @@
 
 /* globals console, window, document */
 
-/* config { "sassImportPath": "./custom.scss" } */
-
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
-import './extras.scss';
+import './custom.css';
+import './extras.css';
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-classic-editor' ), {

+ 178 - 162
packages/ckeditor5-theme-lark/docs/framework/guides/theme-customization.md

@@ -5,11 +5,9 @@ order: 10
 
 # Theme customization
 
-The [`@ckeditor/ckeditor5-theme-lark`](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark) is the default theme of CKEditor 5. Lark is modular, [BEM–friendly](https://en.bem.info/methodology/css/) and built in [SASS](http://sass-lang.com).
+The [`@ckeditor/ckeditor5-theme-lark`](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark) is the default theme of CKEditor 5. Lark is modular, [BEM–friendly](https://en.bem.info/methodology/css/) and built in [PostCSS](http://postcss.org/).
 
-Although it was designed with versatility and the most common editor use cases in mind, some integrations may require adjustments to make it match the style guidelines of the ecosystem. This kind of customization can be done in two different ways, which can also be used together if needed:
- * By building the editor with a set of custom SASS variables and overriding [defaults](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#Variable_Defaults___default), which does not change the size of the build.
- * By importing an extra `.scss` file and overriding the CSS rules, which increases the size of the build.
+Although it was designed with versatility and the most common editor use cases in mind, some integrations may require adjustments to make it match the style guidelines of the ecosystem. This kind of customization can be done by importing an extra `.css` file and overriding the [native CSS variables](https://www.w3.org/TR/css-variables/).
 
 You can see the demo of an editor with the dark theme as a result of customizations described later in this guide:
 
@@ -25,214 +23,186 @@ CKEditor 5 is bundled using [webpack](https://webpack.js.org/) and it handles th
 
 The entire process of building and managing the styles boils down to three steps:
 
-1. **Collecting**: Each JavaScript file in the project can import multiple `.scss` files using the ES6 [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) directive. Imported files are handled by the [CSS Loader](https://www.npmjs.com/package/css-loader).
+1. **Collecting**: Each JavaScript file in the project can import multiple `.css` files using the ES6 [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) directive. Imported files are handled by the [PostCSS Loader](https://www.npmjs.com/package/postcss-loader).
 
 	```js
-	import '../theme/theme.scss';
+	import '../theme/theme.css';
 
 	class AnyEditorClass {
 		...
 	}
 	```
 
-	```scss
-	// Contents of theme.scss.
-	$color: red;
-
-	.ck-editor {
-		color: $color;
+	```css
+	/* Contents of theme.css. */
+	:root {
+		--color: red;
 	}
-	```
-
-2. **Compiling**: The [SASS Loader](https://www.npmjs.com/package/sass-loader) compiles `.scss` files from SASS to CSS. Each file is compiled asynchronously, in a separate SASS thread.
 
-	```scss
 	.ck-editor {
-		color: $color; // -> color: red;
+		color: var(--color);
 	}
 	```
 
+2. **Processing**: The PostCSS Loader processes `.css` files to the output CSS. Each file is compiled asynchronously, in a separate processor thread using pre–defined plugins.
+
 3. **Loading**: Finally the [Style loader](https://www.npmjs.com/package/style-loader) loads the output CSS along with the `ckeditor.js` file into a `<style>` element in the `<head>` section of the web page.
 
 	```html
 	<head>
 		<style type="text/css">
 			.ck-editor {
-				color: red;
+				color: var(--color);
 			}
 		</style>
 	</head>
 	```
 
-## Customization with SASS variables
+## Customization with CSS variables
 
-Having {@link builds/guides/development/custom-builds#Forking-an-existing-build cloned} an existing build of CKEditor for a quick start, take a look at the specific definitions in the `webpack.config.js` file.
+Having {@link builds/guides/development/custom-builds#Forking-an-existing-build cloned} an existing build of CKEditor for a quick start, let's use the full potential of CSS variables. The customization in this guide will make the theme dark, with slightly bigger text and more rounded corners.
 
-```js
-module: {
-	rules: [
-		...
-		{
-			test: /\.scss$/,
-			use: [
-				'style-loader',
-				'css-loader',
-				'sass-loader'
-			]
-		}
-	]
-}
-```
+<info-box hint>
+	Check out the [colors helper](https://github.com/ckeditor/ckeditor5-theme-lark/blob/master/theme/ckeditor5-ui/globals/_colors.css) for the full list of customizable colors. You can also browse [other helpers](https://github.com/ckeditor/ckeditor5-theme-lark/tree/master/theme/mixins) to learn about other useful tools.
+</info-box>
 
-Each SASS file is compiled in a separate thread, so to override default variables (defined with `!default`) across the theme, new values must be imported or declared at the very beginning of **each single** SASS file's compilation process. SASS Loader offers the [`data`](https://www.npmjs.com/package/sass-loader#environment-variables) option to do this.
+The file containing custom variables will be named `custom.css` and it will look as below:
 
+```css
 
-Now [`@import`](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_import__import) a `custom.scss` file located in the root of the repository containing all custom variables.
+:root {
+	/* Overrides the border-radius setting in the theme. */
+	--ck-border-radius: 4px;
+
+	/* Overrides the default font size in the theme. */
+	--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;
 
-```js
-use: [
-	'style-loader',
-	'css-loader',
-	{
-		loader: 'sass-loader',
-		options: {
-			data: `@import 'custom.scss';`
-		}
-	}
-]
-```
+	/* -- Overrides generic colors -------------------------------------------------------------- */
 
-Using the full potential of SASS variables, the customization will make the theme dark, with slightly bigger text and more rounded corners.
+	--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 );
 
-<info-box hint>
-	Check out the [colors helper](https://github.com/ckeditor/ckeditor5-theme-lark/blob/master/theme/helpers/_colors.scss) for the full list of customizable colors. You can also browse [other helpers](https://github.com/ckeditor/ckeditor5-theme-lark/tree/master/theme/helpers) to learn about other useful SASS variables.
-</info-box>
+	/* -- Overrides the default .ck-button class colors ----------------------------------------- */
 
-The contents of `custom.scss` could look as below:
-
-```scss
-// Overrides the border radius setting in the theme.
-$ck-border-radius: 4px;
-
-// Overrides the default font size in the theme.
-$ck-font-size-base: 14px;
-
-// Helper variables to avoid duplication in $ck-colors.
-$custom-background: #4A494B;
-$custom-foreground: #3a393d;
-$custom-border: #383738;
-$custom-white: #fff;
-
-// Colors used by the ck-color() mixin across the theme.
-$ck-colors: (
-	// Overrides the default focus color used by the ck-focus-ring() mixin.
-	'border-focus': #48a3f5,
-
-	// Overrides the default text color in the theme.
-	'text': #fafafa,
-
-	// Overrides the default shadow colors in the theme.
-	'shadow-drop': rgba( 0, 0, 0, .2 ),
-	'shadow-inner': rgba( 0, 0, 0, .1 ),
-
-	// Overrides the default .ck-button class colors.
-	'button-default-background': $custom-background,
-	'button-default-border': $custom-border,
-	'button-on-background': $custom-foreground,
-	'button-on-border': $custom-border,
-	'button-action-background': #1ABC9C,
-	'button-action-border': #49d2b7,
-	'button-action-text': $custom-white,
-
-	// Overrides the default .ck-dropdown class colors.
-	'dropdown-panel-background': $custom-background,
-	'dropdown-panel-border': $custom-foreground,
-	'dropdown-symbol': #f1f1f1,
-
-	// Overrides the default .ck-input class colors.
-	'input-background': $custom-foreground,
-	'input-border': #6b6970,
-	'input-text': #fafafa,
-
-	// Overrides the default .ck-list class colors.
-	'list-background': $custom-background,
-	'list-item-background-hover': $custom-foreground,
-	'list-item-background-active': #1A8BF1,
-	'list-item-text-active': $custom-white,
-
-	// Overrides the default .ck-balloon-panel class colors.
-	'panel-background': $custom-background,
-	'panel-border': $custom-border,
-
-	// Overrides the default .ck-toolbar class colors.
-	'toolbar-background': $custom-foreground,
-	'toolbar-border': $custom-border,
-
-	// Overrides the default .ck-tooltip class colors.
-	'tooltip-background': #212025,
-	'tooltip-text': #eee,
-
-	// Overrides the default colors used by the editor.
-	'editor-border': $custom-background,
-	'editor-toolbar-background': $custom-background,
-	'editor-toolbar-button-background': $custom-background,
-	'editor-dropdown-background': #535254,
-
-	// Overrides the default colors used by the ckeditor5-image package.
-	'image-caption-background': #f7f7f7,
-	'image-caption-text': #333,
-
-	// Overrides the default colors used by the ckeditor5-widget package.
-	'widget-border-blurred': #ddd,
-	'widget-border-hover': #FFD25C,
-	'widget-editable-focused-background': $custom-white
-);
-```
+	--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-disabled-background: var(--ck-custom-background);
+	--ck-color-button-default-disabled-border: var(--ck-custom-border);
 
-It is time to build the editor using `npm run build-ckeditor` and see the results. From now on, the editor's theme is using customized styles.
+	--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-disabled-background: var(--ck-custom-foreground);
+	--ck-color-button-on-disabled-border: var(--ck-custom-border);
 
-## Adding extra styles to the build
+	--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-text: var(--ck-custom-white);
 
-Not every element of the theme can be customized using SASS variables and some visual tweaking may require more complex CSS rules.
+	/* -- Overrides the default .ck-dropdown class colors --------------------------------------- */
 
-In the editor demo presented and the very beginning of this guide, the drop down button in the toolbar has a complex inner [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=b) that makes it more appealing. By default, the [Lark](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark) theme does not support such shadow and that is why it must be defined separately.
+	--ck-color-dropdown-panel-background: var(--ck-custom-background);
+	--ck-color-dropdown-panel-border: var(--ck-custom-foreground);
+	--ck-color-dropdown-symbol: #f1f1f1;
 
-```css
-.ck-editor-toolbar .ck-button.ck-dropdown__button {
-	box-shadow: 0 0 0 1px #5c5b5d inset, 0 0 5px #5c5b5d inset;
-}
-```
+	/* -- Overrides the default .ck-input class colors ------------------------------------------ */
 
-The rule above could be added directly to any stylesheet in the web page and most certainly would work as expected.
+	--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;
 
-But what if the color set customized in the [previous part](#Customization-with-SASS-variables) of this guide has changed? Static CSS rules will neither update along with the SASS variables nor can they benefit from the mixins and functions provided by the theme. To add extra styles and keep them within the ecosystem, a separate SASS file should be created (in his example it will be called `extras.scss`):
+	/* -- Overrides the default .ck-list class colors ------------------------------------------- */
 
-```scss
-// Allow using Lark's ck-box-shadow() mixin.
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_shadow.scss';
+	--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-text-active: var(--ck-custom-white);
 
-// Allow using colors defined in Lark and the ck-color() mixin.
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_colors.scss';
+	/* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */
 
-// The shadow should be 10% brighter than the toolbar background.
-$shadow-color: ck-color( 'editor-toolbar-background', 10 );
+	--ck-color-panel-background: var(--ck-custom-background);
+	--ck-color-panel-border: var(--ck-custom-border);
 
-.ck-editor-toolbar {
-	.ck-button.ck-dropdown__button {
-		// Apply a dedicated inner box-shadow to the drop-down button.
-		@include ck-box-shadow(
-			0 0 0 1px $shadow-color inset,
-			0 0 5px $shadow-color inset
-		);
-	}
+	/* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */
+
+	--ck-color-toolbar-background: var(--ck-custom-foreground);
+	--ck-color-toolbar-border: var(--ck-custom-border);
+
+	/* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */
+
+	--ck-color-tooltip-background: #212025;
+	--ck-color-tooltip-text: #eee;
+
+	/* -- 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-border: transparent;
+	--ck-color-editor-toolbar-button-on-focus-background: #353535;
+	--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-border: transparent;
+	--ck-color-editor-toolbar-button-on-active-shadow: #2d2d2d;
+	--ck-color-editor-toolbar-button-on-disabled-background: transparent;
+	--ck-color-editor-toolbar-button-on-disabled-border: transparent;
+
+	--ck-color-editor-dropdown-background: #535254;
+
+	/* -- Overrides the default colors used by ckeditor5-image package -------------------------- */
+
+	--ck-color-image-caption-background: #f7f7f7;
+	--ck-color-image-caption-text: #333;
+
+	/* -- Overrides the default colors used by ckeditor5-widget package ------------------------- */
+
+	--ck-color-widget-border-blurred: #ddd;
+	--ck-color-widget-border-hover: #FFD25C;
+	--ck-color-widget-editable-focused-background: var(--ck-custom-white);
 }
 ```
 
-This file then needs to be imported into a JavaScript file that is processed by webpack and the [loaders](#Styles-processing-and-bundling), like for example an entry point of the application.
+This file can be referenced directly in HTML **after the `<link>` tag injected by the editor** and its content will simply override the default CSS variables. CSS variables are natively [supported](https://caniuse.com/#feat=css-variables) in all major web browsers and just like like any other CSS rule, they are prioritized in the order of precedence.
+
+```html
+<link rel="stylesheet" href="custom.css" type="text/css">
+```
+
+Alternatively, the style sheet can also be imported into a JavaScript file that is processed by webpack and the [loaders](#Styles-processing-and-bundling) becoming part of the build, e.g. an entry point of the application.
 
 ```js
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import 'extras.scss';
+
+// To override the default styles, this file must be imported after ClassicEditor.
+import 'custom.css';
 
 ClassicEditor
 	.create( ... )
@@ -245,4 +215,50 @@ ClassicEditor
 
 ```
 
-This way, the additional styles will stay up–to–date as the application develops and changes over the time.
+## Further customization
+
+In the editor demo presented and the very beginning of this guide, the drop down button in the toolbar has a complex inner [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=b) that makes it more appealing. By default, the [Lark](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark) theme does not support such shadow and that is why it must be defined separately.
+
+```css
+:root {
+	--ck-shadow-color: #646265;
+}
+
+.ck-editor-toolbar .ck-button.ck-dropdown__button {
+	box-shadow: 0 0 0 1px var(--ck-shadow-color) inset, 0 0 5px var(--ck-shadow-color) inset;
+}
+```
+
+Again, the rule above could be added directly to any stylesheet in the web page and it would work as expected. But to use a pre–defined helper mixin (`@mixin ck-box-shadow`), clean up the code with some nesting just like below, and finally make it the part of the editor build, the code must be processed by webpack and PostCSS too.
+
+```css
+/* Allow using Lark's ck-box-shadow() mixin. */
+@import '@ckeditor/ckeditor5-theme-lark/theme/mixins/_shadow.css';
+
+/* The shadow should be 10% brighter than the toolbar background. */
+:root {
+	--ck-shadow-color: #646265;
+}
+
+.ck-editor-toolbar {
+	& .ck-button.ck-dropdown__button {
+		/* Apply a dedicated inner box-shadow to the dropdown button. */
+		@mixin ck-box-shadow
+			0 0 0 1px var(--ck-shadow-color) inset,
+			0 0 5px var(--ck-shadow-color) inset;
+	}
+}
+
+```
+
+Let's put the content of the file in the `extras.css` and import it just like the custom variables sheet:
+
+```js
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+
+// To override default styles, these files must be imported after ClassicEditor.
+import 'custom.css';
+import 'extras.css';
+```
+
+It is time to build the editor using `npm run build-ckeditor` and see the results. From now on, the editor's theme is using customized styles, which are part of the build.

+ 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 - 2
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -22,8 +22,6 @@ import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinp
 import boldIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg';
 import italicIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg';
 
-import '../../theme/theme.scss';
-
 class TextView extends View {
 	constructor() {
 		super();

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

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2003-2017, 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);
+}

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

@@ -0,0 +1,16 @@
+/**
+ * @license Copyright (c) 2003-2017, 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;
+}

+ 37 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-editor-classic/classiceditor.css

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../mixins/_rounded.css";
+
+.ck-editor__top {
+	& .ck-sticky-panel {
+		& .ck-toolbar {
+			@mixin ck-rounded-corners {
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
+			background: var(--ck-color-editor-toolbar-background);
+			border-bottom-width: 0;
+		}
+
+		& .ck-sticky-panel__content_sticky .ck-toolbar {
+			border-bottom-width: 1px;
+
+			@mixin ck-rounded-corners {
+				border-radius: 0;
+			}
+		}
+	}
+}
+
+.ck-editor__editable {
+	@mixin ck-rounded-corners {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+
+	border: 1px solid var(--ck-color-editor-border);
+}

+ 9 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-engine/placeholder.css

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-placeholder::before {
+	cursor: text;
+	color: var(--ck-color-engine-placeholder-text);
+}

+ 34 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-heading/heading.css

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * 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.8 * 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 {
+		width: 8em;
+	}
+}

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

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2003-2017, 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%;
+		}
+	}
+}

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

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2003-2017, 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;
+}

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

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2003-2017, 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);
+	}
+}

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

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.cke-text-alternative-form {
+	padding: var(--ck-spacing-large);
+
+	&:focus {
+		/* https://github.com/ckeditor/ckeditor5-image/issues/40 */
+		outline: none;
+	}
+
+	& .ck-label {
+		margin-bottom: var(--ck-spacing-small);
+	}
+}
+
+.cke-text-alternative-form__actions {
+	padding-top: var(--ck-spacing-large);
+
+	& .ck-button {
+		& + .ck-button {
+			margin-right: var(--ck-spacing-medium);
+		}
+	}
+}

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

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-link-form {
+	padding: var(--ck-spacing-large);
+
+	&:focus {
+		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
+		outline: none;
+	}
+
+	& .ck-input-text {
+		/* https://github.com/ckeditor/ckeditor5-link/issues/145 */
+		width: 100%;
+	}
+
+	& .ck-label {
+		margin-bottom: var(--ck-spacing-tiny);
+	}
+}
+
+.ck-link-form__actions {
+	padding-top: var(--ck-spacing-large);
+
+	& .ck-button {
+		/* "Save" and "Cancel" buttons. */
+		& + .ck-button {
+			margin-right: var(--ck-spacing-medium);
+		}
+
+		/* The "Unlink" button.*/
+		&:last-child {
+			/* https://github.com/ckeditor/ckeditor5-link/issues/145 */
+			margin-right: calc(4 * var(--ck-spacing-medium));
+		}
+	}
+}

+ 104 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css

@@ -0,0 +1,104 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@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 --ck-color-button-default;
+	@mixin ck-rounded-corners;
+
+	border-width: 1px;
+	border-style: solid;
+	white-space: nowrap;
+	cursor: default;
+	vertical-align: middle;
+	padding: var(--ck-spacing-small);
+
+	/* Enable font size inheritance, which allows fluid UI scaling. */
+	font-size: inherit;
+
+	&:focus {
+		@mixin ck-focus-ring;
+		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+	}
+
+	@mixin ck-button-icon {
+		float: left;
+	}
+
+	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
+	&.ck-disabled {
+		@mixin ck-button-icon {
+			@mixin ck-disabled;
+		}
+
+		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
+		& .ck-button__label {
+			@mixin ck-disabled;
+		}
+	}
+
+	&.ck-button_with-text {
+		padding: var(--ck-spacing-small) var(--ck-spacing-standard);
+
+		@mixin ck-button-icon {
+			margin-left: calc(-1 * var(--ck-spacing-small));
+			margin-right: var(--ck-spacing-small);
+		}
+
+		& .ck-button__label {
+			display: block;
+		}
+	}
+
+	/* A style of the button which is currently on, e.g. its feature is active. */
+	&.ck-on {
+		@mixin ck-button-colors --ck-color-button-on;
+	}
+
+	& .ck-icon {
+		use,
+		use * {
+			color: inherit;
+		}
+	}
+
+	& .ck-button__label {
+		/* Enable font size inheritance, which allows fluid UI scaling. */
+		font-size: inherit;
+
+		float: left;
+		height: var(--ck-line-height-base)em;
+		line-height: inherit;
+		font-weight: inherit;
+		color: inherit;
+		cursor: inherit;
+	}
+}
+
+/* A style of the button which handles the primary action. */
+.ck-button-action,
+a.ck-button-action {
+	@mixin ck-button-colors --ck-color-button-action;
+
+	text-shadow: 0 -1px var(--ck-color-button-action-border);
+	color: var(--ck-color-button-action-text);
+
+	&:hover,
+	&:focus,
+	&:active {
+		text-shadow: 0 -1px var(--ck-color-button-action-active-border);
+	}
+}
+
+.ck-button-bold,
+a.ck-button-bold {
+	font-weight: bold;
+}

+ 49 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+@import "../../../mixins/_disabled.css";
+@import "../../../mixins/_shadow.css";
+
+.ck-dropdown {
+	/* Enable font size inheritance, which allows fluid UI scaling. */
+	font-size: inherit;
+
+	/* A triangle displayed to indicate this is actually a dropdown. */
+	&::after {
+		border-style: solid;
+		border-width: .4em .4em 0 .4em;
+		border-color: var(--ck-color-dropdown-symbol) transparent;
+		right: var(--ck-spacing-standard);
+	}
+
+	& .ck-button.ck-dropdown__button {
+		/* A space to accommodate the triangle. */
+		padding-right: calc(2 * var(--ck-spacing-standard));
+
+		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
+		&.ck-disabled .ck-button__label {
+			@mixin ck-disabled;
+		}
+
+		/* #23 */
+		& .ck-button__label {
+			width: 7em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+}
+
+.ck-dropdown__panel {
+	@mixin ck-rounded-corners;
+	@mixin ck-drop-shadow;
+
+	background: var(--ck-color-dropdown-panel-background);
+	border: 1px solid var(--ck-color-dropdown-panel-border);
+
+	/* Compensate double border from button and from box when positioned below the button. */
+	bottom: 1px;
+}

+ 68 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@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;
+
+	&.ck-focused {
+		@mixin ck-focus-ring;
+		@mixin ck-box-shadow var(--ck-inner-shadow);
+	}
+}
+
+.ck-editor__editable_inline {
+	overflow: auto;
+	padding: 0 var(--ck-spacing-standard);
+	border: 1px solid transparent;
+}
+
+.ck-editor-toolbar {
+	& .ck-button,
+	& .ck-button:focus {
+		border-width: 0;
+	}
+
+	& .ck-button {
+		&:not(:hover):not(:focus):not(.ck-on),
+		&.ck-disabled {
+			background: var(--ck-color-editor-toolbar-background);
+		}
+
+		&.ck-on {
+			@mixin ck-button-colors --ck-color-editor-toolbar-button-on;
+		}
+	}
+
+	& .ck-button.ck-dropdown__button {
+		border-width: 1px;
+
+		&:not(:hover):not(:focus):not(.ck-on) {
+			background: var(--ck-color-editor-dropdown-background);
+		}
+	}
+
+	@nest .ck-toolbar-container & {
+		background: var(--ck-color-editor-toolbar-background);
+	}
+}
+
+/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */
+.ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_n"] {
+	&::after {
+		border-bottom-color: var(--ck-color-editor-toolbar-background);
+	}
+}
+
+.ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_s"] {
+	&::after {
+		border-top-color: var(--ck-color-editor-toolbar-background);
+	}
+}

+ 21 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/icon/icon.css

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * 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));
+}
+
+svg.ck-icon {
+	width: calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
+	height: calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
+
+	min-width: var(--ck-icon-min-size);
+	min-height: var(--ck-icon-min-size);
+}

+ 33 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+@import "../../../mixins/_focus.css";
+@import "../../../mixins/_shadow.css";
+
+:root {
+	--ck-input-text-min-width: 21em;
+}
+
+.ck-input-text {
+	@mixin ck-rounded-corners;
+	@mixin ck-box-shadow var(--ck-inner-shadow);
+
+	background: var(--ck-color-input-background);
+	border: 1px solid var(--ck-color-input-border);
+	padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+	min-width: var(--ck-input-text-min-width);
+
+	&:focus {
+		@mixin ck-focus-ring;
+		@mixin ck-box-shadow var(--ck-focus-outer-shadow), var(--ck-inner-shadow);
+	}
+
+	&[readonly] {
+		border: 1px solid var(--ck-color-input-disabled-border);
+		background: var(--ck-color-input-disabled-background);
+		color: var(--ck-color-input-disabled-text);
+	}
+}

+ 8 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/label/label.css

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-label {
+	font-weight: bold;
+}

+ 41 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+@import "../../../mixins/_shadow.css";
+
+.ck-list {
+	@mixin ck-rounded-corners;
+
+	list-style-type: none;
+	background: var(--ck-color-list-background);
+}
+
+.ck-list__item {
+	padding: var(--ck-spacing-medium);
+	cursor: default;
+	min-width: 12em;
+
+	&:hover,
+	&:focus {
+		background: var(--ck-color-list-item-background-hover);
+	}
+
+	&:focus {
+		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+
+		outline: none;
+	}
+}
+
+.ck-list__item_active {
+	background: var(--ck-color-list-item-background-active);
+	color: var(--ck-color-list-item-text-active);
+
+	&:hover,
+	&:focus {
+		background: var(--ck-color-list-item-background-active-focus);
+	}
+}

+ 114 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css

@@ -0,0 +1,114 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+@import "../../../mixins/_shadow.css";
+
+:root {
+	--ck-balloon-arrow-offset: 2px;
+	--ck-balloon-arrow-height: 15px;
+	--ck-balloon-arrow-half-width: 10px;
+}
+
+.ck-balloon-panel {
+	@mixin ck-rounded-corners;
+	@mixin ck-drop-shadow;
+
+	min-height: 15px;
+
+	background: var(--ck-color-panel-background);
+	border: 1px solid var(--ck-color-panel-border);
+
+	&.ck-balloon-panel_with-arrow {
+		&::before,
+		&::after {
+			width: 0;
+			height: 0;
+			border-style: solid;
+		}
+	}
+
+	&[class*="arrow_n"] {
+		&::before,
+		&::after {
+			border-width: 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width);
+		}
+
+		&::before {
+			border-color: transparent transparent var(--ck-color-panel-border) transparent;
+		}
+
+		&::after {
+			border-color: transparent transparent var(--ck-color-panel-background) transparent;
+			margin-top: var(--ck-balloon-arrow-offset);
+		}
+	}
+
+	&[class*="arrow_s"] {
+		&::before,
+		&::after {
+			border-width: var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width);
+		}
+
+		&::before {
+			border-color: var(--ck-color-panel-border) transparent  transparent;
+		}
+
+		&::after {
+			border-color: var(--ck-color-panel-background) transparent transparent transparent;
+			margin-bottom: var(--ck-balloon-arrow-offset);
+		}
+	}
+
+	&.ck-balloon-panel_arrow_n {
+		&::before,
+		&::after {
+			left: 50%;
+			margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
+			top: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_nw {
+		&::before,
+		&::after {
+			left: calc(2 * var(--ck-balloon-arrow-half-width));
+			top: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_ne {
+		&::before,
+		&::after {
+			right: calc(2 * var(--ck-balloon-arrow-half-width));
+			top: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_s {
+		&::before,
+		&::after {
+			left: 50%;
+			margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
+			bottom: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_sw {
+		&::before,
+		&::after {
+			left: calc(2 * var(--ck-balloon-arrow-half-width));
+			bottom: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_se {
+		&::before,
+		&::after {
+			right: calc(2 * var(--ck-balloon-arrow-half-width));
+			bottom: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+}

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

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_shadow.css";
+
+.ck-editor {
+	& .ck-sticky-panel {
+		& .ck-sticky-panel__content_sticky {
+			@mixin ck-drop-shadow;
+
+			border-width: 0 1px 1px;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+		}
+	}
+}

+ 47 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+
+.ck-toolbar {
+	@mixin ck-rounded-corners;
+
+	padding: var(--ck-spacing-small);
+	border: 1px solid var(--ck-color-toolbar-border);
+
+	/* Allow wrapping toolbar items to the new line. */
+	white-space: initial;
+
+	/* (#11) Separate toolbar items. */
+	& > * {
+		margin-right: var(--ck-spacing-small);
+	}
+
+	& > *:last-child {
+		margin-right: 0;
+	}
+
+	@nest .ck-toolbar-container & {
+		border: 0;
+	}
+}
+
+.ck-toolbar_floating {
+	/* Disallow wrapping toolbar items to the new line when the toolbar is floating,
+	resulting in an toolbar shapes when the horizontal space is limited.
+	https://github.com/ckeditor/ckeditor5-theme-lark/issues/93 */
+	white-space: nowrap;
+}
+
+.ck-toolbar__separator {
+	width: 1px;
+	height: calc(1em + 2 * var(--ck-spacing-medium));
+	vertical-align: middle;
+	background: var(--ck-color-toolbar-border);
+}
+
+.ck-toolbar__newline {
+	height: var(--ck-spacing-small);
+}

+ 82 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css

@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+
+:root {
+	--ck-tooltip-arrow-size: 5px;
+}
+
+.ck-tooltip {
+	left: 50%;
+
+	/**
+	 * A class once applied displays the tooltip south of the element.
+	 *
+	 *       [element]
+	 *           ^
+	 *     +-----------+
+	 *     |  Tooltip  |
+	 *     +-----------+
+	 */
+	&.ck-tooltip_s {
+		bottom: calc(-1 * var(--ck-tooltip-arrow-size));
+		transform: translateY( 100% );
+
+		& .ck-tooltip__text::after {
+			top: calc(-1 * var(--ck-tooltip-arrow-size));
+			transform: translateX( -50% );
+			border-color: transparent transparent var(--ck-color-tooltip-background) transparent;
+			border-width: 0 var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size);
+		}
+	}
+
+	/**
+	 * A class once applied displays the tooltip north of the element.
+	 *
+	 *     +-----------+
+	 *     |  Tooltip  |
+	 *     +-----------+
+	 *           V
+	 *       [element]
+	 */
+	&.ck-tooltip_n {
+		top: calc(-1 * var(--ck-tooltip-arrow-size));
+		transform: translateY( -100% );
+
+		& .ck-tooltip__text::after {
+			bottom: calc(-1 * var(--ck-tooltip-arrow-size));
+			transform: translateX( -50% );
+			border-color: var(--ck-color-tooltip-background) transparent transparent transparent;
+			border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size);
+		}
+	}
+}
+
+.ck-tooltip__text {
+	@mixin ck-rounded-corners;
+
+	font-size: .9em;
+	line-height: 1.5;
+	color: var(--ck-color-tooltip-text);
+	padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+	background: var(--ck-color-tooltip-background);
+	position: relative;
+	left: -50%;
+
+	&::after {
+		border-style: solid;
+		left: 50%;
+	}
+}
+
+.ck-tooltip,
+.ck-tooltip__text::after {
+	/* For the transition to work, the tooltip must be controlled
+	using visibility+opacity. A delay prevents a "tooltip avalanche"
+	i.e. when scanning the toolbar with mouse cursor. */
+	transition: opacity .2s ease-in-out .2s;
+}
+

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

@@ -0,0 +1,124 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-color-base-foreground: 								hsl(0, 0%, 97%);
+	--ck-color-base-background: 								hsl(0, 0%, 100%);
+	--ck-color-base-border: 									hsl(0, 0%, 75%);
+	--ck-color-base-action: 									hsl(104, 44%, 48%);
+	--ck-color-base-focus: 										hsl(209, 92%, 70%);
+	--ck-color-base-text: 										hsl(0, 0%, 20%);
+	--ck-color-base-active: 									hsl(208, 88%, 52%);
+	--ck-color-base-active-focus:								hsl(208, 88%, 47%);
+
+	/* -- Generic colors ------------------------------------------------------------------------ */
+
+	--ck-color-focus-border: 									hsl(208, 90%, 62%);
+	--ck-color-focus-shadow:									hsl(209, 90%, 72%);
+	--ck-color-text: 											var(--ck-color-base-text);
+	--ck-color-shadow-drop: 									hsla(0, 0%, 0%, 0.2);
+	--ck-color-shadow-inner: 									hsla(0, 0%, 0%, 0.1);
+
+	/* -- Buttons ------------------------------------------------------------------------------- */
+
+	--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: 				hsl(0, 0%, 90%);
+	--ck-color-button-default-focus-border: 					hsl(0, 0%, 65%);
+	--ck-color-button-default-active-background: 				hsl(0, 0%, 85%);
+	--ck-color-button-default-active-border: 					hsl(0, 0%, 60%);
+	--ck-color-button-default-active-shadow: 					hsl(0, 0%, 75%);
+	--ck-color-button-default-disabled-background: 				hsl(0, 0%, 100%);
+	--ck-color-button-default-disabled-border: 					hsl(0, 0%, 78%);
+
+	--ck-color-button-on-background: 							var(--ck-color-base-foreground);
+	--ck-color-button-on-border: 								hsl(0, 0%, 72%);
+	--ck-color-button-on-focus-background: 						hsl(0, 0%, 87%);
+	--ck-color-button-on-focus-border: 							hsl(0, 0%, 62%);
+	--ck-color-button-on-active-background: 					hsl(0, 0%, 82%);
+	--ck-color-button-on-active-border: 						hsl(0, 0%, 57%);
+	--ck-color-button-on-active-shadow: 						hsl(0, 0%, 72%);
+	--ck-color-button-on-disabled-background: 					hsl(0, 0%, 100%);
+	--ck-color-button-on-disabled-border: 						hsl(0, 0%, 75%);
+
+	--ck-color-button-action-background: 						var(--ck-color-base-action);
+	--ck-color-button-action-border: 							hsl(104, 44%, 39%);
+	--ck-color-button-action-focus-background: 					hsl(104, 44%, 43%);
+	--ck-color-button-action-focus-border: 						hsl(104, 44%, 35%);
+	--ck-color-button-action-active-background: 				hsl(104, 44%, 41%);
+	--ck-color-button-action-active-border: 					hsl(104, 44%, 33%);
+	--ck-color-button-action-active-shadow: 					hsl(104, 44%, 36%);
+	--ck-color-button-action-disabled-background: 				hsl(104, 44%, 58%);
+	--ck-color-button-action-disabled-border: 					hsl(104, 44%, 38%);
+	--ck-color-button-action-text: 								var(--ck-color-base-background);
+
+	/* -- Dropdown ------------------------------------------------------------------------------ */
+
+	--ck-color-dropdown-panel-background: 						var(--ck-color-base-background);
+	--ck-color-dropdown-panel-border: 							var(--ck-color-base-border);
+	--ck-color-dropdown-symbol: 								hsl(0, 0%, 44%);
+
+	/* -- Input --------------------------------------------------------------------------------- */
+
+	--ck-color-input-background: 								var(--ck-color-base-background);
+	--ck-color-input-border: 									var(--ck-color-base-border);
+	--ck-color-input-text: 										var(--ck-color-base-text);
+	--ck-color-input-disabled-background: 						hsl(0, 0%, 95%);
+	--ck-color-input-disabled-border: 							hsl(0, 0%, 78%);
+	--ck-color-input-disabled-text: 							hsl(0, 0%, 36%);
+
+	/* -- List ---------------------------------------------------------------------------------- */
+
+	--ck-color-list-background: 								var(--ck-color-base-background);
+	--ck-color-list-item-background-hover: 						var(--ck-color-base-foreground);
+	--ck-color-list-item-background-active: 					var(--ck-color-base-active);
+	--ck-color-list-item-background-active-focus: 				var(--ck-color-base-active-focus);
+	--ck-color-list-item-text-active:							var(--ck-color-base-background);
+
+	/* -- Panel --------------------------------------------------------------------------------- */
+
+	--ck-color-panel-background: 								var(--ck-color-base-background);
+	--ck-color-panel-border: 									var(--ck-color-base-border);
+
+	/* -- Toolbar ------------------------------------------------------------------------------- */
+
+	--ck-color-toolbar-background: 								var(--ck-color-base-background);
+	--ck-color-toolbar-border: 									var(--ck-color-base-border);
+
+	/* -- Tooltip ------------------------------------------------------------------------------- */
+
+	--ck-color-tooltip-background: 								var(--ck-color-base-text);
+	--ck-color-tooltip-text: 									var(--ck-color-base-background);
+
+	/* -- Editor -------------------------------------------------------------------------------- */
+
+	--ck-color-editor-border: 									var(--ck-color-base-border);
+	--ck-color-editor-toolbar-background: 						var(--ck-color-base-foreground);
+
+	--ck-color-editor-toolbar-button-on-background: 			hsl(0, 0%, 87%);
+	--ck-color-editor-toolbar-button-on-border: 				transparent;
+	--ck-color-editor-toolbar-button-on-focus-background: 		hsl(0, 0%, 77%);
+	--ck-color-editor-toolbar-button-on-focus-border: 			transparent;
+	--ck-color-editor-toolbar-button-on-active-background: 		hsl(0, 0%, 73%);
+	--ck-color-editor-toolbar-button-on-active-border: 			transparent;
+	--ck-color-editor-toolbar-button-on-active-shadow: 			hsl(0, 0%, 63%);
+	--ck-color-editor-toolbar-button-on-disabled-background: 	hsl(0, 0%, 87%);
+	--ck-color-editor-toolbar-button-on-disabled-border: 		transparent;
+
+	--ck-color-editor-dropdown-background: 						var(--ck-color-base-background);
+
+	/* -- Engine -------------------------------------------------------------------------------- */
+
+	--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%);
+	--ck-color-upload-infinite-background:		 				hsla(0, 0%, 0%, 0.1);
+}

+ 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 var(--ck-color-focus-shadow);
+
+	/**
+	 * A visual style of focused element's border or outline.
+	 */
+	--ck-focus-ring: 1px solid var(--ck-color-focus-border);
+}

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

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-font-size-base: 12px;
+	--ck-line-height-base: 1.67;
+	--ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
+
+	--ck-font-size-tiny: 0.7em;
+	--ck-font-size-small: 0.75em;
+	--ck-font-size-normal: 1em;
+	--ck-font-size-big: 1.4em;
+	--ck-font-size-large: 1.8em;
+}

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

@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Resets an element, ignoring its children.
+ */
+.ck-reset,
+.ck-reset_all,
+.ck-reset_all * {
+	/* Do not include inheritable rules here. */
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	text-decoration: none;
+	vertical-align: middle;
+	transition: none;
+
+	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/105 */
+	word-wrap: break-word;
+}
+
+/**
+ * Resets an element AND its children.
+ */
+.ck-reset_all,
+.ck-reset_all * {
+	/* These are rule inherited by all children elements. */
+	border-collapse: collapse;
+	font: normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face);
+	color: var(--ck-color-text);
+	text-align: left;
+	white-space: nowrap;
+	cursor: auto;
+	float: none;
+}
+
+.ck-reset_all {
+	& .ck-rtl * {
+		text-align: right;
+	}
+
+	& iframe {
+		/* For IE */
+		vertical-align: inherit;
+	}
+
+	& textarea {
+		white-space: pre-wrap;
+	}
+
+	& textarea,
+	& input[type="text"],
+	& input[type="password"] {
+		cursor: text;
+	}
+
+	& textarea[disabled],
+	& input[type="text"][disabled],
+	& input[type="password"][disabled] {
+		cursor: default;
+	}
+
+	& fieldset {
+		padding: 10px;
+		border: 2px groove #E0DFE3;
+	}
+
+	& button::-moz-focus-inner {
+		/* See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox */
+	    padding: 0;
+	    border: 0
+	}
+}

+ 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";

+ 45 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/mixins/_button.css

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * 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 $prefix {
+	background: var($(prefix)-background);
+	border-color: var($(prefix)-border);
+
+	&:not(.ck-disabled) {
+		&:hover,
+		&:focus {
+			background: var($(prefix)-focus-background);
+			border-color: var($(prefix)-focus-border);
+		}
+
+		&:active {
+			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: var($(prefix)-disabled-background);
+		border-color: var($(prefix)-disabled-border);
+	}
+}
+
+/**
+ * A helper to define button–specific icon styles.
+ *
+ */
+@define-mixin ck-button-icon {
+	& .ck-icon {
+		@mixin-content;
+	}
+}

+ 59 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-upload/imageuploadprogress.css

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* Infinite progress bar default width. */
+:root {
+	--ck-image-upload-progress-line-width: 30px;
+}
+
+figure.image {
+	/* Showing animation. */
+	&.ck-appear {
+		animation: fadeIn 700ms;
+	}
+
+	/* Infinite progress bar on top while image is read. */
+	&.ck-infinite-progress::before {
+		width: var(--ck-image-upload-progress-line-width);
+		height: 2px;
+		background: var(--ck-color-upload-infinite-background);
+		animation-name: readingProgressAnimation;
+		animation-duration: 1500ms;
+		animation-iteration-count: infinite;
+		transition-timing-function: linear;
+	}
+
+	&.ck-image-upload-placeholder > img {
+		width: 100%;
+	}
+
+	/* Upload progress bar. */
+	& .ck-progress-bar {
+		height: 2px;
+		width: 0;
+		background: var(--ck-color-upload-bar-background);
+		transition: width 100ms;
+	}
+}
+
+@keyframes fadeIn {
+	from { opacity: 0; }
+	to   { opacity: 1; }
+}
+
+@keyframes readingProgressAnimation {
+	0% {
+		width: var(--ck-image-upload-progress-line-width);
+		right: 0;
+	}
+
+	50% {
+		width: calc(var(--ck-image-upload-progress-line-width) * 1.5);
+	}
+
+	100% {
+		right: 100%;
+	}
+}

+ 46 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../mixins/_focus.css";
+@import "../mixins/_shadow.css";
+
+:root {
+	--ck-widget-outline-thickness: 3px;
+	--ck-color-widget-border-blurred: #ddd;
+	--ck-color-widget-border-hover: #FFD25C;
+	--ck-color-widget-editable-focused-background: var(--ck-color-base-background),
+}
+
+.ck-widget {
+	margin: var(--ck-spacing-standard) 0;
+	padding: 0;
+
+	&.ck-widget_selected,
+	&.ck-widget_selected:hover {
+		outline: var(--ck-widget-outline-thickness) solid var(--ck-color-focus-border);
+	}
+
+	@nest .ck-editor__editable.ck-blurred &.ck-widget_selected {
+		outline: var(--ck-widget-outline-thickness) solid var(--ck-color-widget-border-blurred);
+	}
+
+	&:hover {
+		outline: var(--ck-widget-outline-thickness) solid var(--ck-color-widget-border-hover);
+	}
+
+	& .ck-editable {
+		border: 1px solid transparent;
+
+		/* 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,
+		&:focus {
+			@mixin ck-focus-ring;
+			@mixin ck-box-shadow var(--ck-inner-shadow);
+
+			background-color: var(--ck-color-widget-editable-focused-background);
+		}
+	}
+}

+ 0 - 94
packages/ckeditor5-theme-lark/theme/components/button.scss

@@ -1,94 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-button,
-a.ck-button {
-	@include ck-button-colors( 'button-default-background', 'button-default-border' );
-	@include ck-rounded-corners();
-
-	border-width: 1px;
-	border-style: solid;
-	white-space: nowrap;
-	cursor: default;
-	vertical-align: middle;
-	padding: ck-spacing( 'small' );
-
-	// Enable font size inheritance, which allows fluid UI scaling.
-	font-size: inherit;
-
-	&:focus {
-		@include ck-focus-ring();
-		@include ck-box-shadow( $ck-focus-outer-shadow );
-	}
-
-	@include ck-button-icon {
-		float: left;
-	}
-
-	// https://github.com/ckeditor/ckeditor5-theme-lark/issues/70
-	&.ck-disabled {
-		@include ck-button-icon {
-			@include ck-disabled;
-		}
-
-		// https://github.com/ckeditor/ckeditor5-theme-lark/issues/98
-		.ck-button__label {
-			@include ck-disabled;
-		}
-	}
-
-	&.ck-button_with-text {
-		padding: ck-spacing( 'small' ) ck-spacing();
-
-		@include ck-button-icon {
-			margin-left: -#{ck-spacing( 'small' )};
-			margin-right: ck-spacing( 'small' );
-		}
-
-		.ck-button__label {
-			display: block;
-		}
-	}
-
-	// A style of the button which is currently on, e.g. its feature is active.
-	&.ck-on {
-		@include ck-button-colors( 'button-on-background', 'button-on-border' );
-	}
-
-	// A style of the button which handles the primary action.
-	&-action {
-		@include ck-button-colors( 'button-action-background', 'button-action-border' );
-
-		text-shadow: 0 -1px ck-color( 'button-action-background', -20 );
-		color: ck-color( 'button-action-text' );
-
-		&:hover,
-		&:focus,
-		&:active {
-			text-shadow: 0 -1px ck-color( 'button-action-background', -40 );
-		}
-	}
-
-	&-bold {
-		font-weight: bold;
-	}
-
-	.ck-icon {
-		use,
-		use * {
-			color: inherit;
-		}
-	}
-
-	.ck-button__label {
-		// Enable font size inheritance, which allows fluid UI scaling.
-		font-size: inherit;
-
-		float: left;
-		height: #{ $ck-line-height-base }em;
-		line-height: inherit;
-		font-weight: inherit;
-		color: inherit;
-		cursor: inherit;
-	}
-}

+ 0 - 43
packages/ckeditor5-theme-lark/theme/components/dropdown.scss

@@ -1,43 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-dropdown {
-	// Enable font size inheritance, which allows fluid UI scaling.
-	font-size: inherit;
-
-	// A triangle displayed to indicate this is actually a dropdown.
-	&::after {
-		border-style: solid;
-		border-width: .4em .4em 0 .4em;
-		border-color: ck-color( 'dropdown-symbol' ) transparent;
-		right: ck-spacing();
-	}
-
-	.ck-button.ck-dropdown__button {
-		// A space to accommodate the triangle.
-		padding-right: 2 * ck-spacing();
-
-		// https://github.com/ckeditor/ckeditor5-theme-lark/issues/70
-		&.ck-disabled .ck-button__label {
-			@include ck-disabled;
-		}
-
-		// #23
-		.ck-button__label {
-			width: 7em;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
-}
-
-.ck-dropdown__panel {
-	background: ck-color( 'dropdown-panel-background' );
-	border: 1px solid ck-color( 'dropdown-panel-border' );
-
-	// Compensate double border from button and from box when positioned below the button.
-	bottom: 1px;
-
-	@include ck-rounded-corners();
-	@include ck-drop-shadow();
-}

+ 0 - 66
packages/ckeditor5-theme-lark/theme/components/editor.scss

@@ -1,66 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-@import '../helpers/_button.scss';
-
-.ck-editor__editable {
-	@include ck-rounded-corners();
-
-	&.ck-focused {
-		@include ck-focus-ring();
-		@include ck-box-shadow( $ck-inner-shadow );
-	}
-
-	&_inline {
-		overflow: auto;
-		padding: 0 ck-spacing();
-		border: 1px solid transparent;
-	}
-}
-
-
-.ck-editor-toolbar {
-	.ck-button {
-		border-width: 0;
-
-		&:not(:hover):not(:focus):not(.ck-on),
-		&.ck-disabled {
-			background: ck-color( 'editor-toolbar-background' );
-		}
-
-		&.ck-on {
-			@include ck-button-colors( 'editor-toolbar-button-background', 'button-default-border', -10 );
-		}
-	}
-
-	.ck-button.ck-dropdown__button {
-		border-width: 1px;
-
-		&:not(:hover):not(:focus):not(.ck-on) {
-			background: ck-color( 'editor-dropdown-background' );
-		}
-	}
-
-	.ck-toolbar-container & {
-		background: ck-color( 'editor-toolbar-background' );
-	}
-}
-
-// https://github.com/ckeditor/ckeditor5-theme-lark/issues/111
-.ck-toolbar-container.ck-editor-toolbar-container.ck-balloon-panel_arrow {
-	&_n,
-	&_ne,
-	&_nw {
-		&:after {
-			border-bottom-color: ck-color( 'editor-toolbar-background' );
-		}
-	}
-
-	&_s,
-	&_se,
-	&_sw {
-		&:after {
-			border-top-color: ck-color( 'editor-toolbar-background' );
-		}
-	}
-}

+ 0 - 7
packages/ckeditor5-theme-lark/theme/components/icon.scss

@@ -1,7 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-svg.ck-icon {
-	width: #{ $ck-line-height-base }em;
-	height: #{ $ck-line-height-base }em;
-}

+ 0 - 25
packages/ckeditor5-theme-lark/theme/components/inputtext.scss

@@ -1,25 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-input {
-	&-text {
-		@include ck-rounded-corners();
-		@include ck-box-shadow( $ck-inner-shadow );
-
-		background: ck-color( 'input-background' );
-		border: 1px solid ck-color( 'input-border' );
-		padding: ck-spacing( 'small' ) ck-spacing( 'medium' );
-		min-width: 21em;
-
-		&:focus {
-			@include ck-focus-ring();
-			@include ck-box-shadow( $ck-focus-outer-shadow, $ck-inner-shadow );
-		}
-
-		&[readonly] {
-			border: 1px solid ck-color( 'input-border', 10 );
-			background: ck-color( 'input-background', -5 );
-			color: ck-color( 'input-text', 20 );
-		}
-	}
-}

+ 0 - 6
packages/ckeditor5-theme-lark/theme/components/label.scss

@@ -1,6 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-label {
-	font-weight: bold;
-}

+ 0 - 41
packages/ckeditor5-theme-lark/theme/components/list.scss

@@ -1,41 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-list {
-	@include ck-rounded-corners();
-	@include ck-unselectable();
-
-	// Crop the the items when the list has huge border-radius.
-	overflow: hidden;
-	list-style-type: none;
-	background: ck-color( 'list-background' );
-
-	&__item {
-		padding: ck-spacing( 'medium' );
-		cursor: default;
-		min-width: 12em;
-
-		&:hover,
-		&:focus {
-			background: ck-color( 'list-item-background-hover' );
-		}
-
-		&:focus {
-			@include ck-box-shadow( $ck-focus-outer-shadow );
-
-			position: relative;
-			z-index: ck-z();
-			outline: none;
-		}
-
-		&_active {
-			background: ck-color( 'list-item-background-active' );
-			color: ck-color( 'list-item-text-active' );
-
-			&:hover,
-			&:focus {
-				background: ck-color( 'list-item-background-active', -10 );
-			}
-		}
-	}
-}

+ 0 - 113
packages/ckeditor5-theme-lark/theme/components/panel/balloonpanel.scss

@@ -1,113 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-$ck-balloon-arrow-offset: 2px;
-$ck-balloon-arrow-height: 15px;
-$ck-balloon-arrow-half-width: 10px;
-
-.ck-balloon-panel {
-	@include ck-rounded-corners();
-	@include ck-drop-shadow();
-
-	min-height: 15px;
-
-	background: ck-color( 'panel-background' );
-	border: 1px solid ck-color( 'panel-border' );
-
-	&.ck-balloon-panel_with-arrow {
-		&:before,
-		&:after {
-			width: 0;
-			height: 0;
-			border-style: solid;
-		}
-	}
-
-	&.ck-balloon-panel_arrow {
-		&_n,
-		&_ne,
-		&_nw {
-			&:before,
-			&:after {
-				border-width: 0 $ck-balloon-arrow-half-width $ck-balloon-arrow-height $ck-balloon-arrow-half-width;
-			}
-
-			&:before {
-				border-color: transparent transparent ck-color( 'panel-border' ) transparent;
-			}
-
-			&:after {
-				border-color: transparent transparent ck-color( 'panel-background' ) transparent;
-				margin-top: $ck-balloon-arrow-offset;
-			}
-		}
-
-		&_s,
-		&_se,
-		&_sw {
-			&:before,
-			&:after {
-				border-width: $ck-balloon-arrow-height $ck-balloon-arrow-half-width 0 $ck-balloon-arrow-half-width;
-			}
-
-			&:before {
-				border-color: ck-color( 'panel-border' ) transparent  transparent;
-			}
-
-			&:after {
-				border-color: ck-color( 'panel-background' ) transparent transparent transparent;
-				margin-bottom: $ck-balloon-arrow-offset;
-			}
-		}
-
-		&_n {
-			&:before,
-			&:after {
-				left: 50%;
-				margin-left: -$ck-balloon-arrow-half-width;
-				top: -$ck-balloon-arrow-height;
-			}
-		}
-
-		&_nw {
-			&:before,
-			&:after {
-				left: 2 * $ck-balloon-arrow-half-width;
-				top: -$ck-balloon-arrow-height;
-			}
-		}
-
-		&_ne {
-			&:before,
-			&:after {
-				right: 2 * $ck-balloon-arrow-half-width;
-				top: -$ck-balloon-arrow-height;
-			}
-		}
-
-		&_s {
-			&:before,
-			&:after {
-				left: 50%;
-				margin-left: -$ck-balloon-arrow-half-width;
-				bottom: -$ck-balloon-arrow-height;
-			}
-		}
-
-		&_sw {
-			&:before,
-			&:after {
-				left: 2 * $ck-balloon-arrow-half-width;
-				bottom: -$ck-balloon-arrow-height;
-			}
-		}
-
-		&_se {
-			&:before,
-			&:after {
-				right: 2 * $ck-balloon-arrow-half-width;
-				bottom: -$ck-balloon-arrow-height;
-			}
-		}
-	}
-}

+ 0 - 14
packages/ckeditor5-theme-lark/theme/components/panel/stickypanel.scss

@@ -1,14 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-@include ck-editor {
-	.ck-sticky-panel {
-		.ck-sticky-panel__content_sticky {
-			@include ck-drop-shadow();
-
-			border-width: 0 1px 1px;
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-		}
-	}
-}

+ 0 - 74
packages/ckeditor5-theme-lark/theme/components/reset.scss

@@ -1,74 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * Resets an element, ignoring its children.
- */
-.ck-reset {
-	// Do not include inheritable rules here.
-	margin: 0;
-	padding: 0;
-	border: 0;
-	background: transparent;
-	text-decoration: none;
-	vertical-align: middle;
-	transition: none;
-
-	// https://github.com/ckeditor/ckeditor5-theme-lark/issues/105
-	word-wrap: break-word;
-}
-
-/**
- * Resets an element AND its children.
- */
-.ck-reset_all {
-	&, *, a, textarea {
-		// These are rule inherited by all children elements.
-		border-collapse: collapse;
-		font: normal normal normal #{$ck-font-size-base}/#{$ck-line-height-base} $ck-font-face;
-		color: ck-color( 'text' );
-		text-align: left;
-		white-space: nowrap;
-		cursor: auto;
-		float: none;
-
-		// The following must be identical to .ck-reset.
-		@extend .ck-reset;
-	}
-
-	.ck-rtl * {
-		text-align: right;
-	}
-
-	// Defaults for some elements.
-	iframe {
-		vertical-align: inherit;	// For IE
-	}
-
-	textarea {
-		white-space: pre-wrap;
-	}
-
-	textarea,
-	input[type="text"],
-	input[type="password"] {
-		cursor: text;
-	}
-
-	textarea[disabled],
-	input[type="text"][disabled],
-	input[type="password"][disabled] {
-		cursor: default;
-	}
-
-	fieldset {
-		padding: 10px;
-		border: 2px groove #E0DFE3;
-	}
-
-	// See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox
-	button::-moz-focus-inner {
-	    padding: 0;
-	    border: 0
-	}
-}

+ 0 - 45
packages/ckeditor5-theme-lark/theme/components/toolbar/toolbar.scss

@@ -1,45 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-toolbar {
-	padding: ck-spacing( 'small' );
-	border: 1px solid ck-color( 'toolbar-border' );
-
-	// Allow wrapping toolbar items to the new line.
-	white-space: initial;
-
-	&_floating {
-		// Disallow wrapping toolbar items to the new line when the toolbar is floating,
-		// resulting in an toolbar shapes when the horizontal space is limited.
-		// https://github.com/ckeditor/ckeditor5-theme-lark/issues/93
-		white-space: nowrap;
-	}
-
-	@include ck-unselectable();
-	@include ck-rounded-corners();
-
-	&__separator {
-		width: 1px;
-		height: calc( 1em + 2 * #{ck-spacing( 'medium' )} );
-		vertical-align: middle;
-		background: ck-color( 'toolbar-border' );
-	}
-
-	&__newline {
-		height: ck-spacing( 'small' );
-	}
-
-	// (#11) Separate toolbar items.
-	& > * {
-		margin-right: ck-spacing( 'small' );
-	}
-
-	& > *:last-child {
-		margin-right: 0;
-	}
-
-	.ck-toolbar-container & {
-		border: 0;
-	}
-}
-

+ 0 - 77
packages/ckeditor5-theme-lark/theme/components/tooltip.scss

@@ -1,77 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-$ck-tooltip-arrow-size: 5px;
-
-.ck-tooltip {
-	left: 50%;
-
-	&__text {
-		@include ck-rounded-corners();
-
-		font-size: .9em;
-		line-height: 1.5;
-		color: ck-color( 'tooltip-text' );
-		padding: ck-spacing( 'small' ) ck-spacing( 'medium' );
-		background: ck-color( 'tooltip-background' );
-		position: relative;
-		left: -50%;
-
-		&::after {
-			border-style: solid;
-			left: 50%;
-		}
-	}
-
-	/**
-	 * A class once applied displays the tooltip south of the element.
-	 *
-	 *       [element]
-	 *           ^
-	 *     +-----------+
-	 *     |  Tooltip  |
-	 *     +-----------+
-	 */
-	&.ck-tooltip_s {
-		bottom: - $ck-tooltip-arrow-size;
-		transform: translateY( 100% );
-
-		.ck-tooltip__text::after {
-			top: -$ck-tooltip-arrow-size;
-			transform: translateX( -50% );
-			border-color: transparent transparent ck-color( 'tooltip-background' ) transparent;
-			border-width: 0 $ck-tooltip-arrow-size $ck-tooltip-arrow-size $ck-tooltip-arrow-size;
-
-		}
-	}
-
-	/**
-	 * A class once applied displays the tooltip north of the element.
-	 *
-	 *     +-----------+
-	 *     |  Tooltip  |
-	 *     +-----------+
-	 *           V
-	 *       [element]
-	 */
-	&.ck-tooltip_n {
-		top: -$ck-tooltip-arrow-size;
-		transform: translateY( -100% );
-
-		.ck-tooltip__text::after {
-			bottom: -$ck-tooltip-arrow-size;
-			transform: translateX( -50% );
-			border-color: ck-color( 'tooltip-background' ) transparent transparent transparent;
-			border-width: $ck-tooltip-arrow-size $ck-tooltip-arrow-size 0 $ck-tooltip-arrow-size;
-		}
-	}
-}
-
-.ck-tooltip,
-.ck-tooltip__text::after {
-	// For the transition to work, the tooltip must be controlled
-	// using visibility+opacity. A delay prevents a "tooltip avalanche"
-	// i.e. when scanning the toolbar with mouse cursor.
-	transition: opacity .2s ease-in-out .2s;
-}
-

+ 0 - 43
packages/ckeditor5-theme-lark/theme/helpers/_button.scss

@@ -1,43 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * Implements a button of given background color.
- *
- * @param {String} $background - Background color of the button.
- * @param {String} $border - Border color of the button.
- */
-@mixin ck-button-colors( $background, $border, $offset: 0 ) {
-	background: ck-color( $background, $offset );
-	border-color: ck-color( $border, $offset );
-
-	&:not(.ck-disabled) {
-		&:hover,
-		&:focus {
-			background: ck-color( $background, $offset - 10 );
-			border-color: ck-color( $border, $offset - 10 );
-		}
-
-		&:active {
-			background: ck-color( $background, $offset - 15 );
-			border-color: ck-color( $border, $offset - 15 );
-			box-shadow: inset 0 2px 2px ck-color( $background, $offset - 25 );
-		}
-	}
-
-	// https://github.com/ckeditor/ckeditor5-theme-lark/issues/98
-	&.ck-disabled {
-		background: ck-color( $background, $offset + 10 );
-		border-color: ck-color( $border, $offset + 10 );
-	}
-}
-
-/**
- * A helper to define button–specific icon styles.
- *
- */
-@mixin ck-button-icon {
-	.ck-icon {
-		@content;
-	}
-}

+ 0 - 96
packages/ckeditor5-theme-lark/theme/helpers/_colors.scss

@@ -1,96 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-$ck-color-foreground: 							#f7f7f7 !default;
-$ck-color-background: 							#fff !default;
-$ck-color-border: 								scale-color( $ck-color-background, $lightness: -25 ) !default;
-$ck-color-action: 								#61B145 !default;
-$ck-color-focus: 								#6ab5f9 !default;
-$ck-color-text: 								#333 !default;
-$ck-color-active: 								#1A8BF1 !default;
-
-/**
- * Colors configured by the user.
- *
- * @type Map
- * @example
- *		$ck-colors: ( 'foreground': red );
- * @see $_ck-colors
- */
-$ck-colors: () !default;
-
-/**
- * Internal map with default colors.
- *
- * @type Map
- * @see ck-color-add
- */
-$_ck-colors: (
-	'border-focus': 							#48a3f5,
-	'text': 									$ck-color-text,
-	'shadow-drop': 								rgba( 0, 0, 0, .2 ),
-	'shadow-inner': 							rgba( 0, 0, 0, .1 ),
-
-	// ------------------------------------------------------------
-
-	'button-default-background': 				$ck-color-background,
-	'button-default-border': 					$ck-color-border,
-	'button-on-background': 					$ck-color-foreground,
-	'button-on-border': 						scale-color( $ck-color-foreground, $lightness: -25 ),
-	'button-action-background': 				$ck-color-action,
-	'button-action-border': 					scale-color( $ck-color-action, $lightness: -20 ),
-	'button-action-text': 						$ck-color-background,
-
-	'dropdown-panel-background': 				$ck-color-background,
-	'dropdown-panel-border': 					$ck-color-border,
-	'dropdown-symbol': 							#707070,
-
-	'input-background': 						$ck-color-background,
-	'input-border': 							$ck-color-border,
-	'input-text': 								$ck-color-text,
-
-	'list-background': 							$ck-color-background,
-	'list-item-background-hover': 				$ck-color-foreground,
-	'list-item-background-active': 				$ck-color-active,
-	'list-item-text-active':					$ck-color-background,
-
-	'panel-background': 						$ck-color-background,
-	'panel-border': 							$ck-color-border,
-
-	'toolbar-background': 						$ck-color-background,
-	'toolbar-border': 							$ck-color-border,
-
-	'tooltip-background': 						$ck-color-text,
-	'tooltip-text': 							$ck-color-background,
-
-	'editor-border': 							$ck-color-border,
-	'editor-toolbar-background': 				$ck-color-foreground,
-	'editor-toolbar-button-background': 		$ck-color-foreground,
-	'editor-dropdown-background': 				$ck-color-background,
-);
-
-/**
- * Returns a color of given name and lightness offset.
- *
- * @param {String} $name [ 'background' ] - Name of the color.
- * @param {Number} $offset [ 0 ] - Offset of the lightness.
- * @return {String}
- * @see $_ck-colors
- */
-@function ck-color( $name: 'background', $offset: 0 ) {
-	$colors: map-merge( $_ck-colors, $ck-colors );
-
-	@return scale-color( map-get( $colors, $name ), $lightness: $offset );
-}
-
-/**
- * Adds a color to internal color map.
- *
- * @example
- *		@include ck-color-add( ( 'special': yellow, 'hover': #00FF00 ) );
- * @param {Map} $map - A map with new colors.
- * @see $_ck-colors
- */
-@mixin ck-color-add( $map ) {
-	$_ck-colors: map-merge( $_ck-colors, $map ) !global;
-}

+ 0 - 45
packages/ckeditor5-theme-lark/theme/helpers/_fonts.scss

@@ -1,45 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * Base font size.
- *
- * @see $ck-font-sizes
- */
-$ck-font-size-base: 12px !default;
-
-/**
- * Base line height.
- */
-$ck-line-height-base: 1.67 !default;
-
-/**
- * Base font face.
- *
- */
-$ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif !default;
-
-/**
- * Base font sizes for scaling.
- *
- * @see ck-font-size
- */
-$ck-font-sizes: (
-	-2: 0.7em,
-	-1: 0.75em,
-	 0: 1em,
-	 1: 1.4em,
-	 2: 1.8em
-);
-
-/**
- * Returns font-size in units for given level.
- *
- * @param {Number} $level [ 0 ] - Size of the font.
- * @return {String}
- * @see $ck-font-sizes
- * @see $ck-font-size-base
- */
-@function ck-font-size( $level: 0 ) {
-	@return map-get( $ck-font-sizes, $level );
-}

+ 0 - 21
packages/ckeditor5-theme-lark/theme/helpers/_rounded.scss

@@ -1,21 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * Default border-radius value.
- *
- */
-$ck-border-radius: 2px !default;
-
-/**
- * Implements rounded corner interface for .ck-rounded-corners class.
- *
- * @see $ck-border-radius
- */
-@mixin ck-rounded-corners() {
-	&.ck-rounded-corners,
-	.ck-rounded-corners & {
-		border-radius: $ck-border-radius;
-		@content;
-	}
-}

+ 0 - 26
packages/ckeditor5-theme-lark/theme/helpers/_shadow.scss

@@ -1,26 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * A visual style of element's inner shadow (i.e. input).
- */
-$ck-inner-shadow: 2px 2px 3px ck-color( 'shadow-inner' ) inset;
-
-/**
- * A visual style of element's drop shadow (i.e. panel).
- */
-$ck-drop-shadow: 0 1px 2px 0 ck-color( 'shadow-drop' );
-
-/**
- * A helper to combine multiple shadows.
- */
-@mixin ck-box-shadow($shadows...) {
-	box-shadow: $shadows;
-}
-
-/**
- * Gives an element a drop shadow so it looks like a floating panel.
- */
-@mixin ck-drop-shadow() {
-	@include ck-box-shadow( $ck-drop-shadow );
-}

+ 0 - 34
packages/ckeditor5-theme-lark/theme/helpers/_spacing.scss

@@ -1,34 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * Default spacing value ("unit").
- *
- */
-$ck-def-spacing: .8em !default;
-
-/**
- * Internal map with default spacings.
- *
- * @type Map
- * @see ck-spacing
- */
-$ck-def-spacings: (
-	'large': 1.5,
-	'standard': 1,
-	'medium': .8,
-	'small': .5,
-	'tiny': .25
-);
-
-/**
- * Returns a spacing value with units for given name.
- *
- * @param {String} $spacing [ 'standard' ] - Spacing level.
- * @return {String}
- * @see $ck-def-spacing
- * @see $ck-def-spacings
- */
-@function ck-spacing( $spacing: 'standard' ) {
-	@return $ck-def-spacing * map-get( $ck-def-spacings, $spacing );
-}

+ 0 - 42
packages/ckeditor5-theme-lark/theme/helpers/_states.scss

@@ -1,42 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * A visual style of focused element's outer shadow.
- */
-$ck-focus-outer-shadow: 0 0 3px 2px lighten( ck-color( 'border-focus' ), 10% );
-
-/**
- * A visual style of focused element's border or outline.
- */
-$ck-focus-ring: 1px solid 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.
- */
-@mixin ck-disabled {
-	opacity: $ck-disabled-opacity;
-}
-
-/**
- * A visual style of focused element's border.
- */
-@mixin ck-focus-ring() {
-	// Disable native outline.
-	outline: none;
-	border: $ck-focus-ring;
-}
-
-/**
- * Brings visual styling for :focus state.
- */
-@mixin ck-user-focus-outline() {
-	&:focus {
-		@include ck-focus-outline();
-	}
-}

+ 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)
+}

+ 19 - 0
packages/ckeditor5-theme-lark/theme/mixins/_rounded.css

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Implements rounded corner interface for .ck-rounded-corners class.
+ *
+ * @see $ck-border-radius
+ */
+@define-mixin ck-rounded-corners {
+	border-radius: 0;
+
+	@nest .ck-rounded-corners &,
+	&.ck-rounded-corners {
+		border-radius: var(--ck-border-radius);
+		@mixin-content;
+	}
+}

+ 18 - 0
packages/ckeditor5-theme-lark/theme/mixins/_shadow.css

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * A helper to combine multiple shadows.
+ */
+@define-mixin ck-box-shadow $shadowA, $shadowB: 0 0 {
+	box-shadow: $shadowA, $shadowB;
+}
+
+/**
+ * Gives an element a drop shadow so it looks like a floating panel.
+ */
+@define-mixin ck-drop-shadow {
+	@mixin ck-box-shadow var(--ck-drop-shadow);
+}

+ 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.
+ */
+

+ 0 - 26
packages/ckeditor5-theme-lark/theme/theme.scss

@@ -1,26 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-// Lark is based on the UI wireframe theme
-@import '~@ckeditor/ckeditor5-ui/theme/theme';
-
-@import 'helpers/colors';
-@import 'helpers/fonts';
-@import 'helpers/rounded';
-@import 'helpers/spacing';
-@import 'helpers/states';
-@import 'helpers/shadow';
-@import 'helpers/button';
-
-@import 'components/reset';
-@import 'components/icon';
-@import 'components/tooltip';
-@import 'components/button';
-@import 'components/toolbar/toolbar';
-@import 'components/dropdown';
-@import 'components/list';
-@import 'components/label';
-@import 'components/inputtext';
-@import 'components/editor';
-@import 'components/panel/balloonpanel';
-@import 'components/panel/stickypanel';