@domternal/theme 0.6.2 → 0.7.0

package/src/_variables.scss

@@ -27,9 +27,91 @@
   --dm-accent-surface: rgba(37, 99, 235, 0.1);
   --dm-focus-color: rgba(66, 133, 244, 0.3);
   --dm-selection: rgba(66, 133, 244, 0.2);
+
+  // Shared scrollbar thumb colors used by slash / context / floating menu
+  // and any other thin-scrollbar popup. Override in dark theme for contrast.
+  --dm-scrollbar-thumb: rgba(0, 0, 0, 0.18);
+  --dm-scrollbar-thumb-hover: rgba(0, 0, 0, 0.28);
+
+  // Centralised z-index ladder for overlays. Handle sits below floating
+  // menus so opening a menu overlays the handle naturally.
+  --dm-z-handle: 25;
+  --dm-z-popover: 50;
+
+  // Gutter width reserved on `.ProseMirror` when BlockHandle is active.
+  // Override per-editor if you need wider/narrower whitespace left of content.
+  --dm-block-handle-gutter: 3rem;
+
+  // Horizontal offset of the BlockHandle from the editor's left edge.
+  // Negative values place the handle in the surrounding whitespace
+  // (requires `.dm-editor--has-block-handle { overflow: visible }`).
+  // Override to move the handle fully outside a centered content column
+  // - see the Notion demo for an example.
+  --dm-block-handle-left: -0.5rem;
+
+  // Inline padding pre-applied to every colorable block (paragraph, heading,
+  // blockquote, list item, task item). Pre-applying it here means that the
+  // `[data-bg-color]` rule in `_block-colors.scss` only paints a background
+  // - it does NOT add padding - so toggling a color does NOT shift text.
+  // Mirrors Notion's layout convention.
+  --dm-block-inline-padding: 0.375rem;
+
+  // Horizontal indent applied to non-first-paragraph children of list/task
+  // items - the "children zone" below the bullet/checkbox label paragraph.
+  // Notion semantics: label aligns with the marker, additional blocks
+  // (heading, codeBlock, blockquote, etc.) render indented one level
+  // below it.
+  //
+  // `rem` (not `em`): we want every children-zone block to land in the
+  // SAME visual column regardless of its own font-size, so the indent
+  // stays decoupled from the child element's typography (a heading's
+  // larger font would otherwise produce a wider em-based indent than
+  // a sibling paragraph). Override per-editor for tighter/looser
+  // hierarchy.
+  --dm-block-children-indent: 1.5rem;
+
+  // Shared drop shadow for popover surfaces (floating menu, slash command,
+  // context menu). Override in dark theme for visibility on dark bg.
+  --dm-popover-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
   --dm-code-surface: #f0f0f0;
   --dm-code-color: inherit;
 
+  // ---------------------------------------------------------------------------
+  // Block colors (BlockColor extension)
+  // ---------------------------------------------------------------------------
+  // Notion-style block-level palette (9 named colors). Dark-mode overrides
+  // live in `themes/_dark.scss`. Source (light): https://matthiasfrank.de/en/notion-colors/
+  --dm-block-bg-gray: #f1f1ef;
+  --dm-block-bg-brown: #f3eeee;
+  --dm-block-bg-orange: #f8ecdf;
+  --dm-block-bg-yellow: #faf3dd;
+  --dm-block-bg-green: #eef3ed;
+  --dm-block-bg-blue: #e9f3f7;
+  --dm-block-bg-purple: #f6f3f8;
+  --dm-block-bg-pink: #f9f2f5;
+  --dm-block-bg-red: #faecec;
+
+  --dm-block-text-gray: #787774;
+  --dm-block-text-brown: #976d57;
+  --dm-block-text-orange: #cc782f;
+  --dm-block-text-yellow: #c29343;
+  --dm-block-text-green: #548164;
+  --dm-block-text-blue: #487ca5;
+  --dm-block-text-purple: #8a67ab;
+  --dm-block-text-pink: #b35488;
+  --dm-block-text-red: #c4554d;
+
+  // Halo around the currently-selected block while a drag handle is active.
+  // Used by `_block-handle.scss` as the `::before` background-color (the
+  // pseudo-element sits behind the block at `z-index: -1` so the halo
+  // never overlaps surrounding chrome the way a real outline would).
+  --dm-block-selected-halo: rgba(112, 207, 248, 0.25);
+
+  // Background tint applied to a block while its context menu is open.
+  // Used by `_context-menu.scss` via a Decoration class. Dark theme
+  // override lives in `themes/_dark.scss`.
+  --dm-block-context-active-bg: rgba(55, 53, 47, 0.06);
+
   // ---------------------------------------------------------------------------
   // Editor
   // ---------------------------------------------------------------------------
