@ckeditor/ckeditor5-ui 49.0.0-alpha.5 → 49.0.0-alpha.7

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.
Files changed (8) hide show
  1. package/dist/editableui/editableuiview.d.ts +10 -0
  2. package/dist/index-editor.css +195 -207
  3. package/dist/index-editor.css.map +1 -1
  4. package/dist/index.css +195 -207
  5. package/dist/index.css.map +1 -1
  6. package/dist/index.js +2 -0
  7. package/dist/index.js.map +1 -1
  8. package/package.json +6 -6
package/dist/index-editor.css CHANGED
@@ -5,7 +5,7 @@
5
5
  :root, :host {
6
6
  --ck-color-base-foreground: #f7f7f7;
7
7
  --ck-color-base-background: #fff;
8
- --ck-color-base-border: #cbd2dd;
8
+ --ck-color-base-border: #c9d1dc;
9
9
  --ck-color-base-border-light: #e6ecf4;
10
10
  --ck-color-base-action: #4865d5;
11
11
  --ck-color-base-action-hover: #3454c5;
@@ -97,47 +97,6 @@
97
97
  --ck-color-focus-outer-shadow: var(--ck-color-interactive-focus-shadow);
98
98
  --ck-color-focus-disabled-shadow: var(--ck-color-interactive-focus-disabled-shadow);
99
99
  --ck-color-focus-error-shadow: var(--ck-color-interactive-focus-error-shadow);
100
- --ck-color-button-default-background: var(--ck-button-default-background-color);
101
- --ck-color-button-default-hover-background: var(--ck-button-default-hover-background-color);
102
- --ck-color-button-default-active-background: var(--ck-button-default-active-background-color);
103
- --ck-color-button-default-disabled-background: var(--ck-button-default-disabled-background-color);
104
- --ck-color-button-on-background: var(--ck-button-on-background-color);
105
- --ck-color-button-on-hover-background: var(--ck-button-on-hover-background-color);
106
- --ck-color-button-on-active-background: var(--ck-button-on-active-background-color);
107
- --ck-color-button-on-disabled-background: var(--ck-button-on-disabled-background-color);
108
- --ck-color-button-on-color: var(--ck-button-on-text-color);
109
- --ck-color-button-action-background: var(--ck-button-action-background-color);
110
- --ck-color-button-action-hover-background: var(--ck-button-action-hover-background-color);
111
- --ck-color-button-action-active-background: var(--ck-button-action-active-background-color);
112
- --ck-color-button-action-disabled-background: var(--ck-button-action-disabled-background-color);
113
- --ck-color-button-action-text: var(--ck-button-action-text-color);
114
- --ck-color-button-save: var(--ck-button-save-color);
115
- --ck-color-button-cancel: var(--ck-button-cancel-color);
116
- --ck-color-switch-button-off-background: var(--ck-switch-button-off-background-color);
117
- --ck-color-switch-button-off-hover-background: var(--ck-switch-button-off-hover-background-color);
118
- --ck-color-switch-button-on-background: var(--ck-switch-button-on-background-color);
119
- --ck-color-switch-button-on-hover-background: var(--ck-switch-button-on-hover-background-color);
120
- --ck-color-switch-button-inner-background: var(--ck-switch-button-inner-background-color);
121
- --ck-color-dropdown-panel-background: var(--ck-dropdown-panel-background-color);
122
- --ck-color-dropdown-panel-border: var(--ck-dropdown-panel-border-color);
123
- --ck-color-dialog-background: var(--ck-dialog-background-color);
124
- --ck-color-input-background: var(--ck-input-background-color);
125
- --ck-color-input-border: var(--ck-input-border-color);
126
- --ck-color-input-error-border: var(--ck-input-error-border-color);
127
- --ck-color-input-text: var(--ck-input-text-color);
128
- --ck-color-input-disabled-background: var(--ck-input-disabled-background-color);
129
- --ck-color-input-disabled-border: var(--ck-input-disabled-border-color);
130
- --ck-color-input-disabled-text: var(--ck-input-disabled-text-color);
131
- --ck-color-list-background: var(--ck-list-background-color);
132
- --ck-color-list-button-hover-background: var(--ck-list-button-hover-background-color);
133
- --ck-color-list-button-on-background: var(--ck-list-button-on-background-color);
134
- --ck-color-list-button-on-text: var(--ck-list-button-on-text-color);
135
- --ck-color-panel-background: var(--ck-balloon-panel-background-color);
136
- --ck-color-panel-border: var(--ck-balloon-panel-border-color);
137
- --ck-color-toolbar-background: var(--ck-toolbar-background-color);
138
- --ck-color-toolbar-border: var(--ck-toolbar-border-color);
139
- --ck-color-tooltip-background: var(--ck-tooltip-background-color);
140
- --ck-color-tooltip-text: var(--ck-tooltip-text-color);
141
100
  --ck-color-engine-placeholder-text: #707070;
142
101
  --ck-color-upload-bar-background: var(--ck-color-base-focus);
143
102
  --ck-color-link-default: #0000f0;
@@ -159,12 +118,12 @@
159
118
  --ck-font-size-base: 16px;
160
119
  --ck-line-height-base: 1.5;
161
120
  --ck-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
162
- --ck-font-size-xs: calc(.625 * var(--ck-font-size-base));
163
- --ck-font-size-sm: calc(.75 * var(--ck-font-size-base));
164
- --ck-font-size-md: calc(.875 * var(--ck-font-size-base));
165
- --ck-font-size-lg: calc(1.125 * var(--ck-font-size-base));
166
- --ck-font-size-xl: calc(1.25 * var(--ck-font-size-base));
167
- --ck-font-size-2xl: calc(1.5 * var(--ck-font-size-base));
121
+ --ck-font-size-xs: calc(.625 * var(--ck-font-size-normal, var(--ck-font-size-base)));
122
+ --ck-font-size-sm: calc(.75 * var(--ck-font-size-normal, var(--ck-font-size-base)));
123
+ --ck-font-size-md: calc(.875 * var(--ck-font-size-normal, var(--ck-font-size-base)));
124
+ --ck-font-size-lg: calc(1.125 * var(--ck-font-size-normal, var(--ck-font-size-base)));
125
+ --ck-font-size-xl: calc(1.25 * var(--ck-font-size-normal, var(--ck-font-size-base)));
126
+ --ck-font-size-2xl: calc(1.5 * var(--ck-font-size-normal, var(--ck-font-size-base)));
168
127
  --ck-font-weight-normal: 400;
169
128
  --ck-font-weight-medium: 500;
170
129
  --ck-font-weight-semibold: 600;
@@ -191,7 +150,7 @@
191
150
 
192
151
  .ck.ck-reset_all, .ck-reset_all :not(.ck-reset_all-excluded, .ck-reset_all-excluded *) {
193
152
  border-collapse: collapse;
194
- font: normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face, var(--ck-font-family));
153
+ font: normal normal normal var(--ck-font-size-normal, var(--ck-font-size-base))/var(--ck-line-height-base) var(--ck-font-face, var(--ck-font-family));
195
154
  color: var(--ck-color-text);
196
155
  text-align: left;
197
156
  white-space: nowrap;
@@ -237,11 +196,11 @@
237
196
 
238
197
  :root, :host {
239
198
  --ck-radius-base: var(--ck-radius-unit, 8px);
240
- --ck-radius-xs: calc(var(--ck-radius-base) / 8);
241
- --ck-radius-sm: calc(var(--ck-radius-base) / 4);
242
- --ck-radius-md: calc(var(--ck-radius-base) / 2);
243
- --ck-radius-lg: calc(var(--ck-radius-base) * 1.5);
244
- --ck-radius-xl: calc(var(--ck-radius-base) * 2);
199
+ --ck-radius-xs: calc(var(--ck-border-radius, var(--ck-radius-base)) / 8);
200
+ --ck-radius-sm: calc(var(--ck-border-radius, var(--ck-radius-base)) / 4);
201
+ --ck-radius-md: calc(var(--ck-border-radius, var(--ck-radius-base)) / 2);
202
+ --ck-radius-lg: calc(var(--ck-border-radius, var(--ck-radius-base)) * 1.5);
203
+ --ck-radius-xl: calc(var(--ck-border-radius, var(--ck-radius-base)) * 2);
245
204
  --ck-radius-full: 50%;
246
205
  --ck-radius-corners: 0;
247
206
  }
@@ -254,7 +213,7 @@
254
213
  --ck-inset-shadow-sm: 0 1px 4px #0000000d, 0 2px 10px #0000000d inset;
255
214
  --ck-shadow-md: 0 1px 2px 1px var(--ck-color-shadow-drop);
256
215
  --ck-shadow-lg: 0 1px 4px #0000000d, 0 2px 10px #0000000d;
257
- --ck-shadow-xl: 0 16px 32px -4px #0000001a, 0 4px 16px #0000000d;
216
+ --ck-shadow-xl: 0 16px 32px -4px #0000001a, 0 4px 16px #0000001a;
258
217
  --ck-spacing-base: var(--ck-spacing-unit, 8px);
259
218
  --ck-spacing-2xs: calc(.125 * var(--ck-spacing-base));
260
219
  --ck-spacing-xs: calc(.25 * var(--ck-spacing-base));
@@ -262,13 +221,13 @@
262
221
  --ck-spacing-md: calc(.75 * var(--ck-spacing-base));
263
222
  --ck-spacing-lg: calc(1.5 * var(--ck-spacing-base));
264
223
  --ck-spacing-xl: calc(2 * var(--ck-spacing-base));
265
- --ck-spacing-ms: var(--ck-spacing-md);
266
- --ck-width-xs: calc(var(--ck-font-size-base) * 15);
267
- --ck-width-sm: calc(var(--ck-font-size-base) * 20);
268
- --ck-width-md: calc(var(--ck-font-size-base) * 25);
269
- --ck-width-lg: calc(var(--ck-font-size-base) * 30);
270
- --ck-width-xl: calc(var(--ck-font-size-base) * 35);
271
- --ck-width-2xl: calc(var(--ck-font-size-base) * 40);
224
+ --ck-spacing-ms: var(--ck-spacing-medium-small, var(--ck-spacing-md));
225
+ --ck-width-xs: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * 15);
226
+ --ck-width-sm: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * 20);
227
+ --ck-width-md: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * 25);
228
+ --ck-width-lg: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * 30);
229
+ --ck-width-xl: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * 35);
230
+ --ck-width-2xl: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * 40);
272
231
  --ck-font-weight-ui-default: var(--ck-font-weight-normal);
