@primer/primitives 6.0.0-rc.4a64f38 → 6.1.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 (34) hide show
  1. package/CHANGELOG.md +9 -1
  2. package/dist/js/colors/dark.d.ts +13 -0
  3. package/dist/js/colors/dark.js +13 -0
  4. package/dist/js/colors/dark_colorblind.d.ts +13 -0
  5. package/dist/js/colors/dark_colorblind.js +13 -0
  6. package/dist/js/colors/dark_dimmed.d.ts +13 -0
  7. package/dist/js/colors/dark_dimmed.js +13 -0
  8. package/dist/js/colors/dark_high_contrast.d.ts +13 -0
  9. package/dist/js/colors/dark_high_contrast.js +13 -0
  10. package/dist/js/colors/index.d.ts +78 -0
  11. package/dist/js/colors/light.d.ts +13 -0
  12. package/dist/js/colors/light.js +13 -0
  13. package/dist/js/colors/light_colorblind.d.ts +13 -0
  14. package/dist/js/colors/light_colorblind.js +13 -0
  15. package/dist/js/index.d.ts +78 -0
  16. package/dist/json/colors/dark.json +13 -0
  17. package/dist/json/colors/dark_colorblind.json +13 -0
  18. package/dist/json/colors/dark_dimmed.json +13 -0
  19. package/dist/json/colors/dark_high_contrast.json +13 -0
  20. package/dist/json/colors/light.json +13 -0
  21. package/dist/json/colors/light_colorblind.json +13 -0
  22. package/dist/scss/colors/_dark.scss +7 -0
  23. package/dist/scss/colors/_dark_colorblind.scss +7 -0
  24. package/dist/scss/colors/_dark_dimmed.scss +7 -0
  25. package/dist/scss/colors/_dark_high_contrast.scss +7 -0
  26. package/dist/scss/colors/_light.scss +7 -0
  27. package/dist/scss/colors/_light_colorblind.scss +7 -0
  28. package/dist/ts/colors/dark.ts +13 -0
  29. package/dist/ts/colors/dark_colorblind.ts +13 -0
  30. package/dist/ts/colors/dark_dimmed.ts +13 -0
  31. package/dist/ts/colors/dark_high_contrast.ts +13 -0
  32. package/dist/ts/colors/light.ts +13 -0
  33. package/dist/ts/colors/light_colorblind.ts +13 -0
  34. package/package.json +2 -4
package/CHANGELOG.md CHANGED
@@ -1,10 +1,18 @@
1
1
  # @primer/primitives
2
2
 
3
+ ## 6.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#256](https://github.com/primer/primitives/pull/256) [`893d873`](https://github.com/primer/primitives/commit/893d873c57240df02a23a82c178d9a3a0ca6a983) Thanks [@auareyou](https://github.com/auareyou)! - Add `actionListItem` variables
8
+
3
9
  ## 6.0.0
4
10
 
5
11
  ### Major Changes
6
12
 
