@domternal/theme 0.2.0

package/src/_toolbar.scss

@@ -0,0 +1,213 @@
+// =============================================================================
+// Toolbar Styles
+// =============================================================================
+
+.dm-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: var(--dm-toolbar-justify, flex-start);
+  gap: var(--dm-toolbar-gap);
+  padding: var(--dm-toolbar-padding);
+  background: var(--dm-toolbar-bg);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-bottom: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: var(--dm-toolbar-border-radius);
+  box-shadow: var(--dm-editor-shadow, none);
+}
+
+// Button group
+.dm-toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-toolbar-gap);
+}
+
+// Individual button
+.dm-toolbar-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dm-button-size);
+  height: var(--dm-button-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--dm-button-border-radius);
+  background: transparent;
+  color: var(--dm-button-color);
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+  font-size: 0.875rem;
+  line-height: 1;
+
+  &:hover {
+    background: var(--dm-button-hover-bg);
+  }
+
+  // Active state (e.g. bold is on)
+  &--active {
+    background: var(--dm-button-active-bg);
+    color: var(--dm-button-active-color);
+  }
+
+  // Expanded state — panel/popover is open (same visual as dropdown triggers)
+  &[aria-expanded="true"] {
+    background: var(--dm-button-hover-bg);
+  }
+
+  // Disabled state
+  &--disabled,
+  &:disabled {
+    opacity: var(--dm-button-disabled-opacity);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // Icon inside button
+  svg {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+}
+
+// Dropdown trigger — wider to fit caret
+.dm-toolbar-dropdown-trigger {
+  position: relative;
+  width: auto;
+  padding: 0 0.375rem;
+  gap: 0.125rem;
+
+  &[aria-expanded="true"] {
+    background: var(--dm-button-hover-bg);
+  }
+}
+
+// Color indicator bar under color-picker dropdown trigger icons
+.dm-toolbar-color-indicator {
+  position: absolute;
+  bottom: 0.15rem;
+  left: 0.25rem;
+  width: 1.375rem;
+  height: 0.3rem;
+  border-radius: 2px;
+}
+
+// Text label inside dropdown trigger (dynamicLabel mode)
+.dm-toolbar-trigger-label {
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+  font-size: 0.8125rem;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 2.5rem;
+
+  // Icon inside label span (e.g. font-size icon for headings)
+  svg {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+}
+
+// Wider trigger label for dropdowns with long labels (e.g. font family names)
+[data-dropdown="fontFamily"] .dm-toolbar-trigger-label {
+  width: 5rem;
+}
+
+// Dropdown caret icon
+.dm-toolbar-button .dm-dropdown-caret {
+  width: 0.625rem;
+  height: 0.625rem;
+  flex-shrink: 0;
+}
+
+// Dropdown wrapper
+.dm-toolbar-dropdown-wrapper {
+  position: relative;
+}
+
+// Dropdown panel — positioned by floating-ui (strategy: absolute)
+.dm-toolbar-dropdown-panel {
+  position: absolute;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 8rem;
+  padding: 0.25rem;
+  background: var(--dm-bg, #fff);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
+  animation: dm-fade-in 0.2s ease;
+
+  // Color palette panels get a softer, rounder container
+  &.dm-color-palette {
+    padding: 0.5rem;
+    border-radius: 0.75rem;
+  }
+}
+
+// Display-mode: icon-only — compact grid-like panel
+.dm-toolbar-dropdown-panel[data-display-mode="icon"] {
+  min-width: 0;
+
+  .dm-toolbar-dropdown-item {
+    width: auto;
+    padding: 0.375rem;
+    justify-content: center;
+  }
+}
+
+// Display-mode: text-only — shrink to text width, no icon gap
+.dm-toolbar-dropdown-panel[data-display-mode="text"] {
+  min-width: 0;
+
+  .dm-toolbar-dropdown-item {
+    gap: 0;
+  }
+}
+
+// Dropdown item
+.dm-toolbar-dropdown-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);
+  background: transparent;
+  color: var(--dm-button-color);
+  cursor: pointer;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  text-align: left;
+  white-space: nowrap;
+  transition: background-color 0.15s;
+
+  &:hover {
+    background: var(--dm-button-hover-bg);
+  }
+
+  &--active {
+    color: var(--dm-button-active-color);
+    background: var(--dm-button-active-bg);
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+}
+
+// Vertical separator between button groups
+.dm-toolbar-separator {
+  width: 1px;
+  height: 1.25rem;
+  background: var(--dm-separator-color);
+  margin: 0 var(--dm-separator-margin);
+}

package/src/_variables.scss

@@ -0,0 +1,150 @@
+// =============================================================================
+// CSS Custom Properties (Design Tokens)
+// =============================================================================
+// All visual properties are CSS custom properties on .dm-editor.
+// Override any variable on a parent or the component itself to customize.
+//
+// Example:
+//   .my-editor {
+//     --dm-editor-bg: #fafafa;
+//     --dm-accent: hotpink;
+//   }
+// =============================================================================
+
+.dm-editor {
+  // ---------------------------------------------------------------------------
+  // Semantic base tokens (used by component tokens below)
+  // ---------------------------------------------------------------------------
+  --dm-bg: #ffffff;
+  --dm-text: #1a1a1a;
+  --dm-muted: #999999;
+  --dm-surface: #f8f9fa;
+  --dm-border-color: #e5e7eb;
+  --dm-hover: rgba(0, 0, 0, 0.04);
+  --dm-active: rgba(0, 0, 0, 0.1);
+  --dm-accent: #2563eb;
+  --dm-accent-hover: #1d4ed8;
+  --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);
+  --dm-code-surface: #f0f0f0;
+  --dm-code-color: inherit;
+
+  // ---------------------------------------------------------------------------
+  // Editor
+  // ---------------------------------------------------------------------------
+  --dm-editor-bg: var(--dm-bg);
+  --dm-editor-text: var(--dm-text);
+  --dm-editor-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --dm-editor-font-size: 1rem;
+  --dm-editor-line-height: 1.6;
+  --dm-editor-padding: 1rem;
+  --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)
+  --dm-editor-focus-ring: none;
+  --dm-editor-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+
+  // ---------------------------------------------------------------------------
+  // Placeholder
+  // ---------------------------------------------------------------------------
+  --dm-placeholder-color: var(--dm-muted);
+
+  // ---------------------------------------------------------------------------
+  // Links
+  // ---------------------------------------------------------------------------
+  --dm-link-color: var(--dm-accent);
+  --dm-link-hover-color: var(--dm-accent-hover);
+
+  // ---------------------------------------------------------------------------
+  // Inline code
+  // ---------------------------------------------------------------------------
+  --dm-code-bg: var(--dm-code-surface);
+  --dm-code-text: var(--dm-code-color);
+  --dm-code-font: "SF Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace;
+  --dm-code-border-radius: 0.25rem;
+
+  // ---------------------------------------------------------------------------
+  // Code blocks
+  // ---------------------------------------------------------------------------
+  --dm-code-block-bg: var(--dm-code-surface);
+  --dm-code-block-text: var(--dm-text);
+
+  // ---------------------------------------------------------------------------
+  // Syntax highlighting (CodeBlockLowlight)
+  // ---------------------------------------------------------------------------
+  --dm-syntax-keyword: #d73a49;
+  --dm-syntax-entity: #6f42c1;
+  --dm-syntax-constant: #005cc5;
+  --dm-syntax-string: #032f62;
+  --dm-syntax-variable: #e36209;
+  --dm-syntax-comment: #6a737d;
+  --dm-syntax-tag: #22863a;
+  --dm-syntax-addition: #22863a;
+  --dm-syntax-addition-bg: #f0fff4;
+  --dm-syntax-deletion: #b31d28;
+  --dm-syntax-deletion-bg: #ffeef0;
+
+  // ---------------------------------------------------------------------------
+  // Blockquote
+  // ---------------------------------------------------------------------------
+  --dm-blockquote-border: 3px solid #6a6a6a;
+  --dm-blockquote-color: #6a6a6a;
+
+  // ---------------------------------------------------------------------------
+  // Horizontal rule
+  // ---------------------------------------------------------------------------
+  --dm-hr-color: var(--dm-border-color);
+
+  // ---------------------------------------------------------------------------
+  // Table
+  // ---------------------------------------------------------------------------
+  --dm-table-border: 1px solid var(--dm-border-color);
+  --dm-table-header-bg: var(--dm-surface);
+  --dm-table-selected-bg: rgba(66, 133, 244, 0.15);
+
+  // ---------------------------------------------------------------------------
+  // Mention
+  // ---------------------------------------------------------------------------
+  --dm-mention-bg: var(--dm-accent-surface);
+  --dm-mention-color: var(--dm-accent);
+  --dm-mention-border-radius: 0.25rem;
+
+  // ---------------------------------------------------------------------------
+  // Highlight / mark
+  // ---------------------------------------------------------------------------
+  --dm-highlight-bg: #fff3cd;
+
+  // ---------------------------------------------------------------------------
+  // Details / accordion
+  // ---------------------------------------------------------------------------
+  --dm-details-border: 1px solid var(--dm-border-color);
+  --dm-details-bg: var(--dm-surface);
+  --dm-details-summary-font-weight: 600;
+}
+
+// =============================================================================
+// Toolbar variables (on .dm-toolbar)
+// =============================================================================
+
+.dm-toolbar {
+  --dm-toolbar-bg: var(--dm-bg, #ffffff);
+  --dm-toolbar-border: none;
+  --dm-toolbar-padding: 0.375rem 0.5rem;
+  --dm-toolbar-gap: 0.125rem;
+  --dm-toolbar-border-radius: 0.75rem 0.75rem 0 0;
+
+  // Buttons
+  --dm-button-size: 2rem;
+  --dm-button-border-radius: 0.375rem;
+  --dm-button-color: var(--dm-text, #374151);
+  --dm-button-hover-bg: var(--dm-hover, rgba(0, 0, 0, 0.04));
+  --dm-button-active-bg: var(--dm-accent-surface, rgba(37, 99, 235, 0.1));
+  --dm-button-active-color: var(--dm-accent, #2563eb);
+  --dm-button-disabled-opacity: 0.35;
+
+  // Separator
+  --dm-separator-color: var(--dm-border-color, #e5e7eb);
+  --dm-separator-margin: 0.375rem;
+}

package/src/index.scss

@@ -0,0 +1,53 @@
+// =============================================================================
+// @domternal/theme — Main Entry
+// =============================================================================
+// Import this file to get all Domternal editor styles:
+//
+//   @import '@domternal/theme';        (SCSS)
+//   @import '@domternal/theme/css';    (precompiled CSS)
+//
+// Customize by overriding CSS variables on .dm-editor or a parent:
+//
+//   .my-editor {
+//     --dm-accent: hotpink;
+//     --dm-editor-bg: #fafafa;
+//   }
+// =============================================================================
+
+// 1. Design tokens (CSS custom properties)
+@use 'variables';
+
+// 2. ProseMirror required styles (view, gapcursor, tables)
+@use 'prosemirror';
+
+// 3. Editor wrapper
+@use 'base';
+
+// 4. Content typography
+@use 'content';
+
+// 4b. Syntax highlighting (CodeBlockLowlight)
+@use 'syntax';
+
+// 5. Toolbar
+@use 'toolbar';
+@use 'color-palette';
+
+// 6. Menus (bubble, floating, link popover)
+@use 'bubble-menu';
+@use 'floating-menu';
+@use 'link-popover';
+
+// 7. Extension-specific styles
+@use 'placeholder';
+@use 'task-list';
+@use 'mention';
+@use 'image';
+@use 'details';
+@use 'invisible-chars';
+@use 'emoji-picker';
+@use 'table-controls';
+
+// 8. Themes
+@use 'themes/light';
+@use 'themes/dark';

package/src/themes/_dark.scss

@@ -0,0 +1,68 @@
+// =============================================================================
+// Dark Theme
+// =============================================================================
+// Apply .dm-theme-dark on or above the editor to activate dark theme.
+// Apply .dm-theme-auto for automatic dark mode via prefers-color-scheme.
+//
+// Example:
+//   <div class="dm-theme-dark">
+//     <domternal-editor />
+//   </div>
+//
+//   <domternal-editor class="dm-theme-auto" />
+// =============================================================================
+
+@mixin dark-tokens {
+  --dm-color-scheme: dark;
+  --dm-bg: #1e1e1e;
+  --dm-text: #e0e0e0;
+  --dm-muted: #777777;
+  --dm-surface: #2a2a2a;
+  --dm-border-color: #3a3a3a;
+  --dm-hover: rgba(255, 255, 255, 0.08);
+  --dm-active: rgba(255, 255, 255, 0.15);
+  --dm-accent: #60a5fa;
+  --dm-accent-hover: #93c5fd;
+  --dm-accent-surface: rgba(96, 165, 250, 0.15);
+  --dm-focus-color: rgba(96, 165, 250, 0.3);
+  --dm-selection: rgba(96, 165, 250, 0.25);
+  --dm-code-surface: #2d2d2d;
+  --dm-code-color: inherit;
+  --dm-highlight-bg: rgba(255, 243, 205, 0.2);
+  --dm-blockquote-border: 3px solid #555555;
+  --dm-blockquote-color: #a0a0a0;
+
+  // Syntax highlighting
+  --dm-syntax-keyword: #ff7b72;
+  --dm-syntax-entity: #d2a8ff;
+  --dm-syntax-constant: #79c0ff;
+  --dm-syntax-string: #a5d6ff;
+  --dm-syntax-variable: #ffa657;
+  --dm-syntax-comment: #8b949e;
+  --dm-syntax-tag: #7ee787;
+  --dm-syntax-addition: #aff5b4;
+  --dm-syntax-addition-bg: #033a16;
+  --dm-syntax-deletion: #ffdcd7;
+  --dm-syntax-deletion-bg: #67060c;
+}
+
+.dm-theme-dark,
+.dm-theme-dark .dm-editor,
+.dm-theme-dark .dm-toolbar,
+.dm-theme-dark .dm-bubble-menu,
+.dm-theme-dark .dm-emoji-picker,
+.dm-theme-dark .dm-emoji-suggestion {
+  @include dark-tokens;
+}
+
+// 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-emoji-picker,
+  .dm-theme-auto .dm-emoji-suggestion {
+    @include dark-tokens;
+  }
+}

package/src/themes/_light.scss

@@ -0,0 +1,43 @@
+// =============================================================================
+// Light Theme
+// =============================================================================
+// Light is the default — CSS variables in _variables.scss already use light
+// values. This class exists for explicit light override in a dark context.
+// =============================================================================
+
+@mixin light-tokens {
+  --dm-bg: #ffffff;
+  --dm-text: #1a1a1a;
+  --dm-muted: #999999;
+  --dm-surface: #f8f9fa;
+  --dm-border-color: #e0e0e0;
+  --dm-hover: rgba(0, 0, 0, 0.06);
+  --dm-active: rgba(0, 0, 0, 0.12);
+  --dm-accent: #2563eb;
+  --dm-accent-hover: #1d4ed8;
+  --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);
+  --dm-code-surface: #f5f5f5;
+  --dm-code-color: #d63384;
+  --dm-highlight-bg: #fff3cd;
+
+  // Syntax highlighting
+  --dm-syntax-keyword: #d73a49;
+  --dm-syntax-entity: #6f42c1;
+  --dm-syntax-constant: #005cc5;
+  --dm-syntax-string: #032f62;
+  --dm-syntax-variable: #e36209;
+  --dm-syntax-comment: #6a737d;
+  --dm-syntax-tag: #22863a;
+  --dm-syntax-addition: #22863a;
+  --dm-syntax-addition-bg: #f0fff4;
+  --dm-syntax-deletion: #b31d28;
+  --dm-syntax-deletion-bg: #ffeef0;
+}
+
+.dm-theme-light,
+.dm-theme-light .dm-editor,
+.dm-theme-light .dm-toolbar {
+  @include light-tokens;
+}