@primer/primitives 11.4.0-rc.9888784 → 11.4.0-rc.b3c35298

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 (17) hide show
  1. package/dist/css/base/typography/typography.css +5 -0
  2. package/dist/css/functional/typography/typography.css +11 -11
  3. package/dist/css/primitives.css +0 -1
  4. package/dist/docs/base/typography/typography.json +145 -0
  5. package/dist/docs/functional/typography/typography.json +26 -26
  6. package/dist/fallbacks/base/typography/typography.json +6 -1
  7. package/dist/fallbacks/functional/typography/typography.json +15 -15
  8. package/dist/figma/typography/typography.json +65 -19
  9. package/dist/styleLint/base/typography/typography.json +145 -0
  10. package/dist/styleLint/functional/typography/typography.json +26 -26
  11. package/package.json +1 -2
  12. package/src/tokens/base/typography/typography.json5 +57 -0
  13. package/src/tokens/functional/typography/typography.json5 +11 -11
  14. package/dist/css/functional/motion/motion.css +0 -18
  15. package/dist/docs/functional/motion/motion.json +0 -250
  16. package/dist/fallbacks/functional/motion/motion.json +0 -18
  17. package/dist/styleLint/functional/motion/motion.json +0 -250
package/dist/css/base/typography/typography.css CHANGED
@@ -1,4 +1,9 @@
1
1
  :root {
2
+ --base-text-lineHeight-loose: 1.75; /** Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility. */
3
+ --base-text-lineHeight-normal: 1.5; /** Default choice for body text and general UI content. Provides optimal readability for paragraphs, descriptions, and most multi-line text. Use when unsure which line-height to pick. */
4
+ --base-text-lineHeight-relaxed: 1.625; /** Use for longer-form content, smaller text sizes (12-13px), or when increased readability is desired. Good for text that needs extra breathing room. */
5
+ --base-text-lineHeight-snug: 1.375; /** Use for display text, large headings, or short multi-line text where moderate density is needed. Good for hero sections and marketing headlines. */
6
+ --base-text-lineHeight-tight: 1.25; /** Use for single-line text in compact UI elements like labels, badges, buttons, or captions where vertical space is limited. Not recommended for multi-line body text due to reduced readability. */
2
7
  --base-text-weight-light: 300;
3
8
  --base-text-weight-medium: 500;
4
9
  --base-text-weight-normal: 400;
package/dist/css/functional/typography/typography.css CHANGED
@@ -3,34 +3,34 @@
3
3
  --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
4
4
  --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
5
5
  --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
6
- --text-body-lineHeight-large: 1.5;
7
- --text-body-lineHeight-medium: 1.42857;
8
- --text-body-lineHeight-small: 1.66667;
9
6
  --text-body-size-large: 1rem;
10
7
  --text-body-size-medium: 0.875rem;
11
8
  --text-body-size-small: 0.75rem;
12
- --text-caption-lineHeight: 1.3333;
13
9
  --text-caption-size: 0.75rem;
14
- --text-codeBlock-lineHeight: 1.5385;
15
10
  --text-codeBlock-size: 0.8125rem;
16
11
  --text-codeInline-size: 0.9285em;
17
- --text-display-lineBoxHeight: 1.4;
18
- --text-display-lineHeight: 1.4;
19
12
  --text-display-size: 2.5rem;
20
- --text-subtitle-lineHeight: 1.6;
21
13
  --text-subtitle-size: 1.25rem;
22
- --text-title-lineHeight-large: 1.5;
23
- --text-title-lineHeight-medium: 1.6;
24
- --text-title-lineHeight-small: 1.5;
25
14
  --text-title-size-large: 2rem;
26
15
  --text-title-size-medium: 1.25rem;
27
16
  --text-title-size-small: 1rem;
17
+ --text-body-lineHeight-large: var(--base-text-lineHeight-normal);
18
+ --text-body-lineHeight-medium: var(--base-text-lineHeight-normal);
19
+ --text-body-lineHeight-small: var(--base-text-lineHeight-relaxed);
28
20
  --text-body-weight: var(--base-text-weight-normal);
21
+ --text-caption-lineHeight: var(--base-text-lineHeight-tight);
29
22
  --text-caption-weight: var(--base-text-weight-normal);
23
+ --text-codeBlock-lineHeight: var(--base-text-lineHeight-normal);
30
24
  --text-codeBlock-weight: var(--base-text-weight-normal);
31
25
  --text-codeInline-weight: var(--base-text-weight-normal);
26
+ --text-display-lineBoxHeight: var(--base-text-lineHeight-snug);
27
+ --text-display-lineHeight: var(--base-text-lineHeight-snug);
32
28
  --text-display-weight: var(--base-text-weight-medium);
29
+ --text-subtitle-lineHeight: var(--base-text-lineHeight-relaxed);
33
30
  --text-subtitle-weight: var(--base-text-weight-normal);
31
+ --text-title-lineHeight-large: var(--base-text-lineHeight-normal);
32
+ --text-title-lineHeight-medium: var(--base-text-lineHeight-relaxed);
33
+ --text-title-lineHeight-small: var(--base-text-lineHeight-normal);
34
34
  --text-title-weight-large: var(--base-text-weight-semibold);
35
35
  --text-title-weight-medium: var(--base-text-weight-semibold);
36
36
  --text-title-weight-small: var(--base-text-weight-semibold);
package/dist/css/primitives.css CHANGED
@@ -1,7 +1,6 @@
1
1
  @import './base/motion/motion.css';
2
2
  @import './base/size/size.css';
3
3
  @import './base/typography/typography.css';
4
- @import './functional/motion/motion.css';
5
4
  @import './functional/size/border.css';
6
5
  @import './functional/size/breakpoints.css';
7
6
  @import './functional/size/size-coarse.css';
package/dist/docs/base/typography/typography.json CHANGED
@@ -1,4 +1,149 @@
1
1
  {
2
+ "base-text-lineHeight-loose": {
3
+ "key": "{base.text.lineHeight.loose}",
4
+ "$extensions": {
5
+ "org.primer.figma": {
6
+ "collection": "typography",
7
+ "scopes": ["lineHeight"]
8
+ }
9
+ },
10
+ "filePath": "src/tokens/base/typography/typography.json5",
11
+ "isSource": true,
12
+ "original": {
13
+ "$value": 1.75,
14
+ "$type": "number",
15
+ "$description": "Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility.",
16
+ "$extensions": {
17
+ "org.primer.figma": {
18
+ "collection": "typography",
19
+ "scopes": ["lineHeight"]
20
+ }
21
+ },
22
+ "key": "{base.text.lineHeight.loose}"
23
+ },
24
+ "name": "base-text-lineHeight-loose",
25
+ "attributes": {},
26
+ "path": ["base", "text", "lineHeight", "loose"],
27
+ "value": 1.75,
28
+ "type": "number",
29
+ "description": "Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility."
30
+ },
31
+ "base-text-lineHeight-normal": {
32
+ "key": "{base.text.lineHeight.normal}",
33
+ "$extensions": {
34
+ "org.primer.figma": {
35
+ "collection": "typography",
36
+ "scopes": ["lineHeight"]
37
+ }
38
+ },
39
+ "filePath": "src/tokens/base/typography/typography.json5",
40
+ "isSource": true,
41
+ "original": {
42
+ "$value": 1.5,
43
+ "$type": "number",
44
+ "$description": "Default choice for body text and general UI content. Provides optimal readability for paragraphs, descriptions, and most multi-line text. Use when unsure which line-height to pick.",
45
+ "$extensions": {
46
+ "org.primer.figma": {
47
+ "collection": "typography",
48
+ "scopes": ["lineHeight"]
49
+ }
50
+ },
51
+ "key": "{base.text.lineHeight.normal}"
52
+ },
53
+ "name": "base-text-lineHeight-normal",
54
+ "attributes": {},
55
+ "path": ["base", "text", "lineHeight", "normal"],
56
+ "value": 1.5,
57
+ "type": "number",
58
+ "description": "Default choice for body text and general UI content. Provides optimal readability for paragraphs, descriptions, and most multi-line text. Use when unsure which line-height to pick."
59
+ },
60
+ "base-text-lineHeight-relaxed": {
61
+ "key": "{base.text.lineHeight.relaxed}",
62
+ "$extensions": {
63
+ "org.primer.figma": {
64
+ "collection": "typography",
65
+ "scopes": ["lineHeight"]
66
+ }
67
+ },
68
+ "filePath": "src/tokens/base/typography/typography.json5",
69
+ "isSource": true,
70
+ "original": {
71
+ "$value": 1.625,
72
+ "$type": "number",
73
+ "$description": "Use for longer-form content, smaller text sizes (12-13px), or when increased readability is desired. Good for text that needs extra breathing room.",
74
+ "$extensions": {
75
+ "org.primer.figma": {
76
+ "collection": "typography",
77
+ "scopes": ["lineHeight"]
78
+ }
79
+ },
80
+ "key": "{base.text.lineHeight.relaxed}"
81
+ },
82
+ "name": "base-text-lineHeight-relaxed",
83
+ "attributes": {},
84
+ "path": ["base", "text", "lineHeight", "relaxed"],
85
+ "value": 1.625,
86
+ "type": "number",
87
+ "description": "Use for longer-form content, smaller text sizes (12-13px), or when increased readability is desired. Good for text that needs extra breathing room."
88
+ },
89
+ "base-text-lineHeight-snug": {
90
+ "key": "{base.text.lineHeight.snug}",
91
+ "$extensions": {
92
+ "org.primer.figma": {
93
+ "collection": "typography",
94
+ "scopes": ["lineHeight"]
95
+ }
96
+ },
97
+ "filePath": "src/tokens/base/typography/typography.json5",
98
+ "isSource": true,
99
+ "original": {
100
+ "$value": 1.375,
101
+ "$type": "number",
102
+ "$description": "Use for display text, large headings, or short multi-line text where moderate density is needed. Good for hero sections and marketing headlines.",
103
+ "$extensions": {
104
+ "org.primer.figma": {
105
+ "collection": "typography",
106
+ "scopes": ["lineHeight"]
107
+ }
108
+ },
109
+ "key": "{base.text.lineHeight.snug}"
110
+ },
111
+ "name": "base-text-lineHeight-snug",
112
+ "attributes": {},
113
+ "path": ["base", "text", "lineHeight", "snug"],
114
+ "value": 1.375,
115
+ "type": "number",
116
+ "description": "Use for display text, large headings, or short multi-line text where moderate density is needed. Good for hero sections and marketing headlines."
117
+ },
118
+ "base-text-lineHeight-tight": {
119
+ "key": "{base.text.lineHeight.tight}",
120
+ "$extensions": {
121
+ "org.primer.figma": {
122
+ "collection": "typography",
123
+ "scopes": ["lineHeight"]
124
+ }
125
+ },
126
+ "filePath": "src/tokens/base/typography/typography.json5",
127
+ "isSource": true,
128
+ "original": {
129
+ "$value": 1.25,
130
+ "$type": "number",
131
+ "$description": "Use for single-line text in compact UI elements like labels, badges, buttons, or captions where vertical space is limited. Not recommended for multi-line body text due to reduced readability.",
132
+ "$extensions": {
133
+ "org.primer.figma": {
134
+ "collection": "typography",
135
+ "scopes": ["lineHeight"]
136
+ }
137
+ },
138
+ "key": "{base.text.lineHeight.tight}"
139
+ },
140
+ "name": "base-text-lineHeight-tight",
141
+ "attributes": {},
142
+ "path": ["base", "text", "lineHeight", "tight"],
143
+ "value": 1.25,
144
+ "type": "number",
145
+ "description": "Use for single-line text in compact UI elements like labels, badges, buttons, or captions where vertical space is limited. Not recommended for multi-line body text due to reduced readability."
146
+ },
2
147
  "base-text-weight-light": {
3
148
  "key": "{base.text.weight.light}",
4
149
  "$extensions": {
package/dist/docs/functional/typography/typography.json CHANGED
@@ -121,7 +121,7 @@
121
121
  "filePath": "src/tokens/functional/typography/typography.json5",
122
122
  "isSource": true,
123
123
  "original": {
124
- "$value": 1.5,
124
+ "$value": "{base.text.lineHeight.normal}",
125
125
  "$type": "number",
126
126
  "$extensions": {
127
127
  "org.primer.data": {
@@ -154,7 +154,7 @@
154
154
  "filePath": "src/tokens/functional/typography/typography.json5",
155
155
  "isSource": true,
156
156
  "original": {
157
- "$value": 1.42857,
157
+ "$value": "{base.text.lineHeight.normal}",
158
158
  "$type": "number",
159
159
  "$extensions": {
160
160
  "org.primer.data": {
@@ -170,7 +170,7 @@
170
170
  "name": "text-body-lineHeight-medium",
171
171
  "attributes": {},
172
172
  "path": ["text", "body", "lineHeight", "medium"],
173
- "value": 1.42857,
173
+ "value": 1.5,
174
174
  "type": "number"
175
175
  },
176
176
  "text-body-lineHeight-small": {
@@ -187,7 +187,7 @@
187
187
  "filePath": "src/tokens/functional/typography/typography.json5",
188
188
  "isSource": true,
189
189
  "original": {
190
- "$value": 1.66667,
190
+ "$value": "{base.text.lineHeight.relaxed}",
191
191
  "$type": "number",
192
192
  "$extensions": {
193
193
  "org.primer.data": {
@@ -203,7 +203,7 @@
203
203
  "name": "text-body-lineHeight-small",
204
204
  "attributes": {},
205
205
  "path": ["text", "body", "lineHeight", "small"],
206
- "value": 1.66667,
206
+ "value": 1.625,
207
207
  "type": "number"
208
208
  },
209
209
  "text-body-shorthand-large": {
@@ -246,7 +246,7 @@
246
246
  "name": "text-body-shorthand-medium",
247
247
  "attributes": {},
248
248
  "path": ["text", "body", "shorthand", "medium"],
249
- "value": "400 0.875rem/1.42857 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
249
+ "value": "400 0.875rem/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
250
250
  "type": "typography",
251
251
  "description": "Default UI font. Most commonly used for body text."
252
252
  },
@@ -268,7 +268,7 @@
268
268
  "name": "text-body-shorthand-small",
269
269
  "attributes": {},
270
270
  "path": ["text", "body", "shorthand", "small"],
271
- "value": "400 0.75rem/1.66667 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
271
+ "value": "400 0.75rem/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
272
272
  "type": "typography",
273
273
  "description": "Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px."
274
274
  },
@@ -394,7 +394,7 @@
394
394
  "filePath": "src/tokens/functional/typography/typography.json5",
395
395
  "isSource": true,
396
396
  "original": {
397
- "$value": 1.3333,
397
+ "$value": "{base.text.lineHeight.tight}",
398
398
  "$type": "number",
399
399
  "$extensions": {
400
400
  "org.primer.data": {
@@ -410,7 +410,7 @@
410
410
  "name": "text-caption-lineHeight",
411
411
  "attributes": {},
412
412
  "path": ["text", "caption", "lineHeight"],
413
- "value": 1.3333,
413
+ "value": 1.25,
414
414
  "type": "number"
415
415
  },
416
416
  "text-caption-shorthand": {
@@ -431,7 +431,7 @@
431
431
  "name": "text-caption-shorthand",
432
432
  "attributes": {},
433
433
  "path": ["text", "caption", "shorthand"],
434
- "value": "400 0.75rem/1.3333 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
434
+ "value": "400 0.75rem/1.25 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
435
435
  "type": "typography",
436
436
  "description": "Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements."
437
437
  },
@@ -503,7 +503,7 @@
503
503
  "filePath": "src/tokens/functional/typography/typography.json5",
504
504
  "isSource": true,
505
505
  "original": {
506
- "$value": 1.5385,
506
+ "$value": "{base.text.lineHeight.normal}",
507
507
  "$type": "number",
508
508
  "$extensions": {
509
509
  "org.primer.data": {
@@ -519,7 +519,7 @@
519
519
  "name": "text-codeBlock-lineHeight",
520
520
  "attributes": {},
521
521
  "path": ["text", "codeBlock", "lineHeight"],
522
- "value": 1.5385,
522
+ "value": 1.5,
523
523
  "type": "number"
524
524
  },
525
525
  "text-codeBlock-shorthand": {
@@ -540,7 +540,7 @@
540
540
  "name": "text-codeBlock-shorthand",
541
541
  "attributes": {},
542
542
  "path": ["text", "codeBlock", "shorthand"],
543
- "value": "400 0.8125rem/1.5385 ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
543
+ "value": "400 0.8125rem/1.5 ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
544
544
  "type": "typography",
545
545
  "description": "Default style for rendering code blocks."
546
546
  },
@@ -688,7 +688,7 @@
688
688
  "filePath": "src/tokens/functional/typography/typography.json5",
689
689
  "isSource": true,
690
690
  "original": {
691
- "$value": 1.4,
691
+ "$value": "{base.text.lineHeight.snug}",
692
692
  "$type": "number",
693
693
  "$extensions": {
694
694
  "org.primer.data": {
@@ -705,7 +705,7 @@
705
705
  "name": "text-display-lineBoxHeight",
706
706
  "attributes": {},
707
707
  "path": ["text", "display", "lineBoxHeight"],
708
- "value": 1.4,
708
+ "value": 1.375,
709
709
  "type": "number"
710
710
  },
711
711
  "text-display-lineHeight": {
@@ -722,7 +722,7 @@
722
722
  "filePath": "src/tokens/functional/typography/typography.json5",
723
723
  "isSource": true,
724
724
  "original": {
725
- "$value": 1.4,
725
+ "$value": "{base.text.lineHeight.snug}",
726
726
  "$type": "number",
727
727
  "$extensions": {
728
728
  "org.primer.data": {
@@ -738,7 +738,7 @@
738
738
  "name": "text-display-lineHeight",
739
739
  "attributes": {},
740
740
  "path": ["text", "display", "lineHeight"],
741
- "value": 1.4,
741
+ "value": 1.375,
742
742
  "type": "number"
743
743
  },
744
744
  "text-display-shorthand": {
@@ -759,7 +759,7 @@
759
759
  "name": "text-display-shorthand",
760
760
  "attributes": {},
761
761
  "path": ["text", "display", "shorthand"],
762
- "value": "500 2.5rem/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
762
+ "value": "500 2.5rem/1.375 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
763
763
  "type": "typography",
764
764
  "description": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports."
765
765
  },
@@ -831,7 +831,7 @@
831
831
  "filePath": "src/tokens/functional/typography/typography.json5",
832
832
  "isSource": true,
833
833
  "original": {
834
- "$value": 1.6,
834
+ "$value": "{base.text.lineHeight.relaxed}",
835
835
  "$type": "number",
836
836
  "$extensions": {
837
837
  "org.primer.data": {
@@ -847,7 +847,7 @@
847
847
  "name": "text-subtitle-lineHeight",
848
848
  "attributes": {},
849
849
  "path": ["text", "subtitle", "lineHeight"],
850
- "value": 1.6,
850
+ "value": 1.625,
851
851
  "type": "number"
852
852
  },
853
853
  "text-subtitle-shorthand": {
@@ -868,7 +868,7 @@
868
868
  "name": "text-subtitle-shorthand",
869
869
  "attributes": {},
870
870
  "path": ["text", "subtitle", "shorthand"],
871
- "value": "400 1.25rem/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
871
+ "value": "400 1.25rem/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
872
872
  "type": "typography",
873
873
  "description": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium)."
874
874
  },
@@ -940,7 +940,7 @@
940
940
  "filePath": "src/tokens/functional/typography/typography.json5",
941
941
  "isSource": true,
942
942
  "original": {
943
- "$value": 1.5,
943
+ "$value": "{base.text.lineHeight.normal}",
944
944
  "$type": "number",
945
945
  "$extensions": {
946
946
  "org.primer.data": {
@@ -973,7 +973,7 @@
973
973
  "filePath": "src/tokens/functional/typography/typography.json5",
974
974
  "isSource": true,
975
975
  "original": {
976
- "$value": 1.6,
976
+ "$value": "{base.text.lineHeight.relaxed}",
977
977
  "$type": "number",
978
978
  "$extensions": {
979
979
  "org.primer.data": {
@@ -989,7 +989,7 @@
989
989
  "name": "text-title-lineHeight-medium",
990
990
  "attributes": {},
991
991
  "path": ["text", "title", "lineHeight", "medium"],
992
- "value": 1.6,
992
+ "value": 1.625,
993
993
  "type": "number"
994
994
  },
995
995
  "text-title-lineHeight-small": {
@@ -1006,7 +1006,7 @@
1006
1006
  "filePath": "src/tokens/functional/typography/typography.json5",
1007
1007
  "isSource": true,
1008
1008
  "original": {
1009
- "$value": 1.5,
1009
+ "$value": "{base.text.lineHeight.normal}",
1010
1010
  "$type": "number",
1011
1011
  "$extensions": {
1012
1012
  "org.primer.data": {
@@ -1065,7 +1065,7 @@
1065
1065
  "name": "text-title-shorthand-medium",
1066
1066
  "attributes": {},
1067
1067
  "path": ["text", "title", "shorthand", "medium"],
1068
- "value": "600 1.25rem/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1068
+ "value": "600 1.25rem/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1069
1069
  "type": "typography",
1070
1070
  "description": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition."
1071
1071
  },
package/dist/fallbacks/base/typography/typography.json CHANGED
@@ -2,5 +2,10 @@
2
2
  "--base-text-weight-light": 300,
3
3
  "--base-text-weight-normal": 400,
4
4
  "--base-text-weight-medium": 500,
5
- "--base-text-weight-semibold": 600
5
+ "--base-text-weight-semibold": 600,
6
+ "--base-text-lineHeight-tight": 1.25,
7
+ "--base-text-lineHeight-snug": 1.375,
8
+ "--base-text-lineHeight-normal": 1.5,
9
+ "--base-text-lineHeight-relaxed": 1.625,
10
+ "--base-text-lineHeight-loose": 1.75
6
11
  }
package/dist/fallbacks/functional/typography/typography.json CHANGED
@@ -3,45 +3,45 @@
3
3
  "--fontStack-sansSerif": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
4
4
  "--fontStack-sansSerifDisplay": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
5
5
  "--fontStack-monospace": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
6
- "--text-display-lineBoxHeight": 1.4,
6
+ "--text-display-lineBoxHeight": 1.375,
7
7
  "--text-display-size": "2.5rem",
8
- "--text-display-lineHeight": 1.4,
8
+ "--text-display-lineHeight": 1.375,
9
9
  "--text-display-weight": 500,
10
- "--text-display-shorthand": "500 2.5rem/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
10
+ "--text-display-shorthand": "500 2.5rem/1.375 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
11
11
  "--text-title-size-large": "2rem",
12
12
  "--text-title-size-medium": "1.25rem",
13
13
  "--text-title-size-small": "1rem",
14
14
  "--text-title-lineHeight-large": 1.5,
15
- "--text-title-lineHeight-medium": 1.6,
15
+ "--text-title-lineHeight-medium": 1.625,
16
16
  "--text-title-lineHeight-small": 1.5,
17
17
  "--text-title-weight-large": 600,
18
18
  "--text-title-weight-medium": 600,
19
19
  "--text-title-weight-small": 600,
20
20
  "--text-title-shorthand-large": "600 2rem/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
21
- "--text-title-shorthand-medium": "600 1.25rem/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
21
+ "--text-title-shorthand-medium": "600 1.25rem/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
22
22
  "--text-title-shorthand-small": "600 1rem/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
23
23
  "--text-subtitle-size": "1.25rem",
24
- "--text-subtitle-lineHeight": 1.6,
24
+ "--text-subtitle-lineHeight": 1.625,
25
25
  "--text-subtitle-weight": 400,
26
- "--text-subtitle-shorthand": "400 1.25rem/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
26
+ "--text-subtitle-shorthand": "400 1.25rem/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
27
27
  "--text-body-size-large": "1rem",
28
28
  "--text-body-size-medium": "0.875rem",
29
29
  "--text-body-size-small": "0.75rem",
30
30
  "--text-body-lineHeight-large": 1.5,
31
- "--text-body-lineHeight-medium": 1.42857,
32
- "--text-body-lineHeight-small": 1.66667,
31
+ "--text-body-lineHeight-medium": 1.5,
32
+ "--text-body-lineHeight-small": 1.625,
33
33
  "--text-body-weight": 400,
34
34
  "--text-body-shorthand-large": "400 1rem/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
35
- "--text-body-shorthand-medium": "400 0.875rem/1.42857 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
36
- "--text-body-shorthand-small": "400 0.75rem/1.66667 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
35
+ "--text-body-shorthand-medium": "400 0.875rem/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
36
+ "--text-body-shorthand-small": "400 0.75rem/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
37
37
  "--text-caption-size": "0.75rem",
38
- "--text-caption-lineHeight": 1.3333,
38
+ "--text-caption-lineHeight": 1.25,
39
39
  "--text-caption-weight": 400,
40
- "--text-caption-shorthand": "400 0.75rem/1.3333 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
40
+ "--text-caption-shorthand": "400 0.75rem/1.25 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
41
41
  "--text-codeBlock-size": "0.8125rem",
42
- "--text-codeBlock-lineHeight": 1.5385,
42
+ "--text-codeBlock-lineHeight": 1.5,
43
43
  "--text-codeBlock-weight": 400,
44
- "--text-codeBlock-shorthand": "400 0.8125rem/1.5385 ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
44
+ "--text-codeBlock-shorthand": "400 0.8125rem/1.5 ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
45
45
  "--text-codeInline-size": "0.9285em",
46
46
  "--text-codeInline-weight": 400,
47
47
  "--text-codeInline-shorthand": "400 0.9285em ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"