@domternal/theme 0.6.2 → 0.7.1

package/src/_link-popover.scss

@@ -1,9 +1,10 @@
 // =============================================================================
 // Link Popover Styles
 // =============================================================================
-// The popover is appended to document.body (to escape overflow:hidden on
-// .dm-editor), so it can't inherit CSS variables from .dm-editor / .dm-toolbar.
-// We hardcode fallback values that match the light theme defaults.
+// The popover is appended to document.body to escape overflow:hidden on
+// .dm-editor. The popover JS copies the editor's `dm-theme-*` class onto
+// the popover so the dark-tokens cascade applies on the element itself.
+// All colours read from `--dm-*` tokens; no hardcoded theme values.
 // =============================================================================
 
 .dm-link-popover {
@@ -12,10 +13,10 @@
   align-items: center;
   gap: 0.25rem;
   padding: 0.25rem;
-  background: #f8f9fa;
-  border: 1px solid #e0e0e0;
+  background: var(--dm-surface);
+  border: 1px solid var(--dm-border-color);
   border-radius: 0.25rem;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--dm-popover-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   visibility: hidden;
@@ -30,18 +31,18 @@
 }
 
 .dm-link-popover-input {
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--dm-border-color);
   border-radius: 0.25rem;
   padding: 0.25rem 0.5rem;
   font-size: 0.8125rem;
   font-family: inherit;
   min-width: 14rem;
   outline: none;
-  background: #fff;
-  color: #1a1a1a;
+  background: var(--dm-bg);
+  color: var(--dm-text);
 
   &:focus {
-    border-color: #2563eb;
+    border-color: var(--dm-accent);
   }
 }
 
@@ -55,16 +56,16 @@
   border: none;
   border-radius: 0.25rem;
   background: transparent;
-  color: #1a1a1a;
+  color: var(--dm-text);
   cursor: pointer;
   transition: background-color 0.15s, color 0.15s;
 
   &:hover {
-    background: rgba(0, 0, 0, 0.06);
+    background: var(--dm-hover);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--dm-accent, #2563eb);
+    outline: 2px solid var(--dm-accent);
     outline-offset: 1px;
   }
 
@@ -75,75 +76,18 @@
 }
 
 .dm-link-popover-apply:hover {
-  color: #2563eb;
+  color: var(--dm-accent);
 }
 
+// `--dm-danger` is not a semantic token yet, hardcode for now and bump
+// when the design system introduces one.
 .dm-link-popover-remove:hover {
   color: #dc2626;
 }
 
-// Pending-link decoration — highlights the text range while the popover
+// Pending-link decoration - highlights the text range while the popover
 // input has focus (browser hides native selection on editor blur).
 .dm-link-pending {
-  background-color: rgba(37, 99, 235, 0.12);
+  background-color: color-mix(in srgb, var(--dm-accent) 12%, transparent);
   border-radius: 1px;
 }
-
-// Dark theme override
-[data-theme="dark"] .dm-link-popover,
-.dm-theme-dark .dm-link-popover {
-  background: #2a2a2a;
-  border-color: #404040;
-
-  .dm-link-popover-input {
-    background: #1a1a1a;
-    border-color: #404040;
-    color: #e0e0e0;
-
-    &:focus {
-      border-color: #3b82f6;
-    }
-  }
-
-  .dm-link-popover-btn {
-    color: #e0e0e0;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
-  }
-
-  .dm-link-popover-apply:hover {
-    color: #3b82f6;
-  }
-}
-
-// Auto dark mode — follows system preference
-@media (prefers-color-scheme: dark) {
-  .dm-theme-auto .dm-link-popover {
-    background: #2a2a2a;
-    border-color: #404040;
-
-    .dm-link-popover-input {
-      background: #1a1a1a;
-      border-color: #404040;
-      color: #e0e0e0;
-
-      &:focus {
-        border-color: #3b82f6;
-      }
-    }
-
-    .dm-link-popover-btn {
-      color: #e0e0e0;
-
-      &:hover {
-        background: rgba(255, 255, 255, 0.1);
-      }
-    }
-
-    .dm-link-popover-apply:hover {
-      color: #3b82f6;
-    }
-  }
-}

package/src/_notion-mode.scss

