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

package/theme/ckeditor5-ui/components/menubar/menubarmenupanel.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 "../../../mixins/_rounded.css";
+@import "../../../mixins/_shadow.css";
+@import "../../../mixins/_focus.css";
+
+:root {
+	--ck-menu-bar-menu-panel-max-width: 75vw;
+}
+
+.ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel {
+	@mixin ck-rounded-corners;
+	@mixin ck-drop-shadow;
+
+	background: var(--ck-color-dropdown-panel-background);
+	border: 1px solid var(--ck-color-dropdown-panel-border);
+	bottom: 0;
+	height: fit-content;
+	max-width: var(--ck-menu-bar-menu-panel-max-width);
+
+	/* Corner border radius consistent with the button. */
+	&.ck-menu-bar__menu__panel_position_es,
+	&.ck-menu-bar__menu__panel_position_se {
+		border-top-left-radius: 0;
+	}
+
+	&.ck-menu-bar__menu__panel_position_ws,
+	&.ck-menu-bar__menu__panel_position_sw {
+		border-top-right-radius: 0;
+	}
+
+	&.ck-menu-bar__menu__panel_position_en,
+	&.ck-menu-bar__menu__panel_position_ne {
+		border-bottom-left-radius: 0;
+	}
+
+	&.ck-menu-bar__menu__panel_position_wn,
+	&.ck-menu-bar__menu__panel_position_nw {
+		border-bottom-right-radius: 0;
+	}
+
+	&:focus {
+		outline: none;
+	}
+}
+
+.ck.ck-menu-bar {
+	& .ck-list-item-button {
+		&:focus,
+		&:active {
+			border-color: transparent;
+			box-shadow: none;
+		}
+	}
+
+	&.ck-menu-bar_focus-border-enabled .ck-list-item-button {
+		&:focus,
+		&:active {
+			/* Fix truncated shadows due to rendering order. */
+			position: relative;
+			z-index: 2;
+
+			@mixin ck-focus-ring;
+			@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+		}
+	}
+}

package/theme/ckeditor5-ui/components/panel/balloonpanel.css

