@ckeditor/ckeditor5-theme-lark 41.4.0-alpha.0 → 41.4.1

package/package.json

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

package/theme/ckeditor5-engine/placeholder.css

@@ -3,10 +3,37 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_mediacolors.css";
+
 /* See ckeditor/ckeditor5#936. */
 .ck.ck-placeholder, .ck .ck-placeholder {
+	@mixin ck-media-forced-colors {
+		/*
+		 * 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;
+	}
+
 	&::before {
 		cursor: text;
-		color: var(--ck-color-engine-placeholder-text);
+
+		@mixin ck-media-default-colors {
+			color: var(--ck-color-engine-placeholder-text);
+		}
+
+		@mixin ck-media-forced-colors {
+			/*
+			 * 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;
+		}
 	}
 }

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

@@ -4,6 +4,7 @@
  */
 
 @import "../../../mixins/_rounded.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_mediacolors.css";
 
 :root {
 	--ck-color-grid-tile-size: 24px;
@@ -20,47 +21,72 @@
 }
 
 .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;
+
+	@mixin ck-media-default-colors {
+		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-on,
+		&:focus:not( .ck-disabled ),
+		&:hover:not( .ck-disabled ) {
+			/* Disable the default .ck-button's border ring. */
+			border: 0;
+		}
+
+		&.ck-color-selector__color-tile_bordered {
+			box-shadow: 0 0 0 1px var(--ck-color-base-border);
+		}
+
+		&.ck-on {
+			box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text);
+		}
+
+		&:focus:not( .ck-disabled ),
+		&: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.
+	 */
+	@mixin ck-media-forced-colors {
+		width: unset;
+		height: unset;
+		min-width: unset;
+		min-height: unset;
+		padding: 0 var(--ck-spacing-small);
+
+		& .ck-button__label {
+			display: inline-block;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+	}
 
 	&.ck-disabled {
 		cursor: unset;
 		transition: unset;
 	}
 
-	&.ck-color-selector__color-tile_bordered {
-		box-shadow: 0 0 0 1px var(--ck-color-base-border);
-	}
-
 	& .ck.ck-icon {
 		display: none;
 		color: var(--ck-color-color-grid-check-icon);
 	}
 
 	&.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-icon {
 			display: block;
 		}
 	}
-
-	&.ck-on,
-	&:focus:not( .ck-disabled ),
-	&:hover:not( .ck-disabled ) {
-		/* Disable the default .ck-button's border ring. */
-		border: 0;
-	}
-
-	&:focus:not( .ck-disabled ),
-	&: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 {

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

@@ -5,6 +5,7 @@
 
 @import "../mixins/_focus.css";
 @import "../mixins/_shadow.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_mediacolors.css";
 
 :root {
 	--ck-widget-outline-thickness: 3px;
@@ -24,6 +25,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);
@@ -43,8 +48,9 @@
 	&:focus {
 		@mixin ck-focus-ring;
 		@mixin ck-box-shadow var(--ck-inner-shadow);
-
-		background-color: var(--ck-color-widget-editable-focus-background);
+		@mixin ck-media-default-colors {
+			background-color: var(--ck-color-widget-editable-focus-background);
+		}
 	}
 }
 
@@ -74,6 +80,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 +96,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;
+					}
+				}
+			}
 		}
 	}