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

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

@@ -0,0 +1,69 @@
+/*
+ * 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 "../../../mixins/_shadow.css";
+@import "../../../mixins/_focus.css";
+@import "../../mixins/_button.css";
+
+:root {
+	--ck-color-editable-blur-selection: hsl(0, 0%, 85%);
+}
+
+.ck.ck-editor__editable:not(.ck-editor__nested-editable) {
+	@mixin ck-rounded-corners;
+
+	&.ck-focused {
+		@mixin ck-focus-ring;
+		@mixin ck-box-shadow var(--ck-inner-shadow);
+	}
+}
+
+.ck.ck-editor__editable_inline {
+	overflow: auto;
+	padding: 0 var(--ck-spacing-standard);
+	border: 1px solid transparent;
+
+	&[dir="ltr"] {
+		text-align: left;
+	}
+
+	&[dir="rtl"] {
+		text-align: right;
+	}
+
+	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/116 */
+	& > *:first-child {
+		margin-top: var(--ck-spacing-large);
+	}
+
+	/* https://github.com/ckeditor/ckeditor5/issues/847 */
+	& > *:last-child {
+		/*
+		 * This value should match with the default margins of the block elements (like .media or .image)
+		 * to avoid a content jumping when the fake selection container shows up (See https://github.com/ckeditor/ckeditor5/issues/9825).
+		 */
+		margin-bottom: var(--ck-spacing-large);
+	}
+
+	/* https://github.com/ckeditor/ckeditor5/issues/6517 */
+	&.ck-blurred ::selection {
+		background: var(--ck-color-editable-blur-selection);
+	}
+}
+
+/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */
+.ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_n"] {
+	&::after {
+		border-bottom-color: var(--ck-color-panel-background);
+	}
+}
+
+.ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_s"] {
+	&::after {
+		border-top-color: var(--ck-color-panel-background);
+	}
+}

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

@@ -0,0 +1,32 @@
+/*
+ * 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";
+
+:root {
+	--ck-form-header-height: 44px;
+}
+
+.ck.ck-form__header {
+	padding: var(--ck-spacing-small) var(--ck-spacing-large);
+	height: var(--ck-form-header-height);
+	line-height: var(--ck-form-header-height);
+	border-bottom: 1px solid var(--ck-color-base-border);
+
+	& > .ck-icon {
+		@mixin ck-dir ltr {
+			margin-right: var(--ck-spacing-medium);
+		}
+
+		@mixin ck-dir rtl {
+			margin-left: var(--ck-spacing-medium);
+		}
+	}
+
+	& .ck-form__header__label {
+		--ck-font-size-base: 15px;
+		font-weight: bold;
+	}
+}

package/theme/ckeditor5-ui/components/icon/icon.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-icon-size: calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
+	--ck-icon-font-size: .8333350694em;
+}
+
+.ck.ck-icon {
+	width: var(--ck-icon-size);
+	height: var(--ck-icon-size);
+
+	/* Multiplied by the height of the line in "px" should give SVG "viewport" dimensions */
+	font-size: var(--ck-icon-font-size);
+
+	/* Inherit cursor style (#5). */
+	cursor: inherit;
+
+	/* This will prevent blurry icons on Firefox. See #340. */
+	will-change: transform;
+
+	& * {
+		/* Inherit cursor style (#5). */
+		cursor: inherit;
+	}
+
+	/* Allows dynamic coloring of an icon by inheriting its color from the parent. */
+	&.ck-icon_inherit-color {
+		color: inherit;
+
+		& * {
+			color: inherit;
+
+			&:not([fill]) {
+				/* Needed by FF. */
+				fill: currentColor;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,81 @@
+/*
+ * 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/_focus.css";
+@import "../../../mixins/_shadow.css";
+
+:root {
+	--ck-input-width: 18em;
+
+	/* Backward compatibility. */
+	--ck-input-text-width: var(--ck-input-width);
+}
+
+.ck.ck-input {
+	@mixin ck-rounded-corners;
+
+	background: var(--ck-color-input-background);
+	border: 1px solid var(--ck-color-input-border);
+	padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
+	min-width: var(--ck-input-width);
+
+	/* This is important to stay of the same height as surrounding buttons */
+	min-height: var(--ck-ui-component-min-height);
+
+	/* 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);
+	}
+
+	&[readonly] {
+		border: 1px solid var(--ck-color-input-disabled-border);
+		background: var(--ck-color-input-disabled-background);
+		color: var(--ck-color-input-disabled-text);
+
+		&:focus {
+			/* The read-only input should have a slightly less visible shadow when focused. */
+			@mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow);
+		}
+	}
+
+	&.ck-error {
+		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);
+		}
+	}
+}
+
+@keyframes ck-input-shake {
+	20% {
+		transform: translateX(-2px);
+	}
+
+	40% {
+		transform: translateX(2px);
+	}
+
+	60% {
+		transform: translateX(-1px);
+	}
+
+	80% {
+		transform: translateX(1px);
+	}
+}

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

