@ckeditor/ckeditor5-theme-lark 35.0.1 → 35.1.0

package/CHANGELOG.md

@@ -74,7 +74,7 @@ Changes for the past releases are available below.
 * Enabled additional box-shadow on `.ck-button` to meet WCAG AA recommendations. Adjusted the color of the `--ck-color-focus-border` for the same reason (editables, widget selection, etc.). Closes [ckeditor/ckeditor5#5580](https://github.com/ckeditor/ckeditor5/issues/5580). ([0fe1500](https://github.com/ckeditor/ckeditor5-theme-lark/commit/0fe1500))
 
   Also:
-  * Optimized the color of a gird component for WCAG AA.
+  * Optimized the color of a grid component for WCAG AA.
   * Imported insert table UI styles from ckeditor5-table (code refactoring).
      * Improved the table UI contrast and accessibility.
 
@@ -101,7 +101,7 @@ Changes for the past releases are available below.
 ### Other changes
 
 * The issue tracker for this package was moved to https://github.com/ckeditor/ckeditor5/issues. See [ckeditor/ckeditor5#1988](https://github.com/ckeditor/ckeditor5/issues/1988). ([59e4777](https://github.com/ckeditor/ckeditor5-theme-lark/commit/59e4777))
-* The `.ck-progress-bar` styles should not be under with `.ck-content`. Additionaly removed two unused custom properties: `--ck-color-upload-infinite-background` and `--ck-image-upload-progress-line-width`. Closes https://github.com/ckeditor/ckeditor5-theme-lark/issues/239. Closes https://github.com/ckeditor/ckeditor5/issues/1915. ([cb92793](https://github.com/ckeditor/ckeditor5-theme-lark/commit/cb92793))
+* The `.ck-progress-bar` styles should not be under with `.ck-content`. Additionally removed two unused custom properties: `--ck-color-upload-infinite-background` and `--ck-image-upload-progress-line-width`. Closes https://github.com/ckeditor/ckeditor5-theme-lark/issues/239. Closes https://github.com/ckeditor/ckeditor5/issues/1915. ([cb92793](https://github.com/ckeditor/ckeditor5-theme-lark/commit/cb92793))
 
 
 ## [14.1.1](https://github.com/ckeditor/ckeditor5-theme-lark/compare/v14.1.0...v14.1.1) (2019-07-10)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-theme-lark",
-  "version": "35.0.1",
+  "version": "35.1.0",
   "description": "A bright theme for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -9,35 +9,35 @@
     "ckeditor5-theme"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "^35.0.1"
+    "@ckeditor/ckeditor5-ui": "^35.1.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^35.0.1",
-    "@ckeditor/ckeditor5-ckfinder": "^35.0.1",
-    "@ckeditor/ckeditor5-code-block": "^35.0.1",
-    "@ckeditor/ckeditor5-core": "^35.0.1",
-    "@ckeditor/ckeditor5-editor-balloon": "^35.0.1",
-    "@ckeditor/ckeditor5-editor-classic": "^35.0.1",
-    "@ckeditor/ckeditor5-find-and-replace": "^35.0.1",
-    "@ckeditor/ckeditor5-font": "^35.0.1",
-    "@ckeditor/ckeditor5-heading": "^35.0.1",
-    "@ckeditor/ckeditor5-highlight": "^35.0.1",
-    "@ckeditor/ckeditor5-html-embed": "^35.0.1",
-    "@ckeditor/ckeditor5-indent": "^35.0.1",
-    "@ckeditor/ckeditor5-link": "^35.0.1",
-    "@ckeditor/ckeditor5-list": "^35.0.1",
-    "@ckeditor/ckeditor5-media-embed": "^35.0.1",
-    "@ckeditor/ckeditor5-page-break": "^35.0.1",
-    "@ckeditor/ckeditor5-paragraph": "^35.0.1",
-    "@ckeditor/ckeditor5-remove-format": "^35.0.1",
-    "@ckeditor/ckeditor5-restricted-editing": "^35.0.1",
-    "@ckeditor/ckeditor5-select-all": "^35.0.1",
-    "@ckeditor/ckeditor5-source-editing": "^35.0.1",
-    "@ckeditor/ckeditor5-special-characters": "^35.0.1",
-    "@ckeditor/ckeditor5-undo": "^35.0.1",
-    "@ckeditor/ckeditor5-utils": "^35.0.1",
-    "@ckeditor/ckeditor5-table": "^35.0.1",
-    "ckeditor5": "^35.0.1"
+    "@ckeditor/ckeditor5-basic-styles": "^35.1.0",
+    "@ckeditor/ckeditor5-ckfinder": "^35.1.0",
+    "@ckeditor/ckeditor5-code-block": "^35.1.0",
+    "@ckeditor/ckeditor5-core": "^35.1.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^35.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "^35.1.0",
+    "@ckeditor/ckeditor5-find-and-replace": "^35.1.0",
+    "@ckeditor/ckeditor5-font": "^35.1.0",
+    "@ckeditor/ckeditor5-heading": "^35.1.0",
+    "@ckeditor/ckeditor5-highlight": "^35.1.0",
+    "@ckeditor/ckeditor5-html-embed": "^35.1.0",
+    "@ckeditor/ckeditor5-indent": "^35.1.0",
+    "@ckeditor/ckeditor5-link": "^35.1.0",
+    "@ckeditor/ckeditor5-list": "^35.1.0",
+    "@ckeditor/ckeditor5-media-embed": "^35.1.0",
+    "@ckeditor/ckeditor5-page-break": "^35.1.0",
+    "@ckeditor/ckeditor5-paragraph": "^35.1.0",
+    "@ckeditor/ckeditor5-remove-format": "^35.1.0",
+    "@ckeditor/ckeditor5-restricted-editing": "^35.1.0",
+    "@ckeditor/ckeditor5-select-all": "^35.1.0",
+    "@ckeditor/ckeditor5-source-editing": "^35.1.0",
+    "@ckeditor/ckeditor5-special-characters": "^35.1.0",
+    "@ckeditor/ckeditor5-undo": "^35.1.0",
+    "@ckeditor/ckeditor5-utils": "^35.1.0",
+    "@ckeditor/ckeditor5-table": "^35.1.0",
+    "ckeditor5": "^35.1.0"
   },
   "engines": {
     "node": ">=14.0.0",

package/theme/ckeditor5-link/linkactions.css

@@ -3,7 +3,6 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-@import "@ckeditor/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_unselectable.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 @import "../mixins/_focus.css";

package/theme/ckeditor5-link/linkform.css

@@ -22,13 +22,15 @@
 		}
 	}
 
