@primer/primitives 0.0.0-20241218223554 → 0.0.0-20241219081703

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 (55) hide show
  1. package/dist/css/functional/themes/dark-colorblind.css +2 -2
  2. package/dist/css/functional/themes/dark-tritanopia.css +2 -2
  3. package/dist/css/functional/themes/dark.css +2 -2
  4. package/dist/docs/functional/themes/dark-colorblind.json +167 -13
  5. package/dist/docs/functional/themes/dark-dimmed.json +204 -12
  6. package/dist/docs/functional/themes/dark-high-contrast.json +205 -13
  7. package/dist/docs/functional/themes/dark-tritanopia.json +167 -13
  8. package/dist/docs/functional/themes/dark.json +167 -13
  9. package/dist/docs/functional/themes/light-colorblind.json +162 -10
  10. package/dist/docs/functional/themes/light-high-contrast.json +203 -11
  11. package/dist/docs/functional/themes/light-tritanopia.json +162 -10
  12. package/dist/docs/functional/themes/light.json +162 -10
  13. package/dist/figma/themes/dark-colorblind.json +165 -164
  14. package/dist/figma/themes/dark-dimmed.json +165 -115
  15. package/dist/figma/themes/dark-high-contrast.json +165 -114
  16. package/dist/figma/themes/dark-tritanopia.json +165 -164
  17. package/dist/figma/themes/dark.json +165 -164
  18. package/dist/figma/themes/light-colorblind.json +164 -164
  19. package/dist/figma/themes/light-high-contrast.json +151 -100
  20. package/dist/figma/themes/light-tritanopia.json +164 -164
  21. package/dist/figma/themes/light.json +164 -164
  22. package/dist/internalCss/dark-colorblind.css +2 -2
  23. package/dist/internalCss/dark-tritanopia.css +2 -2
  24. package/dist/internalCss/dark.css +2 -2
  25. package/dist/styleLint/functional/themes/dark-colorblind.json +167 -13
  26. package/dist/styleLint/functional/themes/dark-dimmed.json +204 -12
  27. package/dist/styleLint/functional/themes/dark-high-contrast.json +205 -13
  28. package/dist/styleLint/functional/themes/dark-tritanopia.json +167 -13
  29. package/dist/styleLint/functional/themes/dark.json +167 -13
  30. package/dist/styleLint/functional/themes/light-colorblind.json +162 -10
  31. package/dist/styleLint/functional/themes/light-high-contrast.json +203 -11
  32. package/dist/styleLint/functional/themes/light-tritanopia.json +162 -10
  33. package/dist/styleLint/functional/themes/light.json +162 -10
  34. package/package.json +1 -1
  35. package/src/tokens/component/header.json5 +65 -0
  36. package/src/tokens/component/headerSerach.json5 +32 -0
  37. package/src/tokens/component/overlay.json5 +67 -0
  38. package/src/tokens/component/skeletonLoader.json5 +29 -0
  39. package/src/tokens/functional/color/dark/app-dark.json5 +0 -81
  40. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -18
  41. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +0 -21
  42. package/src/tokens/functional/color/dark/patterns-dark.json5 +0 -127
  43. package/src/tokens/functional/color/light/app-light.json5 +0 -75
  44. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +0 -21
  45. package/src/tokens/functional/color/light/patterns-light.json5 +0 -127
  46. package/dist/figma/figma.json +0 -133
  47. package/dist/figma/shadows/dark-colorblind.json +0 -1152
  48. package/dist/figma/shadows/dark-dimmed.json +0 -1152
  49. package/dist/figma/shadows/dark-high-contrast.json +0 -1152
  50. package/dist/figma/shadows/dark-tritanopia.json +0 -1152
  51. package/dist/figma/shadows/dark.json +0 -1152
  52. package/dist/figma/shadows/light-colorblind.json +0 -1052
  53. package/dist/figma/shadows/light-high-contrast.json +0 -1052
  54. package/dist/figma/shadows/light-tritanopia.json +0 -1052
  55. package/dist/figma/shadows/light.json +0 -1052