@@ -0,0 +1,8 @@
+/*
+ * 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-label {
+	font-weight: bold;
+}

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

@@ -0,0 +1,127 @@
+/*
+ * 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";
+@import "../../../mixins/_rounded.css";
+
+:root {
+	--ck-labeled-field-view-transition: .1s cubic-bezier(0, 0, 0.24, 0.95);
+	--ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-spacing-medium);
+	--ck-labeled-field-label-default-position-x: var(--ck-spacing-medium);
+	--ck-labeled-field-label-default-position-y: calc(0.6 * var(--ck-font-size-base));
+	--ck-color-labeled-field-label-background: var(--ck-color-base-background);
+}
+
+.ck.ck-labeled-field-view {
+	@mixin ck-rounded-corners;
+
+	& > .ck.ck-labeled-field-view__input-wrapper {
+		width: 100%;
+
+		& > .ck.ck-label {
+			top: 0px;
+
+			@mixin ck-dir ltr {
+				left: 0px;
+				transform-origin: 0 0;
+				/* By default, display the label scaled down above the field. */
+				transform: translate(var(--ck-spacing-medium), -6px) scale(.75);
+			}
+
+			@mixin ck-dir rtl {
+				right: 0px;
+				transform-origin: 100% 0;
+				transform: translate(calc(-1 * var(--ck-spacing-medium)), -6px) scale(.75);
+			}
+
+			pointer-events: none;
+
+			background: var(--ck-color-labeled-field-label-background);
+			padding: 0 calc(.5 * var(--ck-font-size-tiny));
+			line-height: initial;
+			font-weight: normal;
+
+			/* Prevent overflow when the label is longer than the input */
+			text-overflow: ellipsis;
+			overflow: hidden;
+
+			max-width: 100%;
+
+			transition:
+				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;
+			}
+		}
+	}
+
+	&.ck-error {
+		& > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
+			color: var(--ck-color-base-error);
+		}
+
+		& .ck-input:not([readonly]) + .ck.ck-label {
+			color: var(--ck-color-base-error);
+		}
+	}
+
+	& .ck-labeled-field-view__status {
+		font-size: var(--ck-font-size-small);
+		margin-top: var(--ck-spacing-small);
+
+		/* Let the info wrap to the next line to avoid stretching the layout horizontally.
+		The status could be very long. */
+		white-space: normal;
+
+		&.ck-labeled-field-view__status_error {
+			color: var(--ck-color-base-error);
+		}
+	}
+
+	/* Disabled fields and fields that have no focus should fade out. */
+	&.ck-disabled > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,
+	&.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
+		color: var(--ck-color-input-disabled-text);
+	}
+
+	/* Fields that are disabled or not focused and without a placeholder should have full-sized labels. */
+	/* stylelint-disable-next-line no-descending-specificity */
+	&.ck-disabled.ck-labeled-field-view_empty:not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,
+	&.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder):not(.ck-error) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
+		@mixin ck-dir ltr {
+			transform: translate(var(--ck-labeled-field-label-default-position-x), var(--ck-labeled-field-label-default-position-y)) scale(1);
+		}
+
+		@mixin ck-dir rtl {
+			transform: translate(calc(-1 * var(--ck-labeled-field-label-default-position-x)), var(--ck-labeled-field-label-default-position-y)) scale(1);
+		}
+
+		/* Compensate for the default translate position. */
+		max-width: calc(var(--ck-labeled-field-empty-unfocused-max-width));
+
+		background: transparent;
+		padding: 0;
+	}
+
+	/*------ DropdownView integration ----------------------------------------------------------------------------------- */
+
+	/* Make sure dropdown' background color in any of dropdown's state does not collide with labeled field. */
+	& > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck.ck-button {
+		background: transparent;
+	}
+
+	/* When the dropdown is "empty", the labeled field label replaces its label. */
+	&.ck-labeled-field-view_empty > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck-button > .ck-button__label {
+		opacity: 0;
+	}
+
+	/* Make sure the label of the empty, unfocused input does not cover the dropdown arrow. */
+	&.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown + .ck-label {
+		max-width: calc(var(--ck-labeled-field-empty-unfocused-max-width) - var(--ck-dropdown-arrow-size) - var(--ck-spacing-standard));
+	}
+}

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

