@ankhorage/zora 2.10.0 → 2.12.0

package/dist/theme/ZoraProvider.d.ts

@@ -1,20 +1,12 @@
+import type { ThemeConfig } from '@ankhorage/contracts';
 import React from 'react';
 import type { ZoraTheme, ZoraThemeMode } from './types';
 export interface ZoraProviderProps {
     children: React.ReactNode;
     theme?: ZoraTheme;
+    themeConfig?: ThemeConfig;
     initialMode?: ZoraThemeMode;
 }
-/***
- * Installs the ZORA theme runtime and underlying Surface theme provider.
- *
- * Wrap an app with `ZoraProvider` once near the root so components, patterns,
- * layouts, and theme hooks resolve the same design tokens and color mode.
- *
- * @example App provider
- * ```tsx
- * <ZoraProvider initialMode="light"><App /></ZoraProvider>
- * ```
- */
-export declare function ZoraProvider({ children, theme, initialMode, }: ZoraProviderProps): React.JSX.Element;
+/** Installs the ZORA theme runtime and underlying Surface theme provider. */
+export declare function ZoraProvider({ children, theme, themeConfig, initialMode, }: ZoraProviderProps): React.JSX.Element;
 //# sourceMappingURL=ZoraProvider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ZoraProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAwB,EACxB,WAAqB,GACtB,EAAE,iBAAiB,qBAUnB"}
+{"version":3,"file":"ZoraProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED,6EAA6E;AAC7E,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAwB,EACxB,WAAW,EACX,WAAqB,GACtB,EAAE,iBAAiB,qBAcnB"}

package/dist/theme/ZoraProvider.js

