@primer/primitives 10.4.0-rc.eab36abe → 10.4.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 (49) hide show
  1. package/dist/css/functional/themes/dark-colorblind.css +6 -6
  2. package/dist/css/functional/themes/dark-dimmed.css +6 -6
  3. package/dist/css/functional/themes/dark-high-contrast.css +6 -6
  4. package/dist/css/functional/themes/dark-tritanopia.css +6 -6
  5. package/dist/css/functional/themes/dark.css +6 -6
  6. package/dist/css/functional/themes/light-colorblind.css +6 -6
  7. package/dist/css/functional/themes/light-high-contrast.css +6 -6
  8. package/dist/css/functional/themes/light-tritanopia.css +6 -6
  9. package/dist/css/functional/themes/light.css +6 -6
  10. package/dist/docs/functional/themes/dark-colorblind.json +65 -14
  11. package/dist/docs/functional/themes/dark-dimmed.json +65 -14
  12. package/dist/docs/functional/themes/dark-high-contrast.json +65 -14
  13. package/dist/docs/functional/themes/dark-tritanopia.json +65 -14
  14. package/dist/docs/functional/themes/dark.json +65 -14
  15. package/dist/docs/functional/themes/light-colorblind.json +66 -15
  16. package/dist/docs/functional/themes/light-high-contrast.json +66 -15
  17. package/dist/docs/functional/themes/light-tritanopia.json +66 -15
  18. package/dist/docs/functional/themes/light.json +66 -15
  19. package/dist/figma/themes/dark-colorblind.json +112 -12
  20. package/dist/figma/themes/dark-dimmed.json +112 -12
  21. package/dist/figma/themes/dark-high-contrast.json +112 -12
  22. package/dist/figma/themes/dark-tritanopia.json +112 -12
  23. package/dist/figma/themes/dark.json +112 -12
  24. package/dist/figma/themes/light-colorblind.json +114 -14
  25. package/dist/figma/themes/light-high-contrast.json +114 -14
  26. package/dist/figma/themes/light-tritanopia.json +114 -14
  27. package/dist/figma/themes/light.json +114 -14
  28. package/dist/internalCss/dark-colorblind.css +6 -6
  29. package/dist/internalCss/dark-dimmed.css +6 -6
  30. package/dist/internalCss/dark-high-contrast.css +6 -6
  31. package/dist/internalCss/dark-tritanopia.css +6 -6
  32. package/dist/internalCss/dark.css +6 -6
  33. package/dist/internalCss/light-colorblind.css +6 -6
  34. package/dist/internalCss/light-high-contrast.css +6 -6
  35. package/dist/internalCss/light-tritanopia.css +6 -6
  36. package/dist/internalCss/light.css +6 -6
  37. package/dist/styleLint/functional/themes/dark-colorblind.json +65 -14
  38. package/dist/styleLint/functional/themes/dark-dimmed.json +65 -14
  39. package/dist/styleLint/functional/themes/dark-high-contrast.json +65 -14
  40. package/dist/styleLint/functional/themes/dark-tritanopia.json +65 -14
  41. package/dist/styleLint/functional/themes/dark.json +65 -14
  42. package/dist/styleLint/functional/themes/light-colorblind.json +66 -15
  43. package/dist/styleLint/functional/themes/light-high-contrast.json +66 -15
  44. package/dist/styleLint/functional/themes/light-tritanopia.json +66 -15
  45. package/dist/styleLint/functional/themes/light.json +66 -15
  46. package/package.json +1 -1
  47. package/src/tokens/component/button.json5 +4 -4
  48. package/src/tokens/component/overlay.json5 +1 -1
  49. package/src/tokens/functional/shadow/shadow.json5 +43 -10
