Built a CLI to stop manually duplicating design tokens between React and Flutter — also verifies they actually match
If you ship React + Flutter, you probably have the same design tokens defined twice. Once as CSS custom properties, once as Dart constants. And no way to know they match until a designer screenshots both apps side by side.
I got burned by this enough times that I built something. You define tokens once in a standard JSON file, run one command, and get:
- tokens.css — CSS custom properties with :root light and [data-theme="dark"] dark blocks
- app_theme.dart — full Flutter ThemeData, ColorScheme, TextTheme
- tokens.ts — typed TypeScript constants
Then it runs a parity check that numerically compares every token between the CSS and Dart outputs. Catches the #5C6BC0 vs #5B6BC0 type of drift before it ships. Can block CI on a mismatch.
npx tokensync init
npx tokensync build
npx tokensync check --ci # exits 1 if CSS and Dart diverge
Mainly curious — how do people here handle token sync between web and mobile? Separate files maintained by hand? Some other tool? Is this even a problem at your company or do you just accept the drift?