@@ -3,21 +3,12 @@ import React from 'react';
 import { createZoraThemeConfig } from './createZoraThemeConfig';
 import { zoraDefaultTheme } from './zoraDefaultTheme';
 import { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';
-/***
- * Installs the ZORA theme runtime and underlying Surface theme provider.
- *
- * Wrap an app with `ZoraProvider` once near the root so components, patterns,
- * layouts, and theme hooks resolve the same design tokens and color mode.
- *
- * @example App provider
- * ```tsx
- * <ZoraProvider initialMode="light"><App /></ZoraProvider>
- * ```
- */
-export function ZoraProvider({ children, theme = zoraDefaultTheme, initialMode = 'light', }) {
-    const runtimeValue = React.useMemo(() => ({ sourceTheme: theme, themeId: theme.id }), [theme]);
+/** Installs the ZORA theme runtime and underlying Surface theme provider. */
+export function ZoraProvider({ children, theme = zoraDefaultTheme, themeConfig, initialMode = 'light', }) {
+    const resolvedConfig = React.useMemo(() => themeConfig ?? createZoraThemeConfig(theme), [theme, themeConfig]);
+    const runtimeValue = React.useMemo(() => ({ themeId: resolvedConfig.id }), [resolvedConfig.id]);
     return (<ZoraThemeRuntimeContext.Provider value={runtimeValue}>
-      <ThemeProvider initialConfig={createZoraThemeConfig(theme)} initialMode={initialMode}>
+      <ThemeProvider initialConfig={resolvedConfig} initialMode={initialMode}>
         {children}
       </ThemeProvider>
     </ZoraThemeRuntimeContext.Provider>);

package/dist/theme/ZoraProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoraProvider.js","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAQpE;;;;;;;;;;GAUG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,GAAG,gBAAgB,EACxB,WAAW,GAAG,OAAO,GACH;IAClB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE/F,OAAO,CACL,CAAC,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACpD;MAAA,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CACnF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CACpC,CAAC;AACJ,CAAC","sourcesContent":["import { ThemeProvider } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { createZoraThemeConfig } from './createZoraThemeConfig';\nimport type { ZoraTheme, ZoraThemeMode } from './types';\nimport { zoraDefaultTheme } from './zoraDefaultTheme';\nimport { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';\n\nexport interface ZoraProviderProps {\n  children: React.ReactNode;\n  theme?: ZoraTheme;\n  initialMode?: ZoraThemeMode;\n}\n\n/***\n * Installs the ZORA theme runtime and underlying Surface theme provider.\n *\n * Wrap an app with `ZoraProvider` once near the root so components, patterns,\n * layouts, and theme hooks resolve the same design tokens and color mode.\n *\n * @example App provider\n * ```tsx\n * <ZoraProvider initialMode=\"light\"><App /></ZoraProvider>\n * ```\n */\nexport function ZoraProvider({\n  children,\n  theme = zoraDefaultTheme,\n  initialMode = 'light',\n}: ZoraProviderProps) {\n  const runtimeValue = React.useMemo(() => ({ sourceTheme: theme, themeId: theme.id }), [theme]);\n\n  return (\n    <ZoraThemeRuntimeContext.Provider value={runtimeValue}>\n      <ThemeProvider initialConfig={createZoraThemeConfig(theme)} initialMode={initialMode}>\n        {children}\n      </ThemeProvider>\n    </ZoraThemeRuntimeContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"ZoraProvider.js","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AASpE,6EAA6E;AAC7E,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,GAAG,gBAAgB,EACxB,WAAW,EACX,WAAW,GAAG,OAAO,GACH;IAClB,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAClC,GAAG,EAAE,CAAC,WAAW,IAAI,qBAAqB,CAAC,KAAK,CAAC,EACjD,CAAC,KAAK,EAAE,WAAW,CAAC,CACrB,CAAC;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,cAAc,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC;IAEhG,OAAO,CACL,CAAC,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACpD;MAAA,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CACrE;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CACpC,CAAC;AACJ,CAAC","sourcesContent":["import type { ThemeConfig } from '@ankhorage/contracts';\nimport { ThemeProvider } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { createZoraThemeConfig } from './createZoraThemeConfig';\nimport type { ZoraTheme, ZoraThemeMode } from './types';\nimport { zoraDefaultTheme } from './zoraDefaultTheme';\nimport { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';\n\nexport interface ZoraProviderProps {\n  children: React.ReactNode;\n  theme?: ZoraTheme;\n  themeConfig?: ThemeConfig;\n  initialMode?: ZoraThemeMode;\n}\n\n/** Installs the ZORA theme runtime and underlying Surface theme provider. */\nexport function ZoraProvider({\n  children,\n  theme = zoraDefaultTheme,\n  themeConfig,\n  initialMode = 'light',\n}: ZoraProviderProps) {\n  const resolvedConfig = React.useMemo(\n    () => themeConfig ?? createZoraThemeConfig(theme),\n    [theme, themeConfig],\n  );\n  const runtimeValue = React.useMemo(() => ({ themeId: resolvedConfig.id }), [resolvedConfig.id]);\n\n  return (\n    <ZoraThemeRuntimeContext.Provider value={runtimeValue}>\n      <ThemeProvider initialConfig={resolvedConfig} initialMode={initialMode}>\n        {children}\n      </ThemeProvider>\n    </ZoraThemeRuntimeContext.Provider>\n  );\n}\n"]}

package/dist/theme/ZoraThemeRuntimeContext.d.ts

@@ -1,6 +1,5 @@
-import type { ZoraTheme, ZoraThemeId } from './types';
+import type { ZoraThemeId } from './types';
 interface ZoraThemeRuntime {
-    sourceTheme: ZoraTheme;
     themeId: ZoraThemeId;
 }
 export declare const ZoraThemeRuntimeContext: import("react").Context<ZoraThemeRuntime>;

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

@@ -1 +1 @@
-{"version":3,"file":"ZoraThemeRuntimeContext.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraThemeRuntimeContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtD,UAAU,gBAAgB;IACxB,WAAW,EAAE,SAAS,CAAC;IACvB,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,uBAAuB,2CAGlC,CAAC;AAEH,wBAAgB,mBAAmB,IAAI,gBAAgB,CAEtD"}
+{"version":3,"file":"ZoraThemeRuntimeContext.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraThemeRuntimeContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,UAAU,gBAAgB;IACxB,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,uBAAuB,2CAElC,CAAC;AAEH,wBAAgB,mBAAmB,IAAI,gBAAgB,CAEtD"}

package/dist/theme/ZoraThemeRuntimeContext.js

@@ -1,7 +1,6 @@
 import { createContext, useContext } from 'react';
 import { zoraDefaultTheme } from './zoraDefaultTheme';
 export const ZoraThemeRuntimeContext = createContext({
-    sourceTheme: zoraDefaultTheme,
     themeId: zoraDefaultTheme.id,
 });
 export function useZoraThemeRuntime() {

package/dist/theme/ZoraThemeRuntimeContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoraThemeRuntimeContext.js","sourceRoot":"","sources":["../../src/theme/ZoraThemeRuntimeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAOtD,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAmB;IACrE,WAAW,EAAE,gBAAgB;IAC7B,OAAO,EAAE,gBAAgB,CAAC,EAAE;CAC7B,CAAC,CAAC;AAEH,MAAM,UAAU,mBAAmB;IACjC,OAAO,UAAU,CAAC,uBAAuB,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { ZoraTheme, ZoraThemeId } from './types';\nimport { zoraDefaultTheme } from './zoraDefaultTheme';\n\ninterface ZoraThemeRuntime {\n  sourceTheme: ZoraTheme;\n  themeId: ZoraThemeId;\n}\n\nexport const ZoraThemeRuntimeContext = createContext<ZoraThemeRuntime>({\n  sourceTheme: zoraDefaultTheme,\n  themeId: zoraDefaultTheme.id,\n});\n\nexport function useZoraThemeRuntime(): ZoraThemeRuntime {\n  return useContext(ZoraThemeRuntimeContext);\n}\n"]}
+{"version":3,"file":"ZoraThemeRuntimeContext.js","sourceRoot":"","sources":["../../src/theme/ZoraThemeRuntimeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAMtD,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAmB;IACrE,OAAO,EAAE,gBAAgB,CAAC,EAAE;CAC7B,CAAC,CAAC;AAEH,MAAM,UAAU,mBAAmB;IACjC,OAAO,UAAU,CAAC,uBAAuB,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { ZoraThemeId } from './types';\nimport { zoraDefaultTheme } from './zoraDefaultTheme';\n\ninterface ZoraThemeRuntime {\n  themeId: ZoraThemeId;\n}\n\nexport const ZoraThemeRuntimeContext = createContext<ZoraThemeRuntime>({\n  themeId: zoraDefaultTheme.id,\n});\n\nexport function useZoraThemeRuntime(): ZoraThemeRuntime {\n  return useContext(ZoraThemeRuntimeContext);\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ZoraThemeScope.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraThemeScope.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG1D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAmDD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,mBAAmB,mSAU9E"}
+{"version":3,"file":"ZoraThemeScope.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraThemeScope.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG1D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAmCD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,mBAAmB,mSAO9E"}

package/dist/theme/ZoraThemeScope.js

@@ -1,6 +1,5 @@
 import { createTheme, ThemeContext, useFontContext, useTheme } from '@ankhorage/surface';
 import React, { useMemo } from 'react';
-import { createZoraThemeConfig } from './createZoraThemeConfig';
 import { resolveZoraScopedThemeId } from './resolveZoraScopedThemeId';
 import { useZoraThemeRuntime, ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';
 function ZoraThemeScopeInner({ children, themeId, mode }) {
@@ -12,9 +11,8 @@ function ZoraThemeScopeInner({ children, themeId, mode }) {
         inheritedThemeId: parentRuntime.themeId,
     });
     const scopedMode = mode ?? parentSurface.mode;
-    // Plan 2: there is no multi-theme registry yet. Keep the active theme seed inherited.
-    const surfaceConfig = useMemo(() => createZoraThemeConfig(parentRuntime.sourceTheme), [parentRuntime.sourceTheme]);
-    const scopedTheme = useMemo(() => createTheme(surfaceConfig, scopedMode, activeFontId), [surfaceConfig, scopedMode, activeFontId]);
+    const sourceConfig = parentSurface.theme.config;
+    const scopedTheme = useMemo(() => createTheme(sourceConfig, scopedMode, activeFontId), [sourceConfig, scopedMode, activeFontId]);
     const scopedSurfaceValue = useMemo(() => ({
         theme: scopedTheme,
         mode: scopedMode,
@@ -22,18 +20,14 @@ function ZoraThemeScopeInner({ children, themeId, mode }) {
         setThemeConfig: parentSurface.setThemeConfig,
         _hasProvider: true,
     }), [parentSurface.setMode, parentSurface.setThemeConfig, scopedMode, scopedTheme]);
-    const scopedRuntimeValue = useMemo(() => ({
-        sourceTheme: parentRuntime.sourceTheme,
-        themeId: scopedThemeId,
-    }), [parentRuntime.sourceTheme, scopedThemeId]);
+    const scopedRuntimeValue = useMemo(() => ({ themeId: scopedThemeId }), [scopedThemeId]);
     return (<ZoraThemeRuntimeContext.Provider value={scopedRuntimeValue}>
       <ThemeContext.Provider value={scopedSurfaceValue}>{children}</ThemeContext.Provider>
     </ZoraThemeRuntimeContext.Provider>);
 }
 export function ZoraThemeScope({ children, themeId, mode }) {
-    if (mode === undefined && themeId === undefined) {
+    if (mode === undefined && themeId === undefined)
         return children;
-    }
     return (<ZoraThemeScopeInner mode={mode} themeId={themeId}>
       {children}
     </ZoraThemeScopeInner>);

package/dist/theme/ZoraThemeScope.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoraThemeScope.js","sourceRoot":"","sources":["../../src/theme/ZoraThemeScope.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAQzF,SAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAuB;IAC3E,MAAM,aAAa,GAAG,QAAQ,EAAE,CAAC;IACjC,MAAM,aAAa,GAAG,mBAAmB,EAAE,CAAC;IAC5C,MAAM,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAAC;IAE1C,MAAM,aAAa,GAAG,wBAAwB,CAAC;QAC7C,cAAc,EAAE,OAAO;QACvB,gBAAgB,EAAE,aAAa,CAAC,OAAO;KACxC,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC;IAE9C,sFAAsF;IACtF,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,qBAAqB,CAAC,aAAa,CAAC,WAAW,CAAC,EACtD,CAAC,aAAa,CAAC,WAAW,CAAC,CAC5B,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,WAAW,CAAC,aAAa,EAAE,UAAU,EAAE,YAAY,CAAC,EAC1D,CAAC,aAAa,EAAE,UAAU,EAAE,YAAY,CAAC,CAC1C,CAAC;IAEF,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE,aAAa,CAAC,OAAO;QAC9B,cAAc,EAAE,aAAa,CAAC,cAAc;QAC5C,YAAY,EAAE,IAAI;KACnB,CAAC,EACF,CAAC,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,cAAc,EAAE,UAAU,EAAE,WAAW,CAAC,CAC/E,CAAC;IAEF,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC;QACL,WAAW,EAAE,aAAa,CAAC,WAAW;QACtC,OAAO,EAAE,aAAa;KACvB,CAAC,EACF,CAAC,aAAa,CAAC,WAAW,EAAE,aAAa,CAAC,CAC3C,CAAC;IAEF,OAAO,CACL,CAAC,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAC1D;MAAA,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC,QAAQ,CACrF;IAAA,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CACpC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAuB;IAC7E,IAAI,IAAI,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAChD,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,OAAO,CACL,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAChD;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAmB,CAAC,CACvB,CAAC;AACJ,CAAC","sourcesContent":["import { createTheme, ThemeContext, useFontContext, useTheme } from '@ankhorage/surface';\nimport React, { useMemo } from 'react';\n\nimport { createZoraThemeConfig } from './createZoraThemeConfig';\nimport { resolveZoraScopedThemeId } from './resolveZoraScopedThemeId';\nimport type { ZoraThemeId, ZoraThemeMode } from './types';\nimport { useZoraThemeRuntime, ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';\n\nexport interface ZoraThemeScopeProps {\n  children: React.ReactNode;\n  themeId?: ZoraThemeId;\n  mode?: ZoraThemeMode;\n}\n\nfunction ZoraThemeScopeInner({ children, themeId, mode }: ZoraThemeScopeProps) {\n  const parentSurface = useTheme();\n  const parentRuntime = useZoraThemeRuntime();\n  const { activeFontId } = useFontContext();\n\n  const scopedThemeId = resolveZoraScopedThemeId({\n    desiredThemeId: themeId,\n    inheritedThemeId: parentRuntime.themeId,\n  });\n\n  const scopedMode = mode ?? parentSurface.mode;\n\n  // Plan 2: there is no multi-theme registry yet. Keep the active theme seed inherited.\n  const surfaceConfig = useMemo(\n    () => createZoraThemeConfig(parentRuntime.sourceTheme),\n    [parentRuntime.sourceTheme],\n  );\n\n  const scopedTheme = useMemo(\n    () => createTheme(surfaceConfig, scopedMode, activeFontId),\n    [surfaceConfig, scopedMode, activeFontId],\n  );\n\n  const scopedSurfaceValue = useMemo(\n    () => ({\n      theme: scopedTheme,\n      mode: scopedMode,\n      setMode: parentSurface.setMode,\n      setThemeConfig: parentSurface.setThemeConfig,\n      _hasProvider: true,\n    }),\n    [parentSurface.setMode, parentSurface.setThemeConfig, scopedMode, scopedTheme],\n  );\n\n  const scopedRuntimeValue = useMemo(\n    () => ({\n      sourceTheme: parentRuntime.sourceTheme,\n      themeId: scopedThemeId,\n    }),\n    [parentRuntime.sourceTheme, scopedThemeId],\n  );\n\n  return (\n    <ZoraThemeRuntimeContext.Provider value={scopedRuntimeValue}>\n      <ThemeContext.Provider value={scopedSurfaceValue}>{children}</ThemeContext.Provider>\n    </ZoraThemeRuntimeContext.Provider>\n  );\n}\n\nexport function ZoraThemeScope({ children, themeId, mode }: ZoraThemeScopeProps) {\n  if (mode === undefined && themeId === undefined) {\n    return children;\n  }\n\n  return (\n    <ZoraThemeScopeInner mode={mode} themeId={themeId}>\n      {children}\n    </ZoraThemeScopeInner>\n  );\n}\n"]}
+{"version":3,"file":"ZoraThemeScope.js","sourceRoot":"","sources":["../../src/theme/ZoraThemeScope.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAQzF,SAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAuB;IAC3E,MAAM,aAAa,GAAG,QAAQ,EAAE,CAAC;IACjC,MAAM,aAAa,GAAG,mBAAmB,EAAE,CAAC;IAC5C,MAAM,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAAC;IAC1C,MAAM,aAAa,GAAG,wBAAwB,CAAC;QAC7C,cAAc,EAAE,OAAO;QACvB,gBAAgB,EAAE,aAAa,CAAC,OAAO;KACxC,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC;IAC9C,MAAM,YAAY,GAAG,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC;IAChD,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,WAAW,CAAC,YAAY,EAAE,UAAU,EAAE,YAAY,CAAC,EACzD,CAAC,YAAY,EAAE,UAAU,EAAE,YAAY,CAAC,CACzC,CAAC;IACF,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE,aAAa,CAAC,OAAO;QAC9B,cAAc,EAAE,aAAa,CAAC,cAAc;QAC5C,YAAY,EAAE,IAAI;KACnB,CAAC,EACF,CAAC,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,cAAc,EAAE,UAAU,EAAE,WAAW,CAAC,CAC/E,CAAC;IACF,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAExF,OAAO,CACL,CAAC,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAC1D;MAAA,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC,QAAQ,CACrF;IAAA,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CACpC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAuB;IAC7E,IAAI,IAAI,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS;QAAE,OAAO,QAAQ,CAAC;IACjE,OAAO,CACL,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAChD;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAmB,CAAC,CACvB,CAAC;AACJ,CAAC","sourcesContent":["import { createTheme, ThemeContext, useFontContext, useTheme } from '@ankhorage/surface';\nimport React, { useMemo } from 'react';\n\nimport { resolveZoraScopedThemeId } from './resolveZoraScopedThemeId';\nimport type { ZoraThemeId, ZoraThemeMode } from './types';\nimport { useZoraThemeRuntime, ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';\n\nexport interface ZoraThemeScopeProps {\n  children: React.ReactNode;\n  themeId?: ZoraThemeId;\n  mode?: ZoraThemeMode;\n}\n\nfunction ZoraThemeScopeInner({ children, themeId, mode }: ZoraThemeScopeProps) {\n  const parentSurface = useTheme();\n  const parentRuntime = useZoraThemeRuntime();\n  const { activeFontId } = useFontContext();\n  const scopedThemeId = resolveZoraScopedThemeId({\n    desiredThemeId: themeId,\n    inheritedThemeId: parentRuntime.themeId,\n  });\n  const scopedMode = mode ?? parentSurface.mode;\n  const sourceConfig = parentSurface.theme.config;\n  const scopedTheme = useMemo(\n    () => createTheme(sourceConfig, scopedMode, activeFontId),\n    [sourceConfig, scopedMode, activeFontId],\n  );\n  const scopedSurfaceValue = useMemo(\n    () => ({\n      theme: scopedTheme,\n      mode: scopedMode,\n      setMode: parentSurface.setMode,\n      setThemeConfig: parentSurface.setThemeConfig,\n      _hasProvider: true,\n    }),\n    [parentSurface.setMode, parentSurface.setThemeConfig, scopedMode, scopedTheme],\n  );\n  const scopedRuntimeValue = useMemo(() => ({ themeId: scopedThemeId }), [scopedThemeId]);\n\n  return (\n    <ZoraThemeRuntimeContext.Provider value={scopedRuntimeValue}>\n      <ThemeContext.Provider value={scopedSurfaceValue}>{children}</ThemeContext.Provider>\n    </ZoraThemeRuntimeContext.Provider>\n  );\n}\n\nexport function ZoraThemeScope({ children, themeId, mode }: ZoraThemeScopeProps) {\n  if (mode === undefined && themeId === undefined) return children;\n  return (\n    <ZoraThemeScopeInner mode={mode} themeId={themeId}>\n      {children}\n    </ZoraThemeScopeInner>\n  );\n}\n"]}

package/dist/theme/resolveZoraThemeRecipe.d.ts

@@ -0,0 +1,16 @@
+import type { ThemeConfig, ThemeRecipeOverrideValue } from '@ankhorage/contracts';
+interface ZoraThemeRecipeRuntimeTheme {
+    readonly config: ThemeConfig;
+    readonly colors: object;
+    readonly spacing: object;
+    readonly radii: object;
+    readonly shadows: object;
+    readonly typography: {
+        readonly sizes: object;
+        readonly weights: object;
+        readonly headings: object;
+    };
+}
+export declare function resolveZoraThemeRecipe(theme: ZoraThemeRecipeRuntimeTheme, recipeName: string): Readonly<Record<string, ThemeRecipeOverrideValue>>;
+export {};
+//# sourceMappingURL=resolveZoraThemeRecipe.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resolveZoraThemeRecipe.d.ts","sourceRoot":"","sources":["../../src/theme/resolveZoraThemeRecipe.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAKlF,UAAU,2BAA2B;IACnC,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,UAAU,EAAE;QACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;QACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;KAC3B,CAAC;CACH;AAID,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,2BAA2B,EAClC,UAAU,EAAE,MAAM,GACjB,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC,CAqBpD"}

package/dist/theme/resolveZoraThemeRecipe.js

@@ -0,0 +1,56 @@
+import { ZORA_THEME_RECIPE_META } from '../metadata/themeRecipeMeta';
+const recipeMetaByName = new Map(Object.entries(ZORA_THEME_RECIPE_META));
+export function resolveZoraThemeRecipe(theme, recipeName) {
+    const meta = recipeMetaByName.get(recipeName);
+    if (!meta)
+        throw new RangeError(`Unknown ZORA theme recipe: ${recipeName}.`);
+    const recipes = meta.kind === 'component' ? theme.config.recipes?.components : theme.config.recipes?.patterns;
+    const overrides = new Map(Object.entries(recipes ?? {})).get(recipeName);
+    const overrideByField = new Map(Object.entries(overrides ?? {}));
+    const resolved = [];
+    for (const [fieldName, fieldMeta] of Object.entries(meta.fields)) {
+        const override = overrideByField.get(fieldName);
+        if (override !== undefined) {
+            validateFieldValue(theme, recipeName, fieldName, fieldMeta, override);
+            resolved.push([fieldName, override]);
+        }
+        else if (fieldMeta.default !== undefined) {
+            resolved.push([fieldName, fieldMeta.default]);
+        }
+    }
+    return Object.fromEntries(resolved);
+}
+function validateFieldValue(theme, recipeName, fieldName, meta, value) {
+    if (meta.type === 'boolean') {
+        if (typeof value !== 'boolean') {
+            throw new TypeError(`Theme recipe ${recipeName}.${fieldName} must be boolean.`);
+        }
+        return;
+    }
+    if (typeof value !== 'string') {
+        throw new TypeError(`Theme recipe ${recipeName}.${fieldName} must be a string.`);
+    }
+    if (meta.type === 'choice' && !meta.options.includes(value)) {
+        throw new RangeError(`Invalid theme recipe choice for ${recipeName}.${fieldName}: ${value}.`);
+    }
+    if (meta.type === 'token' && !hasThemeToken(theme, meta.tokenFamily, value)) {
+        throw new RangeError(`Unknown ${meta.tokenFamily} token for ${recipeName}.${fieldName}: ${value}.`);
+    }
+}
+function hasThemeToken(theme, family, token) {
+    if (family === 'colors')
+        return hasOwn(theme.colors, token);
+    if (family === 'spacing')
+        return hasOwn(theme.spacing, token);
+    if (family === 'radii')
+        return hasOwn(theme.radii, token);
+    if (family === 'shadows')
+        return hasOwn(theme.shadows, token);
+    return (hasOwn(theme.typography.sizes, token) ||
+        hasOwn(theme.typography.weights, token) ||
+        hasOwn(theme.typography.headings, token));
+}
+function hasOwn(value, key) {
+    return Object.prototype.hasOwnProperty.call(value, key);
+}
+//# sourceMappingURL=resolveZoraThemeRecipe.js.map

package/dist/theme/resolveZoraThemeRecipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveZoraThemeRecipe.js","sourceRoot":"","sources":["../../src/theme/resolveZoraThemeRecipe.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ThemeConfig, ThemeRecipeOverrideValue } from '@ankhorage/contracts';\n\nimport { ZORA_THEME_RECIPE_META } from '../metadata/themeRecipeMeta';\nimport type { ZoraThemeRecipeFieldMeta, ZoraThemeTokenFamily } from '../metadata/themeRecipeTypes';\n\ninterface ZoraThemeRecipeRuntimeTheme {\n  readonly config: ThemeConfig;\n  readonly colors: object;\n  readonly spacing: object;\n  readonly radii: object;\n  readonly shadows: object;\n  readonly typography: {\n    readonly sizes: object;\n    readonly weights: object;\n    readonly headings: object;\n  };\n}\n\nconst recipeMetaByName = new Map(Object.entries(ZORA_THEME_RECIPE_META));\n\nexport function resolveZoraThemeRecipe(\n  theme: ZoraThemeRecipeRuntimeTheme,\n  recipeName: string,\n): Readonly<Record<string, ThemeRecipeOverrideValue>> {\n  const meta = recipeMetaByName.get(recipeName);\n  if (!meta) throw new RangeError(`Unknown ZORA theme recipe: ${recipeName}.`);\n\n  const recipes =\n    meta.kind === 'component' ? theme.config.recipes?.components : theme.config.recipes?.patterns;\n  const overrides = new Map(Object.entries(recipes ?? {})).get(recipeName);\n  const overrideByField = new Map(Object.entries(overrides ?? {}));\n  const resolved: [string, ThemeRecipeOverrideValue][] = [];\n\n  for (const [fieldName, fieldMeta] of Object.entries(meta.fields)) {\n    const override = overrideByField.get(fieldName);\n    if (override !== undefined) {\n      validateFieldValue(theme, recipeName, fieldName, fieldMeta, override);\n      resolved.push([fieldName, override]);\n    } else if (fieldMeta.default !== undefined) {\n      resolved.push([fieldName, fieldMeta.default]);\n    }\n  }\n\n  return Object.fromEntries(resolved);\n}\n\nfunction validateFieldValue(\n  theme: ZoraThemeRecipeRuntimeTheme,\n  recipeName: string,\n  fieldName: string,\n  meta: ZoraThemeRecipeFieldMeta,\n  value: ThemeRecipeOverrideValue,\n): void {\n  if (meta.type === 'boolean') {\n    if (typeof value !== 'boolean') {\n      throw new TypeError(`Theme recipe ${recipeName}.${fieldName} must be boolean.`);\n    }\n    return;\n  }\n  if (typeof value !== 'string') {\n    throw new TypeError(`Theme recipe ${recipeName}.${fieldName} must be a string.`);\n  }\n  if (meta.type === 'choice' && !meta.options.includes(value)) {\n    throw new RangeError(`Invalid theme recipe choice for ${recipeName}.${fieldName}: ${value}.`);\n  }\n  if (meta.type === 'token' && !hasThemeToken(theme, meta.tokenFamily, value)) {\n    throw new RangeError(\n      `Unknown ${meta.tokenFamily} token for ${recipeName}.${fieldName}: ${value}.`,\n    );\n  }\n}\n\nfunction hasThemeToken(\n  theme: ZoraThemeRecipeRuntimeTheme,\n  family: ZoraThemeTokenFamily,\n  token: string,\n): boolean {\n  if (family === 'colors') return hasOwn(theme.colors, token);\n  if (family === 'spacing') return hasOwn(theme.spacing, token);\n  if (family === 'radii') return hasOwn(theme.radii, token);\n  if (family === 'shadows') return hasOwn(theme.shadows, token);\n  return (\n    hasOwn(theme.typography.sizes, token) ||\n    hasOwn(theme.typography.weights, token) ||\n    hasOwn(theme.typography.headings, token)\n  );\n}\n\nfunction hasOwn(value: object, key: PropertyKey): boolean {\n  return Object.prototype.hasOwnProperty.call(value, key);\n}\n"]}

package/dist/theme/useZoraThemeRecipe.d.ts

@@ -0,0 +1,2 @@
+export declare function useZoraThemeRecipe(recipeName: string): Readonly<Record<string, import("@ankhorage/contracts").ThemeRecipeOverrideValue>>;
+//# sourceMappingURL=useZoraThemeRecipe.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useZoraThemeRecipe.d.ts","sourceRoot":"","sources":["../../src/theme/useZoraThemeRecipe.ts"],"names":[],"mappings":"AAGA,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,qFAGpD"}

package/dist/theme/useZoraThemeRecipe.js

@@ -0,0 +1,7 @@
+import { resolveZoraThemeRecipe } from './resolveZoraThemeRecipe';
+import { useZoraTheme } from './useZoraTheme';
+export function useZoraThemeRecipe(recipeName) {
+    const { theme } = useZoraTheme();
+    return resolveZoraThemeRecipe(theme, recipeName);
+}
+//# sourceMappingURL=useZoraThemeRecipe.js.map

package/dist/theme/useZoraThemeRecipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useZoraThemeRecipe.js","sourceRoot":"","sources":["../../src/theme/useZoraThemeRecipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,UAAU,kBAAkB,CAAC,UAAkB;IACnD,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,OAAO,sBAAsB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;AACnD,CAAC","sourcesContent":["import { resolveZoraThemeRecipe } from './resolveZoraThemeRecipe';\nimport { useZoraTheme } from './useZoraTheme';\n\nexport function useZoraThemeRecipe(recipeName: string) {\n  const { theme } = useZoraTheme();\n  return resolveZoraThemeRecipe(theme, recipeName);\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -42,8 +42,8 @@
   },
   "dependencies": {
     "@ankhorage/color-theory": "^0.0.8",
-    "@ankhorage/contracts": "^4.0.1",
-    "@ankhorage/surface": "^2.1.1"
+    "@ankhorage/contracts": "^7.2.0",
+    "@ankhorage/surface": "^2.2.0"
   },
   "files": [
     "dist",
@@ -90,7 +90,7 @@
   },
   "devDependencies": {
     "@ankhorage/devtools": "^1.3.4",
-    "@ankhorage/paradox": "^0.1.10",
+    "@ankhorage/paradox": "^0.1.21",
     "@changesets/cli": "^2.31.0",
     "@expo/vector-icons": "^15.1.1",
     "@react-native-picker/picker": "^2.11.4",

package/src/components/button/Button.tsx

@@ -1,8 +1,9 @@
 import { Button as SurfaceButton } from '@ankhorage/surface';
 import React from 'react';
 
-import { resolveButtonRecipe } from '../../internal/recipes';
+import { useZoraThemeRecipe } from '../../theme/useZoraThemeRecipe';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { resolveButtonThemeRecipe } from './resolveButtonThemeRecipe';
 import type { ButtonProps } from './types';
 
 function ButtonInner({
@@ -14,7 +15,8 @@ function ButtonInner({
   interactionPolicy,
   ...props
 }: ButtonProps) {
-  const recipe = resolveButtonRecipe({ color, variant, size });
+  const themeFields = useZoraThemeRecipe('Button');
+  const recipe = resolveButtonThemeRecipe({ color, variant, size, themeFields });
 
   return (
     <SurfaceButton

package/src/components/button/meta.ts

@@ -1,20 +1,18 @@
 import { ZORA_COLORS } from '../../internal/colorModel';
 import type { ZoraComponentMeta } from '../../metadata';
 
+const themeAuthoring = {
+  authority: 'theme',
+  scope: 'component',
+  allowInstanceOverride: true,
+} as const;
+
 export const buttonMeta = {
   name: 'Button',
   category: 'component',
   directManifestNode: true,
   allowedChildren: [],
-  blueprint: {
-    label: 'Button',
-    defaultProps: {
-      children: 'Continue',
-      color: 'primary',
-      variant: 'solid',
-      size: 'm',
-    },
-  },
+  blueprint: { label: 'Button', defaultProps: { children: 'Continue' } },
   events: {
     press: {
       label: 'Press',
@@ -36,24 +34,21 @@ export const buttonMeta = {
       category: 'Style',
       label: 'Color',
       enum: [...ZORA_COLORS],
-      default: 'primary',
-      authoring: { authority: 'theme', scope: 'component' },
+      authoring: themeAuthoring,
     },
     variant: {
       type: 'enum',
       category: 'Style',
       label: 'Variant',
       enum: ['solid', 'outline', 'ghost', 'soft'],
-      default: 'solid',
-      authoring: { authority: 'theme', scope: 'component' },
+      authoring: themeAuthoring,
     },
     size: {
       type: 'enum',
       category: 'Style',
       label: 'Size',
       enum: ['s', 'm', 'l'],
-      default: 'm',
-      authoring: { authority: 'theme', scope: 'component' },
+      authoring: themeAuthoring,
     },
   },
 } as const satisfies ZoraComponentMeta;

package/src/components/button/resolveButtonThemeRecipe.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, test } from 'bun:test';
+
+import { resolveButtonThemeRecipe } from './resolveButtonThemeRecipe';
+
+describe('resolveButtonThemeRecipe', () => {
+  test('uses theme defaults without changing the existing hard default', () => {
+    expect(
+      resolveButtonThemeRecipe({ themeFields: { color: 'primary', variant: 'solid', size: 'l' } }),
+    ).toEqual({
+      color: 'primary',
+      variant: 'solid',
+      size: 'l',
+    });
+  });
+
+  test('lets explicit instance props override theme recipe values', () => {
+    expect(
+      resolveButtonThemeRecipe({
+        color: 'danger',
+        size: 's',
+        themeFields: { color: 'primary', variant: 'soft', size: 'l' },
+      }),
+    ).toEqual({ color: 'danger', variant: 'soft', size: 's' });
+  });
+});

package/src/components/button/resolveButtonThemeRecipe.ts

@@ -0,0 +1,41 @@
+import type { ThemeRecipeOverrideValue } from '@ankhorage/contracts';
+
+import {
+  resolveButtonRecipe,
+  type ZoraButtonVariant,
+  type ZoraColor,
+  type ZoraControlSize,
+} from '../../internal/recipes';
+
+export function resolveButtonThemeRecipe(input: {
+  readonly color?: ZoraColor;
+  readonly variant?: ZoraButtonVariant;
+  readonly size?: ZoraControlSize;
+  readonly themeFields: Readonly<Record<string, ThemeRecipeOverrideValue>>;
+}) {
+  return resolveButtonRecipe({
+    color: input.color ?? readColor(input.themeFields.color),
+    variant: input.variant ?? readVariant(input.themeFields.variant),
+    size: input.size ?? readSize(input.themeFields.size),
+  });
+}
+
+function readColor(value: ThemeRecipeOverrideValue | undefined): ZoraColor | undefined {
+  if (typeof value !== 'string') return undefined;
+  if (value === 'primary' || value === 'secondary' || value === 'tertiary') return value;
+  if (value === 'quaternary' || value === 'neutral' || value === 'danger') return value;
+  if (value === 'success' || value === 'warning' || value === 'error' || value === 'info')
+    return value;
+  return undefined;
+}
+
+function readVariant(value: ThemeRecipeOverrideValue | undefined): ZoraButtonVariant | undefined {
+  if (value === 'solid' || value === 'outline' || value === 'ghost' || value === 'soft')
+    return value;
+  return undefined;
+}
+
+function readSize(value: ThemeRecipeOverrideValue | undefined): ZoraControlSize | undefined {
+  if (value === 's' || value === 'm' || value === 'l') return value;
+  return undefined;
+}

package/src/components/button/themeRecipeMeta.ts

@@ -1,14 +1,15 @@
+import { ZORA_COLORS } from '../../internal/colorModel';
 import type { ZoraThemeRecipeMeta } from '../../metadata/themeRecipeTypes';
 
 export const buttonThemeRecipeMeta = {
   name: 'Button',
   kind: 'component',
-  description: 'Maps shared theme tokens and semantic choices into Button presentation.',
+  description: 'Maps shared semantic choices into Button presentation defaults.',
   fields: {
     color: {
-      type: 'token',
-      tokenFamily: 'colors',
+      type: 'choice',
       label: 'Color',
+      options: ZORA_COLORS,
       default: 'primary',
     },
     variant: {
@@ -22,13 +23,7 @@ export const buttonThemeRecipeMeta = {
       label: 'Size',
       description: 'A Button-specific semantic scale, not a universal pixel size.',
       options: ['s', 'm', 'l'],
-      default: 'm',
-    },
-    radius: {
-      type: 'token',
-      tokenFamily: 'radii',
-      label: 'Corner radius',
-      default: 'm',
+      default: 'l',
     },
   },
 } as const satisfies ZoraThemeRecipeMeta;

package/src/components/card/Card.tsx

@@ -3,9 +3,11 @@ import React from 'react';
 
 import { Box, Stack } from '../../foundation';
 import { resolveCardVariant } from '../../internal/recipes';
+import { useZoraThemeRecipe } from '../../theme/useZoraThemeRecipe';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Heading } from '../heading';
 import { Text } from '../text';
+import { resolveCardThemeRecipe } from './resolveCardThemeRecipe';
 import type { CardProps } from './types';
 
 function CardInner({
@@ -17,15 +19,19 @@ function CardInner({
   eyebrow,
   actions,
   footer,
-  tone = 'default',
-  compact = false,
+  tone,
+  compact,
+  padding,
+  radius,
   onPress,
   interactionPolicy,
   ...props
 }: CardProps) {
+  const themeFields = useZoraThemeRecipe('Card');
+  const recipe = resolveCardThemeRecipe({ tone, compact, padding, radius, themeFields });
   const hasHeader = [eyebrow, title, description, actions].some((item) => item != null);
   const hasFooter = footer !== undefined;
-  const gap = compact ? 's' : 'm';
+  const gap = recipe.compact ? 's' : 'm';
   const isInteractive = Boolean(onPress) && !actions;
   const passive = interactionPolicy === 'passive';
 
@@ -33,9 +39,9 @@ function CardInner({
     <SurfaceCard
       {...props}
       onPress={isInteractive && !passive ? onPress : undefined}
-      p={compact ? 'm' : 'l'}
-      radius="l"
-      variant={resolveCardVariant(tone)}
+      p={recipe.padding}
+      radius={recipe.radius}
+      variant={resolveCardVariant(recipe.tone)}
     >
       <Stack gap={gap}>
         {hasHeader ? (
@@ -52,7 +58,7 @@ function CardInner({
                     {eyebrow}
                   </Text>
                 ) : null}
-                {title ? <Heading level={compact ? 4 : 3}>{title}</Heading> : null}
+                {title ? <Heading level={recipe.compact ? 4 : 3}>{title}</Heading> : null}
                 {description ? (
                   <Text emphasis="muted" variant="bodySmall">
                     {description}

package/src/components/card/meta.ts

@@ -1,18 +1,18 @@
 import type { ZoraComponentMeta } from '../../metadata';
 import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
 
+const themeAuthoring = {
+  authority: 'theme',
+  scope: 'component',
+  allowInstanceOverride: true,
+} as const;
+
 export const cardMeta = {
   name: 'Card',
   category: 'component',
   directManifestNode: true,
   allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
-  blueprint: {
-    label: 'Card',
-    defaultProps: {
-      title: 'Card',
-      tone: 'default',
-    },
-  },
+  blueprint: { label: 'Card', defaultProps: { title: 'Card' } },
   props: {
     title: {
       type: 'string',
@@ -37,15 +37,15 @@ export const cardMeta = {
       category: 'Style',
       label: 'Tone',
       enum: ['default', 'subtle', 'outline'],
-      default: 'default',
-      authoring: { authority: 'theme', scope: 'component' },
+      authoring: themeAuthoring,
     },
-    compact: {
-      type: 'boolean',
-      category: 'Layout',
-      label: 'Compact',
-      default: false,
-      authoring: { authority: 'theme', scope: 'component' },
+    compact: { type: 'boolean', category: 'Layout', label: 'Compact', authoring: themeAuthoring },
+    padding: { type: 'spacing', category: 'Layout', label: 'Padding', authoring: themeAuthoring },
+    radius: {
+      type: 'radius',
+      category: 'Style',
+      label: 'Corner radius',
+      authoring: themeAuthoring,
     },
   },
 } as const satisfies ZoraComponentMeta;