Sfoglia il codice sorgente

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 8 anni fa
parent
commit
8f165ed5dc
28 ha cambiato i file con 493 aggiunte e 118 eliminazioni
  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. BIN
      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' ), {
 		plugins: [ ArticlePluginSet ],
 		toolbar: {
-			items: [ 'headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
+			items: [ 'headings', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
 			viewportTopOffset: 60
 		},
 		image: {

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

@@ -10,8 +10,14 @@
     "@ckeditor/ckeditor5-ui": "^1.0.0-alpha.2"
   },
   "devDependencies": {
+    "@ckeditor/ckeditor5-alignment": "^0.0.1",
     "@ckeditor/ckeditor5-basic-styles": "^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",
     "eslint": "^4.15.0",
     "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

@@ -0,0 +1,136 @@
+<style>
+	body {
+		height: 2000px;
+	}
+
+	:root {
+		/* Helper variables to avoid duplication in the colors. */
+		--ck-custom-background: #4A494B;
+		--ck-custom-foreground: #3a393d;
+		--ck-custom-border: #383738;
+		--ck-custom-white: #fff;
+
+		--ck-color-base-foreground: var(--ck-custom-background);
+
+		/* -- Overrides generic colors -------------------------------------------------------------- */
+
+		--ck-color-focus-border: #48a3f5;
+		--ck-color-text: #fafafa;
+		--ck-color-shadow-drop: rgba( 0, 0, 0, .2 );
+		--ck-color-shadow-inner: rgba( 0, 0, 0, .1 );
+
+		/* -- 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: #2d2d2d;
+		--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);
+
+		/* -- Overrides the default colors used by ckeditor5-link package ------------------------- */
+
+		--ck-color-link-default: #81eaff;
+	}
+</style>
+
+<h2>Editor-classic</h2>
+
+<div id="editor-classic">
+	<h2>The three greatest things you learn from traveling</h2><p>Like all the great things on earth traveling teaches us by example. Here are some of the most <strong>precious lessons</strong> I’ve learned over the years of traveling.</p><h3>Appreciation of diversity</h3><p>Getting used to an <a href="https://ckeditor.com">entirely different culture</a> can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.</p>
+</div>
+
+<h2>Editor-balloon</h2>
+
+<div id="editor-balloon">
+	<h2>The three greatest things you learn from traveling</h2><p>Like all the great things on earth traveling teaches us by example. Here are some of the most <strong>precious lessons</strong> I’ve learned over the years of traveling.</p><h3>Appreciation of diversity</h3><p>Getting used to an <a href="https://ckeditor.com">entirely different culture</a> can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.</p>
+</div>

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

BIN
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;
 		}
 
-		*[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;
 		}
 
@@ -73,7 +73,10 @@
 <h2>Dropdown</h2>
 
 	<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/>
 

+ 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 ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 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 ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarseparatorview';
 import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
@@ -60,7 +61,8 @@ const ui = testUtils.createTestUIView( {
 	'buttonResponsive3': '#button-responsive-3',
 	'buttonTooltip': '#button-tooltip',
 
-	dropdown: '#dropdown',
+	listDropdown: '#list-dropdown',
+	buttonDropdown: '#button-dropdown',
 
 	'toolbarText': '#toolbar-text',
 	'toolbarButton': '#toolbar-button',
@@ -221,20 +223,52 @@ function renderDropdown() {
 		} ) );
 	} );
 
-	const itemListModel = new Model( {
+	ui.listDropdown.add( listDropdown( {
+		label: 'Normal state',
+		isEnabled: true,
 		items: collection
-	} );
+	} ) );
+
+	ui.listDropdown.add( listDropdown( {
+		label: 'Disabled',
+		isEnabled: false,
+		items: collection
+	} ) );
 
