@primer/primitives 11.3.2 → 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 (12) 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/docs/base/typography/typography.json +145 -0
  4. package/dist/docs/functional/typography/typography.json +26 -26
  5. package/dist/fallbacks/base/typography/typography.json +6 -1
  6. package/dist/fallbacks/functional/typography/typography.json +15 -15
  7. package/dist/figma/typography/typography.json +65 -19
  8. package/dist/styleLint/base/typography/typography.json +145 -0
  9. package/dist/styleLint/functional/typography/typography.json +26 -26
  10. package/package.json +1 -1
  11. package/src/tokens/base/typography/typography.json5 +57 -0
  12. package/src/tokens/functional/typography/typography.json5 +11 -11
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/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"
package/dist/figma/typography/typography.json CHANGED
@@ -39,6 +39,41 @@
39
39
  "group": "base/typography",
40
40
  "scopes": ["FONT_WEIGHT"]
41
41
  },
42
+ {
43
+ "name": "tight",
44
+ "value": 1.25,
45
+ "type": "FLOAT",
46
+ "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.",
47
+ "refId": "tight"
48
+ },
49
+ {
50
+ "name": "snug",
51
+ "value": 1.375,
52
+ "type": "FLOAT",
53
+ "description": "Use for display text, large headings, or short multi-line text where moderate density is needed. Good for hero sections and marketing headlines.",
54
+ "refId": "snug"
55
+ },
56
+ {
57
+ "name": "normal",
58
+ "value": 1.5,
59
+ "type": "FLOAT",
60
+ "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.",
61
+ "refId": "normal"
62
+ },
63
+ {
64
+ "name": "relaxed",
65
+ "value": 1.625,
66
+ "type": "FLOAT",
67
+ "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.",
68
+ "refId": "relaxed"
69
+ },
70
+ {
71
+ "name": "loose",
72
+ "value": 1.75,
73
+ "type": "FLOAT",
74
+ "description": "Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility.",
75
+ "refId": "loose"
76
+ },
42
77
  {
43
78
  "name": "fontStack/system",
44
79
  "value": "SF Pro Text",
@@ -81,9 +116,10 @@
81
116
  },
82
117
  {
83
118
  "name": "lineBoxHeight",
84
- "value": 1.4,
119
+ "value": 1.375,
85
120
  "type": "FLOAT",
86
- "refId": "lineBoxHeight"
121
+ "refId": "lineBoxHeight",
122
+ "reference": "base/text/lineHeight/snug"
87
123
  },
88
124
  {
89
125
  "name": "text/display/size",
@@ -97,9 +133,10 @@
97
133
  },
98
134
  {
99
135
  "name": "lineHeight",
100
- "value": 1.4,
136
+ "value": 1.375,
101
137
  "type": "FLOAT",
102
- "refId": "lineHeight"
138
+ "refId": "lineHeight",
139
+ "reference": "base/text/lineHeight/snug"
103
140
  },
104
141
  {
105
142
  "name": "text/display/weight",
@@ -146,19 +183,22 @@
146
183
  "name": "large",
147
184
  "value": 1.5,
148
185
  "type": "FLOAT",
149
- "refId": "large"
186
+ "refId": "large",
187
+ "reference": "base/text/lineHeight/normal"
150
188
  },
151
189
  {
152
190
  "name": "medium",
153
- "value": 1.6,
191
+ "value": 1.625,
154
192
  "type": "FLOAT",
155
- "refId": "medium"
193
+ "refId": "medium",
194
+ "reference": "base/text/lineHeight/relaxed"
156
195
  },
157
196
  {
158
197
  "name": "small",
159
198
  "value": 1.5,
160
199
  "type": "FLOAT",
161
- "refId": "small"
200
+ "refId": "small",
201
+ "reference": "base/text/lineHeight/normal"
162
202
  },
163
203
  {
164
204
  "name": "text/title/weight/large",
@@ -205,9 +245,10 @@
205
245
  },
