@primer/primitives 10.6.0-rc.b4f6974f → 10.6.0-rc.efb715c5

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/build/platforms/figma.js +4 -4
  2. package/dist/build/schemas/dimensionToken.js +1 -0
  3. package/dist/build/transformers/fontFamilyToFigma.js +4 -1
  4. package/dist/docs/functional/size/border.json +78 -6
  5. package/dist/figma/dimension/dimension.json +61 -0
  6. package/dist/figma/typography/typography.json +4 -4
  7. package/dist/styleLint/functional/size/border.json +78 -6
  8. package/package.json +1 -1
  9. package/src/tokens/functional/size/border.json5 +36 -0
package/dist/build/platforms/figma.js CHANGED
@@ -43,10 +43,10 @@ export const figma = (outputFile, prefix, buildPath, options = {}) => {
43
43
  'name/pathToFigma',
44
44
  ],
45
45
  options: Object.assign(Object.assign({ basePxFontSize: 16, fontFamilies: {
46
- 'fontStack/system': 'SF Pro Text',
47
- 'fontStack/sansSerif': 'SF Pro Text',
48
- 'fontStack/sansSerifDisplay': 'SF Pro Display',
49
- 'fontStack/monospace': 'SF Mono',
46
+ system: 'SF Pro Text',
47
+ sansSerif: 'SF Pro Text',
48
+ sansSerifDisplay: 'SF Pro Display',
49
+ monospace: 'SF Mono',
50
50
  } }, options), { theme: figmaTheme, themeOverrides: {
51
51
  theme: options.theme,
52
52
  } }),
package/dist/build/schemas/dimensionToken.js CHANGED
@@ -19,6 +19,7 @@ export const dimensionToken = baseToken
19
19
  'gap',
20
20
  'radius',
21
21
  'borderColor',
22
+ 'borderWidth',
22
23
  'effectFloat',
23
24
  'fontSize',
24
25
  'letterSpacing',
package/dist/build/transformers/fontFamilyToFigma.js CHANGED
@@ -40,5 +40,8 @@ export const fontFamilyToFigma = {
40
40
  type: 'value',
41
41
  transitive: true,
42
42
  filter: isFontFamily,
43
- transform: (token, platform, options) => { var _a; return parseFontFamily(token, (_a = platform.options) === null || _a === void 0 ? void 0 : _a.fontFamilies, options); },
43
+ transform: (token, platform, options) => {
44
+ var _a;
45
+ return parseFontFamily(token, (_a = platform.options) === null || _a === void 0 ? void 0 : _a.fontFamilies, options);
46
+ },
44
47
  };
package/dist/docs/functional/size/border.json CHANGED
@@ -162,11 +162,23 @@
162
162
  "type": "dimension"
163
163
  },
164
164
  "borderWidth-default": {
165
+ "$extensions": {
166
+ "org.primer.figma": {
167
+ "collection": "functional/size",
168
+ "scopes": ["borderWidth", "effectFloat"]
169
+ }
170
+ },
165
171
  "filePath": "src/tokens/functional/size/border.json5",
166
172
  "isSource": true,
167
173
  "original": {
168
174
  "$value": "{borderWidth.thin}",
169
- "$type": "dimension"
175
+ "$type": "dimension",
176
+ "$extensions": {
177
+ "org.primer.figma": {
178
+ "collection": "functional/size",
179
+ "scopes": ["borderWidth", "effectFloat"]
180
+ }
181
+ }
170
182
  },
171
183
  "name": "borderWidth-default",
172
184
  "attributes": {},
@@ -176,11 +188,23 @@
176
188
  "type": "dimension"
177
189
  },
