@primer/primitives 8.2.3-rc.441bfd58 → 8.2.3-rc.563bec62

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 (9) hide show
  1. package/dist/css/functional/typography/typography.css +5 -4
  2. package/dist/css/primitives.css +5 -4
  3. package/dist/docs/functional/typography/typography.json +29 -4
  4. package/dist/fallbacks/functional/typography/typography.json +1 -0
  5. package/dist/figma/typography/typography.json +10 -0
  6. package/dist/styleLint/functional/typography/typography.json +29 -4
  7. package/package.json +1 -1
  8. package/src/platforms/figma.ts +1 -0
  9. package/src/tokens/functional/typography/typography.json +14 -4
package/dist/css/functional/typography/typography.css CHANGED
@@ -22,6 +22,7 @@
22
22
  --text-display-size: 2.5rem;
23
23
  --text-display-lineBoxHeight: 1.4;
24
24
  --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
25
+ --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
25
26
  --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
26
27
  --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
27
28
  --text-codeInline-weight: var(--base-text-weight-normal);
@@ -39,9 +40,9 @@
39
40
  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
40
41
  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
41
42
  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif);
42
- --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerif);
43
+ --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay);
43
44
  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
44
- --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerif);
45
- --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerif);
46
- --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerif);
45
+ --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay);
46
+ --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay);
47
+ --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay);
47
48
  }
package/dist/css/primitives.css CHANGED
@@ -164,6 +164,7 @@
164
164
  --text-display-size: 2.5rem;
165
165
  --text-display-lineBoxHeight: 1.4;
166
166
  --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
167
+ --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
167
168
  --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
168
169
  --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
169
170
  --text-codeInline-weight: var(--base-text-weight-normal);
@@ -181,9 +182,9 @@
181
182
  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
182
183
  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
183
184
  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif);
184
- --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerif);
185
+ --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay);
185
186
  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
186
- --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerif);
187
- --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerif);
188
- --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerif);
187
+ --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay);
188
+ --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay);
189
+ --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay);
189
190
  }
package/dist/docs/functional/typography/typography.json CHANGED
@@ -49,6 +49,31 @@
49
49
  "attributes": {},
50
50
  "path": ["fontStack", "sansSerif"]
51
51
  },
52
+ "fontStack-sansSerifDisplay": {
53
+ "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
54
+ "$type": "fontFamily",
55
+ "$extensions": {
56
+ "org.primer.figma": {
57
+ "collection": "typography",
58
+ "scopes": ["fontFamily"]
59
+ }
60
+ },
61
+ "filePath": "src/tokens/functional/typography/typography.json",
62
+ "isSource": true,
63
+ "original": {
64
+ "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
65
+ "$type": "fontFamily",
66
+ "$extensions": {
67
+ "org.primer.figma": {
68
+ "collection": "typography",
69
+ "scopes": ["fontFamily"]
70
+ }
71
+ }
72
+ },
73
+ "name": "fontStack-sansSerifDisplay",
74
+ "attributes": {},
75
+ "path": ["fontStack", "sansSerifDisplay"]
76
+ },
52
77
  "fontStack-monospace": {
53
78
  "value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
54
79
  "$type": "fontFamily",
@@ -199,7 +224,7 @@
199
224
  "fontWeight": "{text.display.weight}",
200
225
  "fontSize": "{text.display.size}",
201
226
  "lineHeight": "{text.display.lineHeight}",
202
- "fontFamily": "{fontStack.sansSerif}"
227
+ "fontFamily": "{fontStack.sansSerifDisplay}"
203
228
  },
204
229
  "$type": "typography",
205
230
  "comment": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports."
@@ -462,7 +487,7 @@
462
487
  "fontWeight": "{text.title.weight.large}",
463
488
  "fontSize": "{text.title.size.large}",
464
489
  "lineHeight": "{text.title.lineHeight.large}",
465
- "fontFamily": "{fontStack.sansSerif}"
490
+ "fontFamily": "{fontStack.sansSerifDisplay}"
466
491
  },
467
492
  "$type": "typography",
