@ckeditor/ckeditor5-theme-lark 31.1.0 → 34.0.0

package/LICENSE.md

@@ -2,7 +2,7 @@ Software License Agreement
 ==========================
 
 **CKEditor 5 lark theme** – https://github.com/ckeditor/ckeditor5-theme-lark <br>
-Copyright (c) 2003-2021, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2022, [CKSource](http://cksource.com) Holding sp. z o.o. All rights reserved.
 
 Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
 
@@ -14,4 +14,4 @@ Where not otherwise indicated, all CKEditor content is authored by CKSource engi
 Trademarks
 ----------
 
-**CKEditor** is a trademark of [CKSource](http://cksource.com) Frederico Knabben. All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.
+**CKEditor** is a trademark of [CKSource](http://cksource.com) Holding sp. z o.o. All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.

package/README.md

@@ -3,7 +3,8 @@ CKEditor 5 lark theme
 
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-theme-lark.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark)
 [![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5?branch=master)
-[![Build Status](https://travis-ci.com/ckeditor/ckeditor5.svg?branch=master)](https://travis-ci.com/ckeditor/ckeditor5)
+[![Build Status](https://travis-ci.com/ckeditor/ckeditor5.svg?branch=master)](https://app.travis-ci.com/github/ckeditor/ckeditor5)
+![Dependency Status](https://img.shields.io/librariesio/release/npm/@ckeditor/ckeditor5-theme-lark)
 
 This package implements lark theme — the default CKEditor 5 theme.
 

package/package.json

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

package/theme/ckeditor5-clipboard/clipboard.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-code-block/codeblock.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-editor-classic/classiceditor.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-engine/placeholder.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-find-and-replace/findandreplaceform.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-font/fontcolor.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-heading/heading.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-horizontal-line/horizontalline.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-html-embed/htmlembed.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-image/imageupload.css

@@ -1,4 +1,4 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */

package/theme/ckeditor5-image/imageuploadicon.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-image/imageuploadloader.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-image/imageuploadprogress.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-link/link.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-link/linkactions.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -23,7 +23,7 @@
 
 			/* 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);
+			max-width: var(--ck-input-width);
 			min-width: 3em;
 			text-align: center;
 

package/theme/ckeditor5-link/linkform.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -11,7 +11,7 @@
  */
 .ck.ck-link-form_layout-vertical {
 	padding: 0;
-	min-width: var(--ck-input-text-width);
+	min-width: var(--ck-input-width);
 
 	& .ck-labeled-field-view {
 		margin: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-small);

package/theme/ckeditor5-link/linkimage.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-list/collapsible.css

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-collapsible-arrow-size: calc(0.5 * var(--ck-icon-size));
+}
+
+.ck.ck-collapsible {
+	& > .ck.ck-button {
+		width: 100%;
+		font-weight: bold;
+		padding: var(--ck-spacing-medium) var(--ck-spacing-large);
+		border-radius: 0;
+
+		&:focus {
+			background: transparent;
+		}
+
+		&:active, &:not(:focus), &:hover:not(:focus) {
+			background: transparent;
+			border-color: transparent;
+			box-shadow: none;
+		}
+
+		& > .ck-icon {
+			margin-right: var(--ck-spacing-medium);
+			width: var(--ck-collapsible-arrow-size);
+		}
+	}
+
+	& > .ck-collapsible__children {
+		padding: 0 var(--ck-spacing-large) var(--ck-spacing-large);
+	}
+
+	&.ck-collapsible_collapsed {
+		& > .ck.ck-button .ck-icon {
+			transform: rotate(-90deg);
+		}
+	}
+}

package/theme/ckeditor5-list/listproperties.css

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-list-properties {
+	/* When there are no list styles and there is no collapsible. */
+	&.ck-list-properties_without-styles {
+		padding: var(--ck-spacing-large);
+
+		& > * {
+			min-width: 14em;
+
+			& + * {
+				margin-top: var(--ck-spacing-standard);
+			}
+		}
+	}
+
+	/*
+	 * When the numbered list property fields (start at, reversed) should be displayed,
+	 * more horizontal space is needed. Reconfigure the style grid to create that space.
+	 */
+	&.ck-list-properties_with-numbered-properties {
+		& > .ck-list-styles-list {
+			grid-template-columns: repeat( 4, auto );
+		}
+
+		/* When list styles are rendered and property fields are in a collapsible. */
+		& > .ck-collapsible {
+			border-top: 1px solid var(--ck-color-base-border);
+
+			& > .ck-collapsible__children {
+				& > * {
+					width: 100%;
+
+					& + * {
+						margin-top: var(--ck-spacing-standard);
+					}
+				}
+			}
+		}
+	}
+
+	& .ck.ck-numbered-list-properties__start-index .ck-input {
+		min-width: auto;
+		width: 100%;
+	}
+
+	& .ck.ck-numbered-list-properties__reversed-order {
+		background: transparent;
+		padding-left: 0;
+		padding-right: 0;
+		margin-bottom: calc(-1 * var(--ck-spacing-tiny));
+
+		&:active, &:hover {
+			box-shadow: none;
+			border-color: transparent;
+			background: none;
+		}
+	}
+}

package/theme/ckeditor5-list/liststyles.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -7,39 +7,34 @@
 	--ck-list-style-button-size: 44px;
 }
 
-.ck.ck-list-styles-dropdown > .ck-dropdown__panel > .ck-toolbar {
-	background: none;
-	padding: 0;
+.ck.ck-list-styles-list {
+	grid-template-columns: repeat( 3, auto );
+	row-gap: var(--ck-spacing-medium);
+	column-gap: var(--ck-spacing-medium);
+	padding: var(--ck-spacing-large);
 
-	& > .ck-toolbar__items {
-		grid-template-columns: repeat( 3, auto );
-		row-gap: var(--ck-spacing-medium);
-		column-gap: var(--ck-spacing-medium);
-		padding: var(--ck-spacing-medium);
+	& .ck-button {
+		/* Make the button look like a thumbnail (the icon "takes it all"). */
+		width: var(--ck-list-style-button-size);
+		height: var(--ck-list-style-button-size);
+		padding: 0;
 
-		& .ck-button {
-			/* Make the button look like a thumbnail (the icon "takes it all"). */
-			width: var(--ck-list-style-button-size);
-			height: var(--ck-list-style-button-size);
-			padding: 0;
-
-			/*
-			 * Buttons are aligned by the grid so disable default button margins to not collide with the
-			 * gaps in the grid.
-			 */
-			margin: 0;
+		/*
+		 * Buttons are aligned by the grid so disable default button margins to not collide with the
+		 * gaps in the grid.
+		 */
+		margin: 0;
 
-			/*
-			 * Make sure the button border (which is displayed on focus, BTW) does not steal pixels
-			 * from the button dimensions and, as a result, decrease the size of the icon
-			 * (which becomes blurry as it scales down).
-			 */
-			box-sizing: content-box;
+		/*
+		 * Make sure the button border (which is displayed on focus, BTW) does not steal pixels
+		 * from the button dimensions and, as a result, decrease the size of the icon
+		 * (which becomes blurry as it scales down).
+		 */
+		box-sizing: content-box;
 
-			& .ck-icon {
-				width: var(--ck-list-style-button-size);
-				height: var(--ck-list-style-button-size);
-			}
+		& .ck-icon {
+			width: var(--ck-list-style-button-size);
+			height: var(--ck-list-style-button-size);
 		}
 	}
 }

package/theme/ckeditor5-media-embed/mediaembedediting.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-mention/mention.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-restricted-editing/restrictedediting.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/ckeditor5-style/style.css

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-dropdown.ck-style-dropdown.ck-style-dropdown_multiple-active > .ck-button > .ck-button__label {
+	font-style: italic;
+}

package/theme/ckeditor5-style/stylegrid.css

@@ -0,0 +1,109 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+: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-hover-border-color: hsl(0, 0%, 70%);
+}
+
+.ck.ck-style-panel .ck-style-grid {
+	row-gap: var(--ck-spacing-large);
+	column-gap: var(--ck-spacing-large);
+
+	& .ck-style-grid__button {
+		--ck-color-button-default-hover-background: var(--ck-color-base-background);
+		--ck-color-button-default-active-background: var(--ck-color-base-background);
+
+		padding: 0;
+		width: var(--ck-style-panel-button-width);
+		height: var(--ck-style-panel-button-height);
+
+		/* 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 {
+			height: 22px;
+			line-height: 22px;
+			width: 100%;
+			padding: 0 var(--ck-spacing-medium);
+			overflow: hidden;
+			text-overflow: ellipsis;
+			flex-shrink: 0;
+			background: var(--ck-style-panel-button-label-background);
+		}
+
+		& .ck-style-grid__button__preview {
+			width: 100%;
+			overflow: hidden;
+			opacity: .9;
+
+			padding: var(--ck-spacing-medium);
+			border: 2px solid var(--ck-color-base-background);
+		}
+
+		&.ck-disabled {
+			--ck-color-button-default-disabled-background: var(--ck-color-base-foreground);
+
+			/* 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;
+
+				border-color: var(--ck-color-base-foreground);
+				filter: saturate(.3);
+			}
+		}
+
+		&.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);
+			}
+
+			&:hover {
+				border-color: var(--ck-color-base-active-focus);
+
+				& .ck-button__label {
+					background: var(--ck-color-base-active-focus);
+				}
+			}
+		}
+
+		&:hover:not(.ck-disabled):not(.ck-on) {
+			border-color: var(--ck-style-panel-button-hover-border-color);
+
+			& .ck-style-grid__button__preview {
+				opacity: 1;
+			}
+
+			& .ck-button__label {
+				background: var(--ck-style-panel-button-hover-label-background);
+			}
+		}
+	}
+}

package/theme/ckeditor5-style/stylegroup.css

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-style-panel .ck-style-panel__style-group {
+	& > .ck-label {
+		margin: var(--ck-spacing-large) 0;
+	}
+
+	&:first-child {
+		& > .ck-label {
+			margin-top: 0;
+		}
+	}
+}

package/theme/ckeditor5-style/stylepanel.css

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-style-panel-max-height: 470px;
+}
+
+.ck.ck-style-panel {
+	padding: var(--ck-spacing-large);
+	overflow-y: auto;
+	max-height: var(--ck-style-panel-max-height);
+}

package/theme/ckeditor5-table/colorinput.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */