@sigx/lynx-daisyui 0.4.3 → 0.4.4

package/dist/index.d.ts

@@ -54,8 +54,8 @@ export { NavDrawer } from './navigation/NavDrawer.js';
 export type { NavDrawerProps, NavDrawerSide, } from './navigation/NavDrawer.js';
 export { SwiperIndicator } from './navigation/SwiperIndicator.js';
 export type { SwiperIndicatorProps, SwiperIndicatorVariant, SwiperIndicatorSize, } from './navigation/SwiperIndicator.js';
-export { ThemeProvider, useTheme, listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, } from './theme/ThemeProvider.js';
-export type { DaisyTheme, ThemeController, ThemeProviderProps, Theme, ThemePalette, ThemeRadius, ThemeVariant, } from './theme/ThemeProvider.js';
+export { ThemeProvider, useTheme, listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, sizesOf, } from './theme/ThemeProvider.js';
+export type { DaisyTheme, ThemeController, ThemeProviderProps, Theme, ThemePalette, ThemeRadius, ThemeSizes, ThemeVariant, } from './theme/ThemeProvider.js';
 export { StatusBarSync } from './theme/StatusBarSync.js';
 export type { StatusBarSyncProps } from './theme/StatusBarSync.js';
 export { themeController } from './theme/theme-state.js';

package/dist/index.js

@@ -32,7 +32,7 @@ export { NavHeader } from './navigation/NavHeader.js';
 export { NavDrawer } from './navigation/NavDrawer.js';
 export { SwiperIndicator } from './navigation/SwiperIndicator.js';
 // Theme
-export { ThemeProvider, useTheme, listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, } from './theme/ThemeProvider.js';
+export { ThemeProvider, useTheme, listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, sizesOf, } from './theme/ThemeProvider.js';
 export { StatusBarSync } from './theme/StatusBarSync.js';
 // Headless theme handle (issue #113): import and call from anywhere — stores,
 // services, effects, app-boot — with no `<ThemeProvider>` ancestor required.

package/dist/styles/components/alert.css

@@ -5,7 +5,7 @@
   flex-direction: row;
   align-items: center;
   padding: var(--padding-box);
-  border-radius: var(--rounded-box);
+  border-radius: var(--radius-box);
   gap: 12px;
   background-color: var(--color-base-200);
   color: var(--color-base-content);

package/dist/styles/components/badge.css

@@ -7,7 +7,7 @@
   height: var(--badge-md);
   padding-left: 10px;
   padding-right: 10px;
-  border-radius: var(--rounded-badge);
+  border-radius: var(--radius-selector);
   font-size: var(--font-md);
   font-weight: 600;
   background-color: var(--color-base-200);

package/dist/styles/components/button.css

@@ -8,7 +8,7 @@
   min-height: var(--size-md);
   padding-left: var(--padding-btn-md);
   padding-right: var(--padding-btn-md);
-  border-radius: var(--rounded-btn);
+  border-radius: var(--radius-field);
   font-size: var(--font-md);
   font-weight: 600;
   line-height: 1;

package/dist/styles/components/card.css

@@ -3,7 +3,7 @@
 .card {
   background-color: var(--color-base-200);
   color: var(--color-base-content);
-  border-radius: var(--rounded-box);
+  border-radius: var(--radius-box);
   overflow: hidden;
 }
 

package/dist/styles/components/checkbox.css