-	& .ck-button {
+	& > .ck-button {
 		padding: var(--ck-spacing-standard);
 		margin: 0;
-		border-radius: 0;
-		border: 0;
-		border-top: 1px solid var(--ck-color-base-border);
 		width: 50%;
+		border-radius: 0;
+
+		&:not(:focus) {
+			border-top: 1px solid var(--ck-color-base-border);
+		}
 
 		@mixin ck-dir ltr {
 			margin-left: 0;
@@ -48,7 +50,6 @@
 		margin: var(--ck-spacing-standard) var(--ck-spacing-large);
 
 		& .ck-button.ck-switchbutton {
-			border: 0;
 			padding: 0;
 			width: 100%;
 

package/theme/ckeditor5-special-characters/charactergrid.css

@@ -3,6 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
 @import "../mixins/_rounded.css";
 
 :root {
@@ -15,10 +16,18 @@
 	width: 350px;
 	max-height: 200px;
 
+	@mixin ck-media-phone {
+		width: 190px;
+	}
+
 	& .ck-character-grid__tiles {
-		grid-template-columns: repeat(auto-fit, minmax(var(--ck-character-grid-tile-size), 1fr));
+		grid-template-columns: repeat(10, 1fr);
 		margin: var(--ck-spacing-standard) var(--ck-spacing-large);
 		grid-gap: var(--ck-spacing-standard);
+
+		@mixin ck-media-phone {
+			grid-template-columns: repeat(5, 1fr);
+		}
 	}
 
 	& .ck-character-grid__tile {

package/theme/ckeditor5-special-characters/characterinfo.css

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+
 .ck.ck-character-info {
 	padding: var(--ck-spacing-small) var(--ck-spacing-large);
 	border-top: 1px solid var(--ck-color-base-border);
@@ -21,4 +23,8 @@
 	& .ck-character-info__code {
 		opacity: .6;
 	}
+
+	@mixin ck-media-phone {
+		max-width: 190px;
+	}
 }

package/theme/ckeditor5-special-characters/specialcharacters.css

@@ -4,6 +4,7 @@
  */
 
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
 
 .ck.ck-special-characters-navigation {
 
@@ -19,4 +20,13 @@
 		overflow-y: auto;
 		overflow-x: hidden;
 	}
+
+	@mixin ck-media-phone {
+		max-width: 190px;
+
+		& > .ck-form__header__label {
+			text-overflow: ellipsis;
+			overflow: hidden;
+		}
+	}
 }

package/theme/ckeditor5-style/stylegrid.css

@@ -6,10 +6,8 @@
 :root {
 	--ck-style-panel-button-width: 120px;
 	--ck-style-panel-button-height: 80px;
-	--ck-style-panel-button-shadow-color: hsl(0deg 0% 0% / 10%);
-	--ck-style-panel-button-shadow: 0px 0px 6px var(--ck-style-panel-button-shadow-color);
-	--ck-style-panel-button-label-background: hsl(0, 0%, 90%);
-	--ck-style-panel-button-hover-label-background: hsl(0, 0%, 80%);
+	--ck-style-panel-button-label-background: hsl(0, 0%, 94.1%);
+	--ck-style-panel-button-hover-label-background: hsl(0, 0%, 92.1%);
 	--ck-style-panel-button-hover-border-color: hsl(0, 0%, 70%);
 }
 
@@ -28,7 +26,6 @@
 		/* Let default .ck-button :focus styles apply */
 		&:not(:focus) {
 			border: 1px solid var(--ck-color-base-border);
-			box-shadow: var(--ck-style-panel-button-shadow);
 		}
 
 		& .ck-button__label {
@@ -39,7 +36,6 @@
 			overflow: hidden;
 			text-overflow: ellipsis;
 			flex-shrink: 0;
-			background: var(--ck-style-panel-button-label-background);
 		}
 
 		& .ck-style-grid__button__preview {
@@ -48,6 +44,7 @@
 			opacity: .9;
 
 			padding: var(--ck-spacing-medium);
+			background: var(--ck-color-base-background);
 			border: 2px solid var(--ck-color-base-background);
 		}
 
@@ -56,14 +53,9 @@
 
 			/* Let default .ck-button :focus styles apply */
 			&:not(:focus) {
-				box-shadow: none;
 				border-color: var(--ck-style-panel-button-label-background);
 			}
 
-			& .ck-button__label {
-				background: var(--ck-style-panel-button-label-background);
-			}
-
 			& .ck-style-grid__button__preview {
 				opacity: .4;
 
@@ -73,24 +65,25 @@
 		}
 
 		&.ck-on {
-			--ck-color-button-on-background: var(--ck-color-base-background);
-			--ck-color-button-on-hover-background: var(--ck-color-base-background);
-			--ck-color-button-on-active-background: var(--ck-color-base-background);
-			--ck-style-panel-button-shadow-color: hsla(208, 88%, 52%, 0.1);
-
 			border-color: var(--ck-color-base-active);
 
 			& .ck-button__label {
-				background: var(--ck-color-base-active);
-				color: var(--ck-color-base-background);
+				box-shadow: 0 -1px 0 var(--ck-color-base-active);
+				z-index: 1; /* Stay on top of the preview with the shadow. */
 			}
 
 			&:hover {
 				border-color: var(--ck-color-base-active-focus);
+			}
+		}
+
+		&:not(.ck-on) {
+			& .ck-button__label {
+				background: var(--ck-style-panel-button-label-background);
+			}
 
-				& .ck-button__label {
-					background: var(--ck-color-base-active-focus);
-				}
+			&:hover .ck-button__label {
+				background: var(--ck-style-panel-button-hover-label-background);
 			}
 		}
 
@@ -100,10 +93,6 @@
 			& .ck-style-grid__button__preview {
 				opacity: 1;
 			}
-
-			& .ck-button__label {
-				background: var(--ck-style-panel-button-hover-label-background);
-			}
 		}
 	}
 }

package/theme/ckeditor5-table/inserttable.css

@@ -26,6 +26,7 @@
 	margin: var(--ck-insert-table-dropdown-box-margin);
 	border: 1px solid var(--ck-color-base-border);
 	border-radius: 1px;
+	outline: none;
 
 	&.ck-on {
 		border-color: var(--ck-color-focus-border);

package/theme/ckeditor5-table/tableediting.css

@@ -4,7 +4,7 @@
  */
 
 :root {
-	--ck-color-table-focused-cell-background: hsla(208, 90%, 80%, .3);
+	--ck-color-table-focused-cell-background: hsla(212, 90%, 80%, .3);
 }
 
 .ck-widget.table {

package/theme/ckeditor5-ui/components/button/button.css

@@ -139,6 +139,8 @@ a.ck.ck-button {
 	/* A style of the button which is currently on, e.g. its feature is active. */
 	&.ck-on {
 		@mixin ck-button-colors --ck-color-button-on;
+
+		color: var(--ck-color-button-on-color);
 	}
 
 	&.ck-button-save {

package/theme/ckeditor5-ui/components/button/switchbutton.css

@@ -14,13 +14,13 @@ of the component, floating–point numbers have been used which, for the default
 	/* 34px at 13px font-size */
 	--ck-switch-button-toggle-width: 2.6153846154em;
 	/* 14px at 13px font-size */
-	--ck-switch-button-toggle-inner-size: 1.0769230769em;
-	--ck-switch-button-toggle-spacing: 1px;
+	--ck-switch-button-toggle-inner-size: calc(1.0769230769em + 1px);
 	--ck-switch-button-translation: calc(
 		var(--ck-switch-button-toggle-width) -
 		var(--ck-switch-button-toggle-inner-size) -
-		2 * var(--ck-switch-button-toggle-spacing)
+		2px /* Border */
 	);
+	--ck-switch-button-inner-hover-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow);
 }
 
 .ck.ck-button.ck-switchbutton {
@@ -49,9 +49,10 @@ of the component, floating–point numbers have been used which, for the default
 			margin-right: auto;
 		}
 
+		/* Apply some smooth transition to the box-shadow and border. */
 		/* Gently animate the background color of the toggle switch */
-		transition: background 400ms ease;
-
+		transition: background 400ms ease, box-shadow .2s ease-in-out, outline .2s ease-in-out;
+		border: 1px solid transparent;
 		width: var(--ck-switch-button-toggle-width);
 		background: var(--ck-color-switch-button-off-background);
 
@@ -60,8 +61,6 @@ of the component, floating–point numbers have been used which, for the default
 				border-radius: calc(.5 * var(--ck-border-radius));
 			}
 
-			/* Leave some tiny bit of space around the inner part of the switch */
-			margin: var(--ck-switch-button-toggle-spacing);
 			width: var(--ck-switch-button-toggle-inner-size);
 			height: var(--ck-switch-button-toggle-inner-size);
 			background: var(--ck-color-switch-button-inner-background);
@@ -74,7 +73,7 @@ of the component, floating–point numbers have been used which, for the default
 			background: var(--ck-color-switch-button-off-hover-background);
 
 			& .ck-button__toggle__inner {
-				box-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow);
+				box-shadow: var(--ck-switch-button-inner-hover-shadow);
 			}
 		}
 	}
