react-native-terra-ui 0.5.0 → 0.6.0

package/src/theme/registry.ts

@@ -1,17 +1,11 @@
-import { StyleSheet, UnistylesRuntime } from 'react-native-unistyles';
-
-import { normalizeAccent } from '#utils/accent-utils';
-import { deepMerge } from '#utils/deep-merge';
-
-import { breakpoints } from './breakpoints';
-import { defaultIcons } from './defaults/icons';
-import { defaultImage } from './defaults/image';
-import {
-  buildRadiusScale,
-  buildSpacingScale,
-  defaultDarkTheme,
-  defaultLightTheme,
-} from './theme';
+import { StyleSheet, UnistylesRuntime } from "react-native-unistyles";
+
+import { normalizeAccent } from "#utils/accent-utils";
+import { deepMerge } from "#utils/deep-merge";
+import { breakpoints } from "./breakpoints";
+import { defaultIcons } from "./defaults/icons";
+import { defaultImage } from "./defaults/image";
+import { buildRadiusScale, buildSpacingScale, defaultDarkTheme, defaultLightTheme } from "./theme";
 import type {
   ComponentDefaults,
   DefaultRadiusToken,
@@ -25,27 +19,25 @@ import type {
   TerraSemanticIconName,
   TerraTheme,
   TerraThemeOverride,
-} from './types';
+} from "./types";
 
 // ─── Radius / elevation defaults ─────────────────────────────────────────────
 
 /** Fallback when a component's radius is not configured. */
-const DEFAULT_RADIUS: DefaultRadiusToken = 'md';
+const DEFAULT_RADIUS: DefaultRadiusToken = "md";
 /** Fallback when the surface elevation is not configured. */
-const DEFAULT_ELEVATION: ElevationKey = 'none';
+const DEFAULT_ELEVATION: ElevationKey = "none";
 
 type ResolvedRadius = Record<RadiusComponent, DefaultRadiusToken>;
 
 /** Resolves each component's default radius from the `components` config. */
