@scattered-light/base-ui-theme 0.1.0

package/dist/styles/semantic/toast.css

@@ -0,0 +1,171 @@
+/* Toast Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     VIEWPORT
+     ============================================ */
+  
+  --toast-viewport-position: fixed;
+  --toast-viewport-z-index: 9999;
+  --toast-viewport-width: 250px;
+  --toast-viewport-width-md: 300px;
+  --toast-viewport-margin: 1rem;
+  --toast-viewport-margin-md: 2rem;
+  
+  /* ============================================
+     TOAST ROOT
+     ============================================ */
+  
+  --toast-background: var(--surface-base);
+  --toast-color: var(--text-primary);
+  --toast-border: var(--theme-stroke-default) solid var(--border-default);
+  --toast-border-radius: 0.5rem;
+  --toast-padding: 1rem;
+  --toast-box-shadow: var(--shadow-md);
+  --toast-transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s, height 0.15s;
+  
+  /* Stacking */
+  --toast-gap: 0.75rem;
+  --toast-peek: 0.75rem;
+  
+  /* ============================================
+     CONTENT
+     ============================================ */
+  
+  --toast-content-transition: opacity 0.25s;
+  
+  /* ============================================
+     TITLE
+     ============================================ */
+  
+  --toast-title-font-family: var(--theme-maximize-md-font-family);
+  --toast-title-font-size: var(--theme-maximize-md-font-size);
+  --toast-title-font-weight: var(--theme-maximize-md-font-weight);
+  --toast-title-line-height: var(--theme-maximize-md-line-height);
+  --toast-title-letter-spacing: var(--theme-maximize-md-letter-spacing);
+  
+  /* ============================================
+     DESCRIPTION
+     ============================================ */
+  
+  --toast-description-font-family: var(--theme-font-base-font-family);
+  --toast-description-font-size: var(--theme-font-base-font-size);
+  --toast-description-font-weight: var(--theme-font-base-font-weight);
+  --toast-description-line-height: var(--theme-font-base-line-height);
+  --toast-description-letter-spacing: var(--theme-font-base-letter-spacing);
+  --toast-description-margin-top: 0.25rem;
+  
+  /* ============================================
+     CLOSE BUTTON
+     ============================================ */
+  
+  --toast-close-top: 0.5rem;
+  --toast-close-right: 0.5rem;
+  --toast-close-width: 1.25rem;
+  --toast-close-height: 1.25rem;
+  --toast-close-border-radius: 0.25rem;
+  --toast-close-background-hover: var(--surface-raised);
+  
+  /* ============================================
+     ICON
+     ============================================ */
+  
+  --toast-icon-width: 1.25rem;
+  --toast-icon-height: 1.25rem;
+  
+  /* ============================================
+     VARIANTS
+     ============================================ */
+  
+  /* Success */
+  --toast-success-background: var(--theme-status-success-light);
+  --toast-success-border-color: var(--theme-status-success);
+  --toast-success-color: var(--theme-status-success-dark);
+  --toast-success-close-hover: color-mix(in srgb, var(--theme-status-success) 10%, white);
+  
+  /* Error */
+  --toast-error-background: var(--theme-status-error-light);
+  --toast-error-border-color: var(--theme-status-error);
+  --toast-error-color: var(--theme-status-error-dark);
+  --toast-error-close-hover: color-mix(in srgb, var(--theme-status-error) 10%, white);
+  
+  /* Warning */
+  --toast-warning-background: var(--theme-status-warning-light);
+  --toast-warning-border-color: var(--theme-status-warning);
+  --toast-warning-color: var(--theme-status-warning-dark);
+  --toast-warning-close-hover: color-mix(in srgb, var(--theme-status-warning) 10%, white);
+  
+  /* Info */
+  --toast-info-background: var(--theme-status-info-light);
+  --toast-info-border-color: var(--theme-status-info);
+  --toast-info-color: var(--theme-status-info-dark);
+  --toast-info-close-hover: color-mix(in srgb, var(--theme-status-info) 10%, white);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --toast-background: var(--theme-neutral-100);
+    --toast-color: var(--text-primary);
+    --toast-border: var(--theme-stroke-default) solid var(--border-default);
+    --toast-close-background-hover: var(--theme-neutral-200);
+    
+    /* Success */
+    --toast-success-background: color-mix(in srgb, var(--theme-status-success) 20%, var(--theme-neutral-100));
+    --toast-success-border-color: var(--theme-status-success);
+    --toast-success-color: var(--theme-status-success-light);
+    --toast-success-close-hover: color-mix(in srgb, var(--theme-status-success) 30%, var(--theme-neutral-100));
+    
+    /* Error */
+    --toast-error-background: color-mix(in srgb, var(--theme-status-error) 20%, var(--theme-neutral-100));
+    --toast-error-border-color: var(--theme-status-error);
+    --toast-error-color: var(--theme-status-error-light);
+    --toast-error-close-hover: color-mix(in srgb, var(--theme-status-error) 30%, var(--theme-neutral-100));
+    
+    /* Warning */
+    --toast-warning-background: color-mix(in srgb, var(--theme-status-warning) 20%, var(--theme-neutral-100));
+    --toast-warning-border-color: var(--theme-status-warning);
+    --toast-warning-color: var(--theme-status-warning-light);
+    --toast-warning-close-hover: color-mix(in srgb, var(--theme-status-warning) 30%, var(--theme-neutral-100));
+    
+    /* Info */
+    --toast-info-background: color-mix(in srgb, var(--theme-status-info) 20%, var(--theme-neutral-100));
+    --toast-info-border-color: var(--theme-status-info);
+    --toast-info-color: var(--theme-status-info-light);
+    --toast-info-close-hover: color-mix(in srgb, var(--theme-status-info) 30%, var(--theme-neutral-100));
+  }
+}
+
+[data-theme='dark'] {
+  --toast-background: var(--theme-neutral-100);
+  --toast-color: var(--text-primary);
+  --toast-border: var(--theme-stroke-default) solid var(--border-default);
+  --toast-close-background-hover: var(--theme-neutral-200);
+  
+  /* Success */
+  --toast-success-background: color-mix(in srgb, var(--theme-status-success) 20%, var(--theme-neutral-100));
+  --toast-success-border-color: var(--theme-status-success);
+  --toast-success-color: var(--theme-status-success-light);
+  --toast-success-close-hover: color-mix(in srgb, var(--theme-status-success) 30%, var(--theme-neutral-100));
+  
+  /* Error */
+  --toast-error-background: color-mix(in srgb, var(--theme-status-error) 20%, var(--theme-neutral-100));
+  --toast-error-border-color: var(--theme-status-error);
+  --toast-error-color: var(--theme-status-error-light);
+  --toast-error-close-hover: color-mix(in srgb, var(--theme-status-error) 30%, var(--theme-neutral-100));
+  
+  /* Warning */
+  --toast-warning-background: color-mix(in srgb, var(--theme-status-warning) 20%, var(--theme-neutral-100));
+  --toast-warning-border-color: var(--theme-status-warning);
+  --toast-warning-color: var(--theme-status-warning-light);
+  --toast-warning-close-hover: color-mix(in srgb, var(--theme-status-warning) 30%, var(--theme-neutral-100));
+  
+  /* Info */
+  --toast-info-background: color-mix(in srgb, var(--theme-status-info) 20%, var(--theme-neutral-100));
+  --toast-info-border-color: var(--theme-status-info);
+  --toast-info-color: var(--theme-status-info-light);
+  --toast-info-close-hover: color-mix(in srgb, var(--theme-status-info) 30%, var(--theme-neutral-100));
+}

