@mediaradar/design-tokens 2.0.0 → 2.0.2

package/README.md

@@ -1,11 +1,44 @@
-# Design Tokens — MediaRadar Design System
+# @mediaradar/design-tokens
 
-Style Dictionary build for the MediaRadar Design System. This package reads the token source files in `packages/tokens/` (one level up) and transforms them into CSS custom properties, Tailwind v4 integration files, and JS/TS token values — deployed to a CDN consumed directly by URL, no npm package required.
+Style Dictionary build for the MediaRadar Design System. Reads the token
+source files in `packages/tokens/` (one level up) and transforms them into
+CSS custom properties, Tailwind v4 integration files, and JS/TS token
+values.
 
-See the root `CLAUDE.md` for the full token pipeline architecture and consuming-app setup. This file covers only building this package locally.
+Output is distributed two ways, for two different needs:
+
+- **CDN** — `tokens.css`/`dark.css` (plain CSS custom properties) are
+  deployed to Azure Static Web Apps and consumed directly by URL, live and
+  unversioned. No install required.
+- **npm package** (this package) — `tailwind/theme.css`/`typography.css`
+  contain Tailwind v4 `@theme`/`@utility` directives, which Tailwind's
+  build-time compiler cannot resolve from a remote `@import` URL. Installing
+  this package puts a real local file in `node_modules` that Tailwind's
+  build *can* see.
 
 ---
 
+## Installing (as a consumer)
+
+```bash
+npm install @mediaradar/design-tokens
+```
+
+```css
+/* Tailwind's @theme block — needs the npm package, not a CDN URL */
+@import "@mediaradar/design-tokens/tailwind/theme.css";
+@import "@mediaradar/design-tokens/tailwind/typography.css";
+
+/* Plain CSS custom properties — CDN works fine for these */
+@import "https://tokens.mediaradar.com/css/tokens.css";
+@import "https://tokens.mediaradar.com/css/dark.css";
+```
+
+This package is version-pinned like any other npm dependency — a token
+change only reaches a consumer once that consumer bumps the version, not
+automatically. See the root `CLAUDE.md`'s "Consuming in a React + Tailwind
+app" section for the full wiring and the CDN asset reference table.
+
 ## Building locally
 
 ```bash
@@ -14,11 +47,18 @@ npm ci
 npm run build   # runs scripts/build-tokens.js → writes dist/
 ```
 
-`dist/` is gitignored and never committed — it's a pure CI build artifact, deployed straight to the CDN by `.github/workflows/tokens.yml` on push to `main`. Do not edit anything under `dist/` by hand; it's regenerated from `packages/tokens/*.json` on every build and any local edit is silently overwritten.
+`dist/` is gitignored and never committed to this repo — it's a build
+artifact, both deployed to the CDN and packed into the npm tarball by
+`.github/workflows/tokens.yml` on push to `main`. Do not edit anything
+under `dist/` by hand; it's regenerated from `packages/tokens/*.json` on
+every build and any local edit is silently overwritten.
 
 ## Build config
 
-Style Dictionary config lives in `sd.config.mjs`. The custom `name/prefix-mr-strip-layer` transform strips the leading layer segment (`ref`/`sys`/`component`) from each token path and adds an `mr-` prefix — see root `CLAUDE.md`'s "Name transform" section for the full mapping rules.
+Style Dictionary config lives in `sd.config.mjs`. The custom
+`name/prefix-mr-strip-layer` transform strips the leading layer segment
+(`ref`/`sys`/`component`) from each token path and adds an `mr-` prefix —
+see root `CLAUDE.md`'s "Name transform" section for the full mapping rules.
 
 ## Output
 
@@ -29,22 +69,22 @@ dist/
   js/             ← tokens.js, tokens.d.ts
   DESIGN.md       ← LLM-optimized design spec, auto-generated
   patterns.json   ← NOT built here — published by the ux-design repo; do not create or edit
