@mediaradar/design-tokens 2.4.0 → 2.6.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 (8) hide show
  1. package/dist/DESIGN.md +2 -0
  2. package/dist/css/dark.css +1 -0
  3. package/dist/css/ref.css +3 -0
  4. package/dist/css/sys.css +2 -0
  5. package/dist/js/tokens.d.ts +7 -0
  6. package/dist/js/tokens.js +6 -0
  7. package/dist/tailwind/theme.css +2 -0
  8. package/package.json +1 -1
package/dist/DESIGN.md CHANGED
@@ -181,6 +181,7 @@ Key is the suffix for any Tailwind color utility: `bg-{key}`, `text-{key}`, `bor
181
181
  | brand-primaryAction | #2747c4 | #5b73dd |
182
182
  | brand-onprimary | #ffffff | — |
183
183
  | brand-primarySoft | #ebe3d5 | #3a322a |
184
+ | brand-primaryTint | #eef0fd | #272c49 |
184
185
  | status-success | #1d7a3b | #3a9555 |
185
186
  | status-warning | #b8843a | #d9a655 |
186
187
  | status-danger | #c53030 | #e84a4a |
@@ -202,6 +203,7 @@ Key is the suffix for any Tailwind color utility: `bg-{key}`, `text-{key}`, `bor
202
203
 
203
204
  | Key | Value |
204
205
  | --- | --- |
206
+ | micro | 0.6875rem |
205
207
  | xs | 0.75rem |
206
208
  | sm | 0.875rem |
207
209
  | base | 1rem |
package/dist/css/dark.css CHANGED
@@ -14,6 +14,7 @@
14
14
  --mr-color-brand-primary: var(--mr-ref-color-brand-warm-brand-primary-dark);
15
15
  --mr-color-brand-primary-action: var(--mr-ref-color-brand-warm-brand-primary-action-dark);
16
16
  --mr-color-brand-primary-soft: var(--mr-ref-color-brand-warm-brand-primary-soft-dark);
17
+ --mr-color-brand-primary-tint: var(--mr-ref-color-brand-warm-brand-primary-tint-dark);
17
18
  --mr-color-status-success: var(--mr-ref-color-brand-warm-status-success-dark);
18
19
  --mr-color-status-warning: var(--mr-ref-color-brand-warm-status-warning-dark);
19
20
  --mr-color-status-danger: var(--mr-ref-color-brand-warm-status-danger-dark);
package/dist/css/ref.css CHANGED
@@ -39,6 +39,8 @@
39
39
  --mr-ref-color-brand-warm-onprimary: #ffffff;
40
40
  --mr-ref-color-brand-warm-brand-primary-soft-light: #ebe3d5;
41
41
  --mr-ref-color-brand-warm-brand-primary-soft-dark: #3a322a;
42
+ --mr-ref-color-brand-warm-brand-primary-tint-light: #eef0fd;
43
+ --mr-ref-color-brand-warm-brand-primary-tint-dark: #272c49;
42
44
  --mr-ref-color-brand-warm-status-success-light: #1d7a3b;
43
45
  --mr-ref-color-brand-warm-status-success-dark: #3a9555;
44
46
  --mr-ref-color-brand-warm-status-warning-light: #b8843a;
@@ -332,6 +334,7 @@
332
334
  --mr-ref-typography-line-height-base: 1.5;
333
335
  --mr-ref-typography-line-height-lg: 1.6;
334
336
  --mr-ref-typography-line-height-xl: 1.8;
337
+ --mr-ref-typography-size-micro: 0.6875rem;
335
338
  --mr-ref-typography-size-xs: 0.75rem;
336
339
  --mr-ref-typography-size-sm: 0.875rem;
337
340
  --mr-ref-typography-size-base: 1rem;
package/dist/css/sys.css CHANGED
@@ -15,6 +15,7 @@
15
15
  --mr-color-brand-primary-action: var(--mr-ref-color-brand-warm-brand-primary-action-light);
16
16
  --mr-color-brand-onprimary: var(--mr-ref-color-brand-warm-onprimary);
17
17
  --mr-color-brand-primary-soft: var(--mr-ref-color-brand-warm-brand-primary-soft-light);
18
+ --mr-color-brand-primary-tint: var(--mr-ref-color-brand-warm-brand-primary-tint-light);
18
19
  --mr-color-status-success: var(--mr-ref-color-brand-warm-status-success-light);
19
20
  --mr-color-status-warning: var(--mr-ref-color-brand-warm-status-warning-light);
20
21
  --mr-color-status-danger: var(--mr-ref-color-brand-warm-status-danger-light);
