react-native-terra-ui 0.1.0 → 0.2.0

package/src/theme/theme.ts

@@ -4,7 +4,9 @@ import { dark } from './tokens/dark';
 import { light } from './tokens/light';
 import { primitives } from './tokens/primitives';
 import type {
+  ElevationKey,
   ElevationScale,
+  ElevationStyle,
   LayoutTokens,
   OpacityTokens,
   RadiusKey,
@@ -14,9 +16,27 @@ import type {
   Typography,
 } from './types';
 
+// Matches `{palette.key}/NN` — a palette reference with a trailing NN%
+// opacity suffix (0-100), e.g. `{palette.amber.500}/15`.
+const ALPHA_REF_PATTERN = /^\{([\w.]+)\}\/(\d{1,3})$/;
+// Matches a bare `#rrggbb` hex color (the only shape palette primitives use).
+const HEX6_PATTERN = /^#[0-9a-f]{6}$/i;
+
+/**
+ * Converts a 0-100 percentage into a two-digit hex alpha byte, e.g. 15 -> '26'.
+ */
+function percentToHexAlpha(percent: number): string {
+  const byte = Math.round((percent / 100) * 255);
+  return byte.toString(16).padStart(2, '0');
+}
+
 /**
  * Resolves {palette.key} reference notation against a source flat-token map.
- * Non-reference values pass through unchanged.
+ * Also resolves {palette.key}/NN, which appends an NN% opacity alpha byte to
+ * the referenced hex color (the referenced value must be a plain #rrggbb hex
+ * - `/NN` is not supported on raw hex/rgba literals). Non-reference values
+ * pass through unchanged; a reference that can't be resolved this way is
+ * left as-is.
  */
 function resolveRefs(
   flat: Record<string, unknown>,
@@ -24,10 +44,28 @@ function resolveRefs(
 ): Record<string, unknown> {
   const out: Record<string, unknown> = {};
   for (const [k, v] of Object.entries(flat)) {
+    if (typeof v !== 'string') {
+      out[k] = v;
+      continue;
+    }
+
+    const alphaMatch = v.match(ALPHA_REF_PATTERN);
+    if (alphaMatch) {
+      // Both groups are guaranteed by ALPHA_REF_PATTERN when it matches;
+      // `noUncheckedIndexedAccess` just can't see that from a regex literal.
+      const refKey = alphaMatch[1] as string;
+      const percentStr = alphaMatch[2] as string;
+      const base = source[refKey];
+      const percent = Number(percentStr);
+      out[k] =
+        typeof base === 'string' && HEX6_PATTERN.test(base)
+          ? `${base}${percentToHexAlpha(percent)}`
+          : v;
+      continue;
+    }
+
     out[k] =
-      typeof v === 'string' && v.startsWith('{') && v.endsWith('}')
-        ? (source[v.slice(1, -1)] ?? v)
-        : v;
+      v.startsWith('{') && v.endsWith('}') ? (source[v.slice(1, -1)] ?? v) : v;
   }
   return out;
 }
@@ -61,16 +99,19 @@ function flattenByCategory(
  * Scheme-agnostic primitives, rebuilt once from the flat token data. Shared by
  * both default themes (matching the previous behavior where spacing / radius /
  * typography were singleton constants). `palette` is present at runtime for
- * Figma parity but is not part of {@link TerraTheme}. Only the radius BASE is
- * authored here (`radius.base`); the full scale is derived via
- * {@link buildRadiusScale}.
+ * Figma parity but is not part of {@link TerraTheme}. Only the radius BASE and
+ * spacing BASE are authored here (`radius.base`, `spacing.base`); the full
+ * scales are derived via {@link buildRadiusScale} / {@link buildSpacingScale}.
+ * `elevation` excludes `shadowColor`, which is layered on per-scheme from each
+ * theme's `color.shadow` token (see {@link withShadowColor}).
  */
 const prim = unflatten<{
-  spacing: Record<SpacingKey, number>;
+  spacing: { base: number };
   radius: { base: number };
   typography: Typography;
   opacity: OpacityTokens;
   layout: LayoutTokens;
+  elevation: Record<ElevationKey, Omit<ElevationStyle, 'shadowColor'>>;
 }>(primitives);
 
 /**
@@ -82,6 +123,57 @@ const prim = unflatten<{
  */
 export const DEFAULT_RADIUS_BASE = prim.radius.base;
 
+/**
+ * Every {@link SpacingKey} — its own numeric value IS the multiplier applied
+ * to the base unit (e.g. `'5'` → `5 × base`), so no separate multiplier table
+ * is needed the way {@link RADIUS_MULTIPLIERS} is for radius.
+ */
+export const SPACING_KEYS: SpacingKey[] = [
+  '0',
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  '10',
+  '12',
+  '14',
+  '16',
+  '20',
+  '24',
+  '32',
+];
+
+/**
+ * Default spacing base unit (dp) — taken from the `spacing.base` primitive.
+ * The rest of the scale is derived from it (each step's value is its key
+ * multiplied by this base); override at runtime with
+ * `configureTerraUI({ shared: { spacing: { base } } })`, or change the
+ * `spacing.base` token.
+ */
+export const DEFAULT_SPACING_BASE = prim.spacing.base;
+
+/**
+ * Builds the full spacing scale from a single base value. Each step's value is
+ * its key multiplied by `base` — no outliers needed, since `'0'` naturally
+ * resolves to `0` for any base.
+ */
+export function buildSpacingScale(
+  base: number = DEFAULT_SPACING_BASE
+): Record<SpacingKey, number> {
+  const scale = {} as Record<SpacingKey, number>;
+  for (const key of SPACING_KEYS) {
+    scale[key] = Number(key) * base;
+  }
+  return scale;
+}
+
+const defaultSpacing = buildSpacingScale();
+
 /**
  * Per-token multipliers applied to the base radius (DaisyUI-style). `none` (0)
  * and `full` (9999) are fixed and not scaled.
@@ -120,21 +212,43 @@ const defaultRadius = buildRadiusScale();
 const lightByCategory = flattenByCategory(resolveRefs(light, primitives));
 const darkByCategory = flattenByCategory(resolveRefs(dark, primitives));
 
+/**
+ * Fills in each elevation level's `shadowColor` from the theme's `color.shadow`
+ * token, rather than authoring it redundantly on every level in `light.ts` /
+ * `dark.ts`.
+ */
+function withShadowColor(
+  elevation: Record<ElevationKey, Omit<ElevationStyle, 'shadowColor'>>,
+  shadowColor: string
+): ElevationScale {
+  const out = {} as ElevationScale;
+  for (const key of Object.keys(elevation) as ElevationKey[]) {
+    out[key] = { ...elevation[key], shadowColor };
+  }
+  return out;
+}
+
 // color: flat map — accessed as theme.color['action.bg.primary.hover']
-// elevation: re-unflattened for structured access — theme.elevation.sm.shadowRadius
+// elevation: shared shape from primitives, shadowColor layered on per scheme
 const lightTokens = {
   color: lightByCategory.color as unknown as ThemeColor,
-  elevation: unflatten<ElevationScale>(lightByCategory.elevation ?? {}),
+  elevation: withShadowColor(
+    prim.elevation,
+    (lightByCategory.color as unknown as ThemeColor).shadow
+  ),
 };
 const darkTokens = {
   color: darkByCategory.color as unknown as ThemeColor,
-  elevation: unflatten<ElevationScale>(darkByCategory.elevation ?? {}),
+  elevation: withShadowColor(
+    prim.elevation,
+    (darkByCategory.color as unknown as ThemeColor).shadow
+  ),
 };
 
 export const defaultLightTheme: TerraTheme = {
   color: lightTokens.color,
   elevation: lightTokens.elevation,
-  spacing: prim.spacing,
+  spacing: defaultSpacing,
   radius: defaultRadius,
   typography: prim.typography,
   opacity: prim.opacity,
@@ -144,7 +258,7 @@ export const defaultLightTheme: TerraTheme = {
 export const defaultDarkTheme: TerraTheme = {
   color: darkTokens.color,
   elevation: darkTokens.elevation,
-  spacing: prim.spacing,
+  spacing: defaultSpacing,
   radius: defaultRadius,
   typography: prim.typography,
   opacity: prim.opacity,

package/src/theme/tokens/dark.ts

@@ -9,6 +9,9 @@ export const dark = {
   // ── color: page background ────────────────────────────────────────────────
   'color.background': '{palette.neutral.950}',
 
+  // ── color: shadow (used as elevation.*.shadowColor) ───────────────────────
+  'color.shadow': '#000000',
+
   // ── color: surfaces  (bg implied — no property segment) ──────────────────
   'color.surface.default': '{palette.neutral.900}',
   'color.surface.raised': '{palette.neutral.800}',
@@ -19,9 +22,14 @@ export const dark = {
 
   // ── color: text / icons  (fg implied — no property segment) ──────────────
   'color.text.default': '{palette.neutral.50}',
-  'color.text.muted': '{palette.neutral.400}',
-  'color.text.subtle': '{palette.neutral.500}',
-  'color.text.disabled': '{palette.neutral.700}',
+  // Off-ramp hexes (like light's) rather than neutral.400/500/600: the ramp
+  // steps are tuned for dark text on white, and reused as light text they land
+  // too dim. Set so `subtle` clears AA 4.5:1 on `surface.raised` — the lightest
+  // surface, so the worst case — which keeps the muted/subtle/disabled spacing
+  // proportional to light's.
+  'color.text.muted': '#b8b8be',
+  'color.text.subtle': '#8d8d96',
+  'color.text.disabled': '#606069',
   'color.text.inverse': '{palette.neutral.950}',
   'color.text.link': '{palette.blue.300}',
   'color.text.accent': '{palette.emerald.400}',
@@ -42,76 +50,59 @@ export const dark = {
   'color.action.bg.primary.disabled': '{palette.slate.700}',
   'color.action.fg.primary': '{palette.slate.950}',
 
-  'color.action.bg.subtle': '{palette.emerald.950}',
-  'color.action.bg.subtle.hover': '{palette.emerald.900}',
-  'color.action.bg.subtle.active': '{palette.emerald.800}',
-  'color.action.bg.subtle.disabled': '{palette.neutral.900}',
-  'color.action.fg.subtle': '{palette.emerald.300}',
+  'color.action.bg.primary.subtle': '{palette.emerald.950}',
+  'color.action.bg.primary.subtle.hover': '{palette.emerald.900}',
+  'color.action.bg.primary.subtle.active': '{palette.emerald.800}',
+  'color.action.bg.primary.subtle.disabled': '{palette.neutral.900}',
+  'color.action.fg.primary.subtle': '{palette.emerald.300}',
 
-  'color.action.bg.neutral': 'transparent',
-  'color.action.bg.neutral.hover': '{palette.neutral.800}',
-  'color.action.bg.neutral.active': '{palette.neutral.700}',
-  'color.action.bg.neutral.disabled': 'transparent',
-  'color.action.fg.neutral': '{palette.neutral.400}',
+  // `secondary`'s resting fill/text — used by Avatar/Chip's `secondary` color
+  // and Button/Toast's neutral-emphasis look; sized for real separation
+  // against `color.background` (neutral.950).
+  'color.action.bg.secondary': '{palette.neutral.600}',
+  'color.action.fg.secondary': '{palette.neutral.50}',
+  // Translucent, like light's — and like the status schemes' `/30` fills above.
+  // As opaque neutral.800 this was exactly `surface.raised`, so a soft
+  // secondary Chip/Button vanished on a raised card (1.00:1), and its opaque
+  // neutral.700 hover was indistinguishable from the resting fill there. An
+  // overlay lightens whatever it sits on, so the fill separates on all three
+  // surfaces (1.49-1.59:1, matching the success/warning chips).
+  'color.action.bg.secondary.subtle': '{palette.neutral.400}/25',
+  'color.action.bg.secondary.subtle.hover': '{palette.neutral.400}/35',
+  'color.action.bg.secondary.subtle.active': '{palette.neutral.400}/45',
+  'color.action.bg.secondary.subtle.disabled': '{palette.neutral.900}',
+  'color.action.fg.secondary.subtle': '{palette.neutral.200}',
 
   // ── color: status  (bg + fg + border → property required) ────────────────
-  'color.status.bg.success': '{palette.green.500}',
-  'color.status.bg.success.subtle': '{palette.green.900}',
-  'color.status.border.success': '{palette.green.700}',
-  'color.status.border.success.subtle': '{palette.green.800}',
-  'color.status.fg.success': '{palette.slate.950}',
-  'color.status.fg.success.subtle': '{palette.green.200}',
-
-  'color.status.bg.warning': '{palette.amber.400}',
-  'color.status.bg.warning.subtle': '{palette.amber.900}',
-  'color.status.border.warning': '{palette.amber.700}',
-  'color.status.border.warning.subtle': '{palette.amber.800}',
-  'color.status.fg.warning': '{palette.slate.950}',
-  'color.status.fg.warning.subtle': '{palette.amber.200}',
+  'color.status.success': '{palette.green.600}',
+  'color.status.success.bg': '{palette.green.600}',
+  'color.status.success.bg.subtle': '{palette.green.600}/30',
+  'color.status.success.border': '{palette.green.700}',
+  'color.status.success.border.subtle': '{palette.green.800}',
+  'color.status.success.fg': '{palette.white}',
+  'color.status.success.fg.subtle': '{palette.green.200}',
 
-  'color.status.bg.danger': '{palette.red.500}',
-  'color.status.bg.danger.subtle': '{palette.red.950}',
-  'color.status.border.danger': '{palette.red.800}',
-  'color.status.border.danger.subtle': '{palette.red.900}',
-  'color.status.fg.danger': '{palette.white}',
-  'color.status.fg.danger.subtle': '{palette.red.200}',
+  'color.status.warning': '{palette.yellow.600}',
+  'color.status.warning.bg': '{palette.yellow.600}',
+  'color.status.warning.bg.subtle': '{palette.yellow.600}/30',
+  'color.status.warning.border': '{palette.yellow.700}',
+  'color.status.warning.border.subtle': '{palette.yellow.800}',
+  'color.status.warning.fg': '{palette.white}',
+  'color.status.warning.fg.subtle': '{palette.yellow.200}',
 
-  'color.status.bg.info': '{palette.sky.500}',
-  'color.status.bg.info.subtle': '{palette.sky.950}',
-  'color.status.border.info': '{palette.sky.800}',
-  'color.status.border.info.subtle': '{palette.sky.900}',
-  'color.status.fg.info': '{palette.slate.950}',
-  'color.status.fg.info.subtle': '{palette.sky.200}',
+  'color.status.danger': '{palette.red.700}',
+  'color.status.danger.bg': '{palette.red.700}',
+  'color.status.danger.bg.subtle': '{palette.red.700}/30',
+  'color.status.danger.border': '{palette.red.800}',
+  'color.status.danger.border.subtle': '{palette.red.900}',
+  'color.status.danger.fg': '{palette.white}',
+  'color.status.danger.fg.subtle': '{palette.red.200}',
 
-  // ── elevation: platform-aware shadow + Android elevation ──────────────────
-  'elevation.none.shadowColor': '#000000',
-  'elevation.none.shadowOpacity': 0,
-  'elevation.none.shadowRadius': 0,
-  'elevation.none.shadowOffset.width': 0,
-  'elevation.none.shadowOffset.height': 0,
-  'elevation.none.elevation': 0,
-  'elevation.sm.shadowColor': '#000000',
-  'elevation.sm.shadowOpacity': 0.3,
-  'elevation.sm.shadowRadius': 2,
-  'elevation.sm.shadowOffset.width': 0,
-  'elevation.sm.shadowOffset.height': 1,
-  'elevation.sm.elevation': 1,
-  'elevation.md.shadowColor': '#000000',
-  'elevation.md.shadowOpacity': 0.4,
-  'elevation.md.shadowRadius': 6,
-  'elevation.md.shadowOffset.width': 0,
-  'elevation.md.shadowOffset.height': 2,
-  'elevation.md.elevation': 3,
-  'elevation.lg.shadowColor': '#000000',
-  'elevation.lg.shadowOpacity': 0.5,
-  'elevation.lg.shadowRadius': 12,
-  'elevation.lg.shadowOffset.width': 0,
-  'elevation.lg.shadowOffset.height': 4,
-  'elevation.lg.elevation': 6,
-  'elevation.xl.shadowColor': '#000000',
-  'elevation.xl.shadowOpacity': 0.6,
-  'elevation.xl.shadowRadius': 24,
-  'elevation.xl.shadowOffset.width': 0,
-  'elevation.xl.shadowOffset.height': 8,
-  'elevation.xl.elevation': 12,
+  'color.status.info': '{palette.sky.500}',
+  'color.status.info.bg': '{palette.sky.500}',
+  'color.status.info.bg.subtle': '{palette.sky.950}',
+  'color.status.info.border': '{palette.sky.800}',
+  'color.status.info.border.subtle': '{palette.sky.900}',
+  'color.status.info.fg': '{palette.slate.950}',
+  'color.status.info.fg.subtle': '{palette.sky.200}',
 };

package/src/theme/tokens/light.ts

@@ -6,14 +6,19 @@
  *   - property is required when a context carries multiple attributes (action, status)
  *
  * Values use {palette.key} reference notation, resolved against primitives at
- * build time via resolveRefs() in theme.ts. Raw hex is used only where no
+ * build time via resolveRefs() in theme.ts. {palette.key}/NN resolves the
+ * referenced #rrggbb hex with an NN% opacity byte appended (e.g.
+ * {palette.amber.500}/15 -> '#fe9a0026'). Raw hex is used only where no
  * palette step matches exactly.
  *
  * GENERATED-STYLE SOURCE: intended to be replaced by the Figma / design-sync export.
  */
 export const light = {
   // ── color: page background ────────────────────────────────────────────────
-  'color.background': '#f9f9fb',
+  'color.background': '#fbfbfb',
+
+  // ── color: shadow (used as elevation.*.shadowColor) ───────────────────────
+  'color.shadow': '#000000',
 
   // ── color: surfaces  (bg implied — no property segment) ──────────────────
   'color.surface.default': '{palette.white}',
@@ -48,76 +53,53 @@ export const light = {
   'color.action.bg.primary.disabled': '{palette.slate.200}',
   'color.action.fg.primary': '{palette.white}',
 
-  'color.action.bg.subtle': '{palette.emerald.100}',
-  'color.action.bg.subtle.hover': '{palette.emerald.200}',
-  'color.action.bg.subtle.active': '{palette.emerald.300}',
-  'color.action.bg.subtle.disabled': '{palette.slate.100}',
-  'color.action.fg.subtle': '{palette.emerald.700}',
+  'color.action.bg.primary.subtle': '{palette.emerald.100}',
+  'color.action.bg.primary.subtle.hover': '{palette.emerald.200}',
+  'color.action.bg.primary.subtle.active': '{palette.emerald.300}',
+  'color.action.bg.primary.subtle.disabled': '{palette.slate.100}',
+  'color.action.fg.primary.subtle': '{palette.emerald.700}',
 
-  'color.action.bg.neutral': 'transparent',
-  'color.action.bg.neutral.hover': '{palette.slate.100}',
-  'color.action.bg.neutral.active': '{palette.slate.200}',
-  'color.action.bg.neutral.disabled': 'transparent',
-  'color.action.fg.neutral': '{palette.slate.700}',
+  // `secondary`'s resting fill/text — used by Avatar/Chip's `secondary` color
+  // and Button/Toast's neutral-emphasis look; sized for real separation
+  // against `color.background` (#f9f9fb), not just a tint.
+  'color.action.bg.secondary': '{palette.neutral.200}',
+  'color.action.fg.secondary': '{palette.neutral.900}',
+  'color.action.bg.secondary.subtle': '{palette.neutral.400}/15',
+  'color.action.bg.secondary.subtle.hover': '{palette.neutral.400}/25',
+  'color.action.bg.secondary.subtle.active': '{palette.neutral.400}/35',
+  'color.action.bg.secondary.subtle.disabled': '{palette.slate.100}',
+  'color.action.fg.secondary.subtle': '{palette.neutral.700}',
 
   // ── color: status  (bg + fg + border → property required) ────────────────
-  'color.status.bg.success': '{palette.green.600}',
-  'color.status.bg.success.subtle': '{palette.green.100}',
-  'color.status.border.success': '{palette.green.300}',
-  'color.status.border.success.subtle': '{palette.green.200}',
-  'color.status.fg.success': '{palette.white}',
-  'color.status.fg.success.subtle': '{palette.green.800}',
-
-  'color.status.bg.warning': '{palette.amber.500}',
-  'color.status.bg.warning.subtle': '{palette.amber.100}',
-  'color.status.border.warning': '{palette.amber.300}',
-  'color.status.border.warning.subtle': '{palette.amber.200}',
-  'color.status.fg.warning': '{palette.slate.950}',
-  'color.status.fg.warning.subtle': '{palette.amber.800}',
+  'color.status.success': '{palette.green.600}',
+  'color.status.success.bg': '{palette.green.600}',
+  'color.status.success.bg.subtle': '{palette.green.600}/20',
+  'color.status.success.border': '{palette.green.300}',
+  'color.status.success.border.subtle': '{palette.green.200}',
+  'color.status.success.fg': '{palette.white}',
+  'color.status.success.fg.subtle': '{palette.green.800}',
 
-  'color.status.bg.danger': '{palette.red.600}',
-  'color.status.bg.danger.subtle': '{palette.red.100}',
-  'color.status.border.danger': '{palette.red.300}',
-  'color.status.border.danger.subtle': '{palette.red.200}',
-  'color.status.fg.danger': '{palette.white}',
-  'color.status.fg.danger.subtle': '{palette.red.800}',
+  'color.status.warning': '{palette.yellow.500}',
+  'color.status.warning.bg': '{palette.yellow.500}',
+  'color.status.warning.bg.subtle': '{palette.yellow.500}/20',
+  'color.status.warning.border': '{palette.yellow.300}',
+  'color.status.warning.border.subtle': '{palette.yellow.200}',
+  'color.status.warning.fg': '{palette.slate.950}',
+  'color.status.warning.fg.subtle': '{palette.yellow.800}',
 
-  'color.status.bg.info': '{palette.sky.600}',
-  'color.status.bg.info.subtle': '{palette.sky.100}',
-  'color.status.border.info': '{palette.sky.300}',
-  'color.status.border.info.subtle': '{palette.sky.200}',
-  'color.status.fg.info': '{palette.white}',
-  'color.status.fg.info.subtle': '{palette.sky.800}',
+  'color.status.danger': '{palette.red.400}',
+  'color.status.danger.bg': '{palette.red.400}',
+  'color.status.danger.bg.subtle': '{palette.red.500}/20',
+  'color.status.danger.border': '{palette.red.500}',
+  'color.status.danger.border.subtle': '{palette.red.200}',
+  'color.status.danger.fg': '{palette.white}',
+  'color.status.danger.fg.subtle': '{palette.red.800}',
 
-  // ── elevation: platform-aware shadow + Android elevation ──────────────────
-  'elevation.none.shadowColor': '#000000',
-  'elevation.none.shadowOpacity': 0,
-  'elevation.none.shadowRadius': 0,
-  'elevation.none.shadowOffset.width': 0,
-  'elevation.none.shadowOffset.height': 0,
-  'elevation.none.elevation': 0,
-  'elevation.sm.shadowColor': '#000000',
-  'elevation.sm.shadowOpacity': 0.1,
-  'elevation.sm.shadowRadius': 3,
-  'elevation.sm.shadowOffset.width': 0,
-  'elevation.sm.shadowOffset.height': 1,
-  'elevation.sm.elevation': 1,
-  'elevation.md.shadowColor': '#000000',
-  'elevation.md.shadowOpacity': 0.12,
-  'elevation.md.shadowRadius': 8,
-  'elevation.md.shadowOffset.width': 0,
-  'elevation.md.shadowOffset.height': 2,
-  'elevation.md.elevation': 3,
-  'elevation.lg.shadowColor': '#000000',
-  'elevation.lg.shadowOpacity': 0.12,
-  'elevation.lg.shadowRadius': 12,
-  'elevation.lg.shadowOffset.width': 0,
-  'elevation.lg.shadowOffset.height': 4,
-  'elevation.lg.elevation': 6,
-  'elevation.xl.shadowColor': '#000000',
-  'elevation.xl.shadowOpacity': 0.16,
-  'elevation.xl.shadowRadius': 24,
-  'elevation.xl.shadowOffset.width': 0,
-  'elevation.xl.shadowOffset.height': 8,
-  'elevation.xl.elevation': 12,
+  'color.status.info': '{palette.sky.600}',
+  'color.status.info.bg': '{palette.sky.600}',
+  'color.status.info.bg.subtle': '{palette.sky.100}',
+  'color.status.info.border': '{palette.sky.300}',
+  'color.status.info.border.subtle': '{palette.sky.200}',
+  'color.status.info.fg': '{palette.white}',
+  'color.status.info.fg.subtle': '{palette.sky.800}',
 };