206
246
  {
207
247
  "name": "lineHeight",
208
- "value": 1.6,
248
+ "value": 1.625,
209
249
  "type": "FLOAT",
210
- "refId": "lineHeight"
250
+ "refId": "lineHeight",
251
+ "reference": "base/text/lineHeight/relaxed"
211
252
  },
212
253
  {
213
254
  "name": "text/subtitle/weight",
@@ -254,19 +295,22 @@
254
295
  "name": "large",
255
296
  "value": 1.5,
256
297
  "type": "FLOAT",
257
- "refId": "large"
298
+ "refId": "large",
299
+ "reference": "base/text/lineHeight/normal"
258
300
  },
259
301
  {
260
302
  "name": "medium",
261
- "value": 1.42857,
303
+ "value": 1.5,
262
304
  "type": "FLOAT",
263
- "refId": "medium"
305
+ "refId": "medium",
306
+ "reference": "base/text/lineHeight/normal"
264
307
  },
265
308
  {
266
309
  "name": "small",
267
- "value": 1.66667,
310
+ "value": 1.625,
268
311
  "type": "FLOAT",
269
- "refId": "small"
312
+ "refId": "small",
313
+ "reference": "base/text/lineHeight/relaxed"
270
314
  },
271
315
  {
272
316
  "name": "text/body/weight",
@@ -291,9 +335,10 @@
291
335
  },
292
336
  {
293
337
  "name": "lineHeight",
294
- "value": 1.3333,
338
+ "value": 1.25,
295
339
  "type": "FLOAT",
296
- "refId": "lineHeight"
340
+ "refId": "lineHeight",
341
+ "reference": "base/text/lineHeight/tight"
297
342
  },
298
343
  {
299
344
  "name": "text/caption/weight",
@@ -318,9 +363,10 @@
318
363
  },
319
364
  {
320
365
  "name": "lineHeight",
321
- "value": 1.5385,
366
+ "value": 1.5,
322
367
  "type": "FLOAT",
323
- "refId": "lineHeight"
368
+ "refId": "lineHeight",
369
+ "reference": "base/text/lineHeight/normal"
324
370
  },
