@mediaradar/design-tokens 2.10.0 → 2.11.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 (10) hide show
  1. package/dist/DESIGN.md +6 -1
  2. package/dist/css/dark.css +1 -0
  3. package/dist/css/ref.css +8 -1
  4. package/dist/css/sys.css +7 -0
  5. package/dist/js/tokens.d.ts +15 -0
  6. package/dist/js/tokens.js +27 -2
  7. package/dist/tailwind/preset.cjs +274 -0
  8. package/dist/tailwind/preset.js +274 -0
  9. package/dist/tailwind/theme.css +7 -0
  10. package/package.json +1 -1
package/dist/DESIGN.md CHANGED
@@ -32,6 +32,7 @@ MediaRadar is a B2B media intelligence platform — enterprise software for adve
32
32
  | `surface` | Cards, panels, dialogs, drawers |
33
33
  | `subtle` | Secondary areas, sidebars, striped table rows |
34
34
  | `text-primary` | Body copy, headings, form values |
35
+ | `text-title` | Page titles (the h1 at the top of a page) — a softer warm brown than `text-primary` |
35
36
  | `text-secondary` | Supporting text, metadata, timestamps |
36
37
  | `text-inverse` | Text/icons on dark or brand-colored backgrounds |
37
38
  | `text-warning` | Caution states |
@@ -44,6 +45,8 @@ MediaRadar is a B2B media intelligence platform — enterprise software for adve
44
45
  | `status-danger` | Errors, destructive actions |
45
46
  | `status-onstatus` | Text/icons on status-colored backgrounds |
46
47
 
48
+ Tone gradients (`bg-tone-danger`, `bg-tone-info`, `bg-tone-warning`, `bg-tone-success`, `bg-tone-neutral`) fill image placeholders, such as a news card with no cover image. They are decorative backdrops, not status indicators: never use them on buttons, badges or text.
49
+
47
50
  ### Typography hierarchy
48
51
 
49
52
  Prefer `text-style-*` composite classes — they set size, weight, line-height, letter-spacing, and color in one class and support all Tailwind variants (`hover:`, `md:`, etc.).
@@ -173,6 +176,7 @@ Key is the suffix for any Tailwind color utility: `bg-{key}`, `text-{key}`, `bor
173
176
  | text-primary | #1f1b16 | #f4f2ee |
174
177
  | text-secondary | #6b6358 | #b5aea1 |
175
178
  | text-tertiary | #5f574b | #a39b8c |
179
+ | text-title | #3a3329 | #d6cebf |
176
180
  | text-inverse | #fbfaf7 | #1c1814 |
177
181
  | text-inverseSuccess | #7fc28f | #1d7a3b |
178
182
  | text-inverseWarning | #e8c285 | #8a5a12 |
@@ -344,6 +348,7 @@ Tailwind: `p-{key}`, `m-{key}`, `gap-{key}`, `w-{key}`, `h-{key}`, etc. Integer
344
348
  | --- | --- |
345
349
  | control | 8px |
346
350
  | card | 12px |
351
+ | pill | 999px |
347
352
 
348
353
  ### Elevation
349
354
 
@@ -359,7 +364,7 @@ Tailwind: `p-{key}`, `m-{key}`, `gap-{key}`, `w-{key}`, `h-{key}`, etc. Integer
359
364
  | Type | Key | Tailwind | Value |
360
365
  | --- | --- | --- | --- |
361
366
  | duration | interactive | duration-interactive | 200ms |
362
- | easing | interactive | ease-interactive | cubic-bezier(0.2, 0, 0, 1) |
367
+ | easing | interactive | ease-interactive | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
363
368
 
364
369
  ### Opacity
365
370
 
package/dist/css/dark.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --mr-color-text-primary: var(--mr-ref-color-brand-warm-text-primary-dark);
8
8
  --mr-color-text-secondary: var(--mr-ref-color-brand-warm-text-secondary-dark);
9
9
  --mr-color-text-tertiary: var(--mr-ref-color-brand-warm-text-tertiary-dark);
10
+ --mr-color-text-title: var(--mr-ref-color-brand-warm-text-title-dark);
10
11
  --mr-color-text-inverse: var(--mr-ref-color-brand-warm-text-inverse-dark);
11
12
  --mr-color-text-inverse-success: var(--mr-ref-color-brand-warm-text-inverse-success-dark);
12
13
  --mr-color-text-inverse-warning: var(--mr-ref-color-brand-warm-text-inverse-warning-dark);
package/dist/css/ref.css CHANGED
@@ -13,6 +13,8 @@
13
13
  --mr-ref-color-brand-warm-text-secondary-dark: #b5aea1;
14
14
  --mr-ref-color-brand-warm-text-tertiary-light: #5f574b;
15
15
  --mr-ref-color-brand-warm-text-tertiary-dark: #a39b8c;
16
+ --mr-ref-color-brand-warm-text-title-light: #3a3329;
17
+ --mr-ref-color-brand-warm-text-title-dark: #d6cebf;
16
18
  --mr-ref-color-brand-warm-text-link-light: #2747c4;
17
19
  --mr-ref-color-brand-warm-text-link-dark: #8aa0ff;
18
20
  --mr-ref-color-brand-warm-text-inverse-light: #fbfaf7;
@@ -360,9 +362,14 @@
360
362
  --mr-ref-motion-duration-fast: 120ms;
361
363
  --mr-ref-motion-duration-base: 200ms;
362
364
  --mr-ref-motion-duration-slow: 320ms;
363
- --mr-ref-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
365
+ --mr-ref-motion-easing-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94);
364
366
  --mr-ref-z-dropdown: 1000;
365
367
  --mr-ref-z-modal: 1100;
366
368
  --mr-ref-z-toast: 1150;
367
369
  --mr-ref-z-tooltip: 1200;
370
+ --mr-ref-gradient-tone-danger: linear-gradient(135deg, #e94545 0%, #8b1018 100%);
371
+ --mr-ref-gradient-tone-info: linear-gradient(135deg, #2747c4 0%, #14266e 100%);
372
+ --mr-ref-gradient-tone-warning: linear-gradient(135deg, #e0a642 0%, #8b5e22 100%);
373
+ --mr-ref-gradient-tone-success: linear-gradient(135deg, #2da85d 0%, #1a5a30 100%);
374
+ --mr-ref-gradient-tone-neutral: linear-gradient(135deg, #9aa3b5 0%, #5a6478 100%);
368
375
  }
package/dist/css/sys.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --mr-color-text-primary: var(--mr-ref-color-brand-warm-text-primary-light);
8
8
  --mr-color-text-secondary: var(--mr-ref-color-brand-warm-text-secondary-light);
9
9
  --mr-color-text-tertiary: var(--mr-ref-color-brand-warm-text-tertiary-light);
10
+ --mr-color-text-title: var(--mr-ref-color-brand-warm-text-title-light);
10
11
  --mr-color-text-inverse: var(--mr-ref-color-brand-warm-text-inverse-light);
11
12
  --mr-color-text-inverse-success: var(--mr-ref-color-brand-warm-text-inverse-success-light);
12
13
  --mr-color-text-inverse-warning: var(--mr-ref-color-brand-warm-text-inverse-warning-light);
@@ -55,6 +56,7 @@
55
56
  --mr-typography-letter-spacing-tight: var(--mr-ref-typography-letter-spacing-tight);
56
57
  --mr-shape-radius-control: var(--mr-ref-dimension-radius-md);
57
58
  --mr-shape-radius-card: var(--mr-ref-dimension-radius-lg);
59
+ --mr-shape-radius-pill: var(--mr-ref-dimension-radius-full);
58
60
  --mr-shape-border-width-control: var(--mr-ref-dimension-border-width-hair);
59
61
  --mr-spacing-control-padding-x: var(--mr-ref-dimension-spacing-scale-3);
60
62
  --mr-spacing-control-padding-y: var(--mr-ref-dimension-spacing-scale-2);
@@ -67,6 +69,11 @@
67
69
  --mr-spacing-dialog-padding: var(--mr-ref-dimension-spacing-scale-6);
68
70
  --mr-elevation-raised: var(--mr-ref-shadow-sm);
69
71
  --mr-elevation-overlay: var(--mr-ref-shadow-md);
72
+ --mr-gradient-tone-danger: var(--mr-ref-gradient-tone-danger);
73
+ --mr-gradient-tone-info: var(--mr-ref-gradient-tone-info);
74
+ --mr-gradient-tone-warning: var(--mr-ref-gradient-tone-warning);
75
+ --mr-gradient-tone-success: var(--mr-ref-gradient-tone-success);
76
+ --mr-gradient-tone-neutral: var(--mr-ref-gradient-tone-neutral);
70
77
  --mr-motion-duration-interactive: var(--mr-ref-motion-duration-base);
71
78
  --mr-motion-easing-interactive: var(--mr-ref-motion-easing-standard);
72
79
  --mr-opacity-disabled: var(--mr-ref-opacity-disabled);
package/dist/js/tokens.d.ts CHANGED
@@ -12,6 +12,7 @@ export const mrSysColorInput: string;
12
12
  export const mrSysColorTextPrimary: string;
13
13
  export const mrSysColorTextSecondary: string;
14
14
  export const mrSysColorTextTertiary: string;
15
+ export const mrSysColorTextTitle: string;
15
16
  export const mrSysColorTextInverse: string;
16
17
  export const mrSysColorTextInverseSuccess: string;
17
18
  export const mrSysColorTextInverseWarning: string;
@@ -50,6 +51,8 @@ export const mrRefColorBrandWarmTextSecondaryLight: string;
50
51
  export const mrRefColorBrandWarmTextSecondaryDark: string;
51
52
  export const mrRefColorBrandWarmTextTertiaryLight: string;
52
53
  export const mrRefColorBrandWarmTextTertiaryDark: string;
54
+ export const mrRefColorBrandWarmTextTitleLight: string;
55
+ export const mrRefColorBrandWarmTextTitleDark: string;
53
56
  export const mrRefColorBrandWarmTextLinkLight: string;
54
57
  export const mrRefColorBrandWarmTextLinkDark: string;
55
58
  export const mrRefColorBrandWarmTextInverseLight: string;
@@ -453,6 +456,11 @@ export const mrRefZModal: number;
453
456
  /** Above modal, below tooltip. A toast reporting on something that happened in a modal has to be visible over it; a tooltip on the toast's own action button has to sit above the toast. Added because the product had four different hand-picked z values for the same object, so which message won was an accident of which screen you were on. */
454
457
  export const mrRefZToast: number;
455
458
  export const mrRefZTooltip: number;
459
+ export const mrRefGradientToneDanger: string;
460
+ export const mrRefGradientToneInfo: string;
461
+ export const mrRefGradientToneWarning: string;
462
+ export const mrRefGradientToneSuccess: string;
463
+ export const mrRefGradientToneNeutral: string;
456
464
  export const mrColorCanvas: string;
457
465
  export const mrColorSurface: string;
458
466
  export const mrColorInverseSurface: string;
@@ -461,6 +469,7 @@ export const mrColorInput: string;
461
469
  export const mrColorTextPrimary: string;
462
470
  export const mrColorTextSecondary: string;
463
471
  export const mrColorTextTertiary: string;
472
+ export const mrColorTextTitle: string;
464
473
  export const mrColorTextInverse: string;
465
474
  export const mrColorTextInverseSuccess: string;
466
475
  export const mrColorTextInverseWarning: string;
@@ -509,6 +518,7 @@ export const mrTypographyLetterSpacingNormal: number;
509
518
  export const mrTypographyLetterSpacingTight: number;
510
519
  export const mrShapeRadiusControl: number;
511
520
  export const mrShapeRadiusCard: number;
521
+ export const mrShapeRadiusPill: number;
512
522
  export const mrShapeBorderWidthControl: number;
513
523
  export const mrSpacingControlPaddingX: number;
514
524
  export const mrSpacingControlPaddingY: number;
@@ -521,6 +531,11 @@ export const mrSpacingCardPadding: number;
521
531
  export const mrSpacingDialogPadding: number;
522
532
  export const mrElevationRaised: string;
523
533
  export const mrElevationOverlay: string;
534
+ export const mrGradientToneDanger: string;
535
+ export const mrGradientToneInfo: string;
536
+ export const mrGradientToneWarning: string;
537
+ export const mrGradientToneSuccess: string;
538
+ export const mrGradientToneNeutral: string;
524
539
  export const mrMotionDurationInteractive: number;
525
540
  export const mrMotionEasingInteractive: string;
526
541
  export const mrOpacityDisabled: number;
package/dist/js/tokens.js CHANGED
@@ -13,6 +13,7 @@ export const mrSysColorInput = "#2e2820";
13
13
  export const mrSysColorTextPrimary = "#f4f2ee";
14
14
  export const mrSysColorTextSecondary = "#b5aea1";
15
15
  export const mrSysColorTextTertiary = "#a39b8c";
16
+ export const mrSysColorTextTitle = "#d6cebf";
16
17
  export const mrSysColorTextInverse = "#1c1814";
17
18
  export const mrSysColorTextInverseSuccess = "#1d7a3b";
18
19
  export const mrSysColorTextInverseWarning = "#8a5a12";
@@ -52,6 +53,8 @@ export const mrRefColorBrandWarmTextSecondaryLight = "#6b6358";
52
53
  export const mrRefColorBrandWarmTextSecondaryDark = "#b5aea1";
53
54
  export const mrRefColorBrandWarmTextTertiaryLight = "#5f574b";
54
55
  export const mrRefColorBrandWarmTextTertiaryDark = "#a39b8c";
56
+ export const mrRefColorBrandWarmTextTitleLight = "#3a3329";
57
+ export const mrRefColorBrandWarmTextTitleDark = "#d6cebf";
55
58
  export const mrRefColorBrandWarmTextLinkLight = "#2747c4";
56
59
  export const mrRefColorBrandWarmTextLinkDark = "#8aa0ff";
57
60
  export const mrRefColorBrandWarmTextInverseLight = "#fbfaf7";
@@ -456,11 +459,21 @@ export const mrRefShadowMd =
456
459
  export const mrRefMotionDurationFast = 120;
457
460
  export const mrRefMotionDurationBase = 200;
458
461
  export const mrRefMotionDurationSlow = 320;
459
- export const mrRefMotionEasingStandard = "cubic-bezier(0.2, 0, 0, 1)";
462
+ export const mrRefMotionEasingStandard = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
460
463
  export const mrRefZDropdown = 1000;
461
464
  export const mrRefZModal = 1100;
462
465
  export const mrRefZToast = 1150; // Above modal, below tooltip. A toast reporting on something that happened in a modal has to be visible over it; a tooltip on the toast's own action button has to sit above the toast. Added because the product had four different hand-picked z values for the same object, so which message won was an accident of which screen you were on.
463
466
  export const mrRefZTooltip = 1200;
467
+ export const mrRefGradientToneDanger =
468
+ "linear-gradient(135deg, #e94545 0%, #8b1018 100%)";
469
+ export const mrRefGradientToneInfo =
470
+ "linear-gradient(135deg, #2747c4 0%, #14266e 100%)";
471
+ export const mrRefGradientToneWarning =
472
+ "linear-gradient(135deg, #e0a642 0%, #8b5e22 100%)";
473
+ export const mrRefGradientToneSuccess =
474
+ "linear-gradient(135deg, #2da85d 0%, #1a5a30 100%)";
475
+ export const mrRefGradientToneNeutral =
476
+ "linear-gradient(135deg, #9aa3b5 0%, #5a6478 100%)";
464
477
  export const mrColorCanvas = "#f4f2ee";
465
478
  export const mrColorSurface = "#fbfaf7";
466
479
  export const mrColorInverseSurface = "#1f1b16";
@@ -469,6 +482,7 @@ export const mrColorInput = "#fbfaf7";
469
482
  export const mrColorTextPrimary = "#1f1b16";
470
483
  export const mrColorTextSecondary = "#6b6358";
471
484
  export const mrColorTextTertiary = "#5f574b";
485
+ export const mrColorTextTitle = "#3a3329";
472
486
  export const mrColorTextInverse = "#fbfaf7";
473
487
  export const mrColorTextInverseSuccess = "#7fc28f";
474
488
  export const mrColorTextInverseWarning = "#e8c285";
@@ -519,6 +533,7 @@ export const mrTypographyLetterSpacingNormal = 0;
519
533
  export const mrTypographyLetterSpacingTight = -0.025;
520
534
  export const mrShapeRadiusControl = 8;
521
535
  export const mrShapeRadiusCard = 12;
536
+ export const mrShapeRadiusPill = 999;
522
537
  export const mrShapeBorderWidthControl = 1;
523
538
  export const mrSpacingControlPaddingX = 0.75;
524
539
  export const mrSpacingControlPaddingY = 0.5;
@@ -533,8 +548,18 @@ export const mrElevationRaised =
533
548
  "0 1px 2px 0 rgba(2, 6, 23, 0.04), 0 1px 1px 0 rgba(2, 6, 23, 0.06)";
534
549
  export const mrElevationOverlay =
535
550
  "0 4px 12px 0 rgba(2, 6, 23, 0.06), 0 2px 4px 0 rgba(2, 6, 23, 0.04)";
551
+ export const mrGradientToneDanger =
552
+ "linear-gradient(135deg, #e94545 0%, #8b1018 100%)";
553
+ export const mrGradientToneInfo =
554
+ "linear-gradient(135deg, #2747c4 0%, #14266e 100%)";
555
+ export const mrGradientToneWarning =
556
+ "linear-gradient(135deg, #e0a642 0%, #8b5e22 100%)";
557
+ export const mrGradientToneSuccess =
558
+ "linear-gradient(135deg, #2da85d 0%, #1a5a30 100%)";
559
+ export const mrGradientToneNeutral =
560
+ "linear-gradient(135deg, #9aa3b5 0%, #5a6478 100%)";
536
561
  export const mrMotionDurationInteractive = 200;
537
- export const mrMotionEasingInteractive = "cubic-bezier(0.2, 0, 0, 1)";
562
+ export const mrMotionEasingInteractive = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
538
563
  export const mrOpacityDisabled = 0.4;
539
564
  export const mrZDropdown = 1000;
540
565
  export const mrZModal = 1100;
package/dist/tailwind/preset.cjs ADDED
@@ -0,0 +1,274 @@
1
+ // Generated by packages/design-tokens/sd.config.mjs -- do not edit.
2
+ // Tailwind preset: the same classes as tailwind/theme.css + tailwind/typography.css.
3
+ const textStyles = {
4
+ ".text-style-heading-1": {
5
+ "font-size": "var(--mr-text-style-heading-1-font-size)",
6
+ "font-weight": "var(--mr-text-style-heading-1-font-weight)",
7
+ "line-height": "var(--mr-text-style-heading-1-line-height)",
8
+ "letter-spacing": "var(--mr-text-style-heading-1-letter-spacing)",
9
+ "color": "var(--mr-text-style-heading-1-color)"
10
+ },
11
+ ".text-style-heading-2": {
12
+ "font-size": "var(--mr-text-style-heading-2-font-size)",
13
+ "font-weight": "var(--mr-text-style-heading-2-font-weight)",
14
+ "line-height": "var(--mr-text-style-heading-2-line-height)",
15
+ "letter-spacing": "var(--mr-text-style-heading-2-letter-spacing)",
16
+ "color": "var(--mr-text-style-heading-2-color)"
17
+ },
18
+ ".text-style-heading-3": {
19
+ "font-size": "var(--mr-text-style-heading-3-font-size)",
20
+ "font-weight": "var(--mr-text-style-heading-3-font-weight)",
21
+ "line-height": "var(--mr-text-style-heading-3-line-height)",
22
+ "letter-spacing": "var(--mr-text-style-heading-3-letter-spacing)",
23
+ "color": "var(--mr-text-style-heading-3-color)"
24
+ },
25
+ ".text-style-body-lg": {
26
+ "font-size": "var(--mr-text-style-body-lg-font-size)",
27
+ "font-weight": "var(--mr-text-style-body-lg-font-weight)",
28
+ "line-height": "var(--mr-text-style-body-lg-line-height)",
29
+ "letter-spacing": "var(--mr-text-style-body-lg-letter-spacing)",
30
+ "color": "var(--mr-text-style-body-lg-color)"
31
+ },
32
+ ".text-style-body": {
33
+ "font-size": "var(--mr-text-style-body-font-size)",
34
+ "font-weight": "var(--mr-text-style-body-font-weight)",
35
+ "line-height": "var(--mr-text-style-body-line-height)",
36
+ "letter-spacing": "var(--mr-text-style-body-letter-spacing)",
37
+ "color": "var(--mr-text-style-body-color)"
38
+ },
39
+ ".text-style-body-sm": {
40
+ "font-size": "var(--mr-text-style-body-sm-font-size)",
41
+ "font-weight": "var(--mr-text-style-body-sm-font-weight)",
42
+ "line-height": "var(--mr-text-style-body-sm-line-height)",
43
+ "letter-spacing": "var(--mr-text-style-body-sm-letter-spacing)",
44
+ "color": "var(--mr-text-style-body-sm-color)"
45
+ },
46
+ ".text-style-body-xs": {
47
+ "font-size": "var(--mr-text-style-body-xs-font-size)",
48
+ "font-weight": "var(--mr-text-style-body-xs-font-weight)",
49
+ "line-height": "var(--mr-text-style-body-xs-line-height)",
50
+ "letter-spacing": "var(--mr-text-style-body-xs-letter-spacing)",
51
+ "color": "var(--mr-text-style-body-xs-color)"
52
+ },
53
+ ".text-style-label": {
54
+ "font-size": "var(--mr-text-style-label-font-size)",
55
+ "font-weight": "var(--mr-text-style-label-font-weight)",
56
+ "line-height": "var(--mr-text-style-label-line-height)",
57
+ "letter-spacing": "var(--mr-text-style-label-letter-spacing)",
58
+ "color": "var(--mr-text-style-label-color)"
59
+ },
60
+ ".text-style-label-strong": {
61
+ "font-size": "var(--mr-text-style-label-strong-font-size)",
62
+ "font-weight": "var(--mr-text-style-label-strong-font-weight)",
63
+ "line-height": "var(--mr-text-style-label-strong-line-height)",
64
+ "letter-spacing": "var(--mr-text-style-label-strong-letter-spacing)",
65
+ "color": "var(--mr-text-style-label-strong-color)"
66
+ },
67
+ ".text-style-label-sm": {
68
+ "font-size": "var(--mr-text-style-label-sm-font-size)",
69
+ "font-weight": "var(--mr-text-style-label-sm-font-weight)",
70
+ "line-height": "var(--mr-text-style-label-sm-line-height)",
71
+ "letter-spacing": "var(--mr-text-style-label-sm-letter-spacing)",
72
+ "color": "var(--mr-text-style-label-sm-color)"
73
+ },
74
+ ".text-style-label-xs": {
75
+ "font-size": "var(--mr-text-style-label-xs-font-size)",
76
+ "font-weight": "var(--mr-text-style-label-xs-font-weight)",
77
+ "line-height": "var(--mr-text-style-label-xs-line-height)",
78
+ "letter-spacing": "var(--mr-text-style-label-xs-letter-spacing)",
79
+ "color": "var(--mr-text-style-label-xs-color)"
80
+ },
81
+ ".text-style-caption": {
82
+ "font-size": "var(--mr-text-style-caption-font-size)",
83
+ "font-weight": "var(--mr-text-style-caption-font-weight)",
84
+ "line-height": "var(--mr-text-style-caption-line-height)",
85
+ "letter-spacing": "var(--mr-text-style-caption-letter-spacing)",
86
+ "color": "var(--mr-text-style-caption-color)"
87
+ },
88
+ ".text-style-link": {
89
+ "font-size": "var(--mr-text-style-link-font-size)",
90
+ "font-weight": "var(--mr-text-style-link-font-weight)",
91
+ "line-height": "var(--mr-text-style-link-line-height)",
92
+ "letter-spacing": "var(--mr-text-style-link-letter-spacing)",
93
+ "color": "var(--mr-text-style-link-color)"
94
+ },
95
+ ".text-style-link-strong": {
96
+ "font-size": "var(--mr-text-style-link-strong-font-size)",
97
+ "font-weight": "var(--mr-text-style-link-strong-font-weight)",
98
+ "line-height": "var(--mr-text-style-link-strong-line-height)",
99
+ "letter-spacing": "var(--mr-text-style-link-strong-letter-spacing)",
100
+ "color": "var(--mr-text-style-link-strong-color)"
101
+ },
102
+ ".text-style-link-xs": {
103
+ "font-size": "var(--mr-text-style-link-xs-font-size)",
104
+ "font-weight": "var(--mr-text-style-link-xs-font-weight)",
105
+ "line-height": "var(--mr-text-style-link-xs-line-height)",
106
+ "letter-spacing": "var(--mr-text-style-link-xs-letter-spacing)",
107
+ "color": "var(--mr-text-style-link-xs-color)"
108
+ }
109
+ };
110
+
111
+ const preset = {
112
+ theme: { extend: {
113
+ "spacing": {
114
+ "0": "var(--mr-ref-dimension-spacing-scale-0)",
115
+ "1": "var(--mr-ref-dimension-spacing-scale-1)",
116
+ "2": "var(--mr-ref-dimension-spacing-scale-2)",
117
+ "3": "var(--mr-ref-dimension-spacing-scale-3)",
118
+ "4": "var(--mr-ref-dimension-spacing-scale-4)",
119
+ "5": "var(--mr-ref-dimension-spacing-scale-5)",
120
+ "6": "var(--mr-ref-dimension-spacing-scale-6)",
121
+ "7": "var(--mr-ref-dimension-spacing-scale-7)",
122
+ "8": "var(--mr-ref-dimension-spacing-scale-8)",
123
+ "9": "var(--mr-ref-dimension-spacing-scale-9)",
124
+ "10": "var(--mr-ref-dimension-spacing-scale-10)",
125
+ "11": "var(--mr-ref-dimension-spacing-scale-11)",
126
+ "12": "var(--mr-ref-dimension-spacing-scale-12)",
127
+ "13": "var(--mr-ref-dimension-spacing-scale-13)",
128
+ "14": "var(--mr-ref-dimension-spacing-scale-14)",
129
+ "15": "var(--mr-ref-dimension-spacing-scale-15)",
130
+ "16": "var(--mr-ref-dimension-spacing-scale-16)",
131
+ "17": "var(--mr-ref-dimension-spacing-scale-17)",
132
+ "18": "var(--mr-ref-dimension-spacing-scale-18)",
133
+ "19": "var(--mr-ref-dimension-spacing-scale-19)",
134
+ "20": "var(--mr-ref-dimension-spacing-scale-20)",
135
+ "21": "var(--mr-ref-dimension-spacing-scale-21)",
136
+ "22": "var(--mr-ref-dimension-spacing-scale-22)",
137
+ "23": "var(--mr-ref-dimension-spacing-scale-23)",
138
+ "24": "var(--mr-ref-dimension-spacing-scale-24)",
139
+ "25": "var(--mr-ref-dimension-spacing-scale-25)",
140
+ "26": "var(--mr-ref-dimension-spacing-scale-26)",
141
+ "27": "var(--mr-ref-dimension-spacing-scale-27)",
142
+ "28": "var(--mr-ref-dimension-spacing-scale-28)",
143
+ "29": "var(--mr-ref-dimension-spacing-scale-29)",
144
+ "30": "var(--mr-ref-dimension-spacing-scale-30)",
145
+ "1_5": "var(--mr-ref-dimension-spacing-scale-1-5)",
146
+ "2_5": "var(--mr-ref-dimension-spacing-scale-2-5)",
147
+ "3_5": "var(--mr-ref-dimension-spacing-scale-3-5)",
148
+ "4_5": "var(--mr-ref-dimension-spacing-scale-4-5)",
149
+ "5_5": "var(--mr-ref-dimension-spacing-scale-5-5)",
150
+ "6_5": "var(--mr-ref-dimension-spacing-scale-6-5)",
151
+ "7_5": "var(--mr-ref-dimension-spacing-scale-7-5)",
152
+ "0px": "var(--mr-ref-dimension-spacing-px-0)",
153
+ "1px": "var(--mr-ref-dimension-spacing-px-1)",
154
+ "2px": "var(--mr-ref-dimension-spacing-px-2)",
155
+ "3px": "var(--mr-ref-dimension-spacing-px-3)",
156
+ "5px": "var(--mr-ref-dimension-spacing-px-5)",
157
+ "6px": "var(--mr-ref-dimension-spacing-px-6)",
158
+ "7px": "var(--mr-ref-dimension-spacing-px-7)",
159
+ "8px": "var(--mr-ref-dimension-spacing-px-8)",
160
+ "9px": "var(--mr-ref-dimension-spacing-px-9)",
161
+ "10px": "var(--mr-ref-dimension-spacing-px-10)",
162
+ "control-padding-x": "var(--mr-spacing-control-padding-x)",
163
+ "control-padding-y": "var(--mr-spacing-control-padding-y)",
164
+ "layout-xs": "var(--mr-spacing-layout-xs)",
165
+ "layout-sm": "var(--mr-spacing-layout-sm)",
166
+ "layout-md": "var(--mr-spacing-layout-md)",
167
+ "layout-lg": "var(--mr-spacing-layout-lg)",
168
+ "layout-xl": "var(--mr-spacing-layout-xl)",
169
+ "card-padding": "var(--mr-spacing-card-padding)",
170
+ "dialog-padding": "var(--mr-spacing-dialog-padding)"
171
+ },
172
+ "colors": {
173
+ "canvas": "var(--mr-color-canvas)",
174
+ "surface": "var(--mr-color-surface)",
175
+ "inverseSurface": "var(--mr-color-inverse-surface)",
176
+ "subtle": "var(--mr-color-subtle)",
177
+ "input": "var(--mr-color-input)",
178
+ "text-primary": "var(--mr-color-text-primary)",
179
+ "text-secondary": "var(--mr-color-text-secondary)",
180
+ "text-tertiary": "var(--mr-color-text-tertiary)",
181
+ "text-title": "var(--mr-color-text-title)",
182
+ "text-inverse": "var(--mr-color-text-inverse)",
183
+ "text-inverseSuccess": "var(--mr-color-text-inverse-success)",
184
+ "text-inverseWarning": "var(--mr-color-text-inverse-warning)",
185
+ "text-warning": "var(--mr-color-text-warning)",
186
+ "text-danger": "var(--mr-color-text-danger)",
187
+ "text-success": "var(--mr-color-text-success)",
188
+ "text-link": "var(--mr-color-text-link)",
189
+ "brand-primary": "var(--mr-color-brand-primary)",
190
+ "brand-primaryAction": "var(--mr-color-brand-primary-action)",
191
+ "brand-onprimary": "var(--mr-color-brand-onprimary)",
192
+ "brand-primarySoft": "var(--mr-color-brand-primary-soft)",
193
+ "brand-primaryTint": "var(--mr-color-brand-primary-tint)",
194
+ "status-success": "var(--mr-color-status-success)",
195
+ "status-warning": "var(--mr-color-status-warning)",
196
+ "status-danger": "var(--mr-color-status-danger)",
197
+ "status-onstatus": "var(--mr-color-status-onstatus)",
198
+ "status-on-status": "var(--mr-color-status-on-status)",
199
+ "border-default": "var(--mr-color-border-default)",
200
+ "border-interactive": "var(--mr-color-border-interactive)",
201
+ "border-focus": "var(--mr-color-border-focus)",
202
+ "border-focusSoft": "var(--mr-color-border-focus-soft)",
203
+ "border-strong": "var(--mr-color-border-strong)",
204
+ "ai-tint": "var(--mr-color-ai-tint)",
205
+ "ai-ontint": "var(--mr-color-ai-ontint)",
206
+ "ai-gradient": "var(--mr-color-ai-gradient)",
207
+ "scrim": "var(--mr-color-scrim)"
208
+ },
209
+ "fontFamily": {
210
+ "sans": "var(--mr-typography-family-sans)",
211
+ "serif": "var(--mr-typography-family-serif)"
212
+ },
213
+ "fontSize": {
214
+ "micro": "var(--mr-typography-font-size-micro)",
215
+ "xs": "var(--mr-typography-font-size-xs)",
216
+ "dense": "var(--mr-typography-font-size-dense)",
217
+ "sm": "var(--mr-typography-font-size-sm)",
218
+ "base": "var(--mr-typography-font-size-base)",
219
+ "md": "var(--mr-typography-font-size-md)",
220
+ "lg": "var(--mr-typography-font-size-lg)",
221
+ "xl": "var(--mr-typography-font-size-xl)",
222
+ "h1": "var(--mr-typography-font-size-h1)"
223
+ },
224
+ "fontWeight": {
225
+ "regular": "var(--mr-typography-weight-regular)",
226
+ "medium": "var(--mr-typography-weight-medium)",
227
+ "semibold": "var(--mr-typography-weight-semibold)",
228
+ "bold": "var(--mr-typography-weight-bold)"
229
+ },
230
+ "lineHeight": {
231
+ "tight": "var(--mr-typography-line-height-tight)",
232
+ "base": "var(--mr-typography-line-height-base)",
233
+ "head": "var(--mr-typography-line-height-head)"
234
+ },
235
+ "letterSpacing": {
236
+ "normal": "var(--mr-typography-letter-spacing-normal)",
237
+ "tight": "var(--mr-typography-letter-spacing-tight)"
238
+ },
239
+ "borderRadius": {
240
+ "control": "var(--mr-shape-radius-control)",
241
+ "card": "var(--mr-shape-radius-card)",
242
+ "pill": "var(--mr-shape-radius-pill)"
243
+ },
244
+ "boxShadow": {
245
+ "raised": "var(--mr-elevation-raised)",
246
+ "overlay": "var(--mr-elevation-overlay)"
247
+ },
248
+ "backgroundImage": {
249
+ "tone-danger": "var(--mr-gradient-tone-danger)",
250
+ "tone-info": "var(--mr-gradient-tone-info)",
251
+ "tone-warning": "var(--mr-gradient-tone-warning)",
252
+ "tone-success": "var(--mr-gradient-tone-success)",
253
+ "tone-neutral": "var(--mr-gradient-tone-neutral)"
254
+ },
255
+ "transitionDuration": {
256
+ "interactive": "var(--mr-motion-duration-interactive)"
257
+ },
258
+ "transitionTimingFunction": {
259
+ "interactive": "var(--mr-motion-easing-interactive)"
260
+ },
261
+ "opacity": {
262
+ "disabled": "var(--mr-opacity-disabled)"
263
+ },
264
+ "zIndex": {
265
+ "dropdown": "var(--mr-z-dropdown)",
266
+ "modal": "var(--mr-z-modal)",
267
+ "toast": "var(--mr-z-toast)",
268
+ "tooltip": "var(--mr-z-tooltip)"
269
+ }
270
+ } },
271
+ plugins: [({ addUtilities }) => addUtilities(textStyles)],
272
+ };
273
+
274
+ module.exports = preset;
package/dist/tailwind/preset.js ADDED
@@ -0,0 +1,274 @@
1
+ // Generated by packages/design-tokens/sd.config.mjs -- do not edit.
2
+ // Tailwind preset: the same classes as tailwind/theme.css + tailwind/typography.css.
3
+ const textStyles = {
4
+ ".text-style-heading-1": {
5
+ "font-size": "var(--mr-text-style-heading-1-font-size)",
6
+ "font-weight": "var(--mr-text-style-heading-1-font-weight)",
7
+ "line-height": "var(--mr-text-style-heading-1-line-height)",
8
+ "letter-spacing": "var(--mr-text-style-heading-1-letter-spacing)",
9
+ "color": "var(--mr-text-style-heading-1-color)"
10
+ },
11
+ ".text-style-heading-2": {
12
+ "font-size": "var(--mr-text-style-heading-2-font-size)",
13
+ "font-weight": "var(--mr-text-style-heading-2-font-weight)",
14
+ "line-height": "var(--mr-text-style-heading-2-line-height)",
15
+ "letter-spacing": "var(--mr-text-style-heading-2-letter-spacing)",
16
+ "color": "var(--mr-text-style-heading-2-color)"
17
+ },
18
+ ".text-style-heading-3": {
19
+ "font-size": "var(--mr-text-style-heading-3-font-size)",
20
+ "font-weight": "var(--mr-text-style-heading-3-font-weight)",
21
+ "line-height": "var(--mr-text-style-heading-3-line-height)",
22
+ "letter-spacing": "var(--mr-text-style-heading-3-letter-spacing)",
23
+ "color": "var(--mr-text-style-heading-3-color)"
24
+ },
25
+ ".text-style-body-lg": {
26
+ "font-size": "var(--mr-text-style-body-lg-font-size)",
27
+ "font-weight": "var(--mr-text-style-body-lg-font-weight)",
28
+ "line-height": "var(--mr-text-style-body-lg-line-height)",
29
+ "letter-spacing": "var(--mr-text-style-body-lg-letter-spacing)",
30
+ "color": "var(--mr-text-style-body-lg-color)"
31
+ },
32
+ ".text-style-body": {
33
+ "font-size": "var(--mr-text-style-body-font-size)",
34
+ "font-weight": "var(--mr-text-style-body-font-weight)",
35
+ "line-height": "var(--mr-text-style-body-line-height)",
36
+ "letter-spacing": "var(--mr-text-style-body-letter-spacing)",
37
+ "color": "var(--mr-text-style-body-color)"
38
+ },
39
+ ".text-style-body-sm": {
40
+ "font-size": "var(--mr-text-style-body-sm-font-size)",
41
+ "font-weight": "var(--mr-text-style-body-sm-font-weight)",
42
+ "line-height": "var(--mr-text-style-body-sm-line-height)",
43
+ "letter-spacing": "var(--mr-text-style-body-sm-letter-spacing)",
44
+ "color": "var(--mr-text-style-body-sm-color)"
45
+ },
46
+ ".text-style-body-xs": {
47
+ "font-size": "var(--mr-text-style-body-xs-font-size)",
48
+ "font-weight": "var(--mr-text-style-body-xs-font-weight)",
49
+ "line-height": "var(--mr-text-style-body-xs-line-height)",
50
+ "letter-spacing": "var(--mr-text-style-body-xs-letter-spacing)",
51
+ "color": "var(--mr-text-style-body-xs-color)"
52
+ },
53
+ ".text-style-label": {
54
+ "font-size": "var(--mr-text-style-label-font-size)",
55
+ "font-weight": "var(--mr-text-style-label-font-weight)",
56
+ "line-height": "var(--mr-text-style-label-line-height)",
57
+ "letter-spacing": "var(--mr-text-style-label-letter-spacing)",
58
+ "color": "var(--mr-text-style-label-color)"
59
+ },
60
+ ".text-style-label-strong": {
61
+ "font-size": "var(--mr-text-style-label-strong-font-size)",
62
+ "font-weight": "var(--mr-text-style-label-strong-font-weight)",
63
+ "line-height": "var(--mr-text-style-label-strong-line-height)",
64
+ "letter-spacing": "var(--mr-text-style-label-strong-letter-spacing)",
65
+ "color": "var(--mr-text-style-label-strong-color)"
66
+ },
67
+ ".text-style-label-sm": {
68
+ "font-size": "var(--mr-text-style-label-sm-font-size)",
69
+ "font-weight": "var(--mr-text-style-label-sm-font-weight)",
70
+ "line-height": "var(--mr-text-style-label-sm-line-height)",
71
+ "letter-spacing": "var(--mr-text-style-label-sm-letter-spacing)",
72
+ "color": "var(--mr-text-style-label-sm-color)"
73
+ },
74
+ ".text-style-label-xs": {
75
+ "font-size": "var(--mr-text-style-label-xs-font-size)",
76
+ "font-weight": "var(--mr-text-style-label-xs-font-weight)",
77
+ "line-height": "var(--mr-text-style-label-xs-line-height)",
78
+ "letter-spacing": "var(--mr-text-style-label-xs-letter-spacing)",
79
+ "color": "var(--mr-text-style-label-xs-color)"
80
+ },
81
+ ".text-style-caption": {
82
+ "font-size": "var(--mr-text-style-caption-font-size)",
83
+ "font-weight": "var(--mr-text-style-caption-font-weight)",
84
+ "line-height": "var(--mr-text-style-caption-line-height)",
85
+ "letter-spacing": "var(--mr-text-style-caption-letter-spacing)",
86
+ "color": "var(--mr-text-style-caption-color)"
87
+ },
88
+ ".text-style-link": {
89
+ "font-size": "var(--mr-text-style-link-font-size)",
90
+ "font-weight": "var(--mr-text-style-link-font-weight)",
91
+ "line-height": "var(--mr-text-style-link-line-height)",
92
+ "letter-spacing": "var(--mr-text-style-link-letter-spacing)",
93
+ "color": "var(--mr-text-style-link-color)"
94
+ },
95
+ ".text-style-link-strong": {
96
+ "font-size": "var(--mr-text-style-link-strong-font-size)",
97
+ "font-weight": "var(--mr-text-style-link-strong-font-weight)",
98
+ "line-height": "var(--mr-text-style-link-strong-line-height)",
99
+ "letter-spacing": "var(--mr-text-style-link-strong-letter-spacing)",
100
+ "color": "var(--mr-text-style-link-strong-color)"
101
+ },
102
+ ".text-style-link-xs": {
103
+ "font-size": "var(--mr-text-style-link-xs-font-size)",
104
+ "font-weight": "var(--mr-text-style-link-xs-font-weight)",
105
+ "line-height": "var(--mr-text-style-link-xs-line-height)",
106
+ "letter-spacing": "var(--mr-text-style-link-xs-letter-spacing)",
107
+ "color": "var(--mr-text-style-link-xs-color)"
108
+ }
109
+ };
110
+
111
+ const preset = {
112
+ theme: { extend: {
113
+ "spacing": {
114
+ "0": "var(--mr-ref-dimension-spacing-scale-0)",
115
+ "1": "var(--mr-ref-dimension-spacing-scale-1)",
116
+ "2": "var(--mr-ref-dimension-spacing-scale-2)",
117
+ "3": "var(--mr-ref-dimension-spacing-scale-3)",
118
+ "4": "var(--mr-ref-dimension-spacing-scale-4)",
119
+ "5": "var(--mr-ref-dimension-spacing-scale-5)",
120
+ "6": "var(--mr-ref-dimension-spacing-scale-6)",
121
+ "7": "var(--mr-ref-dimension-spacing-scale-7)",
122
+ "8": "var(--mr-ref-dimension-spacing-scale-8)",
123
+ "9": "var(--mr-ref-dimension-spacing-scale-9)",
124
+ "10": "var(--mr-ref-dimension-spacing-scale-10)",
125
+ "11": "var(--mr-ref-dimension-spacing-scale-11)",
126
+ "12": "var(--mr-ref-dimension-spacing-scale-12)",
127
+ "13": "var(--mr-ref-dimension-spacing-scale-13)",
128
+ "14": "var(--mr-ref-dimension-spacing-scale-14)",
129
+ "15": "var(--mr-ref-dimension-spacing-scale-15)",
130
+ "16": "var(--mr-ref-dimension-spacing-scale-16)",
131
+ "17": "var(--mr-ref-dimension-spacing-scale-17)",
132
+ "18": "var(--mr-ref-dimension-spacing-scale-18)",
133
+ "19": "var(--mr-ref-dimension-spacing-scale-19)",
134
+ "20": "var(--mr-ref-dimension-spacing-scale-20)",
135
+ "21": "var(--mr-ref-dimension-spacing-scale-21)",
136
+ "22": "var(--mr-ref-dimension-spacing-scale-22)",
137
+ "23": "var(--mr-ref-dimension-spacing-scale-23)",
138
+ "24": "var(--mr-ref-dimension-spacing-scale-24)",
139
+ "25": "var(--mr-ref-dimension-spacing-scale-25)",
140
+ "26": "var(--mr-ref-dimension-spacing-scale-26)",
141
+ "27": "var(--mr-ref-dimension-spacing-scale-27)",
142
+ "28": "var(--mr-ref-dimension-spacing-scale-28)",
143
+ "29": "var(--mr-ref-dimension-spacing-scale-29)",
144
+ "30": "var(--mr-ref-dimension-spacing-scale-30)",
145
+ "1_5": "var(--mr-ref-dimension-spacing-scale-1-5)",
146
+ "2_5": "var(--mr-ref-dimension-spacing-scale-2-5)",
147
+ "3_5": "var(--mr-ref-dimension-spacing-scale-3-5)",
148
+ "4_5": "var(--mr-ref-dimension-spacing-scale-4-5)",
149
+ "5_5": "var(--mr-ref-dimension-spacing-scale-5-5)",
150
+ "6_5": "var(--mr-ref-dimension-spacing-scale-6-5)",
151
+ "7_5": "var(--mr-ref-dimension-spacing-scale-7-5)",
152
+ "0px": "var(--mr-ref-dimension-spacing-px-0)",
153
+ "1px": "var(--mr-ref-dimension-spacing-px-1)",
154
+ "2px": "var(--mr-ref-dimension-spacing-px-2)",
155
+ "3px": "var(--mr-ref-dimension-spacing-px-3)",
156
+ "5px": "var(--mr-ref-dimension-spacing-px-5)",
157
+ "6px": "var(--mr-ref-dimension-spacing-px-6)",
158
+ "7px": "var(--mr-ref-dimension-spacing-px-7)",
159
+ "8px": "var(--mr-ref-dimension-spacing-px-8)",
160
+ "9px": "var(--mr-ref-dimension-spacing-px-9)",
161
+ "10px": "var(--mr-ref-dimension-spacing-px-10)",
162
+ "control-padding-x": "var(--mr-spacing-control-padding-x)",
163
+ "control-padding-y": "var(--mr-spacing-control-padding-y)",
164
+ "layout-xs": "var(--mr-spacing-layout-xs)",
165
+ "layout-sm": "var(--mr-spacing-layout-sm)",
166
+ "layout-md": "var(--mr-spacing-layout-md)",
167
+ "layout-lg": "var(--mr-spacing-layout-lg)",
168
+ "layout-xl": "var(--mr-spacing-layout-xl)",
169
+ "card-padding": "var(--mr-spacing-card-padding)",
170
+ "dialog-padding": "var(--mr-spacing-dialog-padding)"
171
+ },
172
+ "colors": {
173
+ "canvas": "var(--mr-color-canvas)",
174
+ "surface": "var(--mr-color-surface)",
175
+ "inverseSurface": "var(--mr-color-inverse-surface)",
176
+ "subtle": "var(--mr-color-subtle)",
177
+ "input": "var(--mr-color-input)",
178
+ "text-primary": "var(--mr-color-text-primary)",
179
+ "text-secondary": "var(--mr-color-text-secondary)",
180
+ "text-tertiary": "var(--mr-color-text-tertiary)",
181
+ "text-title": "var(--mr-color-text-title)",
182
+ "text-inverse": "var(--mr-color-text-inverse)",
183
+ "text-inverseSuccess": "var(--mr-color-text-inverse-success)",
184
+ "text-inverseWarning": "var(--mr-color-text-inverse-warning)",
185
+ "text-warning": "var(--mr-color-text-warning)",
186
+ "text-danger": "var(--mr-color-text-danger)",
187
+ "text-success": "var(--mr-color-text-success)",
188
+ "text-link": "var(--mr-color-text-link)",
189
+ "brand-primary": "var(--mr-color-brand-primary)",
190
+ "brand-primaryAction": "var(--mr-color-brand-primary-action)",
191
+ "brand-onprimary": "var(--mr-color-brand-onprimary)",
192
+ "brand-primarySoft": "var(--mr-color-brand-primary-soft)",
193
+ "brand-primaryTint": "var(--mr-color-brand-primary-tint)",
194
+ "status-success": "var(--mr-color-status-success)",
195
+ "status-warning": "var(--mr-color-status-warning)",
196
+ "status-danger": "var(--mr-color-status-danger)",
197
+ "status-onstatus": "var(--mr-color-status-onstatus)",
198
+ "status-on-status": "var(--mr-color-status-on-status)",
199
+ "border-default": "var(--mr-color-border-default)",
200
+ "border-interactive": "var(--mr-color-border-interactive)",
201
+ "border-focus": "var(--mr-color-border-focus)",
202
+ "border-focusSoft": "var(--mr-color-border-focus-soft)",
203
+ "border-strong": "var(--mr-color-border-strong)",
204
+ "ai-tint": "var(--mr-color-ai-tint)",
205
+ "ai-ontint": "var(--mr-color-ai-ontint)",
206
+ "ai-gradient": "var(--mr-color-ai-gradient)",
207
+ "scrim": "var(--mr-color-scrim)"
208
+ },
209
+ "fontFamily": {
210
+ "sans": "var(--mr-typography-family-sans)",
211
+ "serif": "var(--mr-typography-family-serif)"
212
+ },
213
+ "fontSize": {
214
+ "micro": "var(--mr-typography-font-size-micro)",
215
+ "xs": "var(--mr-typography-font-size-xs)",
216
+ "dense": "var(--mr-typography-font-size-dense)",
217
+ "sm": "var(--mr-typography-font-size-sm)",
218
+ "base": "var(--mr-typography-font-size-base)",
219
+ "md": "var(--mr-typography-font-size-md)",
220
+ "lg": "var(--mr-typography-font-size-lg)",
221
+ "xl": "var(--mr-typography-font-size-xl)",
222
+ "h1": "var(--mr-typography-font-size-h1)"
223
+ },
224
+ "fontWeight": {
225
+ "regular": "var(--mr-typography-weight-regular)",
226
+ "medium": "var(--mr-typography-weight-medium)",
227
+ "semibold": "var(--mr-typography-weight-semibold)",
228
+ "bold": "var(--mr-typography-weight-bold)"
229
+ },
230
+ "lineHeight": {
231
+ "tight": "var(--mr-typography-line-height-tight)",
232
+ "base": "var(--mr-typography-line-height-base)",
233
+ "head": "var(--mr-typography-line-height-head)"
234
+ },
235
+ "letterSpacing": {
236
+ "normal": "var(--mr-typography-letter-spacing-normal)",
237
+ "tight": "var(--mr-typography-letter-spacing-tight)"
238
+ },
239
+ "borderRadius": {
240
+ "control": "var(--mr-shape-radius-control)",
241
+ "card": "var(--mr-shape-radius-card)",
242
+ "pill": "var(--mr-shape-radius-pill)"
243
+ },
244
+ "boxShadow": {
245
+ "raised": "var(--mr-elevation-raised)",
246
+ "overlay": "var(--mr-elevation-overlay)"
247
+ },
248
+ "backgroundImage": {
249
+ "tone-danger": "var(--mr-gradient-tone-danger)",
250
+ "tone-info": "var(--mr-gradient-tone-info)",
251
+ "tone-warning": "var(--mr-gradient-tone-warning)",
252
+ "tone-success": "var(--mr-gradient-tone-success)",
253
+ "tone-neutral": "var(--mr-gradient-tone-neutral)"
254
+ },
255
+ "transitionDuration": {
256
+ "interactive": "var(--mr-motion-duration-interactive)"
257
+ },
258
+ "transitionTimingFunction": {
259
+ "interactive": "var(--mr-motion-easing-interactive)"
260
+ },
261
+ "opacity": {
262
+ "disabled": "var(--mr-opacity-disabled)"
263
+ },
264
+ "zIndex": {
265
+ "dropdown": "var(--mr-z-dropdown)",
266
+ "modal": "var(--mr-z-modal)",
267
+ "toast": "var(--mr-z-toast)",
268
+ "tooltip": "var(--mr-z-tooltip)"
269
+ }
270
+ } },
271
+ plugins: [({ addUtilities }) => addUtilities(textStyles)],
272
+ };
273
+
274
+ export default preset;
package/dist/tailwind/theme.css CHANGED
@@ -55,6 +55,7 @@
55
55
  --color-text-primary: var(--mr-color-text-primary);
56
56
  --color-text-secondary: var(--mr-color-text-secondary);
57
57
  --color-text-tertiary: var(--mr-color-text-tertiary);
58
+ --color-text-title: var(--mr-color-text-title);
58
59
  --color-text-inverse: var(--mr-color-text-inverse);
59
60
  --color-text-inverseSuccess: var(--mr-color-text-inverse-success);
60
61
  --color-text-inverseWarning: var(--mr-color-text-inverse-warning);
@@ -103,6 +104,7 @@
103
104
  --tracking-tight: var(--mr-typography-letter-spacing-tight);
104
105
  --radius-control: var(--mr-shape-radius-control);
105
106
  --radius-card: var(--mr-shape-radius-card);
107
+ --radius-pill: var(--mr-shape-radius-pill);
106
108
  --spacing-control-padding-x: var(--mr-spacing-control-padding-x);
107
109
  --spacing-control-padding-y: var(--mr-spacing-control-padding-y);
108
110
  --spacing-layout-xs: var(--mr-spacing-layout-xs);
@@ -114,6 +116,11 @@
114
116
  --spacing-dialog-padding: var(--mr-spacing-dialog-padding);
115
117
  --shadow-raised: var(--mr-elevation-raised);
116
118
  --shadow-overlay: var(--mr-elevation-overlay);
119
+ --background-image-tone-danger: var(--mr-gradient-tone-danger);
120
+ --background-image-tone-info: var(--mr-gradient-tone-info);
121
+ --background-image-tone-warning: var(--mr-gradient-tone-warning);
122
+ --background-image-tone-success: var(--mr-gradient-tone-success);
123
+ --background-image-tone-neutral: var(--mr-gradient-tone-neutral);
117
124
  --transition-duration-interactive: var(--mr-motion-duration-interactive);
118
125
  --ease-interactive: var(--mr-motion-easing-interactive);
119
126
  --opacity-disabled: var(--mr-opacity-disabled);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mediaradar/design-tokens",
3
- "version": "2.10.0",
3
+ "version": "2.11.1",
4
4
  "main": "dist/js/tokens.js",
5
5
  "types": "dist/js/tokens.d.ts",
6
6
  "type": "module",