@dezkareid/design-tokens

Design tokens for the dezkareid design system.

Installation

pnpm add @dezkareid/design-tokens

Usage

This package provides design tokens in multiple formats located in the dist folder.

CSS

Import the CSS variables into your stylesheet:

@import "@dezkareid/design-tokens/dist/css/variables.css";

.my-button {
  background-color: var(--color-primary);
  color: var(--color-text-primary);
  padding: var(--spacing-16);
}

SCSS

Import the SCSS variables into your Sass files:

@import "@dezkareid/design-tokens/dist/scss/variables";

.my-button {
  background-color: $color-base-blue-500;
  padding: $spacing-16;
}

JavaScript / TypeScript

Import tokens as constants:

import { LightColorPrimary, SpacingVal16 } from '@dezkareid/design-tokens';

const styles = {
  backgroundColor: LightColorPrimary,
  padding: SpacingVal16
};

Breakpoints

The design system provides breakpoint tokens for responsive design.

CSS

@media (min-width: var(--breakpoint-medium-min)) {
  .my-container {
    width: 100%;
  }
}

SCSS

@media (min-width: $breakpoint-medium-min) {
  .my-container {
    width: 100%;
  }
}

JavaScript / TypeScript

import { BreakpointMediumMin } from '@dezkareid/design-tokens';

if (window.matchMedia(`(min-width: ${BreakpointMediumMin})`).matches) {
  // logic for medium screens and up
}

Visualizer

To explore design tokens visually, including swatches and spacing scales, run the visualizer:

pnpm visualizer

This will open an interactive dashboard in your browser.

Discovery

You can explore all available design tokens by generating a catalog in your preferred format:

# Explore CSS variables
pnpm export-catalog --format css

# Explore SCSS variables
pnpm export-catalog --format scss

# Explore JS constants
pnpm export-catalog --format js

These catalogs are optimized for both developer reference and as a context window for AI coding assistants.