@bacon-pos/ui 0.1.0

package/src/components/brand/generated/FlagUs.tsx

@@ -0,0 +1,7 @@
+import Svg, { G, Rect, Mask, Path, Defs, LinearGradient, Stop } from "react-native-svg";
+/* SVGR has dropped some elements not supported by react-native-svg: filter */
+import type { SvgProps } from "react-native-svg";
+const FlagUs = (props: SvgProps) => <Svg viewBox="0 0 33.5997 23.9998" fill="none" {...props}><G id="US"><Rect id="Mask" x={0.0000243634} width={33.5997} height={23.9998} rx={1.71429} fill="white" /><Mask id="mask0_8024_16523" style={{
+      maskType: "luminance"
+    }} maskUnits="userSpaceOnUse" x={0} y={0} width={34} height={24}><Rect id="Mask_2" x={0.0000243634} width={33.5997} height={23.9998} rx={1.71429} fill="white" /></Mask><G mask="url(#mask0_8024_16523)"><Path id="Rectangle 511" d="M33.5996 24H2.43634e-05V22.3994H33.5996V24ZM33.5996 20.7998H2.43634e-05V19.2002H33.5996V20.7998ZM33.5996 17.5996H2.43634e-05V16H33.5996V17.5996ZM33.5996 14.3994H2.43634e-05V12.7998H33.5996V14.3994ZM33.5996 11.2002H2.43634e-05V9.59961H33.5996V11.2002ZM33.5996 8H2.43634e-05V6.40039H33.5996V8ZM33.5996 4.7998H2.43634e-05V3.2002H33.5996V4.7998ZM33.5996 1.59961H2.43634e-05V0H33.5996V1.59961Z" fill="#D02F44" /><Rect id="Rectangle 511_2" x={0.0000243634} width={14.3999} height={11.1999} fill="#46467F" /><G id="Oval 43" filter="url(#filter0_d_8024_16523)"><Path d="M2.39984 8.00027C2.84166 8.00027 3.19964 8.35825 3.19964 8.80007C3.19957 9.24183 2.84162 9.59988 2.39984 9.59988C1.95815 9.59978 1.60011 9.24177 1.60003 8.80007C1.60003 8.35831 1.9581 8.00037 2.39984 8.00027ZM5.60003 8.00027C6.04186 8.00027 6.39984 8.35825 6.39984 8.80007C6.39976 9.24183 6.04181 9.59988 5.60003 9.59988C5.15829 9.59984 4.8003 9.24181 4.80023 8.80007C4.80023 8.35827 5.15824 8.00031 5.60003 8.00027ZM8.80023 8.00027C9.24195 8.0004 9.60003 8.35833 9.60003 8.80007C9.59996 9.24175 9.2419 9.59975 8.80023 9.59988C8.35845 9.59988 8.0005 9.24183 8.00043 8.80007C8.00043 8.35825 8.35841 8.00027 8.80023 8.00027ZM12.0004 8.00027C12.4421 8.00049 12.8002 8.35839 12.8002 8.80007C12.8002 9.2417 12.442 9.59966 12.0004 9.59988C11.5586 9.59988 11.1997 9.24183 11.1996 8.80007C11.1996 8.35825 11.5586 8.00027 12.0004 8.00027ZM4.00043 6.39968C4.44194 6.39993 4.80007 6.75796 4.80023 7.19949C4.80023 7.64116 4.44204 8.00002 4.00043 8.00027C3.5586 8.00027 3.19964 7.64131 3.19964 7.19949C3.19981 6.7578 3.5587 6.39968 4.00043 6.39968ZM7.19964 6.39968C7.64137 6.39968 8.00026 6.7578 8.00043 7.19949C8.00043 7.64131 7.64147 8.00027 7.19964 8.00027C6.75798 8.00008 6.39984 7.6412 6.39984 7.19949C6.4 6.75792 6.75808 6.39987 7.19964 6.39968ZM10.3998 6.39968C10.8416 6.39968 11.1995 6.7578 11.1996 7.19949C11.1996 7.64131 10.8417 8.00027 10.3998 8.00027C9.95803 8.00025 9.60003 7.6413 9.60003 7.19949C9.6002 6.75781 9.95813 6.3997 10.3998 6.39968ZM2.39984 4.80007C2.84165 4.80007 3.19962 5.15807 3.19964 5.59988C3.19964 6.0417 2.84166 6.39968 2.39984 6.39968C1.9581 6.39958 1.60003 6.04164 1.60003 5.59988C1.60005 5.15813 1.95811 4.80017 2.39984 4.80007ZM5.60003 4.80007C6.04185 4.80007 6.39982 5.15807 6.39984 5.59988C6.39984 6.0417 6.04186 6.39968 5.60003 6.39968C5.15824 6.39964 4.80023 6.04168 4.80023 5.59988C4.80025 5.15809 5.15826 4.80011 5.60003 4.80007ZM8.80023 4.80007C9.24193 4.8002 9.60001 5.15815 9.60003 5.59988C9.60003 6.04162 9.24195 6.39955 8.80023 6.39968C8.35841 6.39968 8.00043 6.0417 8.00043 5.59988C8.00044 5.15807 8.35842 4.80007 8.80023 4.80007ZM12.0004 4.80007C12.442 4.80029 12.8002 5.15821 12.8002 5.59988C12.8002 6.04156 12.4421 6.39946 12.0004 6.39968C11.5586 6.39968 11.1996 6.0417 11.1996 5.59988C11.1997 5.15807 11.5586 4.80007 12.0004 4.80007ZM4.00043 3.19949C4.44188 3.19974 4.79997 3.55784 4.80023 3.99929C4.80023 4.44096 4.44204 4.79982 4.00043 4.80007C3.5586 4.80007 3.19964 4.44112 3.19964 3.99929C3.1999 3.55769 3.55876 3.19949 4.00043 3.19949ZM7.19964 3.19949C7.64131 3.19949 8.00017 3.55769 8.00043 3.99929C8.00043 4.44112 7.64147 4.80007 7.19964 4.80007C6.75798 4.79989 6.39984 4.441 6.39984 3.99929C6.4001 3.5578 6.75814 3.19967 7.19964 3.19949ZM10.3998 3.19949C10.8415 3.19949 11.1994 3.55769 11.1996 3.99929C11.1996 4.44112 10.8417 4.80007 10.3998 4.80007C9.95803 4.80006 9.60003 4.4411 9.60003 3.99929C9.60029 3.5577 9.95819 3.1995 10.3998 3.19949ZM2.39984 1.59988C2.8416 1.59988 3.19954 1.95794 3.19964 2.39968C3.19964 2.84151 2.84166 3.19949 2.39984 3.19949C1.9581 3.19938 1.60003 2.84144 1.60003 2.39968C1.60014 1.95801 1.95816 1.59998 2.39984 1.59988ZM5.60003 1.59988C6.04179 1.59988 6.39972 1.95796 6.39984 2.39968C6.39984 2.84151 6.04186 3.19949 5.60003 3.19949C5.15824 3.19945 4.80023 2.84148 4.80023 2.39968C4.80034 1.95798 5.15831 1.59992 5.60003 1.59988ZM8.80023 1.59988C9.24187 1.6 9.59992 1.95803 9.60003 2.39968C9.60003 2.84143 9.24195 3.19936 8.80023 3.19949C8.35841 3.19949 8.00043 2.84151 8.00043 2.39968C8.00054 1.95796 8.35848 1.59988 8.80023 1.59988ZM12.0004 1.59988C12.442 1.6001 12.8001 1.95809 12.8002 2.39968C12.8002 2.84137 12.4421 3.19926 12.0004 3.19949C11.5586 3.19949 11.1996 2.84151 11.1996 2.39968C11.1998 1.95796 11.5587 1.59988 12.0004 1.59988Z" fill="url(#paint0_linear_8024_16523)" /></G></G></G><Defs><LinearGradient id="paint0_linear_8024_16523" x1={1.60003} y1={1.59988} x2={1.60003} y2={9.59988} gradientUnits="userSpaceOnUse"><Stop stopColor="white" /><Stop offset={1} stopColor="#F0F0F0" /></LinearGradient></Defs></Svg>;
+export default FlagUs;

