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