@sincpro/mobile-ui 0.7.2 → 1.1.0

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;

package/dist/theme/globals.css

@@ -1,67 +1,82 @@
-/**
- * AUTO-GENERATED from apk/domains/index.ts
- * Active Domain: distribution
- */
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 :root {
-  /* Primary Colors */
-  --primary: 37 99 235;
-  --secondary: 107 114 128;
-  --accent: 249 115 22;
+  /* Fallback CSS vars — runtime source of truth is themeToVars(activeTheme). */
+  --primary: 42 74 133;
+  --secondary: 28 55 101;
+  --accent: 200 155 60;
 
-  /* Backgrounds */
-  --bg-page: 249 250 251;
+  --bg-page: 250 249 247;
   --bg-card: 255 255 255;
   --bg-popover: 255 255 255;
-  --bg-muted: 243 244 246;
-  --bg-accent: 219 234 254;
-  --bg-hover: 243 244 246;
-  --bg-disabled: 249 250 251;
+  --bg-muted: 243 240 234;
+  --bg-accent: 232 236 245;
+  --bg-hover: 235 230 222;
+  --bg-disabled: 228 223 215;
+  --bg-container-lowest: 250 249 247;
+  --bg-container: 243 240 234;
+  --bg-container-high: 228 223 215;
 
-  /* Text */
-  --text-primary: 17 24 39;
-  --text-secondary: 107 114 128;
-  --text-tertiary: 156 163 175;
-  --text-muted: 107 114 128;
-  --text-accent: 30 64 175;
+  --text-primary: 26 23 20;
+  --text-secondary: 107 100 89;
+  --text-tertiary: 163 155 144;
+  --text-muted: 107 100 89;
+  --text-accent: 42 74 133;
   --text-inverse: 255 255 255;
-  --text-disabled: 209 213 219;
+  --text-disabled: 163 155 144;
   --text-on-primary: 255 255 255;
   --text-on-secondary: 255 255 255;
-  --text-on-accent: 255 255 255;
+  --text-on-accent: 26 23 20;
   --text-on-danger: 255 255 255;
   --text-on-success: 255 255 255;
 
-  /* Icons */
-  --icon-primary: 17 24 39;
-  --icon-secondary: 107 114 128;
-  --icon-tertiary: 156 163 175;
+  --icon-primary: 26 23 20;
+  --icon-secondary: 107 100 89;
+  --icon-tertiary: 163 155 144;
   --icon-inverse: 255 255 255;
-  --icon-disabled: 209 213 219;
+  --icon-disabled: 163 155 144;
+
+  --border-default: 228 223 215;
+  --border-light: 243 240 234;
+  --border-strong: 213 206 194;
+  --border-focus: 42 74 133;
+
+  --ring: 42 74 133;
+  --input: 228 223 215;
+
+  --success: 47 107 60;
+  --warning: 126 94 18;
+  --danger: 155 59 48;
+  --info: 15 92 110;
 
-  /* Borders */
-  --border-default: 229 231 235;
-  --border-light: 243 244 246;
-  --border-strong: 209 213 219;
-  --border-focus: 37 99 235;
+  --success-light: 232 240 234;
+  --warning-light: 245 236 214;
+  --danger-light: 246 232 229;
+  --info-light: 226 238 241;
 
-  /* Focus & Input */
-  --ring: 37 99 235;
-  --input: 229 231 235;
+  --container-primary: 232 236 245;
+  --container-on-primary: 28 55 101;
+  --container-secondary: 226 232 242;
+  --container-on-secondary: 26 23 20;
+  --container-accent: 248 240 220;
+  --container-on-accent: 26 23 20;
+  --container-success: 232 240 234;
+  --container-on-success: 47 107 60;
+  --container-warning: 245 236 214;
+  --container-on-warning: 126 94 18;
+  --container-danger: 246 232 229;
+  --container-on-danger: 155 59 48;
+  --container-info: 226 238 241;
+  --container-on-info: 15 92 110;
 
-  /* Semantic */
-  --success: 16 185 129;
-  --warning: 249 115 22;
-  --danger: 239 68 68;
-  --info: 37 99 235;
+  --state-hover: 0.08;
+  --state-press: 0.12;
+  --state-focus: 0.12;
+  --state-drag: 0.16;
 
-  /* Semantic Light */
-  --success-light: 209 250 229;
-  --warning-light: 255 237 213;
-  --danger-light: 254 226 226;
-  --info-light: 219 234 254;
+  --material-blur: 24;
+  --material-opacity: 0.78;
+  --material-border-opacity: 0.18;
 }

package/dist/theme/index.d.ts

