react-native-terra-ui 0.7.2 → 0.8.0

package/lib/typescript/src/utils/accent-generator.d.ts

@@ -0,0 +1,103 @@
+/**
+ * Pure, deterministic accent generation from a single seed color.
+ *
+ * Consumed by the resolver (`theme/resolve-config.ts`) for startup, runtime
+ * accent changes and `createTerraThemes`, and by the `normalizeAccent`
+ * compatibility wrapper. Must not import the registry, provider, Unistyles,
+ * or renderers — only `#theme/types` and the colour maths in `./color-utils`.
+ *
+ * ## Algorithm
+ *
+ * Every role is derived in OKLCH (Björn Ottosson's OKLab, in-house
+ * implementation in `./color-utils`): the seed's hue is kept for every role,
+ * chroma is capped per role and reduced further by sRGB gamut mapping, and
+ * perceptual lightness is *solved* per role against the scheme's actual
+ * ordinary surfaces so that WCAG 2.x targets are met (4.5:1 for text and
+ * solid/soft labels, 3:1 for the accent border). Contrast is evaluated with
+ * sRGB alpha compositing over each of the four surfaces and, for solid
+ * controls, additionally with the pressed opacity applied to the whole control.
+ *
+ * - `accent.solid.bg` keeps the seed exactly when black or white text reads on
+ *   it at both opacities; otherwise the fill is moved the smallest lightness
+ *   distance (ties prefer darker in light, lighter in dark) until a readable
+ *   label exists — so the fill MAY differ from the seed. Pin `accent.solid.bg`
+ *   through overrides for an exact fill.
+ * - `accent.solid.fg` is a tinted near-black or near-white (pure black/white
+ *   when the tint would not reach 4.5:1) picked by contrast, not brightness.
+ * - Hover/pressed fills darken in light and lighten in dark (mirroring the
+ *   built-in tokens); the direction flips only where following the scheme
+ *   would break the label contrast or leave the lightness range.
+ * - `accent.soft.bg` is a light tint in light / dark tint in dark, placed
+ *   relative to the surfaces; `accent.soft.fg` is solved on all three soft
+ *   states. `accent.text` (and `text.link`, the existing shorthand) is solved
+ *   on every surface; `accent.border` is solved to 3:1 on every surface.
+ * - Disabled fills are desaturated and low-contrast-but-visible, in the
+ *   spirit of the default `slate.200`/`slate.700`-like tokens.
+ *
+ * Unsatisfiable pairs (e.g. one very light and one very dark surface) are
+ * reported as `unsatisfied` diagnostics with the best deterministic colour
+ * kept; unparseable surfaces are excluded from solving and reported as
+ * `unsupported`. Nothing ever falls back to white silently.
+ *
+ */
+import type { CanonicalThemeColor, Scheme } from "../theme/types";
+/** Every canonical role a seed generates. `text.link` is kept for the existing shorthand behaviour. */
+export type GeneratedAccentRole = "accent.text" | "accent.border" | "accent.solid.bg" | "accent.solid.bg.hover" | "accent.solid.bg.pressed" | "accent.solid.bg.disabled" | "accent.solid.fg" | "accent.soft.bg" | "accent.soft.bg.hover" | "accent.soft.bg.pressed" | "accent.soft.bg.disabled" | "accent.soft.fg" | "text.link";
+export declare const GENERATED_ACCENT_ROLES: readonly GeneratedAccentRole[];
+export type AccentSurfaceRole = "surface.canvas" | "surface.default" | "surface.raised" | "surface.sunken";
+/** The four ordinary surfaces every accent pair is evaluated over, in a fixed order. */
+export declare const ACCENT_SURFACE_ROLES: readonly AccentSurfaceRole[];
+/**
+ * The resolved scheme context a generator needs: the scheme's actual ordinary
+ * surfaces (after defaults, shared and scheme patches) and the opacity that
+ * components apply to a whole pressed control.
+ */
+export interface AccentGenerationContext {
+    scheme: Scheme;
+    surfaces: Record<AccentSurfaceRole, string>;
+    pressedOpacity: number;
+}
+/**
+ * `unsatisfied` — the pair was evaluated and fell below `required`.
+ * `unsupported` — a colour could not be evaluated (non-sRGB/opaque format);
+ * `ratio` is `null` and no accessibility claim is made.
+ */
+export type ContrastDiagnosticKind = "unsatisfied" | "unsupported";
+export interface ContrastDiagnostic {
+    kind: ContrastDiagnosticKind;
+    /** Foreground role checked, e.g. `accent.solid.fg` or `accent.text`. */
+    role: string;
+    /** Background role the foreground sits on, e.g. `accent.solid.bg` or `surface.canvas`. */
+    background: string;
+    /** Ordinary surface the pair was composited over. */
+    surface: AccentSurfaceRole;
+    /** Opacity applied to the whole control for this check (1 when none). */
+    opacity: number;
+    ratio: number | null;
+    required: number;
+    message: string;
+}
+export interface AccentGenerationResult {
+    colors: Record<GeneratedAccentRole, string>;
+    /** Pairs the generator could not satisfy or evaluate in the supported domain. */
+    diagnostics: ContrastDiagnostic[];
+}
+/** Whether `value` is an opaque six-digit sRGB hex seed (`#rrggbb`, case-insensitive). */
+export declare function isSupportedAccentSeed(value: unknown): value is string;
+/** WCAG 2.x minimum for normal text and solid/soft labels. */
+export declare const ACCENT_TEXT_CONTRAST = 4.5;
+/** WCAG 2.x minimum for a meaningful accent boundary on an ordinary surface. */
+export declare const ACCENT_BORDER_CONTRAST = 3;
+/**
+ * Generates every {@link GeneratedAccentRole} for `seed` in the given scheme
+ * context. Pure and deterministic: same inputs → same output. Callers must
+ * validate the seed with {@link isSupportedAccentSeed} first.
+ */
+export declare function generateAccentColors(seed: string, context: AccentGenerationContext): AccentGenerationResult;
+/**
+ * Evaluates the final accent roles (after explicit overrides) against their
+ * intended backgrounds in the supported domain and returns the failing or
+ * unevaluable pairs. Never repairs a colour.
+ */
+export declare function checkAccentContrast(colors: Pick<CanonicalThemeColor, GeneratedAccentRole>, context: AccentGenerationContext): ContrastDiagnostic[];
+//# sourceMappingURL=accent-generator.d.ts.map

