@bekaert-dev/design-tokens

Design tokens for the bekaert.dev design system. Provides base colors, a full color palette, semantic theme tokens for light and dark modes, typography, spacing, border radii, shadows, breakpoints, z-index layers, and motion tokens.

Usage

import {
  colors, light, dark,
  fonts, spacing, radii,
  breakpoints, zIndex, motion,
} from '@bekaert-dev/design-tokens'

// Base colors
colors.base.primary              // '#145F44'

// Palette (100–900 scales)
colors.palette.primary[500]      // '#145F44'

// Semantic theme tokens (colors + shadows bundled)
light.surface.primary.default    // palette.primary[100]
dark.content.neutral.muted       // palette.neutral[300]

// Typography
fonts.scale.heading.h1.fontSize  // '2.5rem'

// Spacing (4px base grid, Tailwind-style keys)
spacing.scale[4]                 // '1rem' (16px)

// Border radii
radii.scale.md                   // '0.25rem' (4px)

// Shadows (bundled in each theme)
light.shadows.md

// Breakpoints
breakpoints.scale.md             // '768px'

// Z-Index
zIndex.scale.modal               // 1400

// Motion
motion.scale.duration.fast       // '150ms'
motion.scale.easing.default      // 'cubic-bezier(0.2, 0, 0, 1)'

Structure

| Export | Description | |--------|-------------| | colors.base | 8 core brand and utility colors (white, black, primary, secondary, blue, red, green, orange) | | colors.palette | Nine-step scales (100–900) for each base color; the 500 stop matches the base value | | light / dark | Semantic themes implementing the Theme type — bundles color tokens (app, surface, content, action, border) and shadows | | fonts.base | Font family definition (Inter) | | fonts.scale | Typography scale: display (lg/md/sm), heading (h1–h6), paragraph (lg/md/sm) | | spacing.scale | 4px base grid with Tailwind-style numeric keys (0–24) | | radii.scale | Border radius scale (none through full) | | breakpoints.scale | Responsive breakpoints (sm–2xl) | | zIndex.scale | Z-index layers with 100-step gaps (hide through tooltip) | | motion.scale | Duration (fast/normal/slow) and easing curves |

Theme roles: neutral, primary, secondary, info, success, caution, critical. Theme states: default, muted, hover, focus, active, disabled.

Type exports

import type {
  Theme, ThemeColors, Typography,
  SpacingScale, RadiiScale, ShadowScale,
  BreakpointScale, ZIndexScale,
  Motion, Duration, Easing,
} from '@bekaert-dev/design-tokens'