@domternal/theme 0.6.2 → 0.7.0

package/src/_details.scss

@@ -24,13 +24,13 @@
     border-radius: 0.375rem;
     margin: 0.75em 0;
 
-    // contentDOM — contains summary (row 1) and content (row 2)
+    // contentDOM - contains summary (row 1) and content (row 2)
     // Use display:contents so its children participate in the grid
     > div {
       display: contents;
     }
 
-    // Toggle button — chevron on the right, round hover highlight
+    // Toggle button - chevron on the right, round hover highlight
     > button[type="button"] {
       grid-column: 2;
       grid-row: 1;
@@ -70,7 +70,7 @@
       }
     }
 
-    // Summary row background — spans both columns so the button area
+    // Summary row background - spans both columns so the button area
     // also gets the surface colour behind the round toggle
     &::before {
       content: '';
@@ -108,12 +108,12 @@
       border-top: var(--dm-details-border);
     }
 
-    // Disable ProseMirror selected-node outline — the border is enough
+    // Disable ProseMirror selected-node outline - the border is enough
     &.ProseMirror-selectednode {
       outline: none;
     }
 
-    // Open state — rotate chevron to point down
+    // Open state - rotate chevron to point down
     &.is-open {
       > button[type="button"]::before {
         transform: rotate(45deg);

package/src/_floating-menu.scss

@@ -1,24 +1,161 @@
 // =============================================================================
 // Floating Menu Styles
+// Block-insert menu shown on empty paragraphs. Rendered by framework
+// wrappers as a WAI-ARIA menu with role="menu"/"group"/"menuitem".
 // =============================================================================
 
 .dm-floating-menu {
   position: absolute;
   display: flex;
   flex-direction: column;
-  gap: var(--dm-toolbar-gap);
-  padding: var(--dm-toolbar-padding);
-  background: var(--dm-toolbar-bg);
-  border: var(--dm-toolbar-border);
-  border-radius: var(--dm-button-border-radius);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  gap: 0.25rem;
+  min-width: 16rem;
+  max-height: 22rem;
+  overflow-y: auto;
+  padding: 0.375rem;
+
+  // Opaque background - plain color (not translucent) so nested content
+  // under the menu is fully occluded. Fallback chain covers cases where
+  // the menu is reparented outside `.dm-editor` and loses the variable.
+  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));
   visibility: hidden;
   opacity: 0;
-  transition: opacity 0.2s ease, visibility 0.2s;
-  z-index: 50;
+  transition: opacity 0.15s ease, visibility 0.15s;
+  z-index: var(--dm-z-popover, 50);
+
+  // Slim, translucent scrollbar - Firefox via scrollbar-* properties,
+  // Chrome/Safari/Edge via ::-webkit-scrollbar pseudo-elements. Colors are
+  // tokenised so dark theme overrides keep contrast on dark surfaces.
+  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));
+  }
 
   &[data-show] {
     visibility: visible;
     opacity: 1;
   }
+
+  // ---------------------------------------------------------------------------
+  // Group heading (e.g. "Basic", "Lists", "Media")
+  // ---------------------------------------------------------------------------
+  &-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;
+  }
+
+  &-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+
+    // Visual separator between unlabelled groups; labelled groups get
+    // spacing from their label instead.
+    & + &:not(:has(+ .dm-floating-menu-group-label)) {
+      margin-top: 0.25rem;
+    }
+  }
+
+  &-group-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Menu item button (single-line: icon + label + optional shortcut chip)
+  // ---------------------------------------------------------------------------
+  &-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.3125rem 0.5rem;
+    border: none;
+    border-radius: var(--dm-button-border-radius, 0.375rem);
+    background: transparent;
+    color: var(--dm-button-color, inherit);
+    text-align: left;
+    font: inherit;
+    cursor: pointer;
+    transition: background-color 0.12s;
+
+    &:hover:not([aria-disabled="true"]),
+    &:focus:not([aria-disabled="true"]) {
+      background: var(--dm-button-hover-bg, rgba(0, 0, 0, 0.04));
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--dm-accent, #2563eb);
+      outline-offset: -2px;
+    }
+
+    &[aria-disabled="true"],
+    &:disabled {
+      opacity: var(--dm-button-disabled-opacity, 0.45);
+      cursor: not-allowed;
+    }
+  }
+
+  // Icon slot
+  &-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;
+    }
+  }
+
+  &-item-label {
+    flex: 1;
+    min-width: 0;
+    font-size: 0.875rem;
+    color: var(--dm-editor-text, inherit);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // Shortcut hint chip (e.g. `# `, `> `, `[ ] `)
+  &-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;
+  }
 }