package/dist/css/functional/themes/dark-colorblind.css CHANGED
@@ -591,7 +591,7 @@
591
591
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
592
592
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
593
593
  --focus-outline: 2px solid #1f6feb;
594
- --overlay-borderColor: var(--borderColor-muted);
594
+ --overlay-borderColor: #3d444d;
595
595
  --tooltip-fgColor: var(--fgColor-onEmphasis);
596
596
  --border-neutral-muted: 0.0625rem solid #3d444db3;
597
597
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
@@ -1197,7 +1197,7 @@
1197
1197
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
1198
1198
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
1199
1199
  --focus-outline: 2px solid #1f6feb;
1200
- --overlay-borderColor: var(--borderColor-muted);
1200
+ --overlay-borderColor: #3d444d;
1201
1201
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1202
1202
  --border-neutral-muted: 0.0625rem solid #3d444db3;
1203
1203
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
package/dist/css/functional/themes/dark-tritanopia.css CHANGED
@@ -591,7 +591,7 @@
591
591
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
592
592
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
593
593
  --focus-outline: 2px solid #1f6feb;
594
- --overlay-borderColor: var(--borderColor-muted);
594
+ --overlay-borderColor: #3d444d;
595
595
  --tooltip-fgColor: var(--fgColor-onEmphasis);
596
596
  --border-neutral-muted: 0.0625rem solid #3d444db3;
597
597
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
@@ -1197,7 +1197,7 @@
1197
1197
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
1198
1198
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
1199
1199
  --focus-outline: 2px solid #1f6feb;
1200
- --overlay-borderColor: var(--borderColor-muted);
1200
+ --overlay-borderColor: #3d444d;
1201
1201
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1202
1202
  --border-neutral-muted: 0.0625rem solid #3d444db3;
1203
1203
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
package/dist/css/functional/themes/dark.css CHANGED
@@ -591,7 +591,7 @@
591
591
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
592
592
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
593
593
  --focus-outline: 2px solid #1f6feb;
594
- --overlay-borderColor: var(--borderColor-muted);
594
+ --overlay-borderColor: #3d444d;
595
595
  --tooltip-fgColor: var(--fgColor-onEmphasis);
596
596
  --border-neutral-muted: 0.0625rem solid #3d444db3;
597
597
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
@@ -1197,7 +1197,7 @@
1197
1197
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
1198
1198
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
1199
1199
  --focus-outline: 2px solid #1f6feb;
1200
- --overlay-borderColor: var(--borderColor-muted);
1200
+ --overlay-borderColor: #3d444d;
1201
1201
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1202
1202
  --border-neutral-muted: 0.0625rem solid #3d444db3;
1203
1203
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
package/dist/docs/functional/themes/dark-colorblind.json CHANGED
@@ -12338,11 +12338,20 @@
12338
12338
  "collection": "mode",
12339
12339
  "group": "component (internal)",
12340
12340
  "scopes": ["bgColor"]
12341
+ },
12342
+ "org.primer.overrides": {
12343
+ "dark": {
12344
+ "$value": "#151b23",
12345
+ "alpha": 0.95,
12346
+ "filePath": "src/tokens/component/header.json5",
12347
+ "isSource": true,
12348
+ "$type": "color"
12349
+ }
12341
12350
  }
12342
12351
  },
12343
- "alpha": 0.95,
12344
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
12352
+ "filePath": "src/tokens/component/header.json5",
12345
12353
  "isSource": true,
12354
+ "alpha": 0.95,
12346
12355
  "original": {
12347
12356
  "$value": "{base.color.neutral.2}",
12348
12357
  "$type": "color",
@@ -12351,6 +12360,15 @@
12351
12360
  "collection": "mode",
12352
12361
  "group": "component (internal)",
12353
12362
  "scopes": ["bgColor"]
12363
+ },
12364
+ "org.primer.overrides": {
12365
+ "dark": {
12366
+ "$value": "{base.color.neutral.2}",
12367
+ "alpha": 0.95,
12368
+ "filePath": "src/tokens/component/header.json5",
12369
+ "isSource": true,
12370
+ "$type": "color"
12371
+ }
12354
12372
  }
