@domternal/theme 0.2.0

package/index.d.ts

@@ -0,0 +1,2 @@
+/** CSS-only package - this import loads the editor stylesheet as a side effect. */
+export {};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@domternal/theme",
+  "version": "0.2.0",
+  "description": "Default themes and styles for Domternal editor",
+  "author": "https://github.com/ThomasNowHere",
+  "license": "MIT",
+  "type": "commonjs",
+  "sideEffects": true,
+  "types": "index.d.ts",
+  "style": "dist/domternal-theme.css",
+  "sass": "src/index.scss",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "sass": "./src/index.scss",
+      "style": "./dist/domternal-theme.css",
+      "default": "./dist/domternal-theme.css"
+    },
+    "./css": "./dist/domternal-theme.css",
+    "./scss": "./src/index.scss"
+  },
+  "files": [
+    "dist",
+    "src",
+    "index.d.ts"
+  ],
+  "scripts": {
+    "build": "sass src/index.scss dist/domternal-theme.css --style=compressed --no-source-map && sass src/index.scss dist/domternal-theme.expanded.css --style=expanded --no-source-map"
+  },
+  "devDependencies": {
+    "sass": "^1.89.0"
+  },
+  "keywords": [
+    "domternal",
+    "editor",
+    "theme",
+    "css",
+    "prosemirror"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/domternal/domternal.git",
+    "directory": "packages/theme"
+  },
+  "bugs": {
+    "url": "https://github.com/domternal/domternal/issues"
+  },
+  "homepage": "https://domternal.dev"
+}

package/src/_base.scss

@@ -0,0 +1,60 @@
+// =============================================================================
+// Editor Wrapper Styles
+// =============================================================================
+
+.dm-editor {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  background: var(--dm-editor-bg);
+  color: var(--dm-editor-text);
+  font-family: var(--dm-editor-font-family);
+  font-size: var(--dm-editor-font-size);
+  line-height: var(--dm-editor-line-height);
+  border: var(--dm-editor-border);
+  border-radius: var(--dm-editor-border-radius);
+  box-shadow: var(--dm-editor-shadow, none);
+  overflow: hidden;
+  color-scheme: var(--dm-color-scheme, light);
+
+  .ProseMirror {
+    padding: var(--dm-editor-padding);
+    min-height: 6rem;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  // Focus ring on wrapper when editor is focused
+  &:focus-within {
+    box-shadow: var(--dm-editor-focus-ring, var(--dm-editor-shadow, none));
+  }
+
+  // Text selection colors
+  .ProseMirror ::selection {
+    background: var(--dm-selection);
+  }
+}
+
+// When toolbar is present above editor, remove top border-radius from editor
+.dm-toolbar + .dm-editor {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-top: none;
+}
+
+// =============================================================================
+// Shared floating element fade-in animation
+// =============================================================================
+// Used by elements conditionally inserted into the DOM (emoji picker,
+// suggestion dropdown, toolbar dropdowns). Uses scale instead of translateY —
+// scale doesn't shift position so it won't conflict with floating-ui.
+// Elements using data-show (bubble menu, floating menu, popovers) use CSS
+// opacity transitions instead — see their respective stylesheets.
+// =============================================================================
+
+@keyframes dm-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}

package/src/_bubble-menu.scss