@@ -3,7 +3,7 @@
 .checkbox {
   width: var(--checkbox-md);
   height: var(--checkbox-md);
-  border-radius: var(--rounded-selector);
+  border-radius: var(--radius-selector);
   border-width: 1px;
   border-color: var(--color-base-300);
   background-color: transparent;

package/dist/styles/components/input.css

@@ -4,7 +4,7 @@
   height: var(--size-md);
   padding-left: var(--padding-btn-md);
   padding-right: var(--padding-btn-md);
-  border-radius: var(--rounded-btn);
+  border-radius: var(--radius-field);
   font-size: var(--font-md);
   background-color: var(--color-base-100);
   color: var(--color-base-content);

package/dist/styles/components/modal.css

@@ -15,7 +15,7 @@
 .modal-box {
   max-width: var(--modal-max-width);
   width: 90%;
-  border-radius: var(--rounded-box);
+  border-radius: var(--radius-box);
   background-color: var(--color-base-200);
   padding: 0;
   overflow: hidden;

package/dist/styles/components/select.css

@@ -7,7 +7,7 @@
   height: var(--size-md);
   padding-left: var(--padding-btn-md);
   padding-right: var(--padding-btn-md);
-  border-radius: var(--rounded-btn);
+  border-radius: var(--radius-field);
   font-size: var(--font-md);
   background-color: var(--color-base-100);
   color: var(--color-base-content);
@@ -38,7 +38,7 @@
   background-color: var(--color-base-100);
   border-width: var(--border-btn);
   border-color: var(--color-base-300);
-  border-radius: var(--rounded-btn);
+  border-radius: var(--radius-field);
   overflow: hidden;
 }
 

package/dist/styles/components/skeleton.css

@@ -2,5 +2,5 @@
 
 .skeleton {
   background-color: var(--color-base-300);
-  border-radius: var(--rounded-btn);
+  border-radius: var(--radius-field);
 }

package/dist/styles/components/textarea.css

@@ -4,7 +4,7 @@
   padding: 12px;
   padding-left: var(--padding-btn-md);
   padding-right: var(--padding-btn-md);
-  border-radius: var(--rounded-btn);
+  border-radius: var(--radius-field);
   font-size: var(--font-md);
   background-color: var(--color-base-100);
   color: var(--color-base-content);

package/dist/styles/components/toggle.css

@@ -8,10 +8,10 @@
 }
 
 /* Size variants — track dimensions */
