@ckeditor/ckeditor5-comments 49.0.0-alpha.5 → 49.0.0-alpha.6

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 (78) hide show
  1. package/dist/index-content.css +6 -6
  2. package/dist/index-editor.css +30 -25
  3. package/dist/index.css +36 -31
  4. package/dist/index.js +11 -11
  5. package/dist/translations/af.umd.js +1 -1
  6. package/dist/translations/ar.umd.js +1 -1
  7. package/dist/translations/ast.umd.js +1 -1
  8. package/dist/translations/az.umd.js +1 -1
  9. package/dist/translations/be.umd.js +1 -1
  10. package/dist/translations/bg.umd.js +1 -1
  11. package/dist/translations/bn.umd.js +1 -1
  12. package/dist/translations/bs.umd.js +1 -1
  13. package/dist/translations/ca.umd.js +1 -1
  14. package/dist/translations/cs.umd.js +1 -1
  15. package/dist/translations/da.umd.js +1 -1
  16. package/dist/translations/de-ch.umd.js +1 -1
  17. package/dist/translations/de.umd.js +1 -1
  18. package/dist/translations/el.umd.js +1 -1
  19. package/dist/translations/en-au.umd.js +1 -1
  20. package/dist/translations/en-gb.umd.js +1 -1
  21. package/dist/translations/en.umd.js +1 -1
  22. package/dist/translations/eo.umd.js +1 -1
  23. package/dist/translations/es-co.umd.js +1 -1
  24. package/dist/translations/es.umd.js +1 -1
  25. package/dist/translations/et.umd.js +1 -1
  26. package/dist/translations/eu.umd.js +1 -1
  27. package/dist/translations/fa.umd.js +1 -1
  28. package/dist/translations/fi.umd.js +1 -1
  29. package/dist/translations/fr.umd.js +1 -1
  30. package/dist/translations/gl.umd.js +1 -1
  31. package/dist/translations/gu.umd.js +1 -1
  32. package/dist/translations/he.umd.js +1 -1
  33. package/dist/translations/hi.umd.js +1 -1
  34. package/dist/translations/hr.umd.js +1 -1
  35. package/dist/translations/hu.umd.js +1 -1
  36. package/dist/translations/hy.umd.js +1 -1
  37. package/dist/translations/id.umd.js +1 -1
  38. package/dist/translations/it.umd.js +1 -1
  39. package/dist/translations/ja.umd.js +1 -1
  40. package/dist/translations/jv.umd.js +1 -1
  41. package/dist/translations/kk.umd.js +1 -1
  42. package/dist/translations/km.umd.js +1 -1
  43. package/dist/translations/kn.umd.js +1 -1
  44. package/dist/translations/ko.umd.js +1 -1
  45. package/dist/translations/ku.umd.js +1 -1
  46. package/dist/translations/lt.umd.js +1 -1
  47. package/dist/translations/lv.umd.js +1 -1
  48. package/dist/translations/ms.umd.js +1 -1
  49. package/dist/translations/nb.umd.js +1 -1
  50. package/dist/translations/ne.umd.js +1 -1
  51. package/dist/translations/nl.umd.js +1 -1
  52. package/dist/translations/no.umd.js +1 -1
  53. package/dist/translations/oc.umd.js +1 -1
  54. package/dist/translations/pl.umd.js +1 -1
  55. package/dist/translations/pt-br.umd.js +1 -1
  56. package/dist/translations/pt.umd.js +1 -1
  57. package/dist/translations/ro.umd.js +1 -1
  58. package/dist/translations/ru.umd.js +1 -1
  59. package/dist/translations/si.umd.js +1 -1
  60. package/dist/translations/sk.umd.js +1 -1
  61. package/dist/translations/sl.umd.js +1 -1
  62. package/dist/translations/sq.umd.js +1 -1
  63. package/dist/translations/sr-latn.umd.js +1 -1
  64. package/dist/translations/sr.umd.js +1 -1
  65. package/dist/translations/sv.umd.js +1 -1
  66. package/dist/translations/th.umd.js +1 -1
  67. package/dist/translations/ti.umd.js +1 -1
  68. package/dist/translations/tk.umd.js +1 -1
  69. package/dist/translations/tr.umd.js +1 -1
  70. package/dist/translations/tt.umd.js +1 -1
  71. package/dist/translations/ug.umd.js +1 -1
  72. package/dist/translations/uk.umd.js +1 -1
  73. package/dist/translations/ur.umd.js +1 -1
  74. package/dist/translations/uz.umd.js +1 -1
  75. package/dist/translations/vi.umd.js +1 -1
  76. package/dist/translations/zh-cn.umd.js +1 -1
  77. package/dist/translations/zh.umd.js +1 -1
  78. package/package.json +16 -16
