@mediaradar/design-tokens 2.0.4 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/DESIGN.md +9 -6
  2. package/dist/_headers +12 -0
  3. package/dist/css/dark.css +2 -0
  4. package/dist/css/ref.css +4 -0
  5. package/dist/css/sys.css +2 -0
  6. package/dist/js/tokens.d.ts +8 -0
  7. package/dist/js/tokens.js +8 -0
  8. package/dist/tailwind/theme.css +11 -0
  9. package/package.json +6 -2
package/dist/DESIGN.md CHANGED
@@ -4,10 +4,11 @@
4
4
  >
5
5
  > This is the authoritative resolved-values reference — if any other doc
6
6
  > disagrees with it, this one wins. Two other places document the same
7
- > system from a different angle: `design-site`'s live `/stylesheet` route
8
- > (real components, real variants — the visual reference) and
9
- > `mr-clientapps-insights-studio`'s local `frontend/DESIGN.md` (app-specific
10
- > component usage).
7
+ > system from a different angle: `packages/style-guide` (this repo)'s live
8
+ > component showcase (real components, real variants — the visual
9
+ > reference; superseded `design-site`'s `/stylesheet` route, which is no
10
+ > longer developed) and `mr-clientapps-insights-studio`'s local
11
+ > `frontend/DESIGN.md` (app-specific component usage).
11
12
 
12
13
  ## Brand
13
14
 
@@ -148,7 +149,7 @@ When building UI, follow this order:
148
149
 
149
150
  1. **Text:** Is there a `text-style-*` that matches the typographic role? Use it — do not manually compose font-size + weight + line-height.
150
151
  2. **Color:** Is there a `sys.color.*` semantic name describing the element's intent? Use it — `bg-{key}`, `text-{key}`, `border-{key}`, etc.
151
- 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.
152
+ 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.
152
153
  4. **Shape/elevation:** Use `rounded-control` for interactive elements, `rounded-card` for containers. Use `shadow-raised` for resting cards, `shadow-overlay` for floating surfaces.
153
154
  5. **Primitives:** Reach into `ref.*` only when no semantic token fits. If the pattern recurs, propose a new `sys.*` token.
154
155
 
@@ -167,6 +168,7 @@ Key is the suffix for any Tailwind color utility: `bg-{key}`, `text-{key}`, `bor
167
168
  | canvas | #f4f2ee | #1c1814 |
168
169
  | surface | #fbfaf7 | #26211b |
169
170
  | subtle | #ebe7e0 | #322c24 |
171
+ | input | #fbfaf7 | #2e2820 |
170
172
  | text-primary | #1f1b16 | #f4f2ee |
171
173
  | text-secondary | #6b6358 | #b5aea1 |
172
174
  | text-tertiary | #5f574b | #a39b8c |
@@ -188,6 +190,7 @@ Key is the suffix for any Tailwind color utility: `bg-{key}`, `text-{key}`, `bor
188
190
  | border-interactive | #6b6358 | — |
189
191
  | border-focus | #2747c4 | #8aa0ff |
190
192
  | border-focusSoft | rgba(39, 71, 196, 0.28) | rgba(138, 160, 255, 0.35) |
193
+ | border-strong | #c7bda9 | #4a4236 |
191
194
  | ai-tint | #e4e2f5 | #2b2e48 |
192
195
  | ai-ontint | #2747c4 | #8aa0ff |
