@takuhii/bricks-tokens

Design tokens for the Bricks component library — compiled from JSON source into SCSS, CSS custom properties, and TypeScript constants via Style Dictionary v5.

Installation

pnpm add @takuhii/bricks-tokens

Usage

SCSS

@use '@takuhii/bricks-tokens/scss' as *;

.my-component {
  color: $token-color-primary;
  padding: $token-space-4;
  border-radius: $token-radius-md;
}

CSS Custom Properties

@import '@takuhii/bricks-tokens/css';

.my-component {
  color: var(--token-color-primary);
  padding: var(--token-space-4);
}

TypeScript

import { TOKEN_COLOR_PRIMARY, TOKEN_SPACE_4 } from '@takuhii/bricks-tokens';

What's Included

• Colors — primary, semantic (success/warning/error), neutrals, grays
• Spacing — 0–8 scale
• Border Radius — none through full
• Shadows — sm through modal
• Typography — font families, weights, sizes, line heights
• Transitions — fast, base, slow
• Z-Index — overlay, dropdown, modal, tooltip, sticky, fixed

Brand Theming

Tokens marked as brand-swappable emit CSS variable references with fallbacks:

$token-color-primary: var(--brand-primary, #004e9b);

Override the CSS custom properties to theme your application without rebuilding.

License

MIT