@deepfuture/dui-theme-default 0.0.2 → 0.0.4

package/README.md

@@ -163,7 +163,14 @@ A visual editor for design tokens. Edit colors with OKLCH sliders, tweak spacing
 
 ### Inspector
 
-Toggle with **Ctrl+Shift+I** to inspect any DUI component at runtime — view properties, design tokens, style layers, slots, and CSS parts. Also exposes `window.__dui_inspect()` for programmatic access by LLM agents via Chrome DevTools.
+A runtime inspector and mutation API for DUI components. Two interfaces:
+
+- **Visual UI** (Ctrl+Shift+I) — hover-highlight components, inspect properties/tokens/styles, edit theme CSS and design tokens live
+- **Console API** — `window.__dui_inspect()`, `window.__dui_mutate.*`, `window.__dui_export()` for programmatic access by agents or scripts
+
+Both share a changelog, so agent and human edits are visible to each other. Changes can be exported as structured source file diffs.
+
+See **[Inspector docs](docs/inspector.md)** for the full API reference and usage guide.
 
 ## Documentation
 
@@ -172,6 +179,7 @@ Toggle with **Ctrl+Shift+I** to inspect any DUI component at runtime — view pr
 - [Creating Components](docs/creating-components.md) — guide for adding new components
 - [Theming](docs/theming.md) — theme system, design tokens, writing component styles
 - [Consuming](docs/consuming.md) — integrating DUI into an app
+- [Inspector](docs/inspector.md) — runtime inspection, mutation API, and visual editor
 - [Accessibility](docs/accessibility.md) — accessibility patterns and guidelines
 
 ## Contributing

package/components/accordion-item.js

@@ -1,4 +1,5 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const accordionItemStyles = css `
   /* ── Item ── */
 
@@ -15,32 +16,32 @@ export const accordionItemStyles = css `
     gap: var(--space-4);
     padding-block: var(--space-2);
     padding-inline: 0;
-    color: var(--foreground);
+    color: var(--text-1);
     font-family: var(--font-sans);
     font-weight: var(--font-weight-semibold);
-    font-size: var(--font-size-sm);
+    ${type("sm")}
     height: var(--component-height-md);
-    line-height: var(--line-height-normal);
     border-radius: var(--radius-sm);
+    transition-property: background, box-shadow, filter, transform;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-out-3);
   }
 
   @media (hover: hover) {
     [part="trigger"]:hover {
-      background: color-mix(in oklch, var(--muted) 50%, transparent);
+      background: oklch(from var(--foreground) l c h / 0.05);
     }
   }
 
   [part="trigger"]:focus-visible {
     box-shadow:
-      0 0 0 var(--space-0_5) var(--background),
-      0 0 0 var(--space-1) var(--ring);
+      0 0 0 var(--focus-ring-offset) var(--background),
+      0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
     z-index: 1;
   }
 
   [part="trigger"][data-disabled] {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 
   /* ── Indicator ── */
@@ -48,6 +49,7 @@ export const accordionItemStyles = css `
   [part="indicator"] {
     width: var(--space-4);
     height: var(--space-4);
+    transition-property: transform;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-out-3);
   }
@@ -71,10 +73,9 @@ export const accordionItemStyles = css `
   [part="content"] {
     padding: 0 0 var(--space-3);
     font-family: var(--font-sans);
-    font-size: var(--font-size-sm);
+    ${type("sm")}
     font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-normal);
-    color: color-mix(in oklch, var(--foreground) 80%, transparent);
+    color: var(--text-2);
   }
 
   /* ── Reduced motion ── */

package/components/alert-dialog-popup.js

@@ -1,19 +1,13 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const alertDialogPopupStyles = css `
   /* ── Backdrop ── */
 
   [part="backdrop"] {
-    background: black;
-    opacity: 0.2;
+    background: var(--scrim);
     transition: opacity var(--duration-fast) var(--ease-out-3);
   }
 
-  @container style(--theme: dark) {
-    [part="backdrop"] {
-      opacity: 0.7;
-    }
-  }
-
   [part="backdrop"][data-starting-style],
   [part="backdrop"][data-ending-style] {
     opacity: 0;
@@ -26,9 +20,10 @@ export const alertDialogPopupStyles = css `
     padding: var(--space-6);
     border-radius: var(--radius-lg);
     border: var(--border-width-thin) solid var(--border);
-    background: var(--card);
-    color: var(--card-foreground);
+    background: var(--surface-2);
+    color: var(--text-1);
     font-family: var(--font-sans);
