@domternal/theme 0.7.0 → 0.7.2

package/src/_image.scss

@@ -76,6 +76,9 @@
 // =============================================================================
 // Image Insert Popover (appended to document.body - same pattern as link popover)
 // =============================================================================
+// 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-image-popover {
   position: fixed;
@@ -83,10 +86,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;
@@ -101,18 +104,18 @@
 }
 
 .dm-image-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);
   }
 }
 
@@ -126,16 +129,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;
   }
 
@@ -145,71 +148,9 @@
   }
 }
 
-.dm-image-popover-apply:hover {
-  color: #2563eb;
-}
-
+.dm-image-popover-apply:hover,
 .dm-image-popover-browse:hover {
-  color: #2563eb;
-}
-
-// Dark theme override
-[data-theme="dark"] .dm-image-popover,
-.dm-theme-dark .dm-image-popover {
-  background: #2a2a2a;
-  border-color: #404040;
-
-  .dm-image-popover-input {
-    background: #1a1a1a;
-    border-color: #404040;
-    color: #e0e0e0;
-
-    &:focus {
-      border-color: #3b82f6;
-    }
-  }
-
-  .dm-image-popover-btn {
-    color: #e0e0e0;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
-  }
-
-  .dm-image-popover-apply:hover {
-    color: #3b82f6;
-  }
-}
-
-// Auto dark mode - follows system preference
-@media (prefers-color-scheme: dark) {
-  .dm-theme-auto .dm-image-popover {
-    background: #2a2a2a;
-    border-color: #404040;
-
-    .dm-image-popover-input {
-      background: #1a1a1a;
-      border-color: #404040;
-      color: #e0e0e0;
-
-      &:focus {
-        border-color: #3b82f6;
-      }
-    }
-
-    .dm-image-popover-btn {
-      color: #e0e0e0;
-
-      &:hover {
-        background: rgba(255, 255, 255, 0.1);
-      }
-    }
-
-    .dm-image-popover-apply:hover {
-      color: #3b82f6;
-    }
-  }
+  color: var(--dm-accent);
 }
 
 // Drag-and-drop overlay - shown when dragging image files over the editor

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,9 +76,11 @@
 }
 
 .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;
 }
@@ -85,65 +88,6 @@
 // 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

@@ -20,10 +20,9 @@
   max-width: 38rem;
   margin: 0 auto;
 
-  // Generous reading line-height and slightly larger text, similar to
-  // Notion. Padding is zeroed because the page wrapper already supplies
-  // the white space around the column.
-  --dm-editor-font-size: 1.0625rem;
+  // 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;
 
@@ -44,23 +43,20 @@
     min-height: 60vh;
     outline: none;
 
