@ckeditor/ckeditor5-theme-lark 0.0.0-internal-20241017.0

package/theme/ckeditor5-table/tableproperties.css

@@ -0,0 +1,26 @@
+/*
+ * 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
+ */
+
+.ck.ck-table-properties-form {
+	width: 320px;
+
+	& .ck-form__row {
+		&.ck-table-properties-form__alignment-row {
+			align-self: flex-end;
+			padding: 0;
+
+			& .ck.ck-toolbar {
+				background: none;
+
+				/* Compensate for missing input label that would push the margin (toolbar has no inputs). */
+				margin-top: var(--ck-spacing-standard);
+
+				& .ck-toolbar__items > * {
+					width: 40px;
+				}
+			}
+		}
+	}
+}

package/theme/ckeditor5-table/tableselection.css

@@ -0,0 +1,47 @@
+/*
+ * 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
+ */
+
+:root {
+	--ck-table-selected-cell-background: hsla(208, 90%, 80%, .3);
+}
+
+.ck.ck-editor__editable .table table {
+	& td.ck-editor__editable_selected,
+	& th.ck-editor__editable_selected {
+		position: relative;
+		caret-color: transparent;
+		outline: unset;
+		box-shadow: unset;
+
+		/* https://github.com/ckeditor/ckeditor5/issues/6446 */
+		&:after {
+			content: '';
+			pointer-events: none;
+			background-color: var(--ck-table-selected-cell-background);
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+		}
+
+		& ::selection,
+		&:focus {
+			background-color: transparent;
+		}
+
+		/*
+		 * To reduce the amount of noise, all widgets in the table selection have no outline and no selection handle.
+		 * See https://github.com/ckeditor/ckeditor5/issues/9491.
+		 */
+		& .ck-widget {
+			outline: unset;
+
+			& > .ck-widget__selection-handle {
+				display: none;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,36 @@
+/*
+ * 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
+ */
+
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rounded.css";
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_shadow.css";
+
+.ck.ck-autocomplete {
+	& > .ck-search__results {
+		@mixin ck-rounded-corners;
+		@mixin ck-drop-shadow;
+
+		max-height: 200px;
+		overflow-y: auto;
+		background: var(--ck-color-base-background);
+		border: 1px solid var(--ck-color-dropdown-panel-border);
+		min-width: auto;
+
+		&.ck-search__results_n {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+
+			/* Prevent duplicated borders between the input and the results pane. */
+			margin-bottom: -1px;
+		}
+
+		&.ck-search__results_s {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+
+			/* Prevent duplicated borders between the input and the results pane. */
+			margin-top: -1px;
+		}
+	}
+}

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

@@ -0,0 +1,167 @@
+/*
+ * 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
+ */
+
+@import "../../../mixins/_focus.css";
+@import "../../../mixins/_shadow.css";
+@import "../../../mixins/_disabled.css";
+@import "../../../mixins/_rounded.css";
+@import "../../mixins/_button.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+.ck.ck-button,
+a.ck.ck-button {
+	@mixin ck-button-colors --ck-color-button-default;
+	@mixin ck-rounded-corners;
+
+	white-space: nowrap;
+	cursor: default;
+	vertical-align: middle;
+	padding: var(--ck-spacing-tiny);
+	text-align: center;
+
+	/* A very important piece of styling. Go to variable declaration to learn more. */
+	min-width: var(--ck-ui-component-min-height);
+	min-height: var(--ck-ui-component-min-height);
+
+	/* Normalize the height of the line. Removing this will break consistent height
+	among text and text-less buttons (with icons). */
+	line-height: 1;
+
+	/* Enable font size inheritance, which allows fluid UI scaling. */
+	font-size: inherit;
+
+	/* Avoid flickering when the foucs border shows up. */
+	border: 1px solid transparent;
+
+	/* Apply some smooth transition to the box-shadow and border. */
+	transition: box-shadow .2s ease-in-out, border .2s ease-in-out;
+
+	/* 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;
+		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+	}
+
+	/* Allow icon coloring using the text "color" property. */
+	& .ck-button__icon {
+		& use,
+		& use * {
+			color: inherit;
+		}
+	}
+
+	& .ck-button__label {
+		/* Enable font size inheritance, which allows fluid UI scaling. */
+		font-size: inherit;
+		font-weight: inherit;
+		color: inherit;
+		cursor: inherit;
+
+		/* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and
+		without labels (but with icons) have different sizes in Chrome */
+		vertical-align: middle;
+
+		@mixin ck-dir ltr {
+			text-align: left;
+		}
+
+		@mixin ck-dir rtl {
+			text-align: right;
+		}
+	}
+
+	& .ck-button__keystroke {
+		color: inherit;
+
+		@mixin ck-dir ltr {
+			margin-left: var(--ck-spacing-large);
+		}
+
+		@mixin ck-dir rtl {
+			margin-right: var(--ck-spacing-large);
+		}
+
+		opacity: .5;
+	}
+
+	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
+	&.ck-disabled {
+		&:active,
+		&:focus {
+			/* The disabled button should have a slightly less visible shadow when focused. */
+			@mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow);
+		}
+
+		& .ck-button__icon {
+			@mixin ck-disabled;
+		}
+
+		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
+		& .ck-button__label {
+			@mixin ck-disabled;
+		}
+
+		& .ck-button__keystroke {
+			opacity: .3;
+		}
+	}
+
+	&.ck-button_with-text {
+		padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
+
+		/* stylelint-disable-next-line no-descending-specificity */
+		& .ck-button__icon {
+			@mixin ck-dir ltr {
+				margin-right: var(--ck-spacing-medium);
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: var(--ck-spacing-medium);
+			}
+		}
+	}
+
+	&.ck-button_with-keystroke {
+		/* stylelint-disable-next-line no-descending-specificity */
+		& .ck-button__label {
+			flex-grow: 1;
+		}
+	}
+
+	/* A style of the button which is currently on, e.g. its feature is active. */
+	&.ck-on {
+		@mixin ck-button-colors --ck-color-button-on;
+
+		color: var(--ck-color-button-on-color);
+	}
+
+	&.ck-button-save {
+		color: var(--ck-color-button-save);
+	}
+
+	&.ck-button-cancel {
+		color: var(--ck-color-button-cancel);
+	}
+}
+
+/* A style of the button which handles the primary action. */
+.ck.ck-button-action,
+a.ck.ck-button-action {
+	@mixin ck-button-colors --ck-color-button-action;
+
+	color: var(--ck-color-button-action-text);
+}
+
+.ck.ck-button-bold,
+a.ck.ck-button-bold {
+	font-weight: bold;
+}

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

@@ -0,0 +1,42 @@
+/*
+ * 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
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+.ck.ck-button.ck-list-item-button {
+	padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard));
+
+	&,
+	&.ck-on {
+		background: var(--ck-color-list-background);
+		color: var(--ck-color-text);
+	}
+
+	&:has(.ck-list-item-button__check-holder) {
+		@mixin ck-dir ltr {
+			padding-left: var(--ck-spacing-small);
+		}
+
+		@mixin ck-dir rtl {
+			padding-right: var(--ck-spacing-small);
+		}
+	}
+
+	/*
+	 * `.ck-on` class and background styling is overridden for `ck-button` in many places.
+	 * This is a workaround to make sure that the background is not overridden and uses similar
+	 * selector specificity as the other overrides.
+	 */
+	&:hover:not(.ck-disabled),
+	&.ck-button.ck-on:hover,
+	&.ck-on:not(.ck-list-item-button_toggleable),
+	&.ck-on:hover {
+		background: var(--ck-color-list-button-hover-background);
+
+		&:not(.ck-disabled) {
+			color: var(--ck-color-text);
+		}
+	}
+}

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

@@ -0,0 +1,134 @@
+/*
+ * 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
+ */
+
+@import "../../../mixins/_rounded.css";
+@import "../../../mixins/_disabled.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+/* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature
+of the component, floating–point numbers have been used which, for the default font size
+(see: --ck-font-size-base), will generate simple integers. */
+:root {
+	/* 34px at 13px font-size */
+	--ck-switch-button-toggle-width: 2.6153846154em;
+	/* 14px at 13px font-size */
+	--ck-switch-button-toggle-inner-size: calc(1.0769230769em + 1px);
+	--ck-switch-button-translation: calc(
+		var(--ck-switch-button-toggle-width) -
+		var(--ck-switch-button-toggle-inner-size) -
+		2px /* Border */
+	);
+	--ck-switch-button-inner-hover-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow);
+}
+
+.ck.ck-button.ck-switchbutton {
+	/* Unlike a regular button, the switch button text color and background should never change.
+	 * Changing toggle switch (background, outline) is enough to carry the information about the
+	 * state of the entire component (https://github.com/ckeditor/ckeditor5/issues/12519)
+	 */
+	&, &:hover, &:focus, &:active, &.ck-on:hover, &.ck-on:focus, &.ck-on:active {
+		color: inherit;
+		background: transparent;
+	}
+
+	& .ck-button__label {
+		@mixin ck-dir ltr {
+			/* Separate the label from the switch */
+			margin-right: calc(2 * var(--ck-spacing-large));
+		}
+
+		@mixin ck-dir rtl {
+			/* Separate the label from the switch */
+			margin-left: calc(2 * var(--ck-spacing-large));
+		}
+	}
+
+	& .ck-button__toggle {
+		@mixin ck-rounded-corners;
+
+		@mixin ck-dir ltr {
+			/* Make sure the toggle is always to the right as far as possible. */
+			margin-left: auto;
+		}
+
+		@mixin ck-dir rtl {
+			/* Make sure the toggle is always to the left as far as possible. */
+			margin-right: auto;
+		}
+
+		/* Apply some smooth transition to the box-shadow and border. */
+		/* Gently animate the background color of the toggle switch */
+		transition: background 400ms ease, box-shadow .2s ease-in-out, outline .2s ease-in-out;
+		border: 1px solid transparent;
+		width: var(--ck-switch-button-toggle-width);
+		background: var(--ck-color-switch-button-off-background);
+
+		& .ck-button__toggle__inner {
+			@mixin ck-rounded-corners {
+				border-radius: calc(.5 * var(--ck-border-radius));
+			}
+
+			width: var(--ck-switch-button-toggle-inner-size);
+			height: var(--ck-switch-button-toggle-inner-size);
+			background: var(--ck-color-switch-button-inner-background);
+
+			/* Gently animate the inner part of the toggle switch */
+			transition: all 300ms ease;
+
+			@media (prefers-reduced-motion: reduce) {
+				transition: none;
+			}
+		}
+
+		&:hover {
+			background: var(--ck-color-switch-button-off-hover-background);
+
+			& .ck-button__toggle__inner {
+				box-shadow: var(--ck-switch-button-inner-hover-shadow);
+			}
+		}
+	}
+
+	&.ck-disabled .ck-button__toggle {
+		@mixin ck-disabled;
+	}
+
+	/* Overriding default .ck-button:focus styles + an outline around the toogle */
+	&:focus {
+		border-color: transparent;
+		outline: none;
+		box-shadow: none;
+
+		& .ck-button__toggle {
+			box-shadow: 0 0 0 1px var(--ck-color-base-background), 0 0 0 5px var(--ck-color-focus-outer-shadow);
+			outline-offset: 1px;
+			outline: var(--ck-focus-ring);
+		}
+	}
+
+	/* stylelint-disable-next-line no-descending-specificity */
+	&.ck-on {
+		& .ck-button__toggle {
+			background: var(--ck-color-switch-button-on-background);
+
+			&:hover {
+				background: var(--ck-color-switch-button-on-hover-background);
+			}
+
+			& .ck-button__toggle__inner {
+				/*
+				* Move the toggle switch to the right. It will be animated.
+				*/
+				@mixin ck-dir ltr {
+					transform: translateX( var( --ck-switch-button-translation ) );
+				}
+
+				@mixin ck-dir rtl {
+					transform: translateX( calc( -1 * var( --ck-switch-button-translation ) ) );
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,42 @@
+/*
+ * 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
+ */
+
+:root {
+	--ck-collapsible-arrow-size: calc(0.5 * var(--ck-icon-size));
+}
+
+.ck.ck-collapsible {
+	& > .ck.ck-button {
+		width: 100%;
+		font-weight: bold;
+		border-radius: 0;
+		color: inherit;
+
+		&:focus {
+			background: transparent;
+		}
+
+		&:active, &:not(:focus), &:hover:not(:focus) {
+			background: transparent;
+			border-color: transparent;
+			box-shadow: none;
+		}
+
+		& > .ck-icon {
+			margin-right: var(--ck-spacing-medium);
+			width: var(--ck-collapsible-arrow-size);
+		}
+	}
+
+	& > .ck-collapsible__children {
+		padding: var(--ck-spacing-medium) var(--ck-spacing-large) var(--ck-spacing-large);
+	}
+
+	&.ck-collapsible_collapsed {
+		& > .ck.ck-button .ck-icon {
+			transform: rotate(-90deg);
+		}
+	}
+}

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

@@ -0,0 +1,94 @@
+/*
+ * 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
+ */
+
+@import "../../../mixins/_rounded.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_mediacolors.css";
+
+:root {
+	--ck-color-grid-tile-size: 24px;
+
+	/* Not using global colors here because these may change but some colors in a pallette
+	 * require special treatment. For instance, this ensures no matter what the UI text color is,
+	 * the check icon will look good on the black color tile. */
+	--ck-color-color-grid-check-icon: hsl(212, 81%, 46%);
+}
+
+.ck.ck-color-grid {
+	grid-gap: 5px;
+	padding: 8px;
+}
+
+.ck.ck-color-grid__tile {
+	transition: .2s ease box-shadow;
+
+	@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.ck-icon {
+		display: none;
+		color: var(--ck-color-color-grid-check-icon);
+	}
+
+	&.ck-on {
+		& .ck.ck-icon {
+			display: block;
+		}
+	}
+}
+
+.ck.ck-color-grid__label {
+	padding: 0 var(--ck-spacing-standard);
+}

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

@@ -0,0 +1,70 @@
+/*
+ * 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
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+.ck.ck-color-selector {
+	/* View fragment with color grids. */
+	& .ck-color-grids-fragment {
+		& .ck-button.ck-color-selector__remove-color,
+		& .ck-button.ck-color-selector__color-picker {
+			width: 100%;
+		}
+
+		& .ck-button.ck-color-selector__color-picker {
+			padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard);
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+
+			&:not(:focus) {
+				border-top: 1px solid var(--ck-color-base-border);
+			}
+
+			& .ck.ck-icon {
+				@mixin ck-dir ltr {
+					margin-right: var(--ck-spacing-standard);
+				}
+
+				@mixin ck-dir rtl {
+					margin-left: var(--ck-spacing-standard);
+				}
+			}
+		}
+
+		& label.ck.ck-color-grid__label {
+			font-weight: unset;
+		}
+	}
+
+	/* View fragment with a color picker. */
+	& .ck-color-picker-fragment {
+		& .ck.ck-color-picker {
+			padding: 8px;
+
+			& .hex-color-picker {
+				height: 100px;
+				min-width: 180px;
+
+				&::part(saturation) {
+					border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
+				}
+
+				&::part(hue) {
+					border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius);
+				}
+
+				&::part(saturation-pointer),
+				&::part(hue-pointer) {
+					width: 15px;
+					height: 15px;
+				}
+			}
+		}
+
+		& .ck.ck-color-selector_action-bar {
+			padding: 0 8px 8px;
+		}
+	}
+}