178
190
  "borderWidth-thick": {
191
+ "$extensions": {
192
+ "org.primer.figma": {
193
+ "collection": "functional/size",
194
+ "scopes": ["borderWidth", "effectFloat"]
195
+ }
196
+ },
179
197
  "filePath": "src/tokens/functional/size/border.json5",
180
198
  "isSource": true,
181
199
  "original": {
182
200
  "$value": "2px",
183
- "$type": "dimension"
201
+ "$type": "dimension",
202
+ "$extensions": {
203
+ "org.primer.figma": {
204
+ "collection": "functional/size",
205
+ "scopes": ["borderWidth", "effectFloat"]
206
+ }
207
+ }
184
208
  },
185
209
  "name": "borderWidth-thick",
186
210
  "attributes": {},
@@ -190,11 +214,23 @@
190
214
  "type": "dimension"
191
215
  },
192
216
  "borderWidth-thicker": {
217
+ "$extensions": {
218
+ "org.primer.figma": {
219
+ "collection": "functional/size",
220
+ "scopes": ["borderWidth", "effectFloat"]
221
+ }
222
+ },
193
223
  "filePath": "src/tokens/functional/size/border.json5",
194
224
  "isSource": true,
195
225
  "original": {
196
226
  "$value": "4px",
197
- "$type": "dimension"
227
+ "$type": "dimension",
228
+ "$extensions": {
229
+ "org.primer.figma": {
230
+ "collection": "functional/size",
231
+ "scopes": ["borderWidth", "effectFloat"]
232
+ }
233
+ }
198
234
  },
199
235
  "name": "borderWidth-thicker",
200
236
  "attributes": {},
@@ -204,11 +240,23 @@
204
240
  "type": "dimension"
205
241
  },
206
242
  "borderWidth-thin": {
243
+ "$extensions": {
244
+ "org.primer.figma": {
245
+ "collection": "functional/size",
246
+ "scopes": ["borderWidth", "effectFloat"]
247
+ }
248
+ },
207
249
  "filePath": "src/tokens/functional/size/border.json5",
208
250
  "isSource": true,
209
251
  "original": {
210
252
  "$value": "1px",
211
- "$type": "dimension"
253
+ "$type": "dimension",
254
+ "$extensions": {
255
+ "org.primer.figma": {
256
+ "collection": "functional/size",
257
+ "scopes": ["borderWidth", "effectFloat"]
258
+ }
259
+ }
212
260
  },
213
261
  "name": "borderWidth-thin",
214
262
  "attributes": {},
@@ -262,11 +310,23 @@
262
310
  "description": "Thin shadow for borders"
263
311
  },
264
312
  "outline-focus-offset": {
313
+ "$extensions": {
314
+ "org.primer.figma": {
315
+ "collection": "functional/size",
316
+ "scopes": ["borderWidth", "effectFloat"]
317
+ }
318
+ },
265
319
  "filePath": "src/tokens/functional/size/border.json5",
266
320
  "isSource": true,
267
321
  "original": {
268
322
  "$value": "-2px",
269
- "$type": "dimension"
323
+ "$type": "dimension",
324
+ "$extensions": {
325
+ "org.primer.figma": {
326
+ "collection": "functional/size",
327
+ "scopes": ["borderWidth", "effectFloat"]
328
+ }
329
+ }
270
330
  },
271
331
  "name": "outline-focus-offset",
272
332
  "attributes": {},
@@ -276,11 +336,23 @@
276
336
  "type": "dimension"
277
337
  },
278
338
  "outline-focus-width": {
339
+ "$extensions": {
340
+ "org.primer.figma": {
341
+ "collection": "functional/size",
342
+ "scopes": ["borderWidth", "effectFloat"]
343
+ }
344
+ },
279
345
  "filePath": "src/tokens/functional/size/border.json5",
280
346
  "isSource": true,
281
347
  "original": {
282
348
  "$value": "2px",
283
- "$type": "dimension"
349
+ "$type": "dimension",
350
+ "$extensions": {
351
+ "org.primer.figma": {
352
+ "collection": "functional/size",
353
+ "scopes": ["borderWidth", "effectFloat"]
354
+ }
355
+ }
284
356
  },
285
357
  "name": "outline-focus-width",
286
358
  "attributes": {},
package/dist/figma/dimension/dimension.json CHANGED
@@ -968,6 +968,47 @@
968
968
  "group": "pattern/size",
969
969
  "scopes": ["WIDTH_HEIGHT"]
970
970
  },