12355
12373
  },
12356
12374
  "alpha": 0.95
@@ -12370,7 +12388,7 @@
12370
12388
  "scopes": ["borderColor"]
12371
12389
  }
12372
12390
  },
12373
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
12391
+ "filePath": "src/tokens/component/header.json5",
12374
12392
  "isSource": true,
12375
12393
  "original": {
12376
12394
  "$value": "{base.color.neutral.8}",
@@ -12396,10 +12414,13 @@
12396
12414
  "collection": "mode",
12397
12415
  "group": "component (internal)",
12398
12416
  "scopes": ["fgColor"]
12417
+ },
12418
+ "org.primer.overrides": {
12419
+ "dark": "#ffffff"
12399
12420
  }
12400
12421
  },
12401
12422
  "alpha": 0.7,
12402
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
12423
+ "filePath": "src/tokens/component/header.json5",
12403
12424
  "isSource": true,
12404
12425
  "original": {
12405
12426
  "$value": "{base.color.neutral.13}",
@@ -12409,6 +12430,9 @@
12409
12430
  "collection": "mode",
12410
12431
  "group": "component (internal)",
12411
12432
  "scopes": ["fgColor"]
12433
+ },
12434
+ "org.primer.overrides": {
12435
+ "dark": "{base.color.neutral.13}"
12412
12436
  }
12413
12437
  },
12414
12438
  "alpha": 0.7
@@ -12426,9 +12450,12 @@
12426
12450
  "collection": "mode",
12427
12451
  "group": "component (internal)",
12428
12452
  "scopes": ["fgColor"]
12453
+ },
12454
+ "org.primer.overrides": {
12455
+ "dark": "#f0f6fc"
12429
12456
  }
12430
12457
  },
12431
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
12458
+ "filePath": "src/tokens/component/header.json5",
12432
12459
  "isSource": true,
12433
12460
  "original": {
12434
12461
  "$value": "{base.color.neutral.12}",
@@ -12438,6 +12465,9 @@
12438
12465
  "collection": "mode",
12439
12466
  "group": "component (internal)",
12440
12467
  "scopes": ["fgColor"]
12468
+ },
12469
+ "org.primer.overrides": {
12470
+ "dark": "{base.color.neutral.12}"
12441
12471
  }
12442
12472
  }
12443
12473
  },
@@ -12454,9 +12484,12 @@
12454
12484
  "collection": "mode",
12455
12485
  "group": "component (internal)",
12456
12486
  "scopes": ["bgColor"]
12487
+ },
12488
+ "org.primer.overrides": {
12489
+ "dark": "#0d1117"
12457
12490
  }
12458
12491
  },
12459
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
12492
+ "filePath": "src/tokens/component/headerSerach.json5",
12460
12493
  "isSource": true,
12461
12494
  "original": {
12462
12495
  "$value": "{base.color.neutral.1}",
@@ -12466,6 +12499,9 @@
12466
12499
  "collection": "mode",
12467
12500
  "group": "component (internal)",
12468
12501
  "scopes": ["bgColor"]
12502
+ },
12503
+ "org.primer.overrides": {
12504
+ "dark": "{base.color.neutral.1}"
12469
12505
  }
12470
12506
  }
12471
12507
  },
@@ -12482,9 +12518,12 @@
12482
12518
  "collection": "mode",
12483
12519
  "group": "component (internal)",
12484
12520
  "scopes": ["borderColor"]
12521
+ },
12522
+ "org.primer.overrides": {
12523
+ "dark": "#2a313c"
12485
12524
  }
12486
12525
  },
12487
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
12526
+ "filePath": "src/tokens/component/headerSerach.json5",
12488
12527
  "isSource": true,