325
371
  {
326
372
  "name": "text/codeBlock/weight",
package/dist/styleLint/base/typography/typography.json CHANGED
@@ -1,4 +1,149 @@
1
1
  {
2
+ "base-text-lineHeight-loose": {
3
+ "key": "{base.text.lineHeight.loose}",
4
+ "$value": 1.75,
5
+ "$type": "number",
6
+ "$description": "Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility.",
7
+ "$extensions": {
8
+ "org.primer.figma": {
9
+ "collection": "typography",
10
+ "scopes": ["lineHeight"]
11
+ }
12
+ },
13
+ "filePath": "src/tokens/base/typography/typography.json5",
14
+ "isSource": true,
15
+ "original": {
16
+ "$value": 1.75,
17
+ "$type": "number",
18
+ "$description": "Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility.",
19
+ "$extensions": {
20
+ "org.primer.figma": {
21
+ "collection": "typography",
22
+ "scopes": ["lineHeight"]
23
+ }
24
+ },
25
+ "key": "{base.text.lineHeight.loose}"
26
+ },
27
+ "name": "base-text-lineHeight-loose",
28
+ "attributes": {},
29
+ "path": ["base", "text", "lineHeight", "loose"]
30
+ },
31
+ "base-text-lineHeight-normal": {
32
+ "key": "{base.text.lineHeight.normal}",
33
+ "$value": 1.5,
34
+ "$type": "number",
35
+ "$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.",
36
+ "$extensions": {
37
+ "org.primer.figma": {
38
+ "collection": "typography",
39
+ "scopes": ["lineHeight"]
40
+ }
41
+ },
42
+ "filePath": "src/tokens/base/typography/typography.json5",
43
+ "isSource": true,
44
+ "original": {
45
+ "$value": 1.5,
46
+ "$type": "number",
47
+ "$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.",
48
+ "$extensions": {
49
+ "org.primer.figma": {
50
+ "collection": "typography",
51
+ "scopes": ["lineHeight"]
52
+ }
53
+ },
54
+ "key": "{base.text.lineHeight.normal}"
55
+ },
56
+ "name": "base-text-lineHeight-normal",
57
+ "attributes": {},
58
+ "path": ["base", "text", "lineHeight", "normal"]
59
+ },
60
+ "base-text-lineHeight-relaxed": {
61
+ "key": "{base.text.lineHeight.relaxed}",
62
+ "$value": 1.625,
63
+ "$type": "number",
64
+ "$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.",
65
+ "$extensions": {
66
+ "org.primer.figma": {
67
+ "collection": "typography",
68
+ "scopes": ["lineHeight"]
69
+ }
70
+ },
71
+ "filePath": "src/tokens/base/typography/typography.json5",
72
+ "isSource": true,
73
+ "original": {
74
+ "$value": 1.625,
75
+ "$type": "number",
76
+ "$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.",
77
+ "$extensions": {
78
+ "org.primer.figma": {
79
+ "collection": "typography",
80
+ "scopes": ["lineHeight"]
81
+ }
82
+ },
83
+ "key": "{base.text.lineHeight.relaxed}"
84
+ },
85
+ "name": "base-text-lineHeight-relaxed",
86
+ "attributes": {},
87
+ "path": ["base", "text", "lineHeight", "relaxed"]
88
+ },
89
+ "base-text-lineHeight-snug": {
90
+ "key": "{base.text.lineHeight.snug}",
91
+ "$value": 1.375,
92
+ "$type": "number",
93
+ "$description": "Use for display text, large headings, or short multi-line text where moderate density is needed. Good for hero sections and marketing headlines.",
94
+ "$extensions": {
95
+ "org.primer.figma": {
96
+ "collection": "typography",
97
+ "scopes": ["lineHeight"]
98
+ }
99
+ },
100
+ "filePath": "src/tokens/base/typography/typography.json5",
101
+ "isSource": true,
102
+ "original": {
103
+ "$value": 1.375,
104
+ "$type": "number",
105
+ "$description": "Use for display text, large headings, or short multi-line text where moderate density is needed. Good for hero sections and marketing headlines.",
106
+ "$extensions": {
107
+ "org.primer.figma": {
108
+ "collection": "typography",
109
+ "scopes": ["lineHeight"]
110
+ }
111
+ },
112
+ "key": "{base.text.lineHeight.snug}"
113
+ },
114
+ "name": "base-text-lineHeight-snug",
115
+ "attributes": {},
116
+ "path": ["base", "text", "lineHeight", "snug"]
117
+ },
118
+ "base-text-lineHeight-tight": {
119
+ "key": "{base.text.lineHeight.tight}",
120
+ "$value": 1.25,
121
+ "$type": "number",
122
+ "$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.",
123
+ "$extensions": {
124
+ "org.primer.figma": {
125
+ "collection": "typography",
126
+ "scopes": ["lineHeight"]
127
+ }
128
+ },
129
+ "filePath": "src/tokens/base/typography/typography.json5",
130
+ "isSource": true,
131
+ "original": {
132
+ "$value": 1.25,
133
+ "$type": "number",
134
+ "$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.",
135
+ "$extensions": {
136
+ "org.primer.figma": {
137
+ "collection": "typography",
138
+ "scopes": ["lineHeight"]
139
+ }
140
+ },
141
+ "key": "{base.text.lineHeight.tight}"
142
+ },
143
+ "name": "base-text-lineHeight-tight",
144
+ "attributes": {},
145
+ "path": ["base", "text", "lineHeight", "tight"]
146
+ },
2
147
  "base-text-weight-light": {
3
148
  "key": "{base.text.weight.light}",
4
149
  "$type": "fontWeight",
package/dist/styleLint/functional/typography/typography.json CHANGED
@@ -123,7 +123,7 @@
123
123
  "filePath": "src/tokens/functional/typography/typography.json5",
124
124
  "isSource": true,
125
125
  "original": {
126
- "$value": 1.5,
126
+ "$value": "{base.text.lineHeight.normal}",
127
127
  "$type": "number",
128
128
  "$extensions": {
129
129
  "org.primer.data": {
@@ -142,7 +142,7 @@
142
142
  },
143
143
  "text-body-lineHeight-medium": {
144
144
  "key": "{text.body.lineHeight.medium}",
145
- "$value": 1.42857,
145
+ "$value": 1.5,
146
146
  "$type": "number",
147
147
  "$extensions": {
148
148
  "org.primer.data": {
@@ -156,7 +156,7 @@
156
156
  "filePath": "src/tokens/functional/typography/typography.json5",
157
157
  "isSource": true,
158
158
  "original": {
159
- "$value": 1.42857,
159
+ "$value": "{base.text.lineHeight.normal}",
160
160
  "$type": "number",
161
161
  "$extensions": {
162
162
  "org.primer.data": {
@@ -175,7 +175,7 @@
175
175
  },
176
176
  "text-body-lineHeight-small": {
177
177
  "key": "{text.body.lineHeight.small}",
178
- "$value": 1.66667,
178
+ "$value": 1.625,
179
179
  "$type": "number",
180
180
  "$extensions": {
181
181
  "org.primer.data": {
@@ -189,7 +189,7 @@
189
189
  "filePath": "src/tokens/functional/typography/typography.json5",
190
190
  "isSource": true,
191
191
  "original": {
192
- "$value": 1.66667,
192
+ "$value": "{base.text.lineHeight.relaxed}",
193
193
  "$type": "number",
194
194
  "$extensions": {
195
195
  "org.primer.data": {
@@ -230,7 +230,7 @@
230
230
  },
231
231
  "text-body-shorthand-medium": {
232
232
  "key": "{text.body.shorthand.medium}",
233
- "$value": "400 0.875rem,14px/1.42857 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
233
+ "$value": "400 0.875rem,14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
234
234
  "$type": "typography",
235
235
  "$description": "Default UI font. Most commonly used for body text.",
236
236
  "filePath": "src/tokens/functional/typography/typography.json5",
@@ -252,7 +252,7 @@
252
252
  },
253
253
  "text-body-shorthand-small": {
254
254
  "key": "{text.body.shorthand.small}",
255
- "$value": "400 0.75rem,12px/1.66667 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
255
+ "$value": "400 0.75rem,12px/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
256
256
  "$type": "typography",
257
257
  "$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.",
258
258
  "filePath": "src/tokens/functional/typography/typography.json5",
@@ -382,7 +382,7 @@
382
382
  },
383
383
  "text-caption-lineHeight": {
384
384
  "key": "{text.caption.lineHeight}",
385
- "$value": 1.3333,
385
+ "$value": 1.25,
386
386
  "$type": "number",
387
387
  "$extensions": {
388
388
  "org.primer.data": {
@@ -396,7 +396,7 @@
396
396
  "filePath": "src/tokens/functional/typography/typography.json5",
397
397
  "isSource": true,
398
398
  "original": {
399
- "$value": 1.3333,
399
+ "$value": "{base.text.lineHeight.tight}",
400
400
  "$type": "number",
401
401
  "$extensions": {
402
402
  "org.primer.data": {
@@ -415,7 +415,7 @@
415
415
  },
416
416
  "text-caption-shorthand": {
417
417
  "key": "{text.caption.shorthand}",
418
- "$value": "400 0.75rem,12px/1.3333 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
418
+ "$value": "400 0.75rem,12px/1.25 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
419
419
  "$type": "typography",
420
420
  "$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.",
421
421
  "filePath": "src/tokens/functional/typography/typography.json5",
@@ -491,7 +491,7 @@
491
491
  },
492
492
  "text-codeBlock-lineHeight": {
493
493
  "key": "{text.codeBlock.lineHeight}",
494
- "$value": 1.5385,
494
+ "$value": 1.5,
495
495
  "$type": "number",
496
496
  "$extensions": {
497
497
  "org.primer.data": {
@@ -505,7 +505,7 @@
505
505
  "filePath": "src/tokens/functional/typography/typography.json5",
506
506
  "isSource": true,
507
507
  "original": {
508
- "$value": 1.5385,
508
+ "$value": "{base.text.lineHeight.normal}",
509
509
  "$type": "number",
510
510
  "$extensions": {
511
511
  "org.primer.data": {
@@ -524,7 +524,7 @@
524
524
  },
525
525
  "text-codeBlock-shorthand": {
526
526
  "key": "{text.codeBlock.shorthand}",
527
- "$value": "400 0.8125rem,13px/1.5385 ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
527
+ "$value": "400 0.8125rem,13px/1.5 ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
528
528
  "$type": "typography",
529
529
  "$description": "Default style for rendering code blocks.",
530
530
  "filePath": "src/tokens/functional/typography/typography.json5",
@@ -675,7 +675,7 @@
675
675
  },
676
676
  "text-display-lineBoxHeight": {
677
677
  "key": "{text.display.lineBoxHeight}",
678
- "$value": 1.4,
678
+ "$value": 1.375,
679
679
  "$type": "number",
680
680
  "$extensions": {
681
681
  "org.primer.data": {
@@ -690,7 +690,7 @@
690
690
  "filePath": "src/tokens/functional/typography/typography.json5",
691
691
  "isSource": true,
692
692
  "original": {
693
- "$value": 1.4,
693
+ "$value": "{base.text.lineHeight.snug}",
694
694
  "$type": "number",
695
695
  "$extensions": {
696
696
  "org.primer.data": {
@@ -710,7 +710,7 @@
710
710
  },
711
711
  "text-display-lineHeight": {
712
712
  "key": "{text.display.lineHeight}",
713
- "$value": 1.4,
713
+ "$value": 1.375,
714
714
  "$type": "number",
715
715
  "$extensions": {
716
716
  "org.primer.data": {
@@ -724,7 +724,7 @@
724
724
  "filePath": "src/tokens/functional/typography/typography.json5",
725
725
  "isSource": true,
726
726
  "original": {
727
- "$value": 1.4,
727
+ "$value": "{base.text.lineHeight.snug}",
728
728
  "$type": "number",
729
729
  "$extensions": {
730
730
  "org.primer.data": {
@@ -743,7 +743,7 @@
743
743
  },
744
744
  "text-display-shorthand": {
745
745
  "key": "{text.display.shorthand}",
746
- "$value": "500 2.5rem,40px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
746
+ "$value": "500 2.5rem,40px/1.375 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
747
747
  "$type": "typography",
748
748
  "$description": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports.",
749
749
  "filePath": "src/tokens/functional/typography/typography.json5",
@@ -819,7 +819,7 @@
819
819
  },
820
820
  "text-subtitle-lineHeight": {
821
821
  "key": "{text.subtitle.lineHeight}",
822
- "$value": 1.6,
822
+ "$value": 1.625,
823
823
  "$type": "number",
824
824
  "$extensions": {
825
825
  "org.primer.data": {
@@ -833,7 +833,7 @@
833
833
  "filePath": "src/tokens/functional/typography/typography.json5",
834
834
  "isSource": true,
835
835
  "original": {
836
- "$value": 1.6,
836
+ "$value": "{base.text.lineHeight.relaxed}",
837
837
  "$type": "number",
838
838
  "$extensions": {
839
839
  "org.primer.data": {
@@ -852,7 +852,7 @@
852
852
  },
853
853
  "text-subtitle-shorthand": {
854
854
  "key": "{text.subtitle.shorthand}",
855
- "$value": "400 1.25rem,20px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
855
+ "$value": "400 1.25rem,20px/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
856
856
  "$type": "typography",
857
857
  "$description": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium).",
858
858
  "filePath": "src/tokens/functional/typography/typography.json5",
@@ -942,7 +942,7 @@
942
942
  "filePath": "src/tokens/functional/typography/typography.json5",
943
943
  "isSource": true,
944
944
  "original": {
945
- "$value": 1.5,
945
+ "$value": "{base.text.lineHeight.normal}",
946
946
  "$type": "number",
947
947
  "$extensions": {
948
948
  "org.primer.data": {
@@ -961,7 +961,7 @@
961
961
  },
962
962
  "text-title-lineHeight-medium": {
963
963
  "key": "{text.title.lineHeight.medium}",
964
- "$value": 1.6,
964
+ "$value": 1.625,
965
965
  "$type": "number",
966
966
  "$extensions": {
967
967
  "org.primer.data": {
@@ -975,7 +975,7 @@
975
975
  "filePath": "src/tokens/functional/typography/typography.json5",
976
976
  "isSource": true,
977
977
  "original": {
978
- "$value": 1.6,
978
+ "$value": "{base.text.lineHeight.relaxed}",
979
979
  "$type": "number",
980
980
  "$extensions": {
981
981
  "org.primer.data": {
@@ -1008,7 +1008,7 @@
1008
1008
  "filePath": "src/tokens/functional/typography/typography.json5",
1009
1009
  "isSource": true,
1010
1010
  "original": {
1011
- "$value": 1.5,
1011
+ "$value": "{base.text.lineHeight.normal}",
1012
1012
  "$type": "number",
1013
1013
  "$extensions": {
1014
1014
  "org.primer.data": {
@@ -1049,7 +1049,7 @@
1049
1049
  },
1050
1050
  "text-title-shorthand-medium": {
1051
1051
  "key": "{text.title.shorthand.medium}",
1052
- "$value": "600 1.25rem,20px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1052
+ "$value": "600 1.25rem,20px/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1053
1053
  "$type": "typography",
1054
1054
  "$description": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition.",
1055
1055
  "filePath": "src/tokens/functional/typography/typography.json5",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/primitives",
3
- "version": "11.3.2",
3
+ "version": "11.4.0-rc.b3c35298",
4
4
  "description": "Typography, spacing, and color primitives for Primer design system",
5
5
  "type": "module",
6
6
  "files": [
package/src/tokens/base/typography/typography.json5 CHANGED
@@ -43,6 +43,63 @@
43
43
  },
44
44
  },
45
45
  },
46
+ lineHeight: {
47
+ tight: {
48
+ $value: 1.25,
49
+ $type: 'number',
50
+ $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.',
51
+ $extensions: {
52
+ 'org.primer.figma': {
53
+ collection: 'typography',
54
+ scopes: ['lineHeight'],
55
+ },
56
+ },
57
+ },
58
+ snug: {
59
+ $value: 1.375,
60
+ $type: 'number',
61
+ $description: 'Use for display text, large headings, or short multi-line text where moderate density is needed. Good for hero sections and marketing headlines.',
62
+ $extensions: {
63
+ 'org.primer.figma': {
64
+ collection: 'typography',
65
+ scopes: ['lineHeight'],
66
+ },
67
+ },
68
+ },
69
+ normal: {
70
+ $value: 1.5,
71
+ $type: 'number',
72
+ $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.',
73
+ $extensions: {
74
+ 'org.primer.figma': {
75
+ collection: 'typography',
76
+ scopes: ['lineHeight'],
77
+ },
78
+ },
79
+ },
80
+ relaxed: {
81
+ $value: 1.625,
82
+ $type: 'number',
83
+ $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.',
84
+ $extensions: {
85
+ 'org.primer.figma': {
86
+ collection: 'typography',
87
+ scopes: ['lineHeight'],
88
+ },
89
+ },
90
+ },
91
+ loose: {
92
+ $value: 1.75,
93
+ $type: 'number',
94
+ $description: 'Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility.',
95
+ $extensions: {
96
+ 'org.primer.figma': {
97
+ collection: 'typography',
98
+ scopes: ['lineHeight'],
99
+ },
100
+ },
101
+ },
102
+ },
46
103
  },
47
104
  },
48
105
  }
package/src/tokens/functional/typography/typography.json5 CHANGED
@@ -44,7 +44,7 @@
44
44
  text: {
45
45
  display: {
46
46
  lineBoxHeight: {
47
- $value: 1.4,
47
+ $value: '{base.text.lineHeight.snug}',
48
48
  $type: 'number',
49
49
  $extensions: {
50
50
  'org.primer.data': {
@@ -68,7 +68,7 @@
68
68
  },
69
69
  },
70
70
  lineHeight: {
71
- $value: 1.4,
71
+ $value: '{base.text.lineHeight.snug}',
72
72
  $type: 'number',
73
73
  $extensions: {
74
74
  'org.primer.data': {
@@ -136,7 +136,7 @@
136
136
  },
137
137
  lineHeight: {
138
138
  large: {
139
- $value: 1.5,
139
+ $value: '{base.text.lineHeight.normal}',
140
140
  $type: 'number',
141
141
  $extensions: {
142
142
  'org.primer.data': {
@@ -149,7 +149,7 @@
149
149
  },
150
150
  },
151
151
  medium: {
152
- $value: 1.6,
152
+ $value: '{base.text.lineHeight.relaxed}',
153
153
  $type: 'number',
154
154
  $extensions: {
155
155
  'org.primer.data': {
@@ -162,7 +162,7 @@
162
162
  },
163
163
  },
164
164
  small: {
165
- $value: 1.5,
165
+ $value: '{base.text.lineHeight.normal}',
166
166
  $type: 'number',
167
167
  $extensions: {
168
168
  'org.primer.data': {
@@ -252,7 +252,7 @@
252
252
  },
253
253
  },
254
254
  lineHeight: {
255
- $value: 1.6,
255
+ $value: '{base.text.lineHeight.relaxed}',
256
256
  $type: 'number',
257
257
  $extensions: {
258
258
  'org.primer.data': {
@@ -320,7 +320,7 @@
320
320
  },
321
321
  lineHeight: {
322
322
  large: {
323
- $value: 1.5,
323
+ $value: '{base.text.lineHeight.normal}',
324
324
  $type: 'number',
325
325
  $extensions: {
326
326
  'org.primer.data': {
@@ -333,7 +333,7 @@
333
333
  },
334
334
  },
335
335
  medium: {
336
- $value: 1.42857,
336
+ $value: '{base.text.lineHeight.normal}',
337
337
  $type: 'number',
338
338
  $extensions: {
339
339
  'org.primer.data': {
@@ -346,7 +346,7 @@
346
346
  },
347
347
  },
348
348
  small: {
349
- $value: 1.66667,
349
+ $value: '{base.text.lineHeight.relaxed}',
350
350
  $type: 'number',
351
351
  $extensions: {
352
352
  'org.primer.data': {
@@ -414,7 +414,7 @@
414
414
  },
415
415
  },
416
416
  lineHeight: {
417
- $value: 1.3333,
417
+ $value: '{base.text.lineHeight.tight}',
418
418
  $type: 'number',
419
419
  $extensions: {
420
420
  'org.primer.data': {
@@ -459,7 +459,7 @@
459
459
  },
460
460
  },
461
461
  lineHeight: {
462
- $value: 1.5385,
462
+ $value: '{base.text.lineHeight.normal}',
463
463
  $type: 'number',
464
464
  $extensions: {
465
465
  'org.primer.data': {