@@ -0,0 +1,82 @@
+// =============================================================================
+// Notion Mode
+// Opt-in stylistic preset: borderless surface, centered narrow column,
+// generous reading rhythm, BlockHandle in the surrounding gutter.
+// Apply with class `dm-notion-mode` on the editor host element.
+// =============================================================================
+
+.dm-editor.dm-notion-mode {
+  // Drop the default chrome - Notion pages have no card outline.
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+
+  // Centered, comfortably narrow reading column. The surrounding margin
+  // is where the BlockHandle sits (see token overrides below). Consumers
+  // are expected to control the surrounding container width; on viewports
+  // narrower than 38rem the column overflows by design (Notion mode is
+  // opt-in).
+  max-width: 38rem;
+  margin: 0 auto;
+
+  // Generous reading line-height; padding zeroed because the page wrapper
+  // supplies the white space around the column. Body font-size inherits
+  // classic 1rem so toggling between modes doesn't shift text size.
+  --dm-editor-line-height: 1.7;
+  --dm-editor-padding: 0;
+
+  // Handle lives fully OUTSIDE the centered content column. Zeroing the
+  // ProseMirror gutter token reclaims the reserved column (the handle no
+  // longer overlaps content - there is nothing to reserve). The negative
+  // `left` token pulls the handle left of the column with a few px of
+  // breathing room before the content's left edge.
+  --dm-block-handle-gutter: 0;
+  --dm-block-handle-left: -3.5rem;
+
+  // The `top` checkbox tuning in `_task-list.scss` is for the default
+  // 1.6 line-height. Notion mode lifts line-height to 1.7, so nudge the
+  // checkbox down to keep it on the x-height of the first label line.
+  --dm-task-checkbox-top: 0.45em;
+
+  .ProseMirror {
+    min-height: 60vh;
+    outline: none;
+
+    // Tighter heading rhythm than the default content stylesheet.
+    // Sizes inherit classic (browser defaults / `_content.scss`) so the
+    // mode toggle shifts layout, not text scale.
+    h1 {
+      font-weight: 700;
+      margin-top: 1.5rem;
+      margin-bottom: 0.75rem;
+    }
+    h2 {
+      font-weight: 600;
+      margin-top: 1.5rem;
+      margin-bottom: 0.5rem;
+    }
+    h3 {
+      font-weight: 600;
+      margin-top: 1.25rem;
+      margin-bottom: 0.375rem;
+    }
+    p {
+      margin: 0.25rem 0;
+    }
+
+    // Paragraphs inside table cells stay flush; otherwise the higher
+    // specificity of the rule above adds 4px top/bottom and visibly puffs
+    // up cells compared to classic mode.
+    td > p,
+    th > p {
+      margin: 0;
+    }
+  }
+
+  // Slash-command placeholders wrap in narrow table cells; the cell is the editable unit.
+  .ProseMirror td .is-empty::before,
+  .ProseMirror th .is-empty::before {
+    content: none;
+  }
+}

package/src/_prosemirror.scss

@@ -166,7 +166,7 @@ img.ProseMirror-separator {
   }
 }
 
