@sigx/lynx-daisyui 0.4.3 → 0.4.5

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/preset/index.js

@@ -39,6 +39,23 @@ const daisyColors = {
     'error': 'var(--color-error)',
     'error-content': 'var(--color-error-content)',
 };
+/**
+ * Text ramp → token map. Re-points Tailwind's `text-xs`…`text-3xl` font-size
+ * utilities at the daisy `--text-*` custom properties (defaults in
+ * `styles/themes/tokens.css`, multiplied app-wide by the controller's
+ * `fontScale`). Symmetric with `daisyColors`: a single source of truth. Merged
+ * via `theme.extend.fontSize`, so the larger Tailwind keys (`text-4xl`+) keep
+ * their rem defaults.
+ */
+const daisyFontSizes = {
+    'xs': 'var(--text-xs)',
+    'sm': 'var(--text-sm)',
+    'base': 'var(--text-base)',
+    'lg': 'var(--text-lg)',
+    'xl': 'var(--text-xl)',
+    '2xl': 'var(--text-2xl)',
+    '3xl': 'var(--text-3xl)',
+};
 const lynxLayoutPlugin = plugin(({ addUtilities }) => {
     addUtilities({
         // Long-form flex-fill — the Lynx-correct "take remaining space along
@@ -58,6 +75,7 @@ export const DaisyLynxPreset = {
     theme: {
         extend: {
             colors: daisyColors,
+            fontSize: daisyFontSizes,
         },
     },
     plugins: [lynxLayoutPlugin],

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/components/typography.css

@@ -1,5 +1,6 @@
 /*
- * Daisy semantic color utilities.
+ * Daisy typography utilities — semantic colors, plus the font-size ramp and
+ * font weights (the latter two at the end of this file).
  *
  *   bg-<token>:   every token in DAISY_COLOR_TOKEN_LIST (semantics +
  *                 their -content variants, plus the three base surfaces
@@ -64,3 +65,27 @@
 .bg-warning-content { background-color: var(--color-warning-content); }
 .bg-error { background-color: var(--color-error); }
 .bg-error-content { background-color: var(--color-error-content); }
+
+/* Font-size ramp — always-on for the same reason as the colors above: the
+ * `<Text>` / `<Heading>` components compose `text-<size>` class names
+ * dynamically, which a consumer's Tailwind content scanner can't see, so the
+ * utilities would otherwise be purged and text falls back to Lynx's native
+ * size. These mirror the preset's `text-* → var(--text-*)` mapping (kept in
+ * sync), reading the `--text-*` tokens from `themes/tokens.css` (scaled by the
+ * controller's `fontScale`). A consumer that DOES scan the package source just
+ * regenerates the identical rule — harmless. */
+.text-xs { font-size: var(--text-xs); }
+.text-sm { font-size: var(--text-sm); }
+.text-base { font-size: var(--text-base); }
+.text-lg { font-size: var(--text-lg); }
+.text-xl { font-size: var(--text-xl); }
+.text-2xl { font-size: var(--text-2xl); }
+.text-3xl { font-size: var(--text-3xl); }
+
+/* Font weights — always-on for the same reason (composed by `<Text weight>` /
+ * `<Heading>`). Values match Tailwind's `font-*` scale. */
+.font-light { font-weight: 300; }
+.font-normal { font-weight: 400; }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: 700; }

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,21 +8,47 @@
  * 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;
   --size-lg: 64px;
 
-  /* ── Font sizes ── */
+  /* ── Text ramp (public <Text> / <Heading> sizes) ──
+   * The xs→3xl scale the `text-*` utilities resolve to (the daisy preset maps
+   * Tailwind's fontSize keys onto these vars). Literal px so they resolve on
+   * the first paint, like every other structural token. Anchored on a 17px
+   * base — the iOS HIG Body size, so bare <Text> (the default) reads as native
+   * body — and stepped as an even ~1.2 modular scale (each step ≈1.17–1.21×).
+   *
+   * The controller's `fontScale` multiplies this ramp app-wide; <ThemeProvider>
+   * re-emits the literals in JS (no `calc(var() * n)` — unproven in Lynx).
+   * NOTE: keep in sync with FONT_DEFAULTS in theme/ThemeProvider.tsx. */
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 17px;
+  --text-lg: 20px;
+  --text-xl: 24px;
+  --text-2xl: 28px;
+  --text-3xl: 34px;
+
+  /* ── Font sizes (control-internal: button / input / badge labels) ──
+   * A separate axis from the text ramp above and deliberately NOT scaled with
+   * it — control chrome stays fixed. Kept as independent literals (no
+   * var→var indirection; unproven in Lynx) even though values mirror the ramp. */
   --font-xs: 12px;
   --font-sm: 14px;
   --font-md: 14px;
@@ -41,27 +67,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

@@ -88,6 +88,19 @@ export interface ThemeController {
      * with no `initial` prop. Useful for a "Reset to system" button.
      */
     followSystem(): void;
+    /**
+     * Current global text-scale multiplier (`1` = the theme's default ramp).
+     * Reactive — read inside render/effect to track. Orthogonal to the theme:
+     * `set()` / `toggle()` leave it untouched.
+     */
+    readonly fontScale: number;
+    /**
+     * Set the global text-scale multiplier — the `--text-*` ramp is re-emitted
+     * at `defaultPx × scale`. Persists across theme switches, so it's the place
+     * to wire a user accessibility preference or a backend-driven setting (e.g.
+     * `setFontScale(1.25)`). Inherits into nested `<ThemeProvider>` subtrees.
+     */
+    setFontScale(scale: number): void;
 }
 /**
  * Access the active daisyui theme controller. Resolves to the nearest
@@ -118,6 +131,13 @@ Define.Prop<'initial', DaisyTheme, false>
  * while `followingSystem` is true.
  */
  & Define.Prop<'dark', DaisyTheme, false>
+/**
+ * Initial global text-scale multiplier (`1` = default ramp). Seeds the
+ * controller's `fontScale`; change it later via `controller.setFontScale()`.
+ * On the root provider an explicit value wins over any scale a headless
+ * caller set before mount.
+ */
+ & Define.Prop<'fontScale', number, false>
 /** Extra classes appended to the theme class on the host view. */
  & Define.Prop<'class', string, false>
 /** Extra inline style on the host view. Merged after the base flex-fill defaults. */
@@ -138,5 +158,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,95 @@ 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 { globalThemeState, makeThemeController, themeController, } from './theme-state.js';
+import { colorsOf, isBuiltInTheme, pickThemeFor, radiusOf, sizesOf, variantOf, } from './registry.js';
+import { globalThemeState, makeThemeController, normalizeFontScale, 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,
+};
+// Default text ramp (px) — MUST mirror `--text-*` in `styles/themes/tokens.css`
+// (iOS-aligned, 17px base). The global `fontScale` multiplies these and emits
+// literal px (no `calc(var() * n)` — unproven in Lynx).
+const FONT_DEFAULTS = {
+    'xs': 12, 'sm': 14, 'base': 17, 'lg': 20, 'xl': 24, '2xl': 28, '3xl': 34,
+};
+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`;
+        }
+    }
+}
+/**
+ * Emit the text ramp scaled by `fontScale` as `--text-*` literal px. Always
+ * emits every step — even at `1` (the literal defaults) — because Lynx's
+ * `setProperty` only merges and never clears: skipping at `1` would leave a
+ * previously-emitted larger ramp stuck after a reset. A nested provider seeds
+ * its scale from the inherited ambient value, so emitting here re-states the
+ * same ramp rather than clobbering the root's scaled one.
+ */
+function applyFontScale(style, fontScale) {
+    for (const k in FONT_DEFAULTS) {
+        style[`--text-${k}`] = `${Math.round(FONT_DEFAULTS[k] * fontScale)}px`;
+    }
+}
+/**
+ * The full custom-property set for a theme — colors, any radius/size overrides,
+ * and the `fontScale`-adjusted text ramp. 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, fontScale) {
+    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);
+    applyFontScale(vars, fontScale);
+    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
@@ -57,6 +144,13 @@ export const useTheme = defineInjectable(() => themeController);
  * global theme or the system bars.
  */
 const useThemeDepth = defineInjectable(() => 0);
+/**
+ * Ambient text scale inherited by nested providers. A nested `<ThemeProvider>`
+ * with no explicit `fontScale` prop seeds from this (the enclosing scale,
+ * default 1) instead of resetting to 1 — so the root's scale flows down through
+ * color sub-scopes. Each provider re-provides its own current scale.
+ */
+const useAmbientFontScale = defineInjectable(() => 1);
 /**
  * Wraps children in a `<view class={theme}>` so the daisyui CSS variables
  * defined inside the theme class inherit down to every descendant.
@@ -82,15 +176,24 @@ 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}`;
+    // A nested provider with no explicit `fontScale` inherits the enclosing
+    // scale (default 1 at the root), so the root's scale flows down through
+    // color sub-scopes rather than resetting. An explicit prop overrides it.
+    const ambientFontScale = useAmbientFontScale();
+    const seedScale = normalizeFontScale(props.fontScale, ambientFontScale);
     const state = isRoot
         ? globalThemeState
         : signal(props.initial
-            ? { name: props.initial, following: false }
+            ? { name: props.initial, following: false, fontScale: seedScale }
             : {
                 name: readScheme() === 'dark'
                     ? (props.dark ?? pickThemeFor('dark'))
                     : (props.light ?? pickThemeFor('light')),
                 following: true,
+                fontScale: seedScale,
             });
     // Seed the root from props/system. An explicit `initial` pin is author
     // intent and wins. With no `initial`, reflect the current system scheme into
@@ -107,11 +210,18 @@ export const ThemeProvider = component(({ props, slots }) => {
                 ? (props.dark ?? pickThemeFor('dark'))
                 : (props.light ?? pickThemeFor('light'));
         }
+        // Explicit author intent wins; otherwise keep whatever scale a headless
+        // caller may have set before this mounted (default 1).
+        if (props.fontScale !== undefined) {
+            state.fontScale = normalizeFontScale(props.fontScale, state.fontScale);
+        }
     }
     const controller = isRoot
         ? themeController
         : makeThemeController(state);
     defineProvide(useTheme, () => controller);
+    // Re-provide this scope's current scale so nested providers inherit it.
+    defineProvide(useAmbientFontScale, () => state.fontScale);
     // Wire the daisy color resolver into `@sigx/lynx-icons`'s injectable
     // so any `<Icon variant="primary">` rendered inside this subtree gets
     // the daisy primary hex automatically. Reading `state.name` inside
@@ -135,6 +245,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 +260,43 @@ 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`
+        // and `state.fontScale` (via buildThemeVars) tracks them, so this
+        // re-runs on every theme change and every `setFontScale`.
+        applyVars = effect(() => {
+            const vars = buildThemeVars(state.name, state.fontScale);
+            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 +307,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/dist/theme/theme-state.d.ts

@@ -3,7 +3,21 @@ import type { DaisyTheme, ThemeController } from './ThemeProvider.js';
 export interface ThemeState {
     name: DaisyTheme;
     following: boolean;
+    /**
+     * Global text-scale multiplier applied on top of the theme's `--text-*`
+     * ramp. Orthogonal to `name`: a theme switch / `toggle()` leaves it
+     * untouched, so a user/accessibility scale persists across appearance
+     * changes. `1` = the default ramp.
+     */
+    fontScale: number;
 }
+/**
+ * Coerce a font-scale input to a valid positive, finite multiplier. Rejects
+ * `NaN`, `±Infinity`, and non-positive values — which would otherwise emit
+ * invalid CSS (`NaNpx`, negative font sizes) and break `fontScale === 1`
+ * comparisons — by returning `fallback` instead.
+ */
+export declare function normalizeFontScale(value: unknown, fallback?: number): number;
 /**
  * Build a `ThemeController` over a given state object. Used for both the global
  * singleton (below) and each nested `<ThemeProvider>`'s local state — same

package/dist/theme/theme-state.js

@@ -20,6 +20,17 @@
  */
 import { signal } from '@sigx/lynx';
 import { pairOf, pickThemeFor } from './registry.js';
+/**
+ * Coerce a font-scale input to a valid positive, finite multiplier. Rejects
+ * `NaN`, `±Infinity`, and non-positive values — which would otherwise emit
+ * invalid CSS (`NaNpx`, negative font sizes) and break `fontScale === 1`
+ * comparisons — by returning `fallback` instead.
+ */
+export function normalizeFontScale(value, fallback = 1) {
+    return typeof value === 'number' && Number.isFinite(value) && value > 0
+        ? value
+        : fallback;
+}
 /**
  * Build a `ThemeController` over a given state object. Used for both the global
  * singleton (below) and each nested `<ThemeProvider>`'s local state — same
@@ -34,6 +45,9 @@ export function makeThemeController(state) {
         get followingSystem() {
             return state.following;
         },
+        get fontScale() {
+            return state.fontScale;
+        },
         set(next) {
             state.name = next;
             state.following = false;
@@ -45,6 +59,10 @@ export function makeThemeController(state) {
         followSystem() {
             state.following = true;
         },
+        setFontScale(scale) {
+            // Ignore invalid input (keep the current scale) so state stays valid.
+            state.fontScale = normalizeFontScale(scale, state.fontScale);
+        },
     };
 }
 // Object signal (not primitive) so the `DaisyTheme` literal union survives —
@@ -54,6 +72,7 @@ export function makeThemeController(state) {
 const state = signal({
     name: pickThemeFor('light'),
     following: true,
+    fontScale: 1,
 });
 /**
  * The backing signal for the global theme. Read/written by the root

package/dist/typography/Text.js

@@ -8,11 +8,21 @@ const weightClasses = {
     light: 'font-light', normal: 'font-normal', medium: 'font-medium',
     semibold: 'font-semibold', bold: 'font-bold',
 };
+// A `text-<size>` font-size utility already present in `class` (the common
+// `class="text-sm"` override idiom). The trailing `(?![\w-])` guard excludes
+// color tokens like `text-base-content`, so they don't suppress the default.
+const SIZE_IN_CLASS = /(?:^|\s)text-(?:xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)(?![\w-])/;
 export const Text = component(({ props, slots }) => {
     const getClasses = () => {
         const c = [];
+        // Defined default: `base` (--text-base, 17px) so text has a token-driven
+        // size instead of Lynx's native <text> default — unless the caller set an
+        // explicit `size` prop or already passed a `text-*` size through `class`
+        // (avoids emitting two conflicting font-size utilities).
         if (props.size)
             c.push(sizeClasses[props.size]);
+        else if (!(props.class && SIZE_IN_CLASS.test(props.class)))
+            c.push(sizeClasses.base);
         if (props.weight)
             c.push(weightClasses[props.weight]);
         if (props.color)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigx/lynx-daisyui",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "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.5",
+    "@sigx/lynx-appearance": "^0.4.5",
+    "@sigx/lynx-gestures": "^0.4.5",
+    "@sigx/lynx-icons": "^0.4.5",
+    "@sigx/lynx-motion": "^0.4.5"
   },
   "peerDependencies": {
     "tailwindcss": "^3.0.0 || ^4.0.0",
-    "@sigx/lynx-navigation": "^0.4.3"
+    "@sigx/lynx-navigation": "^0.4.5"
   },
   "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.5"
   },
   "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"
   }