@walterpmoore-ui/styles

Design tokens for wpm-ui — colors, spacing, and typography as typed JavaScript/TypeScript constants.

Installation

npm install @walterpmoore-ui/styles
# or
pnpm add @walterpmoore-ui/styles

Usage

Colors

import { colors, primitives } from "@walterpmoore-ui/styles";

// Semantic tokens (map to CSS custom properties)
colors.appPrimary; // "rgb(51, 63, 72)"
colors.background; // "#ffffff"
colors.foreground; // "#05090f"

// Brand primitives
primitives.wpm.charcoal; // "#323E48" — PMS 432
primitives.wpm.red; // "#EA0029" — PMS 185
primitives.wpm.blue; // "#6CBFDD" — PMS 637
primitives.wpm.green; // "#3BD4AE"
primitives.wpm.yellow; // "#F5EA61"
primitives.wpm.purple; // "#B14FC5"

Spacing

import { spacing } from "@walterpmoore-ui/styles";

spacing[4]; // "16px"
spacing[8]; // "32px"
spacing[16]; // "64px"

Follows the same scale as Tailwind's default spacing (1 unit = 4px).

Typography

import { typography } from "@walterpmoore-ui/styles";

License

MIT