468
493
  "comment": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports."
@@ -482,7 +507,7 @@
482
507
  "fontWeight": "{text.title.weight.medium}",
483
508
  "fontSize": "{text.title.size.medium}",
484
509
  "lineHeight": "{text.title.lineHeight.medium}",
485
- "fontFamily": "{fontStack.sansSerif}"
510
+ "fontFamily": "{fontStack.sansSerifDisplay}"
486
511
  },
487
512
  "$type": "typography",
488
513
  "comment": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition."
@@ -603,7 +628,7 @@
603
628
  "fontWeight": "{text.subtitle.weight}",
604
629
  "fontSize": "{text.subtitle.size}",
605
630
  "lineHeight": "{text.subtitle.lineHeight}",
606
- "fontFamily": "{fontStack.sansSerif}"
631
+ "fontFamily": "{fontStack.sansSerifDisplay}"
607
632
  },
608
633
  "$type": "typography",
609
634
  "comment": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium)."
package/dist/fallbacks/functional/typography/typography.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "--fontStack-system": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
3
3
  "--fontStack-sansSerif": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
4
+ "--fontStack-sansSerifDisplay": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
4
5
  "--fontStack-monospace": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
5
6
  "--text-display-lineBoxHeight": 1.4,
6
7
  "--text-display-size": "2.5rem",
package/dist/figma/typography/typography.json CHANGED
@@ -219,6 +219,16 @@
219
219
  "group": "typography",
220
220
  "scopes": ["FONT_FAMILY"]
221
221
  },
222
+ {
223
+ "name": "fontStack/sansSerifDisplay",
224
+ "value": "SF Pro Display",
225
+ "type": "STRING",
226
+ "refId": "typography/fontStack/sansSerifDisplay",
227
+ "collection": "typography",
228
+ "mode": "default",
229
+ "group": "typography",
230
+ "scopes": ["FONT_FAMILY"]
231
+ },
222
232
  {
223
233
  "name": "fontStack/sansSerif",
224
234
  "value": "SF Pro Text",
package/dist/styleLint/functional/typography/typography.json CHANGED
@@ -49,6 +49,31 @@
49
49
  "attributes": {},
50
50
  "path": ["fontStack", "sansSerif"]
51
51
  },
52
+ "fontStack-sansSerifDisplay": {
53
+ "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
54
+ "$type": "fontFamily",
55
+ "$extensions": {
56
+ "org.primer.figma": {
57
+ "collection": "typography",
58
+ "scopes": ["fontFamily"]
59
+ }
60
+ },
61
+ "filePath": "src/tokens/functional/typography/typography.json",
62
+ "isSource": true,
63
+ "original": {
64
+ "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
65
+ "$type": "fontFamily",
66
+ "$extensions": {
67
+ "org.primer.figma": {
68
+ "collection": "typography",
69
+ "scopes": ["fontFamily"]
70
+ }
71
+ }
72
+ },
73
+ "name": "fontStack-sansSerifDisplay",
74
+ "attributes": {},
75
+ "path": ["fontStack", "sansSerifDisplay"]
76
+ },
52
77
  "fontStack-monospace": {
53
78
  "value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
54
79
  "$type": "fontFamily",
@@ -199,7 +224,7 @@
199
224
  "fontWeight": "{text.display.weight}",
200
225
  "fontSize": "{text.display.size}",
201
226
  "lineHeight": "{text.display.lineHeight}",
202
- "fontFamily": "{fontStack.sansSerif}"
227
+ "fontFamily": "{fontStack.sansSerifDisplay}"
203
228
  },
204
229
  "$type": "typography",
205
230
  "comment": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports."
@@ -462,7 +487,7 @@
462
487
  "fontWeight": "{text.title.weight.large}",
463
488
  "fontSize": "{text.title.size.large}",
464
489
  "lineHeight": "{text.title.lineHeight.large}",
465
- "fontFamily": "{fontStack.sansSerif}"
490
+ "fontFamily": "{fontStack.sansSerifDisplay}"
466
491
  },
467
492
  "$type": "typography",
