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

package/package.json

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

package/theme/ckeditor5-image/imageuploadicon.css

@@ -57,6 +57,17 @@
 		/* #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) {
+		animation-duration: 0ms;
+
+		&::after {
+			animation: none;
+			opacity: 1;
+			width: 0.3em;
+			height: 0.45em;
+		}
+	}
 }
 
 @keyframes ck-upload-complete-icon-show {

package/theme/ckeditor5-image/imageuploadprogress.css

@@ -9,6 +9,11 @@
 		/* Showing animation. */
 		&.ck-appear {
 			animation: fadeIn 700ms;
+
+			@media (prefers-reduced-motion: reduce) {
+				opacity: 1;
+				animation: none;
+			}
 		}
 	}
 

package/theme/ckeditor5-restricted-editing/restrictedediting.css

@@ -25,6 +25,10 @@
 		var(--ck-color-restricted-editing-exception-brackets) 100%
 	) 1;
 
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+	}
+
 	&.restricted-editing-exception_selected {
 		background-color: var(--ck-color-restricted-editing-selected-exception-background);
 		border-image: linear-gradient(

package/theme/ckeditor5-special-characters/charactergrid.css

@@ -40,6 +40,10 @@
 		transition: .2s ease box-shadow;
 		border: 0;
 
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+
 		&:focus:not( .ck-disabled ),
 		&:hover:not( .ck-disabled ) {
 			/* Disable the default .ck-button's border ring. */

package/theme/ckeditor5-table/inserttable.css

@@ -30,6 +30,10 @@
 	outline: none;
 	transition: none;
 
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+	}
+
 	&:focus {
 		box-shadow: none;
 	}

package/theme/ckeditor5-table/tableform.css

@@ -66,6 +66,10 @@
 			}
 
 			animation: ck-table-form-labeled-view-status-appear .15s ease both;
+
+			@media (prefers-reduced-motion: reduce) {
+				animation: none;
+			}
 		}
 
 		/* Hide the error balloon when the field is blurred. Makes the experience much more clear. */

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

@@ -41,6 +41,10 @@ a.ck.ck-button {
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/189 */
 	-webkit-appearance: none;
 
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+	}
+
 	&:active,
 	&:focus {
 		@mixin ck-focus-ring;

package/theme/ckeditor5-ui/components/button/switchbutton.css

@@ -76,6 +76,10 @@ 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) {
+				transition: none;
+			}
 		}
 
 		&:hover {

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

@@ -28,6 +28,10 @@
 	transition: .2s ease box-shadow;
 	border: 0;
 
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+	}
+
 	&.ck-disabled {
 		cursor: unset;
 		transition: unset;

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

@@ -28,6 +28,10 @@
 	/* 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) {
+		transition: none;
+	}
+
 	&:focus {
 		@mixin ck-focus-ring;
 		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
@@ -48,6 +52,10 @@
 		border-color: var(--ck-color-input-error-border);
 		animation: ck-input-shake .3s ease both;
 
+		@media (prefers-reduced-motion: reduce) {
+			animation: none;
+		}
+
 		&:focus {
 			@mixin ck-box-shadow var(--ck-focus-error-outer-shadow);
 		}

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

@@ -53,6 +53,10 @@
 				transform var(--ck-labeled-field-view-transition),
 				padding var(--ck-labeled-field-view-transition),
 				background var(--ck-labeled-field-view-transition);
+
+			@media (prefers-reduced-motion: reduce) {
+				transition: none;
+			}
 		}
 	}
 

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

@@ -11,6 +11,10 @@
 	width: var(--ck-toolbar-spinner-size);
 	height: var(--ck-toolbar-spinner-size);
 	animation: 1.5s infinite rotate linear;
+
+	@media (prefers-reduced-motion: reduce) {
+		animation-duration: 3s;
+	}
 }
 
 .ck.ck-spinner {
@@ -26,4 +30,3 @@
 		transform: rotate(360deg)
 	}
 }
-

package/theme/ckeditor5-widget/widget.css

@@ -24,6 +24,10 @@
 	outline-color: transparent;
 	transition: outline-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
 
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+	}
+
 	&.ck-widget_selected,
 	&.ck-widget_selected:hover {
 		outline: var(--ck-widget-outline-thickness) solid var(--ck-color-focus-border);
@@ -74,6 +78,10 @@
 		left: calc(0px - var(--ck-widget-outline-thickness));
 		top: 0;
 
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+
 		& .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);
@@ -86,6 +94,10 @@
 
 				/* Note: The animation is longer on purpose. Simply feels better. */
 				transition: opacity 300ms var(--ck-widget-handler-animation-curve);
+
+				@media (prefers-reduced-motion: reduce) {
+					transition: none;
+				}
 			}
 		}
 

package/theme/ckeditor5-widget/widgettypearound.css

@@ -36,6 +36,10 @@
 
 		@mixin ck-widget-type-around-button-hidden;
 
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+
 		& svg {
 			width: 10px;
 			height: 8px;
@@ -43,6 +47,10 @@
 			transition: transform .5s ease;
 			margin-top: 1px;
 
+			@media (prefers-reduced-motion: reduce) {
+				transition: none;
+			}
+
 			& * {
 				stroke-dasharray: 10;
 				stroke-dashoffset: 0;
@@ -77,6 +85,20 @@
 					animation: ck-widget-type-around-arrow-tip-dash 2s linear;
 				}
 			}
+
+			@media (prefers-reduced-motion: reduce) {
+				animation: none;
+
+				& svg {
+					& polyline {
+						animation: none;
+					}
+
+					& line {
+						animation: none;
+					}
+				}
+			}
 		}
 	}