package/dist/styles/semantic/toggle-group.css

@@ -0,0 +1,29 @@
+/* Toggle Group Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     TOGGLE GROUP ROOT
+     ============================================ */
+  
+  --toggle-group-display: inline-flex;
+  --toggle-group-gap: var(--space-1);
+  --toggle-group-padding: var(--space-1);
+  --toggle-group-background: var(--surface-raised);
+  --toggle-group-border-radius: var(--theme-radius-surface);
+  --toggle-group-border-width: var(--theme-stroke-default);
+  --toggle-group-border-color: var(--border-default);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --toggle-group-background: var(--theme-neutral-200);
+  }
+}
+
+[data-theme='dark'] {
+  --toggle-group-background: var(--theme-neutral-200);
+}

package/dist/styles/semantic/toggle.css

@@ -0,0 +1,94 @@
+/* Toggle Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     TOGGLE ROOT
+     ============================================ */
+  
+  --toggle-display: inline-flex;
+  --toggle-align-items: center;
+  --toggle-justify-content: center;
+  --toggle-gap: var(--space-2);
+  --toggle-padding-block: var(--space-2-5);
+  --toggle-padding-inline: var(--space-4);
+  --toggle-font-family: var(--theme-font-base-label-font-family);
+  --toggle-font-size: var(--theme-font-base-label-font-size);
+  --toggle-font-weight: var(--theme-font-base-label-font-weight);
+  --toggle-line-height: var(--theme-font-base-label-line-height);
+  --toggle-letter-spacing: var(--theme-font-base-label-letter-spacing);
+  --toggle-border-radius: var(--theme-radius-chrome);
+  --toggle-border-width: var(--theme-stroke-default);
+  --toggle-cursor: pointer;
+  --toggle-transition: all 0.2s ease;
+  --toggle-user-select: none;
+  
+  /* Default state */
+  --toggle-background: var(--surface-base);
+  --toggle-color: var(--text-primary);
+  --toggle-border-color: var(--border-default);
+  
+  /* Hover state */
+  --toggle-background-hover: var(--surface-raised);
+  --toggle-border-color-hover: var(--border-strong);
+  
+  /* Pressed/Active state */
+  --toggle-background-pressed: var(--theme-primary-100);
+  --toggle-color-pressed: var(--theme-primary-600);
+  --toggle-border-color-pressed: var(--theme-primary-600);
+  
+  /* Pressed hover state */
+  --toggle-background-pressed-hover: var(--theme-primary-300);
+  --toggle-border-color-pressed-hover: var(--theme-primary-700);
+  
+  /* Focus state */
+  --toggle-outline-focus: var(--theme-a11y-focus-outline-width) solid var(--focus-ring);
+  --toggle-outline-offset-focus: var(--theme-a11y-focus-outline-offset);
+  
+  /* Disabled state */
+  --toggle-opacity-disabled: 0.5;
+  --toggle-cursor-disabled: not-allowed;
+  
+  /* ============================================
+     SIZE VARIANTS
+     ============================================ */
+  
+  /* Small */
+  --toggle-padding-block-sm: var(--space-1-5);
+  --toggle-padding-inline-sm: var(--space-3);
+  --toggle-font-family-sm: var(--theme-font-minimize-font-family);
+  --toggle-font-size-sm: var(--theme-font-minimize-font-size);
+  --toggle-font-weight-sm: var(--theme-font-minimize-font-weight);
+  --toggle-line-height-sm: var(--theme-font-minimize-line-height);
+  --toggle-letter-spacing-sm: var(--theme-font-minimize-letter-spacing);
+  --toggle-border-radius-sm: var(--theme-radius-item);
+  
+  /* Large */
+  --toggle-padding-block-lg: var(--space-3);
+  --toggle-padding-inline-lg: var(--space-5);
+  --toggle-font-family-lg: var(--theme-font-base-font-family);
+  --toggle-font-size-lg: var(--theme-font-base-font-size);
+  --toggle-font-weight-lg: var(--theme-font-base-font-weight);
+  --toggle-line-height-lg: var(--theme-font-base-line-height);
+  --toggle-letter-spacing-lg: var(--theme-font-base-letter-spacing);
+  --toggle-border-radius-lg: var(--theme-radius-surface);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --toggle-background: var(--theme-neutral-100);
+    --toggle-background-hover: var(--theme-neutral-200);
+    --toggle-background-pressed: var(--theme-primary-600);
+    --toggle-background-pressed-hover: var(--theme-primary-500);
+  }
+}
+
+[data-theme='dark'] {
+  --toggle-background: var(--theme-neutral-100);
+  --toggle-background-hover: var(--theme-neutral-200);
+  --toggle-background-pressed: var(--theme-primary-600);
+  --toggle-background-pressed-hover: var(--theme-primary-500);
+}

package/dist/styles/semantic/toolbar.css

@@ -0,0 +1,47 @@
+/* Toolbar Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     TOOLBAR ROOT
+     ============================================ */
+  
+  --toolbar-display: flex;
+  --toolbar-align-items: center;
+  --toolbar-gap: var(--space-2);
+  --toolbar-padding: var(--space-2);
+  --toolbar-background: var(--surface-raised);
+  --toolbar-border-radius: var(--theme-radius-surface);
+  --toolbar-border-width: var(--theme-stroke-default);
+  --toolbar-border-color: var(--border-default);
+  
+  /* ============================================
+     TOOLBAR GROUP
+     ============================================ */
+  
+  --toolbar-group-display: flex;
+  --toolbar-group-align-items: center;
+  --toolbar-group-gap: var(--space-1);
+  
+  /* ============================================
+     TOOLBAR SEPARATOR
+     ============================================ */
+  
+  --toolbar-separator-width: var(--theme-stroke-default);
+  --toolbar-separator-height: 1.5rem;
+  --toolbar-separator-background: var(--border-default);
+  --toolbar-separator-margin-inline: var(--space-1);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --toolbar-background: var(--theme-neutral-200);
+  }
+}
+
+[data-theme='dark'] {
+  --toolbar-background: var(--theme-neutral-200);
+}

package/dist/styles/semantic/tooltip.css

@@ -0,0 +1,56 @@
+/* Tooltip Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     TOOLTIP POSITIONER
+     ============================================ */
+  
+  --tooltip-positioner-z-index: 9999;
+  
+  /* ============================================
+     TOOLTIP POPUP
+     ============================================ */
+  
+  --tooltip-popup-background: var(--theme-neutral-1100);
+  --tooltip-popup-color: var(--theme-text-on-primary);
+  --tooltip-popup-padding-block: var(--space-1-5);
+  --tooltip-popup-padding-inline: var(--space-2-5);
+  --tooltip-popup-border-radius: var(--theme-radius-chrome);
+  --tooltip-popup-font-family: var(--theme-font-condense-font-family);
+  --tooltip-popup-font-size: var(--theme-font-condense-font-size);
+  --tooltip-popup-font-weight: var(--theme-font-condense-font-weight);
+  --tooltip-popup-line-height: var(--theme-font-condense-line-height);
+  --tooltip-popup-letter-spacing: var(--theme-font-condense-letter-spacing);
+  --tooltip-popup-max-width: 300px;
+  --tooltip-popup-box-shadow: var(--shadow-lg);
+  
+  /* Animation */
+  --tooltip-popup-animation-duration: 0.15s;
+  --tooltip-popup-animation-easing: ease-out;
+  
+  /* ============================================
+     TOOLTIP ARROW
+     ============================================ */
+  
+  --tooltip-arrow-width: 12px;
+  --tooltip-arrow-height: 6px;
+  --tooltip-arrow-fill: var(--theme-neutral-1100);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --tooltip-popup-background: var(--theme-neutral-200);
+    --tooltip-popup-color: var(--theme-text-on-primary);
+    --tooltip-arrow-fill: var(--theme-neutral-200);
+  }
+}
+
+[data-theme='dark'] {
+  --tooltip-popup-background: var(--theme-neutral-200);
+  --tooltip-popup-color: var(--theme-text-on-primary);
+  --tooltip-arrow-fill: var(--theme-neutral-200);
+}

package/dist/styles/theme/README.md

