@ckeditor/ckeditor5-theme-lark 41.3.1 → 41.4.0

package/dist/index.js

@@ -0,0 +1,6 @@
+/**
+ * @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
+ */
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;AAAA;AACA,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG","file":"index.js.map","sourcesContent":["\n//# sourceMappingURL=index.js.map\n"]}

package/package.json

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

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/responsive-form/responsiveform.css

@@ -37,7 +37,8 @@
 		& .ck-labeled-field-view {
 			margin: var(--ck-spacing-large) var(--ck-spacing-large) 0;
 
-			& .ck-input-text {
+			& .ck-input-text,
+			& .ck-input-number {
 				min-width: 0;
 				width: 100%;
 			}

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-ui/globals/_reset.css

@@ -17,6 +17,11 @@
 .ck.ck-reset,
 .ck.ck-reset_all,
 .ck-reset_all *:not(.ck-reset_all-excluded *) {
+	box-sizing: border-box;
+	width: auto;
+	height: auto;
+	position: static;
+
 	/* Do not include inheritable rules here. */
 	margin: 0;
 	padding: 0;

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;
+					}
+				}
+			}
 		}
 	}
 

package/theme/index.css

@@ -0,0 +1,92 @@
+/*
+ * 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
+ */
+
+/* Reset */
+@import "./ckeditor5-ui/globals/globals.css";
+
+/* Components */
+@import "./ckeditor5-ui/components/autocomplete/autocomplete.css";
+@import "./ckeditor5-ui/components/button/button.css";
+@import "./ckeditor5-ui/components/button/switchbutton.css";
+@import "./ckeditor5-ui/components/collapsible/collapsible.css";
+@import "./ckeditor5-ui/components/colorgrid/colorgrid.css";
+@import "./ckeditor5-ui/components/colorselector/colorselector.css";
+@import "./ckeditor5-ui/components/dialog/dialog.css";
+@import "./ckeditor5-ui/components/dialog/dialogactions.css";
+@import "./ckeditor5-ui/components/dropdown/dropdown.css";
+@import "./ckeditor5-ui/components/dropdown/listdropdown.css";
+@import "./ckeditor5-ui/components/dropdown/splitbutton.css";
+@import "./ckeditor5-ui/components/dropdown/toolbardropdown.css";
+@import "./ckeditor5-ui/components/editorui/accessibilityhelp.css";
+@import "./ckeditor5-ui/components/editorui/editorui.css";
+@import "./ckeditor5-ui/components/formheader/formheader.css";
+@import "./ckeditor5-ui/components/icon/icon.css";
+@import "./ckeditor5-ui/components/input/input.css";
+@import "./ckeditor5-ui/components/label/label.css";
+@import "./ckeditor5-ui/components/labeledfield/labeledfieldview.css";
+@import "./ckeditor5-ui/components/labeledinput/labeledinput.css";
+@import "./ckeditor5-ui/components/list/list.css";
+@import "./ckeditor5-ui/components/menubar/menubar.css";
+@import "./ckeditor5-ui/components/menubar/menubarmenu.css";
+@import "./ckeditor5-ui/components/menubar/menubarmenubutton.css";
+@import "./ckeditor5-ui/components/menubar/menubarmenulistitem.css";
+@import "./ckeditor5-ui/components/menubar/menubarmenulistitembutton.css";
+@import "./ckeditor5-ui/components/menubar/menubarmenupanel.css";
+@import "./ckeditor5-ui/components/panel/balloonpanel.css";
+@import "./ckeditor5-ui/components/panel/balloonrotator.css";
+@import "./ckeditor5-ui/components/panel/fakepanel.css";
+@import "./ckeditor5-ui/components/panel/stickypanel.css";
+@import "./ckeditor5-ui/components/responsive-form/responsiveform.css";
+@import "./ckeditor5-ui/components/search/search.css";
+@import "./ckeditor5-ui/components/spinner/spinner.css";
+@import "./ckeditor5-ui/components/textarea/textarea.css";
+@import "./ckeditor5-ui/components/toolbar/blocktoolbar.css";
+@import "./ckeditor5-ui/components/toolbar/toolbar.css";
+@import "./ckeditor5-ui/components/tooltip/tooltip.css";
+
+/* Editor */
+@import "./ckeditor5-editor-classic/classiceditor.css";
+
+/* Plugins */
+@import "./ckeditor5-clipboard/clipboard.css";
+@import "./ckeditor5-code-block/codeblock.css";
+@import "./ckeditor5-engine/placeholder.css";
+@import "./ckeditor5-find-and-replace/findandreplaceform.css";
+@import "./ckeditor5-heading/heading.css";
+@import "./ckeditor5-horizontal-line/horizontalline.css";
+@import "./ckeditor5-html-embed/htmlembed.css";
+@import "./ckeditor5-image/imageinsert.css";
+@import "./ckeditor5-image/imageupload.css";
+@import "./ckeditor5-image/imageuploadicon.css";
+@import "./ckeditor5-image/imageuploadloader.css";
+@import "./ckeditor5-image/imageuploadprogress.css";
+@import "./ckeditor5-link/link.css";
+@import "./ckeditor5-link/linkactions.css";
+@import "./ckeditor5-link/linkform.css";
+@import "./ckeditor5-link/linkimage.css";
+@import "./ckeditor5-list/listproperties.css";
+@import "./ckeditor5-list/liststyles.css";
+@import "./ckeditor5-media-embed/mediaembedediting.css";
+@import "./ckeditor5-mention/mention.css";
+@import "./ckeditor5-restricted-editing/restrictedediting.css";
+@import "./ckeditor5-special-characters/charactergrid.css";
+@import "./ckeditor5-special-characters/characterinfo.css";
+@import "./ckeditor5-special-characters/specialcharacters.css";
+@import "./ckeditor5-style/style.css";
+@import "./ckeditor5-style/stylegrid.css";
+@import "./ckeditor5-style/stylegroup.css";
+@import "./ckeditor5-style/stylepanel.css";
+@import "./ckeditor5-table/colorinput.css";
+@import "./ckeditor5-table/form.css";
+@import "./ckeditor5-table/formrow.css";
+@import "./ckeditor5-table/inserttable.css";
+@import "./ckeditor5-table/tablecellproperties.css";
+@import "./ckeditor5-table/tableediting.css";
+@import "./ckeditor5-table/tableform.css";
+@import "./ckeditor5-table/tableproperties.css";
+@import "./ckeditor5-table/tableselection.css";
+@import "./ckeditor5-widget/widget.css";
+@import "./ckeditor5-widget/widgetresize.css";
+@import "./ckeditor5-widget/widgettypearound.css";