@sincpro/mobile-ui 0.7.2 → 1.0.1

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,14 +1,14 @@
-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 const fontWeights: {
     readonly light: "300";
@@ -421,7 +421,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" | "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;

package/dist/theme/typography.js

@@ -1,29 +1,28 @@
-import { FiraCode_400Regular, FiraCode_500Medium } from "@expo-google-fonts/fira-code";
-import { Inter_300Light, Inter_400Regular, Inter_500Medium, Inter_600SemiBold, Inter_800ExtraBold, useFonts, } from "@expo-google-fonts/inter";
+import { IBMPlexMono_400Regular, IBMPlexMono_500Medium, } from "@expo-google-fonts/ibm-plex-mono";
+import { IBMPlexSans_300Light, IBMPlexSans_400Regular, IBMPlexSans_500Medium, IBMPlexSans_600SemiBold, IBMPlexSans_700Bold, useFonts, } from "@expo-google-fonts/ibm-plex-sans";
 const DEFAULT_FONT_FAMILIES = {
-    light: "Inter_300Light",
-    regular: "Inter_400Regular",
-    medium: "Inter_500Medium",
-    semiBold: "Inter_600SemiBold",
-    extraBold: "Inter_800ExtraBold",
-    mono: "FiraCode_400Regular",
-    monoMedium: "FiraCode_500Medium",
-    // Title roles default to Inter until the app wires its brand typeface via configureFonts.
-    titleRegular: "Inter_400Regular",
-    titleMedium: "Inter_500Medium",
-    title: "Inter_600SemiBold",
-    titleBlack: "Inter_800ExtraBold",
+    light: "IBMPlexSans_300Light",
+    regular: "IBMPlexSans_400Regular",
+    medium: "IBMPlexSans_500Medium",
+    semiBold: "IBMPlexSans_600SemiBold",
+    extraBold: "IBMPlexSans_700Bold",
+    mono: "IBMPlexMono_400Regular",
+    monoMedium: "IBMPlexMono_500Medium",
+    titleRegular: "IBMPlexSans_400Regular",
+    titleMedium: "IBMPlexSans_500Medium",
+    title: "IBMPlexSans_600SemiBold",
+    titleBlack: "IBMPlexSans_700Bold",
 };
 export const fontFamilies = { ...DEFAULT_FONT_FAMILIES };
 /**
  * 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 function configureFonts(overrides) {
     Object.assign(fontFamilies, overrides);
 }
-/** 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 function resetFonts() {
     Object.assign(fontFamilies, DEFAULT_FONT_FAMILIES);
 }
@@ -75,7 +74,7 @@ export const letterSpacing = {
 };
 /* -------------------- Typography Variants -------------------- */
 export const typographyVariants = {
-    // Display (Satoshi Black — brand character)
+    // Display (titleBlack role — typically the brand display typeface)
     display: {
         fontSize: fontSizes["7xl"],
         fontFamily: fontFamilies.titleBlack,
@@ -83,7 +82,7 @@ export const typographyVariants = {
         lineHeight: fontSizes["7xl"] * lineHeights.tight,
         letterSpacing: letterSpacing.tight,
     },
-    // Headings (Satoshi Bold)
+    // Headings (title role)
     h1: {
         fontSize: fontSizes["5xl"],
         fontFamily: fontFamilies.title,
@@ -290,18 +289,17 @@ export const createCustomTextStyle = (fontSize, fontFamily, options) => {
  * depending directly on expo-font — it's already a transitive dep via this package. */
 export { useFonts };
 /* -------------------- Font Loader (optional, convenience) ------------------
- * Loads the recommended base fonts (Inter + Fira Code) declared as peer deps.
- * The "title" role (e.g. Satoshi) is loaded and wired by the app/Storybook
- * via `configureFonts` — the DS never bundles font files. */
+ * Loads IBM Plex Sans and IBM Plex Mono, the same faces web UI uses.
+ * An app can still point a role at another loaded family with `configureFonts`. */
 export const useAppFonts = () => {
     const [loaded] = useFonts({
-        FiraCode_400Regular,
-        FiraCode_500Medium,
-        Inter_300Light,
-        Inter_400Regular,
-        Inter_500Medium,
-        Inter_600SemiBold,
-        Inter_800ExtraBold,
+        IBMPlexMono_400Regular,
+        IBMPlexMono_500Medium,
+        IBMPlexSans_300Light,
+        IBMPlexSans_400Regular,
+        IBMPlexSans_500Medium,
+        IBMPlexSans_600SemiBold,
+        IBMPlexSans_700Bold,
     });
     return loaded;
 };

package/dist/theme/useTheme.d.ts

@@ -1,3 +1,3 @@
-import type { ThemeTokens } from "../theme/types";
+import type { ThemeTokens } from "./types.js";
 export declare function useTheme(): ThemeTokens;
 export declare const theme: ThemeTokens;

package/dist/theme/useTheme.js

@@ -1,4 +1,4 @@
-import { getActiveTheme, getThemeVersion, subscribeTheme, } from "../theme/active";
+import { getActiveTheme, getThemeVersion, subscribeTheme, } from "./active.js";
 import { useSyncExternalStore } from "react";
 export function useTheme() {
     useSyncExternalStore(subscribeTheme, getThemeVersion, getThemeVersion);

package/dist/theme/validate.d.ts

@@ -0,0 +1,16 @@
+import type { ThemeTokens } from "./types.js";
+type Issue = {
+    path: string;
+    message: string;
+};
+/**
+ * Lightweight sanity checks on a theme. Returns a list of issues; empty array means OK.
+ * Not a hard validator — we don't want to over-constrain creative themes — just guards
+ * against the common silent failures (typos in hex, negative sizes, missing primary,
+ * WCAG P0 contrast violations on the key on-color pairs, semantic token collisions).
+ *
+ * Triggered automatically by `setActiveTheme` in dev mode (skipped under Node, since
+ * tests intentionally pass partial themes). Can also be called directly.
+ */
+export declare function validateTheme(theme: Partial<ThemeTokens>): Issue[];
+export {};