@mediaradar/design-tokens 2.7.0 → 2.9.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 +1 -0
  2. package/dist/css/component.css +1 -1
  3. package/dist/css/dark.css +1 -0
  4. package/dist/css/ref.css +5 -2
  5. package/dist/css/sys.css +3 -0
  6. package/dist/js/tokens.d.ts +7 -0
  7. package/dist/js/tokens.js +15 -3
  8. package/dist/tailwind/theme.css +3 -0
  9. package/package.json +1 -1
package/dist/DESIGN.md CHANGED
@@ -167,6 +167,7 @@ Key is the suffix for any Tailwind color utility: `bg-{key}`, `text-{key}`, `bor
167
167
  | --- | --- | --- |
168
168
  | canvas | #f4f2ee | #1c1814 |
169
169
  | surface | #fbfaf7 | #26211b |
170
+ | inverseSurface | #1f1b16 | #f4f2ee |
170
171
  | subtle | #ebe7e0 | #322c24 |
171
172
  | input | #fbfaf7 | #2e2820 |
172
173
  | text-primary | #1f1b16 | #f4f2ee |
package/dist/css/component.css CHANGED
@@ -4,5 +4,5 @@
4
4
 
5
5
  :root {
6
6
  --mr-button-border: #dcd6cb;
7
- --mr-button-typography-fontfamily: 'Roboto Flex', sans-serif;
7
+ --mr-button-typography-fontfamily: 'Instrument Sans', system-ui, sans-serif;
8
8
  }
package/dist/css/dark.css CHANGED
@@ -1,6 +1,7 @@
1
1
  [data-theme="dark"] {
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
+ --mr-color-inverse-surface: var(--mr-ref-color-brand-warm-inverse-surface-dark);
4
5
  --mr-color-subtle: var(--mr-ref-color-brand-warm-subtle-dark);
5
6
  --mr-color-input: var(--mr-ref-color-brand-warm-input-dark);
6
7
  --mr-color-text-primary: var(--mr-ref-color-brand-warm-text-primary-dark);
package/dist/css/ref.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --mr-ref-color-brand-warm-canvas-dark: #1c1814;
4
4
  --mr-ref-color-brand-warm-surface-light: #fbfaf7;
5
5
  --mr-ref-color-brand-warm-surface-dark: #26211b;
6
+ --mr-ref-color-brand-warm-inverse-surface-light: #1f1b16;
7
+ --mr-ref-color-brand-warm-inverse-surface-dark: #f4f2ee;
6
8
  --mr-ref-color-brand-warm-subtle-light: #ebe7e0;
7
9
  --mr-ref-color-brand-warm-subtle-dark: #322c24;
8
10
  --mr-ref-color-brand-warm-text-primary-light: #1f1b16;
@@ -323,8 +325,9 @@
323
325
  --mr-ref-dimension-radius-lg: 12px;
324
326
  --mr-ref-dimension-radius-xl: 16px;
325
327
  --mr-ref-dimension-radius-full: 999px;
326
- --mr-ref-typography-family-primary: 'Roboto Flex', sans-serif;
327
- --mr-ref-typography-family-heading: 'Roboto Flex', sans-serif;
328
+ --mr-ref-typography-family-primary: 'Instrument Sans', system-ui, sans-serif;
329
+ --mr-ref-typography-family-heading: 'Instrument Sans', system-ui, sans-serif;
330
+ --mr-ref-typography-family-display: 'Instrument Serif', Georgia, serif;
328
331
  --mr-ref-typography-weight-regular: 400;
329
332
  --mr-ref-typography-weight-medium: 500;
330
333
  --mr-ref-typography-weight-semibold: 600;
package/dist/css/sys.css CHANGED
@@ -1,6 +1,7 @@
1
1
  :root {
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
+ --mr-color-inverse-surface: var(--mr-ref-color-brand-warm-inverse-surface-light);
4
5
  --mr-color-subtle: var(--mr-ref-color-brand-warm-subtle-light);
5
6
  --mr-color-input: var(--mr-ref-color-brand-warm-input-light);
6
7
  --mr-color-text-primary: var(--mr-ref-color-brand-warm-text-primary-light);
@@ -30,6 +31,8 @@
30
31
  --mr-color-ai-ontint: var(--mr-ref-color-brand-warm-ai-ontint-light);
31
32
  --mr-color-ai-gradient: var(--mr-ref-color-brand-warm-ai-gradient-light);
32
33
  --mr-color-scrim: var(--mr-ref-color-brand-warm-scrim-light);
34
+ --mr-typography-family-sans: var(--mr-ref-typography-family-primary);
35
+ --mr-typography-family-serif: var(--mr-ref-typography-family-display);
33
36
  --mr-typography-font-size-micro: var(--mr-ref-typography-size-micro);
34
37
  --mr-typography-font-size-xs: var(--mr-ref-typography-size-xs);
35
38
  --mr-typography-font-size-dense: var(--mr-ref-typography-size-dense);
package/dist/js/tokens.d.ts CHANGED
@@ -6,6 +6,7 @@ export const mrButtonBorder: string;
6
6
  export const mrButtonTypographyFontfamily: string;
7
7
  export const mrSysColorCanvas: string;
8
8
  export const mrSysColorSurface: string;
9
+ export const mrSysColorInverseSurface: string;
9
10
  export const mrSysColorSubtle: string;
10
11
  export const mrSysColorInput: string;
11
12
  export const mrSysColorTextPrimary: string;
@@ -37,6 +38,8 @@ export const mrRefColorBrandWarmCanvasLight: string;
37
38
  export const mrRefColorBrandWarmCanvasDark: string;
38
39
  export const mrRefColorBrandWarmSurfaceLight: string;
39
40
  export const mrRefColorBrandWarmSurfaceDark: string;
41
+ export const mrRefColorBrandWarmInverseSurfaceLight: string;
42
+ export const mrRefColorBrandWarmInverseSurfaceDark: string;
40
43
  export const mrRefColorBrandWarmSubtleLight: string;
41
44
  export const mrRefColorBrandWarmSubtleDark: string;
42
45
  export const mrRefColorBrandWarmTextPrimaryLight: string;
@@ -407,6 +410,7 @@ export const mrRefDimensionRadiusXl: number;
407
410
  export const mrRefDimensionRadiusFull: number;
408
411
  export const mrRefTypographyFamilyPrimary: string;
409
412
  export const mrRefTypographyFamilyHeading: string;
413
+ export const mrRefTypographyFamilyDisplay: string;
410
414
  export const mrRefTypographyWeightRegular: number;
411
415
  export const mrRefTypographyWeightMedium: number;
412
416
  export const mrRefTypographyWeightSemibold: number;
@@ -445,6 +449,7 @@ export const mrRefZToast: number;
445
449
  export const mrRefZTooltip: number;
446
450
  export const mrColorCanvas: string;
447
451
  export const mrColorSurface: string;
452
+ export const mrColorInverseSurface: string;
448
453
  export const mrColorSubtle: string;
449
454
  export const mrColorInput: string;
450
455
  export const mrColorTextPrimary: string;
@@ -474,6 +479,8 @@ export const mrColorAiTint: string;
474
479
  export const mrColorAiOntint: string;
475
480
  export const mrColorAiGradient: string;
476
481
  export const mrColorScrim: string;
482
+ export const mrTypographyFamilySans: string;
483
+ export const mrTypographyFamilySerif: string;
477
484
  export const mrTypographyFontSizeMicro: number;
478
485
  export const mrTypographyFontSizeXs: number;
479
486
  export const mrTypographyFontSizeDense: number;
package/dist/js/tokens.js CHANGED
@@ -3,9 +3,11 @@
3
3
  */
4
4
 
5
5
  export const mrButtonBorder = "#dcd6cb";
6
- export const mrButtonTypographyFontfamily = "'Roboto Flex', sans-serif";
6
+ export const mrButtonTypographyFontfamily =
7
+ "'Instrument Sans', system-ui, sans-serif";
7
8
  export const mrSysColorCanvas = "#1c1814";
8
9
  export const mrSysColorSurface = "#26211b";
10
+ export const mrSysColorInverseSurface = "#f4f2ee";
9
11
  export const mrSysColorSubtle = "#322c24";
10
12
  export const mrSysColorInput = "#2e2820";
11
13
  export const mrSysColorTextPrimary = "#f4f2ee";
@@ -38,6 +40,8 @@ export const mrRefColorBrandWarmCanvasLight = "#f4f2ee";
38
40
  export const mrRefColorBrandWarmCanvasDark = "#1c1814";
39
41
  export const mrRefColorBrandWarmSurfaceLight = "#fbfaf7";
40
42
  export const mrRefColorBrandWarmSurfaceDark = "#26211b";
43
+ export const mrRefColorBrandWarmInverseSurfaceLight = "#1f1b16";
44
+ export const mrRefColorBrandWarmInverseSurfaceDark = "#f4f2ee";
41
45
  export const mrRefColorBrandWarmSubtleLight = "#ebe7e0";
42
46
  export const mrRefColorBrandWarmSubtleDark = "#322c24";
43
47
  export const mrRefColorBrandWarmTextPrimaryLight = "#1f1b16";
@@ -410,8 +414,12 @@ export const mrRefDimensionRadiusMd = 8;
410
414
  export const mrRefDimensionRadiusLg = 12;
411
415
  export const mrRefDimensionRadiusXl = 16;
412
416
  export const mrRefDimensionRadiusFull = 999;
413
- export const mrRefTypographyFamilyPrimary = "'Roboto Flex', sans-serif";
414
- export const mrRefTypographyFamilyHeading = "'Roboto Flex', sans-serif";
417
+ export const mrRefTypographyFamilyPrimary =
418
+ "'Instrument Sans', system-ui, sans-serif";
419
+ export const mrRefTypographyFamilyHeading =
420
+ "'Instrument Sans', system-ui, sans-serif";
421
+ export const mrRefTypographyFamilyDisplay =
422
+ "'Instrument Serif', Georgia, serif";
415
423
  export const mrRefTypographyWeightRegular = 400;
416
424
  export const mrRefTypographyWeightMedium = 500;
417
425
  export const mrRefTypographyWeightSemibold = 600;
@@ -449,6 +457,7 @@ export const mrRefZToast = 1150; // Above modal, below tooltip. A toast reportin
449
457
  export const mrRefZTooltip = 1200;
450
458
  export const mrColorCanvas = "#f4f2ee";
451
459
  export const mrColorSurface = "#fbfaf7";
460
+ export const mrColorInverseSurface = "#1f1b16";
452
461
  export const mrColorSubtle = "#ebe7e0";
453
462
  export const mrColorInput = "#fbfaf7";
454
463
  export const mrColorTextPrimary = "#1f1b16";
@@ -479,6 +488,9 @@ export const mrColorAiOntint = "#2747c4";
479
488
  export const mrColorAiGradient =
480
489
  "linear-gradient(135deg, #2747c4 0%, #f05323 60%, #f99d20 100%)";
481
490
  export const mrColorScrim = "rgba(20, 17, 13, 0.55)";
491
+ export const mrTypographyFamilySans =
492
+ "'Instrument Sans', system-ui, sans-serif";
493
+ export const mrTypographyFamilySerif = "'Instrument Serif', Georgia, serif";
482
494
  export const mrTypographyFontSizeMicro = 0.6875;
483
495
  export const mrTypographyFontSizeXs = 0.75;
484
496
  export const mrTypographyFontSizeDense = 0.8125;
package/dist/tailwind/theme.css CHANGED
@@ -49,6 +49,7 @@
49
49
  --spacing-10px: var(--mr-ref-dimension-spacing-px-10);
50
50
  --color-canvas: var(--mr-color-canvas);
51
51
  --color-surface: var(--mr-color-surface);
52
+ --color-inverseSurface: var(--mr-color-inverse-surface);
52
53
  --color-subtle: var(--mr-color-subtle);
53
54
  --color-input: var(--mr-color-input);
54
55
  --color-text-primary: var(--mr-color-text-primary);
@@ -78,6 +79,8 @@
78
79
  --color-ai-ontint: var(--mr-color-ai-ontint);
79
80
  --color-ai-gradient: var(--mr-color-ai-gradient);
80
81
  --color-scrim: var(--mr-color-scrim);
82
+ --font-sans: var(--mr-typography-family-sans);
83
+ --font-serif: var(--mr-typography-family-serif);
81
84
  --text-micro: var(--mr-typography-font-size-micro);
82
85
  --text-xs: var(--mr-typography-font-size-xs);
83
86
  --text-dense: var(--mr-typography-font-size-dense);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mediaradar/design-tokens",
3
- "version": "2.7.0",
3
+ "version": "2.9.0",
4
4
  "main": "dist/js/tokens.js",
5
5
  "types": "dist/js/tokens.d.ts",
6
6
  "type": "module",