@mediaradar/design-tokens 2.1.0 → 2.2.1

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 +6 -2
  5. package/dist/css/sys.css +2 -0
  6. package/dist/js/tokens.d.ts +8 -0
  7. package/dist/js/tokens.js +16 -4
  8. package/dist/tailwind/theme.css +2 -0
  9. package/package.json +3 -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
 
@@ -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%) |
@@ -341,8 +344,8 @@ Tailwind: `p-{key}`, `m-{key}`, `gap-{key}`, `w-{key}`, `h-{key}`, etc. Integer
341
344
 
342
345
  | Key | Value |
343
346
  | --- | --- |
344
- | raised | #000bec |
345
- | overlay | #000bec |
347
+ | raised | 0 1px 2px 0 rgba(2, 6, 23, 0.04), 0 1px 1px 0 rgba(2, 6, 23, 0.06) |
348
+ | overlay | 0 4px 12px 0 rgba(2, 6, 23, 0.06), 0 2px 4px 0 rgba(2, 6, 23, 0.04) |
346
349
 
347
350
  ### Motion
348
351
 
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;
@@ -338,8 +342,8 @@
338
342
  --mr-ref-opacity-disabled: 0.4;
339
343
  --mr-ref-opacity-muted: 0.7;
340
344
  --mr-ref-opacity-overlay: 0.6;
341
- --mr-ref-shadow-sm: #000bec;
342
- --mr-ref-shadow-md: #000bec;
345
+ --mr-ref-shadow-sm: 0 1px 2px 0 rgba(2, 6, 23, 0.04), 0 1px 1px 0 rgba(2, 6, 23, 0.06);
346
+ --mr-ref-shadow-md: 0 4px 12px 0 rgba(2, 6, 23, 0.06), 0 2px 4px 0 rgba(2, 6, 23, 0.04);
343
347
  --mr-ref-motion-duration-fast: 120ms;
344
348
  --mr-ref-motion-duration-base: 200ms;
345
349
  --mr-ref-motion-duration-slow: 320ms;
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";
@@ -421,8 +427,10 @@ export const mrRefTypographyLetterSpacingTight = -0.025;
421
427
  export const mrRefOpacityDisabled = 0.4;
422
428
  export const mrRefOpacityMuted = 0.7;
423
429
  export const mrRefOpacityOverlay = 0.6;
424
- export const mrRefShadowSm = "#000bec";
425
- export const mrRefShadowMd = "#000bec";
430
+ export const mrRefShadowSm =
431
+ "0 1px 2px 0 rgba(2, 6, 23, 0.04), 0 1px 1px 0 rgba(2, 6, 23, 0.06)";
432
+ export const mrRefShadowMd =
433
+ "0 4px 12px 0 rgba(2, 6, 23, 0.06), 0 2px 4px 0 rgba(2, 6, 23, 0.04)";
426
434
  export const mrRefMotionDurationFast = 120;
427
435
  export const mrRefMotionDurationBase = 200;
428
436
  export const mrRefMotionDurationSlow = 320;
@@ -433,6 +441,7 @@ export const mrRefZTooltip = 1200;
433
441
  export const mrColorCanvas = "#f4f2ee";
434
442
  export const mrColorSurface = "#fbfaf7";
435
443
  export const mrColorSubtle = "#ebe7e0";
444
+ export const mrColorInput = "#fbfaf7";
436
445
  export const mrColorTextPrimary = "#1f1b16";
437
446
  export const mrColorTextSecondary = "#6b6358";
438
447
  export const mrColorTextTertiary = "#5f574b";
@@ -454,6 +463,7 @@ export const mrColorBorderDefault = "#dcd6cb";
454
463
  export const mrColorBorderInteractive = "#6b6358";
455
464
  export const mrColorBorderFocus = "#2747c4";
456
465
  export const mrColorBorderFocusSoft = "rgba(39, 71, 196, 0.28)";
466
+ export const mrColorBorderStrong = "#c7bda9";
457
467
  export const mrColorAiTint = "#e4e2f5";
458
468
  export const mrColorAiOntint = "#2747c4";
459
469
  export const mrColorAiGradient =
@@ -486,8 +496,10 @@ export const mrSpacingLayoutLg = 1.5;
486
496
  export const mrSpacingLayoutXl = 2;
487
497
  export const mrSpacingCardPadding = 1.25;
488
498
  export const mrSpacingDialogPadding = 1.5;
489
- export const mrElevationRaised = "#000bec";
490
- export const mrElevationOverlay = "#000bec";
499
+ export const mrElevationRaised =
500
+ "0 1px 2px 0 rgba(2, 6, 23, 0.04), 0 1px 1px 0 rgba(2, 6, 23, 0.06)";
501
+ export const mrElevationOverlay =
502
+ "0 4px 12px 0 rgba(2, 6, 23, 0.06), 0 2px 4px 0 rgba(2, 6, 23, 0.04)";
491
503
  export const mrMotionDurationInteractive = 200;
492
504
  export const mrMotionEasingInteractive = "cubic-bezier(0.2, 0, 0, 1)";
493
505
  export const mrOpacityDisabled = 0.4;
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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mediaradar/design-tokens",
3
- "version": "2.1.0",
3
+ "version": "2.2.1",
4
4
  "main": "dist/js/tokens.js",
5
5
  "types": "dist/js/tokens.d.ts",
6
6
  "type": "module",
@@ -25,7 +25,8 @@
25
25
  "clean-ds": "rm -rf dists",
26
26
  "test": "echo \"Error: no test specified\" && exit 1",
27
27
  "build": "node scripts/build-tokens.js --verbose",
28
- "check-token-drift": "node scripts/check-token-drift.mjs"
28
+ "check-token-drift": "node scripts/check-token-drift.mjs",
29
+ "check-style-guide-drift": "node scripts/check-style-guide-drift.mjs"
29
30
  },
30
31
  "author": "",
31
32
  "license": "Apache-2.0",