@@ -1,10 +1,14 @@
-export { getActiveTheme, setActiveTheme, subscribeTheme, } from "../theme/active";
-export { ThemedActivityIndicator } from "../theme/components";
-export { themeToVars } from "../theme/css-vars";
-export { DEFAULT_DARK_THEME } from "../theme/dark";
-export { DEFAULT_THEME } from "../theme/default";
-export { type DeepPartial, defineTheme, extendTheme, mergeTheme, } from "../theme/define";
-export { theme } from "../theme/theme";
-export type { ShadowStyle, ThemeTokens } from "../theme/types";
-export { configureFonts, fontFamilies, type FontRole, resetFonts, useAppFonts, variantFontRole, } from "../theme/typography";
-export { useTheme } from "../theme/useTheme";
+export { getActiveTheme, setActiveTheme, subscribeTheme, } from "./active.js";
+export { type BrandThemeMode, buildThemeFromBrand, type BuildThemeFromBrandOptions, } from "./build.js";
+export { containerPair, hexToHsl, hexToRgb, type Hsl, hslToHex, mixHex, rgbToHex, shiftLightness, } from "./color.js";
+export { ThemedActivityIndicator } from "./components/index.js";
+export { contrastRatio, relativeLuminance, resolveOnColor, type ResolveOnColorOptions, } from "./contrast.js";
+export { themeToVars } from "./css-vars.js";
+export { DEFAULT_DARK_THEME } from "./dark.js";
+export { DEFAULT_THEME } from "./default.js";
+export { type DeepPartial, defineTheme, extendTheme, mergeTheme, } from "./define.js";
+export { theme } from "./theme.js";
+export type { PatternMode, ShadowStyle, ThemeTokens } from "./types.js";
+export { configureFonts, fontFamilies, type FontRole, resetFonts, useAppFonts, variantFontRole, } from "./typography.js";
+export { useTheme } from "./useTheme.js";
+export { validateTheme } from "./validate.js";

package/dist/theme/index.js

@@ -1,9 +1,13 @@
-export { getActiveTheme, setActiveTheme, subscribeTheme, } from "../theme/active";
-export { ThemedActivityIndicator } from "../theme/components";
-export { themeToVars } from "../theme/css-vars";
-export { DEFAULT_DARK_THEME } from "../theme/dark";
-export { DEFAULT_THEME } from "../theme/default";
-export { defineTheme, extendTheme, mergeTheme, } from "../theme/define";
-export { theme } from "../theme/theme";
-export { configureFonts, fontFamilies, resetFonts, useAppFonts, variantFontRole, } from "../theme/typography";
-export { useTheme } from "../theme/useTheme";
+export { getActiveTheme, setActiveTheme, subscribeTheme, } from "./active.js";
+export { buildThemeFromBrand, } from "./build.js";
+export { containerPair, hexToHsl, hexToRgb, hslToHex, mixHex, rgbToHex, shiftLightness, } from "./color.js";
+export { ThemedActivityIndicator } from "./components/index.js";
+export { contrastRatio, relativeLuminance, resolveOnColor, } from "./contrast.js";
+export { themeToVars } from "./css-vars.js";
+export { DEFAULT_DARK_THEME } from "./dark.js";
+export { DEFAULT_THEME } from "./default.js";
+export { defineTheme, extendTheme, mergeTheme, } from "./define.js";
+export { theme } from "./theme.js";
+export { configureFonts, fontFamilies, resetFonts, useAppFonts, variantFontRole, } from "./typography.js";
+export { useTheme } from "./useTheme.js";
+export { validateTheme } from "./validate.js";

package/dist/theme/theme.d.ts

@@ -7,7 +7,7 @@
  * SOLO usar cuando className no es suficiente (RefreshControl, placeholderColor, etc.)
  *
  * @example
- * import { theme } from "../theme";
+ * import { theme } from "./index.js";
  * const color = theme.primary;
  */
 export declare const theme: import("./types").ThemeTokens;

package/dist/theme/theme.js

@@ -7,8 +7,8 @@
  * SOLO usar cuando className no es suficiente (RefreshControl, placeholderColor, etc.)
  *
  * @example
- * import { theme } from "../theme";
+ * import { theme } from "./index.js";
  * const color = theme.primary;
  */
-import { getActiveTheme } from "../theme/active";
+import { getActiveTheme } from "./active.js";
 export const theme = getActiveTheme();

package/dist/theme/types.d.ts

