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

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);
 		}
@@ -788,6 +799,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-color-grid__tile {
+		transition: none;
+}
+	}
 .ck.ck-color-grid__tile.ck-disabled {
 		cursor: unset;
 		transition: unset;
@@ -1534,6 +1550,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 +1574,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 +1673,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 +2539,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);
@@ -3368,6 +3404,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 +3501,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 +3931,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 +4019,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 +4385,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 +4503,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;
@@ -4547,6 +4621,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);
@@ -4594,6 +4673,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 +4692,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 +4825,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 +4837,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 +4871,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.
 	 */