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

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

@@ -0,0 +1,49 @@
+/*
+ * 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 "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+
+:root {
+	--ck-dialog-overlay-background-color: hsla( 0, 0%, 0%, .5 );
+	--ck-dialog-drop-shadow: 0px 0px 6px 2px hsl(0deg 0% 0% / 15%);
+	--ck-dialog-max-width: 100vw;
+	--ck-dialog-max-height: 90vh;
+	--ck-color-dialog-background: var(--ck-color-base-background);
+	--ck-color-dialog-form-header-border: var(--ck-color-base-border);
+}
+
+.ck.ck-dialog-overlay {
+	animation: ck-dialog-fade-in .3s;
+	background: var(--ck-dialog-overlay-background-color);
+	z-index: var(--ck-z-dialog);
+}
+
+.ck.ck-dialog {
+	@mixin ck-rounded-corners;
+	@mixin ck-drop-shadow;
+
+	--ck-drop-shadow: var(--ck-dialog-drop-shadow);
+
+	background: var(--ck-color-dialog-background);
+	max-height: var(--ck-dialog-max-height);
+	max-width: var(--ck-dialog-max-width);
+	border: 1px solid var(--ck-color-base-border);
+
+	& .ck.ck-form__header {
+		border-bottom: 1px solid var(--ck-color-dialog-form-header-border);
+	}
+}
+
+@keyframes ck-dialog-fade-in {
+	0% {
+		background: hsla( 0, 0%, 0%, 0 );
+	}
+
+	100% {
+		background: var(--ck-dialog-overlay-background-color);
+	}
+}

package/theme/ckeditor5-ui/components/dialog/dialogactions.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
+ */
+
+.ck.ck-dialog {
+	& .ck.ck-dialog__actions {
+		padding: var(--ck-spacing-large);
+
+		& > * + * {
+			margin-left: var(--ck-spacing-large);
+		}
+	}
+}

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

