@deepfuture/dui-theme-default 0.0.1 → 0.0.4

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;
   }
 `;

package/components/checkbox.js

@@ -12,29 +12,30 @@ export const checkboxStyles = css `
       (var(--line-height-normal) * 1em - var(--checkbox-size)) / 2
     );
     border-radius: var(--radius-sm);
+    transition-property: background, border-color, box-shadow, filter, transform;
     transition-duration: var(--duration-fast);
   }
 
   [part="root"][data-unchecked] {
-    border: var(--border-width-thin) solid var(--input);
+    border: var(--border-width-thin) solid var(--border);
     background: transparent;
   }
 
   [part="root"][data-checked],
   [part="root"][data-indeterminate] {
-    background: var(--primary);
-    border: var(--border-width-thin) solid var(--primary);
+    background: var(--accent);
+    border: var(--border-width-thin) solid var(--accent);
   }
 
   [part="root"][data-disabled] {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 
   [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"][data-invalid] {
@@ -43,11 +44,11 @@ export const checkboxStyles = css `
   }
 
   [part="indicator"] {
-    color: var(--primary-foreground);
+    color: oklch(from var(--accent) 0.98 0.01 h);
   }
 
   .Icon {
-    width: 12px;
-    height: 12px;
+    width: var(--space-3);
+    height: var(--space-3);
   }
 `;

package/components/collapsible.js

@@ -1,4 +1,5 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const collapsibleStyles = css `
   /* ── Trigger ── */
 
@@ -6,32 +7,32 @@ export const collapsibleStyles = css `
     gap: var(--space-4);
     padding-block: var(--space-2);
     padding-inline: var(--space-4);
-    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 ── */
@@ -39,6 +40,7 @@ export const collapsibleStyles = 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);
   }