package/src/_image.scss

@@ -2,7 +2,7 @@
 // Image Styles
 // =============================================================================
 // Image extension renders as <img> with optional float inline styles.
-// Base img styles are in _content.scss — this file adds float constraints.
+// Base img styles are in _content.scss - this file adds float constraints.
 // =============================================================================
 
 .dm-editor .ProseMirror {
@@ -45,7 +45,7 @@
       z-index: 1; // above inline text so clicks always hit the image, not the paragraph behind
     }
 
-    // Selected state — accent outline + visible handles
+    // Selected state - accent outline + visible handles
     &.ProseMirror-selectednode {
       outline: 2px solid var(--dm-accent, #2563eb);
 
@@ -55,7 +55,7 @@
     }
   }
 
-  // Resize handles — hidden by default, shown on selection
+  // Resize handles - hidden by default, shown on selection
   .dm-image-handle {
     display: none;
     position: absolute;
@@ -74,7 +74,7 @@
 }
 
 // =============================================================================
-// Image Insert Popover (appended to document.body — same pattern as link popover)
+// Image Insert Popover (appended to document.body - same pattern as link popover)
 // =============================================================================
 
 .dm-image-popover {
@@ -182,7 +182,7 @@
   }
 }
 
-// Auto dark mode — follows system preference
+// Auto dark mode - follows system preference
 @media (prefers-color-scheme: dark) {
   .dm-theme-auto .dm-image-popover {
     background: #2a2a2a;
@@ -212,7 +212,7 @@
   }
 }
 
