@ckeditor/ckeditor5-theme-lark 41.4.0-alpha.0 → 41.4.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

@@ -468,6 +468,12 @@ a.ck.ck-button {
 a.ck.ck-button.ck-rounded-corners {
 		border-radius: var(--ck-border-radius);
 }
+@media (prefers-reduced-motion: reduce) {
+.ck.ck-button,
+a.ck.ck-button {
+		transition: none;
+}
+	}
 .ck.ck-button:active,
 	a.ck.ck-button:active,
 	.ck.ck-button:focus,
@@ -686,6 +692,11 @@ of the component, floating–point numbers have been used which, for the default
 			/* Gently animate the inner part of the toggle switch */
 			transition: all 300ms ease;
 		}
+@media (prefers-reduced-motion: reduce) {
+.ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner {
+				transition: none;
+		}
+			}
 .ck.ck-button.ck-switchbutton .ck-button__toggle:hover {
 			background: var(--ck-color-switch-button-off-hover-background);
 		}
@@ -767,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;
 
@@ -780,41 +795,71 @@ 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;
+}
+	}
 .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,
-	.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);
 }
@@ -1534,6 +1579,11 @@ of the component, floating–point numbers have been used which, for the default
 	/* Apply some smooth transition to the box-shadow and border. */
 	transition: box-shadow .1s ease-in-out, border .1s ease-in-out;
 }
+@media (prefers-reduced-motion: reduce) {
+.ck.ck-input {
+		transition: none;
+}
+	}
 .ck.ck-input:focus {
 		/* Disable native outline. */
 		outline: none;
@@ -1553,6 +1603,11 @@ of the component, floating–point numbers have been used which, for the default
 		border-color: var(--ck-color-input-error-border);
 		animation: ck-input-shake .3s ease both;
 	}
+@media (prefers-reduced-motion: reduce) {
+.ck.ck-input.ck-error {
+			animation: none;
+	}
+		}
 .ck.ck-input.ck-error:focus {
 			box-shadow: var(--ck-focus-error-outer-shadow), 0 0;
 		}
@@ -1647,6 +1702,11 @@ of the component, floating–point numbers have been used which, for the default
 				padding var(--ck-labeled-field-view-transition),
 				background var(--ck-labeled-field-view-transition);
 		}
+@media (prefers-reduced-motion: reduce) {
+.ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
+				transition: none;
+		}
+			}
 .ck.ck-labeled-field-view.ck-error > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
 			color: var(--ck-color-base-error);
 		}
@@ -2508,6 +2568,11 @@ of the component, floating–point numbers have been used which, for the default
 	height: var(--ck-toolbar-spinner-size);
 	animation: 1.5s infinite rotate linear;
 }
+@media (prefers-reduced-motion: reduce) {
+.ck.ck-spinner-container {
+		animation-duration: 3s;
+}
+	}
 .ck.ck-spinner {
 	width: var(--ck-toolbar-spinner-size);
 	height: var(--ck-toolbar-spinner-size);
@@ -2914,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.
@@ -3368,6 +3465,18 @@ of the component, floating–point numbers have been used which, for the default
 		/* #1095. While reset is not providing proper box-sizing for pseudoelements, we need to handle it. */
 		box-sizing: border-box;
 	}
+@media (prefers-reduced-motion: reduce) {
+.ck-image-upload-complete-icon {
+		animation-duration: 0ms;
+}
+
+		.ck-image-upload-complete-icon::after {
+			animation: none;
+			opacity: 1;
+			width: 0.3em;
+			height: 0.45em;
+		}
+	}
 @keyframes ck-upload-complete-icon-show {
 	from {
 		opacity: 0;
@@ -3453,6 +3562,12 @@ of the component, floating–point numbers have been used which, for the default
 .ck.ck-editor__editable .image.ck-appear, .ck.ck-editor__editable .image-inline.ck-appear {
 			animation: fadeIn 700ms;
 		}
+@media (prefers-reduced-motion: reduce) {
+.ck.ck-editor__editable .image.ck-appear, .ck.ck-editor__editable .image-inline.ck-appear {
+				opacity: 1;
+				animation: none;
+		}
+			}
 /* Upload progress bar. */
 .ck.ck-editor__editable .image .ck-progress-bar,
 	.ck.ck-editor__editable .image-inline .ck-progress-bar {
@@ -3877,6 +3992,11 @@ of the component, floating–point numbers have been used which, for the default
 		var(--ck-color-restricted-editing-exception-brackets) 100%
 	) 1;
 }
+@media (prefers-reduced-motion: reduce) {
+.ck-editor__editable .restricted-editing-exception {
+		transition: none;
+}
+	}
 .ck-editor__editable .restricted-editing-exception.restricted-editing-exception_selected {
 		background-color: var(--ck-color-restricted-editing-selected-exception-background);
 		border-image: linear-gradient(
@@ -3960,6 +4080,11 @@ of the component, floating–point numbers have been used which, for the default
 		transition: .2s ease box-shadow;
 		border: 0;
 	}
+@media (prefers-reduced-motion: reduce) {
+.ck.ck-character-grid .ck-character-grid__tile {
+			transition: none;
+	}
+		}
 .ck.ck-character-grid .ck-character-grid__tile:focus:not( .ck-disabled ),
 		.ck.ck-character-grid .ck-character-grid__tile:hover:not( .ck-disabled ) {
 			/* Disable the default .ck-button's border ring. */
@@ -4321,6 +4446,11 @@ of the component, floating–point numbers have been used which, for the default
 	outline: none;
 	transition: none;
 }
+@media (prefers-reduced-motion: reduce) {
+.ck .ck-insert-table-dropdown-grid-box {
+		transition: none;
+}
+	}
 .ck .ck-insert-table-dropdown-grid-box:focus {
 		box-shadow: none;
 	}
@@ -4434,6 +4564,11 @@ of the component, floating–point numbers have been used which, for the default
 				border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size);
 				border-style: solid;
 			}
