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

package/dist/index.css

@@ -737,6 +737,33 @@ of the component, floating–point numbers have been used which, for the default
  * 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
  */
+/*
+ * 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
+ */
+.ck.ck-list-item-button,
+	.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.
+	 */
+.ck.ck-list-item-button:hover:not(.ck-disabled),
+	.ck.ck-list-item-button.ck-button.ck-on:hover,
+	.ck.ck-list-item-button.ck-on:not(.ck-list-item-button_toggleable),
+	.ck.ck-list-item-button.ck-on:hover {
+		background: var(--ck-color-list-button-hover-background);
+	}
+.ck.ck-list-item-button:hover:not(.ck-disabled):not(.ck-disabled), .ck.ck-list-item-button.ck-button.ck-on:hover:not(.ck-disabled), .ck.ck-list-item-button.ck-on:not(.ck-list-item-button_toggleable):not(.ck-disabled), .ck.ck-list-item-button.ck-on:hover:not(.ck-disabled) {
+			color: var(--ck-color-text);
+		}
+/*
+ * 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
+ */
 :root {
 	--ck-collapsible-arrow-size: calc(0.5 * var(--ck-icon-size));
 }
@@ -1830,50 +1857,54 @@ of the component, floating–point numbers have been used which, for the default
 	cursor: default;
 	min-width: 12em;
 }
