@primer/primitives 10.3.0-rc.fcd52a27 → 10.3.0

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 (62) hide show
  1. package/dist/build/transformers/colorToHex.js +3 -3
  2. package/dist/build/transformers/colorToRgbAlpha.js +2 -2
  3. package/dist/build/transformers/shadowToCss.js +2 -2
  4. package/dist/build/transformers/utilities/alpha.d.ts +2 -2
  5. package/dist/build/transformers/utilities/alpha.js +3 -3
  6. package/dist/build/utilities/log.d.ts +6 -0
  7. package/dist/build/utilities/log.js +34 -0
  8. package/dist/docs/functional/themes/dark-colorblind.json +324 -26
  9. package/dist/docs/functional/themes/dark-dimmed.json +391 -27
  10. package/dist/docs/functional/themes/dark-high-contrast.json +377 -27
  11. package/dist/docs/functional/themes/dark-tritanopia.json +525 -37
  12. package/dist/docs/functional/themes/dark.json +324 -26
  13. package/dist/docs/functional/themes/light-colorblind.json +318 -22
  14. package/dist/docs/functional/themes/light-high-contrast.json +374 -24
  15. package/dist/docs/functional/themes/light-tritanopia.json +599 -29
  16. package/dist/docs/functional/themes/light.json +318 -22
  17. package/dist/figma/themes/dark-colorblind.json +255 -254
  18. package/dist/figma/themes/dark-dimmed.json +255 -173
  19. package/dist/figma/themes/dark-high-contrast.json +254 -187
  20. package/dist/figma/themes/dark-tritanopia.json +340 -257
  21. package/dist/figma/themes/dark.json +255 -254
  22. package/dist/figma/themes/light-colorblind.json +249 -249
  23. package/dist/figma/themes/light-high-contrast.json +238 -172
  24. package/dist/figma/themes/light-tritanopia.json +332 -252
  25. package/dist/figma/themes/light.json +273 -273
  26. package/dist/styleLint/functional/themes/dark-colorblind.json +324 -26
  27. package/dist/styleLint/functional/themes/dark-dimmed.json +391 -27
  28. package/dist/styleLint/functional/themes/dark-high-contrast.json +377 -27
  29. package/dist/styleLint/functional/themes/dark-tritanopia.json +525 -37
  30. package/dist/styleLint/functional/themes/dark.json +324 -26
  31. package/dist/styleLint/functional/themes/light-colorblind.json +318 -22
  32. package/dist/styleLint/functional/themes/light-high-contrast.json +374 -24
  33. package/dist/styleLint/functional/themes/light-tritanopia.json +599 -29
  34. package/dist/styleLint/functional/themes/light.json +318 -22
  35. package/package.json +1 -1
  36. package/src/tokens/component/diffBlob.json5 +19 -0
  37. package/src/tokens/component/header.json5 +65 -0
  38. package/src/tokens/component/headerSerach.json5 +32 -0
  39. package/src/tokens/component/overlay.json5 +68 -0
  40. package/src/tokens/component/page.json5 +20 -0
  41. package/src/tokens/component/reactionButton.json5 +78 -0
  42. package/src/tokens/component/skeletonLoader.json5 +29 -0
  43. package/src/tokens/component/timelineBadge.json5 +19 -0
  44. package/src/tokens/functional/color/dark/app-dark.json5 +0 -97
  45. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -35
  46. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +0 -32
  47. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +0 -37
  48. package/src/tokens/functional/color/dark/patterns-dark.json5 +0 -194
  49. package/src/tokens/functional/color/light/app-light.json5 +0 -91
  50. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +0 -31
  51. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +0 -71
  52. package/src/tokens/functional/color/light/patterns-light.json5 +1 -192
  53. package/dist/figma/figma.json +0 -133
  54. package/dist/figma/shadows/dark-colorblind.json +0 -1152
  55. package/dist/figma/shadows/dark-dimmed.json +0 -1152
  56. package/dist/figma/shadows/dark-high-contrast.json +0 -1152
  57. package/dist/figma/shadows/dark-tritanopia.json +0 -1152
  58. package/dist/figma/shadows/dark.json +0 -1152
  59. package/dist/figma/shadows/light-colorblind.json +0 -1052
  60. package/dist/figma/shadows/light-high-contrast.json +0 -1052
  61. package/dist/figma/shadows/light-tritanopia.json +0 -1052
  62. package/dist/figma/shadows/light.json +0 -1052