@@ -0,0 +1,207 @@
+/*
+ * 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/_shadow.css";
+
+:root {
+	--ck-balloon-border-width: 1px;
+	--ck-balloon-arrow-offset: 2px;
+	--ck-balloon-arrow-height: 10px;
+	--ck-balloon-arrow-half-width: 8px;
+	--ck-balloon-arrow-drop-shadow: 0 2px 2px var(--ck-color-shadow-drop);
+}
+
+.ck.ck-balloon-panel {
+	@mixin ck-rounded-corners;
+	@mixin ck-drop-shadow;
+
+	min-height: 15px;
+
+	background: var(--ck-color-panel-background);
+	border: var(--ck-balloon-border-width) solid var(--ck-color-panel-border);
+
+	&.ck-balloon-panel_with-arrow {
+		&::before,
+		&::after {
+			width: 0;
+			height: 0;
+			border-style: solid;
+		}
+	}
+
+	&[class*="arrow_n"] {
+		&::before,
+		&::after {
+			border-width: 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width);
+		}
+
+		&::before {
+			border-color: transparent transparent var(--ck-color-panel-border) transparent;
+			margin-top: calc( -1 * var(--ck-balloon-border-width) );
+		}
+
+		&::after {
+			border-color: transparent transparent var(--ck-color-panel-background) transparent;
+			margin-top: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
+		}
+	}
+
+	&[class*="arrow_s"] {
+		&::before,
+		&::after {
+			border-width: var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width);
+		}
+
+		&::before {
+			border-color: var(--ck-color-panel-border) transparent transparent;
+			filter: drop-shadow(var(--ck-balloon-arrow-drop-shadow));
+			margin-bottom: calc( -1 * var(--ck-balloon-border-width) );
+		}
+
+		&::after {
+			border-color: var(--ck-color-panel-background) transparent transparent transparent;
+			margin-bottom: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
+		}
+	}
+
+	&[class*="arrow_e"] {
+		&::before,
+		&::after {
+			border-width: var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height);
+		}
+
+		&::before {
+			border-color: transparent transparent transparent var(--ck-color-panel-border);
+			margin-right: calc( -1 * var(--ck-balloon-border-width) );
+		}
+
+		&::after {
+			border-color: transparent transparent transparent var(--ck-color-panel-background);
+			margin-right: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
+		}
+	}
+
+	&[class*="arrow_w"] {
+		&::before,
+		&::after {
+			border-width: var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0;
+		}
+
+		&::before {
+			border-color: transparent var(--ck-color-panel-border) transparent transparent;
+			margin-left: calc( -1 * var(--ck-balloon-border-width) );
+		}
+
+		&::after {
+			border-color: transparent var(--ck-color-panel-background) transparent transparent;
+			margin-left: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
+		}
+	}
+
+	&.ck-balloon-panel_arrow_n {
+		&::before,
+		&::after {
+			left: 50%;
+			margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
+			top: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_nw {
+		&::before,
+		&::after {
+			left: calc(2 * var(--ck-balloon-arrow-half-width));
+			top: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_ne {
+		&::before,
+		&::after {
+			right: calc(2 * var(--ck-balloon-arrow-half-width));
+			top: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_s {
+		&::before,
+		&::after {
+			left: 50%;
+			margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
+			bottom: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_sw {
+		&::before,
+		&::after {
+			left: calc(2 * var(--ck-balloon-arrow-half-width));
+			bottom: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_se {
+		&::before,
+		&::after {
+			right: calc(2 * var(--ck-balloon-arrow-half-width));
+			bottom: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_sme {
+		&::before,
+		&::after {
+			right: 25%;
+			margin-right: calc(2 * var(--ck-balloon-arrow-half-width));
+			bottom: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_smw {
+		&::before,
+		&::after {
+			left: 25%;
+			margin-left: calc(2 * var(--ck-balloon-arrow-half-width));
+			bottom: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_nme {
+		&::before,
+		&::after {
+			right: 25%;
+			margin-right: calc(2 * var(--ck-balloon-arrow-half-width));
+			top: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_nmw {
+		&::before,
+		&::after {
+			left: 25%;
+			margin-left: calc(2 * var(--ck-balloon-arrow-half-width));
+			top: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_e {
+		&::before,
+		&::after {
+			right: calc(-1 * var(--ck-balloon-arrow-height));
+			margin-top: calc(-1 * var(--ck-balloon-arrow-half-width));
+			top: 50%;
+		}
+	}
+
+	&.ck-balloon-panel_arrow_w {
+		&::before,
+		&::after {
+			left: calc(-1 * var(--ck-balloon-arrow-height));
+			margin-top: calc(-1 * var(--ck-balloon-arrow-half-width));
+			top: 50%;
+		}
+	}
+}

package/theme/ckeditor5-ui/components/panel/balloonrotator.css

@@ -0,0 +1,33 @@
+/*
+ * 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-balloon-rotator__navigation {
+	background: var(--ck-color-toolbar-background);
+	border-bottom: 1px solid var(--ck-color-toolbar-border);
+	padding: 0 var(--ck-spacing-small);
+
+	/* Let's keep similar appearance to `ck-toolbar`. */
+	& > * {
+		margin-right: var(--ck-spacing-small);
+		margin-top: var(--ck-spacing-small);
+		margin-bottom: var(--ck-spacing-small);
+	}
+
+	/* Gives counter more breath than buttons. */
+	& .ck-balloon-rotator__counter {
+		margin-right: var(--ck-spacing-standard);
+
+		/* We need to use smaller margin because of previous button's right margin. */
+		margin-left: var(--ck-spacing-small);
+	}
+}
+
+.ck .ck-balloon-rotator__content {
+
+	/* Disable default annotation shadow inside rotator with fake panels. */
+	& .ck.ck-annotation-wrapper {
+		box-shadow: none;
+	}
+}