-    // Tighter heading rhythm than the default content stylesheet, more
-    // Notion-like. Sizes are intentionally smaller than the toolbar
-    // demo's defaults so headings sit closer to body text.
+    // 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-size: 2.25rem;
       font-weight: 700;
       margin-top: 1.5rem;
       margin-bottom: 0.75rem;
     }
     h2 {
-      font-size: 1.625rem;
       font-weight: 600;
       margin-top: 1.5rem;
       margin-bottom: 0.5rem;
     }
     h3 {
-      font-size: 1.25rem;
       font-weight: 600;
       margin-top: 1.25rem;
       margin-bottom: 0.375rem;
@@ -68,5 +64,19 @@
     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/_table-controls.scss

@@ -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;

package/src/_toc.scss

@@ -5,13 +5,11 @@
 // =============================================================================
 
 .dm-toc-outline {
-  // Stack ticks vertically with even gaps. flex-end keeps the right
-  // edge of every tick aligned even though widths differ per level.
+  // Positioning wrapper. Inner `.dm-toc-outline-ticks` stacks + clips
+  // ticks; card is an absolute sibling, untouched by the clip.
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: var(--dm-toc-tick-gap, 10px);
-  padding: var(--dm-toc-padding-block, 12px) var(--dm-toc-padding-inline, 8px);
   z-index: var(--dm-toc-z-index, 10);
 
   // No background / no border in collapsed state - just a column of ticks.
@@ -44,6 +42,14 @@
   &[data-anchor='editor'][data-bottom-visible='true'] {
     top: var(--dm-toc-editor-top, 1rem);
   }
+  // `scroll-mode='container'`: sticky pins the nav at the host's
+  // visible middle, zero JS during scroll. Plugin publishes
+  // `--dm-toc-mid-half-height` (= nav.offsetHeight / 2).
+  &[data-anchor='editor'][data-scroll-mode='container'] {
+    position: sticky;
+    top: calc(50% - var(--dm-toc-mid-half-height, 0px));
+    right: 0;
+  }
   &[data-anchor='viewport'] {
     position: fixed;
     top: 50%;
@@ -94,6 +100,27 @@
   justify-content: flex-end;
 }
 
+// `scroll-mode='container'`: shell spans the host (no top/bottom
+// inset) and is JS-stretched to host.scrollHeight so the sticky's
+// containing block covers the full scroll range.
+.dm-toc-outline-shell[data-anchor='editor'][data-scroll-mode='container'] {
+  top: 0;
+  bottom: 0;
+}
+
+// Ticks column - capped at ~50% (Notion behavior): overflow simply
+// clips, gap stays constant, column doesn't scroll. Defaults to
+// `50vh` (page mode); container mode plugin overrides the var.
+.dm-toc-outline-ticks {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--dm-toc-tick-gap, 10px);
+  padding: var(--dm-toc-padding-block, 12px) var(--dm-toc-padding-inline, 8px);
+  max-height: var(--dm-toc-ticks-max-h, 50vh);
+  overflow: hidden;
+}
+
 .dm-toc-outline-tick {
   // Reset button defaults - we draw a solid filled rectangle.
   appearance: none;
@@ -103,6 +130,9 @@
   font: inherit;
   cursor: pointer;
   background: var(--dm-toc-tick-color, rgba(55, 53, 47, 0.4));
+  // Lock tick height so the gap stays constant; overflow is clipped
+  // by the wrapper instead of squeezed.
+  flex-shrink: 0;
   height: var(--dm-toc-tick-height, 2px);
   border-radius: var(--dm-toc-tick-radius, 1px);
   // Width per heading level - h1 widest, deeper levels narrower.
@@ -173,9 +203,9 @@
     translateX(var(--dm-toc-card-offset, 8px));
   min-width: var(--dm-toc-card-min-width, 180px);
   max-width: var(--dm-toc-card-max-width, 260px);
-  // Long heading lists scroll internally rather than overflowing the
-  // viewport; the margin keeps the card off the chrome edges.
-  max-height: calc(100vh - 2 * var(--dm-toc-card-viewport-margin, 16px));
+  // Card matches the ticks wrapper height; the rest of the rows
+  // are reachable by scrolling the card itself.
+  max-height: var(--dm-toc-ticks-max-h, 50vh);
   overflow-y: auto;
   padding: var(--dm-toc-card-padding-block, 6px) 0;
   background: var(--dm-toc-card-bg, rgba(255, 255, 255, 0.98));
@@ -183,6 +213,26 @@
   border-radius: var(--dm-toc-card-radius, 6px);
   box-shadow: var(--dm-toc-card-shadow, 0 8px 24px rgba(0, 0, 0, 0.08));
 
+  // Tokenised slim scrollbar so dark theme overrides keep contrast.
+  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));
+  }
+
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -216,6 +266,8 @@
   font-size: var(--dm-toc-row-font-size, 13px);
   line-height: var(--dm-toc-row-line-height, 1.4);
   color: var(--dm-toc-row-color, rgba(55, 53, 47, 0.7));
+  // Constant row height; long lists scroll the card, no squeeze.
+  flex-shrink: 0;
   padding:
     var(--dm-toc-row-padding-block, 4px)
     var(--dm-toc-row-padding-inline-end, 16px)

package/src/_variables.scss

@@ -122,6 +122,7 @@
   --dm-editor-font-size: 1rem;
   --dm-editor-line-height: 1.6;
   --dm-editor-padding: 1rem;
+  --dm-editor-padding-top-extra: 0.5rem;
   --dm-editor-border: 1px solid var(--dm-border-color);
   --dm-editor-border-radius: 0.75rem;
   // Override to add a focus ring, e.g. 0 0 0 1px var(--dm-focus-color)

package/src/themes/_dark.scss

@@ -100,7 +100,9 @@
 .dm-theme-dark .dm-mention-suggestion,
 .dm-theme-dark .dm-table-controls-dropdown,
 .dm-theme-dark .dm-slash-command-menu,
-.dm-theme-dark .dm-block-context-menu {
+.dm-theme-dark .dm-block-context-menu,
+.dm-theme-dark .dm-link-popover,
+.dm-theme-dark .dm-image-popover {
   @include dark-tokens;
 }
 
@@ -116,7 +118,9 @@
   .dm-theme-auto .dm-mention-suggestion,
   .dm-theme-auto .dm-table-controls-dropdown,
   .dm-theme-auto .dm-slash-command-menu,
-  .dm-theme-auto .dm-block-context-menu {
+  .dm-theme-auto .dm-block-context-menu,
+  .dm-theme-auto .dm-link-popover,
+  .dm-theme-auto .dm-image-popover {
     @include dark-tokens;
   }
 }