@byteion/tokens

Raw design token primitives — the single source of truth for every visual decision in the Byteion design system. Pure JavaScript objects, zero dependencies, zero build step required to consume.

Every other Byteion package (@byteion/core, @byteion/js, @byteion/react, @byteion/vue) reads from this package. Change a value here and it propagates through the Tailwind preset, the CSS variables, and every framework wrapper.

Install

npm install @byteion/tokens

You usually don't install this directly — it comes as a dependency of @byteion/core. Install it explicitly only when you want to read tokens from your own build script, generate a custom Tailwind preset, or emit tokens to another platform (Figma, iOS, Android).

What's inside

| Module | Exports | | --- | --- | | colors | Primitive scales (primary.50–950, secondary, success, warning, danger, info, neutral) + semantic aliases. | | spacing | Numeric scale plus semantic axes (inset, stack, surface). | | radius | none, sm, md, lg, xl, 2xl, full. | | shadows | Elevation ramp + component-specific shadows (button, button-hover, popover). | | typography | fontFamily, fontSize, fontWeight, letterSpacing, lineHeight. | | motion | duration, easing, keyframes, animation. | | z-index | Named layers (dropdown, modal, popover, toast, ...). | | border | width, ring.width, ring.offset. | | breakpoints | Responsive screens (sm, md, lg, xl, 2xl). |

Usage

Read everything

const tokens = require('@byteion/tokens');

console.log(tokens.colors.primary[600]); // '#2563eb'
console.log(tokens.spacing.inset.md);    // '1rem'

Read a single module

const colors = require('@byteion/tokens/colors');
const radius = require('@byteion/tokens/radius');

From an ES module

import tokens from '@byteion/tokens';
import colors from '@byteion/tokens/colors';

Since package.json declares "type": "commonjs", ES module consumers go through Node's interop — both styles work in any modern bundler (Vite, webpack, esbuild, Rollup) and in Node ≥18.

Generating CSS variables

The companion script build.mjs emits all primitive scales into packages/core/theme/generated/tokens.css as HSL triplets. The Tailwind preset wires those triplets into utilities so brand themes can override --palette-primary-600 and have bg-primary-600 re-skin everywhere without re-bundling.

npm run build --workspace @byteion/tokens

You don't need to run this as a consumer — the generated file ships inside @byteion/core already.

Versioning

Follows Semantic Versioning. Any change to a token value that materially alters the visual output is treated as a minor bump (additive theme change). Removing a token or renaming an export is a major bump.

License

MIT © Byteion