@sigx/lynx-daisyui 0.4.4 → 0.4.5

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/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/themes/tokens.css

@@ -27,7 +27,28 @@
   --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;

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. */

package/dist/theme/ThemeProvider.js

@@ -39,7 +39,7 @@ import { component, defineInjectable, defineProvide, effect, onMounted, onUnmoun
 import { useIconColorResolver } from '@sigx/lynx-icons';
 import { useSystemColorScheme } from '@sigx/lynx-appearance';
 import { colorsOf, isBuiltInTheme, pickThemeFor, radiusOf, sizesOf, variantOf, } from './registry.js';
-import { globalThemeState, makeThemeController, themeController, } from './theme-state.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
@@ -54,6 +54,12 @@ const SELECTOR_STEPS = {
     '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;
@@ -78,14 +84,28 @@ function applySizeVars(style, sizes) {
     }
 }
 /**
- * The full custom-property set for a theme — colors plus any radius/size
- * overrides. Applied at runtime via the Lynx `setProperty` API (see
+ * 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) {
+function buildThemeVars(name, fontScale) {
     const palette = colorsOf(name) ?? colorsOf('daisy-light');
     const radius = radiusOf(name);
     const sizes = sizesOf(name);
@@ -102,6 +122,7 @@ function buildThemeVars(name) {
     }
     if (sizes)
         applySizeVars(vars, sizes);
+    applyFontScale(vars, fontScale);
     return vars;
 }
 /** Unique host id per provider instance so `getElementById` targets its own subtree. */
@@ -123,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.
@@ -151,15 +179,21 @@ export const ThemeProvider = component(({ props, slots }) => {
     // 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
@@ -176,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
@@ -224,9 +265,10 @@ export const ThemeProvider = component(({ props, slots }) => {
         // `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.
+        // 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);
+            const vars = buildThemeVars(state.name, state.fontScale);
             if (typeof lynx !== 'undefined') {
                 lynx.getElementById(hostId)?.setProperty(vars);
             }

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.4",
+  "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.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"
+    "@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.4"
+    "@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.4"
+    "@sigx/lynx-navigation": "^0.4.5"
   },
   "publishConfig": {
     "access": "public"