Browse Source

Merge pull request #108 from ckeditor/t/107

Other: Refactored the theme so it allows for easy customization with SASS variables. Closes #107.

BREAKING CHANGES: The theme has been basically rewritten. Consider it a new implementation.
Piotrek Koszuliński 8 years ago
parent
commit
8a6dc2bf2d
24 changed files with 589 additions and 144 deletions
  1. 79 0
      packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.scss
  2. 21 0
      packages/ckeditor5-theme-lark/docs/_snippets/examples/extras.scss
  3. 10 0
      packages/ckeditor5-theme-lark/docs/_snippets/examples/theme-lark.html
  4. 27 0
      packages/ckeditor5-theme-lark/docs/_snippets/examples/theme-lark.js
  5. 11 0
      packages/ckeditor5-theme-lark/docs/examples/customized-theme.md
  6. 247 0
      packages/ckeditor5-theme-lark/docs/guides/theme-customization.md
  7. 15 57
      packages/ckeditor5-theme-lark/theme/components/button.scss
  8. 6 3
      packages/ckeditor5-theme-lark/theme/components/dropdown.scss
  9. 25 10
      packages/ckeditor5-theme-lark/theme/components/editor.scss
  10. 2 2
      packages/ckeditor5-theme-lark/theme/components/icon.scss
  11. 7 6
      packages/ckeditor5-theme-lark/theme/components/inputtext.scss
  12. 8 9
      packages/ckeditor5-theme-lark/theme/components/list.scss
  13. 6 6
      packages/ckeditor5-theme-lark/theme/components/panel/balloonpanel.scss
  14. 1 1
      packages/ckeditor5-theme-lark/theme/components/reset.scss
  15. 3 3
      packages/ckeditor5-theme-lark/theme/components/toolbar/stickytoolbar.scss
  16. 2 3
      packages/ckeditor5-theme-lark/theme/components/toolbar/toolbar.scss
  17. 6 6
      packages/ckeditor5-theme-lark/theme/components/tooltip.scss
  18. 43 0
      packages/ckeditor5-theme-lark/theme/helpers/_button.scss
  19. 49 19
      packages/ckeditor5-theme-lark/theme/helpers/_colors.scss
  20. 10 5
      packages/ckeditor5-theme-lark/theme/helpers/_fonts.scss
  21. 1 0
      packages/ckeditor5-theme-lark/theme/helpers/_rounded.scss
  22. 2 2
      packages/ckeditor5-theme-lark/theme/helpers/_shadow.scss
  23. 7 12
      packages/ckeditor5-theme-lark/theme/helpers/_states.scss
  24. 1 0
      packages/ckeditor5-theme-lark/theme/theme.scss

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

@@ -0,0 +1,79 @@
+// 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.scss

@@ -0,0 +1,21 @@
+// 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
+		);
+	}
+}

+ 10 - 0
packages/ckeditor5-theme-lark/docs/_snippets/examples/theme-lark.html

@@ -0,0 +1,10 @@
+<div id="snippet-classic-editor">
+	<p>
+		This is <a href="https://ckeditor5.github.io">CKEditor&nbsp;5</a>.
+	</p>
+	<p>
+		It uses the default
+		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark">Lark</a>
+		theme with various customizations.
+	</p>
+</div>

