@deepfuture/dui-theme-default 0.0.2 → 0.0.4

package/components/input.js

@@ -1,30 +1,31 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const inputStyles = css `
   [part="input"] {
     padding: var(--space-2);
     font-family: var(--font-sans);
-    font-size: var(--font-size-sm);
-    line-height: var(--line-height-normal);
+    ${type("sm")}
     height: var(--component-height-md);
-    color: var(--foreground);
-    border: var(--border-width-thin) solid var(--input);
-    background: var(--input-bg);
+    color: var(--text-1);
+    border: var(--border-width-thin) solid var(--border);
+    background: var(--sunken);
     border-radius: var(--radius-md);
+    transition-property: border-color, box-shadow, background, filter, transform;
     transition-duration: var(--duration-fast);
   }
 
   [part="input"]::placeholder {
-    color: var(--muted-foreground);
+    color: var(--text-3);
   }
 
   [part="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);
   }
 
   [part="input"]:disabled {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 
   [part="input"][data-invalid] {
@@ -33,8 +34,8 @@ export const inputStyles = css `
 
   [part="input"][data-invalid]: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);
   }
 
   /* Password bullets are tiny at small font sizes — bump them up */
@@ -47,7 +48,7 @@ export const inputStyles = css `
   [part="input"]:-webkit-autofill,
   [part="input"]:-webkit-autofill:hover,
   [part="input"]:-webkit-autofill:focus {
-    -webkit-text-fill-color: var(--foreground);
+    -webkit-text-fill-color: var(--text-1);
     transition: background-color 5000s ease-in-out 0s;
   }
 `;

package/components/menu-item.js