package/src/components/brand/generated/Mastercard.tsx

@@ -0,0 +1,4 @@
+import Svg, { G, Path, Defs, ClipPath, Rect } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+const Mastercard = (props: SvgProps) => <Svg viewBox="0 0 64 39.5537" fill="none" {...props}><G id="Logo" clipPath="url(#clip0_8024_16507)"><Path id="Right" d="M64 19.7768C64 30.709 55.1554 39.5537 44.2232 39.5537C39.6086 39.5537 35.3786 37.9605 32.0275 35.3236C36.6421 31.6979 39.5537 26.0944 39.5537 19.7768C39.5537 13.4592 36.5872 7.85581 32.0275 4.23006C35.3786 1.59315 39.6086 7.62939e-06 44.2232 7.62939e-06C55.1554 7.62939e-06 64 8.89958 64 19.7768Z" fill="#F79E1B" /><Path id="Middle" d="M32.0275 4.23005C32.0275 4.23005 32.0275 4.23005 32.0275 4.23005C36.5872 7.8558 39.5537 13.4592 39.5537 19.7768C39.5537 26.0944 36.6421 31.6979 32.0275 35.3236L31.9724 35.3236C27.4128 31.7528 24.4464 26.0945 24.4464 19.7769C24.4464 13.4594 27.4129 7.85592 31.9725 4.23017C31.9725 4.23013 31.9726 4.23021 31.9725 4.23017L32.0275 4.23005Z" fill="#FF5F00" /><Path id="Left" d="M24.4464 19.7769C24.4464 13.4594 27.4129 7.85592 31.9725 4.23017C28.6215 1.59326 24.3914 0.00012207 19.7768 0.00012207C8.84464 0.00012207 0 8.84476 0 19.7769C0 30.7091 8.84464 39.5538 19.7768 39.5538C24.3914 39.5538 28.6215 37.9607 31.9725 35.3237C27.4129 31.7529 24.4464 26.0945 24.4464 19.7769Z" fill="#EB001B" /></G><Defs><ClipPath id="clip0_8024_16507"><Rect width={64} height={39.5537} fill="white" /></ClipPath></Defs></Svg>;
+export default Mastercard;