+ 27 - 0
packages/ckeditor5-theme-lark/docs/_snippets/examples/theme-lark.js

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+/* config { "sassImportPath": "./custom.scss" } */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePreset from '@ckeditor/ckeditor5-presets/src/article';
+import './extras.scss';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-classic-editor' ), {
+		plugins: [ ArticlePreset ],
+		toolbar: [ 'headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
+		image: {
+			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 11 - 0
packages/ckeditor5-theme-lark/docs/examples/customized-theme.md

@@ -0,0 +1,11 @@
+---
+title: Customized theme
+category: examples-framework
+order: 10
+---
+
+The [default theme](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark) of CKEditor 5 can be customized to match most visual integration requirements.
+
+Below, you can see an editor with the dark theme as a result of customizations described in a {@link guides/theme-customization dedicated guide}.
+
+{@snippet examples/theme-lark}

+ 247 - 0
packages/ckeditor5-theme-lark/docs/guides/theme-customization.md

@@ -0,0 +1,247 @@
+---
+title: Theme customization
+category: ui
+order: 10
+---
+
+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).
+
+Although it has been 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.
+
+You can see the demo of an editor with the dark theme as a result of customizations described later in this guide:
+
+{@snippet examples/theme-lark}
+
+## Styles processing and bundling
+
+CKEditor 5 is bundled using [webpack](https://webpack.js.org/) and it handles the importing and processing of the styles using the [loaders](https://webpack.js.org/concepts/loaders/). Its configuration can be found in the `webpack.config.js` file.
+
+<info-box info>
+	To learn more about building CKEditor, check out the {@link builds/guides/development/custom-builds official guide}.
+</info-box>
+
+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).
+
+	```js
+	import '../theme/theme.scss';
+
+	class AnyEditorClass {
+		...
+	}
+	```
+
+	```scss
+	// Contents of theme.scss.
+	$color: red;
+
+	.ck-editor {
+		color: $color;
+	}
+	```
+
+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;
+	}
+	```
+
+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;
+			}
+		</style>
+	</head>
+	```
+
+## Customization with SASS variables
+
+Having {@link builds/guides/development/custom-builds#Forking-an-existing-build cloned} an existing build of CKEditor for a quick start, let's take a look on the specific definitions in the `webpack.config.js`.
+
+```js
+module: {
+	rules: [
+		...
+		{
+			test: /\.scss$/,
+			use: [
+				'style-loader',
+				'css-loader',
+				'sass-loader'
+			]
+		}
+	]
+}
+```
+
+Each single SASS file is compiled in a separate thread, so to override default variables (defined with `!default`) across the theme, new values must be imported/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.
+
+
+Let's [`@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.
+
+```js
+use: [
+	'style-loader',
+	'css-loader',
+	{
+		loader: 'sass-loader',
+		options: {
+			data: `@import 'custom.scss';`
+		}
+	}
+]
+```
+
+Using the full potential of the SASS variables, the customization will make the theme dark, with slightly bigger text and more rounded corners.
+
+<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>
+
+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 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
+);
+```
+
+Now let's build the editor using `npm run build-ckeditor` and see the results. From now on, the editor's theme is using customized styles.
+
+## Adding extra styles to the build
+
+Not every element of the theme can be customized using SASS variables and some visual tweaking may require more complex CSS rules.
+
+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
+.ck-editor-toolbar .ck-button.ck-dropdown__button {
+	box-shadow: 0 0 0 1px #5c5b5d inset, 0 0 5px #5c5b5d inset;
+}
+```
+
+The above rule could be added directly to any styles sheet in the web page and most certainly would work as expected.
+
+But what if the color set customized in the [previous part](#Customization-with-SASS-variables) of this guide has changed? Static CSS rules will not update along with the SASS variables and neither they can benefit from the mixins and functions provided by the theme. To add an extra styles and keep it within the ecosystem, a separate SASS file should be created (let's call it `extras.scss`):
+
+```scss
+// 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
+		);
+	}
+}
+```
+
+and then imported into a JavaScript file that is processed by webpack and the [loaders](#Styles-processing-and-bundling), like an e.g. an entry–point of the application.
+
+```js
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import 'extras.scss';
+
+ClassicEditor
+	.create( ... )
+	.then( editor => {
+		console.log( editor );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+```
+
+This way, the additional styles will stay up–to–date as the application develops and changes over the time.

+ 15 - 57
packages/ckeditor5-theme-lark/theme/components/button.scss

@@ -1,58 +1,9 @@
 // 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} $color - Background color of the button.
- */
-@mixin ck-button-colors( $color, $offset: 0 ) {
-	background: ck-color( $color, $offset );
-	border-color: ck-border-color( $color, $offset );
-
-	@include ck-button-state-colors( $color, $offset );
-}
-
-/**
- * Implements button states.
- *
- * @param {String} $color - Background color of the button.
- */
-@mixin ck-button-state-colors( $color, $offset: 0 ) {
-	&:not(.ck-disabled) {
-		&:hover,
-		&:focus {
-			background: ck-color( $color, $offset - 10 );
-			border-color: ck-border-color( $color, $offset - 10 );
-		}
-
-		&:active {
-			background: ck-color( $color, $offset - 15 );
-			border-color: ck-border-color( $color, $offset - 15 );
-			box-shadow: inset 0 2px 2px ck-color( $color, $offset - 25 );
-		}
-	}
-
-	// https://github.com/ckeditor/ckeditor5-theme-lark/issues/98
-	&.ck-disabled {
-		background: ck-color( $color, $offset + 10 );
-		border-color: ck-border-color( $color, $offset + 10 );
-	}
-}
-
-/**
- * A helper to define button–specific icon styles.
- *
- */
-@mixin ck-button-icon {
-	.ck-icon {
-		@content;
-	}
-}
-
 .ck-button,
 a.ck-button {
-	@include ck-button-colors( 'background' );
+	@include ck-button-colors( 'button-default-background', 'button-default-border' );
 	@include ck-rounded-corners();
 
 	border-width: 1px;
@@ -61,7 +12,9 @@ a.ck-button {
 	cursor: default;
 	vertical-align: middle;
 	padding: ck-spacing( 'small' );
-	line-height: $ck-icon-size / $ck-font-size-base;
+
+	// Enable font size inheritance, which allows fluid UI scaling.
+	font-size: inherit;
 
 	&:focus {
 		@include ck-focus-ring();
@@ -97,20 +50,22 @@ a.ck-button {
 		}
 	}
 
+	// A style of the button which is currently on, e.g. its feature is active.
 	&.ck-on {
-		@include ck-button-colors( 'foreground' );
+		@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( 'action' );
+		@include ck-button-colors( 'button-action-background', 'button-action-border' );
 
-		text-shadow: 0 -1px ck-color( 'action', -20 );
-		color: ck-color();
+		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( 'action', -40 );
+			text-shadow: 0 -1px ck-color( 'button-action-background', -40 );
 		}
 	}
 
@@ -126,9 +81,12 @@ a.ck-button {
 	}
 
 	.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-size: inherit;
 		font-weight: inherit;
 		color: inherit;
 		cursor: inherit;

+ 6 - 3
packages/ckeditor5-theme-lark/theme/components/dropdown.scss

@@ -2,11 +2,14 @@
 // 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( 'text', 30 ) transparent;
+		border-color: ck-color( 'dropdown-symbol' ) transparent;
 		right: ck-spacing();
 	}
 
@@ -29,11 +32,11 @@
 }
 
 .ck-dropdown__panel {
-	border: 1px solid ck-border-color( 'foreground' );
+	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;
-	background: ck-color( 'background' );
 
 	@include ck-rounded-corners();
 	@include ck-drop-shadow();

+ 25 - 10
packages/ckeditor5-theme-lark/theme/components/editor.scss

@@ -1,33 +1,48 @@
 // Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
-.ck-editor-toolbar {
-	// Toolbars should not react to ck-rounded-corners() mixin.
-	border-radius: 0;
+@import '~@ckeditor/ckeditor5-theme-lark/theme/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( 'foreground' );
+			background: ck-color( 'editor-toolbar-background' );
 		}
 
 		&.ck-on {
-			@include ck-button-colors( 'foreground', -10 );
+			@include ck-button-colors( 'editor-toolbar-button-background', 'button-default-border', -10 );
 		}
 	}
 
-	.ck-dropdown__button {
+	.ck-button.ck-dropdown__button {
 		border-width: 1px;
 
 		&:not(:hover):not(:focus):not(.ck-on) {
-			background: ck-color( 'background' );
+			background: ck-color( 'editor-dropdown-background' );
 		}
 	}
 
 	.ck-toolbar-container & {
-		background: ck-color( 'foreground' );
+		background: ck-color( 'editor-toolbar-background' );
 	}
 }
 
@@ -36,7 +51,7 @@
 	&_ne,
 	&_nw {
 		&:after {
-			border-bottom-color: ck-color( 'foreground' );
+			border-bottom-color: ck-color( 'editor-toolbar-background' );
 		}
 	}
 
@@ -44,7 +59,7 @@
 	&_se,
 	&_sw {
 		&:after {
-			border-top-color: ck-color( 'foreground' );
+			border-top-color: ck-color( 'editor-toolbar-background' );
 		}
 	}
 }