@@ -83,24 +82,45 @@ of the component, floating–point numbers have been used which, for the default
 		@mixin ck-disabled;
 	}
 
-	&.ck-on .ck-button__toggle {
-		background: var(--ck-color-switch-button-on-background);
+	/* Overriding default .ck-button:focus styles + an outline around the toogle */
+	&:focus {
+		border-color: transparent;
+		outline: none;
+		box-shadow: none;
 
-		&:hover {
-			background: var(--ck-color-switch-button-on-hover-background);
+		& .ck-button__toggle {
+			box-shadow: 0 0 0 1px var(--ck-color-base-background), 0 0 0 5px var(--ck-color-focus-outer-shadow);
+			outline-offset: 1px;
+			outline: var(--ck-focus-ring);
 		}
+	}
 
-		& .ck-button__toggle__inner {
-			/*
-			 * Move the toggle switch to the right. It will be animated.
-			 */
-			@mixin ck-dir ltr {
-				transform: translateX( var( --ck-switch-button-translation ) );
+	&.ck-on {
+		& .ck-button__toggle {
+			background: var(--ck-color-switch-button-on-background);
+
+			&:hover {
+				background: var(--ck-color-switch-button-on-hover-background);
 			}
 
-			@mixin ck-dir rtl {
-				transform: translateX( calc( -1 * var( --ck-switch-button-translation ) ) );
+			& .ck-button__toggle__inner {
+				/*
+				* Move the toggle switch to the right. It will be animated.
+				*/
+				@mixin ck-dir ltr {
+					transform: translateX( var( --ck-switch-button-translation ) );
+				}
+
+				@mixin ck-dir rtl {
+					transform: translateX( calc( -1 * var( --ck-switch-button-translation ) ) );
+				}
 			}
 		}
 	}
+
+	/* Regular buttons get a backgound when active. Switch buttons announce that through the switch toggle instead */
+	&:active, &.ck-on:active {
+		background: transparent;
+	}
+
 }

package/theme/ckeditor5-ui/components/colorgrid/colorgrid.css

@@ -11,7 +11,7 @@
 	/* Not using global colors here because these may change but some colors in a pallette
 	 * require special treatment. For instance, this ensures no matter what the UI text color is,
 	 * the check icon will look good on the black color tile. */
-	--ck-color-color-grid-check-icon: hsl(0, 0%, 0%);
+	--ck-color-color-grid-check-icon: hsl(212, 81%, 46%);
 }
 
 .ck.ck-color-grid {

package/theme/ckeditor5-ui/components/list/list.css

@@ -52,7 +52,7 @@
 				background: var(--ck-color-list-button-on-background-focus);
 			}
 
-			&:focus:not(.ck-disabled) {
+			&:focus:not(.ck-switchbutton):not(.ck-disabled) {
 				border-color: var(--ck-color-base-background);
 			}
 		}

package/theme/ckeditor5-ui/components/panel/balloonpanel.css

@@ -7,6 +7,7 @@
 @import "../../../mixins/_shadow.css";
 
 :root {
+	--ck-balloon-border-width: 1px;
 	--ck-balloon-arrow-offset: 2px;
 	--ck-balloon-arrow-height: 10px;
 	--ck-balloon-arrow-half-width: 8px;
@@ -20,7 +21,7 @@
 	min-height: 15px;
 
 	background: var(--ck-color-panel-background);
-	border: 1px solid var(--ck-color-panel-border);
+	border: var(--ck-balloon-border-width) solid var(--ck-color-panel-border);
 
 	&.ck-balloon-panel_with-arrow {
 		&::before,
@@ -39,11 +40,12 @@
 
 		&::before {
 			border-color: transparent transparent var(--ck-color-panel-border) transparent;
+			margin-top: calc( -1 * var(--ck-balloon-border-width) );
 		}
 
 		&::after {
 			border-color: transparent transparent var(--ck-color-panel-background) transparent;
-			margin-top: var(--ck-balloon-arrow-offset);
+			margin-top: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
 		}
 	}
 
@@ -56,11 +58,46 @@
 		&::before {
 			border-color: var(--ck-color-panel-border) transparent transparent;
 			filter: drop-shadow(var(--ck-balloon-arrow-drop-shadow));
+			margin-bottom: calc( -1 * var(--ck-balloon-border-width) );
 		}
 
 		&::after {
 			border-color: var(--ck-color-panel-background) transparent transparent transparent;
-			margin-bottom: var(--ck-balloon-arrow-offset);
+			margin-bottom: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
+		}
+	}
+
+	&[class*="arrow_e"] {
+		&::before,
+		&::after {
+			border-width: var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height);
+		}
+
+		&::before {
+			border-color: transparent transparent transparent var(--ck-color-panel-border);
+			margin-right: calc( -1 * var(--ck-balloon-border-width) );
+		}
+
+		&::after {
+			border-color: transparent transparent transparent var(--ck-color-panel-background);
+			margin-right: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
+		}
+	}
+
+	&[class*="arrow_w"] {
+		&::before,
+		&::after {
+			border-width: var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0;
+		}
+
+		&::before {
+			border-color: transparent var(--ck-color-panel-border) transparent transparent;
+			margin-left: calc( -1 * var(--ck-balloon-border-width) );
+		}
+
+		&::after {
+			border-color: transparent var(--ck-color-panel-background) transparent transparent;
+			margin-left: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
 		}
 	}
 
@@ -149,4 +186,22 @@
 			top: calc(-1 * var(--ck-balloon-arrow-height));
 		}
 	}
