@primer/primitives 11.5.1 → 11.6.0-rc.404a05ed

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 (8) hide show
  1. package/README.md +1 -1
  2. package/dist/css/functional/typography/typography.css +3 -3
  3. package/dist/docs/functional/typography/typography.json +17 -17
  4. package/dist/fallbacks/functional/typography/typography.json +12 -12
  5. package/dist/figma/typography/typography.json +1 -1
  6. package/dist/styleLint/functional/typography/typography.json +17 -17
  7. package/package.json +2 -2
  8. package/src/tokens/functional/typography/font-stack.json5 +4 -4
package/README.md CHANGED
@@ -56,7 +56,7 @@ All available imports:
56
56
 
57
57
  ## Design token data
58
58
 
59
- Design token data is stored in the [src/tokens](./src/tokens/) directory. These tokens are compiled with [style dictionary](https://amzn.github.io/style-dictionary/#/) in [scripts/buildTokens.ts](./scripts/buildTokens.ts).
59
+ Design token data is stored in the [src/tokens](./src/tokens/) directory. These tokens are compiled with [style dictionary](https://styledictionary.com) in [scripts/buildTokens.ts](./scripts/buildTokens.ts).
60
60
 
61
61
  To make working with tokens easier, we added some additional functionality on top of what style dictionary comes with:
62
62
 
package/dist/css/functional/typography/typography.css CHANGED
@@ -1,8 +1,8 @@
1
1
  :root {
2
2
  --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; /** Monospace font stack for code, technical content, and tabular data. */
3
- --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /** Sans-serif font stack for body text and general UI elements. */
4
- --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /** Display font stack for headings and titles. Same as sansSerif but semantically distinct. */
5
- --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /** System font stack optimized for cross-platform rendering. Primary font for all UI text. */
3
+ --fontStack-sansSerif: "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /** Sans-serif font stack for body text and general UI elements. */
4
+ --fontStack-sansSerifDisplay: "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /** Display font stack for headings and titles. Same as sansSerif but semantically distinct. */
5
+ --fontStack-system: "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /** Mona Sans–first font stack with system fallbacks, optimized for cross-platform rendering. Primary font stack for all UI text where Mona Sans is available. */
6
6
  --text-codeBlock-size: 0.8125rem;
7
7
  --text-codeInline-size: 0.9285em;
8
8
  --text-body-lineHeight-large: var(--base-text-lineHeight-normal);
package/dist/docs/functional/typography/typography.json CHANGED
@@ -51,7 +51,7 @@
51
51
  "filePath": "src/tokens/functional/typography/font-stack.json5",
52
52
  "isSource": true,
53
53
  "original": {
54
- "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
54
+ "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
55
55
  "$type": "fontFamily",
56
56
  "$description": "Sans-serif font stack for body text and general UI elements.",
57
57
  "$extensions": {
@@ -69,7 +69,7 @@
69
69
  "name": "fontStack-sansSerif",
70
70
  "attributes": {},
71
71
  "path": ["fontStack", "sansSerif"],
72
- "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
72
+ "value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
73
73
  "type": "fontFamily",
74
74
  "description": "Sans-serif font stack for body text and general UI elements."
75
75
  },
@@ -88,7 +88,7 @@
88
88
  "filePath": "src/tokens/functional/typography/font-stack.json5",
89
89
  "isSource": true,
90
90
  "original": {
91
- "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
91
+ "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
92
92
  "$type": "fontFamily",
93
93
  "$description": "Display font stack for headings and titles. Same as sansSerif but semantically distinct.",
94
94
  "$extensions": {
@@ -106,7 +106,7 @@
106
106
  "name": "fontStack-sansSerifDisplay",
107
107
  "attributes": {},
108
108
  "path": ["fontStack", "sansSerifDisplay"],
109
- "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
109
+ "value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
110
110
  "type": "fontFamily",
111
111
  "description": "Display font stack for headings and titles. Same as sansSerif but semantically distinct."
112
112
  },
@@ -121,9 +121,9 @@
121
121
  "filePath": "src/tokens/functional/typography/font-stack.json5",
122
122
  "isSource": true,
123
123
  "original": {
124
- "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
124
+ "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
125
125
  "$type": "fontFamily",
126
- "$description": "System font stack optimized for cross-platform rendering. Primary font for all UI text.",
126
+ "$description": "Mona Sans–first font stack with system fallbacks, optimized for cross-platform rendering. Primary font stack for all UI text where Mona Sans is available.",
127
127
  "$extensions": {
128
128
  "org.primer.figma": {
129
129
  "collection": "typography",
@@ -135,9 +135,9 @@
135
135
  "name": "fontStack-system",
136
136
  "attributes": {},
137
137
  "path": ["fontStack", "system"],
138
- "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
138
+ "value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
139
139
  "type": "fontFamily",
140
- "description": "System font stack optimized for cross-platform rendering. Primary font for all UI text."
140
+ "description": "Mona Sans–first font stack with system fallbacks, optimized for cross-platform rendering. Primary font stack for all UI text where Mona Sans is available."
141
141
  },
142
142
  "text-body-lineHeight-large": {
143
143
  "key": "{text.body.lineHeight.large}",
@@ -268,7 +268,7 @@
268
268
  "name": "text-body-shorthand-large",
269
269
  "attributes": {},
270
270
  "path": ["text", "body", "shorthand", "large"],
271
- "value": "400 1rem/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
271
+ "value": "400 1rem/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
272
272
  "type": "typography",
273
273
  "description": "User-generated content, markdown rendering."
274
274
  },
@@ -302,7 +302,7 @@
302
302
  "name": "text-body-shorthand-medium",
303
303
  "attributes": {},
304
304
  "path": ["text", "body", "shorthand", "medium"],
305
- "value": "400 0.875rem/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
305
+ "value": "400 0.875rem/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
306
306
  "type": "typography",
307
307
  "description": "Default UI font. Most commonly used for body text."
308
308
  },
@@ -336,7 +336,7 @@
336
336
  "name": "text-body-shorthand-small",
337
337
  "attributes": {},
338
338
  "path": ["text", "body", "shorthand", "small"],
339
- "value": "400 0.75rem/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
339
+ "value": "400 0.75rem/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
340
340
  "type": "typography",
341
341
  "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."
342
342
  },
@@ -511,7 +511,7 @@
511
511
  "name": "text-caption-shorthand",
512
512
  "attributes": {},
513
513
  "path": ["text", "caption", "shorthand"],
514
- "value": "400 0.75rem/1.25 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
514
+ "value": "400 0.75rem/1.25 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
515
515
  "type": "typography",
516
516
  "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."
517
517
  },
@@ -881,7 +881,7 @@
881
881
  "name": "text-display-shorthand",
882
882
  "attributes": {},
883
883
  "path": ["text", "display", "shorthand"],
884
- "value": "500 2.5rem/1.375 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
884
+ "value": "500 2.5rem/1.375 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
885
885
  "type": "typography",
886
886
  "description": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports."
887
887
  },
@@ -1002,7 +1002,7 @@
1002
1002
  "name": "text-subtitle-shorthand",
1003
1003
  "attributes": {},
1004
1004
  "path": ["text", "subtitle", "shorthand"],
1005
- "value": "400 1.25rem/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1005
+ "value": "400 1.25rem/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1006
1006
  "type": "typography",
1007
1007
  "description": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium)."
1008
1008
  },
@@ -1189,7 +1189,7 @@
1189
1189
  "name": "text-title-shorthand-large",
1190
1190
  "attributes": {},
1191
1191
  "path": ["text", "title", "shorthand", "large"],
1192
- "value": "600 2rem/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1192
+ "value": "600 2rem/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1193
1193
  "type": "typography",
1194
1194
  "description": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports."
1195
1195
  },
