@ankhorage/zora 1.5.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## 2.0.0
+
+### Major Changes
+
+- b832d62: Replace ZORA `tone` APIs with Surface-derived `color` and `emphasis` models across components, patterns, and recipes.
+
+  Breaking changes:
+  - Removed `ZoraTone` from the public API.
+  - Added Surface-derived public color model exports:
+    - `ZoraPaletteColor`, `ZoraStatusColor`, `ZoraColor`, `ZoraEmphasis`
+    - `ZORA_PALETTE_COLORS`, `ZORA_STATUS_COLORS`, `ZORA_COLORS`, `ZORA_EMPHASES`
+  - Updated semantic props from `tone` to `color` for components and patterns that select semantic color roles.
+  - Updated text-like APIs to use `emphasis` for content contrast.
+
+  Migration:
+  - Replace semantic `tone` props with `color`.
+  - Replace text/heading contrast values (`default`, `muted`, `subtle`, `inverse`) to `emphasis`.
+  - Keep `tone` only where it represents card-style visual treatment (`ZoraCardTone`).
+
+### Patch Changes
+
+- 02629b6: Update SURFACE
+
+## 1.5.1
+
+### Patch Changes
+
+- 07e9d96: Improve realistic example app chrome by adding compact AppBars with dark-mode toggles, applying semantic Screen backgrounds, and fixing native ZoraTabBar icon/label rendering.
+
 ## 1.5.0
 
 ### Minor Changes

package/README.md