@@ -0,0 +1,179 @@
+# Theme layer (`--theme-*`)
+
+This folder sits **between** base scales ([`src/styles/base/`](../base/)) and component semantics ([`src/styles/semantic/`](../semantic/)). Edit these files to change brand mapping, density, typography, corner style, strokes, and accessibility defaults in one place.
+
+## Layers
+
+```mermaid
+flowchart TB
+  subgraph base [Base]
+    colors[colors palettes]
+    global[global surfaces text]
+    spacing[space scale]
+    borders[radii widths]
+    typo[type scale]
+    reset[reset + reset-accessibility]
+  end
+  subgraph theme [Theme]
+    roles[theme-roles.css]
+    primitives[theme-primitives.css]
+    tspace[theme-spacing.css]
+    ttypo[theme-typography.css]
+    trad[theme-radius.css]
+    tstroke[theme-stroke.css]
+    ta11y[theme-accessibility.css]
+  end
+  subgraph downstream [Downstream]
+    semantic[semantic/*.css]
+    utilities[utilities/*.css]
+    comp[components/*.css]
+  end
+  base --> theme
+  roles --> primitives
+  spacing --> tspace
+  typo --> ttypo
+  borders --> trad
+  borders --> tstroke
+  theme --> semantic
+  semantic --> comp
+  theme --> utilities
+  utilities --> comp
+```
+
+1. **Base** — Numeric library: palettes, `--space-*`, `--border-radius-*`, `--border-width-*`, `--font-size-*` / `--line-height-*`, global surface/text tokens, reset.
+2. **Theme** — Named roles that alias base (and each other). This is the main “master” surface for product theming.
+3. **Semantic** — Per-component tokens (`--input-height`, `--button-solid-bg`, …) that should reference `--theme-*` rather than raw palette steps or ad hoc values.
+4. **Utilities** — Optional classes (e.g. [`text-styles.css`](../utilities/text-styles.css)) that apply full presets for docs or prototypes.
+5. **Components** — Class rules map to semantic tokens.
+
+### Import order
+
+Order in [`src/styles/index.css`](../index.css) (abbreviated):
+
+1. Material Symbols font  
+2. **Base:** `colors` → `global` → `spacing` → `borders` → `shadows` → `breakpoints` → `z-index` → `transitions` → `typography` → `reset` → `reset-accessibility`  
+3. **Theme:** `theme-roles` → `theme-primitives` → `theme-spacing` → `theme-typography` → `theme-radius` → `theme-stroke` → `theme-accessibility`  
+4. **Semantic** — all `semantic/*.css` component token files  
+5. **Utilities** — `color-styles`, `text-styles`, `layout-styles`  
+6. **Components** — `components/*.css`
+
+---
+
+## Color roles — [`theme-roles.css`](theme-roles.css)
+
+| Token family | Typical use |
+|--------------|-------------|
+| `--theme-neutral-*` | Chrome, borders, text hierarchy (maps to stone by default). |
+| `--theme-primary-*` | Accent, solid buttons, focus-adjacent UI (mirage by default). |
+| `--theme-secondary-*` | Secondary accent scale (ember); wire in semantics when needed. |
+| `--theme-surface-canvas`, `--theme-text-on-primary`, `--theme-overlay-base` | Glare/midnight-level surfaces. |
+| `--theme-status-*` | Success, error, warning, info (+ light/dark variants). |
+
+**Swap primary brand:** e.g. `--theme-primary-600: var(--color-dune-500);` — keep `var(--color-*)` so dark mode palette overrides in `colors.css` still apply.
+
+---
+
+## Spacing / density — [`theme-spacing.css`](theme-spacing.css)
+
+Aliases to the base `--space-*` scale. Changing these retunes default control size and padding together (input/button already use them).
+
+| Token | Role |
+|-------|------|
+| `--theme-control-height-xs` … `--theme-control-height-lg` | Default heights for size tiers. |
+| `--theme-control-padding-block*` / `*-inline*` | Vertical and horizontal padding inside controls. |
+| `--theme-gap-control*` | Internal gap (e.g. icon + label). |
+| `--theme-gap-stack-sm/md/lg` | Stacked layout spacing between blocks. |
+| `--theme-inset-popup` | Popup inner inset (extend usage as needed). |
+
+---
+
+## Typography — [`theme-typography.css`](theme-typography.css)
+
+Full presets are expressed as **longhand** axes (`-font-family`, `-font-size`, `-font-weight`, `-line-height`, `-letter-spacing`) plus, where useful, a **`font` shorthand** (`--theme-*-font`) that matches the longhand. **`letter-spacing` is always separate** — it is not part of the CSS `font` shorthand.
+
+### Tier vocabulary
+
+| Tier | Scale | Token prefix | Notes |
+|------|--------|----------------|-------|
+| **minimize** | xs | `--theme-font-minimize-*` | Default, subtitle, link; **subtitle-label** = semibold + wide tracking + uppercase (group labels). |
+| **condense** | sm | `--theme-font-condense-*` | Same shape; **subtitle-label** for capped group headings. |
+| **base** | md | `--theme-font-base-*` | Default copy, **base-subtitle**, **base-link**. |
+| **magnify** | lg body | `--theme-font-magnify-*` | Large inputs / lead copy. |
+| **maximize** | display | `--theme-maximize-xs` … `--theme-maximize-4xl` | `--font-family-display`; stepped sizes for headlines and dialog titles. |
+
+### Roles on top of tiers
+
+| Token | Role |
+|-------|------|
+| `--theme-font-base-label-*` | Form and chrome labels (sm + medium). `--theme-font-base-label-active-font-weight` for e.g. selected tabs. |
+| `--theme-font-base-trigger-*` | Primary interactive control typography (md + medium, tall line-height). |
+| `--theme-font-base-switch-*` / `--theme-font-condense-switch-*` / `--theme-font-magnify-switch-*` | Switch track / label sizing where the tier alone is not enough. |
+| `--theme-font-code-*` | Monospace blocks. |
+
+Use **semantic** tokens (`src/styles/semantic/*.css`) to point at these. It is common to set **longhand** in semantics when you mix a theme tier with a **local size** (e.g. `9px` in a switch track) or override a single axis — utilities can use `font` + `letter-spacing` for a full preset in one place.
+
+**Utility classes** for quick application live in [`src/styles/utilities/text-styles.css`](../utilities/text-styles.css) — e.g. `.text-style-maximize-*`, `.text-style-base` / `.text-style-base-subtitle` / `.text-style-base-link`, `.text-style-condense*` (including `.text-style-condense-subtitle-label`), `.text-style-minimize*` (including `.text-style-minimize-subtitle-label`).
+
+---
+
+## Radius (shape) — [`theme-radius.css`](theme-radius.css)
+
+| Token | Default mapping | Typical use |
+|-------|-----------------|-------------|
+| `--theme-radius-minimal` | none | Tags, square UI. |
+| `--theme-radius-box` | base | Checkbox corners. |
+| `--theme-radius-control` | sm | Inputs, triggers. |
+| `--theme-radius-item` | sm | Menu rows, small controls. |
+| `--theme-radius-chrome` | md | Navigation chrome, toggles, chips. |
+| `--theme-radius-surface` | lg | Cards, dialogs, popovers. |
+| `--theme-radius-modal` | xl | Modal shell. |
+| `--theme-radius-pill` | full | Pill buttons, switches, sliders. |
+
+---
+
+## Stroke — [`theme-stroke.css`](theme-stroke.css)
+
+| Token | Maps to |
+|-------|---------|
+| `--theme-stroke-default` | `--border-width-thin` (hairlines, popup borders). |
+| `--theme-stroke-emphasis` | `--border-width-medium` |
+| `--theme-stroke-strong` | `--border-width-thick` |
+
+---
+
+## Accessibility — [`theme-accessibility.css`](theme-accessibility.css)
+
+| Token | Role |
+|-------|------|
+| `--theme-a11y-focus-outline-width` | Keyboard focus outline thickness. |
+| `--theme-a11y-focus-outline-offset` | Outline offset. |
+| `--theme-a11y-focus-ring-radius` | Radius on generic `:focus-visible`. |
+| `--theme-a11y-link-focus-*` | Link-specific offset/radius. |
+| `--theme-a11y-min-touch-target` | Minimum tap target (coarse pointer). |
+| `--focus-ring` | Outline color (defaults to `--theme-primary-600`). |
+| `--focus-ring-width` | Same as outline width (compatibility). |
+
+---
+
+## Primitives — [`theme-primitives.css`](theme-primitives.css)
+
+Shared **box-shadow** focus recipes built from color roles (e.g. `--theme-focus-shadow-3px-primary`).
+
+---
+
+## Future: visual theme UI + export
+
+A config or JSON schema can describe overrides for **master** `--theme-*` keys only, for example:
+
+```json
+{
+  "theme-primary-600": { "palette": "dune", "step": 500 },
+  "theme-control-height-md": "space-12",
+  "theme-font-base-font-size": "font-size-lg",
+  "theme-maximize-xl-font-size": "font-size-2xl",
+  "theme-radius-surface": "border-radius-md",
+  "theme-stroke-default": "border-width-thin"
+}
+```
+
+A small codegen step would emit the same `--theme-*` custom properties; the runtime contract for consumers stays **CSS custom properties** on `:root` (or a scoped wrapper class).

