@sincpro/mobile-ui 0.7.2 → 1.0.1

package/dist/theme/color.js

@@ -0,0 +1,109 @@
+/**
+ * Color primitives for theme derivation (HSL). Used by buildThemeFromBrand
+ * and container/tonal helpers — keeps brand math in one place.
+ */
+export function hexToRgb(hex) {
+    const h = hex.trim().replace(/^#/, "");
+    const full = h.length === 3
+        ? h
+            .split("")
+            .map((c) => c + c)
+            .join("")
+        : h;
+    return {
+        r: Number.parseInt(full.slice(0, 2), 16),
+        g: Number.parseInt(full.slice(2, 4), 16),
+        b: Number.parseInt(full.slice(4, 6), 16),
+    };
+}
+export function rgbToHex(r, g, b) {
+    const clamp = (n) => Math.max(0, Math.min(255, Math.round(n)));
+    return ("#" +
+        [clamp(r), clamp(g), clamp(b)]
+            .map((n) => n.toString(16).padStart(2, "0"))
+            .join("")
+            .toUpperCase());
+}
+export function hexToHsl(hex) {
+    const { r, g, b } = hexToRgb(hex);
+    const rn = r / 255;
+    const gn = g / 255;
+    const bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const l = (max + min) / 2;
+    if (max === min)
+        return { h: 0, s: 0, l };
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    let h = 0;
+    if (max === rn)
+        h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;
+    else if (max === gn)
+        h = ((bn - rn) / d + 2) / 6;
+    else
+        h = ((rn - gn) / d + 4) / 6;
+    return { h: h * 360, s, l };
+}
+export function hslToHex({ h, s, l }) {
+    const hh = ((h % 360) + 360) % 360;
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const x = c * (1 - Math.abs(((hh / 60) % 2) - 1));
+    const m = l - c / 2;
+    let rn = 0;
+    let gn = 0;
+    let bn = 0;
+    if (hh < 60) {
+        rn = c;
+        gn = x;
+    }
+    else if (hh < 120) {
+        rn = x;
+        gn = c;
+    }
+    else if (hh < 180) {
+        gn = c;
+        bn = x;
+    }
+    else if (hh < 240) {
+        gn = x;
+        bn = c;
+    }
+    else if (hh < 300) {
+        rn = x;
+        bn = c;
+    }
+    else {
+        rn = c;
+        bn = x;
+    }
+    return rgbToHex((rn + m) * 255, (gn + m) * 255, (bn + m) * 255);
+}
+/** Mix two hex colors. `t=0` → a, `t=1` → b. */
+export function mixHex(a, b, t) {
+    const A = hexToRgb(a);
+    const B = hexToRgb(b);
+    const u = Math.max(0, Math.min(1, t));
+    return rgbToHex(A.r + (B.r - A.r) * u, A.g + (B.g - A.g) * u, A.b + (B.b - A.b) * u);
+}
+/** Shift lightness in HSL. delta in [-1, 1] absolute L change. */
+export function shiftLightness(hex, delta) {
+    const hsl = hexToHsl(hex);
+    return hslToHex({
+        ...hsl,
+        l: Math.max(0, Math.min(1, hsl.l + delta)),
+    });
+}
+/** Soft container fill + on-container ink (M3-style tonal pair). */
+export function containerPair(seed, mode) {
+    if (mode === "light") {
+        return {
+            container: mixHex(seed, "#FFFFFF", 0.88),
+            onContainer: shiftLightness(seed, -0.22),
+        };
+    }
+    return {
+        container: mixHex(seed, "#000000", 0.72),
+        onContainer: mixHex(seed, "#FFFFFF", 0.45),
+    };
+}

package/dist/theme/components/index.d.ts

@@ -6,4 +6,4 @@
  * Components that need access to theme tokens via hook.
  * Estos son el 1% de casos donde className no es suficiente.
  */
-export { ThemedActivityIndicator } from "../../theme/components/ThemedActivityIndicator";
+export { ThemedActivityIndicator } from "./ThemedActivityIndicator.js";

package/dist/theme/components/index.js

@@ -6,4 +6,4 @@
  * Components that need access to theme tokens via hook.
  * Estos son el 1% de casos donde className no es suficiente.
  */
-export { ThemedActivityIndicator } from "../../theme/components/ThemedActivityIndicator";
+export { ThemedActivityIndicator } from "./ThemedActivityIndicator.js";

package/dist/theme/contrast.d.ts

@@ -0,0 +1,29 @@
+/**
+ * WCAG 2.1 contrast helpers for theme authors.
+ * Used by `validateTheme` and by consumers building brand palettes.
+ */
+export declare function parseHex(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function relativeLuminance(hex: string): number;
+/** Contrast ratio between two sRGB hex colors (WCAG 2.1). */
+export declare function contrastRatio(fg: string, bg: string): number;
+export type ResolveOnColorOptions = {
+    /** Ink for light fills. Default `#FFFFFF`. */
+    light?: string;
+    /** Ink for dark/saturated fills. Default `#0A0A0A`. */
+    dark?: string;
+    /** Minimum contrast (AA body = 4.5). */
+    minRatio?: number;
+};
+/**
+ * Picks light or dark ink for text/icons on a filled surface so WCAG AA holds
+ * for any brand `primary` / `accent` / state color — not a hardcoded ink.
+ *
+ * @example
+ * text: { onPrimary: resolveOnColor("#C9A84C") } // → #0A0A0A
+ * text: { onPrimary: resolveOnColor("#0B1F4A") } // → #FFFFFF
+ */
+export declare function resolveOnColor(fill: string, options?: ResolveOnColorOptions): string;

package/dist/theme/contrast.js

@@ -0,0 +1,57 @@
+/**
+ * WCAG 2.1 contrast helpers for theme authors.
+ * Used by `validateTheme` and by consumers building brand palettes.
+ */
+export function parseHex(hex) {
+    const h = hex.trim().replace(/^#/, "");
+    const full = h.length === 3
+        ? h
+            .split("")
+            .map((c) => c + c)
+            .join("")
+        : h;
+    return {
+        r: Number.parseInt(full.slice(0, 2), 16),
+        g: Number.parseInt(full.slice(2, 4), 16),
+        b: Number.parseInt(full.slice(4, 6), 16),
+    };
+}
+export function relativeLuminance(hex) {
+    const { r, g, b } = parseHex(hex);
+    const norm = (c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * norm(r) + 0.7152 * norm(g) + 0.0722 * norm(b);
+}
+/** Contrast ratio between two sRGB hex colors (WCAG 2.1). */
+export function contrastRatio(fg, bg) {
+    const L1 = relativeLuminance(fg);
+    const L2 = relativeLuminance(bg);
+    return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
+}
+const DEFAULT_ON_LIGHT = "#FFFFFF";
+const DEFAULT_ON_DARK = "#0A0A0A";
+/**
+ * Picks light or dark ink for text/icons on a filled surface so WCAG AA holds
+ * for any brand `primary` / `accent` / state color — not a hardcoded ink.
+ *
+ * @example
+ * text: { onPrimary: resolveOnColor("#C9A84C") } // → #0A0A0A
+ * text: { onPrimary: resolveOnColor("#0B1F4A") } // → #FFFFFF
+ */
+export function resolveOnColor(fill, options = {}) {
+    const light = options.light ?? DEFAULT_ON_LIGHT;
+    const dark = options.dark ?? DEFAULT_ON_DARK;
+    const min = options.minRatio ?? 4.5;
+    const withLight = contrastRatio(light, fill);
+    const withDark = contrastRatio(dark, fill);
+    if (withLight >= min && withDark >= min) {
+        return withLight >= withDark ? light : dark;
+    }
+    if (withLight >= min)
+        return light;
+    if (withDark >= min)
+        return dark;
+    return withLight >= withDark ? light : dark;
+}

package/dist/theme/css-vars.d.ts

@@ -1,7 +1,9 @@
-import type { ThemeTokens } from "../theme/types";
+import type { ThemeTokens } from "./types.js";
 /**
  * Deriva las CSS variables (tripletes RGB para `rgb(var(--x) / <alpha>)`) a
  * partir del objeto de tokens tipado. Fuente ÚNICA: las clases (className) y el
  * objeto JS (style) salen del mismo `ThemeTokens`, sin posibilidad de divergir.
+ *
+ * State / material opacities are emitted as unitless numbers (not RGB).
  */
 export declare function themeToVars(t: ThemeTokens): Record<string, string>;

package/dist/theme/css-vars.js

@@ -6,15 +6,17 @@ function toRgbTriplet(color) {
             .map((c) => c + c)
             .join("")
         : hex;
-    const r = parseInt(full.slice(0, 2), 16);
-    const g = parseInt(full.slice(2, 4), 16);
-    const b = parseInt(full.slice(4, 6), 16);
+    const r = Number.parseInt(full.slice(0, 2), 16);
+    const g = Number.parseInt(full.slice(2, 4), 16);
+    const b = Number.parseInt(full.slice(4, 6), 16);
     return `${r} ${g} ${b}`;
 }
 /**
  * Deriva las CSS variables (tripletes RGB para `rgb(var(--x) / <alpha>)`) a
  * partir del objeto de tokens tipado. Fuente ÚNICA: las clases (className) y el
  * objeto JS (style) salen del mismo `ThemeTokens`, sin posibilidad de divergir.
+ *
+ * State / material opacities are emitted as unitless numbers (not RGB).
  */
 export function themeToVars(t) {
     const rgb = toRgbTriplet;
@@ -29,6 +31,9 @@ export function themeToVars(t) {
         "--bg-accent": rgb(t.bg.accent),
         "--bg-hover": rgb(t.bg.hover),
         "--bg-disabled": rgb(t.bg.disabled),
+        "--bg-container-lowest": rgb(t.bg.containerLowest),
+        "--bg-container": rgb(t.bg.container),
+        "--bg-container-high": rgb(t.bg.containerHigh),
         "--text-primary": rgb(t.text.primary),
         "--text-secondary": rgb(t.text.secondary),
         "--text-tertiary": rgb(t.text.tertiary),
@@ -58,6 +63,27 @@ export function themeToVars(t) {
         "--warning-light": rgb(t.warningLight),
         "--danger-light": rgb(t.dangerLight),
         "--info-light": rgb(t.infoLight),
+        "--container-primary": rgb(t.container.primary),
+        "--container-on-primary": rgb(t.container.onPrimary),
+        "--container-secondary": rgb(t.container.secondary),
+        "--container-on-secondary": rgb(t.container.onSecondary),
+        "--container-accent": rgb(t.container.accent),
+        "--container-on-accent": rgb(t.container.onAccent),
+        "--container-success": rgb(t.container.success),
+        "--container-on-success": rgb(t.container.onSuccess),
+        "--container-warning": rgb(t.container.warning),
+        "--container-on-warning": rgb(t.container.onWarning),
+        "--container-danger": rgb(t.container.danger),
+        "--container-on-danger": rgb(t.container.onDanger),
+        "--container-info": rgb(t.container.info),
+        "--container-on-info": rgb(t.container.onInfo),
+        "--state-hover": String(t.state.hover),
+        "--state-press": String(t.state.press),
+        "--state-focus": String(t.state.focus),
+        "--state-drag": String(t.state.drag),
+        "--material-blur": String(t.material.blur),
+        "--material-opacity": String(t.material.opacity),
+        "--material-border-opacity": String(t.material.borderOpacity),
         "--ring": rgb(t.ring),
         "--input": rgb(t.input),
     };

package/dist/theme/dark.d.ts

@@ -1,7 +1,6 @@
-import type { ThemeTokens } from "../theme/types";
+import type { ThemeTokens } from "./types.js";
 /**
- * SINCPRO brand-dark theme.
- * Identity: black (#0B0B0B) surfaces + neon-green (#00F58C) as primary CTA / accent.
- * Border/text tones shift to near-black warm neutrals (not blue-slate).
+ * Default dark theme. Companion to `DEFAULT_THEME`.
+ * Prefer `buildThemeFromBrand({ mode: "dark", ... })` for brand apps.
  */
 export declare const DEFAULT_DARK_THEME: ThemeTokens;

package/dist/theme/dark.js

@@ -1,63 +1,102 @@
+import { containerPair } from "./color.js";
+import { resolveOnColor } from "./contrast.js";
+/** Web UI dark palette. The same roles, measured on #181614. */
+const PRIMARY = "#8FA9E8";
+const SECONDARY = "#B0C3F1";
+const ACCENT = "#C89B3C";
+const SUCCESS = "#6FCF8B";
+const WARNING = "#E3B341";
+const DANGER = "#F08D7F";
+const INFO = "#5CC4D8";
+const INK = "#ECE8E1";
+const MUTED = "#A39B90";
+const primaryC = containerPair(PRIMARY, "dark");
+const secondaryC = containerPair(SECONDARY, "dark");
+const accentC = containerPair(ACCENT, "dark");
+const successC = containerPair(SUCCESS, "dark");
+const warningC = containerPair(WARNING, "dark");
+const dangerC = containerPair(DANGER, "dark");
+const infoC = containerPair(INFO, "dark");
 /**
- * SINCPRO brand-dark theme.
- * Identity: black (#0B0B0B) surfaces + neon-green (#00F58C) as primary CTA / accent.
- * Border/text tones shift to near-black warm neutrals (not blue-slate).
+ * Default dark theme. Companion to `DEFAULT_THEME`.
+ * Prefer `buildThemeFromBrand({ mode: "dark", ... })` for brand apps.
  */
 export const DEFAULT_DARK_THEME = {
-    name: "dark",
-    primary: "#00F58C", // verde neón → primary action in dark (border, link, focus indicator)
-    secondary: "#6B6963",
-    accent: "#00F58C",
+    name: "default-dark",
+    primary: PRIMARY,
+    secondary: SECONDARY,
+    accent: ACCENT,
     bg: {
-        page: "#0B0B0B",
-        card: "#161616",
-        popover: "#161616",
-        muted: "#1E1E1E",
-        accent: "#0D2B1F", // dark-green tint for selected/active rows
-        hover: "#262626",
-        disabled: "#161616",
-        inverse: "#0B0B0B",
+        page: "#181614",
+        card: "#221F1C",
+        popover: "#221F1C",
+        muted: "#302C28",
+        accent: primaryC.container,
+        hover: "#2A2622",
+        disabled: "#302C28",
+        inverse: "#FAF9F7",
+        containerLowest: "#141210",
+        container: "#221F1C",
+        containerHigh: "#302C28",
     },
     text: {
-        primary: "#FFFFFF",
-        secondary: "#B0B0B0",
-        tertiary: "#7D7D7D",
-        muted: "#9D9D9D",
-        accent: "#00F58C",
-        inverse: "#0B0B0B",
-        disabled: "#4A4A4A",
-        onPrimary: "#06170E", // texto sobre verde neón: oscuro para contraste
-        onSecondary: "#0B0B0B",
-        onAccent: "#06170E",
-        onDanger: "#FFFFFF",
-        onSuccess: "#FFFFFF",
+        primary: INK,
+        secondary: MUTED,
+        tertiary: "#8A8178",
+        muted: MUTED,
+        accent: PRIMARY,
+        inverse: "#0A0A0A",
+        disabled: "#8A8A8A",
+        onPrimary: resolveOnColor(PRIMARY),
+        onSecondary: resolveOnColor(SECONDARY),
+        onAccent: resolveOnColor(ACCENT),
+        onDanger: resolveOnColor(DANGER),
+        onSuccess: resolveOnColor(SUCCESS),
     },
     icon: {
-        primary: "#FFFFFF",
-        secondary: "#9A9A9A",
-        tertiary: "#7D7D7D",
-        inverse: "#0B0B0B",
-        disabled: "#4A4A4A",
+        primary: INK,
+        secondary: MUTED,
+        tertiary: "#8A8178",
+        inverse: "#0A0A0A",
+        disabled: "#8A8A8A",
     },
     border: {
-        default: "#262626",
-        light: "#1E1E1E",
-        strong: "#3A3A3A",
-        focus: "#00F58C",
+        default: "#302C28",
+        light: "#221F1C",
+        strong: "#443F38",
+        focus: PRIMARY,
     },
-    success: "#00C357",
-    warning: "#FFB020",
-    danger: "#FF4D1F",
-    info: "#5B8DEF",
-    successLight: "#0D2B1A",
-    warningLight: "#2B1E04",
-    dangerLight: "#2B0A04",
-    infoLight: "#0A143B",
-    ring: "#00F58C",
-    input: "#262626",
+    success: SUCCESS,
+    warning: WARNING,
+    danger: DANGER,
+    info: INFO,
+    successLight: successC.container,
+    warningLight: warningC.container,
+    dangerLight: dangerC.container,
+    infoLight: infoC.container,
+    container: {
+        primary: primaryC.container,
+        onPrimary: primaryC.onContainer,
+        secondary: secondaryC.container,
+        onSecondary: secondaryC.onContainer,
+        accent: accentC.container,
+        onAccent: accentC.onContainer,
+        success: successC.container,
+        onSuccess: successC.onContainer,
+        warning: warningC.container,
+        onWarning: warningC.onContainer,
+        danger: dangerC.container,
+        onDanger: dangerC.onContainer,
+        info: infoC.container,
+        onInfo: infoC.onContainer,
+    },
+    state: { hover: 0.1, press: 0.16, focus: 0.14, drag: 0.2 },
+    material: { blur: 28, opacity: 0.62, borderOpacity: 0.22 },
+    ring: PRIMARY,
+    input: "#302C28",
     gradient: {
-        primary: ["#22E584", "#00F58C"], // verde gradient → primary btn en dark = CTA verde
-        accent: ["#22E584", "#00F58C"],
+        primary: ["#1C3765", PRIMARY],
+        accent: [ACCENT, "#DBB055"],
     },
     shadow: {
         sm: {
@@ -82,4 +121,8 @@ export const DEFAULT_DARK_THEME = {
             elevation: 7,
         },
     },
+    pattern: {
+        mode: "dark-pattern",
+        size: 56,
+    },
 };

package/dist/theme/default.d.ts

@@ -1,2 +1,6 @@
-import type { ThemeTokens } from "../theme/types";
+import type { ThemeTokens } from "./types.js";
+/**
+ * Default light theme. Sample values — not the framework identity.
+ * Prefer `buildThemeFromBrand` or `extendTheme` at app boot.
+ */
 export declare const DEFAULT_THEME: ThemeTokens;

package/dist/theme/default.js

@@ -1,64 +1,108 @@
+import { containerPair } from "./color.js";
+import { resolveOnColor } from "./contrast.js";
+/** Web UI light palette. Gold is a fill, never a border or a label. */
+const PRIMARY = "#2A4A85";
+const SECONDARY = "#1C3765";
+const ACCENT = "#C89B3C";
+const SUCCESS = "#2F6B3C";
+const WARNING = "#7E5E12";
+const DANGER = "#9B3B30";
+const INFO = "#0F5C6E";
+const INK = "#1A1714";
+const MUTED = "#6B6459";
+const primaryC = containerPair(PRIMARY, "light");
+const secondaryC = containerPair(SECONDARY, "light");
+const accentC = containerPair(ACCENT, "light");
+const successC = containerPair(SUCCESS, "light");
+const warningC = containerPair(WARNING, "light");
+const dangerC = containerPair(DANGER, "light");
+const infoC = containerPair(INFO, "light");
+/**
+ * Default light theme. Sample values — not the framework identity.
+ * Prefer `buildThemeFromBrand` or `extendTheme` at app boot.
+ */
 export const DEFAULT_THEME = {
-    name: "default",
-    primary: "#2563EB",
-    secondary: "#64748B",
-    accent: "#F59E0B",
+    name: "default-light",
+    primary: PRIMARY,
+    secondary: SECONDARY,
+    accent: ACCENT,
     bg: {
-        page: "#F0F1F3",
+        page: "#FAF9F7",
         card: "#FFFFFF",
         popover: "#FFFFFF",
-        muted: "#F3F4F6",
-        accent: "#EFF6FF",
-        hover: "#F3F4F6",
-        disabled: "#F3F4F6",
-        inverse: "#0E1714",
+        muted: "#F3F0EA",
+        accent: primaryC.container,
+        hover: "#EBE6DE",
+        disabled: "#E4DFD7",
+        inverse: "#181614",
+        containerLowest: "#FAF9F7",
+        container: "#F3F0EA",
+        containerHigh: "#E4DFD7",
     },
     text: {
-        primary: "#0F172A",
-        secondary: "#475569",
-        tertiary: "#94A3B8",
-        muted: "#64748B",
-        accent: "#1E40AF",
+        primary: INK,
+        secondary: MUTED,
+        tertiary: "#A39B90",
+        muted: MUTED,
+        accent: PRIMARY,
         inverse: "#FFFFFF",
-        disabled: "#94A3B8",
+        disabled: "#A39B90",
         onPrimary: "#FFFFFF",
         onSecondary: "#FFFFFF",
-        onAccent: "#FFFFFF",
-        onDanger: "#FFFFFF",
-        onSuccess: "#FFFFFF",
+        onAccent: "#1A1714",
+        onDanger: resolveOnColor(DANGER),
+        onSuccess: resolveOnColor(SUCCESS),
     },
     icon: {
-        primary: "#0F172A",
-        secondary: "#64748B",
-        tertiary: "#94A3B8",
+        primary: INK,
+        secondary: MUTED,
+        tertiary: "#A39B90",
         inverse: "#FFFFFF",
-        disabled: "#CBD5E1",
+        disabled: "#A39B90",
     },
     border: {
-        default: "#E5E7EB",
-        light: "#F3F4F6",
-        strong: "#D1D5DB",
-        focus: "#2563EB",
+        default: "#E4DFD7",
+        light: "#F3F0EA",
+        strong: "#D5CEC2",
+        focus: PRIMARY,
     },
-    success: "#16A34A",
-    warning: "#F59E0B",
-    danger: "#DC2626",
-    info: "#2563EB",
-    successLight: "#DCFCE7",
-    warningLight: "#FEF3C7",
-    dangerLight: "#FEE2E2",
-    infoLight: "#DBEAFE",
-    ring: "#2563EB",
-    input: "#E5E7EB",
+    success: SUCCESS,
+    warning: WARNING,
+    danger: DANGER,
+    info: INFO,
+    successLight: successC.container,
+    warningLight: warningC.container,
+    dangerLight: dangerC.container,
+    infoLight: infoC.container,
+    container: {
+        primary: primaryC.container,
+        onPrimary: primaryC.onContainer,
+        secondary: secondaryC.container,
+        onSecondary: secondaryC.onContainer,
+        accent: accentC.container,
+        onAccent: accentC.onContainer,
+        success: successC.container,
+        onSuccess: successC.onContainer,
+        warning: warningC.container,
+        onWarning: warningC.onContainer,
+        danger: dangerC.container,
+        onDanger: dangerC.onContainer,
+        info: infoC.container,
+        onInfo: infoC.onContainer,
+    },
+    state: { hover: 0.08, press: 0.12, focus: 0.12, drag: 0.16 },
+    material: { blur: 24, opacity: 0.78, borderOpacity: 0.18 },
+    ring: PRIMARY,
+    input: "#E4DFD7",
     gradient: {
-        primary: ["#2563EB", "#1E40AF"],
-        accent: ["#F59E0B", "#D97706"],
+        primary: [SECONDARY, PRIMARY],
+        accent: ["#B88A2E", ACCENT],
     },
     shadow: {
         sm: {
             shadowColor: "#000000",
             shadowOffset: { width: 0, height: 1 },
-            shadowOpacity: 0.05,
+            shadowOpacity: 0.06,
             shadowRadius: 2,
             elevation: 1,
         },
@@ -72,9 +116,13 @@ export const DEFAULT_THEME = {
         lg: {
             shadowColor: "#000000",
             shadowOffset: { width: 0, height: 10 },
-            shadowOpacity: 0.1,
+            shadowOpacity: 0.14,
             shadowRadius: 15,
             elevation: 5,
         },
     },
+    pattern: {
+        mode: "light-pattern",
+        size: 56,
+    },
 };

package/dist/theme/define.d.ts

@@ -1,10 +1,13 @@
-import type { ThemeTokens } from "../theme/types";
+import type { ThemeTokens } from "./types.js";
 export type DeepPartial<T> = {
     [K in keyof T]?: T[K] extends readonly unknown[] ? T[K] : T[K] extends object ? DeepPartial<T[K]> : T[K];
 };
 /**
  * Defines a complete, typed theme (powerful API: the framework parametrizes
  * every token explicitly).
+ *
+ * Tip for brand palettes: set on-colors with `resolveOnColor` from
+ * `@sincpro/mobile-ui/theme` so light and dark brand fills both stay WCAG AA.
  */
 export declare function defineTheme(tokens: ThemeTokens): ThemeTokens;
 /**

package/dist/theme/define.js

@@ -1,4 +1,4 @@
-import { DEFAULT_THEME } from "../theme/default";
+import { DEFAULT_THEME } from "./default.js";
 function isPlainObject(v) {
     return typeof v === "object" && v !== null && !Array.isArray(v);
 }
@@ -15,6 +15,9 @@ function deepMerge(base, override) {
 /**
  * Defines a complete, typed theme (powerful API: the framework parametrizes
  * every token explicitly).
+ *
+ * Tip for brand palettes: set on-colors with `resolveOnColor` from
+ * `@sincpro/mobile-ui/theme` so light and dark brand fills both stay WCAG AA.
  */
 export function defineTheme(tokens) {
     return tokens;