@@ -29,6 +30,7 @@
29
30
  --mr-color-ai-ontint: var(--mr-ref-color-brand-warm-ai-ontint-light);
30
31
  --mr-color-ai-gradient: var(--mr-ref-color-brand-warm-ai-gradient-light);
31
32
  --mr-color-scrim: var(--mr-ref-color-brand-warm-scrim-light);
33
+ --mr-typography-font-size-micro: var(--mr-ref-typography-size-micro);
32
34
  --mr-typography-font-size-xs: var(--mr-ref-typography-size-xs);
33
35
  --mr-typography-font-size-sm: var(--mr-ref-typography-size-sm);
34
36
  --mr-typography-font-size-base: var(--mr-ref-typography-size-base);
package/dist/js/tokens.d.ts CHANGED
@@ -19,6 +19,7 @@ export const mrSysColorTextLink: string;
19
19
  export const mrSysColorBrandPrimary: string;
20
20
  export const mrSysColorBrandPrimaryAction: string;
21
21
  export const mrSysColorBrandPrimarySoft: string;
22
+ export const mrSysColorBrandPrimaryTint: string;
22
23
  export const mrSysColorStatusSuccess: string;
23
24
  export const mrSysColorStatusWarning: string;
24
25
  export const mrSysColorStatusDanger: string;
@@ -72,6 +73,8 @@ export const mrRefColorBrandWarmBrandPrimaryActionDark: string;
72
73
  export const mrRefColorBrandWarmOnprimary: string;
73
74
  export const mrRefColorBrandWarmBrandPrimarySoftLight: string;
74
75
  export const mrRefColorBrandWarmBrandPrimarySoftDark: string;
76
+ export const mrRefColorBrandWarmBrandPrimaryTintLight: string;
77
+ export const mrRefColorBrandWarmBrandPrimaryTintDark: string;
75
78
  export const mrRefColorBrandWarmStatusSuccessLight: string;
76
79
  export const mrRefColorBrandWarmStatusSuccessDark: string;
77
80
  export const mrRefColorBrandWarmStatusWarningLight: string;
@@ -413,6 +416,8 @@ export const mrRefTypographyLineHeightSm: number;
413
416
  export const mrRefTypographyLineHeightBase: number;
414
417
  export const mrRefTypographyLineHeightLg: number;
415
418
  export const mrRefTypographyLineHeightXl: number;
419
+ /** 11px. The annotation step, below xs (12px) -- badges, eyebrow labels and other type that marks up content rather than being content. Added because every badge in the product was sized off-scale at 10, 10.5 or 11px, none of which the scale had. Settled on 11 rather than 10: badges carry semibold weight, and the eyebrow shape adds caps and letterspacing on top, which is where 10px starts to strain. 11px was also already the most common of the three sizes in use. */
420
+ export const mrRefTypographySizeMicro: number;
416
421
  export const mrRefTypographySizeXs: number;
417
422
  export const mrRefTypographySizeSm: number;
418
423
  export const mrRefTypographySizeBase: number;
@@ -450,6 +455,7 @@ export const mrColorBrandPrimary: string;
450
455
  export const mrColorBrandPrimaryAction: string;
451
456
  export const mrColorBrandOnprimary: string;
452
457
  export const mrColorBrandPrimarySoft: string;
458
+ export const mrColorBrandPrimaryTint: string;
453
459
  export const mrColorStatusSuccess: string;
454
460
  export const mrColorStatusWarning: string;
455
461
  export const mrColorStatusDanger: string;
@@ -464,6 +470,7 @@ export const mrColorAiTint: string;
464
470
  export const mrColorAiOntint: string;
465
471
  export const mrColorAiGradient: string;
466
472
  export const mrColorScrim: string;
473
+ export const mrTypographyFontSizeMicro: number;
467
474
  export const mrTypographyFontSizeXs: number;
468
475
  export const mrTypographyFontSizeSm: number;
469
476
  export const mrTypographyFontSizeBase: number;
package/dist/js/tokens.js CHANGED
@@ -19,6 +19,7 @@ export const mrSysColorTextLink = "#8aa0ff";
19
19
  export const mrSysColorBrandPrimary = "#ff7548";
20
20
  export const mrSysColorBrandPrimaryAction = "#5b73dd";
21
21
  export const mrSysColorBrandPrimarySoft = "#3a322a";
22
+ export const mrSysColorBrandPrimaryTint = "#272c49";
22
23
  export const mrSysColorStatusSuccess = "#3a9555";
23
24
  export const mrSysColorStatusWarning = "#d9a655";
