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.

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: {

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",

tests/manual/iconset.html

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

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 );

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.

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>

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

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.

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 @@ <h3>Button: Tooltip</h3>
 <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/>