@westayltd/design-tokens

Design token system for Westay applications — colors, spacing, typography, radius, shadows, and grid.

Installation

npm install @westayltd/design-tokens

Available Tokens

| Token group | Import path | Description | |---|---|---| | tokens | @westayltd/design-tokens | All tokens (colors, typography, spacing, radius) | | colors | @westayltd/design-tokens/colors | Color palette JSON | | spacing | @westayltd/design-tokens/spacing | Spacing scale JSON | | typography | @westayltd/design-tokens/typography | Font sizes, weights, families | | radius | @westayltd/design-tokens/radius | Border radius scale | | shadows | @westayltd/design-tokens/shadows | Shadow definitions | | grid | @westayltd/design-tokens/grid | Grid breakpoints and columns | | iconSizes | @westayltd/design-tokens/iconSizes | Icon size scale |

Color Scales

| Scale | Range | Usage | |---|---|---| | primary | 50–1300 | Grey/black scale, surfaces, text | | secondary | 100–950 | Brand red | | accent | 50–800 | Warm gold | | negative | 100–800 | Error states | | positive | 100–800 | Success states | | warning | 100–800 | Warning states | | rating | 100–800 | Star ratings | | link | 50–800 | Links, info | | loyalty | 50–900 | Loyalty/purple | | transparency | black/white | Opacity overlays | | text | title/body/secondary/tertiary | Semantic text colors | | borderColor | — | Standard border (#E5E5E5) |

Usage in Frontend (westay-b2c-fe-web)

In tailwind.config.ts, import from the package:

import { tokens } from "@westayltd/design-tokens";
const { spacing, typography, radius } = tokens;

After installing a new version, regenerate the Tailwind CSS variables:

npm run generate:tokens

This reads JSON files directly from the installed package and outputs src/app/design-tokens.css.

Version

Current version: 0.3.11

License

MIT