{
  "name": "Tokens",
  "type": "token-layer",
  "description": "The Strix design token vocabulary, generated by scripts/build-tokens.mjs from the vendored snapshot at scripts/tokens/upstream-snapshot.css (see scripts/tokens/README.md; maker-ds is no longer a source of truth). Six CSS layers imported in cascade order by a single entry point (fonts, palette, @theme, light, dark, responsive). The palette holds raw ramps; the semantic layer names roles and points into the palette with var(), so switching [data-theme] changes only the semantic layer. Shipped as CSS source, not built output, because Tailwind v4 consumers need the raw @theme blocks. Color tokens are semantic-only: there are no numbered ramps in the semantic vocabulary, so never write --color-primary-600 or --color-bg-primary.",
  "export": "AVAILABLE_THEMES",
  "path": "@gtmi/strix-react/tokens",
  "css_entry": "@gtmi/strix-react/tokens.css",
  "tokens": {
    "colors": {
      "surface": "--color-surface-* (64) — fills for panels, cards and controls. Roles: base, primary, secondary, tertiary, variant, inverse, hover, pressed, disabled, inactive, skeleton; state families error/success/warning/info each with -soft, -hover, -pressed, -focused/-focus, -disabled; accent ramp -ultra-soft, -semi-extra-soft, -extra-soft, -soft, -medium, -strong, -extra-strong; neutral ramp -soft, -medium, -semi-medium, -semi-medium-strong, -semi-strong, -strong, -neutral(+ -hover/-pressed/-focused/-disabled); alpha overlays --color-surface-alpha-white-100..400, -alpha-black-200, -alpha-blue-080/-200, -alpha-page-bg-l0-l1; selection layers -selection-layer-soft/-strong",
      "text": "--color-text-* (55) — foreground copy. Roles: primary, secondary, tertiary, quaternary, inverse, disabled, disabled-on-surface, inactive, input-default, badge, badge-success; accent (+ -soft, -strong, -hover, -pressed, -focused, -selected); status error, success, success-strong, warning-disabled, destructive, on-error, on-error-subtle; button text --color-text-button-primary, -button-loading, -button-secondary, -button-tertiary, each with -hover/-pressed/-focused/-disabled and the secondary set additionally in -on-surface variants",
      "border": "--color-border-* (69) — strokes and dividers. Roles: focus, hover, pressed, tertiary, inverse, disabled, disabled-on-surface, divider-on-surface, skeleton, tab-active; accent, accent-soft; neutral ramp -extra-soft, -soft, -medium, -semi-strong, -strong, -neutral(+ states); status error/success/warning/destructive/inactive each with -hover/-pressed/-focused-or-focus/-disabled and some -soft/-medium/-semi-medium; component strokes --color-border-button-button-secondary* (incl. -on-surface), -button-button-tertiary*, -button-secondary-loading, -card-card-primary(+ states)",
      "icon": "--color-icon-* (40) — icon fills, kept separate from text so icon contrast can be tuned independently. Roles: primary, secondary, tertiary, inverse, disabled, inactive(+ states), loading, skeleton, on-surface, badge, badge-success; accent (+ -subtle, -muted, -extra-soft, -soft, -hover, -pressed, -focused, -selected); status error, success, success-soft, warning, warning-disabled, destructive, each with the relevant -hover/-pressed/-focused/-disabled; primary-button, primary-button-disabled",
      "bg-button": "--color-bg-button-* (13) — button fills only. primary(+ -hover, -pressed, -focused, -disabled, -loading), secondary, inverse, destructive(+ -hover, -pressed, -focused, -disabled)",
      "accent_ramp": "--color-accent-{lavender-200, lime-200, mint-500, sky-025, sky-100, sun-200, sun-900} plus --color-highlight (#3acefa), --color-danger-strong (#ef223a), --color-white-100 and --color-alpha-black-alpha-200. Palette-level; prefer a semantic token where one exists.",
      "elevation": "--color-elevation-elevation-{040,080,100} — translucent scrims used under floating surfaces",
      "gradients": "--gradients-* (13): blue-{primary,secondary,tertiary,quaternary,balance,card-active}, white-{primary,on-surface}, mint-{primary,active}, lavender-primary, lime-primary, surface-fade"
    },
    "typography": {
      "families": "--font-sans and --font-display are both Whitney SSm (Figma declares one text family and one title family, and both are Whitney, so there is no text/display distinction to preserve). --font-mono is Twilio Sans Mono: Figma names no monospace family and Whitney has no mono cut, so mono is a gap in the authority rather than a deviation from it. There is no --font-serif. Whitney ships 6 weights (300 Light, 400 Book, 500 Medium, 600 Semibold, 700 Bold, 800 Black), each with a real italic; font-weight selects the cut, so never set a family per weight.",
      "roles": "Typography is role-based, not a t-shirt scale. The role names are d1-d7 (display), h1-h7 (heading), subhead-{small,medium,large}, body-{xsmall,small,medium,large}, eyebrow-{small,large}, cta-regular-{small,medium,large}, cta-strong-{small,medium,large}, cta-medium-xsmall, mono-{small,medium,large}.",
      "size": "--text-size-<role> (33) — one per role",
      "weight": "--font-weight-<role>[-<weight>] (43) — display/heading/subhead/cta roles carry a single weight; body, eyebrow and mono roles are suffixed -regular, -medium or -semibold (e.g. --font-weight-body-medium-semibold)",
      "leading": "--leading-height-<role> (33) — one per role",
      "tracking": "--tracking-<role> (33) — one per role",
      "note": "Every --font-weight-* role must also be registered in cn()'s font-weight collision group, or the class silently loses font-sans."
    },
    "spacing": {
      "gap": "--spacing-gap-{050,100,150,200,250,300,400,500,600,700,800,900,1000,1300} (14) — numeric scale in hundredths of a rem-step, not pixels",
      "padding": "--spacing-padding-horizontal-{xxxs,xxs,xs,sm,med-sm,md,lg,xl,xxl,xxxl} and --spacing-padding-vertical-{xxs,xxxs,xs,sm,med-sm,md,lg,xl,xxl,3xl,4xl,5xl,6xl,7xl} (24 total) — axis-specific",
      "borders": "--spacing-borders-{sm,md,lg,xl,xxl} (5) — stroke widths"
    },
    "radius": "TWO FAMILIES, 16 tokens. (a) The legacy maker-ds scale --radius-{xxs:2px, xs:4px, med-xs:6px, sm:8px, med-sm:12px, lg-sm:14px, md:16px, lg:24px, xl:32px, xxl:40px, xxxl:48px} (11) — the non-monotonic names med-xs/med-sm/lg-sm are the real maker-ds names, do not normalize them. (b) The Figma scale --radius-{small:2px, medium:4px, large:10px, extra-large:20px, 2x-large:50px} (5), which is the only radius vocabulary any binding under scripts/figma/bindings/ names. TWO PAIRS COLLIDE ON VALUE: small==xxs (2px) and medium==xs (4px). Prefer the Figma name wherever the design authority specifies the step, so a reader can tell a ported radius from an invented one; a component with no Figma evidence for its radius keeps the legacy name rather than gaining unearned provenance.",
    "shadows": "--shadow-{xs,sm,sm-right,md,active,glass,demo-card} (7) — blue-tinted, not neutral gray",
    "blur": "--blur-{xxs:2px, xs:4px, sm:8px, md:16px, lg:24px, xl:32px, xxl:40px, xxxl:48px, splash:174px, full:500px} (10) — backdrop-filter amounts",
    "breakpoints": "--breakpoint-sm:481px, -md:768px, -lg:992px, -xl:1344px, -2xl:1600px. The responsive layer steps typography up at 1344px."
  },
  "theme_variants": ["light", "dark"],
  "theme_switch": "data-theme=\"light\" | data-theme=\"dark\" on a root element; light is the default",
  "layers": [
    "fonts.css — @font-face declarations",
    "palette.css — raw color ramps, referenced by the semantic layers",
    "theme.css — @theme block: every token name, scales, breakpoints, families",
    "dark.css — :root, [data-theme=\"dark\"] semantic values, including the WCAG AA contrast CORRECTIONS from ui-registry PR #117 — the only theme",
    "responsive.css — typography step-up at the xl (1344px) breakpoint"
  ],
  "examples": [
    {
      "code": "@import \"@gtmi/strix-react/tokens.css\";",
      "description": "Import once in your global stylesheet, after @import \"tailwindcss\""
    },
    {
      "code": "<html data-theme=\"dark\">",
      "description": "Switch themes; only the semantic layer changes"
    },
    {
      "code": "className=\"bg-surface-primary text-text-primary border-border-neutral-soft\"",
      "description": "Tailwind v4 resolves the @theme tokens into utilities directly"
    },
    {
      "code": "className=\"text-size-h3 font-h3 leading-height-h3 tracking-h3\"",
      "description": "Typography roles are applied as a set, one utility per axis. Note the utility drops the namespace prefix: --font-weight-h3 becomes font-h3."
    },
    {
      "code": "style={{ color: 'var(--color-text-accent)' }}",
      "description": "Or reference the custom property directly"
    },
    {
      "code": "import { AVAILABLE_THEMES, THEME_DARK } from '@gtmi/strix-react/tokens';",
      "description": "The JS entry point exports only the theme name constants"
    }
  ],
  "ai_tags": [
    "tokens",
    "design-system",
    "theme",
    "css-variables",
    "semantic",
    "tailwind-v4",
    "dark-mode",
    "typography-roles"
  ],
  "since": "0.2.0"
}