@@ -0,0 +1,17 @@
+/*
+ * 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-labeled-input .ck-labeled-input__status {
+	font-size: var(--ck-font-size-small);
+	margin-top: var(--ck-spacing-small);
+
+	/* Let the info wrap to the next line to avoid stretching the layout horizontally.
+	The status could be very long. */
+	white-space: normal;
+}
+
+.ck.ck-labeled-input .ck-labeled-input__status_error {
+	color: var(--ck-color-base-error);
+}

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

@@ -0,0 +1,114 @@
+/*
+ * 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/_disabled.css";
+@import "../../../mixins/_rounded.css";
+@import "../../../mixins/_shadow.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+.ck.ck-list {
+	@mixin ck-rounded-corners;
+
+	list-style-type: none;
+	background: var(--ck-color-list-background);
+
+	/* A spacing at the beginning and end of the list */
+	padding: var(--ck-spacing-small) 0;
+}
+
+.ck.ck-list__item {
+	cursor: default;
+
+	/* Almost as wide as menu bar items. */
+	min-width: 15em;
+
+	& > .ck-button:not(.ck-list-item-button) {
+		padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard));
+		min-height: unset;
+		width: 100%;
+		border-radius: 0;
+
+		@mixin ck-dir ltr {
+			text-align: left;
+		}
+
+		@mixin ck-dir rtl {
+			text-align: right;
+		}
+
+		& .ck-button__label {
+			/* https://github.com/ckeditor/ckeditor5-heading/issues/63 */
+			line-height: calc(var(--ck-line-height-base) * var(--ck-font-size-base));
+		}
+
+		&:active {
+			box-shadow: none;
+		}
+
+		&.ck-on {
+			background: var(--ck-color-list-button-on-background);
+			color: var(--ck-color-list-button-on-text);
+
+			&:active {
+				box-shadow: none;
+			}
+
+			&:hover:not(.ck-disabled) {
+				background: var(--ck-color-list-button-on-background-focus);
+			}
+
+			&:focus:not(.ck-disabled) {
+				border-color: var(--ck-color-base-background);
+			}
+		}
+
+		&:hover:not(.ck-disabled) {
+			background: var(--ck-color-list-button-hover-background);
+		}
+	}
+
+	/* It's unnecessary to change the background/text of a switch toggle; it has different ways
+	of conveying its state (like the switcher) */
+	& > .ck-button.ck-switchbutton {
+		&.ck-on {
+			background: var(--ck-color-list-background);
+			color: inherit;
+
+			&:hover:not(.ck-disabled) {
+				background: var(--ck-color-list-button-hover-background);
+				color: inherit;
+			}
+		}
+	}
+}
+
+.ck-list .ck-list__group {
+	padding-top: var(--ck-spacing-medium);
+
+	/* Lists come with an inner vertical padding. Don't duplicate it. */
+	&:first-child {
+		padding-top: 0;
+	}
+
+	/* The group should have a border when it's not the first item. */
+	*:not(.ck-hidden) ~ & {
+		border-top: 1px solid var(--ck-color-base-border);
+	}
+
+	& > .ck-label {
+		font-size: 11px;
+		font-weight: bold;
+		padding: var(--ck-spacing-medium) var(--ck-spacing-large) 0;
+	}
+}
+
+.ck.ck-list__separator {
+	height: 1px;
+	width: 100%;
+	background: var(--ck-color-base-border);
+
+	/* Give the separator some air */
+	margin: var(--ck-spacing-small) 0;
+}

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