package/theme/ckeditor5-ui/components/panel/fakepanel.css

@@ -0,0 +1,46 @@
+/*
+ * 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/_shadow.css";
+
+:root {
+	--ck-balloon-fake-panel-offset-horizontal: 6px;
+	--ck-balloon-fake-panel-offset-vertical: 6px;
+}
+
+/* Let's use `.ck-balloon-panel` appearance. See: balloonpanel.css. */
+.ck .ck-fake-panel div {
+	@mixin ck-drop-shadow;
+
+	min-height: 15px;
+
+	background: var(--ck-color-panel-background);
+	border: 1px solid var(--ck-color-panel-border);
+	border-radius: var(--ck-border-radius);
+
+	width: 100%;
+	height: 100%;
+}
+
+.ck .ck-fake-panel div:nth-child( 1 ) {
+	margin-left: var(--ck-balloon-fake-panel-offset-horizontal);
+	margin-top: var(--ck-balloon-fake-panel-offset-vertical);
+}
+
+.ck .ck-fake-panel div:nth-child( 2 ) {
+	margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 2);
+	margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 2);
+}
+.ck .ck-fake-panel div:nth-child( 3 ) {
+	margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 3);
+	margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 3);
+}
+
+/* If balloon is positioned above element, we need to move fake panel to the top. */
+.ck .ck-balloon-panel_arrow_s + .ck-fake-panel,
+.ck .ck-balloon-panel_arrow_se + .ck-fake-panel,
+.ck .ck-balloon-panel_arrow_sw + .ck-fake-panel {
+	--ck-balloon-fake-panel-offset-vertical: -6px;
+}

package/theme/ckeditor5-ui/components/panel/stickypanel.css

