@ckeditor/ckeditor5-theme-lark 0.0.0-nightly-20240507.0 → 0.0.0-nightly-20240508.0

package/dist/index-editor.css

@@ -55,7 +55,6 @@
 --ck-color-toolbar-border: var(--ck-color-base-border);
 --ck-color-tooltip-background: var(--ck-color-base-text);
 --ck-color-tooltip-text: var(--ck-color-base-background);
---ck-color-engine-placeholder-text: hsl(0, 0%, 44%);
 --ck-color-upload-bar-background: hsl(209, 92%, 70%);
 --ck-color-link-default: hsl(240, 100%, 47%);
 --ck-color-link-selected-background: hsla(201, 100%, 56%, 0.1);
@@ -89,7 +88,6 @@
 	);
 --ck-switch-button-inner-hover-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow);
 --ck-collapsible-arrow-size: calc(0.5 * var(--ck-icon-size));
---ck-color-grid-tile-size: 24px;
 --ck-color-color-grid-check-icon: hsl(212, 81%, 46%);
 --ck-dialog-overlay-background-color: hsla( 0, 0%, 0%, .5 );
 --ck-dialog-drop-shadow: 0px 0px 6px 2px hsl(0deg 0% 0% / 15%);
@@ -179,7 +177,6 @@
 --ck-widget-handler-animation-curve: ease;
 --ck-color-widget-blurred-border: hsl(0, 0%, 87%);
 --ck-color-widget-hover-border: hsl(43, 100%, 62%);
---ck-color-widget-editable-focus-background: var(--ck-color-base-background);
 --ck-color-widget-drag-handler-icon-color: var(--ck-color-base-background);
 --ck-resizer-size: 10px;
 --ck-resizer-offset: calc( ( var(--ck-resizer-size) / -2 ) - 2px);
@@ -487,37 +484,19 @@ grid-gap: 5px;
 padding: 8px;
 }
 .ck.ck-color-grid__tile {
-width: var(--ck-color-grid-tile-size);
-height: var(--ck-color-grid-tile-size);
-min-width: var(--ck-color-grid-tile-size);
-min-height: var(--ck-color-grid-tile-size);
-padding: 0;
 transition: .2s ease box-shadow;
-border: 0;
 }
 .ck.ck-color-grid__tile.ck-disabled {
 cursor: unset;
 transition: unset;
 }
-.ck.ck-color-grid__tile.ck-color-selector__color-tile_bordered {
-box-shadow: 0 0 0 1px var(--ck-color-base-border);
-}
 .ck.ck-color-grid__tile .ck.ck-icon {
 display: none;
 color: var(--ck-color-color-grid-check-icon);
 }
-.ck.ck-color-grid__tile.ck-on {
-box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text);
-}
 .ck.ck-color-grid__tile.ck-on .ck.ck-icon {
 display: block;
 }
-.ck.ck-color-grid__tile.ck-on {
-border: 0;
-}
-.ck.ck-color-grid__tile:focus:not( .ck-disabled ) {
-box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
-}
 .ck.ck-color-grid__label {
 padding: 0 var(--ck-spacing-standard);
 }
@@ -1700,7 +1679,6 @@ overflow-x: hidden;
 }
 .ck.ck-placeholder::before {
 cursor: text;
-color: var(--ck-color-engine-placeholder-text);
 }
 .ck.ck-find-and-replace-form {
 width: 400px;
@@ -2653,7 +2631,6 @@ border: 1px solid transparent;
 outline: none;
 border: var(--ck-focus-ring);
 box-shadow: var(--ck-inner-shadow), 0 0;
-background-color: var(--ck-color-widget-editable-focus-background);
 }
 .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
 padding: 4px;

package/dist/index.css

@@ -778,6 +778,10 @@ of the component, floating–point numbers have been used which, for the default
  *
  * @see $ck-border-radius
  */