@@ -0,0 +1,15 @@
+/*
+ * 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-menu-bar {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	background: var(--ck-color-base-background);
+	padding: var(--ck-spacing-small);
+	gap: var(--ck-spacing-small);
+	border: 1px solid var(--ck-color-toolbar-border);
+	width: 100%;
+}

package/theme/ckeditor5-ui/components/menubar/menubarmenu.css

@@ -0,0 +1,13 @@
+/*
+ * 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-menu-bar__menu {
+	/* Enable font size inheritance, which allows fluid UI scaling. */
+	font-size: inherit;
+
+	&.ck-menu-bar__menu_top-level {
+		max-width: 100%;
+	}
+}

package/theme/ckeditor5-ui/components/menubar/menubarmenubutton.css

@@ -0,0 +1,98 @@
+/*
+ * 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/_disabled.css";
+@import "../../mixins/_button.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+.ck.ck-menu-bar__menu {
+	/*
+	 * All menu buttons.
+	 */
+	& > .ck-menu-bar__menu__button {
+		width: 100%;
+
+		& > .ck-button__label {
+			flex-grow: 1;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		&.ck-disabled > .ck-button__label {
+			@mixin ck-disabled;
+		}
+
+		@mixin ck-dir ltr {
+			&:not(.ck-button_with-text) {
+				padding-left: var(--ck-spacing-small);
+			}
+		}
+
+		@mixin ck-dir rtl {
+			&:not(.ck-button_with-text) {
+				padding-right: var(--ck-spacing-small);
+			}
+		}
+	}
+
+	/*
+	 * Top-level menu buttons only.
+	 */
+	&.ck-menu-bar__menu_top-level > .ck-menu-bar__menu__button {
+		padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+		min-height: unset;
+
+		& .ck-button__label {
+			width: unset;
+			line-height: unset;
+		}
+
+		&.ck-on {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+
+		& .ck-icon {
+			display: none;
+		}
+	}
+
+	/*
+	 * Sub-menu buttons.
+	 */
+	&:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button {
+		border-radius: 0;
+
+		& > .ck-menu-bar__menu__button__arrow {
+			width: var(--ck-dropdown-arrow-size);
+
+			@mixin ck-dir ltr {
+				transform: rotate(-90deg);
+
+				/* A space to accommodate the triangle. */
+				margin-left: var(--ck-spacing-standard);
+
+				/* Nudge the arrow gently to the right because its center of gravity is to the left */
+				margin-right: calc(-1 * var(--ck-spacing-small));
+			}
+
+			@mixin ck-dir rtl {
+				transform: rotate(90deg);
+
+				left: var(--ck-spacing-standard);
+
+				/* A space to accommodate the triangle. */
+				margin-right: var(--ck-spacing-small);
+
+				/* Nudge the arrow gently to the left because its center of gravity is to the right (after rotation). */
+				margin-left: calc(-1 * var(--ck-spacing-small));
+			}
+		}
+
+		&.ck-disabled > .ck-menu-bar__menu__button__arrow {
+			@mixin ck-disabled;
+		}
+	}
+}

package/theme/ckeditor5-ui/components/menubar/menubarmenulistitem.css

@@ -0,0 +1,12 @@
+/*
+ * 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-menu-bar-menu-item-min-width: 18em;
+}
+
+.ck.ck-menu-bar__menu .ck.ck-menu-bar__menu__item {
+	min-width: var(--ck-menu-bar-menu-item-min-width);
+}

package/theme/ckeditor5-ui/components/menubar/menubarmenulistitembutton.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-ui/theme/mixins/_dir.css";
+
+.ck.ck-menu-bar__menu {
+	/*
+	 * List item buttons.
+	 */
+	& .ck-button.ck-menu-bar__menu__item__button {
+		border-radius: 0;
+
+		& > .ck-spinner-container,
+		& > .ck-spinner-container .ck-spinner {
+			/* These styles correspond to .ck-icon so that the spinner seamlessly replaces the icon. */
+			--ck-toolbar-spinner-size: 20px;
+		}
+
+		& > .ck-spinner-container {
+			/* This ensures margins corresponding to the .ck-icon. */
+			font-size: var(--ck-icon-font-size);
+
+			@mixin ck-dir ltr {
+				margin-right: var(--ck-spacing-medium);
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: var(--ck-spacing-medium);
+			}
+		}
+	}
+}
+
+