@_sh/strapi-plugin-ckeditor 2.0.3 → 2.1.0

package/admin/src/components/Input/CKEditor/theme/dark.js

@@ -1,144 +1,144 @@
-import { css } from "styled-components";
-
-export const dark = css`
-  :root {
-    --ck-color-focus-outer-shadow: rgba(77, 115, 255, 0.2) !important;
-    --ck-color-focus-disabled-shadow: rgba(106, 114, 143, 0.4) !important;
-    --ck-focus-ring: 1px solid #4945ff !important;
-    --ck-color-button-default-hover-background: #262630 !important;
-
-    .ck .ck-color-picker > svg {
-      color: #ffffff !important;
-    }
-    .ck .ck-color-picker-save {
-      & > svg {
-        stroke: #ffffff !important;
-      }
-      & > svg > #primary,
-      #primary-2 {
-        stroke: #7b79ff !important;
-      }
-    }
-  }
-
-  .ck {
-    --ck-scroll-track-background: #3d3d57;
-    --ck-scroll-thumb-background: #181826;
-    --ck-scroll-thumb-border-color: rgb(70, 70, 70);
-    --ck-scroll-thumb-hover-background: #202033;
-    --ck-scroll-thumb-active-background: #2b2b45;
-
-    --ck-color-editor-base-text: rgb(236, 236, 236);
-    /* Overrides the border radius setting in the theme. */
-    --ck-border-radius: 4px;
-
-    /* Helper variables to avoid duplication in the colors. */
-    --ck-color-base-border: #4a4a6a;
-    --ck-color-base-background: #212134;
-    --ck-custom-background: #181826;
-    --ck-custom-foreground: #26263b;
-    --ck-custom-border: #4a4a6a;
-    --ck-custom-white: hsl(0, 0%, 100%);
-
-    --ck-color-focus-outer-shadow: #212134;
-
-    --ck-color-base-focus: #bbbaf1;
-    --ck-color-base-active: #2e2e5c;
-    --ck-color-base-active-focus: #28284d;
-    /* -- Overrides generic colors. ------------------------------------------------------------- */
-
-    --ck-color-base-foreground: var(--ck-custom-background);
-    --ck-color-focus-border: #6765bd;
-    --ck-color-text: hsl(0, 0%, 93%);
-    --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: rgb(33, 33, 52);
-
-    --ck-color-button-default-hover-background: #262630;
-    --ck-color-button-default-active-background: #3c3c47;
-    --ck-color-button-default-active-shadow: #3c3c47;
-    --ck-color-button-default-disabled-background: var(--ck-custom-background);
-
-    --ck-color-button-on-color: #7b79ff;
-    --ck-color-button-on-background: #2b2b36;
-    --ck-color-button-on-hover-background: #30303b;
-    --ck-color-button-on-active-background: #3c3c47;
-    --ck-color-button-on-active-shadow: #3c3c47;
-    --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. ----------------------------------- */
-
-    --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
-    --ck-color-split-button-hover-border: var(--ck-custom-foreground);
-
-    /* -- Overrides the default .ck-input class colors. ----------------------------------------- */
-
-    --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%);
-
-    /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */
-
-    --ck-color-labeled-field-label-background: var(--ck-custom-background);
-
-    /* -- Overrides the default .ck-list class colors. ------------------------------------------ */
-
-    --ck-color-list-background: var(--ck-custom-background);
-    --ck-color-list-button-hover-background: #121221;
-    --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: #ffffff;
-
-    /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
-
-    --ck-color-panel-background: var(--ck-custom-background);
-    --ck-color-panel-border: var(--ck-custom-border);
-
-    /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
-
-    --ck-color-toolbar-background: var(--ck-custom-background);
-    --ck-color-toolbar-border: var(--ck-custom-border);
-
-    /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
-
-    --ck-color-tooltip-background: #3a3955;
-    --ck-color-tooltip-text: hsl(0, 0%, 93%);
-
-    /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
-
-    --ck-color-image-caption-background: hsl(0, 0%, 97%);
-    --ck-color-image-caption-text: hsl(0, 0%, 20%);
-
-    /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
-
-    --ck-color-widget-blurred-border: #7c7c96;
-    --ck-color-widget-hover-border: #666687;
-    --ck-color-widget-editable-focus-background: var(--ck-custom-white);
-
-    /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
-
-    --ck-color-link-default: hsl(216, 100%, 75%);
-  }
-
-`;
+import { css } from "styled-components";
+
+export const dark = css`
+  :root {
+    --ck-color-focus-outer-shadow: rgba(77, 115, 255, 0.2) !important;
+    --ck-color-focus-disabled-shadow: rgba(106, 114, 143, 0.4) !important;
+    --ck-focus-ring: 1px solid #4945ff !important;
+    --ck-color-button-default-hover-background: #262630 !important;
+
+    .ck .ck-color-picker > svg {
+      color: #ffffff !important;
+    }
+    .ck .ck-color-picker-save {
+      & > svg {
+        stroke: #ffffff !important;
+      }
+      & > svg > #primary,
+      #primary-2 {
+        stroke: #7b79ff !important;
+      }
+    }
+  }
+
+  .ck {
+    --ck-scroll-track-background: #3d3d57;
+    --ck-scroll-thumb-background: #181826;
+    --ck-scroll-thumb-border-color: rgb(70, 70, 70);
+    --ck-scroll-thumb-hover-background: #202033;
+    --ck-scroll-thumb-active-background: #2b2b45;
+
+    --ck-color-editor-base-text: rgb(236, 236, 236);
+    /* Overrides the border radius setting in the theme. */
+    --ck-border-radius: 4px;
+
+    /* Helper variables to avoid duplication in the colors. */
+    --ck-color-base-border: #4a4a6a;
+    --ck-color-base-background: #212134;
+    --ck-custom-background: #181826;
+    --ck-custom-foreground: #26263b;
+    --ck-custom-border: #4a4a6a;
+    --ck-custom-white: hsl(0, 0%, 100%);
+
+    --ck-color-focus-outer-shadow: #212134;
+
+    --ck-color-base-focus: #bbbaf1;
+    --ck-color-base-active: #2e2e5c;
+    --ck-color-base-active-focus: #28284d;
+    /* -- Overrides generic colors. ------------------------------------------------------------- */
+
+    --ck-color-base-foreground: var(--ck-custom-background);
+    --ck-color-focus-border: #6765bd;
+    --ck-color-text: hsl(0, 0%, 93%);
+    --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: rgb(33, 33, 52);
+
+    --ck-color-button-default-hover-background: #262630;
+    --ck-color-button-default-active-background: #3c3c47;
+    --ck-color-button-default-active-shadow: #3c3c47;
+    --ck-color-button-default-disabled-background: var(--ck-custom-background);
+
+    --ck-color-button-on-color: #7b79ff;
+    --ck-color-button-on-background: #2b2b36;
+    --ck-color-button-on-hover-background: #30303b;
+    --ck-color-button-on-active-background: #3c3c47;
+    --ck-color-button-on-active-shadow: #3c3c47;
+    --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. ----------------------------------- */
+
+    --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
+    --ck-color-split-button-hover-border: var(--ck-custom-foreground);
+
+    /* -- Overrides the default .ck-input class colors. ----------------------------------------- */
+
+    --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%);
+
+    /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */
+
+    --ck-color-labeled-field-label-background: var(--ck-custom-background);
+
+    /* -- Overrides the default .ck-list class colors. ------------------------------------------ */
+
+    --ck-color-list-background: var(--ck-custom-background);
+    --ck-color-list-button-hover-background: #121221;
+    --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: #ffffff;
+
+    /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
+
+    --ck-color-panel-background: var(--ck-custom-background);
+    --ck-color-panel-border: var(--ck-custom-border);
+
+    /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
+
+    --ck-color-toolbar-background: var(--ck-custom-background);
+    --ck-color-toolbar-border: var(--ck-custom-border);
+
+    /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
+
+    --ck-color-tooltip-background: #3a3955;
+    --ck-color-tooltip-text: hsl(0, 0%, 93%);
+
+    /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
+
+    --ck-color-image-caption-background: hsl(0, 0%, 97%);
+    --ck-color-image-caption-text: hsl(0, 0%, 20%);
+
+    /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
+
+    --ck-color-widget-blurred-border: #7c7c96;
+    --ck-color-widget-hover-border: #666687;
+    --ck-color-widget-editable-focus-background: var(--ck-custom-white);
+
+    /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
+
+    --ck-color-link-default: hsl(216, 100%, 75%);
+  }
+
+`;