@@ -62,10 +64,9 @@ export const collapsibleStyles = css `
   [part="content"] {
     padding: var(--space-1) var(--space-4) 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/combobox.js

@@ -1,40 +1,40 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const comboboxStyles = css `
   /* ---- Chips (multi-select container) ---- */
 
   .Chips {
     gap: var(--space-1);
-    border: var(--border-width-thin) solid var(--input);
+    border: var(--border-width-thin) solid var(--border);
     border-radius: var(--radius-md);
     padding: var(--space-1) var(--space-8) var(--space-1) var(--space-1_5);
     min-height: var(--component-height-md);
-    background: var(--input-bg);
+    background: var(--sunken);
     transition-property: border-color, box-shadow;
     transition-duration: var(--duration-fast);
   }
 
   .Chips:focus-within:has(: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);
   }
 
   .Chips[data-disabled] {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 
   /* ---- Input ---- */
 
   .Input {
     height: var(--component-height-md);
-    color: var(--foreground);
+    color: var(--text-1);
     font-family: var(--font-sans);
-    font-size: var(--font-size-sm);
-    line-height: var(--line-height-normal);
+    ${type("sm")}
   }
 
   .Input::placeholder {
-    color: var(--muted-foreground);
+    color: var(--text-3);
   }
 
   /* Single-select input wrapper */
@@ -42,27 +42,27 @@ export const comboboxStyles = css `
     width: 100%;
     min-height: var(--component-height-md);
     padding: var(--space-2) var(--space-8) var(--space-2) var(--space-2);
-    border: var(--border-width-thin) solid var(--input);
+    border: var(--border-width-thin) solid var(--border);
     border-radius: var(--radius-md);
     transition-property: border-color, box-shadow;
     transition-duration: var(--duration-fast);
-    background: var(--input-bg);
+    background: var(--sunken);
   }
 
   .InputWrapper .Input: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);
   }
 
   .InputWrapper .Input[data-disabled] {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 
   .Arrow {
     --icon-size: var(--space-4);
     right: var(--space-3);
-    color: var(--foreground);
+    color: var(--text-1);
   }
 
   /* Multi-select input (inside chips) */
@@ -75,10 +75,10 @@ export const comboboxStyles = css `
 
   .Chip {
     gap: var(--space-1);
-    background: var(--secondary);
-    color: var(--secondary-foreground);
+    background: oklch(from var(--foreground) l c h / 0.05);
+    color: var(--text-1);
     border-radius: var(--radius-sm);
-    font-size: var(--font-size-xs);
+    ${type("xs")}
     padding: var(--space-0_5) var(--space-0_5) var(--space-0_5) var(--space-2);
   }
 
@@ -92,8 +92,54 @@ export const comboboxStyles = css `
   .ChipRemove:hover {
     background: color-mix(
       in oklch,
-      var(--secondary-foreground) 15%,
+      var(--text-1) 15%,
       transparent
     );
   }
+
+  /* ---- Popup (rendered in portal shadow root) ---- */
+
+  .Popup {
+    background: var(--surface-3);
+    border: var(--border-width-thin) solid var(--border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-out-3);
+  }
+
+  .Popup[data-starting-style],
+  .Popup[data-ending-style] {
+    transform: translateY(calc(var(--space-1) * -1));
+  }
+
+  .List {
+    padding: var(--space-1);
+  }
+
+  .Item {
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
+    border-radius: var(--radius-sm);
+    ${type("sm")}
+    font-family: var(--font-sans);
+    color: var(--text-1);
+  }
+
+  .Item:hover,
+  .Item[data-highlighted] {
+    background: oklch(from var(--foreground) l c h / 0.05);
+    color: var(--text-1);
+  }
+
+  .ItemIndicator {
+    --icon-size: var(--space-3_5);
+  }
+
+  .Empty {
+    padding: var(--space-3);
+    ${type("sm")}
+    color: var(--text-2);
+    text-align: center;
+  }
 `;

package/components/command-empty.js

@@ -1,8 +1,9 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const commandEmptyStyles = css `
   .Empty {
     padding: var(--space-6);
-    font-size: var(--font-size-sm);
-    color: var(--muted-foreground);
+    ${type("sm")}
+    color: var(--text-2);
   }
 `;

package/components/command-group.js

@@ -1,4 +1,5 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const commandGroupStyles = css `
   .Group {
     padding: var(--space-1_5);
@@ -6,8 +7,8 @@ export const commandGroupStyles = css `
 
   .Heading {
     padding: var(--space-1_5) var(--space-2);
-    font-size: var(--font-size-xs);
+    ${type("xs")}
     font-weight: var(--font-weight-medium);
-    color: var(--muted-foreground);
+    color: var(--text-2);
   }
 `;

package/components/command-input.js

@@ -1,4 +1,5 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const commandInputStyles = css `
   .InputWrapper {
     gap: var(--space-2);
@@ -7,7 +8,7 @@ export const commandInputStyles = css `
   }
 
   .SearchIcon {
-    color: var(--muted-foreground);
+    color: var(--text-2);
     width: var(--space-4);
     height: var(--space-4);
   }
@@ -15,10 +16,10 @@ export const commandInputStyles = css `
   .Input {
     height: var(--component-height-lg);
     border-radius: var(--radius-md);
-    font-size: var(--font-size-sm);
+    ${type("sm")}
   }
 
   .Input::placeholder {
-    color: var(--muted-foreground);
+    color: var(--text-3);
   }
 `;

package/components/command-item.js

@@ -1,24 +1,25 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const commandItemStyles = css `
   .Item {
     gap: var(--space-2);
     border-radius: var(--radius-sm);
     padding: var(--space-1_5) var(--space-2);
-    font-size: var(--font-size-sm);
+    ${type("sm")}
     font-weight: var(--font-weight-medium);
   }
 
   .Item[data-selected] {
-    background: var(--secondary);
-    color: var(--foreground);
+    background: oklch(from var(--foreground) l c h / 0.05);
+    color: var(--text-1);
   }
 
   .Item[aria-disabled="true"] {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 
   ::slotted(dui-icon) {
     --icon-size: var(--space-4);
-    color: var(--muted-foreground);
+    color: var(--text-2);
   }
 `;