package/lib/typescript/src/utils/accent-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accent-generator.d.ts","sourceRoot":"","sources":["../../../../src/utils/accent-generator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAYhE,uGAAuG;AACvG,MAAM,MAAM,mBAAmB,GAC3B,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,uBAAuB,GACvB,yBAAyB,GACzB,0BAA0B,GAC1B,iBAAiB,GACjB,gBAAgB,GAChB,sBAAsB,GACtB,wBAAwB,GACxB,yBAAyB,GACzB,gBAAgB,GAChB,WAAW,CAAC;AAEhB,eAAO,MAAM,sBAAsB,EAAE,SAAS,mBAAmB,EAchE,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,gBAAgB,CAAC;AAE3G,wFAAwF;AACxF,eAAO,MAAM,oBAAoB,EAAE,SAAS,iBAAiB,EAK5D,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;IAC5C,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,aAAa,GAAG,aAAa,CAAC;AAEnE,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,sBAAsB,CAAC;IAC7B,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,0FAA0F;IAC1F,UAAU,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,OAAO,EAAE,iBAAiB,CAAC;IAC3B,yEAAyE;IACzE,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;IAC5C,iFAAiF;IACjF,WAAW,EAAE,kBAAkB,EAAE,CAAC;CACnC;AAED,0FAA0F;AAC1F,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAErE;AAID,8DAA8D;AAC9D,eAAO,MAAM,oBAAoB,MAAM,CAAC;AACxC,gFAAgF;AAChF,eAAO,MAAM,sBAAsB,IAAI,CAAC;AA8JxC;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,uBAAuB,GAAG,sBAAsB,CAiI3G;AA+BD;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,IAAI,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,EACtD,OAAO,EAAE,uBAAuB,GAC/B,kBAAkB,EAAE,CAqDtB"}