-.toggle-xs { width: var(--toggle-width-xs); height: var(--toggle-height-xs); border-radius: var(--rounded-toggle); }
-.toggle-sm { width: var(--toggle-width-sm); height: var(--toggle-height-sm); border-radius: var(--rounded-toggle); }
-.toggle-md { width: var(--toggle-width-md); height: var(--toggle-height-md); border-radius: var(--rounded-toggle); }
-.toggle-lg { width: var(--toggle-width-lg); height: var(--toggle-height-lg); border-radius: var(--rounded-toggle); }
+.toggle-xs { width: var(--toggle-width-xs); height: var(--toggle-height-xs); border-radius: var(--radius-selector); }
+.toggle-sm { width: var(--toggle-width-sm); height: var(--toggle-height-sm); border-radius: var(--radius-selector); }
+.toggle-md { width: var(--toggle-width-md); height: var(--toggle-height-md); border-radius: var(--radius-selector); }
+.toggle-lg { width: var(--toggle-width-lg); height: var(--toggle-height-lg); border-radius: var(--radius-selector); }
 
 /* Thumb */
 .toggle-thumb {

package/dist/styles/index.css

@@ -8,6 +8,11 @@
 /* Structural design tokens (.daisy) + composable shape modifiers */
 @import './themes/tokens.css';
 @import './themes/shapes.css';
+/* Per-theme color tokens for the built-in themes — generated from the theme
+ * registry at build time (scripts/gen-theme-css.mjs). Declared as CSS rules so
+ * `var(--color-*)` resolves on the first paint; the runtime `setProperty` path
+ * can't set inheritable custom properties before descendants have painted. */
+@import './themes/builtins.generated.css';
 
 /* Base reset */
 @import './base.css';

package/dist/styles/themes/builtins.generated.css

@@ -0,0 +1,140 @@
+/* AUTO-GENERATED from src/theme/registry.ts — do not edit.
+ * Regenerated by scripts/gen-theme-css.mjs on every build. */
+
+.daisy-light {
+  --color-primary: #491dff;
+  --color-primary-content: #d3dbff;
+  --color-secondary: #ff20cc;
+  --color-secondary-content: #fff8fc;
+  --color-accent: #00cfbd;
+  --color-accent-content: #00100d;
+  --color-neutral: #2b3440;
+  --color-neutral-content: #d7dde4;
+  --color-base-100: #ffffff;
+  --color-base-200: #f2f2f2;
+  --color-base-300: #e5e6e6;
+  --color-base-content: #1f2937;
+  --color-info: #00b4fa;
+  --color-info-content: #000000;
+  --color-success: #00a96e;
+  --color-success-content: #000000;
+  --color-warning: #ffc100;
+  --color-warning-content: #000000;
+  --color-error: #ff676a;
+  --color-error-content: #000000;
+}
+
+.daisy-cupcake {
+  --color-primary: #65c3c8;
+  --color-primary-content: #052124;
+  --color-secondary: #ef9fbc;
+  --color-secondary-content: #2d0a16;
+  --color-accent: #eeaf3a;
+  --color-accent-content: #2d1c00;
+  --color-neutral: #291334;
+  --color-neutral-content: #f5f1f8;
+  --color-base-100: #faf7f5;
+  --color-base-200: #efeae6;
+  --color-base-300: #e7e2df;
+  --color-base-content: #291334;
+  --color-info: #00b4fa;
+  --color-info-content: #000000;
+  --color-success: #00a96e;
+  --color-success-content: #000000;
+  --color-warning: #ffc100;
+  --color-warning-content: #000000;
+  --color-error: #ff676a;
+  --color-error-content: #000000;
+}
+
+.daisy-emerald {
+  --color-primary: #66cc8a;
+  --color-primary-content: #06200f;
+  --color-secondary: #377cfb;
+  --color-secondary-content: #02112d;
+  --color-accent: #f68067;
+  --color-accent-content: #2d0a02;
+  --color-neutral: #333c4d;
+  --color-neutral-content: #e9eaed;
+  --color-base-100: #ffffff;
+  --color-base-200: #f3f4f6;
+  --color-base-300: #e5e7eb;
+  --color-base-content: #333c4d;
+  --color-info: #1c92f2;
+  --color-info-content: #000a14;
+  --color-success: #00a96e;
+  --color-success-content: #000a05;
+  --color-warning: #ff9900;
+  --color-warning-content: #261600;
+  --color-error: #ff5724;
+  --color-error-content: #000000;
+}
+
+.daisy-dark {
+  --color-primary: #7582ff;
+  --color-primary-content: #050617;
+  --color-secondary: #ff71cf;
+  --color-secondary-content: #190211;
+  --color-accent: #00e7d0;
+  --color-accent-content: #001210;
+  --color-neutral: #2a323c;
+  --color-neutral-content: #a6adbb;
+  --color-base-100: #1d232a;
+  --color-base-200: #191e24;
+  --color-base-300: #343b46;
+  --color-base-content: #a6adbb;
+  --color-info: #00b4fa;
+  --color-info-content: #000000;
+  --color-success: #00a96e;
+  --color-success-content: #000000;
+  --color-warning: #ffc100;
+  --color-warning-content: #000000;
+  --color-error: #ff676a;
+  --color-error-content: #000000;
+}
+
+.daisy-synthwave {
+  --color-primary: #e779c1;
+  --color-primary-content: #2a0a1f;
+  --color-secondary: #58c7f3;
+  --color-secondary-content: #02141d;
+  --color-accent: #f3cc30;
+  --color-accent-content: #2a1f00;
+  --color-neutral: #20134e;
+  --color-neutral-content: #e3e0f5;
+  --color-base-100: #2d1b69;
+  --color-base-200: #261159;
+  --color-base-300: #1f0f4a;
+  --color-base-content: #f9f7fd;
+  --color-info: #53c0f3;
+  --color-info-content: #02151e;
+  --color-success: #71ead2;
+  --color-success-content: #002721;
+  --color-warning: #f3cc30;
+  --color-warning-content: #2a1f00;
+  --color-error: #e24056;
+  --color-error-content: #ffffff;
+}
+
+.daisy-dracula {
+  --color-primary: #ff79c6;
+  --color-primary-content: #2d0414;
+  --color-secondary: #bd93f9;
+  --color-secondary-content: #160226;
+  --color-accent: #50fa7b;
+  --color-accent-content: #002a0e;
+  --color-neutral: #414558;
+  --color-neutral-content: #f8f8f2;
+  --color-base-100: #282a36;
+  --color-base-200: #21222c;
+  --color-base-300: #181920;
+  --color-base-content: #f8f8f2;
+  --color-info: #8be9fd;
+  --color-info-content: #002a31;
+  --color-success: #50fa7b;
+  --color-success-content: #002a0e;
+  --color-warning: #f1fa8c;
+  --color-warning-content: #2a2900;
+  --color-error: #ff5555;
+  --color-error-content: #2a0000;
+}

package/dist/styles/themes/shapes.css

@@ -3,19 +3,13 @@
    <ThemeProvider class="daisy-rounded"> → host class="daisy daisy-rounded" */
 
 .daisy-flat {
-  --rounded-box: 0px;
-  --rounded-btn: 0px;
-  --rounded-badge: 0px;
-  --rounded-tab: 0px;
-  --rounded-selector: 0px;
-  --rounded-toggle: 0px;
+  --radius-selector: 0px;
+  --radius-field: 0px;
+  --radius-box: 0px;
 }
 
 .daisy-rounded {
-  --rounded-box: 24px;
-  --rounded-btn: 9999px;
-  --rounded-badge: 9999px;
-  --rounded-tab: 9999px;
-  --rounded-selector: 9999px;
-  --rounded-toggle: 9999px;
+  --radius-selector: 9999px;
+  --radius-field: 9999px;
+  --radius-box: 24px;
 }

package/dist/styles/themes/tokens.css

@@ -8,15 +8,20 @@
  * may still override roundness via its `radius` field. */
 
 .daisy {
-  /* ── Roundness ── */
-  --rounded-box: 16px;
-  --rounded-btn: 8px;
-  --rounded-badge: 9999px;
-  --rounded-tab: 8px;
-  --rounded-selector: 8px;
-  --rounded-toggle: 9999px;
+  /* ── Roundness (DaisyUI v5 contract) ── */
+  --radius-selector: 8px;
+  --radius-field: 8px;
+  --radius-box: 16px;
 
-  /* ── Sizing scale ── */
+  /* ── Base size units (DaisyUI v5 contract) ──
+   * A theme's `sizes` ({ field, selector }) overrides these; <ThemeProvider>
+   * re-derives the component dimensions below from them in JS. We deliberately
+   * do NOT use `calc(var() * n)` in CSS — it's unproven in Lynx's runtime CSS
+   * engine. Defaults below are base 4px × the per-token multiples shown. */
+  --size-selector: 4px;
+  --size-field: 4px;
+
+  /* ── Field sizing scale (button / input / select) — field × 6/8/12/16 ── */
   --size-xs: 24px;
   --size-sm: 32px;
   --size-md: 48px;
@@ -41,27 +46,28 @@
   --border-btn: 1px;
   --border-card: 1px;
 
-  /* ── Component-specific sizes ── */
-  --checkbox-xs: 16px;
-  --checkbox-sm: 20px;
-  --checkbox-md: 24px;
-  --checkbox-lg: 32px;
-  --toggle-width-xs: 32px;
-  --toggle-width-sm: 40px;
-  --toggle-width-md: 48px;
-  --toggle-width-lg: 56px;
-  --toggle-height-xs: 22px;
-  --toggle-height-sm: 24px;
-  --toggle-height-md: 28px;
-  --toggle-height-lg: 32px;
-  --toggle-thumb-xs: 14px;
-  --toggle-thumb-sm: 16px;
-  --toggle-thumb-md: 20px;
-  --toggle-thumb-lg: 24px;
-  --badge-xs: 16px;
-  --badge-sm: 20px;
-  --badge-md: 24px;
-  --badge-lg: 32px;
+  /* ── Selector-driven sizes (checkbox / toggle / badge) — selector × the
+   * multiples shown; <ThemeProvider> re-derives these from `sizes.selector`. ── */
+  --checkbox-xs: 16px; /* ×4 */
+  --checkbox-sm: 20px; /* ×5 */
+  --checkbox-md: 24px; /* ×6 */
+  --checkbox-lg: 32px; /* ×8 */
+  --toggle-width-xs: 32px; /* ×8 */
+  --toggle-width-sm: 40px; /* ×10 */
+  --toggle-width-md: 48px; /* ×12 */
+  --toggle-width-lg: 56px; /* ×14 */
+  --toggle-height-xs: 24px; /* ×6 */
+  --toggle-height-sm: 24px; /* ×6 */
+  --toggle-height-md: 28px; /* ×7 */
+  --toggle-height-lg: 32px; /* ×8 */
+  --toggle-thumb-xs: 16px; /* ×4 */
+  --toggle-thumb-sm: 16px; /* ×4 */
+  --toggle-thumb-md: 20px; /* ×5 */
+  --toggle-thumb-lg: 24px; /* ×6 */
+  --badge-xs: 16px; /* ×4 */
+  --badge-sm: 20px; /* ×5 */
+  --badge-md: 24px; /* ×6 */
+  --badge-lg: 32px; /* ×8 */
   --step-indicator: 32px;
   --progress-height: 8px;
   --modal-max-width: 400px;

package/dist/theme/ThemeProvider.d.ts

@@ -138,5 +138,5 @@ Define.Prop<'initial', DaisyTheme, false>
 export declare const ThemeProvider: import("@sigx/runtime-core").ComponentFactory<ThemeProviderProps, void, {
     default: () => import("@sigx/runtime-core").JSXElement | import("@sigx/runtime-core").JSXElement[] | null;
 }>;
-export { listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, } from './registry.js';
-export type { Theme, ThemePalette, ThemeRadius, ThemeVariant } from './registry.js';
+export { listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, sizesOf, } from './registry.js';
+export type { Theme, ThemePalette, ThemeRadius, ThemeSizes, ThemeVariant, } from './registry.js';

package/dist/theme/ThemeProvider.js

@@ -38,8 +38,74 @@ import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
 import { component, defineInjectable, defineProvide, effect, onMounted, onUnmounted, signal, untrack, } from '@sigx/lynx';
 import { useIconColorResolver } from '@sigx/lynx-icons';
 import { useSystemColorScheme } from '@sigx/lynx-appearance';
-import { colorsOf, pickThemeFor, radiusOf } from './registry.js';
+import { colorsOf, isBuiltInTheme, pickThemeFor, radiusOf, sizesOf, variantOf, } from './registry.js';
 import { globalThemeState, makeThemeController, themeController, } from './theme-state.js';
+// DaisyUI v5 expresses control dimensions as multiples of two base units
+// (`--size-field`, `--size-selector`). Lynx's runtime CSS engine is unproven
+// for `calc(var() * n)`, so when a theme overrides a base unit we do the
+// multiplication here and emit literal px. Bases must be px (engine-safe, like
+// colors); a non-px base sets only the base var and leaves the `.daisy`
+// defaults in place. Multiples mirror the defaults in `styles/themes/tokens.css`.
+const FIELD_STEPS = { xs: 6, sm: 8, md: 12, lg: 16 };
+const SELECTOR_STEPS = {
+    'checkbox-xs': 4, 'checkbox-sm': 5, 'checkbox-md': 6, 'checkbox-lg': 8,
+    'toggle-width-xs': 8, 'toggle-width-sm': 10, 'toggle-width-md': 12, 'toggle-width-lg': 14,
+    'toggle-height-xs': 6, 'toggle-height-sm': 6, 'toggle-height-md': 7, 'toggle-height-lg': 8,
+    'toggle-thumb-xs': 4, 'toggle-thumb-sm': 4, 'toggle-thumb-md': 5, 'toggle-thumb-lg': 6,
+    'badge-xs': 4, 'badge-sm': 5, 'badge-md': 6, 'badge-lg': 8,
+};
+const pxValue = (v) => {
+    const m = /^\s*(\d+(?:\.\d+)?)px\s*$/.exec(v);
+    return m ? Number(m[1]) : undefined;
+};
+/** Emit a theme's `sizes` overrides as literal-px CSS custom properties. */
+function applySizeVars(style, sizes) {
+    if (sizes.field) {
+        style['--size-field'] = sizes.field;
+        const base = pxValue(sizes.field);
+        if (base !== undefined) {
+            for (const k in FIELD_STEPS)
+                style[`--size-${k}`] = `${base * FIELD_STEPS[k]}px`;
+        }
+    }
+    if (sizes.selector) {
+        style['--size-selector'] = sizes.selector;
+        const base = pxValue(sizes.selector);
+        if (base !== undefined) {
+            for (const k in SELECTOR_STEPS)
+                style[`--${k}`] = `${base * SELECTOR_STEPS[k]}px`;
+        }
+    }
+}
+/**
+ * The full custom-property set for a theme — colors plus any radius/size
+ * overrides. Applied at runtime via the Lynx `setProperty` API (see
+ * `<ThemeProvider>`), NOT the inline `style` attribute: Lynx does not honor
+ * custom properties declared inline in this toolchain, but `setProperty`
+ * registers real, inheritable ones — the documented way to theme via CSS
+ * variables (https://lynxjs.org/guide/styling/custom-theming).
+ */
+function buildThemeVars(name) {
+    const palette = colorsOf(name) ?? colorsOf('daisy-light');
+    const radius = radiusOf(name);
+    const sizes = sizesOf(name);
+    const vars = {};
+    for (const key in palette)
+        vars[`--color-${key}`] = palette[key];
+    if (radius) {
+        if (radius.selector)
+            vars['--radius-selector'] = radius.selector;
+        if (radius.field)
+            vars['--radius-field'] = radius.field;
+        if (radius.box)
+            vars['--radius-box'] = radius.box;
+    }
+    if (sizes)
+        applySizeVars(vars, sizes);
+    return vars;
+}
+/** Unique host id per provider instance so `getElementById` targets its own subtree. */
+let themeIdSeq = 0;
 /**
  * Access the active daisyui theme controller. Resolves to the nearest
  * `<ThemeProvider>`'s controller (a content sub-scope), or — at the app root
@@ -82,6 +148,9 @@ export const ThemeProvider = component(({ props, slots }) => {
     const depth = useThemeDepth();
     const isRoot = depth === 0;
     defineProvide(useThemeDepth, () => depth + 1);
+    // Stable id for the host view so the runtime `setProperty` call (below) can
+    // target it. Unique per instance so nested providers theme their own subtree.
+    const hostId = `daisy-theme-${++themeIdSeq}`;
     const state = isRoot
         ? globalThemeState
         : signal(props.initial
@@ -135,6 +204,7 @@ export const ThemeProvider = component(({ props, slots }) => {
     // Created on mount (the native publisher may populate the scheme between
     // setup and mount) and torn down on unmount.
     let follow;
+    let applyVars;
     onMounted(() => {
         follow = effect(() => {
             const following = state.following;
@@ -149,22 +219,42 @@ export const ThemeProvider = component(({ props, slots }) => {
                     state.name = next;
             });
         });
+        // Built-in themes are themed by their generated CSS class (applied on
+        // the host below), which resolves on the very first frame. This
+        // `setProperty` path additionally serves runtime-registered themes
+        // (`registerTheme`, no shipped CSS class) — applied once they're
+        // selected post-mount, where it lands reliably. Reading `state.name`
+        // (via buildThemeVars) tracks it, so this re-runs on every theme change.
+        applyVars = effect(() => {
+            const vars = buildThemeVars(state.name);
+            if (typeof lynx !== 'undefined') {
+                lynx.getElementById(hostId)?.setProperty(vars);
+            }
+        });
     });
     onUnmounted(() => {
         follow?.stop();
         follow = undefined;
+        applyVars?.stop();
+        applyVars = undefined;
     });
     return () => {
-        // Every theme is data. Apply its color tokens as inline CSS custom
-        // properties — Lynx inherits custom properties to descendants, so
-        // component classes resolve `var(--color-*)` against these (the same
-        // mechanism SafeAreaProvider uses for `--sat`/`--sal`). The `daisy`
-        // base class supplies theme-agnostic structural tokens (radius,
-        // sizing); a theme may override roundness via `radius`. The root
-        // background/text are painted from the palette literals (inline
-        // `var()` values don't resolve in Lynx).
+        // Theme COLORS and any radius/size overrides are applied as real,
+        // inheritable CSS custom properties via the Lynx `setProperty` runtime
+        // API (see the `applyVars` effect above) — Lynx does NOT honor custom
+        // properties declared through the inline `style` attribute in this
+        // toolchain. The root background/text are painted here from palette
+        // literals (real properties, not custom props) so the surface is themed
+        // on first paint; descendants resolve `var(--color-*)` once setProperty
+        // has run. The `daisy` base class supplies structural token defaults.
         const palette = colorsOf(state.name) ?? colorsOf('daisy-light');
-        const radius = radiusOf(state.name);
+        // Built-ins ship a generated CSS class, so `state.name` alone paints on
+        // the first frame. A runtime-registered theme has no class — fall back
+        // to its variant's built-in class for the first frame; the `setProperty`
+        // effect above then swaps in its exact palette post-mount.
+        const themeClass = isBuiltInTheme(state.name)
+            ? state.name
+            : `${pickThemeFor(variantOf(state.name) ?? 'light')} ${state.name}`;
         const style = {
             flexGrow: 1,
             flexShrink: 1,
@@ -175,27 +265,10 @@ export const ThemeProvider = component(({ props, slots }) => {
             backgroundColor: palette['base-100'],
             color: palette['base-content'],
         };
-        for (const key in palette) {
-            style[`--color-${key}`] = palette[key];
-        }
-        if (radius) {
-            if (radius.box)
-                style['--rounded-box'] = radius.box;
-            if (radius.btn)
-                style['--rounded-btn'] = radius.btn;
-            if (radius.badge)
-                style['--rounded-badge'] = radius.badge;
-            if (radius.tab)
-                style['--rounded-tab'] = radius.tab;
-            if (radius.selector)
-                style['--rounded-selector'] = radius.selector;
-            if (radius.toggle)
-                style['--rounded-toggle'] = radius.toggle;
-        }
         if (props.style)
             Object.assign(style, props.style);
-        return (_jsx("view", { class: `daisy${props.class ? ' ' + props.class : ''}`, style: style, children: slots.default?.() }));
+        return (_jsx("view", { id: hostId, class: `daisy ${themeClass}${props.class ? ' ' + props.class : ''}`, style: style, children: slots.default?.() }));
     };
 });
 // Re-export registry helpers so consumers only need `@sigx/lynx-daisyui`.
-export { listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, } from './registry.js';
+export { listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, sizesOf, } from './registry.js';

package/dist/theme/registry.d.ts

@@ -17,7 +17,7 @@
  *
  * Structural tokens (radius, sizing, component dimensions) are theme-agnostic
  * and ship once in the bundled `.daisy` base class (`styles/themes/tokens.css`);
- * a theme may override roundness via `radius`.
+ * a theme may override roundness via `radius` and base size units via `sizes`.
  *
  * Colors are engine-safe strings — hex or `rgb()`. Lynx's CSS engine does not
  * parse `oklch()`, so convert before registering.
@@ -26,14 +26,29 @@ import type { DaisyColor } from '../shared/styles.js';
 export type ThemeVariant = 'light' | 'dark';
 /** Full daisy color palette — every semantic token, no holes. */
 export type ThemePalette = Record<DaisyColor, string>;
-/** Roundness token overrides. Defaults live in the bundled `.daisy` base. */
+/**
+ * Roundness token overrides (DaisyUI v5 contract). Emitted as
+ * `--radius-selector` / `--radius-field` / `--radius-box`. Defaults live in
+ * the bundled `.daisy` base.
+ */
 export interface ThemeRadius {
+    /** Small selectable controls — checkbox, toggle, badge. */
+    selector?: string;
+    /** Fields — button, input, select, textarea. */
+    field?: string;
+    /** Boxes — card, modal, alert. */
     box?: string;
-    btn?: string;
-    badge?: string;
-    tab?: string;
+}
+/**
+ * Base size-unit overrides (DaisyUI v5 contract). Emitted as
+ * `--size-selector` / `--size-field`; component dimensions are integer
+ * multiples of these. Defaults live in the bundled `.daisy` base.
+ */
+export interface ThemeSizes {
+    /** Base unit for selector controls (checkbox, toggle, badge). */
     selector?: string;
-    toggle?: string;
+    /** Base unit for fields (button, input, select). */
+    field?: string;
 }
 export interface Theme {
     /** Unique id — also the value of `theme.name`. */
@@ -49,7 +64,16 @@ export interface Theme {
     pair?: string;
     /** Optional roundness overrides; unspecified tokens fall back to `.daisy`. */
     radius?: ThemeRadius;
+    /** Optional base size-unit overrides; unspecified tokens fall back to `.daisy`. */
+    sizes?: ThemeSizes;
 }
+/**
+ * Whether `name` is a built-in theme that ships a CSS class — i.e. it paints
+ * correctly on the first frame. Runtime-registered themes return `false`;
+ * `<ThemeProvider>` falls back to their variant's built-in class for first
+ * paint and swaps in the exact palette via `setProperty`.
+ */
+export declare function isBuiltInTheme(name: string | undefined): boolean;
 /**
  * All registered themes in insertion order. Returns a shallow copy so callers
  * can't mutate the internal registry — re-registration goes through
@@ -80,6 +104,7 @@ export declare function extendTheme(base: string, patch: {
     pair?: string;
     colors?: Partial<ThemePalette>;
     radius?: ThemeRadius;
+    sizes?: ThemeSizes;
 }): Theme;
 /** The variant of a registered theme, or `undefined` if not registered. */
 export declare function variantOf(name: string | undefined): ThemeVariant | undefined;
@@ -87,6 +112,8 @@ export declare function variantOf(name: string | undefined): ThemeVariant | unde
 export declare function colorsOf(name: string | undefined): ThemePalette | undefined;
 /** The roundness overrides of a registered theme, if any. */
 export declare function radiusOf(name: string | undefined): ThemeRadius | undefined;
+/** The base size-unit overrides of a registered theme, if any. */
+export declare function sizesOf(name: string | undefined): ThemeSizes | undefined;
 /**
  * Pick a default theme for a given system color scheme — the first registered
  * theme of that variant (`daisy-light` / `daisy-dark` under the seeded

package/dist/theme/registry.js

@@ -89,6 +89,23 @@ const registry = [
         },
     },
 ];
+/**
+ * Names of the themes seeded at module load — the built-ins that ship a
+ * generated CSS class (`scripts/gen-theme-css.mjs`). Captured before any
+ * runtime `registerTheme()`, so it distinguishes "has a first-paint CSS class"
+ * from runtime-registered themes (which only have their palette as data and
+ * apply via `setProperty` post-mount).
+ */
+const BUILTIN_NAMES = new Set(registry.map((t) => t.name));
+/**
+ * Whether `name` is a built-in theme that ships a CSS class — i.e. it paints
+ * correctly on the first frame. Runtime-registered themes return `false`;
+ * `<ThemeProvider>` falls back to their variant's built-in class for first
+ * paint and swaps in the exact palette via `setProperty`.
+ */
+export function isBuiltInTheme(name) {
+    return name != null && BUILTIN_NAMES.has(name);
+}
 /**
  * Resolve a `theme.name` to its registered `Theme`. Supports multi-class names
  * like `'daisy-light daisy-rounded'` by matching the first registered id found.
@@ -147,6 +164,7 @@ export function extendTheme(base, patch) {
         pair: patch.pair ?? src.pair,
         colors: { ...src.colors, ...patch.colors },
         radius: patch.radius ?? src.radius,
+        sizes: patch.sizes ?? src.sizes,
     };
 }
 /** The variant of a registered theme, or `undefined` if not registered. */
@@ -161,6 +179,10 @@ export function colorsOf(name) {
 export function radiusOf(name) {
     return findTheme(name)?.radius;
 }
+/** The base size-unit overrides of a registered theme, if any. */
+export function sizesOf(name) {
+    return findTheme(name)?.sizes;
+}
 /**
  * Pick a default theme for a given system color scheme — the first registered
  * theme of that variant (`daisy-light` / `daisy-dark` under the seeded

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigx/lynx-daisyui",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "DaisyUI integration for sigx-lynx",
   "type": "module",
   "main": "./dist/index.js",
@@ -37,15 +37,15 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@sigx/lynx": "^0.4.3",
-    "@sigx/lynx-gestures": "^0.4.3",
-    "@sigx/lynx-icons": "^0.4.3",
-    "@sigx/lynx-appearance": "^0.4.3",
-    "@sigx/lynx-motion": "^0.4.3"
+    "@sigx/lynx": "^0.4.4",
+    "@sigx/lynx-appearance": "^0.4.4",
+    "@sigx/lynx-gestures": "^0.4.4",
+    "@sigx/lynx-icons": "^0.4.4",
+    "@sigx/lynx-motion": "^0.4.4"
   },
   "peerDependencies": {
     "tailwindcss": "^3.0.0 || ^4.0.0",
-    "@sigx/lynx-navigation": "^0.4.3"
+    "@sigx/lynx-navigation": "^0.4.4"
   },
   "peerDependenciesMeta": {
     "@sigx/lynx-navigation": {
@@ -56,7 +56,7 @@
     "@typescript/native-preview": "7.0.0-dev.20260521.1",
     "tailwindcss": "^4.0.0",
     "typescript": "^6.0.3",
-    "@sigx/lynx-navigation": "^0.4.3"
+    "@sigx/lynx-navigation": "^0.4.4"
   },
   "publishConfig": {
     "access": "public"
@@ -72,7 +72,7 @@
   "author": "Andreas Ekdahl",
   "license": "MIT",
   "scripts": {
-    "build": "node ../../scripts/clean.mjs dist && tsgo && node ../../scripts/copy-assets.mjs src/styles dist/styles",
+    "build": "node ../../scripts/clean.mjs dist && tsgo && node ../../scripts/copy-assets.mjs src/styles dist/styles && node scripts/gen-theme-css.mjs",
     "dev": "tsgo --watch",
     "clean": "node ../../scripts/clean.mjs dist .turbo"
   }