+
+	&.ck-balloon-panel_arrow_e {
+		&::before,
+		&::after {
+			right: calc(-1 * var(--ck-balloon-arrow-height));
+			margin-top: calc(-1 * var(--ck-balloon-arrow-half-width));
+			top: 50%;
+		}
+	}
+
+	&.ck-balloon-panel_arrow_w {
+		&::before,
+		&::after {
+			left: calc(-1 * var(--ck-balloon-arrow-height));
+			margin-top: calc(-1 * var(--ck-balloon-arrow-half-width));
+			top: 50%;
+		}
+	}
 }

package/theme/ckeditor5-ui/components/responsive-form/responsiveform.css

@@ -49,14 +49,21 @@
 		}
 
 		/* Styles for two last buttons in the form (save&cancel, edit&unlink, etc.). */
+		& > .ck-button:nth-last-child(2) {
+			&::after {
+				border-right: 1px solid var(--ck-color-base-border);
+			}
+		}
+
 		& > .ck-button:nth-last-child(1),
 		& > .ck-button:nth-last-child(2) {
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-large);
-
 			border-radius: 0;
-			border: 0;
-			border-top: 1px solid var(--ck-color-base-border);
+
+			&:not(:focus) {
+				border-top: 1px solid var(--ck-color-base-border);
+			}
 
 			@mixin ck-dir ltr {
 				margin-left: 0;
@@ -70,11 +77,5 @@
 				}
 			}
 		}