193
196
  | ai-gradient | linear-gradient(135deg, #2747c4 0%, #f05323 60%, #f99d20 100%) | linear-gradient(135deg, #5b73dd 0%, #ff7548 60%, #ffb878 100%) |
@@ -312,7 +315,7 @@ Tailwind: `p-{key}`, `m-{key}`, `gap-{key}`, `w-{key}`, `h-{key}`, etc. Integer
312
315
  | 9px | 9px |
313
316
  | 10px | 10px |
314
317
 
315
- **Semantic spacing** — no Tailwind utility; use `var(--mr-spacing-{key})` in CSS directly.
318
+ **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.
316
319
 
317
320
  | Token | Value |
318
321
  | --- | --- |
package/dist/_headers CHANGED
@@ -7,6 +7,18 @@
7
7
  /js/*
8
8
  Cache-Control: public, max-age=3600, stale-while-revalidate=86400
9
9
 
10
+ # .ts/.d.ts collides with the MPEG Transport Stream extension -- Cloudflare's
11
+ # default MIME guessing picks video/mp2t for it. Cloudflare Pages also adds
12
+ # x-content-type-options: nosniff by default (not set anywhere in this repo),
13
+ # so a strict consumer trusts that wrong type instead of sniffing the real
14
+ # (plain-text TypeScript) content. This exact problem was already solved once,
15
+ # for Azure SWA (staticwebapp.config.json's mimeTypes map, ".d.ts": "text/plain")
16
+ # -- that mechanism has no Cloudflare _headers equivalent (no extension-based
17
+ # MIME map, only per-path rules), so it silently didn't carry over in the
18
+ # cutover. Matching the same proven value here, not inventing a new one.
19
+ /js/tokens.d.ts
20
+ Content-Type: text/plain; charset=utf-8
21
+
10
22
  /DESIGN.md
11
23
  Cache-Control: public, max-age=3600
12
24
 
package/dist/css/dark.css CHANGED
@@ -2,6 +2,7 @@
2
2
  --mr-color-canvas: var(--mr-ref-color-brand-warm-canvas-dark);
3
3
  --mr-color-surface: var(--mr-ref-color-brand-warm-surface-dark);
4
4
  --mr-color-subtle: var(--mr-ref-color-brand-warm-subtle-dark);
5
+ --mr-color-input: var(--mr-ref-color-brand-warm-input-dark);
5
6
  --mr-color-text-primary: var(--mr-ref-color-brand-warm-text-primary-dark);
6
7
  --mr-color-text-secondary: var(--mr-ref-color-brand-warm-text-secondary-dark);
7
8
  --mr-color-text-tertiary: var(--mr-ref-color-brand-warm-text-tertiary-dark);
@@ -19,6 +20,7 @@
19
20
  --mr-color-border-default: var(--mr-ref-color-brand-warm-border-default-dark);
20
21
  --mr-color-border-focus: var(--mr-ref-color-brand-warm-border-focus-dark);
21
22
  --mr-color-border-focus-soft: var(--mr-ref-color-brand-warm-border-focus-soft-dark);
23
+ --mr-color-border-strong: var(--mr-ref-color-brand-warm-border-strong-dark);
22
24
  --mr-color-ai-tint: var(--mr-ref-color-brand-warm-ai-tint-dark);
23
25
  --mr-color-ai-ontint: var(--mr-ref-color-brand-warm-ai-ontint-dark);
24
26
  --mr-color-ai-gradient: var(--mr-ref-color-brand-warm-ai-gradient-dark);
package/dist/css/ref.css CHANGED
@@ -28,6 +28,10 @@
28
28
  --mr-ref-color-brand-warm-border-focus-dark: #8aa0ff;
29
29
  --mr-ref-color-brand-warm-border-focus-soft-light: rgba(39, 71, 196, 0.28);
30
30
  --mr-ref-color-brand-warm-border-focus-soft-dark: rgba(138, 160, 255, 0.35);
31
+ --mr-ref-color-brand-warm-border-strong-light: #c7bda9;
32
+ --mr-ref-color-brand-warm-border-strong-dark: #4a4236;
33
+ --mr-ref-color-brand-warm-input-light: #fbfaf7;
34
+ --mr-ref-color-brand-warm-input-dark: #2e2820;
31
35
  --mr-ref-color-brand-warm-brand-primary-light: #f05323;
32
36
  --mr-ref-color-brand-warm-brand-primary-dark: #ff7548;
33
37
  --mr-ref-color-brand-warm-brand-primary-action-light: #2747c4;
package/dist/css/sys.css CHANGED
@@ -2,6 +2,7 @@
2
2
  --mr-color-canvas: var(--mr-ref-color-brand-warm-canvas-light);
3
3
  --mr-color-surface: var(--mr-ref-color-brand-warm-surface-light);
4
4
  --mr-color-subtle: var(--mr-ref-color-brand-warm-subtle-light);
5
+ --mr-color-input: var(--mr-ref-color-brand-warm-input-light);
5
6
  --mr-color-text-primary: var(--mr-ref-color-brand-warm-text-primary-light);
6
7
  --mr-color-text-secondary: var(--mr-ref-color-brand-warm-text-secondary-light);
7
8
  --mr-color-text-tertiary: var(--mr-ref-color-brand-warm-text-tertiary-light);
@@ -23,6 +24,7 @@
23
24
  --mr-color-border-interactive: var(--mr-ref-color-brand-warm-border-interactive);
24
25
  --mr-color-border-focus: var(--mr-ref-color-brand-warm-border-focus-light);
25
26
  --mr-color-border-focus-soft: var(--mr-ref-color-brand-warm-border-focus-soft-light);
27
+ --mr-color-border-strong: var(--mr-ref-color-brand-warm-border-strong-light);
26
28
  --mr-color-ai-tint: var(--mr-ref-color-brand-warm-ai-tint-light);
27
29
  --mr-color-ai-ontint: var(--mr-ref-color-brand-warm-ai-ontint-light);
28
30
  --mr-color-ai-gradient: var(--mr-ref-color-brand-warm-ai-gradient-light);
package/dist/js/tokens.d.ts CHANGED
@@ -7,6 +7,7 @@ export const mrButtonTypographyFontfamily: string;
7
7
  export const mrSysColorCanvas: string;
8
8
  export const mrSysColorSurface: string;
9
9
  export const mrSysColorSubtle: string;
10
+ export const mrSysColorInput: string;
10
11
  export const mrSysColorTextPrimary: string;
11
12
  export const mrSysColorTextSecondary: string;
12
13
  export const mrSysColorTextTertiary: string;
@@ -24,6 +25,7 @@ export const mrSysColorStatusDanger: string;
24
25
  export const mrSysColorBorderDefault: string;
25
26
  export const mrSysColorBorderFocus: string;
26
27
  export const mrSysColorBorderFocusSoft: string;
28
+ export const mrSysColorBorderStrong: string;
27
29
  export const mrSysColorAiTint: string;
28
30
  export const mrSysColorAiOntint: string;
29
31
  export const mrSysColorAiGradient: string;
@@ -58,6 +60,10 @@ export const mrRefColorBrandWarmBorderFocusLight: string;
58
60
  export const mrRefColorBrandWarmBorderFocusDark: string;
59
61
  export const mrRefColorBrandWarmBorderFocusSoftLight: string;
60
62
  export const mrRefColorBrandWarmBorderFocusSoftDark: string;
63
+ export const mrRefColorBrandWarmBorderStrongLight: string;
64
+ export const mrRefColorBrandWarmBorderStrongDark: string;
65
+ export const mrRefColorBrandWarmInputLight: string;
66
+ export const mrRefColorBrandWarmInputDark: string;
61
67
  export const mrRefColorBrandWarmBrandPrimaryLight: string;
62
68
  export const mrRefColorBrandWarmBrandPrimaryDark: string;
63
69
  export const mrRefColorBrandWarmBrandPrimaryActionLight: string;
@@ -428,6 +434,7 @@ export const mrRefZTooltip: number;
428
434
  export const mrColorCanvas: string;
429
435
  export const mrColorSurface: string;
430
436
  export const mrColorSubtle: string;
437
+ export const mrColorInput: string;
431
438
  export const mrColorTextPrimary: string;
432
439
  export const mrColorTextSecondary: string;
433
440
  export const mrColorTextTertiary: string;
@@ -449,6 +456,7 @@ export const mrColorBorderDefault: string;
449
456
  export const mrColorBorderInteractive: string;
450
457
  export const mrColorBorderFocus: string;
451
458
  export const mrColorBorderFocusSoft: string;
459
+ export const mrColorBorderStrong: string;
452
460
  export const mrColorAiTint: string;
453
461
  export const mrColorAiOntint: string;
454
462
  export const mrColorAiGradient: string;
package/dist/js/tokens.js CHANGED
@@ -7,6 +7,7 @@ export const mrButtonTypographyFontfamily = "'Roboto Flex', sans-serif";
7
7
  export const mrSysColorCanvas = "#1c1814";
8
8
  export const mrSysColorSurface = "#26211b";
9
9
  export const mrSysColorSubtle = "#322c24";
10
+ export const mrSysColorInput = "#2e2820";
10
11
  export const mrSysColorTextPrimary = "#f4f2ee";
11
12
  export const mrSysColorTextSecondary = "#b5aea1";
12
13
  export const mrSysColorTextTertiary = "#a39b8c";
@@ -24,6 +25,7 @@ export const mrSysColorStatusDanger = "#e84a4a";
24
25
  export const mrSysColorBorderDefault = "#3a3329";
25
26
  export const mrSysColorBorderFocus = "#8aa0ff";
26
27
  export const mrSysColorBorderFocusSoft = "rgba(138, 160, 255, 0.35)";
28
+ export const mrSysColorBorderStrong = "#4a4236";
27
29
  export const mrSysColorAiTint = "#2b2e48";
28
30
  export const mrSysColorAiOntint = "#8aa0ff";
29
31
  export const mrSysColorAiGradient =
@@ -61,6 +63,10 @@ export const mrRefColorBrandWarmBorderFocusSoftLight =
61
63
  "rgba(39, 71, 196, 0.28)";
62
64
  export const mrRefColorBrandWarmBorderFocusSoftDark =
63
65
  "rgba(138, 160, 255, 0.35)";
66
+ export const mrRefColorBrandWarmBorderStrongLight = "#c7bda9";
67
+ export const mrRefColorBrandWarmBorderStrongDark = "#4a4236";
68
+ export const mrRefColorBrandWarmInputLight = "#fbfaf7";
69
+ export const mrRefColorBrandWarmInputDark = "#2e2820";
64
70
  export const mrRefColorBrandWarmBrandPrimaryLight = "#f05323";
65
71
  export const mrRefColorBrandWarmBrandPrimaryDark = "#ff7548";
66
72
  export const mrRefColorBrandWarmBrandPrimaryActionLight = "#2747c4";
@@ -433,6 +439,7 @@ export const mrRefZTooltip = 1200;
433
439
  export const mrColorCanvas = "#f4f2ee";
434
440
  export const mrColorSurface = "#fbfaf7";
435
441
  export const mrColorSubtle = "#ebe7e0";
442
+ export const mrColorInput = "#fbfaf7";
436
443
  export const mrColorTextPrimary = "#1f1b16";
437
444
  export const mrColorTextSecondary = "#6b6358";
438
445
  export const mrColorTextTertiary = "#5f574b";
@@ -454,6 +461,7 @@ export const mrColorBorderDefault = "#dcd6cb";
454
461
  export const mrColorBorderInteractive = "#6b6358";
455
462
  export const mrColorBorderFocus = "#2747c4";
456
463
  export const mrColorBorderFocusSoft = "rgba(39, 71, 196, 0.28)";
464
+ export const mrColorBorderStrong = "#c7bda9";
457
465
  export const mrColorAiTint = "#e4e2f5";
458
466
  export const mrColorAiOntint = "#2747c4";
459
467
  export const mrColorAiGradient =
package/dist/tailwind/theme.css CHANGED
@@ -50,6 +50,7 @@
50
50
  --color-canvas: var(--mr-color-canvas);
51
51
  --color-surface: var(--mr-color-surface);
52
52
  --color-subtle: var(--mr-color-subtle);
53
+ --color-input: var(--mr-color-input);
53
54
  --color-text-primary: var(--mr-color-text-primary);
54
55
  --color-text-secondary: var(--mr-color-text-secondary);
55
56
  --color-text-tertiary: var(--mr-color-text-tertiary);
@@ -71,6 +72,7 @@
71
72
  --color-border-interactive: var(--mr-color-border-interactive);
72
73
  --color-border-focus: var(--mr-color-border-focus);
73
74
  --color-border-focusSoft: var(--mr-color-border-focus-soft);
75
+ --color-border-strong: var(--mr-color-border-strong);
74
76
  --color-ai-tint: var(--mr-color-ai-tint);
75
77
  --color-ai-ontint: var(--mr-color-ai-ontint);
76
78
  --color-ai-gradient: var(--mr-color-ai-gradient);
@@ -92,6 +94,15 @@
92
94
  --tracking-tight: var(--mr-typography-letter-spacing-tight);
93
95
  --radius-control: var(--mr-shape-radius-control);
94
96
  --radius-card: var(--mr-shape-radius-card);
97
+ --spacing-control-padding-x: var(--mr-spacing-control-padding-x);
98
+ --spacing-control-padding-y: var(--mr-spacing-control-padding-y);
99
+ --spacing-layout-xs: var(--mr-spacing-layout-xs);
100
+ --spacing-layout-sm: var(--mr-spacing-layout-sm);
101
+ --spacing-layout-md: var(--mr-spacing-layout-md);
102
+ --spacing-layout-lg: var(--mr-spacing-layout-lg);
103
+ --spacing-layout-xl: var(--mr-spacing-layout-xl);
104
+ --spacing-card-padding: var(--mr-spacing-card-padding);
105
+ --spacing-dialog-padding: var(--mr-spacing-dialog-padding);
95
106
  --shadow-raised: var(--mr-elevation-raised);
96
107
  --shadow-overlay: var(--mr-elevation-overlay);
97
108
  --duration-interactive: var(--mr-motion-duration-interactive);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mediaradar/design-tokens",
3
- "version": "2.0.4",
3
+ "version": "2.2.0",
4
4
  "main": "dist/js/tokens.js",
5
5
  "types": "dist/js/tokens.d.ts",
6
6
  "type": "module",
@@ -24,7 +24,9 @@
24
24
  "clean": "rm -rf build",
25
25
  "clean-ds": "rm -rf dists",
26
26
  "test": "echo \"Error: no test specified\" && exit 1",
27
- "build": "node scripts/build-tokens.js --verbose"
27
+ "build": "node scripts/build-tokens.js --verbose",
28
+ "check-token-drift": "node scripts/check-token-drift.mjs",
29
+ "check-style-guide-drift": "node scripts/check-style-guide-drift.mjs"
28
30
  },
29
31
  "author": "",
30
32
  "license": "Apache-2.0",
@@ -35,6 +37,8 @@
35
37
  "style-dictionary": "^5.5.0"
36
38
  },
37
39
  "devDependencies": {
40
+ "@babel/parser": "^7.29.8",
41
+ "@babel/traverse": "^7.29.8",
38
42
  "@types/node": "^25.3.0",
39
43
  "eslint": "^10.0.1"
40
44
  },