@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/docs/functional/themes/dark-high-contrast.json CHANGED
@@ -10944,11 +10944,20 @@
10944
10944
  "collection": "mode",
10945
10945
  "group": "component (internal)",
10946
10946
  "scopes": ["bgColor"]
10947
+ },
10948
+ "org.primer.overrides": {
10949
+ "dark": {
10950
+ "$value": "#151b23",
10951
+ "alpha": 0.95,
10952
+ "filePath": "src/tokens/component/header.json5",
10953
+ "isSource": true,
10954
+ "$type": "color"
10955
+ }
10947
10956
  }
10948
10957
  },
10949
- "alpha": 0.95,
10950
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
10958
+ "filePath": "src/tokens/component/header.json5",
10951
10959
  "isSource": true,
10960
+ "alpha": 0.95,
10952
10961
  "original": {
10953
10962
  "$value": "{base.color.neutral.2}",
10954
10963
  "$type": "color",
@@ -10957,6 +10966,15 @@
10957
10966
  "collection": "mode",
10958
10967
  "group": "component (internal)",
10959
10968
  "scopes": ["bgColor"]
10969
+ },
10970
+ "org.primer.overrides": {
10971
+ "dark": {
10972
+ "$value": "{base.color.neutral.2}",
10973
+ "alpha": 0.95,
10974
+ "filePath": "src/tokens/component/header.json5",
10975
+ "isSource": true,
10976
+ "$type": "color"
10977
+ }
10960
10978
  }
10961
10979
  },
10962
10980
  "alpha": 0.95
@@ -10976,7 +10994,7 @@
10976
10994
  "scopes": ["borderColor"]
10977
10995
  }
10978
10996
  },
10979
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
10997
+ "filePath": "src/tokens/component/header.json5",
10980
10998
  "isSource": true,
10981
10999
  "original": {
10982
11000
  "$value": "{base.color.neutral.8}",
@@ -11002,10 +11020,13 @@
11002
11020
  "collection": "mode",
11003
11021
  "group": "component (internal)",
11004
11022
  "scopes": ["fgColor"]
11023
+ },
11024
+ "org.primer.overrides": {
11025
+ "dark": "#ffffff"
11005
11026
  }
11006
11027
  },
11007
11028
  "alpha": 0.7,
11008
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
11029
+ "filePath": "src/tokens/component/header.json5",
11009
11030
  "isSource": true,
11010
11031
  "original": {
11011
11032
  "$value": "{base.color.neutral.13}",
@@ -11015,6 +11036,9 @@
11015
11036
  "collection": "mode",
11016
11037
  "group": "component (internal)",
11017
11038
  "scopes": ["fgColor"]
11039
+ },
11040
+ "org.primer.overrides": {
11041
+ "dark": "{base.color.neutral.13}"
11018
11042
  }
11019
11043
  },
11020
11044
  "alpha": 0.7
@@ -11032,9 +11056,12 @@
11032
11056
  "collection": "mode",
11033
11057
  "group": "component (internal)",
11034
11058
  "scopes": ["fgColor"]
11059
+ },
11060
+ "org.primer.overrides": {
11061
+ "dark": "#f0f6fc"
11035
11062
  }
11036
11063
  },
11037
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
11064
+ "filePath": "src/tokens/component/header.json5",
11038
11065
  "isSource": true,
11039
11066
  "original": {
11040
11067
  "$value": "{base.color.neutral.12}",
@@ -11044,6 +11071,9 @@
11044
11071
  "collection": "mode",
11045
11072
  "group": "component (internal)",
11046
11073
  "scopes": ["fgColor"]
11074
+ },
11075
+ "org.primer.overrides": {
11076
+ "dark": "{base.color.neutral.12}"
11047
11077
  }
11048
11078
  }
11049
11079
  },
@@ -11060,9 +11090,12 @@
11060
11090
  "collection": "mode",
11061
11091
  "group": "component (internal)",
11062
11092
  "scopes": ["bgColor"]
11093
+ },
11094
+ "org.primer.overrides": {
11095
+ "dark": "#0d1117"
11063
11096
  }
11064
11097
  },
11065
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
11098
+ "filePath": "src/tokens/component/headerSerach.json5",
11066
11099
  "isSource": true,
11067
11100
  "original": {
11068
11101
  "$value": "{base.color.neutral.1}",
@@ -11072,6 +11105,9 @@
11072
11105
  "collection": "mode",
11073
11106
  "group": "component (internal)",
11074
11107
  "scopes": ["bgColor"]
11108
+ },
11109
+ "org.primer.overrides": {
11110
+ "dark": "{base.color.neutral.1}"
11075
11111
  }
11076
11112
  }
11077
11113
  },
