@primer/primitives 10.3.0-rc.b425078b → 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 (56) 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 +174 -12
  9. package/dist/docs/functional/themes/dark-dimmed.json +212 -12
  10. package/dist/docs/functional/themes/dark-high-contrast.json +213 -13
  11. package/dist/docs/functional/themes/dark-tritanopia.json +174 -12
  12. package/dist/docs/functional/themes/dark.json +174 -12
  13. package/dist/docs/functional/themes/light-colorblind.json +170 -10
  14. package/dist/docs/functional/themes/light-high-contrast.json +211 -11
  15. package/dist/docs/functional/themes/light-tritanopia.json +170 -10
  16. package/dist/docs/functional/themes/light.json +170 -10
  17. package/dist/figma/themes/dark-colorblind.json +165 -164
  18. package/dist/figma/themes/dark-dimmed.json +165 -115
  19. package/dist/figma/themes/dark-high-contrast.json +165 -114
  20. package/dist/figma/themes/dark-tritanopia.json +165 -164
  21. package/dist/figma/themes/dark.json +165 -164
  22. package/dist/figma/themes/light-colorblind.json +164 -164
  23. package/dist/figma/themes/light-high-contrast.json +151 -100
  24. package/dist/figma/themes/light-tritanopia.json +164 -164
  25. package/dist/figma/themes/light.json +164 -164
  26. package/dist/styleLint/functional/themes/dark-colorblind.json +174 -12
  27. package/dist/styleLint/functional/themes/dark-dimmed.json +212 -12
  28. package/dist/styleLint/functional/themes/dark-high-contrast.json +213 -13
  29. package/dist/styleLint/functional/themes/dark-tritanopia.json +174 -12
  30. package/dist/styleLint/functional/themes/dark.json +174 -12
  31. package/dist/styleLint/functional/themes/light-colorblind.json +170 -10
  32. package/dist/styleLint/functional/themes/light-high-contrast.json +211 -11
  33. package/dist/styleLint/functional/themes/light-tritanopia.json +170 -10
  34. package/dist/styleLint/functional/themes/light.json +170 -10
  35. package/package.json +1 -1
  36. package/src/tokens/component/header.json5 +65 -0
  37. package/src/tokens/component/headerSerach.json5 +32 -0
  38. package/src/tokens/component/overlay.json5 +68 -0
  39. package/src/tokens/component/skeletonLoader.json5 +29 -0
  40. package/src/tokens/functional/color/dark/app-dark.json5 +0 -81
  41. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -18
  42. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +0 -21
  43. package/src/tokens/functional/color/dark/patterns-dark.json5 +0 -127
  44. package/src/tokens/functional/color/light/app-light.json5 +0 -75
  45. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +0 -21
  46. package/src/tokens/functional/color/light/patterns-light.json5 +0 -127
  47. package/dist/figma/figma.json +0 -133
  48. package/dist/figma/shadows/dark-colorblind.json +0 -1152
  49. package/dist/figma/shadows/dark-dimmed.json +0 -1152
  50. package/dist/figma/shadows/dark-high-contrast.json +0 -1152
  51. package/dist/figma/shadows/dark-tritanopia.json +0 -1152
  52. package/dist/figma/shadows/dark.json +0 -1152
  53. package/dist/figma/shadows/light-colorblind.json +0 -1052
  54. package/dist/figma/shadows/light-high-contrast.json +0 -1052
  55. package/dist/figma/shadows/light-tritanopia.json +0 -1052
  56. package/dist/figma/shadows/light.json +0 -1052
package/dist/styleLint/functional/themes/dark-high-contrast.json CHANGED
@@ -10946,11 +10946,20 @@
10946
10946
  "collection": "mode",
10947
10947
  "group": "component (internal)",
10948
10948
  "scopes": ["bgColor"]
10949
+ },
10950
+ "org.primer.overrides": {
10951
+ "dark": {
10952
+ "$value": "#151b23",
10953
+ "alpha": 0.95,
10954
+ "filePath": "src/tokens/component/header.json5",
10955
+ "isSource": true,
10956
+ "$type": "color"
10957
+ }
10949
10958
  }
10950
10959
  },
10951
- "alpha": 0.95,
10952
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
10960
+ "filePath": "src/tokens/component/header.json5",
10953
10961
  "isSource": true,
