@ckeditor/ckeditor5-theme-lark 39.0.2 → 40.1.0

package/LICENSE.md

@@ -2,7 +2,7 @@ Software License Agreement
 ==========================
 
 **CKEditor&nbsp;5 lark theme** – https://github.com/ckeditor/ckeditor5-theme-lark <br>
-Copyright (c) 2003-2023, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
+Copyright (c) 2003–2023, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
 
 Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
 
@@ -14,4 +14,4 @@ Where not otherwise indicated, all CKEditor content is authored by CKSource engi
 Trademarks
 ----------
 
-**CKEditor** is a trademark of [CKSource Holding sp. z o.o.](https://cksource.com) All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.
+**CKEditor** is a trademark of [CKSource Holding sp. z o.o.](https://cksource.com) All other brand and product names are trademarks, registered trademarks, or service marks of their respective holders.

package/package.json

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

package/theme/ckeditor5-clipboard/clipboard.css

@@ -3,10 +3,12 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
 :root {
 	--ck-clipboard-drop-target-dot-width: 12px;
 	--ck-clipboard-drop-target-dot-height: 8px;
-	--ck-clipboard-drop-target-color: var(--ck-color-focus-border)
+	--ck-clipboard-drop-target-color: var(--ck-color-focus-border);
 }
 
 .ck.ck-editor__editable {
@@ -23,14 +25,14 @@
 
 			/* The triangle above the marker */
 			&::after {
-				content: "";
+				content: '';
 				width: 0;
 				height: 0;
 
 				display: block;
 				position: absolute;
 				left: 50%;
-				top: calc(var(--ck-clipboard-drop-target-dot-height) * -.5);
+				top: calc(-.5 * var(--ck-clipboard-drop-target-dot-height));
 
 				transform: translateX(-50%);
 				border-color: var(--ck-clipboard-drop-target-color) transparent transparent transparent;
@@ -61,4 +63,27 @@
 	border: 1px solid var(--ck-clipboard-drop-target-color);
 	background: var(--ck-clipboard-drop-target-color);
 	margin-top: -1px;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: calc(-.5 * var(--ck-clipboard-drop-target-dot-width));
+		width: 0;
+		height: 0;
+		border-style: solid;
+
+		@mixin ck-dir ltr {
+			left: -1px;
+
+			border-width: calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0 calc(.5 * var(--ck-clipboard-drop-target-dot-width)) var(--ck-clipboard-drop-target-dot-height);
+			border-color: transparent transparent transparent var(--ck-clipboard-drop-target-color);
+		}
+
+		@mixin ck-dir rtl {
+			right: -1px;
+
+			border-width:calc(.5 * var(--ck-clipboard-drop-target-dot-width)) var(--ck-clipboard-drop-target-dot-height) calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0;
+			border-color: transparent var(--ck-clipboard-drop-target-color) transparent transparent;
+		}
+	}
 }

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

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rounded.css";
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_shadow.css";
+
+.ck.ck-autocomplete {
+	& > .ck-search__results {
+		@mixin ck-rounded-corners;
+		@mixin ck-drop-shadow;
+
+		max-height: 200px;
+		overflow-y: auto;
+		background: var(--ck-color-base-background);
+		border: 1px solid var(--ck-color-dropdown-panel-border);
+		min-width: auto;
+
+		&.ck-search__results_n {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+
+			/* Prevent duplicated borders between the input and the results pane. */
+			margin-bottom: -1px;
+		}
+
+		&.ck-search__results_s {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+
+			/* Prevent duplicated borders between the input and the results pane. */
+			margin-top: -1px;
+		}
+	}
+}

package/theme/ckeditor5-ui/components/formheader/formheader.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";
+
 :root {
 	--ck-form-header-height: 38px;
 }
@@ -13,6 +15,16 @@
 	line-height: var(--ck-form-header-height);
 	border-bottom: 1px solid var(--ck-color-base-border);
 
+	& .ck-icon {
+		@mixin ck-dir ltr {
+			margin-right: var(--ck-spacing-medium);
+		}
+
+		@mixin ck-dir rtl {
+			margin-left: var(--ck-spacing-medium);
+		}
+	}
+
 	& .ck-form__header__label {
 		font-weight: bold;
 	}

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

@@ -25,17 +25,18 @@
 
 			@mixin ck-dir ltr {
 				left: 0px;
+				transform-origin: 0 0;
+				/* By default, display the label scaled down above the field. */
+				transform: translate(var(--ck-spacing-medium), -6px) scale(.75);
 			}
 
 			@mixin ck-dir rtl {
 				right: 0px;
+				transform-origin: 100% 0;
+				transform: translate(calc(-1 * var(--ck-spacing-medium)), -6px) scale(.75);
 			}
 
 			pointer-events: none;
-			transform-origin: 0 0;
-
-			/* By default, display the label scaled down above the field. */
-			transform: translate(var(--ck-spacing-medium), -6px) scale(.75);
 
 			background: var(--ck-color-labeled-field-label-background);
 			padding: 0 calc(.5 * var(--ck-font-size-tiny));

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

@@ -6,6 +6,7 @@
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_shadow.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 .ck.ck-list {
 	@mixin ck-rounded-corners;
@@ -21,9 +22,16 @@
 	& .ck-button {
 		min-height: unset;
 		width: 100%;
-		text-align: left;
 		border-radius: 0;
 
+		@mixin ck-dir ltr {
+			text-align: left;
+		}
+
+		@mixin ck-dir rtl {
+			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 */
@@ -77,6 +85,21 @@
 	}
 }
 
+.ck-list .ck-list__group {
+	padding-top: var(--ck-spacing-medium);
+
+	/* 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);
+	}
+
+	& > .ck-label {
+		font-size: 11px;
+		font-weight: bold;
+		padding: var(--ck-spacing-medium) var(--ck-spacing-medium) 0 var(--ck-spacing-medium);
+	}
+}
+
 .ck.ck-list__separator {
 	height: 1px;
 	width: 100%;

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

@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+:root {
+	--ck-search-field-view-horizontal-spacing: calc(var(--ck-icon-size) + var(--ck-spacing-medium));
+}
+
+.ck.ck-search {
+	& > .ck-labeled-field-view {
+		& .ck-input {
+			width: 100%;
+		}
+
+		&.ck-search__query_with-icon {
+			--ck-labeled-field-label-default-position-x: var(--ck-search-field-view-horizontal-spacing);
+
+			& > .ck-labeled-field-view__input-wrapper > .ck-icon {
+				opacity: .5;
+				pointer-events: none;
+			}
+
+			& .ck-input {
+				width: 100%;
+
+				@mixin ck-dir ltr {
+					padding-left: var(--ck-search-field-view-horizontal-spacing);
+				}
+
+				@mixin ck-dir rtl {
+					&:not(.ck-input-text_empty) {
+						padding-left: var(--ck-search-field-view-horizontal-spacing);
+					}
+				}
+			}
+		}
+
+		&.ck-search__query_with-reset {
+			--ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-search-field-view-horizontal-spacing);
+
+			&.ck-labeled-field-view_empty {
+				--ck-labeled-field-empty-unfocused-max-width: 100% - var(--ck-search-field-view-horizontal-spacing) - var(--ck-spacing-medium);
+			}
+
+			& .ck-search__reset {
+				min-width: auto;
+				min-height: auto;
+
+				background: none;
+				opacity: .5;
+				padding: 0;
+
+				@mixin ck-dir ltr {
+					right: var(--ck-spacing-medium);
+				}
+
+				@mixin ck-dir rtl {
+					left: var(--ck-spacing-medium);
+				}
+
+				&:hover {
+					opacity: 1;
+				}
+			}
+
+			& .ck-input {
+				width: 100%;
+
+				@mixin ck-dir ltr {
+					&:not(.ck-input-text_empty) {
+						padding-right: var(--ck-search-field-view-horizontal-spacing);
+					}
+				}
+
+				@mixin ck-dir rtl {
+					padding-right: var(--ck-search-field-view-horizontal-spacing);
+				}
+			}
+		}
+	}
+
+	& > .ck-search__results {
+		min-width: 100%;
+
+		& > .ck-search__info {
+			width: 100%;
+			padding: var(--ck-spacing-medium) var(--ck-spacing-large);
+
+			& * {
+				white-space: normal;
+			}
+
+			& > span:first-child {
+				font-weight: bold;
+			}
+
+			& > span:last-child {
+				margin-top: var(--ck-spacing-medium);
+			}
+		}
+	}
+}
+

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

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-toolbar-spinner-size: 18px;
+}
+
+.ck.ck-spinner-container {
+	width: var(--ck-toolbar-spinner-size);
+	height: var(--ck-toolbar-spinner-size);
+	animation: 1.5s infinite rotate linear;
+}
+
+.ck.ck-spinner {
+	width: var(--ck-toolbar-spinner-size);
+	height: var(--ck-toolbar-spinner-size);
+	border-radius: 50%;
+	border: 2px solid var(--ck-color-text);
+	border-top-color: transparent;
+}
+
+@keyframes rotate {
+	to {
+		transform: rotate(360deg)
+	}
+}
+

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

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/*
+ * This fixes a problem in Firefox when the initial height of the complement does not match the number of rows.
+ * This bug is especially visible when rows=1.
+ */
+.ck-textarea {
+	overflow-x: hidden
+}

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

@@ -10,6 +10,7 @@
 	--ck-balloon-arrow-offset: 0px;
 	--ck-balloon-arrow-half-width: 4px;
 	--ck-balloon-arrow-height: 4px;
+	--ck-tooltip-text-padding: 4px;
 	--ck-color-panel-background: var(--ck-color-tooltip-background);
 
 	padding: 0 var(--ck-spacing-medium);
@@ -20,6 +21,12 @@
 		color: var(--ck-color-tooltip-text);
 	}
 
+	&.ck-tooltip_multi-line .ck-tooltip__text {
+		white-space: break-spaces;
+		display: inline-block;
+		padding: var(--ck-tooltip-text-padding) 0;
+	}
+
 	/* Reset balloon panel styles */
 	box-shadow: none;
 

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

@@ -110,5 +110,9 @@
 
 	/* -- Search result highlight ---------------------------------------------------------------- */
 
-	--ck-color-highlight-background:							hsl(60, 100%, 50%)
+	--ck-color-highlight-background:							hsl(60, 100%, 50%);
+
+	/* -- Generic colors ------------------------------------------------------------------------- */
+
+	--ck-color-light-red:										hsl(0, 100%, 90%);
 }