@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-dimmed.json CHANGED
@@ -12410,11 +12410,20 @@
12410
12410
  "collection": "mode",
12411
12411
  "group": "component (internal)",
12412
12412
  "scopes": ["bgColor"]
12413
+ },
12414
+ "org.primer.overrides": {
12415
+ "dark": {
12416
+ "$value": "#151b23",
12417
+ "alpha": 0.95,
12418
+ "filePath": "src/tokens/component/header.json5",
12419
+ "isSource": true,
12420
+ "$type": "color"
12421
+ }
12413
12422
  }
12414
12423
  },
12415
- "alpha": 0.95,
12416
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
12424
+ "filePath": "src/tokens/component/header.json5",
12417
12425
  "isSource": true,
12426
+ "alpha": 0.95,
12418
12427
  "original": {
12419
12428
  "$value": "{base.color.neutral.2}",
12420
12429
  "$type": "color",
@@ -12423,6 +12432,15 @@
12423
12432
  "collection": "mode",
12424
12433
  "group": "component (internal)",
12425
12434
  "scopes": ["bgColor"]
12435
+ },
12436
+ "org.primer.overrides": {
12437
+ "dark": {
12438
+ "$value": "{base.color.neutral.2}",
12439
+ "alpha": 0.95,
12440
+ "filePath": "src/tokens/component/header.json5",
12441
+ "isSource": true,
12442
+ "$type": "color"
12443
+ }
12426
12444
  }
12427
12445
  },
12428
12446
  "alpha": 0.95
@@ -12442,7 +12460,7 @@
12442
12460
  "scopes": ["borderColor"]
12443
12461
  }
12444
12462
  },
12445
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
12463
+ "filePath": "src/tokens/component/header.json5",
12446
12464
  "isSource": true,
12447
12465
  "original": {
12448
12466
  "$value": "{base.color.neutral.8}",
@@ -12468,10 +12486,13 @@
12468
12486
  "collection": "mode",
12469
12487
  "group": "component (internal)",
12470
12488
  "scopes": ["fgColor"]
12489
+ },
12490
+ "org.primer.overrides": {
12491
+ "dark": "#cdd9e5"
12471
12492
  }
12472
12493
  },
12473
12494
  "alpha": 0.7,
12474
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
12495
+ "filePath": "src/tokens/component/header.json5",
12475
12496
  "isSource": true,
12476
12497
  "original": {
12477
12498
  "$value": "{base.color.neutral.13}",
@@ -12481,6 +12502,9 @@
12481
12502
  "collection": "mode",
12482
12503
  "group": "component (internal)",
12483
12504
  "scopes": ["fgColor"]
12505
+ },
12506
+ "org.primer.overrides": {
12507
+ "dark": "{base.color.neutral.13}"
12484
12508
  }
12485
12509
  },
12486
12510
  "alpha": 0.7
@@ -12498,9 +12522,12 @@
12498
12522
  "collection": "mode",
12499
12523
  "group": "component (internal)",
12500
12524
  "scopes": ["fgColor"]
12525
+ },
12526
+ "org.primer.overrides": {
12527
+ "dark": "#f0f6fc"
12501
12528
  }
12502
12529
  },
12503
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
12530
+ "filePath": "src/tokens/component/header.json5",
12504
12531
  "isSource": true,
12505
12532
  "original": {
12506
12533
  "$value": "{base.color.neutral.12}",
@@ -12510,6 +12537,9 @@
12510
12537
  "collection": "mode",
12511
12538
  "group": "component (internal)",
12512
12539
  "scopes": ["fgColor"]
12540
+ },
12541
+ "org.primer.overrides": {
12542
+ "dark": "{base.color.neutral.12}"
12513
12543
  }
12514
12544
  }
12515
12545
  },
@@ -12526,9 +12556,12 @@
12526
12556
  "collection": "mode",
12527
12557
  "group": "component (internal)",
12528
12558
  "scopes": ["bgColor"]
12559
+ },
12560
+ "org.primer.overrides": {
12561
+ "dark": "#0d1117"
12529
12562
  }
12530
12563
  },
12531
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
12564
+ "filePath": "src/tokens/component/headerSerach.json5",
12532
12565
  "isSource": true,
12533
12566
  "original": {
12534
12567
  "$value": "{base.color.neutral.1}",
@@ -12538,6 +12571,9 @@
12538
12571
  "collection": "mode",
12539
12572
  "group": "component (internal)",
12540
12573
  "scopes": ["bgColor"]
12574
+ },
12575
+ "org.primer.overrides": {
12576
+ "dark": "{base.color.neutral.1}"
12541
12577
  }
12542
12578
  }
12543
12579
  },
