浏览代码

Merge pull request #123 from ckeditor/t/ckeditor5/645

Feature: Redesigned the theme (see ckeditor/ckeditor5#645). Closes #120. Closes ckeditor/ckeditor5#732

BREAKING CHANGE: Various UI components' styles have been rewritten. The CSS selectors that used to style them may have a different specificity and appear in a different order.
Piotrek Koszuliński 7 年之前
父节点
当前提交
8f165ed5dc
共有 28 个文件被更改,包括 493 次插入118 次删除
  1. 1 1
      packages/ckeditor5-theme-lark/docs/_snippets/examples/theme-lark.js
  2. 6 0
      packages/ckeditor5-theme-lark/package.json
  3. 3 0
      packages/ckeditor5-theme-lark/tests/manual/iconset.html
  4. 81 0
      packages/ckeditor5-theme-lark/tests/manual/iconset.js
  5. 7 0
      packages/ckeditor5-theme-lark/tests/manual/iconset.md
  6. 136 0
      packages/ckeditor5-theme-lark/tests/manual/inverted.html
  7. 36 0
      packages/ckeditor5-theme-lark/tests/manual/inverted.js
  8. 5 0
      packages/ckeditor5-theme-lark/tests/manual/inverted.md
  9. 二进制
      packages/ckeditor5-theme-lark/tests/manual/logo.png
  10. 7 4
      packages/ckeditor5-theme-lark/tests/manual/theme.html
  11. 57 9
      packages/ckeditor5-theme-lark/tests/manual/theme.js
  12. 5 2
      packages/ckeditor5-theme-lark/theme/ckeditor5-editor-classic/classiceditor.css
  13. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-heading/heading.css
  14. 9 15
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css
  15. 65 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css
  16. 7 25
      packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
  17. 21 13
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css
  18. 13 7
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css
  19. 6 13
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css
  20. 3 11
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/icon/icon.css
  21. 3 3
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css
  22. 2 2
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css
  23. 5 3
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css
  24. 8 4
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css
  25. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_focus.css
  26. 2 2
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_fonts.css
  27. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_shadow.css
  28. 2 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_spacing.css

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

@@ -14,7 +14,7 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-classic-editor' ), {
 	.create( document.querySelector( '#snippet-classic-editor' ), {
 		plugins: [ ArticlePluginSet ],
 		plugins: [ ArticlePluginSet ],
 		toolbar: {
 		toolbar: {
-			items: [ 'headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
+			items: [ 'headings', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
 			viewportTopOffset: 60
 			viewportTopOffset: 60
 		},
 		},
 		image: {
 		image: {

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

@@ -10,8 +10,14 @@
     "@ckeditor/ckeditor5-ui": "^1.0.0-alpha.2"
     "@ckeditor/ckeditor5-ui": "^1.0.0-alpha.2"
   },
   },
   "devDependencies": {
   "devDependencies": {
+    "@ckeditor/ckeditor5-alignment": "^0.0.1",
     "@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.2",
     "@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.2",
     "@ckeditor/ckeditor5-core": "^1.0.0-alpha.2",
     "@ckeditor/ckeditor5-core": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-editor-balloon": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-editor-classic": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-link": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-list": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-undo": "^1.0.0-alpha.2",
     "@ckeditor/ckeditor5-utils": "^1.0.0-alpha.2",
     "@ckeditor/ckeditor5-utils": "^1.0.0-alpha.2",
     "eslint": "^4.15.0",
     "eslint": "^4.15.0",
     "eslint-config-ckeditor5": "^1.0.7",
     "eslint-config-ckeditor5": "^1.0.7",

+ 3 - 0
packages/ckeditor5-theme-lark/tests/manual/iconset.html

@@ -0,0 +1,3 @@
+<style>
+	svg.ck-icon .ck-icon__fill { fill: yellow; }
+</style>

+ 81 - 0
packages/ckeditor5-theme-lark/tests/manual/iconset.js

@@ -0,0 +1,81 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global document */
+
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
+
+import alignLeft from '@ckeditor/ckeditor5-alignment/theme/icons/align-left.svg';
+import alignCenter from '@ckeditor/ckeditor5-alignment/theme/icons/align-center.svg';
+import alignRight from '@ckeditor/ckeditor5-alignment/theme/icons/align-right.svg';
+import alignJustify from '@ckeditor/ckeditor5-alignment/theme/icons/align-justify.svg';
+
+import bold from '@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg';
+import italic from '@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg';
+import underline from '@ckeditor/ckeditor5-basic-styles/theme/icons/underline.svg';
+import code from '@ckeditor/ckeditor5-basic-styles/theme/icons/code.svg';
+import strikethrough from '@ckeditor/ckeditor5-basic-styles/theme/icons/strikethrough.svg';
+
+import cancel from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
+import check from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
+import lowVision from '@ckeditor/ckeditor5-core/theme/icons/low-vision.svg';
+import image from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
+import objectLeft from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
+import objectCenter from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
+import objectRight from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
+import objectFullWidth from '@ckeditor/ckeditor5-core/theme/icons/object-full-width.svg';
+import pencil from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg';
+import quote from '@ckeditor/ckeditor5-core/theme/icons/quote.svg';
+
+import link from '@ckeditor/ckeditor5-link/theme/icons/link.svg';
+import unlink from '@ckeditor/ckeditor5-link/theme/icons/unlink.svg';
+
+import bulletedList from '@ckeditor/ckeditor5-list/theme/icons/bulletedlist.svg';
+import numberedList from '@ckeditor/ckeditor5-list/theme/icons/numberedlist.svg';
+
+import undo from '@ckeditor/ckeditor5-undo/theme/icons/undo.svg';
+import redo from '@ckeditor/ckeditor5-undo/theme/icons/redo.svg';
+
+import '../../theme/ckeditor5-ui/components/editorui/editorui.css';
+
+const icons = {
+	// alignment
+	alignLeft, alignCenter, alignRight, alignJustify,
+
+	// basic-styles
+	bold, italic, underline, code, strikethrough,
+
+	// core
+	check, cancel, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil,
+
+	// link
+	link, unlink,
+
+	// list
+	bulletedList, numberedList,
+
+	// undo
+	undo, redo
+};
+
+const toolbar = new ToolbarView();
+
+for ( const i in icons ) {
+	const button = new ButtonView();
+
+	button.set( {
+		label: i,
+		icon: icons[ i ],
+		tooltip: true
+	} );
+
+	toolbar.items.add( button );
+}
+
+toolbar.className = 'ck-editor-toolbar ck-reset_all';
+toolbar.render();
+
+document.body.appendChild( toolbar.element );

+ 7 - 0
packages/ckeditor5-theme-lark/tests/manual/iconset.md

@@ -0,0 +1,7 @@
+## Project icons
+
+Make sure all icons in the toolbar render correctly.
+
+## Notes
+
+* Some icons like "marker" and "pen" should be filled with yellow color.

文件差异内容过多而无法显示
+ 136 - 0
packages/ckeditor5-theme-lark/tests/manual/inverted.html


+ 36 - 0
packages/ckeditor5-theme-lark/tests/manual/inverted.js

@@ -0,0 +1,36 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals document, window, console */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+
+import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
+import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
+
+const config = {
+	plugins: [ ArticlePluginSet, Strikethrough, Code ],
+	toolbar: [ 'headings', '|', 'bold', 'italic', 'strikethrough', 'code', 'link', '|', 'undo', 'redo' ]
+};
+
+ClassicEditor
+	.create( document.querySelector( '#editor-classic' ), config )
+	.then( editor => {
+		window.classicEditor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+BalloonEditor
+	.create( document.querySelector( '#editor-balloon' ), config )
+	.then( editor => {
+		window.balloonEditor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 5 - 0
packages/ckeditor5-theme-lark/tests/manual/inverted.md

@@ -0,0 +1,5 @@
+## Inverted Lark
+
+1. Check the overall look and feel of the inverted theme.
+2. Make sure all UI components render correctly.
+3. Make sure all UI components respond to focus, hover, and other state changes.

二进制
packages/ckeditor5-theme-lark/tests/manual/logo.png


+ 7 - 4
packages/ckeditor5-theme-lark/tests/manual/theme.html

@@ -5,9 +5,9 @@
 			line-height: 3em;
 			line-height: 3em;
 		}
 		}
 
 
-		*[id^="icon"] .ck-icon + .ck-icon,
-		*[id^="button"] .ck-button + .ck-button,
-		*[id^="dropdown"] .ck-dropdown + .ck-dropdown {
+		*[id*="icon"] .ck-icon + .ck-icon,
+		*[id*="button"] .ck-button + .ck-button,
+		*[id*="dropdown"] .ck-dropdown + .ck-dropdown {
 			margin-left: 0.3em;
 			margin-left: 0.3em;
 		}
 		}
 
 
@@ -73,7 +73,10 @@
 <h2>Dropdown</h2>
 <h2>Dropdown</h2>
 
 
 	<h3>ListDropdown</h3>
 	<h3>ListDropdown</h3>
-	<div id="dropdown" class="ck-reset_all"></div>
+	<div id="list-dropdown" class="ck-reset_all"></div>
+
+	<h3>ButtonDropdown</h3>
+	<div id="button-dropdown" class="ck-reset_all"></div>
 
 
 <hr/>
 <hr/>
 
 

+ 57 - 9
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -14,6 +14,7 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
 import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import createListDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/list/createlistdropdown';
 import createListDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/list/createlistdropdown';
+import createButtonDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/button/createbuttondropdown';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarseparatorview';
 import ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarseparatorview';
 import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
 import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
@@ -60,7 +61,8 @@ const ui = testUtils.createTestUIView( {
 	'buttonResponsive3': '#button-responsive-3',
 	'buttonResponsive3': '#button-responsive-3',
 	'buttonTooltip': '#button-tooltip',
 	'buttonTooltip': '#button-tooltip',
 
 
-	dropdown: '#dropdown',
+	listDropdown: '#list-dropdown',
+	buttonDropdown: '#button-dropdown',
 
 
 	'toolbarText': '#toolbar-text',
 	'toolbarText': '#toolbar-text',
 	'toolbarButton': '#toolbar-button',
 	'toolbarButton': '#toolbar-button',
@@ -221,20 +223,52 @@ function renderDropdown() {
 		} ) );
 		} ) );
 	} );
 	} );
 
 
-	const itemListModel = new Model( {
+	ui.listDropdown.add( listDropdown( {
+		label: 'Normal state',
+		isEnabled: true,
 		items: collection
 		items: collection
-	} );
+	} ) );
+
+	ui.listDropdown.add( listDropdown( {
+		label: 'Disabled',
+		isEnabled: false,
+		items: collection
+	} ) );
 
 
-	ui.dropdown.add( dropdown( {
+	ui.buttonDropdown.add( buttonDropdown( {
 		label: 'Normal state',
 		label: 'Normal state',
 		isEnabled: true,
 		isEnabled: true,
-		content: itemListModel
+		buttons: [
+			button( {
+				withText: false,
+				label: 'foo',
+				icon: boldIcon
+			} ),
+			button( {
+				withText: false,
+				label: 'foo',
+				icon: italicIcon
+			} )
+		]
 	} ) );
 	} ) );
 
 
-	ui.dropdown.add( dropdown( {
+	ui.buttonDropdown.add( buttonDropdown( {
 		label: 'Disabled',
 		label: 'Disabled',
 		isEnabled: false,
 		isEnabled: false,
-		content: itemListModel
+		buttons: [
+			button( {
+				withText: false,
+				isEnabled: false,
+				label: 'foo',
+				icon: boldIcon
+			} ),
+			button( {
+				withText: false,
+				isEnabled: false,
+				label: 'foo',
+				icon: italicIcon
+			} )
+		]
 	} ) );
 	} ) );
 }
 }
 
 
