@deepfuture/dui-theme-default 0.0.1 → 0.0.4

package/README.md

@@ -0,0 +1,191 @@
+# DUI
+
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+[![npm](https://img.shields.io/npm/v/@deepfuture/dui-core.svg)](https://www.npmjs.com/package/@deepfuture/dui-core)
+
+Unstyled [Lit](https://lit.dev) web component library with composable themes.
+
+Components provide structure and behavior with zero visual opinions. Themes provide all aesthetics — colors, spacing, typography, borders. Swap the theme to completely change the look without touching component code.
+
+**[Live Docs & Demos →](https://deepfuturenow.github.io/dui/)**
+
+## Install
+
+**npm / pnpm / yarn:**
+
+```bash
+npm install @deepfuture/dui-core @deepfuture/dui-components @deepfuture/dui-theme-default
+```
+
+**Deno:**
+
+```typescript
+import { applyTheme } from "npm:@deepfuture/dui-core/apply-theme";
+import { defaultTheme } from "npm:@deepfuture/dui-theme-default";
+import { allComponents } from "npm:@deepfuture/dui-components/all";
+```
+
+**CDN (zero setup):**
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@deepfuture/dui-cdn/dui.min.js"></script>
+```
+
+## Quick Start
+
+```typescript
+import { applyTheme } from "@deepfuture/dui-core/apply-theme";
+import { defaultTheme } from "@deepfuture/dui-theme-default";
+import { DuiButton } from "@deepfuture/dui-components/button";
+import { DuiDialog, DuiDialogTrigger, DuiDialogPopup, DuiDialogClose } from "@deepfuture/dui-components/dialog";
+
+// Register components with a theme — this is the only setup needed
+applyTheme({
+  theme: defaultTheme,
+  components: [DuiButton, DuiDialog, DuiDialogTrigger, DuiDialogPopup, DuiDialogClose],
+});
+```
+
+```html
+<dui-dialog>
+  <dui-dialog-trigger>
+    <dui-button>Open Dialog</dui-button>
+  </dui-dialog-trigger>
+  <dui-dialog-popup>
+    <h2>Hello</h2>
+    <p>This is a dialog.</p>
+    <dui-dialog-close>
+      <dui-button variant="outline">Close</dui-button>
+    </dui-dialog-close>
+  </dui-dialog-popup>
+</dui-dialog>
+```
+
+Or register everything at once:
+
+```typescript
+import { applyTheme } from "@deepfuture/dui-core/apply-theme";
+import { defaultTheme } from "@deepfuture/dui-theme-default";
+import { allComponents } from "@deepfuture/dui-components/all";
+
+applyTheme({ theme: defaultTheme, components: allComponents });
+```
+
+## How It Works
+
+`applyTheme()` takes unstyled component classes and a theme, creates themed subclasses with composed styles, and registers them as custom elements.
+
+```
+Component structural CSS → Theme base styles → Theme component styles
+```
+
+No build step, no decorators, no code generation — just a function call. Components are standard web components that work in any framework or plain HTML.
+
+## Components
+
+43 component families, 85+ elements total.
+
+| Category | Components |
+|----------|-----------|
+| **Actions** | Button, Link, Toggle, Toggle Group, Toolbar |
+| **Forms** | Input, Textarea, Select, Combobox, Checkbox, Checkbox Group, Radio, Radio Group, Switch, Slider, Number Field, Dropzone |
+| **Data Display** | Badge, Avatar, Calendar, Data Table, Progress, Spinner, Separator, Trunc |
+| **Overlays** | Dialog, Alert Dialog, Popover, Tooltip, Menu, Menubar, Preview Card, Command |
+| **Disclosure** | Accordion, Collapsible, Tabs |
+| **Navigation** | Breadcrumb, Sidebar (with 12 sub-components) |
+| **Layout** | HStack, VStack, Center, Page Inset, Scroll Area, Portal |
+| **Utility** | Icon |
+
+## Styling
+
+DUI uses a two-layer styling approach:
+
+### CSS Variables — for the variant system
+
+Variables control values that variants, sizes, and states toggle:
+
+```css
+/* Override variant colors */
+dui-button {
+  --button-bg: linear-gradient(135deg, pink, purple);
+  --button-radius: var(--radius-full);
+}
+```
+
+### `::part(root)` — for everything else
+
+Every component exposes a `root` CSS part for full CSS expressiveness:
+
+```css
+/* Frosted glass effect */
+dui-dialog-popup::part(root) {
+  backdrop-filter: blur(12px);
+}
+
+/* Custom hover animation */
+dui-button::part(root):hover {
+  filter: brightness(1.25);
+  transform: translateY(-1px);
+}
+
+/* Glow shadow */
+dui-badge::part(root) {
+  box-shadow: 0 0 16px oklch(0.7 0.2 280 / 0.4);
+}
+```
+
+No need for the library to anticipate every CSS property — `::part()` gives you direct access.
+
+## Dark Mode
+
+DUI uses CSS custom properties for theming. Toggle dark mode by adding `class="dark"` to a parent element:
+
+```html
+<body class="dark">
+  <!-- All DUI components render in dark mode -->
+</body>
+```
+
+## Packages
+
+| Package | Purpose |
+|---------|---------|
+| [`@deepfuture/dui-core`](https://www.npmjs.com/package/@deepfuture/dui-core) | `applyTheme()`, event factory, base styles |
+| [`@deepfuture/dui-components`](https://www.npmjs.com/package/@deepfuture/dui-components) | Unstyled component classes |
+| [`@deepfuture/dui-theme-default`](https://www.npmjs.com/package/@deepfuture/dui-theme-default) | Design tokens + aesthetic styles |
+| [`@deepfuture/dui-cdn`](https://www.npmjs.com/package/@deepfuture/dui-cdn) | Pre-bundled CDN build (all deps inlined) |
+
+## Dev Tools
+
+### Theme Editor
+
+A visual editor for design tokens. Edit colors with OKLCH sliders, tweak spacing and typography, and export your customized `tokens.css`.
+
+### Inspector
+
+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
+
+- **[Live Docs](https://deepfuturenow.github.io/dui/)** — interactive demos for every component
+- [Architecture](docs/architecture.md) — mental model, package responsibilities, design decisions
+- [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
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for dev setup, code conventions, and PR guidelines.
+
+## License
+
+[MIT](LICENSE)

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