@domternal/theme 0.2.0

package/src/_prosemirror.scss

@@ -0,0 +1,176 @@
+// =============================================================================
+// ProseMirror Required Styles
+// =============================================================================
+// Bundles essential CSS from prosemirror-view, prosemirror-gapcursor, and
+// prosemirror-tables. Scoped to .dm-editor with hardcoded colors replaced
+// by CSS variables.
+// =============================================================================
+
+// ---------------------------------------------------------------------------
+// prosemirror-view base
+// ---------------------------------------------------------------------------
+
+.dm-editor .ProseMirror {
+  position: relative;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  white-space: break-spaces;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0;
+  outline: none;
+}
+
+.dm-editor .ProseMirror pre {
+  white-space: pre-wrap;
+}
+
+.dm-editor .ProseMirror li {
+  position: relative;
+}
+
+// Selection hiding (ProseMirror internal)
+.ProseMirror-hideselection *::selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection *::-moz-selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection {
+  caret-color: transparent;
+}
+
+// Draggable contenteditable false
+.ProseMirror [draggable][contenteditable="false"] {
+  user-select: text;
+}
+
+// Selected node
+.dm-editor .ProseMirror-selectednode {
+  outline: 2px solid var(--dm-accent, #2563eb);
+}
+
+.dm-editor li.ProseMirror-selectednode {
+  outline: none;
+}
+
+.dm-editor li.ProseMirror-selectednode::after {
+  content: "";
+  position: absolute;
+  left: -32px;
+  right: -2px;
+  top: -2px;
+  bottom: -2px;
+  border: 2px solid var(--dm-accent, #2563eb);
+  pointer-events: none;
+}
+
+// ProseMirror separator (internal)
+img.ProseMirror-separator {
+  display: inline !important;
+  border: none !important;
+  margin: 0 !important;
+}
+
+// ---------------------------------------------------------------------------
+// prosemirror-gapcursor
+// ---------------------------------------------------------------------------
+
+.dm-editor .ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+}
+
+.dm-editor .ProseMirror-gapcursor::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid var(--dm-editor-text, #1a1a1a);
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+.dm-editor .ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
+
+// ---------------------------------------------------------------------------
+// prosemirror-tables
+// ---------------------------------------------------------------------------
+
+.dm-editor .tableWrapper {
+  overflow-x: auto;
+}
+
+.dm-editor table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+  overflow: hidden;
+}
+
+.dm-editor td,
+.dm-editor th {
+  vertical-align: top;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.dm-editor .column-resize-handle {
+  position: absolute;
+  right: -1.5px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  z-index: 20;
+  background-color: var(--dm-accent, #2563eb);
+  pointer-events: none;
+}
+
+// Hide resize handle + cursor during non-resize mouse drag (cell/text selection).
+// The dm-mouse-drag class is added by the Table extension's suppressor plugin.
+.dm-editor .dm-mouse-drag .column-resize-handle {
+  display: none;
+}
+
+.dm-editor .ProseMirror.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+.dm-editor .ProseMirror.resize-cursor.dm-mouse-drag {
+  cursor: auto;
+}
+
+.dm-editor .selectedCell {
+  &::after {
+    z-index: 2;
+    position: absolute;
+    content: "";
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: var(--dm-table-selected-bg, rgba(66, 133, 244, 0.15));
+    pointer-events: none;
+  }
+}
+
+// Hide native text selection inside selected cells — the ::after overlay is sufficient
+.dm-editor .selectedCell,
+.dm-editor .selectedCell * {
+  &::selection {
+    background: transparent !important;
+    color: inherit !important;
+  }
+}

package/src/_syntax.scss

@@ -0,0 +1,101 @@
+// =============================================================================
+// Syntax Highlighting (CodeBlockLowlight)
+// =============================================================================
+// Colors for highlight.js CSS classes generated by the lowlight plugin.
+// Semantic grouping follows GitHub's highlight.js theme.
+// Customize via --dm-syntax-* variables on .dm-editor or a parent.
+// =============================================================================
+
+.dm-editor .ProseMirror pre code {
+  // Keywords, types, doctags
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-meta .hljs-keyword,
+  .hljs-template-tag,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable.language_ {
+    color: var(--dm-syntax-keyword);
+  }
+
+  // Function & class names
+  .hljs-title,
+  .hljs-title.class_,
+  .hljs-title.class_.inherited__,
+  .hljs-title.function_ {
+    color: var(--dm-syntax-entity);
+  }
+
+  // Constants, numbers, operators, attributes
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-operator,
+  .hljs-variable,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-id {
+    color: var(--dm-syntax-constant);
+  }
+
+  // Strings & regex
+  .hljs-regexp,
+  .hljs-string,
+  .hljs-meta .hljs-string {
+    color: var(--dm-syntax-string);
+  }
+
+  // Built-ins & symbols
+  .hljs-built_in,
+  .hljs-symbol {
+    color: var(--dm-syntax-variable);
+  }
+
+  // Comments
+  .hljs-comment,
+  .hljs-code,
+  .hljs-formula {
+    color: var(--dm-syntax-comment);
+  }
+
+  // HTML/XML tag names, selectors
+  .hljs-name,
+  .hljs-quote,
+  .hljs-selector-tag,
+  .hljs-selector-pseudo {
+    color: var(--dm-syntax-tag);
+  }
+
+  // Markup headings
+  .hljs-section {
+    color: var(--dm-syntax-constant);
+    font-weight: bold;
+  }
+
+  // Markup lists
+  .hljs-bullet {
+    color: var(--dm-syntax-tag);
+  }
+
+  // Diff additions & deletions
+  .hljs-addition {
+    color: var(--dm-syntax-addition);
+    background-color: var(--dm-syntax-addition-bg);
+  }
+
+  .hljs-deletion {
+    color: var(--dm-syntax-deletion);
+    background-color: var(--dm-syntax-deletion-bg);
+  }
+
+  // Text formatting
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: bold;
+  }
+}

package/src/_table-controls.scss

@@ -0,0 +1,271 @@
+// =============================================================================
+// Table Row/Column Controls
+// =============================================================================
+// Hover controls for table rows and columns. Shows "..." handle buttons
+// above columns and beside rows. Clicking opens a dropdown with operations.
+// =============================================================================
+
+// Outer container — holds handles + tableWrapper
+.dm-editor .dm-table-container {
+  position: relative;
+}
+
+// Handle buttons (col, row)
+.dm-table-col-handle,
+.dm-table-row-handle {
+  position: absolute;
+  z-index: 10;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--dm-border-color, #e0e0e0);
+  border-radius: 4px;
+  background: var(--dm-bg, #ffffff);
+  color: var(--dm-muted, #999999);
+  cursor: pointer;
+  padding: 0;
+  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
+
+  &:hover {
+    background: var(--dm-hover, rgba(0, 0, 0, 0.06));
+    color: var(--dm-text, #1a1a1a);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  svg {
+    display: block;
+  }
+}
+
+// Column handle (horizontal dots, above column)
+.dm-table-col-handle {
+  width: 24px;
+  height: 14px;
+}
+
+// Row handle (vertical dots, left of row)
+.dm-table-row-handle {
+  width: 14px;
+  height: 24px;
+}
+
+// Cell handle — small circle at cell corner (appears when cursor is in a cell)
+.dm-table-cell-handle {
+  position: absolute;
+  z-index: 10;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--dm-accent, #2563eb);
+  border-radius: 50%;
+  background: var(--dm-bg, #ffffff);
+  color: var(--dm-accent, #2563eb);
+  cursor: pointer;
+  padding: 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
+
+  &:hover {
+    background: var(--dm-accent, #2563eb);
+    color: #fff;
+    border-color: var(--dm-accent, #2563eb);
+    box-shadow: 0 1px 4px color-mix(in srgb, var(--dm-accent, #2563eb) 30%, transparent);
+  }
+
+  svg {
+    display: block;
+    width: 8px;
+    height: 8px;
+  }
+}
+
+// ─── Cell toolbar (floating strip above selected cells) ─────────────────────
+.dm-table-cell-toolbar {
+  position: absolute;
+  z-index: 10;
+  display: none;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--dm-border-color, #e0e0e0);
+  border-radius: 6px;
+  background: var(--dm-bg, #ffffff);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  animation: dm-fade-in 0.12s ease;
+}
+
+.dm-table-cell-toolbar-btn {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  padding: 4px 5px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--dm-text, #1a1a1a);
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+
+  &:hover,
+  &.dm-table-cell-toolbar-btn--open {
+    background: var(--dm-hover, rgba(0, 0, 0, 0.06));
+  }
+
+  &--active {
+    color: var(--dm-accent, #2563eb);
+    background: var(--dm-accent-surface, rgba(37, 99, 235, 0.1));
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+    pointer-events: none;
+  }
+
+  svg {
+    display: block;
+    flex-shrink: 0;
+  }
+}
+
+.dm-table-cell-toolbar-chevron {
+  display: flex;
+  align-items: center;
+}
+
+.dm-table-cell-toolbar-sep {
+  width: 1px;
+  height: 16px;
+  margin: 0 2px;
+  background: var(--dm-border-color, #e0e0e0);
+}
+
+// ─── Alignment dropdown ─────────────────────────────────────────────────────
+// Scoped under .dm-table-cell-align-dropdown so specificity (0,2,0) beats the
+// generic .dm-table-controls-dropdown > button rule (0,1,1).
+.dm-table-cell-align-dropdown {
+  min-width: auto;
+  width: max-content;
+  padding: 0.25rem;
+
+  .dm-table-align-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.3rem 0.5rem;
+    border: none;
+    border-radius: 0.25rem;
+    background: transparent;
+    color: var(--dm-text, #1a1a1a);
+    cursor: pointer;
+    font-size: 0.8125rem;
+    white-space: nowrap;
+    transition: background-color 0.15s, color 0.15s;
+
+    &:hover {
+      background: var(--dm-hover, rgba(0, 0, 0, 0.06));
+    }
+
+    &--active {
+      color: var(--dm-accent, #2563eb);
+      background: var(--dm-accent-surface, rgba(37, 99, 235, 0.1));
+    }
+  }
+
+  .dm-table-align-item-icon {
+    display: flex;
+    align-items: center;
+
+    svg {
+      display: block;
+    }
+  }
+}
+
+// ─── Cell alignment via data attributes ─────────────────────────────────────
+// Scoped under .ProseMirror table to beat the content rule
+// .dm-editor .ProseMirror table th { text-align: left } (specificity 0,2,2).
+.dm-editor .ProseMirror table {
+  td, th {
+    &[data-text-align='center'] { text-align: center; }
+    &[data-text-align='right']  { text-align: right; }
+    &[data-vertical-align='middle'] { vertical-align: middle; }
+    &[data-vertical-align='bottom'] { vertical-align: bottom; }
+  }
+}
+
+// ─── Focused cell highlight (cursor is inside this cell) ─────────────────────
+.dm-editor td.dm-cell-focused,
+.dm-editor th.dm-cell-focused {
+  outline: 1px solid var(--dm-accent, #2563eb);
+  outline-offset: -1px;
+}
+
+// Dropdown panel
+.dm-table-controls-dropdown {
+  position: absolute;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 10rem;
+  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;
+
+  > button {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    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);
+    }
+  }
+}
+
+.dm-table-controls-dropdown-icon {
+  display: flex;
+  align-items: center;
+  color: var(--dm-icon, #666);
+
+  svg {
+    display: block;
+  }
+}
+
+// Cell dropdown — color palette
+.dm-table-cell-dropdown {
+  min-width: auto;
+  width: max-content;
+  padding: 0;
+  border-radius: 0.75rem;
+
+  .dm-color-palette {
+    padding: 0.5rem;
+  }
+}
+
+.dm-table-cell-dropdown-separator {
+  height: 1px;
+  background: var(--dm-border-color, #e0e0e0);
+  margin: 0.25rem 0;
+}

package/src/_task-list.scss

@@ -0,0 +1,51 @@
+// =============================================================================
+// Task List Styles
+// =============================================================================
+// TaskList renders as ul[data-type="taskList"]
+// TaskItem renders as li[data-type="taskItem"] with label > input[checkbox] + div
+// =============================================================================
+
+.dm-editor .ProseMirror {
+  ul[data-type="taskList"] {
+    list-style: none;
+    padding-left: 0;
+
+    li[data-type="taskItem"] {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5em;
+
+      > label {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        margin-top: 0.4em;
+        user-select: none;
+
+        input[type="checkbox"] {
+          width: 1em;
+          height: 1em;
+          margin: 0;
+          padding: 0;
+          cursor: pointer;
+          accent-color: var(--dm-accent, #2563eb);
+        }
+      }
+
+      > div {
+        flex: 1;
+        min-width: 0;
+
+        > p {
+          margin: 0;
+        }
+      }
+
+      // Checked state — strikethrough and dimmed
+      &[data-checked="true"] > div {
+        text-decoration: line-through;
+        opacity: 0.6;
+      }
+    }
+  }
+}