@ckeditor/ckeditor5-theme-lark 0.0.0-nightly-20260129.0 → 0.0.0-nightly-next-20260129.0

package/theme/ckeditor5-ui/globals/_rounded.css

@@ -1,11 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-/**
- * Default border-radius value.
- */
-:root{
-	--ck-border-radius: 2px;
-}

package/theme/ckeditor5-ui/globals/_shadow.css

@@ -1,21 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-:root {
-	/**
-	 * A visual style of element's inner shadow (i.e. input).
-	 */
-	--ck-inner-shadow: 2px 2px 3px var(--ck-color-shadow-inner) inset;
-
-	/**
-	 * A visual style of element's drop shadow (i.e. panel).
-	 */
-	--ck-drop-shadow: 0 1px 2px 1px var(--ck-color-shadow-drop);
-
-	/**
-	 * A visual style of element's active shadow (i.e. comment or suggestion).
-	 */
-	--ck-drop-shadow-active: 0 3px 6px 1px var(--ck-color-shadow-drop-active);
-}

package/theme/ckeditor5-ui/globals/_spacing.css

@@ -1,16 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-:root {
-	--ck-spacing-unit: 						0.6em;
-	--ck-spacing-extra-large:				calc(var(--ck-spacing-unit) * 2);
-	--ck-spacing-large: 					calc(var(--ck-spacing-unit) * 1.5);
-	--ck-spacing-standard: 					var(--ck-spacing-unit);
-	--ck-spacing-medium: 					calc(var(--ck-spacing-unit) * 0.8);
-	--ck-spacing-medium-small:				calc(var(--ck-spacing-unit) * 0.667);
-	--ck-spacing-small: 					calc(var(--ck-spacing-unit) * 0.5);
-	--ck-spacing-tiny: 						calc(var(--ck-spacing-unit) * 0.3);
-	--ck-spacing-extra-tiny: 				calc(var(--ck-spacing-unit) * 0.16);
-}

package/theme/ckeditor5-ui/globals/globals.css

@@ -1,13 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-@import "./_colors.css";
-@import "./_disabled.css";
-@import "./_focus.css";
-@import "./_fonts.css";
-@import "./_reset.css";
-@import "./_rounded.css";
-@import "./_shadow.css";
-@import "./_spacing.css";

package/theme/ckeditor5-ui/mixins/_button.css

@@ -1,29 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-/**
- * Implements a button of given background color.
- *
- * @param {String} $background - Background color of the button.
- * @param {String} $border - Border color of the button.
- */
-@define-mixin ck-button-colors $prefix {
-	background: var($(prefix)-background);
-
-	&:not(.ck-disabled) {
-		&:hover {
-			background: var($(prefix)-hover-background);
-		}
-
-		&:active {
-			background: var($(prefix)-active-background);
-		}
-	}
-
-	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
-	&.ck-disabled {
-		background: var($(prefix)-disabled-background);
-	}
-}

package/theme/ckeditor5-widget/widget.css

