@mediaradar/design-tokens 2.12.0 → 3.1.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 (12) hide show
  1. package/dist/DESIGN.md +11 -8
  2. package/dist/css/ref.css +1 -0
  3. package/dist/css/spacing.css +6 -6
  4. package/dist/css/sys.css +6 -0
  5. package/dist/css/typography.css +5 -0
  6. package/dist/js/tokens.d.ts +8 -0
  7. package/dist/js/tokens.js +13 -6
  8. package/dist/tailwind/preset.cjs +8 -38
  9. package/dist/tailwind/preset.js +8 -38
  10. package/dist/tailwind/theme.css +1 -38
  11. package/dist/tailwind/typography.css +8 -0
  12. package/package.json +1 -1
package/dist/DESIGN.md CHANGED
@@ -55,7 +55,8 @@ Prefer `text-style-*` composite classes — they set size, weight, line-height,
55
55
  |---|---|---|
56
56
  | Page title | `text-style-heading-1` | h1, page-level titles |
57
57
  | Section heading | `text-style-heading-2` | h2, major section headers |
58
- | Sub-heading | `text-style-heading-3` | h3, card titles, panel headers |
58
+ | Sub-heading | `text-style-heading-3` | h3, panel headers |
59
+ | Card title | `text-style-card-title` | The title of every card: dashboard cards (`Card`'s `title`) and rail cards |
59
60
  | Large body | `text-style-body-lg` | Intro or featured paragraphs |
60
61
  | Body | `text-style-body` | Standard paragraphs, descriptions |
61
62
  | Small body | `text-style-body-sm` | Secondary content, sidebar text |
@@ -74,7 +75,7 @@ Prefer `text-style-*` composite classes — they set size, weight, line-height,
74
75
  ### Card
75
76
  ```tsx
76
77
  <div className="bg-surface rounded-card shadow-raised border border-border-default p-6">
77
- <h2 className="text-style-heading-3">Title</h2>
78
+ <h2 className="text-style-card-title">Title</h2>
78
79
  <p className="text-style-body text-text-secondary mt-2">Description</p>
79
80
  </div>
80
81
  ```
@@ -212,6 +213,7 @@ Key is the suffix for any Tailwind color utility: `bg-{key}`, `text-{key}`, `bor
212
213
  | --- | --- |
213
214
  | micro | 0.6875rem |
214
215
  | xs | 0.75rem |
216
+ | card-title | 0.7813rem |
215
217
  | dense | 0.8125rem |
216
218
  | sm | 0.875rem |
217
219
  | base | 1rem |
@@ -251,6 +253,7 @@ Key is the suffix for any Tailwind color utility: `bg-{key}`, `text-{key}`, `bor
251
253
  | text-style-heading-1 | 1.875rem | 600 | 1.5 | 0em | #363233 |
252
254
  | text-style-heading-2 | 1.25rem | 600 | 1.25 | 0em | #1f1b16 |
253
255
  | text-style-heading-3 | 0.875rem | 600 | 1.25 | 0em | #1f1b16 |
256
+ | text-style-card-title | 0.7813rem | 600 | 1.25 | 0em | #1f1b16 |
254
257
  | text-style-body-lg | 1.25rem | 700 | 1.25 | 0em | #1f1b16 |
255
258
  | text-style-body | 1.125rem | 400 | 1.5 | 0em | #1f1b16 |
256
259
  | text-style-body-sm | 0.875rem | 400 | 1.5 | 0em | #1f1b16 |
@@ -297,12 +300,12 @@ Tailwind: `p-{key}`, `m-{key}`, `gap-{key}`, `w-{key}`, `h-{key}`, etc. Integer
297
300
  | 22 | 5.5rem |
298
301
  | 23 | 5.75rem |
299
302
  | 24 | 6rem |
300
- | 25 | 7rem |
301
- | 26 | 8rem |
302
- | 27 | 9rem |
303
- | 28 | 10rem |
304
- | 29 | 11rem |
305
- | 30 | 12rem |
303
+ | 25 | 6.25rem |
304
+ | 26 | 6.5rem |
305
+ | 27 | 6.75rem |
306
+ | 28 | 7rem |
307
+ | 29 | 7.25rem |
308
+ | 30 | 7.5rem |
306
309
  | 1_5 | 0.375rem |
307
310
  | 2_5 | 0.625rem |
308
311
  | 3_5 | 0.875rem |
package/dist/css/ref.css CHANGED
@@ -345,6 +345,7 @@
345
345
  --mr-ref-typography-line-height-xl: 1.8;
346
346
  --mr-ref-typography-size-micro: 0.6875rem;
347
347
  --mr-ref-typography-size-xs: 0.75rem;
348
+ --mr-ref-typography-size-card-title: 0.78125rem;
348
349
  --mr-ref-typography-size-dense: 0.8125rem;
349
350
  --mr-ref-typography-size-sm: 0.875rem;
350
351
  --mr-ref-typography-size-base: 1rem;
package/dist/css/spacing.css CHANGED
@@ -24,12 +24,12 @@
24
24
  --mr-ref-dimension-spacing-scale-22: 5.5rem;
25
25
  --mr-ref-dimension-spacing-scale-23: 5.75rem;
26
26
  --mr-ref-dimension-spacing-scale-24: 6rem;
27
- --mr-ref-dimension-spacing-scale-25: 7rem;
28
- --mr-ref-dimension-spacing-scale-26: 8rem;
29
- --mr-ref-dimension-spacing-scale-27: 9rem;
30
- --mr-ref-dimension-spacing-scale-28: 10rem;
31
- --mr-ref-dimension-spacing-scale-29: 11rem;
32
- --mr-ref-dimension-spacing-scale-30: 12rem;
27
+ --mr-ref-dimension-spacing-scale-25: 6.25rem;
28
+ --mr-ref-dimension-spacing-scale-26: 6.5rem;
29
+ --mr-ref-dimension-spacing-scale-27: 6.75rem;
30
+ --mr-ref-dimension-spacing-scale-28: 7rem;
31
+ --mr-ref-dimension-spacing-scale-29: 7.25rem;
32
+ --mr-ref-dimension-spacing-scale-30: 7.5rem;
33
33
  --mr-ref-dimension-spacing-scale-1-5: 0.375rem;
34
34
  --mr-ref-dimension-spacing-scale-2-5: 0.625rem;
35
35
  --mr-ref-dimension-spacing-scale-3-5: 0.875rem;
package/dist/css/sys.css CHANGED
@@ -38,6 +38,7 @@
38
38
  --mr-typography-family-serif: var(--mr-ref-typography-family-display);
39
39
  --mr-typography-font-size-micro: var(--mr-ref-typography-size-micro);
40
40
  --mr-typography-font-size-xs: var(--mr-ref-typography-size-xs);
41
+ --mr-typography-font-size-card-title: var(--mr-ref-typography-size-card-title);
41
42
  --mr-typography-font-size-dense: var(--mr-ref-typography-size-dense);
42
43
  --mr-typography-font-size-sm: var(--mr-ref-typography-size-sm);
43
44
  --mr-typography-font-size-base: var(--mr-ref-typography-size-base);
@@ -96,6 +97,11 @@
96
97
  --mr-text-style-heading-3-line-height: var(--mr-typography-line-height-tight);
97
98
  --mr-text-style-heading-3-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
98
99
  --mr-text-style-heading-3-color: var(--mr-color-text-primary);
100
+ --mr-text-style-card-title-font-size: var(--mr-typography-font-size-card-title);
101
+ --mr-text-style-card-title-font-weight: var(--mr-ref-typography-weight-semibold);
102
+ --mr-text-style-card-title-line-height: var(--mr-typography-line-height-tight);
103
+ --mr-text-style-card-title-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
104
+ --mr-text-style-card-title-color: var(--mr-color-text-primary);
99
105
  --mr-text-style-body-lg-font-size: var(--mr-typography-font-size-lg);
100
106
  --mr-text-style-body-lg-font-weight: var(--mr-ref-typography-weight-bold);
101
107
  --mr-text-style-body-lg-line-height: var(--mr-typography-line-height-tight);
package/dist/css/typography.css CHANGED
@@ -14,6 +14,11 @@
14
14
  --mr-text-style-heading-3-line-height: var(--mr-typography-line-height-tight);
15
15
  --mr-text-style-heading-3-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
16
16
  --mr-text-style-heading-3-color: var(--mr-color-text-primary);
17
+ --mr-text-style-card-title-font-size: var(--mr-typography-font-size-card-title);
18
+ --mr-text-style-card-title-font-weight: var(--mr-ref-typography-weight-semibold);
19
+ --mr-text-style-card-title-line-height: var(--mr-typography-line-height-tight);
20
+ --mr-text-style-card-title-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
21
+ --mr-text-style-card-title-color: var(--mr-color-text-primary);
17
22
  --mr-text-style-body-lg-font-size: var(--mr-typography-font-size-lg);
18
23
  --mr-text-style-body-lg-font-weight: var(--mr-ref-typography-weight-bold);
19
24
  --mr-text-style-body-lg-line-height: var(--mr-typography-line-height-tight);
package/dist/js/tokens.d.ts CHANGED
@@ -432,6 +432,8 @@ export const mrRefTypographyLineHeightXl: number;
432
432
  /** 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. */
433
433
  export const mrRefTypographySizeMicro: number;
434
434
  export const mrRefTypographySizeXs: number;
435
+ /** 12.5px. The card title step, between xs (12px) and dense (13px) -- the title of every card, from dashboard cards (Card's title prop) to rail cards. Added because card titles were already set at 12.5px across the prototype and the style guide, but only as a hard-coded text-[12.5px] repeated per file, outside the scale, so the component catalog couldn't show it. */
436
+ export const mrRefTypographySizeCardTitle: number;
435
437
  /** 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. */
436
438
  export const mrRefTypographySizeDense: number;
437
439
  export const mrRefTypographySizeSm: number;
@@ -500,6 +502,7 @@ export const mrTypographyFamilySans: string;
500
502
  export const mrTypographyFamilySerif: string;
501
503
  export const mrTypographyFontSizeMicro: number;
502
504
  export const mrTypographyFontSizeXs: number;
505
+ export const mrTypographyFontSizeCardTitle: number;
503
506
  export const mrTypographyFontSizeDense: number;
504
507
  export const mrTypographyFontSizeSm: number;
505
508
  export const mrTypographyFontSizeBase: number;
@@ -558,6 +561,11 @@ export const mrTextStyleHeading_3FontWeight: number;
558
561
  export const mrTextStyleHeading_3LineHeight: number;
559
562
  export const mrTextStyleHeading_3LetterSpacing: number;
560
563
  export const mrTextStyleHeading_3Color: string;
564
+ export const mrTextStyleCardTitleFontSize: number;
565
+ export const mrTextStyleCardTitleFontWeight: number;
566
+ export const mrTextStyleCardTitleLineHeight: number;
567
+ export const mrTextStyleCardTitleLetterSpacing: number;
568
+ export const mrTextStyleCardTitleColor: string;
561
569
  export const mrTextStyleBodyLgFontSize: number;
562
570
  export const mrTextStyleBodyLgFontWeight: number;
563
571
  export const mrTextStyleBodyLgLineHeight: number;
package/dist/js/tokens.js CHANGED
@@ -390,12 +390,12 @@ export const mrRefDimensionSpacingScale_21 = 5.25;
390
390
  export const mrRefDimensionSpacingScale_22 = 5.5;
391
391
  export const mrRefDimensionSpacingScale_23 = 5.75;
392
392
  export const mrRefDimensionSpacingScale_24 = 6;
393
- export const mrRefDimensionSpacingScale_25 = 7;
394
- export const mrRefDimensionSpacingScale_26 = 8;
395
- export const mrRefDimensionSpacingScale_27 = 9;
396
- export const mrRefDimensionSpacingScale_28 = 10;
397
- export const mrRefDimensionSpacingScale_29 = 11;
398
- export const mrRefDimensionSpacingScale_30 = 12;
393
+ export const mrRefDimensionSpacingScale_25 = 6.25;
394
+ export const mrRefDimensionSpacingScale_26 = 6.5;
395
+ export const mrRefDimensionSpacingScale_27 = 6.75;
396
+ export const mrRefDimensionSpacingScale_28 = 7;
397
+ export const mrRefDimensionSpacingScale_29 = 7.25;
398
+ export const mrRefDimensionSpacingScale_30 = 7.5;
399
399
  export const mrRefDimensionSpacingScale_1_5 = 0.375;
400
400
  export const mrRefDimensionSpacingScale_2_5 = 0.625;
401
401
  export const mrRefDimensionSpacingScale_3_5 = 0.875;
@@ -440,6 +440,7 @@ export const mrRefTypographyLineHeightLg = 1.6;
440
440
  export const mrRefTypographyLineHeightXl = 1.8;
441
441
  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.
442
442
  export const mrRefTypographySizeXs = 0.75;
443
+ export const mrRefTypographySizeCardTitle = 0.78125; // 12.5px. The card title step, between xs (12px) and dense (13px) -- the title of every card, from dashboard cards (Card's title prop) to rail cards. Added because card titles were already set at 12.5px across the prototype and the style guide, but only as a hard-coded text-[12.5px] repeated per file, outside the scale, so the component catalog couldn't show it.
443
444
  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.
444
445
  export const mrRefTypographySizeSm = 0.875;
445
446
  export const mrRefTypographySizeBase = 1;
@@ -515,6 +516,7 @@ export const mrTypographyFamilySans =
515
516
  export const mrTypographyFamilySerif = "'Instrument Serif', Georgia, serif";
516
517
  export const mrTypographyFontSizeMicro = 0.6875;
517
518
  export const mrTypographyFontSizeXs = 0.75;
519
+ export const mrTypographyFontSizeCardTitle = 0.78125;
518
520
  export const mrTypographyFontSizeDense = 0.8125;
519
521
  export const mrTypographyFontSizeSm = 0.875;
520
522
  export const mrTypographyFontSizeBase = 1;
@@ -580,6 +582,11 @@ export const mrTextStyleHeading_3FontWeight = 600;
580
582
  export const mrTextStyleHeading_3LineHeight = 1.25;
581
583
  export const mrTextStyleHeading_3LetterSpacing = 0;
582
584
  export const mrTextStyleHeading_3Color = "#1f1b16";
585
+ export const mrTextStyleCardTitleFontSize = 0.78125;
586
+ export const mrTextStyleCardTitleFontWeight = 600;
587
+ export const mrTextStyleCardTitleLineHeight = 1.25;
588
+ export const mrTextStyleCardTitleLetterSpacing = 0;
589
+ export const mrTextStyleCardTitleColor = "#1f1b16";
583
590
  export const mrTextStyleBodyLgFontSize = 1.25;
584
591
  export const mrTextStyleBodyLgFontWeight = 700;
585
592
  export const mrTextStyleBodyLgLineHeight = 1.25;
package/dist/tailwind/preset.cjs CHANGED
@@ -22,6 +22,13 @@ const textStyles = {
22
22
  "letter-spacing": "var(--mr-text-style-heading-3-letter-spacing)",
23
23
  "color": "var(--mr-text-style-heading-3-color)"
24
24
  },
25
+ ".text-style-card-title": {
26
+ "font-size": "var(--mr-text-style-card-title-font-size)",
27
+ "font-weight": "var(--mr-text-style-card-title-font-weight)",
28
+ "line-height": "var(--mr-text-style-card-title-line-height)",
29
+ "letter-spacing": "var(--mr-text-style-card-title-letter-spacing)",
30
+ "color": "var(--mr-text-style-card-title-color)"
31
+ },
25
32
  ".text-style-body-lg": {
26
33
  "font-size": "var(--mr-text-style-body-lg-font-size)",
27
34
  "font-weight": "var(--mr-text-style-body-lg-font-weight)",
@@ -111,44 +118,6 @@ const textStyles = {
111
118
  const preset = {
112
119
  theme: { extend: {
113
120
  "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
121
  "0px": "var(--mr-ref-dimension-spacing-px-0)",
153
122
  "1px": "var(--mr-ref-dimension-spacing-px-1)",
154
123
  "2px": "var(--mr-ref-dimension-spacing-px-2)",
@@ -220,6 +189,7 @@ const preset = {
220
189
  "fontSize": {
221
190
  "micro": "var(--mr-typography-font-size-micro)",
222
191
  "xs": "var(--mr-typography-font-size-xs)",
192
+ "card-title": "var(--mr-typography-font-size-card-title)",
223
193
  "dense": "var(--mr-typography-font-size-dense)",
224
194
  "sm": "var(--mr-typography-font-size-sm)",
225
195
  "base": "var(--mr-typography-font-size-base)",
package/dist/tailwind/preset.js CHANGED
@@ -22,6 +22,13 @@ const textStyles = {
22
22
  "letter-spacing": "var(--mr-text-style-heading-3-letter-spacing)",
23
23
  "color": "var(--mr-text-style-heading-3-color)"
24
24
  },
25
+ ".text-style-card-title": {
26
+ "font-size": "var(--mr-text-style-card-title-font-size)",
27
+ "font-weight": "var(--mr-text-style-card-title-font-weight)",
28
+ "line-height": "var(--mr-text-style-card-title-line-height)",
29
+ "letter-spacing": "var(--mr-text-style-card-title-letter-spacing)",
30
+ "color": "var(--mr-text-style-card-title-color)"
31
+ },
25
32
  ".text-style-body-lg": {
26
33
  "font-size": "var(--mr-text-style-body-lg-font-size)",
27
34
  "font-weight": "var(--mr-text-style-body-lg-font-weight)",
@@ -111,44 +118,6 @@ const textStyles = {
111
118
  const preset = {
112
119
  theme: { extend: {
113
120
  "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
121
  "0px": "var(--mr-ref-dimension-spacing-px-0)",
153
122
  "1px": "var(--mr-ref-dimension-spacing-px-1)",
154
123
  "2px": "var(--mr-ref-dimension-spacing-px-2)",
@@ -220,6 +189,7 @@ const preset = {
220
189
  "fontSize": {
221
190
  "micro": "var(--mr-typography-font-size-micro)",
222
191
  "xs": "var(--mr-typography-font-size-xs)",
192
+ "card-title": "var(--mr-typography-font-size-card-title)",
223
193
  "dense": "var(--mr-typography-font-size-dense)",
224
194
  "sm": "var(--mr-typography-font-size-sm)",
225
195
  "base": "var(--mr-typography-font-size-base)",
package/dist/tailwind/theme.css CHANGED
@@ -1,42 +1,4 @@
1
1
  @theme inline {
2
- --spacing-0: var(--mr-ref-dimension-spacing-scale-0);
3
- --spacing-1: var(--mr-ref-dimension-spacing-scale-1);
4
- --spacing-2: var(--mr-ref-dimension-spacing-scale-2);
5
- --spacing-3: var(--mr-ref-dimension-spacing-scale-3);
6
- --spacing-4: var(--mr-ref-dimension-spacing-scale-4);
7
- --spacing-5: var(--mr-ref-dimension-spacing-scale-5);
8
- --spacing-6: var(--mr-ref-dimension-spacing-scale-6);
9
- --spacing-7: var(--mr-ref-dimension-spacing-scale-7);
10
- --spacing-8: var(--mr-ref-dimension-spacing-scale-8);
11
- --spacing-9: var(--mr-ref-dimension-spacing-scale-9);
12
- --spacing-10: var(--mr-ref-dimension-spacing-scale-10);
13
- --spacing-11: var(--mr-ref-dimension-spacing-scale-11);
14
- --spacing-12: var(--mr-ref-dimension-spacing-scale-12);
15
- --spacing-13: var(--mr-ref-dimension-spacing-scale-13);
16
- --spacing-14: var(--mr-ref-dimension-spacing-scale-14);
17
- --spacing-15: var(--mr-ref-dimension-spacing-scale-15);
18
- --spacing-16: var(--mr-ref-dimension-spacing-scale-16);
19
- --spacing-17: var(--mr-ref-dimension-spacing-scale-17);
20
- --spacing-18: var(--mr-ref-dimension-spacing-scale-18);
21
- --spacing-19: var(--mr-ref-dimension-spacing-scale-19);
22
- --spacing-20: var(--mr-ref-dimension-spacing-scale-20);
23
- --spacing-21: var(--mr-ref-dimension-spacing-scale-21);
24
- --spacing-22: var(--mr-ref-dimension-spacing-scale-22);
25
- --spacing-23: var(--mr-ref-dimension-spacing-scale-23);
26
- --spacing-24: var(--mr-ref-dimension-spacing-scale-24);
27
- --spacing-25: var(--mr-ref-dimension-spacing-scale-25);
28
- --spacing-26: var(--mr-ref-dimension-spacing-scale-26);
29
- --spacing-27: var(--mr-ref-dimension-spacing-scale-27);
30
- --spacing-28: var(--mr-ref-dimension-spacing-scale-28);
31
- --spacing-29: var(--mr-ref-dimension-spacing-scale-29);
32
- --spacing-30: var(--mr-ref-dimension-spacing-scale-30);
33
- --spacing-1_5: var(--mr-ref-dimension-spacing-scale-1-5);
34
- --spacing-2_5: var(--mr-ref-dimension-spacing-scale-2-5);
35
- --spacing-3_5: var(--mr-ref-dimension-spacing-scale-3-5);
36
- --spacing-4_5: var(--mr-ref-dimension-spacing-scale-4-5);
37
- --spacing-5_5: var(--mr-ref-dimension-spacing-scale-5-5);
38
- --spacing-6_5: var(--mr-ref-dimension-spacing-scale-6-5);
39
- --spacing-7_5: var(--mr-ref-dimension-spacing-scale-7-5);
40
2
  --spacing-0px: var(--mr-ref-dimension-spacing-px-0);
41
3
  --spacing-1px: var(--mr-ref-dimension-spacing-px-1);
42
4
  --spacing-2px: var(--mr-ref-dimension-spacing-px-2);
@@ -86,6 +48,7 @@
86
48
  --font-serif: var(--mr-typography-family-serif);
87
49
  --text-micro: var(--mr-typography-font-size-micro);
88
50
  --text-xs: var(--mr-typography-font-size-xs);
51
+ --text-card-title: var(--mr-typography-font-size-card-title);
89
52
  --text-dense: var(--mr-typography-font-size-dense);
90
53
  --text-sm: var(--mr-typography-font-size-sm);
91
54
  --text-base: var(--mr-typography-font-size-base);
package/dist/tailwind/typography.css CHANGED
@@ -22,6 +22,14 @@
22
22
  color: var(--mr-text-style-heading-3-color);
23
23
  }
24
24
 
25
+ @utility text-style-card-title {
26
+ font-size: var(--mr-text-style-card-title-font-size);
27
+ font-weight: var(--mr-text-style-card-title-font-weight);
28
+ line-height: var(--mr-text-style-card-title-line-height);
29
+ letter-spacing: var(--mr-text-style-card-title-letter-spacing);
30
+ color: var(--mr-text-style-card-title-color);
31
+ }
32
+
25
33
  @utility text-style-body-lg {
26
34
  font-size: var(--mr-text-style-body-lg-font-size);
27
35
  font-weight: var(--mr-text-style-body-lg-font-weight);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mediaradar/design-tokens",
3
- "version": "2.12.0",
3
+ "version": "3.1.0",
4
4
  "main": "dist/js/tokens.js",
5
5
  "types": "dist/js/tokens.d.ts",
6
6
  "type": "module",