@@ -122,6 +204,18 @@
   --dm-details-border: 1px solid var(--dm-border-color);
   --dm-details-bg: var(--dm-surface);
   --dm-details-summary-font-weight: 600;
+
+  // ---------------------------------------------------------------------------
+  // Task list
+  // ---------------------------------------------------------------------------
+  // Position of the absolutely-positioned checkbox label inside a taskItem.
+  // `left` hangs the checkbox in the bullet column (paired with the
+  // wrapper's `padding-left: 1.5em` and the checkbox's own 1em width).
+  // `top` is tuned to the first text line's x-height. Override these when
+  // overriding `--dm-editor-line-height` so the checkbox stays aligned
+  // with the first label glyph.
+  --dm-task-checkbox-left: -1.15em;
+  --dm-task-checkbox-top: 0.45em;
 }
 
 // =============================================================================
@@ -148,3 +242,100 @@
   --dm-separator-color: var(--dm-border-color, #e5e7eb);
   --dm-separator-margin: 0.375rem;
 }
+
+// =============================================================================
+// Table-of-contents variables (on :root)
+// =============================================================================
+// The floating ToC outline mounts OUTSIDE `.dm-editor` (so it can sit in
+// the page's right gutter instead of being clipped by the editor's
+// `overflow: hidden`). Tokens therefore live on `:root` to be visible
+// regardless of cascade. Dark theme overrides land in `_dark.scss`.
+
+:root {
+  // Tick widths per heading level. H1 widest, H3 narrowest - the
+  // length encodes hierarchy in the collapsed (default) state.
+  --dm-toc-tick-h1-width: 18px;
+  --dm-toc-tick-h2-width: 12px;
+  --dm-toc-tick-h3-width: 8px;
+  --dm-toc-tick-h4-width: 6px;
+  --dm-toc-tick-h5-width: 5px;
+  --dm-toc-tick-h6-width: 4px;
+  --dm-toc-tick-height: 2px;
+  --dm-toc-tick-radius: 1px;
+  --dm-toc-tick-gap: 10px;
+
+  // Tick color: low-contrast neutral; active variant is full text color.
+  --dm-toc-tick-color: rgba(55, 53, 47, 0.4);
+  --dm-toc-tick-hover-color: rgba(55, 53, 47, 0.7);
+  --dm-toc-tick-active-color: rgba(55, 53, 47, 0.95);
+
+  // Panel chrome - mostly transparent in collapsed state, just enough
+  // padding to separate ticks visually from the page edge.
+  --dm-toc-padding-block: 12px;
+  --dm-toc-padding-inline: 8px;
+  --dm-toc-right-offset: 24px;
+  --dm-toc-z-index: 10;
+
+  // Editor-anchored outline (anchor: 'editor'): top offset from the
+  // editor's top edge. Used by `_toc.scss` sticky shell.
+  --dm-toc-editor-top: 1rem;
+
+  // Page-anchored outline (anchor: 'page'): right offset from the
+  // viewport (smaller than `--dm-toc-right-offset` when nav is mid-page).
+  --dm-toc-page-offset: 8px;
+
+  // Expanded card vertical margin from the viewport top/bottom.
+  // Used by `_toc.scss` viewport-clamp. The plugin writes
+  // `--dm-toc-card-shift-y` (a JS-computed shift) and reads this margin
+  // as the keep-out distance from the viewport edges.
+  --dm-toc-card-viewport-margin: 16px;
+
+  // Expanded card: replaces the tick column on hover/focus, showing the
+  // full heading text with per-level indent.
+  --dm-toc-card-bg: rgba(255, 255, 255, 0.98);
+  --dm-toc-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  --dm-toc-card-radius: 6px;
+  --dm-toc-card-border: 1px solid rgba(0, 0, 0, 0.06);
+  --dm-toc-card-min-width: 180px;
+  --dm-toc-card-max-width: 260px;
+  --dm-toc-card-padding-block: 6px;
+  // Card slides in from the right edge by this offset on hover/focus.
+  // 8px reads as a clearly intentional motion at 60fps without being
+  // showy; smaller values (4px) feel like a glitch on retina displays.
+  --dm-toc-card-offset: 8px;
+  --dm-toc-card-transition: 180ms;
+
+  --dm-toc-row-padding-block: 4px;
+  --dm-toc-row-padding-inline-start: 12px;
+  --dm-toc-row-padding-inline-end: 16px;
+  --dm-toc-row-indent: 14px;
+  --dm-toc-row-color: rgba(55, 53, 47, 0.7);
+  --dm-toc-row-hover-bg: rgba(0, 0, 0, 0.04);
+  --dm-toc-row-active-color: rgba(55, 53, 47, 0.95);
+  --dm-toc-row-active-weight: 600;
+  --dm-toc-row-font-size: 13px;
+  --dm-toc-row-line-height: 1.4;
+
+  // Inline /toc block: lives INSIDE the editor as a first-class document
+  // block. Notion-style callout (subtle surface tint, soft border).
+  --dm-toc-block-bg: rgba(0, 0, 0, 0.02);
+  --dm-toc-block-border: 1px solid rgba(0, 0, 0, 0.08);
+  --dm-toc-block-radius: 6px;
+  --dm-toc-block-padding-block: 12px;
+  --dm-toc-block-padding-inline: 16px;
+  --dm-toc-block-margin-block: 1rem;
+  --dm-toc-block-empty-color: rgba(55, 53, 47, 0.5);
+  --dm-toc-block-empty-font-style: italic;
+
+  --dm-toc-block-link-color: rgba(55, 53, 47, 0.8);
+  --dm-toc-block-link-hover-color: rgba(55, 53, 47, 1);
+  --dm-toc-block-link-hover-bg: rgba(0, 0, 0, 0.04);
+  --dm-toc-block-link-active-color: rgba(55, 53, 47, 0.95);
+  --dm-toc-block-link-active-weight: 600;
+  --dm-toc-block-link-padding-block: 4px;
+  --dm-toc-block-link-padding-inline: 8px;
+  --dm-toc-block-link-indent: 16px;
+  --dm-toc-block-link-radius: 3px;
+  --dm-toc-block-link-font-size: 0.9375rem;
+  --dm-toc-block-link-line-height: 1.5;
+}