+ 2 - 2
packages/ckeditor5-theme-lark/theme/components/icon.scss

@@ -2,6 +2,6 @@
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 svg.ck-icon {
-	width: #{ $ck-icon-size / $ck-font-size-base }em;
-	height: #{ $ck-icon-size / $ck-font-size-base }em;
+	width: #{ $ck-line-height-base }em;
+	height: #{ $ck-line-height-base }em;
 }

+ 7 - 6
packages/ckeditor5-theme-lark/theme/components/inputtext.scss

@@ -6,9 +6,10 @@
 		@include ck-rounded-corners();
 		@include ck-box-shadow( $ck-inner-shadow );
 
-		border: 1px solid ck-border-color( 'foreground' );
-		padding: ck-spacing( 'medium' );
-		min-width: 250px;
+		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();
@@ -16,9 +17,9 @@
 		}
 
 		&[readonly] {
-			border: 1px solid ck-border-color( 'foreground', 10 );
-			background: ck-color( 'foreground' );
-			color: ck-color( 'text', 20 );
+			border: 1px solid ck-color( 'input-border', 10 );
+			background: ck-color( 'input-background', -5 );
+			color: ck-color( 'input-text', 20 );
 		}
 	}
 }

+ 8 - 9
packages/ckeditor5-theme-lark/theme/components/list.scss