468
493
  "comment": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports."
@@ -482,7 +507,7 @@
482
507
  "fontWeight": "{text.title.weight.medium}",
483
508
  "fontSize": "{text.title.size.medium}",
484
509
  "lineHeight": "{text.title.lineHeight.medium}",
485
- "fontFamily": "{fontStack.sansSerif}"
510
+ "fontFamily": "{fontStack.sansSerifDisplay}"
486
511
  },
487
512
  "$type": "typography",
488
513
  "comment": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition."
@@ -603,7 +628,7 @@
603
628
  "fontWeight": "{text.subtitle.weight}",
604
629
  "fontSize": "{text.subtitle.size}",
605
630
  "lineHeight": "{text.subtitle.lineHeight}",
606
- "fontFamily": "{fontStack.sansSerif}"
631
+ "fontFamily": "{fontStack.sansSerifDisplay}"
607
632
  },
608
633
  "$type": "typography",
609
634
  "comment": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium)."
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/primitives",
3
- "version": "8.2.3-rc.441bfd58",
3
+ "version": "8.2.3-rc.563bec62",
4
4
  "description": "Typography, spacing, and color primitives for Primer design system",
5
5
  "files": [
6
6
  "dist",
package/src/platforms/figma.ts CHANGED
@@ -39,6 +39,7 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
39
39
  fontFamilies: {
40
40
  'fontStack/system': 'SF Pro Text',
41
41
  'fontStack/sansSerif': 'SF Pro Text',
42
+ 'fontStack/sansSerifDisplay': 'SF Pro Display',
42
43
  'fontStack/monospace': 'SF Mono',
43
44
  },
44
45
  ...options,
package/src/tokens/functional/typography/typography.json CHANGED
@@ -20,6 +20,16 @@
20
20
  }
21
21
  }
22
22
  },
23
+ "sansSerifDisplay": {
24
+ "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
25
+ "$type": "fontFamily",
26
+ "$extensions": {
27
+ "org.primer.figma": {
28
+ "collection": "typography",
29
+ "scopes": ["fontFamily"]
30
+ }
31
+ }
32
+ },
23
33
  "monospace": {
24
34
  "$value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
25
35
  "$type": "fontFamily",
@@ -85,7 +95,7 @@
85
95
  "fontWeight": "{text.display.weight}",
86
96
  "fontSize": "{text.display.size}",
87
97
  "lineHeight": "{text.display.lineHeight}",
88
- "fontFamily": "{fontStack.sansSerif}"
98
+ "fontFamily": "{fontStack.sansSerifDisplay}"
89
99
  },
90
100
  "$type": "typography",
91
101
  "$description": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports."
@@ -203,7 +213,7 @@
203
213
  "fontWeight": "{text.title.weight.large}",
204
214
  "fontSize": "{text.title.size.large}",
205
215
  "lineHeight": "{text.title.lineHeight.large}",
206
- "fontFamily": "{fontStack.sansSerif}"
216
+ "fontFamily": "{fontStack.sansSerifDisplay}"
207
217
  },
208
218
  "$type": "typography",
209
219
  "$description": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports."
@@ -213,7 +223,7 @@
213
223
  "fontWeight": "{text.title.weight.medium}",
214
224
  "fontSize": "{text.title.size.medium}",
215
225
  "lineHeight": "{text.title.lineHeight.medium}",
216
- "fontFamily": "{fontStack.sansSerif}"
226
+ "fontFamily": "{fontStack.sansSerifDisplay}"
217
227
  },
218
228
  "$type": "typography",
219
229
  "$description": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition."
@@ -269,7 +279,7 @@
269
279
  "fontWeight": "{text.subtitle.weight}",
270
280
  "fontSize": "{text.subtitle.size}",
271
281
  "lineHeight": "{text.subtitle.lineHeight}",
272
- "fontFamily": "{fontStack.sansSerif}"
282
+ "fontFamily": "{fontStack.sansSerifDisplay}"
273
283
  },
274
284
  "$type": "typography",
275
285
  "$description": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium)."