package/src/index.scss

@@ -1,5 +1,5 @@
 // =============================================================================
-// @domternal/theme — Main Entry
+// @domternal/theme - Main Entry
 // =============================================================================
 // Import this file to get all Domternal editor styles:
 //
@@ -33,10 +33,13 @@
 @use 'toolbar';
 @use 'color-palette';
 
-// 6. Menus (bubble, floating, link popover)
+// 6. Menus (bubble, floating, link popover, block-menu)
 @use 'bubble-menu';
 @use 'floating-menu';
 @use 'link-popover';
+@use 'block-handle';
+@use 'slash-command';
+@use 'context-menu';
 
 // 7. Extension-specific styles
 @use 'placeholder';
@@ -47,12 +50,20 @@
 @use 'invisible-chars';
 @use 'emoji-picker';
 @use 'table-controls';
+@use 'block-colors';
+// MUST follow block-colors: the inline override depends on cascade ordering
+// to win over the block-level [data-bg-color] padding rule.
+@use 'inline-colors';
+@use 'toc';
 
-// 8. Themes
+// 8. Opt-in stylistic presets (apply via host class)
+@use 'notion-mode';
+
+// 9. Themes
 @use 'themes/light';
 @use 'themes/dark';
 
-// 9. Reduced motion — must come last to override all animation/transition rules
+// 9. Reduced motion - must come last to override all animation/transition rules
 // =============================================================================
 @media (prefers-reduced-motion: reduce) {
   .dm-emoji-picker,
@@ -88,7 +99,13 @@
   .dm-table-align-item,
   .dm-image-popover-btn,
   .dm-link-popover-btn,
+  .dm-block-handle,
+  .dm-block-handle-btn,
+  .dm-block-color-swatch,
+  .dm-slash-command-item,
+  .dm-block-context-menu-item,
   .dm-editor .ProseMirror div[data-type="details"] > button[type="button"]::before {
     transition: none;
+    transform: none;
   }
 }