-// Drag-and-drop overlay — shown when dragging image files over the editor
+// Drag-and-drop overlay - shown when dragging image files over the editor
 .dm-editor.dm-dragover {
   outline: 2px dashed var(--dm-accent);
   outline-offset: -2px;

package/src/_inline-colors.scss

@@ -0,0 +1,204 @@
+// =============================================================================
+// Inline Colors
+// =============================================================================
+// Companion to `_block-colors.scss`. The block file's `[data-text-color]`
+// and `[data-bg-color]` rules already apply to inline spans (attribute
+// selectors have no element-type constraint). This file adds the inline
+// span bg-padding override and styles for the Notion color picker popover.
+//
+// Load AFTER `_block-colors.scss` in `index.scss` so the inline override
+// wins on equal specificity.
+// =============================================================================
+
+// Block rule applies `padding-block: 0.125rem` to any `[data-bg-color]`,
+// which would push a tinted span's background above/below the line box
+// and overlap neighbouring lines. Spans need INLINE padding only.
+.dm-editor .ProseMirror {
+  span[data-bg-color] {
+    padding-block: 0;
+    padding-inline: 0.2rem;
+    border-radius: 0.25rem;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Bubble menu "A" trigger
+// -----------------------------------------------------------------------------
+
+.dm-ncp-trigger {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+}
+
+.dm-ncp-trigger-glyph {
+  font-family: var(--dm-editor-font-family, system-ui, sans-serif);
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1;
+  transform: translateY(2px);
+}
+
+.dm-ncp-trigger-underline {
+  width: 0.875rem;
+  height: 0.125rem;
+  border-radius: 0.0625rem;
+  background-color: transparent;
+}
+
+// -----------------------------------------------------------------------------
+// Picker popover
+// -----------------------------------------------------------------------------
+
+.dm-notion-color-picker {
+  // z-index parity with link popover (60), above bubble menu (50).
+  position: absolute;
+  z-index: 60;
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem;
+
+  background: var(--dm-surface-elevated, var(--dm-surface, #ffffff));
+  color: var(--dm-editor-text, inherit);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: 0.5rem;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+
+  &:not([data-show]) {
+    display: none;
+  }
+}
+
+.dm-ncp-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.dm-ncp-label {
+  font-size: 0.75rem;
+  line-height: 1;
+  font-weight: 500;
+  color: var(--dm-muted, #6b7280);
+  padding: 0.125rem 0.25rem;
+}
+
+.dm-ncp-grid {
+  // Fixed 5 columns so every section reads as a 5x2 grid regardless of how
+  // many recent entries exist or how wide the popover ends up.
+  display: grid;
+  grid-template-columns: repeat(5, 1.5rem);
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  justify-content: start;
+}
+
+// -----------------------------------------------------------------------------
+// Swatch
+// -----------------------------------------------------------------------------
+
+.dm-ncp-swatch {
+  position: relative;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 1.5rem;
+  height: 1.5rem;
+
+  padding: 0;
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: 50%;
+  background: transparent;
+  color: var(--dm-editor-text, #333);
+
+  font-family: var(--dm-editor-font-family, system-ui, sans-serif);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+
+  cursor: pointer;
+  transition: transform 0.08s ease, box-shadow 0.08s ease;
+
+  &:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 0 2px var(--dm-accent-surface, rgba(37, 99, 235, 0.15));
+  }
+
+  // OUTSET outline (offset > 0): swatch fill takes the full button surface,
+  // so an inset outline would render under the fill.
+  &:focus-visible,
+  &.dm-ncp-active {
+    outline: 2px solid var(--dm-accent, #2563eb);
+    outline-offset: 1px;
+  }
+}
+
+// Strike-through "no color" indicator. Painted via `::after` so it overlays
+// the swatch's content - the text-color "Default" swatch keeps its "A" glyph
+// AND gets the diagonal slash on top, mirroring Notion's letterform-plus-slash
+// signal.
+@mixin ncp-default-slash {
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    background-image: linear-gradient(
+      to top right,
+      transparent calc(50% - 1px),
+      var(--dm-muted, #999) calc(50% - 1px),
+      var(--dm-muted, #999) calc(50% + 1px),
+      transparent calc(50% + 1px)
+    );
+  }
+}
+
+.dm-ncp-swatch--text {
+  background-color: var(--dm-surface, #f8f9fa);
+
+  &::before {
+    content: 'A';
+  }
+
+  &[data-color="null"] {
+    @include ncp-default-slash;
+  }
+
+  &[data-color="gray"]::before   { color: var(--dm-block-text-gray); }
+  &[data-color="brown"]::before  { color: var(--dm-block-text-brown); }
+  &[data-color="orange"]::before { color: var(--dm-block-text-orange); }
+  &[data-color="yellow"]::before { color: var(--dm-block-text-yellow); }
+  &[data-color="green"]::before  { color: var(--dm-block-text-green); }
+  &[data-color="blue"]::before   { color: var(--dm-block-text-blue); }
+  &[data-color="purple"]::before { color: var(--dm-block-text-purple); }
+  &[data-color="pink"]::before   { color: var(--dm-block-text-pink); }
+  &[data-color="red"]::before    { color: var(--dm-block-text-red); }
+}
+
+.dm-ncp-swatch--bg {
+  &[data-color="null"] { @include ncp-default-slash; }
+
+  &[data-color="gray"]    { background-color: var(--dm-block-bg-gray); }
+  &[data-color="brown"]   { background-color: var(--dm-block-bg-brown); }
+  &[data-color="orange"]  { background-color: var(--dm-block-bg-orange); }
+  &[data-color="yellow"]  { background-color: var(--dm-block-bg-yellow); }
+  &[data-color="green"]   { background-color: var(--dm-block-bg-green); }
+  &[data-color="blue"]    { background-color: var(--dm-block-bg-blue); }
+  &[data-color="purple"]  { background-color: var(--dm-block-bg-purple); }
+  &[data-color="pink"]    { background-color: var(--dm-block-bg-pink); }
+  &[data-color="red"]     { background-color: var(--dm-block-bg-red); }
+}
+
+@media (max-width: 480px) {
+  .dm-notion-color-picker {
+    max-width: calc(100vw - 1rem);
+  }
+}

package/src/_invisible-chars.scss

@@ -14,7 +14,7 @@
     user-select: none;
   }
 
-  // Inline space decorations — overlay · on the invisible space character
+  // Inline space decorations - overlay · on the invisible space character
   [data-char="space"] {
     position: relative;
 
@@ -28,7 +28,7 @@
     }
   }
 
-  // Inline non-breaking space decorations — overlay ° on the nbsp character
+  // Inline non-breaking space decorations - overlay ° on the nbsp character
   [data-char="nbsp"] {
     position: relative;
 

package/src/_link-popover.scss

@@ -82,7 +82,7 @@
   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);
@@ -118,7 +118,7 @@
   }
 }
 
-// Auto dark mode — follows system preference
+// Auto dark mode - follows system preference
 @media (prefers-color-scheme: dark) {
   .dm-theme-auto .dm-link-popover {
     background: #2a2a2a;

package/src/_notion-mode.scss

@@ -0,0 +1,72 @@
+// =============================================================================
+// 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 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;
+  --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, more
+    // Notion-like. Sizes are intentionally smaller than the toolbar
+    // demo's defaults so headings sit closer to body text.
+    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;
+    }
+    p {
+      margin: 0.25rem 0;
+    }
+  }
+}

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 {