@@ -255,7 +289,7 @@ function renderToolbar() {
 			label: 'Button with an icon',
 			label: 'Button with an icon',
 			icon: boldIcon
 			icon: boldIcon
 		} ),
 		} ),
-		dropdown(),
+		listDropdown(),
 		button()
 		button()
 	] ) );
 	] ) );
 
 
@@ -366,7 +400,7 @@ function toolbar( children = [] ) {
 	return toolbar;
 	return toolbar;
 }
 }
 
 
-function dropdown( {
+function listDropdown( {
 	label = 'Dropdown',
 	label = 'Dropdown',
 	isEnabled = true,
 	isEnabled = true,
 	isOn = false,
 	isOn = false,
@@ -379,6 +413,20 @@ function dropdown( {
 	return dropdown;
 	return dropdown;
 }
 }
 
 
+function buttonDropdown( {
+	label = 'Button dropdown',
+	isEnabled = true,
+	isOn = false,
+	withText = true,
+	isVertical = true,
+	buttons = []
+} = {} ) {
+	const model = new Model( { label, isEnabled, buttons, isVertical, isOn, withText } );
+	const dropdown = createButtonDropdown( model, {} );
+
+	return dropdown;
+}
+
 function toolbarSeparator() {
 function toolbarSeparator() {
 	return new ToolbarSeparatorView();
 	return new ToolbarSeparatorView();
 }
 }

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

@@ -27,11 +27,14 @@
 	}
 	}
 }
 }
 
 