package/dist/figma/themes/light-high-contrast.json CHANGED
@@ -1413,7 +1413,7 @@
1413
1413
  "r": 0.27058823529411763,
1414
1414
  "g": 0.2980392156862745,
1415
1415
  "b": 0.32941176470588235,
1416
- "a": null
1416
+ "a": 1
1417
1417
  },
1418
1418
  "type": "COLOR",
1419
1419
  "scopes": ["EFFECT_COLOR"],
@@ -1663,7 +1663,7 @@
1663
1663
  "r": 0.27058823529411763,
1664
1664
  "g": 0.2980392156862745,
1665
1665
  "b": 0.32941176470588235,
1666
- "a": null
1666
+ "a": 1
1667
1667
  },
1668
1668
  "type": "COLOR",
1669
1669
  "scopes": ["EFFECT_COLOR"],
@@ -1763,7 +1763,7 @@
1763
1763
  "r": 0.27058823529411763,
1764
1764
  "g": 0.2980392156862745,
1765
1765
  "b": 0.32941176470588235,
1766
- "a": null
1766
+ "a": 1
1767
1767
  },
1768
1768
  "type": "COLOR",
1769
1769
  "scopes": ["EFFECT_COLOR"],
@@ -2173,6 +2173,87 @@
2173
2173
  "group": "component",
2174
2174
  "scopes": ["TEXT_FILL", "SHAPE_FILL"]
2175
2175
  },