package/src/components/brand/generated/Visa.tsx

@@ -0,0 +1,4 @@
+import Svg, { G, Path, Defs, LinearGradient, Stop, ClipPath, Rect } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+const Visa = (props: SvgProps) => <Svg viewBox="0 0 74 23.9492" fill="none" {...props}><G id="Logo" clipPath="url(#clip0_8024_16511)"><G id="Shape"><Path d="M53.7973 0.987003C52.6149 0.517917 50.7395 -1.06803e-05 48.4207 -1.06803e-05C42.5009 -1.06803e-05 38.3322 3.15673 38.3066 7.66991C38.2575 10.9997 41.2913 12.8492 43.5603 13.9594C45.8795 15.094 46.6679 15.8345 46.6679 16.8457C46.6443 18.3989 44.7939 19.1148 43.068 19.1148C40.6747 19.1148 39.3923 18.7457 37.4435 17.8816L36.6542 17.5112L35.8153 22.7154C37.2213 23.3559 39.8116 23.9243 42.5009 23.9492C48.7907 23.9492 52.8857 20.8413 52.9342 16.0318C52.9581 13.3927 51.3561 11.3705 47.9024 9.71802C45.8058 8.65725 44.5218 7.94198 44.5218 6.85663C44.5464 5.86995 45.6078 4.85933 47.9745 4.85933C49.9233 4.80983 51.3552 5.27826 52.4398 5.74702L52.982 5.9932L53.7973 0.987003Z" fill="url(#paint0_linear_8024_16511)" /><Path d="M32.0666 23.6037H26.0721L29.8215 0.420231H35.8157L32.0666 23.6037Z" fill="url(#paint1_linear_8024_16511)" /><Path fillRule="evenodd" clipRule="evenodd" d="M69.1639 0.420231H64.5272C63.0973 0.420231 62.011 0.839162 61.3941 2.34377L52.49 23.6034H58.7798C58.7798 23.6034 59.8154 20.742 60.0379 20.1257H67.7344C67.9065 20.9397 68.4496 23.6034 68.4496 23.6034H74L69.1639 0.420231ZM61.7645 15.3906C62.2581 14.0588 64.1577 8.90408 64.1577 8.90408C64.1478 8.92392 64.225 8.70976 64.3402 8.39041L64.3416 8.38651L64.3425 8.38394C64.5146 7.90693 64.77 7.19891 64.9464 6.68453L65.3654 8.68215C65.3654 8.68215 66.5005 14.2315 66.747 15.3906H61.7645Z" fill="url(#paint2_linear_8024_16511)" /><Path d="M21.0652 0.420231L15.1946 16.2292L14.5531 13.0229L14.5525 13.0209L12.4565 2.36902C12.1113 0.888333 11.0505 0.469073 9.74326 0.420231H0.098668L0 0.88866C2.35228 1.49018 4.45618 2.35698 6.29963 3.43472L11.6425 23.5791H17.9816L27.4039 0.420231H21.0652Z" fill="url(#paint3_linear_8024_16511)" /></G></G><Defs><LinearGradient id="paint0_linear_8024_16511" x1={-4.75714e-8} y1={12.025} x2={74} y2={12.025} gradientUnits="userSpaceOnUse"><Stop stopColor="#222357" /><Stop offset={1} stopColor="#254AA5" /></LinearGradient><LinearGradient id="paint1_linear_8024_16511" x1={-4.75714e-8} y1={12.025} x2={74} y2={12.025} gradientUnits="userSpaceOnUse"><Stop stopColor="#222357" /><Stop offset={1} stopColor="#254AA5" /></LinearGradient><LinearGradient id="paint2_linear_8024_16511" x1={-4.75714e-8} y1={12.025} x2={74} y2={12.025} gradientUnits="userSpaceOnUse"><Stop stopColor="#222357" /><Stop offset={1} stopColor="#254AA5" /></LinearGradient><LinearGradient id="paint3_linear_8024_16511" x1={-4.75714e-8} y1={12.025} x2={74} y2={12.025} gradientUnits="userSpaceOnUse"><Stop stopColor="#222357" /><Stop offset={1} stopColor="#254AA5" /></LinearGradient><ClipPath id="clip0_8024_16511"><Rect width={74} height={23.9492} fill="white" /></ClipPath></Defs></Svg>;
+export default Visa;