971
+ {
972
+ "name": "borderWidth/default",
973
+ "value": 1,
974
+ "type": "FLOAT",
975
+ "refId": "functional/size/borderWidth/default",
976
+ "reference": "functional/size/borderWidth/thin",
977
+ "collection": "functional/size",
978
+ "mode": "default",
979
+ "group": "functional/size",
980
+ "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
981
+ },
982
+ {
983
+ "name": "borderWidth/thin",
984
+ "value": 1,
985
+ "type": "FLOAT",
986
+ "refId": "functional/size/borderWidth/thin",
987
+ "collection": "functional/size",
988
+ "mode": "default",
989
+ "group": "functional/size",
990
+ "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
991
+ },
992
+ {
993
+ "name": "borderWidth/thick",
994
+ "value": 2,
995
+ "type": "FLOAT",
996
+ "refId": "functional/size/borderWidth/thick",
997
+ "collection": "functional/size",
998
+ "mode": "default",
999
+ "group": "functional/size",
1000
+ "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
1001
+ },
1002
+ {
1003
+ "name": "borderWidth/thicker",
1004
+ "value": 4,
1005
+ "type": "FLOAT",
1006
+ "refId": "functional/size/borderWidth/thicker",
1007
+ "collection": "functional/size",
1008
+ "mode": "default",
1009
+ "group": "functional/size",
1010
+ "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
1011
+ },
971
1012
  {
972
1013
  "name": "borderRadius/small",
973
1014
  "value": 3,
@@ -1034,5 +1075,25 @@
1034
1075
  "codeSyntax": {
1035
1076
  "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
1036
1077
  }
1078
+ },
1079
+ {
1080
+ "name": "outline/focus/offset",
1081
+ "value": -2,
1082
+ "type": "FLOAT",
1083
+ "refId": "functional/size/outline/focus/offset",
1084
+ "collection": "functional/size",
1085
+ "mode": "default",
1086
+ "group": "functional/size",
1087
+ "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
1088
+ },
1089
+ {
1090
+ "name": "outline/focus/width",
1091
+ "value": 2,
1092
+ "type": "FLOAT",
1093
+ "refId": "functional/size/outline/focus/width",
1094
+ "collection": "functional/size",
1095
+ "mode": "default",
1096
+ "group": "functional/size",
1097
+ "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
1037
1098
  }
1038
1099
  ]
package/dist/figma/typography/typography.json CHANGED
@@ -41,7 +41,7 @@
41
41
  },
42
42
  {
43
43
  "name": "fontStack/system",
44
- "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
44
+ "value": "SF Pro Text",
45
45
  "type": "STRING",
46
46
  "refId": "typography/fontStack/system",
47
47
  "collection": "typography",
@@ -51,7 +51,7 @@
51
51
  },
52
52
  {
53
53
  "name": "fontStack/sansSerif",
54
- "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
54
+ "value": "SF Pro Text",
55
55
  "type": "STRING",
56
56
  "refId": "typography/fontStack/sansSerif",
57
57
  "collection": "typography",
@@ -61,7 +61,7 @@
61
61
  },
62
62
  {
63
63
  "name": "fontStack/sansSerifDisplay",
64
- "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
64
+ "value": "SF Pro Display",
65
65
  "type": "STRING",
66
66
  "refId": "typography/fontStack/sansSerifDisplay",
67
67
  "collection": "typography",
@@ -71,7 +71,7 @@
71
71
  },
