@mt-gloss/tokens

Design tokens (colors, spacing, typography, shadows, radii) for the MarketTime design system — a single source of truth emitted in multiple formats.

Color values are authored ONCE in tokens/colors.tokens.json (W3C DTCG format) and generated by Style Dictionary v5 (build-tokens.mjs) into:

| Output | File | Consumed as | |---|---|---| | SCSS $vars | src/_generated/_color-tokens.scss | @use → $color-blue-600, $range-a | | CSS custom properties | src/_generated/_color-vars.scss | cascade → var(--gloss-color-blue-600), var(--gloss-range-a) | | Tree-shakeable JS/TS | src/index.js + src/index.d.ts | import { rangeColors } from '@mt-gloss/tokens' |

Colors-first (S0): the color scale + the comparison-range (A/B/C) palette flow through the pipeline today; remaining tokens stay hand-authored in src/_tokens.scss / src/_css-vars.scss and are added incrementally. Regenerate with nx build tokens (also wired into the release preVersionCommand).

Install

npm install @mt-gloss/tokens

No Dependencies

This package has no runtime or peer dependencies. (Style Dictionary is a build-time-only devDependency of the workspace; the published package ships pre-generated artifacts.)

Usage — JS values

import { rangeColors, rangeEmphasisColors, colors } from '@mt-gloss/tokens';

rangeColors.A.base;        // '#2563EB'  (comparison Range A fill)
rangeColors.B.light;       // '#6EE7B7'  (Range B gradient stop)
rangeEmphasisColors.A.base // '#1D4ED8'  (Range A hover/emphasis)
colors.blue['600'];        // '#2563eb'

rangeColors / rangeEmphasisColors are the canonical source for the dashboard's ECharts comparison series and the date-picker's compare surfaces (which read var(--gloss-range-a|b|c) from the same source) — eliminating the historical chart-vs-picker color drift.

Usage — SCSS

In your Vite config:

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@use "@mt-gloss/tokens/src/tokens" as *;\n`,
      loadPaths: [path.resolve(__dirname, 'node_modules')]
    }
  }
}

Or import directly in SCSS:

@use '@mt-gloss/tokens/src/tokens' as *;

.my-component {
  color: $color-gray-900;
  padding: $space-4;
}