package/src/components/brand/index.ts

@@ -0,0 +1,3 @@
+export { Logo, type LogoProps, type LogoName } from './Logo';
+export { Flag, type FlagProps, type FlagCountry } from './Flag';
+export { graphics, type GraphicName, type Graphic } from './registry';

package/src/components/brand/registry.ts

@@ -0,0 +1,27 @@
+import type { ComponentType } from 'react';
+import type { SvgProps } from 'react-native-svg';
+import Visa from './generated/Visa';
+import Mastercard from './generated/Mastercard';
+import FlagUs from './generated/FlagUs';
+import FlagBr from './generated/FlagBr';
+
+export interface Graphic {
+  Component: ComponentType<SvgProps>;
+  /** width / height of the artwork, for aspect-correct sizing. */
+  aspect: number;
+}
+
+/**
+ * Multicolor brand assets as real react-native-svg components (generated by
+ * SVGR — see `pnpm gen:graphics`). Unlike icons these are NOT rendered via
+ * SvgXml, because runtime XML parsing does not reliably render gradients,
+ * clip-paths and masks across dev/build and native/web.
+ */
+export const graphics = {
+  visa: { Component: Visa, aspect: 74 / 23.949 },
+  mastercard: { Component: Mastercard, aspect: 64 / 39.5537 },
+  'flag-us': { Component: FlagUs, aspect: 33.5997 / 23.9998 },
+  'flag-br': { Component: FlagBr, aspect: 33.5997 / 23.9998 },
+} satisfies Record<string, Graphic>;
+
+export type GraphicName = keyof typeof graphics;