-  index.html, scss/utilities/  ← copied as-is from static/, unwired legacy leftovers
+  index.html, staticwebapp.config.json, scss/utilities/  ← copied as-is from
+    static/; CDN-hosting artifacts (routing/cache config, a landing page,
+    unwired legacy SCSS) with no relevance to an npm consumer, so index.html
+    and staticwebapp.config.json are excluded from what actually publishes
+    (see package.json's "files")
 ```
 
-## Consuming this package
-
-Downstream projects don't install anything from this package — they `@import` the deployed CSS directly by URL:
-
-```css
-@import "https://lemon-cliff-091e8ef0f.7.azurestaticapps.net/css/tokens.css";
-@import "https://lemon-cliff-091e8ef0f.7.azurestaticapps.net/css/dark.css";
-```
+## Publishing
 
-See root `CLAUDE.md`'s "Consuming in a React + Tailwind app" section for the full Tailwind v4 wiring, the CDN asset reference table, and MCP server tool list.
+Bump `version` in this file's `package.json` as part of any PR that changes
+published output (tokens, `sd.config.mjs`, or this package's own config),
+then merge to `main` — `.github/workflows/tokens.yml`'s `publish_npm` job
+publishes automatically, and no-ops safely if the version isn't bumped.
 
 ## Contributing
 
 1. Edit token source files under `packages/tokens/*.json` — never `dist/`.
 2. `npm run build` locally to verify output.
-3. Open a PR against `main`. Changes deploy automatically on merge.
+3. Open a PR against `main`. Changes deploy (CDN) and publish (npm) automatically on merge.

package/dist/_headers

@@ -0,0 +1,23 @@
+/css/*
+  Cache-Control: public, max-age=3600, stale-while-revalidate=86400
+
+/tailwind/*
+  Cache-Control: public, max-age=3600, stale-while-revalidate=86400
+
+/js/*
+  Cache-Control: public, max-age=3600, stale-while-revalidate=86400
+
+/DESIGN.md
+  Cache-Control: public, max-age=3600
+
+/patterns.json
+  Cache-Control: public, max-age=60, stale-while-revalidate=300
+
+/changelog.json
+  Cache-Control: public, max-age=60, stale-while-revalidate=300
+
+/tokens.json
+  Cache-Control: public, max-age=60, stale-while-revalidate=300
+
+/*
+  Access-Control-Allow-Origin: *

package/dist/css/ref.css

@@ -333,8 +333,8 @@
   --mr-ref-typography-size-lg: 1.25rem;
   --mr-ref-typography-size-xl: 1.5rem;
   --mr-ref-typography-size-h1: 1.875rem;
-  --mr-ref-typography-letter-spacing-normal: 0;
-  --mr-ref-typography-letter-spacing-tight: -0.009999999776482582;
+  --mr-ref-typography-letter-spacing-normal: 0em;
+  --mr-ref-typography-letter-spacing-tight: -0.01em;
   --mr-ref-opacity-disabled: 0.4;
   --mr-ref-opacity-muted: 0.7;
   --mr-ref-opacity-overlay: 0.6;

package/dist/js/tokens.js

@@ -417,7 +417,7 @@ export const mrRefTypographySizeLg = 1.25;
 export const mrRefTypographySizeXl = 1.5;
 export const mrRefTypographySizeH1 = 1.875;
 export const mrRefTypographyLetterSpacingNormal = 0;
-export const mrRefTypographyLetterSpacingTight = -0.009999999776482582;
+export const mrRefTypographyLetterSpacingTight = -0.01;
 export const mrRefOpacityDisabled = 0.4;
 export const mrRefOpacityMuted = 0.7;
 export const mrRefOpacityOverlay = 0.6;
@@ -473,7 +473,7 @@ export const mrTypographyLineHeightTight = 1.2;
 export const mrTypographyLineHeightBase = 1.5;
 export const mrTypographyLineHeightHead = 1.5;
 export const mrTypographyLetterSpacingNormal = 0;
-export const mrTypographyLetterSpacingTight = -0.009999999776482582;
+export const mrTypographyLetterSpacingTight = -0.01;
 export const mrShapeRadiusControl = 8;
 export const mrShapeRadiusCard = 12;
 export const mrShapeBorderWidthControl = 1;

package/package.json

@@ -1,11 +1,13 @@
 {
     "name": "@mediaradar/design-tokens",
-    "version": "2.0.0",
+    "version": "2.0.2",
     "main": "dist/js/tokens.js",
     "types": "dist/js/tokens.d.ts",
     "type": "module",
     "files": [
-        "dist"
+        "dist",
+        "!dist/index.html",
+        "!dist/staticwebapp.config.json"
     ],
     "exports": {
         ".": {
@@ -26,15 +28,15 @@
     },
     "author": "",
     "license": "Apache-2.0",
-    "devDependencies": {
-        "@types/node": "^25.3.0",
-        "eslint": "^10.0.1"
-    },
     "dependencies": {
         "@tokens-studio/sd-transforms": "^2.0.3",
         "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",
-        "style-dictionary": "^5.0.1"
+        "style-dictionary": "^5.5.0"
+    },
+    "devDependencies": {
+        "@types/node": "^25.3.0",
+        "eslint": "^10.0.1"
     },
     "keywords": [
         "design-tokens",

package/dist/index.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>MediaRadar Design Tokens CDN</title>
-  <style>
-    body { font-family: sans-serif; max-width: 640px; margin: 60px auto; padding: 0 24px; color: #111; }
-    h1 { font-size: 1.25rem; margin-bottom: 4px; }
-    p { color: #555; font-size: 0.9rem; margin-top: 0; }
-    ul { padding-left: 1.25rem; line-height: 2; }
-    a { color: #5B4FE8; }
-    code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 0.85rem; }
-  </style>
-</head>
-<body>
-  <h1>MediaRadar Design Tokens CDN</h1>
-  <p>Static asset CDN for the MediaRadar design system. Import via URL — no install required.</p>
-  <ul>
-    <li><a href="/css/tokens.css"><code>/css/tokens.css</code></a> — entry point</li>
-    <li><a href="/css/dark.css"><code>/css/dark.css</code></a> — dark theme</li>
-    <li><a href="/tailwind/theme.css"><code>/tailwind/theme.css</code></a> — Tailwind v4 @theme</li>
-    <li><a href="/tailwind/typography.css"><code>/tailwind/typography.css</code></a> — text-style utilities</li>
-    <li><a href="/js/tokens.js"><code>/js/tokens.js</code></a> — JS token values</li>
-    <li><a href="/js/tokens.d.ts"><code>/js/tokens.d.ts</code></a> — TypeScript types</li>
-    <li><a href="/DESIGN.md"><code>/DESIGN.md</code></a> — LLM design spec</li>
-    <li><a href="/patterns.json"><code>/patterns.json</code></a> — component catalogue</li>
-  </ul>
-</body>
-</html>

package/dist/staticwebapp.config.json

@@ -1,33 +0,0 @@
-{
-  "routes": [
-    {
-      "route": "/css/*",
-      "headers": { "Cache-Control": "public, max-age=3600, stale-while-revalidate=86400" }
-    },
-    {
-      "route": "/tailwind/*",
-      "headers": { "Cache-Control": "public, max-age=3600, stale-while-revalidate=86400" }
-    },
-    {
-      "route": "/js/*",
-      "headers": { "Cache-Control": "public, max-age=3600, stale-while-revalidate=86400" }
-    },
-    {
-      "route": "/*.md",
-      "headers": { "Cache-Control": "public, max-age=3600" }
-    },
-    {
-      "route": "/patterns.json",
-      "headers": { "Cache-Control": "public, max-age=60, stale-while-revalidate=300" }
-    }
-  ],
-  "globalHeaders": {
-    "Access-Control-Allow-Origin": "*"
-  },
-  "mimeTypes": {
-    ".css": "text/css",
-    ".js": "application/javascript",
-    ".d.ts": "text/plain",
-    ".md": "text/plain"
-  }
-}