@ckeditor/ckeditor5-theme-lark 44.3.0 → 45.0.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-theme-lark",
-  "version": "44.3.0",
+  "version": "45.0.0-alpha.1",
   "description": "A bright theme for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -9,7 +9,7 @@
     "ckeditor5-theme"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "44.3.0"
+    "@ckeditor/ckeditor5-ui": "45.0.0-alpha.1"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",

package/theme/ckeditor5-bookmark/bookmark.css

@@ -3,6 +3,54 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	--ck-bookmark-icon-hover-fill-color: var(--ck-color-widget-hover-border);
+	--ck-bookmark-icon-selected-fill-color: var(--ck-color-focus-border);
+	--ck-bookmark-icon-animation-duration: var(--ck-widget-handler-animation-duration);
+	--ck-bookmark-icon-animation-curve: var(--ck-widget-handler-animation-curve);
+}
+
+.ck .ck-bookmark {
+	&.ck-widget {
+		display: inline-block;
+		outline: none;
+
+		& .ck-bookmark__icon .ck-icon__fill {
+			transition: fill var(--ck-bookmark-icon-animation-duration) var(--ck-bookmark-icon-animation-curve);
+		}
+
+		&:hover {
+			& .ck-bookmark__icon .ck-icon__fill {
+				fill: var(--ck-bookmark-icon-hover-fill-color);
+			}
+		}
+
+		&.ck-widget_selected {
+			.ck-bookmark__icon .ck-icon__fill {
+				fill: var(--ck-bookmark-icon-selected-fill-color);
+			}
+		}
+
+		&.ck-widget_selected,
+		&.ck-widget_selected:hover {
+			outline: none;
+		}
+
+		& .ck-bookmark__icon {
+			position: relative;
+			display: block;
+			/* To make it align with text baseline. */
+			top: -0.1em;
+
+			& .ck-icon {
+				height: 1.2em;
+				width: auto;
+				vertical-align: middle;
+			}
+		}
+	}
+}
+
 /*
  * Classes used by the "fake visual selection" displayed in the content when an input
  * in the bookmark UI has focus (the browser does not render the native selection in this state).

package/theme/ckeditor5-bookmark/bookmarkform.css

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+
+:root {
+	--ck-bookmark-form-width: 340px;
+}
+
+@mixin ck-media-phone {
+	:root {
+		--ck-bookmark-form-width: 300px;
+	}
+}
+
+.ck.ck-bookmark-form {
+	width: var(--ck-bookmark-form-width);
+}

package/theme/ckeditor5-bookmark/bookmarktoolbar.css

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_unselectable.css";
+
+.ck.ck-bookmark-balloon {
+	& .ck.ck-toolbar {
+		& > .ck-toolbar__items {
+			flex-wrap: nowrap;
+		}
+	}
+}
+
+.ck.ck-bookmark-toolbar__preview {
+	padding: 0 var(--ck-spacing-medium);
+	max-width: var(--ck-input-width);
+	min-width: 3em;
+	font-weight: normal;
+	text-overflow: ellipsis;
+	text-align: center;
+	overflow: hidden;
+
+	@mixin ck-unselectable;
+	cursor: default;
+}

package/theme/ckeditor5-image/imagecustomresizeform.css

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+
+:root {
+	--ck-image-custom-resize-form-width: 340px;
+}
+
+@mixin ck-media-phone {
+	:root {
+		--ck-image-custom-resize-form-width: 300px;
+	}
+}
+
+.ck.ck-image-custom-resize-form {
+	&.ck-responsive-form {
+		width: var(--ck-image-custom-resize-form-width);
+	}
+}

package/theme/ckeditor5-image/textalternativeform.css

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+
+:root {
+	--ck-text-alternative-form-width: 340px;
+}
+
+@mixin ck-media-phone {
+	:root {
+		--ck-text-alternative-form-width: 300px;
+	}
+}
+
+.ck.ck-text-alternative-form {
+	&.ck-responsive-form {
+		width: var(--ck-text-alternative-form-width);
+	}
+}

package/theme/ckeditor5-link/linkform.css

@@ -4,57 +4,54 @@
  */
 
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+
+:root {
+	--ck-link-panel-width: 340px;
+	/* The height of the text inside the link providers list button. */
+	--ck-link-provider-list-item-text-height: calc(var(--ck-line-height-base) * var(--ck-font-size-base));
+	/* The height of the link providers list item contained paddings. */
+	--ck-link-provider-list-item-height: calc(var(--ck-link-provider-list-item-text-height) + var(--ck-spacing-small) + var(--ck-spacing-small));
+}
 