@@ -62,7 +62,7 @@ export function App() {
             title="Welcome"
           >
             <Heading level={3}>Next steps</Heading>
-            <Text tone="muted">Structured text comes from ZORA too.</Text>
+            <Text emphasis="muted">Structured text comes from ZORA too.</Text>
           </Card>
         </Screen>
       </AppShell>
@@ -231,9 +231,9 @@ export default function Layout() {
 
 These unions appear across the catalogue:
 
-- `ZoraTone` comes from Surface `ButtonProps['tone']`.
-- `ZoraEmphasis` comes from Surface `ButtonProps['variant']`.
-- `ZoraBadgeEmphasis` comes from Surface `BadgeProps['variant']`.
+- `ZoraColor` comes from Surface `ButtonProps['color']`.
+- `ZoraEmphasis` comes from Surface `SurfaceEmphasis` (`default | muted | subtle | inverse`).
+- `ButtonProps['variant']` and `BadgeProps['variant']` control visual treatment.
 - `ZoraControlSize` comes from Surface `ButtonProps['size']`.
 - `ZoraCardTone = 'default' | 'subtle' | 'outline'`.
 - `ZoraContentWidth = 'narrow' | 'default' | 'wide'`.
@@ -385,7 +385,7 @@ Metadata model overview:
 
 ### `Heading`
 
-Structured titles with semantic levels, visual sizes, semantic tones, and
+Structured titles with semantic levels, visual sizes, semantic color, and
 responsive props. Use `Heading` for titles and `Text` for body copy.
 
 ```tsx
@@ -393,7 +393,7 @@ responsive props. Use `Heading` for titles and `Text` for body copy.
   Build faster with ZORA
 </Heading>
 
-<Heading level={2} tone="primary">
+<Heading level={2} color="primary">
   Create consistent screens
 </Heading>
 ```
@@ -413,7 +413,8 @@ ZORA props:
 | `i18nKey`       | `string`                                 | -           | Runtime-resolved fallback key when no content prop is provided. |
 | `level`         | `HeadingLevel`                           | `2`         | Semantic heading level from `1` through `6`.                    |
 | `size`          | `Responsive<HeadingSize>`                | level size  | Visual scale: `display`, `h1` through `h6`.                     |
-| `tone`          | `Responsive<HeadingTone>`                | `'default'` | Semantic text color.                                            |
+| `color`         | `Responsive<HeadingColor>`               | -           | Semantic text color role.                                       |
+| `emphasis`      | `Responsive<HeadingEmphasis>`            | `'default'` | Content emphasis / contrast.                                    |
 | `align`         | `Responsive<HeadingAlign>`               | -           | Text alignment.                                                 |
 | `weight`        | `Responsive<HeadingWeight>`              | recipe      | Optional structured weight override.                            |
 | `italic`        | `boolean`                                | `false`     | Italic style.                                                   |
@@ -429,11 +430,11 @@ usage structured and template-safe.
 
 ### `Text`
 
-Structured body text with ZORA typography variants, semantic tones, and
+Structured body text with ZORA typography variants, semantic color, and
 responsive props.
 
 ```tsx
-<Text variant="lead" tone="muted">
+<Text variant="lead" emphasis="muted">
   Build product screens with structured, theme-aware copy.
 </Text>
 
@@ -453,7 +454,8 @@ ZORA props:
 | `text`          | `string`                                 | -           | Manifest-friendly content prop.                                 |
 | `i18nKey`       | `string`                                 | -           | Runtime-resolved fallback key when no content prop is provided. |
 | `variant`       | `Responsive<TextVariant>`                | `'body'`    | Typography recipe.                                              |
-| `tone`          | `Responsive<TextTone>`                   | `'default'` | Semantic text color.                                            |
+| `color`         | `Responsive<TextColor>`                  | -           | Semantic text color role.                                       |
+| `emphasis`      | `Responsive<TextEmphasis>`               | `'default'` | Content emphasis / contrast.                                    |
 | `align`         | `Responsive<TextAlign>`                  | -           | Text alignment.                                                 |
 | `weight`        | `Responsive<TextWeight>`                 | recipe      | Optional structured weight override.                            |
 | `italic`        | `boolean`                                | `false`     | Italic style.                                                   |
@@ -469,7 +471,7 @@ structured and template-safe.
 
 ### `Button`
 
-Action button with ZORA defaults for tone, emphasis, size, and icons.
+Action button with ZORA defaults for color, variant, size, and icons.
 
 ```tsx
 <Button leadingIcon={{ name: 'checkmark-circle-outline' }}>Save</Button>
@@ -480,18 +482,18 @@ Action button with ZORA defaults for tone, emphasis, size, and icons.
 
 ZORA props:
 
-| Prop           | Type              | Default     | Notes                                      |
-| -------------- | ----------------- | ----------- | ------------------------------------------ |
-| `children`     | `React.ReactNode` | -           | Button label or content.                   |
-| `tone`         | `ZoraTone`        | `'primary'` | Passed to Surface as `tone`.               |
-| `emphasis`     | `ZoraEmphasis`    | `'solid'`   | Passed to Surface as `variant`.            |
-| `size`         | `ZoraControlSize` | `'l'`       | Passed to Surface as `size`.               |
-| `leadingIcon`  | `ButtonIconSpec`  | -           | Surface icon spec rendered before content. |
-| `trailingIcon` | `ButtonIconSpec`  | -           | Surface icon spec rendered after content.  |
+| Prop           | Type                     | Default     | Notes                                      |
+| -------------- | ------------------------ | ----------- | ------------------------------------------ |
+| `children`     | `React.ReactNode`        | -           | Button label or content.                   |
+| `color`        | `ZoraColor`              | `'primary'` | Passed to Surface as `color`.              |
+| `variant`      | `ButtonProps['variant']` | `'solid'`   | Visual treatment variant.                  |
+| `size`         | `ZoraControlSize`        | `'l'`       | Passed to Surface as `size`.               |
+| `leadingIcon`  | `ButtonIconSpec`         | -           | Surface icon spec rendered before content. |
+| `trailingIcon` | `ButtonIconSpec`         | -           | Surface icon spec rendered after content.  |
 
 Inherited props:
 
-Inherits all Surface `ButtonProps` except `children`, `size`, `tone`, and
+Inherits all Surface `ButtonProps` except `children`, `size`, `color`, and
 `variant`. This includes Surface button behavior such as `loading`,
 `fullWidth`, pressability props, disabled state, accessibility props allowed by
 Surface, and `testID`.
@@ -503,7 +505,7 @@ Surface, and `testID`.
 Compact icon-only button for toolbars, rows, and actions.
 
 ```tsx
-<IconButton icon={{ name: 'trash-outline' }} label="Delete" tone="danger" />
+<IconButton icon={{ name: 'trash-outline' }} label="Delete" color="danger" />
 ```
 
 <details>
@@ -511,13 +513,13 @@ Compact icon-only button for toolbars, rows, and actions.
 
 ZORA props:
 
-| Prop       | Type              | Default     | Notes                              |
-| ---------- | ----------------- | ----------- | ---------------------------------- |
-| `icon`     | `ButtonIconSpec`  | -           | Required icon to render.           |
-| `label`    | `string`          | -           | Required for `accessibilityLabel`. |
-| `tone`     | `ZoraTone`        | `'neutral'` | Button tone.                       |
-| `emphasis` | `ZoraEmphasis`    | `'ghost'`   | Button emphasis.                   |
-| `size`     | `ZoraControlSize` | `'m'`       | Button size.                       |
+| Prop      | Type                         | Default     | Notes                              |
+| --------- | ---------------------------- | ----------- | ---------------------------------- |
+| `icon`    | `ButtonIconSpec`             | -           | Required icon to render.           |
+| `label`   | `string`                     | -           | Required for `accessibilityLabel`. |
+| `color`   | `ZoraColor`                  | `'neutral'` | Button color role.                 |
+| `variant` | `IconButtonProps['variant']` | `'ghost'`   | Visual treatment variant.          |
+| `size`    | `ZoraControlSize`            | `'m'`       | Button size.                       |
 
 Inherited props:
 
@@ -532,7 +534,7 @@ User/profile image with name-based initials and optional icon fallback.
 
 ```tsx
 <Avatar name="Zora Kit" />
-<Avatar size="l" tone="primary" name="Fabio Gartenmann" />
+<Avatar size="l" color="primary" name="Fabio Gartenmann" />
 ```
 
 <details>
@@ -549,7 +551,7 @@ ZORA props:
 | `label`        | `string`              | -           | Accessibility label for the rendered content.   |
 | `size`         | `AvatarSize`          | `'m'`       | `xs`..`xl` size preset.                         |
 | `shape`        | `AvatarShape`         | `'circle'`  | `circle` or `rounded`.                          |
-| `tone`         | `ZoraTone`            | `'neutral'` | Drives background and fallback content tone.    |
+| `color`        | `ZoraColor`           | `'neutral'` | Drives background and fallback content color.   |
 | `testID`       | `string`              | -           | Test id.                                        |
 
 Inherited props:
@@ -566,7 +568,7 @@ Overlapping avatar stack with optional overflow label.
 <AvatarGroup
   items={[
     { id: '1', name: 'Ada Lovelace' },
-    { id: '2', name: 'Grace Hopper', tone: 'success' },
+    { id: '2', name: 'Grace Hopper', color: 'success' },
   ]}
 />
 ```
@@ -587,15 +589,15 @@ ZORA props:
 
 `AvatarGroupItem`:
 
-| Prop           | Type                  | Notes                           |
-| -------------- | --------------------- | ------------------------------- |
-| `id`           | `string`              | Optional stable key.            |
-| `source`       | `ImageSourcePropType` | Image source for the avatar.    |
-| `name`         | `string`              | Used to derive initials.        |
-| `initials`     | `string`              | Explicit initials override.     |
-| `iconFallback` | `ButtonIconSpec`      | Optional icon fallback.         |
-| `label`        | `string`              | Accessibility label.            |
-| `tone`         | `ZoraTone`            | Overrides avatar tone per item. |
+| Prop           | Type                  | Notes                            |
+| -------------- | --------------------- | -------------------------------- |
+| `id`           | `string`              | Optional stable key.             |
+| `source`       | `ImageSourcePropType` | Image source for the avatar.     |
+| `name`         | `string`              | Used to derive initials.         |
+| `initials`     | `string`              | Explicit initials override.      |
+| `iconFallback` | `ButtonIconSpec`      | Optional icon fallback.          |
+| `label`        | `string`              | Accessibility label.             |
+| `color`        | `ZoraColor`           | Overrides avatar color per item. |
 
 Inherited props:
 
@@ -605,10 +607,10 @@ No inherited props. `AvatarGroupProps` is declared directly by ZORA.
 
 ### `Badge`
 
-Small status label with ZORA tone, emphasis, and size defaults.
+Small status label with ZORA color, variant, and size defaults.
 
 ```tsx
-<Badge tone="success">Active</Badge>
+<Badge color="success">Active</Badge>
 ```
 
 <details>
@@ -616,16 +618,16 @@ Small status label with ZORA tone, emphasis, and size defaults.
 
 ZORA props:
 
-| Prop       | Type                | Default     | Notes                                |
-| ---------- | ------------------- | ----------- | ------------------------------------ |
-| `children` | `React.ReactNode`   | -           | Rendered as Surface badge `content`. |
-| `tone`     | `ZoraTone`          | `'primary'` | Passed to Surface as `tone`.         |
-| `emphasis` | `ZoraBadgeEmphasis` | `'soft'`    | Passed to Surface as `variant`.      |
-| `size`     | `ZoraControlSize`   | `'m'`       | Passed to Surface as `size`.         |
+| Prop       | Type                    | Default     | Notes                                |
+| ---------- | ----------------------- | ----------- | ------------------------------------ |
+| `children` | `React.ReactNode`       | -           | Rendered as Surface badge `content`. |
+| `color`    | `ZoraColor`             | `'primary'` | Passed to Surface as `color`.        |
+| `variant`  | `BadgeProps['variant']` | `'soft'`    | Visual treatment variant.            |
+| `size`     | `ZoraControlSize`       | `'m'`       | Passed to Surface as `size`.         |
 
 Inherited props:
 
-Inherits all Surface `BadgeProps` except `content`, `size`, `tone`, and
+Inherits all Surface `BadgeProps` except `content`, `size`, `color`, and
 `variant`. The remaining inherited prop is `testID`.
 
 </details>
@@ -672,7 +674,7 @@ Media-first card surface for listings, content previews, and catalog items.
   imageLabel="Cover image"
   title="MediaCard"
   description="Composes an image slot, header content, badges, actions, and footer metadata."
-  badges={<Badge tone="primary">Featured</Badge>}
+  badges={<Badge color="primary">Featured</Badge>}
   footer={<Rating value={4.5} />}
   onPress={() => undefined}
 />
@@ -745,7 +747,7 @@ Compact metric surface for dashboards, stats, and summary cards.
   label="Monthly active users"
   value="14.2k"
   delta="+4.1%"
-  deltaTone="success"
+  deltaColor="success"
   description="Last 30 days"
 />
 ```
@@ -762,7 +764,7 @@ ZORA props:
 | `description` | `React.ReactNode` | -           | Optional supporting copy.                               |
 | `icon`        | `ButtonIconSpec`  | -           | Optional icon shown next to the label.                  |
 | `delta`       | `React.ReactNode` | -           | Optional delta badge content.                           |
-| `deltaTone`   | `ZoraTone`        | `'neutral'` | Tone used for the delta `Badge`.                        |
+| `deltaColor`  | `ZoraColor`       | `'neutral'` | Color used for the delta `Badge`.                       |
 | `actions`     | `React.ReactNode` | -           | Optional trailing action area; disables `onPress`.      |
 | `tone`        | `ZoraCardTone`    | `'default'` | Passed to the underlying `Card`.                        |
 | `compact`     | `boolean`         | `false`     | Uses tighter spacing.                                   |
@@ -777,11 +779,11 @@ No inherited props. `MetricCardProps` is declared directly by ZORA.
 
 ### `Progress`
 
-Linear progress bar with semantic tone.
+Linear progress bar with semantic color.
 
 ```tsx
 <Progress value={72} />
-<Progress tone="success" value={38} />
+<Progress color="success" value={38} />
 ```
 
 <details>
@@ -793,7 +795,7 @@ ZORA props:
 | -------- | ----------------- | ----------- | ----------------------------- |
 | `value`  | `number`          | -           | Current progress value.       |
 | `max`    | `number`          | `100`       | Maximum value for completion. |
-| `tone`   | `ZoraTone`        | `'primary'` | Fill tone.                    |
+| `color`  | `ZoraColor`       | `'primary'` | Fill color role.              |
 | `size`   | `ZoraControlSize` | `'m'`       | Controls bar height.          |
 | `testID` | `string`          | -           | Test id.                      |
 
@@ -820,7 +822,7 @@ ZORA props:
 | -------- | ----------------- | ----------- | ---------------------- |
 | `value`  | `number`          | -           | Current rating value.  |
 | `max`    | `number`          | `5`         | Maximum rating value.  |
-| `tone`   | `ZoraTone`        | `'warning'` | Tone for filled icons. |
+| `color`  | `ZoraColor`       | `'warning'` | Tone for filled icons. |
 | `size`   | `ZoraControlSize` | `'m'`       | Icon sizing preset.    |
 | `testID` | `string`          | -           | Test id.               |
 
@@ -941,7 +943,7 @@ type RadioGroupOption = {
 
 Inherited props:
 
-Passes `tone`, `size`, `invalid`, `readOnly`, `disabled`, and `testID`
+Passes `color`, `size`, `invalid`, `readOnly`, `disabled`, and `testID`
 to underlying Surface `Radio` components.
 
 </details>
@@ -991,7 +993,7 @@ type CheckboxGroupOption = {
 
 Inherited props:
 
-Passes `tone`, `size`, `invalid`, `readOnly`, `disabled`, and `testID`
+Passes `color`, `size`, `invalid`, `readOnly`, `disabled`, and `testID`
 to underlying Surface `Checkbox` components.
 
 </details>
@@ -1001,7 +1003,7 @@ to underlying Surface `Checkbox` components.
 Compact filter/action token with optional icon and selected state.
 
 ```tsx
-<Chip selected tone="primary" onPress={() => undefined}>
+<Chip selected color="primary" onPress={() => undefined}>
   Selected
 </Chip>
 ```
@@ -1011,16 +1013,16 @@ Compact filter/action token with optional icon and selected state.
 
 ZORA props:
 
-| Prop       | Type              | Default     | Notes                                |
-| ---------- | ----------------- | ----------- | ------------------------------------ |
-| `children` | `React.ReactNode` | -           | Chip label content.                  |
-| `icon`     | `ButtonIconSpec`  | -           | Optional leading icon spec.          |
-| `selected` | `boolean`         | `false`     | Selected styling state.              |
-| `tone`     | `ZoraTone`        | `'neutral'` | Selected tone.                       |
-| `size`     | `ZoraControlSize` | `'s'`       | Padding and icon sizing.             |
-| `disabled` | `boolean`         | `false`     | Disables interaction and mutes tone. |
-| `onPress`  | `() => void`      | -           | Optional press handler.              |
-| `testID`   | `string`          | -           | Test id.                             |
+| Prop       | Type              | Default     | Notes                                 |
+| ---------- | ----------------- | ----------- | ------------------------------------- |
+| `children` | `React.ReactNode` | -           | Chip label content.                   |
+| `icon`     | `ButtonIconSpec`  | -           | Optional leading icon spec.           |
+| `selected` | `boolean`         | `false`     | Selected styling state.               |
+| `color`    | `ZoraColor`       | `'neutral'` | Selected color.                       |
+| `size`     | `ZoraControlSize` | `'s'`       | Padding and icon sizing.              |
+| `disabled` | `boolean`         | `false`     | Disables interaction and mutes color. |
+| `onPress`  | `() => void`      | -           | Optional press handler.               |
+| `testID`   | `string`          | -           | Test id.                              |
 
 Inherited props:
 
@@ -1054,7 +1056,7 @@ ZORA props:
 | `value`         | `string \| string[]` | -           | Selected value(s).             |
 | `onValueChange` | `(value) => void`    | -           | Selection change handler.      |
 | `multiple`      | `boolean`            | `false`     | Enables multi-select mode.     |
-| `tone`          | `ZoraTone`           | `'neutral'` | Tone for selected chips.       |
+| `color`         | `ZoraColor`          | `'neutral'` | Color for selected chips.      |
 | `size`          | `ZoraControlSize`    | `'s'`       | Chip size.                     |
 | `wrap`          | `boolean`            | `true`      | Wrap chips on smaller screens. |
 | `disabled`      | `boolean`            | -           | Disables all chips.            |
@@ -1149,7 +1151,7 @@ Selection mode is generic and prop-driven:
 <AppBar
   appMode={{ type: 'selection', label: 'Selected', count: 3, onCancel: exitSelection }}
   actions={
-    <IconButton icon={{ name: 'trash-outline' }} label="Delete" tone="danger" onPress={del} />
+    <IconButton icon={{ name: 'trash-outline' }} label="Delete" color="danger" onPress={del} />
   }
 />
 ```
@@ -1585,7 +1587,7 @@ export function ChatsPreview() {
     <Stack gap="none">
       <ChatListItem
         accessibilityLabel="Ada Lovelace, unread, 3 new messages, Can you review the new PostCard API?, 2 minutes ago"
-        avatar={{ name: 'Ada Lovelace', tone: 'primary' }}
+        avatar={{ name: 'Ada Lovelace', color: 'primary' }}
         preview="Can you review the new PostCard API?"
         timestamp="2m"
         title="Ada Lovelace"
@@ -1595,7 +1597,7 @@ export function ChatsPreview() {
       />
 
       <ChatListItem
-        avatar={{ name: 'Grace Hopper', tone: 'success' }}
+        avatar={{ name: 'Grace Hopper', color: 'success' }}
         preview="The build is green."
         timestamp="1h"
         title="Grace Hopper"
@@ -1603,7 +1605,7 @@ export function ChatsPreview() {
       />
 
       <ChatListItem
-        avatar={{ initials: 'CI', label: 'Build system', tone: 'neutral' }}
+        avatar={{ initials: 'CI', label: 'Build system', color: 'neutral' }}
         compact
         meta="Release automation"
         preview="Version packages completed for @ankhorage/zora."
@@ -1675,7 +1677,7 @@ ZORA props:
 | `label`    | `string`              | Accessibility label.                       |
 | `size`     | `AvatarSize`          | Optional avatar size override.             |
 | `shape`    | `AvatarShape`         | Optional avatar shape override.            |
-| `tone`     | `ZoraTone`            | Optional fallback tone.                    |
+| `color`    | `ZoraColor`           | Optional fallback color.                   |
 
 Inherited props:
 
@@ -1740,7 +1742,7 @@ With media:
   secondaryAction={{ label: 'Browse patterns', onPress: () => undefined }}
   media={
     <Card title="Theme-aware by default" tone="outline">
-      <Text tone="muted">
+      <Text emphasis="muted">
         Use the media slot for previews, screenshots, metrics, or illustration cards.
       </Text>
     </Card>
@@ -1770,13 +1772,13 @@ ZORA props:
 
 `HeroAction`:
 
-| Prop       | Type              | Default                   | Notes                              |
-| ---------- | ----------------- | ------------------------- | ---------------------------------- |
-| `label`    | `React.ReactNode` | -                         | Button label/content.              |
-| `onPress`  | `() => void`      | -                         | Press handler.                     |
-| `tone`     | `ZoraTone`        | primary / neutral by role | Optional button tone override.     |
-| `emphasis` | `ZoraEmphasis`    | solid / soft by role      | Optional button emphasis override. |
-| `disabled` | `boolean`         | `false`                   | Disables the rendered action.      |
+| Prop       | Type                     | Default                   | Notes                             |
+| ---------- | ------------------------ | ------------------------- | --------------------------------- |
+| `label`    | `React.ReactNode`        | -                         | Button label/content.             |
+| `onPress`  | `() => void`             | -                         | Press handler.                    |
+| `color`    | `ZoraColor`              | primary / neutral by role | Optional button color override.   |
+| `variant`  | `ButtonProps['variant']` | solid / soft by role      | Optional button variant override. |
+| `disabled` | `boolean`                | `false`                   | Disables the rendered action.     |
 
 Inherited props:
 
@@ -1868,7 +1870,7 @@ No inherited props. `ImageUploadFieldProps` is declared directly by ZORA.
 Semantic notice surface with badge eyebrow, optional body, and actions.
 
 ```tsx
-<Notice actions={<Button>Review</Button>} title="Publish pipeline ready" tone="success" />
+<Notice actions={<Button>Review</Button>} title="Publish pipeline ready" color="success" />
 ```
 
 <details>
@@ -1882,7 +1884,7 @@ ZORA props:
 | `description` | `React.ReactNode` | -           | Notice description.                 |
 | `children`    | `React.ReactNode` | -           | Optional body content.              |
 | `actions`     | `React.ReactNode` | -           | Optional action area.               |
-| `tone`        | `ZoraTone`        | `'primary'` | Drives the badge eyebrow tone.      |
+| `color`       | `ZoraColor`       | `'primary'` | Drives the badge eyebrow color.     |
 | `testID`      | `string`          | -           | Forwarded to the underlying `Card`. |
 
 Inherited props:
@@ -1944,7 +1946,7 @@ export function PostsPreview() {
         author={{
           name: 'Ada Lovelace',
           subtitle: '@ada · 2h',
-          avatar: { name: 'Ada Lovelace', tone: 'primary' },
+          avatar: { name: 'Ada Lovelace', color: 'primary' },
         }}
         headerAction={
           <IconButton icon={{ name: 'ellipsis-horizontal-outline' }} label="More post options" />
@@ -1966,7 +1968,7 @@ export function PostsPreview() {
             author: {
               name: 'Grace Hopper',
               subtitle: '1h',
-              avatar: { name: 'Grace Hopper', tone: 'success' },
+              avatar: { name: 'Grace Hopper', color: 'success' },
             },
             text: 'The card/list boundary feels right.',
           },
@@ -1979,7 +1981,7 @@ export function PostsPreview() {
         author={{
           name: 'Build system',
           subtitle: 'Today · release notes',
-          avatar: { initials: 'CI', label: 'Build system', tone: 'neutral' },
+          avatar: { initials: 'CI', label: 'Build system', color: 'neutral' },
         }}
         text="Compact density works well for notification-style posts."
       />
@@ -2026,7 +2028,7 @@ ZORA props:
 | `label`    | `string`              | Accessibility label.                       |
 | `size`     | `AvatarSize`          | Optional avatar size override.             |
 | `shape`    | `AvatarShape`         | Optional avatar shape override.            |
-| `tone`     | `ZoraTone`            | Optional fallback tone.                    |
+| `color`    | `ZoraColor`           | Optional fallback color.                   |
 
 `PostCardMedia`:
 
@@ -2328,7 +2330,7 @@ type TimelineItem = {
   title: React.ReactNode;
   description?: React.ReactNode;
   meta?: React.ReactNode;
-  status?: ZoraTone;
+  status?: ZoraColor;
   icon?: ButtonIconSpec;
 };
 ```
@@ -2384,24 +2386,24 @@ No-data surface with title, optional supporting text, actions, and footer.
 
 ZORA props:
 
-| Prop              | Type               | Default | Notes                                                                                                   |
-| ----------------- | ------------------ | ------- | ------------------------------------------------------------------------------------------------------- |
-| `title`           | `React.ReactNode`  | -       | Required empty-state title.                                                                             |
-| `description`     | `React.ReactNode`  | -       | Supporting copy.                                                                                        |
-| `eyebrow`         | `React.ReactNode`  | -       | Card eyebrow.                                                                                           |
-| `primaryAction`   | `EmptyStateAction` | -       | Primary action button.                                                                                  |
-| `secondaryAction` | `EmptyStateAction` | -       | Secondary action button; defaults to `tone="neutral"` and `emphasis="soft"` when omitted on the action. |
-| `footer`          | `React.ReactNode`  | -       | Footer content below actions.                                                                           |
-| `testID`          | `string`           | -       | Forwarded to the underlying card.                                                                       |
+| Prop              | Type               | Default | Notes                                                                                                    |
+| ----------------- | ------------------ | ------- | -------------------------------------------------------------------------------------------------------- |
+| `title`           | `React.ReactNode`  | -       | Required empty-state title.                                                                              |
+| `description`     | `React.ReactNode`  | -       | Supporting copy.                                                                                         |
+| `eyebrow`         | `React.ReactNode`  | -       | Card eyebrow.                                                                                            |
+| `primaryAction`   | `EmptyStateAction` | -       | Primary action button.                                                                                   |
+| `secondaryAction` | `EmptyStateAction` | -       | Secondary action button; defaults to `color="neutral"` and `emphasis="soft"` when omitted on the action. |
+| `footer`          | `React.ReactNode`  | -       | Footer content below actions.                                                                            |
+| `testID`          | `string`           | -       | Forwarded to the underlying card.                                                                        |
 
 `EmptyStateAction`:
 
-| Prop       | Type              | Default | Notes            |
-| ---------- | ----------------- | ------- | ---------------- |
-| `label`    | `React.ReactNode` | -       | Button label.    |
-| `onPress`  | `() => void`      | -       | Button handler.  |
-| `tone`     | `ZoraTone`        | -       | Button tone.     |
-| `emphasis` | `ZoraEmphasis`    | -       | Button emphasis. |
+| Prop      | Type                     | Default | Notes           |
+| --------- | ------------------------ | ------- | --------------- |
+| `label`   | `React.ReactNode`        | -       | Button label.   |
+| `onPress` | `() => void`             | -       | Button handler. |
+| `color`   | `ZoraColor`              | -       | Button color.   |
+| `variant` | `ButtonProps['variant']` | -       | Button variant. |
 
 Inherited props:
 
@@ -2417,7 +2419,7 @@ Narrow confirmation modal for destructive or high-signal decisions.
 ```tsx
 <ConfirmDialog
   confirmLabel="Archive"
-  confirmTone="danger"
+  confirmColor="danger"
   onCancel={close}
   onConfirm={archive}
   title="Archive project?"
@@ -2430,21 +2432,21 @@ Narrow confirmation modal for destructive or high-signal decisions.
 
 ZORA props:
 
-| Prop              | Type              | Default     | Notes                                      |
-| ----------------- | ----------------- | ----------- | ------------------------------------------ |
-| `visible`         | `boolean`         | -           | Required modal visibility.                 |
-| `title`           | `React.ReactNode` | -           | Required dialog title.                     |
-| `description`     | `React.ReactNode` | -           | Dialog description.                        |
-| `children`        | `React.ReactNode` | -           | Dialog body.                               |
-| `confirmLabel`    | `React.ReactNode` | `'Confirm'` | Confirm button label.                      |
-| `cancelLabel`     | `React.ReactNode` | `'Cancel'`  | Cancel button label.                       |
-| `confirmTone`     | `ZoraTone`        | `'danger'`  | Confirm button tone.                       |
-| `confirmEmphasis` | `ZoraEmphasis`    | `'solid'`   | Confirm button emphasis.                   |
-| `busy`            | `boolean`         | `false`     | Passed to the confirm button as `loading`. |
-| `closeOnBackdrop` | `boolean`         | `true`      | Passed to the underlying modal.            |
-| `onConfirm`       | `() => void`      | -           | Confirm button handler.                    |
-| `onCancel`        | `() => void`      | -           | Cancel button and modal dismiss handler.   |
-| `testID`          | `string`          | -           | Forwarded to the underlying modal.         |
+| Prop              | Type                     | Default     | Notes                                      |
+| ----------------- | ------------------------ | ----------- | ------------------------------------------ |
+| `visible`         | `boolean`                | -           | Required modal visibility.                 |
+| `title`           | `React.ReactNode`        | -           | Required dialog title.                     |
+| `description`     | `React.ReactNode`        | -           | Dialog description.                        |
+| `children`        | `React.ReactNode`        | -           | Dialog body.                               |
+| `confirmLabel`    | `React.ReactNode`        | `'Confirm'` | Confirm button label.                      |
+| `cancelLabel`     | `React.ReactNode`        | `'Cancel'`  | Cancel button label.                       |
+| `confirmColor`    | `ZoraColor`              | `'danger'`  | Confirm button color.                      |
+| `confirmVariant`  | `ButtonProps['variant']` | `'solid'`   | Confirm button variant.                    |
+| `busy`            | `boolean`                | `false`     | Passed to the confirm button as `loading`. |
+| `closeOnBackdrop` | `boolean`                | `true`      | Passed to the underlying modal.            |
+| `onConfirm`       | `() => void`             | -           | Confirm button handler.                    |
+| `onCancel`        | `() => void`             | -           | Cancel button and modal dismiss handler.   |
+| `testID`          | `string`                 | -           | Forwarded to the underlying modal.         |
 
 Confirm dialogs always use `Modal` with `width="narrow"`.
 
@@ -2545,7 +2547,7 @@ import { MessageBubble, Stack } from '@ankhorage/zora';
     direction="incoming"
     author={{
       name: 'Ada Lovelace',
-      avatar: { name: 'Ada Lovelace', tone: 'primary' },
+      avatar: { name: 'Ada Lovelace', color: 'primary' },
     }}
     text="Can you review the new ChatListItem API?"
     timestamp="10:41"
@@ -2626,7 +2628,7 @@ type MessageBubbleStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
 | `label`    | `string`              | Accessibility label.                            |
 | `size`     | `AvatarSize`          | Optional avatar size override.                  |
 | `shape`    | `AvatarShape`         | Optional avatar shape override.                 |
-| `tone`     | `ZoraTone`            | Optional avatar tone.                           |
+| `color`    | `ZoraColor`           | Optional avatar color.                          |
 
 Inherited props: