@arbor-ds/tokens

Design tokens for the Arbor Design System, available in multiple formats.

Installation

npm install @arbor-ds/tokens

Usage

CSS Variables

Import the CSS file to use tokens as CSS custom properties:

import '@arbor-ds/tokens/css';

Then use in your CSS:

.my-component {
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  padding: var(--spacing-4);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-md);
}

SCSS Variables

@import '@arbor-ds/tokens/scss';

.my-component {
  color: $color-text-primary;
  background-color: $color-bg-primary;
  padding: $spacing-4;
}

JavaScript/TypeScript

For programmatic access to tokens:

import tokens from '@arbor-ds/tokens';

const Button = () => (
  <button style={{ backgroundColor: tokens.colorBrandPrimary }}>
    Click me
  </button>
);

Raw JSON

Access raw token data:

import tokens from '@arbor-ds/tokens/json';

Token Categories

Colors

Primitives

• color.brand.* - Brand colors (50-900)
• color.gray.* - Gray scale (50-900)
• color.success.* - Success colors
• color.error.* - Error colors
• color.warning.* - Warning colors

Semantic

• color.text.* - Text colors (primary, secondary, etc.)
• color.bg.* - Background colors
• color.border.* - Border colors

Typography

• font.family.* - Font families (sans, mono)
• font.size.* - Font sizes (xs, sm, base, lg, xl, etc.)
• font.weight.* - Font weights (light, normal, medium, semibold, bold)
• font.lineHeight.* - Line heights (tight, normal, relaxed)

Spacing

• spacing.* - Spacing scale (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24)

Border Radius

• radius.* - Border radius values (none, sm, base, md, lg, xl, 2xl, full)

Shadows

• shadow.* - Box shadow values (none, sm, base, md, lg, xl, 2xl)

Customization

Providing Your Own Tokens

To replace the sample tokens with your own from Figma:

1. Export from Figma

   • Use a Figma plugin like "Design Tokens"
   • Or manually export your Figma variables

2. Place in Project

   • Save your tokens JSON in src/figma/
   • Or update the token JSON files in src/tokens/

3. Rebuild

   npm run build

The build process will transform your tokens into all supported formats.

Token Format

Tokens follow the Style Dictionary format:

{
  "color": {
    "brand": {
      "500": { "value": "#0ea5e9" }
    }
  },
  "spacing": {
    "4": { "value": "1rem" }
  }
}

Development

Build Tokens

npm run build

This runs two steps:

1. build:tokens - Transforms source tokens to CSS, SCSS, JS, JSON
2. build:package - Bundles TypeScript for npm distribution

Clean Build

npm run clean

License

MIT