72
72
  {
73
73
  "name": "fontStack/monospace",
74
- "value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
74
+ "value": "SF Mono",
75
75
  "type": "STRING",
76
76
  "refId": "typography/fontStack/monospace",
77
77
  "collection": "typography",
package/dist/styleLint/functional/size/border.json CHANGED
@@ -164,11 +164,23 @@
164
164
  "borderWidth-default": {
165
165
  "$value": ["0.00390625rem", "0.0625px"],
166
166
  "$type": "dimension",
167
+ "$extensions": {
168
+ "org.primer.figma": {
169
+ "collection": "functional/size",
170
+ "scopes": ["borderWidth", "effectFloat"]
171
+ }
172
+ },
167
173
  "filePath": "src/tokens/functional/size/border.json5",
168
174
  "isSource": true,
169
175
  "original": {
170
176
  "$value": "{borderWidth.thin}",
171
- "$type": "dimension"
177
+ "$type": "dimension",
178
+ "$extensions": {
179
+ "org.primer.figma": {
180
+ "collection": "functional/size",
181
+ "scopes": ["borderWidth", "effectFloat"]
182
+ }
183
+ }
172
184
  },
173
185
  "name": "borderWidth-default",
174
186
  "attributes": {},
@@ -178,11 +190,23 @@
178
190
  "borderWidth-thick": {
179
191
  "$value": ["0.125rem", "2px"],
180
192
  "$type": "dimension",
193
+ "$extensions": {
194
+ "org.primer.figma": {
195
+ "collection": "functional/size",
196
+ "scopes": ["borderWidth", "effectFloat"]
197
+ }
198
+ },
181
199
  "filePath": "src/tokens/functional/size/border.json5",
182
200
  "isSource": true,
183
201
  "original": {
184
202
  "$value": "2px",
185
- "$type": "dimension"
203
+ "$type": "dimension",
204
+ "$extensions": {
205
+ "org.primer.figma": {
206
+ "collection": "functional/size",
207
+ "scopes": ["borderWidth", "effectFloat"]
208
+ }
209
+ }
186
210
  },
187
211
  "name": "borderWidth-thick",
188
212
  "attributes": {},
@@ -192,11 +216,23 @@
192
216
  "borderWidth-thicker": {
193
217
  "$value": ["0.25rem", "4px"],
194
218
  "$type": "dimension",
219
+ "$extensions": {
220
+ "org.primer.figma": {
221
+ "collection": "functional/size",
222
+ "scopes": ["borderWidth", "effectFloat"]
223
+ }
224
+ },
195
225
  "filePath": "src/tokens/functional/size/border.json5",
196
226
  "isSource": true,
197
227
  "original": {
198
228
  "$value": "4px",
199
- "$type": "dimension"
229
+ "$type": "dimension",
230
+ "$extensions": {
231
+ "org.primer.figma": {
232
+ "collection": "functional/size",
233
+ "scopes": ["borderWidth", "effectFloat"]
234
+ }
235
+ }
200
236
  },
201
237
  "name": "borderWidth-thicker",
202
238
  "attributes": {},
@@ -206,11 +242,23 @@
206
242
  "borderWidth-thin": {
207
243
  "$value": ["0.0625rem", "1px"],
208
244
  "$type": "dimension",
245
+ "$extensions": {
246
+ "org.primer.figma": {
247
+ "collection": "functional/size",
248
+ "scopes": ["borderWidth", "effectFloat"]
249
+ }
250
+ },
209
251
  "filePath": "src/tokens/functional/size/border.json5",
210
252
  "isSource": true,
211
253
  "original": {
212
254
  "$value": "1px",
213
- "$type": "dimension"
255
+ "$type": "dimension",
256
+ "$extensions": {
257
+ "org.primer.figma": {
258
+ "collection": "functional/size",
259
+ "scopes": ["borderWidth", "effectFloat"]
260
+ }
261
+ }
214
262
  },
215
263
  "name": "borderWidth-thin",
216
264
  "attributes": {},
@@ -264,11 +312,23 @@
264
312
  "outline-focus-offset": {
265
313
  "$value": ["-0.125rem", "-2px"],
266
314
  "$type": "dimension",
315
+ "$extensions": {
316
+ "org.primer.figma": {
317
+ "collection": "functional/size",
318
+ "scopes": ["borderWidth", "effectFloat"]
319
+ }
320
+ },
267
321
  "filePath": "src/tokens/functional/size/border.json5",
268
322
  "isSource": true,
269
323
  "original": {
270
324
  "$value": "-2px",
271
- "$type": "dimension"
325
+ "$type": "dimension",
326
+ "$extensions": {
327
+ "org.primer.figma": {
328
+ "collection": "functional/size",
329
+ "scopes": ["borderWidth", "effectFloat"]
330
+ }
331
+ }
272
332
  },
273
333
  "name": "outline-focus-offset",
274
334
  "attributes": {},
@@ -278,11 +338,23 @@
278
338
  "outline-focus-width": {
279
339
  "$value": ["0.125rem", "2px"],
280
340
  "$type": "dimension",
341
+ "$extensions": {
342
+ "org.primer.figma": {
343
+ "collection": "functional/size",
344
+ "scopes": ["borderWidth", "effectFloat"]
345
+ }
346
+ },
281
347
  "filePath": "src/tokens/functional/size/border.json5",
282
348
  "isSource": true,
283
349
  "original": {
284
350
  "$value": "2px",
285
- "$type": "dimension"
351
+ "$type": "dimension",
352
+ "$extensions": {
353
+ "org.primer.figma": {
354
+ "collection": "functional/size",
355
+ "scopes": ["borderWidth", "effectFloat"]
356
+ }
357
+ }
286
358
  },
287
359
  "name": "outline-focus-width",
288
360
  "attributes": {},
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/primitives",
3
- "version": "10.6.0-rc.b4f6974f",
3
+ "version": "10.6.0-rc.efb715c5",
4
4
  "description": "Typography, spacing, and color primitives for Primer design system",
5
5
  "type": "module",
6
6
  "files": [
package/src/tokens/functional/size/border.json5 CHANGED
@@ -18,18 +18,42 @@
18
18
  default: {
19
19
  $value: '{borderWidth.thin}',
20
20
  $type: 'dimension',
21
+ $extensions: {
22
+ 'org.primer.figma': {
23
+ collection: 'functional/size',
24
+ scopes: ['borderWidth', 'effectFloat'],
25
+ },
26
+ },
21
27
  },
22
28
  thin: {
23
29
  $value: '1px',
24
30
  $type: 'dimension',
31
+ $extensions: {
32
+ 'org.primer.figma': {
33
+ collection: 'functional/size',
34
+ scopes: ['borderWidth', 'effectFloat'],
35
+ },
36
+ },
25
37
  },
26
38
  thick: {
27
39
  $value: '2px',
28
40
  $type: 'dimension',
41
+ $extensions: {
42
+ 'org.primer.figma': {
43
+ collection: 'functional/size',
44
+ scopes: ['borderWidth', 'effectFloat'],
45
+ },
46
+ },
29
47
  },
30
48
  thicker: {
31
49
  $value: '4px',
32
50
  $type: 'dimension',
51
+ $extensions: {
52
+ 'org.primer.figma': {
53
+ collection: 'functional/size',
54
+ scopes: ['borderWidth', 'effectFloat'],
55
+ },
56
+ },
33
57
  },
34
58
  },
35
59
  borderRadius: {
@@ -105,10 +129,22 @@
105
129
  offset: {
106
130
  $value: '-2px',
107
131
  $type: 'dimension',
132
+ $extensions: {
133
+ 'org.primer.figma': {
134
+ collection: 'functional/size',
135
+ scopes: ['borderWidth', 'effectFloat'],
136
+ },
137
+ },
108
138
  },
109
139
  width: {
110
140
  $value: '2px',
111
141
  $type: 'dimension',
142
+ $extensions: {
143
+ 'org.primer.figma': {
144
+ collection: 'functional/size',
145
+ scopes: ['borderWidth', 'effectFloat'],
146
+ },
147
+ },
112
148
  },
113
149
  },
114
150
  },