@ckeditor/ckeditor5-theme-lark 39.0.2 → 40.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-theme-lark",
-  "version": "39.0.2",
+  "version": "40.0.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.0.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/list/list.css

@@ -77,6 +77,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);
+	}
+
+	& > span {
+		font-size: 11px;
+		font-weight: bold;
+		padding: 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;