-.ck.ck-list__item > .ck-button {
+.ck.ck-list__item > .ck-button:not(.ck-list-item-button) {
 		min-height: unset;
 		width: 100%;
 		border-radius: 0;
 	}
-[dir="ltr"] .ck.ck-list__item > .ck-button {
+[dir="ltr"] .ck.ck-list__item > .ck-button:not(.ck-list-item-button) {
 			text-align: left;
 	}
-[dir="rtl"] .ck.ck-list__item > .ck-button {
+[dir="rtl"] .ck.ck-list__item > .ck-button:not(.ck-list-item-button) {
 			text-align: right;
 	}
-.ck.ck-list__item > .ck-button {
+.ck.ck-list__item > .ck-button:not(.ck-list-item-button) {
 
 		/* List items should have the same height. Use absolute units to make sure it is so
 		   because e.g. different heading styles may have different height
 		   https://github.com/ckeditor/ckeditor5-heading/issues/63 */
 		padding: var(--ck-list-button-padding);
 	}
-.ck.ck-list__item > .ck-button:active {
+.ck.ck-list__item > .ck-button:not(.ck-list-item-button) .ck-button__label {
+			/* https://github.com/ckeditor/ckeditor5-heading/issues/63 */
+			line-height: calc(var(--ck-line-height-base) * var(--ck-font-size-base));
+		}
+.ck.ck-list__item > .ck-button:not(.ck-list-item-button):active {
 			box-shadow: none;
 		}
-.ck.ck-list__item > .ck-button.ck-on {
+.ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button) {
 			background: var(--ck-color-list-button-on-background);
 			color: var(--ck-color-list-button-on-text);
 		}
-.ck.ck-list__item > .ck-button.ck-on:active {
+.ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button):active {
 				box-shadow: none;
 			}
-.ck.ck-list__item > .ck-button.ck-on:hover:not(.ck-disabled) {
+.ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button):hover:not(.ck-disabled) {
 				background: var(--ck-color-list-button-on-background-focus);
 			}
-.ck.ck-list__item > .ck-button.ck-on:focus:not(.ck-switchbutton):not(.ck-disabled) {
+.ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button):focus:not(.ck-disabled) {
 				border-color: var(--ck-color-base-background);
 			}
-.ck.ck-list__item > .ck-button:hover:not(.ck-disabled) {
+.ck.ck-list__item > .ck-button:not(.ck-list-item-button):hover:not(.ck-disabled) {
 			background: var(--ck-color-list-button-hover-background);
 		}
 /* It's unnecessary to change the background/text of a switch toggle; it has different ways
 	of conveying its state (like the switcher) */
-.ck.ck-list__item > .ck-switchbutton.ck-on {
+.ck.ck-list__item > .ck-button.ck-switchbutton.ck-on {
 			background: var(--ck-color-list-background);
 			color: inherit;
 		}
-.ck.ck-list__item > .ck-switchbutton.ck-on:hover:not(.ck-disabled) {
+.ck.ck-list__item > .ck-button.ck-switchbutton.ck-on:hover:not(.ck-disabled) {
 				background: var(--ck-color-list-button-hover-background);
 				color: inherit;
 			}
@@ -1990,17 +2021,6 @@ of the component, floating–point numbers have been used which, for the default
 .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button {
 		border-radius: 0;
 	}
-.ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button:focus {
-			border-color: transparent;
-			box-shadow: none;
-		}
-.ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button:focus:not(.ck-on) {
-				background: var(--ck-color-button-default-hover-background);
-			}
-/* Spacing in buttons that miss the icon. */
-.ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button:not(:has(.ck-button__icon)) > .ck-button__label {
-			margin-left: calc(var(--ck-icon-size) - var(--ck-spacing-small));
-		}
 .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow {
 			width: var(--ck-dropdown-arrow-size);
 		}
@@ -2055,24 +2075,6 @@ of the component, floating–point numbers have been used which, for the default
 			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
-		 */
-.ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button:focus {
-			border-color: transparent;
-			box-shadow: none;
-		}
-.ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button:focus:not(.ck-on) {
-				background: var(--ck-color-button-default-hover-background);
-			}
-/*
-	 * First-level sub-menu item buttons.
-	 */
-/* Spacing in buttons that miss the icon. */
-.ck.ck-menu-bar__menu.ck-menu-bar__menu_top-level > .ck-menu-bar__menu__panel > ul > .ck-menu-bar__menu__item > .ck-menu-bar__menu__item__button:not(:has(.ck-button__icon)) > .ck-button__label {
-			margin-left: calc(var(--ck-icon-size) - var(--ck-spacing-small));
-		}
 /*
  * 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
@@ -2096,6 +2098,13 @@ of the component, floating–point numbers have been used which, for the default
 /**
  * Gives an element a drop shadow so it looks like a floating panel.
  */
+/*
+ * 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
+ */
+/**
+ * A visual style of focused element's border.
+ */
 :root {
 	--ck-menu-bar-menu-panel-max-width: 75vw;
 }
@@ -2135,6 +2144,24 @@ of the component, floating–point numbers have been used which, for the default
 .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel:focus {
 		outline: none;
 	}
+.ck.ck-menu-bar .ck-list-item-button:focus,
+		.ck.ck-menu-bar .ck-list-item-button:active {
+			border-color: transparent;
+			box-shadow: none;
+		}
+.ck.ck-menu-bar.ck-menu-bar_focus-border-enabled .ck-list-item-button:focus,
+		.ck.ck-menu-bar.ck-menu-bar_focus-border-enabled .ck-list-item-button:active {
+			/* Fix truncated shadows due to rendering order. */
+			position: relative;
+			z-index: 2;
+
+			/* Disable native outline. */
+
+			outline: none;
+
+			border: var(--ck-focus-ring);
+			box-shadow: var(--ck-focus-outer-shadow), 0 0;
+		}
 /*
  * 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
@@ -4055,30 +4082,18 @@ of the component, floating–point numbers have been used which, for the default
 .ck.ck-character-grid {
 	overflow-y: auto;
 	overflow-x: hidden;
-	width: 350px;
-	max-height: 200px;
 }
-@media screen and (max-width: 600px) {
-.ck.ck-character-grid {
-		width: 190px;
-}
-	}
 .ck.ck-character-grid .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);
 	}
-@media screen and (max-width: 600px) {
-.ck.ck-character-grid .ck-character-grid__tiles {
-			grid-template-columns: repeat(5, 1fr);
-	}
-	}
 .ck.ck-character-grid .ck-character-grid__tile {
 		width: var(--ck-character-grid-tile-size);
 		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;
@@ -4124,11 +4139,6 @@ of the component, floating–point numbers have been used which, for the default
 .ck.ck-character-info .ck-character-info__code {
 		opacity: .6;
 	}
-@media screen and (max-width: 600px) {
-.ck.ck-character-info {
-		max-width: 190px;
-}
-	}
 /*
  * 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