package/dist/index-content.css CHANGED
@@ -8,28 +8,28 @@
8
8
  }
9
9
 
10
10
  .ck-content .ck-comment-marker {
11
- background: var(--ck-comment-marker-color);
11
+ background: var(--ck-color-comment-marker, var(--ck-comment-marker-color));
12
12
  border-top: 3px solid #0000;
13
13
  border-bottom: 3px solid #0000;
14
14
 
15
15
  &.ck-widget {
16
- border: 3px solid var(--ck-comment-marker-color);
16
+ border: 3px solid var(--ck-color-comment-marker, var(--ck-comment-marker-color));
17
17
  background-color: #0000;
18
18
  }
19
19
  }
20
20
 
21
21
  .ck-content .ck-comment-marker--active {
22
- background: var(--ck-comment-marker-active-color);
22
+ background: var(--ck-color-comment-marker-active, var(--ck-comment-marker-active-color));
23
23
 
24
24
  & .ck-comment-marker {
25
- background: var(--ck-comment-marker-active-color);
25
+ background: var(--ck-color-comment-marker-active, var(--ck-comment-marker-active-color));
26
26
  }
27
27
 
28
28
  &.ck-widget {
29
- border-color: var(--ck-comment-marker-active-color);
29
+ border-color: var(--ck-color-comment-marker-active, var(--ck-comment-marker-active-color));
30
30
 
31
31
  & .ck-comment-marker {
32
- background-color: var(--ck-comment-marker-color);
32
+ background-color: var(--ck-color-comment-marker, var(--ck-comment-marker-color));
33
33
  }
34
34
  }
35
35
  }
package/dist/index-editor.css CHANGED
@@ -4,6 +4,7 @@
4
4
  */