12489
12528
  "original": {
12490
12529
  "$value": "{base.color.neutral.5}",
@@ -12494,6 +12533,9 @@
12494
12533
  "collection": "mode",
12495
12534
  "group": "component (internal)",
12496
12535
  "scopes": ["borderColor"]
12536
+ },
12537
+ "org.primer.overrides": {
12538
+ "dark": "{base.color.neutral.5}"
12497
12539
  }
12498
12540
  }
12499
12541
  },
@@ -15778,10 +15820,16 @@
15778
15820
  "collection": "mode",
15779
15821
  "group": "component (internal)",
15780
15822
  "scopes": ["bgColor"]
15823
+ },
15824
+ "org.primer.overrides": {
15825
+ "dark": "#212830",
15826
+ "dark-dimmed": "#262c36",
15827
+ "light-high-contrast": "#d1d7e0",
15828
+ "dark-high-contrast": "#d1d7e0"
15781
15829
  }
15782
15830
  },
15783
15831
  "alpha": 0.4,
15784
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
15832
+ "filePath": "src/tokens/component/overlay.json5",
15785
15833
  "isSource": true,
15786
15834
  "original": {
15787
15835
  "$value": "{base.color.neutral.3}",
@@ -15791,6 +15839,12 @@
15791
15839
  "collection": "mode",
15792
15840
  "group": "component (internal)",
15793
15841
  "scopes": ["bgColor"]
15842
+ },
15843
+ "org.primer.overrides": {
15844
+ "dark": "{base.color.neutral.3}",
15845
+ "dark-dimmed": "{base.color.neutral.4}",
15846
+ "light-high-contrast": "{base.color.neutral.11}",
15847
+ "dark-high-contrast": "{base.color.neutral.11}"
15794
15848
  }
15795
15849
  },
15796
15850
  "alpha": 0.4
@@ -15808,9 +15862,13 @@
15808
15862
  "collection": "mode",
15809
15863
  "group": "component (internal)",
15810
15864
  "scopes": ["bgColor"]
15865
+ },
15866
+ "org.primer.overrides": {
15867
+ "dark": "#151b23",
15868
+ "dark-dimmed": "#2a313c"
15811
15869
  }
15812
15870
  },
15813
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
15871
+ "filePath": "src/tokens/component/overlay.json5",
15814
15872
  "isSource": true,
15815
15873
  "original": {
15816
15874
  "$value": "{bgColor.muted}",
@@ -15820,6 +15878,10 @@
15820
15878
  "collection": "mode",
15821
15879
  "group": "component (internal)",
15822
15880
  "scopes": ["bgColor"]
15881
+ },
15882
+ "org.primer.overrides": {
15883
+ "dark": "{bgColor.muted}",
15884
+ "dark-dimmed": "{base.color.neutral.5}"
15823
15885
  }
15824
15886
  }
15825
15887
  },
@@ -15835,9 +15897,36 @@
15835
15897
  "org.primer.figma": {
15836
15898
  "collection": "mode",
15837
15899
  "group": "component (internal)"
15900
+ },
15901
+ "org.primer.overrides": {
15902
+ "dark": {
15903
+ "alpha": 1
15904
+ },
15905
+ "dark-dimmed": {
15906
+ "$value": "#3d444d",
15907
+ "alpha": 0.7,
15908
+ "filePath": "src/tokens/component/overlay.json5",
15909
+ "isSource": true,
15910
+ "$type": "color"
15911
+ },
15912
+ "light-high-contrast": {
15913
+ "alpha": 1,
15914
+ "$value": "#3d444d",
15915
+ "filePath": "src/tokens/component/overlay.json5",
15916
+ "isSource": true,
15917
+ "$type": "color"
15918
+ },
15919
+ "dark-high-contrast": {
15920
+ "$value": "#3d444d",
15921
+ "alpha": 1,
15922
+ "filePath": "src/tokens/component/overlay.json5",
15923
+ "isSource": true,
15924
+ "$type": "color"
15925
+ }
15838
15926
  }
15839
15927
  },
15840
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
15928
+ "alpha": 1,
15929
+ "filePath": "src/tokens/component/overlay.json5",
15841
15930
  "isSource": true,