@@ -11088,9 +11124,12 @@
11088
11124
  "collection": "mode",
11089
11125
  "group": "component (internal)",
11090
11126
  "scopes": ["borderColor"]
11127
+ },
11128
+ "org.primer.overrides": {
11129
+ "dark": "#2a313c"
11091
11130
  }
11092
11131
  },
11093
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
11132
+ "filePath": "src/tokens/component/headerSerach.json5",
11094
11133
  "isSource": true,
11095
11134
  "original": {
11096
11135
  "$value": "{base.color.neutral.5}",
@@ -11100,6 +11139,9 @@
11100
11139
  "collection": "mode",
11101
11140
  "group": "component (internal)",
11102
11141
  "scopes": ["borderColor"]
11142
+ },
11143
+ "org.primer.overrides": {
11144
+ "dark": "{base.color.neutral.5}"
11103
11145
  }
11104
11146
  }
11105
11147
  },
@@ -14379,12 +14421,38 @@
14379
14421
  "type": "color"
14380
14422
  },
14381
14423
  "overlay-backdrop-bgColor": {
14424
+ "$extensions": {
14425
+ "org.primer.figma": {
14426
+ "collection": "mode",
14427
+ "group": "component (internal)",
14428
+ "scopes": ["bgColor"]
14429
+ },
14430
+ "org.primer.overrides": {
14431
+ "dark": "#212830",
14432
+ "dark-dimmed": "#262c36",
14433
+ "light-high-contrast": "#d1d7e0",
14434
+ "dark-high-contrast": "#d1d7e0"
14435
+ }
14436
+ },
14382
14437
  "alpha": 0.4,
14383
- "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5",
14438
+ "filePath": "src/tokens/component/overlay.json5",
14384
14439
  "isSource": true,
14385
14440
  "original": {
14386
14441
  "$value": "{base.color.neutral.11}",
14387
14442
  "$type": "color",
14443
+ "$extensions": {
14444
+ "org.primer.figma": {
14445
+ "collection": "mode",
14446
+ "group": "component (internal)",
14447
+ "scopes": ["bgColor"]
14448
+ },
14449
+ "org.primer.overrides": {
14450
+ "dark": "{base.color.neutral.3}",
14451
+ "dark-dimmed": "{base.color.neutral.4}",
14452
+ "light-high-contrast": "{base.color.neutral.11}",
14453
+ "dark-high-contrast": "{base.color.neutral.11}"
14454
+ }
14455
+ },
14388
14456
  "alpha": 0.4
14389
14457
  },
14390
14458
  "name": "overlay-backdrop-bgColor",
@@ -14400,9 +14468,13 @@
14400
14468
  "collection": "mode",
14401
14469
  "group": "component (internal)",
14402
14470
  "scopes": ["bgColor"]
14471
+ },
14472
+ "org.primer.overrides": {
14473
+ "dark": "#151b23",
14474
+ "dark-dimmed": "#2a313c"
14403
14475
  }
14404
14476
  },
14405
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
14477
+ "filePath": "src/tokens/component/overlay.json5",
14406
14478
  "isSource": true,
14407
14479
  "original": {
14408
14480
  "$value": "{bgColor.muted}",
@@ -14412,6 +14484,10 @@
14412
14484
  "collection": "mode",
14413
14485
  "group": "component (internal)",
14414
14486
  "scopes": ["bgColor"]
14487
+ },
14488
+ "org.primer.overrides": {
14489
+ "dark": "{bgColor.muted}",
14490
+ "dark-dimmed": "{base.color.neutral.5}"
14415
14491
  }
14416
14492
  }
14417
14493
  },
@@ -14423,13 +14499,85 @@
14423
14499
  "type": "color"
14424
14500
  },
