@rokle/tokens

W3C-compliant design token engine. Generates colour, typography, and motion token files from structured input, with validation, versioning, and CSS variable output.

Key Exports

| Export | Description | | ------------------------------------------ | --------------------------------------------------------------------------------- | | generate(input) | Produce a full GenerateResult (token set + validation) from a TokenInput | | tokenFileToCssVariables(file) | Convert a TokenFile to a flat Record<string, string> of CSS custom properties | | validateTokenFile(file) | Validate structure and references in a token file | | validateTiers(set) | Check primitive/semantic/component tier integrity | | baselineInput | Default TokenInput suitable as a starting point | | generateColourScale(hex) | Build a 13-step colour scale from a single hex value | | generateTypographyPrimitives / Semantics | Typography token generators | | generateMotionPrimitives / Semantics | Motion/animation token generators | | bumpVersion(v, type) | Semver-style version bump for token sets |

Colour Utilities

hexToRgb, rgbToHex, rgbToHsl, hslToRgb, darken, lighten, withOpacity, contrastRatio, meetsWcagAA, meetsWcagAALarge, deriveColourFamily

Usage

import {
  generate,
  baselineInput,
  tokenFileToCssVariables,
} from "@rokle/tokens";

const result = generate(baselineInput);
const vars = tokenFileToCssVariables(result.tokenSet.primitive);
// vars["--colour-primary-500"] => "#3b82f6"

Types

TokenInput, GenerateResult, TokenFile, BrandTokenSet, DesignToken, ColourInput, TypographyInput, MotionInput, ValidationResult