-
-		& > .ck-button:nth-last-child(2) {
-			&::after {
-				border-right: 1px solid var(--ck-color-base-border);
-			}
-		}
 	}
 }

package/theme/ckeditor5-ui/components/toolbar/toolbar.css

@@ -65,9 +65,6 @@
 
 			/* Items in a vertical toolbar span the entire width so rounded corners are pointless. */
 			border-radius: 0;
-
-			/* Items in a vertical toolbar span the entire width so any border is pointless. */
-			border: 0;
 		}
 	}
 

package/theme/ckeditor5-ui/components/tooltip/tooltip.css

@@ -5,190 +5,26 @@
 
 @import "../../../mixins/_rounded.css";
 
-:root {
-	--ck-tooltip-arrow-size: 5px;
-}
-
-.ck.ck-tooltip {
-	left: 50%;
+.ck.ck-balloon-panel.ck-tooltip {
+	--ck-balloon-border-width: 0px;
+	--ck-balloon-arrow-offset: 0px;
+	--ck-balloon-arrow-half-width: 4px;
+	--ck-balloon-arrow-height: 4px;
+	--ck-color-panel-background: var(--ck-color-tooltip-background);
 
-	/*
-	 * Prevent blurry tooltips in LoDPI environments.
-	 * See https://github.com/ckeditor/ckeditor5/issues/1802.
-	 */
-	top: 0;
-
-	/*
-	 * For the transition to work, the tooltip must be controlled
-	 * using visibility+opacity. A delay prevents a "tooltip avalanche"
-	 * i.e. when scanning the toolbar with mouse cursor.
-	 */
-	transition: opacity .2s ease-in-out .2s;
+	padding: 0 var(--ck-spacing-medium);
 
 	& .ck-tooltip__text {
-		@mixin ck-rounded-corners;
-
 		font-size: .9em;
 		line-height: 1.5;
 		color: var(--ck-color-tooltip-text);
-		padding: var(--ck-spacing-small) var(--ck-spacing-medium);
-		background: var(--ck-color-tooltip-background);
-		position: relative;
-		left: -50%;
-
-		&::after {
-			/*
-			 * For the transition to work, the tooltip must be controlled
-			 * using visibility+opacity. A delay prevents a "tooltip avalanche"
-			 * i.e. when scanning the toolbar with mouse cursor.
-			 */
-			transition: opacity .2s ease-in-out .2s;
-			border-style: solid;
-			left: 50%;
-		}
-	}
-
-	/**
-	 * A class that displays the tooltip south of the element.
-	 *
-	 *       [element]
-	 *           ^
-	 *     +-----------+
-	 *     |  Tooltip  |
-	 *     +-----------+
-	 */
-	&.ck-tooltip_s,
-	&.ck-tooltip_sw,
-	&.ck-tooltip_se {
-		bottom: calc(-1 * var(--ck-tooltip-arrow-size));
-		transform: translateY( 100% );
-
-		& .ck-tooltip__text::after {
-			/* 1px addresses gliches in rendering causing gap between the triangle and the text */
-			top: calc(-1 * var(--ck-tooltip-arrow-size) + 1px);
-			transform: translateX( -50% );
-			border-color: transparent transparent var(--ck-color-tooltip-background) transparent;
-			border-width: 0 var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size);
-		}
-	}
-
-	/**
-	 * A class that displays the tooltip south-west of the element.
-	 *
-	 *        [element]
-	 *            ^
-	 *  +-----------+
-	 *  |  Tooltip  |
-	 *  +-----------+
-	 */
-
-	&.ck-tooltip_sw {
-		right: 50%;
-		left: auto;
-
-		& .ck-tooltip__text {
-			left: auto;
-			right: calc( -2 * var(--ck-tooltip-arrow-size));
-		}
-
-		& .ck-tooltip__text::after {
-			left: auto;
-			right: 0;
-		}
 	}
 
-	/**
-	 * A class that displays the tooltip south-east of the element.
-	 *
-	 *  [element]
-	 *      ^
-	 *    +-----------+
-	 *    |  Tooltip  |
-	 *    +-----------+
-	 */
-	&.ck-tooltip_se {
-		left: 50%;
-		right: auto;
-
-		& .ck-tooltip__text {
-			right: auto;
-			left: calc( -2 * var(--ck-tooltip-arrow-size));
-		}
-
-		& .ck-tooltip__text::after {
-			right: auto;
-			left: 0;
-			transform: translateX( 50% );
-		}
-	}
-
-	/**
-	 * A class that displays the tooltip north of the element.
-	 *
-	 *     +-----------+
-	 *     |  Tooltip  |
-	 *     +-----------+
-	 *           V
-	 *       [element]
-	 */
-	&.ck-tooltip_n {
-		top: calc(-1 * var(--ck-tooltip-arrow-size));
-		transform: translateY( -100% );
-
-		& .ck-tooltip__text::after {
-			bottom: calc(-1 * var(--ck-tooltip-arrow-size));
-			transform: translateX( -50% );
-			border-color: var(--ck-color-tooltip-background) transparent transparent transparent;
-			border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size);
-		}
-	}
-
-	/**
-	 * A class that displays the tooltip east of the element.
-	 *
-	 *                +----------+
-	 *    [element] < |   east   |
-	 *                +----------+
-	 */
-	&.ck-tooltip_e {
-		left: calc(100% + var(--ck-tooltip-arrow-size));
-		top: 50%;
-
-		& .ck-tooltip__text {
-			left: 0;
-			transform: translateY( -50% );
-
-			&::after {
-				left: calc(-1 * var(--ck-tooltip-arrow-size));
-				top: calc(50% - 1 * var(--ck-tooltip-arrow-size));
-				border-color: transparent var(--ck-color-tooltip-background) transparent transparent;
-				border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0;
-			}
-		}
-	}
-
-	/**
-	 * A class that displays the tooltip west of the element.
-	 *
-	 *    +----------+
-	 *    |   west   | > [element]
-	 *    +----------+
-	 */
-	&.ck-tooltip_w {
-		right: calc(100% + var(--ck-tooltip-arrow-size));
-		left: auto;
-		top: 50%;
-
-		& .ck-tooltip__text {
-			left: 0;
-			transform: translateY( -50% );
+	/* Reset balloon panel styles */
+	box-shadow: none;
 
-			&::after {
-				left: 100%;
-				top: calc(50% - 1 * var(--ck-tooltip-arrow-size));
-				border-color: transparent transparent transparent var(--ck-color-tooltip-background);
-				border-width: var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size);
-			}
-		}
+	/* Hide the default shadow of the .ck-balloon-panel tip */
+	&::before {
+		display: none;
 	}
 }

