@primer/primitives 0.0.0-20260413145152 → 0.0.0-20260414072928
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.
|
@@ -182,5 +182,139 @@
|
|
|
182
182
|
"value": "inset 0 0 0 0.0625rem",
|
|
183
183
|
"type": "custom-string",
|
|
184
184
|
"description": "Thin shadow used instead of a border to prevent layout shift"
|
|
185
|
+
},
|
|
186
|
+
"focus-outline-offset": {
|
|
187
|
+
"key": "{focus.outline-offset}",
|
|
188
|
+
"$extensions": {
|
|
189
|
+
"org.primer.figma": {
|
|
190
|
+
"collection": "functional/size",
|
|
191
|
+
"scopes": ["borderWidth", "effectFloat"]
|
|
192
|
+
}
|
|
193
|
+
},
|
|
194
|
+
"filePath": "src/tokens/component/focus.json5",
|
|
195
|
+
"isSource": true,
|
|
196
|
+
"original": {
|
|
197
|
+
"$value": {
|
|
198
|
+
"value": -2,
|
|
199
|
+
"unit": "px"
|
|
200
|
+
},
|
|
201
|
+
"$type": "dimension",
|
|
202
|
+
"$description": "Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds",
|
|
203
|
+
"$extensions": {
|
|
204
|
+
"org.primer.figma": {
|
|
205
|
+
"collection": "functional/size",
|
|
206
|
+
"scopes": ["borderWidth", "effectFloat"]
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
"key": "{focus.outline-offset}"
|
|
210
|
+
},
|
|
211
|
+
"name": "focus-outline-offset",
|
|
212
|
+
"attributes": {},
|
|
213
|
+
"path": ["focus", "outline-offset"],
|
|
214
|
+
"value": "-0.125rem",
|
|
215
|
+
"type": "dimension",
|
|
216
|
+
"description": "Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds"
|
|
217
|
+
},
|
|
218
|
+
"focus-outline-width": {
|
|
219
|
+
"key": "{focus.outline-width}",
|
|
220
|
+
"$extensions": {
|
|
221
|
+
"org.primer.figma": {
|
|
222
|
+
"collection": "functional/size",
|
|
223
|
+
"scopes": ["borderWidth", "effectFloat"]
|
|
224
|
+
},
|
|
225
|
+
"org.primer.llm": {
|
|
226
|
+
"usage": ["focus-ring", "keyboard-focus", "accessibility"],
|
|
227
|
+
"rules": "MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance."
|
|
228
|
+
}
|
|
229
|
+
},
|
|
230
|
+
"filePath": "src/tokens/component/focus.json5",
|
|
231
|
+
"isSource": true,
|
|
232
|
+
"original": {
|
|
233
|
+
"$value": {
|
|
234
|
+
"value": 2,
|
|
235
|
+
"unit": "px"
|
|
236
|
+
},
|
|
237
|
+
"$type": "dimension",
|
|
238
|
+
"$description": "Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements",
|
|
239
|
+
"$extensions": {
|
|
240
|
+
"org.primer.figma": {
|
|
241
|
+
"collection": "functional/size",
|
|
242
|
+
"scopes": ["borderWidth", "effectFloat"]
|
|
243
|
+
},
|
|
244
|
+
"org.primer.llm": {
|
|
245
|
+
"usage": ["focus-ring", "keyboard-focus", "accessibility"],
|
|
246
|
+
"rules": "MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance."
|
|
247
|
+
}
|
|
248
|
+
},
|
|
249
|
+
"key": "{focus.outline-width}"
|
|
250
|
+
},
|
|
251
|
+
"name": "focus-outline-width",
|
|
252
|
+
"attributes": {},
|
|
253
|
+
"path": ["focus", "outline-width"],
|
|
254
|
+
"value": "0.125rem",
|
|
255
|
+
"type": "dimension",
|
|
256
|
+
"description": "Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements"
|
|
257
|
+
},
|
|
258
|
+
"outline-focus-offset": {
|
|
259
|
+
"key": "{outline.focus.offset}",
|
|
260
|
+
"$deprecated": "-0.125rem",
|
|
261
|
+
"$extensions": {
|
|
262
|
+
"org.primer.figma": {
|
|
263
|
+
"collection": "functional/size",
|
|
264
|
+
"scopes": ["borderWidth", "effectFloat"]
|
|
265
|
+
}
|
|
266
|
+
},
|
|
267
|
+
"filePath": "src/tokens/component/focus.json5",
|
|
268
|
+
"isSource": true,
|
|
269
|
+
"original": {
|
|
270
|
+
"$value": "{focus.outline-offset}",
|
|
271
|
+
"$type": "dimension",
|
|
272
|
+
"$deprecated": "{focus.outline-offset}",
|
|
273
|
+
"$description": "Deprecated. Use focus.outline-offset instead.",
|
|
274
|
+
"$extensions": {
|
|
275
|
+
"org.primer.figma": {
|
|
276
|
+
"collection": "functional/size",
|
|
277
|
+
"scopes": ["borderWidth", "effectFloat"]
|
|
278
|
+
}
|
|
279
|
+
},
|
|
280
|
+
"key": "{outline.focus.offset}"
|
|
281
|
+
},
|
|
282
|
+
"name": "outline-focus-offset",
|
|
283
|
+
"attributes": {},
|
|
284
|
+
"path": ["outline", "focus", "offset"],
|
|
285
|
+
"value": "-0.125rem",
|
|
286
|
+
"type": "dimension",
|
|
287
|
+
"description": "Deprecated. Use focus.outline-offset instead."
|
|
288
|
+
},
|
|
289
|
+
"outline-focus-width": {
|
|
290
|
+
"key": "{outline.focus.width}",
|
|
291
|
+
"$deprecated": "0.125rem",
|
|
292
|
+
"$extensions": {
|
|
293
|
+
"org.primer.figma": {
|
|
294
|
+
"collection": "functional/size",
|
|
295
|
+
"scopes": ["borderWidth", "effectFloat"]
|
|
296
|
+
}
|
|
297
|
+
},
|
|
298
|
+
"filePath": "src/tokens/component/focus.json5",
|
|
299
|
+
"isSource": true,
|
|
300
|
+
"original": {
|
|
301
|
+
"$value": "{focus.outline-width}",
|
|
302
|
+
"$type": "dimension",
|
|
303
|
+
"$deprecated": "{focus.outline-width}",
|
|
304
|
+
"$description": "Deprecated. Use focus.outline-width instead.",
|
|
305
|
+
"$extensions": {
|
|
306
|
+
"org.primer.figma": {
|
|
307
|
+
"collection": "functional/size",
|
|
308
|
+
"scopes": ["borderWidth", "effectFloat"]
|
|
309
|
+
}
|
|
310
|
+
},
|
|
311
|
+
"key": "{outline.focus.width}"
|
|
312
|
+
},
|
|
313
|
+
"name": "outline-focus-width",
|
|
314
|
+
"attributes": {},
|
|
315
|
+
"path": ["outline", "focus", "width"],
|
|
316
|
+
"value": "0.125rem",
|
|
317
|
+
"type": "dimension",
|
|
318
|
+
"description": "Deprecated. Use focus.outline-width instead."
|
|
185
319
|
}
|
|
186
320
|
}
|
|
@@ -5,5 +5,9 @@
|
|
|
5
5
|
"--borderWidth-default": "0.0625rem",
|
|
6
6
|
"--borderWidth-thin": "0.0625rem",
|
|
7
7
|
"--borderWidth-thick": "0.125rem",
|
|
8
|
-
"--borderWidth-thicker": "0.25rem"
|
|
8
|
+
"--borderWidth-thicker": "0.25rem",
|
|
9
|
+
"--focus-outline-width": "0.125rem",
|
|
10
|
+
"--focus-outline-offset": "-0.125rem",
|
|
11
|
+
"--outline-focus-offset": "-0.125rem",
|
|
12
|
+
"--outline-focus-width": "0.125rem"
|
|
9
13
|
}
|
|
@@ -182,5 +182,139 @@
|
|
|
182
182
|
"name": "boxShadow-thin",
|
|
183
183
|
"attributes": {},
|
|
184
184
|
"path": ["boxShadow", "thin"]
|
|
185
|
+
},
|
|
186
|
+
"focus-outline-offset": {
|
|
187
|
+
"key": "{focus.outline-offset}",
|
|
188
|
+
"$value": ["-0.125rem", "-2px"],
|
|
189
|
+
"$type": "dimension",
|
|
190
|
+
"$description": "Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds",
|
|
191
|
+
"$extensions": {
|
|
192
|
+
"org.primer.figma": {
|
|
193
|
+
"collection": "functional/size",
|
|
194
|
+
"scopes": ["borderWidth", "effectFloat"]
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
"filePath": "src/tokens/component/focus.json5",
|
|
198
|
+
"isSource": true,
|
|
199
|
+
"original": {
|
|
200
|
+
"$value": {
|
|
201
|
+
"value": -2,
|
|
202
|
+
"unit": "px"
|
|
203
|
+
},
|
|
204
|
+
"$type": "dimension",
|
|
205
|
+
"$description": "Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds",
|
|
206
|
+
"$extensions": {
|
|
207
|
+
"org.primer.figma": {
|
|
208
|
+
"collection": "functional/size",
|
|
209
|
+
"scopes": ["borderWidth", "effectFloat"]
|
|
210
|
+
}
|
|
211
|
+
},
|
|
212
|
+
"key": "{focus.outline-offset}"
|
|
213
|
+
},
|
|
214
|
+
"name": "focus-outline-offset",
|
|
215
|
+
"attributes": {},
|
|
216
|
+
"path": ["focus", "outline-offset"]
|
|
217
|
+
},
|
|
218
|
+
"focus-outline-width": {
|
|
219
|
+
"key": "{focus.outline-width}",
|
|
220
|
+
"$value": ["0.125rem", "2px"],
|
|
221
|
+
"$type": "dimension",
|
|
222
|
+
"$description": "Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements",
|
|
223
|
+
"$extensions": {
|
|
224
|
+
"org.primer.figma": {
|
|
225
|
+
"collection": "functional/size",
|
|
226
|
+
"scopes": ["borderWidth", "effectFloat"]
|
|
227
|
+
},
|
|
228
|
+
"org.primer.llm": {
|
|
229
|
+
"usage": ["focus-ring", "keyboard-focus", "accessibility"],
|
|
230
|
+
"rules": "MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance."
|
|
231
|
+
}
|
|
232
|
+
},
|
|
233
|
+
"filePath": "src/tokens/component/focus.json5",
|
|
234
|
+
"isSource": true,
|
|
235
|
+
"original": {
|
|
236
|
+
"$value": {
|
|
237
|
+
"value": 2,
|
|
238
|
+
"unit": "px"
|
|
239
|
+
},
|
|
240
|
+
"$type": "dimension",
|
|
241
|
+
"$description": "Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements",
|
|
242
|
+
"$extensions": {
|
|
243
|
+
"org.primer.figma": {
|
|
244
|
+
"collection": "functional/size",
|
|
245
|
+
"scopes": ["borderWidth", "effectFloat"]
|
|
246
|
+
},
|
|
247
|
+
"org.primer.llm": {
|
|
248
|
+
"usage": ["focus-ring", "keyboard-focus", "accessibility"],
|
|
249
|
+
"rules": "MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance."
|
|
250
|
+
}
|
|
251
|
+
},
|
|
252
|
+
"key": "{focus.outline-width}"
|
|
253
|
+
},
|
|
254
|
+
"name": "focus-outline-width",
|
|
255
|
+
"attributes": {},
|
|
256
|
+
"path": ["focus", "outline-width"]
|
|
257
|
+
},
|
|
258
|
+
"outline-focus-offset": {
|
|
259
|
+
"key": "{outline.focus.offset}",
|
|
260
|
+
"$value": ["-0.125rem", "-2px"],
|
|
261
|
+
"$type": "dimension",
|
|
262
|
+
"$deprecated": ["-0.125rem", "-2px"],
|
|
263
|
+
"$description": "Deprecated. Use focus.outline-offset instead.",
|
|
264
|
+
"$extensions": {
|
|
265
|
+
"org.primer.figma": {
|
|
266
|
+
"collection": "functional/size",
|
|
267
|
+
"scopes": ["borderWidth", "effectFloat"]
|
|
268
|
+
}
|
|
269
|
+
},
|
|
270
|
+
"filePath": "src/tokens/component/focus.json5",
|
|
271
|
+
"isSource": true,
|
|
272
|
+
"original": {
|
|
273
|
+
"$value": "{focus.outline-offset}",
|
|
274
|
+
"$type": "dimension",
|
|
275
|
+
"$deprecated": "{focus.outline-offset}",
|
|
276
|
+
"$description": "Deprecated. Use focus.outline-offset instead.",
|
|
277
|
+
"$extensions": {
|
|
278
|
+
"org.primer.figma": {
|
|
279
|
+
"collection": "functional/size",
|
|
280
|
+
"scopes": ["borderWidth", "effectFloat"]
|
|
281
|
+
}
|
|
282
|
+
},
|
|
283
|
+
"key": "{outline.focus.offset}"
|
|
284
|
+
},
|
|
285
|
+
"name": "outline-focus-offset",
|
|
286
|
+
"attributes": {},
|
|
287
|
+
"path": ["outline", "focus", "offset"]
|
|
288
|
+
},
|
|
289
|
+
"outline-focus-width": {
|
|
290
|
+
"key": "{outline.focus.width}",
|
|
291
|
+
"$value": ["0.125rem", "2px"],
|
|
292
|
+
"$type": "dimension",
|
|
293
|
+
"$deprecated": ["0.125rem", "2px"],
|
|
294
|
+
"$description": "Deprecated. Use focus.outline-width instead.",
|
|
295
|
+
"$extensions": {
|
|
296
|
+
"org.primer.figma": {
|
|
297
|
+
"collection": "functional/size",
|
|
298
|
+
"scopes": ["borderWidth", "effectFloat"]
|
|
299
|
+
}
|
|
300
|
+
},
|
|
301
|
+
"filePath": "src/tokens/component/focus.json5",
|
|
302
|
+
"isSource": true,
|
|
303
|
+
"original": {
|
|
304
|
+
"$value": "{focus.outline-width}",
|
|
305
|
+
"$type": "dimension",
|
|
306
|
+
"$deprecated": "{focus.outline-width}",
|
|
307
|
+
"$description": "Deprecated. Use focus.outline-width instead.",
|
|
308
|
+
"$extensions": {
|
|
309
|
+
"org.primer.figma": {
|
|
310
|
+
"collection": "functional/size",
|
|
311
|
+
"scopes": ["borderWidth", "effectFloat"]
|
|
312
|
+
}
|
|
313
|
+
},
|
|
314
|
+
"key": "{outline.focus.width}"
|
|
315
|
+
},
|
|
316
|
+
"name": "outline-focus-width",
|
|
317
|
+
"attributes": {},
|
|
318
|
+
"path": ["outline", "focus", "width"]
|
|
185
319
|
}
|
|
186
320
|
}
|