package/lib/typescript/src/utils/accent-utils.d.ts

@@ -1,4 +1,17 @@
-import type { Accent, NormalizedAccent } from "../theme/types";
-/** Normalizes any accent input into per-scheme partial-theme overrides. */
+import type { Accent, NormalizedAccent, Scheme } from "../theme/types";
+import { type AccentGenerationContext } from "./accent-generator.js";
+/**
+ * The generation context of a built-in default theme: its four ordinary
+ * surfaces and pressed opacity. Used by the {@link normalizeAccent}
+ * compatibility wrapper, which has no access to shared/scheme patches.
+ */
+export declare function defaultAccentContext(scheme: Scheme): AccentGenerationContext;
+/**
+ * Compatibility wrapper: normalizes any accent input into per-scheme
+ * partial-theme overrides. Strings and `{ seed, overrides }` are generated
+ * against the DEFAULT themes' surfaces and pressed opacity (the resolver
+ * pipeline uses the actual resolved surfaces instead); full theme patches
+ * pass through unchanged. Pure and independent of the registry.
+ */
 export declare function normalizeAccent(accent: Accent): NormalizedAccent;
 //# sourceMappingURL=accent-utils.d.ts.map

package/lib/typescript/src/utils/accent-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accent-utils.d.ts","sourceRoot":"","sources":["../../../../src/utils/accent-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAmB,gBAAgB,EAAc,MAAM,cAAc,CAAC;AAuC1F,2EAA2E;AAC3E,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,gBAAgB,CAQhE"}
+{"version":3,"file":"accent-utils.d.ts","sourceRoot":"","sources":["../../../../src/utils/accent-utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,MAAM,EAEN,gBAAgB,EAChB,MAAM,EAGP,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,KAAK,uBAAuB,EAG7B,MAAM,uBAAoB,CAAC;AAG5B;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG,uBAAuB,CAK5E;AAkCD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,gBAAgB,CAKhE"}

package/lib/typescript/src/utils/color-utils.d.ts

@@ -1,4 +1,61 @@
-/** Small color helpers for deriving accent shades from a single hue. */
+/**
+ * Colour helpers shared by the accent generator, the contrast diagnostics and
+ * the public `shade` / `withAlpha` / `readableOn` utilities.
+ *
+ * Everything here is pure sRGB maths with no runtime dependency:
+ * - parsing of `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb()` and `rgba()`,
+ * - WCAG 2.x relative luminance / contrast with sRGB alpha compositing,
+ * - OKLab / OKLCH conversions (Björn Ottosson's published matrices) with
+ *   sRGB gamut mapping by chroma reduction at constant lightness and hue.
+ */
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+/** A parsed sRGB colour with 0-255 channels and a 0-1 alpha. */
+export interface RGBA extends RGB {
+    a: number;
+}
+/** OKLCH coordinates: L in [0, 1], C ≥ 0, h in degrees [0, 360). */
+export interface OKLCH {
+    l: number;
+    c: number;
+    h: number;
+}
+/** Formats 0-255 channels as a lowercase `#rrggbb` string (channels are rounded and clamped). */
+export declare function rgbToHex(rgb: RGB): string;
+/**
+ * Parses an sRGB colour string. Accepts `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`
+ * (case-insensitive) and `rgb(r, g, b)` / `rgba(r, g, b, a)` with integer or
+ * percentage channels. Returns `null` for anything else (named colours,
+ * `transparent`, hsl(), gradients, platform dynamic colours, ...).
+ */
+export declare function parseColor(value: unknown): RGBA | null;
+/** Source-over compositing of `front` at `alpha` onto an opaque `back`, in gamma-encoded sRGB. */
+export declare function compositeOver(front: RGB, back: RGB, alpha: number): RGB;
+/** WCAG 2.x relative luminance of an opaque sRGB colour (0-255 channels). */
+export declare function relativeLuminance(rgb: RGB): number;
+/** WCAG 2.x contrast ratio between two opaque sRGB colours (≥ 1). */
+export declare function contrastRatio(a: RGB, b: RGB): number;
+/**
+ * Contrast of a foreground on a background, both composited over an opaque
+ * `surface`, with `opacity` applied to the whole control afterwards (the way a
+ * pressed Button or Toast action fades as one unit). Matches the reference
+ * calculation in `theme/__tests__/color-contrast.test.ts`.
+ */
+export declare function compositedContrast(fg: RGBA, bg: RGBA, surface: RGB, opacity?: number): number;
+/** Converts 0-255 sRGB channels to OKLCH. Achromatic input yields `c ≈ 0` and `h = 0`. */
+export declare function rgbToOklch(rgb: RGB): OKLCH;
+/**
+ * Converts OKLCH to 0-255 sRGB channels. Colours outside the sRGB gamut are
+ * mapped by reducing chroma at constant lightness and hue (binary search)
+ * until they fit, so the requested lightness — what the contrast targets
+ * depend on — is preserved as closely as the gamut allows.
+ */
+export declare function oklchToRgb(color: OKLCH): RGB;
+/** `oklchToRgb` followed by `rgbToHex`. */
+export declare function oklchToHex(color: OKLCH): string;
 /**
  * Shifts a hex color toward black (negative `amount`) or white (positive),
  * by a fraction in [-1, 1]. Returns the input unchanged if not a 6-digit hex.
@@ -6,6 +63,6 @@
 export declare function shade(hex: string, amount: number): string;
 /** Returns an `rgba(...)` string for a hex color at the given alpha. */
 export declare function withAlpha(hex: string, alpha: number): string;
-/** Picks black or white for legible text/icons on top of `hex`. */
+/** Picks the higher-contrast black/white foreground for an opaque 6-digit hex. */
 export declare function readableOn(hex: string): string;
 //# sourceMappingURL=color-utils.d.ts.map

package/lib/typescript/src/utils/color-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../../../../src/utils/color-utils.ts"],"names":[],"mappings":"AAAA,wEAAwE;AAoBxE;;;GAGG;AACH,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAUzD;AAED,wEAAwE;AACxE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAI5D;AAED,mEAAmE;AACnE,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAM9C"}
+{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../../../../src/utils/color-utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,gEAAgE;AAChE,MAAM,WAAW,IAAK,SAAQ,GAAG;IAC/B,CAAC,EAAE,MAAM,CAAC;CACX;AAED,oEAAoE;AACpE,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAeD,iGAAiG;AACjG,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM,CAEzC;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CA8CtD;AAED,kGAAkG;AAClG,wBAAgB,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,GAAG,CAOvE;AAYD,6EAA6E;AAC7E,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM,CAIlD;AAED,qEAAqE;AACrE,wBAAgB,aAAa,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,CAIpD;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,SAAI,GAAG,MAAM,CAOxF;AA6BD,0FAA0F;AAC1F,wBAAgB,UAAU,CAAC,GAAG,EAAE,GAAG,GAAG,KAAK,CAU1C;AAYD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAqB5C;AAED,2CAA2C;AAC3C,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAE/C;AAID;;;GAGG;AACH,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAUzD;AAED,wEAAwE;AACxE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAI5D;AAED,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAO9C"}

package/lib/typescript/src/utils/deep-merge.d.ts

@@ -2,6 +2,7 @@
 export type DeepPartial<T> = T extends (infer U)[] ? DeepPartial<U>[] : T extends object ? {
     [K in keyof T]?: DeepPartial<T[K]>;
 } : T;
+export declare const isPlainObject: (value: unknown) => value is Record<string, unknown>;
 /**
  * Deep-merges `override` onto `base`, returning a new object.
  * Plain objects merge recursively; all other values (and arrays) replace.

package/lib/typescript/src/utils/deep-merge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deep-merge.d.ts","sourceRoot":"","sources":["../../../../src/utils/deep-merge.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAC9C,WAAW,CAAC,CAAC,CAAC,EAAE,GAChB,CAAC,SAAS,MAAM,GACd;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,GACtC,CAAC,CAAC;AAQR;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAiBlE"}
+{"version":3,"file":"deep-merge.d.ts","sourceRoot":"","sources":["../../../../src/utils/deep-merge.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAC9C,WAAW,CAAC,CAAC,CAAC,EAAE,GAChB,CAAC,SAAS,MAAM,GACd;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,GACtC,CAAC,CAAC;AAER,eAAO,MAAM,aAAa,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAI3B,CAAC;AAEpD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAiBlE"}

package/lib/typescript/src/utils/resolve-theme-color.d.ts

@@ -4,8 +4,8 @@ import type { ColorToken, TerraTheme } from "../theme/types";
  * Raw literals pass through unchanged.
  *
  * @example
- * resolveThemeColor('text.default', theme)         // → '#020618'
- * resolveThemeColor('action.bg.primary', theme)    // → '#009966'
+ * resolveThemeColor('text.primary', theme)         // → '#020618'
+ * resolveThemeColor('accent.solid.bg', theme)    // → '#009966'
  * resolveThemeColor('#ff0000', theme)              // → '#ff0000'
  */
 export declare function resolveThemeColor(token: ColorToken | undefined, theme: TerraTheme): string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-terra-ui",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Themeable React Native UI components built on react-native-unistyles",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/avatar/Avatar.tsx

@@ -149,80 +149,80 @@ const styles = StyleSheet.create((theme) => {
           color: "secondary",
           variant: "solid",
           styles: {
-            backgroundColor: c["action.bg.secondary"],
-            color: c["action.fg.secondary"],
+            backgroundColor: c["neutral.solid.bg"],
+            color: c["neutral.solid.fg"],
           },
         },
         {
           color: "secondary",
           variant: "soft",
           styles: {
-            backgroundColor: c["action.bg.secondary.subtle"],
-            color: c["action.fg.secondary.subtle"],
+            backgroundColor: c["neutral.soft.bg"],
+            color: c["neutral.soft.fg"],
           },
         },
         {
           color: "primary",
           variant: "solid",
           styles: {
-            backgroundColor: c["action.bg.primary"],
-            color: c["action.fg.primary"],
+            backgroundColor: c["accent.solid.bg"],
+            color: c["accent.solid.fg"],
           },
         },
         {
           color: "primary",
           variant: "soft",
           styles: {
-            backgroundColor: c["action.bg.primary.subtle"],
-            color: c["action.fg.primary.subtle"],
+            backgroundColor: c["accent.soft.bg"],
+            color: c["accent.soft.fg"],
           },
         },
         {
           color: "success",
           variant: "solid",
           styles: {
-            backgroundColor: c["status.success.bg"],
-            color: c["status.success.fg"],
+            backgroundColor: c["success.solid.bg"],
+            color: c["success.solid.fg"],
           },
         },
         {
           color: "success",
           variant: "soft",
           styles: {
-            backgroundColor: c["status.success.bg.subtle"],
-            color: c["status.success.fg.subtle"],
+            backgroundColor: c["success.soft.bg"],
+            color: c["success.soft.fg"],
           },
         },
         {
           color: "warning",
           variant: "solid",
           styles: {
-            backgroundColor: c["status.warning.bg"],
-            color: c["status.warning.fg"],
+            backgroundColor: c["warning.solid.bg"],
+            color: c["warning.solid.fg"],
           },
         },
         {
           color: "warning",
           variant: "soft",
           styles: {
-            backgroundColor: c["status.warning.bg.subtle"],
-            color: c["status.warning.fg.subtle"],
+            backgroundColor: c["warning.soft.bg"],
+            color: c["warning.soft.fg"],
           },
         },
         {
           color: "danger",
           variant: "solid",
           styles: {
-            backgroundColor: c["status.danger.bg"],
-            color: c["status.danger.fg"],
+            backgroundColor: c["danger.solid.bg"],
+            color: c["danger.solid.fg"],
           },
         },
         {
           color: "danger",
           variant: "soft",
           styles: {
-            backgroundColor: c["status.danger.bg.subtle"],
-            color: c["status.danger.fg.subtle"],
+            backgroundColor: c["danger.soft.bg"],
+            color: c["danger.soft.fg"],
           },
         },
       ],

package/src/components/button/Button.tsx

@@ -70,38 +70,38 @@ function getColors(variant: ButtonVariant, theme: TerraTheme): ButtonColors {
   switch (variant) {
     case "primary":
       return {
-        bg: get("action.bg.primary"),
-        border: get("action.bg.primary"),
+        bg: get("accent.solid.bg"),
+        border: get("accent.solid.bg"),
         borderWidth: 0,
-        fg: get("action.fg.primary"),
+        fg: get("accent.solid.fg"),
       };
     case "secondary":
       return {
-        bg: get("action.bg.secondary"),
-        border: get("action.bg.secondary"),
+        bg: get("neutral.solid.bg"),
+        border: get("neutral.solid.bg"),
         borderWidth: 0,
-        fg: get("action.fg.secondary"),
+        fg: get("neutral.solid.fg"),
       };
     case "outline":
       return {
         bg: "transparent",
         border: get("border.default"),
         borderWidth: 1,
-        fg: get("text.default"),
+        fg: get("text.primary"),
       };
     case "ghost":
       return {
         bg: "transparent",
         border: "transparent",
         borderWidth: 0,
-        fg: get("text.default"),
+        fg: get("text.primary"),
       };
     case "danger":
       return {
-        bg: get("status.danger.bg"),
-        border: get("status.danger.bg"),
+        bg: get("danger.solid.bg"),
+        border: get("danger.solid.bg"),
         borderWidth: 0,
-        fg: get("status.danger.fg"),
+        fg: get("danger.solid.fg"),
       };
   }
 }

package/src/components/chip/Chip.tsx

@@ -31,7 +31,7 @@ interface ChipContextValue {
 }
 
 const ChipContext = createContext<ChipContextValue>({
-  color: "text.default",
+  color: "text.primary",
   size: "md",
 });
 
@@ -66,29 +66,29 @@ function paintedVariant(variant: ChipVariant): ChipPaintedVariant {
 /** Foreground token per (scheme, variant) — mirrors the spec's token table. */
 const FG_TOKEN: Record<ChipScheme, Record<ChipPaintedVariant, ColorToken>> = {
   primary: {
-    solid: "action.fg.primary",
-    soft: "action.fg.primary.subtle",
-    outline: "text.accent",
+    solid: "accent.solid.fg",
+    soft: "accent.soft.fg",
+    outline: "accent.text",
   },
   secondary: {
-    solid: "action.fg.secondary",
-    soft: "action.fg.secondary.subtle",
-    outline: "text.default",
+    solid: "neutral.solid.fg",
+    soft: "neutral.soft.fg",
+    outline: "text.primary",
   },
   success: {
-    solid: "status.success.fg",
-    soft: "status.success.fg.subtle",
-    outline: "status.success.fg.subtle",
+    solid: "success.solid.fg",
+    soft: "success.soft.fg",
+    outline: "success.soft.fg",
   },
   warning: {
-    solid: "status.warning.fg",
-    soft: "status.warning.fg.subtle",
-    outline: "status.warning.fg.subtle",
+    solid: "warning.solid.fg",
+    soft: "warning.soft.fg",
+    outline: "warning.soft.fg",
   },
   danger: {
-    solid: "status.danger.fg",
-    soft: "status.danger.fg.subtle",
-    outline: "status.danger.fg.subtle",
+    solid: "danger.solid.fg",
+    soft: "danger.soft.fg",
+    outline: "danger.soft.fg",
   },
 };
 
@@ -222,7 +222,7 @@ type ChipComponent = typeof ChipRoot & {
 // change that computes a value equal to that stale record emits no update at
 // all, and the node keeps whatever the theme switch painted. That is reachable
 // whenever one colour fills two roles across themes — an accent equal to
-// another theme's `action.bg.secondary.subtle`, say — and it shows up as a
+// another theme's `neutral.soft.bg`, say — and it shows up as a
 // deselected chip still wearing the selected background.
 //
 // Re-rendering on a theme switch commits the new value there and then, so no
@@ -327,7 +327,7 @@ const styles = StyleSheet.create((theme) => {
           color: "primary",
           variant: "solid",
           styles: {
-            backgroundColor: c["action.bg.primary"],
+            backgroundColor: c["accent.solid.bg"],
             borderWidth: 0,
           },
         },
@@ -335,7 +335,7 @@ const styles = StyleSheet.create((theme) => {
           color: "primary",
           variant: "soft",
           styles: {
-            backgroundColor: c["action.bg.primary.subtle"],
+            backgroundColor: c["accent.soft.bg"],
             borderWidth: 0,
           },
         },
@@ -344,7 +344,7 @@ const styles = StyleSheet.create((theme) => {
           variant: "outline",
           styles: {
             backgroundColor: "transparent",
-            borderColor: c["action.bg.primary.subtle"],
+            borderColor: c["accent.soft.bg"],
             borderWidth: 1,
           },
         },
@@ -352,7 +352,7 @@ const styles = StyleSheet.create((theme) => {
           color: "secondary",
           variant: "solid",
           styles: {
-            backgroundColor: c["action.bg.secondary"],
+            backgroundColor: c["neutral.solid.bg"],
             borderWidth: 0,
           },
         },
@@ -360,7 +360,7 @@ const styles = StyleSheet.create((theme) => {
           color: "secondary",
           variant: "soft",
           styles: {
-            backgroundColor: c["action.bg.secondary.subtle"],
+            backgroundColor: c["neutral.soft.bg"],
             borderWidth: 0,
           },
         },
@@ -369,7 +369,7 @@ const styles = StyleSheet.create((theme) => {
           variant: "outline",
           styles: {
             backgroundColor: "transparent",
-            borderColor: c["action.bg.secondary.subtle"],
+            borderColor: c["neutral.soft.bg"],
             borderWidth: 1,
           },
         },
@@ -377,7 +377,7 @@ const styles = StyleSheet.create((theme) => {
           color: "success",
           variant: "solid",
           styles: {
-            backgroundColor: c["status.success.bg"],
+            backgroundColor: c["success.solid.bg"],
             borderWidth: 0,
           },
         },
@@ -385,7 +385,7 @@ const styles = StyleSheet.create((theme) => {
           color: "success",
           variant: "soft",
           styles: {
-            backgroundColor: c["status.success.bg.subtle"],
+            backgroundColor: c["success.soft.bg"],
             borderWidth: 0,
           },
         },
@@ -394,7 +394,7 @@ const styles = StyleSheet.create((theme) => {
           variant: "outline",
           styles: {
             backgroundColor: "transparent",
-            borderColor: c["status.success.bg.subtle"],
+            borderColor: c["success.soft.bg"],
             borderWidth: 1,
           },
         },
@@ -402,7 +402,7 @@ const styles = StyleSheet.create((theme) => {
           color: "warning",
           variant: "solid",
           styles: {
-            backgroundColor: c["status.warning.bg"],
+            backgroundColor: c["warning.solid.bg"],
             borderWidth: 0,
           },
         },
@@ -410,7 +410,7 @@ const styles = StyleSheet.create((theme) => {
           color: "warning",
           variant: "soft",
           styles: {
-            backgroundColor: c["status.warning.bg.subtle"],
+            backgroundColor: c["warning.soft.bg"],
             borderWidth: 0,
           },
         },
@@ -419,7 +419,7 @@ const styles = StyleSheet.create((theme) => {
           variant: "outline",
           styles: {
             backgroundColor: "transparent",
-            borderColor: c["status.warning.bg.subtle"],
+            borderColor: c["warning.soft.bg"],
             borderWidth: 1,
           },
         },
@@ -427,7 +427,7 @@ const styles = StyleSheet.create((theme) => {
           color: "danger",
           variant: "solid",
           styles: {
-            backgroundColor: c["status.danger.bg"],
+            backgroundColor: c["danger.solid.bg"],
             borderWidth: 0,
           },
         },
@@ -435,7 +435,7 @@ const styles = StyleSheet.create((theme) => {
           color: "danger",
           variant: "soft",
           styles: {
-            backgroundColor: c["status.danger.bg.subtle"],
+            backgroundColor: c["danger.soft.bg"],
             borderWidth: 0,
           },
         },
@@ -444,7 +444,7 @@ const styles = StyleSheet.create((theme) => {
           variant: "outline",
           styles: {
             backgroundColor: "transparent",
-            borderColor: c["status.danger.bg.subtle"],
+            borderColor: c["danger.soft.bg"],
             borderWidth: 1,
           },
         },

package/src/components/chip/types.ts

@@ -3,7 +3,7 @@ export type ChipVariant = "solid" | "soft" | "outline" | "ghost";
 
 /**
  * Semantic color scheme, or a raw CSS color literal (`#fff`, `rgb(...)`, `hsl(...)`).
- * Has no effect when `variant="ghost"` — ghost always renders `text.default`.
+ * Has no effect when `variant="ghost"` — ghost always renders `text.primary`.
  */
 export type ChipColor =
   | "primary"

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

@@ -11,7 +11,7 @@ import type { EmptyStateSize } from "./types";
 export interface EmptyStateProps extends Omit<ViewProps, "children"> {
   /** Icon rendered in the circular badge above the title. */
   icon?: TerraIconName;
-  /** Icon tint. Defaults to `text.subtle`. */
+  /** Icon tint. Defaults to `text.tertiary`. */
   iconColor?: ColorToken;
   /**
    * Replaces the icon badge entirely — an illustration, `Image`, or any custom
@@ -75,7 +75,7 @@ function renderSlot(node: ReactNode, wrap: (value: ReactNode) => ReactNode): Rea
 export const EmptyState = forwardRef<ComponentRef<typeof View>, EmptyStateProps>(function EmptyState(
   {
     icon,
-    iconColor = "text.default",
+    iconColor = "text.primary",
     media,
     title,
     description,
@@ -107,7 +107,7 @@ export const EmptyState = forwardRef<ComponentRef<typeof View>, EmptyStateProps>
           </Text>
         ))}
         {renderSlot(description, (value) => (
-          <Text variant={typography.description} color="text.subtle" align="center">
+          <Text variant={typography.description} color="text.tertiary" align="center">
             {value}
           </Text>
         ))}
@@ -160,7 +160,7 @@ const styles = StyleSheet.create((theme) => ({
   iconBadge: {
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: theme.color["action.bg.primary.subtle"],
+    backgroundColor: theme.color["accent.soft.bg"],
     borderRadius: theme.radius.full,
     variants: {
       size: {