@@ -12554,9 +12590,12 @@
12554
12590
  "collection": "mode",
12555
12591
  "group": "component (internal)",
12556
12592
  "scopes": ["borderColor"]
12593
+ },
12594
+ "org.primer.overrides": {
12595
+ "dark": "#2a313c"
12557
12596
  }
12558
12597
  },
12559
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
12598
+ "filePath": "src/tokens/component/headerSerach.json5",
12560
12599
  "isSource": true,
12561
12600
  "original": {
12562
12601
  "$value": "{base.color.neutral.5}",
@@ -12566,6 +12605,9 @@
12566
12605
  "collection": "mode",
12567
12606
  "group": "component (internal)",
12568
12607
  "scopes": ["borderColor"]
12608
+ },
12609
+ "org.primer.overrides": {
12610
+ "dark": "{base.color.neutral.5}"
12569
12611
  }
12570
12612
  }
12571
12613
  },
@@ -15845,12 +15887,38 @@
15845
15887
  "type": "color"
15846
15888
  },
15847
15889
  "overlay-backdrop-bgColor": {
15890
+ "$extensions": {
15891
+ "org.primer.figma": {
15892
+ "collection": "mode",
15893
+ "group": "component (internal)",
15894
+ "scopes": ["bgColor"]
15895
+ },
15896
+ "org.primer.overrides": {
15897
+ "dark": "#212830",
15898
+ "dark-dimmed": "#262c36",
15899
+ "light-high-contrast": "#d1d7e0",
15900
+ "dark-high-contrast": "#d1d7e0"
15901
+ }
15902
+ },
15848
15903
  "alpha": 0.4,
15849
- "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
15904
+ "filePath": "src/tokens/component/overlay.json5",
15850
15905
  "isSource": true,
15851
15906
  "original": {
15852
15907
  "$value": "{base.color.neutral.4}",
15853
15908
  "$type": "color",
15909
+ "$extensions": {
15910
+ "org.primer.figma": {
15911
+ "collection": "mode",
15912
+ "group": "component (internal)",
15913
+ "scopes": ["bgColor"]
15914
+ },
15915
+ "org.primer.overrides": {
15916
+ "dark": "{base.color.neutral.3}",
15917
+ "dark-dimmed": "{base.color.neutral.4}",
15918
+ "light-high-contrast": "{base.color.neutral.11}",
15919
+ "dark-high-contrast": "{base.color.neutral.11}"
15920
+ }
15921
+ },
15854
15922
  "alpha": 0.4
15855
15923
  },
15856
15924
  "name": "overlay-backdrop-bgColor",
@@ -15861,11 +15929,33 @@
15861
15929
  "type": "color"
15862
15930
  },
15863
15931
  "overlay-bgColor": {
15864
- "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
15932
+ "$extensions": {
15933
+ "org.primer.figma": {
15934
+ "collection": "mode",
15935
+ "group": "component (internal)",
15936
+ "scopes": ["bgColor"]
15937
+ },
15938
+ "org.primer.overrides": {
15939
+ "dark": "#262c36",
15940
+ "dark-dimmed": "#2a313c"
15941
+ }
15942
+ },
15943
+ "filePath": "src/tokens/component/overlay.json5",
15865
15944
  "isSource": true,
15866
15945
  "original": {
15867
15946
  "$value": "{base.color.neutral.5}",
15868
- "$type": "color"
15947
+ "$type": "color",
15948
+ "$extensions": {
15949
+ "org.primer.figma": {
15950
+ "collection": "mode",
15951
+ "group": "component (internal)",
15952
+ "scopes": ["bgColor"]
15953
+ },
15954
+ "org.primer.overrides": {
15955
+ "dark": "{bgColor.muted}",
15956
+ "dark-dimmed": "{base.color.neutral.5}"
15957
+ }
15958
+ }
15869
15959
  },
15870
15960
  "name": "overlay-bgColor",
15871
15961
  "attributes": {},
@@ -15875,12 +15965,84 @@
15875
15965
  "type": "color"
15876
15966
  },