-.ck-editor__editable {
+/* Note: Use ck-editor__main to make sure these styles don't apply to other editor types */
+.ck-editor__main .ck-editor__editable {
 	@mixin ck-rounded-corners {
 	@mixin ck-rounded-corners {
 		border-top-left-radius: 0;
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
 		border-top-right-radius: 0;
 	}
 	}
 
 
-	border: 1px solid var(--ck-color-editor-border);
+	&:not(.ck-focused) {
+		border-color: var(--ck-color-editor-border);
+	}
 }
 }

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

@@ -18,7 +18,7 @@
 /* Using absolute units to make sure each element has the same height and padding.
 /* Using absolute units to make sure each element has the same height and padding.
 https://github.com/ckeditor/ckeditor5-heading/issues/63 */
 https://github.com/ckeditor/ckeditor5-heading/issues/63 */
 [class*="ck-heading_"] {
 [class*="ck-heading_"] {
-	line-height: calc(1.8 * var(--ck-font-size-base));
+	line-height: calc(1.5 * var(--ck-font-size-base));
 	padding: calc(0.8 * var(--ck-font-size-base));
 	padding: calc(0.8 * var(--ck-font-size-base));
 }
 }
 
 

+ 9 - 15
packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css

@@ -3,25 +3,19 @@
  * For licensing, see LICENSE.md.
  * For licensing, see LICENSE.md.
  */
  */
 
 
