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

package/package.json

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

package/theme/ckeditor5-image/imageinsert.css

@@ -32,7 +32,6 @@
 	& > .ck.ck-button {
 		display: block;
 		width: 100%;
-		padding: var(--ck-list-button-padding);
 
 		@mixin ck-dir ltr {
 			text-align: left;

package/theme/ckeditor5-link/linkform.css

@@ -47,7 +47,7 @@
 
 	/* Using additional `.ck` class for stronger CSS specificity than `.ck.ck-link-form > :not(:first-child)`. */
 	& .ck.ck-list {
-		margin: var(--ck-spacing-standard) var(--ck-spacing-large);
+		margin: 0 var(--ck-spacing-large);
 
 		& .ck-button.ck-switchbutton {
 			padding: 0;

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

@@ -121,13 +121,11 @@ a.ck.ck-button {
 		/* stylelint-disable-next-line no-descending-specificity */
 		& .ck-button__icon {
 			@mixin ck-dir ltr {
-				margin-left: calc(-1 * var(--ck-spacing-small));
-				margin-right: var(--ck-spacing-small);
+				margin-right: var(--ck-spacing-medium);
 			}
 
 			@mixin ck-dir rtl {
-				margin-right: calc(-1 * var(--ck-spacing-small));
-				margin-left: var(--ck-spacing-small);
+				margin-left: var(--ck-spacing-medium);
 			}
 		}
 	}

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

@@ -5,13 +5,25 @@
 
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
-.ck.ck-list-item-button {
+.ck.ck-button.ck-list-item-button {
+	padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard));
+
 	&,
 	&.ck-on {
 		background: var(--ck-color-list-background);
 		color: var(--ck-color-text);
 	}
 
+	&:has(.ck-list-item-button__check-holder) {
+		@mixin ck-dir ltr {
+			padding-left: var(--ck-spacing-small);
+		}
+
+		@mixin ck-dir rtl {
+			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

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

@@ -11,7 +11,6 @@
 	& > .ck.ck-button {
 		width: 100%;
 		font-weight: bold;
-		padding: var(--ck-list-button-padding);
 		border-radius: 0;
 		color: inherit;
 

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

@@ -5,6 +5,7 @@
 
 :root {
 	--ck-icon-size: calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
+	--ck-icon-font-size: .8333350694em;
 }
 
 .ck.ck-icon {
@@ -12,7 +13,7 @@
 	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;

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

@@ -8,24 +8,24 @@
 @import "../../../mixins/_shadow.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
-: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 {
 	@mixin ck-rounded-corners;
 
 	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-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;
@@ -38,11 +38,6 @@
 			text-align: right;
 		}
 
-		/* 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-button__label {
 			/* https://github.com/ckeditor/ckeditor5-heading/issues/63 */
 			line-height: calc(var(--ck-line-height-base) * var(--ck-font-size-base));
@@ -92,6 +87,11 @@
 .ck-list .ck-list__group {
 	padding-top: var(--ck-spacing-medium);
 
+	/* Lists come with an inner vertical padding. Don't duplicate it. */
+	&:first-child {
+		padding-top: 0;
+	}
+
 	/* The group should have a border when it's not the first item. */
 	*:not(.ck-hidden) ~ & {
 		border-top: 1px solid var(--ck-color-base-border);
@@ -100,7 +100,7 @@
 	& > .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;
 	}
 }
 
@@ -108,4 +108,7 @@
 	height: 1px;
 	width: 100%;
 	background: var(--ck-color-base-border);
+
+	/* Give the separator some air */
+	margin: var(--ck-spacing-small) 0;
 }

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

@@ -12,7 +12,6 @@
 	 * All menu buttons.
 	 */
 	& > .ck-menu-bar__menu__button {
-		padding: var(--ck-list-button-padding);
 		width: 100%;
 
 		& > .ck-button__label {
@@ -71,33 +70,29 @@
 
 			@mixin ck-dir ltr {
 				transform: rotate(-90deg);
-			}
-
-			@mixin ck-dir rtl {
-				transform: rotate(90deg);
-			}
-		}
-
-		&.ck-disabled > .ck-menu-bar__menu__button__arrow {
-			@mixin ck-disabled;
-		}
-
-		@mixin ck-dir ltr {
-			& > .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));
 			}
-		}
 
-		@mixin ck-dir rtl {
-			& > .ck-menu-bar__menu__button__arrow {
+			@mixin ck-dir rtl {
+				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-disabled > .ck-menu-bar__menu__button__arrow {
+			@mixin ck-disabled;
+		}
 	}
 }

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

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
 .ck.ck-menu-bar__menu {
 	/*
 	 * List item buttons.
@@ -17,9 +19,16 @@
 		}
 
 		& > .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);
+
+			@mixin ck-dir ltr {
+				margin-right: var(--ck-spacing-medium);
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: var(--ck-spacing-medium);
+			}
 		}
 	}
 }