@@ -0,0 +1,49 @@
+// =============================================================================
+// Bubble Menu Styles
+// =============================================================================
+
+.dm-bubble-menu {
+  // Button tokens (compact sizing for bubble menu)
+  --dm-toolbar-padding: 0.25rem;
+  --dm-toolbar-gap: 0.125rem;
+  --dm-button-size: 1.75rem;
+  --dm-button-border-radius: 0.25rem;
+  --dm-button-color: var(--dm-text, #1a1a1a);
+  --dm-button-hover-bg: var(--dm-hover, rgba(0, 0, 0, 0.06));
+  --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.4;
+
+  // Smaller icons to match compact buttons
+  .dm-toolbar-button svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .dm-toolbar-separator {
+    width: 1px;
+    height: 1.125rem;
+    background: var(--dm-separator-color, var(--dm-border-color, #e0e0e0));
+    margin: 0 0.125rem;
+    flex-shrink: 0;
+  }
+
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: var(--dm-toolbar-gap);
+  padding: var(--dm-toolbar-padding);
+  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);
+  visibility: hidden;
+  opacity: 0;
+  z-index: 50;
+
+  &[data-show] {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.15s ease;
+  }
+}

package/src/_color-palette.scss

@@ -0,0 +1,89 @@
+// =============================================================================
+// Color Palette (grid-layout dropdown for TextColor / HighlightColor)
+// =============================================================================
+
+.dm-color-palette {
+  display: grid;
+  grid-template-columns: repeat(var(--dm-palette-columns, 10), 1fr);
+  gap: 0.375rem;
+  padding: 0.375rem;
+  min-width: auto;
+  width: max-content;
+}
+
+// "Default" reset button — spans the full width of the grid
+.dm-color-palette-reset {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  margin-bottom: 0.375rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--dm-button-color, #1a1a1a);
+  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, rgba(0, 0, 0, 0.06));
+  }
+
+  svg {
+    width: 0.875rem;
+    height: 0.875rem;
+    flex-shrink: 0;
+  }
+}
+
+// Individual color swatch
+.dm-color-swatch {
+  position: relative;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.1s, box-shadow 0.1s;
+
+  &:hover {
+    transform: scale(1.15);
+    z-index: 1;
+    box-shadow: 0 0 0 2px var(--dm-toolbar-bg, #f8f9fa),
+                0 0 0 3px var(--dm-accent, #2563eb);
+  }
+
+  // Active state — checkmark indicator
+  &--active {
+    box-shadow: 0 0 0 2px var(--dm-toolbar-bg, #f8f9fa),
+                0 0 0 3px var(--dm-accent, #2563eb);
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      // White checkmark with dark shadow for universal contrast
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12 5L6.5 11 4 8.5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.3'/%3E%3Cpath d='M12 5L6.5 11 4 8.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
+    }
+  }
+}
+
+// Dark theme — adjust swatch border for dark backgrounds
+.dm-theme-dark .dm-color-swatch,
+.dm-theme-auto .dm-color-swatch {
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-theme-auto .dm-color-swatch {
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+}

package/src/_content.scss

@@ -0,0 +1,229 @@
+// =============================================================================
+// Content Typography
+// =============================================================================
+// Styles for rendered content inside the editor. Scoped to .dm-editor .ProseMirror
+// so styles don't leak outside.
+// =============================================================================
+
+.dm-editor .ProseMirror {
+  // ---------------------------------------------------------------------------
+  // Paragraphs
+  // ---------------------------------------------------------------------------
+
+  p {
+    margin: 0.4em 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Headings
+  // ---------------------------------------------------------------------------
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 1.5em 0 0.5em;
+    font-weight: 700;
+    line-height: 1.25;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  h1 {
+    font-size: 2em;
+  }
+
+  h2 {
+    font-size: 1.5em;
+  }
+
+  h3 {
+    font-size: 1.25em;
+  }
+
+  h4 {
+    font-size: 1.1em;
+  }
+
+  h5 {
+    font-size: 1em;
+  }
+
+  h6 {
+    font-size: 0.9em;
+    color: var(--dm-muted, #666);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Inline code
+  // ---------------------------------------------------------------------------
+
+  code {
+    background: var(--dm-code-bg);
+    color: var(--dm-code-text);
+    font-family: var(--dm-code-font);
+    font-size: 0.875em;
+    padding: 0.15em 0.35em;
+    border: 1px solid var(--dm-border-color);
+    border-radius: var(--dm-code-border-radius);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Code blocks (pre > code)
+  // ---------------------------------------------------------------------------
+
+  pre {
+    background: var(--dm-code-block-bg);
+    color: var(--dm-code-block-text);
+    font-family: var(--dm-code-font);
+    font-size: 0.875em;
+    padding: 1em;
+    border-radius: 0.375rem;
+    overflow-x: auto;
+    margin: 0.75em 0;
+
+    code {
+      background: none;
+      color: inherit;
+      padding: 0;
+      border: none;
+      border-radius: 0;
+      font-size: inherit;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Blockquote
+  // ---------------------------------------------------------------------------
+
+  blockquote {
+    border-left: var(--dm-blockquote-border);
+    color: var(--dm-blockquote-color);
+    margin: 0.75em 0;
+    padding: 0.25em 0 0.25em 1em;
+
+    p {
+      margin-top: 0;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Lists
+  // ---------------------------------------------------------------------------
+
+  ul,
+  ol {
+    margin: 0.75em 0;
+    padding-left: 1.5em;
+
+    li {
+      margin: 0.25em 0;
+
+      > p {
+        margin: 0.1em 0;
+      }
+    }
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  // Nested lists
+  ul ul,
+  ol ul {
+    list-style-type: circle;
+  }
+
+  ul ul ul,
+  ol ul ul,
+  ol ol ul {
+    list-style-type: square;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Horizontal rule
+  // ---------------------------------------------------------------------------
+
+  hr {
+    border: none;
+    border-top: 2px solid var(--dm-hr-color);
+    margin: 1.5em 0;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Links
+  // ---------------------------------------------------------------------------
+
+  a {
+    color: var(--dm-link-color);
+    text-decoration: underline;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--dm-link-hover-color);
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Highlight / mark (fallback for pasted <mark> elements)
+  // ---------------------------------------------------------------------------
+
+  mark {
+    color: inherit;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Images
+  // ---------------------------------------------------------------------------
+
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 0.75em 0;
+
+    &.ProseMirror-selectednode {
+      outline: 2px solid var(--dm-accent, #2563eb);
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Tables
+  // ---------------------------------------------------------------------------
+
+  table {
+    border: var(--dm-table-border);
+    margin: 0.75em 0;
+
+    td,
+    th {
+      border: var(--dm-table-border);
+      padding: 0.5em 0.75em;
+      min-width: 100px;
+    }
+
+    th {
+      background: var(--dm-table-header-bg);
+      font-weight: 600;
+      text-align: left;
+    }
+
+    td > p,
+    th > p {
+      margin: 0;
+    }
+  }
+}

package/src/_details.scss

@@ -0,0 +1,122 @@
+// =============================================================================
+// Details / Accordion Styles
+// =============================================================================
+// The NodeView renders:
+//   div[data-type="details"]
+//     button[type="button"]          ← toggle (chevron)
+//     div                            ← contentDOM
+//       summary                      ← editable header (DetailsSummary)
+//       div[data-details-content]    ← collapsible body (DetailsContent)
+//
+// Open state: .is-open on the outer div, [hidden] removed from content.
+//
+// Layout: CSS grid places the summary and button side-by-side in row 1,
+// and the content spans full width in row 2. This lets the button
+// stretch to the full summary height for vertical centering.
+// =============================================================================
+
+.dm-editor .ProseMirror {
+  div[data-type="details"] {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto 1fr;
+    border: var(--dm-details-border);
+    border-radius: 0.375rem;
+    margin: 0.75em 0;
+
+    // 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
+    > button[type="button"] {
+      grid-column: 2;
+      grid-row: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.5rem;
+      height: 1.5rem;
+      align-self: center;
+      margin-right: 10px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      color: var(--dm-muted);
+      border-radius: 50%;
+
+      // CSS chevron (pointing right ›)
+      &::before {
+        content: '';
+        display: block;
+        width: 0.4em;
+        height: 0.4em;
+        border-right: 2px solid currentColor;
+        border-bottom: 2px solid currentColor;
+        transform: rotate(-45deg);
+        transition: transform 0.15s ease;
+      }
+
+      &:hover {
+        color: var(--dm-text);
+        background: var(--dm-hover);
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    // Summary row background — spans both columns so the button area
+    // also gets the surface colour behind the round toggle
+    &::before {
+      content: '';
+      grid-column: 1 / -1;
+      grid-row: 1;
+      background: var(--dm-details-bg);
+      border-radius: 0.375rem;
+    }
+
+    &.is-open::before {
+      border-radius: 0.375rem 0.375rem 0 0;
+    }
+
+    // Summary (editable header text)
+    summary {
+      grid-column: 1;
+      grid-row: 1;
+      display: block;
+      padding: 0.5em 0.5em 0.5em 0.75em;
+      font-weight: var(--dm-details-summary-font-weight);
+      min-height: 0;
+
+      // Remove native marker
+      &::-webkit-details-marker {
+        display: none;
+      }
+      list-style: none;
+    }
+
+    // Content area (hidden by default via [hidden] attribute from NodeView)
+    div[data-details-content] {
+      grid-column: 1 / -1;
+      grid-row: 2;
+      padding: 0.5em 0.75em;
+      border-top: var(--dm-details-border);
+    }
+
+    // Disable ProseMirror selected-node outline — the border is enough
+    &.ProseMirror-selectednode {
+      outline: none;
+    }
+
+    // Open state — rotate chevron to point down
+    &.is-open {
+      > button[type="button"]::before {
+        transform: rotate(45deg);
+      }
+    }
+  }
+}