@@ -1,208 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-@import "../mixins/_focus.css";
-@import "../mixins/_shadow.css";
-@import "@ckeditor/ckeditor5-ui/theme/mixins/_mediacolors.css";
-
-:root {
-	--ck-widget-outline-thickness: 3px;
-	--ck-widget-handler-icon-size: 16px;
-	--ck-widget-handler-animation-duration: 200ms;
-	--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 .ck-widget {
-	outline-width: var(--ck-widget-outline-thickness);
-	outline-style: solid;
-	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);
-	}
-
-	&:hover {
-		outline-color: var(--ck-color-widget-hover-border);
-	}
-}
-
-.ck .ck-editor__nested-editable {
-	border: 1px solid transparent;
-
-	/* The :focus style is applied before .ck-editor__nested-editable_focused class is rendered in the view.
-	These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied. */
-	&.ck-editor__nested-editable_focused,
-	&:focus {
-		@mixin ck-box-shadow var(--ck-inner-shadow);
-		@mixin ck-media-default-colors {
-			background-color: var(--ck-color-widget-editable-focus-background);
-		}
-
-		/**
-		 * Focus border should not be applied to table cells because it overrides the default table cell border color.
-		 * In other words - in some scenarios, the part of the table cell border has focus color style, which is not expected behavior
-		 * because it should be the same as the table cell border color.
-		 */
-		&:not(td, th) {
-			@mixin ck-focus-ring;
-		}
-	}
-}
-
-.ck .ck-widget.ck-widget_with-selection-handle {
-	& .ck-widget__selection-handle {
-		padding: 4px;
-		box-sizing: border-box;
-
-		/* Background and opacity will be animated as the handler shows up or the widget gets selected. */
-		background-color: transparent;
-		opacity: 0;
-
-		/* Transition:
-		   * background-color for the .ck-widget_selected state change,
-		   * visibility for hiding the handler,
-		   * opacity for the proper look of the icon when the handler disappears. */
-		transition:
-			background-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve),
-			visibility var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve),
-			opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
-
-		/* Make only top corners round. */
-		border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
-
-		/* Place the drag handler outside the widget wrapper. */
-		transform: translateY(-100%);
-		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);
-			height: var(--ck-widget-handler-icon-size);
-			color: var(--ck-color-widget-drag-handler-icon-color);
-
-			/* The "selected" part of the icon is invisible by default */
-			& .ck-icon__selected-indicator {
-				opacity: 0;
-
-				/* 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;
-				}
-			}
-		}
-
-		/* Advertise using the look of the icon that once clicked the handler, the widget will be selected. */
-		&:hover .ck-icon .ck-icon__selected-indicator {
-			opacity: 1;
-		}
-	}
-
-	/* Show the selection handler on mouse hover over the widget, but not for nested widgets. */
-	&:hover > .ck-widget__selection-handle {
-		opacity: 1;
-		background-color: var(--ck-color-widget-hover-border);
-	}
-
-	/* Show the selection handler when the widget is selected, but not for nested widgets. */
-	&.ck-widget_selected,
-	&.ck-widget_selected:hover {
-		& > .ck-widget__selection-handle {
-			opacity: 1;
-			background-color: var(--ck-color-focus-border);
-
-			/* When the widget is selected, notify the user using the proper look of the icon. */
-			& .ck-icon .ck-icon__selected-indicator {
-				opacity: 1;
-			}
-		}
-	}
-}
-
-/* In a RTL environment, align the selection handler to the right side of the widget */
-/* stylelint-disable-next-line no-descending-specificity */
-.ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
-	left: auto;
-	right: calc(0px - var(--ck-widget-outline-thickness));
-}
-
-/* https://github.com/ckeditor/ckeditor5/issues/6415 */
-.ck.ck-editor__editable.ck-read-only .ck-widget {
-	/* Prevent the :hover outline from showing up because of the used outline-color transition. */
-	transition: none;
-
-	&:not(.ck-widget_selected) {
-		/* Disable visual effects of hover/active widget when CKEditor is in readOnly mode.
-		 * See: https://github.com/ckeditor/ckeditor5/issues/1261
-		 *
-		 * Leave the unit because this custom property is used in calc() by other features.
-		 * See: https://github.com/ckeditor/ckeditor5/issues/6775
-		 */
-		--ck-widget-outline-thickness: 0px;
-	}
-
-	&.ck-widget_with-selection-handle {
-		& .ck-widget__selection-handle,
-		& .ck-widget__selection-handle:hover {
-			background: var(--ck-color-widget-blurred-border);
-		}
-	}
-}
-
-/*
-* Hide the outline of all widget parents when the widget is being hovered.
-*/
-.ck .ck-widget:has( .ck-widget.table:hover ) {
-	outline-color: transparent;
-}
-
-/* Hide the selection handle on mouse hover over the widget of all the widget parents. */
-.ck .ck-widget.ck-widget_with-selection-handle:has( .ck-widget.table:hover ) > .ck-widget__selection-handle {
-	opacity: 0;
-	visibility: hidden;
-}
-
-/* Style the widget when it's selected but the editable it belongs to lost focus. */
-/* stylelint-disable-next-line no-descending-specificity */
-.ck.ck-editor__editable.ck-blurred .ck-widget {
-	&.ck-widget_selected,
-	&.ck-widget_selected:hover {
-		outline-color: var(--ck-color-widget-blurred-border);
-
-		&.ck-widget_with-selection-handle {
-			& > .ck-widget__selection-handle,
-			& > .ck-widget__selection-handle:hover {
-				background: var(--ck-color-widget-blurred-border);
-			}
-		}
-	}
-}
-
-.ck.ck-editor__editable:not(.ck-pagination-view) > .ck-widget.ck-widget_with-selection-handle:first-child,
-.ck.ck-editor__editable:not(.ck-pagination-view) blockquote > .ck-widget.ck-widget_with-selection-handle:first-child {
-	/* Do not crop selection handler if a widget is a first-child in the blockquote or in the root editable.
-	In fact, anything with overflow: hidden.
-	https://github.com/ckeditor/ckeditor5-block-quote/issues/28
-	https://github.com/ckeditor/ckeditor5-widget/issues/44
-	https://github.com/ckeditor/ckeditor5-widget/issues/66 */
-	margin-top: calc(1em + var(--ck-widget-handler-icon-size));
-}