package/theme/ckeditor5-ui/globals/_colors.css

@@ -6,19 +6,19 @@
 :root {
 	--ck-color-base-foreground: 								hsl(0, 0%, 98%);
 	--ck-color-base-background: 								hsl(0, 0%, 100%);
-	--ck-color-base-border: 									hsl(0, 0%, 77%);
-	--ck-color-base-action: 									hsl(104, 44%, 48%);
+	--ck-color-base-border: 									hsl(220, 6%, 81%);
+	--ck-color-base-action: 									hsl(104, 50.2%, 42.5%);
 	--ck-color-base-focus: 										hsl(209, 92%, 70%);
 	--ck-color-base-text: 										hsl(0, 0%, 20%);
-	--ck-color-base-active: 									hsl(208, 88%, 52%);
-	--ck-color-base-active-focus:								hsl(208, 88%, 47%);
+	--ck-color-base-active: 									hsl(218.1, 100%, 58%);
+	--ck-color-base-active-focus:								hsl(218.2, 100%, 52.5%);
 	--ck-color-base-error:										hsl(15, 100%, 43%);
 
 	/* -- Generic colors ------------------------------------------------------------------------ */
 
-	--ck-color-focus-border-coordinates: 						208, 79%, 51%;
+	--ck-color-focus-border-coordinates: 						218, 81.8%, 56.9%;
 	--ck-color-focus-border: 									hsl(var(--ck-color-focus-border-coordinates));
-	--ck-color-focus-outer-shadow:								hsl(207, 89%, 86%);
+	--ck-color-focus-outer-shadow:								hsl(212.4, 89.3%, 89%);
 	--ck-color-focus-disabled-shadow:							hsla(209, 90%, 72%,.3);
 	--ck-color-focus-error-shadow:								hsla(9,100%,56%,.3);
 	--ck-color-text: 											var(--ck-color-base-text);
@@ -29,31 +29,30 @@
 	/* -- Buttons ------------------------------------------------------------------------------- */
 
 	--ck-color-button-default-background: 						transparent;
-	--ck-color-button-default-hover-background: 				hsl(0, 0%, 90%);
-	--ck-color-button-default-active-background: 				hsl(0, 0%, 85%);
-	--ck-color-button-default-active-shadow: 					hsl(0, 0%, 75%);
+	--ck-color-button-default-hover-background: 				hsl(0, 0%, 94.1%);
+	--ck-color-button-default-active-background: 				hsl(0, 0%, 94.1%);
 	--ck-color-button-default-disabled-background: 				transparent;
 
-	--ck-color-button-on-background: 							hsl(0, 0%, 87%);
-	--ck-color-button-on-hover-background: 						hsl(0, 0%, 77%);
-	--ck-color-button-on-active-background: 					hsl(0, 0%, 73%);
-	--ck-color-button-on-active-shadow: 						hsl(0, 0%, 63%);
-	--ck-color-button-on-disabled-background: 					hsl(0, 0%, 87%);
+	--ck-color-button-on-background: 							hsl(212, 100%, 97.1%);
+	--ck-color-button-on-hover-background: 						hsl(211.7, 100%, 92.9%);
+	--ck-color-button-on-active-background: 					hsl(211.7, 100%, 92.9%);
+	--ck-color-button-on-disabled-background: 					hsl(211, 15%, 95%);
+	--ck-color-button-on-color:									hsl(218.1, 100%, 58%);
+
 
 	--ck-color-button-action-background: 						var(--ck-color-base-action);
-	--ck-color-button-action-hover-background: 					hsl(104, 44%, 43%);
-	--ck-color-button-action-active-background: 				hsl(104, 44%, 41%);
-	--ck-color-button-action-active-shadow: 					hsl(104, 44%, 36%);
+	--ck-color-button-action-hover-background: 					hsl(104, 53.2%, 40.2%);
+	--ck-color-button-action-active-background: 				hsl(104, 53.2%, 40.2%);
 	--ck-color-button-action-disabled-background: 				hsl(104, 44%, 58%);
 	--ck-color-button-action-text: 								var(--ck-color-base-background);
 
 	--ck-color-button-save: 									hsl(120, 100%, 27%);
 	--ck-color-button-cancel: 									hsl(15, 100%, 43%);
 
-	--ck-color-switch-button-off-background:					hsl(0, 0%, 69%);
-	--ck-color-switch-button-off-hover-background:				hsl(0, 0%, 64%);
+	--ck-color-switch-button-off-background:					hsl(0, 0%, 57.6%);
+	--ck-color-switch-button-off-hover-background:				hsl(0, 0%, 49%);
 	--ck-color-switch-button-on-background:						var(--ck-color-button-action-background);
-	--ck-color-switch-button-on-hover-background:				hsl(104, 44%, 43%);
+	--ck-color-switch-button-on-hover-background:				hsl(104, 53.2%, 40.2%);
 	--ck-color-switch-button-inner-background:					var(--ck-color-base-background);
 	--ck-color-switch-button-inner-shadow:						hsla(0, 0%, 0%, 0.1);
 
@@ -65,19 +64,19 @@
 	/* -- Input --------------------------------------------------------------------------------- */
 
 	--ck-color-input-background: 								var(--ck-color-base-background);
-	--ck-color-input-border: 									hsl(0, 0%, 78%);
+	--ck-color-input-border: 									var(--ck-color-base-border);
 	--ck-color-input-error-border:								var(--ck-color-base-error);
 	--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%);
