@ankhorage/zora 0.10.0 → 0.12.0

package/src/internal/color/primary.ts

@@ -0,0 +1,64 @@
+import type { ZoraHexColor, ZoraThemeMode } from '../../theme/types';
+import { clampOklchToGamut, formatOklchAsHex, parseHexToOklch } from './oklch';
+import type { ZoraOklchColor } from './types';
+
+const FALLBACK_PRIMARY_COLOR: ZoraHexColor = '#0f766e';
+
+const LIGHT_PRIMARY_LIGHTNESS_TARGET = 0.52;
+const DARK_PRIMARY_LIGHTNESS_TARGET = 0.72;
+
+const MIN_PRIMARY_CHROMA = 0.04;
+const MAX_LIGHT_PRIMARY_CHROMA = 0.18;
+const MAX_DARK_PRIMARY_CHROMA = 0.2;
+
+const LIGHTNESS_BLEND = 0.85;
+
+function clampNumber(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(value, max));
+}
+
+function resolveModePrimaryTargetLightness(mode: ZoraThemeMode): number {
+  return mode === 'dark' ? DARK_PRIMARY_LIGHTNESS_TARGET : LIGHT_PRIMARY_LIGHTNESS_TARGET;
+}
+
+function resolveModePrimaryMaxChroma(mode: ZoraThemeMode): number {
+  return mode === 'dark' ? MAX_DARK_PRIMARY_CHROMA : MAX_LIGHT_PRIMARY_CHROMA;
+}
+
+export function resolveModePrimaryColor(
+  primaryColor: ZoraHexColor,
+  mode: ZoraThemeMode,
+): ZoraHexColor {
+  let seed: ZoraOklchColor;
+
+  try {
+    seed = parseHexToOklch(primaryColor);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+
+    if (process.env.NODE_ENV === 'production') {
+      console.warn(`Invalid ZORA primaryColor '${primaryColor}'. Falling back. ${message}`);
+      return resolveModePrimaryColor(FALLBACK_PRIMARY_COLOR, mode);
+    }
+
+    throw error instanceof Error ? error : new Error(message);
+  }
+
+  const targetLightness = resolveModePrimaryTargetLightness(mode);
+  const maxChroma = resolveModePrimaryMaxChroma(mode);
+
+  const blendedLightness = seed.l + (targetLightness - seed.l) * LIGHTNESS_BLEND;
+  const boundedLightness = clampNumber(blendedLightness, 0.12, 0.92);
+
+  const cappedChroma = clampNumber(seed.c, 0, maxChroma);
+  const boundedChroma =
+    seed.c < MIN_PRIMARY_CHROMA ? cappedChroma : Math.max(cappedChroma, MIN_PRIMARY_CHROMA);
+
+  const derived = clampOklchToGamut({
+    l: boundedLightness,
+    c: boundedChroma,
+    h: seed.h,
+  });
+
+  return formatOklchAsHex(derived);
+}

package/src/internal/color/types.ts

@@ -0,0 +1,5 @@
+export interface ZoraOklchColor {
+  l: number;
+  c: number;
+  h: number;
+}

package/src/layout/app-shell/AppShell.tsx

@@ -2,9 +2,12 @@ import { Box } from '@ankhorage/surface';
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { AppShellProps } from './types';
 
