@ckeditor/ckeditor5-theme-lark 0.0.0-nightly-20260104.0 → 0.0.0-nightly-next-20260104.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ckeditor/ckeditor5-theme-lark",
3
- "version": "0.0.0-nightly-20260104.0",
3
+ "version": "0.0.0-nightly-next-20260104.0",
4
4
  "description": "A bright theme for CKEditor 5.",
5
5
  "keywords": [
6
6
  "ckeditor",
@@ -9,7 +9,7 @@
9
9
  "ckeditor5-theme"
10
10
  ],
11
11
  "dependencies": {
12
- "@ckeditor/ckeditor5-ui": "0.0.0-nightly-20260104.0"
12
+ "@ckeditor/ckeditor5-ui": "0.0.0-nightly-next-20260104.0"
13
13
  },
14
14
  "author": "CKSource (http://cksource.com/)",
15
15
  "license": "SEE LICENSE IN LICENSE.md",
@@ -20,9 +20,5 @@
20
20
 
21
21
  &.ck-table-form__action-row {
22
22
  margin-top: var(--ck-spacing-large);
23
-
24
- & .ck-button .ck-button__label {
25
- color: var(--ck-color-text);
26
- }
27
23
  }
28
24
  }
@@ -19,7 +19,84 @@
19
19
 
20
20
  /* Compensate for missing input label that would push the margin (toolbar has no inputs). */
21
21
  margin-top: var(--ck-spacing-standard);
22
+
23
+ &.ck-table-cell-properties-form__horizontal-alignment-toolbar {
24
+ --ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));
25
+
26
+ width: var(--ck-table-form-dimensions-input-width);
27
+ max-width: var(--ck-table-form-dimensions-input-width);
28
+ min-width: var(--ck-table-form-dimensions-input-width);
29
+ padding: 0;
30
+ }
31
+
32
+ &.ck-table-cell-properties-form__vertical-alignment-toolbar {
33
+ flex-grow: 1;
34
+ }
35
+ }
36
+ }
37
+
38
+ &.ck-table-form__border-row {
39
+ & .ck-labeled-field-view {
40
+ & > .ck-label {
41
+ font-size: var(--ck-font-size-tiny);
42
+ text-align: center;
43
+ }
44
+ }
45
+
46
+ & .ck-table-form__border-style,
47
+ & .ck-table-form__border-width {
48
+ width: 80px;
49
+ min-width: 80px;
50
+ max-width: 80px;
51
+ }
52
+ }
53
+
54
+ &.ck-table-form__dimensions-row {
55
+ --ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));
56
+
57
+ width: var(--ck-table-form-dimensions-input-width);
58
+ max-width: var(--ck-table-form-dimensions-input-width);
59
+ min-width: var(--ck-table-form-dimensions-input-width);
60
+ padding: 0;
61
+
62
+ & .ck-table-form__dimensions-row__width,
63
+ & .ck-table-form__dimensions-row__height {
64
+ width: var(--ck-table-form-default-input-width);
65
+ min-width: var(--ck-table-form-default-input-width);
66
+ max-width: var(--ck-table-form-default-input-width);
67
+ margin: 0;
68
+ }
69
+
70
+ & .ck-table-form__dimension-operator {
71
+ position: relative;
72
+ left: -0.5ch;
73
+ width: 0;
74
+ overflow: visible;
75
+ align-self: flex-end;
76
+ display: inline-block;
77
+ height: var(--ck-ui-component-min-height);
78
+ line-height: var(--ck-ui-component-min-height);
79
+ margin: 0 var(--ck-spacing-small);
80
+ }
81
+ }
82
+
83
+ &.ck-form__row.ck-table-form__action-row {
84
+ & > .ck.ck-button {
85
+ flex-grow: initial;
86
+
87
+ & .ck-button__label {
88
+ color: currentColor;
89
+ }
22
90
  }
23
91
  }
92
+
93
+ &.ck-table-form__cell-type-row {
94
+ --ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));
95
+
96
+ width: var(--ck-table-form-dimensions-input-width);
97
+ max-width: var(--ck-table-form-dimensions-input-width);
98
+ min-width: var(--ck-table-form-dimensions-input-width);
99
+ padding: 0;
100
+ }
24
101
  }