@@ -0,0 +1,16 @@
+/*
+ * 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/_shadow.css";
+
+.ck.ck-sticky-panel {
+	& .ck-sticky-panel__content_sticky {
+		@mixin ck-drop-shadow;
+
+		border-width: 0 1px 1px;
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+}

package/theme/ckeditor5-ui/components/responsive-form/responsiveform.css

@@ -0,0 +1,82 @@
+/*
+ * 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/_rwd.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+.ck-vertical-form > .ck-button:nth-last-child(2)::after {
+	border-right: 1px solid var(--ck-color-base-border);
+}
+
+.ck.ck-responsive-form {
+	padding: var(--ck-spacing-large);
+
+	&:focus {
+		/* See: https://github.com/ckeditor/ckeditor5/issues/4773 */
+		outline: none;
+	}
+
+	@mixin ck-dir ltr {
+		& > :not(:first-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& > :not(:last-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-media-phone {
+		padding: 0;
+		width: calc(.8 * var(--ck-input-width));
+
+		& .ck-labeled-field-view {
+			margin: var(--ck-spacing-large) var(--ck-spacing-large) 0;
+
+			& .ck-input-text,
+			& .ck-input-number {
+				min-width: 0;
+				width: 100%;
+			}
+
+			/* Let the long error messages wrap in the narrow form. */
+			& .ck-labeled-field-view__error {
+				white-space: normal;
+			}
+		}
+
+		/* Styles for two last buttons in the form (save&cancel, edit&unlink, etc.). */
+		& > .ck-button:nth-last-child(2) {
+			&::after {
+				border-right: 1px solid var(--ck-color-base-border);
+			}
+		}
+
+		& > .ck-button:nth-last-child(1),
+		& > .ck-button:nth-last-child(2) {
+			padding: var(--ck-spacing-standard);
+			margin-top: var(--ck-spacing-large);
+			border-radius: 0;
+
+			&:not(:focus) {
+				border-top: 1px solid var(--ck-color-base-border);
+			}
+
+			@mixin ck-dir ltr {
+				margin-left: 0;
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: 0;
+
+				&:last-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,106 @@
+/*
+ * 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-search-field-view-horizontal-spacing: calc(var(--ck-icon-size) + var(--ck-spacing-medium));
+}
+
+.ck.ck-search {
+	& > .ck-labeled-field-view {
+		& .ck-input {
+			width: 100%;
+		}
+
+		&.ck-search__query_with-icon {
+			--ck-labeled-field-label-default-position-x: var(--ck-search-field-view-horizontal-spacing);
+
+			& > .ck-labeled-field-view__input-wrapper > .ck-icon {
+				opacity: .5;
+				pointer-events: none;
+			}
+
+			& .ck-input {
+				width: 100%;
+
+				@mixin ck-dir ltr {
+					padding-left: var(--ck-search-field-view-horizontal-spacing);
+				}
+
+				@mixin ck-dir rtl {
+					&:not(.ck-input-text_empty) {
+						padding-left: var(--ck-search-field-view-horizontal-spacing);
+					}
+				}
+			}
+		}
+
+		&.ck-search__query_with-reset {
+			--ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-search-field-view-horizontal-spacing);
+
+			&.ck-labeled-field-view_empty {
+				--ck-labeled-field-empty-unfocused-max-width: 100% - var(--ck-search-field-view-horizontal-spacing) - var(--ck-spacing-medium);
+			}
+
+			& .ck-search__reset {
+				min-width: auto;
+				min-height: auto;
+
+				background: none;
+				opacity: .5;
+				padding: 0;
+
+				@mixin ck-dir ltr {
+					right: var(--ck-spacing-medium);
+				}
+
+				@mixin ck-dir rtl {
+					left: var(--ck-spacing-medium);
+				}
+
+				&:hover {
+					opacity: 1;
+				}
+			}
+
+			& .ck-input {
+				width: 100%;
+
+				@mixin ck-dir ltr {
+					&:not(.ck-input-text_empty) {
+						padding-right: var(--ck-search-field-view-horizontal-spacing);
+					}
+				}
+
+				@mixin ck-dir rtl {
+					padding-right: var(--ck-search-field-view-horizontal-spacing);
+				}
+			}
+		}
+	}
+
+	& > .ck-search__results {
+		min-width: 100%;
+
+		& > .ck-search__info {
+			width: 100%;
+			padding: var(--ck-spacing-medium) var(--ck-spacing-large);
+
+			& * {
+				white-space: normal;
+			}
+
+			& > span:first-child {
+				font-weight: bold;
+			}
+
+			& > span:last-child {
+				margin-top: var(--ck-spacing-medium);
+			}
+		}
+	}
+}
+

package/theme/ckeditor5-ui/components/spinner/spinner.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
+ */
+
+:root {
+	--ck-toolbar-spinner-size: 18px;
+}
+
+.ck.ck-spinner-container {
+	width: var(--ck-toolbar-spinner-size);
+	height: var(--ck-toolbar-spinner-size);
+	animation: 1.5s infinite ck-spinner-rotate linear;
+
+	@media (prefers-reduced-motion: reduce) {
+		animation-duration: 3s;
+	}
+}
+
+.ck.ck-spinner {
+	width: var(--ck-toolbar-spinner-size);
+	height: var(--ck-toolbar-spinner-size);
+	border-radius: 50%;
+	border: 2px solid var(--ck-color-text);
+	border-top-color: transparent;
+}
+
+@keyframes ck-spinner-rotate {
+	to {
+		transform: rotate(360deg)
+	}
+}

package/theme/ckeditor5-ui/components/textarea/textarea.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
+ */
+
+/*
+ * This fixes a problem in Firefox when the initial height of the complement does not match the number of rows.
+ * This bug is especially visible when rows=1.
+ */
+.ck-textarea {
+	overflow-x: hidden
+}

package/theme/ckeditor5-ui/components/toolbar/blocktoolbar.css

@@ -0,0 +1,14 @@
+/*
+ * 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-color-block-toolbar-button: var(--ck-color-text);
+	--ck-block-toolbar-button-size: var(--ck-font-size-normal);
+}
+
+.ck.ck-block-toolbar-button {
+	color: var(--ck-color-block-toolbar-button);
+	font-size: var(--ck-block-toolbar-size);
+}