+@media (prefers-reduced-motion: reduce) {
+.ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status {
+				animation: none;
+		}
+			}
 /* Hide the error balloon when the field is blurred. Makes the experience much more clear. */
 .ck.ck-table-form .ck.ck-labeled-field-view .ck-input.ck-error:not(:focus) + .ck.ck-labeled-field-view__status {
 			display: none;
@@ -4530,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;
@@ -4547,6 +4686,11 @@ of the component, floating–point numbers have been used which, for the default
 	outline-color: transparent;
 	transition: outline-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
 }
+@media (prefers-reduced-motion: reduce) {
+.ck .ck-widget {
+		transition: none;
+}
+	}
 .ck .ck-widget.ck-widget_selected,
 	.ck .ck-widget.ck-widget_selected:hover {
 		outline: var(--ck-widget-outline-thickness) solid var(--ck-color-focus-border);
@@ -4566,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;
@@ -4594,6 +4741,11 @@ of the component, floating–point numbers have been used which, for the default
 		left: calc(0px - var(--ck-widget-outline-thickness));
 		top: 0;
 	}
+@media (prefers-reduced-motion: reduce) {
+.ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
+			transition: none;
+	}
+		}
 .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon {
 			/* Make sure the dimensions of the icon are independent of the fon-size of the content. */
 			width: var(--ck-widget-handler-icon-size);
@@ -4608,6 +4760,11 @@ of the component, floating–point numbers have been used which, for the default
 				/* Note: The animation is longer on purpose. Simply feels better. */
 				transition: opacity 300ms var(--ck-widget-handler-animation-curve);
 			}
+@media (prefers-reduced-motion: reduce) {
+.ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator {
+					transition: none;
+			}
+				}
 /* Advertise using the look of the icon that once clicked the handler, the widget will be selected. */
 .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle:hover .ck-icon .ck-icon__selected-indicator {
 			opacity: 1;
@@ -4736,6 +4893,11 @@ of the component, floating–point numbers have been used which, for the default
 
 		pointer-events: none;
 	}
+@media (prefers-reduced-motion: reduce) {
+.ck .ck-widget .ck-widget__type-around__button {
+			transition: none;
+	}
+		}
 .ck .ck-widget .ck-widget__type-around__button svg {
 			width: 10px;
 			height: 8px;
@@ -4743,6 +4905,11 @@ of the component, floating–point numbers have been used which, for the default
 			transition: transform .5s ease;
 			margin-top: 1px;
 		}
+@media (prefers-reduced-motion: reduce) {
+.ck .ck-widget .ck-widget__type-around__button svg {
+				transition: none;
+		}
+			}
 .ck .ck-widget .ck-widget__type-around__button svg * {
 				stroke-dasharray: 10;
 				stroke-dashoffset: 0;
@@ -4772,6 +4939,18 @@ of the component, floating–point numbers have been used which, for the default
 .ck .ck-widget .ck-widget__type-around__button:hover svg line {
 					animation: ck-widget-type-around-arrow-tip-dash 2s linear;
 				}
+@media (prefers-reduced-motion: reduce) {
+.ck .ck-widget .ck-widget__type-around__button:hover {
+				animation: none;
+		}
+					.ck .ck-widget .ck-widget__type-around__button:hover svg polyline {
+						animation: none;
+					}
+
+					.ck .ck-widget .ck-widget__type-around__button:hover svg line {
+						animation: none;
+					}
+			}
 /*
 	 * Show type around buttons when the widget gets selected or being hovered.
 	 */