@ckeditor/ckeditor5-theme-lark 42.0.2 → 43.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-theme-lark",
-  "version": "42.0.2",
+  "version": "43.0.0-alpha.0",
   "description": "A bright theme for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -9,7 +9,7 @@
     "ckeditor5-theme"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "42.0.2"
+    "@ckeditor/ckeditor5-ui": "43.0.0-alpha.0"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "GPL-2.0-or-later",

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

@@ -13,21 +13,11 @@
 .ck.ck-character-grid {
 	overflow-y: auto;
 	overflow-x: hidden;
-	width: 350px;
-	max-height: 200px;
-
-	@mixin ck-media-phone {
-		width: 190px;
-	}
 
 	& .ck-character-grid__tiles {
-		grid-template-columns: repeat(10, 1fr);
+		grid-template-columns: repeat(auto-fill, minmax(var(--ck-character-grid-tile-size), 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 {
@@ -35,7 +25,7 @@
 		height: var(--ck-character-grid-tile-size);
 		min-width: var(--ck-character-grid-tile-size);
 		min-height: var(--ck-character-grid-tile-size);
-		font-size: 1.2em;
+		font-size: 1.5em;
 		padding: 0;
 		transition: .2s ease box-shadow;
 		border: 0;

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

@@ -23,8 +23,4 @@
 	& .ck-character-info__code {
 		opacity: .6;
 	}
-
-	@mixin ck-media-phone {
-		max-width: 190px;
-	}
 }

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

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+.ck.ck-list-item-button {
+	&,
+	&.ck-on {
+		background: var(--ck-color-list-background);
+		color: var(--ck-color-text);
+	}
+
+	/*
+	 * `.ck-on` class and background styling is overridden for `ck-button` in many places.
+	 * This is a workaround to make sure that the background is not overridden and uses similar
+	 * selector specificity as the other overrides.
+	 */
+	&:hover:not(.ck-disabled),
+	&.ck-button.ck-on:hover,
+	&.ck-on:not(.ck-list-item-button_toggleable),
+	&.ck-on:hover {
+		background: var(--ck-color-list-button-hover-background);
+
+		&:not(.ck-disabled) {
+			color: var(--ck-color-text);
+		}
+	}
+}

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

@@ -25,7 +25,7 @@
 	cursor: default;
 	min-width: 12em;
 
-	& > .ck-button {
+	& > .ck-button:not(.ck-list-item-button) {
 		min-height: unset;
 		width: 100%;
 		border-radius: 0;
@@ -43,6 +43,11 @@
 		   https://github.com/ckeditor/ckeditor5-heading/issues/63 */
 		padding: var(--ck-list-button-padding);
 
+		& .ck-button__label {
+			/* https://github.com/ckeditor/ckeditor5-heading/issues/63 */
+			line-height: calc(var(--ck-line-height-base) * var(--ck-font-size-base));
+		}
+
 		&:active {
 			box-shadow: none;
 		}
@@ -59,7 +64,7 @@
 				background: var(--ck-color-list-button-on-background-focus);
 			}
 
-			&:focus:not(.ck-switchbutton):not(.ck-disabled) {
+			&:focus:not(.ck-disabled) {
 				border-color: var(--ck-color-base-background);
 			}
 		}
@@ -71,7 +76,7 @@
 
 	/* It's unnecessary to change the background/text of a switch toggle; it has different ways
 	of conveying its state (like the switcher) */
-	& > .ck-switchbutton {
+	& > .ck-button.ck-switchbutton {
 		&.ck-on {
 			background: var(--ck-color-list-background);
 			color: inherit;

package/theme/ckeditor5-ui/components/menubar/menubarmenubutton.css

@@ -66,20 +66,6 @@
 	&:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button {
 		border-radius: 0;
 
-		&:focus {
-			border-color: transparent;
-			box-shadow: none;
-
-			&:not(.ck-on) {
-				background: var(--ck-color-button-default-hover-background);
-			}
-		}
-
-		/* Spacing in buttons that miss the icon. */
-		&:not(:has(.ck-button__icon)) > .ck-button__label {
-			margin-left: calc(var(--ck-icon-size) - var(--ck-spacing-small));
-		}
-
 		& > .ck-menu-bar__menu__button__arrow {
 			width: var(--ck-dropdown-arrow-size);
 

package/theme/ckeditor5-ui/components/menubar/menubarmenulistitembutton.css

@@ -21,29 +21,6 @@
 			margin-left: calc(-1 * var(--ck-spacing-small));
 			margin-right: var(--ck-spacing-small);
 		}
-
-		/*
-		 * Hovered items automatically get focused. Default focus styles look odd
-		 * while moving across a huge list of items so let's get rid of them
-		 */
-		&:focus {
-			border-color: transparent;
-			box-shadow: none;
-
-			&:not(.ck-on) {
-				background: var(--ck-color-button-default-hover-background);
-			}
-		}
-	}
-
-	/*
-	 * First-level sub-menu item buttons.
-	 */
-	&.ck-menu-bar__menu_top-level > .ck-menu-bar__menu__panel > ul > .ck-menu-bar__menu__item > .ck-menu-bar__menu__item__button {
-		/* Spacing in buttons that miss the icon. */
-		&:not(:has(.ck-button__icon)) > .ck-button__label {
-			margin-left: calc(var(--ck-icon-size) - var(--ck-spacing-small));
-		}
 	}
 }
 

package/theme/ckeditor5-ui/components/menubar/menubarmenupanel.css

@@ -5,6 +5,7 @@
 
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_shadow.css";
+@import "../../../mixins/_focus.css";
 
 :root {
 	--ck-menu-bar-menu-panel-max-width: 75vw;
@@ -45,3 +46,25 @@
 		outline: none;
 	}
 }
+
+.ck.ck-menu-bar {
+	& .ck-list-item-button {
+		&:focus,
+		&:active {
+			border-color: transparent;
+			box-shadow: none;
+		}
+	}
+
+	&.ck-menu-bar_focus-border-enabled .ck-list-item-button {
+		&:focus,
+		&:active {
+			/* Fix truncated shadows due to rendering order. */
+			position: relative;
+			z-index: 2;
+
+			@mixin ck-focus-ring;
+			@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+		}
+	}
+}

package/theme/index.css

@@ -10,6 +10,7 @@
 @import "./ckeditor5-ui/components/autocomplete/autocomplete.css";
 @import "./ckeditor5-ui/components/button/button.css";
 @import "./ckeditor5-ui/components/button/switchbutton.css";
+@import "./ckeditor5-ui/components/button/listitembutton.css";
 @import "./ckeditor5-ui/components/collapsible/collapsible.css";
 @import "./ckeditor5-ui/components/colorgrid/colorgrid.css";
 @import "./ckeditor5-ui/components/colorselector/colorselector.css";