@@ -5,8 +5,10 @@
 	@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( 'background' );
+	background: ck-color( 'list-background' );
 
 	&__item {
 		padding: ck-spacing( 'medium' );
@@ -15,27 +17,24 @@
 
 		&:hover,
 		&:focus {
-			background: ck-color( 'foreground' );
+			background: ck-color( 'list-item-background-hover' );
 		}
 
 		&:focus {
 			@include ck-box-shadow( $ck-focus-outer-shadow );
+
 			position: relative;
 			z-index: ck-z();
 			outline: none;
 		}
 
-		&:last-of-type {
-			border: none;
-		}
-
 		&_active {
-			background: ck-color( 'active' );
-			color: ck-color( 'background' );
+			background: ck-color( 'list-item-background-active' );
+			color: ck-color( 'list-item-text-active' );
 
 			&:hover,
 			&:focus {
-				background: ck-color( 'active', -10 );
+				background: ck-color( 'list-item-background-active', -10 );
 			}
 		}
 	}

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

@@ -11,8 +11,8 @@ $ck-balloon-arrow-half-width: 10px;
 
 	min-height: 15px;
 
-	background: ck-color( 'background' );
-	border: 1px solid ck-border-color( 'foreground' );
+	background: ck-color( 'panel-background' );
+	border: 1px solid ck-color( 'panel-border' );
 
 	&.ck-balloon-panel_with-arrow {
 		&:before,
@@ -33,11 +33,11 @@ $ck-balloon-arrow-half-width: 10px;
 			}
 
 			&:before {
-				border-color: transparent transparent ck-border-color( 'foreground' ) transparent;
+				border-color: transparent transparent ck-color( 'panel-border' ) transparent;
 			}
 
 			&:after {
-				border-color: transparent transparent ck-color( 'background' ) transparent;
+				border-color: transparent transparent ck-color( 'panel-background' ) transparent;
 				margin-top: $ck-balloon-arrow-offset;
 			}
 		}
