@ckeditor/ckeditor5-theme-lark 43.0.0-alpha.4 → 43.0.0-alpha.5

package/dist/index-editor.css

@@ -313,12 +313,10 @@ a.ck.ck-button{
 		padding:var(--ck-spacing-tiny) var(--ck-spacing-standard);
 	}
 [dir="ltr"] .ck.ck-button.ck-button_with-text .ck-button__icon, [dir="ltr"] a.ck.ck-button.ck-button_with-text .ck-button__icon{
-				margin-left:calc(-1 * var(--ck-spacing-small));
-				margin-right:var(--ck-spacing-small);
+				margin-right:var(--ck-spacing-medium);
 		}
 [dir="rtl"] .ck.ck-button.ck-button_with-text .ck-button__icon, [dir="rtl"] a.ck.ck-button.ck-button_with-text .ck-button__icon{
-				margin-right:calc(-1 * var(--ck-spacing-small));
-				margin-left:var(--ck-spacing-small);
+				margin-left:var(--ck-spacing-medium);
 		}
 .ck.ck-button.ck-button_with-keystroke .ck-button__label, a.ck.ck-button.ck-button_with-keystroke .ck-button__label{
 			flex-grow:1;
@@ -449,18 +447,27 @@ a.ck.ck-button-bold{
 [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,
-	.ck.ck-list-item-button.ck-on{
+.ck.ck-button.ck-list-item-button{
+	padding:var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard));
+}
+.ck.ck-button.ck-list-item-button,
+	.ck.ck-button.ck-list-item-button.ck-on{
 		background:var(--ck-color-list-background);
 		color:var(--ck-color-text);
 	}
-.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{
+[dir="ltr"] .ck.ck-button.ck-list-item-button:has(.ck-list-item-button__check-holder){
+			padding-left:var(--ck-spacing-small);
+	}
+[dir="rtl"] .ck.ck-button.ck-list-item-button:has(.ck-list-item-button__check-holder){
+			padding-right:var(--ck-spacing-small);
+	}
+.ck.ck-button.ck-list-item-button:hover:not(.ck-disabled),
+	.ck.ck-button.ck-list-item-button.ck-button.ck-on:hover,
+	.ck.ck-button.ck-list-item-button.ck-on:not(.ck-list-item-button_toggleable),
+	.ck.ck-button.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){
+.ck.ck-button.ck-list-item-button:hover:not(.ck-disabled):not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-button.ck-on:hover:not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-on:not(.ck-list-item-button_toggleable):not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-on:hover:not(.ck-disabled){
 			color:var(--ck-color-text);
 		}
 :root{
@@ -469,7 +476,6 @@ a.ck.ck-button-bold{
 .ck.ck-collapsible > .ck.ck-button{
 		width:100%;
 		font-weight:bold;
-		padding:var(--ck-list-button-padding);
 		border-radius:0;
 		color:inherit;
 	}
@@ -959,11 +965,12 @@ a.ck.ck-button-bold{
 	}
 :root{
 	--ck-icon-size:calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
+	--ck-icon-font-size:.8333350694em;
 }
 .ck.ck-icon{
 	width:var(--ck-icon-size);
 	height:var(--ck-icon-size);
-	font-size:.8333350694em;
+	font-size:var(--ck-icon-font-size);
 	cursor:inherit;
 	will-change:transform;
 }
@@ -1147,9 +1154,6 @@ a.ck.ck-button-bold{
 .ck.ck-labeled-input .ck-labeled-input__status_error{
 	color:var(--ck-color-base-error);
 }
-:root{
-	--ck-list-button-padding:calc(.11 * var(--ck-line-height-base) * var(--ck-font-size-base)) calc(.4 * var(--ck-line-height-base) * var(--ck-font-size-base));
-}
 .ck.ck-list{
 	border-radius:0;
 }
@@ -1160,12 +1164,14 @@ a.ck.ck-button-bold{
 
 	list-style-type:none;
 	background:var(--ck-color-list-background);
+	padding:var(--ck-spacing-small) 0;
 }
 .ck.ck-list__item{
 	cursor:default;
-	min-width:12em;
+	min-width:15em;
 }
 .ck.ck-list__item > .ck-button:not(.ck-list-item-button){
+		padding:var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard));
 		min-height:unset;
 		width:100%;
 		border-radius:0;
@@ -1176,9 +1182,6 @@ a.ck.ck-button-bold{
 [dir="rtl"] .ck.ck-list__item > .ck-button:not(.ck-list-item-button){
 			text-align:right;
 	}
-.ck.ck-list__item > .ck-button:not(.ck-list-item-button){
-		padding:var(--ck-list-button-padding);
-	}
 .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));
 		}
@@ -1212,18 +1215,22 @@ a.ck.ck-button-bold{
 .ck-list .ck-list__group{
 	padding-top:var(--ck-spacing-medium);
 }
+.ck-list .ck-list__group:first-child{
+		padding-top:0;
+	}
 *:not(.ck-hidden) ~ .ck-list .ck-list__group{
 		border-top:1px solid var(--ck-color-base-border);
 	}
 .ck-list .ck-list__group > .ck-label{
 		font-size:11px;
 		font-weight:bold;
-		padding:var(--ck-spacing-medium) var(--ck-spacing-medium) 0 var(--ck-spacing-medium);
+		padding:var(--ck-spacing-medium) var(--ck-spacing-large) 0;
 	}
 .ck.ck-list__separator{
 	height:1px;
 	width:100%;
 	background:var(--ck-color-base-border);
+	margin:var(--ck-spacing-small) 0;
 }
 .ck.ck-menu-bar{
 	display:flex;
@@ -1242,7 +1249,6 @@ a.ck.ck-button-bold{
 		max-width:100%;
 	}
 .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button{
-		padding:var(--ck-list-button-padding);
 		width:100%;
 	}
 .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button > .ck-button__label{
@@ -1282,21 +1288,19 @@ a.ck.ck-button-bold{
 		}
 [dir="ltr"] .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow{
 				transform:rotate(-90deg);
+				margin-left:var(--ck-spacing-standard);
+				margin-right:calc(-1 * var(--ck-spacing-small));
 		}
 [dir="rtl"] .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow{
 				transform:rotate(90deg);
+
+				left:var(--ck-spacing-standard);
+				margin-right:var(--ck-spacing-small);
+				margin-left:calc(-1 * var(--ck-spacing-small));
 		}
 .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button.ck-disabled > .ck-menu-bar__menu__button__arrow{
 			opacity:var(--ck-disabled-opacity);
 		}
-[dir="ltr"] .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow{
-				right:var(--ck-spacing-standard);
-				margin-left:var(--ck-spacing-standard);
-			}
-[dir="rtl"] .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow{
-				left:var(--ck-spacing-standard);
-				margin-right:var(--ck-spacing-small);
-			}
 :root{
 	--ck-menu-bar-menu-item-min-width:18em;
 }
@@ -1311,8 +1315,13 @@ a.ck.ck-button-bold{
 			--ck-toolbar-spinner-size:20px;
 		}
 .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button > .ck-spinner-container{
-			margin-left:calc(-1 * var(--ck-spacing-small));
-			margin-right:var(--ck-spacing-small);
+			font-size:var(--ck-icon-font-size);
+		}
+[dir="ltr"] .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button > .ck-spinner-container{
+				margin-right:var(--ck-spacing-medium);
+		}
+[dir="rtl"] .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button > .ck-spinner-container{
+				margin-left:var(--ck-spacing-medium);
 		}
 :root{
 	--ck-menu-bar-menu-panel-max-width:75vw;
@@ -2290,7 +2299,6 @@ a.ck.ck-button-bold{
 .ck.ck-image-insert-form > .ck.ck-button{
 		display:block;
 		width:100%;
-		padding:var(--ck-list-button-padding);
 	}
 [dir="ltr"] .ck.ck-image-insert-form > .ck.ck-button{
 			text-align:left;
@@ -2548,7 +2556,7 @@ a.ck.ck-button-bold{
 				border-right:1px solid var(--ck-color-base-border);
 			}
 .ck.ck-link-form_layout-vertical .ck.ck-list{
-		margin:var(--ck-spacing-standard) var(--ck-spacing-large);
+		margin:0 var(--ck-spacing-large);
 	}
 .ck.ck-link-form_layout-vertical .ck.ck-list .ck-button.ck-switchbutton{
 			padding:0;

package/dist/index.css

@@ -544,12 +544,10 @@ a.ck.ck-button {
 		/* stylelint-disable-next-line no-descending-specificity */
 	}
 [dir="ltr"] .ck.ck-button.ck-button_with-text .ck-button__icon, [dir="ltr"] a.ck.ck-button.ck-button_with-text .ck-button__icon {
-				margin-left: calc(-1 * var(--ck-spacing-small));
-				margin-right: var(--ck-spacing-small);
+				margin-right: var(--ck-spacing-medium);
 		}
 [dir="rtl"] .ck.ck-button.ck-button_with-text .ck-button__icon, [dir="rtl"] a.ck.ck-button.ck-button_with-text .ck-button__icon {
-				margin-right: calc(-1 * var(--ck-spacing-small));
-				margin-left: var(--ck-spacing-small);
+				margin-left: var(--ck-spacing-medium);
 		}
 /* stylelint-disable-next-line no-descending-specificity */
 .ck.ck-button.ck-button_with-keystroke .ck-button__label, a.ck.ck-button.ck-button_with-keystroke .ck-button__label {
@@ -741,23 +739,32 @@ 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
  */
-.ck.ck-list-item-button,
-	.ck.ck-list-item-button.ck-on {
+.ck.ck-button.ck-list-item-button {
+	padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard));
+}
+.ck.ck-button.ck-list-item-button,
+	.ck.ck-button.ck-list-item-button.ck-on {
 		background: var(--ck-color-list-background);
 		color: var(--ck-color-text);
 	}
+[dir="ltr"] .ck.ck-button.ck-list-item-button:has(.ck-list-item-button__check-holder) {
+			padding-left: var(--ck-spacing-small);
+	}
+[dir="rtl"] .ck.ck-button.ck-list-item-button:has(.ck-list-item-button__check-holder) {
+			padding-right: var(--ck-spacing-small);
+	}
 /*
 	 * `.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 {
+.ck.ck-button.ck-list-item-button:hover:not(.ck-disabled),
+	.ck.ck-button.ck-list-item-button.ck-button.ck-on:hover,
+	.ck.ck-button.ck-list-item-button.ck-on:not(.ck-list-item-button_toggleable),
+	.ck.ck-button.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) {
+.ck.ck-button.ck-list-item-button:hover:not(.ck-disabled):not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-button.ck-on:hover:not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-on:not(.ck-list-item-button_toggleable):not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-on:hover:not(.ck-disabled) {
 			color: var(--ck-color-text);
 		}
 /*
@@ -770,7 +777,6 @@ of the component, floating–point numbers have been used which, for the default
 .ck.ck-collapsible > .ck.ck-button {
 		width: 100%;
 		font-weight: bold;
-		padding: var(--ck-list-button-padding);
 		border-radius: 0;
 		color: inherit;
 	}
@@ -1522,13 +1528,14 @@ of the component, floating–point numbers have been used which, for the default
  */
 :root {
 	--ck-icon-size: calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
+	--ck-icon-font-size: .8333350694em;
 }
 .ck.ck-icon {
 	width: var(--ck-icon-size);
 	height: var(--ck-icon-size);
 
 	/* Multiplied by the height of the line in "px" should give SVG "viewport" dimensions */
-	font-size: .8333350694em;
+	font-size: var(--ck-icon-font-size);
 
 	/* Inherit cursor style (#5). */
 	cursor: inherit;
@@ -1837,11 +1844,6 @@ 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
  */
-:root {
-	--ck-list-button-padding:
-		calc(.11 * var(--ck-line-height-base) * var(--ck-font-size-base))
-		calc(.4 * var(--ck-line-height-base) * var(--ck-font-size-base));
-}
 .ck.ck-list {
 	border-radius: 0;
 }
@@ -1852,12 +1854,18 @@ of the component, floating–point numbers have been used which, for the default
 
 	list-style-type: none;
 	background: var(--ck-color-list-background);
+
+	/* A spacing at the beginning and end of the list */
+	padding: var(--ck-spacing-small) 0;
 }
 .ck.ck-list__item {
 	cursor: default;
-	min-width: 12em;
+
+	/* Almost as wide as menu bar items. */
+	min-width: 15em;
 }
 .ck.ck-list__item > .ck-button:not(.ck-list-item-button) {
+		padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard));
 		min-height: unset;
 		width: 100%;
 		border-radius: 0;
@@ -1868,13 +1876,6 @@ of the component, floating–point numbers have been used which, for the default
 [dir="rtl"] .ck.ck-list__item > .ck-button:not(.ck-list-item-button) {
 			text-align: right;
 	}
-.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: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));
@@ -1911,20 +1912,27 @@ of the component, floating–point numbers have been used which, for the default
 .ck-list .ck-list__group {
 	padding-top: var(--ck-spacing-medium);
 
-	/* The group should have a border when it's not the first item. */
+	/* Lists come with an inner vertical padding. Don't duplicate it. */
 }
+.ck-list .ck-list__group:first-child {
+		padding-top: 0;
+	}
+/* The group should have a border when it's not the first item. */
 *:not(.ck-hidden) ~ .ck-list .ck-list__group {
 		border-top: 1px solid var(--ck-color-base-border);
 	}
 .ck-list .ck-list__group > .ck-label {
 		font-size: 11px;
 		font-weight: bold;
-		padding: var(--ck-spacing-medium) var(--ck-spacing-medium) 0 var(--ck-spacing-medium);
+		padding: var(--ck-spacing-medium) var(--ck-spacing-large) 0;
 	}
 .ck.ck-list__separator {
 	height: 1px;
 	width: 100%;
 	background: var(--ck-color-base-border);
+
+	/* Give the separator some air */
+	margin: var(--ck-spacing-small) 0;
 }
 /*
  * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -1980,7 +1988,6 @@ of the component, floating–point numbers have been used which, for the default
 	 * All menu buttons.
 	 */
 .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button {
-		padding: var(--ck-list-button-padding);
 		width: 100%;
 	}
 .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button > .ck-button__label {
@@ -2026,25 +2033,27 @@ of the component, floating–point numbers have been used which, for the default
 		}
 [dir="ltr"] .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow {
 				transform: rotate(-90deg);
-		}
-[dir="rtl"] .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow {
-				transform: rotate(90deg);
-		}
-.ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button.ck-disabled > .ck-menu-bar__menu__button__arrow {
-			opacity: var(--ck-disabled-opacity);
-		}
-[dir="ltr"] .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow {
-				right: var(--ck-spacing-standard);
 
 				/* A space to accommodate the triangle. */
 				margin-left: var(--ck-spacing-standard);
-			}
+
+				/* Nudge the arrow gently to the right because its center of gravity is to the left */
+				margin-right: calc(-1 * var(--ck-spacing-small));
+		}
 [dir="rtl"] .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow {
+				transform: rotate(90deg);
+
 				left: var(--ck-spacing-standard);
 
 				/* A space to accommodate the triangle. */
 				margin-right: var(--ck-spacing-small);
-			}
+
+				/* Nudge the arrow gently to the left because its center of gravity is to the right (after rotation). */
+				margin-left: calc(-1 * var(--ck-spacing-small));
+		}
+.ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button.ck-disabled > .ck-menu-bar__menu__button__arrow {
+			opacity: var(--ck-disabled-opacity);
+		}
 /*
  * 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
@@ -2055,6 +2064,10 @@ of the component, floating–point numbers have been used which, for the default
 .ck.ck-menu-bar__menu .ck.ck-menu-bar__menu__item {
 	min-width: var(--ck-menu-bar-menu-item-min-width);
 }
+/*
+ * 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
@@ -2071,9 +2084,14 @@ of the component, floating–point numbers have been used which, for the default
 			--ck-toolbar-spinner-size: 20px;
 		}
 .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button > .ck-spinner-container {
-			/* These margins are the same as for .ck-icon. */
-			margin-left: calc(-1 * var(--ck-spacing-small));
-			margin-right: var(--ck-spacing-small);
+			/* This ensures margins corresponding to the .ck-icon. */
+			font-size: var(--ck-icon-font-size);
+		}
+[dir="ltr"] .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button > .ck-spinner-container {
+				margin-right: var(--ck-spacing-medium);
+		}
+[dir="rtl"] .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button > .ck-spinner-container {
+				margin-left: var(--ck-spacing-medium);
 		}
 /*
  * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -3407,7 +3425,6 @@ of the component, floating–point numbers have been used which, for the default
 .ck.ck-image-insert-form > .ck.ck-button {
 		display: block;
 		width: 100%;
-		padding: var(--ck-list-button-padding);
 	}
 [dir="ltr"] .ck.ck-image-insert-form > .ck.ck-button {
 			text-align: left;
@@ -3771,7 +3788,7 @@ of the component, floating–point numbers have been used which, for the default
 			}
 /* Using additional `.ck` class for stronger CSS specificity than `.ck.ck-link-form > :not(:first-child)`. */
 .ck.ck-link-form_layout-vertical .ck.ck-list {
-		margin: var(--ck-spacing-standard) var(--ck-spacing-large);
+		margin: 0 var(--ck-spacing-large);
 	}
 .ck.ck-link-form_layout-vertical .ck.ck-list .ck-button.ck-switchbutton {
 			padding: 0;