-.cke-text-alternative-form {
-	padding: var(--ck-spacing-large);
+.ck-text-alternative-form {
+	padding: var(--ck-spacing-standard);
 
 
-	&:focus {
-		/* https://github.com/ckeditor/ckeditor5-image/issues/40 */
-		outline: none;
+	& .ck-button {
+		border-width: 0;
 	}
 	}
 
 
-	& .ck-label {
-		margin-bottom: var(--ck-spacing-small);
+	&:focus {
+		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
+		outline: none;
 	}
 	}
-}
 
 
-.cke-text-alternative-form__actions {
-	padding-top: var(--ck-spacing-large);
-
-	& .ck-button {
-		& + .ck-button {
-			margin-right: var(--ck-spacing-medium);
-		}
+	& > :not(:first-child) {
+		margin-left: var(--ck-spacing-standard);
 	}
 	}
 }
 }

+ 65 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_unselectable.css";
+@import "../mixins/_focus.css";
+@import "../mixins/_shadow.css";
+
+.ck-link-actions {
+	padding: var(--ck-spacing-standard);
+
+	& .ck-button {
+		border: 0;
+	}
+
+	& .ck-button.ck-link-actions__preview {
+		padding: 0;
+
+		&,
+		&:hover,
+		&:focus,
+		&:active {
+			background: none;
+			border: 0;
+		}
+
+		&:active {
+			box-shadow: none;
+		}
+
+		&:focus {
+			& .ck-button__label {
+				text-decoration: underline;
+			}
+		}
+
+		& .ck-button__label {
+			padding: 0 var(--ck-spacing-standard);
+			color: var(--ck-color-link-default);
+			text-overflow: ellipsis;
+			cursor: pointer;
+
+			/* Match the box model of the link editor form's input so the balloon
+			does not change width when moving between actions and the form. */
+			max-width: var(--ck-input-text-width);
+			min-width: 3em;
+			text-align: center;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+
+	&:focus {
+		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
+		outline: none;
+	}
+
+	& > :not(:first-child) {
+		margin-left: var(--ck-spacing-standard);
+	}
+}

+ 7 - 25
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css

@@ -4,36 +4,18 @@
  */
  */
 
 
 .ck-link-form {
 .ck-link-form {
-	padding: var(--ck-spacing-large);
+	padding: var(--ck-spacing-standard);
+
+	& .ck-button {
+		border-width: 0;
+	}
 
 
 	&:focus {
 	&:focus {
 		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
 		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
 		outline: none;
 		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));
-		}
+	& > :not(:first-child) {
+		margin-left: var(--ck-spacing-standard);
 	}
 	}
 }
 }

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

