@domternal/theme 0.6.2 → 0.7.1

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,8 +74,11 @@
 }
 
 // =============================================================================
-// Image Insert Popover (appended to document.body — same pattern as link popover)
+// 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,74 +148,12 @@
   }
 }
 
-.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
+// 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;