@ckeditor/ckeditor5-comments 48.8.1-alpha.4 → 49.0.0-alpha.0

package/dist/index.css

@@ -2,63 +2,73 @@
  * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-:root {
-  --ck-color-comment-background: #f3f7fb;
-  --ck-color-comment-separator: #cddeef;
-  --ck-color-comment-remove-background: var(--ck-color-light-red);
-  --ck-color-comment-input-background: var(--ck-color-comment-background);
-  --ck-comment-content-font-family: var(--ck-font-face);
-  --ck-comment-content-font-size: var(--ck-font-size-base);
-  --ck-comment-content-font-color: var(--ck-color-base-text);
+:root, :host {
+  --ck-comment-background-color: #f7f9fd;
+  --ck-comment-separator-color: var(--ck-color-comment-separator, #cddeef);
+  --ck-comment-remove-background-color: var(--ck-color-comment-remove-background, var(--ck-color-light-red));
+  --ck-comment-input-background-color: var(--ck-color-surface-canvas);
+  --ck-comment-content-font-family: var(--ck-font-face, var(--ck-font-family));
+  --ck-comment-content-font-size: var(--ck-font-size-md);
+  --ck-comment-content-font-color: var(--ck-color-text);
+  --ck-comment-thread-line-size: 1px;
+  --ck-comment-border-radius: var(--ck-border-radius-surface);
 }
 
 .ck .ck-comment__wrapper {
   font-size: var(--ck-font-size-base);
+  transition: all var(--ck-transition-duration-control-emphasized) linear;
   outline: 0;
-  transition: all .3s linear;
   position: relative;
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .ck .ck-comment__wrapper {
+  @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
-}
 
-.ck .ck-comment__wrapper:first-of-type {
-  border-top-right-radius: var(--ck-border-radius);
-  border-top-left-radius: var(--ck-border-radius);
-}
+  &:first-of-type {
+    border-top-right-radius: var(--ck-comment-border-radius);
+    border-top-left-radius: var(--ck-comment-border-radius);
+  }
 
-.ck .ck-comment__wrapper:focus {
-  background: var(--ck-color-button-default-hover-background);
+  &:has( + .ck-thread__comment-count) {
+    & .ck-comment {
+      &:after {
+        height: calc(100% - var(--ck-user-avatar-size) - var(--ck-spacing-padding)
+					+ var(--ck-size-control-min-height) /* Comment count button height */);
+      }
+    }
+  }
 }
 
-.ck .ck-comment:after {
-  content: "";
-  opacity: 1;
-  top: calc(var(--ck-user-avatar-size) + var(--ck-spacing-small));
-  left: calc(var(--ck-spacing-standard) + ( var(--ck-user-avatar-size) / 2 )
+.ck .ck-comment {
+  &:after {
+    content: "";
+    opacity: 1;
+    left: calc(var(--ck-spacing-standard, var(--ck-spacing-base)) + ( var(--ck-user-avatar-size) / 2 )
 
 			/* Half width of line. */
-			- 2px);
-  background-color: var(--ck-color-comment-separator);
-  width: 4px;
-  height: 100%;
-  display: block;
-  position: absolute;
+			- calc(var(--ck-comment-thread-line-size) / 2)
+			/* Avatar margin size) */
+			+ 2px);
+    width: var(--ck-comment-thread-line-size);
+    background-color: var(--ck-comment-separator-color);
+    top: calc(var(--ck-user-avatar-size) + (2 * var(--ck-spacing-padding, var(--ck-spacing-sm))));
+    height: calc(100% - var(--ck-user-avatar-size) - var(--ck-spacing-padding));
+    border-radius: var(--ck-comment-border-radius);
+    display: block;
+    position: absolute;
+  }
 }
 
 .ck .ck-comment--edit {
-  background-color: var(--ck-color-comment-input-background);
-}
+  background-color: var(--ck-comment-input-background-color);
 
-.ck .ck-comment--edit:after {
-  opacity: 0;
-}
+  &:after {
+    opacity: 0;
+  }
 
-.ck .ck-comment--edit .ck-comment__input-actions {
-  margin-top: var(--ck-spacing-standard);
+  & .ck-comment__input-actions {
+    margin-top: var(--ck-spacing-standard, var(--ck-spacing-base));
+  }
 }
 
 .ck .ck-comment__content {
@@ -68,58 +78,63 @@
   color: var(--ck-comment-content-font-color);
 }
 
-.ck .ck-comment--info .ck-comment__content {
-  font-style: italic;
-  font-family: var(--ck-comment-content-font-family);
-  font-size: var(--ck-comment-content-font-size);
-  color: var(--ck-comment-content-font-color);
+.ck .ck-comment--info {
+  & .ck-comment__content {
+    font-style: italic;
+    font-family: var(--ck-comment-content-font-family);
+    font-size: var(--ck-comment-content-font-size);
+    color: var(--ck-comment-content-font-color);
+  }
 }
 
-:is(.ck .ck-comment, .ck .ck-comment__input) p {
-  margin: 0;
-}
+.ck .ck-comment, .ck .ck-comment__input {
+  & p {
+    margin: 0;
+  }
 
-:is(.ck .ck-comment, .ck .ck-comment__input) ul, :is(.ck .ck-comment, .ck .ck-comment__input) ol {
-  margin-left: 10px;
-  padding-left: 10px;
-}
+  & ul, & ol {
+    margin-left: 10px;
+    padding-left: 10px;
+  }
 
-:is(.ck .ck-comment, .ck .ck-comment__input) ul {
-  margin-top: 0;
-  margin-bottom: 5px;
-  list-style: outside;
-}
+  & ul {
+    margin-top: 0;
+    margin-bottom: 5px;
+    list-style: outside;
 
-:is(.ck .ck-comment, .ck .ck-comment__input) ul ul {
-  list-style: circle;
-}
+    & ul {
+      list-style: circle;
 
-:is(.ck .ck-comment, .ck .ck-comment__input) ul ul ul {
-  list-style: square;
+      & ul {
+        list-style: square;
+      }
+    }
+  }
 }
 
-.ck .ck-comment__main .ck-comment__input-wrapper {
-  flex-direction: column;
-  transition: all .3s linear;
-  display: flex;
-  position: relative;
-}
+.ck .ck-comment__main {
+  & .ck-comment__input-wrapper {
+    transition: all var(--ck-transition-duration-control-emphasized) linear;
+    flex-direction: column;
+    display: flex;
+    position: relative;
 
-.ck .ck-comment__main .ck-comment__input-wrapper .ck-comment__input {
-  padding: 0;
+    & .ck-comment__input {
+      padding: 0;
+    }
+  }
 }
 
 .ck .ck-comment__user {
-  z-index: var(--ck-z-default);
+  z-index: var(--ck-z-default, var(--ck-z-base));
 }
 
 .ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit {
-  background: var(--ck-color-base-action);
   color: #fff;
-}
 
-.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit:hover {
-  background: var(--ck-color-button-save);
+  &.ck-disabled {
+    cursor: default;
+  }
 }
 
 .ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--cancel {
@@ -127,185 +142,201 @@
 }
 
 .ck .ck-comment__external {
-  color: var(--ck-color-annotation-info);
+  color: var(--ck-annotation-info-color);
   font-style: italic;
-  font-size: var(--ck-font-size-tiny);
-  margin-top: var(--ck-spacing-standard);
+  font-size: var(--ck-font-size-tiny, var(--ck-font-size-xs));
+  margin-top: var(--ck-spacing-standard, var(--ck-spacing-base));
 }
 
-.ck .ck-comment .ck-dropdown .ck-dropdown__arrow {
-  display: none;
-}
+.ck .ck-comment .ck-dropdown {
+  & .ck-dropdown__arrow {
+    display: none;
+  }
 
-.ck .ck-comment .ck-dropdown .ck-list {
-  padding: var(--ck-spacing-small) 0;
-  margin: 0;
-}
+  & .ck-list {
+    padding: var(--ck-list-padding);
+    margin: 0;
 
-.ck .ck-comment .ck-dropdown .ck-list .ck-list__item {
-  color: var(--ck-color-base-text);
-  min-width: auto;
-  font-size: 1.2em;
-}
+    & .ck-list__item {
+      color: var(--ck-color-text);
+      min-width: auto;
+      font-size: 1.2em;
 
-.ck .ck-comment .ck-dropdown .ck-list .ck-list__item .ck-button {
-  color: var(--ck-color-text);
+      & .ck-button {
+        color: var(--ck-color-text);
+      }
+    }
+  }
 }
 
-:root {
-  --ck-color-thread-remove-background: var(--ck-color-comment-remove-background);
-  --ck-color-comment-count: #5891ca;
-  --ck-color-thread-header-background: #fdfadd;
-  --ck-color-thread-header-active-background: #fff3a8;
-  --ck-color-unlinked-background: #f5f5f5;
-  --ck-color-unlinked-active-background: #ebebeb;
+:root, :host {
+  --ck-thread-remove-background-color: var(--ck-color-thread-remove-background, var(--ck-comment-remove-background-color));
+  --ck-comment-count-color: #223047;
+  --ck-thread-header-background-color: #f3f6fd;
+  --ck-thread-header-active-background-color: var(--ck-color-interactive-selected-surface);
+  --ck-thread-header-button-hover-background: var(--ck-color-interactive-primary-surface-muted);
+  --ck-thread-unlinked-background-color: var(--ck-color-unlinked-background, #f5f5f5);
+  --ck-thread-unlinked-active-background-color: var(--ck-color-unlinked-active-background, #ebebeb);
+  --ck-comment-thread-background-color: transparent;
+  --ck-comment-thread-comments-background-color: var(--ck-color-surface-container);
+  --ck-thread-header-padding: var(--ck-spacing-padding);
+  --ck-thread-border-radius: calc(var(--ck-border-radius-surface) - var(--ck-border-width-surface));
+  --ck-thread-comments-border-radius: var(--ck-border-radius-surface);
+  --ck-thread-input-border-radius: var(--ck-border-radius-control);
 }
 
 .ck .ck-thread {
-  border-radius: var(--ck-rounded-corners-radius);
+  border-radius: var(--ck-thread-border-radius);
   width: 100%;
-  color: var(--ck-color-base-text);
-  background-color: var(--ck-color-base-background);
-  outline: 0;
+  color: var(--ck-color-text);
+  background-color: var(--ck-comment-thread-background-color);
   transition-property: color, background-color, width, outline;
-  transition-duration: .3s;
+  transition-duration: var(--ck-transition-duration-control-emphasized);
+  outline: 0;
   transition-timing-function: ease;
   overflow: hidden;
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .ck .ck-thread {
+  @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
-}
 
-.ck .ck-thread:focus {
-  outline: var(--ck-focus-ring);
-  box-shadow: 0 0 0 4px var(--ck-color-focus-outer-shadow);
+  &:focus {
+    outline: var(--ck-interactive-focus-ring);
+    box-shadow: 0 0 0 4px var(--ck-color-focus-outer-shadow);
+  }
 }
 
 .ck-balloon-panel:has(.ck-thread:focus) {
-  border: var(--ck-focus-ring);
-  box-shadow: var(--ck-drop-shadow), var(--ck-focus-outer-shadow), 0 0;
+  border: var(--ck-interactive-focus-ring);
+  box-shadow: var(--ck-shadow-surface-floating), var(--ck-interactive-focus-shadow), 0 0;
   outline: none;
 }
 
 .ck .ck-thread__header {
-  padding: var(--ck-spacing-standard);
-  background-color: var(--ck-color-thread-header-background);
+  padding: var(--ck-thread-header-padding);
+  background-color: var(--ck-thread-header-background-color);
   line-height: 1.57;
   font-size: var(--ck-font-size-base);
   justify-content: space-between;
   display: flex;
-}
-
-.ck .ck-thread__header .ck-button {
-  font-size: var(--ck-annotation-button-size);
-}
-
-.ck .ck-thread__header .ck-context-wrapper {
-  width: 100%;
-  min-width: 0;
-  height: 25px;
-  padding-right: var(--ck-spacing-large);
-  display: inline-flex;
-  position: relative;
-}
-
-.ck .ck-thread__header .ck-context {
-  white-space: nowrap;
-  width: 100%;
-  padding: var(--ck-spacing-small) var(--ck-spacing-medium);
-  display: flex;
-  overflow: hidden;
-}
-
-.ck .ck-thread__header .ck-context.ck-context--quotes:after, .ck .ck-thread__header .ck-context.ck-context--quotes:before {
-  content: "\"";
-  display: inline-block;
-}
-
-.ck .ck-thread__header .ck-context .ck-context__type {
-  padding-right: var(--ck-spacing-standard);
-  font-weight: bold;
-}
 
-.ck .ck-thread__header .ck-context .ck-context__value {
-  text-overflow: ellipsis;
-  border: 1px solid #0000;
-  overflow: hidden;
-}
+  & .ck-button {
+    --ck-button-hover-background: var(--ck-thread-header-button-hover-background);
+    font-size: var(--ck-annotation-button-size);
+  }
 
-.ck .ck-thread__header .ck-context .ck-context__value:focus {
-  border: var(--ck-focus-ring);
-  box-shadow: var(--ck-focus-outer-shadow), 0 0;
-  outline: none;
-}
+  & .ck-context-wrapper {
+    width: 100%;
+    min-width: 0;
+    padding-right: var(--ck-spacing-large, var(--ck-spacing-lg));
+    display: inline-flex;
+    position: relative;
+
+    &:has(.ck-context--quotes.overlay) {
+      &:before {
+        content: " ";
+        padding: var(--ck-spacing-control-padding-block) var(--ck-spacing-control-padding-inline);
+        font-size: 16px;
+        display: block;
+      }
+    }
+  }
 
-.ck .ck-thread__header .ck-context.overlay {
-  z-index: 2;
-  background: var(--ck-color-base-background);
-  white-space: normal;
-  box-sizing: border-box;
-  border-radius: 2px;
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  box-shadow: 0 2px 3px #fff3;
+  & .ck-context {
+    white-space: nowrap;
+    width: 100%;
+    padding: var(--ck-spacing-control-padding-block) var(--ck-spacing-control-padding-inline);
+    display: flex;
+    overflow: hidden;
+
+    &.ck-context--quotes {
+      &:after, &:before {
+        content: "\"";
+        display: inline-block;
+      }
+    }
+
+    & .ck-context__type {
+      padding-right: var(--ck-spacing-control-padding-inline);
+      font-weight: bold;
+    }
+
+    & .ck-context__value {
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      &:focus {
+        border: var(--ck-interactive-focus-ring);
+        box-shadow: var(--ck-interactive-focus-shadow), 0 0;
+        outline: none;
+      }
+    }
+
+    &.overlay {
+      z-index: 2;
+      background: var(--ck-color-surface-canvas);
+      box-shadow: var(--ck-shadow-surface-floating);
+      border-radius: var(--ck-border-radius-surface);
+      white-space: normal;
+      box-sizing: border-box;
+      display: inline-block;
+      position: absolute;
+      top: 0;
+    }
+  }
 }
 
 .ck .ck-thread__comment-count {
-  --ck-user-avatar-size: 28px;
-  padding-left: calc(var(--ck-user-avatar-size) + var(--ck-spacing-standard) * 2);
-  color: var(--ck-color-comment-count);
-  font-size: var(--ck-font-size-base);
+  --ck-user-avatar-size: 32px;
+  padding-left: calc(var(--ck-user-avatar-size) + var(--ck-spacing-standard, var(--ck-spacing-base)) * 2);
+  color: var(--ck-comment-count-color);
+  font-size: var(--ck-font-size-sm);
   cursor: pointer;
-  font-weight: bold;
-  transition: background-color .3s;
-}
-
-.ck .ck-thread__comment-count:before {
-  content: "▼";
-  margin-right: var(--ck-spacing-small);
-}
-
-.ck .ck-thread--remove .ck-comment {
-  background-color: var(--ck-color-comment-remove-background);
+  transition: background-color var(--ck-transition-duration-control-emphasized) ease;
 }
 
-.ck .ck-thread--remove .ck-thread__input--active {
-  background-color: var(--ck-color-base-background);
-}
+.ck .ck-thread--remove {
+  & .ck-comment {
+    background-color: var(--ck-comment-remove-background-color);
+  }
 
-.ck .ck-thread--remove .ck-thread__input--active.ck-thread__input {
-  background-color: var(--ck-color-comment-remove-background);
-}
+  & .ck-thread__input--active {
+    &.ck-thread__input {
+      background-color: var(--ck-comment-remove-background-color);
+    }
+  }
 
-.ck .ck-thread--remove .ck-thread__comment-count {
-  background-color: var(--ck-color-comment-remove-background);
-}
+  & .ck-thread__comment-count {
+    background-color: var(--ck-comment-remove-background-color);
+  }
 
-.ck .ck-thread--remove .ck-comment__wrapper .ck-comment:after {
-  opacity: 0;
+  & .ck-comment__wrapper {
+    & .ck-comment:after {
+      opacity: 0;
+    }
+  }
 }
 
-.ck .ck-thread__comments .ck-comment__wrapper:last-of-type .ck-comment:after {
-  opacity: 0;
+.ck .ck-thread__comments .ck-comment__wrapper {
+  &:last-of-type {
+    & .ck-comment:after {
+      opacity: 0;
+    }
+  }
 }
 
 .ck .ck-thread__container {
-  transition: transform .3s;
-}
+  transition: transform var(--ck-transition-duration-control-emphasized) ease;
 
-@media (prefers-reduced-motion: reduce) {
-  .ck .ck-thread__container {
+  @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
 }
 
 .ck .ck-thread__comments {
-  z-index: var(--ck-z-default);
-  border-radius: var(--ck-border-radius);
+  z-index: var(--ck-z-default, var(--ck-z-base));
+  border-radius: var(--ck-thread-comments-border-radius);
+  background-color: var(--ck-comment-thread-comments-background-color);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -319,82 +350,81 @@
 .ck .ck-thread__input {
   width: calc(100% - var(--ck-user-avatar-size));
   white-space: normal;
-  border-radius: var(--ck-border-radius);
+  transition: background-color var(--ck-transition-duration-control) ease-in-out;
+  border-radius: var(--ck-thread-input-border-radius);
   min-height: 38px;
-  transition: background-color .2s ease-in-out;
-}
-
-.ck .ck-thread--active .ck-comment__options.ck-dropdown {
-  display: block;
 }
 
-.ck .ck-thread--active .ck-thread__input {
-  background-color: var(--ck-color-comment-background);
-  display: block;
-}
+.ck .ck-thread--active {
+  & .ck-comment__options.ck-dropdown, & .ck-thread__input {
+    display: block;
+  }
 
-.ck .ck-thread--active .ck-thread__header {
-  background-color: var(--ck-color-thread-header-active-background);
+  & .ck-thread__header {
+    background-color: var(--ck-thread-header-active-background-color);
+  }
 }
 
 .ck .ck-thread--unlinked {
-  --ck-color-comment-box-border: var(--ck-color-base-border);
-  --ck-color-thread-header-background: var(--ck-color-unlinked-background);
-  --ck-color-thread-header-active-background: var(--ck-color-unlinked-active-background);
+  --ck-comment-box-border-color: var(--ck-color-comment-box-border, var(--ck-color-base-border));
+  --ck-thread-header-background-color: var(--ck-thread-unlinked-background-color);
+  --ck-thread-header-active-background-color: var(--ck-thread-unlinked-active-background-color);
 }
 
 .ck.ck-button.ck-confirm-view-submit {
-  color: var(--ck-color-button-save);
+  color: var(--ck-button-save-color);
 }
 
 .ck.ck-button.ck-confirm-view-cancel {
-  color: var(--ck-color-button-cancel);
+  color: var(--ck-button-cancel-color);
+}
+
+:root, :host {
+  --ck-comment-input-padding: var(--ck-spacing-padding) var(--ck-spacing-padding);
 }
 
 .ck .ck-comment__input-container {
-  --ck-user-avatar-size: 28px;
+  --ck-user-avatar-size: 32px;
   font-size: var(--ck-font-size-base);
-  padding: var(--ck-spacing-standard);
-  background: var(--ck-color-comment-background);
+  padding: var(--ck-comment-input-padding);
   display: none;
 }
 
 .ck .ck-comment__input-container--active {
+  align-items: flex-start;
   display: flex;
 }
 
 .ck .ck-comment__input {
-  padding: var(--ck-spacing-standard);
-  padding-top: var(--ck-spacing-medium);
-  color: var(--ck-color-base-text);
+  padding: var(--ck-comment-input-padding);
+  color: var(--ck-color-text);
   resize: none;
+  transition: color var(--ck-transition-duration-control-emphasized) ease-in-out;
   background-color: #0000;
   border-width: 0;
-  transition: color .3s ease-in-out;
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .ck .ck-comment__input {
+  @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
-}
 
-.ck .ck-comment__input:focus {
-  outline: none;
-}
+  &:focus {
+    outline: none;
+  }
 
-.ck .ck-comment__input .ck-editor__editable_inline {
-  --ck-focus-ring: none;
-  --ck-inner-shadow: none;
-  font-family: var(--ck-comment-content-font-family);
-  font-size: var(--ck-comment-content-font-size);
-  color: var(--ck-comment-content-font-color);
-  word-break: normal;
-  overflow-wrap: anywhere;
-  background-color: #0000;
-  border: 0;
-  padding: 0;
-  overflow: visible;
+  & .ck-editor__editable_inline {
+    --ck-focus-ring: none;
+    --ck-inner-shadow: none;
+    --ck-inset-shadow-sm: none;
+    font-family: var(--ck-comment-content-font-family);
+    font-size: var(--ck-comment-content-font-size);
+    color: var(--ck-comment-content-font-color);
+    word-break: normal;
+    overflow-wrap: anywhere;
+    background-color: #0000;
+    border: 0;
+    padding: 0;
+    overflow: visible;
+  }
 }
 
 .ck-comment__input-wrapper .ck.ck-editor__editable_inline :first-child {
@@ -409,38 +439,35 @@
   text-align: right;
   width: 100%;
   display: none;
-}
-
-.ck .ck-comment__input-actions.ck-comment__input-actions--active {
-  display: block;
-}
 
-.ck .ck-comment__input-actions .ck.ck-button {
-  cursor: pointer;
-  min-height: var(--ck-ui-component-min-height);
-  min-width: 60px;
-  font-size: var(--ck-annotation-button-size);
-  margin-left: var(--ck-spacing-large);
-  padding: 0 var(--ck-spacing-medium);
-  justify-content: center;
-  align-items: center;
-  display: inline-flex;
-}
+  &.ck-comment__input-actions--active {
+    display: block;
+  }
 
-.ck .ck-comment__input-actions .ck-button.ck-disabled {
-  opacity: .3;
+  & .ck.ck-button {
+    cursor: pointer;
+    min-height: var(--ck-ui-component-min-height, var(--ck-size-min-height));
+    min-width: 60px;
+    font-size: var(--ck-annotation-button-size);
+    margin-left: var(--ck-spacing-large, var(--ck-spacing-lg));
+    padding: 0 var(--ck-spacing-control-padding-inline);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
 }
 
 .ck .ck-comment__input-textarea {
   display: block;
 }
 
-:root {
-  --ck-inline-annotation-container-width: 300px;
+:root, :host {
+  --ck-inline-annotation-container-width: var(--ck-width-sm);
   --ck-inline-annotation-container-max-height: 400px;
 }
 
 .ck.ck-balloon-panel .ck-annotation-wrapper {
+  border-radius: calc(var(--ck-balloon-panel-border-radius) - var(--ck-border-width-surface));
   width: var(--ck-inline-annotation-container-width);
   max-height: var(--ck-inline-annotation-container-max-height);
   overscroll-behavior-y: contain;
@@ -464,13 +491,17 @@
   font-style: italic;
 }
 
-:root {
+.ck.ck-balloon-panel .ck-annotation-wrapper .ck-suggestion-type {
+  vertical-align: baseline;
+}
+
+:root, :host {
   --ck-annotation-counter-icon-size: 16px;
   --ck-annotation-counter-number-size: 10px;
-  --ck-color-annotation-counter-comment: #f2de02;
-  --ck-color-annotation-counter-suggestion-insertion: #5ad86b;
-  --ck-color-annotation-counter-suggestion-deletion: #d85a79;
-  --ck-color-annotation-counter-suggestion-format: #5ac1d8;
+  --ck-annotation-counter-comment-color: #fcbf49;
+  --ck-annotation-counter-suggestion-insertion-color: #499167;
+  --ck-annotation-counter-suggestion-deletion-color: #ca3c25;
+  --ck-annotation-counter-suggestion-format-color: var(--ck-color-base-active);
 }
 
 .ck.ck-sidebar--narrow .ck-sidebar-item {
@@ -486,19 +517,25 @@
   padding: 0;
 }
 
-.ck.ck-sidebar--narrow .ck-annotation-counter:hover, .ck.ck-sidebar--narrow .ck-annotation-counter:focus {
+.ck.ck-sidebar--narrow .ck-annotation-counter:hover {
   box-shadow: none;
   color: #4d4d4d;
   background: none;
 }
 
+.ck.ck-sidebar--narrow .ck-annotation-counter:focus {
+  border-color: var(--ck-input-focus-border-color);
+  box-shadow: var(--ck-interactive-focus-shadow), 0 0;
+  outline: none;
+}
+
 .ck.ck-sidebar--narrow .ck-annotation-counter__badge {
   color: #fff;
   width: 16px;
   height: 16px;
   font-weight: bold;
   font-size: var(--ck-annotation-counter-number-size);
-  font-family: var(--ck-font-face);
+  font-family: var(--ck-font-face, var(--ck-font-family));
   text-shadow: -1px 0 2px #454545, 1px 0 2px #454545;
   z-index: 1;
   background: #333;
@@ -516,72 +553,86 @@
 }
 
 .ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-insertion, .ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-replace {
-  background: var(--ck-color-annotation-counter-suggestion-insertion);
+  background: var(--ck-annotation-counter-suggestion-insertion-color);
 }
 
 .ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-deletion {
-  background: var(--ck-color-annotation-counter-suggestion-deletion);
+  background: var(--ck-annotation-counter-suggestion-deletion-color);
 }
 
 .ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-format {
-  background: var(--ck-color-annotation-counter-suggestion-format);
+  background: var(--ck-annotation-counter-suggestion-format-color);
 }
 
 .ck.ck-sidebar--narrow .ck-annotation-counter__badge--comment {
-  background: var(--ck-color-annotation-counter-comment);
+  background: var(--ck-annotation-counter-comment-color);
 }
 
-:root {
-  --ck-color-annotation-icon: gray;
-  --ck-color-annotation-info: #757575;
+:root, :host {
+  --ck-annotation-icon-color: var(--ck-color-text);
+  --ck-annotation-info-color: var(--ck-color-text);
+  --ck-annotation-info-name-color: var(--ck-color-text);
+  --ck-annotation-info-time-color: var(--ck-color-text-secondary);
   --ck-annotation-button-size: .85em;
+  --ck-annotation-dropdown-button-size: 14px;
+  --ck-annotation-padding: var(--ck-spacing-padding) var(--ck-spacing-padding);
+  --ck-annotation-content-wrapper-padding-inline-end: var(--ck-spacing-padding);
+  --ck-annotation-main-border-radius: var(--ck-border-radius-surface);
+  --ck-annotation-button-border-radius: var(--ck-border-radius-control);
 }
 
 .ck .ck-annotation {
-  --ck-user-avatar-size: 28px;
+  --ck-user-avatar-size: 32px;
   font-size: var(--ck-font-size-base);
-  padding: var(--ck-spacing-standard);
+  animation: annotationFadeInLeft var(--ck-animation-duration-surface-entrance);
+  transition: background-color var(--ck-transition-duration-control-emphasized) ease;
+  padding: var(--ck-annotation-padding);
   white-space: normal;
-  transition: background-color .3s;
-  animation: .3s annotationFadeInLeft;
   display: flex;
   position: relative;
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .ck .ck-annotation {
+  @media (prefers-reduced-motion: reduce) {
     transition: none;
     animation: none;
   }
-}
 
-.ck .ck-annotation .ck-button {
-  min-width: unset;
-  min-height: unset;
-  cursor: pointer;
-  color: var(--ck-color-annotation-icon);
-  border-radius: var(--ck-border-radius);
-  font-size: var(--ck-annotation-button-size);
-  background-color: #0000;
-}
+  & .ck-button {
+    min-width: unset;
+    min-height: unset;
+    color: var(--ck-annotation-icon-color);
+    border-radius: var(--ck-annotation-button-border-radius);
 
-.ck .ck-annotation .ck-user {
-  font-size: .85em;
+    &:not(.ck-disabled) {
+      cursor: pointer;
+    }
+  }
+
+  & .ck-user {
+    font-size: 12px;
+  }
+
+  & .ck-dropdown .ck-list {
+    & > .ck-list__item:has( > .ck-hidden) {
+      display: none;
+    }
+
+    & .ck-button {
+      font-size: var(--ck-annotation-dropdown-button-size);
+    }
+  }
 }
 
 .ck .ck-annotation__main {
   width: calc(100% - var(--ck-user-avatar-size));
-  border-radius: var(--ck-border-radius);
-  padding-left: var(--ck-spacing-standard);
+  transition: all var(--ck-transition-duration-control) ease;
+  border-radius: var(--ck-annotation-main-border-radius);
+  padding-left: var(--ck-spacing-padding);
   grid-template-columns: minmax(0, 1fr) auto;
   grid-template-areas: "info actions"
                        "content content";
-  transition: all .2s;
   display: grid;
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .ck .ck-annotation__main {
+  @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
 }
@@ -591,34 +642,41 @@
   font-size: var(--ck-comment-content-font-size);
   margin: 0;
   line-height: 1.5em;
+
+  & .ck-suggestion-type {
+    font-size: var(--ck-comment-content-font-size);
+    line-height: 1.5em;
+  }
 }
 
 .ck .ck-annotation__user {
-  margin-top: var(--ck-spacing-small);
+  margin-top: var(--ck-spacing-gap-compact);
 }
 
 .ck .ck-annotation__info {
-  color: var(--ck-color-annotation-info);
-  grid-area: info;
-  align-items: center;
   min-height: 2.4em;
+  margin-bottom: var(--ck-spacing-gap-compact);
+  flex-direction: column;
+  grid-area: info;
   display: flex;
 }
 
 .ck .ck-annotation__info-name, .ck .ck-annotation__info-time {
   white-space: nowrap;
-  color: var(--ck-color-annotation-info);
-  font-weight: bold;
-  font-size: var(--ck-font-size-small);
+  font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
+  line-height: var(--ck-line-height-base);
   overflow: hidden;
 }
 
 .ck .ck-annotation__info-name {
+  font-weight: 500;
+  font-size: var(--ck-font-size-control);
+  color: var(--ck-annotation-info-name-color);
   text-overflow: ellipsis;
 }
 
 .ck .ck-annotation__info-time {
-  margin: 0 var(--ck-spacing-large);
+  color: var(--ck-annotation-info-time-color);
   flex: none;
 }
 
@@ -627,20 +685,21 @@
 }
 
 .ck .ck-annotation__actions {
-  opacity: .5;
+  align-items: flex-start;
+  gap: var(--ck-spacing-gap-snug);
   grid-area: actions;
-  transition: opacity .2s;
-}
+  display: flex;
 
-@media (prefers-reduced-motion: reduce) {
-  .ck .ck-annotation__actions {
-    transition: none;
+  & .ck.ck-dropdown {
+    align-items: flex-start;
+    display: flex;
   }
 }
 
 .ck .ck-annotation__content-wrapper {
-  grid-area: content;
   width: 100%;
+  grid-area: content;
+  padding-inline-end: var(--ck-annotation-content-wrapper-padding-inline-end);
 }
 
 @keyframes annotationFadeInLeft {
@@ -655,31 +714,28 @@
   }
 }
 
-:root {
-  --ck-color-annotation-wrapper-background: #fff;
-  --ck-color-annotation-wrapper-drop-shadow: 0 1px 1px 1px #e6e6e6;
+:root, :host {
+  --ck-annotation-wrapper-background-color: var(--ck-color-annotation-wrapper-background, #fff);
+  --ck-annotation-wrapper-shadow: var(--ck-color-annotation-wrapper-drop-shadow, 0 1px 1px 1px #e6e6e6);
+  --ck-annotation-wrapper-border-radius: var(--ck-border-radius-surface);
 }
 
 .ck.ck-sidebar {
   outline: 0;
   transition: min-height .25s;
   position: relative;
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .ck.ck-sidebar {
+  @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
 }
 
 .ck-sidebar-item {
   width: 100%;
-  transition: top .3s, box-shadow .3s;
+  transition: top var(--ck-transition-duration-control-emphasized) ease, box-shadow var(--ck-transition-duration-control-emphasized) ease;
   position: absolute;
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .ck-sidebar-item {
+  @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
 }
@@ -689,101 +745,93 @@
 }
 
 .ck.ck-annotation-wrapper {
-  border-radius: var(--ck-border-radius);
-  background: var(--ck-color-annotation-wrapper-background);
-  box-shadow: var(--ck-color-annotation-wrapper-drop-shadow);
+  border-radius: var(--ck-annotation-wrapper-border-radius);
+  background: var(--ck-annotation-wrapper-background-color);
+  border: var(--ck-border-surface);
   outline: 0;
 }
 
-:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-annotation__actions {
-  opacity: 1;
-}
-
-:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-annotation__actions .ck-comment--resolve {
-  color: var(--ck-color-button-save);
-}
-
-:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-suggestion--accept {
-  color: var(--ck-color-button-save);
-}
-
-:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-suggestion--discard {
-  color: var(--ck-color-button-cancel);
-}
-
-.ck.ck-annotation-wrapper:not(.ck-annotation-wrapper--active):hover {
-  box-shadow: var(--ck-drop-shadow);
+.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover {
+  & .ck-annotation__actions {
+    opacity: 1;
+  }
 }
 
-.ck.ck-annotation-wrapper--active {
-  box-shadow: var(--ck-drop-shadow-active);
+:root, :host {
+  --ck-comments-archive-width: var(--ck-width-dialog);
+  --ck-comments-archive-info-font-size: var(--ck-font-size-md);
 }
 
-.ck .ck-comments-archive-dropdown.ck-dropdown__panel {
-  z-index: var(--ck-z-panel);
+.ck .ck-comments-archive-dropdown {
+  &.ck-dropdown__panel {
+    z-index: var(--ck-z-panel);
+  }
 }
 
 .ck .ck-comments-archive {
+  width: var(--ck-comments-archive-width);
   box-sizing: content-box;
-  width: 400px;
   max-height: 450px;
-}
 
-.ck .ck-comments-archive .ck-annotation {
-  animation: none;
-}
+  & .ck-annotation {
+    animation: none;
+  }
 
-.ck .ck-comments-archive .ck-comments-archive__header, .ck .ck-comments-archive .ck-comments-archive__content {
-  max-height: 410px;
-  padding: var(--ck-spacing-large);
-  overflow: auto;
-}
+  & .ck-comments-archive__header, & .ck-comments-archive__content {
+    max-height: 410px;
+    padding: var(--ck-spacing-padding-comfortable);
+    overflow: auto;
+  }
 
-.ck .ck-comments-archive .ck-comments-archive__header {
-  max-height: 40px;
-  line-height: var(--ck-font-size-base);
-  border-bottom: 1px solid var(--ck-color-toolbar-border);
-  font-weight: bold;
-}
+  & .ck-comments-archive__header {
+    max-height: 40px;
+    line-height: var(--ck-font-size-base);
+    border-bottom: var(--ck-border-divider);
+    font-weight: bold;
+  }
 
-.ck .ck-comments-archive .ck-comments-archive__content .ck-annotation-wrapper:not(:last-child) {
-  margin-bottom: var(--ck-spacing-large);
-}
+  & .ck-comments-archive__content {
+    & .ck-annotation-wrapper:not(:last-child) {
+      margin-bottom: var(--ck-spacing-gap-comfortable);
+    }
+  }
 
-.ck .ck-comments-archive .ck-comments-archive__info {
-  text-align: center;
-  color: var(--ck-color-annotation-info);
-  font-style: italic;
+  & .ck-comments-archive__info {
+    text-align: center;
+    font-style: italic;
+    font-size: var(--ck-comments-archive-info-font-size);
+    color: var(--ck-annotation-info-color);
+  }
 }
 
-:root {
-  --ck-color-comment-marker: #fef7a9;
-  --ck-color-comment-marker-active: #fdf05d;
+:root, :host {
+  --ck-comment-marker-color: #fdecc3;
+  --ck-comment-marker-active-color: #fbd988;
 }
 
 .ck-content .ck-comment-marker {
-  background: var(--ck-color-comment-marker);
+  background: var(--ck-comment-marker-color);
   border-top: 3px solid #0000;
   border-bottom: 3px solid #0000;
-}
 
-.ck-content .ck-comment-marker.ck-widget {
-  border: 3px solid var(--ck-color-comment-marker);
-  background-color: #0000;
+  &.ck-widget {
+    border: 3px solid var(--ck-comment-marker-color);
+    background-color: #0000;
+  }
 }
 
 .ck-content .ck-comment-marker--active {
-  background: var(--ck-color-comment-marker-active);
-}
+  background: var(--ck-comment-marker-active-color);
 
-.ck-content .ck-comment-marker--active .ck-comment-marker {
-  background: var(--ck-color-comment-marker-active);
-}
+  & .ck-comment-marker {
+    background: var(--ck-comment-marker-active-color);
+  }
 
-.ck-content .ck-comment-marker--active.ck-widget {
-  border-color: var(--ck-color-comment-marker-active);
-}
+  &.ck-widget {
+    border-color: var(--ck-comment-marker-active-color);
 
-.ck-content .ck-comment-marker--active.ck-widget .ck-comment-marker {
-  background-color: var(--ck-color-comment-marker);
+    & .ck-comment-marker {
+      background-color: var(--ck-comment-marker-color);
+    }
+  }
 }