package/dist/styles/theme/theme-accessibility.css

@@ -0,0 +1,13 @@
+/* Accessibility token defaults (used by accessibility-theme.css and components). */
+
+:root {
+  --theme-a11y-focus-outline-width: 2px;
+  --theme-a11y-focus-outline-offset: 2px;
+  --theme-a11y-focus-ring-radius: var(--border-radius-sm);
+  --theme-a11y-link-focus-outline-offset: 0.25em;
+  --theme-a11y-link-focus-ring-radius: 0.125em;
+  --theme-a11y-min-touch-target: 44px;
+
+  --focus-ring: var(--theme-primary-600);
+  --focus-ring-width: var(--theme-a11y-focus-outline-width);
+}

package/dist/styles/theme/theme-primitives.css

@@ -0,0 +1,7 @@
+/* Shared non-color patterns built from theme roles (optional convenience layer). */
+
+:root {
+  --theme-focus-shadow-3px-primary: 0 0 0 3px var(--theme-primary-100);
+  --theme-focus-shadow-3px-primary-soft: 0 0 0 3px var(--theme-primary-200);
+  --theme-focus-shadow-3px-error: 0 0 0 3px var(--theme-status-error);
+}

package/dist/styles/theme/theme-radius.css

@@ -0,0 +1,12 @@
+/* Theme radius roles — map semantic “shape” to the base radius scale. */
+
+:root {
+  --theme-radius-minimal: var(--border-radius-none);
+  --theme-radius-box: var(--border-radius-base);
+  --theme-radius-control: var(--border-radius-sm);
+  --theme-radius-item: var(--border-radius-sm);
+  --theme-radius-chrome: var(--border-radius-md);
+  --theme-radius-surface: var(--border-radius-lg);
+  --theme-radius-modal: var(--border-radius-xl);
+  --theme-radius-pill: var(--border-radius-full);
+}

