@mellon-design/tokens-web

Web design tokens for Mellon products — colors, typography, spacing, elevation, motion, radius, and more — generated from the design system foundation token source. This package is generated output: don't edit it directly, change the source tokens and cut a new release instead.

Tokens follow the DTCG format and are available as CSS custom properties, JS/TS modules, and raw JSON, with light, dark, and high-contrast themes.

Install

npm install @mellon-design/tokens-web

Usage

CSS custom properties

Import the base tokens plus whichever theme(s) you need. Themes set the same custom properties to different values, so swapping the imported theme (or toggling a class/attribute that scopes it) is enough to re-theme.

@import "@mellon-design/tokens-web/css";
@import "@mellon-design/tokens-web/css/theme-light";

.card {
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}

Dark and high-contrast themes are available the same way:

@import "@mellon-design/tokens-web/css/theme-dark";
@import "@mellon-design/tokens-web/css/theme-high-contrast";

JavaScript / TypeScript

import { color, spacing, radius } from "@mellon-design/tokens-web";

const style = {
  background: color.surface.default,
  padding: spacing.md,
  borderRadius: radius.md,
};

Full type definitions ship with the package (tokens.d.ts), so editor autocomplete works out of the box.

Raw JSON

For tooling that consumes DTCG-format tokens directly (Figma plugins, custom build pipelines, etc.):

import tokens from "@mellon-design/tokens-web/json";

What's in the package

| Export | Contents | | --- | --- | | @mellon-design/tokens-web | JS/TS token module (also the default main/module entry) | | @mellon-design/tokens-web/css | Base CSS custom properties (theme-independent tokens) | | @mellon-design/tokens-web/css/theme-light | Light theme values | | @mellon-design/tokens-web/css/theme-dark | Dark theme values | | @mellon-design/tokens-web/css/theme-high-contrast | High-contrast theme values | | @mellon-design/tokens-web/json | Raw DTCG token JSON |

Versioning

This package is versioned and released independently of the Android and iOS token packages, though all platform packages for a given release are built from the same tagged commit in the source repo. See that repo's docs/versioning.md for what counts as a patch/minor/major change, and its CHANGELOG.md for release notes.

Source & issues

Token source, build tooling, and documentation live in the design system foundation repo. File issues and token change requests there — this package has no source of its own beyond the generated output.