@@ -0,0 +1,126 @@
+/*
+ * 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 "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+:root {
+	--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
+}
+
+.ck.ck-dropdown {
+	/* Enable font size inheritance, which allows fluid UI scaling. */
+	font-size: inherit;
+
+	& .ck-dropdown__arrow {
+		width: var(--ck-dropdown-arrow-size);
+	}
+
+	@mixin ck-dir ltr {
+		& .ck-dropdown__arrow {
+			right: var(--ck-spacing-standard);
+
+			/* A space to accommodate the triangle. */
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& .ck-dropdown__arrow {
+			left: var(--ck-spacing-standard);
+
+			/* A space to accommodate the triangle. */
+			margin-right: var(--ck-spacing-small);
+		}
+	}
+
+	&.ck-disabled .ck-dropdown__arrow {
+		@mixin ck-disabled;
+	}
+
+	& .ck-button.ck-dropdown__button {
+		@mixin ck-dir ltr {
+			&:not(.ck-button_with-text) {
+				/* Make sure dropdowns with just an icon have the right inner spacing */
+				padding-left: var(--ck-spacing-small);
+			}
+		}
+
+		@mixin ck-dir rtl {
+			&:not(.ck-button_with-text) {
+				/* Make sure dropdowns with just an icon have the right inner spacing */
+				padding-right: var(--ck-spacing-small);
+			}
+		}
+
+		/* #23 */
+		& .ck-button__label {
+			width: 7em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
+		&.ck-disabled .ck-button__label {
+			@mixin ck-disabled;
+		}
+
+		/* https://github.com/ckeditor/ckeditor5/issues/816 */
+		&.ck-on {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+
+		&.ck-dropdown__button_label-width_auto .ck-button__label {
+			width: auto;
+		}
+
+		/* https://github.com/ckeditor/ckeditor5/issues/8699 */
+		&.ck-off:active,
+		&.ck-on:active {
+			box-shadow: none;
+
+			&:focus {
+				@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+			}
+		}
+	}
+}
+
+.ck.ck-dropdown__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;
+
+	/* Make sure the panel is at least as wide as the drop-down's button. */
+	min-width: 100%;
+
+	/* Disabled corner border radius to be consistent with the .dropdown__button
+	https://github.com/ckeditor/ckeditor5/issues/816 */
+	&.ck-dropdown__panel_se {
+		border-top-left-radius: 0;
+	}
+
+	&.ck-dropdown__panel_sw {
+		border-top-right-radius: 0;
+	}
+
+	&.ck-dropdown__panel_ne {
+		border-bottom-left-radius: 0;
+	}
+
+	&.ck-dropdown__panel_nw {
+		border-bottom-right-radius: 0;
+	}
+
+	&:focus {
+		outline: none;
+	}
+}

package/theme/ckeditor5-ui/components/dropdown/listdropdown.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
+ */
+
+@import "../../../mixins/_rounded.css";
+
+.ck.ck-dropdown > .ck-dropdown__panel > .ck-list {
+	/* Disabled radius of top-left border to be consistent with .dropdown__button
+	https://github.com/ckeditor/ckeditor5/issues/816 */
+	@mixin ck-rounded-corners {
+		border-top-left-radius: 0;
+	}
+
+	/* Make sure the button belonging to the first/last child of the list goes well with the
+	border radius of the entire panel. */
+	& .ck-list__item {
+		&:first-child > .ck-button {
+			@mixin ck-rounded-corners {
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+		}
+
+		&:last-child > .ck-button {
+			@mixin ck-rounded-corners {
+				border-top-left-radius: 0;
+				border-top-right-radius: 0;
+			}
+		}
+	}
+}

package/theme/ckeditor5-ui/components/dropdown/menu/dropdownmenubutton.css

@@ -0,0 +1,89 @@
+/*
+ * 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";
+
+/*
+ * All menu buttons.
+ */
+.ck.ck-button.ck-dropdown-menu-list__nested-menu__button {
+	width: 100%;
+	padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard));
+	border-radius: 0;
+
+	&:focus {
+		border-color: transparent;
+		box-shadow: none;
+
+		&:not(.ck-on) {
+			background: var(--ck-color-button-default-hover-background);
+		}
+	}
+
+	& > .ck-button__label {
+		flex-grow: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&.ck-disabled > .ck-button__label {
+		@mixin ck-disabled;
+	}
+
+	/* Spacing in buttons that miss the icon. */
+	&.ck-icon-spacing:not(:has(.ck-button__icon)) > .ck-button__label {
+		margin-left: calc(var(--ck-icon-size) - var(--ck-spacing-small));
+	}
+
+	& > .ck-dropdown-menu-list__nested-menu__button__arrow {
+		width: var(--ck-dropdown-arrow-size);
+
+		@mixin ck-dir ltr {
+			transform: rotate(-90deg);
+
+			/* 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);
+
+			/* 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-dropdown-menu-list__nested-menu__button__arrow {
+		@mixin ck-disabled;
+	}
+
+	@mixin ck-dir ltr {
+		&:not(.ck-button_with-text) {
+			padding-left: var(--ck-spacing-small);
+		}
+
+		& > .ck-dropdown-menu-list__nested-menu__button__arrow {
+			right: var(--ck-spacing-standard);
+
+			/* A space to accommodate the triangle. */
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		&:not(.ck-button_with-text) {
+			padding-right: var(--ck-spacing-small);
+		}
+
+		& > .ck-dropdown-menu-list__nested-menu__button__arrow {
+			left: var(--ck-spacing-standard);
+
+			/* A space to accommodate the triangle. */
+			margin-right: var(--ck-spacing-small);
+		}
+	}
+}

package/theme/ckeditor5-ui/components/dropdown/menu/dropdownmenulistitem.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-dropdown-menu-menu-item-min-width: 18em;
+}
+
+.ck.ck-dropdown-menu-list__nested-menu__item {
+	min-width: var(--ck-dropdown-menu-menu-item-min-width);
+}

package/theme/ckeditor5-ui/components/dropdown/menu/dropdownmenulistitembutton.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
+ */
+
+/*
+ * List item buttons.
+ */
+.ck-button.ck-dropdown-menu-list__nested-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 {
+		/* These margins are the same as for .ck-icon. */
+		margin-left: calc(-1 * var(--ck-spacing-small));
+		margin-right: var(--ck-spacing-small);
+	}
+
+	/*
+	 * Hovered items automatically get focused. Default focus styles look odd
+	 * while moving across a huge list of items so let's get rid of them
+	 */
+	&:focus {
+		border-color: transparent;
+		box-shadow: none;
+
+		&:not(.ck-on) {
+			background: var(--ck-color-button-default-hover-background);
+		}
+	}
+}

