@jablonowski/tokens

Design tokens for the design system — colors, typography, spacing, borders, elevation and breakpoints.

Built with Style Dictionary.

Installation

npm install @jablonowski/tokens

Usage

CSS Custom Properties

@import '@jablonowski/tokens/dist/css/variables.css';

.my-element {
  background-color: var(--color-primary-500);
  font-family: var(--font-family-base);
  padding: var(--spacing-md);
}

SCSS Variables

@import '@jablonowski/tokens/dist/scss/variables';

.my-element {
  background-color: $color-primary-500;
  font-family: $font-family-base;
  padding: $spacing-md;
}

JavaScript / TypeScript

import { ColorPrimary500, SpacingMd } from '@jablonowski/tokens';

Available Token Categories

| Category | Description | | -------------- | -------------------------------------------- | | Color | Primary, secondary, neutral, semantic colors | | Typography | Font families, sizes, weights, line heights | | Spacing | Consistent spacing scale | | Border | Border widths, radii | | Elevation | Box shadow levels | | Breakpoint | Responsive breakpoints |

Development

# Build tokens
npm run build

# Publish patch version
npm run release

# Publish minor version
npm run release:minor

# Publish major version
npm run release:major