Apply the framework’s style to CKEditor

diff --git a/wcfsetup/install/files/style/ui/ckeditor.scss b/wcfsetup/install/files/style/ui/ckeditor.scss
index 833ef02d4eca80ea426a181ad3097e897263c3db..9525ef39c5bdf81a817a81554465f89c988716a5 100644 (file)
--- a/wcfsetup/install/files/style/ui/ckeditor.scss
+++ b/wcfsetup/install/files/style/ui/ckeditor.scss
@@ -11,11 +11,34 @@
        vertical-align: middle;
 }
 
-.ck.ck-editor {
+.ck.ck-editor,
+.ck.ck-body {
+       --ck-color-base-background: var(--wcfContentContainerBackground);
+
        --ck-border-radius: var(--wcfBorderRadius);
        --ck-color-base-border: var(--wcfContentBorderInner);
        --ck-color-text: var(--wcfContentText);
        --ck-color-toolbar-border: var(--wcfContentBorderInner);
+       --ck-color-toolbar-background: var(--wcfContentContainerBackground);
+
+       --ck-color-dropdown-panel-background: var(--wcfDropdownBackground);
+       --ck-color-dropdown-panel-border: var(--wcfDropdownBorderInner);
+       --ck-color-panel-background: var(--wcfDropdownBackground);
+       --ck-color-panel-border: var(--wcfDropdownBorderInner);
+
+       --ck-color-input-background: var(--wcfInputBackground);
+       --ck-color-input-border: var(--wcfInputBorder);
+       --ck-color-input-error-border: var(--ck-color-base-error);
+       --ck-color-input-text: var(--wcfInputText);
+       --ck-color-input-disabled-background: var(--wcfInputDisabledBackground);
+       --ck-color-input-disabled-border: var(--wcfInputDisabledBorder);
+       --ck-color-input-disabled-text: var(--wcfInputDisabledText);
+
+       --ck-color-list-background: var(--wcfDropdownBackground);
+       --ck-color-list-button-hover-background: var(--wcfDropdownBackgroundActive);
+       --ck-color-list-button-on-background: var(--wcfDropdownBackgroundActive);
+       --ck-color-list-button-on-background-focus: var(--wcfDropdownBackgroundActive);
+       --ck-color-list-button-on-text: var(--wcfDropdownLink);
 }
 
 .ck.ck-content {
@@ -49,119 +72,93 @@
        }
 }
 