-// Hide native text selection inside selected cells — the ::after overlay is sufficient
+// Hide native text selection inside selected cells - the ::after overlay is sufficient
 .dm-editor .selectedCell,
 .dm-editor .selectedCell * {
   &::selection {

package/src/_slash-command.scss

@@ -0,0 +1,174 @@
+// =============================================================================
+// Slash Command Menu
+// Popup shown when the user types `/`. Rendered by
+// `createSlashSuggestionRenderer()` and positioned at the cursor.
+// Visual vocabulary mirrors the floating menu for consistency.
+//
+// Class names follow the renderer's output verbatim:
+//   - `dm-slash-command-menu` (outer)
+//   - `dm-slash-command-group` / `-group-label`
+//   - `dm-slash-command-item` / `-item-icon` / `-item-text` / `-item-label`
+//     / `-item-description` / `-item-shortcut`
+//   - `dm-slash-command-empty`
+//   - `dm-slash-command-query` (inline decoration on the active `/query`)
+//
+// We intentionally do NOT nest the inner elements under `.dm-slash-command-menu`
+// (a previous version did so via SCSS `&-item` concatenation, which produced
+// `.dm-slash-command-menu-item-*` selectors that the renderer never emitted -
+// items rendered without size constraints, ballooning the menu).
+// =============================================================================
+
+.dm-slash-command-menu {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 17rem;
+  max-height: 22rem;
+  overflow-y: auto;
+  padding: 0.375rem;
+  background: var(--dm-toolbar-bg, var(--dm-bg, #ffffff));
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: var(--dm-toolbar-border-radius, 0.5rem);
+  box-shadow: var(--dm-popover-shadow,
+    0 10px 25px rgba(0, 0, 0, 0.08),
+    0 4px 10px rgba(0, 0, 0, 0.04));
+  z-index: var(--dm-z-popover, 50);
+
+  // Slim custom scrollbar - matches the floating-menu styling.
+  scrollbar-width: thin;
+  scrollbar-color: var(--dm-scrollbar-thumb, rgba(0, 0, 0, 0.18)) transparent;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    margin: 0.375rem 0;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--dm-scrollbar-thumb, rgba(0, 0, 0, 0.18));
+    border-radius: 3px;
+    transition: background-color 0.15s;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--dm-scrollbar-thumb-hover, rgba(0, 0, 0, 0.28));
+  }
+}
+
+// Inline decoration on the active `/query` range (highlight subtle).
+.dm-slash-command-query {
+  color: var(--dm-accent, #2563eb);
+}
+
+// ---------------------------------------------------------------------------
+// Group heading
+// ---------------------------------------------------------------------------
+.dm-slash-command-group-label {
+  padding: 0.375rem 0.5rem 0.125rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--dm-muted, #999);
+  user-select: none;
+}
+
+.dm-slash-command-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+// ---------------------------------------------------------------------------
+// Menu item button
+// ---------------------------------------------------------------------------
+.dm-slash-command-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  border-radius: var(--dm-button-border-radius, 0.375rem);
+  background: transparent;
+  color: var(--dm-editor-text, inherit);
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+  transition: background-color 0.1s;
+
+  // Selected state set imperatively by the renderer so keyboard and
+  // mouse selection share the same visual.
+  &[data-selected] {
+    background: var(--dm-button-hover-bg, rgba(0, 0, 0, 0.04));
+  }
+
+  &:focus-visible {
+    // INSET ring (-2px): slash items are tightly packed; outset would overlap
+    // the neighbour. Matches the context-menu item rule.
+    outline: 2px solid var(--dm-accent, #2563eb);
+    outline-offset: -2px;
+  }
+}
+
+.dm-slash-command-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  color: var(--dm-editor-text, inherit);
+
+  svg {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+}
+
+.dm-slash-command-item-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  line-height: 1.25;
+}
+
+.dm-slash-command-item-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--dm-editor-text, inherit);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dm-slash-command-item-description {
+  font-size: 0.75rem;
+  color: var(--dm-muted, #999);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Shortcut hint chip (e.g. `# `, `> `)
+.dm-slash-command-item-shortcut {
+  flex-shrink: 0;
+  padding: 0.0625rem 0.375rem;
+  font-family: var(--dm-code-font, ui-monospace, monospace);
+  font-size: 0.6875rem;
+  color: var(--dm-muted, #999);
+  background: var(--dm-surface, #f8f9fa);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: 0.25rem;
+  user-select: none;
+}
+
+// Shown when the filter returns no items
+.dm-slash-command-empty {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--dm-muted, #999);
+  user-select: none;
+}

package/src/_table-controls.scss

@@ -5,7 +5,7 @@
 // above columns and beside rows. Clicking opens a dropdown with operations.
 // =============================================================================
 
-// Outer container — holds handles + tableWrapper
+// Outer container - holds handles + tableWrapper
 .dm-editor .dm-table-container {
   position: relative;
 }
@@ -54,7 +54,7 @@
   height: 24px;
 }
 
-// Cell handle — small circle at cell corner (appears when cursor is in a cell)
+// Cell handle - small circle at cell corner (appears when cursor is in a cell)
 .dm-table-cell-handle {
   position: absolute;
   z-index: 10;
@@ -246,9 +246,13 @@
     width: 100%;
     padding: 0.375rem 0.5rem;
     border: none;
-    border-radius: var(--dm-button-border-radius);
+    // Component tokens (--dm-button-*) are defined on .dm-editor. This
+    // dropdown is portaled to document.body, so those tokens may be
+    // undefined here. Fall back to base tokens (which the theme sets via
+    // the .dm-theme-dark/.dm-theme-auto class copied onto the dropdown).
+    border-radius: var(--dm-button-border-radius, 0.375rem);
     background: transparent;
-    color: var(--dm-button-color);
+    color: var(--dm-button-color, var(--dm-text));
     cursor: pointer;
     font-size: 0.8125rem;
     line-height: 1.4;
@@ -277,7 +281,7 @@
   }
 }
 
-// Cell dropdown — color palette
+// Cell dropdown - color palette
 .dm-table-cell-dropdown {
   min-width: auto;
   width: max-content;

package/src/_task-list.scss

@@ -3,23 +3,38 @@
 // =============================================================================
 // TaskList renders as ul[data-type="taskList"]
 // TaskItem renders as li[data-type="taskItem"] with label > input[checkbox] + div
+//
+// Visual goal: render task items the same way bullet items render. The checkbox
+// hangs in the padding-left area of the wrapper (like a native bullet marker)
+// and the label paragraph starts at the same column as bullet-list text. This
+// is achieved by giving the wrapper the same `padding-left: 1.5em` as <ul> and
+// absolutely positioning the label so it visually replaces the bullet glyph.
 // =============================================================================
 
 .dm-editor .ProseMirror {
   ul[data-type="taskList"] {
     list-style: none;
-    padding-left: 0;
+    padding-left: 1.5em;
 
     li[data-type="taskItem"] {
-      display: flex;
-      align-items: flex-start;
-      gap: 0.5em;
+      position: relative;
+      margin: 0.25em 0;
 
       > label {
+        position: absolute;
+        // Position is driven by tokens (defined in `_variables.scss`):
+        //  - `left` hangs the checkbox in the bullet column (paired with
+        //    the wrapper's `padding-left: 1.5em` and the checkbox's
+        //    1em width, the right edge of the checkbox sits at
+        //    `li.left - 0.25em` and text starts at `li.left`).
+        //  - `top` aligns with the first text line's x-height, so the
+        //    checkbox visually rests next to lower-case glyphs the way
+        //    a bullet glyph does. Override the token alongside
+        //    `--dm-editor-line-height` to keep alignment.
+        left: var(--dm-task-checkbox-left, -1.15em);
+        top: var(--dm-task-checkbox-top, 0.45em);
         display: flex;
         align-items: center;
-        flex-shrink: 0;
-        margin-top: 0.4em;
         user-select: none;
 
         input[type="checkbox"] {
@@ -33,16 +48,40 @@
       }
 
       > div {
-        flex: 1;
-        min-width: 0;
-
         > p {
-          margin: 0;
+          // Small breathing gap (~5px at the editor's default font size)
+          // between the checkbox and the paragraph text, applied only on
+          // the paragraph so nested ul/ol siblings stay flush with li.left
+          // and visually align with bullet-list nesting.
+          margin: 0.1em 0;
+          padding-inline: 0.3em 0;
+        }
+
+        // Notion-style "children zone" indent: post-label blocks
+        // (heading, codeBlock, blockquote, etc.) render indented one
+        // level below the label paragraph aligned with the checkbox.
+        //
+        // Excluded: ALL nested `<ul>` and `<ol>` (plain and taskList).
+        // Each list type already gains the same visual indent through
+        // its own `padding-left: 1.5em`, so adding the children-zone
+        // margin would push nested taskLists ~1.5em further right than
+        // nested plain bullet lists. `margin-inline-start` (logical
+        // property) flips the indent to the right edge in RTL.
+        > :not(p:first-child):not(ul):not(ol) {
+          margin-inline-start: var(--dm-block-children-indent, 1.5rem);
+          margin-top: 0.25rem;
         }
       }
 
-      // Checked state — strikethrough and dimmed
-      &[data-checked="true"] > div {
+      // Checked state: strikethrough and dim ONLY the label paragraph
+      // (the first child of the children-zone div). Targeting `> div`
+      // would propagate `text-decoration` and `opacity` into the
+      // entire children-zone subtree, including nested taskItems and
+      // children-zone notes paragraphs. Notion-style: checking a
+      // parent task marks ONLY that task's label, never bleeds into
+      // children. Schema enforces paragraph-as-first-child via
+      // `taskItem.content = 'paragraph block*'`.
+      &[data-checked="true"] > div > p:first-child {
         text-decoration: line-through;
         opacity: 0.6;
       }