@@ -27596,7 +27596,7 @@
27596
27596
  "$extensions": {
27597
27597
  "org.primer.figma": {
27598
27598
  "collection": "mode",
27599
- "group": "component (internal)",
27599
+ "group": "component",
27600
27600
  "scopes": ["bgColor"]
27601
27601
  },
27602
27602
  "org.primer.overrides": {
@@ -27615,7 +27615,7 @@
27615
27615
  "$extensions": {
27616
27616
  "org.primer.figma": {
27617
27617
  "collection": "mode",
27618
- "group": "component (internal)",
27618
+ "group": "component",
27619
27619
  "scopes": ["bgColor"]
27620
27620
  },
27621
27621
  "org.primer.overrides": {
@@ -28746,6 +28746,14 @@
28746
28746
  "org.primer.overrides": {
28747
28747
  "dark": {
28748
28748
  "$value": [
28749
+ {
28750
+ "color": "#010409",
28751
+ "alpha": 0.4,
28752
+ "offsetX": "0px",
28753
+ "offsetY": "1px",
28754
+ "blur": "1px",
28755
+ "spread": "0px"
28756
+ },
28749
28757
  {
28750
28758
  "color": "#010409",
28751
28759
  "alpha": 0.8,
@@ -28765,6 +28773,14 @@
28765
28773
  "isSource": true,
28766
28774
  "original": {
28767
28775
  "$value": [
28776
+ {
28777
+ "color": "{base.color.neutral.0}",
28778
+ "alpha": 0.4,
28779
+ "offsetX": "0px",
28780
+ "offsetY": "1px",
28781
+ "blur": "1px",
28782
+ "spread": "0px"
28783
+ },
28768
28784
  {
28769
28785
  "color": "{base.color.neutral.0}",
28770
28786
  "alpha": 0.8,
@@ -28783,6 +28799,14 @@
28783
28799
  "org.primer.overrides": {
28784
28800
  "dark": {
28785
28801
  "$value": [
28802
+ {
28803
+ "color": "{base.color.neutral.0}",
28804
+ "alpha": 0.4,
28805
+ "offsetX": "0px",
28806
+ "offsetY": "1px",
28807
+ "blur": "1px",
28808
+ "spread": "0px"
28809
+ },
28786
28810
  {
28787
28811
  "color": "{base.color.neutral.0}",
28788
28812
  "alpha": 0.8,
@@ -28803,7 +28827,7 @@
28803
28827
  "attributes": {},
28804
28828
  "path": ["shadow", "resting", "medium"],
28805
28829
  "key": "{shadow.resting.medium}",
28806
- "value": "0px 3px 6px 0px #010409cc",
28830
+ "value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
28807
28831
  "type": "shadow"
28808
28832
  },
28809
28833
  "shadow-resting-small": {
@@ -28817,10 +28841,19 @@
28817
28841
  "$value": [
28818
28842
  {
28819
28843
  "color": "#010409",
28820
- "alpha": 0.4,
28844
+ "alpha": 0.6,
28821
28845
  "offsetX": "0px",
28822
28846
  "offsetY": "1px",
28823
- "blur": "0px",
28847
+ "blur": "1px",
28848
+ "spread": "0px",
28849
+ "inset": false
28850
+ },
28851
+ {
28852
+ "color": "#010409",
28853
+ "alpha": 0.6,
28854
+ "offsetX": "0px",
28855
+ "offsetY": "1px",
28856
+ "blur": "3px",
28824
28857
  "spread": "0px",
28825
28858
  "inset": false
28826
28859
  }
@@ -28837,10 +28870,19 @@
28837
28870
  "$value": [
28838
28871
  {
28839
28872
  "color": "{base.color.neutral.0}",
28840
- "alpha": 0.4,
28873
+ "alpha": 0.6,
28841
28874
  "offsetX": "0px",
28842
28875
  "offsetY": "1px",
28843
- "blur": "0px",
28876
+ "blur": "1px",
28877
+ "spread": "0px",
28878
+ "inset": false
28879
+ },
28880
+ {
28881
+ "color": "{base.color.neutral.0}",
28882
+ "alpha": 0.6,
28883
+ "offsetX": "0px",
28884
+ "offsetY": "1px",
28885
+ "blur": "3px",
28844
28886
  "spread": "0px",
28845
28887
  "inset": false
28846
28888
  }
@@ -28856,10 +28898,19 @@
28856
28898
  "$value": [
28857
28899
  {
28858
28900
  "color": "{base.color.neutral.0}",
28859
- "alpha": 0.4,
28901
+ "alpha": 0.6,
28860
28902
  "offsetX": "0px",
28861
28903
  "offsetY": "1px",
28862
- "blur": "0px",
28904
+ "blur": "1px",
28905
+ "spread": "0px",
28906
+ "inset": false
28907
+ },
28908
+ {
28909
+ "color": "{base.color.neutral.0}",
28910
+ "alpha": 0.6,
28911
+ "offsetX": "0px",
28912
+ "offsetY": "1px",
28913
+ "blur": "3px",
28863
28914
  "spread": "0px",
28864
28915
  "inset": false
28865
28916
  }
@@ -28875,7 +28926,7 @@
28875
28926
  "attributes": {},
28876
28927
  "path": ["shadow", "resting", "small"],
28877
28928
  "key": "{shadow.resting.small}",
28878
- "value": "0px 1px 0px 0px #01040966",
28929
+ "value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
28879
28930
  "type": "shadow"
28880
28931
  },
28881
28932
  "shadow-resting-xsmall": {
@@ -28891,7 +28942,7 @@
28891
28942
  "alpha": 0.8,
28892
28943
  "offsetX": "0px",
28893
28944
  "offsetY": "1px",
28894
- "blur": "0px",
28945
+ "blur": "1px",
28895
28946
  "spread": "0px",
28896
28947
  "inset": false
28897
28948
  },
@@ -28909,7 +28960,7 @@
28909
28960
  "alpha": 0.8,
28910
28961
  "offsetX": "0px",
28911
28962
  "offsetY": "1px",
28912
- "blur": "0px",
28963
+ "blur": "1px",
28913
28964
  "spread": "0px",
28914
28965
  "inset": false
28915
28966
  },
@@ -28926,7 +28977,7 @@
28926
28977
  "alpha": 0.8,
28927
28978
  "offsetX": "0px",
28928
28979
  "offsetY": "1px",
28929
- "blur": "0px",
28980
+ "blur": "1px",
28930
28981
  "spread": "0px",
28931
28982
  "inset": false
28932
28983
  },
@@ -28941,7 +28992,7 @@
28941
28992
  "attributes": {},
28942
28993
  "path": ["shadow", "resting", "xsmall"],
28943
28994
  "key": "{shadow.resting.xsmall}",
28944
- "value": "0px 1px 0px 0px #010409cc",
28995
+ "value": "0px 1px 1px 0px #010409cc",
28945
28996
  "type": "shadow"
28946
28997
  },
28947
28998
  "sideNav-bgColor-selected": {
@@ -27588,7 +27588,7 @@
27588
27588
  "$extensions": {
27589
27589
  "org.primer.figma": {
27590
27590
  "collection": "mode",
27591
- "group": "component (internal)",
27591
+ "group": "component",
27592
27592
  "scopes": ["bgColor"]
27593
27593
  },
27594
27594
  "org.primer.overrides": {
@@ -27607,7 +27607,7 @@
27607
27607
  "$extensions": {
27608
27608
  "org.primer.figma": {
27609
27609
  "collection": "mode",
27610
- "group": "component (internal)",
27610
+ "group": "component",
27611
27611
  "scopes": ["bgColor"]
27612
27612
  },
27613
27613
  "org.primer.overrides": {
@@ -28738,6 +28738,14 @@
28738
28738
  "org.primer.overrides": {
28739
28739
  "dark": {
28740
28740
  "$value": [
28741
+ {
28742
+ "color": "#010409",
28743
+ "alpha": 0.4,
28744
+ "offsetX": "0px",
28745
+ "offsetY": "1px",
28746
+ "blur": "1px",
28747
+ "spread": "0px"
28748
+ },
28741
28749
  {
28742
28750
  "color": "#010409",
28743
28751
  "alpha": 0.8,
@@ -28757,6 +28765,14 @@
28757
28765
  "isSource": true,
28758
28766
  "original": {
28759
28767
  "$value": [
28768
+ {
28769
+ "color": "{base.color.neutral.0}",
28770
+ "alpha": 0.4,
28771
+ "offsetX": "0px",
28772
+ "offsetY": "1px",
28773
+ "blur": "1px",
28774
+ "spread": "0px"
28775
+ },
28760
28776
  {
28761
28777
  "color": "{base.color.neutral.0}",
28762
28778
  "alpha": 0.8,
@@ -28775,6 +28791,14 @@
28775
28791
  "org.primer.overrides": {
28776
28792
  "dark": {
28777
28793
  "$value": [
28794
+ {
28795
+ "color": "{base.color.neutral.0}",
28796
+ "alpha": 0.4,
28797
+ "offsetX": "0px",
28798
+ "offsetY": "1px",
28799
+ "blur": "1px",
28800
+ "spread": "0px"
28801
+ },
28778
28802
  {
28779
28803
  "color": "{base.color.neutral.0}",
28780
28804
  "alpha": 0.8,
@@ -28795,7 +28819,7 @@
28795
28819
  "attributes": {},
28796
28820
  "path": ["shadow", "resting", "medium"],
28797
28821
  "key": "{shadow.resting.medium}",
28798
- "value": "0px 3px 6px 0px #010409cc",
28822
+ "value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
28799
28823
  "type": "shadow"
28800
28824
  },
28801
28825
  "shadow-resting-small": {
@@ -28809,10 +28833,19 @@
28809
28833
  "$value": [
28810
28834
  {
28811
28835
  "color": "#010409",
28812
- "alpha": 0.4,
28836
+ "alpha": 0.6,
28813
28837
  "offsetX": "0px",
28814
28838
  "offsetY": "1px",
28815
- "blur": "0px",
28839
+ "blur": "1px",
28840
+ "spread": "0px",
28841
+ "inset": false
28842
+ },
28843
+ {
28844
+ "color": "#010409",
28845
+ "alpha": 0.6,
28846
+ "offsetX": "0px",
28847
+ "offsetY": "1px",
28848
+ "blur": "3px",
28816
28849
  "spread": "0px",
28817
28850
  "inset": false
28818
28851
  }
@@ -28829,10 +28862,19 @@
28829
28862
  "$value": [
28830
28863
  {
28831
28864
  "color": "{base.color.neutral.0}",
28832
- "alpha": 0.4,
28865
+ "alpha": 0.6,
28833
28866
  "offsetX": "0px",
28834
28867
  "offsetY": "1px",
28835
- "blur": "0px",
28868
+ "blur": "1px",
28869
+ "spread": "0px",
28870
+ "inset": false
28871
+ },
28872
+ {
28873
+ "color": "{base.color.neutral.0}",
28874
+ "alpha": 0.6,
28875
+ "offsetX": "0px",
28876
+ "offsetY": "1px",
28877
+ "blur": "3px",
28836
28878
  "spread": "0px",
28837
28879
  "inset": false
28838
28880
  }
@@ -28848,10 +28890,19 @@
28848
28890
  "$value": [
28849
28891
  {
28850
28892
  "color": "{base.color.neutral.0}",
28851
- "alpha": 0.4,
28893
+ "alpha": 0.6,
28852
28894
  "offsetX": "0px",
28853
28895
  "offsetY": "1px",
28854
- "blur": "0px",
28896
+ "blur": "1px",
28897
+ "spread": "0px",
28898
+ "inset": false
28899
+ },
28900
+ {
28901
+ "color": "{base.color.neutral.0}",
28902
+ "alpha": 0.6,
28903
+ "offsetX": "0px",
28904
+ "offsetY": "1px",
28905
+ "blur": "3px",
28855
28906
  "spread": "0px",
28856
28907
  "inset": false
28857
28908
  }
@@ -28867,7 +28918,7 @@
28867
28918
  "attributes": {},
28868
28919
  "path": ["shadow", "resting", "small"],
28869
28920
  "key": "{shadow.resting.small}",
28870
- "value": "0px 1px 0px 0px #01040966",
28921
+ "value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
28871
28922
  "type": "shadow"
28872
28923
  },
28873
28924
  "shadow-resting-xsmall": {
@@ -28883,7 +28934,7 @@
28883
28934
  "alpha": 0.8,
28884
28935
  "offsetX": "0px",
28885
28936
  "offsetY": "1px",
28886
- "blur": "0px",
28937
+ "blur": "1px",
28887
28938
  "spread": "0px",
28888
28939
  "inset": false
28889
28940
  },
@@ -28901,7 +28952,7 @@
28901
28952
  "alpha": 0.8,
28902
28953
  "offsetX": "0px",
28903
28954
  "offsetY": "1px",
28904
- "blur": "0px",
28955
+ "blur": "1px",
28905
28956
  "spread": "0px",
28906
28957
  "inset": false
28907
28958
  },
@@ -28918,7 +28969,7 @@
28918
28969
  "alpha": 0.8,
28919
28970
  "offsetX": "0px",
28920
28971
  "offsetY": "1px",
28921
- "blur": "0px",
28972
+ "blur": "1px",
28922
28973
  "spread": "0px",
28923
28974
  "inset": false
28924
28975
  },
@@ -28933,7 +28984,7 @@
28933
28984
  "attributes": {},
28934
28985
  "path": ["shadow", "resting", "xsmall"],
28935
28986
  "key": "{shadow.resting.xsmall}",
28936
- "value": "0px 1px 0px 0px #010409cc",
28987
+ "value": "0px 1px 1px 0px #010409cc",
28937
28988
  "type": "shadow"
28938
28989
  },
28939
28990
  "sideNav-bgColor-selected": {
@@ -27580,7 +27580,7 @@
27580
27580
  "$extensions": {
27581
27581
  "org.primer.figma": {
27582
27582
  "collection": "mode",
27583
- "group": "component (internal)",
27583
+ "group": "component",
27584
27584
  "scopes": ["bgColor"]
27585
27585
  },
27586
27586
  "org.primer.overrides": {
@@ -27599,7 +27599,7 @@
27599
27599
  "$extensions": {
27600
27600
  "org.primer.figma": {
27601
27601
  "collection": "mode",
27602
- "group": "component (internal)",
27602
+ "group": "component",
27603
27603
  "scopes": ["bgColor"]
27604
27604
  },
27605
27605
  "org.primer.overrides": {
@@ -28730,6 +28730,14 @@
28730
28730
  "org.primer.overrides": {
28731
28731
  "dark": {
28732
28732
  "$value": [
28733
+ {
28734
+ "color": "#010409",
28735
+ "alpha": 0.4,
28736
+ "offsetX": "0px",
28737
+ "offsetY": "1px",
28738
+ "blur": "1px",
28739
+ "spread": "0px"
28740
+ },
28733
28741
  {
28734
28742
  "color": "#010409",
28735
28743
  "alpha": 0.8,
@@ -28749,6 +28757,14 @@
28749
28757
  "isSource": true,
28750
28758
  "original": {
28751
28759
  "$value": [
28760
+ {
28761
+ "color": "{base.color.neutral.0}",
28762
+ "alpha": 0.4,
28763
+ "offsetX": "0px",
28764
+ "offsetY": "1px",
28765
+ "blur": "1px",
28766
+ "spread": "0px"
28767
+ },
28752
28768
  {
28753
28769
  "color": "{base.color.neutral.0}",
28754
28770
  "alpha": 0.8,
@@ -28767,6 +28783,14 @@
28767
28783
  "org.primer.overrides": {
28768
28784
  "dark": {
28769
28785
  "$value": [
28786
+ {
28787
+ "color": "{base.color.neutral.0}",
28788
+ "alpha": 0.4,
28789
+ "offsetX": "0px",
28790
+ "offsetY": "1px",
28791
+ "blur": "1px",
28792
+ "spread": "0px"
28793
+ },
28770
28794
  {
28771
28795
  "color": "{base.color.neutral.0}",
28772
28796
  "alpha": 0.8,
@@ -28787,7 +28811,7 @@
28787
28811
  "attributes": {},
28788
28812
  "path": ["shadow", "resting", "medium"],
28789
28813
  "key": "{shadow.resting.medium}",
28790
- "value": "0px 3px 6px 0px #010409cc",
28814
+ "value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
28791
28815
  "type": "shadow"
28792
28816
  },
28793
28817
  "shadow-resting-small": {
@@ -28801,10 +28825,19 @@
28801
28825
  "$value": [
28802
28826
  {
28803
28827
  "color": "#010409",
28804
- "alpha": 0.4,
28828
+ "alpha": 0.6,
28805
28829
  "offsetX": "0px",
28806
28830
  "offsetY": "1px",
28807
- "blur": "0px",
28831
+ "blur": "1px",
28832
+ "spread": "0px",
28833
+ "inset": false
28834
+ },
28835
+ {
28836
+ "color": "#010409",
28837
+ "alpha": 0.6,
28838
+ "offsetX": "0px",
28839
+ "offsetY": "1px",
28840
+ "blur": "3px",
28808
28841
  "spread": "0px",
28809
28842
  "inset": false
28810
28843
  }
@@ -28821,10 +28854,19 @@
28821
28854
  "$value": [
28822
28855
  {
28823
28856
  "color": "{base.color.neutral.0}",
28824
- "alpha": 0.4,
28857
+ "alpha": 0.6,
28825
28858
  "offsetX": "0px",
28826
28859
  "offsetY": "1px",
28827
- "blur": "0px",
28860
+ "blur": "1px",
28861
+ "spread": "0px",
28862
+ "inset": false
28863
+ },
28864
+ {
28865
+ "color": "{base.color.neutral.0}",
28866
+ "alpha": 0.6,
28867
+ "offsetX": "0px",
28868
+ "offsetY": "1px",
28869
+ "blur": "3px",
28828
28870
  "spread": "0px",
28829
28871
  "inset": false
28830
28872
  }
@@ -28840,10 +28882,19 @@
28840
28882
  "$value": [
28841
28883
  {
28842
28884
  "color": "{base.color.neutral.0}",
28843
- "alpha": 0.4,
28885
+ "alpha": 0.6,
28844
28886
  "offsetX": "0px",
28845
28887
  "offsetY": "1px",
28846
- "blur": "0px",
28888
+ "blur": "1px",
28889
+ "spread": "0px",
28890
+ "inset": false
28891
+ },
28892
+ {
28893
+ "color": "{base.color.neutral.0}",
28894
+ "alpha": 0.6,
28895
+ "offsetX": "0px",
28896
+ "offsetY": "1px",
28897
+ "blur": "3px",
28847
28898
  "spread": "0px",
28848
28899
  "inset": false
28849
28900
  }
@@ -28859,7 +28910,7 @@
28859
28910
  "attributes": {},
28860
28911
  "path": ["shadow", "resting", "small"],
28861
28912
  "key": "{shadow.resting.small}",
28862
- "value": "0px 1px 0px 0px #01040966",
28913
+ "value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
28863
28914
  "type": "shadow"
28864
28915
  },
28865
28916
  "shadow-resting-xsmall": {
@@ -28875,7 +28926,7 @@
28875
28926
  "alpha": 0.8,
28876
28927
  "offsetX": "0px",
28877
28928
  "offsetY": "1px",
28878
- "blur": "0px",
28929
+ "blur": "1px",
28879
28930
  "spread": "0px",
28880
28931
  "inset": false
28881
28932
  },
@@ -28893,7 +28944,7 @@
28893
28944
  "alpha": 0.8,
28894
28945
  "offsetX": "0px",
28895
28946
  "offsetY": "1px",
28896
- "blur": "0px",
28947
+ "blur": "1px",
28897
28948
  "spread": "0px",
28898
28949
  "inset": false
28899
28950
  },
@@ -28910,7 +28961,7 @@
28910
28961
  "alpha": 0.8,
28911
28962
  "offsetX": "0px",
28912
28963
  "offsetY": "1px",
28913
- "blur": "0px",
28964
+ "blur": "1px",
28914
28965
  "spread": "0px",
28915
28966
  "inset": false
28916
28967
  },
@@ -28925,7 +28976,7 @@
28925
28976
  "attributes": {},
28926
28977
  "path": ["shadow", "resting", "xsmall"],
28927
28978
  "key": "{shadow.resting.xsmall}",
28928
- "value": "0px 1px 0px 0px #010409cc",
28979
+ "value": "0px 1px 1px 0px #010409cc",
28929
28980
  "type": "shadow"
28930
28981
  },
28931
28982
  "sideNav-bgColor-selected": {