14425
14501
  "overlay-borderColor": {
14426
- "alpha": null,
14427
- "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5",
14502
+ "$extensions": {
14503
+ "org.primer.figma": {
14504
+ "collection": "mode",
14505
+ "group": "component (internal)"
14506
+ },
14507
+ "org.primer.overrides": {
14508
+ "dark": {
14509
+ "alpha": 1,
14510
+ "$value": "#b7bdc8",
14511
+ "filePath": "src/tokens/component/overlay.json5",
14512
+ "isSource": true,
14513
+ "$type": "color"
14514
+ },
14515
+ "dark-dimmed": {
14516
+ "$value": "#3d444d",
14517
+ "alpha": 0.7,
14518
+ "filePath": "src/tokens/component/overlay.json5",
14519
+ "isSource": true,
14520
+ "$type": "color"
14521
+ },
14522
+ "light-high-contrast": {
14523
+ "alpha": 1,
14524
+ "$value": "#b7bdc8",
14525
+ "filePath": "src/tokens/component/overlay.json5",
14526
+ "isSource": true,
14527
+ "$type": "color"
14528
+ },
14529
+ "dark-high-contrast": {
14530
+ "$value": "#b7bdc8",
14531
+ "alpha": 1,
14532
+ "filePath": "src/tokens/component/overlay.json5",
14533
+ "isSource": true,
14534
+ "$type": "color"
14535
+ }
14536
+ }
14537
+ },
14538
+ "alpha": 1,
14539
+ "filePath": "src/tokens/component/overlay.json5",
14428
14540
  "isSource": true,
14429
14541
  "original": {
14430
14542
  "$value": "{borderColor.default}",
14431
14543
  "$type": "color",
14432
- "alpha": null
14544
+ "$extensions": {
14545
+ "org.primer.figma": {
14546
+ "collection": "mode",
14547
+ "group": "component (internal)"
14548
+ },
14549
+ "org.primer.overrides": {
14550
+ "dark": {
14551
+ "alpha": 1,
14552
+ "$value": "{borderColor.muted}",
14553
+ "filePath": "src/tokens/component/overlay.json5",
14554
+ "isSource": true,
14555
+ "$type": "color"
14556
+ },
14557
+ "dark-dimmed": {
14558
+ "$value": "{base.color.neutral.7}",
14559
+ "alpha": 0.7,
14560
+ "filePath": "src/tokens/component/overlay.json5",
14561
+ "isSource": true,
14562
+ "$type": "color"
14563
+ },
14564
+ "light-high-contrast": {
14565
+ "alpha": 1,
14566
+ "$value": "{borderColor.default}",
14567
+ "filePath": "src/tokens/component/overlay.json5",
14568
+ "isSource": true,
14569
+ "$type": "color"
14570
+ },
14571
+ "dark-high-contrast": {
14572
+ "$value": "{borderColor.default}",
14573
+ "alpha": 1,
14574
+ "filePath": "src/tokens/component/overlay.json5",
14575
+ "isSource": true,
14576
+ "$type": "color"
14577
+ }
14578
+ }
14579
+ },
14580
+ "alpha": 1
14433
14581
  },
14434
14582
  "name": "overlay-borderColor",
14435
14583
  "attributes": {},
@@ -15161,12 +15309,64 @@
15161
15309
  "type": "color"
15162
15310
  },
15163
15311
  "skeletonLoader-bgColor": {
15312
+ "$extensions": {
15313
+ "org.primer.figma": {
15314
+ "collection": "mode",
15315
+ "group": "component",
15316
+ "scopes": ["bgColor"]
15317
+ },
15318
+ "org.primer.overrides": {
15319
+ "dark": {
15320
+ "alpha": 0.2
15321
+ },
15322
+ "light-high-contrast": {
15323
+ "$value": "#2a313c",
15324
+ "alpha": 1,
15325
+ "filePath": "src/tokens/component/skeletonLoader.json5",
15326
+ "isSource": true,
15327
+ "$type": "color"
15328
+ },
15329
+ "dark-high-contrast": {
15330
+ "$value": "#2a313c",
15331
+ "alpha": 1,
15332
+ "filePath": "src/tokens/component/skeletonLoader.json5",
15333
+ "isSource": true,
15334
+ "$type": "color"
15335
+ }
15336
+ }
15337
+ },
15164
15338
  "alpha": 1,
15165
- "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5",
15339
+ "filePath": "src/tokens/component/skeletonLoader.json5",
15166
15340
  "isSource": true,
15167
15341
  "original": {
15168
15342
  "$value": "{base.color.neutral.5}",
15169
15343
  "$type": "color",
15344
+ "$extensions": {
15345
+ "org.primer.figma": {
15346
+ "collection": "mode",
15347
+ "group": "component",
15348
+ "scopes": ["bgColor"]
15349
+ },
15350
+ "org.primer.overrides": {
15351
+ "dark": {
15352
+ "alpha": 0.2
15353
+ },
15354
+ "light-high-contrast": {
15355
+ "$value": "{base.color.neutral.5}",
15356
+ "alpha": 1,
15357
+ "filePath": "src/tokens/component/skeletonLoader.json5",
15358
+ "isSource": true,
15359
+ "$type": "color"
15360
+ },
15361
+ "dark-high-contrast": {
15362
+ "$value": "{base.color.neutral.5}",
15363
+ "alpha": 1,
15364
+ "filePath": "src/tokens/component/skeletonLoader.json5",
15365
+ "isSource": true,
15366
+ "$type": "color"
15367
+ }
15368
+ }
15369
+ },
15170
15370
  "alpha": 1
15171
15371
  },
15172
15372
  "name": "skeletonLoader-bgColor",