package/theme/ckeditor5-widget/widgetresize.css

@@ -1,44 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-:root {
-	--ck-resizer-size: 10px;
-
-	/* Set the resizer with a 50% offset. */
-	--ck-resizer-offset: calc( ( var(--ck-resizer-size) / -2 ) - 2px);
-	--ck-resizer-border-width: 1px;
-}
-
-.ck .ck-widget__resizer {
-	outline: 1px solid var(--ck-color-resizer);
-}
-
-.ck .ck-widget__resizer__handle {
-	width: var(--ck-resizer-size);
-	height: var(--ck-resizer-size);
-	background: var(--ck-color-focus-border);
-	border: var(--ck-resizer-border-width) solid hsl(0, 0%, 100%);
-	border-radius: var(--ck-resizer-border-radius);
-
-	&.ck-widget__resizer__handle-top-left {
-		top: var(--ck-resizer-offset);
-		left: var(--ck-resizer-offset);
-	}
-
-	&.ck-widget__resizer__handle-top-right {
-		top: var(--ck-resizer-offset);
-		right: var(--ck-resizer-offset);
-	}
-
-	&.ck-widget__resizer__handle-bottom-right {
-		bottom: var(--ck-resizer-offset);
-		right: var(--ck-resizer-offset);
-	}
-
-	&.ck-widget__resizer__handle-bottom-left {
-		bottom: var(--ck-resizer-offset);
-		left: var(--ck-resizer-offset);
-	}
-}

package/theme/ckeditor5-widget/widgettypearound.css

