@mediaradar/design-tokens 3.0.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 (11) hide show
  1. package/dist/DESIGN.md +5 -2
  2. package/dist/css/ref.css +1 -0
  3. package/dist/css/sys.css +6 -0
  4. package/dist/css/typography.css +5 -0
  5. package/dist/js/tokens.d.ts +8 -0
  6. package/dist/js/tokens.js +7 -0
  7. package/dist/tailwind/preset.cjs +8 -0
  8. package/dist/tailwind/preset.js +8 -0
  9. package/dist/tailwind/theme.css +1 -0
  10. package/dist/tailwind/typography.css +8 -0
  11. 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 |
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/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
@@ -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)",
@@ -182,6 +189,7 @@ const preset = {
182
189
  "fontSize": {
183
190
  "micro": "var(--mr-typography-font-size-micro)",
184
191
  "xs": "var(--mr-typography-font-size-xs)",
192
+ "card-title": "var(--mr-typography-font-size-card-title)",
185
193
  "dense": "var(--mr-typography-font-size-dense)",
186
194
  "sm": "var(--mr-typography-font-size-sm)",
187
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)",
@@ -182,6 +189,7 @@ const preset = {
182
189
  "fontSize": {
183
190
  "micro": "var(--mr-typography-font-size-micro)",
184
191
  "xs": "var(--mr-typography-font-size-xs)",
192
+ "card-title": "var(--mr-typography-font-size-card-title)",
185
193
  "dense": "var(--mr-typography-font-size-dense)",
186
194
  "sm": "var(--mr-typography-font-size-sm)",
187
195
  "base": "var(--mr-typography-font-size-base)",
package/dist/tailwind/theme.css CHANGED
@@ -48,6 +48,7 @@
48
48
  --font-serif: var(--mr-typography-family-serif);
49
49
  --text-micro: var(--mr-typography-font-size-micro);
50
50
  --text-xs: var(--mr-typography-font-size-xs);
51
+ --text-card-title: var(--mr-typography-font-size-card-title);
51
52
  --text-dense: var(--mr-typography-font-size-dense);
52
53
  --text-sm: var(--mr-typography-font-size-sm);
53
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": "3.0.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",