package/admin/src/components/Input/CKEditor/theme/index.js

@@ -1,13 +1,13 @@
-import { common } from './common';
-import { light } from './light';
-import { dark } from './dark';
-import { additional } from './additional';
-
-const baseTheme = {
-    common: common,
-    light: light,
-    dark: dark,
-    additional: additional
-}
-
+import { common } from './common';
+import { light } from './light';
+import { dark } from './dark';
+import { additional } from './additional';
+
+const baseTheme = {
+    common: common,
+    light: light,
+    dark: dark,
+    additional: additional
+}
+
 export default baseTheme;

package/admin/src/components/Input/CKEditor/theme/light.js

@@ -1,135 +1,135 @@
-import { css } from "styled-components";
-
-export const light = css`
-  :root {
-    --ck-color-focus-outer-shadow: rgba(77, 115, 255, 0.2) !important;
-    --ck-color-focus-disabled-shadow: #e4e3ff !important;
-    --ck-focus-ring: 1px solid rgb(73, 69, 255) !important;
-    --ck-color-button-default-hover-background: #F0F0FF !important;
-
-    .ck .ck-color-picker-save {
-      & > svg {
-        stroke: #7b79ff !important;
-      }
-    }
-  }
-
-  .ck {
-    --ck-scroll-track-background: rgb(242, 242, 242);
-    --ck-scroll-thumb-background: rgb(236, 236, 236);
-    --ck-scroll-thumb-border-color: #cdcdf8;
-    --ck-scroll-thumb-hover-background: #f0f0ff;
-    --ck-scroll-thumb-active-background: #d9d8ff;
-
-    --ck-color-editor-base-text: #001234;
-    /* Overrides the border radius setting in the theme. */
-    --ck-border-radius: 4px;
-
-    /* Helper variables to avoid duplication in the colors. */
-    --ck-color-base-border: #dcdce4;
-    --ck-color-base-background: #ffffff;
-    --ck-custom-background: #ffffff;
-    --ck-custom-foreground: #dedede;
-    --ck-custom-border: #dcdce4;
-    --ck-custom-white: hsl(0, 0%, 100%);
-
-    --ck-color-base-focus: #bbbaf1;
-    --ck-color-base-active: #f0f0ff;
-    --ck-color-base-active-focus: #e2e2fd;
-    /* -- Overrides generic colors. ------------------------------------------------------------- */
-
-    --ck-color-base-foreground: var(--ck-custom-background);
-
-    --ck-color-focus-border: rgb(73, 69, 255);
-
-    --ck-color-text: #32324d;
-    --ck-color-shadow-drop: hsla(250, 31%, 80%, 0.1);
-    --ck-color-shadow-inner: hsla(250, 31%, 80%, 0.1);
-
-    /* -- Overrides the default .ck-button class colors. ---------------------------------------- */
-
-    --ck-color-button-default-background: var(--ck-custom-background);
-    --ck-color-button-default-hover-background: #f0f0ff;
-    --ck-color-button-default-active-background: #f6f6f9;
-    --ck-color-button-default-active-shadow: #dedefb;
-    --ck-color-button-default-disabled-background: var(--ck-custom-background);
-
-    --ck-color-button-on-color: rgb(73, 69, 255);
-    --ck-color-button-on-background: #f0f0ff;
-    --ck-color-button-on-hover-background: #e6e9fc;
-    --ck-color-button-on-active-background: #f6f6f9;
-    --ck-color-button-on-active-shadow: #cdcdf8;
-    --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. ----------------------------------- */
-
-    --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
-    --ck-color-split-button-hover-border: var(--ck-custom-foreground);
-
-    /* -- Overrides the default .ck-input class colors. ----------------------------------------- */
-
-    --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(0, 0%, 97%);
-    --ck-color-input-disabled-border: rgb(214, 214, 214);
-    --ck-color-input-disabled-text: hsl(0, 0%, 78%);
-
-    /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */
-
-    --ck-color-labeled-field-label-background: var(--ck-custom-background);
-
-    /* -- Overrides the default .ck-list class colors. ------------------------------------------ */
-
-    --ck-color-list-background: var(--ck-custom-background);
-    --ck-color-list-button-hover-background: #f4f4fb;
-    --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: #271fe2;
-
-    /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
-
-    --ck-color-panel-background: var(--ck-custom-background);
-    --ck-color-panel-border: var(--ck-custom-border);
-
-    /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
-
-    --ck-color-toolbar-background: var(--ck-custom-background);
-    --ck-color-toolbar-border: var(--ck-custom-border);
-
-    /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
-
-    --ck-color-tooltip-background: #3a3955;
-    --ck-color-tooltip-text: hsl(0, 0%, 93%);
-
-    /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
-
-    --ck-color-image-caption-background: hsl(0, 0%, 97%);
-    --ck-color-image-caption-text: hsl(0, 0%, 20%);
-
-    /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
-
-    --ck-color-widget-blurred-border: #cfcffa;
-    --ck-color-widget-hover-border: #c9c9e4;
-    --ck-color-widget-editable-focus-background: var(--ck-custom-white);
-
-    /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
-
-    --ck-color-link-default: hsl(209, 89%, 33%);
-  }
-`;
+import { css } from "styled-components";
+
+export const light = css`
+  :root {
+    --ck-color-focus-outer-shadow: rgba(77, 115, 255, 0.2) !important;
+    --ck-color-focus-disabled-shadow: #e4e3ff !important;
+    --ck-focus-ring: 1px solid rgb(73, 69, 255) !important;
+    --ck-color-button-default-hover-background: #F0F0FF !important;
+
+    .ck .ck-color-picker-save {
+      & > svg {
+        stroke: #7b79ff !important;
+      }
+    }
+  }
+
+  .ck {
+    --ck-scroll-track-background: rgb(242, 242, 242);
+    --ck-scroll-thumb-background: rgb(236, 236, 236);
+    --ck-scroll-thumb-border-color: #cdcdf8;
+    --ck-scroll-thumb-hover-background: #f0f0ff;
+    --ck-scroll-thumb-active-background: #d9d8ff;
+
+    --ck-color-editor-base-text: #001234;
+    /* Overrides the border radius setting in the theme. */
+    --ck-border-radius: 4px;
+
+    /* Helper variables to avoid duplication in the colors. */
+    --ck-color-base-border: #dcdce4;
+    --ck-color-base-background: #ffffff;
+    --ck-custom-background: #ffffff;
+    --ck-custom-foreground: #dedede;
+    --ck-custom-border: #dcdce4;
+    --ck-custom-white: hsl(0, 0%, 100%);
+
+    --ck-color-base-focus: #bbbaf1;
+    --ck-color-base-active: #f0f0ff;
+    --ck-color-base-active-focus: #e2e2fd;
+    /* -- Overrides generic colors. ------------------------------------------------------------- */
+
+    --ck-color-base-foreground: var(--ck-custom-background);
+
+    --ck-color-focus-border: rgb(73, 69, 255);
+
+    --ck-color-text: #32324d;
+    --ck-color-shadow-drop: hsla(250, 31%, 80%, 0.1);
+    --ck-color-shadow-inner: hsla(250, 31%, 80%, 0.1);
+
+    /* -- Overrides the default .ck-button class colors. ---------------------------------------- */
+
+    --ck-color-button-default-background: var(--ck-custom-background);
+    --ck-color-button-default-hover-background: #f0f0ff;
+    --ck-color-button-default-active-background: #f6f6f9;
+    --ck-color-button-default-active-shadow: #dedefb;
+    --ck-color-button-default-disabled-background: var(--ck-custom-background);
+
+    --ck-color-button-on-color: rgb(73, 69, 255);
+    --ck-color-button-on-background: #f0f0ff;
+    --ck-color-button-on-hover-background: #e6e9fc;
+    --ck-color-button-on-active-background: #f6f6f9;
+    --ck-color-button-on-active-shadow: #cdcdf8;
+    --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. ----------------------------------- */
+
+    --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
+    --ck-color-split-button-hover-border: var(--ck-custom-foreground);
+
+    /* -- Overrides the default .ck-input class colors. ----------------------------------------- */
+
+    --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(0, 0%, 97%);
+    --ck-color-input-disabled-border: rgb(214, 214, 214);
+    --ck-color-input-disabled-text: hsl(0, 0%, 78%);
+
+    /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */
+
+    --ck-color-labeled-field-label-background: var(--ck-custom-background);
+
+    /* -- Overrides the default .ck-list class colors. ------------------------------------------ */
+
+    --ck-color-list-background: var(--ck-custom-background);
+    --ck-color-list-button-hover-background: #f4f4fb;
+    --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: #271fe2;
+
+    /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
+
+    --ck-color-panel-background: var(--ck-custom-background);
+    --ck-color-panel-border: var(--ck-custom-border);
+
+    /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
+
+    --ck-color-toolbar-background: var(--ck-custom-background);
+    --ck-color-toolbar-border: var(--ck-custom-border);
+
+    /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
+
+    --ck-color-tooltip-background: #3a3955;
+    --ck-color-tooltip-text: hsl(0, 0%, 93%);
+
+    /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
+
+    --ck-color-image-caption-background: hsl(0, 0%, 97%);
+    --ck-color-image-caption-text: hsl(0, 0%, 20%);
+
+    /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
+
+    --ck-color-widget-blurred-border: #cfcffa;
+    --ck-color-widget-hover-border: #c9c9e4;
+    --ck-color-widget-editable-focus-background: var(--ck-custom-white);
+
+    /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
+
+    --ck-color-link-default: hsl(209, 89%, 33%);
+  }
+`;