@@ -1,318 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-:root {
-	--ck-widget-type-around-button-size: 20px;
-	--ck-color-widget-type-around-button-active: var(--ck-color-focus-border);
-	--ck-color-widget-type-around-button-hover: var(--ck-color-widget-hover-border);
-	--ck-color-widget-type-around-button-blurred-editable: var(--ck-color-widget-blurred-border);
-	--ck-color-widget-type-around-button-radar-start-alpha: 0;
-	--ck-color-widget-type-around-button-radar-end-alpha: .3;
-	--ck-color-widget-type-around-button-icon: var(--ck-color-base-background);
-}
-
-@define-mixin ck-widget-type-around-button-visible {
-	opacity: 1;
-	pointer-events: auto;
-}
-
-@define-mixin ck-widget-type-around-button-hidden {
-	opacity: 0;
-	pointer-events: none;
-}
-
-.ck .ck-widget {
-	/*
-	 * Styles of the type around buttons
-	 */
-	& .ck-widget__type-around__button {
-		width: var(--ck-widget-type-around-button-size);
-		height: var(--ck-widget-type-around-button-size);
-		background: var(--ck-color-widget-type-around-button);
-		border-radius: 100px;
-		transition: opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
-
-		@mixin ck-widget-type-around-button-hidden;
-
-		@media (prefers-reduced-motion: reduce) {
-			transition: none;
-		}
-
-		& svg {
-			width: 10px;
-			height: 8px;
-			transform: translate(-50%,-50%);
-			transition: transform .5s ease;
-			margin-top: 1px;
-
-			@media (prefers-reduced-motion: reduce) {
-				transition: none;
-			}
-
-			& * {
-				stroke-dasharray: 10;
-				stroke-dashoffset: 0;
-
-				fill: none;
-				stroke: var(--ck-color-widget-type-around-button-icon);
-				stroke-width: 1.5px;
-				stroke-linecap: round;
-				stroke-linejoin: round;
-			}
-
-			& line {
-				stroke-dasharray: 7;
-			}
-		}
-
-		&:hover {
-			/*
-			 * Display the "sonar" around the button when hovered.
-			 */
-			animation: ck-widget-type-around-button-sonar 1s ease infinite;
-
-			/*
-			 * Animate active button's icon.
-			 */
-			& svg {
-				& polyline {
-					animation: ck-widget-type-around-arrow-dash 2s linear;
-				}
-
-				& line {
-					animation: ck-widget-type-around-arrow-tip-dash 2s linear;
-				}
-			}
-
-			@media (prefers-reduced-motion: reduce) {
-				animation: none;
-
-				& svg {
-					& polyline {
-						animation: none;
-					}
-
-					& line {
-						animation: none;
-					}
-				}
-			}
-		}
-	}
-
-	/*
-	 * Show type around buttons when the widget is being hovered.
-	 */
-	&:hover {
-		& > .ck-widget__type-around > .ck-widget__type-around__button {
-			@mixin ck-widget-type-around-button-visible;
-		}
-	}
-
-	/*
-	 * Styles for the buttons when the widget is NOT selected (but the buttons are visible
-	 * and still can be hovered).
-	 */
-	&:not(.ck-widget_selected) > .ck-widget__type-around > .ck-widget__type-around__button {
-		background: var(--ck-color-widget-type-around-button-hover);
-	}
-
-	/*
-	 * Styles for the buttons when:
-	 * - the widget is selected,
-	 * - or the button is being hovered (regardless of the widget state).
-	 */
-	&.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button,
-	& > .ck-widget__type-around > .ck-widget__type-around__button:hover {
-		background: var(--ck-color-widget-type-around-button-active);
-
-		&::after {
-			width: calc(var(--ck-widget-type-around-button-size) - 2px);
-			height: calc(var(--ck-widget-type-around-button-size) - 2px);
-			border-radius: 100px;
-			background: linear-gradient(135deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,.3) 100%);
-		}
-	}
-
-	&.ck-widget_selected {
-		/*
-		* Styles of the widget when the "fake caret" is blinking (e.g. upon keyboard navigation).
-		* Despite the widget being physically selected in the model, its outline should disappear.
-		*/
-		&.ck-widget_type-around_show-fake-caret_before,
-		&.ck-widget_type-around_show-fake-caret_after {
-			outline-color: transparent;
-		}
-
-		/*
-		* Show type around buttons when the widget gets selected.
-		*/
-		& > .ck-widget__type-around > .ck-widget__type-around__button {
-			@mixin ck-widget-type-around-button-visible;
-		}
-	}
-
-	/*
-	 * Styles for the "before" button when the widget has a selection handle. Because some space
-	 * is consumed by the handle, the button must be moved slightly to the right to let it breathe.
-	 */
-	&.ck-widget_with-selection-handle > .ck-widget__type-around > .ck-widget__type-around__button_before {
-		margin-left: 20px;
-	}
-
-	/*
-	 * Styles for the horizontal "fake caret" which is displayed when the user navigates using the keyboard.
-	 */
-	& .ck-widget__type-around__fake-caret {
-		pointer-events: none;
-		height: 1px;
-		animation: ck-widget-type-around-fake-caret-pulse linear 1s infinite normal forwards;
-
-		/*
-		 * The semi-transparent-outline+background combo improves the contrast
-		 * when the background underneath the fake caret is dark.
-		 */
-		outline: solid 1px hsla(0, 0%, 100%, .5);
-		background: var(--ck-color-base-text);
-	}
-
-	&.ck-widget_type-around_show-fake-caret_before,
-	&.ck-widget_type-around_show-fake-caret_after {
-		/*
-		 * When the "fake caret" is visible we simulate that the widget is not selected
-		 * (despite being physically selected), so the outline color should be for the
-		 * unselected widget.
-		 */
-		&.ck-widget_selected:hover {
-			outline-color: var(--ck-color-widget-hover-border);
-		}
-
-		/*
-		 * Styles of the type around buttons when the "fake caret" is blinking (e.g. upon keyboard navigation).
-		 * In this state, the type around buttons would collide with the fake carets so they should disappear.
-		 */
-		& > .ck-widget__type-around > .ck-widget__type-around__button {
-			@mixin ck-widget-type-around-button-hidden;
-		}
-
-		/*
-		 * Fake horizontal caret integration with the selection handle. When the caret is visible, simply
-		 * hide the handle because it intersects with the caret (and does not make much sense anyway).
-		 */
-		&.ck-widget_with-selection-handle {
-			&.ck-widget_selected,
-			&.ck-widget_selected:hover {
-				& > .ck-widget__selection-handle {
-					opacity: 0
-				}
-			}
-		}
-
-		/*
-		 * Fake horizontal caret integration with the resize UI. When the caret is visible, simply
-		 * hide the resize UI because it creates too much noise. It can be visible when the user
-		 * hovers the widget, though.
-		 */
-		&.ck-widget_selected.ck-widget_with-resizer > .ck-widget__resizer {
-			opacity: 0
-		}
-	}
-}
-
-/*
- * Styles for the "before" button when the widget has a selection handle in an RTL environment.
- * The selection handler is aligned to the right side of the widget so there is no need to create
- * additional space for it next to the "before" button.
- */
-.ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__type-around > .ck-widget__type-around__button_before {
-	margin-left: 0;
-	margin-right: 20px;
-}
-
-/*
- * Hide type around buttons when the widget is selected as a child of a selected
- * nested editable (e.g. mulit-cell table selection).
- *
- * See https://github.com/ckeditor/ckeditor5/issues/7263.
- */
-.ck-editor__nested-editable.ck-editor__editable_selected {
-	/* stylelint-disable-next-line no-descending-specificity */
-	& .ck-widget {
-		&.ck-widget_selected,
-		&:hover {
-			& > .ck-widget__type-around > .ck-widget__type-around__button {
-				@mixin ck-widget-type-around-button-hidden;
-			}
-		}
-	}
-}
-
-/*
- * Hide type around buttons of all widget parents when the widget is being hovered.
- */
-.ck .ck-widget:has( .ck-widget.table:hover ) {
-	& > .ck-widget__type-around > .ck-widget__type-around__button {
-		@mixin ck-widget-type-around-button-hidden;
-	}
-}
-
-/*
- * Styles for the buttons when the widget is selected but the user clicked outside of the editor (blurred the editor).
- */
-.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button:not(:hover) {
-	background: var(--ck-color-widget-type-around-button-blurred-editable);
-
-	& svg * {
-		stroke: hsl(0,0%,60%);
-	}
-}
-
-@keyframes ck-widget-type-around-arrow-dash {
-	0% {
-		stroke-dashoffset: 10;
-	}
-	20%, 100% {
-		stroke-dashoffset: 0;
-	}
-}
-
-@keyframes ck-widget-type-around-arrow-tip-dash {
-	0%, 20% {
-		stroke-dashoffset: 7;
-	}
-	40%, 100% {
-		stroke-dashoffset: 0;
-	}
-}
-
-@keyframes ck-widget-type-around-button-sonar {
-	0% {
-		box-shadow: 0 0 0 0 hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha));
-	}
-	50% {
-		box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-end-alpha));
-	}
-	100% {
-		box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha));
-	}
-}
-
-@keyframes ck-widget-type-around-fake-caret-pulse {
-	0% {
-		opacity: 1;
-	}
-	49% {
-		opacity: 1;
-	}
-	50% {
-		opacity: 0;
-	}
-	99% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
-}