@deepfuture/dui-theme-default 0.0.1 → 0.0.4

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

package/components/tab.js

@@ -1,34 +1,35 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const tabStyles = css `
   [part="tab"] {
-    color: var(--muted-foreground);
-    font-size: var(--font-size-sm);
-    line-height: var(--line-height-snug);
+    color: var(--text-2);
+    ${type("sm", { lineHeight: "var(--line-height-snug)" })}
     font-weight: var(--font-weight-medium);
     padding-inline: var(--space-2);
-    height: 2rem;
+    height: var(--component-height-md);
+    transition-property: color, box-shadow, background, filter, transform;
     transition-duration: var(--duration-fast);
   }
 
   [part="tab"][data-active] {
-    color: var(--foreground);
+    color: var(--text-1);
   }
 
   @media (hover: hover) {
     [part="tab"]:hover:not([data-disabled]) {
-      color: var(--foreground);
+      color: var(--text-1);
     }
   }
 
   [part="tab"]: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);
     border-radius: var(--radius-sm);
     z-index: 1;
   }
 
   [part="tab"][data-disabled] {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 `;

package/components/tabs-indicator.js

@@ -1,10 +1,10 @@
 import { css } from "lit";
 export const tabsIndicatorStyles = css `
   :host {
-    height: 1.5rem;
+    height: var(--space-6);
     border-radius: var(--radius-sm);
-    background: var(--input);
-    transition-duration: 200ms;
+    background: oklch(from var(--foreground) l c h / 0.08);
+    transition-duration: var(--duration-normal);
     transition-timing-function: var(--ease-in-out-3);
   }
 `;

package/components/tabs-panel.js

@@ -1,13 +1,14 @@
 import { css } from "lit";
 export const tabsPanelStyles = css `
   [part="panel"] {
+    transition-property: box-shadow;
     transition-duration: var(--duration-fast);
   }
 
   [part="panel"]: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);
     border-radius: var(--radius-md);
   }
 `;

package/components/textarea.js