25
102
  }
@@ -11,6 +11,8 @@
11
11
  }
12
12
 
13
13
  .ck.ck-table-form {
14
+ --ck-table-form-default-input-width: 80px;
15
+
14
16
  & .ck-form__row {
15
17
  &.ck-table-form__border-row {
16
18
  & .ck-labeled-field-view {
@@ -22,21 +24,33 @@
22
24
 
23
25
  & .ck-table-form__border-style,
24
26
  & .ck-table-form__border-width {
25
- width: 80px;
26
- min-width: 80px;
27
- max-width: 80px;
27
+ width: var(--ck-table-form-default-input-width);
28
+ min-width: var(--ck-table-form-default-input-width);
29
+ max-width: var(--ck-table-form-default-input-width);
28
30
  }
29
31
  }
30
32
 
31
33
  &.ck-table-form__dimensions-row {
34
+ --ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));
35
+
36
+ width: var(--ck-table-form-dimensions-input-width);
37
+ max-width: var(--ck-table-form-dimensions-input-width);
38
+ min-width: var(--ck-table-form-dimensions-input-width);
32
39
  padding: 0;
33
40
 
34
41
  & .ck-table-form__dimensions-row__width,
35
42
  & .ck-table-form__dimensions-row__height {
43
+ width: var(--ck-table-form-default-input-width);
44
+ min-width: var(--ck-table-form-default-input-width);
45
+ max-width: var(--ck-table-form-default-input-width);
36
46
  margin: 0
37
47
  }
38
48
 
39
49
  & .ck-table-form__dimension-operator {
50
+ position: relative;
51
+ left: -0.5ch;
52
+ width: 0;
53
+ overflow: visible;
40
54
  align-self: flex-end;
41
55
  display: inline-block;
42
56
  height: var(--ck-ui-component-min-height);
@@ -9,7 +9,6 @@
9
9
  & .ck-form__row {
10
10
  &.ck-table-properties-form__alignment-row {
11
11
  align-self: flex-end;
12
- padding: 0;
13
12
 
14
13
  & .ck.ck-toolbar {
15
14
  background: none;
@@ -18,7 +17,7 @@
18
17
  margin-top: var(--ck-spacing-standard);
19
18
 
20
19
  & .ck-toolbar__items > * {
21
- width: 40px;
20
+ flex: 1;
22
21
  }
23
22
  }
24
23
  }
package/theme/index.css CHANGED
@@ -100,10 +100,6 @@
100
100
  @import "./ckeditor5-table/tableproperties.css";
101
101
  @import "./ckeditor5-table/tableselection.css";
102
102
  @import "./ckeditor5-table/tablelayout.css";
103
- @import "./ckeditor5-table/tableproperties-experimental.css";
104
- @import "./ckeditor5-table/tableform-experimental.css";
105
- @import "./ckeditor5-table/formrow-experimental.css";
106
- @import "./ckeditor5-table/tablecellproperties-experimental.css";
107
103
  @import "./ckeditor5-widget/widget.css";
108
104
  @import "./ckeditor5-widget/widgetresize.css";
109
105
  @import "./ckeditor5-widget/widgettypearound.css";
@@ -1,24 +0,0 @@
1
- /*
2
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
- */
5
-
6
- @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
7
-
8
- .ck.ck-form__row {
9
- /* Ignore labels that work as fieldset legends */
10
- & > *:not(.ck-label) {
11
- & + * {
12
- margin-inline-start: var(--ck-spacing-large);
13
- }
14
- }
15
-
16
- & > .ck-label {
17
- width: 100%;
18
- min-width: 100%;
19
- }
20
-
21
- &.ck-table-form__action-row {
22
- margin-top: var(--ck-spacing-large);
23
- }
24
- }
@@ -1,131 +0,0 @@
1
- /*
2
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
- */
5
-
6
- .ck.ck-table-cell-properties-form {
7
- width: 320px;
8
-
9
- &.ck-table-cell-properties-form_experimental {
10
- --ck-table-form-default-input-width: 80px;
11
-
12
- & .ck-form__row {
13
- &.ck-table-cell-properties-form__padding-row {
14
- align-self: flex-end;
15
- padding: 0;
16
- width: 25%;
17
- }
18
-
19
- &.ck-table-cell-properties-form__alignment-row {
20
- & .ck.ck-toolbar {
21
- background: none;
22
-
23
- /* Compensate for missing input label that would push the margin (toolbar has no inputs). */
24
- margin-top: var(--ck-spacing-standard);
25
- }
26
- }
27
-
28
- &.ck-table-form__border-row {
29
- & .ck-labeled-field-view {
30
- & > .ck-label {
31
- font-size: var(--ck-font-size-tiny);
32
- text-align: center;
33
- }
34
- }
35
-
36
- & .ck-table-form__border-style,
37
- & .ck-table-form__border-width {
38
- width: 80px;
39
- min-width: 80px;
40
- max-width: 80px;
41
- }
42
- }
43
-
44
- &.ck-table-form__dimensions-row {
45
- padding: 0;
46
-
47
- & .ck-table-form__dimensions-row__width,
48
- & .ck-table-form__dimensions-row__height {
49
- margin: 0
50
- }
51
-
52
- & .ck-table-form__dimension-operator {
53
- align-self: flex-end;
54
- display: inline-block;
55
- height: var(--ck-ui-component-min-height);
56
- line-height: var(--ck-ui-component-min-height);
57
- margin: 0 var(--ck-spacing-small);
58
- }
59
- }
60
-
61
- &.ck-form__row.ck-table-form__action-row {
62
- & > .ck.ck-button {
63
- flex-grow: initial;
64
-
65
- & .ck-button__label {
66
- color: currentColor;
67
- }
68
- }
69
- }
70
- }
71
-
72
- &.ck-table-cell-properties-form_experimental-no-cell-type {
73
- & .ck-form__row {
74
- &.ck-table-form__dimensions-row {
75
- --ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));
76
-
77
- width: var(--ck-table-form-dimensions-input-width);
78
- max-width: var(--ck-table-form-dimensions-input-width);
79
- min-width: var(--ck-table-form-dimensions-input-width);
80
- padding: 0;
81
-
82
- & .ck-table-form__dimensions-row__width,
83
- & .ck-table-form__dimensions-row__height {
84
- width: var(--ck-table-form-default-input-width);
85
- min-width: var(--ck-table-form-default-input-width);
86
- max-width: var(--ck-table-form-default-input-width);
87
- margin: 0
88
- }
89
-
90
- & .ck-table-form__dimension-operator {
91
- position: relative;
92
- left: -0.5ch;
93
- width: 0;
94
- overflow: visible;
95
- align-self: flex-end;
96
- display: inline-block;
97
- height: var(--ck-ui-component-min-height);
98
- line-height: var(--ck-ui-component-min-height);
99
- margin: 0 var(--ck-spacing-small);
100
- }
101
- }
102
-
103
- &.ck-table-form__cell-type-row {
104
- --ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));
105
-
106
- width: var(--ck-table-form-dimensions-input-width);
107
- max-width: var(--ck-table-form-dimensions-input-width);
108
- min-width: var(--ck-table-form-dimensions-input-width);
109
- padding: 0;
110
- }
111
-
112
- &.ck-table-cell-properties-form__alignment-row {
113
- & .ck.ck-toolbar {
114
- &.ck-table-cell-properties-form__horizontal-alignment-toolbar {
115
- --ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));
116
-
117
- width: var(--ck-table-form-dimensions-input-width);
118
- max-width: var(--ck-table-form-dimensions-input-width);
119
- min-width: var(--ck-table-form-dimensions-input-width);
120
- padding: 0;
121
- }
122
-
123
- &.ck-table-cell-properties-form__vertical-alignment-toolbar {
124
- flex-grow: 1;
125
- }
126
- }
127
- }
128
- }
129
- }
130
- }
131
- }
@@ -1,104 +0,0 @@
1
- /*
2
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
- */
5
-
6
- @import "../mixins/_rounded.css";
7
-
8
- :root {
9
- --ck-table-properties-error-arrow-size: 6px;
10
- --ck-table-properties-min-error-width: 150px;
11
- }
12
-
13
- .ck.ck-table-form.ck-table-properties-form_experimental {
14
- --ck-table-form-default-input-width: 80px;
15
-
16
- & .ck-form__row {
17
- &.ck-table-form__border-row {
18
- & .ck-labeled-field-view {
19
- & > .ck-label {
20
- font-size: var(--ck-font-size-tiny);
21
- text-align: center;
22
- }
23
- }
24
-
25
- & .ck-table-form__border-style,
26
- & .ck-table-form__border-width {
27
- width: var(--ck-table-form-default-input-width);
28
- min-width: var(--ck-table-form-default-input-width);
29
- max-width: var(--ck-table-form-default-input-width);
30
- }
31
- }
32
-
33
- &.ck-table-form__dimensions-row {
34
- --ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));
35
-
36
- width: var(--ck-table-form-dimensions-input-width);
37
- max-width: var(--ck-table-form-dimensions-input-width);
38
- min-width: var(--ck-table-form-dimensions-input-width);
39
- padding: 0;
40
-
41
- & .ck-table-form__dimensions-row__width,
42
- & .ck-table-form__dimensions-row__height {
43
- width: var(--ck-table-form-default-input-width);
44
- min-width: var(--ck-table-form-default-input-width);
45
- max-width: var(--ck-table-form-default-input-width);
46
- margin: 0
47
- }
48
-
49
- & .ck-table-form__dimension-operator {
50
- position: relative;
51
- left: -0.5ch;
52
- width: 0;
53
- overflow: visible;
54
- align-self: flex-end;
55
- display: inline-block;
56
- height: var(--ck-ui-component-min-height);
57
- line-height: var(--ck-ui-component-min-height);
58
- margin: 0 var(--ck-spacing-small);
59
- }
60
- }
61
- }
62
-
63
- & .ck.ck-labeled-field-view {
64
- padding-top: var(--ck-spacing-standard);
65
-
66
- & .ck.ck-labeled-field-view__status {
67
- @mixin ck-rounded-corners;
68
-
69
- background: var(--ck-color-base-error);
70
- color: var(--ck-color-base-background);
71
- padding: var(--ck-spacing-small) var(--ck-spacing-medium);
72
- min-width: var(--ck-table-properties-min-error-width);
73
- text-align: center;
74
-
75
- /* The arrow pointing towards the field. */
76
- &::after {
77
- border-color: transparent transparent var(--ck-color-base-error) transparent;
78
- border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size);
79
- border-style: solid;
80
- }
81
-
82
- animation: ck-table-form-labeled-view-status-appear .15s ease both;
83
-
84
- @media (prefers-reduced-motion: reduce) {
85
- animation: none;
86
- }
87
- }
88
-
89
- /* Hide the error balloon when the field is blurred. Makes the experience much more clear. */
90
- & .ck-input.ck-error:not(:focus) + .ck.ck-labeled-field-view__status {
91
- display: none;
92
- }
93
- }
94
- }
95
-
96
- @keyframes ck-table-form-labeled-view-status-appear {
97
- 0% {
98
- opacity: 0;
99
- }
100
-
101
- 100% {
102
- opacity: 1;
103
- }
104
- }
@@ -1,45 +0,0 @@
1
- /*
2
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
- */
5
-
6
- .ck.ck-table-properties-form {
7
- width: 320px;
8
-
9
- & .ck-form__row {
10
- &.ck-table-properties-form__alignment-row {
11
- align-self: flex-end;
12
-
13
- & .ck.ck-toolbar {
14
- background: none;
15
-
16
- /* Compensate for missing input label that would push the margin (toolbar has no inputs). */
17
- margin-top: var(--ck-spacing-standard);
18
-
19
- & .ck-toolbar__items > * {
20
- flex: 1;
21
- }
22
- }
23
- }
24
- }
25
-
26
- &.ck-table-properties-form_experimental {
27
- & .ck-form__row {
28
- &.ck-table-properties-form__alignment-row {
29
- padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0;
30
- }
31
-
32
- &.ck-table-form__action-row {
33
- justify-content: flex-end;
34
-
35
- & > .ck.ck-button {
36
- flex-grow: initial;
37
-
38
- & .ck-button__label {
39
- color: currentColor;
40
- }
41
- }
42
- }
43
- }
44
- }
45
- }