-const resolveDefaultRadius = (
-  components?: ComponentDefaults
-): ResolvedRadius => ({
+const resolveDefaultRadius = (components?: ComponentDefaults): ResolvedRadius => ({
   button: components?.button?.radius ?? DEFAULT_RADIUS,
   surface: components?.surface?.radius ?? DEFAULT_RADIUS,
 });
 
 // ─── Unistyles module augmentation ────────────────────────────────────────────
-declare module 'react-native-unistyles' {
+declare module "react-native-unistyles" {
   export interface UnistylesThemes {
     light: TerraTheme;
     dark: TerraTheme;
@@ -83,42 +75,35 @@ export const getIsConfigured = (): boolean => registry.configured;
 
 export const getAccentNames = (): string[] => Object.keys(registry.accents);
 
-export const getImageComponent = (): TerraImageComponent =>
-  registry.imageComponent;
+export const getImageComponent = (): TerraImageComponent => registry.imageComponent;
 
 export const getIcon = (name: string): TerraIconComponent | undefined =>
   registry.icons[name] ?? defaultIcons[name as TerraSemanticIconName];
 
-export const getRequiredIcon = (
-  name: TerraSemanticIconName
-): TerraIconComponent => registry.icons[name] ?? defaultIcons[name];
+export const getRequiredIcon = (name: TerraSemanticIconName): TerraIconComponent =>
+  registry.icons[name] ?? defaultIcons[name];
 
 /**
  * The configured default corner radius for a component (Button, Surface).
  * Set via {@link configureTerraUI}; defaults to `'md'`.
  */
-export const getDefaultRadius = (
-  component: RadiusComponent
-): DefaultRadiusToken => registry.defaultRadius[component];
+export const getDefaultRadius = (component: RadiusComponent): DefaultRadiusToken =>
+  registry.defaultRadius[component];
 
 /**
  * The configured default drop-shadow depth for Surface (`'none'` = no shadow).
  * Set via {@link configureTerraUI}; defaults to `'none'`.
  */
-export const getSurfaceElevation = (): ElevationKey =>
-  registry.surfaceElevation;
+export const getSurfaceElevation = (): ElevationKey => registry.surfaceElevation;
 
 /** Resolves a scheme's theme = base ⊕ the named accent's partial override. */
 export function resolveTheme(scheme: Scheme, accentName?: string): TerraTheme {
-  const base = scheme === 'light' ? registry.baseLight : registry.baseDark;
+  const base = scheme === "light" ? registry.baseLight : registry.baseDark;
   const accent = accentName ? registry.accents[accentName] : undefined;
   return deepMerge(base, accent ? accent[scheme] : undefined);
 }
 
-const mergeThemeOverride = (
-  theme: TerraTheme,
-  override?: TerraThemeOverride
-): TerraTheme => {
+const mergeThemeOverride = (theme: TerraTheme, override?: TerraThemeOverride): TerraTheme => {
   if (!override) return theme;
 
   const { radius, spacing, ...rest } = override;
@@ -166,7 +151,7 @@ export function configureTerraUI(config: TerraConfig = {}): void {
   if (registry.configured && !configuredByFallback) {
     if (__DEV__ && Object.keys(config).length > 0) {
       console.warn(
-        '[react-native-terra-ui] configureTerraUI() was called more than once; the later call was ignored.'
+        "[react-native-terra-ui] configureTerraUI() was called more than once; the later call was ignored."
       );
     }
     return;
@@ -210,8 +195,7 @@ function applyConfig(config: TerraConfig): void {
   );
 
   registry.defaultRadius = resolveDefaultRadius(config.components);
-  registry.surfaceElevation =
-    config.components?.surface?.elevation ?? DEFAULT_ELEVATION;
+  registry.surfaceElevation = config.components?.surface?.elevation ?? DEFAULT_ELEVATION;
   registry.icons = config.icons ?? {};
   registry.imageComponent = config.image ?? defaultImage;
 
@@ -220,14 +204,11 @@ function applyConfig(config: TerraConfig): void {
     registry.accents[name] = normalizeAccent(accent);
   }
   const { defaultAccent } = config;
-  registry.currentAccent =
-    defaultAccent && registry.accents[defaultAccent]
-      ? defaultAccent
-      : undefined;
+  registry.currentAccent = defaultAccent && registry.accents[defaultAccent] ? defaultAccent : undefined;
 
   const themes = {
-    light: resolveTheme('light', registry.currentAccent),
-    dark: resolveTheme('dark', registry.currentAccent),
+    light: resolveTheme("light", registry.currentAccent),
+    dark: resolveTheme("dark", registry.currentAccent),
   };
 
   const adaptive = config.adaptiveThemes ?? true;
@@ -235,17 +216,17 @@ function applyConfig(config: TerraConfig): void {
     ? { initialTheme: config.initialScheme }
     : adaptive
       ? { adaptiveThemes: true as const }
-      : { initialTheme: 'light' as const };
+      : { initialTheme: "light" as const };
 
   if (unistylesConfigured) {
     // `StyleSheet.configure` is a one-time startup call — calling it again
     // leaves the themes it already registered in place, which would strand an
     // app's config behind the fallback's defaults. Hand the rebuilt themes to
     // the runtime instead, the same way `applyAccent` swaps a palette.
-    UnistylesRuntime.updateTheme('light', () => themes.light);
-    UnistylesRuntime.updateTheme('dark', () => themes.dark);
+    UnistylesRuntime.updateTheme("light", () => themes.light);
+    UnistylesRuntime.updateTheme("dark", () => themes.dark);
 
-    if ('adaptiveThemes' in settings) {
+    if ("adaptiveThemes" in settings) {
       UnistylesRuntime.setAdaptiveThemes(true);
     } else {
       UnistylesRuntime.setAdaptiveThemes(false);

package/src/theme/runtime.ts

@@ -1,7 +1,7 @@
-import { UnistylesRuntime } from 'react-native-unistyles';
+import { UnistylesRuntime } from "react-native-unistyles";
 
-import { getRegistry, resolveTheme } from './registry';
-import type { Scheme } from './types';
+import { getRegistry, resolveTheme } from "./registry";
+import type { Scheme } from "./types";
 
 /** Apply a named accent at runtime by updating both registered themes. */
 export function applyAccent(name: string): void {
@@ -13,12 +13,11 @@ export function applyAccent(name: string): void {
     return;
   }
   registry.currentAccent = name;
-  UnistylesRuntime.updateTheme('light', () => resolveTheme('light', name));
-  UnistylesRuntime.updateTheme('dark', () => resolveTheme('dark', name));
+  UnistylesRuntime.updateTheme("light", () => resolveTheme("light", name));
+  UnistylesRuntime.updateTheme("dark", () => resolveTheme("dark", name));
 }
 
-export const getCurrentAccent = (): string | undefined =>
-  getRegistry().currentAccent;
+export const getCurrentAccent = (): string | undefined => getRegistry().currentAccent;
 
 /** Switch the active color scheme, disabling adaptive (system) theming. */
 export function applyScheme(scheme: Scheme): void {

package/src/theme/screen-margin.ts

@@ -1,7 +1,7 @@
-import type { UnistylesBreakpoints } from 'react-native-unistyles';
+import type { UnistylesBreakpoints } from "react-native-unistyles";
 
-import { resolveBreakpointValue } from './breakpoints';
-import type { TerraTheme } from './types';
+import { resolveBreakpointValue } from "./breakpoints";
+import type { TerraTheme } from "./types";
 
 export interface ResolvedScreenMargin {
   x: number;

package/src/theme/theme.ts

@@ -1,8 +1,7 @@
-import { unflatten } from '#utils/unflatten';
-
-import { dark } from './tokens/dark';
-import { light } from './tokens/light';
-import { primitives } from './tokens/primitives';
+import { unflatten } from "#utils/unflatten";
+import { dark } from "./tokens/dark";
+import { light } from "./tokens/light";
+import { primitives } from "./tokens/primitives";
 import type {
   ElevationKey,
   ElevationScale,
@@ -14,7 +13,7 @@ import type {
   TerraTheme,
   ThemeColor,
   Typography,
-} from './types';
+} from "./types";
 
 // Matches `{palette.key}/NN` — a palette reference with a trailing NN%
 // opacity suffix (0-100), e.g. `{palette.amber.500}/15`.
@@ -27,7 +26,7 @@ const HEX6_PATTERN = /^#[0-9a-f]{6}$/i;
  */
 function percentToHexAlpha(percent: number): string {
   const byte = Math.round((percent / 100) * 255);
-  return byte.toString(16).padStart(2, '0');
+  return byte.toString(16).padStart(2, "0");
 }
 
 /**
@@ -44,7 +43,7 @@ function resolveRefs(
 ): Record<string, unknown> {
   const out: Record<string, unknown> = {};
   for (const [k, v] of Object.entries(flat)) {
-    if (typeof v !== 'string') {
+    if (typeof v !== "string") {
       out[k] = v;
       continue;
     }
@@ -58,14 +57,11 @@ function resolveRefs(
       const base = source[refKey];
       const percent = Number(percentStr);
       out[k] =
-        typeof base === 'string' && HEX6_PATTERN.test(base)
-          ? `${base}${percentToHexAlpha(percent)}`
-          : v;
+        typeof base === "string" && HEX6_PATTERN.test(base) ? `${base}${percentToHexAlpha(percent)}` : v;
       continue;
     }
 
-    out[k] =
-      v.startsWith('{') && v.endsWith('}') ? (source[v.slice(1, -1)] ?? v) : v;
+    out[k] = v.startsWith("{") && v.endsWith("}") ? (source[v.slice(1, -1)] ?? v) : v;
   }
   return out;
 }
@@ -79,14 +75,12 @@ function resolveRefs(
  *   { 'color.surface.default': '#fff', 'color.action.bg.primary': '#009966' }
  *   → { color: { 'surface.default': '#fff', 'action.bg.primary': '#009966' } }
  */
-function flattenByCategory(
-  tokens: Record<string, unknown>
-): Record<string, Record<string, unknown>> {
+function flattenByCategory(tokens: Record<string, unknown>): Record<string, Record<string, unknown>> {
   const out: Record<string, Record<string, unknown>> = {};
   for (const [key, value] of Object.entries(tokens)) {
-    const sep = key.indexOf('.');
+    const sep = key.indexOf(".");
     const cat = sep === -1 ? key : key.slice(0, sep);
-    const rest = sep === -1 ? '' : key.slice(sep + 1);
+    const rest = sep === -1 ? "" : key.slice(sep + 1);
     if (out[cat] === undefined) {
       out[cat] = {};
     }
@@ -111,7 +105,7 @@ const prim = unflatten<{
   typography: Typography;
   opacity: OpacityTokens;
   layout: LayoutTokens;
-  elevation: Record<ElevationKey, Omit<ElevationStyle, 'shadowColor'>>;
+  elevation: Record<ElevationKey, Omit<ElevationStyle, "shadowColor">>;
 }>(primitives);
 
 /**
@@ -129,23 +123,23 @@ export const DEFAULT_RADIUS_BASE = prim.radius.base;
  * 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',
+  "0",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "12",
+  "14",
+  "16",
+  "20",
+  "24",
+  "32",
 ];
 
 /**
@@ -162,9 +156,7 @@ export const DEFAULT_SPACING_BASE = prim.spacing.base;
  * 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> {
+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;
@@ -178,30 +170,23 @@ const defaultSpacing = buildSpacingScale();
  * Per-token multipliers applied to the base radius (DaisyUI-style). `none` (0)
  * and `full` (9999) are fixed and not scaled.
  */
-export const RADIUS_MULTIPLIERS: Record<
-  Exclude<RadiusKey, 'none' | 'full'>,
-  number
-> = {
+export const RADIUS_MULTIPLIERS: Record<Exclude<RadiusKey, "none" | "full">, number> = {
   xs: 0.25,
   sm: 0.5,
   md: 0.75,
   lg: 1,
   xl: 1.5,
-  '2xl': 2,
-  '3xl': 3,
+  "2xl": 2,
+  "3xl": 3,
 };
 
 /**
  * Builds the full radius scale from a single base value. Derived steps keep
  * their exact (possibly fractional) dp; `none`/`full` are constant.
  */
-export function buildRadiusScale(
-  base: number = DEFAULT_RADIUS_BASE
-): Record<RadiusKey, number> {
+export function buildRadiusScale(base: number = DEFAULT_RADIUS_BASE): Record<RadiusKey, number> {
   const scale = { none: 0, full: 9999 } as Record<RadiusKey, number>;
-  for (const key of Object.keys(
-    RADIUS_MULTIPLIERS
-  ) as (keyof typeof RADIUS_MULTIPLIERS)[]) {
+  for (const key of Object.keys(RADIUS_MULTIPLIERS) as (keyof typeof RADIUS_MULTIPLIERS)[]) {
     scale[key] = base * RADIUS_MULTIPLIERS[key];
   }
   return scale;
@@ -218,7 +203,7 @@ const darkByCategory = flattenByCategory(resolveRefs(dark, primitives));
  * `dark.ts`.
  */
 function withShadowColor(
-  elevation: Record<ElevationKey, Omit<ElevationStyle, 'shadowColor'>>,
+  elevation: Record<ElevationKey, Omit<ElevationStyle, "shadowColor">>,
   shadowColor: string
 ): ElevationScale {
   const out = {} as ElevationScale;
@@ -232,17 +217,11 @@ function withShadowColor(
 // elevation: shared shape from primitives, shadowColor layered on per scheme
 const lightTokens = {
   color: lightByCategory.color as unknown as ThemeColor,
-  elevation: withShadowColor(
-    prim.elevation,
-    (lightByCategory.color as unknown as ThemeColor).shadow
-  ),
+  elevation: withShadowColor(prim.elevation, (lightByCategory.color as unknown as ThemeColor).shadow),
 };
 const darkTokens = {
   color: darkByCategory.color as unknown as ThemeColor,
-  elevation: withShadowColor(
-    prim.elevation,
-    (darkByCategory.color as unknown as ThemeColor).shadow
-  ),
+  elevation: withShadowColor(prim.elevation, (darkByCategory.color as unknown as ThemeColor).shadow),
 };
 
 export const defaultLightTheme: TerraTheme = {

package/src/theme/tokens/dark.ts

@@ -7,102 +7,102 @@
  */
 export const dark = {
   // ── color: page background ────────────────────────────────────────────────
-  'color.background': '#050505',
+  "color.background": "#050505",
 
   // ── color: shadow (used as elevation.*.shadowColor) ───────────────────────
-  'color.shadow': '#FFFFFF',
+  "color.shadow": "#FFFFFF",
 
   // ── color: surfaces  (bg implied — no property segment) ──────────────────
-  'color.surface.default': '#17191A',
-  'color.surface.raised': '{palette.neutral.800}',
-  'color.surface.sunken': '#050506',
-  'color.surface.overlay': 'rgba(0, 0, 0, 0.72)',
-  'color.surface.accent': '{palette.emerald.500}',
-  'color.surface.accent.subtle': '{palette.emerald.950}',
+  "color.surface.default": "#17191A",
+  "color.surface.raised": "{palette.neutral.800}",
+  "color.surface.sunken": "#050506",
+  "color.surface.overlay": "rgba(0, 0, 0, 0.72)",
+  "color.surface.accent": "{palette.emerald.500}",
+  "color.surface.accent.subtle": "{palette.emerald.950}",
 
   // ── color: text / icons  (fg implied — no property segment) ──────────────
-  'color.text.default': '{palette.neutral.50}',
+  "color.text.default": "{palette.neutral.50}",
   // 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}',
-  'color.text.on-accent': '{palette.neutral.950}',
-  'color.text.on-accent-subtle': '{palette.emerald.300}',
+  "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}",
+  "color.text.on-accent": "{palette.neutral.950}",
+  "color.text.on-accent-subtle": "{palette.emerald.300}",
 
   // ── color: borders  (border-color implied — no property segment) ──────────
-  'color.border.subtle': '{palette.neutral.800}',
-  'color.border.default': '{palette.neutral.700}',
-  'color.border.strong': '{palette.neutral.600}',
-  'color.border.focus': '{palette.blue.400}',
-  'color.border.accent': '{palette.emerald.500}',
+  "color.border.subtle": "{palette.neutral.800}",
+  "color.border.default": "{palette.neutral.700}",
+  "color.border.strong": "{palette.neutral.600}",
+  "color.border.focus": "{palette.blue.400}",
+  "color.border.accent": "{palette.emerald.500}",
 
   // ── color: interactive actions  (bg + fg → property required) ────────────
-  'color.action.bg.primary': '{palette.emerald.500}',
-  'color.action.bg.primary.hover': '{palette.emerald.400}',
-  'color.action.bg.primary.active': '{palette.emerald.300}',
-  'color.action.bg.primary.disabled': '{palette.slate.700}',
-  'color.action.fg.primary': '{palette.slate.950}',
+  "color.action.bg.primary": "{palette.emerald.500}",
+  "color.action.bg.primary.hover": "{palette.emerald.400}",
+  "color.action.bg.primary.active": "{palette.emerald.300}",
+  "color.action.bg.primary.disabled": "{palette.slate.700}",
+  "color.action.fg.primary": "{palette.slate.950}",
 
-  '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.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}",
 
   // `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}',
+  "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.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.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.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.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.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.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}',
+  "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}",
 
-  '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}',
+  "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}",
 };