@@ -20,9 +20,13 @@ a.ck-button {
 	white-space: nowrap;
 	white-space: nowrap;
 	cursor: default;
 	cursor: default;
 	vertical-align: middle;
 	vertical-align: middle;
-	padding: var(--ck-spacing-small);
+	padding: var(--ck-spacing-tiny);
 	text-align: center;
 	text-align: center;
 
 
+	/* Normalize the height of the line. Removing this will break consistent height
+	among text and text-less buttons (with icons). */
+	line-height: 1;
+
 	/* Enable font size inheritance, which allows fluid UI scaling. */
 	/* Enable font size inheritance, which allows fluid UI scaling. */
 	font-size: inherit;
 	font-size: inherit;
 
 
@@ -44,7 +48,7 @@ a.ck-button {
 	}
 	}
 
 
 	&.ck-button_with-text {
 	&.ck-button_with-text {
-		padding: var(--ck-spacing-small) var(--ck-spacing-standard);
+		padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
 
 
 		@mixin ck-button-icon {
 		@mixin ck-button-icon {
 			margin-left: calc(-1 * var(--ck-spacing-small));
 			margin-left: calc(-1 * var(--ck-spacing-small));
@@ -57,22 +61,33 @@ a.ck-button {
 		@mixin ck-button-colors --ck-color-button-on;
 		@mixin ck-button-colors --ck-color-button-on;
 	}
 	}
 
 
-	& .ck-icon {
+	@mixin ck-button-icon {
 		use,
 		use,
 		use * {
 		use * {
 			color: inherit;
 			color: inherit;
 		}
 		}
 	}
 	}
 
 
+	&:not(.ck-button_with-text) {
+		@mixin ck-button-icon {
+			/* This margin is neccessary for icons in label-less buttons to stretch
+			the button properly. When there's no text in the button, browsers render
+			them too small. It's a really tricky topic, when browsers render svg as an inline
+			content and line size (character width) measurement and alignment kicks in. */
+			margin: var(--ck-spacing-tiny);
+		}
+	}
+
 	& .ck-button__label {
 	& .ck-button__label {
 		/* Enable font size inheritance, which allows fluid UI scaling. */
 		/* Enable font size inheritance, which allows fluid UI scaling. */
 		font-size: inherit;
 		font-size: inherit;
-
-		height: var(--ck-line-height-base)em;
-		line-height: inherit;
 		font-weight: inherit;
 		font-weight: inherit;
 		color: inherit;
 		color: inherit;
 		cursor: inherit;
 		cursor: inherit;
+
+		/* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and
+		without labels (but with icons) have different sizes in Chrome */
+		vertical-align: middle;
 	}
 	}
 }
 }
 
 
@@ -81,14 +96,7 @@ a.ck-button {
 a.ck-button-action {
 a.ck-button-action {
 	@mixin ck-button-colors --ck-color-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);
 	color: var(--ck-color-button-action-text);
-
-	&:hover,
-	&:focus,
-	&:active {
-		text-shadow: 0 -1px var(--ck-color-button-action-active-border);
-	}
 }
 }
 
 
 .ck-button-bold,
 .ck-button-bold,

+ 13 - 7
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css

@@ -7,26 +7,32 @@
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_shadow.css";
 @import "../../../mixins/_shadow.css";
 
 
+:root {
+	--ck-dropdown-icon-size: calc(0.5 * var(--ck-icon-size));
+}
+
 .ck-dropdown {
 .ck-dropdown {
 	/* Enable font size inheritance, which allows fluid UI scaling. */
 	/* Enable font size inheritance, which allows fluid UI scaling. */
 	font-size: inherit;
 	font-size: inherit;
 
 
-	/* A triangle displayed to indicate this is actually a dropdown. */
-	&::after {
-		border-style: solid;
-		border-width: .4em .35em 0 .35em;
-		border-color: var(--ck-color-dropdown-symbol) transparent;
+	& .ck-dropdown__arrow {
 		right: var(--ck-spacing-standard);
 		right: var(--ck-spacing-standard);
+		width: var(--ck-dropdown-icon-size);
 	}
 	}
 
 
-	&.ck-disabled::after {
-		border-color: var(--ck-color-dropdown-symbol-disabled) transparent;
+	&.ck-disabled .ck-dropdown__arrow {
+		@mixin ck-disabled;
 	}
 	}
 
 
 	& .ck-button.ck-dropdown__button {
 	& .ck-button.ck-dropdown__button {
 		/* A space to accommodate the triangle. */
 		/* A space to accommodate the triangle. */
 		padding-right: calc(2.5 * var(--ck-spacing-standard));
 		padding-right: calc(2.5 * var(--ck-spacing-standard));
 
 
+		&:not(.ck-button_with-text) {
+			/* Make sure dropdowns with just an icon have the right inner spacing */
+			padding-left: var(--ck-spacing-small);
+		}
+
 		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
 		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
 		&.ck-disabled .ck-button__label {
 		&.ck-disabled .ck-button__label {
 			@mixin ck-disabled;
 			@mixin ck-disabled;

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

@@ -30,26 +30,19 @@
 		border-width: 0;
 		border-width: 0;
 	}
 	}
 
 
+	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/120 */
 	& > .ck-button,
 	& > .ck-button,
-	& .ck-dropdown .ck-dropdown__button {
+	& > * > .ck-button {
 		&:not(:hover):not(:focus):not(.ck-on),
 		&:not(:hover):not(:focus):not(.ck-on),
 		&.ck-disabled {
 		&.ck-disabled {
-			background: var(--ck-color-editor-toolbar-background);
+			background: transparent;
 		}
 		}
 
 
-		&.ck-on:not(.ck-button_with-text) {
+		&.ck-on {
 			@mixin ck-button-colors --ck-color-editor-toolbar-button-on;
 			@mixin ck-button-colors --ck-color-editor-toolbar-button-on;
 		}
 		}
 	}
 	}
 
 
-	& .ck-dropdown .ck-dropdown__button.ck-button_with-text {
-		border-width: 1px;
-
-		&:not(:hover):not(:focus):not(.ck-on) {
-			background: var(--ck-color-editor-dropdown-background);
-		}
-	}
-
 	@nest .ck-toolbar-container & {
 	@nest .ck-toolbar-container & {
 		background: var(--ck-color-editor-toolbar-background);
 		background: var(--ck-color-editor-toolbar-background);
 	}
 	}
@@ -58,12 +51,12 @@
 /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */
 /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */
 .ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_n"] {
 .ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_n"] {
 	&::after {
 	&::after {
-		border-bottom-color: var(--ck-color-editor-toolbar-background);
+		border-bottom-color: var(--ck-color-base-foreground);
 	}
 	}
 }
 }
 
 
 .ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_s"] {
 .ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_s"] {
 	&::after {
 	&::after {
-		border-top-color: var(--ck-color-editor-toolbar-background);
+		border-top-color: var(--ck-color-base-foreground);
 	}
 	}
 }
 }

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

@@ -3,19 +3,11 @@
  * For licensing, see LICENSE.md.
  * 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 {
 :root {
-	--ck-icon-min-size: calc(var(--ck-font-size-base) * var(--ck-line-height-base));
+	--ck-icon-size: calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
 }
 }
 
 
 svg.ck-icon {
 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);
+	width: var(--ck-icon-size);
+	height: var(--ck-icon-size);
 }
 }

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