@@ -1,11 +1,22 @@
 /**
  * ============================================================================
- * THEME SYSTEM - SIMPLE & SEMANTIC
+ * THEME SYSTEM — semantic + container (M3-era) tokens
  * ============================================================================
  *
- * Simplified theming system without hooks or context.
- * Tokens are read directly from the active theme.
+ * Layers (framework contract, mid-2026):
+ * 1. Semantic fills — `primary` / `accent` / `secondary` / state hues (chrome, CTAs).
+ * 2. Containers — soft tonal surfaces + `on*` ink (badges, chips, tonal buttons).
+ * 3. Surfaces — `bg.*` including tonal `containerLowest|container|containerHigh`.
+ * 4. State layers — opacity overlays for press/hover/focus (Material state layers).
+ * 5. Material — nav-chrome hints for Liquid Glass / blur peers (optional usage).
+ *
+ * Color roles:
+ * - Fills/borders/tracks → `primary` / `accent` (never body text).
+ * - Brand text/links → `text.accent` (AA on `bg.page` / `bg.card`).
+ * - Ink on filled brand → `text.onPrimary` via `resolveOnColor`.
+ * - Ink on soft containers → `container.onPrimary` / `container.onSuccess` / …
  */
+import type { ImageSourcePropType } from "react-native";
 export interface ShadowStyle {
     shadowColor: string;
     shadowOffset: {
@@ -17,15 +28,13 @@ export interface ShadowStyle {
     elevation: number;
 }
 export interface ThemeTokens {
-    /** Theme name */
     name: string;
-    /** Primary color - main buttons, links, active states */
+    /** Primary fill — CTA surfaces, active tracks, decorative borders. Not for body text. */
     primary: string;
-    /** Secondary color - secondary buttons, low-profile elements (gray) */
+    /** Secondary fill — low-profile surfaces and secondary actions. */
     secondary: string;
-    /** Accent color - highlights, important badges, secondary CTAs (orange/indigo) */
+    /** Accent fill — highlights, secondary CTAs, decorative chrome. Not for body text. */
     accent: string;
-    /** Backgrounds */
     bg: {
         page: string;
         card: string;
@@ -34,9 +43,16 @@ export interface ThemeTokens {
         accent: string;
         hover: string;
         disabled: string;
+        /** Opposite / hero surface (AppBar tone="dark"). Light themes: dark; dark themes: light. */
         inverse?: string;
+        /**
+         * Tonal elevation ladder (M3 surfaceContainer*). Prefer these over stacking
+         * shadows for hierarchy on mobile.
+         */
+        containerLowest: string;
+        container: string;
+        containerHigh: string;
     };
-    /** Text */
     text: {
         primary: string;
         secondary: string;
@@ -51,7 +67,6 @@ export interface ThemeTokens {
         onDanger: string;
         onSuccess: string;
     };
-    /** Icons */
     icon: {
         primary: string;
         secondary: string;
@@ -59,35 +74,81 @@ export interface ThemeTokens {
         inverse: string;
         disabled: string;
     };
-    /** Borders */
     border: {
         default: string;
         light: string;
         strong: string;
         focus: string;
     };
-    /** Semantic states */
     success: string;
     warning: string;
     danger: string;
     info: string;
-    /** Semantic states - light variants */
+    /**
+     * @deprecated Prefer `container.success`. Kept for NativeWind `bg-success-light`
+     * back-compat; defaults stay in sync with container fills.
+     */
     successLight: string;
+    /** @deprecated Prefer `container.warning`. */
     warningLight: string;
+    /** @deprecated Prefer `container.danger`. */
     dangerLight: string;
+    /** @deprecated Prefer `container.info`. */
     infoLight: string;
-    /** Focus & Input */
+    /**
+     * Soft tonal fills + on-colors — badges, chips, tonal CTAs, selected rows.
+     * Prefer these over saturated `success` + white for body-sized labels.
+     */
+    container: {
+        primary: string;
+        onPrimary: string;
+        secondary: string;
+        onSecondary: string;
+        accent: string;
+        onAccent: string;
+        success: string;
+        onSuccess: string;
+        warning: string;
+        onWarning: string;
+        danger: string;
+        onDanger: string;
+        info: string;
+        onInfo: string;
+    };
+    /**
+     * State-layer opacities (Material 3). Overlay brand/on-surface at this alpha
+     * for press/hover/focus — do not invent per-component opacities.
+     */
+    state: {
+        hover: number;
+        press: number;
+        focus: number;
+        drag: number;
+    };
+    /**
+     * Nav-chrome material hints (iOS Liquid Glass / frosted bars). Opt-in peers
+     * (`expo-glass-effect`) read these; content layers stay solid `bg.*`.
+     */
+    material: {
+        blur: number;
+        opacity: number;
+        borderOpacity: number;
+    };
     ring: string;
     input: string;
-    /** Gradients (for LinearGradient) */
     gradient: {
         primary: readonly [string, string];
         accent: readonly [string, string];
     };
-    /** Shadows (React Native) */
     shadow: {
         sm: ShadowStyle;
         md: ShadowStyle;
         lg: ShadowStyle;
     };
+    pattern?: {
+        mode: PatternMode;
+        size: number;
+        source?: ImageSourcePropType;
+    };
 }
+export type PatternMode = "light-pattern" | "dark-pattern" | "dark-full";

package/dist/theme/types.js

@@ -1,9 +1,19 @@
 /**
  * ============================================================================
- * THEME SYSTEM - SIMPLE & SEMANTIC
+ * THEME SYSTEM — semantic + container (M3-era) tokens
  * ============================================================================
  *
- * Simplified theming system without hooks or context.
- * Tokens are read directly from the active theme.
+ * Layers (framework contract, mid-2026):
+ * 1. Semantic fills — `primary` / `accent` / `secondary` / state hues (chrome, CTAs).
+ * 2. Containers — soft tonal surfaces + `on*` ink (badges, chips, tonal buttons).
+ * 3. Surfaces — `bg.*` including tonal `containerLowest|container|containerHigh`.
+ * 4. State layers — opacity overlays for press/hover/focus (Material state layers).
+ * 5. Material — nav-chrome hints for Liquid Glass / blur peers (optional usage).
+ *
+ * Color roles:
+ * - Fills/borders/tracks → `primary` / `accent` (never body text).
+ * - Brand text/links → `text.accent` (AA on `bg.page` / `bg.card`).
+ * - Ink on filled brand → `text.onPrimary` via `resolveOnColor`.
+ * - Ink on soft containers → `container.onPrimary` / `container.onSuccess` / …
  */
 export {};

package/dist/theme/typography.d.ts

@@ -1,15 +1,16 @@
-import { useFonts } from "@expo-google-fonts/inter";
+import { useFonts } from "@expo-google-fonts/ibm-plex-sans";
 import type { TextStyle } from "react-native";
 export type FontRole = "light" | "regular" | "medium" | "semiBold" | "extraBold" | "mono" | "monoMedium" | "titleRegular" | "titleMedium" | "title" | "titleBlack";
 export declare const fontFamilies: Record<FontRole, string>;
 /**
  * Override DS font family names (role → already-loaded family name).
  * Mutates the singleton in-place so components pick up the change at render time.
- * Example: `configureFonts({ title: "Satoshi-Bold", titleBlack: "Satoshi-Black" })`.
+ * Example: `configureFonts({ title: "YourBrandTitle-Bold", titleBlack: "YourBrandDisplay-Black" })`.
  */
 export declare function configureFonts(overrides: Partial<Record<FontRole, string>>): void;
-/** Reset all font roles to the defaults (Inter + Fira Code). Useful in tests and stories. */
+/** Reset all font roles to the defaults (IBM Plex Sans + IBM Plex Mono). Useful in tests and stories. */
 export declare function resetFonts(): void;
+export declare function resolveTextFontFamily(variant: keyof typeof typographyVariants, bold?: boolean, semibold?: boolean): string;
 export declare const fontWeights: {
     readonly light: "300";
     readonly regular: "400";
@@ -103,6 +104,13 @@ export declare const typographyVariants: {
         readonly lineHeight: number;
         readonly letterSpacing: 0;
     };
+    readonly bodyReadable: {
+        readonly fontSize: 17;
+        readonly fontFamily: string;
+        readonly fontWeight: "400";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0;
+    };
     readonly bodyLarge: {
         readonly fontSize: 16;
         readonly fontFamily: string;
@@ -314,6 +322,13 @@ export declare const Typography: {
             readonly lineHeight: number;
             readonly letterSpacing: 0;
         };
+        readonly bodyReadable: {
+            readonly fontSize: 17;
+            readonly fontFamily: string;
+            readonly fontWeight: "400";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0;
+        };
         readonly bodyLarge: {
             readonly fontSize: 16;
             readonly fontFamily: string;
@@ -421,7 +436,7 @@ export declare const Typography: {
             readonly letterSpacing: 0;
         };
     };
-    readonly variantFontRole: Record<"button" | "title" | "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "bodyLarge" | "body" | "bodySmall" | "label" | "labelSmall" | "data" | "dataLarge" | "overline" | "caption" | "captionSmall" | "buttonSmall" | "buttonLarge" | "subtitle", FontRole>;
+    readonly variantFontRole: Record<"label" | "button" | "title" | "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "bodyReadable" | "bodyLarge" | "body" | "bodySmall" | "labelSmall" | "data" | "dataLarge" | "overline" | "caption" | "captionSmall" | "buttonSmall" | "buttonLarge" | "subtitle", FontRole>;
     readonly createTextStyle: (variant: keyof typeof typographyVariants, overrides?: Partial<TextStyle>) => TextStyle;
     readonly createCustomTextStyle: (fontSize: keyof typeof fontSizes, fontFamily: keyof typeof fontFamilies, options?: {
         lineHeight?: keyof typeof lineHeights;