@mediaradar/design-tokens 2.0.4 → 2.1.0

package/dist/DESIGN.md

@@ -148,7 +148,7 @@ When building UI, follow this order:
 
 1. **Text:** Is there a `text-style-*` that matches the typographic role? Use it — do not manually compose font-size + weight + line-height.
 2. **Color:** Is there a `sys.color.*` semantic name describing the element's intent? Use it — `bg-{key}`, `text-{key}`, `border-{key}`, etc.
-3. **Spacing:** Is there a spacing scale value that fits? Use the discrete scale (`p-4`, `gap-3`, `mt-8`). Avoid arbitrary values. Use pixel values (`p-1px`) only for sub-pixel tuning.
+3. **Spacing:** Is there a *semantic* spacing token for this role (`p-card-padding`, `p-dialog-padding`, `gap-layout-sm`, etc.)? Use it first — this is what keeps equivalent UI (e.g. every card's padding) consistent instead of each usage guessing its own number, especially across apps that don't share component code. Only fall back to the raw discrete scale (`p-4`, `gap-3`, `mt-8`) when no semantic token fits. Avoid arbitrary values either way. Use pixel values (`p-1px`) only for sub-pixel tuning.
 4. **Shape/elevation:** Use `rounded-control` for interactive elements, `rounded-card` for containers. Use `shadow-raised` for resting cards, `shadow-overlay` for floating surfaces.
 5. **Primitives:** Reach into `ref.*` only when no semantic token fits. If the pattern recurs, propose a new `sys.*` token.
 
@@ -312,7 +312,7 @@ Tailwind: `p-{key}`, `m-{key}`, `gap-{key}`, `w-{key}`, `h-{key}`, etc. Integer
 | 9px | 9px |
 | 10px | 10px |
 
-**Semantic spacing** — no Tailwind utility; use `var(--mr-spacing-{key})` in CSS directly.
+**Semantic spacing** — named for a specific layout role rather than a raw scale step. Tailwind: `p-{key}`, `gap-{key}`, `m-{key}`, `w-{key}`, `h-{key}`, etc. (same `--spacing-*` namespace as the raw scale above; keys never collide since these are always multi-word). Prefer these over a raw scale value whenever the role matches — `p-card-padding` over guessing `p-4` vs `p-5` for a card, so two components (or two apps) styling "a card" converge on the same value instead of drifting.
 
 | Token | Value |
 | --- | --- |

package/dist/tailwind/theme.css

@@ -92,6 +92,15 @@
   --tracking-tight: var(--mr-typography-letter-spacing-tight);
   --radius-control: var(--mr-shape-radius-control);
   --radius-card: var(--mr-shape-radius-card);
+  --spacing-control-padding-x: var(--mr-spacing-control-padding-x);
+  --spacing-control-padding-y: var(--mr-spacing-control-padding-y);
+  --spacing-layout-xs: var(--mr-spacing-layout-xs);
+  --spacing-layout-sm: var(--mr-spacing-layout-sm);
+  --spacing-layout-md: var(--mr-spacing-layout-md);
+  --spacing-layout-lg: var(--mr-spacing-layout-lg);
+  --spacing-layout-xl: var(--mr-spacing-layout-xl);
+  --spacing-card-padding: var(--mr-spacing-card-padding);
+  --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);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mediaradar/design-tokens",
-    "version": "2.0.4",
+    "version": "2.1.0",
     "main": "dist/js/tokens.js",
     "types": "dist/js/tokens.d.ts",
     "type": "module",
@@ -24,7 +24,8 @@
         "clean": "rm -rf build",
         "clean-ds": "rm -rf dists",
         "test": "echo \"Error: no test specified\" && exit 1",
-        "build": "node scripts/build-tokens.js --verbose"
+        "build": "node scripts/build-tokens.js --verbose",
+        "check-token-drift": "node scripts/check-token-drift.mjs"
     },
     "author": "",
     "license": "Apache-2.0",
@@ -35,6 +36,8 @@
         "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"
     },