@@ -9,10 +9,11 @@ export const textareaStyles = css `
     font-family: var(--font-sans);
     font-size: var(--font-size);
     line-height: var(--line-height-snug);
-    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);
   }
 
@@ -23,7 +24,7 @@ export const textareaStyles = css `
   /* Scrollbar */
   [part="textarea"] {
     scrollbar-width: thin;
-    scrollbar-color: color-mix(in srgb, var(--muted-foreground) 50%, transparent) transparent;
+    scrollbar-color: color-mix(in srgb, var(--text-2) 50%, transparent) transparent;
   }
 
   [part="textarea"]::-webkit-scrollbar {
@@ -35,28 +36,28 @@ export const textareaStyles = css `
   }
 
   [part="textarea"]::-webkit-scrollbar-thumb {
-    background: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
+    background: color-mix(in srgb, var(--text-2) 50%, transparent);
     border-radius: var(--radius-sm);
     border: 0.125rem solid transparent;
     background-clip: padding-box;
   }
 
   [part="textarea"]::-webkit-scrollbar-thumb:hover {
-    background: color-mix(in srgb, var(--muted-foreground) 70%, transparent);
+    background: color-mix(in srgb, var(--text-2) 70%, transparent);
   }
 
   [part="textarea"]::placeholder {
-    color: var(--muted-foreground);
+    color: var(--text-3);
   }
 
   [part="textarea"]: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="textarea"]:disabled {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 
   [part="textarea"][data-invalid] {

package/components/toggle-group.js

@@ -3,7 +3,6 @@ export const toggleGroupStyles = css `
   [part="root"] {
     gap: var(--space-1);
     border-radius: var(--radius-md);
-    background: var(--muted);
     padding: var(--space-0_5);
   }
 `;

package/components/toggle.js

@@ -1,34 +1,51 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const toggleStyles = css `
+  /* --_select / --_interact alpha overlay pattern */
+
   [part="root"] {
-    height: var(--space-9);
+    --_select: 0;
+    --_interact: 0;
+    --toggle-gap: var(--space-1_5);
+    --icon-size: var(--space-4);
+    --icon-color: currentColor;
+    height: var(--component-height-md);
     padding: 0 var(--space-2_5);
     border-radius: var(--radius-md);
-    font-size: var(--font-size-sm);
+    border: var(--border-width-thin) solid var(--border);
+    ${type("sm")}
     font-weight: var(--font-weight-medium);
-    color: var(--muted-foreground);
-    transition-property: background, color;
+    color: var(--text-2);
+    background: oklch(from var(--foreground) l c h / calc(var(--_select) + var(--_interact)));
+    transition-property: background, color, box-shadow;
     transition-duration: var(--duration-fast);
+    min-width: var(--component-height-md);
   }
 
   @media (hover: hover) {
     [part="root"]:hover:not(:disabled):not([data-pressed]) {
-      background: var(--muted);
-      color: var(--foreground);
+      --_interact: 0.05;
+      color: var(--text-1);
     }
   }
 
   [part="root"][data-pressed] {
-    background: var(--secondary);
-    color: var(--foreground);
+    --_select: 0.10;
+    color: var(--text-1);
+  }
+
+  [part="root"]:active:not(:disabled) {
+    --_interact: 0.10;
   }
 
   [part="root"]: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);
   }
 
   [part="root"]:disabled {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 `;

package/components/tooltip-popup.js

@@ -1,2 +1,30 @@
 import { css } from "lit";
-export const tooltipPopupStyles = css ``;
+import { type } from "../typography.js";
+export const tooltipPopupStyles = css `
+  .Popup {
+    padding: var(--space-0_5) var(--space-1_5);
+    border-radius: var(--radius-sm);
+    background: color-mix(
+      in oklch,
+      var(--foreground) 90%,
+      oklch(0 0 0 / 0)
+    );
+    backdrop-filter: var(--filter-blur-sm);
+    color: var(--background);
+    font-family: var(--font-sans);
+    ${type("xs", { lineHeight: "var(--line-height-snug)" })}
+    box-shadow: var(--shadow-sm);
+    max-width: var(--space-80);
+    transition-duration: var(--duration-fastest);
+    transition-timing-function: var(--ease-out-3);
+  }
+
+  .Arrow .arrow-fill {
+    fill: color-mix(in oklch, var(--foreground) 90%, oklch(0 0 0 / 0));
+  }
+
+  .Arrow .arrow-stroke {
+    fill: none;
+    stroke: none;
+  }
+`;

package/components/trunc.js

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

package/index.d.ts

@@ -80,3 +80,7 @@ export { toggleGroupStyles } from "./components/toggle-group.js";
 export { numberFieldStyles } from "./components/number-field.js";
 export { menubarStyles } from "./components/menubar.js";
 export { calendarStyles } from "./components/calendar.js";
+export { proseSheet } from "./prose.js";
+export { type, typeScale } from "./typography.js";
+export type { TypeSize } from "./typography.js";
+export type { ButtonVariant, ButtonAppearance, ButtonSize, BadgeVariant, BadgeAppearance, SpinnerVariant, SpinnerSize, TextareaVariant, SidebarVariant, SidebarMenuButtonSize, ToolbarSize, } from "./types.js";

package/index.js

@@ -78,10 +78,12 @@ import { toggleGroupStyles } from "./components/toggle-group.js";
 import { numberFieldStyles } from "./components/number-field.js";
 import { menubarStyles } from "./components/menubar.js";
 import { calendarStyles } from "./components/calendar.js";
+import { proseSheet } from "./prose.js";
 import { tokenSheet } from "./tokens.js";
 export const defaultTheme = {
     tokens: tokenSheet,
     base: themedBase,
+    prose: proseSheet,
     styles: new Map([
         ["dui-accordion", accordionStyles],
         ["dui-accordion-item", accordionItemStyles],
@@ -244,3 +246,7 @@ export { toggleGroupStyles } from "./components/toggle-group.js";
 export { numberFieldStyles } from "./components/number-field.js";
 export { menubarStyles } from "./components/menubar.js";
 export { calendarStyles } from "./components/calendar.js";
+// --- Prose ---
+export { proseSheet } from "./prose.js";
+// --- Typography helpers ---
+export { type, typeScale } from "./typography.js";

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@deepfuture/dui-theme-default",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "description": "DUI default theme — design tokens and aesthetic component styles",
   "type": "module",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/nicholasgasior/dui.git",
+    "url": "https://github.com/deepfuturenow/dui.git",
     "directory": "packages/theme-default"
   },
   "exports": {
@@ -66,14 +66,26 @@
       "import": "./components/tooltip-popup.js",
       "types": "./components/tooltip-popup.d.ts"
     },
+    "./types": {
+      "import": "./types.js",
+      "types": "./types.d.ts"
+    },
     "./tokens": {
       "import": "./tokens.js",
       "types": "./tokens.d.ts"
     },
+    "./prose": {
+      "import": "./prose.js",
+      "types": "./prose.d.ts"
+    },
     "./tokens-raw": {
       "import": "./tokens-raw.js",
       "types": "./tokens-raw.d.ts"
     },
+    "./typography": {
+      "import": "./typography.js",
+      "types": "./typography.d.ts"
+    },
     "./components/dialog": {
       "import": "./components/dialog.js",
       "types": "./components/dialog.d.ts"
@@ -342,10 +354,11 @@
   "files": [
     "**/*.js",
     "**/*.d.ts",
-    "**/*.css"
+    "**/*.css",
+    "README.md"
   ],
   "dependencies": {
-    "@deepfuture/dui-core": "0.0.1",
+    "@deepfuture/dui-core": "0.0.4",
     "lit": "^3.3.2"
   },
   "sideEffects": false,

package/prose.d.ts

@@ -0,0 +1,2 @@
+declare const proseSheet: CSSStyleSheet;
+export { proseSheet };

package/prose.js

@@ -0,0 +1,4 @@
+import proseCSS from "./prose.css" with { type: "text" };
+const proseSheet = new CSSStyleSheet();
+proseSheet.replaceSync(proseCSS);
+export { proseSheet };