-html[data-color-scheme="dark"] {
-       /*
-    Override some of the color values of the built-in “Lark” theme.
-    https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/theme-customization.html
-    */
-       .ck.ck-editor {
-               /* Helper variables to avoid duplication in the colors. */
-               --ck-custom-background: hsl(270, 1%, 29%);
-               --ck-custom-foreground: hsl(255, 3%, 18%);
-               --ck-custom-border: hsl(300, 1%, 22%);
-               --ck-custom-white: hsl(0, 0%, 100%);
-
-               /* -- Overrides generic colors. ------------------------------------------------------------- */
-
-               --ck-color-base-foreground: var(--ck-custom-background);
-               --ck-color-focus-border: hsl(208, 90%, 62%);
-               --ck-color-text: hsl(0, 0%, 98%);
-               --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
-               --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
-
-               /* -- Overrides the default .ck-button class colors. ---------------------------------------- */
-
-               --ck-color-button-default-background: var(--ck-custom-background);
-               --ck-color-button-default-hover-background: hsl(270, 1%, 22%);
-               --ck-color-button-default-active-background: hsl(270, 2%, 20%);
-               --ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
-               --ck-color-button-default-disabled-background: var(--ck-custom-background);
-
-               --ck-color-button-on-background: var(--ck-custom-foreground);
-               --ck-color-button-on-hover-background: hsl(255, 4%, 16%);
-               --ck-color-button-on-active-background: hsl(255, 4%, 14%);
-               --ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
-               --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
-
-               --ck-color-button-action-background: hsl(168, 76%, 42%);
-               --ck-color-button-action-hover-background: hsl(168, 76%, 38%);
-               --ck-color-button-action-active-background: hsl(168, 76%, 36%);
-               --ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
-               --ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
-               --ck-color-button-action-text: var(--ck-custom-white);
-
-               --ck-color-button-save: hsl(120, 100%, 46%);
-               --ck-color-button-cancel: hsl(15, 100%, 56%);
-
-               /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
-
-               --ck-color-dropdown-panel-background: var(--ck-custom-background);
-               --ck-color-dropdown-panel-border: var(--ck-custom-foreground);
-
-               /* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */
+/* TODO: DEV ONLY */
+.ck.ck-dropdown .ck-dropdown__panel {
+       display: block !important;
+}
 
-               --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
-               --ck-color-split-button-hover-border: var(--ck-custom-foreground);
+.ck.ck-reset.ck-dropdown__panel,
+.ck.ck-balloon-panel {
+       border-color: transparent;
+       box-shadow: var(--wcfBoxShadow);
+}
 
-               /* -- Overrides the default .ck-input class colors. ----------------------------------------- */
+.ck.ck-editor
+       .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused)
+       > .ck.ck-labeled-field-view__input-wrapper
+       > .ck.ck-label {
+       color: var(--wcfInputPlaceholder);
+}
 
-               --ck-color-input-background: var(--ck-custom-background);
-               --ck-color-input-border: hsl(257, 3%, 43%);
-               --ck-color-input-text: hsl(0, 0%, 98%);
-               --ck-color-input-disabled-background: hsl(255, 4%, 21%);
-               --ck-color-input-disabled-border: hsl(250, 3%, 38%);
-               --ck-color-input-disabled-text: hsl(0, 0%, 78%);
+.ck.ck-list .ck-list__item .ck-button:not(.ck-disabled):hover {
+       color: var(--wcfDropdownLink);
+       cursor: pointer;
+}
 
-               /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */
+.ck.ck-form__row .ck-button,
+.ck.ck-vertical-form .ck-button {
+       --ck-color-text: var(--wcfButtonText);
 
-               --ck-color-labeled-field-label-background: var(--ck-custom-background);
+       background-color: var(--wcfButtonBackground);
+       border-color: transparent;
+       font-size: var(--wcfFontSizeSmall);
+       padding: 4px 12px !important;
+}
 
-               /* -- Overrides the default .ck-list class colors. ------------------------------------------ */
+.ck.ck-form__row {
+       column-gap: 10px;
+       justify-content: flex-end !important;
 
-               --ck-color-list-background: var(--ck-custom-background);
-               --ck-color-list-button-hover-background: var(--ck-color-base-foreground);
-               --ck-color-list-button-on-background: var(--ck-color-base-active);
-               --ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
-               --ck-color-list-button-on-text: var(--ck-color-base-background);
+       .ck-button__icon {
+               display: none;
+       }
 
-               /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
+       .ck-button {
+               flex: 0 0 auto !important;
+               margin: 0 !important;
 
-               --ck-color-panel-background: var(--ck-custom-background);
-               --ck-color-panel-border: var(--ck-custom-border);
+               &:not(.ck-disabled) {
+                       cursor: pointer;
+               }
 
-               /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
+               &.ck-disabled {
+                       --ck-color-text: var(--wcfButtonDisabledText) !important;
 
-               --ck-color-toolbar-background: var(--ck-custom-background);
-               --ck-color-toolbar-border: var(--ck-custom-border);
+                       background-color: var(--wcfButtonDisabledBackground) !important;
+               }
+       }
 
-               /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
+       .ck-button[type="button"] {
+               order: 1;
+       }
 
-               --ck-color-tooltip-background: hsl(252, 7%, 14%);
-               --ck-color-tooltip-text: hsl(0, 0%, 93%);
+       .ck-button[type="submit"] {
+               order: 2;
+       }
 
-               /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
+       .ck-button[type="button"]:not(.ck-disabled):hover {
+               --ck-color-text: var(--wcfButtonTextActive);
 
-               --ck-color-image-caption-background: hsl(0, 0%, 97%);
-               --ck-color-image-caption-text: hsl(0, 0%, 20%);
+               background-color: var(--wcfButtonBackgroundActive);
+       }
 
-               /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
+       .ck-button[type="submit"]:not(.ck-disabled) {
+               --ck-color-text: var(--wcfButtonPrimaryText);
 
-               --ck-color-widget-blurred-border: hsl(0, 0%, 87%);
-               --ck-color-widget-hover-border: hsl(43, 100%, 68%);
-               --ck-color-widget-editable-focus-background: var(--ck-custom-white);
+               background-color: var(--wcfButtonPrimaryBackground);
 
-               /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
+               &:hover {
+                       --ck-color-text: var(--wcfButtonPrimaryTextActive);
 
-               --ck-color-link-default: hsl(190, 100%, 75%);
+                       background-color: var(--wcfButtonPrimaryBackgroundActive);
+               }
        }
+}
 
-       /* WoltLab overrides */
-       .ck.ck-editor {
-               --ck-color-base-background: var(--wcfContentContainerBackground);
-               --ck-custom-border: #808080;
-       }
-       .ck.ck-editor .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
-               border-color: var(--ck-custom-border);
+html[data-color-scheme="dark"] {
+       .ck.ck-reset.ck-dropdown__panel,
+       .ck.ck-balloon-panel {
+               border-color: var(--wcfDropdownBorderInner);
        }
 }