@deepfuture/dui-theme-default 0.0.2 → 0.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);
   }
 `;

package/components/command-list.js

@@ -1,7 +1,7 @@
 import { css } from "lit";
 export const commandListStyles = css `
   dui-scroll-area {
-    max-height: 300px;
+    max-height: calc(var(--space-5) * 15);
     height: auto;
   }
 

package/components/command-separator.js

@@ -1,7 +1,7 @@
 import { css } from "lit";
 export const commandSeparatorStyles = css `
   .Separator {
-    height: 1px;
+    height: var(--border-width-thin);
     margin-inline: calc(-1 * var(--space-1));
     background: var(--border);
   }

package/components/command-shortcut.js

@@ -1,7 +1,8 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const commandShortcutStyles = css `
   .Shortcut {
-    font-size: var(--font-size-xs);
-    color: var(--muted-foreground);
+    ${type("xs")}
+    color: var(--text-2);
   }
 `;

package/components/command.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 export const commandStyles = css `
   :host {
     border-radius: var(--radius-md);
-    background: var(--popover);
-    color: var(--popover-foreground);
+    background: var(--surface-3);
+    color: var(--text-1);
   }
 `;

package/components/data-table.js

@@ -1,4 +1,5 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const dataTableStyles = css `
   .DataTable {
     gap: var(--space-2);
@@ -7,28 +8,27 @@ export const dataTableStyles = css `
   .TableWindow {
     border: var(--border-width-thin) solid var(--border);
     border-radius: var(--radius-md);
-    scrollbar-color: var(--muted-foreground) transparent;
+    scrollbar-color: var(--text-2) transparent;
     scrollbar-width: thin;
   }
 
   table {
     font-family: var(--font-sans);
-    font-size: var(--font-size-sm);
-    line-height: var(--line-height-normal);
+    ${type("sm")}
   }
 
   th {
     height: var(--component-height-lg);
     padding: 0 var(--space-3);
     font-weight: var(--font-weight-medium);
-    font-size: var(--font-size-xs);
-    color: var(--muted-foreground);
-    background: var(--muted);
+    ${type("xs")}
+    color: var(--text-2);
+    background: var(--surface-1);
     border-bottom: var(--border-width-thin) solid var(--border);
   }
 
   th[aria-sort]:hover {
-    color: var(--foreground);
+    color: var(--text-1);
   }
 
   .HeaderContent {
@@ -44,11 +44,12 @@ export const dataTableStyles = css `
   th[aria-sort="ascending"] .SortIcon,
   th[aria-sort="descending"] .SortIcon {
     opacity: 1;
-    color: var(--foreground);
+    color: var(--text-1);
   }
 
   tbody tr {
     border-bottom: var(--border-width-thin) solid var(--border);
+    transition-property: background, filter, transform;
     transition-duration: var(--duration-fast);
   }
 
@@ -57,7 +58,7 @@ export const dataTableStyles = css `
   }
 
   tbody tr:hover {
-    background: var(--muted);
+    background: var(--surface-1);
   }
 
   td {
@@ -66,15 +67,15 @@ export const dataTableStyles = css `
   }
 
   .EmptyRow td {
-    height: 96px;
+    height: var(--space-24);
     text-align: center;
-    color: var(--muted-foreground);
+    color: var(--text-2);
   }
 
   .Pagination {
     padding: 0 var(--space-1);
-    font-size: var(--font-size-sm);
-    color: var(--muted-foreground);
+    ${type("sm")}
+    color: var(--text-2);
   }
 
   .PageInfo {
@@ -90,24 +91,24 @@ export const dataTableStyles = css `
     height: var(--component-height-sm);
     border: var(--border-width-thin) solid var(--border);
     border-radius: var(--radius-md);
-    color: var(--foreground);
-    font-size: var(--font-size-sm);
+    color: var(--text-1);
+    ${type("sm")}
     transition-property: background;
     transition-duration: var(--duration-fast);
   }
 
   .PageButton:hover:not(:disabled) {
-    background: var(--muted);
+    background: var(--surface-1);
   }
 
   .PageButton:disabled {
-    opacity: 0.3;
+    opacity: 0.4;
   }
 
   .PageButton: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);
   }
 `;

package/components/dialog-popup.js

@@ -1,19 +1,13 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const dialogPopupStyles = 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 dialogPopupStyles = 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 dialogPopupStyles = 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 dialogPopupStyles = 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/dropzone.js

@@ -1,32 +1,33 @@
 import { css } from "lit";
 export const dropzoneStyles = css `
   :host([disabled]) {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 
   [part="root"] {
-    border: 2px dashed var(--border);
+    border: var(--border-width-medium) dashed var(--border);
     border-radius: var(--radius-md);
     background: var(--background);
-    color: var(--foreground);
+    color: var(--text-1);
     padding: var(--space-4);
+    transition-property: border-color, background, color, box-shadow, filter, transform;
     transition-duration: var(--duration-fast);
   }
 
   [part="root"]:hover {
-    border-color: var(--ring);
-    background: var(--muted);
+    border-color: var(--accent);
+    background: var(--surface-1);
   }
 
   [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-dragover] {
-    border-color: var(--ring);
-    background: var(--muted);
+    border-color: var(--accent);
+    background: var(--accent-subtle);
   }
 `;