@synap-core/design-tokens
v0.1.0
Published
Synap design tokens (colors, space, radius, typography, zIndex) generated from @synap-core/ui-system. Exports JSON, CSS custom properties, and typed TS for non-Tamagui consumers.
Readme
@synap-core/design-tokens
Synap design tokens (colors, space, radius, typography, zIndex) in three formats — JSON, CSS custom properties, and typed TypeScript — generated from @synap-core/ui-system (the Tamagui config). Single source of truth, no manual sync.
Use this package when you need Synap's palette in a consumer that does not use Tamagui: synap-landing (Next.js + CSS/Tailwind), synap-control-plane-dashboard (Vite/React), docs sites, and future tooling.
Install
pnpm add @synap-core/design-tokensThree import styles
1. CSS custom properties (landing, dashboard, plain CSS)
@import "@synap-core/design-tokens/css";
.hero {
background: var(--synap-color-background);
color: var(--synap-color-color);
padding: var(--synap-space-8);
border-radius: var(--synap-radius-3);
font-family: var(--synap-font-heading);
}Theme switching: the CSS file defines light-mode vars on :root and dark-mode overrides on [data-theme="dark"]. Set data-theme="dark" on <html> to flip.
2. JSON (build tools, Tailwind config, design tools)
import tokens from "@synap-core/design-tokens/json";
// tailwind.config.js
module.exports = {
theme: {
colors: {
primary: tokens.color.light.primary,
background: tokens.color.light.background,
ai: tokens.color.ai.base,
},
spacing: tokens.space,
borderRadius: tokens.radius,
},
};3. Typed TypeScript (any TS/JS consumer)
import {
lightColors,
darkColors,
space,
radius,
aiColors,
fontFamily,
} from "@synap-core/design-tokens";
import type {
SynapSpaceToken,
SynapRadiusToken,
} from "@synap-core/design-tokens";
const padding: SynapSpaceToken = "4";
const buttonBg = lightColors.primary;
const aiGlow = aiColors.base;Token categories
| Category | Source (ui-system) | Example tokens |
| --------------- | --------------------------------- | ---------------------------------------------- |
| color.light | themes.ts extra.light | primary, background, borderColor, ... |
| color.dark | themes.ts extra.dark | primary, background, borderColor, ... |
| color.ai | derived (emerald, constant) | base, light, hover, gradient* |
| color.palette | tamagui.config.ts synapColors | amber400, cyan400, emerald500, ... |
| space | tamagui.config.ts space | 1 (6px) → 24 (144px) |
| size | tamagui.config.ts size | 1 (4px) → 20 (80px) |
| radius | tamagui.config.ts radius | 1 (6px), 2 (8px), 3 (12px), round |
| zIndex | tamagui.config.ts zIndex | 0 → 100 |
| font.family | tamagui.config.ts createFont | heading (Fraunces), body (DM Sans), mono |
| font.size | tamagui.config.ts createFont | body + heading maps (13 → 72) |
Naming convention (CSS)
--synap-<category>-<token> (kebab-cased when needed):
--synap-color-primary--synap-color-background-hover--synap-color-ai-base--synap-space-4--synap-radius-round--synap-font-body--synap-z-100
Updating tokens
Tokens are generated at build time from @synap-core/ui-system source files (src/tamagui.config.ts + src/themes.ts). To change a token:
- Edit the value in
@synap-core/ui-system. - Re-run
pnpm --filter @synap-core/design-tokens build. - The build script regenerates
src/generated/tokens.ts,dist/tokens.json,dist/tokens.css.
Do not hand-edit files under src/generated/ or dist/ — they will be overwritten.
Build output
dist/
├── tokens.json # full token tree (sorted, deterministic)
├── tokens.css # CSS custom properties (:root + [data-theme="dark"])
└── tokens.ts # typed TS re-export (copy of src/generated/tokens.ts)dist/ is gitignored across the monorepo. Run pnpm --filter @synap-core/design-tokens build after install (or add it to your CI before publish). src/generated/tokens.ts is committed so workspace TypeScript consumers work without a build step.
Related packages
@synap-core/ui-system— the single source of truth. Tamagui consumers should import from here directly.@synap-core/icons— icon set matched to this design system.