HaloStack Docs
Open App
Config

Design Tokens

The shared token utility package that keeps web and mobile UI palettes aligned.

@halostack/design-tokens owns two shared pieces: the cn class merge helper and the generator that derives mobile tokens from the web UI stylesheet.

Why it exists

Web can use CSS features such as color-mix() and --alpha(). React Native cannot evaluate those at runtime, so mobile needs concrete oklch(...) values. The generator reads packages/ui/src/styles/globals.css, resolves the mobile subset, and writes packages/ui-mobile/src/styles/globals.css.

Commands

Change web tokens first, run the generator, and commit both the source token change and the generated mobile output.