-	ui.dropdown.add( dropdown( {
+	ui.buttonDropdown.add( buttonDropdown( {
 		label: 'Normal state',
 		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',
 		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',
 			icon: boldIcon
 		} ),
-		dropdown(),
+		listDropdown(),
 		button()
 	] ) );
 
@@ -366,7 +400,7 @@ function toolbar( children = [] ) {
 	return toolbar;
 }
 
-function dropdown( {
+function listDropdown( {
 	label = 'Dropdown',
 	isEnabled = true,
 	isOn = false,
@@ -379,6 +413,20 @@ function 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() {
 	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 {
 		border-top-left-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.
 https://github.com/ckeditor/ckeditor5-heading/issues/63 */
 [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));
 }
 

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

@@ -3,25 +3,19 @@
  * 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 {
-	padding: var(--ck-spacing-large);
+	padding: var(--ck-spacing-standard);
+
+	& .ck-button {
+		border-width: 0;
+	}
 
 	&: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));
-		}
+	& > :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;
 	cursor: default;
 	vertical-align: middle;
-	padding: var(--ck-spacing-small);
+	padding: var(--ck-spacing-tiny);
 	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. */
 	font-size: inherit;
 
@@ -44,7 +48,7 @@ a.ck-button {
 	}
 
 	&.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 {
 			margin-left: calc(-1 * var(--ck-spacing-small));
@@ -57,22 +61,33 @@ a.ck-button {
 		@mixin ck-button-colors --ck-color-button-on;
 	}
 
-	& .ck-icon {
+	@mixin ck-button-icon {
 		use,
 		use * {
 			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 {
 		/* Enable font size inheritance, which allows fluid UI scaling. */
 		font-size: inherit;
-
-		height: var(--ck-line-height-base)em;
-		line-height: inherit;
 		font-weight: inherit;
 		color: 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 {
 	@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,

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

@@ -7,26 +7,32 @@
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_shadow.css";
 
+:root {
+	--ck-dropdown-icon-size: calc(0.5 * var(--ck-icon-size));
+}
+
 .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 .35em 0 .35em;
-		border-color: var(--ck-color-dropdown-symbol) transparent;
+	& .ck-dropdown__arrow {
 		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 {
 		/* A space to accommodate the triangle. */
 		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 */
 		&.ck-disabled .ck-button__label {
 			@mixin ck-disabled;

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

@@ -30,26 +30,19 @@
 		border-width: 0;
 	}
 
+	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/120 */
 	& > .ck-button,
-	& .ck-dropdown .ck-dropdown__button {
+	& > * > .ck-button {
 		&:not(:hover):not(:focus):not(.ck-on),
 		&.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;
 		}
 	}
 
-	& .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 & {
 		background: var(--ck-color-editor-toolbar-background);
 	}
@@ -58,12 +51,12 @@
 /* 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);
+		border-bottom-color: var(--ck-color-base-foreground);
 	}
 }
 
 .ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_s"] {
 	&::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.
  */
 
-/**
- * Default width/height of an icon. Note that it equals the default
- * height of the line of text, so e.g. it matches the height of the
- * button's label.
- */
 :root {
-	--ck-icon-min-size: calc(var(--ck-font-size-base) * var(--ck-line-height-base));
+	--ck-icon-size: calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
 }
 
 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";
 
 :root {
-	--ck-input-text-min-width: 21em;
+	--ck-input-text-width: 18em;
 }
 
 .ck-input-text {
@@ -17,8 +17,8 @@
 
 	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);
+	padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
+	min-width: var(--ck-input-text-width);
 
 	&:focus {
 		@mixin ck-focus-ring;

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

@@ -8,8 +8,8 @@
 
 :root {
 	--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 {

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

@@ -8,7 +8,7 @@
 .ck-toolbar {
 	@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);
 
 	& > * {
@@ -17,6 +17,7 @@
 
 		/* Make sure items wrapped to the next line have v-spacing */
 		margin-top: var(--ck-spacing-small);
+		margin-bottom: var(--ck-spacing-small);
 	}
 
 	&.ck-toolbar_vertical {
@@ -39,9 +40,10 @@
 }
 
 .ck-toolbar__separator {
+	align-self: stretch;
 	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);
 }
 

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

@@ -6,7 +6,7 @@
 :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-border: 									hsl(0, 0%, 72%);
 	--ck-color-base-action: 									hsl(104, 44%, 48%);
 	--ck-color-base-focus: 										hsl(209, 92%, 70%);
 	--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-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-border: 						hsl(104, 44%, 35%);
 	--ck-color-button-action-active-background: 				hsl(104, 44%, 41%);
@@ -64,7 +64,7 @@
 	/* -- Input --------------------------------------------------------------------------------- */
 
 	--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-disabled-background: 						hsl(0, 0%, 95%);
 	--ck-color-input-disabled-border: 							hsl(0, 0%, 78%);
@@ -96,7 +96,7 @@
 	/* -- Editor -------------------------------------------------------------------------------- */
 
 	--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-border: 				transparent;
@@ -122,4 +122,8 @@
 
 	--ck-color-upload-bar-background:		 					hsl(209, 92%, 70%);
 	--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.
 	 */
-	--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.

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

@@ -4,8 +4,8 @@
  */
 
 :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-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).
 	 */
-	--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 {
-	--ck-spacing-unit: 						0.8em;
+	--ck-spacing-unit: 						0.6em;
 	--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);
+	--ck-spacing-extra-tiny: 				calc(var(--ck-spacing-unit) * 0.16);
 }