@ckeditor/ckeditor5-theme-lark 47.2.0 → 47.3.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-theme-lark",
-  "version": "47.2.0",
+  "version": "47.3.0-alpha.0",
   "description": "A bright theme for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -9,7 +9,7 @@
     "ckeditor5-theme"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "47.2.0"
+    "@ckeditor/ckeditor5-ui": "47.3.0-alpha.0"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",

package/theme/ckeditor5-table/formrow-experimental.css

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+.ck.ck-form__row {
+	/* Ignore labels that work as fieldset legends */
+	& > *:not(.ck-label) {
+		& + * {
+			margin-inline-start: var(--ck-spacing-large);
+		}
+	}
+
+	& > .ck-label {
+		width: 100%;
+		min-width: 100%;
+	}
+
+	&.ck-table-form__action-row {
+		margin-top: var(--ck-spacing-large);
+	}
+}

package/theme/ckeditor5-table/tableform-experimental.css

@@ -0,0 +1,104 @@
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+@import "../mixins/_rounded.css";
+
+:root {
+	--ck-table-properties-error-arrow-size: 6px;
+	--ck-table-properties-min-error-width: 150px;
+}
+
+.ck.ck-table-form.ck-table-properties-form_experimental {
+	--ck-table-form-default-input-width: 80px;
+
+	& .ck-form__row {
+		&.ck-table-form__border-row {
+			& .ck-labeled-field-view {
+				& > .ck-label {
+					font-size: var(--ck-font-size-tiny);
+					text-align: center;
+				}
+			}
+
+			& .ck-table-form__border-style,
+			& .ck-table-form__border-width {
+				width: var(--ck-table-form-default-input-width);
+				min-width: var(--ck-table-form-default-input-width);
+				max-width: var(--ck-table-form-default-input-width);
+			}
+		}
+
+		&.ck-table-form__dimensions-row {
+			--ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));
+
+			width: var(--ck-table-form-dimensions-input-width);
+			max-width: var(--ck-table-form-dimensions-input-width);
+			min-width: var(--ck-table-form-dimensions-input-width);
+			padding: 0;
+
+			& .ck-table-form__dimensions-row__width,
+			& .ck-table-form__dimensions-row__height {
+				width: var(--ck-table-form-default-input-width);
+				min-width: var(--ck-table-form-default-input-width);
+				max-width: var(--ck-table-form-default-input-width);
+				margin: 0
+			}
+
+			& .ck-table-form__dimension-operator {
+				position: relative;
+				left: -0.5ch;
+				width: 0;
+				overflow: visible;
+				align-self: flex-end;
+				display: inline-block;
+				height: var(--ck-ui-component-min-height);
+				line-height: var(--ck-ui-component-min-height);
+				margin: 0 var(--ck-spacing-small);
+			}
+		}
+	}
+
+	& .ck.ck-labeled-field-view {
+		padding-top: var(--ck-spacing-standard);
+
+		& .ck.ck-labeled-field-view__status {
+			@mixin ck-rounded-corners;
+
+			background: var(--ck-color-base-error);
+			color: var(--ck-color-base-background);
+			padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+			min-width: var(--ck-table-properties-min-error-width);
+			text-align: center;
+
+			/* The arrow pointing towards the field. */
+			&::after {
+				border-color: transparent transparent var(--ck-color-base-error) transparent;
+				border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size);
+				border-style: solid;
+			}
+
+			animation: ck-table-form-labeled-view-status-appear .15s ease both;
+
+			@media (prefers-reduced-motion: reduce) {
+				animation: none;
+			}
+		}
+
+		/* Hide the error balloon when the field is blurred. Makes the experience much more clear. */
+		& .ck-input.ck-error:not(:focus) + .ck.ck-labeled-field-view__status {
+			display: none;
+		}
+	}
+}
+
+@keyframes ck-table-form-labeled-view-status-appear {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}

package/theme/ckeditor5-table/tableproperties-experimental.css

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+.ck.ck-table-properties-form {
+	width: 320px;
+
+	& .ck-form__row {
+		&.ck-table-properties-form__alignment-row {
+			align-self: flex-end;
+
+			& .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 > * {
+					flex: 1;
+				}
+			}
+		}
+	}
+
+	&.ck-table-properties-form_experimental {
+		& .ck-form__row {
+			&.ck-table-properties-form__alignment-row {
+				padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0;
+			}
+
+			&.ck-table-form__action-row {
+				justify-content: flex-end;
+
+				& > .ck.ck-button {
+					flex-grow: initial;
+
+					& .ck-button__label {
+						color: currentColor;
+					}
+				}
+			}
+		}
+	}
+}

package/theme/index.css

@@ -100,6 +100,9 @@
 @import "./ckeditor5-table/tableproperties.css";
 @import "./ckeditor5-table/tableselection.css";
 @import "./ckeditor5-table/tablelayout.css";
+@import "./ckeditor5-table/tableproperties-experimental.css";
+@import "./ckeditor5-table/tableform-experimental.css";
+@import "./ckeditor5-table/formrow-experimental.css";
 @import "./ckeditor5-widget/widget.css";
 @import "./ckeditor5-widget/widgetresize.css";
 @import "./ckeditor5-widget/widgettypearound.css";