@ckeditor/ckeditor5-theme-lark 0.0.0-nightly-20240628.0 → 0.0.0-nightly-20240629.0

package/dist/index-editor.css

@@ -454,6 +454,16 @@ transform: translateX( var( --ck-switch-button-translation ) );
 [dir="rtl"] .ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle .ck-button__toggle__inner {
 transform: translateX( calc( -1 * var( --ck-switch-button-translation ) ) );
 }
+.ck.ck-list-item-button {
+background: var(--ck-color-list-background);
+color: var(--ck-color-text);
+}
+.ck.ck-list-item-button:hover:not(.ck-disabled) {
+background: var(--ck-color-list-button-hover-background);
+}
+.ck.ck-list-item-button:hover:not(.ck-disabled):not(.ck-disabled) {
+color: var(--ck-color-text);
+}
 .ck.ck-collapsible > .ck.ck-button {
 width: 100%;
 font-weight: bold;
@@ -995,47 +1005,47 @@ background: var(--ck-color-list-background);
 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) {
 padding: var(--ck-list-button-padding);
 }
-.ck.ck-list__item > .ck-button .ck-button__label {
+.ck.ck-list__item > .ck-button:not(.ck-list-item-button) .ck-button__label {
 line-height: calc(var(--ck-line-height-base) * var(--ck-font-size-base));
 }
-.ck.ck-list__item > .ck-button:active {
+.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);
 }
-.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;
 }
@@ -1107,16 +1117,6 @@ display: none;
 .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);
-}
-.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);
 }
@@ -1150,16 +1150,6 @@ border-radius: 0;
 margin-left: calc(-1 * var(--ck-spacing-small));
 margin-right: var(--ck-spacing-small);
 }
-.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);
-}
-.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));
-}
 .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel {
 border-radius: 0;
 }
@@ -1189,6 +1179,17 @@ border-bottom-right-radius: 0;
 .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel:focus {
 outline: none;
 }
+.ck.ck-menu-bar .ck-list-item-button:focus {
+border-color: transparent;
+box-shadow: none;
+}
+.ck.ck-menu-bar.ck-menu-bar_focus-border-enabled .ck-list-item-button:focus {
+position: relative;
+z-index: 2;
+outline: none;
+border: var(--ck-focus-ring);
+box-shadow: var(--ck-focus-outer-shadow), 0 0;
+}
 .ck.ck-balloon-panel {
 border-radius: 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,54 +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 .ck-button__label {
+.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:active {
+.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;
 			}
@@ -1994,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);
 		}
@@ -2059,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
@@ -2100,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;
 }
@@ -2139,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