package/src/components/index.ts

@@ -0,0 +1,19 @@
+export * from './Avatar';
+export * from './brand';
+export * from './Button';
+export * from './Card';
+export * from './Checkbox';
+export * from './Chip';
+export * from './CodeInput';
+export * from './Icon';
+export * from './IconButton';
+export * from './Input';
+export * from './LinkButton';
+export * from './ProductCard';
+export * from './QuantityStepper';
+export * from './Radio';
+export * from './Surface';
+export * from './Switch';
+export * from './Text';
+
+export type { LabelPosition } from './_internal/Labeled';

package/src/index.tsx

@@ -0,0 +1,7 @@
+/**
+ * @bacon-pos/ui — Bacon POS design system for React Native.
+ *
+ * Public entry point. Everything importable from the package is re-exported here.
+ */
+export * from './theme';
+export * from './components';

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,66 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { lightTheme, darkTheme, type Theme } from './themes';
+
+const ThemeContext = createContext<Theme>(lightTheme);
+
+/** Recursive partial — lets you override just the theme keys you care about. */
+export type DeepPartial<T> = {
+  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function deepMerge<T>(base: T, override?: DeepPartial<T>): T {
+  if (!override) return base;
+  const result = { ...base } as Record<string, unknown>;
+  for (const key of Object.keys(override)) {
+    const baseValue = (base as Record<string, unknown>)[key];
+    const overrideValue = (override as Record<string, unknown>)[key];
+    result[key] =
+      isPlainObject(baseValue) && isPlainObject(overrideValue)
+        ? deepMerge(baseValue, overrideValue as DeepPartial<typeof baseValue>)
+        : overrideValue;
+  }
+  return result as T;
+}
+
+export interface ThemeProviderProps {
+  /** Selects a built-in theme. Ignored when `theme` is provided. Defaults to 'light'. */
+  mode?: 'light' | 'dark';
+  /** Provide a fully custom theme object to replace the built-ins. */
+  theme?: Theme;
+  /**
+   * Deep-merge partial overrides onto the base theme. Applies globally to every
+   * component (current and future), so you can inject a custom typography scale,
+   * font family, or brand colors in one place:
+   *
+   * ```tsx
+   * <ThemeProvider overrides={{ fontFamily: { regular: 'Poppins-Regular' } }}>
+   * ```
+   */
+  overrides?: DeepPartial<Theme>;
+  children: React.ReactNode;
+}
+
+export function ThemeProvider({
+  mode = 'light',
+  theme,
+  overrides,
+  children,
+}: ThemeProviderProps) {
+  const value = useMemo<Theme>(() => {
+    const base = theme ?? (mode === 'dark' ? darkTheme : lightTheme);
+    return overrides ? deepMerge(base, overrides) : base;
+  }, [mode, theme, overrides]);
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+/** Access the active theme from any component rendered inside a ThemeProvider. */
+export function useTheme(): Theme {
+  return useContext(ThemeContext);
+}
+
+export { ThemeContext };

package/src/theme/index.ts

@@ -0,0 +1,31 @@
+export { palette, type Palette } from './palette';
+export {
+  spacing,
+  radii,
+  space,
+  SPACING_BASE,
+  type SpacingToken,
+  type RadiusToken,
+} from './spacing';
+export {
+  typography,
+  fontFamily,
+  fontWeight,
+  type TypographyVariant,
+  type FontWeightToken,
+} from './typography';
+export {
+  lightTheme,
+  darkTheme,
+  themes,
+  textStyle,
+  type Theme,
+  type SemanticColors,
+} from './themes';
+export {
+  ThemeProvider,
+  useTheme,
+  ThemeContext,
+  type ThemeProviderProps,
+  type DeepPartial,
+} from './ThemeProvider';

package/src/theme/palette.ts

@@ -0,0 +1,89 @@
+/**
+ * Primitive color palette — extracted from the Bacon POS Figma design system.
+ * These are raw values; consume them through the semantic `theme.colors` API
+ * (see `themes.ts`) rather than referencing palette steps directly in components.
+ */
+export const palette = {
+  primary: {
+    50: '#FFE6EB',
+    100: '#FFCCD8',
+    200: '#FF99B0',
+    300: '#FF6689',
+    400: '#FF3361',
+    500: '#FF003A',
+    600: '#CC002E',
+    700: '#990023',
+    800: '#660017',
+    900: '#33000C',
+    950: '#190006',
+  },
+  accent: {
+    50: '#FAFFE6',
+    100: '#F4FFCC',
+    200: '#E9FF99',
+    300: '#DFFF66',
+    400: '#D4FF33',
+    500: '#C9FF00',
+    600: '#A1CC00',
+    700: '#799900',
+    800: '#506600',
+    900: '#283300',
+    950: '#141900',
+  },
+  neutral: {
+    50: '#F9FAFB',
+    100: '#F2F4F7',
+    200: '#E5E7EB',
+    300: '#D1D5DB',
+    400: '#9CA3AF',
+    500: '#6B7280',
+    600: '#4B5563',
+    700: '#374151',
+    800: '#292D32',
+    900: '#121416',
+    950: '#101214',
+  },
+  success: {
+    50: '#E6F4EE',
+    100: '#CCE8DD',
+    200: '#99D1BC',
+    300: '#66BA9A',
+    400: '#33A379',
+    500: '#008C57',
+    600: '#007046',
+    700: '#005434',
+    800: '#003823',
+    900: '#001C11',
+    950: '#000E09',
+  },
+  warning: {
+    50: '#FEF5E7',
+    100: '#FDECD0',
+    200: '#FBD9A1',
+    300: '#F8C571',
+    400: '#F6B242',
+    500: '#F49F13',
+    600: '#C37F0F',
+    700: '#925F0B',
+    800: '#624008',
+    900: '#312004',
+    950: '#181002',
+  },
+  error: {
+    50: '#FAE6E9',
+    100: '#F6CCD2',
+    200: '#EC99A5',
+    300: '#E36679',
+    400: '#D9334C',
+    500: '#D0001F',
+    600: '#A60019',
+    700: '#7D0013',
+    800: '#53000C',
+    900: '#2A0006',
+    950: '#150003',
+  },
+  black: '#000000',
+  white: '#FFFFFF',
+} as const;
+
+export type Palette = typeof palette;

package/src/theme/spacing.ts

@@ -0,0 +1,37 @@
+/**
+ * Spacing scale — base unit 4px (Figma spacing tokens: 1=4, 2=8, 2.5=10, 4=16...).
+ * Use `space(n)` for arbitrary multiples of the base unit, or the named `spacing`
+ * tokens for consistent component padding/margins.
+ */
+export const SPACING_BASE = 4;
+
+export const space = (multiplier: number): number => multiplier * SPACING_BASE;
+
+export const spacing = {
+  none: 0,
+  xxs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  '2xl': 32,
+  '3xl': 40,
+  '4xl': 48,
+  '5xl': 64,
+} as const;
+
+export const radii = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  '2xl': 24,
+  '3xl': 32,
+  pill: 9999,
+  full: 9999,
+} as const;
+
+export type SpacingToken = keyof typeof spacing;
+export type RadiusToken = keyof typeof radii;

package/src/theme/themes.ts

@@ -0,0 +1,248 @@
+import type { TextStyle } from 'react-native';
+import { palette } from './palette';
+import { spacing, radii } from './spacing';
+import {
+  typography,
+  fontFamily,
+  fontWeight,
+  type TypographyVariant,
+  type FontWeightToken,
+} from './typography';
+
+/**
+ * Semantic color contract. Components read from this — never from `palette`
+ * directly — so light/dark and future brand themes stay swappable.
+ */
+export interface SemanticColors {
+  background: {
+    default: string;
+    subtle: string;
+    muted: string;
+    inverse: string;
+  };
+  text: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    inverse: string;
+    disabled: string;
+  };
+  border: {
+    default: string;
+    subtle: string;
+    strong: string;
+    focus: string;
+  };
+  brand: {
+    primary: string;
+    primaryHover: string;
+    primaryActive: string;
+    onPrimary: string;
+    accent: string;
+    accentSubtle: string;
+    onAccent: string;
+  };
+  feedback: {
+    success: string;
+    successSubtle: string;
+    warning: string;
+    warningSubtle: string;
+    error: string;
+    errorSubtle: string;
+    onFeedback: string;
+  };
+  /** Interactive control fills (buttons). Mirrors Figma `action/*` tokens. */
+  action: {
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    inverse: string;
+    inverseForeground: string;
+  };
+  /** Stateful control fills (success / destructive buttons). Mirrors Figma `state/*`. */
+  state: {
+    success: string;
+    successForeground: string;
+    successSubtle: string;
+    successSubtleForeground: string;
+    destructiveSubtle: string;
+    destructiveSubtleForeground: string;
+  };
+  /** Disabled control tokens. Mirrors Figma `disabled/*`. */
+  disabled: {
+    foreground: string;
+    background: string;
+    backgroundStrong: string;
+    border: string;
+  };
+}
+
+export interface Theme {
+  mode: 'light' | 'dark';
+  colors: SemanticColors;
+  spacing: typeof spacing;
+  radii: typeof radii;
+  typography: typeof typography;
+  fontFamily: typeof fontFamily;
+  fontWeight: typeof fontWeight;
+}
+
+const shared = {
+  spacing,
+  radii,
+  typography,
+  fontFamily,
+  fontWeight,
+} as const;
+
+export const lightTheme: Theme = {
+  mode: 'light',
+  colors: {
+    background: {
+      default: palette.white,
+      subtle: palette.neutral[50],
+      muted: palette.neutral[100],
+      inverse: palette.neutral[900],
+    },
+    text: {
+      primary: palette.neutral[900],
+      secondary: palette.neutral[600],
+      tertiary: palette.neutral[400],
+      inverse: palette.white,
+      disabled: palette.neutral[300],
+    },
+    border: {
+      default: palette.neutral[200],
+      subtle: palette.neutral[100],
+      strong: palette.neutral[300],
+      focus: palette.accent[500],
+    },
+    brand: {
+      primary: palette.primary[500],
+      primaryHover: palette.primary[600],
+      primaryActive: palette.primary[700],
+      onPrimary: palette.white,
+      accent: palette.accent[500],
+      accentSubtle: palette.accent[50],
+      onAccent: palette.neutral[900],
+    },
+    feedback: {
+      success: palette.success[500],
+      successSubtle: palette.success[50],
+      warning: palette.warning[500],
+      warningSubtle: palette.warning[50],
+      error: palette.error[500],
+      errorSubtle: palette.error[50],
+      onFeedback: palette.white,
+    },
+    action: {
+      primary: palette.accent[500],
+      primaryForeground: palette.neutral[900],
+      secondary: palette.neutral[50],
+      secondaryForeground: palette.neutral[800],
+      inverse: palette.neutral[900],
+      inverseForeground: palette.neutral[50],
+    },
+    state: {
+      success: palette.success[500],
+      successForeground: palette.white,
+      successSubtle: palette.success[50],
+      successSubtleForeground: palette.success[500],
+      destructiveSubtle: palette.error[50],
+      destructiveSubtleForeground: palette.error[500],
+    },
+    disabled: {
+      foreground: palette.neutral[400],
+      background: palette.neutral[100],
+      backgroundStrong: palette.neutral[200],
+      border: palette.neutral[200],
+    },
+  },
+  ...shared,
+};
+
+export const darkTheme: Theme = {
+  mode: 'dark',
+  colors: {
+    background: {
+      default: palette.neutral[950],
+      subtle: palette.neutral[900],
+      muted: palette.neutral[800],
+      inverse: palette.neutral[50],
+    },
+    text: {
+      primary: palette.neutral[50],
+      secondary: palette.neutral[300],
+      tertiary: palette.neutral[400],
+      inverse: palette.neutral[900],
+      disabled: palette.neutral[600],
+    },
+    border: {
+      default: palette.neutral[700],
+      subtle: palette.neutral[800],
+      strong: palette.neutral[600],
+      focus: palette.accent[500],
+    },
+    brand: {
+      primary: palette.primary[500],
+      primaryHover: palette.primary[400],
+      primaryActive: palette.primary[300],
+      onPrimary: palette.white,
+      accent: palette.accent[500],
+      accentSubtle: palette.accent[950],
+      onAccent: palette.neutral[900],
+    },
+    feedback: {
+      success: palette.success[400],
+      successSubtle: palette.success[950],
+      warning: palette.warning[400],
+      warningSubtle: palette.warning[950],
+      error: palette.error[400],
+      errorSubtle: palette.error[950],
+      onFeedback: palette.neutral[950],
+    },
+    action: {
+      primary: palette.accent[500],
+      primaryForeground: palette.neutral[900],
+      secondary: palette.neutral[800],
+      secondaryForeground: palette.neutral[50],
+      inverse: palette.neutral[50],
+      inverseForeground: palette.neutral[900],
+    },
+    state: {
+      success: palette.success[400],
+      successForeground: palette.neutral[950],
+      successSubtle: palette.success[950],
+      successSubtleForeground: palette.success[400],
+      destructiveSubtle: palette.error[950],
+      destructiveSubtleForeground: palette.error[400],
+    },
+    disabled: {
+      foreground: palette.neutral[600],
+      background: palette.neutral[800],
+      backgroundStrong: palette.neutral[700],
+      border: palette.neutral[700],
+    },
+  },
+  ...shared,
+};
+
+export const themes = { light: lightTheme, dark: darkTheme } as const;
+
+/**
+ * Compose a complete text style from the active theme's type scale, font family
+ * and weight. Use this in any component that renders text without the <Text>
+ * component (e.g. inputs), so it always honors global typography overrides.
+ */
+export function textStyle(
+  theme: Theme,
+  variant: TypographyVariant,
+  weight: FontWeightToken = 'regular',
+): TextStyle {
+  return {
+    ...theme.typography[variant],
+    fontFamily: theme.fontFamily[weight],
+    fontWeight: theme.fontWeight[weight],
+  };
+}

