@brightlocal/tokens

BrightLocal Design System tokens package containing design tokens, CSS variables, and Tailwind CSS presets.

Installation

npm install @brightlocal/tokens --registry=https://npm.pkg.github.com

Note: This package is published to GitHub Packages. You'll need to authenticate with GitHub Packages to install it.

Usage

Core Tokens

Import individual token CSS files:

/* Import color tokens */
@import "@brightlocal/tokens/core-tokens/colors.css";

/* Import spacing tokens */
@import "@brightlocal/tokens/core-tokens/spacing.css";

/* Import typography tokens */
@import "@brightlocal/tokens/core-tokens/typography.css";

Tailwind CSS Presets

Import Tailwind presets for different environments:

/* Standard preset */
@import "@brightlocal/tokens/tailwind-preset.css";

/* Lab preset (experimental features) */
@import "@brightlocal/tokens/tailwind-preset-lab.css";

Available Exports

• @brightlocal/tokens/tailwind-preset.css - Main Tailwind CSS preset
• @brightlocal/tokens/tailwind-preset-lab.css - Experimental Tailwind CSS preset
• @brightlocal/tokens/core-tokens/colors.css - Color design tokens
• @brightlocal/tokens/core-tokens/spacing.css - Spacing design tokens
• @brightlocal/tokens/core-tokens/typography.css - Typography design tokens

Token Structure

Colors

The color tokens include:

• Primary brand colors
• Semantic colors (success, warning, error)
• Neutral grays
• Background and surface colors

Spacing

Consistent spacing scale based on:

• Base unit system
• Responsive breakpoints
• Component-specific spacing

Typography

Typography tokens include:

• Font families
• Font sizes
• Line heights
• Font weights
• Letter spacing

Integration

With CSS

/* Use CSS custom properties directly */
.my-component {
  color: var(--color-primary-500);
  padding: var(--spacing-4);
  font-size: var(--font-size-base);
}

With Tailwind CSS

The tokens are automatically available as Tailwind utilities when using the presets:

<div class="bg-primary-500 p-4 text-base">Styled with design tokens</div>

Development

This package is part of the BrightLocal Design System monorepo. The tokens are generated from design token definitions in the src/core-tokens/tokens-studio/ directory.

Repository

GitHub Repository

License

Private package - BrightLocal internal use only.