package/theme/ckeditor5-ui/components/dropdown/menu/dropdownmenupanel.css

@@ -0,0 +1,52 @@
+/*
+ * 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-dropdown-menu-menu-panel-max-width: 75vw;
+}
+
+.ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel {
+	@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-dropdown-menu-menu-panel-max-width);
+
+	/* Reset balloon styling */
+	&::after,
+	&::before {
+		display: none;
+	}
+
+	/* Corner border radius consistent with the button. */
+	&.ck-balloon-panel_es,
+	&.ck-balloon-panel_se {
+		border-top-left-radius: 0;
+	}
+
+	&.ck-balloon-panel_ws,
+	&.ck-balloon-panel_sw {
+		border-top-right-radius: 0;
+	}
+
+	&.ck-balloon-panel_en,
+	&.ck-balloon-panel_ne {
+		border-bottom-left-radius: 0;
+	}
+
+	&.ck-balloon-panel_wn,
+	&.ck-balloon-panel_nw {
+		border-bottom-right-radius: 0;
+	}
+
+	&:focus {
+		outline: none;
+	}
+}

package/theme/ckeditor5-ui/components/dropdown/splitbutton.css

@@ -0,0 +1,112 @@
+/*
+ * 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";
+
+:root {
+	--ck-color-split-button-hover-background: hsl(0, 0%, 92%);
+	--ck-color-split-button-hover-border: hsl(0, 0%, 70%);
+}
+
+.ck.ck-splitbutton {
+	/*
+	 * Note: ck-rounded and ck-dir mixins don't go together (because they both use @nest).
+	 */
+	&:hover > .ck-splitbutton__action,
+	&.ck-splitbutton_open > .ck-splitbutton__action {
+		[dir="ltr"] & {
+			/* Don't round the action button on the right side */
+			border-top-right-radius: unset;
+			border-bottom-right-radius: unset;
+		}
+
+		[dir="rtl"] & {
+			/* Don't round the action button on the left side */
+			border-top-left-radius: unset;
+			border-bottom-left-radius: unset;
+		}
+	}
+
+	& > .ck-splitbutton__arrow {
+		/* It's a text-less button and since the icon is positioned absolutely in such situation,
+		it must get some arbitrary min-width. */
+		min-width: unset;
+
+		[dir="ltr"] & {
+			/* Don't round the arrow button on the left side */
+			border-top-left-radius: unset;
+			border-bottom-left-radius: unset;
+		}
+
+		[dir="rtl"] & {
+			/* Don't round the arrow button on the right side */
+			border-top-right-radius: unset;
+			border-bottom-right-radius: unset;
+		}
+
+		& svg {
+			width: var(--ck-dropdown-arrow-size);
+		}
+	}
+
+	/* Make sure the divider stretches 100% height of the button
+	https://github.com/ckeditor/ckeditor5/issues/10936 */
+	& > .ck-splitbutton__arrow:not(:focus) {
+		border-top-width: 0px;
+		border-bottom-width: 0px;
+	}
+
+	/* Don't round the bottom left and right corners of the buttons when "open"
+	https://github.com/ckeditor/ckeditor5/issues/816 */
+	&.ck-splitbutton_open {
+		@mixin ck-rounded-corners {
+			& > .ck-splitbutton__action {
+				border-bottom-left-radius: 0;
+			}
+
+			& > .ck-splitbutton__arrow {
+				border-bottom-right-radius: 0;
+			}
+		}
+	}
+
+	/* When the split button is "open" (the arrow is on) or being hovered, it should get some styling
+	as a whole. The background of both buttons should stand out and there should be a visual
+	separation between both buttons. */
+	&.ck-splitbutton_open,
+	&:hover {
+		/* When the split button hovered as a whole, not as individual buttons. */
+		& > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover) {
+			background: var(--ck-color-split-button-hover-background);
+		}
+
+		/* Splitbutton separator needs to be set with the ::after pseudoselector
+		to display properly the borders on focus */
+		& > .ck-splitbutton__arrow:not(.ck-disabled)::after {
+			content: '';
+			position: absolute;
+			width: 1px;
+			height: 100%;
+			background-color: var(--ck-color-split-button-hover-border);
+		}
+
+		/* Make sure the divider between the buttons looks fine when the button is focused */
+		& > .ck-splitbutton__arrow:focus::after {
+			--ck-color-split-button-hover-border: var(--ck-color-focus-border);
+		}
+
+		[dir="ltr"] & {
+			& > .ck-splitbutton__arrow:not(.ck-disabled)::after {
+				left: -1px;
+			}
+		}
+
+		[dir="rtl"] & {
+			& > .ck-splitbutton__arrow:not(.ck-disabled)::after {
+				right: -1px;
+			}
+		}
+	}
+}