@@ -1223,7 +1223,7 @@
1223
1223
  "name": "text-title-shorthand-medium",
1224
1224
  "attributes": {},
1225
1225
  "path": ["text", "title", "shorthand", "medium"],
1226
- "value": "600 1.25rem/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1226
+ "value": "600 1.25rem/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1227
1227
  "type": "typography",
1228
1228
  "description": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition."
1229
1229
  },
@@ -1257,7 +1257,7 @@
1257
1257
  "name": "text-title-shorthand-small",
1258
1258
  "attributes": {},
1259
1259
  "path": ["text", "title", "shorthand", "small"],
1260
- "value": "600 1rem/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1260
+ "value": "600 1rem/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1261
1261
  "type": "typography",
1262
1262
  "description": "Uses the same size as body (large) with a heavier weight of semibold (600)."
1263
1263
  },
package/dist/fallbacks/functional/typography/typography.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
- "--fontStack-system": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
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'",
2
+ "--fontStack-system": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
3
+ "--fontStack-sansSerif": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
4
+ "--fontStack-sansSerifDisplay": "'Mona Sans VF', -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
6
  "--text-display-lineBoxHeight": 1.375,
7
7
  "--text-display-size": "2.5rem",
8
8
  "--text-display-lineHeight": 1.375,
9
9
  "--text-display-weight": 500,
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'",
10
+ "--text-display-shorthand": "500 2.5rem/1.375 'Mona Sans VF', -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",
@@ -17,13 +17,13 @@
17
17
  "--text-title-weight-large": 600,
18
18
  "--text-title-weight-medium": 600,
19
19
  "--text-title-weight-small": 600,
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.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
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'",
20
+ "--text-title-shorthand-large": "600 2rem/1.5 'Mona Sans VF', -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 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
22
+ "--text-title-shorthand-small": "600 1rem/1.5 'Mona Sans VF', -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
24
  "--text-subtitle-lineHeight": 1.625,
