@ankhorage/zora 0.10.0 → 0.12.0

package/src/patterns/form-field/FormField.tsx

@@ -2,9 +2,18 @@ import { Field, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Text } from '../../components/text';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { FormFieldProps } from './types';
 
-export function FormField({ label, description, helperText, children, ...props }: FormFieldProps) {
+function FormFieldInner({
+  themeId: _themeId,
+  mode: _mode,
+  label,
+  description,
+  helperText,
+  children,
+  ...props
+}: FormFieldProps) {
   return (
     <Field
       {...props}
@@ -26,3 +35,5 @@ export function FormField({ label, description, helperText, children, ...props }
     </Field>
   );
 }
+
+export const FormField = withZoraThemeScope(FormFieldInner);

package/src/patterns/form-field/types.ts

@@ -1,10 +1,15 @@
 import type { FieldProps as SurfaceFieldProps } from '@ankhorage/surface';
 import type React from 'react';
 
-export interface FormFieldProps extends Pick<
-  SurfaceFieldProps,
-  'children' | 'disabled' | 'errorText' | 'invalid' | 'readOnly' | 'required' | 'testID'
-> {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface FormFieldProps
+  extends
+    ZoraBaseProps,
+    Pick<
+      Omit<SurfaceFieldProps, 'mode' | 'themeId'>,
+      'children' | 'disabled' | 'errorText' | 'invalid' | 'readOnly' | 'required'
+    > {
   label: React.ReactNode;
   description?: React.ReactNode;
   helperText?: React.ReactNode;

package/src/patterns/inspector-field/InspectorField.tsx

@@ -1,10 +1,18 @@
 import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { FormField } from '../form-field';
 import type { InspectorFieldProps } from './types';
 
-export function InspectorField({ label, control, children, ...props }: InspectorFieldProps) {
+function InspectorFieldInner({
+  themeId: _themeId,
+  mode: _mode,
+  label,
+  control,
+  children,
+  ...props
+}: InspectorFieldProps) {
   return (
     <FormField {...props} label={label}>
       <Stack direction="row" gap="s" align="center">
@@ -14,3 +22,5 @@ export function InspectorField({ label, control, children, ...props }: Inspector
     </FormField>
   );
 }
+
+export const InspectorField = withZoraThemeScope(InspectorFieldInner);

package/src/patterns/inspector-field/types.ts

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
 
-export interface InspectorFieldProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface InspectorFieldProps extends ZoraBaseProps {
   label: ReactNode;
   description?: ReactNode;
   helperText?: ReactNode;
@@ -11,5 +13,4 @@ export interface InspectorFieldProps {
   readOnly?: boolean;
   control?: ReactNode;
   children?: ReactNode;
-  testID?: string;
 }

package/src/patterns/notice/Notice.tsx

@@ -3,9 +3,12 @@ import React from 'react';
 
 import { Badge } from '../../components/badge';
 import { Card } from '../../components/card';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { NoticeProps } from './types';
 
-export function Notice({
+function NoticeInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   children,
@@ -28,3 +31,5 @@ export function Notice({
     </Card>
   );
 }
+
+export const Notice = withZoraThemeScope(NoticeInner);

package/src/patterns/notice/types.ts

@@ -1,12 +1,12 @@
 import type React from 'react';
 
 import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface NoticeProps {
+export interface NoticeProps extends ZoraBaseProps {
   title: React.ReactNode;
   description?: React.ReactNode;
   children?: React.ReactNode;
   actions?: React.ReactNode;
   tone?: ZoraTone;
-  testID?: string;
 }

package/src/patterns/responsive-panel/ResponsivePanel.tsx

@@ -2,10 +2,13 @@ import React from 'react';
 
 import { Drawer } from '../../components/drawer';
 import { Modal } from '../../components/modal';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Panel } from '../panel';
 import type { ResponsivePanelProps } from './types';
 
-export function ResponsivePanel({
+function ResponsivePanelInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   actions,
@@ -68,3 +71,5 @@ export function ResponsivePanel({
     </Panel>
   );
 }
+
+export const ResponsivePanel = withZoraThemeScope(ResponsivePanelInner);

package/src/patterns/responsive-panel/types.ts

@@ -4,7 +4,9 @@ export type ResponsivePanelSide = 'left' | 'right';
 export type ResponsivePanelDesktopMode = 'inline' | 'floating';
 export type ResponsivePanelMobileMode = 'drawer' | 'modal';
 
-export interface ResponsivePanelProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface ResponsivePanelProps extends ZoraBaseProps {
   title?: React.ReactNode;
   description?: React.ReactNode;
   actions?: React.ReactNode;
@@ -16,5 +18,4 @@ export interface ResponsivePanelProps {
   desktopMode?: ResponsivePanelDesktopMode;
   mobileMode?: ResponsivePanelMobileMode;
   compact?: boolean;
-  testID?: string;
 }

package/src/patterns/section-header/SectionHeader.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 { SectionHeaderProps } from './types';
 
-export function SectionHeader({
+function SectionHeaderInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   eyebrow,
@@ -39,3 +42,5 @@ export function SectionHeader({
     </Stack>
   );
 }
+
+export const SectionHeader = withZoraThemeScope(SectionHeaderInner);

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

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

package/src/patterns/settings-row/SettingsRow.tsx

@@ -3,9 +3,12 @@ import React from 'react';
 
 import { Card } from '../../components/card';
 import { Text } from '../../components/text';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SettingsRowProps } from './types';
 
-export function SettingsRow({
+function SettingsRowInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   meta,
@@ -39,3 +42,5 @@ export function SettingsRow({
     </Card>
   );
 }
+
+export const SettingsRow = withZoraThemeScope(SettingsRowInner);

package/src/patterns/settings-row/types.ts

@@ -1,11 +1,12 @@
 import type React from 'react';
 
-interface SettingsRowBaseProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+interface SettingsRowBaseProps extends ZoraBaseProps {
   title: React.ReactNode;
   description?: React.ReactNode;
   meta?: React.ReactNode;
   disabled?: boolean;
-  testID?: string;
 }
 
 interface SettingsRowPressableProps {

package/src/patterns/switch-field/SwitchField.tsx

@@ -1,10 +1,13 @@
 import { Switch } from '@ankhorage/surface';
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { SettingsRow } from '../settings-row';
 import type { SwitchFieldProps } from './types';
 
-export function SwitchField({
+function SwitchFieldInner({
+  themeId: _themeId,
+  mode: _mode,
   label,
   description,
   value,
@@ -22,3 +25,5 @@ export function SwitchField({
     />
   );
 }
+
+export const SwitchField = withZoraThemeScope(SwitchFieldInner);

package/src/patterns/switch-field/types.ts

@@ -1,10 +1,11 @@
 import type { ReactNode } from 'react';
 
-export interface SwitchFieldProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface SwitchFieldProps extends ZoraBaseProps {
   label: ReactNode;
   description?: ReactNode;
   value: boolean;
   onValueChange: (value: boolean) => void;
   disabled?: boolean;
-  testID?: string;
 }

package/src/patterns/tile-grid/PaletteItem.tsx

@@ -1,12 +1,16 @@
-import { Box, useTheme } from '@ankhorage/surface';
+import { Box } from '@ankhorage/surface';
 import React from 'react';
 
 import { Card } from '../../components/card';
 import { Heading } from '../../components/heading';
 import { Text } from '../../components/text';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { PaletteItemProps } from './types';
 
-export function PaletteItem({
+function PaletteItemInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   icon,
@@ -16,7 +20,7 @@ export function PaletteItem({
   onPress,
   testID,
 }: PaletteItemProps) {
-  const { theme } = useTheme();
+  const { theme } = useZoraTheme();
 
   return (
     <Card
@@ -49,3 +53,5 @@ export function PaletteItem({
     </Card>
   );
 }
+
+export const PaletteItem = withZoraThemeScope(PaletteItemInner);

package/src/patterns/tile-grid/TileGrid.tsx

@@ -1,9 +1,12 @@
 import { Box } from '@ankhorage/surface';
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { TileGridProps } from './types';
 
-export function TileGrid({
+function TileGridInner({
+  themeId: _themeId,
+  mode: _mode,
   children,
   columns = 'responsive',
   compact = false,
@@ -42,3 +45,5 @@ export function TileGrid({
     </Box>
   );
 }
+
+export const TileGrid = withZoraThemeScope(TileGridInner);

package/src/patterns/tile-grid/types.ts

@@ -1,14 +1,15 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type { ReactNode } from 'react';
 
-export interface TileGridProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface TileGridProps extends ZoraBaseProps {
   children?: ReactNode;
   columns?: number | 'responsive';
   compact?: boolean;
-  testID?: string;
 }
 
-export interface PaletteItemProps {
+export interface PaletteItemProps extends ZoraBaseProps {
   title: ReactNode;
   description?: ReactNode;
   icon?: ButtonIconSpec;
@@ -16,5 +17,4 @@ export interface PaletteItemProps {
   selected?: boolean;
   disabled?: boolean;
   onPress?: () => void;
-  testID?: string;
 }

package/src/patterns/tree-view/TreeItem.tsx

@@ -2,10 +2,12 @@ import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { IconButton } from '../../components/icon-button';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 import { SettingsRow } from '../settings-row';
 import type { TreeItemNode, TreeItemRenderProps } from './types';
 
-interface TreeItemProps<TId extends string = string> {
+interface TreeItemProps<TId extends string = string> extends ZoraBaseProps {
   node: TreeItemNode<TId>;
   depth: number;
   selectedId?: TId;
@@ -15,7 +17,9 @@ interface TreeItemProps<TId extends string = string> {
   renderItem?: (props: TreeItemRenderProps<TId>) => React.ReactNode;
 }
 
-export function TreeItem<TId extends string = string>({
+function TreeItemInner<TId extends string = string>({
+  themeId: _themeId,
+  mode: _mode,
   node,
   depth,
   selectedId,
@@ -23,6 +27,7 @@ export function TreeItem<TId extends string = string>({
   onSelect,
   onToggleExpand,
   renderItem,
+  testID,
 }: TreeItemProps<TId>) {
   const hasChildren = node.children !== undefined && node.children.length > 0;
   const isExpanded = expandedIds.includes(node.id);
@@ -63,7 +68,7 @@ export function TreeItem<TId extends string = string>({
   };
 
   return (
-    <Box>
+    <Box testID={testID}>
       <Box style={{ paddingLeft: depth * 16 }}>{renderContent()}</Box>
       {hasChildren && isExpanded ? (
         <Box>
@@ -84,3 +89,5 @@ export function TreeItem<TId extends string = string>({
     </Box>
   );
 }
+
+export const TreeItem = withZoraThemeScope(TreeItemInner);

package/src/patterns/tree-view/TreeView.tsx

@@ -1,10 +1,13 @@
 import { Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { TreeItem } from './TreeItem';
 import type { TreeViewProps } from './types';
 
-export function TreeView<TId extends string = string>({
+function TreeViewInner<TId extends string = string>({
+  themeId: _themeId,
+  mode: _mode,
   nodes,
   selectedId,
   expandedIds: controlledExpandedIds,
@@ -48,3 +51,5 @@ export function TreeView<TId extends string = string>({
     </Stack>
   );
 }
+
+export const TreeView = withZoraThemeScope(TreeViewInner);

package/src/patterns/tree-view/types.ts

@@ -1,6 +1,8 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type { ReactNode } from 'react';
 
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
 export interface TreeItemNode<TId extends string = string> {
   id: TId;
   label: ReactNode;
@@ -19,7 +21,7 @@ export interface TreeItemRenderProps<TId extends string = string> {
   hasChildren: boolean;
 }
 
-export interface TreeViewProps<TId extends string = string> {
+export interface TreeViewProps<TId extends string = string> extends ZoraBaseProps {
   nodes: readonly TreeItemNode<TId>[];
   selectedId?: TId;
   expandedIds?: readonly TId[];
@@ -27,5 +29,4 @@ export interface TreeViewProps<TId extends string = string> {
   onSelect?: (id: TId) => void;
   onExpandedChange?: (ids: readonly TId[]) => void;
   renderItem?: (props: TreeItemRenderProps<TId>) => ReactNode;
-  testID?: string;
 }

package/src/theme/createZoraThemeConfig.test.ts

@@ -1,6 +1,12 @@
 import { describe, expect, test } from 'bun:test';
 
+import { parseHexToOklch } from '../internal/color';
 import { createZoraThemeConfig } from './createZoraThemeConfig';
+import type { ZoraHexColor } from './types';
+
+function isSixDigitHexColor(value: string): value is ZoraHexColor {
+  return /^#[0-9a-f]{6}$/.test(value);
+}
 
 describe('createZoraThemeConfig', () => {
   test('converts the default theme seed into a surface config', () => {
@@ -8,12 +14,18 @@ describe('createZoraThemeConfig', () => {
 
     expect(themeConfig.id).toBe('zora');
     expect(themeConfig.name).toBe('ZORA');
-    expect(themeConfig.light.primaryColor).toBe('#0f766e');
+    expect(isSixDigitHexColor(themeConfig.light.primaryColor)).toBe(true);
     expect(themeConfig.light.harmony).toBe('analogous');
     expect(themeConfig.light.systemTone).toBe('jewel');
-    expect(themeConfig.dark.primaryColor).toBe('#0f766e');
+    expect(isSixDigitHexColor(themeConfig.dark.primaryColor)).toBe(true);
     expect(themeConfig.dark.harmony).toBe('analogous');
     expect(themeConfig.dark.systemTone).toBe('jewel');
+
+    expect(themeConfig.light.primaryColor).not.toBe(themeConfig.dark.primaryColor);
+
+    const lightOklch = parseHexToOklch(themeConfig.light.primaryColor);
+    const darkOklch = parseHexToOklch(themeConfig.dark.primaryColor);
+    expect(darkOklch.l).toBeGreaterThan(lightOklch.l);
   });
 
   test('falls back to id when name is omitted', () => {
@@ -26,11 +38,13 @@ describe('createZoraThemeConfig', () => {
 
     expect(themeConfig.id).toBe('studio');
     expect(themeConfig.name).toBe('studio');
-    expect(themeConfig.light.primaryColor).toBe('#0f766e');
+    expect(isSixDigitHexColor(themeConfig.light.primaryColor)).toBe(true);
     expect(themeConfig.light.harmony).toBe('analogous');
     expect(themeConfig.light.systemTone).toBe('jewel');
-    expect(themeConfig.dark.primaryColor).toBe('#0f766e');
+    expect(isSixDigitHexColor(themeConfig.dark.primaryColor)).toBe(true);
     expect(themeConfig.dark.harmony).toBe('analogous');
     expect(themeConfig.dark.systemTone).toBe('jewel');
+
+    expect(themeConfig.light.primaryColor).not.toBe(themeConfig.dark.primaryColor);
   });
 });

package/src/theme/createZoraThemeConfig.ts

@@ -1,14 +1,9 @@
 import type { ThemeConfig } from '@ankhorage/surface';
 
-import type { ZoraHexColor, ZoraTheme, ZoraThemeMode } from './types';
+import { resolveModePrimaryColor } from '../internal/color';
+import type { ZoraTheme } from './types';
 import { zoraDefaultTheme } from './zoraDefaultTheme';
 
-function resolveModePrimaryColor(primaryColor: ZoraHexColor, _mode: ZoraThemeMode): ZoraHexColor {
-  // Intentionally conservative in Plan 1: mode-specific primary derivation
-  // (OKLCH/lightness scale, etc.) comes in later theme-engine work.
-  return primaryColor;
-}
-
 export function createZoraThemeConfig(theme: ZoraTheme = zoraDefaultTheme): ThemeConfig {
   return {
     id: theme.id,