2176
+ {
2177
+ "name": "header/bgColor",
2178
+ "value": {
2179
+ "r": 0.1450980392156863,
2180
+ "g": 0.1607843137254902,
2181
+ "b": 0.1803921568627451,
2182
+ "a": 1
2183
+ },
2184
+ "type": "COLOR",
2185
+ "refId": "mode/header/bgColor",
2186
+ "reference": "base/color/light/base/color/neutral/12",
2187
+ "collection": "mode",
2188
+ "mode": "light high contrast",
2189
+ "group": "component (internal)",
2190
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"]
2191
+ },
2192
+ {
2193
+ "name": "header/fgColor/default",
2194
+ "value": {
2195
+ "r": 1,
2196
+ "g": 1,
2197
+ "b": 1,
2198
+ "a": 0.7
2199
+ },
2200
+ "type": "COLOR",
2201
+ "alpha": 0.7,
2202
+ "refId": "mode/header/fgColor/default",
2203
+ "reference": "base/color/light/base/color/neutral/0",
2204
+ "collection": "mode",
2205
+ "mode": "light high contrast",
2206
+ "group": "component (internal)",
2207
+ "scopes": ["TEXT_FILL", "SHAPE_FILL"]
2208
+ },
2209
+ {
2210
+ "name": "header/fgColor/logo",
2211
+ "value": {
2212
+ "r": 1,
2213
+ "g": 1,
2214
+ "b": 1,
2215
+ "a": 1
2216
+ },
2217
+ "type": "COLOR",
2218
+ "refId": "mode/header/fgColor/logo",
2219
+ "reference": "base/color/light/base/color/neutral/0",
2220
+ "collection": "mode",
2221
+ "mode": "light high contrast",
2222
+ "group": "component (internal)",
2223
+ "scopes": ["TEXT_FILL", "SHAPE_FILL"]
2224
+ },
2225
+ {
2226
+ "name": "headerSearch/bgColor",
2227
+ "value": {
2228
+ "r": 0.1450980392156863,
2229
+ "g": 0.1607843137254902,
2230
+ "b": 0.1803921568627451,
2231
+ "a": 1
2232
+ },
2233
+ "type": "COLOR",
2234
+ "refId": "mode/headerSearch/bgColor",
2235
+ "reference": "base/color/light/base/color/neutral/12",
2236
+ "collection": "mode",
2237
+ "mode": "light high contrast",
2238
+ "group": "component (internal)",
2239
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"]
2240
+ },
2241
+ {
2242
+ "name": "headerSearch/borderColor",
2243
+ "value": {
2244
+ "r": 0.5058823529411764,
2245
+ "g": 0.5450980392156862,
2246
+ "b": 0.596078431372549,
2247
+ "a": 1
2248
+ },
2249
+ "type": "COLOR",
2250
+ "refId": "mode/headerSearch/borderColor",
2251
+ "reference": "base/color/light/base/color/neutral/8",
2252
+ "collection": "mode",
2253
+ "mode": "light high contrast",
2254
+ "group": "component (internal)",
2255
+ "scopes": ["STROKE_COLOR"]
2256
+ },
2176
2257
  {
2177
2258
  "name": "highlight/neutral/bgColor",
2178
2259
  "value": {
@@ -2190,20 +2271,54 @@
2190
2271
  "scopes": ["FRAME_FILL", "SHAPE_FILL"]
2191
2272
  },
2192
2273
  {
2193
- "name": "topicTag/borderColor",
2274
+ "name": "overlay/bgColor",
2194
2275
  "value": {
2195
- "r": 0.011764705882352941,
2196
- "g": 0.28627450980392155,
2197
- "b": 0.7058823529411765,
2276
+ "r": 1,
2277
+ "g": 1,
2278
+ "b": 1,
2198
2279
  "a": 1
2199
2280
  },
2200
2281
  "type": "COLOR",
2201
- "refId": "mode/topicTag/borderColor",
2202
- "reference": "mode/borderColor/accent-emphasis",
2282
+ "refId": "mode/overlay/bgColor",
2283
+ "reference": "base/color/light/base/color/neutral/0",
2203
2284
  "collection": "mode",
2204
2285
  "mode": "light high contrast",
2205
- "group": "component",
2206
- "scopes": ["STROKE_COLOR"]
2286
+ "group": "component (internal)",
2287
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"]
2288
+ },
2289
+ {
2290
+ "name": "overlay/borderColor",
2291
+ "value": {
2292
+ "r": 0.27058823529411763,
2293
+ "g": 0.2980392156862745,
2294
+ "b": 0.32941176470588235,
2295
+ "a": 1
2296
+ },
2297
+ "type": "COLOR",
2298
+ "alpha": 1,
2299
+ "refId": "mode/overlay/borderColor",
2300
+ "reference": "borderColor/default",
2301
+ "collection": "mode",
2302
+ "mode": "light high contrast",
2303
+ "group": "component (internal)",
2304
+ "scopes": ["ALL_SCOPES"]
2305
+ },
2306
+ {
2307
+ "name": "overlay/backdrop/bgColor",
2308
+ "value": {
2309
+ "r": 0.2235294117647059,
2310
+ "g": 0.24705882352941178,
2311
+ "b": 0.27450980392156865,
2312
+ "a": 0.4
2313
+ },
2314
+ "type": "COLOR",
2315
+ "alpha": 0.4,
2316
+ "refId": "mode/overlay/backdrop/bgColor",
2317
+ "reference": "base/color/light/base/color/neutral/11",
2318
+ "collection": "mode",
2319
+ "mode": "light high contrast",
2320
+ "group": "component (internal)",
2321
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"]
2207
2322
  },
2208
2323
  {
2209
2324
  "name": "page/header/bgColor",
@@ -2221,6 +2336,118 @@
2221
2336
  "group": "component",
2222
2337
  "scopes": ["FRAME_FILL", "SHAPE_FILL"]
2223
2338
  },
2339
+ {
2340
+ "name": "reactionButton/selected/bgColor/rest",
2341
+ "value": {
2342
+ "r": 0.8745098039215686,
2343
+ "g": 0.9686274509803922,
2344
+ "b": 1,
2345
+ "a": 1
2346
+ },
2347
+ "type": "COLOR",
2348
+ "refId": "mode/reactionButton/selected/bgColor/rest",
2349
+ "reference": "base/color/light-high-contrast/base/color/blue/0",
2350
+ "collection": "mode",
2351
+ "mode": "light high contrast",
2352
+ "group": "component (internal)",
2353
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"]
2354
+ },
2355
+ {
2356
+ "name": "reactionButton/selected/bgColor/hover",
2357
+ "value": {
2358
+ "r": 0.7803921568627451,
2359
+ "g": 0.9137254901960784,
2360
+ "b": 1,
2361
+ "a": 1
2362
+ },
2363
+ "type": "COLOR",
2364
+ "refId": "mode/reactionButton/selected/bgColor/hover",
2365
+ "collection": "mode",
2366
+ "mode": "light high contrast",
2367
+ "group": "component (internal)",
2368
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"]
2369
+ },
2370
+ {
2371
+ "name": "reactionButton/selected/fgColor/rest",
2372
+ "value": {
2373
+ "r": 0.00784313725490196,
2374
+ "g": 0.23137254901960785,
2375
+ "b": 0.5843137254901961,
2376
+ "a": 1
2377
+ },
2378
+ "type": "COLOR",
2379
+ "refId": "mode/reactionButton/selected/fgColor/rest",
2380
+ "reference": "mode/fgColor/link",
2381
+ "collection": "mode",
2382
+ "mode": "light high contrast",
2383
+ "group": "component (internal)",
2384
+ "scopes": ["TEXT_FILL", "SHAPE_FILL"]
2385
+ },
2386
+ {
2387
+ "name": "reactionButton/selected/fgColor/hover",
2388
+ "value": {
2389
+ "r": 0.00784313725490196,
2390
+ "g": 0.23137254901960785,
2391
+ "b": 0.5843137254901961,
2392
+ "a": 1
2393
+ },
2394
+ "type": "COLOR",
2395
+ "refId": "mode/reactionButton/selected/fgColor/hover",
2396
+ "reference": "base/color/light-high-contrast/base/color/blue/6",
2397
+ "collection": "mode",
2398
+ "mode": "light high contrast",
2399
+ "group": "component (internal)",
2400
+ "scopes": ["TEXT_FILL", "SHAPE_FILL"]
2401
+ },
2402
+ {
2403
+ "name": "skeletonLoader/bgColor",
2404
+ "value": {
2405
+ "r": 0.8549019607843137,
2406
+ "g": 0.8784313725490196,
2407
+ "b": 0.9058823529411765,
2408
+ "a": 1
2409
+ },
2410
+ "type": "COLOR",
2411
+ "alpha": 1,
2412
+ "refId": "mode/skeletonLoader/bgColor",
2413
+ "reference": "base/color/light/base/color/neutral/5",
2414
+ "collection": "mode",
2415
+ "mode": "light high contrast",
2416
+ "group": "component",
2417
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"]
2418
+ },
2419
+ {
2420
+ "name": "timelineBadge/bgColor",
2421
+ "value": {
2422
+ "r": 0.9019607843137255,
2423
+ "g": 0.9176470588235294,
2424
+ "b": 0.9372549019607843,
2425
+ "a": 1
2426
+ },
2427
+ "type": "COLOR",
2428
+ "refId": "mode/timelineBadge/bgColor",
2429
+ "reference": "bgColor/muted",
2430
+ "collection": "mode",
2431
+ "mode": "light high contrast",
2432
+ "group": "component (internal)",
2433
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"]
2434
+ },
2435
+ {
2436
+ "name": "topicTag/borderColor",
2437
+ "value": {
2438
+ "r": 0.011764705882352941,
2439
+ "g": 0.28627450980392155,
2440
+ "b": 0.7058823529411765,
2441
+ "a": 1
2442
+ },
2443
+ "type": "COLOR",
2444
+ "refId": "mode/topicTag/borderColor",
2445
+ "reference": "mode/borderColor/accent-emphasis",
2446
+ "collection": "mode",
2447
+ "mode": "light high contrast",
2448
+ "group": "component",
2449
+ "scopes": ["STROKE_COLOR"]
2450
+ },
2224
2451
  {
2225
2452
  "name": "codeMirror/fgColor",
2226
2453
  "value": {
@@ -2525,87 +2752,6 @@
2525
2752
  "group": "component",
2526
2753
  "scopes": ["TEXT_FILL", "SHAPE_FILL"]
2527
2754
  },
2528
- {
2529
- "name": "header/fgColor/default",
2530
- "value": {
2531
- "r": 1,
2532
- "g": 1,
2533
- "b": 1,
2534
- "a": 0.7
2535
- },
2536
- "type": "COLOR",
2537
- "alpha": 0.7,
2538
- "refId": "mode/header/fgColor/default",
2539
- "reference": "base/color/light/base/color/neutral/0",
2540
- "collection": "mode",
2541
- "mode": "light high contrast",
2542
- "group": "component (internal)",
2543
- "scopes": ["TEXT_FILL", "SHAPE_FILL"]
2544
- },
2545
- {
2546
- "name": "header/fgColor/logo",
2547
- "value": {
2548
- "r": 1,
2549
- "g": 1,
2550
- "b": 1,
2551
- "a": 1
2552
- },
2553
- "type": "COLOR",
2554
- "refId": "mode/header/fgColor/logo",
2555
- "reference": "base/color/light/base/color/neutral/0",
2556
- "collection": "mode",
2557
- "mode": "light high contrast",
2558
- "group": "component (internal)",
2559
- "scopes": ["TEXT_FILL", "SHAPE_FILL"]
2560
- },
2561
- {
2562
- "name": "header/bgColor",
2563
- "value": {
2564
- "r": 0.1450980392156863,
2565
- "g": 0.1607843137254902,
2566
- "b": 0.1803921568627451,
2567
- "a": 1
2568
- },
2569
- "type": "COLOR",
2570
- "refId": "mode/header/bgColor",
2571
- "reference": "base/color/light/base/color/neutral/12",
2572
- "collection": "mode",
2573
- "mode": "light high contrast",
2574
- "group": "component (internal)",
2575
- "scopes": ["FRAME_FILL", "SHAPE_FILL"]
2576
- },
2577
- {
2578
- "name": "headerSearch/bgColor",
2579
- "value": {
2580
- "r": 0.1450980392156863,
2581
- "g": 0.1607843137254902,
2582
- "b": 0.1803921568627451,
2583
- "a": 1
2584
- },
2585
- "type": "COLOR",
2586
- "refId": "mode/headerSearch/bgColor",
2587
- "reference": "base/color/light/base/color/neutral/12",
2588
- "collection": "mode",
2589
- "mode": "light high contrast",
2590
- "group": "component (internal)",
2591
- "scopes": ["FRAME_FILL", "SHAPE_FILL"]
2592
- },
2593
- {
2594
- "name": "headerSearch/borderColor",
2595
- "value": {
2596
- "r": 0.5058823529411764,
2597
- "g": 0.5450980392156862,
2598
- "b": 0.596078431372549,
2599
- "a": 1
2600
- },
2601
- "type": "COLOR",
2602
- "refId": "mode/headerSearch/borderColor",
2603
- "reference": "base/color/light/base/color/neutral/8",
2604
- "collection": "mode",
2605
- "mode": "light high contrast",
2606
- "group": "component (internal)",
2607
- "scopes": ["STROKE_COLOR"]
2608
- },
2609
2755
  {
2610
2756
  "name": "data/blue/color/emphasis",
2611
2757
  "value": {
@@ -4328,54 +4474,6 @@
4328
4474
  "group": "component (internal)",
4329
4475
  "scopes": ["TEXT_FILL", "SHAPE_FILL"]
4330
4476
  },
4331
- {
4332
- "name": "reactionButton/selected/bgColor/rest",
4333
- "value": {
4334
- "r": 0.8745098039215686,
4335
- "g": 0.9686274509803922,
4336
- "b": 1,
4337
- "a": 1
4338
- },
4339
- "type": "COLOR",
4340
- "refId": "mode/reactionButton/selected/bgColor/rest",
4341
- "reference": "base/color/light-high-contrast/base/color/blue/0",
4342
- "collection": "mode",
4343
- "mode": "light high contrast",
4344
- "group": "component (internal)",
4345
- "scopes": ["FRAME_FILL", "SHAPE_FILL"]
4346
- },
4347
- {
4348
- "name": "reactionButton/selected/fgColor/rest",
4349
- "value": {
4350
- "r": 0.00784313725490196,
4351
- "g": 0.23137254901960785,
4352
- "b": 0.5843137254901961,
4353
- "a": 1
4354
- },
4355
- "type": "COLOR",
4356
- "refId": "mode/reactionButton/selected/fgColor/rest",
4357
- "reference": "mode/fgColor/link",
4358
- "collection": "mode",
4359
- "mode": "light high contrast",
4360
- "group": "component (internal)",
4361
- "scopes": ["TEXT_FILL", "SHAPE_FILL"]
4362
- },
4363
- {
4364
- "name": "reactionButton/selected/fgColor/hover",
4365
- "value": {
4366
- "r": 0.00784313725490196,
4367
- "g": 0.23137254901960785,
4368
- "b": 0.5843137254901961,
4369
- "a": 1
4370
- },
4371
- "type": "COLOR",
4372
- "refId": "mode/reactionButton/selected/fgColor/hover",
4373
- "reference": "base/color/light-high-contrast/base/color/blue/6",
4374
- "collection": "mode",
4375
- "mode": "light high contrast",
4376
- "group": "component (internal)",
4377
- "scopes": ["TEXT_FILL", "SHAPE_FILL"]
4378
- },
4379
4477
  {
4380
4478
  "name": "menu/bgColor/active",
4381
4479
  "value": {
@@ -4392,22 +4490,6 @@
4392
4490
  "group": "component (internal)",
4393
4491
  "scopes": ["FRAME_FILL", "SHAPE_FILL"]
4394
4492
  },
4395
- {
4396
- "name": "overlay/bgColor",
4397
- "value": {
4398
- "r": 1,
4399
- "g": 1,
4400
- "b": 1,
4401
- "a": 1
4402
- },
4403
- "type": "COLOR",
4404
- "refId": "mode/overlay/bgColor",
4405
- "reference": "base/color/light/base/color/neutral/0",
4406
- "collection": "mode",
4407
- "mode": "light high contrast",
4408
- "group": "component (internal)",
4409
- "scopes": ["FRAME_FILL", "SHAPE_FILL"]
4410
- },
4411
4493
  {
4412
4494
  "name": "selectMenu/borderColor",
4413
4495
  "value": {
@@ -4456,22 +4538,6 @@
4456
4538
  "group": "component (internal)",
4457
4539
  "scopes": ["FRAME_FILL", "SHAPE_FILL"]
4458
4540
  },
4459
- {
4460
- "name": "timelineBadge/bgColor",
4461
- "value": {
4462
- "r": 0.9019607843137255,
4463
- "g": 0.9176470588235294,
4464
- "b": 0.9372549019607843,
4465
- "a": 1
4466
- },
4467
- "type": "COLOR",
4468
- "refId": "mode/timelineBadge/bgColor",
4469
- "reference": "bgColor/muted",
4470
- "collection": "mode",
4471
- "mode": "light high contrast",
4472
- "group": "component (internal)",
4473
- "scopes": ["FRAME_FILL", "SHAPE_FILL"]
4474
- },
4475
4541
  {
4476
4542
  "name": "treeViewItem/leadingVisual/iconColor/rest",
4477
4543
  "value": {