15877
15967
  "overlay-borderColor": {
15968
+ "$extensions": {
15969
+ "org.primer.figma": {
15970
+ "collection": "mode",
15971
+ "group": "component (internal)"
15972
+ },
15973
+ "org.primer.overrides": {
15974
+ "dark": {
15975
+ "alpha": 1,
15976
+ "$value": "#3d444db3",
15977
+ "filePath": "src/tokens/component/overlay.json5",
15978
+ "isSource": true,
15979
+ "$type": "color"
15980
+ },
15981
+ "dark-dimmed": {
15982
+ "$value": "#3d444d",
15983
+ "alpha": 0.7,
15984
+ "filePath": "src/tokens/component/overlay.json5",
15985
+ "isSource": true,
15986
+ "$type": "color"
15987
+ },
15988
+ "light-high-contrast": {
15989
+ "alpha": 1,
15990
+ "$value": "#3d444d",
15991
+ "filePath": "src/tokens/component/overlay.json5",
15992
+ "isSource": true,
15993
+ "$type": "color"
15994
+ },
15995
+ "dark-high-contrast": {
15996
+ "$value": "#3d444d",
15997
+ "alpha": 1,
15998
+ "filePath": "src/tokens/component/overlay.json5",
15999
+ "isSource": true,
16000
+ "$type": "color"
16001
+ }
16002
+ }
16003
+ },
15878
16004
  "alpha": 0.7,
15879
- "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
16005
+ "filePath": "src/tokens/component/overlay.json5",
15880
16006
  "isSource": true,
15881
16007
  "original": {
15882
16008
  "$value": "{base.color.neutral.7}",
15883
16009
  "$type": "color",
16010
+ "$extensions": {
16011
+ "org.primer.figma": {
16012
+ "collection": "mode",
16013
+ "group": "component (internal)"
16014
+ },
16015
+ "org.primer.overrides": {
16016
+ "dark": {
16017
+ "alpha": 1,
16018
+ "$value": "{borderColor.muted}",
16019
+ "filePath": "src/tokens/component/overlay.json5",
16020
+ "isSource": true,
16021
+ "$type": "color"
16022
+ },
16023
+ "dark-dimmed": {
16024
+ "$value": "{base.color.neutral.7}",
16025
+ "alpha": 0.7,
16026
+ "filePath": "src/tokens/component/overlay.json5",
16027
+ "isSource": true,
16028
+ "$type": "color"
16029
+ },
16030
+ "light-high-contrast": {
16031
+ "alpha": 1,
16032
+ "$value": "{borderColor.default}",
16033
+ "filePath": "src/tokens/component/overlay.json5",
16034
+ "isSource": true,
16035
+ "$type": "color"
16036
+ },
16037
+ "dark-high-contrast": {
16038
+ "$value": "{borderColor.default}",
16039
+ "alpha": 1,
16040
+ "filePath": "src/tokens/component/overlay.json5",
16041
+ "isSource": true,
16042
+ "$type": "color"
16043
+ }
16044
+ }
16045
+ },
15884
16046
  "alpha": 0.7
15885
16047
  },
15886
16048
  "name": "overlay-borderColor",
@@ -16618,10 +16780,29 @@
16618
16780
  "collection": "mode",
16619
16781
  "group": "component",
16620
16782
  "scopes": ["bgColor"]
16783
+ },
16784
+ "org.primer.overrides": {
16785
+ "dark": {
16786
+ "alpha": 0.2
16787
+ },
16788
+ "light-high-contrast": {
16789
+ "$value": "#2a313c",
16790
+ "alpha": 1,
16791
+ "filePath": "src/tokens/component/skeletonLoader.json5",
16792
+ "isSource": true,
16793
+ "$type": "color"
16794
+ },
16795
+ "dark-high-contrast": {
16796
+ "$value": "#2a313c",
16797
+ "alpha": 1,
16798
+ "filePath": "src/tokens/component/skeletonLoader.json5",
16799
+ "isSource": true,
16800
+ "$type": "color"
16801
+ }
16621
16802
  }
16622
16803
  },
16623
16804
  "alpha": 0.2,
16624
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
16805
+ "filePath": "src/tokens/component/skeletonLoader.json5",
16625
16806
  "isSource": true,
16626
16807
  "original": {
16627
16808
  "$value": "{base.color.neutral.8}",
@@ -16631,6 +16812,25 @@
16631
16812
  "collection": "mode",
16632
16813
  "group": "component",
16633
16814
  "scopes": ["bgColor"]
16815
+ },
16816
+ "org.primer.overrides": {
16817
+ "dark": {
16818
+ "alpha": 0.2
16819
+ },
16820
+ "light-high-contrast": {
16821
+ "$value": "{base.color.neutral.5}",
16822
+ "alpha": 1,
16823
+ "filePath": "src/tokens/component/skeletonLoader.json5",
16824
+ "isSource": true,
16825
+ "$type": "color"
16826
+ },
16827
+ "dark-high-contrast": {
16828
+ "$value": "{base.color.neutral.5}",
16829
+ "alpha": 1,
16830
+ "filePath": "src/tokens/component/skeletonLoader.json5",
16831
+ "isSource": true,
16832
+ "$type": "color"
16833
+ }
16634
16834
  }
16635
16835
  },
16636
16836
  "alpha": 0.2