273
232
  --ck-font-weight-ui-strong: var(--ck-font-weight-semibold);
274
233
  --ck-font-weight-ui-heading: var(--ck-font-weight-semibold);
@@ -279,24 +238,24 @@
279
238
  --ck-font-size-control: var(--ck-font-size-md);
280
239
  --ck-toolbar-text-font-size: inherit;
281
240
  --ck-menubar-text-font-size: inherit;
282
- --ck-spacing-control-padding-block: var(--ck-spacing-sm);
241
+ --ck-spacing-control-padding-block: var(--ck-spacing-small, var(--ck-spacing-sm));
283
242
  --ck-spacing-control-padding-inline: var(--ck-spacing-standard, var(--ck-spacing-base));
284
243
  --ck-spacing-control-padding-inline-compact: var(--ck-spacing-small, var(--ck-spacing-sm));
285
244
  --ck-spacing-control-padding-inline-start-compact: var(--ck-spacing-tiny, var(--ck-spacing-xs));
286
- --ck-spacing-control-padding-block-compact: var(--ck-spacing-xs);
287
- --ck-spacing-control-icon-gap: var(--ck-spacing-md);
288
- --ck-spacing-padding-tight: var(--ck-spacing-xs);
289
- --ck-spacing-padding-compact: var(--ck-spacing-sm);
290
- --ck-spacing-padding-snug: var(--ck-spacing-md);
245
+ --ck-spacing-control-padding-block-compact: var(--ck-spacing-tiny, var(--ck-spacing-xs));
246
+ --ck-spacing-control-icon-gap: var(--ck-spacing-medium-small, var(--ck-spacing-md));
247
+ --ck-spacing-padding-tight: var(--ck-spacing-tiny, var(--ck-spacing-xs));
248
+ --ck-spacing-padding-compact: var(--ck-spacing-small, var(--ck-spacing-sm));
249
+ --ck-spacing-padding-snug: var(--ck-spacing-medium-small, var(--ck-spacing-md));
291
250
  --ck-spacing-padding: var(--ck-spacing-base);
292
- --ck-spacing-padding-comfortable: var(--ck-spacing-lg);
293
- --ck-spacing-padding-spacious: var(--ck-spacing-xl);
294
- --ck-spacing-gap-tight: var(--ck-spacing-xs);
295
- --ck-spacing-gap-compact: var(--ck-spacing-sm);
296
- --ck-spacing-gap-snug: var(--ck-spacing-md);
251
+ --ck-spacing-padding-comfortable: var(--ck-spacing-large, var(--ck-spacing-lg));
252
+ --ck-spacing-padding-spacious: var(--ck-spacing-extra-large, var(--ck-spacing-xl));
253
+ --ck-spacing-gap-tight: var(--ck-spacing-tiny, var(--ck-spacing-xs));
254
+ --ck-spacing-gap-compact: var(--ck-spacing-small, var(--ck-spacing-sm));
255
+ --ck-spacing-gap-snug: var(--ck-spacing-medium-small, var(--ck-spacing-md));
297
256
  --ck-spacing-gap: var(--ck-spacing-base);
298
- --ck-spacing-gap-comfortable: var(--ck-spacing-lg);
299
- --ck-spacing-gap-spacious: var(--ck-spacing-xl);
257
+ --ck-spacing-gap-comfortable: var(--ck-spacing-large, var(--ck-spacing-lg));
258
+ --ck-spacing-gap-spacious: var(--ck-spacing-extra-large, var(--ck-spacing-xl));
300
259
  --ck-border-width-control: var(--ck-border-width-thin);
301
260
  --ck-border-width-surface: var(--ck-border-width-thin);
302
261
  --ck-border-width-divider: var(--ck-border-width-thin);
@@ -307,7 +266,7 @@
307
266
  --ck-border-radius-control: var(--ck-radius-md);
308
267
  --ck-border-radius-control-small: var(--ck-radius-sm);
309
268
  --ck-border-radius-surface: var(--ck-border-radius, var(--ck-radius-base));
310
- --ck-border-radius-uniform: var(--ck-radius-base);
269
+ --ck-border-radius-uniform: var(--ck-border-radius, var(--ck-radius-base));
311
270
  --ck-border-radius-surface-attached: var(--ck-border-radius-surface);
312
271
  --ck-border-radius-surface-attached-top: 0 0 var(--ck-border-radius-surface-attached) var(--ck-border-radius-surface-attached);
313
272
  --ck-border-radius-surface-attached-bottom: var(--ck-border-radius-surface-attached) var(--ck-border-radius-surface-attached) 0 0;
@@ -321,7 +280,7 @@
321
280
  --ck-interactive-focus-shadow: var(--ck-focus-outer-shadow, var(--ck-focus-shadow));
322
281
  --ck-interactive-focus-disabled-shadow: var(--ck-focus-disabled-outer-shadow, var(--ck-focus-shadow-disabled));
323
282
  --ck-interactive-focus-error-shadow: var(--ck-focus-error-outer-shadow, var(--ck-focus-shadow-error));
324
- --ck-size-control-min-height: calc(var(--ck-font-size-base)*2);
283
+ --ck-size-control-min-height: var(--ck-ui-component-min-height, calc(var(--ck-font-size-normal, var(--ck-font-size-base))*2));
325
284
  --ck-width-balloon-form: min(var(--ck-width-md), 90vw);
326
285
  --ck-width-dialog: min(var(--ck-width-md), 90vw);
327
286
  --ck-width-dialog-lg: min(var(--ck-width-xl), 90vw);
@@ -388,7 +347,7 @@
388
347
  --ck-animation-timing-function-feedback: var(--ck-animation-ease-standard);
389
348
  --ck-animation-timing-function-progress: var(--ck-animation-ease-linear);
390
349
  --ck-animation-fill-mode-feedback: var(--ck-animation-fill-both);