+    box-shadow: var(--shadow-lg);
     transition-duration: var(--duration-fast);
   }
 
@@ -44,11 +39,9 @@ export const alertDialogPopupStyles = css `
     margin-top: calc(-1 * var(--space-1));
     margin-bottom: var(--space-1);
     font-family: var(--font-sans);
-    font-size: var(--font-size-lg);
-    letter-spacing: var(--letter-spacing-tighter);
-    line-height: var(--line-height-tight);
+    ${type("lg", { letterSpacing: "var(--letter-spacing-tighter)", lineHeight: "var(--line-height-tight)" })}
     font-weight: var(--font-weight-medium);
-    color: var(--foreground);
+    color: var(--text-1);
   }
 
   /* ── Description ── */
@@ -56,9 +49,8 @@ export const alertDialogPopupStyles = css `
   [part="description"] {
     margin: 0 0 var(--space-6);
     font-family: var(--font-sans);
-    font-size: var(--font-size-md);
-    line-height: var(--line-height-normal);
-    color: var(--muted-foreground);
+    ${type("md")}
+    color: var(--text-2);
   }
 
   /* ── Reduced motion ── */

package/components/avatar.js

@@ -1,8 +1,8 @@
 import { css } from "lit";
 export const avatarStyles = css `
   :host {
-    --avatar-bg: var(--muted);
-    --avatar-fg: var(--muted-foreground);
+    --avatar-bg: var(--surface-1);
+    --avatar-fg: var(--text-2);
   }
 
   [part="root"] {

package/components/badge.js

@@ -1,43 +1,71 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const badgeStyles = css `
-  :host {
-    --badge-bg: var(--primary);
-    --badge-fg: var(--primary-foreground);
-    --badge-border: transparent;
-    --badge-icon-size: var(--space-3);
-    --icon-size: var(--badge-icon-size);
-    --icon-color: var(--badge-fg);
+  /* =================================================================
+   * Two-axis variant system:
+   *   variant    → semantic intent (neutral, accent, danger)
+   *   appearance → visual treatment (filled, outline, ghost)
+   * ================================================================= */
+
+  /* ---------------------------------------------------------------
+   * Layer 1 — Intent (sets --_intent-* private tokens)
+   * --------------------------------------------------------------- */
+
+  :host,
+  :host([variant=""]),
+  :host([variant="neutral"]) {
+    --_intent-base: var(--foreground);
+    --_intent-base-fg: var(--background);
+    --_intent-subtle: oklch(from var(--foreground) l c h / 0.08);
+    --_intent-subtle-fg: var(--text-1);
   }
 
-  :host([variant="secondary"]) {
-    --badge-bg: var(--secondary);
-    --badge-fg: var(--secondary-foreground);
+  :host([variant="primary"]) {
+    --_intent-base: var(--accent);
+    --_intent-base-fg: oklch(from var(--accent) 0.98 0.01 h);
+    --_intent-subtle: var(--accent-subtle);
+    --_intent-subtle-fg: var(--accent-text);
   }
 
-  :host([variant="destructive"]) {
-    --badge-bg: var(--destructive);
-    --badge-fg: var(--destructive-foreground);
+  :host([variant="danger"]) {
+    --_intent-base: var(--destructive);
+    --_intent-base-fg: oklch(from var(--destructive) 0.98 0.01 h);
+    --_intent-subtle: var(--destructive-subtle);
+    --_intent-subtle-fg: var(--destructive-text);
   }
 
-  :host([variant="outline"]) {
-    --badge-bg: transparent;
-    --badge-fg: var(--primary);
-    --badge-border: color-mix(in oklch, var(--primary) 25%, transparent);
+  /* ---------------------------------------------------------------
+   * Layer 2 — Appearance (maps --_intent-* to --badge-*)
+   * --------------------------------------------------------------- */
+
+  :host,
+  :host([appearance=""]),
+  :host([appearance="filled"]) {
+    --badge-bg: var(--_intent-base);
+    --badge-fg: var(--_intent-base-fg);
+    --badge-border: transparent;
   }
 
-  :host([variant="success"]) {
-    --badge-bg: var(--success);
-    --badge-fg: var(--success-foreground);
+  :host([appearance="outline"]) {
+    --badge-bg: transparent;
+    --badge-fg: var(--_intent-subtle-fg);
+    --badge-border: var(--border);
   }
 
-  :host([variant="warning"]) {
-    --badge-bg: var(--warning);
-    --badge-fg: var(--warning-foreground);
+  :host([appearance="ghost"]) {
+    --badge-bg: var(--_intent-subtle);
+    --badge-fg: var(--_intent-subtle-fg);
+    --badge-border: transparent;
   }
 
-  :host([variant="info"]) {
-    --badge-bg: var(--info);
-    --badge-fg: var(--info-foreground);
+  /* ---------------------------------------------------------------
+   * Sizing & base appearance
+   * --------------------------------------------------------------- */
+
+  :host {
+    --badge-icon-size: var(--space-3);
+    --icon-size: var(--badge-icon-size);
+    --icon-color: var(--badge-fg);
   }
 
   [part="root"] {
@@ -48,10 +76,8 @@ export const badgeStyles = css `
     background: var(--badge-bg);
     color: var(--badge-fg);
     font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    letter-spacing: var(--letter-spacing-normal);
+    ${type("xs", { letterSpacing: "var(--letter-spacing-normal)", lineHeight: "var(--line-height-snug)" })}
     font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-snug);
     white-space: nowrap;
     border: var(--border-width-thin) solid var(--badge-border);
   }

package/components/breadcrumb-ellipsis.js

@@ -1,7 +1,7 @@
 import { css } from "lit";
 export const breadcrumbEllipsisStyles = css `
   [part="root"] {
-    color: var(--muted-foreground);
+    color: var(--text-2);
     width: var(--space-4);
   }
 `;

package/components/breadcrumb-link.js

@@ -1,7 +1,7 @@
 import { css } from "lit";
 export const breadcrumbLinkStyles = css `
   [part="root"] {
-    color: var(--muted-foreground);
+    color: var(--text-2);
   }
 
   [part="root"] ::slotted(a) {
@@ -11,6 +11,6 @@ export const breadcrumbLinkStyles = css `
   }
 
   [part="root"] ::slotted(a:hover) {
-    color: var(--foreground);
+    color: var(--text-1);
   }
 `;

package/components/breadcrumb-page.js

@@ -1,7 +1,7 @@
 import { css } from "lit";
 export const breadcrumbPageStyles = css `
   [part="root"] {
-    color: var(--foreground);
+    color: var(--text-1);
     font-weight: var(--font-weight-regular);
   }
 `;

package/components/breadcrumb-separator.js

@@ -2,6 +2,6 @@ import { css } from "lit";
 export const breadcrumbSeparatorStyles = css `
   [part="root"] {
     --icon-size: var(--space-3_5);
-    color: color-mix(in oklch, var(--muted-foreground) 50%, transparent);
+    color: color-mix(in oklch, var(--text-2) 50%, transparent);
   }
 `;

package/components/breadcrumb.js

@@ -1,9 +1,10 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const breadcrumbStyles = css `
   [part="root"] {
     gap: var(--space-2);
-    font-size: var(--font-size-sm);
+    ${type("sm")}
     font-family: var(--font-sans);
-    color: var(--muted-foreground);
+    color: var(--text-2);
   }
 `;

package/components/button.js

@@ -1,65 +1,81 @@
 import { css } from "lit";
 export const buttonStyles = css `
+  /* =================================================================
+   * Two-axis variant system:
+   *   variant   → semantic intent (neutral, primary, danger)
+   *   appearance → visual treatment (filled, outline, ghost, link)
+   *
+   * Uses the --_interact alpha overlay pattern for hover/active states.
+   * ================================================================= */
+
   /* ---------------------------------------------------------------
-   * Variables: only what variants and sizes actually toggle.
-   * Everything else — filters, transforms, clip-paths, shadows,
-   * text-decoration — consumers style via ::part(root).
+   * Layer 1 — Intent (sets --_intent-* private tokens)
    * --------------------------------------------------------------- */
-  :host {
-    --button-bg: var(--primary);
-    --button-fg: var(--primary-foreground);
-    --button-border: transparent;
-    --button-hover-bg: color-mix(in oklch, var(--button-bg) 95%, var(--foreground));
-    --button-active-bg: color-mix(in oklch, var(--button-bg) 90%, var(--foreground));
-    --button-height: var(--component-height-md);
-    --button-width: auto;
-    --button-padding-y: var(--space-2);
-    --button-padding-x: var(--space-2_5);
-    --button-gap: var(--space-1_5);
-    --button-radius: var(--radius-md);
-    --button-font-size: var(--font-size-sm);
-    --button-icon-size: var(--space-4_5);
+
+  :host,
+  :host([variant=""]),
+  :host([variant="neutral"]) {
+    --_intent-base: var(--foreground);
+    --_intent-base-fg: var(--background);
+    --_intent-subtle-fg: var(--text-1);
   }
 
-  /* --- Variants (swap colors) --- */
+  :host([variant="primary"]) {
+    --_intent-base: var(--accent);
+    --_intent-base-fg: oklch(from var(--accent) 0.98 0.01 h);
+    --_intent-subtle-fg: var(--accent-text);
+  }
 
-  :host([variant="secondary"]) {
-    --button-bg: var(--secondary);
-    --button-fg: var(--secondary-foreground);
-    --button-border: transparent;
+  :host([variant="danger"]) {
+    --_intent-base: var(--destructive);
+    --_intent-base-fg: oklch(from var(--destructive) 0.98 0.01 h);
+    --_intent-subtle-fg: var(--destructive-text);
   }
 
-  :host([variant="destructive"]) {
-    --button-bg: var(--destructive);
-    --button-fg: var(--destructive-foreground);
+  /* ---------------------------------------------------------------
+   * Layer 2 — Appearance (maps --_intent-* to --button-*)
+   * --------------------------------------------------------------- */
+
+  :host,
+  :host([appearance=""]),
+  :host([appearance="filled"]) {
+    --button-bg: var(--_intent-base);
+    --button-fg: var(--_intent-base-fg);
     --button-border: transparent;
   }
 
-  :host([variant="outline"]) {
-    --button-fg: var(--foreground);
-    --button-border: var(--input);
-    --button-bg: var(--input-bg);
-    --button-hover-bg: var(--muted);
-    --button-active-bg: var(--muted);
+  :host([appearance="outline"]) {
+    --button-bg: transparent;
+    --button-fg: var(--_intent-subtle-fg);
+    --button-border: var(--border);
   }
 
-  :host([variant="ghost"]) {
+  :host([appearance="ghost"]) {
     --button-bg: transparent;
-    --button-fg: var(--foreground);
+    --button-fg: var(--_intent-subtle-fg);
     --button-border: transparent;
-    --button-hover-bg: var(--muted);
-    --button-active-bg: var(--muted);
   }
 
-  :host([variant="link"]) {
+  :host([appearance="link"]) {
     --button-bg: transparent;
-    --button-fg: var(--foreground);
+    --button-fg: var(--_intent-subtle-fg);
     --button-border: transparent;
-    --button-hover-bg: transparent;
-    --button-active-bg: transparent;
   }
 
-  /* --- Sizes (swap dimensions) --- */
+  /* ---------------------------------------------------------------
+   * Sizes (swap dimensions)
+   * --------------------------------------------------------------- */
+
+  :host {
+    --button-height: var(--component-height-md);
+    --button-width: auto;
+    --button-padding-y: var(--space-2);
+    --button-padding-x: var(--space-2_5);
+    --button-gap: var(--space-1_5);
+    --button-radius: var(--radius-md);
+    --button-font-size: var(--font-size-sm);
+    --button-icon-size: var(--space-4_5);
+  }
 
   :host([size="sm"]) {
     --button-height: var(--component-height-sm);
@@ -79,7 +95,9 @@ export const buttonStyles = css `
     --button-icon-size: var(--space-4_5);
   }
 
-  /* --- Base appearance --- */
+  /* ---------------------------------------------------------------
+   * Base appearance
+   * --------------------------------------------------------------- */
 
   [part="root"] {
     --icon-size: var(--button-icon-size);
@@ -98,40 +116,59 @@ export const buttonStyles = css `
     letter-spacing: var(--letter-spacing-tight);
     line-height: var(--line-height-snug);
     white-space: nowrap;
+    transition-property: background, box-shadow, filter, transform, border-color;
     transition-duration: var(--duration-faster);
     transition-timing-function: var(--ease-out-3);
   }
 
-  /* --- Interactive states --- */
+  /* ---------------------------------------------------------------
+   * Interactive states — filled variant uses filter for hover/active
+   * --------------------------------------------------------------- */
+
+  /* Filled: darken on hover, more on active */
+  :host(:not([appearance="outline"]):not([appearance="ghost"]):not([appearance="link"]))
+    [part="root"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    filter: brightness(0.88);
+  }
+
+  :host(:not([appearance="outline"]):not([appearance="ghost"]):not([appearance="link"]))
+    [part="root"]:active:not(:disabled):not([aria-disabled="true"]) {
+    filter: brightness(0.80);
+  }
 
-  [part="root"]:hover:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--button-hover-bg);
+  /* Ghost / outline: alpha overlay on foreground */
+  :host([appearance="ghost"]) [part="root"]:hover:not(:disabled):not([aria-disabled="true"]),
+  :host([appearance="outline"]) [part="root"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    background: oklch(from var(--foreground) l c h / 0.05);
   }
 
-  [part="root"]:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--button-active-bg);
+  :host([appearance="ghost"]) [part="root"]:active:not(:disabled):not([aria-disabled="true"]),
+  :host([appearance="outline"]) [part="root"]:active:not(:disabled):not([aria-disabled="true"]) {
+    background: oklch(from var(--foreground) l c h / 0.10);
   }
 
   [part="root"]:focus-visible {
     outline: none;
     box-shadow:
-      0 0 0 var(--space-0_5) var(--background),
-      0 0 0 var(--space-1) var(--ring);
+      0 0 0 var(--focus-ring-offset) var(--background),
+      0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
   }
 
   [part="root"]:disabled,
   [part="root"][aria-disabled="true"] {
-    opacity: 0.2;
+    opacity: 0.4;
     cursor: not-allowed;
   }
 
-  :host([variant="link"])
+  /* Link appearance: underline on hover */
+  :host([appearance="link"])
     [part="root"]:hover:not(:disabled):not([aria-disabled="true"]) {
     text-decoration: underline;
     text-underline-offset: 4px;
   }
 
+  /* Open state (e.g. button is a popover trigger) */
   :host([data-open]) [part="root"]:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--button-hover-bg);
+    background: oklch(from var(--foreground) l c h / 0.05);
   }
 `;

package/components/calendar.js

@@ -1,9 +1,10 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const calendarStyles = css `
   [part="root"] {
     padding: var(--space-3);
     font-family: var(--font-sans);
-    font-size: var(--font-size-sm);
+    ${type("sm")}
   }
 
   [part="header"] {
@@ -11,9 +12,9 @@ export const calendarStyles = css `
   }
 
   [part="heading"] {
-    font-size: var(--font-size-sm);
+    ${type("sm")}
     font-weight: var(--font-weight-medium);
-    color: var(--foreground);
+    color: var(--text-1);
   }
 
   [part="prev"],
@@ -21,7 +22,7 @@ export const calendarStyles = css `
     width: var(--space-7);
     height: var(--space-7);
     border-radius: var(--radius-md);
-    color: var(--muted-foreground);
+    color: var(--text-2);
     font-size: var(--font-size-lg);
     transition-property: background, color;
     transition-duration: var(--duration-fast);
@@ -30,17 +31,17 @@ export const calendarStyles = css `
   @media (hover: hover) {
     [part="prev"]:hover,
     [part="next"]:hover {
-      background: var(--muted);
-      color: var(--foreground);
+      background: var(--surface-1);
+      color: var(--text-1);
     }
   }
 
   [part="weekday"] {
     width: var(--space-8);
     height: var(--space-8);
-    font-size: var(--font-size-xs);
-    font-weight: var(--font-weight-normal);
-    color: var(--muted-foreground);
+    ${type("xs")}
+    font-weight: var(--font-weight-regular);
+    color: var(--text-2);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -50,39 +51,41 @@ export const calendarStyles = css `
     width: var(--space-8);
     height: var(--space-8);
     border-radius: var(--radius-md);
-    font-size: var(--font-size-sm);
-    color: var(--foreground);
+    ${type("sm")}
+    color: var(--text-1);
     transition-property: background, color;
     transition-duration: var(--duration-fast);
   }
 
   @media (hover: hover) {
     [part="day"]:hover:not(:disabled):not([data-selected]) {
-      background: var(--muted);
+      background: var(--surface-1);
     }
   }
 
   [part="day"][data-today]:not([data-selected]) {
-    background: var(--accent);
-    color: var(--accent-foreground);
+    background: var(--accent-subtle);
+    color: var(--accent-text);
   }
 
   [part="day"][data-selected] {
-    background: var(--primary);
-    color: var(--primary-foreground);
+    background: var(--accent);
+    color: oklch(from var(--accent) 0.98 0.01 h);
   }
 
   [part="day"][data-outside-month] {
-    color: var(--muted-foreground);
-    opacity: 0.5;
+    color: var(--text-2);
+    opacity: 0.4;
   }
 
   [part="day"]:disabled {
-    opacity: 0.3;
+    opacity: 0.4;
   }
 
   [part="day"]:focus-visible {
-    outline: 2px solid var(--ring);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow:
+      0 0 0 var(--focus-ring-offset) var(--background),
+      0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
   }
 `;

package/components/checkbox-group.js

@@ -5,6 +5,6 @@ export const checkboxGroupStyles = css `
   }
 
   [part="root"][data-disabled] {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 `;