-/*
- * Style link form differently when manual decorators are available.
- * See: https://github.com/ckeditor/ckeditor5-link/issues/186.
- */
-.ck.ck-link-form_layout-vertical {
-	padding: 0;
-	min-width: var(--ck-input-width);
-
-	& .ck-labeled-field-view {
-		margin: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-small);
-
-		& .ck-input-text {
-			min-width: 0;
-			width: 100%;
-		}
+@mixin ck-media-phone {
+	:root {
+		--ck-link-panel-width: 300px;
 	}
+}
 
-	& > .ck-button {
-		padding: var(--ck-spacing-standard);
-		margin: 0;
-		width: 50%;
-		border-radius: 0;
-
-		&:not(:focus) {
-			border-top: 1px solid var(--ck-color-base-border);
-		}
-
-		@mixin ck-dir ltr {
-			margin-left: 0;
-		}
-
-		@mixin ck-dir rtl {
-			margin-left: 0;
+/* Generic class that wraps each link balloon view. */
+.ck.ck-form.ck-link-form {
+	width: var(--ck-link-panel-width);
+	padding-bottom: 0;
 
-			&:last-of-type {
-				border-right: 1px solid var(--ck-color-base-border);
+	&.ck-responsive-form {
+		& .ck-labeled-field-view {
+			@mixin ck-media-phone {
+				margin: 0;
 			}
 		}
 	}
 
-	/* Using additional `.ck` class for stronger CSS specificity than `.ck.ck-link-form > :not(:first-child)`. */
-	& .ck.ck-list {
-		margin: 0 var(--ck-spacing-large);
+	& .ck-link-form__providers-list {
+		border-top: 1px solid var(--ck-color-base-border);
+
+		/* The list should be scrollable when there are more than 4 items. */
+		&:has(.ck-list__item:nth-child(n + 5)) {
+			overflow: auto;
+			/* Scroll should appear when there are more than 5 item on the list.
+			* var(--ck-spacing-large) - is a form padding.
+			* 1px - is a border width. */
+			max-height: calc(var(--ck-link-provider-list-item-height) * 4 + var(--ck-spacing-large) + 1px);
+		}
 
-		& .ck-button.ck-switchbutton {
-			padding: 0;
-			width: 100%;
+		& .ck-link__button {
+			padding: var(--ck-spacing-small) var(--ck-spacing-large);
+			border-radius: 0;
 
-			&:hover {
-				background: none;
+			& > .ck-button__label {
+				overflow: hidden;
+				text-overflow: ellipsis;
 			}
 		}
 	}

package/theme/ckeditor5-link/linkproperties.css

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+
+:root {
+	--ck-link-properties-width: 340px;
+}
+
+@mixin ck-media-phone {
+	:root {
+		--ck-link-properties-width: 300px;
+	}
+}
+
+.ck.ck-link-properties {
+	width: var(--ck-link-properties-width);
+}

package/theme/ckeditor5-link/linkprovideritems.css

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+
+:root {
+	--ck-link-providers-width: 340px;
+	--ck-link-list-view-max-height: 240px;
+	--ck-link-list-view-icon-size: calc( var(--ck-icon-size) * 0.8); /* 0.8 = 16/20 cause default the icon size is 20px */
+}
+
+@mixin ck-media-phone {
+	:root {
+		--ck-link-providers-width: 300px;
+	}
+}
+
+.ck.ck-link-providers {
+	width: var(--ck-link-providers-width);
+
+	& .ck-form__header__label {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	& > .ck-link-providers__list {
+		max-height: min( var(--ck-link-list-view-max-height), 40vh );
+
+		& .ck-button {
+			& > .ck-icon {
+				width: var(--ck-link-list-view-icon-size);
+				height: var(--ck-link-list-view-icon-size);
+			}
+
+			& > .ck-button__label {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		}
+	}
+
+	& .ck-link__empty-list-info {
+		padding: calc( 2 * var(--ck-spacing-large) ) var(--ck-spacing-medium);
+		text-align: center;
+		font-style: italic;
+	}
+}

package/theme/ckeditor5-link/linktoolbar.css

@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+:root {
+	--ck-link-bookmark-icon-size: calc( var(--ck-icon-size) * 0.7); /* 0.7 = 14/20 cause default the icon size is 20px */
+}
+
+.ck.ck-toolbar.ck-link-toolbar {
+	& > .ck-toolbar__items {
+		flex-wrap: nowrap;
+	}
+}
+
+a.ck.ck-button.ck-link-toolbar__preview {
+	padding: 0 var(--ck-spacing-medium);
+	color: var(--ck-color-link-default);
+	cursor: pointer;
+	justify-content: center;
+
+	& .ck.ck-button__label {
+		text-overflow: ellipsis;
+
+		/* Match the box model of the link editor form's input so the balloon
+		does not change width when moving between actions and the form. */
+		max-width: var(--ck-input-width);
+	}
+
+	&,
+	&:hover,
+	&:focus,
+	&:active {
+		background: none;
+	}
+
+	&:active {
+		box-shadow: none;
+	}
+
+	&:hover,
+	&:focus {
+		text-decoration: underline;
+	}
+
+	&.ck-button_with-text .ck.ck-icon.ck-button__icon {
+		width: var(--ck-link-bookmark-icon-size);
+		height: var(--ck-link-bookmark-icon-size);
+
+		@mixin ck-dir ltr {
+			margin-right: var(--ck-spacing-tiny);
+			margin-left: var(--ck-spacing-small);
+		}
+
+		@mixin ck-dir rtl {
+			margin-left: var(--ck-spacing-tiny);
+			margin-right: var(--ck-spacing-small);
+		}
+	}
+
+	&:has( .ck-icon ) {
+		padding-left: var(--ck-spacing-extra-tiny );
+	}
+}

package/theme/ckeditor5-table/formrow.css

@@ -6,18 +6,10 @@
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 .ck.ck-form__row {
-	padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0;
-
 	/* Ignore labels that work as fieldset legends */
 	& > *:not(.ck-label) {
 		& + * {
-			@mixin ck-dir ltr {
-				margin-left: var(--ck-spacing-large);
-			}
-
-			@mixin ck-dir rtl {
-				margin-right: var(--ck-spacing-large);
-			}
+			margin-inline-start: var(--ck-spacing-large);
 		}
 	}
 

package/theme/ckeditor5-table/tablelayout.css

@@ -0,0 +1,155 @@
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	--ck-table-layout-widget-type-around-button-size: 16px;
+	--ck-table-layout-widget-type-around-icon-width: 10px;
+	--ck-table-layout-widget-type-around-icon-height: 8px;
+	--ck-table-layout-widget-handler-icon-size: 10px;
+	--ck-table-layout-default-border-color: hsl(0, 0%, 83%);
+
+}
+
+.ck-editor__editable {
+	& .table.layout-table {
+		& > table {
+			width: 100%;
+			height: 100%;
+
+			/* Styles to make the layout table outline visible when the layout table is inside another layout table inside edge cells.
+			Currently, this solution works on every browser except Safari. */
+			overflow: clip;
+			overflow-clip-margin: var(--ck-widget-outline-thickness);
+
+			/* The default table layout style in the editing view when the border is unset. */
+			&:not(
+			[style*="border:"],
+			[style*="border-top"],
+			[style*="border-bottom"],
+			[style*="border-left"],
+			[style*="border-right"],
+			[style*="border-width"],
+			[style*="border-style"],
+			[style*="border-color"]) {
+				border-color: transparent;
+				border-width: 0;
+				outline: none;
+			}
+		}
+
+		& > table > tbody > tr > td {
+			box-shadow: revert;
+			padding: revert;
+			min-width: 2em;
+			/* To make the caret visible. */
+			text-indent: 1px;
+
+			/* Resets the `min-width` style attribute that was added by the content table style. */
+			&[style^="width:"],
+			&[style*=" width:"],
+			&[style*=";width:"],
+			&[style*="'width:"] {
+				min-width: auto;
+			}
+
+			/* Remove the default background color from the focused table cell. */
+			&:focus {
+				background-color: transparent;
+			}
+
+			/* The default table layout cell style in the editing view when the border is unset.
+			But it need to be more strict cause of style attributes like `border-collapse`, `border-spacing`, etc. */
+			&:not(
+			[style*="border:"],
+			[style*="border-top"],
+			[style*="border-bottom"],
+			[style*="border-left"],
+			[style*="border-right"],
+			[style*="border-width"],
+			[style*="border-style"],
+			[style*="border-color"]) {
+				border-color: transparent;
+				/* Resetting `border-width` property to the user agent styles. */
+				border-width: 0;
+				outline: var(--ck-table-layout-default-border-color) 1px dashed;
+				outline-offset: -1px;
+
+				&:focus {
+					outline: var(--ck-color-focus-border) 1px solid;
+				}
+			}
+
+			/* Reset the `width` and `text-indent` of the bogus paragraph because <td> has 1px text indent. */
+			& > .ck-table-bogus-paragraph {
+				width: calc(100% - 1px);
+				text-indent: 0;
+			}
+		}
+
+		/* Widget type around overrides. */
+		&.ck-widget {
+			& > .ck-widget__type-around {
+				--ck-widget-type-around-button-size: var(--ck-table-layout-widget-type-around-button-size);
+
+				& > .ck-widget__type-around__button {
+					&.ck-widget__type-around__button_before,
+					&.ck-widget__type-around__button_after {
+						transform: translateY(0);
+					}
+
+					&.ck-widget__type-around__button_before {
+						margin-left: var(--ck-table-layout-widget-type-around-button-size);
+						left: min(10%, 30px);
+						border-radius: 0 0 100px 100px;
+
+						&::after {
+							border-radius: 0 0 100px 100px;
+						}
+					}
+
+					&.ck-widget__type-around__button_after {
+						border-radius: 100px 100px 0 0;
+
+						&::after {
+							border-radius: 100px 100px 0 0;
+						}
+					}
+
+					& svg {
+						width: var(--ck-table-layout-widget-type-around-icon-width);
+						height: var(--ck-table-layout-widget-type-around-icon-height);
+					}
+				}
+			}
+
+			&.ck-widget_with-selection-handle {
+				& > .ck-widget__selection-handle {
+					--ck-widget-handler-icon-size: var(--ck-table-layout-widget-handler-icon-size);
+
+					transform: translateY(calc(0px - var(--ck-widget-outline-thickness)));
+					z-index: var(--ck-z-default);
+				}
+			}
+
+			/* Show fake caret on border not above. */
+			&.ck-widget_type-around_show-fake-caret_before {
+				& > .ck-widget__type-around {
+					& > .ck-widget__type-around__fake-caret {
+						top: 0;
+					}
+				}
+			}
+
+			/* Show fake caret on border not below. */
+			&.ck-widget_type-around_show-fake-caret_after {
+				& > .ck-widget__type-around {
+					& > .ck-widget__type-around__fake-caret {
+						bottom: 0;
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,4 @@
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */

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

@@ -29,4 +29,18 @@
 		--ck-font-size-base: 15px;
 		font-weight: bold;
 	}
+
+	/* Padding when back button is hidden */
+	&:has(.ck-button-back.ck-hidden) {
+		padding-inline: var(--ck-spacing-large) var(--ck-spacing-large);
+	}
+
+	/* Padding when back button is visible */
+	&:has(.ck-button-back:not(.ck-hidden)) {
+		padding-inline: var(--ck-spacing-small) var(--ck-spacing-small);
+	}
+
+	& > .ck-button-back {
+		margin-inline-end: var(--ck-spacing-small);
+	}
 }

package/theme/ckeditor5-ui/components/labeledfield/labeledfieldview.css

@@ -124,4 +124,8 @@
 	&.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown + .ck-label {
 		max-width: calc(var(--ck-labeled-field-empty-unfocused-max-width) - var(--ck-dropdown-arrow-size) - var(--ck-spacing-standard));
 	}
+
+	&.ck-labeled-field-view_full-width {
+		flex-grow: 1;
+	}
 }

package/theme/ckeditor5-widget/widget.css

@@ -37,6 +37,13 @@
 	&:hover {
 		outline-color: var(--ck-color-widget-hover-border);
 	}
+
+	/*
+	 * Hide the outline of all widget parents when the widget is being hovered.
+	 */
+	&:has( .ck-widget:hover ) {
+		outline-color: transparent;
+	}
 }
 
 .ck .ck-editor__nested-editable {
@@ -136,6 +143,12 @@
 			}
 		}
 	}
+
+	/* Hide the selection handle on mouse hover over the widget of all the widget parents. */
+	&:has( .ck-widget:hover ) > .ck-widget__selection-handle {
+		opacity: 0;
+		visibility: hidden;
+	}
 }
 
 /* In a RTL environment, align the selection handler to the right side of the widget */