7
- - [#254](https://github.com/primer/primitives/pull/254) [`71bd715`](https://github.com/primer/primitives/commit/71bd715b7bf7ebf65c6c75e123e9a59e379661f5) Thanks [@jonrohan](https://github.com/jonrohan)! - Rename color blind themes
13
+ - [#260](https://github.com/primer/primitives/pull/260) [`a11b8a7`](https://github.com/primer/primitives/commit/a11b8a7aaeb86b838501ded7a2c8a2eff0e68aba) Thanks [@jonrohan](https://github.com/jonrohan)! - Rename color blind themes
14
+
15
+ ## 5.1.0
8
16
 
9
17
  ### Minor Changes
10
18
 
@@ -379,6 +379,19 @@ declare const _default: {
379
379
  icon: string;
380
380
  borderHover: string;
381
381
  };
382
+ actionListItem: {
383
+ inlineDivider: string;
384
+ default: {
385
+ hoverBg: string;
386
+ activeBg: string;
387
+ selectedBg: string;
388
+ };
389
+ danger: {
390
+ hoverBg: string;
391
+ activeBg: string;
392
+ hoverText: string;
393
+ };
394
+ };
382
395
  fg: {
383
396
  default: string;
384
397
  muted: string;
@@ -381,6 +381,19 @@ exports.default = {
381
381
  "icon": "#484f58",
382
382
  "borderHover": "rgba(110,118,129,0.4)"
383
383
  },
384
+ "actionListItem": {
385
+ "inlineDivider": "rgba(48,54,61,0.48)",
386
+ "default": {
387
+ "hoverBg": "rgba(177,186,196,0.12)",
388
+ "activeBg": "rgba(177,186,196,0.2)",
389
+ "selectedBg": "rgba(177,186,196,0.08)"
390
+ },
391
+ "danger": {
392
+ "hoverBg": "rgba(248,81,73,0.16)",
393
+ "activeBg": "rgba(248,81,73,0.24)",
394
+ "hoverText": "#ff7b72"
395
+ }
396
+ },
384
397
  "fg": {
385
398
  "default": "#c9d1d9",
386
399
  "muted": "#8b949e",
@@ -379,6 +379,19 @@ declare const _default: {
379
379
  icon: string;
380
380
  borderHover: string;
381
381
  };
382
+ actionListItem: {
383
+ inlineDivider: string;
384
+ default: {
385
+ hoverBg: string;
386
+ activeBg: string;
387
+ selectedBg: string;
388
+ };
389
+ danger: {
390
+ hoverBg: string;
391
+ activeBg: string;
392
+ hoverText: string;
393
+ };
394
+ };
382
395
  fg: {
383
396
  default: string;
384
397
  muted: string;
@@ -381,6 +381,19 @@ exports.default = {
381
381
  "icon": "#484f58",
382
382
  "borderHover": "rgba(110,118,129,0.4)"
383
383
  },
384
+ "actionListItem": {
385
+ "inlineDivider": "rgba(48,54,61,0.48)",
386
+ "default": {
387
+ "hoverBg": "rgba(177,186,196,0.12)",
388
+ "activeBg": "rgba(177,186,196,0.2)",
389
+ "selectedBg": "rgba(177,186,196,0.08)"
390
+ },
391
+ "danger": {
392
+ "hoverBg": "rgba(195,128,0,0.16)",
393
+ "activeBg": "rgba(195,128,0,0.24)",
394
+ "hoverText": "#d69a00"
395
+ }
396
+ },
384
397
  "fg": {
385
398
  "default": "#c9d1d9",
386
399
  "muted": "#8b949e",
@@ -379,6 +379,19 @@ declare const _default: {
379
379
  icon: string;
380
380
  borderHover: string;
381
381
  };
382
+ actionListItem: {
383
+ inlineDivider: string;
384
+ default: {
385
+ hoverBg: string;
386
+ activeBg: string;
387
+ selectedBg: string;
388
+ };
389
+ danger: {
390
+ hoverBg: string;
391
+ activeBg: string;
392
+ hoverText: string;
393
+ };
394
+ };
382
395
  fg: {
383
396
  default: string;
384
397
  muted: string;
@@ -381,6 +381,19 @@ exports.default = {
381
381
  "icon": "#545d68",
382
382
  "borderHover": "rgba(99,110,123,0.4)"
383
383
  },
384
+ "actionListItem": {
385
+ "inlineDivider": "rgba(68,76,86,0.48)",
386
+ "default": {
387
+ "hoverBg": "rgba(144,157,171,0.12)",
388
+ "activeBg": "rgba(144,157,171,0.2)",
389
+ "selectedBg": "rgba(144,157,171,0.08)"
390
+ },
391
+ "danger": {
392
+ "hoverBg": "rgba(229,83,75,0.16)",
393
+ "activeBg": "rgba(229,83,75,0.24)",
394
+ "hoverText": "#f47067"
395
+ }
396
+ },
384
397
  "fg": {
385
398
  "default": "#adbac7",
386
399
  "muted": "#768390",
@@ -379,6 +379,19 @@ declare const _default: {
379
379
  icon: string;
380
380
  borderHover: string;
381
381
  };
382
+ actionListItem: {
383
+ inlineDivider: string;
384
+ default: {
385
+ hoverBg: string;
386
+ activeBg: string;
387
+ selectedBg: string;
388
+ };
389
+ danger: {
390
+ hoverBg: string;
391
+ activeBg: string;
392
+ hoverText: string;
393
+ };
394
+ };
382
395
  fg: {
383
396
  default: string;
384
397
  muted: string;
@@ -381,6 +381,19 @@ exports.default = {
381
381
  "icon": "#f0f3f6",
382
382
  "borderHover": "#bdc4cc"
383
383
  },
384
+ "actionListItem": {
385
+ "inlineDivider": "#7a828e",
386
+ "default": {
387
+ "hoverBg": "rgba(217,222,227,0.12)",
388
+ "activeBg": "rgba(217,222,227,0.24)",
389
+ "selectedBg": "rgba(217,222,227,0.08)"
390
+ },
391
+ "danger": {
392
+ "hoverBg": "#ff6a69",
393
+ "activeBg": "#ff4445",
394
+ "hoverText": "#0a0c10"
395
+ }
396
+ },
384
397
  "fg": {
385
398
  "default": "#f0f3f6",
386
399
  "muted": "#f0f3f6",
@@ -380,6 +380,19 @@ declare const _default: {
380
380
  icon: string;
381
381
  borderHover: string;
382
382
  };
383
+ actionListItem: {
384
+ inlineDivider: string;
385
+ default: {
386
+ hoverBg: string;
387
+ activeBg: string;
388
+ selectedBg: string;
389
+ };
390
+ danger: {
391
+ hoverBg: string;
392
+ activeBg: string;
393
+ hoverText: string;
394
+ };
395
+ };
383
396
  fg: {
384
397
  default: string;
385
398
  muted: string;
@@ -864,6 +877,19 @@ declare const _default: {
864
877
  icon: string;
865
878
  borderHover: string;
866
879
  };
880
+ actionListItem: {
881
+ inlineDivider: string;
882
+ default: {
883
+ hoverBg: string;
884
+ activeBg: string;
885
+ selectedBg: string;
886
+ };
887
+ danger: {
888
+ hoverBg: string;
889
+ activeBg: string;
890
+ hoverText: string;
891
+ };
892
+ };
867
893
  fg: {
868
894
  default: string;
869
895
  muted: string;
@@ -1348,6 +1374,19 @@ declare const _default: {
1348
1374
  icon: string;
1349
1375
  borderHover: string;
1350
1376
  };
1377
+ actionListItem: {
1378
+ inlineDivider: string;
1379
+ default: {
1380
+ hoverBg: string;
1381
+ activeBg: string;
1382
+ selectedBg: string;
1383
+ };
1384
+ danger: {
1385
+ hoverBg: string;
1386
+ activeBg: string;
1387
+ hoverText: string;
1388
+ };
1389
+ };
1351
1390
  fg: {
1352
1391
  default: string;
1353
1392
  muted: string;
@@ -1832,6 +1871,19 @@ declare const _default: {
1832
1871
  icon: string;
1833
1872
  borderHover: string;
1834
1873
  };
1874
+ actionListItem: {
1875
+ inlineDivider: string;
1876
+ default: {
1877
+ hoverBg: string;
1878
+ activeBg: string;
1879
+ selectedBg: string;
1880
+ };
1881
+ danger: {
1882
+ hoverBg: string;
1883
+ activeBg: string;
1884
+ hoverText: string;
1885
+ };
1886
+ };
1835
1887
  fg: {
1836
1888
  default: string;
1837
1889
  muted: string;
@@ -2316,6 +2368,19 @@ declare const _default: {
2316
2368
  icon: string;
2317
2369
  borderHover: string;
2318
2370
  };
2371
+ actionListItem: {
2372
+ inlineDivider: string;
2373
+ default: {
2374
+ hoverBg: string;
2375
+ activeBg: string;
2376
+ selectedBg: string;
2377
+ };
2378
+ danger: {
2379
+ hoverBg: string;
2380
+ activeBg: string;
2381
+ hoverText: string;
2382
+ };
2383
+ };
2319
2384
  fg: {
2320
2385
  default: string;
2321
2386
  muted: string;
@@ -2800,6 +2865,19 @@ declare const _default: {
2800
2865
  icon: string;
2801
2866
  borderHover: string;
2802
2867
  };
2868
+ actionListItem: {
2869
+ inlineDivider: string;
2870
+ default: {
2871
+ hoverBg: string;
2872
+ activeBg: string;
2873
+ selectedBg: string;
2874
+ };
2875
+ danger: {
2876
+ hoverBg: string;
2877
+ activeBg: string;
2878
+ hoverText: string;
2879
+ };
2880
+ };
2803
2881
  fg: {
2804
2882
  default: string;
2805
2883
  muted: string;
@@ -379,6 +379,19 @@ declare const _default: {
379
379
  icon: string;
380
380
  borderHover: string;
381
381
  };
382
+ actionListItem: {
383
+ inlineDivider: string;
384
+ default: {
385
+ hoverBg: string;
386
+ activeBg: string;
387
+ selectedBg: string;
388
+ };
389
+ danger: {
390
+ hoverBg: string;
391
+ activeBg: string;
392
+ hoverText: string;
393
+ };
394
+ };
382
395
  fg: {
383
396
  default: string;
384
397
  muted: string;
@@ -381,6 +381,19 @@ exports.default = {
381
381
  "icon": "#6e7781",
382
382
  "borderHover": "rgba(175,184,193,0.2)"
383
383
  },
384
+ "actionListItem": {
385
+ "inlineDivider": "rgba(208,215,222,0.48)",
386
+ "default": {
387
+ "hoverBg": "rgba(208,215,222,0.32)",
388
+ "activeBg": "rgba(208,215,222,0.48)",
389
+ "selectedBg": "rgba(208,215,222,0.24)"
390
+ },
391
+ "danger": {
392
+ "hoverBg": "rgba(255,235,233,0.64)",
393
+ "activeBg": "#FFEBE9",
394
+ "hoverText": "#cf222e"
395
+ }
396
+ },
384
397
  "fg": {
385
398
  "default": "#24292f",
386
399
  "muted": "#57606a",
@@ -379,6 +379,19 @@ declare const _default: {
379
379
  icon: string;
380
380
  borderHover: string;
381
381
  };
382
+ actionListItem: {
383
+ inlineDivider: string;
384
+ default: {
385
+ hoverBg: string;
386
+ activeBg: string;
387
+ selectedBg: string;
388
+ };
389
+ danger: {
390
+ hoverBg: string;
391
+ activeBg: string;
392
+ hoverText: string;
393
+ };
394
+ };
382
395
  fg: {
383
396
  default: string;
384
397
  muted: string;
@@ -381,6 +381,19 @@ exports.default = {
381
381
  "icon": "#6e7781",
382
382
  "borderHover": "rgba(175,184,193,0.2)"
383
383
  },
384
+ "actionListItem": {
385
+ "inlineDivider": "rgba(208,215,222,0.48)",
386
+ "default": {
387
+ "hoverBg": "rgba(208,215,222,0.32)",
388
+ "activeBg": "rgba(208,215,222,0.48)",
389
+ "selectedBg": "rgba(208,215,222,0.24)"
390
+ },
391
+ "danger": {
392
+ "hoverBg": "rgba(254,254,72,0.64)",
393
+ "activeBg": "#fefe48",
394
+ "hoverText": "#ac5e00"
395
+ }
396
+ },
384
397
  "fg": {
385
398
  "default": "#24292f",
386
399
  "muted": "#57606a",
@@ -381,6 +381,19 @@ declare const _default: {
381
381
  icon: string;
382
382
  borderHover: string;
383
383
  };
384
+ actionListItem: {
385
+ inlineDivider: string;
386
+ default: {
387
+ hoverBg: string;
388
+ activeBg: string;
389
+ selectedBg: string;
390
+ };
391
+ danger: {
392
+ hoverBg: string;
393
+ activeBg: string;
394
+ hoverText: string;
395
+ };
396
+ };
384
397
  fg: {
385
398
  default: string;
386
399
  muted: string;
@@ -865,6 +878,19 @@ declare const _default: {
865
878
  icon: string;
866
879
  borderHover: string;
867
880
  };
881
+ actionListItem: {
882
+ inlineDivider: string;
883
+ default: {
884
+ hoverBg: string;
885
+ activeBg: string;
886
+ selectedBg: string;
887
+ };
888
+ danger: {
889
+ hoverBg: string;
890
+ activeBg: string;
891
+ hoverText: string;
892
+ };
893
+ };
868
894
  fg: {
869
895
  default: string;
870
896
  muted: string;
@@ -1349,6 +1375,19 @@ declare const _default: {
1349
1375
  icon: string;
1350
1376
  borderHover: string;
1351
1377
  };
1378
+ actionListItem: {
1379
+ inlineDivider: string;
1380
+ default: {
1381
+ hoverBg: string;
1382
+ activeBg: string;
1383
+ selectedBg: string;
1384
+ };
1385
+ danger: {
1386
+ hoverBg: string;
1387
+ activeBg: string;
1388
+ hoverText: string;
1389
+ };
1390
+ };
1352
1391
  fg: {
1353
1392
  default: string;
1354
1393
  muted: string;
@@ -1833,6 +1872,19 @@ declare const _default: {
1833
1872
  icon: string;
1834
1873
  borderHover: string;
1835
1874
  };
1875
+ actionListItem: {
1876
+ inlineDivider: string;
1877
+ default: {
1878
+ hoverBg: string;
1879
+ activeBg: string;
1880
+ selectedBg: string;
1881
+ };
1882
+ danger: {
1883
+ hoverBg: string;
1884
+ activeBg: string;
1885
+ hoverText: string;
1886
+ };
1887
+ };
1836
1888
  fg: {
1837
1889
  default: string;
1838
1890
  muted: string;
@@ -2317,6 +2369,19 @@ declare const _default: {
2317
2369
  icon: string;
2318
2370
  borderHover: string;
2319
2371
  };
2372
+ actionListItem: {
2373
+ inlineDivider: string;
2374
+ default: {
2375
+ hoverBg: string;
2376
+ activeBg: string;
2377
+ selectedBg: string;
2378
+ };
2379
+ danger: {
2380
+ hoverBg: string;
2381
+ activeBg: string;
2382
+ hoverText: string;
2383
+ };
2384
+ };
2320
2385
  fg: {
2321
2386
  default: string;
2322
2387
  muted: string;
@@ -2801,6 +2866,19 @@ declare const _default: {
2801
2866
  icon: string;
2802
2867
  borderHover: string;
2803
2868
  };
2869
+ actionListItem: {
2870
+ inlineDivider: string;
2871
+ default: {
2872
+ hoverBg: string;
2873
+ activeBg: string;
2874
+ selectedBg: string;
2875
+ };
2876
+ danger: {
2877
+ hoverBg: string;
2878
+ activeBg: string;
2879
+ hoverText: string;
2880
+ };
2881
+ };
2804
2882
  fg: {
2805
2883
  default: string;
2806
2884
  muted: string;
@@ -379,6 +379,19 @@
379
379
  "icon": "#484f58",
380
380
  "borderHover": "rgba(110,118,129,0.4)"
381
381
  },
382
+ "actionListItem": {
383
+ "inlineDivider": "rgba(48,54,61,0.48)",
384
+ "default": {
385
+ "hoverBg": "rgba(177,186,196,0.12)",
386
+ "activeBg": "rgba(177,186,196,0.2)",
387
+ "selectedBg": "rgba(177,186,196,0.08)"
388
+ },
389
+ "danger": {
390
+ "hoverBg": "rgba(248,81,73,0.16)",
391
+ "activeBg": "rgba(248,81,73,0.24)",
392
+ "hoverText": "#ff7b72"
393
+ }
394
+ },
382
395
  "fg": {
383
396
  "default": "#c9d1d9",
384
397
  "muted": "#8b949e",
@@ -379,6 +379,19 @@
379
379
  "icon": "#484f58",
380
380
  "borderHover": "rgba(110,118,129,0.4)"
381
381
  },
382
+ "actionListItem": {
383
+ "inlineDivider": "rgba(48,54,61,0.48)",
384
+ "default": {
385
+ "hoverBg": "rgba(177,186,196,0.12)",
386
+ "activeBg": "rgba(177,186,196,0.2)",
387
+ "selectedBg": "rgba(177,186,196,0.08)"
388
+ },
389
+ "danger": {
390
+ "hoverBg": "rgba(195,128,0,0.16)",
391
+ "activeBg": "rgba(195,128,0,0.24)",
392
+ "hoverText": "#d69a00"
393
+ }
394
+ },
382
395
  "fg": {
383
396
  "default": "#c9d1d9",
384
397
  "muted": "#8b949e",
@@ -379,6 +379,19 @@
379
379
  "icon": "#545d68",
380
380
  "borderHover": "rgba(99,110,123,0.4)"
381
381
  },
382
+ "actionListItem": {
383
+ "inlineDivider": "rgba(68,76,86,0.48)",
384
+ "default": {
385
+ "hoverBg": "rgba(144,157,171,0.12)",
386
+ "activeBg": "rgba(144,157,171,0.2)",
387
+ "selectedBg": "rgba(144,157,171,0.08)"
388
+ },
389
+ "danger": {
390
+ "hoverBg": "rgba(229,83,75,0.16)",
391
+ "activeBg": "rgba(229,83,75,0.24)",
392
+ "hoverText": "#f47067"
393
+ }
394
+ },
382
395
  "fg": {
383
396
  "default": "#adbac7",
384
397
  "muted": "#768390",
@@ -379,6 +379,19 @@
379
379
  "icon": "#f0f3f6",
380
380
  "borderHover": "#bdc4cc"
381
381
  },
382
+ "actionListItem": {
383
+ "inlineDivider": "#7a828e",
384
+ "default": {
385
+ "hoverBg": "rgba(217,222,227,0.12)",
386
+ "activeBg": "rgba(217,222,227,0.24)",
387
+ "selectedBg": "rgba(217,222,227,0.08)"
388
+ },
389
+ "danger": {
390
+ "hoverBg": "#ff6a69",
391
+ "activeBg": "#ff4445",
392
+ "hoverText": "#0a0c10"
393
+ }
394
+ },
382
395
  "fg": {
383
396
  "default": "#f0f3f6",
384
397
  "muted": "#f0f3f6",
@@ -379,6 +379,19 @@
379
379
  "icon": "#6e7781",
380
380
  "borderHover": "rgba(175,184,193,0.2)"
381
381
  },
382
+ "actionListItem": {
383
+ "inlineDivider": "rgba(208,215,222,0.48)",
384
+ "default": {
385
+ "hoverBg": "rgba(208,215,222,0.32)",
386
+ "activeBg": "rgba(208,215,222,0.48)",
387
+ "selectedBg": "rgba(208,215,222,0.24)"
388
+ },
389
+ "danger": {
390
+ "hoverBg": "rgba(255,235,233,0.64)",
391
+ "activeBg": "#FFEBE9",
392
+ "hoverText": "#cf222e"
393
+ }
394
+ },
382
395
  "fg": {
383
396
  "default": "#24292f",
384
397
  "muted": "#57606a",
@@ -379,6 +379,19 @@
379
379
  "icon": "#6e7781",
380
380
  "borderHover": "rgba(175,184,193,0.2)"
381
381
  },
382
+ "actionListItem": {
383
+ "inlineDivider": "rgba(208,215,222,0.48)",
384
+ "default": {
385
+ "hoverBg": "rgba(208,215,222,0.32)",
386
+ "activeBg": "rgba(208,215,222,0.48)",
387
+ "selectedBg": "rgba(208,215,222,0.24)"
388
+ },
389
+ "danger": {
390
+ "hoverBg": "rgba(254,254,72,0.64)",
391
+ "activeBg": "#fefe48",
392
+ "hoverText": "#ac5e00"
393
+ }
394
+ },
382
395
  "fg": {
383
396
  "default": "#24292f",
384
397
  "muted": "#57606a",
@@ -284,6 +284,13 @@
284
284
  --color-btn-danger-icon: #f85149;
285
285
  --color-underlinenav-icon: #484f58;
286
286
  --color-underlinenav-border-hover: rgba(110,118,129,0.4);
287
+ --color-action-list-item-inline-divider: rgba(48,54,61,0.48);
288
+ --color-action-list-item-default-hover-bg: rgba(177,186,196,0.12);
289
+ --color-action-list-item-default-active-bg: rgba(177,186,196,0.2);
290
+ --color-action-list-item-default-selected-bg: rgba(177,186,196,0.08);
291
+ --color-action-list-item-danger-hover-bg: rgba(248,81,73,0.16);
292
+ --color-action-list-item-danger-active-bg: rgba(248,81,73,0.24);
293
+ --color-action-list-item-danger-hover-text: #ff7b72;
287
294
  --color-fg-default: #c9d1d9;
288
295
  --color-fg-muted: #8b949e;
289
296
  --color-fg-subtle: #484f58;
@@ -284,6 +284,13 @@
284
284
  --color-btn-danger-icon: #c38000;
285
285
  --color-underlinenav-icon: #484f58;
286
286
  --color-underlinenav-border-hover: rgba(110,118,129,0.4);
287
+ --color-action-list-item-inline-divider: rgba(48,54,61,0.48);
288
+ --color-action-list-item-default-hover-bg: rgba(177,186,196,0.12);
289
+ --color-action-list-item-default-active-bg: rgba(177,186,196,0.2);
290
+ --color-action-list-item-default-selected-bg: rgba(177,186,196,0.08);
291
+ --color-action-list-item-danger-hover-bg: rgba(195,128,0,0.16);
292
+ --color-action-list-item-danger-active-bg: rgba(195,128,0,0.24);
293
+ --color-action-list-item-danger-hover-text: #d69a00;
287
294
  --color-fg-default: #c9d1d9;
288
295
  --color-fg-muted: #8b949e;
289
296
  --color-fg-subtle: #484f58;
@@ -284,6 +284,13 @@
284
284
  --color-btn-danger-icon: #e5534b;
285
285
  --color-underlinenav-icon: #545d68;
286
286
  --color-underlinenav-border-hover: rgba(99,110,123,0.4);
287
+ --color-action-list-item-inline-divider: rgba(68,76,86,0.48);
288
+ --color-action-list-item-default-hover-bg: rgba(144,157,171,0.12);
289
+ --color-action-list-item-default-active-bg: rgba(144,157,171,0.2);
290
+ --color-action-list-item-default-selected-bg: rgba(144,157,171,0.08);
291
+ --color-action-list-item-danger-hover-bg: rgba(229,83,75,0.16);
292
+ --color-action-list-item-danger-active-bg: rgba(229,83,75,0.24);
293
+ --color-action-list-item-danger-hover-text: #f47067;
287
294
  --color-fg-default: #adbac7;
288
295
  --color-fg-muted: #768390;
289
296
  --color-fg-subtle: #545d68;
@@ -284,6 +284,13 @@
284
284
  --color-btn-danger-icon: #ff6a69;
285
285
  --color-underlinenav-icon: #f0f3f6;
286
286
  --color-underlinenav-border-hover: #bdc4cc;
287
+ --color-action-list-item-inline-divider: #7a828e;
288
+ --color-action-list-item-default-hover-bg: rgba(217,222,227,0.12);
289
+ --color-action-list-item-default-active-bg: rgba(217,222,227,0.24);
290
+ --color-action-list-item-default-selected-bg: rgba(217,222,227,0.08);
291
+ --color-action-list-item-danger-hover-bg: #ff6a69;
292
+ --color-action-list-item-danger-active-bg: #ff4445;
293
+ --color-action-list-item-danger-hover-text: #0a0c10;
287
294
  --color-fg-default: #f0f3f6;
288
295
  --color-fg-muted: #f0f3f6;
289
296
  --color-fg-subtle: #7a828e;
@@ -284,6 +284,13 @@
284
284
  --color-btn-danger-hover-icon: #ffffff;
285
285
  --color-underlinenav-icon: #6e7781;
286
286
  --color-underlinenav-border-hover: rgba(175,184,193,0.2);
287
+ --color-action-list-item-inline-divider: rgba(208,215,222,0.48);
288
+ --color-action-list-item-default-hover-bg: rgba(208,215,222,0.32);
289
+ --color-action-list-item-default-active-bg: rgba(208,215,222,0.48);
290
+ --color-action-list-item-default-selected-bg: rgba(208,215,222,0.24);
291
+ --color-action-list-item-danger-hover-bg: rgba(255,235,233,0.64);
292
+ --color-action-list-item-danger-active-bg: #FFEBE9;
293
+ --color-action-list-item-danger-hover-text: #cf222e;
287
294
  --color-fg-default: #24292f;
288
295
  --color-fg-muted: #57606a;
289
296
  --color-fg-subtle: #6e7781;
@@ -284,6 +284,13 @@
284
284
  --color-btn-danger-hover-icon: #ffffff;
285
285
  --color-underlinenav-icon: #6e7781;
286
286
  --color-underlinenav-border-hover: rgba(175,184,193,0.2);
287
+ --color-action-list-item-inline-divider: rgba(208,215,222,0.48);
288
+ --color-action-list-item-default-hover-bg: rgba(208,215,222,0.32);
289
+ --color-action-list-item-default-active-bg: rgba(208,215,222,0.48);
290
+ --color-action-list-item-default-selected-bg: rgba(208,215,222,0.24);
291
+ --color-action-list-item-danger-hover-bg: rgba(254,254,72,0.64);
292
+ --color-action-list-item-danger-active-bg: #fefe48;
293
+ --color-action-list-item-danger-hover-text: #ac5e00;
287
294
  --color-fg-default: #24292f;
288
295
  --color-fg-muted: #57606a;
289
296
  --color-fg-subtle: #6e7781;
@@ -379,6 +379,19 @@ export default {
379
379
  "icon": "#484f58",
380
380
  "borderHover": "rgba(110,118,129,0.4)"
381
381
  },
382
+ "actionListItem": {
383
+ "inlineDivider": "rgba(48,54,61,0.48)",
384
+ "default": {
385
+ "hoverBg": "rgba(177,186,196,0.12)",
386
+ "activeBg": "rgba(177,186,196,0.2)",
387
+ "selectedBg": "rgba(177,186,196,0.08)"
388
+ },
389
+ "danger": {
390
+ "hoverBg": "rgba(248,81,73,0.16)",
391
+ "activeBg": "rgba(248,81,73,0.24)",
392
+ "hoverText": "#ff7b72"
393
+ }
394
+ },
382
395
  "fg": {
383
396
  "default": "#c9d1d9",
384
397
  "muted": "#8b949e",
@@ -379,6 +379,19 @@ export default {
379
379
  "icon": "#484f58",
380
380
  "borderHover": "rgba(110,118,129,0.4)"
381
381
  },
382
+ "actionListItem": {
383
+ "inlineDivider": "rgba(48,54,61,0.48)",
384
+ "default": {
385
+ "hoverBg": "rgba(177,186,196,0.12)",
386
+ "activeBg": "rgba(177,186,196,0.2)",
387
+ "selectedBg": "rgba(177,186,196,0.08)"
388
+ },
389
+ "danger": {
390
+ "hoverBg": "rgba(195,128,0,0.16)",
391
+ "activeBg": "rgba(195,128,0,0.24)",
392
+ "hoverText": "#d69a00"
393
+ }
394
+ },
382
395
  "fg": {
383
396
  "default": "#c9d1d9",
384
397
  "muted": "#8b949e",
@@ -379,6 +379,19 @@ export default {
379
379
  "icon": "#545d68",
380
380
  "borderHover": "rgba(99,110,123,0.4)"
381
381
  },
382
+ "actionListItem": {
383
+ "inlineDivider": "rgba(68,76,86,0.48)",
384
+ "default": {
385
+ "hoverBg": "rgba(144,157,171,0.12)",
386
+ "activeBg": "rgba(144,157,171,0.2)",
387
+ "selectedBg": "rgba(144,157,171,0.08)"
388
+ },
389
+ "danger": {
390
+ "hoverBg": "rgba(229,83,75,0.16)",
391
+ "activeBg": "rgba(229,83,75,0.24)",
392
+ "hoverText": "#f47067"
393
+ }
394
+ },
382
395
  "fg": {
383
396
  "default": "#adbac7",
384
397
  "muted": "#768390",
@@ -379,6 +379,19 @@ export default {
379
379
  "icon": "#f0f3f6",
380
380
  "borderHover": "#bdc4cc"
381
381
  },
382
+ "actionListItem": {
383
+ "inlineDivider": "#7a828e",
384
+ "default": {
385
+ "hoverBg": "rgba(217,222,227,0.12)",
386
+ "activeBg": "rgba(217,222,227,0.24)",
387
+ "selectedBg": "rgba(217,222,227,0.08)"
388
+ },
389
+ "danger": {
390
+ "hoverBg": "#ff6a69",
391
+ "activeBg": "#ff4445",
392
+ "hoverText": "#0a0c10"
393
+ }
394
+ },
382
395
  "fg": {
383
396
  "default": "#f0f3f6",
384
397
  "muted": "#f0f3f6",
@@ -379,6 +379,19 @@ export default {
379
379
  "icon": "#6e7781",
380
380
  "borderHover": "rgba(175,184,193,0.2)"
381
381
  },
382
+ "actionListItem": {
383
+ "inlineDivider": "rgba(208,215,222,0.48)",
384
+ "default": {
385
+ "hoverBg": "rgba(208,215,222,0.32)",
386
+ "activeBg": "rgba(208,215,222,0.48)",
387
+ "selectedBg": "rgba(208,215,222,0.24)"
388
+ },
389
+ "danger": {
390
+ "hoverBg": "rgba(255,235,233,0.64)",
391
+ "activeBg": "#FFEBE9",
392
+ "hoverText": "#cf222e"
393
+ }
394
+ },
382
395
  "fg": {
383
396
  "default": "#24292f",
384
397
  "muted": "#57606a",
@@ -379,6 +379,19 @@ export default {
379
379
  "icon": "#6e7781",
380
380
  "borderHover": "rgba(175,184,193,0.2)"
381
381
  },
382
+ "actionListItem": {
383
+ "inlineDivider": "rgba(208,215,222,0.48)",
384
+ "default": {
385
+ "hoverBg": "rgba(208,215,222,0.32)",
386
+ "activeBg": "rgba(208,215,222,0.48)",
387
+ "selectedBg": "rgba(208,215,222,0.24)"
388
+ },
389
+ "danger": {
390
+ "hoverBg": "rgba(254,254,72,0.64)",
391
+ "activeBg": "#fefe48",
392
+ "hoverText": "#ac5e00"
393
+ }
394
+ },
382
395
  "fg": {
383
396
  "default": "#24292f",
384
397
  "muted": "#57606a",
package/package.json CHANGED
@@ -1,10 +1,8 @@
1
1
  {
2
2
  "name": "@primer/primitives",
3
- "version": "6.0.0-rc.4a64f38",
3
+ "version": "6.1.0",
4
4
  "description": "Typography, spacing, and color primitives for Primer design system",
5
- "files": [
6
- "dist"
7
- ],
5
+ "files": ["dist"],
8
6
  "main": "dist/js/index.js",
9
7
  "types": "dist/js/index.d.ts",
10
8
  "repository": "https://github.com/primer/primitives",