5
5
  :root, :host {
6
6
  --ck-comment-background-color: #f7f9fd;
7
+ --ck-comment-focus-background-color: var(--ck-color-interactive-hover-surface);
7
8
  --ck-comment-separator-color: var(--ck-color-comment-separator, #cddeef);
8
9
  --ck-comment-remove-background-color: var(--ck-color-comment-remove-background, var(--ck-color-light-red));
9
10
  --ck-comment-input-background-color: var(--ck-color-surface-canvas);
@@ -15,7 +16,7 @@
15
16
  }
16
17
 
17
18
  .ck .ck-comment__wrapper {
18
- font-size: var(--ck-font-size-base);
19
+ font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
19
20
  transition: all var(--ck-transition-duration-control-emphasized) linear;
20
21
  outline: 0;
21
22
  position: relative;
@@ -29,6 +30,10 @@
29
30
  border-top-left-radius: var(--ck-comment-border-radius);
30
31
  }
31
32
 
33
+ &:focus {
34
+ background: var(--ck-comment-focus-background-color);
35
+ }
36
+
32
37
  &:has( + .ck-thread__comment-count) {
33
38
  & .ck-comment {
34
39
  &:after {
@@ -50,7 +55,7 @@
50
55
  /* Avatar margin size) */
51
56
  + 2px);
52
57
  width: var(--ck-comment-thread-line-size);
53
- background-color: var(--ck-comment-separator-color);
58
+ background-color: var(--ck-color-comment-separator, var(--ck-comment-separator-color));
54
59
  top: calc(var(--ck-user-avatar-size) + (2 * var(--ck-spacing-padding, var(--ck-spacing-sm))));
55
60
  height: calc(100% - var(--ck-user-avatar-size) - var(--ck-spacing-padding));
56
61
  border-radius: var(--ck-comment-border-radius);
@@ -60,7 +65,7 @@
60
65
  }
61
66
 
62
67
  .ck .ck-comment--edit {
63
- background-color: var(--ck-comment-input-background-color);
68
+ background-color: var(--ck-color-comment-input-background, var(--ck-comment-input-background-color));
64
69
 
65
70
  &:after {
66
71
  opacity: 0;
@@ -142,7 +147,7 @@
142
147
  }
143
148
 
144
149
  .ck .ck-comment__external {
145
- color: var(--ck-annotation-info-color);
150
+ color: var(--ck-color-annotation-info, var(--ck-annotation-info-color));
146
151
  font-style: italic;
147
152
  font-size: var(--ck-font-size-tiny, var(--ck-font-size-xs));
148
153
  margin-top: var(--ck-spacing-standard, var(--ck-spacing-base));
@@ -172,8 +177,8 @@
172
177
  :root, :host {
173
178
  --ck-thread-remove-background-color: var(--ck-color-thread-remove-background, var(--ck-comment-remove-background-color));
174
179
  --ck-comment-count-color: #223047;
175
- --ck-thread-header-background-color: #f3f6fd;
176
- --ck-thread-header-active-background-color: var(--ck-color-interactive-selected-surface);
180
+ --ck-thread-header-background-color: var(--ck-color-thread-header-background, #f3f6fd);
181
+ --ck-thread-header-active-background-color: var(--ck-color-thread-header-active-background, var(--ck-color-interactive-selected-surface));
177
182
  --ck-thread-header-button-hover-background: var(--ck-color-interactive-primary-surface-muted);
178
183
  --ck-thread-unlinked-background-color: var(--ck-color-unlinked-background, #f5f5f5);
179
184
  --ck-thread-unlinked-active-background-color: var(--ck-color-unlinked-active-background, #ebebeb);
@@ -208,7 +213,7 @@
208
213
 
209
214
  .ck-balloon-panel:has(.ck-thread:focus) {
210
215
  border: var(--ck-interactive-focus-ring);
211
- box-shadow: var(--ck-shadow-surface-floating), var(--ck-interactive-focus-shadow), 0 0;
216
+ box-shadow: var(--ck-shadow-surface-floating), var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
212
217
  outline: none;
213
218
  }
214
219
 
@@ -216,7 +221,7 @@
216
221
  padding: var(--ck-thread-header-padding);
217
222
  background-color: var(--ck-thread-header-background-color);
218
223
  line-height: 1.57;
219
- font-size: var(--ck-font-size-base);
224
+ font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
220
225
  justify-content: space-between;
221
226
  display: flex;
222
227
 
@@ -267,7 +272,7 @@
267
272
 
268
273
  &:focus {
269
274
  border: var(--ck-interactive-focus-ring);
270
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
275
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
271
276
  outline: none;
272
277
  }
273
278
  }
@@ -289,8 +294,8 @@
289
294
  .ck .ck-thread__comment-count {
290
295
  --ck-user-avatar-size: 32px;
291
296
  padding-left: calc(var(--ck-user-avatar-size) + var(--ck-spacing-standard, var(--ck-spacing-base)) * 2);
292
- color: var(--ck-color-base-text-light);
293
- font-size: var(--ck-font-size-sm);
297
+ color: var(--ck-color-comment-count, var(--ck-color-base-text-light));
298
+ font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
294
299
  cursor: pointer;
295
300
  transition: background-color var(--ck-transition-duration-control-emphasized) ease;
296
301
 
@@ -306,17 +311,17 @@
306
311
 
307
312
  .ck .ck-thread--remove {
308
313
  & .ck-comment {
309
- background-color: var(--ck-comment-remove-background-color);
314
+ background-color: var(--ck-color-comment-remove-background, var(--ck-comment-remove-background-color));
310
315
  }
311
316
 
312
317
  & .ck-thread__input--active {
313
318
  &.ck-thread__input {
314
- background-color: var(--ck-comment-remove-background-color);
319
+ background-color: var(--ck-color-comment-remove-background, var(--ck-comment-remove-background-color));
315
320
  }
316
321
  }
317
322
 
318
323
  & .ck-thread__comment-count {
319
- background-color: var(--ck-comment-remove-background-color);
324
+ background-color: var(--ck-color-comment-remove-background, var(--ck-comment-remove-background-color));
320
325
  }
321
326
 
322
327
  & .ck-comment__wrapper {
@@ -345,7 +350,7 @@
345
350
  .ck .ck-thread__comments {
346
351
  z-index: var(--ck-z-default, var(--ck-z-base));
347
352
  border-radius: var(--ck-thread-comments-border-radius);
348
- background-color: var(--ck-comment-thread-comments-background-color);
353
+ background-color: var(--ck-color-comment-background, var(--ck-comment-thread-comments-background-color));
349
354
  margin: 0;
350
355
  padding: 0;
351
356
  list-style: none;
@@ -381,11 +386,11 @@
381
386
  }
382
387
 
383
388
  .ck.ck-button.ck-confirm-view-submit {
384
- color: var(--ck-button-save-color);
389
+ color: var(--ck-color-button-save, var(--ck-button-save-color));
385
390
  }
386
391
 
387
392
  .ck.ck-button.ck-confirm-view-cancel {
388
- color: var(--ck-button-cancel-color);
393
+ color: var(--ck-color-button-cancel, var(--ck-button-cancel-color));
389
394
  }
390
395
 
391
396
  :root, :host {
@@ -394,7 +399,7 @@
394
399
 
395
400
  .ck .ck-comment__input-container {
396
401
  --ck-user-avatar-size: 32px;
397
- font-size: var(--ck-font-size-base);
402
+ font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
398
403
  padding: var(--ck-comment-input-padding);
399
404
  display: none;
400
405
  }
@@ -535,7 +540,7 @@
535
540
 
536
541
  .ck.ck-sidebar--narrow .ck-annotation-counter:focus {
537
542
  border-color: var(--ck-input-focus-border-color);
538
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
543
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
539
544
  outline: none;
540
545
  }
541
546
 
@@ -593,7 +598,7 @@
593
598
 
594
599
  .ck .ck-annotation {
595
600
  --ck-user-avatar-size: 32px;
596
- font-size: var(--ck-font-size-base);
601
+ font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
597
602
  animation: annotationFadeInLeft var(--ck-animation-duration-surface-entrance);
598
603
  transition: background-color var(--ck-transition-duration-control-emphasized) ease;
599
604
  padding: var(--ck-annotation-padding);
@@ -609,7 +614,7 @@
609
614
  & .ck-button {
610
615
  min-width: unset;
611
616
  min-height: unset;
612
- color: var(--ck-annotation-icon-color);
617
+ color: var(--ck-color-annotation-icon, var(--ck-annotation-icon-color));
613
618
  border-radius: var(--ck-annotation-button-border-radius);
614
619
 
615
620
  &:not(.ck-disabled) {
@@ -681,12 +686,12 @@
681
686
  .ck .ck-annotation__info-name {
682
687
  font-weight: 500;
683
688
  font-size: var(--ck-font-size-control);
684
- color: var(--ck-annotation-info-name-color);
689
+ color: var(--ck-color-annotation-info, var(--ck-annotation-info-name-color));
685
690
  text-overflow: ellipsis;
686
691
  }
687
692
 
688
693
  .ck .ck-annotation__info-time {
689
- color: var(--ck-annotation-info-time-color);
694
+ color: var(--ck-color-annotation-info, var(--ck-annotation-info-time-color));
690
695
  flex: none;
691
696
  }
692
697
 
@@ -759,7 +764,7 @@
759
764
 
760
765
  .ck.ck-annotation-wrapper {
761
766
  border-radius: var(--ck-annotation-wrapper-border-radius);
762
- background: var(--ck-annotation-wrapper-background-color);
767
+ background: var(--ck-color-annotation-wrapper-background, var(--ck-annotation-wrapper-background-color));
763
768
  border: var(--ck-border-surface);
764
769
  outline: 0;
765
770
  }
@@ -798,7 +803,7 @@
798
803
 
799
804
  & .ck-comments-archive__header {
800
805
  max-height: 40px;
801
- line-height: var(--ck-font-size-base);
806
+ line-height: var(--ck-font-size-normal, var(--ck-font-size-base));
802
807
  border-bottom: var(--ck-border-divider);
803
808
  font-weight: bold;
804
809
  }
package/dist/index.css CHANGED
@@ -4,6 +4,7 @@
4
4
  */
5
5
  :root, :host {
6
6
  --ck-comment-background-color: #f7f9fd;
7
+ --ck-comment-focus-background-color: var(--ck-color-interactive-hover-surface);
7
8
  --ck-comment-separator-color: var(--ck-color-comment-separator, #cddeef);
8
9
  --ck-comment-remove-background-color: var(--ck-color-comment-remove-background, var(--ck-color-light-red));
9
10
  --ck-comment-input-background-color: var(--ck-color-surface-canvas);
@@ -15,7 +16,7 @@
15
16
  }
16
17
 
17
18
  .ck .ck-comment__wrapper {
18
- font-size: var(--ck-font-size-base);
19
+ font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
19
20
  transition: all var(--ck-transition-duration-control-emphasized) linear;
20
21
  outline: 0;
21
22
  position: relative;
@@ -29,6 +30,10 @@
29
30
  border-top-left-radius: var(--ck-comment-border-radius);
30
31
  }
31
32
 
33
+ &:focus {
34
+ background: var(--ck-comment-focus-background-color);
35
+ }
36
+
32
37
  &:has( + .ck-thread__comment-count) {
33
38
  & .ck-comment {
34
39
  &:after {
@@ -50,7 +55,7 @@
50
55
  /* Avatar margin size) */
51
56
  + 2px);
52
57
  width: var(--ck-comment-thread-line-size);
53
- background-color: var(--ck-comment-separator-color);
58
+ background-color: var(--ck-color-comment-separator, var(--ck-comment-separator-color));
54
59
  top: calc(var(--ck-user-avatar-size) + (2 * var(--ck-spacing-padding, var(--ck-spacing-sm))));
55
60
  height: calc(100% - var(--ck-user-avatar-size) - var(--ck-spacing-padding));
56
61
  border-radius: var(--ck-comment-border-radius);
@@ -60,7 +65,7 @@
60
65
  }
61
66
 
62
67
  .ck .ck-comment--edit {
63
- background-color: var(--ck-comment-input-background-color);
68
+ background-color: var(--ck-color-comment-input-background, var(--ck-comment-input-background-color));
64
69
 
65
70
  &:after {
66
71
  opacity: 0;
@@ -142,7 +147,7 @@
142
147
  }
143
148
 
144
149
  .ck .ck-comment__external {
145
- color: var(--ck-annotation-info-color);
150
+ color: var(--ck-color-annotation-info, var(--ck-annotation-info-color));
146
151
  font-style: italic;
147
152
  font-size: var(--ck-font-size-tiny, var(--ck-font-size-xs));
148
153
  margin-top: var(--ck-spacing-standard, var(--ck-spacing-base));
@@ -172,8 +177,8 @@
172
177
  :root, :host {
173
178
  --ck-thread-remove-background-color: var(--ck-color-thread-remove-background, var(--ck-comment-remove-background-color));
174
179
  --ck-comment-count-color: #223047;
175
- --ck-thread-header-background-color: #f3f6fd;
176
- --ck-thread-header-active-background-color: var(--ck-color-interactive-selected-surface);
180
+ --ck-thread-header-background-color: var(--ck-color-thread-header-background, #f3f6fd);
181
+ --ck-thread-header-active-background-color: var(--ck-color-thread-header-active-background, var(--ck-color-interactive-selected-surface));
177
182
  --ck-thread-header-button-hover-background: var(--ck-color-interactive-primary-surface-muted);
178
183
  --ck-thread-unlinked-background-color: var(--ck-color-unlinked-background, #f5f5f5);
179
184
  --ck-thread-unlinked-active-background-color: var(--ck-color-unlinked-active-background, #ebebeb);
@@ -208,7 +213,7 @@
208
213
 
209
214
  .ck-balloon-panel:has(.ck-thread:focus) {
210
215
  border: var(--ck-interactive-focus-ring);
211
- box-shadow: var(--ck-shadow-surface-floating), var(--ck-interactive-focus-shadow), 0 0;
216
+ box-shadow: var(--ck-shadow-surface-floating), var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
212
217
  outline: none;
213
218
  }
214
219
 
@@ -216,7 +221,7 @@
216
221
  padding: var(--ck-thread-header-padding);
217
222
  background-color: var(--ck-thread-header-background-color);
218
223
  line-height: 1.57;
219
- font-size: var(--ck-font-size-base);
224
+ font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
220
225
  justify-content: space-between;
221
226
  display: flex;
222
227
 
@@ -267,7 +272,7 @@
267
272
 
268
273
  &:focus {
269
274
  border: var(--ck-interactive-focus-ring);
270
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
275
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
271
276
  outline: none;
272
277
  }
273
278
  }
@@ -289,8 +294,8 @@
289
294
  .ck .ck-thread__comment-count {
290
295
  --ck-user-avatar-size: 32px;
291
296
  padding-left: calc(var(--ck-user-avatar-size) + var(--ck-spacing-standard, var(--ck-spacing-base)) * 2);
292
- color: var(--ck-color-base-text-light);
293
- font-size: var(--ck-font-size-sm);
297
+ color: var(--ck-color-comment-count, var(--ck-color-base-text-light));
298
+ font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
294
299
  cursor: pointer;
295
300
  transition: background-color var(--ck-transition-duration-control-emphasized) ease;
296
301
 
@@ -306,17 +311,17 @@
306
311
 
307
312
  .ck .ck-thread--remove {
308
313
  & .ck-comment {
309
- background-color: var(--ck-comment-remove-background-color);
314
+ background-color: var(--ck-color-comment-remove-background, var(--ck-comment-remove-background-color));
310
315
  }
311
316
 
312
317
  & .ck-thread__input--active {
313
318
  &.ck-thread__input {
314
- background-color: var(--ck-comment-remove-background-color);
319
+ background-color: var(--ck-color-comment-remove-background, var(--ck-comment-remove-background-color));
315
320
  }
316
321
  }
317
322
 
318
323
  & .ck-thread__comment-count {
319
- background-color: var(--ck-comment-remove-background-color);
324
+ background-color: var(--ck-color-comment-remove-background, var(--ck-comment-remove-background-color));
320
325
  }
321
326
 
322
327
  & .ck-comment__wrapper {
@@ -345,7 +350,7 @@
345
350
  .ck .ck-thread__comments {
346
351
  z-index: var(--ck-z-default, var(--ck-z-base));
347
352
  border-radius: var(--ck-thread-comments-border-radius);
348
- background-color: var(--ck-comment-thread-comments-background-color);
353
+ background-color: var(--ck-color-comment-background, var(--ck-comment-thread-comments-background-color));
349
354
  margin: 0;
350
355
  padding: 0;
351
356
  list-style: none;
@@ -381,11 +386,11 @@
381
386
  }
382
387
 
383
388
  .ck.ck-button.ck-confirm-view-submit {
384
- color: var(--ck-button-save-color);
389
+ color: var(--ck-color-button-save, var(--ck-button-save-color));
385
390
  }
386
391
 
387
392
  .ck.ck-button.ck-confirm-view-cancel {
388
- color: var(--ck-button-cancel-color);
393
+ color: var(--ck-color-button-cancel, var(--ck-button-cancel-color));
389
394
  }
390
395
 
391
396
  :root, :host {
@@ -394,7 +399,7 @@
394
399
 
395
400
  .ck .ck-comment__input-container {
396
401
  --ck-user-avatar-size: 32px;
397
- font-size: var(--ck-font-size-base);
402
+ font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
398
403
  padding: var(--ck-comment-input-padding);
399
404
  display: none;
400
405
  }
@@ -535,7 +540,7 @@
535
540
 
536
541
  .ck.ck-sidebar--narrow .ck-annotation-counter:focus {
537
542
  border-color: var(--ck-input-focus-border-color);
538
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
543
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
539
544
  outline: none;
540
545
  }
541
546
 
@@ -593,7 +598,7 @@
593
598
 
594
599
  .ck .ck-annotation {
595
600
  --ck-user-avatar-size: 32px;
596
- font-size: var(--ck-font-size-base);
601
+ font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
597
602
  animation: annotationFadeInLeft var(--ck-animation-duration-surface-entrance);
598
603
  transition: background-color var(--ck-transition-duration-control-emphasized) ease;
599
604
  padding: var(--ck-annotation-padding);
@@ -609,7 +614,7 @@
609
614
  & .ck-button {
610
615
  min-width: unset;
611
616
  min-height: unset;
612
- color: var(--ck-annotation-icon-color);
617
+ color: var(--ck-color-annotation-icon, var(--ck-annotation-icon-color));
613
618
  border-radius: var(--ck-annotation-button-border-radius);
614
619
 
615
620
  &:not(.ck-disabled) {
@@ -681,12 +686,12 @@
681
686
  .ck .ck-annotation__info-name {
682
687
  font-weight: 500;
683
688
  font-size: var(--ck-font-size-control);
684
- color: var(--ck-annotation-info-name-color);
689
+ color: var(--ck-color-annotation-info, var(--ck-annotation-info-name-color));
685
690
  text-overflow: ellipsis;
686
691
  }
687
692
 
688
693
  .ck .ck-annotation__info-time {
689
- color: var(--ck-annotation-info-time-color);
694
+ color: var(--ck-color-annotation-info, var(--ck-annotation-info-time-color));
690
695
  flex: none;
691
696
  }
692
697
 
@@ -759,7 +764,7 @@
759
764
 
760
765
  .ck.ck-annotation-wrapper {
761
766
  border-radius: var(--ck-annotation-wrapper-border-radius);
762
- background: var(--ck-annotation-wrapper-background-color);
767
+ background: var(--ck-color-annotation-wrapper-background, var(--ck-annotation-wrapper-background-color));
763
768
  border: var(--ck-border-surface);
764
769
  outline: 0;
765
770
  }
@@ -798,7 +803,7 @@
798
803
 
799
804
  & .ck-comments-archive__header {
800
805
  max-height: 40px;
801
- line-height: var(--ck-font-size-base);
806
+ line-height: var(--ck-font-size-normal, var(--ck-font-size-base));
802
807
  border-bottom: var(--ck-border-divider);
803
808
  font-weight: bold;
804
809
  }
@@ -823,28 +828,28 @@
823
828
  }
824
829
 
825
830
  .ck-content .ck-comment-marker {
826
- background: var(--ck-comment-marker-color);
831
+ background: var(--ck-color-comment-marker, var(--ck-comment-marker-color));
827
832
  border-top: 3px solid #0000;
828
833
  border-bottom: 3px solid #0000;
829
834
 
830
835
  &.ck-widget {
831
- border: 3px solid var(--ck-comment-marker-color);
836
+ border: 3px solid var(--ck-color-comment-marker, var(--ck-comment-marker-color));
832
837
  background-color: #0000;
833
838
  }
834
839
  }
835
840
 
836
841
  .ck-content .ck-comment-marker--active {
837
- background: var(--ck-comment-marker-active-color);
842
+ background: var(--ck-color-comment-marker-active, var(--ck-comment-marker-active-color));
838
843
 
839
844
  & .ck-comment-marker {
840
- background: var(--ck-comment-marker-active-color);
845
+ background: var(--ck-color-comment-marker-active, var(--ck-comment-marker-active-color));
841
846
  }
842
847
 
843
848
  &.ck-widget {
844
- border-color: var(--ck-comment-marker-active-color);
849
+ border-color: var(--ck-color-comment-marker-active, var(--ck-comment-marker-active-color));
845
850
 
846
851
  & .ck-comment-marker {
847
- background-color: var(--ck-comment-marker-color);
852
+ background-color: var(--ck-color-comment-marker, var(--ck-comment-marker-color));
848
853
  }
849
854
  }
850
855
  }