15842
15931
  "original": {
15843
15932
  "$value": "{borderColor.muted}",
@@ -15846,14 +15935,41 @@
15846
15935
  "org.primer.figma": {
15847
15936
  "collection": "mode",
15848
15937
  "group": "component (internal)"
15938
+ },
15939
+ "org.primer.overrides": {
15940
+ "dark": {
15941
+ "alpha": 1
15942
+ },
15943
+ "dark-dimmed": {
15944
+ "$value": "{base.color.neutral.7}",
15945
+ "alpha": 0.7,
15946
+ "filePath": "src/tokens/component/overlay.json5",
15947
+ "isSource": true,
15948
+ "$type": "color"
15949
+ },
15950
+ "light-high-contrast": {
15951
+ "alpha": 1,
15952
+ "$value": "{borderColor.default}",
15953
+ "filePath": "src/tokens/component/overlay.json5",
15954
+ "isSource": true,
15955
+ "$type": "color"
15956
+ },
15957
+ "dark-high-contrast": {
15958
+ "$value": "{borderColor.default}",
15959
+ "alpha": 1,
15960
+ "filePath": "src/tokens/component/overlay.json5",
15961
+ "isSource": true,
15962
+ "$type": "color"
15963
+ }
15849
15964
  }
15850
- }
15965
+ },
15966
+ "alpha": 1
15851
15967
  },
15852
15968
  "name": "overlay-borderColor",
15853
15969
  "attributes": {},
15854
15970
  "path": ["overlay", "borderColor"],
15855
15971
  "key": "{overlay.borderColor}",
15856
- "value": "#3d444db3",
15972
+ "value": "#3d444d",
15857
15973
  "type": "color"
15858
15974
  },
15859
15975
  "page-header-bgColor": {
@@ -16584,10 +16700,29 @@
16584
16700
  "collection": "mode",
16585
16701
  "group": "component",
16586
16702
  "scopes": ["bgColor"]
16703
+ },
16704
+ "org.primer.overrides": {
16705
+ "dark": {
16706
+ "alpha": 0.2
16707
+ },
16708
+ "light-high-contrast": {
16709
+ "$value": "#2a313c",
16710
+ "alpha": 1,
16711
+ "filePath": "src/tokens/component/skeletonLoader.json5",
16712
+ "isSource": true,
16713
+ "$type": "color"
16714
+ },
16715
+ "dark-high-contrast": {
16716
+ "$value": "#2a313c",
16717
+ "alpha": 1,
16718
+ "filePath": "src/tokens/component/skeletonLoader.json5",
16719
+ "isSource": true,
16720
+ "$type": "color"
16721
+ }
16587
16722
  }
16588
16723
  },
16589
16724
  "alpha": 0.2,
16590
- "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
16725
+ "filePath": "src/tokens/component/skeletonLoader.json5",
16591
16726
  "isSource": true,
16592
16727
  "original": {
16593
16728
  "$value": "{base.color.neutral.8}",
@@ -16597,6 +16732,25 @@
16597
16732
  "collection": "mode",
16598
16733
  "group": "component",
16599
16734
  "scopes": ["bgColor"]
16735
+ },
16736
+ "org.primer.overrides": {
16737
+ "dark": {
16738
+ "alpha": 0.2
16739
+ },
16740
+ "light-high-contrast": {
16741
+ "$value": "{base.color.neutral.5}",
16742
+ "alpha": 1,
16743
+ "filePath": "src/tokens/component/skeletonLoader.json5",
16744
+ "isSource": true,
16745
+ "$type": "color"
16746
+ },
16747
+ "dark-high-contrast": {
16748
+ "$value": "{base.color.neutral.5}",
16749
+ "alpha": 1,
16750
+ "filePath": "src/tokens/component/skeletonLoader.json5",
16751
+ "isSource": true,
16752
+ "$type": "color"
16753
+ }
16600
16754
  }
16601
16755
  },
16602
16756
  "alpha": 0.2