JSDoc

Convert a DTCG pixel dimension (`"16px"`) to a number for React Native styles. Throws on anything that is not `<number>px` — a wrong unit in a token is a contract violation, not a runtime condition to paper over.

px(dimension: string): number

Render a multi-layer DTCG shadow token as a CSS `box-shadow` string. React Native >= 0.76 (new architecture) and react-native-web both accept this via the `boxShadow` style prop — one code path on every platform.

shadowToBoxShadow(shadow: { $value: ReadonlyArray<{ color: string; offsetX: string; offsetY: string; blur: string; spread: string; }>; }): string

Token group key unions — derive from the schema, never re-declare.

type BrandColorKey = "base" | "hover" | "deep" | "soft" | "on"

type NeutralColorKey = "0" | "hover" | "sidebar" | "subtle" | "border" | "borderStrong" | "text" | "text2" | "text3" | "scrim"

type SemanticColorKey = "success" | "warning" | "danger" | "info"

type PriorityKey = "p1" | "p2" | "p3" | "p4"

type CategoricalColorKey = "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "violet" | "magenta" | "grey"

type SpaceKey = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10"

type RadiusKey = "xs" | "sm" | "md" | "lg" | "full"

type FontSizeKey = "display" | "h1" | "h2" | "body" | "bodySm" | "meta" | "caption"

type FontWeightKey = "regular" | "medium" | "semibold" | "bold"

type ShadowKey = "menu" | "modal" | "window"

const tokens: { $description?: string; color?: { brand?: { base?: { $type?: "color"; $value?: string; }; hover?: { $type?: "color"; $value?: string; }; deep?: { $type?: "color"; $value?: string; }; soft?: { $type?: "color"; $value?: string; }; on?: { $type?: "color"; $value?: string; }; }; neutral?: { "0"?: { $type?: "color"; $value?: string; }; hover?: { $type?: "color"; $value?: string; }; sidebar?: { $type?: "color"; $value?: string; }; subtle?: { $type?: "color"; $value?: string; }; border?: { $type?: "color"; $value?: string; }; borderStrong?: { $type?: "color"; $value?: string; }; text?: { $type?: "color"; $value?: string; }; text2?: { $type?: "color"; $value?: string; }; text3?: { $type?: "color"; $value?: string; }; scrim?: { $type?: "color"; $value?: string; }; }; semantic?: { success?: { $type?: "color"; $value?: string; }; warning?: { $type?: "color"; $value?: string; }; danger?: { $type?: "color"; $value?: string; }; info?: { $type?: "color"; $value?: string; }; }; semanticSoft?: { success?: { $type?: "color"; $value?: string; }; warning?: { $type?: "color"; $value?: string; }; danger?: { $type?: "color"; $value?: string; }; info?: { $type?: "color"; $value?: string; }; }; priority?: { p1?: { $type?: "color"; $value?: string; }; p2?: { $type?: "color"; $value?: string; }; p3?: { $type?: "color"; $value?: string; }; p4?: { $type?: "color"; $value?: string; }; }; categorical?: { red?: { $type?: "color"; $value?: string; }; orange?: { $type?: "color"; $value?: string; }; yellow?: { $type?: "color"; $value?: string; }; lime?: { $type?: "color"; $value?: string; }; green?: { $type?: "color"; $value?: string; }; teal?: { $type?: "color"; $value?: string; }; blue?: { $type?: "color"; $value?: string; }; violet?: { $type?: "color"; $value?: string; }; magenta?: { $type?: "color"; $value?: string; }; grey?: { $type?: "color"; $value?: string; }; }; }; space?: { "0"?: { $type?: "dimension"; $value?: string; }; "1"?: { $type?: "dimension"; $value?: string; }; "2"?: { $type?: "dimension"; $value?: string; }; "3"?: { $type?: "dimension"; $value?: string; }; "4"?: { $type?: "dimension"; $value?: string; }; "5"?: { $type?: "dimension"; $value?: string; }; "6"?: { $type?: "dimension"; $value?: string; }; "8"?: { $type?: "dimension"; $value?: string; }; "10"?: { $type?: "dimension"; $value?: string; }; }; radius?: { xs?: { $type?: "dimension"; $value?: string; }; sm?: { $type?: "dimension"; $value?: string; }; md?: { $type?: "dimension"; $value?: string; }; lg?: { $type?: "dimension"; $value?: string; }; full?: { $type?: "dimension"; $value?: string; }; }; font?: { family?: { sans?: { $type?: "fontFamily"; $value?: string[]; }; mono?: { $type?: "fontFamily"; $value?: string[]; }; }; size?: { display?: { $type?: "dimension"; $value?: string; }; h1?: { $type?: "dimension"; $value?: string; }; h2?: { $type?: "dimension"; $value?: string; }; body?: { $type?: "dimension"; $value?: string; }; bodySm?: { $type?: "dimension"; $value?: string; }; meta?: { $type?: "dimension"; $value?: string; }; caption?: { $type?: "dimension"; $value?: string; }; }; lineHeight?: { display?: { $type?: "dimension"; $value?: string; }; h1?: { $type?: "dimension"; $value?: string; }; h2?: { $type?: "dimension"; $value?: string; }; body?: { $type?: "dimension"; $value?: string; }; bodySm?: { $type?: "dimension"; $value?: string; }; meta?: { $type?: "dimension"; $value?: string; }; caption?: { $type?: "dimension"; $value?: string; }; }; weight?: { regular?: { $type?: "fontWeight"; $value?: 400 | 500 | 600 | 700; }; medium?: { $type?: "fontWeight"; $value?: 400 | 500 | 600 | 700; }; semibold?: { $type?: "fontWeight"; $value?: 400 | 500 | 600 | 700; }; bold?: { $type?: "fontWeight"; $value?: 400 | 500 | 600 | 700; }; }; }; shadow?: { menu?: { $type?: "shadow"; $value?: { color?: string; offsetX?: string; offsetY?: string; blur?: string; spread?: string; }[]; }; modal?: { $type?: "shadow"; $value?: { color?: string; offsetX?: string; offsetY?: string; blur?: string; spread?: string; }[]; }; window?: { $type?: "shadow"; $value?: { color?: string; offsetX?: string; offsetY?: string; blur?: string; spread?: string; }[]; }; }; }