391
- --ck-powered-by-font-size: calc(.5 * var(--ck-font-size-base));
350
+ --ck-powered-by-font-size: calc(.5 * var(--ck-font-size-normal, var(--ck-font-size-base)));
392
351
  --ck-powered-by-line-height: 1.35;
393
352
  --ck-powered-by-letter-spacing: -.2px;
394
353
  --ck-powered-by-padding-vertical: 2px;
@@ -402,8 +361,8 @@
402
361
  --ck-powered-by-border-color: var(--ck-color-focus-border);
403
362
  --ck-powered-by-svg-width: 53;
404
363
  --ck-powered-by-svg-height: 10;
405
- --ck-powered-by-icon-width: calc(var(--ck-font-size-base) * var(--ck-powered-by-svg-width) / 16);
406
- --ck-powered-by-icon-height: calc(var(--ck-font-size-base) * var(--ck-powered-by-svg-height) / 16);
364
+ --ck-powered-by-icon-width: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * var(--ck-powered-by-svg-width) / 16);
365
+ --ck-powered-by-icon-height: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * var(--ck-powered-by-svg-height) / 16);
407
366
  }
408
367
 
409
368
  .ck.ck-balloon-panel.ck-powered-by-balloon {
@@ -464,9 +423,9 @@
464
423
  }
465
424
 
466
425
  :root, :host {
467
- --ck-evaluation-badge-font-size: calc(var(--ck-font-size-base) * 7.5 / 13);
468
- --ck-evaluation-badge-line-height: calc(var(--ck-font-size-base) * 7.5 / 13);
469
- --ck-evaluation-badge-letter-spacing: calc(var(--ck-font-size-base) * -.2 / 13);
426
+ --ck-evaluation-badge-font-size: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * 7.5 / 13);
427
+ --ck-evaluation-badge-line-height: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * 7.5 / 13);
428
+ --ck-evaluation-badge-letter-spacing: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * -.2 / 13);
470
429
  --ck-evaluation-badge-padding-vertical: 2px;
471
430
  --ck-evaluation-badge-padding-horizontal: 4px;
472
431
  --ck-evaluation-badge-label-padding-inline: 2px;
@@ -521,33 +480,9 @@
521
480
  }
522
481
 
523
482
  :root, :host {
524
- --ck-spacing-extra-tiny: var(--ck-spacing-2xs);
525
- --ck-spacing-tiny: var(--ck-spacing-xs);
526
- --ck-spacing-small: var(--ck-spacing-sm);
527
- --ck-spacing-medium-small: var(--ck-spacing-md);
528
- --ck-spacing-medium: var(--ck-spacing-base);
529
- --ck-spacing-standard: var(--ck-spacing-base);
530
- --ck-spacing-large: var(--ck-spacing-lg);
531
- --ck-spacing-extra-large: var(--ck-spacing-xl);
532
- --ck-font-size-tiny: var(--ck-font-size-xs);
533
- --ck-font-size-small: var(--ck-font-size-sm);
534
- --ck-font-size-normal: var(--ck-font-size-base);
535
- --ck-font-size-big: var(--ck-font-size-xl);
536
- --ck-font-size-large: var(--ck-font-size-2xl);
537
- --ck-font-face: var(--ck-font-family);
538
- --ck-border-radius: var(--ck-radius-base);
539
- --ck-drop-shadow: var(--ck-shadow-md);
540
- --ck-drop-shadow-active: var(--ck-shadow-lg);
541
- --ck-inner-shadow: var(--ck-inset-shadow-sm);
542
483
  --ck-z-default: var(--ck-z-base);
543
484
  --ck-z-panel: var(--ck-z-overlay);
544
485
  --ck-z-dialog: var(--ck-z-modal);
545
- --ck-focus-outer-shadow-geometry: var(--ck-focus-shadow-geometry);
546
- --ck-focus-outer-shadow: var(--ck-focus-shadow);
547
- --ck-focus-disabled-outer-shadow: var(--ck-focus-shadow-disabled);
548
- --ck-focus-error-outer-shadow: var(--ck-focus-shadow-error);
549
- --ck-disabled-opacity: var(--ck-opacity-disabled);
550
- --ck-ui-component-min-height: var(--ck-size-min-height);
551
486
  --ck-responsive-form-padding: var(--ck-spacing-padding-comfortable);
552
487
  --ck-responsive-form-divider-border: var(--ck-border-divider);
553
488
  }
@@ -796,13 +731,13 @@
796
731
 