+	--ck-color-input-disabled-border: 							var(--ck-color-base-border);
 	--ck-color-input-disabled-text: 							hsl(0, 0%, 46%);
 
 	/* -- List ---------------------------------------------------------------------------------- */
 
 	--ck-color-list-background: 								var(--ck-color-base-background);
 	--ck-color-list-button-hover-background: 					var(--ck-color-button-default-hover-background);
-	--ck-color-list-button-on-background: 						var(--ck-color-base-active);
-	--ck-color-list-button-on-background-focus: 				var(--ck-color-base-active-focus);
+	--ck-color-list-button-on-background: 						var(--ck-color-button-on-color);
+	--ck-color-list-button-on-background-focus: 				var(--ck-color-button-on-color);
 	--ck-color-list-button-on-text:								var(--ck-color-base-background);
 
 	/* -- Panel --------------------------------------------------------------------------------- */
@@ -87,7 +86,7 @@
 
 	/* -- Toolbar ------------------------------------------------------------------------------- */
 
-	--ck-color-toolbar-background: 								var(--ck-color-base-foreground);
+	--ck-color-toolbar-background: 								var(--ck-color-base-background);
 	--ck-color-toolbar-border: 									var(--ck-color-base-border);
 
 	/* -- Tooltip ------------------------------------------------------------------------------- */

package/theme/ckeditor5-ui/mixins/_button.css

@@ -19,7 +19,6 @@
 
 		&:active {
 			background: var($(prefix)-active-background);
-			box-shadow: inset 0 2px 2px var($(prefix)-active-shadow);
 		}
 	}