@@ -1,20 +1,22 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const menuItemStyles = css `
   .Item {
     --icon-size: var(--space-4);
-    --icon-color: var(--muted-foreground);
+    --icon-color: var(--text-2);
+    gap: var(--space-2);
     padding: var(--space-2) var(--space-3);
     border-radius: var(--radius-sm);
-    font-size: var(--font-size-sm);
+    ${type("sm")}
     font-family: var(--font-sans);
-    color: var(--popover-foreground);
+    color: var(--text-1);
   }
 
   .Item:hover,
   :host([data-highlighted]) .Item {
-    --icon-color: var(--foreground);
-    background: var(--secondary);
-    color: var(--foreground);
+    --icon-color: var(--text-1);
+    background: oklch(from var(--foreground) l c h / 0.05);
+    color: var(--text-1);
   }
 
   :host([variant="danger"]) .Item {
@@ -24,13 +26,13 @@ export const menuItemStyles = css `
 
   :host([variant="danger"]) .Item:hover,
   :host([variant="danger"][data-highlighted]) .Item {
-    --icon-color: var(--destructive-foreground);
+    --icon-color: oklch(from var(--destructive) 0.98 0.01 h);
     background: var(--destructive);
-    color: var(--destructive-foreground);
+    color: oklch(from var(--destructive) 0.98 0.01 h);
   }
 
   :host([disabled]) .Item {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
   }
 `;

package/components/menu.js

@@ -1,2 +1,20 @@
 import { css } from "lit";
-export const menuStyles = css ``;
+export const menuStyles = css `
+  .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));
+  }
+
+  .Menu {
+    padding: var(--space-1);
+  }
+`;

package/components/number-field.js

@@ -1,20 +1,22 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const numberFieldStyles = css `
   [part="root"] {
     border: var(--border-width-thin) solid var(--border);
     border-radius: var(--radius-md);
-    background: var(--background);
+    background: var(--sunken);
     transition-property: border-color, box-shadow;
     transition-duration: var(--duration-fast);
   }
 
   [part="root"]:focus-within {
-    border-color: var(--ring);
-    box-shadow: 0 0 0 var(--space-0_5) color-mix(in oklch, var(--ring) 25%, transparent);
+    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);
   }
 
   [part="root"][data-disabled] {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 
   [part="root"][data-invalid] {
@@ -22,18 +24,18 @@ export const numberFieldStyles = css `
   }
 
   [part="input"] {
-    height: var(--space-9);
+    height: var(--component-height-md);
     width: var(--space-16);
     font-family: var(--font-sans);
-    font-size: var(--font-size-sm);
-    color: var(--foreground);
+    ${type("sm")}
+    color: var(--text-1);
   }
 
   [part="decrement"],
   [part="increment"] {
     width: var(--space-8);
     height: var(--space-8);
-    color: var(--muted-foreground);
+    color: var(--text-2);
     border-radius: var(--radius-sm);
     font-size: var(--font-size-lg);
     transition-property: background, color;
@@ -43,13 +45,13 @@ export const numberFieldStyles = css `
   @media (hover: hover) {
     [part="decrement"]:hover:not(:disabled),
     [part="increment"]:hover:not(:disabled) {
-      background: var(--muted);
-      color: var(--foreground);
+      background: var(--surface-1);
+      color: var(--text-1);
     }
   }
 
   [part="decrement"]:disabled,
   [part="increment"]:disabled {
-    opacity: 0.3;
+    opacity: 0.4;
   }
 `;

package/components/popover-popup.js

@@ -1,2 +1,26 @@
 import { css } from "lit";
-export const popoverPopupStyles = css ``;
+import { type } from "../typography.js";
+export const popoverPopupStyles = css `
+  .Popup {
+    padding: var(--space-1);
+    border-radius: var(--radius-md);
+    background: var(--surface-3);
+    color: var(--text-1);
+    font-family: var(--font-sans);
+    ${type("sm")}
+    box-shadow: var(--shadow-md);
+    border: var(--border-width-thin) solid var(--border);
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-out-3);
+  }
+
+  .Arrow .arrow-fill {
+    fill: var(--surface-3);
+  }
+
+  .Arrow .arrow-stroke {
+    fill: none;
+    stroke: var(--border);
+    stroke-width: 1px;
+  }
+`;

package/components/preview-card-popup.js

@@ -1,2 +1,27 @@
 import { css } from "lit";
-export const previewCardPopupStyles = css ``;
+import { type } from "../typography.js";
+export const previewCardPopupStyles = css `
+  .Popup {
+    padding: var(--space-4);
+    border-radius: var(--radius-md);
+    background: var(--surface-3);
+    color: var(--text-1);
+    font-family: var(--font-sans);
+    ${type("sm")}
+    box-shadow: var(--shadow-lg);
+    border: var(--border-width-thin) solid var(--border);
+    max-width: var(--max-width, var(--space-80));
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-out-3);
+  }
+
+  .Arrow .arrow-fill {
+    fill: var(--surface-3);
+  }
+
+  .Arrow .arrow-stroke {
+    fill: none;
+    stroke: var(--border);
+    stroke-width: 1px;
+  }
+`;

package/components/progress.js

@@ -6,12 +6,12 @@ export const progressStyles = css `
 
   [part="track"] {
     height: var(--progress-height);
-    background: var(--muted);
+    background: var(--surface-1);
     border-radius: var(--radius-full);
   }
 
   [part="indicator"] {
-    background: var(--primary);
+    background: var(--accent);
     border-radius: var(--radius-full);
     transition: width var(--duration-normal) var(--ease-out-3);
   }

package/components/radio.js

@@ -9,28 +9,29 @@ export const radioStyles = css `
     width: var(--radio-size);
     height: var(--radio-size);
     border-radius: 50%;
+    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);
-    background: var(--input-bg);
+    border: var(--border-width-thin) solid var(--border);
+    background: var(--sunken);
   }
 
   [part="root"][data-checked] {
-    border: var(--border-width-thin) solid var(--primary);
-    background: var(--primary);
+    border: var(--border-width-thin) solid var(--accent);
+    background: 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] {
@@ -39,9 +40,9 @@ export const radioStyles = css `
   }
 
   [part="dot"] {
-    width: 8px;
-    height: 8px;
+    width: var(--space-2);
+    height: var(--space-2);
     border-radius: 50%;
-    background: var(--primary-foreground);
+    background: oklch(from var(--accent) 0.98 0.01 h);
   }
 `;

package/components/scroll-area.js

@@ -6,7 +6,7 @@ export const scrollAreaStyles = css `
       var(--scroll-fade-spread-radius, var(--space-2))
       var(--scroll-fade-color, var(--background));
     opacity: 0;