797
732
  & dl {
798
733
  --ck-divider-border-color: var(--ck-color-divider, #ccced1);
799
- border-top: var(--ck-accessibility-help-dialog-item-divider-width) solid var(--ck-divider-border-color);
734
+ border-top: var(--ck-accessibility-help-dialog-item-divider-width) solid var(--ck-accessibility-help-dialog-border-color, var(--ck-divider-border-color));
800
735
  border-bottom: none;
801
736
  grid-template-columns: 2fr 1fr;
802
737
  display: grid;
803
738
 
804
739
  & dt, & dd {
805
- border-bottom: var(--ck-accessibility-help-dialog-item-divider-width) solid var(--ck-divider-border-color);
740
+ border-bottom: var(--ck-accessibility-help-dialog-item-divider-width) solid var(--ck-accessibility-help-dialog-border-color, var(--ck-divider-border-color));
806
741
  padding: .4em 0;
807
742
  }
808
743
 
@@ -869,7 +804,7 @@
869
804
  --ck-button-focus-border-color: var(--ck-interactive-focus-border-color);
870
805
  --ck-button-opacity-disabled: var(--ck-disabled-opacity, var(--ck-opacity-disabled));
871
806
  --ck-button-standard-min-width: 60px;
872
- --ck-button-small-font-size: var(--ck-font-size-sm);
807
+ --ck-button-small-font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
873
808
  --ck-button-small-min-width: 40px;
874
809
  --ck-button-small-padding: var(--ck-spacing-padding-tight) var(--ck-spacing-padding);
875
810
  --ck-button-small-icon-padding: 3px;
@@ -877,10 +812,10 @@
877
812
  }
878
813
 
879
814
  .ck.ck-button, :where(a).ck.ck-button {
880
- --ck-button-background: var(--ck-button-default-background-color);
881
- --ck-button-hover-background: var(--ck-button-default-hover-background-color);
882
- --ck-button-active-background: var(--ck-button-default-active-background-color);
883
- --ck-button-disabled-background: var(--ck-button-default-disabled-background-color);
815
+ --ck-button-background: var(--ck-color-button-default-background, var(--ck-button-default-background-color));
816
+ --ck-button-hover-background: var(--ck-color-button-default-hover-background, var(--ck-button-default-hover-background-color));
817
+ --ck-button-active-background: var(--ck-color-button-default-active-background, var(--ck-button-default-active-background-color));
818
+ --ck-button-disabled-background: var(--ck-color-button-default-disabled-background, var(--ck-button-default-disabled-background-color));
884
819
  background: var(--ck-button-background);
885
820
 
886
821
  &:not(.ck-disabled) {
@@ -918,7 +853,7 @@
918
853
 
919
854
  &:active, &:focus {
920
855
  border-color: var(--ck-button-focus-border-color);
921
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
856
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
922
857
  outline: none;
923
858
  }
924
859
 
@@ -964,7 +899,7 @@
964
899
  background: var(--ck-button-disabled-background);
965
900
 
966
901
  &:active, &:focus {
967
- box-shadow: var(--ck-interactive-focus-disabled-shadow), 0 0;
902
+ box-shadow: var(--ck-focus-disabled-outer-shadow, var(--ck-interactive-focus-disabled-shadow)), 0 0;
968
903
  }
969
904
 
970
905
  & .ck-button__icon, & .ck-button__label {
@@ -1019,19 +954,19 @@
1019
954
  }
1020
955
 
1021
956
  &.ck-on {
1022
- --ck-button-background: var(--ck-button-on-background-color);
1023
- --ck-button-hover-background: var(--ck-button-on-hover-background-color);
1024
- --ck-button-active-background: var(--ck-button-on-active-background-color);
1025
- --ck-button-disabled-background: var(--ck-button-on-disabled-background-color);
1026
- color: var(--ck-button-on-text-color);
957
+ --ck-button-background: var(--ck-color-button-on-background, var(--ck-button-on-background-color));
958
+ --ck-button-hover-background: var(--ck-color-button-on-hover-background, var(--ck-button-on-hover-background-color));
959
+ --ck-button-active-background: var(--ck-color-button-on-active-background, var(--ck-button-on-active-background-color));
960
+ --ck-button-disabled-background: var(--ck-color-button-on-disabled-background, var(--ck-button-on-disabled-background-color));
961
+ color: var(--ck-color-button-on-color, var(--ck-button-on-text-color));
1027
962
  }
1028
963
 
1029
964
  &.ck-button-save {
1030
- color: var(--ck-button-save-color);
965
+ color: var(--ck-color-button-save, var(--ck-button-save-color));
1031
966
  }
1032
967
 
1033
968
  &.ck-button-cancel {
1034
- color: var(--ck-button-cancel-color);
969
+ color: var(--ck-color-button-cancel, var(--ck-button-cancel-color));
1035
970
  }
1036
971
 
1037
972
  [dir="ltr"] & {
@@ -1047,12 +982,12 @@
1047
982
  }
1048
983
 
1049
984
  &.ck-button-action {
1050
- --ck-button-background: var(--ck-button-action-background-color);
1051
- --ck-button-hover-background: var(--ck-button-action-hover-background-color);
1052
- --ck-button-active-background: var(--ck-button-action-active-background-color);
1053
- --ck-button-disabled-background: var(--ck-button-action-disabled-background-color);
985
+ --ck-button-background: var(--ck-color-button-action-background, var(--ck-button-action-background-color));
986
+ --ck-button-hover-background: var(--ck-color-button-action-hover-background, var(--ck-button-action-hover-background-color));
987
+ --ck-button-active-background: var(--ck-color-button-action-active-background, var(--ck-button-action-active-background-color));
988
+ --ck-button-disabled-background: var(--ck-color-button-action-disabled-background, var(--ck-button-action-disabled-background-color));
1054
989
  --ck-button-opacity-disabled: var(--ck-button-action-opacity-disabled);
1055
- color: var(--ck-button-action-text-color);
990
+ color: var(--ck-color-button-action-text, var(--ck-button-action-text-color));
1056
991
  }
1057
992
 
1058
993
  &.ck-button-bold {
@@ -1130,7 +1065,7 @@
1130
1065
  --ck-switch-button-toggle-inner-border-radius: calc(.9 * var(--ck-switch-button-toggle-border-radius));
1131
1066
  --ck-switch-button-off-background-color: var(--ck-color-text-secondary);
1132
1067
  --ck-switch-button-off-hover-background-color: var(--ck-color-base-text-light);
1133
- --ck-switch-button-on-background-color: var(--ck-button-action-background-color);
1068
+ --ck-switch-button-on-background-color: var(--ck-color-button-action-background, var(--ck-button-action-background-color));
1134
1069
  --ck-switch-button-on-hover-background-color: var(--ck-color-interactive-primary-surface-hover);
1135
1070
  --ck-switch-button-inner-background-color: var(--ck-color-surface-canvas);
1136
1071
  }
@@ -1158,7 +1093,7 @@
1158
1093
  outline var(--ck-transition-duration-control) var(--ck-transition-timing-function-control);
1159
1094
  border: var(--ck-border-width-control) solid transparent;
1160
1095
  width: var(--ck-switch-button-toggle-width, 2.61538em);
1161
- background: var(--ck-switch-button-off-background-color);
1096
+ background: var(--ck-color-switch-button-off-background, var(--ck-switch-button-off-background-color));
1162
1097
 
1163
1098
  [dir="ltr"] & {
1164
1099
  margin-left: auto;
@@ -1172,7 +1107,7 @@
1172
1107
  border-radius: var(--ck-switch-button-toggle-inner-border-radius);
1173
1108
  width: var(--ck-switch-button-toggle-inner-size, calc(1.07692em + 1px));
1174
1109
  height: var(--ck-switch-button-toggle-inner-size, calc(1.07692em + 1px));
1175
- background: var(--ck-switch-button-inner-background-color);
1110
+ background: var(--ck-color-switch-button-inner-background, var(--ck-switch-button-inner-background-color));
1176
1111
  transition: all var(--ck-transition-duration-control-emphasized) var(--ck-transition-timing-function-surface);
1177
1112
 
1178
1113
  @media (prefers-reduced-motion: reduce) {
@@ -1183,7 +1118,7 @@
1183
1118
  }
1184
1119
 
1185
1120
  &:hover {
1186
- background: var(--ck-switch-button-off-hover-background-color);
1121
+ background: var(--ck-color-switch-button-off-hover-background, var(--ck-switch-button-off-hover-background-color));
1187
1122
 
1188
1123
  & .ck-button__toggle__inner {
1189
1124
  box-shadow: var(--ck-switch-button-inner-hover-shadow, 0 0 0 5px #0000001a);
@@ -1211,10 +1146,10 @@
1211
1146
 
1212
1147
  &.ck-on {
1213
1148
  & .ck-button__toggle {
1214
- background: var(--ck-switch-button-on-background-color);
1149
+ background: var(--ck-color-switch-button-on-background, var(--ck-switch-button-on-background-color));
1215
1150
 
1216
1151
  &:hover {
1217
- background: var(--ck-switch-button-on-hover-background-color);
1152
+ background: var(--ck-color-switch-button-on-hover-background, var(--ck-switch-button-on-hover-background-color));
1218
1153
  }
1219
1154
 
1220
1155
  & .ck-button__toggle__inner {
@@ -1239,7 +1174,7 @@
1239
1174
  padding: var(--ck-list-item-button-padding);
1240
1175
 
1241
1176
  &, &.ck-on {
1242
- background: var(--ck-list-background-color);
1177
+ background: var(--ck-color-list-background, var(--ck-list-background-color));
1243
1178
  color: var(--ck-color-text);
1244
1179
  }
1245
1180
 
@@ -1254,7 +1189,7 @@
1254
1189
  }
1255
1190
 
1256
1191
  &:hover:not(.ck-disabled), &.ck-button.ck-on:hover, &.ck-on:not(.ck-list-item-button_toggleable), &.ck-on:hover {
1257
- background: var(--ck-list-button-hover-background-color);
1192
+ background: var(--ck-color-list-button-hover-background, var(--ck-list-button-hover-background-color));
1258
1193
 
1259
1194
  &:not(.ck-disabled) {
1260
1195
  color: var(--ck-color-text);
@@ -1584,7 +1519,7 @@
1584
1519
  .ck.ck-dialog {
1585
1520
  border-radius: var(--ck-dialog-border-radius);
1586
1521
  box-shadow: var(--ck-dialog-drop-shadow, var(--ck-dialog-shadow)), 0 0;
1587
- background: var(--ck-dialog-background-color);
1522
+ background: var(--ck-color-dialog-background, var(--ck-dialog-background-color));
1588
1523
  max-height: var(--ck-dialog-max-height);
1589
1524
  max-width: var(--ck-dialog-max-width);
1590
1525
  border: var(--ck-dialog-border);
@@ -1637,7 +1572,7 @@
1637
1572
  --ck-dropdown-panel-background-color: var(--ck-color-surface-container);
1638
1573
  --ck-dropdown-panel-border-color: var(--ck-color-border-container);
1639
1574
  --ck-dropdown-list-background-color: transparent;
1640
- --ck-dropdown-panel-border: var(--ck-border-width-surface) solid var(--ck-dropdown-panel-border-color);
1575
+ --ck-dropdown-panel-border: var(--ck-border-width-surface) solid var(--ck-color-dropdown-panel-border, var(--ck-dropdown-panel-border-color));
1641
1576
  }
1642
1577
 
1643
1578
  .ck.ck-dropdown {
@@ -1704,7 +1639,7 @@
1704
1639
  box-shadow: none;
1705
1640
 
1706
1641
  &:focus {
1707
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
1642
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
1708
1643
  }
1709
1644
  }
1710
1645
 
@@ -1721,6 +1656,10 @@
1721
1656
  display: inline-block;
1722
1657
  }
1723
1658
 
1659
+ &.ck-dropdown__panel_fit-content {
1660
+ max-width: var(--ck-dropdown-max-width, none);
1661
+ }
1662
+
1724
1663
  &.ck-dropdown__panel_ne, &.ck-dropdown__panel_nw, &.ck-dropdown__panel_n, &.ck-dropdown__panel_nmw, &.ck-dropdown__panel_nme {
1725
1664
  bottom: 100%;
1726
1665
  }
@@ -1759,7 +1698,7 @@
1759
1698
  border-radius: var(--ck-dropdown-panel-border-radius);
1760
1699
  box-shadow: var(--ck-shadow-surface-floating), 0 0;
1761
1700
  padding: var(--ck-dropdown-panel-padding);
1762
- background: var(--ck-dropdown-panel-background-color);
1701
+ background: var(--ck-color-dropdown-panel-background, var(--ck-dropdown-panel-background-color));
1763
1702
  border: var(--ck-dropdown-panel-border);
1764
1703
  min-width: 100%;
1765
1704
  bottom: 0;
@@ -1879,7 +1818,7 @@
1879
1818
  &.ck-splitbutton_flatten {
1880
1819
  &:hover, &.ck-splitbutton_open {
1881
1820
  & > .ck-splitbutton__action:not(.ck-disabled), & > .ck-splitbutton__arrow:not(.ck-disabled), & > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover) {
1882
- background-color: var(--ck-color-button-on-background);
1821
+ background-color: var(--ck-color-button-on-background, var(--ck-button-on-background-color));
1883
1822
 
1884
1823
  &:after {
1885
1824
  display: none;
@@ -1889,7 +1828,7 @@
1889
1828
 
1890
1829
  &.ck-splitbutton_open:hover {
1891
1830
  & > .ck-splitbutton__action:not(.ck-disabled), & > .ck-splitbutton__arrow:not(.ck-disabled), & > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover) {
1892
- background-color: var(--ck-color-button-on-hover-background);
1831
+ background-color: var(--ck-color-button-on-hover-background, var(--ck-button-on-hover-background-color));
1893
1832
  }
1894
1833
  }
1895
1834
  }
@@ -1976,7 +1915,7 @@
1976
1915
  border-color: #0000;
1977
1916
 
1978
1917
  &:not(.ck-on) {
1979
- background: var(--ck-button-default-hover-background-color);
1918
+ background: var(--ck-color-button-default-hover-background, var(--ck-button-default-hover-background-color));
1980
1919
  }
1981
1920
  }
1982
1921
  }
@@ -1995,7 +1934,7 @@
1995
1934
  border-color: #0000;
1996
1935
 
1997
1936
  &:not(.ck-on) {
1998
- background: var(--ck-button-default-hover-background-color);
1937
+ background: var(--ck-color-button-default-hover-background, var(--ck-button-default-hover-background-color));
1999
1938
  }
2000
1939
  }
2001
1940
 
@@ -2059,7 +1998,7 @@
2059
1998
  .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel {
2060
1999
  border-radius: var(--ck-dropdown-menu-panel-border-radius);
2061
2000
  box-shadow: var(--ck-shadow-surface-floating), 0 0;
2062
- background: var(--ck-dropdown-panel-background-color);
2001
+ background: var(--ck-color-dropdown-panel-background, var(--ck-dropdown-panel-background-color));
2063
2002
  border: var(--ck-dropdown-panel-border);
2064
2003
  height: fit-content;
2065
2004
  max-width: var(--ck-dropdown-menu-menu-panel-max-width, 75vw);
@@ -2097,22 +2036,35 @@
2097
2036
 
2098
2037
  :root, :host {
2099
2038
  --ck-editor-editable-padding: 1em;
2039
+ --ck-editor-outer-radius: 0;
2040
+ --ck-editor-sticky-panel-outer-radius: 0;
2100
2041
  --ck-editor-frame-border-radius: 0;
2101
- --ck-editor-sticky-panel-border-radius: var(--ck-radius-md);
2042
+ --ck-editor-sticky-panel-border-radius: 0;
2102
2043
  --ck-editor-frame-border: var(--ck-border-width-surface) solid var(--ck-editor-frame-border-color);
2103
2044
  --ck-editor-frame-border-color: var(--ck-color-border-container);
2104
2045
  --ck-editor-editable-focus-border-color: var(--ck-interactive-focus-border-color);
2105
2046
  }
2106
2047
 
2048
+ .ck-rounded-corners {
2049
+ --ck-editor-outer-radius: var(--ck-rounded-corners-radius, var(--ck-radius-corners));
2050
+ --ck-editor-frame-border-radius: var(--ck-editor-outer-radius);
2051
+ --ck-editor-sticky-panel-border-radius: var(--ck-editor-outer-radius);
2052
+ }
2053
+
2107
2054
  .ck.ck-editor__top {
2108
2055
  & .ck-sticky-panel {
2109
2056
  & .ck-sticky-panel__content {
2110
- border-radius: var(--ck-sticky-panel-uniform-border-radius, var(--ck-editor-sticky-panel-border-radius));
2057
+ border-top-left-radius: var(--ck-editor-sticky-panel-border-radius);
2058
+ border-top-right-radius: var(--ck-editor-sticky-panel-border-radius);
2111
2059
  border: var(--ck-editor-frame-border);
2112
2060
  border-bottom-width: 0;
2061
+ border-bottom-right-radius: 0;
2062
+ border-bottom-left-radius: 0;
2113
2063
 
2114
2064
  &.ck-sticky-panel__content_sticky {
2115
2065
  border-bottom-width: var(--ck-border-width-surface);
2066
+ border-top-left-radius: var(--ck-editor-sticky-panel-outer-radius);
2067
+ border-top-right-radius: var(--ck-editor-sticky-panel-outer-radius);
2116
2068
  }
2117
2069
 
2118
2070
  & .ck-menu-bar {
@@ -2123,13 +2075,29 @@
2123
2075
  & .ck-toolbar {
2124
2076
  border: 0;
2125
2077
  }
2078
+
2079
+ & > * {
2080
+ border-radius: 0;
2081
+ }
2082
+
2083
+ & > :first-child {
2084
+ border-top-left-radius: calc(var(--ck-editor-sticky-panel-border-radius) - var(--ck-border-width-surface));
2085
+ border-top-right-radius: calc(var(--ck-editor-sticky-panel-border-radius) - var(--ck-border-width-surface));
2086
+ }
2087
+
2088
+ &.ck-sticky-panel__content_sticky > :first-child {
2089
+ border-top-left-radius: calc(var(--ck-editor-sticky-panel-outer-radius) - var(--ck-border-width-surface));
2090
+ border-top-right-radius: calc(var(--ck-editor-sticky-panel-outer-radius) - var(--ck-border-width-surface));
2091
+ }
2126
2092
  }
2127
2093
  }
2128
2094
  }
2129
2095
 
2130
- .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
2096
+ .ck.ck-editor__editable_root:not(.ck-editor__nested-editable) {
2131
2097
  border-radius: var(--ck-editor-frame-border-radius);
2098
+ }
2132
2099
 
2100
+ .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
2133
2101
  &.ck-focused {
2134
2102
  border-color: var(--ck-editor-editable-focus-border-color);
2135
2103
  box-shadow: var(--ck-inner-shadow, var(--ck-inset-shadow-sm)), 0 0;
@@ -2170,13 +2138,29 @@
2170
2138
 
2171
2139
  .ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_n"] {
2172
2140
  &:after {
2173
- border-bottom-color: var(--ck-balloon-panel-background-color);
2141
+ border-bottom-color: var(--ck-color-panel-background, var(--ck-balloon-panel-background-color));
2174
2142
  }
2175
2143
  }
2176
2144
 
2177
2145
  .ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_s"] {
2178
2146
  &:after {
2179
- border-top-color: var(--ck-balloon-panel-background-color);
2147
+ border-top-color: var(--ck-color-panel-background, var(--ck-balloon-panel-background-color));
2148
+ }
2149
+ }
2150
+
2151
+ .ck.ck-toolbar-container {
2152
+ & > .ck {
2153
+ border-radius: 0;
2154
+ }
2155
+
2156
+ & > .ck:first-child {
2157
+ border-top-left-radius: calc(var(--ck-balloon-panel-border-radius) - var(--ck-border-width-surface));
2158
+ border-top-right-radius: calc(var(--ck-balloon-panel-border-radius) - var(--ck-border-width-surface));
2159
+ }
2160
+
2161
+ & > .ck:last-child {
2162
+ border-bottom-left-radius: calc(var(--ck-balloon-panel-border-radius) - var(--ck-border-width-surface));
2163
+ border-bottom-right-radius: calc(var(--ck-balloon-panel-border-radius) - var(--ck-border-width-surface));
2180
2164
  }
2181
2165
  }
2182
2166
 
@@ -2240,7 +2224,7 @@
2240
2224
  --ck-form-header-padding-block: var(--ck-spacing-padding-compact);
2241
2225
  --ck-form-header-padding: var(--ck-spacing-padding-comfortable) var(--ck-spacing-padding-comfortable) var(--ck-spacing-padding-compact) var(--ck-spacing-padding-comfortable);
2242
2226
  --ck-form-header-with-back-button-padding-inline-start: var(--ck-spacing-padding-comfortable);
2243
- --ck-form-header-label-font-size: var(--ck-font-size-base);
2227
+ --ck-form-header-label-font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
2244
2228
  }
2245
2229
 
2246
2230
  .ck.ck-form__header {
@@ -2327,18 +2311,18 @@
2327
2311
  --ck-input-disabled-background-color: #f2f2f2;
2328
2312
  --ck-input-disabled-border-color: var(--ck-color-border-control);
2329
2313
  --ck-input-disabled-text-color: var(--ck-color-text-disabled);
2330
- --ck-input-border: var(--ck-border-width-control) solid var(--ck-input-border-color);
2314
+ --ck-input-border: var(--ck-border-width-control) solid var(--ck-color-input-border, var(--ck-input-border-color));
2331
2315
  --ck-input-focus-border-color: var(--ck-interactive-focus-border-color);
2332
2316
  --ck-input-text-width: var(--ck-input-width);
2333
2317
  }
2334
2318
 
2335
2319
  .ck.ck-input {
2336
2320
  border-radius: var(--ck-input-border-radius);
2337
- background: var(--ck-input-background-color);
2321
+ background: var(--ck-color-input-background, var(--ck-input-background-color));
2338
2322
  border: var(--ck-input-border);
2339
2323
  padding: var(--ck-input-padding);
2340
2324
  min-width: var(--ck-input-width);
2341
- color: var(--ck-input-text-color);
2325
+ color: var(--ck-color-input-text, var(--ck-input-text-color));
2342
2326
  font-size: var(--ck-input-font-size);
2343
2327
  min-height: var(--ck-size-control-min-height);
2344
2328
  transition: var(--ck-transition-control-fast);
@@ -2349,22 +2333,22 @@
2349
2333
 
2350
2334
  &:focus {
2351
2335
  border-color: var(--ck-input-focus-border-color);
2352
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
2336
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
2353
2337
  outline: none;
2354
2338
  }
2355
2339
 
2356
2340
  &[readonly] {
2357
- border: var(--ck-border-width-control) solid var(--ck-input-disabled-border-color);
2358
- background: var(--ck-input-disabled-background-color);
2359
- color: var(--ck-input-disabled-text-color);
2341
+ border: var(--ck-border-width-control) solid var(--ck-color-input-disabled-border, var(--ck-input-disabled-border-color));
2342
+ background: var(--ck-color-input-disabled-background, var(--ck-input-disabled-background-color));
2343
+ color: var(--ck-color-input-disabled-text, var(--ck-input-disabled-text-color));
2360
2344
 
2361
2345
  &:focus {
2362
- box-shadow: var(--ck-interactive-focus-disabled-shadow), 0 0;
2346
+ box-shadow: var(--ck-focus-disabled-outer-shadow, var(--ck-interactive-focus-disabled-shadow)), 0 0;
2363
2347
  }
2364
2348
  }
2365
2349
 
2366
2350
  &.ck-error {
2367
- border-color: var(--ck-input-error-border-color);
2351
+ border-color: var(--ck-color-input-error-border, var(--ck-input-error-border-color));
2368
2352
  animation: ck-input-shake var(--ck-animation-duration-feedback) var(--ck-animation-timing-function-feedback) var(--ck-animation-fill-mode-feedback);
2369
2353
 
2370
2354
  @media (prefers-reduced-motion: reduce) {
@@ -2372,7 +2356,7 @@
2372
2356
  }
2373
2357
 
2374
2358
  &:focus {
2375
- box-shadow: var(--ck-interactive-focus-error-shadow), 0 0;
2359
+ box-shadow: var(--ck-focus-error-outer-shadow, var(--ck-interactive-focus-error-shadow)), 0 0;
2376
2360
  }
2377
2361
  }
2378
2362
  }
@@ -2482,16 +2466,16 @@
2482
2466
  }
2483
2467
 
2484
2468
  &.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 {
2485
- color: var(--ck-input-disabled-text-color);
2469
+ color: var(--ck-color-input-disabled-text, var(--ck-input-disabled-text-color));
2486
2470
  }
2487
2471
 
2488
2472
  &.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 {
2489
2473
  [dir="ltr"] & {
2490
- transform: translate(var(--ck-labeled-field-label-default-position-x, var(--ck-labeled-field-label-start-gap)), calc((var(--ck-size-control-min-height) - 1lh) / 2)) scale(1);
2474
+ transform: translate(var(--ck-labeled-field-label-default-position-x, var(--ck-labeled-field-label-start-gap)), var(--ck-labeled-field-label-default-position-y, calc((var(--ck-size-control-min-height) - 1lh) / 2))) scale(1);
2491
2475
  }
2492
2476
 
2493
2477
  [dir="rtl"] & {
2494
- transform: translate(calc(-1 * var(--ck-labeled-field-label-default-position-x, var(--ck-labeled-field-label-start-gap))), calc((var(--ck-size-control-min-height) - 1lh) / 2)) scale(1);
2478
+ transform: translate(calc(-1 * var(--ck-labeled-field-label-default-position-x, var(--ck-labeled-field-label-start-gap))), var(--ck-labeled-field-label-default-position-y, calc((var(--ck-size-control-min-height) - 1lh) / 2))) scale(1);
2495
2479
  }
2496
2480
 
2497
2481
  max-width: var(--ck-labeled-field-empty-unfocused-max-width, calc(100% - 2 * var(--ck-labeled-field-label-start-gap)));
@@ -2534,16 +2518,16 @@
2534
2518
  --ck-list-separator-inline-margin: calc(-1 * var(--ck-spacing-padding-compact));
2535
2519
  --ck-list-border-radius: var(--ck-border-radius-surface);
2536
2520
  --ck-list-background-color: var(--ck-color-surface-control);
2537
- --ck-list-button-hover-background-color: var(--ck-button-default-hover-background-color);
2538
- --ck-list-button-on-background-color: var(--ck-button-on-text-color);
2521
+ --ck-list-button-hover-background-color: var(--ck-color-button-default-hover-background, var(--ck-button-default-hover-background-color));
2522
+ --ck-list-button-on-background-color: var(--ck-color-button-on-color, var(--ck-button-on-text-color));
2539
2523
  --ck-list-button-on-text-color: var(--ck-color-text-inverse);
2540
2524
  --ck-list-divider-color: var(--ck-color-divider);
2541
- --ck-list-group-label-font-size: var(--ck-font-size-sm);
2525
+ --ck-list-group-label-font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
2542
2526
  }
2543
2527
 
2544
2528
  .ck.ck-list {
2545
2529
  border-radius: var(--ck-list-border-radius);
2546
- background: var(--ck-list-background-color);
2530
+ background: var(--ck-color-list-background, var(--ck-list-background-color));
2547
2531
  padding: var(--ck-list-padding);
2548
2532
  -webkit-user-select: none;
2549
2533
  user-select: none;
@@ -2586,7 +2570,7 @@
2586
2570
  }
2587
2571
 
2588
2572
  & .ck-button__label {
2589
- line-height: calc(var(--ck-line-height-base) * var(--ck-font-size-base));
2573
+ line-height: calc(var(--ck-line-height-base) * var(--ck-font-size-normal, var(--ck-font-size-base)));
2590
2574
  }
2591
2575
 
2592
2576
  &:active {
@@ -2594,15 +2578,15 @@
2594
2578
  }
2595
2579
 
2596
2580
  &.ck-on {
2597
- background: var(--ck-list-button-on-background-color);
2598
- color: var(--ck-list-button-on-text-color);
2581
+ background: var(--ck-color-list-button-on-background, var(--ck-list-button-on-background-color));
2582
+ color: var(--ck-color-list-button-on-text, var(--ck-list-button-on-text-color));
2599
2583
 
2600
2584
  &:active {
2601
2585
  box-shadow: none;
2602
2586
  }
2603
2587
 
2604
2588
  &:hover:not(.ck-disabled) {
2605
- background: var(--ck-list-button-on-background-color);
2589
+ background: var(--ck-color-list-button-on-background-focus, var(--ck-color-list-button-on-background, var(--ck-list-button-on-background-color)));
2606
2590
  }
2607
2591
 
2608
2592
  &:focus:not(.ck-disabled) {
@@ -2611,17 +2595,17 @@
2611
2595
  }
2612
2596
 
2613
2597
  &:hover:not(.ck-disabled) {
2614
- background: var(--ck-list-button-hover-background-color);
2598
+ background: var(--ck-color-list-button-hover-background, var(--ck-list-button-hover-background-color));
2615
2599
  }
2616
2600
  }
2617
2601
 
2618
2602
  & > .ck-button.ck-switchbutton {
2619
2603
  &.ck-on {
2620
- background: var(--ck-list-background-color);
2604
+ background: var(--ck-color-list-background, var(--ck-list-background-color));
2621
2605
  color: inherit;
2622
2606
 
2623
2607
  &:hover:not(.ck-disabled) {
2624
- background: var(--ck-list-button-hover-background-color);
2608
+ background: var(--ck-color-list-button-hover-background, var(--ck-list-button-hover-background-color));
2625
2609
  color: inherit;
2626
2610
  }
2627
2611
  }
@@ -2655,7 +2639,7 @@
2655
2639
 
2656
2640
  :root, :host {
2657
2641
  --ck-balloon-panel-border-radius: var(--ck-border-radius-surface);
2658
- --ck-balloon-panel-border: var(--ck-border-width-surface) solid var(--ck-balloon-panel-border-color);
2642
+ --ck-balloon-panel-border: var(--ck-balloon-border-width, var(--ck-border-width-surface)) solid var(--ck-color-panel-border, var(--ck-balloon-panel-border-color));
2659
2643
  --ck-balloon-panel-background-color: var(--ck-color-surface-container);
2660
2644
  --ck-balloon-panel-border-color: var(--ck-color-border-container);
2661
2645
  --ck-balloon-panel-arrow-display: none;
@@ -2667,7 +2651,7 @@
2667
2651
  .ck.ck-balloon-panel {
2668
2652
  border-radius: var(--ck-balloon-panel-border-radius);
2669
2653
  box-shadow: var(--ck-shadow-surface-floating), 0 0;
2670
- background: var(--ck-balloon-panel-background-color);
2654
+ background: var(--ck-color-panel-background, var(--ck-balloon-panel-background-color));
2671
2655
  border: var(--ck-balloon-panel-border);
2672
2656
  min-height: 15px;
2673
2657
  z-index: var(--ck-layer-panel);
@@ -2699,14 +2683,14 @@
2699
2683
  }
2700
2684
 
2701
2685
  &:before {
2702
- border-color: transparent transparent var(--ck-balloon-panel-border-color) transparent;
2703
- margin-top: calc(-1 * var(--ck-border-width-surface));
2686
+ border-color: transparent transparent var(--ck-color-panel-border, var(--ck-balloon-panel-border-color)) transparent;
2687
+ margin-top: calc(-1 * var(--ck-balloon-border-width, var(--ck-border-width-surface)));
2704
2688
  z-index: var(--ck-layer-balloon-arrow-back);
2705
2689
  }
2706
2690
 
2707
2691
  &:after {
2708
- border-color: transparent transparent var(--ck-balloon-panel-background-color) transparent;
2709
- margin-top: calc(var(--ck-balloon-arrow-offset) - var(--ck-border-width-surface));
2692
+ border-color: transparent transparent var(--ck-color-panel-background, var(--ck-balloon-panel-background-color)) transparent;
2693
+ margin-top: calc(var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width, var(--ck-border-width-surface)));
2710
2694
  z-index: var(--ck-layer-balloon-arrow-front);
2711
2695
  }
2712
2696
  }
@@ -2717,15 +2701,15 @@
2717
2701
  }
2718
2702
 
2719
2703
  &:before {
2720
- border-color: var(--ck-balloon-panel-border-color) transparent transparent;
2704
+ border-color: var(--ck-color-panel-border, var(--ck-balloon-panel-border-color)) transparent transparent;
2721
2705
  filter: drop-shadow(var(--ck-balloon-arrow-drop-shadow, 0 2px 2px var(--ck-color-shadow-drop)));
2722
- margin-bottom: calc(-1 * var(--ck-border-width-surface));
2706
+ margin-bottom: calc(-1 * var(--ck-balloon-border-width, var(--ck-border-width-surface)));
2723
2707
  z-index: var(--ck-layer-balloon-arrow-back);
2724
2708
  }
2725
2709
 
2726
2710
  &:after {
2727
- border-color: var(--ck-balloon-panel-background-color) transparent transparent transparent;
2728
- margin-bottom: calc(var(--ck-balloon-arrow-offset) - var(--ck-border-width-surface));
2711
+ border-color: var(--ck-color-panel-background, var(--ck-balloon-panel-background-color)) transparent transparent transparent;
2712
+ margin-bottom: calc(var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width, var(--ck-border-width-surface)));
2729
2713
  z-index: var(--ck-layer-balloon-arrow-front);
2730
2714
  }
2731
2715
  }
@@ -2736,13 +2720,13 @@
2736
2720
  }
2737
2721
 
2738
2722
  &:before {
2739
- border-color: transparent transparent transparent var(--ck-balloon-panel-border-color);
2740
- margin-right: calc(-1 * var(--ck-border-width-surface));
2723
+ border-color: transparent transparent transparent var(--ck-color-panel-border, var(--ck-balloon-panel-border-color));
2724
+ margin-right: calc(-1 * var(--ck-balloon-border-width, var(--ck-border-width-surface)));
2741
2725
  }
2742
2726
 
2743
2727
  &:after {
2744
- border-color: transparent transparent transparent var(--ck-balloon-panel-background-color);
2745
- margin-right: calc(var(--ck-balloon-arrow-offset) - var(--ck-border-width-surface));
2728
+ border-color: transparent transparent transparent var(--ck-color-panel-background, var(--ck-balloon-panel-background-color));
2729
+ margin-right: calc(var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width, var(--ck-border-width-surface)));
2746
2730
  }
2747
2731
  }
2748
2732
 
@@ -2752,13 +2736,13 @@
2752
2736
  }