-export function AppShell({
+function AppShellInner({
+  themeId: _themeId,
+  mode: _mode,
   children,
   header,
   footer,
@@ -32,6 +35,8 @@ export function AppShell({
   );
 }
 
+export const AppShell = withZoraThemeScope(AppShellInner);
+
 const styles = StyleSheet.create({
   root: {
     flex: 1,

package/src/layout/app-shell/types.ts

@@ -1,12 +1,13 @@
 import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-export interface AppShellProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface AppShellProps extends ZoraBaseProps {
   children?: React.ReactNode;
   header?: React.ReactNode;
   footer?: React.ReactNode;
   overlay?: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   bodyStyle?: StyleProp<ViewStyle>;
-  testID?: string;
 }

package/src/layout/auth-layout/AuthLayout.tsx

@@ -2,9 +2,12 @@ import { Center, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Card } from '../../components/card';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { AuthLayoutProps } from './types';
 
-export function AuthLayout({
+function AuthLayoutInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   eyebrow,
@@ -27,3 +30,5 @@ export function AuthLayout({
     </Center>
   );
 }
+
+export const AuthLayout = withZoraThemeScope(AuthLayoutInner);

package/src/layout/auth-layout/types.ts

@@ -1,10 +1,11 @@
 import type React from 'react';
 
-export interface AuthLayoutProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface AuthLayoutProps extends ZoraBaseProps {
   title?: React.ReactNode;
   description?: React.ReactNode;
   eyebrow?: React.ReactNode;
   children?: React.ReactNode;
   footer?: React.ReactNode;
-  testID?: string;
 }

package/src/layout/page/Page.tsx

@@ -2,9 +2,18 @@ import { Container, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { resolvePageMaxWidth } from '../../internal/recipes';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { PageProps } from './types';
 
-export function Page({ children, header, footer, width = 'default', testID }: PageProps) {
+function PageInner({
+  themeId: _themeId,
+  mode: _mode,
+  children,
+  header,
+  footer,
+  width = 'default',
+  testID,
+}: PageProps) {
   return (
     <Container maxWidth={resolvePageMaxWidth(width)} py="xl" testID={testID}>
       <Stack gap="l">
@@ -15,3 +24,5 @@ export function Page({ children, header, footer, width = 'default', testID }: Pa
     </Container>
   );
 }
+
+export const Page = withZoraThemeScope(PageInner);

package/src/layout/page/types.ts

@@ -1,11 +1,11 @@
 import type React from 'react';
 
 import type { ZoraContentWidth } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface PageProps {
+export interface PageProps extends ZoraBaseProps {
   children?: React.ReactNode;
   header?: React.ReactNode;
   footer?: React.ReactNode;
   width?: ZoraContentWidth;
-  testID?: string;
 }

package/src/layout/page-header/PageHeader.tsx

@@ -3,9 +3,12 @@ import React from 'react';
 
 import { Heading } from '../../components/heading';
 import { Text } from '../../components/text';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { PageHeaderProps } from './types';
 
-export function PageHeader({
+function PageHeaderInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   eyebrow,
@@ -41,3 +44,5 @@ export function PageHeader({
     </Stack>
   );
 }
+
+export const PageHeader = withZoraThemeScope(PageHeaderInner);

package/src/layout/page-header/types.ts

@@ -1,10 +1,11 @@
 import type React from 'react';
 
-export interface PageHeaderProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface PageHeaderProps extends ZoraBaseProps {
   title: React.ReactNode;
   description?: React.ReactNode;
   eyebrow?: React.ReactNode;
   actions?: React.ReactNode;
   meta?: React.ReactNode;
-  testID?: string;
 }

package/src/layout/page-section/PageSection.tsx

@@ -2,9 +2,18 @@ import { Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { SectionHeader } from '../../patterns/section-header';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { PageSectionProps } from './types';
 
-export function PageSection({ title, description, actions, children, testID }: PageSectionProps) {
+function PageSectionInner({
+  themeId: _themeId,
+  mode: _mode,
+  title,
+  description,
+  actions,
+  children,
+  testID,
+}: PageSectionProps) {
   return (
     <Stack gap="m" testID={testID}>
       {title ? <SectionHeader actions={actions} description={description} title={title} /> : null}
@@ -12,3 +21,5 @@ export function PageSection({ title, description, actions, children, testID }: P
     </Stack>
   );
 }
+
+export const PageSection = withZoraThemeScope(PageSectionInner);

package/src/layout/page-section/types.ts

@@ -1,9 +1,10 @@
 import type React from 'react';
 
-export interface PageSectionProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface PageSectionProps extends ZoraBaseProps {
   title?: React.ReactNode;
   description?: React.ReactNode;
   actions?: React.ReactNode;
   children?: React.ReactNode;
-  testID?: string;
 }

package/src/layout/settings-layout/SettingsLayout.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Page } from '../page';
 import { PageHeader } from '../page-header';
 import { SidebarLayout } from '../sidebar-layout';
 import type { SettingsLayoutProps } from './types';
 
-export function SettingsLayout({
+function SettingsLayoutInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   sidebar,
@@ -24,3 +27,5 @@ export function SettingsLayout({
     </Page>
   );
 }
+
+export const SettingsLayout = withZoraThemeScope(SettingsLayoutInner);

package/src/layout/settings-layout/types.ts

@@ -1,10 +1,11 @@
 import type React from 'react';
 
-export interface SettingsLayoutProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface SettingsLayoutProps extends ZoraBaseProps {
   title?: React.ReactNode;
   description?: React.ReactNode;
   sidebar: React.ReactNode;
   children?: React.ReactNode;
   actions?: React.ReactNode;
-  testID?: string;
 }

package/src/layout/sidebar-layout/SidebarLayout.tsx

@@ -1,9 +1,12 @@
 import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SidebarLayoutProps } from './types';
 
-export function SidebarLayout({
+function SidebarLayoutInner({
+  themeId: _themeId,
+  mode: _mode,
   sidebar,
   children,
   aside,
@@ -21,3 +24,5 @@ export function SidebarLayout({
     </Stack>
   );
 }
+
+export const SidebarLayout = withZoraThemeScope(SidebarLayoutInner);

package/src/layout/sidebar-layout/types.ts

@@ -1,10 +1,11 @@
 import type React from 'react';
 
-export interface SidebarLayoutProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface SidebarLayoutProps extends ZoraBaseProps {
   sidebar: React.ReactNode;
   children?: React.ReactNode;
   aside?: React.ReactNode;
   sidebarWidth?: number;
   asideWidth?: number;
-  testID?: string;
 }

package/src/layout/topbar-layout/TopbarLayout.tsx

@@ -1,10 +1,18 @@
 import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { SidebarLayout } from '../sidebar-layout';
 import type { TopbarLayoutProps } from './types';
 
-export function TopbarLayout({ topbar, children, sidebar, testID }: TopbarLayoutProps) {
+function TopbarLayoutInner({
+  themeId: _themeId,
+  mode: _mode,
+  topbar,
+  children,
+  sidebar,
+  testID,
+}: TopbarLayoutProps) {
   return (
     <Stack gap="l" testID={testID}>
       <Box>{topbar}</Box>
@@ -12,3 +20,5 @@ export function TopbarLayout({ topbar, children, sidebar, testID }: TopbarLayout
     </Stack>
   );
 }
+
+export const TopbarLayout = withZoraThemeScope(TopbarLayoutInner);

package/src/layout/topbar-layout/types.ts

@@ -1,8 +1,9 @@
 import type React from 'react';
 
-export interface TopbarLayoutProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface TopbarLayoutProps extends ZoraBaseProps {
   topbar: React.ReactNode;
   children?: React.ReactNode;
   sidebar?: React.ReactNode;
-  testID?: string;
 }

package/src/patterns/auth/ForgotPasswordForm.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { Button } from '../../components/button';
 import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ForgotPasswordFormProps } from './types';
 import {
   defaultIdentifiers,
@@ -14,7 +15,9 @@ import {
 
 type ForgotPasswordFieldName = 'identifier';
 
-export function ForgotPasswordForm({
+function ForgotPasswordFormInner({
+  themeId: _themeId,
+  mode: _mode,
   identifiers = defaultIdentifiers,
   identifierLabel,
   signInLabel = 'Sign in',
@@ -82,3 +85,5 @@ export function ForgotPasswordForm({
     />
   );
 }
+
+export const ForgotPasswordForm = withZoraThemeScope(ForgotPasswordFormInner);

package/src/patterns/auth/OtpForm.tsx

@@ -3,11 +3,14 @@ import React from 'react';
 
 import { Button } from '../../components/button';
 import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { OtpFormProps } from './types';
 
 type OtpFieldName = 'otp';
 
-export function OtpForm({
+function OtpFormInner({
+  themeId: _themeId,
+  mode: _mode,
   length = 6,
   otpLabel = 'Code',
   resendLabel = 'Resend code',
@@ -78,3 +81,5 @@ export function OtpForm({
     />
   );
 }
+
+export const OtpForm = withZoraThemeScope(OtpFormInner);

package/src/patterns/auth/SignInForm.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { Button } from '../../components/button';
 import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SignInFormProps } from './types';
 import {
   defaultIdentifiers,
@@ -14,7 +15,9 @@ import {
 
 type SignInFieldName = 'identifier' | 'secret';
 
-export function SignInForm({
+function SignInFormInner({
+  themeId: _themeId,
+  mode: _mode,
   identifiers = defaultIdentifiers,
   identifierLabel,
   secretLabel = 'Password',
@@ -109,3 +112,5 @@ export function SignInForm({
     />
   );
 }
+
+export const SignInForm = withZoraThemeScope(SignInFormInner);

package/src/patterns/auth/SignUpForm.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { Button } from '../../components/button';
 import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SignUpFormProps } from './types';
 
 const defaultSignUpFields = [
@@ -30,7 +31,9 @@ function createValues(fields: readonly FormFieldConfig[]): FormValues {
   return values;
 }
 
-export function SignUpForm({
+function SignUpFormInner({
+  themeId: _themeId,
+  mode: _mode,
   fields = defaultSignUpFields,
   signInLabel = 'Sign in',
   loading = false,
@@ -74,3 +77,5 @@ export function SignUpForm({
     />
   );
 }
+
+export const SignUpForm = withZoraThemeScope(SignUpFormInner);

package/src/patterns/auth/types.ts

@@ -1,15 +1,15 @@
 import type React from 'react';
 
 import type { FormFieldConfig, FormValues } from '../../components/form';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export type AuthIdentifierKind = 'email' | 'phone' | 'username';
 
-export interface AuthFormBaseProps {
+export interface AuthFormBaseProps extends ZoraBaseProps {
   loading?: boolean;
   disabled?: boolean;
   error?: React.ReactNode;
   submitLabel?: React.ReactNode;
-  testID?: string;
 }
 
 export interface SignInFormValues {

package/src/patterns/collection-editor/CollectionEditor.tsx

@@ -4,10 +4,13 @@ import React from 'react';
 import { Button } from '../../components/button';
 import { IconButton } from '../../components/icon-button';
 import { Text } from '../../components/text';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Panel } from '../panel';
 import type { CollectionEditorProps } from './types';
 
-export function CollectionEditor<TItem>({
+function CollectionEditorInner<TItem>({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   items,
@@ -99,3 +102,5 @@ export function CollectionEditor<TItem>({
     </Panel>
   );
 }
+
+export const CollectionEditor = withZoraThemeScope(CollectionEditorInner);

package/src/patterns/collection-editor/types.ts

@@ -10,7 +10,9 @@ export interface CollectionEditorRenderItemProps<TItem> {
   canMoveDown: boolean;
 }
 
-export interface CollectionEditorProps<TItem> {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface CollectionEditorProps<TItem> extends ZoraBaseProps {
   title?: React.ReactNode;
   description?: React.ReactNode;
   items: readonly TItem[];
@@ -21,5 +23,4 @@ export interface CollectionEditorProps<TItem> {
   addLabel?: React.ReactNode;
   emptyLabel?: React.ReactNode;
   disabled?: boolean;
-  testID?: string;
 }

package/src/patterns/confirm-dialog/ConfirmDialog.tsx

@@ -3,9 +3,12 @@ import React from 'react';
 
 import { Button } from '../../components/button';
 import { Modal } from '../../components/modal';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ConfirmDialogProps } from './types';
 
-export function ConfirmDialog({
+function ConfirmDialogInner({
+  themeId: _themeId,
+  mode: _mode,
   visible,
   title,
   description,
@@ -44,3 +47,5 @@ export function ConfirmDialog({
     </Modal>
   );
 }
+
+export const ConfirmDialog = withZoraThemeScope(ConfirmDialogInner);

package/src/patterns/confirm-dialog/types.ts

@@ -1,8 +1,9 @@
 import type React from 'react';
 
 import type { ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface ConfirmDialogProps {
+export interface ConfirmDialogProps extends ZoraBaseProps {
   visible: boolean;
   title: React.ReactNode;
   description?: React.ReactNode;
@@ -15,5 +16,4 @@ export interface ConfirmDialogProps {
   closeOnBackdrop?: boolean;
   onConfirm?: () => void;
   onCancel?: () => void;
-  testID?: string;
 }

package/src/patterns/disclosure-section/DisclosureSection.tsx

@@ -2,10 +2,13 @@ import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { IconButton } from '../../components/icon-button';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Panel } from '../panel';
 import type { DisclosureSectionProps } from './types';
 
-export function DisclosureSection({
+function DisclosureSectionInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   icon,
@@ -59,3 +62,5 @@ export function DisclosureSection({
     </Panel>
   );
 }
+
+export const DisclosureSection = withZoraThemeScope(DisclosureSectionInner);

package/src/patterns/disclosure-section/types.ts

@@ -1,7 +1,9 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type { ReactNode } from 'react';
 
-export interface DisclosureSectionProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface DisclosureSectionProps extends ZoraBaseProps {
   title: ReactNode;
   description?: ReactNode;
   icon?: ButtonIconSpec;
@@ -11,5 +13,4 @@ export interface DisclosureSectionProps {
   actions?: ReactNode;
   children?: ReactNode;
   disabled?: boolean;
-  testID?: string;
 }

package/src/patterns/empty-state/EmptyState.tsx

@@ -3,9 +3,12 @@ import React from 'react';
 
 import { Button } from '../../components/button';
 import { Card } from '../../components/card';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { EmptyStateProps } from './types';
 
-export function EmptyState({
+function EmptyStateInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   eyebrow,
@@ -51,3 +54,5 @@ export function EmptyState({
     </Card>
   );
 }
+
+export const EmptyState = withZoraThemeScope(EmptyStateInner);

package/src/patterns/empty-state/types.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
 
 import type { ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface EmptyStateAction {
   label: React.ReactNode;
@@ -9,12 +10,11 @@ export interface EmptyStateAction {
   emphasis?: ZoraEmphasis;
 }
 
-export interface EmptyStateProps {
+export interface EmptyStateProps extends ZoraBaseProps {
   title: React.ReactNode;
   description?: React.ReactNode;
   eyebrow?: React.ReactNode;
   primaryAction?: EmptyStateAction;
   secondaryAction?: EmptyStateAction;
   footer?: React.ReactNode;
-  testID?: string;
 }