package/src/themes/_dark.scss

@@ -29,9 +29,18 @@
   --dm-code-surface: #2d2d2d;
   --dm-code-color: inherit;
   --dm-highlight-bg: rgba(255, 243, 205, 0.2);
+
+  // Scrollbar thumb + popover shadow - lighten for contrast on dark bg.
+  --dm-scrollbar-thumb: rgba(255, 255, 255, 0.18);
+  --dm-scrollbar-thumb-hover: rgba(255, 255, 255, 0.32);
+  --dm-popover-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.25);
   --dm-blockquote-border: 3px solid #555555;
   --dm-blockquote-color: #a0a0a0;
 
+  // Subtle highlight tint for the block whose BlockContextMenu is open.
+  // Lighter alpha for dark backgrounds so the cue is visible but not jarring.
+  --dm-block-context-active-bg: rgba(255, 255, 255, 0.05);
+
   // Syntax highlighting
   --dm-syntax-keyword: #ff7b72;
   --dm-syntax-entity: #d2a8ff;
@@ -44,29 +53,135 @@
   --dm-syntax-addition-bg: #033a16;
   --dm-syntax-deletion: #ffdcd7;
   --dm-syntax-deletion-bg: #67060c;
+
+  // Block colors (Notion-style dark-mode palette). Backgrounds are
+  // desaturated darker tones; text colors carry the visible chroma.
+  // Source: Notion's published dark palette.
+  --dm-block-bg-gray: #2f2f2f;
+  --dm-block-bg-brown: #4a3228;
+  --dm-block-bg-orange: #5c3b1e;
+  --dm-block-bg-yellow: #564328;
+  --dm-block-bg-green: #243d30;
+  --dm-block-bg-blue: #143a4e;
+  --dm-block-bg-purple: #3c2d49;
+  --dm-block-bg-pink: #4e2c3c;
+  --dm-block-bg-red: #5c1e1e;
+
+  // Tuned for WCAG AA contrast (>= 4.5:1) against the dark editor
+  // background (#1e1e1e). Notion's published palette runs slightly
+  // darker on green/blue/orange/pink; we lift those a touch so text
+  // marks (which use these as the foreground color) remain readable
+  // without a tinted background.
+  --dm-block-text-gray: #9b9a97;
+  --dm-block-text-brown: #ba856f;
+  --dm-block-text-orange: #d68a52;
+  --dm-block-text-yellow: #ca9849;
+  --dm-block-text-green: #6db285;
+  --dm-block-text-blue: #7a9bd6;
+  --dm-block-text-purple: #a877d8;
+  --dm-block-text-pink: #dc6da4;
+  --dm-block-text-red: #df5452;
+
+  // Selected-block halo - lift opacity for visibility on dark bg.
+  --dm-block-selected-halo: rgba(112, 207, 248, 0.35);
+
+  // Note: layout / geometry tokens (--dm-block-handle-gutter,
+  // --dm-block-handle-left, --dm-block-inline-padding) are intentionally
+  // NOT overridden here - geometry stays identical between light/dark.
 }
 
 .dm-theme-dark,
 .dm-theme-dark .dm-editor,
 .dm-theme-dark .dm-toolbar,
 .dm-theme-dark .dm-bubble-menu,
+.dm-theme-dark .dm-floating-menu,
 .dm-theme-dark .dm-emoji-picker,
 .dm-theme-dark .dm-emoji-suggestion,
 .dm-theme-dark .dm-mention-suggestion,