2753
2737
 
2754
2738
  &:before {
2755
- border-color: transparent var(--ck-balloon-panel-border-color) transparent transparent;
2756
- margin-left: calc(-1 * var(--ck-border-width-surface));
2739
+ border-color: transparent var(--ck-color-panel-border, var(--ck-balloon-panel-border-color)) transparent transparent;
2740
+ margin-left: calc(-1 * var(--ck-balloon-border-width, var(--ck-border-width-surface)));
2757
2741
  }
2758
2742
 
2759
2743
  &:after {
2760
- border-color: transparent var(--ck-balloon-panel-background-color) transparent transparent;
2761
- margin-left: calc(var(--ck-balloon-arrow-offset) - var(--ck-border-width-surface));
2744
+ border-color: transparent var(--ck-color-panel-background, var(--ck-balloon-panel-background-color)) transparent transparent;
2745
+ margin-left: calc(var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width, var(--ck-border-width-surface)));
2762
2746
  }
2763
2747
  }
2764
2748
 
@@ -2860,7 +2844,7 @@
2860
2844
  }
2861
2845
 
2862
2846
  .ck .ck-balloon-rotator__navigation {
2863
- background: var(--ck-toolbar-background-color);
2847
+ background: var(--ck-color-toolbar-background, var(--ck-toolbar-background-color));
2864
2848
  border-bottom: var(--ck-border-divider);
2865
2849
  padding: 0 var(--ck-spacing-padding);
2866
2850
  border-radius: var(--ck-balloon-panel-border-radius) var(--ck-balloon-panel-border-radius) 0 0;
@@ -2897,7 +2881,7 @@
2897
2881
 
2898
2882
  .ck .ck-fake-panel div {
2899
2883
  box-shadow: var(--ck-shadow-surface-floating), 0 0;
2900
- background: var(--ck-balloon-panel-background-color);
2884
+ background: var(--ck-color-panel-background, var(--ck-balloon-panel-background-color));
2901
2885
  border: var(--ck-balloon-panel-border);
2902
2886
  border-radius: var(--ck-border-radius-surface);
2903
2887
  width: 100%;
@@ -2943,7 +2927,7 @@
2943
2927
  }
2944
2928
 
2945
2929
  :root, :host {
2946
- --ck-sticky-panel-uniform-border-radius: 0;
2930
+ --ck-sticky-panel-uniform-border-radius: initial;
2947
2931
  }
2948
2932
 
2949
2933
  .ck.ck-sticky-panel {
@@ -2966,7 +2950,7 @@
2966
2950
  --ck-autocomplete-results-max-height: 200px;
2967
2951
  --ck-autocomplete-results-uniform-border-radius: var(--ck-border-radius-uniform);
2968
2952
  --ck-autocomplete-results-border-radius: var(--ck-border-radius-surface-attached);
2969
- --ck-autocomplete-results-border: var(--ck-border-width-surface) solid var(--ck-dropdown-panel-border-color);
2953
+ --ck-autocomplete-results-border: var(--ck-border-width-surface) solid var(--ck-color-dropdown-panel-border, var(--ck-dropdown-panel-border-color));
2970
2954
  --ck-autocomplete-results-background-color: var(--ck-color-surface-container);
2971
2955
  }
2972
2956
 
@@ -3003,7 +2987,7 @@
3003
2987
  :root, :host {
3004
2988
  --ck-search-results-info-padding: var(--ck-spacing-gap) var(--ck-spacing-padding-comfortable);
3005
2989
  --ck-search-results-info-primary-font-size: var(--ck-font-size-md);
3006
- --ck-search-results-info-secondary-font-size: var(--ck-font-size-sm);
2990
+ --ck-search-results-info-secondary-font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
3007
2991
  }
3008
2992
 
3009
2993
  .ck.ck-search {
@@ -3147,7 +3131,7 @@
3147
3131
  --ck-tooltip-border-radius: var(--ck-radius-md);
3148
3132
  --ck-tooltip-background-color: var(--ck-color-surface-inverse);
3149
3133
  --ck-tooltip-text-color: var(--ck-color-text-inverse);
3150
- --ck-tooltip-text-font-size: var(--ck-font-size-xs);
3134
+ --ck-tooltip-text-font-size: var(--ck-font-size-tiny, var(--ck-font-size-xs));
3151
3135
  --ck-tooltip-arrow-half-width: 4px;
3152
3136
  --ck-tooltip-arrow-height: 4px;
3153
3137
  --ck-tooltip-arrow-offset: 1px;
@@ -3155,7 +3139,7 @@
3155
3139
 
3156
3140
  .ck.ck-balloon-panel.ck-tooltip {
3157
3141
  --ck-balloon-panel-border: var(--ck-tooltip-border);
3158
- --ck-balloon-panel-background-color: var(--ck-tooltip-background-color);
3142
+ --ck-balloon-panel-background-color: var(--ck-color-tooltip-background, var(--ck-tooltip-background-color));
3159
3143
  --ck-balloon-arrow-half-width: var(--ck-tooltip-arrow-half-width);
3160
3144
  --ck-balloon-arrow-height: var(--ck-tooltip-arrow-height);
3161
3145
  --ck-balloon-arrow-offset: var(--ck-tooltip-arrow-offset);
@@ -3170,7 +3154,7 @@
3170
3154
 
3171
3155
  & .ck-tooltip__text {
3172
3156
  font-size: var(--ck-tooltip-text-font-size);
3173
- color: var(--ck-tooltip-text-color);
3157
+ color: var(--ck-color-tooltip-text, var(--ck-tooltip-text-color));
3174
3158
  line-height: 1.5;
3175
3159
  }
3176
3160
 
@@ -3231,12 +3215,12 @@
3231
3215
  --ck-toolbar-vertical-button-border-radius: var(--ck-border-radius-control);
3232
3216
  --ck-toolbar-background-color: var(--ck-color-surface-container);
3233
3217
  --ck-toolbar-border-color: var(--ck-color-border-container);
3234
- --ck-toolbar-border: var(--ck-border-width-surface) solid var(--ck-toolbar-border-color);
3218
+ --ck-toolbar-border: var(--ck-border-width-surface) solid var(--ck-color-toolbar-border, var(--ck-toolbar-border-color));
3235
3219
  }
3236
3220
 
3237
3221
  .ck.ck-toolbar {
3238
3222
  border-radius: var(--ck-toolbar-border-radius);
3239
- background: var(--ck-toolbar-background-color);
3223
+ background: var(--ck-color-toolbar-background, var(--ck-toolbar-background-color));
3240
3224
  padding: var(--ck-toolbar-padding);
3241
3225
  border: var(--ck-toolbar-border);
3242
3226
  -webkit-user-select: none;
@@ -3550,7 +3534,7 @@
3550
3534
  .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel {
3551
3535
  border-radius: var(--ck-menu-bar-panel-border-radius);
3552
3536
  box-shadow: var(--ck-shadow-surface-floating), 0 0;
3553
- background: var(--ck-dropdown-panel-background-color);
3537
+ background: var(--ck-color-dropdown-panel-background, var(--ck-dropdown-panel-background-color));
3554
3538
  border: var(--ck-dropdown-panel-border);
3555
3539
  height: fit-content;
3556
3540
  z-index: var(--ck-z-panel, var(--ck-z-overlay));
@@ -3558,6 +3542,10 @@
3558
3542
  position: absolute;
3559
3543
  bottom: 0;
3560
3544
 
3545
+ &.ck-menu-bar__menu__panel_fit-content {
3546
+ max-width: var(--ck-menu-bar-menu-max-width, none);
3547
+ }
3548
+
3561
3549
  &.ck-menu-bar__menu__panel_position_es, &.ck-menu-bar__menu__panel_position_se {
3562
3550
  border-radius: var(--ck-menu-bar-panel-uniform-border-radius, var(--ck-border-radius-surface-cut-top-left));
3563
3551
  }
@@ -3632,7 +3620,7 @@
3632
3620
  &:focus, &:active {
3633
3621
  z-index: var(--ck-layer-control-raised);
3634
3622
  border-color: var(--ck-menu-bar-item-focus-border-color);
3635
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
3623
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
3636
3624
  outline: none;
3637
3625
  position: relative;
3638
3626
  }
@@ -3691,7 +3679,7 @@
3691
3679
  --ck-tab-button-margin-block: var(--ck-tab-button-margin-gap);
3692
3680
  --ck-tab-button-margin-inline: var(--ck-tab-button-margin-bar);
3693
3681
  --ck-tab-button-icon-size: 20px;
3694
- --ck-tab-button-border-radius: var(--ck-radius-base);
3682
+ --ck-tab-button-border-radius: var(--ck-border-radius, var(--ck-radius-base));
3695
3683
  --ck-tab-button-border-width: var(--ck-border-width-control);
3696
3684
  --ck-tab-button-with-text-padding-inline: var(--ck-spacing-padding-compact);
3697
3685
  --ck-tab-button-background: transparent;
@@ -3846,7 +3834,7 @@
3846
3834
 
3847
3835
  &.ck-tab-panel_disabled {
3848
3836
  pointer-events: none;
3849
- opacity: var(--ck-disabled-opacity);
3837
+ opacity: var(--ck-disabled-opacity, var(--ck-opacity-disabled));
3850
3838
  }
3851
3839
  }
3852
3840