-    transition: opacity 150ms ease;
+    transition: opacity var(--duration-fast) ease;
 
     &[data-scrolled] {
       opacity: 1;
@@ -14,24 +14,24 @@ export const scrollAreaStyles = css `
   }
 
   .Scrollbar {
-    border-radius: var(--radius-sm, 0.375rem);
-    transition: opacity 150ms;
+    border-radius: var(--radius-sm);
+    transition: opacity var(--duration-fast);
   }
 
   .Scrollbar[data-orientation="vertical"] {
-    width: 0.25rem;
-    margin: 0.1rem;
+    width: var(--space-1);
+    margin: var(--space-px);
   }
 
   .Scrollbar[data-orientation="horizontal"] {
-    height: 0.25rem;
-    margin: 0.1rem;
+    height: var(--space-1);
+    margin: var(--space-px);
   }
 
   .Thumb {
     border-radius: inherit;
-    background: var(--scroll-area-thumb-color, var(--muted-foreground));
-    opacity: 0.5;
+    background: var(--scroll-area-thumb-color, var(--text-2));
+    opacity: 0.4;
     transition: opacity var(--duration-fast);
 
     &:hover {

package/components/select.js

@@ -1,16 +1,17 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const selectStyles = css `
   .Trigger {
     height: var(--component-height-md);
     gap: var(--space-2);
     padding: var(--space-2) var(--space-3);
-    border: var(--border-width-thin) solid var(--input);
+    border: var(--border-width-thin) solid var(--border);
     border-radius: var(--radius-md);
-    background: var(--input-bg);
-    color: var(--foreground);
+    background: var(--sunken);
+    color: var(--text-1);
     font-family: var(--font-sans);
-    font-size: var(--font-size-sm);
-    line-height: var(--line-height-normal);
+    ${type("sm")}
+    transition-property: border-color, box-shadow, background, filter, transform;
     transition-duration: var(--duration-fast);
   }
 
@@ -21,12 +22,12 @@ export const selectStyles = css `
   .Trigger: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);
   }
 
   .Trigger[data-disabled] {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 
   .Trigger[data-invalid] {
@@ -34,11 +35,62 @@ export const selectStyles = css `
   }
 
   .Value[data-placeholder] {
-    color: var(--muted-foreground);
+    color: var(--text-3);
   }
 
   .Icon {
     --icon-size: var(--space-4);
-    color: var(--foreground);
+    color: var(--text-1);
+  }
+
+  /* ---- 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));
+  }
+
+  .Listbox {
+    padding: var(--space-1);
+  }
+
+  .Item {
+    gap: var(--space-2);
+    padding: var(--space-1_5) var(--space-2);
+    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);
+  }
+
+  .Item[data-selected] {
+    font-weight: var(--font-weight-medium);
+  }
+
+  .Item[data-disabled] {
+    opacity: 0.4;
+  }
+
+  .ItemIndicator {
+    width: var(--space-3_5);
+  }
+
+  .ItemIndicator dui-icon {
+    --icon-size: var(--space-3_5);
   }
 `;

package/components/sidebar-group-label.js

@@ -1,13 +1,13 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const sidebarGroupLabelStyles = css `
   :host {
     margin-left: var(--sidebar-group-label-inset);
     height: var(--component-height-sm);
     color: var(--sidebar-muted-fg);
     font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
+    ${type("xs", { lineHeight: "var(--line-height-snug)" })}
     font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-snug);
   }
 
   :host([data-icon-collapsed]) {

package/components/sidebar-menu-button.js

@@ -30,19 +30,11 @@ export const sidebarMenuButtonStyles = css `
   }
 
   .Row:hover {
-    background: color-mix(
-      in oklch,
-      var(--sidebar-button-bg) 100%,
-      var(--foreground) 8%
-    );
+    background: oklch(from var(--foreground) l c h / 0.05);
   }
 
   .Row[data-active] {
-    background: color-mix(
-      in oklch,
-      var(--sidebar-button-bg) 100%,
-      var(--foreground) 12%
-    );
+    background: oklch(from var(--foreground) l c h / 0.10);
   }
 
   .Row[data-icon-collapsed] {
@@ -56,7 +48,7 @@ export const sidebarMenuButtonStyles = css `
     color: var(--sidebar-button-fg);
     font-family: var(--font-sans);
     font-size: var(--smb-font-size);
-    font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-regular);
     letter-spacing: var(--letter-spacing-tight);
     line-height: var(--line-height-snug);
     --icon-size: var(--smb-icon-size);
@@ -65,13 +57,13 @@ export const sidebarMenuButtonStyles = css `
 
   .Button:focus-visible {
     box-shadow:
-      0 0 0 var(--space-0_5) var(--background),
-      0 0 0 var(--space-1) var(--sidebar-ring);
+      0 0 0 var(--focus-ring-offset) var(--background),
+      0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--sidebar-ring);
     border-radius: var(--smb-radius);
   }
 
   :host([disabled]) .Row {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 
   :host([active]) .Button {

package/components/sidebar-provider.js

@@ -8,21 +8,13 @@ export const sidebarProviderStyles = css `
     --sidebar-group-label-inset: var(--space-6);
     --sidebar-button-inset: var(--space-4);
     --sidebar-header-content-gap: var(--space-4);
-    --sidebar-bg: color-mix(
-      in oklch,
-      var(--background) 97%,
-      var(--foreground)
-    );
-    --sidebar-fg: var(--card-foreground);
-    --sidebar-separator: color-mix(
-      in oklch,
-      var(--foreground) 10%,
-      oklch(0 0 0 / 0)
-    );
+    --sidebar-bg: var(--surface-1);
+    --sidebar-fg: var(--text-1);
+    --sidebar-separator: var(--border);
     --sidebar-border: var(--border);
     --sidebar-button-bg: oklch(0 0 0 / 0);
-    --sidebar-button-fg: var(--foreground);
-    --sidebar-muted-fg: var(--muted-foreground);
-    --sidebar-ring: var(--ring);
+    --sidebar-button-fg: var(--text-1);
+    --sidebar-muted-fg: var(--text-2);
+    --sidebar-ring: var(--accent);
   }
 `;

package/components/sidebar.js

@@ -70,7 +70,7 @@ export const sidebarStyles = css `
 
   .Backdrop {
     background: black;
-    opacity: 0.2;
+    opacity: 0.4;
   }
 
   .Backdrop[data-starting-style],

package/components/slider.js

@@ -10,17 +10,17 @@ export const sliderStyles = css `
   }
 
   [part="root"][data-disabled] {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 
   [part="track"] {
     height: var(--slider-track-height);
-    background: var(--muted);
+    background: var(--surface-1);
     border-radius: calc(var(--slider-track-height) / 2);
   }
 
   [part="indicator"] {
-    background: var(--primary);
+    background: var(--accent);
     border-radius: calc(var(--slider-track-height) / 2);
     transition: width 50ms ease-out;
   }
@@ -33,8 +33,9 @@ export const sliderStyles = css `
     width: var(--slider-thumb-size);
     height: var(--slider-thumb-size);
     background: var(--background);
-    border: 2px solid var(--primary);
+    border: var(--border-width-medium) solid var(--accent);
     border-radius: 50%;
+    transition-property: left, box-shadow;
     transition-duration: 50ms, var(--duration-fast);
     transition-timing-function: ease-out, ease;
   }
@@ -45,13 +46,13 @@ export const sliderStyles = css `
 
   @media (hover: hover) {
     [part="thumb"]:hover {
-      box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 20%, transparent);
+      box-shadow: 0 0 0 var(--space-1) color-mix(in oklch, var(--accent) 20%, transparent);
     }
   }
 
   [part="thumb"]: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);
   }
 `;

package/components/switch.js

@@ -17,18 +17,19 @@ export const switchStyles = css `
       (var(--line-height-normal) * 1em - var(--switch-height)) / 2
     );
     border-radius: calc(var(--switch-height) / 2);
-    outline: var(--border-width-thin) solid var(--input);
-    background: color-mix(in oklch, var(--input) 50%, transparent);
+    outline: var(--border-width-thin) solid var(--border-strong);
+    background: oklch(from var(--foreground) l c h / 0.12);
+    transition-property: background, outline-color, box-shadow, filter, transform;
     transition-duration: var(--duration-fast);
   }
 
   [part="root"][data-checked] {
-    background: var(--primary);
-    outline-color: var(--primary);
+    background: var(--accent);
+    outline-color: var(--accent);
   }
 
   [part="root"][data-disabled] {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
   }
 
@@ -39,8 +40,8 @@ export const switchStyles = css `
   [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] {
@@ -56,14 +57,14 @@ export const switchStyles = css `
     width: var(--switch-thumb-size);
     height: var(--switch-thumb-size);
     border-radius: 50%;
-    outline: 1px solid transparent;
-    background: var(--primary);
+    outline: var(--border-width-thin) solid transparent;
+    background: var(--background);
+    transition-property: transform, outline-color;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-out-3);
   }
 
   [part="root"][data-checked] [part="thumb"] {
-    background: var(--primary-foreground);
-    outline-color: var(--primary-foreground);
+    background: oklch(from var(--accent) 0.98 0.01 h);
   }
 `;