package/src/theme/typography.ts

@@ -0,0 +1,37 @@
+import type { TextStyle } from 'react-native';
+
+/**
+ * Font families map to the Inter font weights used in the design system.
+ * Consumers must load these fonts (e.g. via `expo-font` / `@expo-google-fonts/inter`).
+ * If a family is not registered, React Native falls back to the system font.
+ */
+export const fontFamily = {
+  regular: 'Inter-Regular',
+  medium: 'Inter-Medium',
+  semibold: 'Inter-SemiBold',
+} as const;
+
+export const fontWeight = {
+  regular: '400',
+  medium: '500',
+  semibold: '600',
+} as const satisfies Record<string, TextStyle['fontWeight']>;
+
+/**
+ * Type scale — Figma "Typography" page (Inter).
+ * Each entry is a partial TextStyle you can spread onto a <Text> component.
+ */
+export const typography = {
+  displayLarge: { fontSize: 56, lineHeight: 64 },
+  displayRegular: { fontSize: 48, lineHeight: 56 },
+  h1: { fontSize: 32, lineHeight: 40 },
+  h2: { fontSize: 24, lineHeight: 32 },
+  h3: { fontSize: 20, lineHeight: 28 },
+  bodyLarge: { fontSize: 18, lineHeight: 26 },
+  bodyMedium: { fontSize: 16, lineHeight: 24 },
+  bodySmall: { fontSize: 14, lineHeight: 22 },
+  caption: { fontSize: 12, lineHeight: 18 },
+} as const satisfies Record<string, Pick<TextStyle, 'fontSize' | 'lineHeight'>>;
+
+export type TypographyVariant = keyof typeof typography;
+export type FontWeightToken = keyof typeof fontWeight;