8
0
Pārlūkot izejas kodu

Merge branch 'master' into i/5597

Aleksander Nowodzinski 5 gadi atpakaļ
vecāks
revīzija
b26498268e

+ 25 - 0
packages/ckeditor5-theme-lark/CHANGELOG.md

@@ -1,6 +1,31 @@
 Changelog
 =========
 
+## [17.0.0](https://github.com/ckeditor/ckeditor5-theme-lark/compare/v16.0.0...v17.0.0) (2020-02-19)
+
+### MAJOR BREAKING CHANGES
+
+* Changed the class denoting the restricted editing exception spans from `ck-restricted-editing-exception` to `restricted-editing-exception`.
+
+### Features
+
+* Added styles for rich error messages in the table and table cell properties forms (see [ckeditor/ckeditor5#6131](https://github.com/ckeditor/ckeditor5/issues/6131)). ([f859f4b](https://github.com/ckeditor/ckeditor5-theme-lark/commit/f859f4b))
+* Added styles for the color input (see ckeditor/ckeditor5/issues/6106). ([e64013f](https://github.com/ckeditor/ckeditor5-theme-lark/commit/e64013f))
+* Added styles for the LabeledView (see [ckeditor/ckeditor5-table#227](https://github.com/ckeditor/ckeditor5-table/issues/227)). ([4e36147](https://github.com/ckeditor/ckeditor5-theme-lark/commit/4e36147))
+* Added styles of new fields in the table cell properties view. Code refactoring (see [ckeditor/ckeditor5#6189](https://github.com/ckeditor/ckeditor5/issues/6189)). ([c2bf945](https://github.com/ckeditor/ckeditor5-theme-lark/commit/c2bf945))
+* Added the special character info view styles (see [ckeditor/ckeditor5#5817](https://github.com/ckeditor/ckeditor5/issues/5817)). ([86079fd](https://github.com/ckeditor/ckeditor5-theme-lark/commit/86079fd))
+* Brought styles for various UI views: the compact toolbar, table form, table form row and header, table cell properties form, and table properties form (see ckeditor/ckeditor5/issues/6112). ([339aec1](https://github.com/ckeditor/ckeditor5-theme-lark/commit/339aec1))
+
+### Bug fixes
+
+* Removed `ck-` prefix from the restricted editing's CSS classes used in the editor content. Closes [ckeditor/ckeditor5#5899](https://github.com/ckeditor/ckeditor5/issues/5899). ([599f16e](https://github.com/ckeditor/ckeditor5-theme-lark/commit/599f16e))
+
+### Other changes
+
+* Add hover state for all restricted editing exceptions and fix the width of a collapsed exception in restricted editing. Closes [ckeditor/ckeditor5#5829](https://github.com/ckeditor/ckeditor5/issues/5829). ([08d6613](https://github.com/ckeditor/ckeditor5-theme-lark/commit/08d6613))
+* Set default cursor in restricted editing mode while restricted editing exceptions still have text cursor when you hover over them. Closes [ckeditor/ckeditor5#5992](https://github.com/ckeditor/ckeditor5/issues/5992). ([2602ab4](https://github.com/ckeditor/ckeditor5-theme-lark/commit/2602ab4))
+
+
 ## [16.0.0](https://github.com/ckeditor/ckeditor5-theme-lark/compare/v15.0.0...v16.0.0) (2019-12-04)
 
 ### MAJOR BREAKING CHANGES

+ 24 - 20
packages/ckeditor5-theme-lark/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-theme-lark",
-  "version": "16.0.0",
+  "version": "17.0.0",
   "description": "A bright theme for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -9,27 +9,31 @@
     "ckeditor5-theme"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "^16.0.0"
+    "@ckeditor/ckeditor5-ui": "^17.0.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": "^16.0.0",
-    "@ckeditor/ckeditor5-basic-styles": "^16.0.0",
-    "@ckeditor/ckeditor5-code-block": "^16.0.0",
-    "@ckeditor/ckeditor5-core": "^16.0.0",
-    "@ckeditor/ckeditor5-editor-balloon": "^16.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^16.0.0",
-    "@ckeditor/ckeditor5-font": "^16.0.0",
-    "@ckeditor/ckeditor5-heading": "^16.0.0",
-    "@ckeditor/ckeditor5-highlight": "^16.0.0",
-    "@ckeditor/ckeditor5-indent": "^16.0.0",
-    "@ckeditor/ckeditor5-link": "^16.0.0",
-    "@ckeditor/ckeditor5-list": "^16.0.0",
-    "@ckeditor/ckeditor5-media-embed": "^16.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^16.0.0",
-    "@ckeditor/ckeditor5-remove-format": "^16.0.0",
-    "@ckeditor/ckeditor5-undo": "^16.0.0",
-    "@ckeditor/ckeditor5-utils": "^16.0.0",
-    "@ckeditor/ckeditor5-table": "^16.0.0",
+    "@ckeditor/ckeditor5-alignment": "^17.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^17.0.0",
+    "@ckeditor/ckeditor5-code-block": "^17.0.0",
+    "@ckeditor/ckeditor5-ckfinder": "^17.0.0",
+    "@ckeditor/ckeditor5-core": "^17.0.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^17.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^17.0.0",
+    "@ckeditor/ckeditor5-font": "^17.0.0",
+    "@ckeditor/ckeditor5-heading": "^17.0.0",
+    "@ckeditor/ckeditor5-highlight": "^17.0.0",
+    "@ckeditor/ckeditor5-indent": "^17.0.0",
+    "@ckeditor/ckeditor5-link": "^17.0.0",
+    "@ckeditor/ckeditor5-list": "^17.0.0",
+    "@ckeditor/ckeditor5-media-embed": "^17.0.0",
+    "@ckeditor/ckeditor5-page-break": "^17.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^17.0.0",
+    "@ckeditor/ckeditor5-remove-format": "^17.0.0",
+    "@ckeditor/ckeditor5-restricted-editing": "^17.0.0",
+    "@ckeditor/ckeditor5-special-characters": "^17.0.0",
+    "@ckeditor/ckeditor5-undo": "^17.0.0",
+    "@ckeditor/ckeditor5-utils": "^17.0.0",
+    "@ckeditor/ckeditor5-table": "^17.0.0",
     "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^2.0.0",
     "husky": "^1.3.1",

+ 47 - 13
packages/ckeditor5-theme-lark/tests/manual/iconset.js

@@ -9,11 +9,6 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 
-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';
@@ -22,6 +17,8 @@ import strikethrough from '@ckeditor/ckeditor5-basic-styles/theme/icons/striketh
 import subscript from '@ckeditor/ckeditor5-basic-styles/theme/icons/subscript.svg';
 import superscript from '@ckeditor/ckeditor5-basic-styles/theme/icons/superscript.svg';
 
+import browseFiles from '@ckeditor/ckeditor5-ckfinder/theme/icons/browse-files.svg';
+
 import codeBlock from '@ckeditor/ckeditor5-code-block/theme/icons/codeblock.svg';
 
 import cancel from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
@@ -29,6 +26,13 @@ import check from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 import eraser from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg';
 import lowVision from '@ckeditor/ckeditor5-core/theme/icons/low-vision.svg';
 import image from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
+import alignBottom from '@ckeditor/ckeditor5-core/theme/icons/align-bottom.svg';
+import alignMiddle from '@ckeditor/ckeditor5-core/theme/icons/align-middle.svg';
+import alignTop from '@ckeditor/ckeditor5-core/theme/icons/align-top.svg';
+import alignLeft from '@ckeditor/ckeditor5-core/theme/icons/align-left.svg';
+import alignCenter from '@ckeditor/ckeditor5-core/theme/icons/align-center.svg';
+import alignRight from '@ckeditor/ckeditor5-core/theme/icons/align-right.svg';
+import alignJustify from '@ckeditor/ckeditor5-core/theme/icons/align-justify.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';
@@ -36,6 +40,7 @@ import objectFullWidth from '@ckeditor/ckeditor5-core/theme/icons/object-full-wi
 import pencil from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg';
 import pilcrow from '@ckeditor/ckeditor5-core/theme/icons/pilcrow.svg';
 import quote from '@ckeditor/ckeditor5-core/theme/icons/quote.svg';
+import threeVerticalDots from '@ckeditor/ckeditor5-core/theme/icons/three-vertical-dots.svg';
 
 import fontFamily from '@ckeditor/ckeditor5-font/theme/icons/font-family.svg';
 import fontSize from '@ckeditor/ckeditor5-font/theme/icons/font-size.svg';
@@ -60,17 +65,30 @@ 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 todoList from '@ckeditor/ckeditor5-list/theme/icons/todolist.svg';
 
 import media from '@ckeditor/ckeditor5-media-embed/theme/icons/media.svg';
 
+import pageBreak from '@ckeditor/ckeditor5-page-break/theme/icons/pagebreak.svg';
+
 import paragraph from '@ckeditor/ckeditor5-paragraph/theme/icons/paragraph.svg';
 
 import removeFormat from '@ckeditor/ckeditor5-remove-format/theme/icons/remove-format.svg';
 
+import contentLock from '@ckeditor/ckeditor5-restricted-editing/theme/icons/contentlock.svg';
+import contentUnlock from '@ckeditor/ckeditor5-restricted-editing/theme/icons/contentunlock.svg';
+
+import specialCharacters from '@ckeditor/ckeditor5-special-characters/theme/icons/specialcharacters.svg';
+
 import table from '@ckeditor/ckeditor5-table/theme/icons/table.svg';
 import tableRow from '@ckeditor/ckeditor5-table/theme/icons/table-row.svg';
 import tableColumn from '@ckeditor/ckeditor5-table/theme/icons/table-column.svg';
 import tableMergeCell from '@ckeditor/ckeditor5-table/theme/icons/table-merge-cell.svg';
+import tableCellProperties from '@ckeditor/ckeditor5-table/theme/icons/table-cell-properties.svg';
+import tableProperties from '@ckeditor/ckeditor5-table/theme/icons/table-properties.svg';
+
+import nextArrow from '@ckeditor/ckeditor5-ui/theme/icons/next-arrow.svg';
+import previousArrow from '@ckeditor/ckeditor5-ui/theme/icons/previous-arrow.svg';
 
 import undo from '@ckeditor/ckeditor5-undo/theme/icons/undo.svg';
 import redo from '@ckeditor/ckeditor5-undo/theme/icons/redo.svg';
@@ -78,17 +96,20 @@ 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, subscript, superscript,
 
+	// ckfinder
+	browseFiles,
+
 	// code block
 	codeBlock,
 
 	// core
-	check, cancel, eraser, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil, pilcrow,
+	alignTop, alignBottom, alignMiddle, alignLeft, alignCenter, alignRight,
+	alignJustify, cancel, check, eraser, image, lowVision, objectCenter,
+	objectFullWidth, objectLeft, objectRight, pencil, pilcrow, quote,
+	threeVerticalDots,
 
 	// font
 	fontFamily, fontSize, fontColor, fontBackground,
@@ -96,29 +117,42 @@ const icons = {
 	// heading
 	heading1, heading2, heading3, heading4, heading5, heading6,
 
-	// indent
-	indent, outdent,
-
 	// highlight
 	marker, pen,
 
+	// indent
+	indent, outdent,
+
 	// link
 	link, unlink,
 
 	// list
-	bulletedList, numberedList,
+	bulletedList, numberedList, todoList,
 
 	// media-embed
 	media,
 
+	// page-break
+	pageBreak,
+
 	// paragraph
 	paragraph,
 
 	// remove-format
 	removeFormat,
 
+	// restricted-editing
+	contentLock, contentUnlock,
+
+	// special-characters
+	specialCharacters,
+
 	// table
 	table, tableRow, tableColumn, tableMergeCell,
+	tableCellProperties, tableProperties,
+
+	// ui
+	nextArrow, previousArrow,
 
 	// undo
 	undo, redo

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

@@ -120,6 +120,9 @@
 	<h3>Toolbar: Multi-row</h3>
 	<div id="toolbar-multi-row" class="ck ck-reset_all"></div>
 
+	<h3>Toolbar: Compact</h3>
+	<div id="toolbar-compact" class="ck ck-reset_all"></div>
+
 <h2>Inputs</h2>
 
 	<h3>Labeled</h3>

+ 25 - 2
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -80,6 +80,7 @@ const ui = testUtils.createTestUIView( {
 	'toolbarWrap': '#toolbar-wrap',
 	'toolbarSeparator': '#toolbar-separator',
 	'toolbarMultiRow': '#toolbar-multi-row',
+	'toolbarCompact': '#toolbar-compact',
 
 	'inputLabeled': '#input-labeled',
 	'inputReadOnly': '#input-read-only'
@@ -105,7 +106,7 @@ function renderButton() {
 
 	ui.buttonStates.add( toolbar( [
 		button( {
-			label: 'State: normal (none)',
+			label: 'State: normal (none)'
 		} ),
 		button( {
 			label: 'State: disabled',
@@ -233,7 +234,7 @@ function renderButton() {
 		button( {
 			label: 'This button has a tooltip (south)',
 			withText: true,
-			tooltip: 'The content of the tooltip',
+			tooltip: 'The content of the tooltip'
 		} ),
 		button( {
 			label: 'This one too – north',
@@ -485,6 +486,28 @@ function renderToolbar() {
 			icon: boldIcon
 		} )
 	] ) );
+
+	// --- Compact ------------------------------------------------------------
+
+	const compactToolbar = toolbar( [
+		button( {
+			icon: boldIcon,
+			withText: false
+		} ),
+		button( {
+			icon: italicIcon,
+			withText: false,
+			isOn: true
+		} ),
+		button( {
+			icon: cancelIcon,
+			withText: false
+		} )
+	] );
+
+	compactToolbar.isCompact = true;
+
+	ui.toolbarCompact.add( compactToolbar );
 }
 
 function renderInput() {

+ 24 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-restricted-editing/restrictedediting.css

@@ -5,6 +5,7 @@
 
 :root {
 	--ck-color-restricted-editing-exception-background: hsla(31, 100%, 65%, .2);
+	--ck-color-restricted-editing-exception-hover-background: hsla(31, 100%, 65%, .35);
 	--ck-color-restricted-editing-exception-brackets: hsla(31, 100%, 40%, .4);
 	--ck-color-restricted-editing-selected-exception-background: hsla(31, 100%, 65%, .5);
 	--ck-color-restricted-editing-selected-exception-brackets: hsla(31, 100%, 40%, .6);
@@ -36,6 +37,28 @@
 	}
 
 	&.restricted-editing-exception_collapsed {
-		padding-left: 1em;
+		/* Empty exception should have the same width as exception with at least 1 char */
+		padding-left: 1ch;
+	}
+}
+
+.ck-restricted-editing_mode_restricted .restricted-editing-exception {
+	cursor: text;
+
+	& * {
+		cursor: text;
+	}
+
+	&:hover {
+		background: var(--ck-color-restricted-editing-exception-hover-background);
+	}
+}
+
+.ck-restricted-editing_mode_restricted {
+	cursor: default;
+
+	/* For some reason, we also need to override user agent styles for links inside the editor. */
+	& *:not(.restricted-editing-exception) {
+		cursor: default;
 	}
 }

+ 55 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-table/colorinput.css

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "../mixins/_rounded.css";
+
+.ck.ck-input-color {
+	& > .ck.ck-input-text {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+
+	& > .ck.ck-dropdown {
+		& > .ck.ck-input-color__button {
+			border-top-left-radius: 0;
+			border-bottom-left-radius: 0;
+			margin-left: -1px;
+			padding: 0;
+
+			&.ck-disabled {
+				background: var(--ck-color-input-disabled-background);
+			}
+
+			& > .ck.ck-input-color__button__preview {
+				@mixin ck-rounded-corners;
+
+				width: 20px;
+				height: 20px;
+				border: 1px solid var(--ck-color-input-border);
+
+				& > .ck.ck-input-color__button__preview__no-color-indicator {
+					top: -30%;
+					left: 50%;
+					height: 150%;
+					width: 8%;
+					background: red;
+					border-radius: 2px;
+					transform: rotate(45deg);
+					transform-origin: 50%;
+				}
+			}
+		}
+	}
+
+	& .ck.ck-input-color__remove-color {
+		width: 100%;
+		border-bottom: 1px solid var(--ck-color-input-border);
+		padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard);
+
+		& .ck.ck-icon {
+			margin-right: var(--ck-spacing-standard);
+		}
+	}
+}

+ 32 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-table/form.css

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-form {
+	padding: 0 0 var(--ck-spacing-large);
+
+	&:focus {
+		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
+		outline: none;
+	}
+
+	& .ck.ck-input-text {
+		min-width: 100%;
+		width: 0;
+	}
+
+	& .ck.ck-dropdown {
+		min-width: 100%;
+
+		& .ck-dropdown__button {
+			&:not(:focus) {
+				border: 1px solid var(--ck-color-base-border);
+			}
+
+			& .ck-button__label {
+				width: 100%;
+			}
+		}
+	}
+}

+ 19 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-table/formheader.css

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-table-form-header-height: 38px;
+}
+
+.ck.ck-form__header {
+	padding: 0 var(--ck-spacing-large);
+	height: var(--ck-table-form-header-height);
+	line-height: var(--ck-table-form-header-height);
+	border-bottom: 1px solid var(--ck-color-base-border);
+
+	& .ck-form__header__label {
+		font-weight: bold;
+	}
+}

+ 28 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-table/formrow.css

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-form__row {
+	padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0;
+
+	/* Ignore labels that work as fieldset legends */
+	& > *:not(.ck-label) {
+		& + * {
+			margin-left: var(--ck-spacing-large);
+		}
+	}
+
+	& > .ck-label {
+		width: 100%;
+		min-width: 100%;
+	}
+
+	&.ck-table-form__action-row {
+		margin-top: var(--ck-spacing-large);
+
+		& .ck-button .ck-button__label {
+			color: var(--ck-color-text);
+		}
+	}
+}

+ 21 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-table/tablecellproperties.css

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-table-cell-properties-form {
+	width: 320px;
+
+	& .ck-form__row {
+		&.ck-table-cell-properties-form__padding-row {
+			padding: 0;
+			width: 35%;
+		}
+
+		&.ck-table-cell-properties-form__alignment-row {
+			& .ck.ck-toolbar {
+				background: none;
+			}
+		}
+	}
+}

+ 95 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableform.css

@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "../mixins/_rounded.css";
+
+:root {
+	--ck-table-properties-error-arrow-size: 6px;
+	--ck-table-properties-min-error-width: 150px;
+}
+
+.ck.ck-table-form {
+	& .ck-form__row {
+		&.ck-table-form__border-row {
+			& .ck-labeled-view {
+				& > .ck-label {
+					font-size: var(--ck-font-size-tiny);
+					text-align: center;
+				}
+			}
+
+			& .ck-table-form__border-style {
+				width: 80px;
+				min-width: 80px;
+			}
+
+			& .ck-table-form__border-width {
+				width: 50px;
+				min-width: 50px;
+			}
+		}
+
+		&.ck-table-form__dimensions-row {
+			padding: 0;
+
+			& .ck-labeled-view > .ck-label {
+				font-size: 10px;
+				text-align: center;
+			}
+
+			& .ck-table-form__dimensions-row__width {
+				margin-right: var(--ck-spacing-small);
+			}
+
+			& .ck-table-form__dimensions-row__height {
+				margin-left: var(--ck-spacing-small);
+			}
+
+			& .ck-table-form__dimension-operator {
+				margin: 0;
+				align-self: start;
+				display: inline-block;
+				height: var(--ck-ui-component-min-height);
+				line-height: var(--ck-ui-component-min-height);
+			}
+		}
+	}
+
+	& .ck.ck-labeled-view {
+		& .ck.ck-labeled-view__status {
+			@mixin ck-rounded-corners;
+
+			background: var(--ck-color-base-error);
+			color: var(--ck-color-base-background);
+			padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+			min-width: var(--ck-table-properties-min-error-width);
+			text-align: center;
+
+			/* The arrow pointing towards the field. */
+			&::after {
+				border-color: transparent transparent var(--ck-color-base-error) transparent;
+				border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size);
+				border-style: solid;
+			}
+
+			animation: ck-table-form-labeled-view-status-appear .15s ease both;
+		}
+
+		/* Hide the error balloon when the field is blurred. Makes the experience much more clear. */
+		& .ck-input.ck-error:not(:focus) + .ck.ck-labeled-view__status {
+			display: none;
+		}
+	}
+}
+
+@keyframes ck-table-form-labeled-view-status-appear {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}

+ 22 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableproperties.css

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-table-properties-form {
+	width: 320px;
+
+	& .ck-form__row {
+		&.ck-table-properties-form__alignment-row {
+			padding: 0;
+
+			& .ck.ck-toolbar {
+				background: none;
+
+				& .ck-toolbar__items > * {
+					width: 40px;
+				}
+			}
+		}
+	}
+}

+ 23 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/labeledview/labeledview.css

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-labeled-view .ck-labeled-view__status {
+	font-size: var(--ck-font-size-small);
+	margin-top: var(--ck-spacing-small);
+
+	/* Let the info wrap to the next line to avoid stretching the layout horizontally.
+	The status could be very long. */
+	white-space: normal;
+}
+
+.ck.ck-labeled-view .ck-labeled-view__status_error {
+	color: var(--ck-color-base-error);
+}
+
+.ck.ck-labeled-view > .ck.ck-label {
+	width: 100%;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}

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

@@ -44,6 +44,33 @@
 		}
 	}
 
+	&.ck-toolbar_compact {
+		/* No spacing around items. */
+		padding: 0;
+
+		& .ck-toolbar__items > .ck {
+			/* No spacing between items. */
+			margin: 0;
+
+			/* No rounded corners on the right side of the first child. */
+			&:first-child {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
+			/* No rounded corners on the left side of the last child. */
+			&:last-child {
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+			}
+
+			/* "Middle" children should have no rounded corners. */
+			&:not(:first-child):not(:last-child) {
+				border-radius: 0;
+			}
+		}
+	}
+
 	& > .ck-toolbar__items > *,
 	& > .ck.ck-toolbar__grouped-dropdown {
 		/* Make sure items wrapped to the next line have v-spacing */