/* Scoped tweaks for the CKEditor 5 wrapper (CkEditorField.jsx). Kept out of app.css so the global stylesheet stays Tailwind + tokens only. CKEditor ships its own light theme via ckeditor5.css; these rules adjust sizing, the read-only (Feedback) presentation, and a full dark-mode remap. */ /* Read-only (Feedback) viewer: hide the toolbar so it reads as a rendered document, and let it size to its content. */ .cc-ck-readonly .ck.ck-toolbar { display: none; } .cc-ck-readonly .ck.ck-editor__main > .ck.ck-editor__editable { /* Dynamic min: hug the content (short conclusions stay compact, long ones grow up to --cc-ck-max-height, then scroll). The bundled ckeditor5.css carries a `min-height: 300px !important` on `.ck-editor__main > .ck-editor__editable` (specificity 0,4,0) — beat it with a higher-specificity (0,5,0) selector AND !important so the read-only viewer actually collapses to its content. */ min-height: 0 !important; /* Restore the top corners the toolbar would normally round off. */ border-radius: var(--ck-border-radius, 4px) !important; } /* Match the surrounding field borders to the design token. */ .cc-ck-field .ck.ck-editor__main > .ck-editor__editable, .cc-ck-field .ck.ck-toolbar { border-color: var(--color-border); } /* Placeholder styling to match the app's input placeholders (muted token, normal weight/style) instead of CKEditor's default mid-grey. */ .cc-ck-field { --ck-color-engine-placeholder-text: color-mix(in srgb, var(--color-text-muted) 60%, transparent); } .cc-ck-field .ck.ck-editor__editable .ck-placeholder::before, .cc-ck-field .ck.ck-editor__editable.ck-placeholder::before { color: color-mix(in srgb, var(--color-text-muted) 60%, transparent); font-style: normal; font-weight: 400; } /* Opt-in rounder frame (≈ rounded-xl design-system cards). Add `cc-ck-rounded` to the wrapper className. Rounds the toolbar's top + the editable's bottom so the whole editor box reads as one rounded card. */ .cc-ck-rounded .ck.ck-toolbar, .cc-ck-rounded .ck.ck-editor__top .ck.ck-sticky-panel__content { border-top-left-radius: 0.75rem !important; border-top-right-radius: 0.75rem !important; overflow: hidden; } .cc-ck-rounded .ck.ck-editor__main > .ck.ck-editor__editable { border-bottom-left-radius: 0.75rem !important; border-bottom-right-radius: 0.75rem !important; /* 3/4 of the bundle's forced 300px (specificity 0,5,0 + !important beats it). */ min-height: 225px !important; } /* Opt-in shorter editable (short comment boxes). Chaining both classes (0,6,0) outranks the rounded rule above so it wins regardless of source order. */ .cc-ck-rounded.cc-ck-compact .ck.ck-editor__main > .ck.ck-editor__editable { min-height: 112px !important; } /* ============================================================================ DARK MODE ---------------------------------------------------------------------------- CKEditor's UI reads `--ck-color-*` custom properties (theme: lark). We redefine them on `html[data-theme='dark']` so EVERY `.ck` element inherits the dark values — including the toolbar dropdowns, link balloon, table-properties dialog and tooltips, which CKEditor renders in `.ck-body-wrapper` at the END of (outside the React component subtree). The `html[...]` selector has specificity (0,1,1), beating ckeditor5.css's own `:root` defaults (0,1,0) regardless of stylesheet load order. Values map to the app's dark design tokens (app.css). ============================================================================ */ html[data-theme='dark'] { /* --- Base palette --- */ --ck-color-base-foreground: var(--color-surface-tint); --ck-color-base-background: var(--color-surface); --ck-color-base-border: var(--color-border); --ck-color-base-action: var(--color-success); --ck-color-base-focus: var(--color-primary); --ck-color-base-text: var(--color-text-body); --ck-color-base-active: var(--color-primary); --ck-color-base-active-focus: var(--color-primary-hover); --ck-color-base-error: var(--color-danger); /* --- Focus ring --- */ --ck-color-focus-border: var(--color-primary); --ck-color-focus-outer-shadow: rgb(200 156 255 / 0.18); --ck-color-focus-disabled-shadow: rgb(200 156 255 / 0.1); /* --- Text / shadows --- */ --ck-color-text: var(--color-text-body); --ck-color-shadow-drop: 0 4px 12px rgb(0 0 0 / 0.45); --ck-color-shadow-drop-active: 0 6px 16px rgb(0 0 0 / 0.55); --ck-color-shadow-inner: none; /* --- Buttons --- */ --ck-color-button-default-background: transparent; --ck-color-button-default-hover-background: var(--color-surface-hover); --ck-color-button-default-active-background: var(--color-surface-hover); --ck-color-button-default-disabled-background: transparent; --ck-color-button-on-background: var(--color-primary-light); --ck-color-button-on-hover-background: rgb(200 156 255 / 0.28); --ck-color-button-on-active-background: rgb(200 156 255 / 0.28); --ck-color-button-on-disabled-background: transparent; --ck-color-button-on-color: var(--color-primary); --ck-color-button-action-background: var(--color-success); --ck-color-button-action-hover-background: var(--color-success-text); --ck-color-button-action-active-background: var(--color-success-text); --ck-color-button-action-disabled-background: var(--color-surface-tint); --ck-color-button-action-text: var(--color-text-inverse); --ck-color-button-save: var(--color-success); --ck-color-button-cancel: var(--color-danger); --ck-color-switch-button-off-background: var(--color-border-strong); --ck-color-switch-button-off-hover-background: var(--color-text-muted); --ck-color-switch-button-on-background: var(--color-primary); --ck-color-switch-button-on-hover-background: var(--color-primary-hover); --ck-color-switch-button-inner-background: var(--color-surface); /* --- Dropdowns / panels / lists --- */ --ck-color-dropdown-panel-background: var(--color-surface); --ck-color-dropdown-panel-border: var(--color-border); --ck-color-panel-background: var(--color-surface); --ck-color-panel-border: var(--color-border); --ck-color-list-background: var(--color-surface); --ck-color-list-button-hover-background: var(--color-surface-hover); --ck-color-list-button-on-background: var(--color-primary); --ck-color-list-button-on-background-focus: var(--color-primary-hover); --ck-color-list-button-on-text: var(--color-text-inverse); /* --- Toolbar --- */ --ck-color-toolbar-background: var(--color-surface-tint); --ck-color-toolbar-border: var(--color-border); /* --- Inputs --- */ --ck-color-input-background: var(--color-input-bg); --ck-color-input-border: var(--color-border-strong); --ck-color-input-error-border: var(--color-danger); --ck-color-input-text: var(--color-text-body); --ck-color-input-disabled-background: var(--color-surface-tint); --ck-color-input-disabled-border: var(--color-border); --ck-color-input-disabled-text: var(--color-text-muted); /* --- Labeled field (floating label sits on the input/editable bg) --- */ --ck-color-labeled-field-label-background: var(--color-surface); /* --- Dialog (table/cell properties, etc.) --- */ --ck-color-dialog-background: var(--color-surface); --ck-color-dialog-form-header-border: var(--color-border); /* --- Tooltip --- */ --ck-color-tooltip-background: var(--color-text-heading); --ck-color-tooltip-text: var(--color-app-bg); /* --- Editable widgets (images, tables as widgets) --- */ --ck-color-widget-blurred-border: var(--color-border-strong); --ck-color-widget-hover-border: var(--color-primary); --ck-color-widget-editable-focus-background: var(--color-surface); --ck-color-widget-drag-handler-icon-color: var(--color-text-inverse); /* --- Links --- */ --ck-color-link-default: var(--color-primary); --ck-color-link-fake-selection: rgb(200 156 255 / 0.2); --ck-color-link-selected-background: rgb(200 156 255 / 0.2); /* --- Resize / split-view handles --- */ --ck-color-resizer: var(--color-primary); --ck-color-resizer-tooltip-background: var(--color-text-heading); --ck-color-resizer-tooltip-text: var(--color-app-bg); /* --- Image caption --- */ --ck-color-image-caption-background: var(--color-surface-tint); --ck-color-image-caption-text: var(--color-text-muted); /* --- Table (UI selection, not the content document) --- */ --ck-color-selector-focused-cell-background: rgb(200 156 255 / 0.12); /* --- Code block --- */ --ck-color-code-block-label-background: var(--color-surface-tint); } /* The editable area + its rendered content (`.ck-content`) don't always pick up text color from a variable alone — pin them to the body token in dark mode so typed/pasted text stays readable. */ html[data-theme='dark'] .cc-ck-field .ck.ck-editor__editable, html[data-theme='dark'] .cc-ck-field .ck.ck-content { background: var(--color-surface); color: var(--color-text-body); } /* Document-content table borders in ckeditor5-content.css are hardcoded light grey; soften them to the dark border token so pasted/inserted tables read cleanly. */ html[data-theme='dark'] .cc-ck-field .ck-content .table table, html[data-theme='dark'] .cc-ck-field .ck-content .table table td, html[data-theme='dark'] .cc-ck-field .ck-content .table table th { border-color: var(--color-border-strong); } html[data-theme='dark'] .cc-ck-field .ck-content .table table th { background: var(--color-surface-tint); }