10962
+ "alpha": 0.95,
10954
10963
  "original": {
10955
10964
  "$value": "{base.color.neutral.2}",
10956
10965
  "$type": "color",
@@ -10959,6 +10968,15 @@
10959
10968
  "collection": "mode",
10960
10969
  "group": "component (internal)",
10961
10970
  "scopes": ["bgColor"]
10971
+ },
10972
+ "org.primer.overrides": {
10973
+ "dark": {
10974
+ "$value": "{base.color.neutral.2}",
10975
+ "alpha": 0.95,
10976
+ "filePath": "src/tokens/component/header.json5",
10977
+ "isSource": true,
10978
+ "$type": "color"
10979
+ }
10962
10980
  }
10963
10981
  },
10964
10982
  "alpha": 0.95
@@ -10978,7 +10996,7 @@
10978
10996
  "scopes": ["borderColor"]
10979
10997
  }
10980
10998
  },
10981
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
10999
+ "filePath": "src/tokens/component/header.json5",
10982
11000
  "isSource": true,
10983
11001
  "original": {
10984
11002
  "$value": "{base.color.neutral.8}",
@@ -11004,10 +11022,13 @@
11004
11022
  "collection": "mode",
11005
11023
  "group": "component (internal)",
11006
11024
  "scopes": ["fgColor"]
11025
+ },
11026
+ "org.primer.overrides": {
11027
+ "dark": "#ffffff"
11007
11028
  }
11008
11029
  },
11009
11030
  "alpha": 0.7,
11010
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
11031
+ "filePath": "src/tokens/component/header.json5",
11011
11032
  "isSource": true,
11012
11033
  "original": {
11013
11034
  "$value": "{base.color.neutral.13}",
@@ -11017,6 +11038,9 @@
11017
11038
  "collection": "mode",
11018
11039
  "group": "component (internal)",
11019
11040
  "scopes": ["fgColor"]
11041
+ },
11042
+ "org.primer.overrides": {
11043
+ "dark": "{base.color.neutral.13}"
11020
11044
  }
11021
11045
  },
11022
11046
  "alpha": 0.7
@@ -11034,9 +11058,12 @@
11034
11058
  "collection": "mode",
11035
11059
  "group": "component (internal)",
11036
11060
  "scopes": ["fgColor"]
11061
+ },
11062
+ "org.primer.overrides": {
11063
+ "dark": "#f0f6fc"
11037
11064
  }
11038
11065
  },
11039
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
11066
+ "filePath": "src/tokens/component/header.json5",
11040
11067
  "isSource": true,
11041
11068
  "original": {
11042
11069
  "$value": "{base.color.neutral.12}",
@@ -11046,6 +11073,9 @@
11046
11073
  "collection": "mode",
11047
11074
  "group": "component (internal)",
11048
11075
  "scopes": ["fgColor"]
11076
+ },
11077
+ "org.primer.overrides": {
11078
+ "dark": "{base.color.neutral.12}"
11049
11079
  }
11050
11080
  }
11051
11081
  },
@@ -11062,9 +11092,12 @@
11062
11092
  "collection": "mode",
11063
11093
  "group": "component (internal)",
11064
11094
  "scopes": ["bgColor"]
11095
+ },
11096
+ "org.primer.overrides": {
11097
+ "dark": "#0d1117"
11065
11098
  }
11066
11099
  },
11067
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
11100
+ "filePath": "src/tokens/component/headerSerach.json5",
11068
11101
  "isSource": true,
11069
11102
  "original": {
11070
11103
  "$value": "{base.color.neutral.1}",
@@ -11074,6 +11107,9 @@
11074
11107
  "collection": "mode",
11075
11108
  "group": "component (internal)",
11076
11109
  "scopes": ["bgColor"]
11110
+ },
11111
+ "org.primer.overrides": {
11112
+ "dark": "{base.color.neutral.1}"
11077
11113
  }
11078
11114
  }
11079
11115
  },
@@ -11090,9 +11126,12 @@
11090
11126
  "collection": "mode",
11091
11127
  "group": "component (internal)",
11092
11128
  "scopes": ["borderColor"]
11129
+ },
11130
+ "org.primer.overrides": {
11131
+ "dark": "#2a313c"
11093
11132
  }
11094
11133
  },
11095
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
11134
+ "filePath": "src/tokens/component/headerSerach.json5",
11096
11135
  "isSource": true,