@@ -51,11 +51,11 @@ $ck-balloon-arrow-half-width: 10px;
 			}
 
 			&:before {
-				border-color: ck-border-color( 'foreground' ) transparent  transparent;
+				border-color: ck-color( 'panel-border' ) transparent  transparent;
 			}
 
 			&:after {
-				border-color: ck-color( 'background' ) transparent transparent transparent;
+				border-color: ck-color( 'panel-background' ) transparent transparent transparent;
 				margin-bottom: $ck-balloon-arrow-offset;
 			}
 		}

+ 1 - 1
packages/ckeditor5-theme-lark/theme/components/reset.scss

@@ -25,7 +25,7 @@
 	&, *, a, textarea {
 		// These are rule inherited by all children elements.
 		border-collapse: collapse;
-		font: normal normal normal $ck-font-size-base $ck-font-face;
+		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;

+ 3 - 3
packages/ckeditor5-theme-lark/theme/components/toolbar/stickytoolbar.scss

@@ -6,9 +6,9 @@
 		&.ck-toolbar_sticky {
 			@include ck-drop-shadow();
 
-			border: 1px solid ck-border-color();
-			border-width: 0 0 1px;
-			background: ck-color( 'foreground' );
+			border-width: 0 1px 1px;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
 		}
 	}
 }

+ 2 - 3
packages/ckeditor5-theme-lark/theme/components/toolbar/toolbar.scss