package/dist/styles/theme/theme-roles.css

@@ -0,0 +1,66 @@
+/* Theme roles — map brand palettes to semantic steps. Edit here to swap primary/neutral/secondary. */
+
+:root {
+  /* Surfaces & contrast (from base glare / midnight) */
+  --theme-surface-canvas: var(--color-glare);
+  --theme-text-on-primary: var(--color-glare);
+  --theme-overlay-base: var(--color-midnight);
+
+  /* Neutral (Mojave: stone) */
+  --theme-neutral-50: var(--color-stone-50);
+  --theme-neutral-100: var(--color-stone-100);
+  --theme-neutral-200: var(--color-stone-200);
+  --theme-neutral-300: var(--color-stone-300);
+  --theme-neutral-400: var(--color-stone-400);
+  --theme-neutral-500: var(--color-stone-500);
+  --theme-neutral-600: var(--color-stone-600);
+  --theme-neutral-700: var(--color-stone-700);
+  --theme-neutral-800: var(--color-stone-800);
+  --theme-neutral-900: var(--color-stone-900);
+  --theme-neutral-1000: var(--color-stone-1000);
+  --theme-neutral-1100: var(--color-stone-1100);
+  --theme-neutral-1200: var(--color-stone-1200);
+
+  /* Primary accent (Mojave: mirage) */
+  --theme-primary-50: var(--color-mirage-50);
+  --theme-primary-100: var(--color-mirage-100);
+  --theme-primary-200: var(--color-mirage-200);
+  --theme-primary-300: var(--color-mirage-300);
+  --theme-primary-400: var(--color-mirage-400);
+  --theme-primary-500: var(--color-mirage-500);
+  --theme-primary-600: var(--color-mirage-600);
+  --theme-primary-700: var(--color-mirage-700);
+  --theme-primary-800: var(--color-mirage-800);
+  --theme-primary-900: var(--color-mirage-900);
+  --theme-primary-1000: var(--color-mirage-1000);
+
+  /*
+   * Secondary accent (Mojave: ember). No ember-50 in palette; scale starts at 100.
+   * Reserved for future semantic tokens — default theme matches ember steps 100–1000.
+   */
+  --theme-secondary-50: var(--color-ember-100);
+  --theme-secondary-100: var(--color-ember-100);
+  --theme-secondary-200: var(--color-ember-200);
+  --theme-secondary-300: var(--color-ember-300);
+  --theme-secondary-400: var(--color-ember-400);
+  --theme-secondary-500: var(--color-ember-500);
+  --theme-secondary-600: var(--color-ember-600);
+  --theme-secondary-700: var(--color-ember-700);
+  --theme-secondary-800: var(--color-ember-800);
+  --theme-secondary-900: var(--color-ember-900);
+  --theme-secondary-1000: var(--color-ember-1000);
+
+  /* Status — aliases to global semantic colors (defined in base/global.css) */
+  --theme-status-success: var(--color-success);
+  --theme-status-success-light: var(--color-success-light);
+  --theme-status-success-dark: var(--color-success-dark);
+  --theme-status-error: var(--color-error);
+  --theme-status-error-light: var(--color-error-light);
+  --theme-status-error-dark: var(--color-error-dark);
+  --theme-status-warning: var(--color-warning);
+  --theme-status-warning-light: var(--color-warning-light);
+  --theme-status-warning-dark: var(--color-warning-dark);
+  --theme-status-info: var(--color-info);
+  --theme-status-info-light: var(--color-info-light);
+  --theme-status-info-dark: var(--color-info-dark);
+}