11097
11136
  "original": {
11098
11137
  "$value": "{base.color.neutral.5}",
@@ -11102,6 +11141,9 @@
11102
11141
  "collection": "mode",
11103
11142
  "group": "component (internal)",
11104
11143
  "scopes": ["borderColor"]
11144
+ },
11145
+ "org.primer.overrides": {
11146
+ "dark": "{base.color.neutral.5}"
11105
11147
  }
11106
11148
  }
11107
11149
  },
@@ -14381,12 +14423,38 @@
14381
14423
  "overlay-backdrop-bgColor": {
14382
14424
  "$value": "#d1d7e066",
14383
14425
  "$type": "color",
14426
+ "$extensions": {
14427
+ "org.primer.figma": {
14428
+ "collection": "mode",
14429
+ "group": "component (internal)",
14430
+ "scopes": ["bgColor"]
14431
+ },
14432
+ "org.primer.overrides": {
14433
+ "dark": "#212830",
14434
+ "dark-dimmed": "#262c36",
14435
+ "light-high-contrast": "#d1d7e0",
14436
+ "dark-high-contrast": "#d1d7e0"
14437
+ }
14438
+ },
14384
14439
  "alpha": 0.4,
14385
- "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5",
14440
+ "filePath": "src/tokens/component/overlay.json5",
14386
14441
  "isSource": true,
14387
14442
  "original": {
14388
14443
  "$value": "{base.color.neutral.11}",
14389
14444
  "$type": "color",
14445
+ "$extensions": {
14446
+ "org.primer.figma": {
14447
+ "collection": "mode",
14448
+ "group": "component (internal)",
14449
+ "scopes": ["bgColor"]
14450
+ },
14451
+ "org.primer.overrides": {
14452
+ "dark": "{base.color.neutral.3}",
14453
+ "dark-dimmed": "{base.color.neutral.4}",
14454
+ "light-high-contrast": "{base.color.neutral.11}",
14455
+ "dark-high-contrast": "{base.color.neutral.11}"
14456
+ }
14457
+ },
14390
14458
  "alpha": 0.4
14391
14459
  },
14392
14460
  "name": "overlay-backdrop-bgColor",
@@ -14402,9 +14470,13 @@
14402
14470
  "collection": "mode",
14403
14471
  "group": "component (internal)",
14404
14472
  "scopes": ["bgColor"]
14473
+ },
14474
+ "org.primer.overrides": {
14475
+ "dark": "#151b23",
14476
+ "dark-dimmed": "#2a313c"
14405
14477
  }
14406
14478
  },
14407
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
14479
+ "filePath": "src/tokens/component/overlay.json5",
14408
14480
  "isSource": true,
14409
14481
  "original": {
14410
14482
  "$value": "{bgColor.muted}",
@@ -14414,6 +14486,10 @@
14414
14486
  "collection": "mode",
14415
14487
  "group": "component (internal)",
14416
14488
  "scopes": ["bgColor"]
14489
+ },
14490
+ "org.primer.overrides": {
14491
+ "dark": "{bgColor.muted}",
14492
+ "dark-dimmed": "{base.color.neutral.5}"
14417
14493
  }
14418
14494
  }
14419
14495
  },