@@ -2,9 +2,8 @@
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .ck-toolbar {
-	line-height: 1;
 	padding: ck-spacing( 'small' );
-	border: 1px solid ck-border-color();
+	border: 1px solid ck-color( 'toolbar-border' );
 
 	// Allow wrapping toolbar items to the new line.
 	white-space: initial;
@@ -23,7 +22,7 @@
 		width: 1px;
 		height: calc( 1em + 2 * #{ck-spacing( 'medium' )} );
 		vertical-align: middle;
-		background: ck-border-color();
+		background: ck-color( 'toolbar-border' );
 	}
 
 	&__newline {

+ 6 - 6
packages/ckeditor5-theme-lark/theme/components/tooltip.scss

@@ -9,13 +9,13 @@ $ck-tooltip-arrow-size: 5px;
 	&__text {
 		@include ck-rounded-corners();
 
-		color: ck-color( 'background' );
-		font-size: ck-font-size( -2 );
+		font-size: .9em;
+		line-height: 1.5;
+		color: ck-color( 'tooltip-text' );
 		padding: ck-spacing( 'small' ) ck-spacing( 'medium' );
-		background: ck-color( 'text' );
+		background: ck-color( 'tooltip-background' );
 		position: relative;
 		left: -50%;
-		line-height: 1.5;
 
 		&::after {
 			border-style: solid;
@@ -39,7 +39,7 @@ $ck-tooltip-arrow-size: 5px;
 		.ck-tooltip__text::after {
 			top: -$ck-tooltip-arrow-size;
 			transform: translateX( -50% );
-			border-color: transparent transparent ck-color( 'text' ) transparent;
+			border-color: transparent transparent ck-color( 'tooltip-background' ) transparent;
 			border-width: 0 $ck-tooltip-arrow-size $ck-tooltip-arrow-size $ck-tooltip-arrow-size;
 
 		}
@@ -61,7 +61,7 @@ $ck-tooltip-arrow-size: 5px;
 		.ck-tooltip__text::after {
 			bottom: -$ck-tooltip-arrow-size;
 			transform: translateX( -50% );
-			border-color: ck-color( 'text' ) transparent transparent transparent;
+			border-color: ck-color( 'tooltip-background' ) transparent transparent transparent;
 			border-width: $ck-tooltip-arrow-size $ck-tooltip-arrow-size 0 $ck-tooltip-arrow-size;
 		}
 	}

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

@@ -0,0 +1,43 @@
+// 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;
+	}
+}

+ 49 - 19
packages/ckeditor5-theme-lark/theme/helpers/_colors.scss

@@ -1,6 +1,14 @@
 // 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.
  *
@@ -18,13 +26,47 @@ $ck-colors: () !default;
  * @see ck-color-add
  */
 $_ck-colors: (
-	'action': #61B145,
-	'background': #fff,
-	'focus': #6ab5f9,
-	'foreground': #f7f7f7,
-	'text': #333,
-	'active': #1A8BF1,
-	'shadow': rgba(0,0,0,.2)
+	'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,
 );
 
 /**
@@ -42,18 +84,6 @@ $_ck-colors: (
 }
 
 /**
- * Returns a border–color for a 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-color
- */
-@function ck-border-color( $name: 'background', $offset: 0 ) {
-	@return ck-color( $name, $offset - 25 );
-}
-
-/**
  * Adds a color to internal color map.
  *
  * @example

+ 10 - 5
packages/ckeditor5-theme-lark/theme/helpers/_fonts.scss

@@ -9,6 +9,11 @@
 $ck-font-size-base: 12px !default;
 
 /**
+ * Base line height.
+ */
+$ck-line-height-base: 1.67 !default;
+
+/**
  * Base font face.
  *
  */
@@ -20,11 +25,11 @@ $ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif !default;
  * @see ck-font-size
  */
 $ck-font-sizes: (
-	-2: 0.7rem,
-	-1: 0.75rem,
-	 0: 1rem,
-	 1: 1.4rem,
-	 2: 1.8rem
+	-2: 0.7em,
+	-1: 0.75em,
+	 0: 1em,
+	 1: 1.4em,
+	 2: 1.8em
 );
 
 /**

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

@@ -16,5 +16,6 @@ $ck-border-radius: 2px !default;
 	&.ck-rounded-corners,
 	.ck-rounded-corners & {
 		border-radius: $ck-border-radius;
+		@content;
 	}
 }

+ 2 - 2
packages/ckeditor5-theme-lark/theme/helpers/_shadow.scss

@@ -4,12 +4,12 @@
 /**
  * A visual style of element's inner shadow (i.e. input).
  */
-$ck-inner-shadow: 2px 2px 3px ck-color( 'foreground', -7 ) inset;
+$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' );
+$ck-drop-shadow: 0 1px 2px 0 ck-color( 'shadow-drop' );
 
 /**
  * A helper to combine multiple shadows.

+ 7 - 12
packages/ckeditor5-theme-lark/theme/helpers/_states.scss

@@ -4,12 +4,12 @@
 /**
  * A visual style of focused element's outer shadow.
  */
-$ck-focus-outer-shadow: 0 0 3px 2px lighten( ck-color( 'focus' ), 10% );
+$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( 'focus' );
+$ck-focus-ring: 1px solid ck-color( 'border-focus' );
 
 /**
  * An opacity value of disabled UI item.
@@ -24,17 +24,12 @@ $ck-disabled-opacity: .5;
 }
 
 /**
- * A visual style of focused element's border or outline.
+ * A visual style of focused element's border.
  */
-@mixin ck-focus-ring( $borderOrOutline: 'border' ) {
-	@if $borderOrOutline == 'outline' {
-		outline: $ck-focus-ring;
-	}
-	@else {
-		// Disable native outline.
-		outline: none;
-		border: $ck-focus-ring;
-	}
+@mixin ck-focus-ring() {
+	// Disable native outline.
+	outline: none;
+	border: $ck-focus-ring;
 }
 
 /**

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

@@ -10,6 +10,7 @@
 @import 'helpers/spacing';
 @import 'helpers/states';
 @import 'helpers/shadow';
+@import 'helpers/button';
 
 @import 'components/reset';
 @import 'components/icon';