@castui/cast-ui 0.3.0 → 0.4.1

package/README.md

@@ -1,6 +1,8 @@
 # Cast UI
 
-A cross-platform design system for React Native (iOS, Android, Web) with multi-theme support. Components are built with vanilla React Native primitives and themed via design tokens exported from Figma.
+A cross-platform design system for React Native (iOS, Android, Web) with custom theme support via `createTheme()`. Components are built with vanilla React Native primitives and themed via design tokens exported from Figma.
+
+Ships a **Default base theme** that uses system fonts and neutral styling — ready for you to customise with your brand.
 
 ## Architecture
 
@@ -35,9 +37,9 @@ See [`design-tokens/DESIGN-TOKENS-SUMMARY.md`](design-tokens/DESIGN-TOKENS-SUMMA
 
 ## Examples
 
-For live examples showing Cast UI components and theming in action, see the companion repo:
+For live examples showing Cast UI components with custom themes (Consumer, Corporate, Luxury), see the companion repo:
 
-**[Connagh/cast-ui-examples](https://github.com/Connagh/cast-ui-examples)** (in progress)
+**[Connagh/cast-ui-examples](https://github.com/Connagh/cast-ui-examples)** — includes an Expo Snack demo showing `createTheme()` with custom themes running cross-platform (iOS, Android, Web).
 
 ## Project Structure
 
@@ -53,33 +55,30 @@ cast-ui/
         Card.stories.tsx        Storybook stories
     theme/
       types.ts                  CastTheme TypeScript interface
+      createTheme.ts            Deep-merge utility for custom themes
       ThemeProvider.tsx          React Context provider + useTheme hook
-      fonts.ts                  Per-theme font family helpers
+      fonts.ts                  Dynamic font family helpers
       index.ts                  Barrel export
     tokens/
       build.ts                  Reads Figma JSON, generates TS theme objects
       generated/                Auto-generated (gitignored)
-        white-label.ts
-        consumer.ts
-        corporate.ts
-        luxury.ts
+        default.ts
+        default.reference.json  Copy-paste starting point for custom themes
         index.ts
     index.ts                    Public API
   design-tokens/                Source of truth (Figma export)
-    White label.tokens.json     Default theme (system-ui, slate neutrals)
-    Consumer.tokens.json        Vibrant violet, Poppins
-    Corporate.tokens.json       Professional blue, Merriweather + Inter
-    Luxury.tokens.json          Dark gold, Playfair Display + Cormorant Garamond
+    Default.tokens.json         Default theme (system-ui, slate neutrals)
     DESIGN-TOKENS-SUMMARY.md    Complete token reference
   .storybook/
     main.ts                     Webpack config with react-native-web alias
-    preview.ts                  Theme switcher toolbar + decorator
-    preview-head.html           Google Fonts <link> tags
+    preview.ts                  Decorator wrapping stories in default theme
+    preview-head.html           (empty — default theme uses system fonts)
   .github/workflows/
     chromatic.yml               Visual regression testing on push
     adoption.yml                Zeroheight adoption tracking on push to main
     publish.yml                 Publish to npm on push to main
   dist/                         Build output (gitignored)
+    default.reference.json      Shipped in package for consumers
   tsconfig.json                 Development TypeScript config
   tsconfig.build.json           Library build config (excludes stories)
 ```
@@ -99,7 +98,7 @@ npm install
 
 ### Build Tokens
 
-Generates TypeScript theme objects from the Figma JSON files in `design-tokens/`:
+Generates the TypeScript theme object and reference JSON from the Figma token file in `design-tokens/`:
 
 ```bash
 npm run build:tokens
@@ -113,7 +112,7 @@ This writes to `src/tokens/generated/` (gitignored). Runs automatically before S
 npm run storybook
 ```
 
-Opens at `http://localhost:6006`. Use the paintbrush icon in the toolbar to switch between all four themes.
+Opens at `http://localhost:6006` showing components in the Default theme.
 
 ## Scripts
 
@@ -122,41 +121,98 @@ Opens at `http://localhost:6006`. Use the paintbrush icon in the toolbar to swit
 | `npm run build:tokens` | Generate TypeScript theme files from Figma token JSON |
 | `npm run storybook` | Start Storybook dev server (auto-runs `build:tokens`) |
 | `npm run build-storybook` | Build static Storybook (auto-runs `build:tokens`) |
-| `npm run build` | Full library build: tokens + TypeScript compilation to `dist/` |
+| `npm run build` | Full library build: tokens + TypeScript compilation + reference JSON to `dist/` |
 | `npm publish` | Publish to npm (auto-runs `build` via `prepublishOnly`) |
 | `npm run zh:track-package` | Register/update package info with Zeroheight (runs automatically via CI) |
 
-## Themes
+## Creating a Custom Theme
 
-Four themes share the same component API but produce completely different visual identities:
+Cast UI ships a **Default base theme** that uses system fonts, slate neutrals, and moderate border radii. Create your own branded theme in three steps:
 
-| Theme | Primary Colour | Typography | Border Radius | Character |
-|-------|---------------|------------|---------------|-----------|
-| **White Label** (default) | Slate-900 | system-ui | Moderate (8px buttons) | Neutral, adaptable |
-| **Consumer** | Violet-600 | Poppins | Rounded (24px pill buttons) | Vibrant, friendly |
-| **Corporate** | Blue-600 | Merriweather + Inter | Crisp (4px buttons) | Professional, structured |
-| **Luxury** | Gold-400 on Black | Playfair Display + Cormorant Garamond | Zero (sharp edges) | Premium, elegant |
+### 1. Copy the reference JSON
 
-When themes switch, **all of the following change simultaneously**: colour palette, font families, border radius, spacing rhythm, elevation, font weight, paragraph spacing, and paragraph indent.
+The package includes `default.reference.json` — a complete snapshot of all theme values. Copy it into your project as a starting point:
 
-## Theme System
+```bash
+cp node_modules/@castui/cast-ui/dist/default.reference.json ./my-brand-theme.json
+```
 
-### ThemeProvider
+### 2. Modify desired values
+
+Edit `my-brand-theme.json` to change only the values you want. You only need to include the properties you're overriding — everything else inherits from the Default theme:
+
+```json
+{
+  "name": "my-brand",
+  "semantic": {
+    "color": {
+      "primary": "#553C9A",
+      "onPrimary": "#FFFFFF",
+      "primaryHover": "#6B46C1",
+      "primaryPressed": "#44337A"
+    },
+    "fontFamily": {
+      "brand": "Poppins",
+      "interface": "Poppins"
+    },
+    "borderRadius": {
+      "small": 12,
+      "medium": 16,
+      "large": 24
+    }
+  }
+}
+```
 
-Wrap your app in `CastThemeProvider`. Defaults to White Label:
+### 3. Create the theme and provide it
 
 ```tsx
-import { CastThemeProvider, consumer } from '@castui/cast-ui';
+import { CastThemeProvider, createTheme, googleFontsUrl } from '@castui/cast-ui';
+import overrides from './my-brand-theme.json';
+
+const myTheme = createTheme(overrides);
+
+// Load any custom fonts (web)
+const fontUrl = googleFontsUrl(myTheme);
+if (fontUrl) {
+  const link = document.createElement('link');
+  link.href = fontUrl;
+  link.rel = 'stylesheet';
+  document.head.appendChild(link);
+}
 
 export default function App() {
   return (
-    <CastThemeProvider theme={consumer}>
-      {/* components here */}
+    <CastThemeProvider theme={myTheme}>
+      {/* your app */}
     </CastThemeProvider>
   );
 }
 ```
 
+`createTheme()` deep-merges your partial overrides with the Default theme, producing a complete `CastTheme` object. You can also pass a second argument to merge against a different base: `createTheme(overrides, otherBaseTheme)`.
+
+## Theme System
+
+### ThemeProvider
+
+Wrap your app in `CastThemeProvider`. Defaults to the Default base theme:
+
+```tsx
+import { CastThemeProvider, defaultTheme, createTheme } from '@castui/cast-ui';
+
+// Use the default theme as-is...
+<CastThemeProvider theme={defaultTheme}>
+  <App />
+</CastThemeProvider>
+
+// ...or create a custom theme
+const myTheme = createTheme({ name: 'my-brand', semantic: { color: { primary: '#FF0000' } } });
+<CastThemeProvider theme={myTheme}>
+  <App />
+</CastThemeProvider>
+```
+
 ### useTheme
 
 Access the current theme inside any component:
@@ -185,7 +241,7 @@ function MyComponent() {
 Every theme conforms to the `CastTheme` interface (see `src/theme/types.ts`):
 
 ```
-theme.name                          'white-label' | 'consumer' | 'corporate' | 'luxury'
+theme.name                          string (e.g. 'default', 'my-brand')
 theme.semantic.color.*              30 semantic colours (surface, primary, error, etc.)
 theme.semantic.fontFamily.*         brand, interface, data
 theme.semantic.fontSize.*           display, h1, h2, h3, body, small, button
@@ -253,13 +309,25 @@ Components reference font families from the theme tokens. Font **loading** is th
 
 ### Web
 
-Load fonts via a `<link>` tag or use the helper:
+Use `googleFontsUrl()` to generate a Google Fonts `<link>` href for any theme:
 
 ```ts
 import { googleFontsUrl } from '@castui/cast-ui';
 
-const url = googleFontsUrl('luxury');
-// "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;700&family=Cormorant+Garamond:wght@400;500;700&display=swap"
+const url = googleFontsUrl(myTheme);
+// Returns null for themes using only system-ui, or a Google Fonts URL for custom fonts
+```
+
+### Discovering theme fonts
+
+Use `getThemeFontFamilies()` to dynamically extract all custom font families from any theme:
+
+```ts
+import { getThemeFontFamilies } from '@castui/cast-ui';
+
+const families = getThemeFontFamilies(myTheme);
+// → ['Poppins'] or ['Inter', 'Merriweather'] etc.
+// → [] for the Default theme (system-ui only)
 ```
 
 ### React Native / Expo
@@ -299,14 +367,7 @@ automatically on each platform:
 - **Android** — maps to the weight-specific registered name (e.g. `"Poppins_700Bold"`) and sets `fontWeight: 'normal'`.
 - **system-ui** — omits `fontFamily` (platform default) on all platforms.
 
-The **White Label** theme uses `system-ui` (platform default) and requires no font loading.
-
-| Theme | Fonts to Load |
-|-------|---------------|
-| White Label | None (system default) |
-| Consumer | Poppins |
-| Corporate | Inter, Merriweather |
-| Luxury | Playfair Display, Cormorant Garamond |
+The **Default** theme uses `system-ui` (platform default) and requires no font loading.
 
 > **Custom Themes:** The convention works for any font — register each weight
 > under `FontName`, `FontName_500Medium`, and `FontName_700Bold` and
@@ -326,22 +387,23 @@ import {
   CastThemeProvider,
   useTheme,
   Button,
-  whiteLabel,
-  consumer,
-  corporate,
-  luxury,
+  Card,
+  defaultTheme,
+  createTheme,
+  googleFontsUrl,
+  getThemeFontFamilies,
   resolveFont,
   ANDROID_WEIGHT_SUFFIX,
 } from '@castui/cast-ui';
+
+import type { CastTheme, DeepPartial } from '@castui/cast-ui';
 ```
 
 ## Storybook
 
 Storybook runs React Native components in the browser via React Native Web. The webpack config in `.storybook/main.ts` aliases `react-native` to `react-native-web`.
 
-### Theme Switcher
-
-The toolbar provides a paintbrush dropdown to switch between all four themes live. This is configured via `globalTypes` and a decorator in `.storybook/preview.ts` that wraps every story in `CastThemeProvider`.
+The built-in Storybook shows components in the **Default theme**. For a cross-platform demo with custom themes, see the [Expo Snack](https://github.com/Connagh/cast-ui-examples/tree/main/expo-snack) in the examples repo.
 
 ### Chromatic
 
@@ -349,18 +411,18 @@ Visual regression testing runs on every push via the GitHub Actions workflow at
 
 ## Token Build Pipeline
 
-The build script (`src/tokens/build.ts`) reads Figma-exported JSON from `design-tokens/` and generates fully-resolved TypeScript theme objects.
+The build script (`src/tokens/build.ts`) reads the Figma-exported JSON from `design-tokens/` and generates a fully-resolved TypeScript theme object plus a reference JSON.
 
 **What it does:**
 
-1. Reads each `*.tokens.json` file
+1. Reads `Default.tokens.json`
 2. Recursively resolves all `{Primitive.Colour.Slate-900}` style alias references through the three-tier chain
 3. Extracts hex values from Figma's colour object format (`{ colorSpace, components, hex }`)
-4. Outputs typed TypeScript files to `src/tokens/generated/`
+4. Outputs `default.ts` (typed theme object) and `default.reference.json` (copy-paste starting point) to `src/tokens/generated/`
 
-**When to re-run:** After updating any `design-tokens/*.tokens.json` file. The script runs automatically before Storybook and library builds.
+**When to re-run:** After updating `design-tokens/Default.tokens.json`. The script runs automatically before Storybook and library builds.
 
-**Adding a new theme:** Add a new `.tokens.json` file to `design-tokens/`, add an entry to the `THEMES` array in `src/tokens/build.ts`, add the theme name to the `ThemeName` union in `src/theme/types.ts`, and update the toolbar items in `.storybook/preview.ts`.
+**Creating a custom theme:** Copy `default.reference.json` from the published package, modify the values you want, and pass the overrides to `createTheme()`. See [Creating a Custom Theme](#creating-a-custom-theme) above.
 
 ## Adding a New Component
 
@@ -369,7 +431,7 @@ The build script (`src/tokens/build.ts`) reads Figma-exported JSON from `design-
 3. Use only React Native primitives (`View`, `Text`, `Pressable`, `ScrollView`, etc.)
 4. Create `ComponentName.stories.tsx` alongside the component
 5. Export the component and its types from `src/index.ts`
-6. If the component needs new design tokens, add them to all four `*.tokens.json` files and update `src/theme/types.ts`
+6. If the component needs new design tokens, add them to `Default.tokens.json` and update `src/theme/types.ts`
 
 ## Adoption Tracking
 
@@ -448,7 +510,7 @@ This means merging a PR to `main` does **not** automatically publish to npm. Onl
 **To publish a new version:**
 
 1. Create a feature branch and make your changes
-2. Update the `version` field in `package.json` (e.g. `0.1.0` → `0.1.1`)
+2. Update the `version` field in `package.json` (e.g. `0.3.0` → `0.4.0`)
 3. Push the branch and open a PR to `main`
 4. Chromatic runs and creates status checks on the PR
 5. Review and accept any visual changes in the Chromatic UI
@@ -463,9 +525,9 @@ This means merging a PR to `main` does **not** automatically publish to npm. Onl
 
 | Change type | Bump | Example |
 |-------------|------|---------|
-| Bug fix or minor tweak | Patch | `0.1.0` → `0.1.1` |
-| New component or feature | Minor | `0.1.0` → `0.2.0` |
-| Breaking API change | Major | `0.1.0` → `1.0.0` |
+| Bug fix or minor tweak | Patch | `0.3.0` → `0.3.1` |
+| New component or feature | Minor | `0.3.0` → `0.4.0` |
+| Breaking API change | Major | `0.9.0` → `1.0.0` |
 
 **Package details:**
 

package/dist/default.reference.json

@@ -0,0 +1,125 @@
+{
+  "name": "default",
+  "semantic": {
+    "color": {
+      "surface": "#FFFFFF",
+      "onSurface": "#0F172A",
+      "onSurfaceMuted": "#475569",
+      "surfaceContainer": "#F8FAFC",
+      "primary": "#0F172A",
+      "onPrimary": "#FFFFFF",
+      "primaryHover": "#1E293B",
+      "primaryPressed": "#475569",
+      "secondary": "#E2E8F0",
+      "onSecondary": "#0F172A",
+      "success": "#0C6F1E",
+      "onSuccess": "#FFFFFF",
+      "error": "#6F0C0C",
+      "onError": "#FFFFFF",
+      "warning": "#947C3E",
+      "onWarning": "#FFFFFF",
+      "border": "#E2E8F0",
+      "borderSubtle": "#F8FAFC",
+      "disabledContainer": "#E2E8F0",
+      "onDisabled": "#94A3B8",
+      "primaryContainer": "#E2E8F0",
+      "onPrimaryContainer": "#0F172A",
+      "secondaryContainer": "#F8FAFC",
+      "onSecondaryContainer": "#1E293B",
+      "errorContainer": "#FDF2F2",
+      "onErrorContainer": "#4A0808",
+      "successContainer": "#F0FDF1",
+      "onSuccessContainer": "#084A14",
+      "warningContainer": "#FDF8EB",
+      "onWarningContainer": "#6B592D"
+    },
+    "fontFamily": {
+      "brand": "system-ui",
+      "interface": "system-ui",
+      "data": "JetBrains Mono"
+    },
+    "fontSize": {
+      "display": 39,
+      "h1": 31,
+      "h2": 25,
+      "h3": 20,
+      "body": 16,
+      "small": 12.800000190734863,
+      "button": 16
+    },
+    "fontWeight": {
+      "heading": 700,
+      "body": 400,
+      "button": 500
+    },
+    "lineHeight": {
+      "heading": 1.2000000476837158,
+      "body": 1.5,
+      "uiLabel": 1
+    },
+    "letterSpacing": {
+      "heading": -0.019999999552965164,
+      "body": 0,
+      "label": 0.019999999552965164
+    },
+    "paragraphSpacing": {
+      "body": 16,
+      "editorial": 24
+    },
+    "paragraphIndent": {
+      "editorial": 0
+    },
+    "borderRadius": {
+      "small": 4,
+      "medium": 8,
+      "large": 12
+    }
+  },
+  "component": {
+    "button": {
+      "paddingHorizontal": 16,
+      "paddingVertical": 8,
+      "gap": 8,
+      "cornerRadius": 8,
+      "borderWidth": 2,
+      "textSize": 16,
+      "fontWeight": 500,
+      "lineHeight": 1,
+      "fontFamily": "system-ui",
+      "filled": {
+        "background": "#0F172A",
+        "content": "#FFFFFF"
+      },
+      "outline": {
+        "background": "#FFFFFF",
+        "border": "#0F172A",
+        "content": "#0F172A"
+      },
+      "text": {
+        "background": "#FFFFFF",
+        "content": "#0F172A"
+      },
+      "state": {
+        "hoverBackground": "#1E293B",
+        "pressedBackground": "#475569",
+        "disabledBackground": "#E2E8F0",
+        "disabledContent": "#94A3B8"
+      }
+    },
+    "card": {
+      "padding": 16,
+      "gap": 12,
+      "background": "#F8FAFC",
+      "stroke": "#E2E8F0",
+      "strokeWidth": 2,
+      "cornerRadius": 12,
+      "elevation": 1,
+      "headingSize": 20,
+      "headingWeight": 700,
+      "headingFontFamily": "system-ui",
+      "bodySize": 16,
+      "bodyWeight": 400,
+      "bodyFontFamily": "system-ui"
+    }
+  }
+}

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 export { CastThemeProvider, useTheme } from './theme';
 export type { CastThemeProviderProps } from './theme';
 export type { CastTheme, ThemeName, SemanticTokens, ComponentTokens, ButtonTokens, CardTokens, } from './theme';
-export { THEME_FONT_FAMILIES, googleFontsUrl, resolveFont, ANDROID_WEIGHT_SUFFIX } from './theme';
-export { whiteLabel, consumer, corporate, luxury, } from './tokens/generated';
+export { createTheme } from './theme';
+export type { DeepPartial } from './theme';
+export { getThemeFontFamilies, googleFontsUrl, resolveFont, ANDROID_WEIGHT_SUFFIX } from './theme';
+export { defaultTheme } from './tokens/generated';
 export { Button } from './components/Button/Button';
 export type { ButtonProps, ButtonVariant } from './components/Button/Button';
 export { Card } from './components/Card/Card';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACtD,YAAY,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AACtD,YAAY,EACV,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,YAAY,EACZ,UAAU,GACX,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAGlG,OAAO,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,MAAM,GACP,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,YAAY,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACtD,YAAY,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AACtD,YAAY,EACV,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,YAAY,EACZ,UAAU,GACX,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAGnG,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,YAAY,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -3,9 +3,10 @@
 // ---------------------------------------------------------------------------
 // Theme system
 export { CastThemeProvider, useTheme } from './theme';
-export { THEME_FONT_FAMILIES, googleFontsUrl, resolveFont, ANDROID_WEIGHT_SUFFIX } from './theme';
+export { createTheme } from './theme';
+export { getThemeFontFamilies, googleFontsUrl, resolveFont, ANDROID_WEIGHT_SUFFIX } from './theme';
 // Theme objects
-export { whiteLabel, consumer, corporate, luxury, } from './tokens/generated';
+export { defaultTheme } from './tokens/generated';
 // Components
 export { Button } from './components/Button/Button';
 export { Card } from './components/Card/Card';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,kCAAkC;AAClC,8EAA8E;AAE9E,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAUtD,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAElG,gBAAgB;AAChB,OAAO,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,MAAM,GACP,MAAM,oBAAoB,CAAC;AAE5B,aAAa;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAGpD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,kCAAkC;AAClC,8EAA8E;AAE9E,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAUtD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEnG,gBAAgB;AAChB,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,aAAa;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAGpD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/theme/ThemeProvider.d.ts

@@ -1,18 +1,20 @@
 import React from 'react';
 import type { CastTheme } from './types';
 export interface CastThemeProviderProps {
-    /** The theme object to provide. Defaults to White Label. */
+    /** The theme object to provide. Defaults to the Default base theme. */
     theme?: CastTheme;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }
 /**
  * Wraps the component tree with the selected Cast theme.
  *
  * ```tsx
- * import { CastThemeProvider } from '@castui/cast-ui';
- * import { consumer } from '@castui/cast-ui/tokens/generated';
+ * import { CastThemeProvider, createTheme } from '@castui/cast-ui';
+ * import overrides from './my-brand.json';
  *
- * <CastThemeProvider theme={consumer}>
+ * const myTheme = createTheme(overrides);
+ *
+ * <CastThemeProvider theme={myTheme}>
  *   <App />
  * </CastThemeProvider>
  * ```

package/dist/theme/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAazC,MAAM,WAAW,sBAAsB;IACrC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAkB,EAClB,QAAQ,GACT,EAAE,sBAAsB,2CAIxB;AAMD;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,IAAI,SAAS,CAEpC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAazC,MAAM,WAAW,sBAAsB;IACrC,uEAAuE;IACvE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAoB,EACpB,QAAQ,GACT,EAAE,sBAAsB,2CAIxB;AAMD;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,IAAI,SAAS,CAEpC"}

package/dist/theme/ThemeProvider.js

@@ -1,23 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
-import { whiteLabel } from '../tokens/generated';
+import { defaultTheme } from '../tokens/generated';
 // ---------------------------------------------------------------------------
 // Context
 // ---------------------------------------------------------------------------
-const ThemeContext = createContext(whiteLabel);
+const ThemeContext = createContext(defaultTheme);
 /**
  * Wraps the component tree with the selected Cast theme.
  *
  * ```tsx
- * import { CastThemeProvider } from '@castui/cast-ui';
- * import { consumer } from '@castui/cast-ui/tokens/generated';
+ * import { CastThemeProvider, createTheme } from '@castui/cast-ui';
+ * import overrides from './my-brand.json';
  *
- * <CastThemeProvider theme={consumer}>
+ * const myTheme = createTheme(overrides);
+ *
+ * <CastThemeProvider theme={myTheme}>
  *   <App />
  * </CastThemeProvider>
  * ```
  */
-export function CastThemeProvider({ theme = whiteLabel, children, }) {
+export function CastThemeProvider({ theme = defaultTheme, children, }) {
     return (_jsx(ThemeContext.Provider, { value: theme, children: children }));
 }
 // ---------------------------------------------------------------------------

package/dist/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E,MAAM,YAAY,GAAG,aAAa,CAAY,UAAU,CAAC,CAAC;AAY1D;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,KAAK,GAAG,UAAU,EAClB,QAAQ,GACe;IACvB,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAyB,CACxE,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,OAAO;AACP,8EAA8E;AAE9E;;;;;;;;;GASG;AACH,MAAM,UAAU,QAAQ;IACtB,OAAO,UAAU,CAAC,YAAY,CAAC,CAAC;AAClC,CAAC"}
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E,MAAM,YAAY,GAAG,aAAa,CAAY,YAAY,CAAC,CAAC;AAY5D;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,KAAK,GAAG,YAAY,EACpB,QAAQ,GACe;IACvB,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAyB,CACxE,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,OAAO;AACP,8EAA8E;AAE9E;;;;;;;;;GASG;AACH,MAAM,UAAU,QAAQ;IACtB,OAAO,UAAU,CAAC,YAAY,CAAC,CAAC;AAClC,CAAC"}

package/dist/theme/createTheme.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Theme creation utility.
+ *
+ * `createTheme()` deep-merges partial overrides with the default base theme,
+ * producing a complete `CastTheme` object. This is the primary API for
+ * creating custom branded themes.
+ *
+ * ```ts
+ * import { createTheme, defaultTheme } from '@castui/cast-ui';
+ * import overrides from './my-brand.json';
+ *
+ * const myTheme = createTheme(overrides);
+ * // → complete CastTheme with your overrides applied on top of defaultTheme
+ * ```
+ */
+import type { CastTheme } from './types';
+/**
+ * Recursively makes all properties of `T` optional.
+ * Useful for typing partial theme overrides passed to `createTheme()`.
+ */
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+/**
+ * Create a complete `CastTheme` by deep-merging partial overrides with a
+ * base theme (defaults to `defaultTheme`).
+ *
+ * Works with both small partial overrides *and* complete theme objects
+ * exported from Figma.
+ *
+ * @param overrides – Partial theme values to apply on top of the base.
+ * @param base – Optional base theme. Defaults to `defaultTheme`.
+ * @returns A complete, merged `CastTheme` object.
+ *
+ * @example
+ * ```ts
+ * // Minimal override – only change the primary colour
+ * const myTheme = createTheme({
+ *   name: 'my-brand',
+ *   semantic: { color: { primary: '#FF0000' } },
+ * });
+ *
+ * // Full override from a JSON file
+ * import overrides from './my-brand.json';
+ * const myTheme = createTheme(overrides);
+ * ```
+ */
+export declare function createTheme(overrides: DeepPartial<CastTheme>, base?: CastTheme): CastTheme;
+//# sourceMappingURL=createTheme.d.ts.map

package/dist/theme/createTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTheme.d.ts","sourceRoot":"","sources":["../../src/theme/createTheme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMzC;;;GAGG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAChE,CAAC;AA0DF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,WAAW,CACzB,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,EACjC,IAAI,CAAC,EAAE,SAAS,GACf,SAAS,CAMX"}