-.dm-theme-dark .dm-table-controls-dropdown {
+.dm-theme-dark .dm-table-controls-dropdown,
+.dm-theme-dark .dm-slash-command-menu,
+.dm-theme-dark .dm-block-context-menu {
   @include dark-tokens;
 }
 
-// Auto dark mode — follows system preference
+// Auto dark mode - follows system preference
 @media (prefers-color-scheme: dark) {
   .dm-theme-auto,
   .dm-theme-auto .dm-editor,
   .dm-theme-auto .dm-toolbar,
   .dm-theme-auto .dm-bubble-menu,
+  .dm-theme-auto .dm-floating-menu,
   .dm-theme-auto .dm-emoji-picker,
   .dm-theme-auto .dm-emoji-suggestion,
   .dm-theme-auto .dm-mention-suggestion,
-  .dm-theme-auto .dm-table-controls-dropdown {
+  .dm-theme-auto .dm-table-controls-dropdown,
+  .dm-theme-auto .dm-slash-command-menu,
+  .dm-theme-auto .dm-block-context-menu {
     @include dark-tokens;
   }
 }
+
+// =============================================================================
+// Floating ToC outline - dark variant
+// =============================================================================
+// The outline mounts OUTSIDE `.dm-editor`, so it needs its own dark
+// selector list - the @include dark-tokens above scopes only general
+// theme tokens (text, background, etc.) which we do not need to flip
+// here. Tick colors are the only ToC tokens that need a dark variant.
+
+.dm-theme-dark .dm-toc-outline,
+.dm-theme-dark.dm-toc-outline {
+  --dm-toc-tick-color: rgba(255, 255, 255, 0.3);
+  --dm-toc-tick-hover-color: rgba(255, 255, 255, 0.6);
+  --dm-toc-tick-active-color: rgba(255, 255, 255, 0.95);
+
+  // Card variants - flip light surfaces to dark equivalents.
+  --dm-toc-card-bg: rgba(45, 50, 56, 0.98);
+  --dm-toc-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  --dm-toc-card-border: 1px solid rgba(255, 255, 255, 0.08);
+  --dm-toc-row-color: rgba(255, 255, 255, 0.7);
+  --dm-toc-row-hover-bg: rgba(255, 255, 255, 0.06);
+  --dm-toc-row-active-color: rgba(255, 255, 255, 0.95);
+}
+
+// Inline /toc block - dark variant. Only flip block-specific tokens; the
+// rest inherits from the dark cascade via the editor host.
+.dm-theme-dark .dm-toc-block,
+.dm-theme-dark.dm-toc-block {
+  --dm-toc-block-bg: rgba(255, 255, 255, 0.04);
+  --dm-toc-block-border: 1px solid rgba(255, 255, 255, 0.08);
+  --dm-toc-block-empty-color: rgba(255, 255, 255, 0.4);
+  --dm-toc-block-link-color: rgba(255, 255, 255, 0.7);
+  --dm-toc-block-link-hover-color: rgba(255, 255, 255, 0.95);
+  --dm-toc-block-link-hover-bg: rgba(255, 255, 255, 0.06);
+  --dm-toc-block-link-active-color: rgba(255, 255, 255, 0.95);
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-theme-auto .dm-toc-block,
+  .dm-theme-auto.dm-toc-block {
+    --dm-toc-block-bg: rgba(255, 255, 255, 0.04);
+    --dm-toc-block-border: 1px solid rgba(255, 255, 255, 0.08);
+    --dm-toc-block-empty-color: rgba(255, 255, 255, 0.4);
+    --dm-toc-block-link-color: rgba(255, 255, 255, 0.7);
+    --dm-toc-block-link-hover-color: rgba(255, 255, 255, 0.95);
+    --dm-toc-block-link-hover-bg: rgba(255, 255, 255, 0.06);
+    --dm-toc-block-link-active-color: rgba(255, 255, 255, 0.95);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-theme-auto .dm-toc-outline,
+  .dm-theme-auto.dm-toc-outline {
+    --dm-toc-tick-color: rgba(255, 255, 255, 0.3);
+    --dm-toc-tick-hover-color: rgba(255, 255, 255, 0.6);
+    --dm-toc-tick-active-color: rgba(255, 255, 255, 0.95);
+
+    --dm-toc-card-bg: rgba(45, 50, 56, 0.98);
+    --dm-toc-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    --dm-toc-card-border: 1px solid rgba(255, 255, 255, 0.08);
+    --dm-toc-row-color: rgba(255, 255, 255, 0.7);
+    --dm-toc-row-hover-bg: rgba(255, 255, 255, 0.06);
+    --dm-toc-row-active-color: rgba(255, 255, 255, 0.95);
+  }
+}

package/src/themes/_light.scss

@@ -1,7 +1,7 @@
 // =============================================================================
 // Light Theme
 // =============================================================================
-// Light is the default — CSS variables in _variables.scss already use light
+// Light is the default - CSS variables in _variables.scss already use light
 // values. This class exists for explicit light override in a dark context.
 // =============================================================================