@brightlocal/tokens

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

Installation

``bash
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

$3

Import individual token CSS files:

`css
/ 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";
`

$3

Import Tailwind presets for different environments:

`css
/ 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

$3

The color tokens include:

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

$3

Consistent spacing scale based on:

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

$3

Typography tokens include:

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

Integration

$3

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

$3

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

`html



`

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.