@@ -14425,13 +14501,85 @@
14425
14501
  "overlay-borderColor": {
14426
14502
  "$value": "#b7bdc8",
14427
14503
  "$type": "color",
14428
- "alpha": null,
14429
- "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5",
14504
+ "$extensions": {
14505
+ "org.primer.figma": {
14506
+ "collection": "mode",
14507
+ "group": "component (internal)"
14508
+ },
14509
+ "org.primer.overrides": {
14510
+ "dark": {
14511
+ "alpha": 1,
14512
+ "$value": "#b7bdc8",
14513
+ "filePath": "src/tokens/component/overlay.json5",
14514
+ "isSource": true,
14515
+ "$type": "color"
14516
+ },
14517
+ "dark-dimmed": {
14518
+ "$value": "#3d444d",
14519
+ "alpha": 0.7,
14520
+ "filePath": "src/tokens/component/overlay.json5",
14521
+ "isSource": true,
14522
+ "$type": "color"
14523
+ },
14524
+ "light-high-contrast": {
14525
+ "alpha": 1,
14526
+ "$value": "#b7bdc8",
14527
+ "filePath": "src/tokens/component/overlay.json5",
14528
+ "isSource": true,
14529
+ "$type": "color"
14530
+ },
14531
+ "dark-high-contrast": {
14532
+ "$value": "#b7bdc8",
14533
+ "alpha": 1,
14534
+ "filePath": "src/tokens/component/overlay.json5",
14535
+ "isSource": true,
14536
+ "$type": "color"
14537
+ }
14538
+ }
14539
+ },
14540
+ "alpha": 1,
14541
+ "filePath": "src/tokens/component/overlay.json5",
14430
14542
  "isSource": true,
14431
14543
  "original": {
14432
14544
  "$value": "{borderColor.default}",
14433
14545
  "$type": "color",
14434
- "alpha": null
14546
+ "$extensions": {
14547
+ "org.primer.figma": {
14548
+ "collection": "mode",
14549
+ "group": "component (internal)"
14550
+ },
14551
+ "org.primer.overrides": {
14552
+ "dark": {
14553
+ "alpha": 1,
14554
+ "$value": "{borderColor.muted}",
14555
+ "filePath": "src/tokens/component/overlay.json5",
14556
+ "isSource": true,
14557
+ "$type": "color"
14558
+ },
14559
+ "dark-dimmed": {
14560
+ "$value": "{base.color.neutral.7}",
14561
+ "alpha": 0.7,
14562
+ "filePath": "src/tokens/component/overlay.json5",
14563
+ "isSource": true,
14564
+ "$type": "color"
14565
+ },
14566
+ "light-high-contrast": {
14567
+ "alpha": 1,
14568
+ "$value": "{borderColor.default}",
14569
+ "filePath": "src/tokens/component/overlay.json5",
14570
+ "isSource": true,
14571
+ "$type": "color"
14572
+ },
14573
+ "dark-high-contrast": {
14574
+ "$value": "{borderColor.default}",
14575
+ "alpha": 1,
14576
+ "filePath": "src/tokens/component/overlay.json5",
14577
+ "isSource": true,
14578
+ "$type": "color"
14579
+ }
14580
+ }
14581
+ },
14582
+ "alpha": 1
14435
14583
  },
14436
14584
  "name": "overlay-borderColor",
14437
14585
  "attributes": {},
@@ -15163,12 +15311,64 @@
15163
15311
  "skeletonLoader-bgColor": {
15164
15312
  "$value": "#2a313c",
15165
15313
  "$type": "color",
15314
+ "$extensions": {
15315
+ "org.primer.figma": {
15316
+ "collection": "mode",
15317
+ "group": "component",
15318
+ "scopes": ["bgColor"]
15319
+ },
15320
+ "org.primer.overrides": {
15321
+ "dark": {
15322
+ "alpha": 0.2
15323
+ },
15324
+ "light-high-contrast": {
15325
+ "$value": "#2a313c",
15326
+ "alpha": 1,
15327
+ "filePath": "src/tokens/component/skeletonLoader.json5",
15328
+ "isSource": true,
15329
+ "$type": "color"
15330
+ },
15331
+ "dark-high-contrast": {
15332
+ "$value": "#2a313c",
15333
+ "alpha": 1,
15334
+ "filePath": "src/tokens/component/skeletonLoader.json5",
15335
+ "isSource": true,
15336
+ "$type": "color"
15337
+ }
15338
+ }
15339
+ },
15166
15340
  "alpha": 1,
15167
- "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5",
15341
+ "filePath": "src/tokens/component/skeletonLoader.json5",
15168
15342
  "isSource": true,
15169
15343
  "original": {
15170
15344
  "$value": "{base.color.neutral.5}",
15171
15345
  "$type": "color",
15346
+ "$extensions": {
15347
+ "org.primer.figma": {
15348
+ "collection": "mode",
15349
+ "group": "component",
15350
+ "scopes": ["bgColor"]
15351
+ },
15352
+ "org.primer.overrides": {
15353
+ "dark": {
15354
+ "alpha": 0.2
15355
+ },
15356
+ "light-high-contrast": {
15357
+ "$value": "{base.color.neutral.5}",
15358
+ "alpha": 1,
15359
+ "filePath": "src/tokens/component/skeletonLoader.json5",
15360
+ "isSource": true,
15361
+ "$type": "color"
15362
+ },
15363
+ "dark-high-contrast": {
15364
+ "$value": "{base.color.neutral.5}",
15365
+ "alpha": 1,
15366
+ "filePath": "src/tokens/component/skeletonLoader.json5",
15367
+ "isSource": true,
15368
+ "$type": "color"
15369
+ }
15370
+ }
15371
+ },
15172
15372
  "alpha": 1
15173
15373
  },
15174
15374
  "name": "skeletonLoader-bgColor",