@@ -8,7 +8,7 @@
 @import "../../../mixins/_shadow.css";
 @import "../../../mixins/_shadow.css";
 
 
 :root {
 :root {
-	--ck-input-text-min-width: 21em;
+	--ck-input-text-width: 18em;
 }
 }
 
 
 .ck-input-text {
 .ck-input-text {
@@ -17,8 +17,8 @@
 
 
 	background: var(--ck-color-input-background);
 	background: var(--ck-color-input-background);
 	border: 1px solid var(--ck-color-input-border);
 	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);
+	padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
+	min-width: var(--ck-input-text-width);
 
 
 	&:focus {
 	&:focus {
 		@mixin ck-focus-ring;
 		@mixin ck-focus-ring;

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

@@ -8,8 +8,8 @@
 
 
 :root {
 :root {
 	--ck-balloon-arrow-offset: 2px;
 	--ck-balloon-arrow-offset: 2px;
-	--ck-balloon-arrow-height: 15px;
-	--ck-balloon-arrow-half-width: 10px;
+	--ck-balloon-arrow-height: 10px;
+	--ck-balloon-arrow-half-width: 8px;
 }
 }
 
 
 .ck-balloon-panel {
 .ck-balloon-panel {

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

@@ -8,7 +8,7 @@
 .ck-toolbar {
 .ck-toolbar {
 	@mixin ck-rounded-corners;
 	@mixin ck-rounded-corners;
 
 
-	padding: 0 var(--ck-spacing-small) var(--ck-spacing-small);
+	padding: 0 var(--ck-spacing-small);
 	border: 1px solid var(--ck-color-toolbar-border);
 	border: 1px solid var(--ck-color-toolbar-border);
 
 
 	& > * {
 	& > * {
@@ -17,6 +17,7 @@
 
 
 		/* Make sure items wrapped to the next line have v-spacing */
 		/* Make sure items wrapped to the next line have v-spacing */
 		margin-top: var(--ck-spacing-small);
 		margin-top: var(--ck-spacing-small);
+		margin-bottom: var(--ck-spacing-small);
 	}
 	}
 
 
 	&.ck-toolbar_vertical {
 	&.ck-toolbar_vertical {
@@ -39,9 +40,10 @@
 }
 }
 
 
 .ck-toolbar__separator {
 .ck-toolbar__separator {
+	align-self: stretch;
 	width: 1px;
 	width: 1px;
-	height: calc(1em + 2 * var(--ck-spacing-medium));
-	vertical-align: middle;
+	margin-top: 0;
+	margin-bottom: 0;
 	background: var(--ck-color-toolbar-border);
 	background: var(--ck-color-toolbar-border);
 }
 }
 
 

+ 8 - 4
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css

@@ -6,7 +6,7 @@
 :root {
 :root {
 	--ck-color-base-foreground: 								hsl(0, 0%, 97%);
 	--ck-color-base-foreground: 								hsl(0, 0%, 97%);
 	--ck-color-base-background: 								hsl(0, 0%, 100%);
 	--ck-color-base-background: 								hsl(0, 0%, 100%);
-	--ck-color-base-border: 									hsl(0, 0%, 75%);
+	--ck-color-base-border: 									hsl(0, 0%, 72%);
 	--ck-color-base-action: 									hsl(104, 44%, 48%);
 	--ck-color-base-action: 									hsl(104, 44%, 48%);
 	--ck-color-base-focus: 										hsl(209, 92%, 70%);
 	--ck-color-base-focus: 										hsl(209, 92%, 70%);
 	--ck-color-base-text: 										hsl(0, 0%, 20%);
 	--ck-color-base-text: 										hsl(0, 0%, 20%);
@@ -44,7 +44,7 @@
 	--ck-color-button-on-disabled-border: 						hsl(0, 0%, 75%);
 	--ck-color-button-on-disabled-border: 						hsl(0, 0%, 75%);
 
 
 	--ck-color-button-action-background: 						var(--ck-color-base-action);
 	--ck-color-button-action-background: 						var(--ck-color-base-action);
-	--ck-color-button-action-border: 							hsl(104, 44%, 39%);
+	--ck-color-button-action-border: 							var(--ck-color-base-action);
 	--ck-color-button-action-focus-background: 					hsl(104, 44%, 43%);
 	--ck-color-button-action-focus-background: 					hsl(104, 44%, 43%);
 	--ck-color-button-action-focus-border: 						hsl(104, 44%, 35%);
 	--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-background: 				hsl(104, 44%, 41%);
@@ -64,7 +64,7 @@
 	/* -- Input --------------------------------------------------------------------------------- */
 	/* -- Input --------------------------------------------------------------------------------- */
 
 
 	--ck-color-input-background: 								var(--ck-color-base-background);
 	--ck-color-input-background: 								var(--ck-color-base-background);
-	--ck-color-input-border: 									var(--ck-color-base-border);
+	--ck-color-input-border: 									hsl(0, 0%, 78%);
 	--ck-color-input-text: 										var(--ck-color-base-text);
 	--ck-color-input-text: 										var(--ck-color-base-text);
 	--ck-color-input-disabled-background: 						hsl(0, 0%, 95%);
 	--ck-color-input-disabled-background: 						hsl(0, 0%, 95%);
 	--ck-color-input-disabled-border: 							hsl(0, 0%, 78%);
 	--ck-color-input-disabled-border: 							hsl(0, 0%, 78%);
@@ -96,7 +96,7 @@
 	/* -- Editor -------------------------------------------------------------------------------- */
 	/* -- Editor -------------------------------------------------------------------------------- */
 
 
 	--ck-color-editor-border: 									var(--ck-color-base-border);
 	--ck-color-editor-border: 									var(--ck-color-base-border);
-	--ck-color-editor-toolbar-background: 						var(--ck-color-base-foreground);
+	--ck-color-editor-toolbar-background: 						linear-gradient(0, var(--ck-color-base-foreground), var(--ck-color-base-background));
 
 
 	--ck-color-editor-toolbar-button-on-background: 			hsl(0, 0%, 87%);
 	--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-border: 				transparent;
@@ -122,4 +122,8 @@
 
 
 	--ck-color-upload-bar-background:		 					hsl(209, 92%, 70%);
 	--ck-color-upload-bar-background:		 					hsl(209, 92%, 70%);
 	--ck-color-upload-infinite-background:		 				hsla(0, 0%, 0%, 0.1);
 	--ck-color-upload-infinite-background:		 				hsla(0, 0%, 0%, 0.1);
+
+	/* -- Link -------------------------------------------------------------------------------- */
+
+	--ck-color-link-default:									hsl(240, 100%, 47%);
 }
 }

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

@@ -7,7 +7,7 @@
 	/**
 	/**
 	 * A visual style of focused element's outer shadow.
 	 * A visual style of focused element's outer shadow.
 	 */
 	 */
-	--ck-focus-outer-shadow: 0 0 3px 2px var(--ck-color-focus-shadow);
+	--ck-focus-outer-shadow: 0 0 3px 1px var(--ck-color-focus-shadow);
 
 
 	/**
 	/**
 	 * A visual style of focused element's border or outline.
 	 * A visual style of focused element's border or outline.

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

@@ -4,8 +4,8 @@
  */
  */
 
 
 :root {
 :root {
-	--ck-font-size-base: 12px;
-	--ck-line-height-base: 1.67;
+	--ck-font-size-base: 13px;
+	--ck-line-height-base: 1.84615;
 	--ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
 	--ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
 
 
 	--ck-font-size-tiny: 0.7em;
 	--ck-font-size-tiny: 0.7em;

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

@@ -12,5 +12,5 @@
 	/**
 	/**
 	 * A visual style of element's drop shadow (i.e. panel).
 	 * A visual style of element's drop shadow (i.e. panel).
 	 */
 	 */
-	--ck-drop-shadow: 0 1px 2px 0 var(--ck-color-shadow-drop);
+	--ck-drop-shadow: 0 2px 2px 1px var(--ck-color-shadow-drop);
 }
 }

+ 2 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_spacing.css

@@ -4,10 +4,11 @@
  */
  */
 
 
 :root {
 :root {
-	--ck-spacing-unit: 						0.8em;
+	--ck-spacing-unit: 						0.6em;
 	--ck-spacing-large: 					calc(var(--ck-spacing-unit) * 1.5);
 	--ck-spacing-large: 					calc(var(--ck-spacing-unit) * 1.5);
 	--ck-spacing-standard: 					var(--ck-spacing-unit);
 	--ck-spacing-standard: 					var(--ck-spacing-unit);
 	--ck-spacing-medium: 					calc(var(--ck-spacing-unit) * 0.8);
 	--ck-spacing-medium: 					calc(var(--ck-spacing-unit) * 0.8);
 	--ck-spacing-small: 					calc(var(--ck-spacing-unit) * 0.5);
 	--ck-spacing-small: 					calc(var(--ck-spacing-unit) * 0.5);
 	--ck-spacing-tiny: 						calc(var(--ck-spacing-unit) * 0.25);
 	--ck-spacing-tiny: 						calc(var(--ck-spacing-unit) * 0.25);
+	--ck-spacing-extra-tiny: 				calc(var(--ck-spacing-unit) * 0.16);
 }
 }