@ckeditor/ckeditor5-theme-lark 41.3.0-alpha.4 → 41.3.1

package/package.json

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

package/theme/ckeditor5-editor-classic/classiceditor.css

@@ -7,20 +7,22 @@
 
 .ck.ck-editor__top {
 	& .ck-sticky-panel {
-		& .ck-toolbar {
+		& .ck-sticky-panel__content {
 			@mixin ck-rounded-corners {
 				border-bottom-left-radius: 0;
 				border-bottom-right-radius: 0;
 			}
 
+			border: 1px solid var(--ck-color-base-border);
 			border-bottom-width: 0;
-		}
 
-		& .ck-sticky-panel__content_sticky .ck-toolbar {
-			border-bottom-width: 1px;
+			&.ck-sticky-panel__content_sticky {
+				border-bottom-width: 1px;
+			}
 
-			@mixin ck-rounded-corners {
-				border-radius: 0;
+			& .ck-menu-bar,
+			& .ck-toolbar {
+				border: 0;
 			}
 		}
 	}

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

@@ -86,8 +86,7 @@ a.ck.ck-button {
 			margin-right: var(--ck-spacing-large);
 		}
 
-		font-weight: bold;
-		opacity: .7;
+		opacity: .5;
 	}
 
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */

package/theme/ckeditor5-ui/components/dropdown/listdropdown.css

@@ -5,7 +5,7 @@
 
 @import "../../../mixins/_rounded.css";
 
-.ck.ck-dropdown .ck-dropdown__panel .ck-list {
+.ck.ck-dropdown > .ck-dropdown__panel > .ck-list {
 	/* Disabled radius of top-left border to be consistent with .dropdown__button
 	https://github.com/ckeditor/ckeditor5/issues/816 */
 	@mixin ck-rounded-corners {
@@ -15,7 +15,7 @@
 	/* Make sure the button belonging to the first/last child of the list goes well with the
 	border radius of the entire panel. */
 	& .ck-list__item {
-		&:first-child .ck-button {
+		&:first-child > .ck-button {
 			@mixin ck-rounded-corners {
 				border-top-left-radius: 0;
 				border-bottom-left-radius: 0;
@@ -23,7 +23,7 @@
 			}
 		}
 
-		&:last-child .ck-button {
+		&:last-child > .ck-button {
 			@mixin ck-rounded-corners {
 				border-top-left-radius: 0;
 				border-top-right-radius: 0;

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

@@ -10,7 +10,7 @@
 
 :root {
 	--ck-list-button-padding:
-		calc(.2 * var(--ck-line-height-base) * var(--ck-font-size-base))
+		calc(.11 * var(--ck-line-height-base) * var(--ck-font-size-base))
 		calc(.4 * var(--ck-line-height-base) * var(--ck-font-size-base));
 }
 
@@ -25,7 +25,7 @@
 	cursor: default;
 	min-width: 12em;
 
-	& .ck-button {
+	& > .ck-button {
 		min-height: unset;
 		width: 100%;
 		border-radius: 0;
@@ -43,11 +43,6 @@
 		   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(1.2 * var(--ck-line-height-base) * var(--ck-font-size-base));
-		}
-
 		&:active {
 			box-shadow: none;
 		}
@@ -76,7 +71,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-switchbutton {
 		&.ck-on {
 			background: var(--ck-color-list-background);
 			color: inherit;

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

@@ -0,0 +1,15 @@
+/*
+ * 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-menu-bar {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	background: var(--ck-color-base-background);
+	padding: var(--ck-spacing-small);
+	gap: var(--ck-spacing-small);
+	border: 1px solid var(--ck-color-toolbar-border);
+	width: 100%;
+}

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

@@ -0,0 +1,13 @@
+/*
+ * 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-menu-bar__menu {
+	/* Enable font size inheritance, which allows fluid UI scaling. */
+	font-size: inherit;
+
+	&.ck-menu-bar__menu_top-level {
+		max-width: 100%;
+	}
+}

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

@@ -0,0 +1,117 @@
+/*
+ * 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 "../../../mixins/_disabled.css";
+@import "../../mixins/_button.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+.ck.ck-menu-bar__menu {
+	/*
+	 * All menu buttons.
+	 */
+	& > .ck-menu-bar__menu__button {
+		padding: var(--ck-list-button-padding);
+		width: 100%;
+
+		& > .ck-button__label {
+			flex-grow: 1;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		&.ck-disabled > .ck-button__label {
+			@mixin ck-disabled;
+		}
+
+		@mixin ck-dir ltr {
+			&:not(.ck-button_with-text) {
+				padding-left: var(--ck-spacing-small);
+			}
+		}
+
+		@mixin ck-dir rtl {
+			&:not(.ck-button_with-text) {
+				padding-right: var(--ck-spacing-small);
+			}
+		}
+	}
+
+	/*
+	 * Top-level menu buttons only.
+	 */
+	&.ck-menu-bar__menu_top-level > .ck-menu-bar__menu__button {
+		padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+		min-height: unset;
+
+		& .ck-button__label {
+			width: unset;
+			line-height: unset;
+		}
+
+		&.ck-on {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+
+		& .ck-icon {
+			display: none;
+		}
+	}
+
+	/*
+	 * Sub-menu buttons.
+	 */
+	&: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);
+
+			@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);
+			}
+		}
+
+		@mixin ck-dir rtl {
+			& > .ck-menu-bar__menu__button__arrow {
+				left: var(--ck-spacing-standard);
+
+				/* A space to accommodate the triangle. */
+				margin-right: var(--ck-spacing-small);
+			}
+		}
+	}
+}

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

@@ -0,0 +1,12 @@
+/*
+ * 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-menu-bar-menu-item-min-width: 18em;
+}
+
+.ck.ck-menu-bar__menu .ck.ck-menu-bar__menu__item {
+	min-width: var(--ck-menu-bar-menu-item-min-width);
+}

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

@@ -0,0 +1,50 @@
+/*
+ * 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-menu-bar__menu {
+	/*
+	 * List item buttons.
+	 */
+	& .ck-button.ck-menu-bar__menu__item__button {
+		border-radius: 0;
+
+		& > .ck-spinner-container,
+		& > .ck-spinner-container .ck-spinner {
+			/* These styles correspond to .ck-icon so that the spinner seamlessly replaces the icon. */
+			--ck-toolbar-spinner-size: 20px;
+		}
+
+		& > .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);
+		}
+
+		/*
+		 * 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

@@ -0,0 +1,47 @@
+/*
+ * 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 "../../../mixins/_rounded.css";
+@import "../../../mixins/_shadow.css";
+
+:root {
+	--ck-menu-bar-menu-panel-max-width: 75vw;
+}
+
+.ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel {
+	@mixin ck-rounded-corners;
+	@mixin ck-drop-shadow;
+
+	background: var(--ck-color-dropdown-panel-background);
+	border: 1px solid var(--ck-color-dropdown-panel-border);
+	bottom: 0;
+	height: fit-content;
+	max-width: var(--ck-menu-bar-menu-panel-max-width);
+
+	/* Corner border radius consistent with the button. */
+	&.ck-menu-bar__menu__panel_position_es,
+	&.ck-menu-bar__menu__panel_position_se {
+		border-top-left-radius: 0;
+	}
+
+	&.ck-menu-bar__menu__panel_position_ws,
+	&.ck-menu-bar__menu__panel_position_sw {
+		border-top-right-radius: 0;
+	}
+
+	&.ck-menu-bar__menu__panel_position_en,
+	&.ck-menu-bar__menu__panel_position_ne {
+		border-bottom-left-radius: 0;
+	}
+
+	&.ck-menu-bar__menu__panel_position_wn,
+	&.ck-menu-bar__menu__panel_position_nw {
+		border-bottom-right-radius: 0;
+	}
+
+	&:focus {
+		outline: none;
+	}
+}

package/theme/ckeditor5-ui/globals/_reset.css

@@ -17,11 +17,6 @@
 .ck.ck-reset,
 .ck.ck-reset_all,
 .ck-reset_all *:not(.ck-reset_all-excluded *) {
-	box-sizing: border-box;
-	width: auto;
-	height: auto;
-	position: static;
-
 	/* Do not include inheritable rules here. */
 	margin: 0;
 	padding: 0;

package/dist/content-index.css

@@ -1,12 +0,0 @@
-/**
- * @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
- */
-:root {
---ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
---ck-color-mention-text: hsl(341, 100%, 30%);
-}
-.ck-content .mention {
-background: var(--ck-color-mention-background);
-color: var(--ck-color-mention-text);
-}