+/*
+ * 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-grid-tile-size: 24px;
 
@@ -791,14 +795,55 @@ of the component, floating–point numbers have been used which, for the default
 	padding: 8px;
 }
 .ck.ck-color-grid__tile {
-	width: var(--ck-color-grid-tile-size);
-	height: var(--ck-color-grid-tile-size);
-	min-width: var(--ck-color-grid-tile-size);
-	min-height: var(--ck-color-grid-tile-size);
-	padding: 0;
 	transition: .2s ease box-shadow;
-	border: 0;
 }
+@media (forced-colors: none) {
+		.ck.ck-color-grid__tile {
+		width: var(--ck-color-grid-tile-size);
+		height: var(--ck-color-grid-tile-size);
+		min-width: var(--ck-color-grid-tile-size);
+		min-height: var(--ck-color-grid-tile-size);
+		padding: 0;
+		border: 0;
+		}
+
+		.ck.ck-color-grid__tile.ck-on,
+		.ck.ck-color-grid__tile:focus:not( .ck-disabled ),
+		.ck.ck-color-grid__tile:hover:not( .ck-disabled ) {
+			/* Disable the default .ck-button's border ring. */
+			border: 0;
+		}
+
+		.ck.ck-color-grid__tile.ck-color-selector__color-tile_bordered {
+			box-shadow: 0 0 0 1px var(--ck-color-base-border);
+		}
+
+		.ck.ck-color-grid__tile.ck-on {
+			box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text);
+		}
+
+		.ck.ck-color-grid__tile:focus:not( .ck-disabled ),
+		.ck.ck-color-grid__tile:hover:not( .ck-disabled ) {
+			box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
+		}
+	}
+/*
+	 * In high contrast mode, the colors are replaced with text labels.
+	 * See https://github.com/ckeditor/ckeditor5/issues/14907.
+	 */
+@media (forced-colors: active) {
+		.ck.ck-color-grid__tile {
+		width: unset;
+		height: unset;
+		min-width: unset;
+		min-height: unset;
+		padding: 0 var(--ck-spacing-small);
+		}
+
+		.ck.ck-color-grid__tile .ck-button__label {
+			display: inline-block;
+		}
+	}
 @media (prefers-reduced-motion: reduce) {
 .ck.ck-color-grid__tile {
 		transition: none;
@@ -808,29 +853,13 @@ of the component, floating–point numbers have been used which, for the default
 		cursor: unset;
 		transition: unset;
 	}
-.ck.ck-color-grid__tile.ck-color-selector__color-tile_bordered {
-		box-shadow: 0 0 0 1px var(--ck-color-base-border);
-	}
 .ck.ck-color-grid__tile .ck.ck-icon {
 		display: none;
 		color: var(--ck-color-color-grid-check-icon);
 	}
-.ck.ck-color-grid__tile.ck-on {
-		box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text);
-	}
 .ck.ck-color-grid__tile.ck-on .ck.ck-icon {
 			display: block;
 		}
-.ck.ck-color-grid__tile.ck-on,
-	.ck.ck-color-grid__tile:focus:not( .ck-disabled ),
-	.ck.ck-color-grid__tile:hover:not( .ck-disabled ) {
-		/* Disable the default .ck-button's border ring. */
-		border: 0;
-	}
-.ck.ck-color-grid__tile:focus:not( .ck-disabled ),
-	.ck.ck-color-grid__tile:hover:not( .ck-disabled ) {
-		box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
-	}
 .ck.ck-color-grid__label {
 	padding: 0 var(--ck-spacing-standard);
 }
@@ -2950,14 +2979,46 @@ of the component, floating–point numbers have been used which, for the default
 	overflow-y: auto;
 	overflow-x: hidden;
 }
+/*
+ * 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
+ */
 /*
  * 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
  */
 /* See ckeditor/ckeditor5#936. */
+@media (forced-colors: active) {
+		.ck.ck-placeholder, .ck .ck-placeholder {
+		/*
+		 * This is needed for Edge on Windows to use the right color for the placeholder content (::before).
+		 * See https://github.com/ckeditor/ckeditor5/issues/14907.
+		 */
+		forced-color-adjust: preserve-parent-color;
+		}
+	}
 .ck.ck-placeholder::before, .ck .ck-placeholder::before {
 		cursor: text;
-		color: var(--ck-color-engine-placeholder-text);
+	}
+@media (forced-colors: none) {
+		.ck.ck-placeholder::before, .ck .ck-placeholder::before {
+			color: var(--ck-color-engine-placeholder-text);
+		}
+	}
+@media (forced-colors: active) {
+		.ck.ck-placeholder::before, .ck .ck-placeholder::before {
+			/*
+			 * In the high contrast mode there is no telling between regular and placeholder text. Using
+			 * italic text to address that issue. See https://github.com/ckeditor/ckeditor5/issues/14907.
+			 */
+			font-style: italic;
+
+			/*
+			 * Without this margin, the caret will not show up and blink when the user puts the selection
+			 * in the placeholder (Edge on Windows). See https://github.com/ckeditor/ckeditor5/issues/14907.
+			 */
+			margin-left: 1px;
+		}
 	}
 /*
  * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -4604,6 +4665,10 @@ of the component, floating–point numbers have been used which, for the default
 /**
  * Gives an element a drop shadow so it looks like a floating panel.
  */
+/*
+ * 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-widget-outline-thickness: 3px;
 	--ck-widget-handler-icon-size: 16px;
@@ -4645,8 +4710,11 @@ of the component, floating–point numbers have been used which, for the default
 		outline: none;
 		border: var(--ck-focus-ring);
 		box-shadow: var(--ck-inner-shadow), 0 0;
-
-		background-color: var(--ck-color-widget-editable-focus-background);
+	}
+@media (forced-colors: none) {
+		.ck .ck-editor__nested-editable.ck-editor__nested-editable_focused, .ck .ck-editor__nested-editable:focus {
+			background-color: var(--ck-color-widget-editable-focus-background);
+		}
 	}
 .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
 		padding: 4px;