@mediaradar/design-tokens 2.2.1 → 2.4.0

package/README.md

@@ -5,16 +5,16 @@ source files in `packages/tokens/` (one level up) and transforms them into
 CSS custom properties, Tailwind v4 integration files, and JS/TS token
 values.
 
-Output is distributed two ways, for two different needs:
+Output is distributed two ways:
 
-- **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.
+- **npm package** (this package) — how apps consume tokens. Take all four
+  files (`css/tokens.css`, `css/dark.css`, `tailwind/theme.css`,
+  `tailwind/typography.css`) from here, so they always come from the same
+  version.
+- **CDN** (`https://tokens.mediaradar.com`, Cloudflare Pages) — serves the
+  same `dist/` plus `DESIGN.md`, `patterns.json`, `tokens.json` and
+  `changelog.json` for the MCP server. Useful for previewing an unreleased
+  token change, not as an app's main source.
 
 ---
 
@@ -25,18 +25,24 @@ npm install @mediaradar/design-tokens
 ```
 
 ```css
-/* Tailwind's @theme block — needs the npm package, not a CDN URL */
+@import "@mediaradar/design-tokens/css/tokens.css";
+@import "@mediaradar/design-tokens/css/dark.css";
+@import "tailwindcss";
 @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";
 ```
 
+Don't load `tokens.css`/`dark.css` from the CDN alongside a pinned
+`theme.css`: `theme.css` only aliases names, the values live in those two
+files, and loading them live lets the two halves drift apart (a CDN token
+rename breaks an app's classes with no version change on its side). And never
+load `tailwind/*.css` from the CDN at all — Tailwind can't resolve `@theme`
+from a remote `@import`.
+
 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
+change reaches a consumer when it bumps the version (Dependabot opens that PR
+daily in `insights-studio-prototype`, and merges it automatically for
+non-major versions). 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
@@ -68,7 +74,7 @@ dist/
   tailwind/       ← theme.css (@theme block), typography.css (@utility text-style-* classes)
   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
+  patterns.json   ← component catalog, built by tokens.yml from packages/design-components — do not create or edit
   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
@@ -78,10 +84,12 @@ dist/
 
 ## Publishing
 
-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.
+`.github/workflows/tokens.yml` bumps the version automatically when token
+*values* change (major for a breaking change, minor for an addition, patch
+otherwise) and publishes on merge to `main`. A change to generated output
+alone — `sd.config.mjs`, this package's own config — changes no token value,
+so bump `version` in `package.json` by hand in that PR; otherwise nothing
+publishes (the publish no-ops when the version is already on npm).
 
 ## Contributing
 

package/dist/DESIGN.md

@@ -194,6 +194,7 @@ Key is the suffix for any Tailwind color utility: `bg-{key}`, `text-{key}`, `bor
 | ai-tint | #e4e2f5 | #2b2e48 |
 | ai-ontint | #2747c4 | #8aa0ff |
 | ai-gradient | linear-gradient(135deg, #2747c4 0%, #f05323 60%, #f99d20 100%) | linear-gradient(135deg, #5b73dd 0%, #ff7548 60%, #ffb878 100%) |
+| scrim | rgba(20, 17, 13, 0.55) | rgba(0, 0, 0, 0.65) |
 
 ### Typography
 

package/dist/css/dark.css

@@ -24,6 +24,7 @@
   --mr-color-ai-tint: var(--mr-ref-color-brand-warm-ai-tint-dark);
   --mr-color-ai-ontint: var(--mr-ref-color-brand-warm-ai-ontint-dark);
   --mr-color-ai-gradient: var(--mr-ref-color-brand-warm-ai-gradient-dark);
+  --mr-color-scrim: var(--mr-ref-color-brand-warm-scrim-dark);
   --mr-text-style-heading-1-color: var(--mr-ref-color-secondary-light-10);
   --mr-typography-line-height-head: var(--mr-ref-typography-line-height-sm);
 }

package/dist/css/ref.css

@@ -52,6 +52,8 @@
   --mr-ref-color-brand-warm-ai-ontint-dark: #8aa0ff;
   --mr-ref-color-brand-warm-ai-gradient-light: linear-gradient(135deg, #2747c4 0%, #f05323 60%, #f99d20 100%);
   --mr-ref-color-brand-warm-ai-gradient-dark: linear-gradient(135deg, #5b73dd 0%, #ff7548 60%, #ffb878 100%);
+  --mr-ref-color-brand-warm-scrim-light: rgba(20, 17, 13, 0.55);
+  --mr-ref-color-brand-warm-scrim-dark: rgba(0, 0, 0, 0.65);
   --mr-ref-color-primary-light-1: #f5f9ff;
   --mr-ref-color-primary-light-2: #ebf4ff;
   --mr-ref-color-primary-light-3: #d6e6ff;

package/dist/css/sys.css

@@ -28,6 +28,7 @@
   --mr-color-ai-tint: var(--mr-ref-color-brand-warm-ai-tint-light);
   --mr-color-ai-ontint: var(--mr-ref-color-brand-warm-ai-ontint-light);
   --mr-color-ai-gradient: var(--mr-ref-color-brand-warm-ai-gradient-light);
+  --mr-color-scrim: var(--mr-ref-color-brand-warm-scrim-light);
   --mr-typography-font-size-xs: var(--mr-ref-typography-size-xs);
   --mr-typography-font-size-sm: var(--mr-ref-typography-size-sm);
   --mr-typography-font-size-base: var(--mr-ref-typography-size-base);

package/dist/js/tokens.d.ts

@@ -29,6 +29,7 @@ export const mrSysColorBorderStrong: string;
 export const mrSysColorAiTint: string;
 export const mrSysColorAiOntint: string;
 export const mrSysColorAiGradient: string;
+export const mrSysColorScrim: string;
 export const mrSysTextStyleHeading_1Color: string;
 export const mrSysTypographyLineHeightHead: number;
 export const mrRefColorBrandWarmCanvasLight: string;
@@ -84,6 +85,8 @@ export const mrRefColorBrandWarmAiOntintLight: string;
 export const mrRefColorBrandWarmAiOntintDark: string;
 export const mrRefColorBrandWarmAiGradientLight: string;
 export const mrRefColorBrandWarmAiGradientDark: string;
+export const mrRefColorBrandWarmScrimLight: string;
+export const mrRefColorBrandWarmScrimDark: string;
 export const mrRefColorPrimaryLight_1: string;
 export const mrRefColorPrimaryLight_2: string;
 export const mrRefColorPrimaryLight_3: string;
@@ -460,6 +463,7 @@ export const mrColorBorderStrong: string;
 export const mrColorAiTint: string;
 export const mrColorAiOntint: string;
 export const mrColorAiGradient: string;
+export const mrColorScrim: string;
 export const mrTypographyFontSizeXs: number;
 export const mrTypographyFontSizeSm: number;
 export const mrTypographyFontSizeBase: number;

package/dist/js/tokens.js

@@ -30,6 +30,7 @@ export const mrSysColorAiTint = "#2b2e48";
 export const mrSysColorAiOntint = "#8aa0ff";
 export const mrSysColorAiGradient =
   "linear-gradient(135deg, #5b73dd 0%, #ff7548 60%, #ffb878 100%)";
+export const mrSysColorScrim = "rgba(0, 0, 0, 0.65)";
 export const mrSysTextStyleHeading_1Color = "#3d3d3d";
 export const mrSysTypographyLineHeightHead = 1.3;
 export const mrRefColorBrandWarmCanvasLight = "#f4f2ee";
@@ -89,6 +90,8 @@ export const mrRefColorBrandWarmAiGradientLight =
   "linear-gradient(135deg, #2747c4 0%, #f05323 60%, #f99d20 100%)";
 export const mrRefColorBrandWarmAiGradientDark =
   "linear-gradient(135deg, #5b73dd 0%, #ff7548 60%, #ffb878 100%)";
+export const mrRefColorBrandWarmScrimLight = "rgba(20, 17, 13, 0.55)";
+export const mrRefColorBrandWarmScrimDark = "rgba(0, 0, 0, 0.65)";
 export const mrRefColorPrimaryLight_1 = "#f5f9ff";
 export const mrRefColorPrimaryLight_2 = "#ebf4ff";
 export const mrRefColorPrimaryLight_3 = "#d6e6ff";
@@ -468,6 +471,7 @@ export const mrColorAiTint = "#e4e2f5";
 export const mrColorAiOntint = "#2747c4";
 export const mrColorAiGradient =
   "linear-gradient(135deg, #2747c4 0%, #f05323 60%, #f99d20 100%)";
+export const mrColorScrim = "rgba(20, 17, 13, 0.55)";
 export const mrTypographyFontSizeXs = 0.75;
 export const mrTypographyFontSizeSm = 0.875;
 export const mrTypographyFontSizeBase = 1;

package/dist/tailwind/theme.css

@@ -1,4 +1,4 @@
-@theme {
+@theme inline {
   --spacing-0: var(--mr-ref-dimension-spacing-scale-0);
   --spacing-1: var(--mr-ref-dimension-spacing-scale-1);
   --spacing-2: var(--mr-ref-dimension-spacing-scale-2);
@@ -76,6 +76,7 @@
   --color-ai-tint: var(--mr-color-ai-tint);
   --color-ai-ontint: var(--mr-color-ai-ontint);
   --color-ai-gradient: var(--mr-color-ai-gradient);
+  --color-scrim: var(--mr-color-scrim);
   --text-xs: var(--mr-typography-font-size-xs);
   --text-sm: var(--mr-typography-font-size-sm);
   --text-base: var(--mr-typography-font-size-base);
@@ -105,10 +106,10 @@
   --spacing-dialog-padding: var(--mr-spacing-dialog-padding);
   --shadow-raised: var(--mr-elevation-raised);
   --shadow-overlay: var(--mr-elevation-overlay);
-  --duration-interactive: var(--mr-motion-duration-interactive);
+  --transition-duration-interactive: var(--mr-motion-duration-interactive);
   --ease-interactive: var(--mr-motion-easing-interactive);
   --opacity-disabled: var(--mr-opacity-disabled);
-  --z-dropdown: var(--mr-z-dropdown);
-  --z-modal: var(--mr-z-modal);
-  --z-tooltip: var(--mr-z-tooltip);
+  --z-index-dropdown: var(--mr-z-dropdown);
+  --z-index-modal: var(--mr-z-modal);
+  --z-index-tooltip: var(--mr-z-tooltip);
 }

package/package.json

@@ -1,50 +1,52 @@
 {
-    "name": "@mediaradar/design-tokens",
-    "version": "2.2.1",
-    "main": "dist/js/tokens.js",
-    "types": "dist/js/tokens.d.ts",
-    "type": "module",
-    "files": [
-        "dist",
-        "!dist/index.html",
-        "!dist/staticwebapp.config.json"
-    ],
-    "exports": {
-        ".": {
-            "types": "./dist/js/tokens.d.ts",
-            "default": "./dist/js/tokens.js"
-        },
-        "./package.json": "./package.json",
-        "./*": "./dist/*"
+  "name": "@mediaradar/design-tokens",
+  "version": "2.4.0",
+  "main": "dist/js/tokens.js",
+  "types": "dist/js/tokens.d.ts",
+  "type": "module",
+  "files": [
+    "dist",
+    "!dist/index.html",
+    "!dist/404.html"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/js/tokens.d.ts",
+      "default": "./dist/js/tokens.js"
     },
-    "publishConfig": {
-        "access": "public"
-    },
-    "scripts": {
-        "clean": "rm -rf build",
-        "clean-ds": "rm -rf dists",
-        "test": "echo \"Error: no test specified\" && exit 1",
-        "build": "node scripts/build-tokens.js --verbose",
-        "check-token-drift": "node scripts/check-token-drift.mjs",
-        "check-style-guide-drift": "node scripts/check-style-guide-drift.mjs"
-    },
-    "author": "",
-    "license": "Apache-2.0",
-    "dependencies": {
-        "@tokens-studio/sd-transforms": "^2.0.3",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
-        "style-dictionary": "^5.5.0"
-    },
-    "devDependencies": {
-        "@babel/parser": "^7.29.8",
-        "@babel/traverse": "^7.29.8",
-        "@types/node": "^25.3.0",
-        "eslint": "^10.0.1"
-    },
-    "keywords": [
-        "design-tokens",
-        "mediaradar"
-    ],
-    "description": "MediaRadar design tokens — CSS custom properties, Tailwind v4 theme, and JS/TS values, built by Style Dictionary."
+    "./package.json": "./package.json",
+    "./*": "./dist/*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf build",
+    "clean-ds": "rm -rf dists",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "node scripts/build-tokens.js --verbose",
+    "check-token-drift": "node scripts/check-token-drift.mjs",
+    "check-style-guide-drift": "node scripts/check-style-guide-drift.mjs"
+  },
+  "author": "",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@tokens-studio/sd-transforms": "^2.0.3",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "style-dictionary": "^5.5.0"
+  },
+  "devDependencies": {
+    "@babel/parser": "^7.29.8",
+    "@babel/traverse": "^7.29.8",
+    "@types/node": "^25.3.0",
+    "eslint": "^10.0.1",
+    "react-docgen-typescript": "^2.4.0",
+    "typescript": "5.7.2"
+  },
+  "keywords": [
+    "design-tokens",
+    "mediaradar"
+  ],
+  "description": "MediaRadar design tokens — CSS custom properties, Tailwind v4 theme, and JS/TS values, built by Style Dictionary."
 }