24
25
  export const mrSysColorStatusDanger = "#e84a4a";
@@ -75,6 +76,8 @@ export const mrRefColorBrandWarmBrandPrimaryActionDark = "#5b73dd";
75
76
  export const mrRefColorBrandWarmOnprimary = "#ffffff";
76
77
  export const mrRefColorBrandWarmBrandPrimarySoftLight = "#ebe3d5";
77
78
  export const mrRefColorBrandWarmBrandPrimarySoftDark = "#3a322a";
79
+ export const mrRefColorBrandWarmBrandPrimaryTintLight = "#eef0fd";
80
+ export const mrRefColorBrandWarmBrandPrimaryTintDark = "#272c49";
78
81
  export const mrRefColorBrandWarmStatusSuccessLight = "#1d7a3b";
79
82
  export const mrRefColorBrandWarmStatusSuccessDark = "#3a9555";
80
83
  export const mrRefColorBrandWarmStatusWarningLight = "#b8843a";
@@ -418,6 +421,7 @@ export const mrRefTypographyLineHeightSm = 1.3;
418
421
  export const mrRefTypographyLineHeightBase = 1.5;
419
422
  export const mrRefTypographyLineHeightLg = 1.6;
420
423
  export const mrRefTypographyLineHeightXl = 1.8;
424
+ export const mrRefTypographySizeMicro = 0.6875; // 11px. The annotation step, below xs (12px) -- badges, eyebrow labels and other type that marks up content rather than being content. Added because every badge in the product was sized off-scale at 10, 10.5 or 11px, none of which the scale had. Settled on 11 rather than 10: badges carry semibold weight, and the eyebrow shape adds caps and letterspacing on top, which is where 10px starts to strain. 11px was also already the most common of the three sizes in use.
421
425
  export const mrRefTypographySizeXs = 0.75;
422
426
  export const mrRefTypographySizeSm = 0.875;
423
427
  export const mrRefTypographySizeBase = 1;
@@ -457,6 +461,7 @@ export const mrColorBrandPrimary = "#f05323";
457
461
  export const mrColorBrandPrimaryAction = "#2747c4";
458
462
  export const mrColorBrandOnprimary = "#ffffff";
459
463
  export const mrColorBrandPrimarySoft = "#ebe3d5";
464
+ export const mrColorBrandPrimaryTint = "#eef0fd";
460
465
  export const mrColorStatusSuccess = "#1d7a3b";
461
466
  export const mrColorStatusWarning = "#b8843a";
462
467
  export const mrColorStatusDanger = "#c53030";
@@ -472,6 +477,7 @@ export const mrColorAiOntint = "#2747c4";
472
477
  export const mrColorAiGradient =
473
478
  "linear-gradient(135deg, #2747c4 0%, #f05323 60%, #f99d20 100%)";
474
479
  export const mrColorScrim = "rgba(20, 17, 13, 0.55)";
480
+ export const mrTypographyFontSizeMicro = 0.6875;
475
481
  export const mrTypographyFontSizeXs = 0.75;
476
482
  export const mrTypographyFontSizeSm = 0.875;
477
483
  export const mrTypographyFontSizeBase = 1;
package/dist/tailwind/theme.css CHANGED
@@ -63,6 +63,7 @@
63
63
  --color-brand-primaryAction: var(--mr-color-brand-primary-action);
64
64
  --color-brand-onprimary: var(--mr-color-brand-onprimary);
65
65
  --color-brand-primarySoft: var(--mr-color-brand-primary-soft);
66
+ --color-brand-primaryTint: var(--mr-color-brand-primary-tint);
66
67
  --color-status-success: var(--mr-color-status-success);
67
68
  --color-status-warning: var(--mr-color-status-warning);
68
69
  --color-status-danger: var(--mr-color-status-danger);
@@ -77,6 +78,7 @@
77
78
  --color-ai-ontint: var(--mr-color-ai-ontint);
78
79
  --color-ai-gradient: var(--mr-color-ai-gradient);
79
80
  --color-scrim: var(--mr-color-scrim);
81
+ --text-micro: var(--mr-typography-font-size-micro);
80
82
  --text-xs: var(--mr-typography-font-size-xs);
81
83
  --text-sm: var(--mr-typography-font-size-sm);
82
84
  --text-base: var(--mr-typography-font-size-base);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mediaradar/design-tokens",
3
- "version": "2.4.0",
3
+ "version": "2.6.0",
4
4
  "main": "dist/js/tokens.js",
5
5
  "types": "dist/js/tokens.d.ts",
6
6
  "type": "module",