25
25
  "--text-subtitle-weight": 400,
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'",
26
+ "--text-subtitle-shorthand": "400 1.25rem/1.625 'Mona Sans VF', -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",
@@ -31,13 +31,13 @@
31
31
  "--text-body-lineHeight-medium": 1.5,
32
32
  "--text-body-lineHeight-small": 1.625,
33
33
  "--text-body-weight": 400,
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.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'",
34
+ "--text-body-shorthand-large": "400 1rem/1.5 'Mona Sans VF', -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 'Mona Sans VF', -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 'Mona Sans VF', -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
38
  "--text-caption-lineHeight": 1.25,
39
39
  "--text-caption-weight": 400,
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'",
40
+ "--text-caption-shorthand": "400 0.75rem/1.25 'Mona Sans VF', -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
42
  "--text-codeBlock-lineHeight": 1.5,
43
43
  "--text-codeBlock-weight": 400,
package/dist/figma/typography/typography.json CHANGED
@@ -429,7 +429,7 @@
429
429
  "name": "fontStack/system",
430
430
  "value": "SF Pro Text",
431
431
  "type": "STRING",
432
- "description": "System font stack optimized for cross-platform rendering. Primary font for all UI text.",
432
+ "description": "Mona Sans–first font stack with system fallbacks, optimized for cross-platform rendering. Primary font stack for all UI text where Mona Sans is available.",
433
433
  "refId": "typography/fontStack/system",
434
434
  "collection": "typography",
435
435
  "mode": "default",
package/dist/styleLint/functional/typography/typography.json CHANGED
@@ -38,7 +38,7 @@
38
38
  },
