@mediaradar/design-tokens 2.5.0 → 2.6.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.
- package/dist/DESIGN.md +2 -0
- package/dist/css/ref.css +2 -0
- package/dist/css/sys.css +2 -0
- package/dist/js/tokens.d.ts +6 -0
- package/dist/js/tokens.js +4 -0
- package/dist/tailwind/theme.css +2 -0
- package/package.json +5 -7
package/dist/DESIGN.md
CHANGED
|
@@ -203,7 +203,9 @@ Key is the suffix for any Tailwind color utility: `bg-{key}`, `text-{key}`, `bor
|
|
|
203
203
|
|
|
204
204
|
| Key | Value |
|
|
205
205
|
| --- | --- |
|
|
206
|
+
| micro | 0.6875rem |
|
|
206
207
|
| xs | 0.75rem |
|
|
208
|
+
| dense | 0.8125rem |
|
|
207
209
|
| sm | 0.875rem |
|
|
208
210
|
| base | 1rem |
|
|
209
211
|
| md | 1.125rem |
|
package/dist/css/ref.css
CHANGED
|
@@ -334,7 +334,9 @@
|
|
|
334
334
|
--mr-ref-typography-line-height-base: 1.5;
|
|
335
335
|
--mr-ref-typography-line-height-lg: 1.6;
|
|
336
336
|
--mr-ref-typography-line-height-xl: 1.8;
|
|
337
|
+
--mr-ref-typography-size-micro: 0.6875rem;
|
|
337
338
|
--mr-ref-typography-size-xs: 0.75rem;
|
|
339
|
+
--mr-ref-typography-size-dense: 0.8125rem;
|
|
338
340
|
--mr-ref-typography-size-sm: 0.875rem;
|
|
339
341
|
--mr-ref-typography-size-base: 1rem;
|
|
340
342
|
--mr-ref-typography-size-md: 1.125rem;
|
package/dist/css/sys.css
CHANGED
|
@@ -30,7 +30,9 @@
|
|
|
30
30
|
--mr-color-ai-ontint: var(--mr-ref-color-brand-warm-ai-ontint-light);
|
|
31
31
|
--mr-color-ai-gradient: var(--mr-ref-color-brand-warm-ai-gradient-light);
|
|
32
32
|
--mr-color-scrim: var(--mr-ref-color-brand-warm-scrim-light);
|
|
33
|
+
--mr-typography-font-size-micro: var(--mr-ref-typography-size-micro);
|
|
33
34
|
--mr-typography-font-size-xs: var(--mr-ref-typography-size-xs);
|
|
35
|
+
--mr-typography-font-size-dense: var(--mr-ref-typography-size-dense);
|
|
34
36
|
--mr-typography-font-size-sm: var(--mr-ref-typography-size-sm);
|
|
35
37
|
--mr-typography-font-size-base: var(--mr-ref-typography-size-base);
|
|
36
38
|
--mr-typography-font-size-md: var(--mr-ref-typography-size-md);
|
package/dist/js/tokens.d.ts
CHANGED
|
@@ -416,7 +416,11 @@ export const mrRefTypographyLineHeightSm: number;
|
|
|
416
416
|
export const mrRefTypographyLineHeightBase: number;
|
|
417
417
|
export const mrRefTypographyLineHeightLg: number;
|
|
418
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;
|
|
419
421
|
export const mrRefTypographySizeXs: number;
|
|
422
|
+
/** 13px. The dense interface step, between xs (12px) and sm (14px) -- table text, buttons, chips and other compact controls. Added because 13px was already the de-facto size for these across the product but existed only as a hard-coded value repeated per file, outside the scale. */
|
|
423
|
+
export const mrRefTypographySizeDense: number;
|
|
420
424
|
export const mrRefTypographySizeSm: number;
|
|
421
425
|
export const mrRefTypographySizeBase: number;
|
|
422
426
|
export const mrRefTypographySizeMd: number;
|
|
@@ -468,7 +472,9 @@ export const mrColorAiTint: string;
|
|
|
468
472
|
export const mrColorAiOntint: string;
|
|
469
473
|
export const mrColorAiGradient: string;
|
|
470
474
|
export const mrColorScrim: string;
|
|
475
|
+
export const mrTypographyFontSizeMicro: number;
|
|
471
476
|
export const mrTypographyFontSizeXs: number;
|
|
477
|
+
export const mrTypographyFontSizeDense: number;
|
|
472
478
|
export const mrTypographyFontSizeSm: number;
|
|
473
479
|
export const mrTypographyFontSizeBase: number;
|
|
474
480
|
export const mrTypographyFontSizeMd: number;
|
package/dist/js/tokens.js
CHANGED
|
@@ -421,7 +421,9 @@ export const mrRefTypographyLineHeightSm = 1.3;
|
|
|
421
421
|
export const mrRefTypographyLineHeightBase = 1.5;
|
|
422
422
|
export const mrRefTypographyLineHeightLg = 1.6;
|
|
423
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.
|
|
424
425
|
export const mrRefTypographySizeXs = 0.75;
|
|
426
|
+
export const mrRefTypographySizeDense = 0.8125; // 13px. The dense interface step, between xs (12px) and sm (14px) -- table text, buttons, chips and other compact controls. Added because 13px was already the de-facto size for these across the product but existed only as a hard-coded value repeated per file, outside the scale.
|
|
425
427
|
export const mrRefTypographySizeSm = 0.875;
|
|
426
428
|
export const mrRefTypographySizeBase = 1;
|
|
427
429
|
export const mrRefTypographySizeMd = 1.125;
|
|
@@ -476,7 +478,9 @@ export const mrColorAiOntint = "#2747c4";
|
|
|
476
478
|
export const mrColorAiGradient =
|
|
477
479
|
"linear-gradient(135deg, #2747c4 0%, #f05323 60%, #f99d20 100%)";
|
|
478
480
|
export const mrColorScrim = "rgba(20, 17, 13, 0.55)";
|
|
481
|
+
export const mrTypographyFontSizeMicro = 0.6875;
|
|
479
482
|
export const mrTypographyFontSizeXs = 0.75;
|
|
483
|
+
export const mrTypographyFontSizeDense = 0.8125;
|
|
480
484
|
export const mrTypographyFontSizeSm = 0.875;
|
|
481
485
|
export const mrTypographyFontSizeBase = 1;
|
|
482
486
|
export const mrTypographyFontSizeMd = 1.125;
|
package/dist/tailwind/theme.css
CHANGED
|
@@ -78,7 +78,9 @@
|
|
|
78
78
|
--color-ai-ontint: var(--mr-color-ai-ontint);
|
|
79
79
|
--color-ai-gradient: var(--mr-color-ai-gradient);
|
|
80
80
|
--color-scrim: var(--mr-color-scrim);
|
|
81
|
+
--text-micro: var(--mr-typography-font-size-micro);
|
|
81
82
|
--text-xs: var(--mr-typography-font-size-xs);
|
|
83
|
+
--text-dense: var(--mr-typography-font-size-dense);
|
|
82
84
|
--text-sm: var(--mr-typography-font-size-sm);
|
|
83
85
|
--text-base: var(--mr-typography-font-size-base);
|
|
84
86
|
--text-md: var(--mr-typography-font-size-md);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mediaradar/design-tokens",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.1",
|
|
4
4
|
"main": "dist/js/tokens.js",
|
|
5
5
|
"types": "dist/js/tokens.d.ts",
|
|
6
6
|
"type": "module",
|
|
@@ -30,18 +30,16 @@
|
|
|
30
30
|
},
|
|
31
31
|
"author": "",
|
|
32
32
|
"license": "Apache-2.0",
|
|
33
|
-
"dependencies": {
|
|
34
|
-
"@tokens-studio/sd-transforms": "^2.0.3",
|
|
35
|
-
"lodash": "^4.17.21",
|
|
36
|
-
"lodash-es": "^4.17.21",
|
|
37
|
-
"style-dictionary": "^5.5.0"
|
|
38
|
-
},
|
|
39
33
|
"devDependencies": {
|
|
40
34
|
"@babel/parser": "^7.29.8",
|
|
41
35
|
"@babel/traverse": "^7.29.8",
|
|
36
|
+
"@tokens-studio/sd-transforms": "^2.0.3",
|
|
42
37
|
"@types/node": "^25.3.0",
|
|
43
38
|
"eslint": "^10.0.1",
|
|
39
|
+
"lodash": "^4.17.21",
|
|
40
|
+
"lodash-es": "^4.17.21",
|
|
44
41
|
"react-docgen-typescript": "^2.4.0",
|
|
42
|
+
"style-dictionary": "^5.5.0",
|
|
45
43
|
"typescript": "5.7.2"
|
|
46
44
|
},
|
|
47
45
|
"keywords": [
|