package/theme/ckeditor5-ui/components/dropdown/toolbardropdown.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-toolbar-dropdown .ck-toolbar {
+	border: 0;
+}

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

@@ -0,0 +1,103 @@
+/*
+ * 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";
+
+:root {
+	--ck-accessibility-help-dialog-max-width: 600px;
+	--ck-accessibility-help-dialog-max-height: 400px;
+	--ck-accessibility-help-dialog-border-color: hsl(220, 6%, 81%);
+	--ck-accessibility-help-dialog-code-background-color: hsl(0deg 0% 92.94%);
+	--ck-accessibility-help-dialog-kbd-shadow-color: hsl(0deg 0% 61%);
+}
+
+.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content {
+	padding: var(--ck-spacing-large);
+	max-width: var(--ck-accessibility-help-dialog-max-width);
+	max-height: var(--ck-accessibility-help-dialog-max-height);
+	overflow: auto;
+	user-select: text;
+
+	border: 1px solid transparent;
+
+	&:focus {
+		@mixin ck-focus-ring;
+		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+	}
+
+	* {
+		white-space: normal;
+	}
+
+	/* Hide the main label of the content container. */
+	& .ck-label {
+		display: none;
+	}
+
+	& h3 {
+		font-weight: bold;
+		font-size: 1.2em;
+	}
+
+	& h4 {
+		font-weight: bold;
+		font-size: 1em;
+	}
+
+	& p,
+	& h3,
+	& h4,
+	& table {
+		margin: 1em 0;
+	}
+
+	& dl {
+		display: grid;
+		grid-template-columns: 2fr 1fr;
+		border-top: 1px solid var(--ck-accessibility-help-dialog-border-color);
+		border-bottom: none;
+
+		& dt, & dd {
+			border-bottom: 1px solid var(--ck-accessibility-help-dialog-border-color);
+			padding: .4em 0;
+		}
+
+		& dt {
+			grid-column-start: 1;
+		}
+
+		& dd {
+			grid-column-start: 2;
+			text-align: right;
+		}
+	}
+
+	& kbd, & code {
+		display: inline-block;
+		background: var(--ck-accessibility-help-dialog-code-background-color);
+		padding: .4em;
+		vertical-align: middle;
+		line-height: 1;
+		border-radius: 2px;
+		text-align: center;
+		font-size: .9em;
+	}
+
+	& code {
+		font-family: monospace;
+	}
+
+	& kbd {
+		min-width: 1.8em;
+		box-shadow: 0px 1px 1px var(--ck-accessibility-help-dialog-kbd-shadow-color);
+		margin: 0 1px;
+
+		& + kbd {
+			margin-left: 2px;
+		}
+	}
+}
+