39
39
  "fontStack-sansSerif": {
40
40
  "key": "{fontStack.sansSerif}",
41
- "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
41
+ "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
42
42
  "$type": "fontFamily",
43
43
  "$description": "Sans-serif font stack for body text and general UI elements.",
44
44
  "$extensions": {
@@ -54,7 +54,7 @@
54
54
  "filePath": "src/tokens/functional/typography/font-stack.json5",
55
55
  "isSource": true,
56
56
  "original": {
57
- "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
57
+ "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
58
58
  "$type": "fontFamily",
59
59
  "$description": "Sans-serif font stack for body text and general UI elements.",
60
60
  "$extensions": {
@@ -75,7 +75,7 @@
75
75
  },
76
76
  "fontStack-sansSerifDisplay": {
77
77
  "key": "{fontStack.sansSerifDisplay}",
78
- "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
78
+ "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
79
79
  "$type": "fontFamily",
80
80
  "$description": "Display font stack for headings and titles. Same as sansSerif but semantically distinct.",
81
81
  "$extensions": {
@@ -91,7 +91,7 @@
91
91
  "filePath": "src/tokens/functional/typography/font-stack.json5",
92
92
  "isSource": true,
93
93
  "original": {
94
- "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
94
+ "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
95
95
  "$type": "fontFamily",
96
96
  "$description": "Display font stack for headings and titles. Same as sansSerif but semantically distinct.",
97
97
  "$extensions": {
@@ -112,9 +112,9 @@
112
112
  },
113
113
  "fontStack-system": {
114
114
  "key": "{fontStack.system}",
115
- "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
115
+ "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
116
116
  "$type": "fontFamily",
117
- "$description": "System font stack optimized for cross-platform rendering. Primary font for all UI text.",
117
+ "$description": "Mona Sans–first font stack with system fallbacks, optimized for cross-platform rendering. Primary font stack for all UI text where Mona Sans is available.",
118
118
  "$extensions": {
119
119
  "org.primer.figma": {
120
120
  "collection": "typography",
@@ -124,9 +124,9 @@
124
124
  "filePath": "src/tokens/functional/typography/font-stack.json5",
125
125
  "isSource": true,
126
126
  "original": {
127
- "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
127
+ "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
128
128
  "$type": "fontFamily",
129
- "$description": "System font stack optimized for cross-platform rendering. Primary font for all UI text.",
129
+ "$description": "Mona Sans–first font stack with system fallbacks, optimized for cross-platform rendering. Primary font stack for all UI text where Mona Sans is available.",
130
130
  "$extensions": {
131
131
  "org.primer.figma": {
132
132
  "collection": "typography",
@@ -240,7 +240,7 @@
240
240
  },
241
241
  "text-body-shorthand-large": {
242
242
  "key": "{text.body.shorthand.large}",
243
- "$value": "400 1rem,16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
243
+ "$value": "400 1rem,16px/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
244
244
  "$type": "typography",
245
245
  "$description": "User-generated content, markdown rendering.",
246
246
  "$extensions": {
@@ -274,7 +274,7 @@
274
274
  },
275
275
  "text-body-shorthand-medium": {
276
276
  "key": "{text.body.shorthand.medium}",
277
- "$value": "400 0.875rem,14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
277
+ "$value": "400 0.875rem,14px/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
278
278
  "$type": "typography",
279
279
  "$description": "Default UI font. Most commonly used for body text.",
280
280
  "$extensions": {
@@ -308,7 +308,7 @@
308
308
  },
309
309
  "text-body-shorthand-small": {
310
310
  "key": "{text.body.shorthand.small}",
311
- "$value": "400 0.75rem,12px/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
311
+ "$value": "400 0.75rem,12px/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
312
312
  "$type": "typography",
313
313
  "$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.",
314
314
  "$extensions": {
@@ -483,7 +483,7 @@
483
483
  },
484
484
  "text-caption-shorthand": {
485
485
  "key": "{text.caption.shorthand}",
486
- "$value": "400 0.75rem,12px/1.25 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
486
+ "$value": "400 0.75rem,12px/1.25 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
487
487
  "$type": "typography",
488
488
  "$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.",
489
489
  "$extensions": {
@@ -853,7 +853,7 @@
853
853
  },
854
854
  "text-display-shorthand": {
855
855
  "key": "{text.display.shorthand}",
856
- "$value": "500 2.5rem,40px/1.375 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
856
+ "$value": "500 2.5rem,40px/1.375 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
857
857
  "$type": "typography",
858
858
  "$description": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports.",
859
859
  "$extensions": {
@@ -974,7 +974,7 @@
974
974
  },
975
975
  "text-subtitle-shorthand": {
976
976
  "key": "{text.subtitle.shorthand}",
977
- "$value": "400 1.25rem,20px/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
977
+ "$value": "400 1.25rem,20px/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
978
978
  "$type": "typography",
979
979
  "$description": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium).",
980
980
  "$extensions": {
@@ -1161,7 +1161,7 @@
1161
1161
  },
1162
1162
  "text-title-shorthand-large": {
1163
1163
  "key": "{text.title.shorthand.large}",
1164
- "$value": "600 2rem,32px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1164
+ "$value": "600 2rem,32px/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1165
1165
  "$type": "typography",
1166
1166
  "$description": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports.",
1167
1167
  "$extensions": {
@@ -1195,7 +1195,7 @@
1195
1195
  },
1196
1196
  "text-title-shorthand-medium": {
1197
1197
  "key": "{text.title.shorthand.medium}",
1198
- "$value": "600 1.25rem,20px/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1198
+ "$value": "600 1.25rem,20px/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1199
1199
  "$type": "typography",
1200
1200
  "$description": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition.",
1201
1201
  "$extensions": {
@@ -1229,7 +1229,7 @@
1229
1229
  },
1230
1230
  "text-title-shorthand-small": {
1231
1231
  "key": "{text.title.shorthand.small}",
1232
- "$value": "600 1rem,16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1232
+ "$value": "600 1rem,16px/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
1233
1233
  "$type": "typography",
1234
1234
  "$description": "Uses the same size as body (large) with a heavier weight of semibold (600).",
1235
1235
  "$extensions": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/primitives",
3
- "version": "11.5.1",
3
+ "version": "11.6.0-rc.404a05ed",
4
4
  "description": "Typography, spacing, and color primitives for Primer design system",
5
5
  "type": "module",
6
6
  "files": [
@@ -81,4 +81,4 @@
81
81
  "zod-validation-error": "^4.0.1",
82
82
  "colorjs.io": "^0.6.1"
83
83
  }
84
- }
84
+ }
package/src/tokens/functional/typography/font-stack.json5 CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  fontStack: {
3
3
  system: {
4
- $value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
4
+ $value: "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
5
5
  $type: 'fontFamily',
6
- $description: 'System font stack optimized for cross-platform rendering. Primary font for all UI text.',
6
+ $description: 'Mona Sans–first font stack with system fallbacks, optimized for cross-platform rendering. Primary font stack for all UI text where Mona Sans is available.',
7
7
  $extensions: {
8
8
  'org.primer.figma': {
9
9
  collection: 'typography',
@@ -12,7 +12,7 @@
12
12
  },
13
13
  },
14
14
  sansSerif: {
15
- $value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
15
+ $value: "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
16
16
  $type: 'fontFamily',
17
17
  $description: 'Sans-serif font stack for body text and general UI elements.',
18
18
  $extensions: {
@@ -27,7 +27,7 @@
27
27
  },
28
28
  },
29
29
  sansSerifDisplay: {
30
- $value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
30
+ $value: "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
31
31
  $type: 'fontFamily',
32
32
  $description: 'Display font stack for headings and titles. Same as sansSerif but semantically distinct.',
33
33
  $extensions: {