@primer/primitives 10.8.0-rc.f296f65b → 11.0.0-rc.56d48488

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 (95) hide show
  1. package/dist/build/platforms/css.js +2 -1
  2. package/dist/build/schemas/collections.d.ts +1 -1
  3. package/dist/build/schemas/colorToken.d.ts +260 -0
  4. package/dist/build/schemas/colorToken.js +10 -0
  5. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +1658 -0
  6. package/dist/css/functional/themes/dark-colorblind.css +30 -30
  7. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +1658 -0
  8. package/dist/css/functional/themes/dark-dimmed.css +60 -60
  9. package/dist/css/functional/themes/dark-high-contrast.css +24 -24
  10. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +1658 -0
  11. package/dist/css/functional/themes/dark-tritanopia.css +30 -30
  12. package/dist/css/functional/themes/dark.css +30 -30
  13. package/dist/css/functional/themes/light-colorblind-high-contrast.css +1658 -0
  14. package/dist/css/functional/themes/light-colorblind.css +30 -30
  15. package/dist/css/functional/themes/light-high-contrast.css +32 -32
  16. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +1658 -0
  17. package/dist/css/functional/themes/light-tritanopia.css +28 -28
  18. package/dist/css/functional/themes/light.css +28 -28
  19. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +43194 -0
  20. package/dist/docs/functional/themes/dark-colorblind.json +7878 -648
  21. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +43188 -0
  22. package/dist/docs/functional/themes/dark-dimmed.json +7797 -565
  23. package/dist/docs/functional/themes/dark-high-contrast.json +7751 -523
  24. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +43192 -0
  25. package/dist/docs/functional/themes/dark-tritanopia.json +7878 -648
  26. package/dist/docs/functional/themes/dark.json +7878 -648
  27. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +43154 -0
  28. package/dist/docs/functional/themes/light-colorblind.json +7744 -512
  29. package/dist/docs/functional/themes/light-high-contrast.json +7760 -532
  30. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +43154 -0
  31. package/dist/docs/functional/themes/light-tritanopia.json +7742 -510
  32. package/dist/docs/functional/themes/light.json +7742 -510
  33. package/dist/figma/figma.json +18 -8
  34. package/dist/figma/scales/dark-dimmed.json +14 -14
  35. package/dist/figma/themes/dark-colorblind-high-contrast.json +13877 -0
  36. package/dist/figma/themes/dark-colorblind.json +45 -49
  37. package/dist/figma/themes/dark-dimmed-high-contrast.json +13871 -0
  38. package/dist/figma/themes/dark-dimmed.json +102 -107
  39. package/dist/figma/themes/dark-high-contrast.json +28 -34
  40. package/dist/figma/themes/dark-tritanopia-high-contrast.json +13873 -0
  41. package/dist/figma/themes/dark-tritanopia.json +45 -49
  42. package/dist/figma/themes/dark.json +45 -49
  43. package/dist/figma/themes/light-colorblind-high-contrast.json +13857 -0
  44. package/dist/figma/themes/light-colorblind.json +21 -24
  45. package/dist/figma/themes/light-high-contrast.json +46 -51
  46. package/dist/figma/themes/light-tritanopia-high-contrast.json +13856 -0
  47. package/dist/figma/themes/light-tritanopia.json +19 -23
  48. package/dist/figma/themes/light.json +19 -23
  49. package/dist/internalCss/dark-colorblind-high-contrast.css +2266 -0
  50. package/dist/internalCss/dark-colorblind.css +30 -30
  51. package/dist/internalCss/dark-dimmed-high-contrast.css +2266 -0
  52. package/dist/internalCss/dark-dimmed.css +54 -54
  53. package/dist/internalCss/dark-high-contrast.css +24 -24
  54. package/dist/internalCss/dark-tritanopia-high-contrast.css +2266 -0
  55. package/dist/internalCss/dark-tritanopia.css +30 -30
  56. package/dist/internalCss/dark.css +30 -30
  57. package/dist/internalCss/light-colorblind-high-contrast.css +2266 -0
  58. package/dist/internalCss/light-colorblind.css +30 -30
  59. package/dist/internalCss/light-high-contrast.css +32 -32
  60. package/dist/internalCss/light-tritanopia-high-contrast.css +2266 -0
  61. package/dist/internalCss/light-tritanopia.css +28 -28
  62. package/dist/internalCss/light.css +28 -28
  63. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +43194 -0
  64. package/dist/styleLint/functional/themes/dark-colorblind.json +7877 -647
  65. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +43188 -0
  66. package/dist/styleLint/functional/themes/dark-dimmed.json +7797 -565
  67. package/dist/styleLint/functional/themes/dark-high-contrast.json +7751 -523
  68. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +43192 -0
  69. package/dist/styleLint/functional/themes/dark-tritanopia.json +7877 -647
  70. package/dist/styleLint/functional/themes/dark.json +7877 -647
  71. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +43154 -0
  72. package/dist/styleLint/functional/themes/light-colorblind.json +7744 -512
  73. package/dist/styleLint/functional/themes/light-high-contrast.json +7760 -532
  74. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +43154 -0
  75. package/dist/styleLint/functional/themes/light-tritanopia.json +7742 -510
  76. package/dist/styleLint/functional/themes/light.json +7742 -510
  77. package/package.json +1 -1
  78. package/src/tokens/base/color/dark/dark.dimmed.json5 +0 -9
  79. package/src/tokens/component/avatar.json5 +17 -4
  80. package/src/tokens/component/button.json5 +260 -61
  81. package/src/tokens/component/codeMirror.json5 +20 -2
  82. package/src/tokens/component/contribution.json5 +35 -57
  83. package/src/tokens/component/counter.json5 +5 -0
  84. package/src/tokens/component/diffBlob.json5 +75 -8
  85. package/src/tokens/component/header.json5 +2 -0
  86. package/src/tokens/component/overlay.json5 +25 -0
  87. package/src/tokens/component/skeletonLoader.json5 +20 -0
  88. package/src/tokens/component/tooltip.json5 +8 -2
  89. package/src/tokens/component/topicTag.json5 +5 -0
  90. package/src/tokens/functional/color/bgColor.json5 +86 -0
  91. package/src/tokens/functional/color/borderColor.json5 +268 -0
  92. package/src/tokens/functional/color/control.json5 +344 -1
  93. package/src/tokens/functional/color/display.json5 +1334 -1239
  94. package/src/tokens/functional/color/fgColor.json5 +77 -18
  95. package/src/tokens/functional/color/syntax.json5 +44 -2
package/dist/internalCss/dark-tritanopia.css CHANGED
@@ -297,9 +297,7 @@
297
297
  --borderWidth-thick: 0.125rem;
298
298
  --borderWidth-thicker: 0.25rem;
299
299
  --borderWidth-thin: 0.0625rem;
300
- --button-danger-bgColor-active: #d03533;
301
300
  --button-danger-fgColor-rest: #fa5e55;
302
- --button-danger-iconColor-rest: #fa5e55;
303
301
  --button-outline-bgColor-active: #0d419d;
304
302
  --button-outline-bgColor-disabled: #212830;
305
303
  --button-outline-bgColor-hover: #262c36;
@@ -369,6 +367,7 @@
369
367
  --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker);
370
368
  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow for borders */
371
369
  --button-danger-bgColor-hover: var(--base-color-red-6);
370
+ --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
372
371
  --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
373
372
  --button-default-shadow-resting: 0px 0px 0px 0px #000000;
374
373
  --button-inactive-bgColor: var(--base-color-neutral-4);
@@ -447,11 +446,7 @@
447
446
  --contribution-default-bgColor-2: var(--base-color-green-6);
448
447
  --contribution-default-bgColor-3: var(--base-color-green-4);
449
448
  --contribution-default-bgColor-4: var(--base-color-green-2);
450
- --contribution-default-borderColor-0: #ffffff0d;
451
- --contribution-default-borderColor-1: #ffffff0d;
452
- --contribution-default-borderColor-2: #ffffff0d;
453
- --contribution-default-borderColor-3: #ffffff0d;
454
- --contribution-default-borderColor-4: #ffffff0d;
449
+ --contribution-default-borderColor-0: #0104090d;
455
450
  --contribution-halloween-bgColor-1: var(--base-display-color-orange-9);
456
451
  --contribution-halloween-bgColor-2: var(--base-display-color-orange-5);
457
452
  --contribution-halloween-bgColor-3: var(--base-display-color-orange-4);
@@ -470,7 +465,7 @@
470
465
  --control-transparent-bgColor-active: #656c7640;
471
466
  --control-transparent-bgColor-hover: #656c7633;
472
467
  --control-transparent-bgColor-rest: var(--base-color-transparent);
473
- --control-transparent-bgColor-selected: #656c761a;
468
+ --control-transparent-bgColor-selected: #656c7633;
474
469
  --control-transparent-borderColor-active: var(--base-color-transparent);
475
470
  --control-transparent-borderColor-hover: var(--base-color-transparent);
476
471
  --control-transparent-borderColor-rest: var(--base-color-transparent);
@@ -807,7 +802,7 @@
807
802
  --fgColor-attention: var(--base-color-yellow-3);
808
803
  --fgColor-danger: var(--base-color-red-4);
809
804
  --fgColor-default: var(--base-color-neutral-12);
810
- --fgColor-disabled: #656c7699;
805
+ --fgColor-disabled: var(--base-color-neutral-8);
811
806
  --fgColor-done: var(--base-color-purple-4);
812
807
  --fgColor-link: var(--fgColor-accent);
813
808
  --fgColor-muted: var(--base-color-neutral-9);
@@ -980,6 +975,7 @@
980
975
  --borderColor-translucent: #ffffff26;
981
976
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
982
977
  --borderColor-upsell-muted: var(--borderColor-done-muted);
978
+ --button-danger-bgColor-active: var(--bgColor-danger-emphasis);
983
979
  --button-danger-bgColor-rest: var(--control-bgColor-rest);
984
980
  --button-danger-fgColor-active: var(--base-color-neutral-13);
985
981
  --button-danger-fgColor-disabled: #f8514980;
@@ -998,7 +994,6 @@
998
994
  --button-invisible-iconColor-rest: var(--fgColor-muted);
999
995
  --button-outline-fgColor-active: var(--base-color-neutral-13);
1000
996
  --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
1001
- --button-primary-borderColor-rest: #ffffff1a;
1002
997
  --button-primary-fgColor-disabled: #ffffff66;
1003
998
  --buttonCounter-danger-bgColor-disabled: #da36330d;
1004
999
  --buttonCounter-danger-bgColor-hover: #ffffff33;
@@ -1020,6 +1015,10 @@
1020
1015
  --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
1021
1016
  --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
1022
1017
  --color-ansi-white-bright: var(--base-color-neutral-13);
1018
+ --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
1019
+ --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
1020
+ --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
1021
+ --contribution-default-borderColor-4: var(--contribution-default-borderColor-0);
1023
1022
  --control-bgColor-disabled: var(--bgColor-disabled);
1024
1023
  --control-bgColor-selected: var(--control-bgColor-rest);
1025
1024
  --control-borderColor-danger: var(--borderColor-danger-emphasis);
@@ -1091,7 +1090,6 @@
1091
1090
  --border-upsell-muted: 0.0625rem solid #ab7df866;
1092
1091
  --borderColor-neutral-muted: var(--borderColor-muted);
1093
1092
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
1094
- --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
1095
1093
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
1096
1094
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
1097
1095
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
@@ -1102,8 +1100,7 @@
1102
1100
  --button-invisible-fgColor-hover: var(--control-fgColor-rest);
1103
1101
  --button-invisible-fgColor-rest: var(--control-fgColor-rest);
1104
1102
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
1105
- --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
1106
- --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
1103
+ --button-primary-borderColor-rest: var(--borderColor-translucent);
1107
1104
  --button-primary-fgColor-rest: var(--fgColor-white);
1108
1105
  --button-primary-iconColor-rest: var(--fgColor-white);
1109
1106
  --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
@@ -1120,20 +1117,23 @@
1120
1117
  --overlay-borderColor: var(--borderColor-muted);
1121
1118
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1122
1119
  --border-neutral-muted: 0.0625rem solid #3d444db3;
1123
- --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1120
+ --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
1124
1121
  --button-default-borderColor-active: var(--button-default-borderColor-rest);
1125
1122
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
1123
+ --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
1124
+ --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
1126
1125
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
1127
1126
  --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
1128
1127
  --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1129
1128
  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
1130
1129
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
1130
+ --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1131
1131
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
1132
1132
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1133
1133
  }
1134
1134
  @media (prefers-color-scheme: dark) {
1135
- [data-color-mode="auto"][data-dark-theme="dark_tritanopia"],
1136
- [data-color-mode="auto"][data-dark-theme="dark_tritanopia"] ::backdrop {
1135
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia"],
1136
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia"] ::backdrop {
1137
1137
  --base-color-black: #010409;
1138
1138
  --base-color-blue-0: #cae8ff;
1139
1139
  --base-color-blue-1: #a5d6ff;
@@ -1429,9 +1429,7 @@
1429
1429
  --borderWidth-thick: 0.125rem;
1430
1430
  --borderWidth-thicker: 0.25rem;
1431
1431
  --borderWidth-thin: 0.0625rem;
1432
- --button-danger-bgColor-active: #d03533;
1433
1432
  --button-danger-fgColor-rest: #fa5e55;
1434
- --button-danger-iconColor-rest: #fa5e55;
1435
1433
  --button-outline-bgColor-active: #0d419d;
1436
1434
  --button-outline-bgColor-disabled: #212830;
1437
1435
  --button-outline-bgColor-hover: #262c36;
@@ -1501,6 +1499,7 @@
1501
1499
  --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker);
1502
1500
  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow for borders */
1503
1501
  --button-danger-bgColor-hover: var(--base-color-red-6);
1502
+ --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
1504
1503
  --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
1505
1504
  --button-default-shadow-resting: 0px 0px 0px 0px #000000;
1506
1505
  --button-inactive-bgColor: var(--base-color-neutral-4);
@@ -1579,11 +1578,7 @@
1579
1578
  --contribution-default-bgColor-2: var(--base-color-green-6);
1580
1579
  --contribution-default-bgColor-3: var(--base-color-green-4);
1581
1580
  --contribution-default-bgColor-4: var(--base-color-green-2);
1582
- --contribution-default-borderColor-0: #ffffff0d;
1583
- --contribution-default-borderColor-1: #ffffff0d;
1584
- --contribution-default-borderColor-2: #ffffff0d;
1585
- --contribution-default-borderColor-3: #ffffff0d;
1586
- --contribution-default-borderColor-4: #ffffff0d;
1581
+ --contribution-default-borderColor-0: #0104090d;
1587
1582
  --contribution-halloween-bgColor-1: var(--base-display-color-orange-9);
1588
1583
  --contribution-halloween-bgColor-2: var(--base-display-color-orange-5);
1589
1584
  --contribution-halloween-bgColor-3: var(--base-display-color-orange-4);
@@ -1602,7 +1597,7 @@
1602
1597
  --control-transparent-bgColor-active: #656c7640;
1603
1598
  --control-transparent-bgColor-hover: #656c7633;
1604
1599
  --control-transparent-bgColor-rest: var(--base-color-transparent);
1605
- --control-transparent-bgColor-selected: #656c761a;
1600
+ --control-transparent-bgColor-selected: #656c7633;
1606
1601
  --control-transparent-borderColor-active: var(--base-color-transparent);
1607
1602
  --control-transparent-borderColor-hover: var(--base-color-transparent);
1608
1603
  --control-transparent-borderColor-rest: var(--base-color-transparent);
@@ -1939,7 +1934,7 @@
1939
1934
  --fgColor-attention: var(--base-color-yellow-3);
1940
1935
  --fgColor-danger: var(--base-color-red-4);
1941
1936
  --fgColor-default: var(--base-color-neutral-12);
1942
- --fgColor-disabled: #656c7699;
1937
+ --fgColor-disabled: var(--base-color-neutral-8);
1943
1938
  --fgColor-done: var(--base-color-purple-4);
1944
1939
  --fgColor-link: var(--fgColor-accent);
1945
1940
  --fgColor-muted: var(--base-color-neutral-9);
@@ -2112,6 +2107,7 @@
2112
2107
  --borderColor-translucent: #ffffff26;
2113
2108
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
2114
2109
  --borderColor-upsell-muted: var(--borderColor-done-muted);
2110
+ --button-danger-bgColor-active: var(--bgColor-danger-emphasis);
2115
2111
  --button-danger-bgColor-rest: var(--control-bgColor-rest);
2116
2112
  --button-danger-fgColor-active: var(--base-color-neutral-13);
2117
2113
  --button-danger-fgColor-disabled: #f8514980;
@@ -2130,7 +2126,6 @@
2130
2126
  --button-invisible-iconColor-rest: var(--fgColor-muted);
2131
2127
  --button-outline-fgColor-active: var(--base-color-neutral-13);
2132
2128
  --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
2133
- --button-primary-borderColor-rest: #ffffff1a;
2134
2129
  --button-primary-fgColor-disabled: #ffffff66;
2135
2130
  --buttonCounter-danger-bgColor-disabled: #da36330d;
2136
2131
  --buttonCounter-danger-bgColor-hover: #ffffff33;
@@ -2152,6 +2147,10 @@
2152
2147
  --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
2153
2148
  --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
2154
2149
  --color-ansi-white-bright: var(--base-color-neutral-13);
2150
+ --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
2151
+ --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
2152
+ --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
2153
+ --contribution-default-borderColor-4: var(--contribution-default-borderColor-0);
2155
2154
  --control-bgColor-disabled: var(--bgColor-disabled);
2156
2155
  --control-bgColor-selected: var(--control-bgColor-rest);
2157
2156
  --control-borderColor-danger: var(--borderColor-danger-emphasis);
@@ -2223,7 +2222,6 @@
2223
2222
  --border-upsell-muted: 0.0625rem solid #ab7df866;
2224
2223
  --borderColor-neutral-muted: var(--borderColor-muted);
2225
2224
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
2226
- --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
2227
2225
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
2228
2226
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
2229
2227
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
@@ -2234,8 +2232,7 @@
2234
2232
  --button-invisible-fgColor-hover: var(--control-fgColor-rest);
2235
2233
  --button-invisible-fgColor-rest: var(--control-fgColor-rest);
2236
2234
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
2237
- --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
2238
- --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
2235
+ --button-primary-borderColor-rest: var(--borderColor-translucent);
2239
2236
  --button-primary-fgColor-rest: var(--fgColor-white);
2240
2237
  --button-primary-iconColor-rest: var(--fgColor-white);
2241
2238
  --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
@@ -2252,14 +2249,17 @@
2252
2249
  --overlay-borderColor: var(--borderColor-muted);
2253
2250
  --tooltip-fgColor: var(--fgColor-onEmphasis);
2254
2251
  --border-neutral-muted: 0.0625rem solid #3d444db3;
2255
- --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
2252
+ --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
2256
2253
  --button-default-borderColor-active: var(--button-default-borderColor-rest);
2257
2254
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
2255
+ --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
2256
+ --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
2258
2257
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
2259
2258
  --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
2260
2259
  --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
2261
2260
  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
2262
2261
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
2262
+ --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
2263
2263
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
2264
2264
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
2265
2265
  }
package/dist/internalCss/dark.css CHANGED
@@ -296,9 +296,7 @@
296
296
  --borderWidth-thick: 0.125rem;
297
297
  --borderWidth-thicker: 0.25rem;
298
298
  --borderWidth-thin: 0.0625rem;
299
- --button-danger-bgColor-active: #d03533;
300
299
  --button-danger-fgColor-rest: #fa5e55;
301
- --button-danger-iconColor-rest: #fa5e55;
302
300
  --button-primary-bgColor-active: #2e9a40;
303
301
  --button-primary-bgColor-disabled: #105823;
304
302
  --button-primary-bgColor-hover: #29903b;
@@ -362,6 +360,7 @@
362
360
  --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker);
363
361
  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow for borders */
364
362
  --button-danger-bgColor-hover: var(--base-color-red-6);
363
+ --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
365
364
  --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
366
365
  --button-default-shadow-resting: 0px 0px 0px 0px #000000;
367
366
  --button-inactive-bgColor: var(--base-color-neutral-4);
@@ -441,11 +440,7 @@
441
440
  --contribution-default-bgColor-2: var(--base-color-green-6);
442
441
  --contribution-default-bgColor-3: var(--base-color-green-4);
443
442
  --contribution-default-bgColor-4: var(--base-color-green-2);
444
- --contribution-default-borderColor-0: #ffffff0d;
445
- --contribution-default-borderColor-1: #ffffff0d;
446
- --contribution-default-borderColor-2: #ffffff0d;
447
- --contribution-default-borderColor-3: #ffffff0d;
448
- --contribution-default-borderColor-4: #ffffff0d;
443
+ --contribution-default-borderColor-0: #0104090d;
449
444
  --contribution-halloween-bgColor-1: var(--base-display-color-orange-9);
450
445
  --contribution-halloween-bgColor-2: var(--base-display-color-orange-5);
451
446
  --contribution-halloween-bgColor-3: var(--base-display-color-orange-4);
@@ -464,7 +459,7 @@
464
459
  --control-transparent-bgColor-active: #656c7640;
465
460
  --control-transparent-bgColor-hover: #656c7633;
466
461
  --control-transparent-bgColor-rest: var(--base-color-transparent);
467
- --control-transparent-bgColor-selected: #656c761a;
462
+ --control-transparent-bgColor-selected: #656c7633;
468
463
  --control-transparent-borderColor-active: var(--base-color-transparent);
469
464
  --control-transparent-borderColor-hover: var(--base-color-transparent);
470
465
  --control-transparent-borderColor-rest: var(--base-color-transparent);
@@ -799,7 +794,7 @@
799
794
  --fgColor-attention: var(--base-color-yellow-3);
800
795
  --fgColor-danger: var(--base-color-red-4);
801
796
  --fgColor-default: var(--base-color-neutral-12);
802
- --fgColor-disabled: #656c7699;
797
+ --fgColor-disabled: var(--base-color-neutral-8);
803
798
  --fgColor-done: var(--base-color-purple-4);
804
799
  --fgColor-link: var(--fgColor-accent);
805
800
  --fgColor-muted: var(--base-color-neutral-9);
@@ -975,6 +970,7 @@
975
970
  --borderColor-translucent: #ffffff26;
976
971
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
977
972
  --borderColor-upsell-muted: var(--borderColor-done-muted);
973
+ --button-danger-bgColor-active: var(--bgColor-danger-emphasis);
978
974
  --button-danger-bgColor-rest: var(--control-bgColor-rest);
979
975
  --button-danger-fgColor-active: var(--base-color-neutral-13);
980
976
  --button-danger-fgColor-disabled: #f8514980;
@@ -994,7 +990,6 @@
994
990
  --button-outline-bgColor-hover: var(--control-bgColor-hover);
995
991
  --button-outline-fgColor-active: var(--base-color-neutral-13);
996
992
  --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
997
- --button-primary-borderColor-rest: #ffffff1a;
998
993
  --button-primary-fgColor-disabled: #ffffff66;
999
994
  --buttonCounter-danger-bgColor-disabled: #da36330d;
1000
995
  --buttonCounter-danger-bgColor-hover: #ffffff33;
@@ -1016,6 +1011,10 @@
1016
1011
  --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
1017
1012
  --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
1018
1013
  --color-ansi-white-bright: var(--base-color-neutral-13);
1014
+ --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
1015
+ --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
1016
+ --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
1017
+ --contribution-default-borderColor-4: var(--contribution-default-borderColor-0);
1019
1018
  --control-bgColor-disabled: var(--bgColor-disabled);
1020
1019
  --control-bgColor-selected: var(--control-bgColor-rest);
1021
1020
  --control-borderColor-danger: var(--borderColor-danger-emphasis);
@@ -1090,7 +1089,6 @@
1090
1089
  --border-upsell-muted: 0.0625rem solid #ab7df866;
1091
1090
  --borderColor-neutral-muted: var(--borderColor-muted);
1092
1091
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
1093
- --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
1094
1092
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
1095
1093
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
1096
1094
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
@@ -1102,8 +1100,7 @@
1102
1100
  --button-invisible-fgColor-rest: var(--control-fgColor-rest);
1103
1101
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
1104
1102
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
1105
- --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
1106
- --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
1103
+ --button-primary-borderColor-rest: var(--borderColor-translucent);
1107
1104
  --button-primary-fgColor-rest: var(--fgColor-white);
1108
1105
  --button-primary-iconColor-rest: var(--fgColor-white);
1109
1106
  --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
@@ -1120,20 +1117,23 @@
1120
1117
  --overlay-borderColor: var(--borderColor-muted);
1121
1118
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1122
1119
  --border-neutral-muted: 0.0625rem solid #3d444db3;
1123
- --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1120
+ --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
1124
1121
  --button-default-borderColor-active: var(--button-default-borderColor-rest);
1125
1122
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
1123
+ --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
1124
+ --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
1126
1125
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
1127
1126
  --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
1128
1127
  --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1129
1128
  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
1130
1129
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
1130
+ --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1131
1131
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
1132
1132
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1133
1133
  }
1134
1134
  @media (prefers-color-scheme: dark) {
1135
- [data-color-mode="auto"][data-dark-theme="dark"],
1136
- [data-color-mode="auto"][data-dark-theme="dark"] ::backdrop {
1135
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark"],
1136
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark"] ::backdrop {
1137
1137
  --base-color-black: #010409;
1138
1138
  --base-color-blue-0: #cae8ff;
1139
1139
  --base-color-blue-1: #a5d6ff;
@@ -1428,9 +1428,7 @@
1428
1428
  --borderWidth-thick: 0.125rem;
1429
1429
  --borderWidth-thicker: 0.25rem;
1430
1430
  --borderWidth-thin: 0.0625rem;
1431
- --button-danger-bgColor-active: #d03533;
1432
1431
  --button-danger-fgColor-rest: #fa5e55;
1433
- --button-danger-iconColor-rest: #fa5e55;
1434
1432
  --button-primary-bgColor-active: #2e9a40;
1435
1433
  --button-primary-bgColor-disabled: #105823;
1436
1434
  --button-primary-bgColor-hover: #29903b;
@@ -1494,6 +1492,7 @@
1494
1492
  --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker);
1495
1493
  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow for borders */
1496
1494
  --button-danger-bgColor-hover: var(--base-color-red-6);
1495
+ --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
1497
1496
  --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
1498
1497
  --button-default-shadow-resting: 0px 0px 0px 0px #000000;
1499
1498
  --button-inactive-bgColor: var(--base-color-neutral-4);
@@ -1573,11 +1572,7 @@
1573
1572
  --contribution-default-bgColor-2: var(--base-color-green-6);
1574
1573
  --contribution-default-bgColor-3: var(--base-color-green-4);
1575
1574
  --contribution-default-bgColor-4: var(--base-color-green-2);
1576
- --contribution-default-borderColor-0: #ffffff0d;
1577
- --contribution-default-borderColor-1: #ffffff0d;
1578
- --contribution-default-borderColor-2: #ffffff0d;
1579
- --contribution-default-borderColor-3: #ffffff0d;
1580
- --contribution-default-borderColor-4: #ffffff0d;
1575
+ --contribution-default-borderColor-0: #0104090d;
1581
1576
  --contribution-halloween-bgColor-1: var(--base-display-color-orange-9);
1582
1577
  --contribution-halloween-bgColor-2: var(--base-display-color-orange-5);
1583
1578
  --contribution-halloween-bgColor-3: var(--base-display-color-orange-4);
@@ -1596,7 +1591,7 @@
1596
1591
  --control-transparent-bgColor-active: #656c7640;
1597
1592
  --control-transparent-bgColor-hover: #656c7633;
1598
1593
  --control-transparent-bgColor-rest: var(--base-color-transparent);
1599
- --control-transparent-bgColor-selected: #656c761a;
1594
+ --control-transparent-bgColor-selected: #656c7633;
1600
1595
  --control-transparent-borderColor-active: var(--base-color-transparent);
1601
1596
  --control-transparent-borderColor-hover: var(--base-color-transparent);
1602
1597
  --control-transparent-borderColor-rest: var(--base-color-transparent);
@@ -1931,7 +1926,7 @@
1931
1926
  --fgColor-attention: var(--base-color-yellow-3);
1932
1927
  --fgColor-danger: var(--base-color-red-4);
1933
1928
  --fgColor-default: var(--base-color-neutral-12);
1934
- --fgColor-disabled: #656c7699;
1929
+ --fgColor-disabled: var(--base-color-neutral-8);
1935
1930
  --fgColor-done: var(--base-color-purple-4);
1936
1931
  --fgColor-link: var(--fgColor-accent);
1937
1932
  --fgColor-muted: var(--base-color-neutral-9);
@@ -2107,6 +2102,7 @@
2107
2102
  --borderColor-translucent: #ffffff26;
2108
2103
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
2109
2104
  --borderColor-upsell-muted: var(--borderColor-done-muted);
2105
+ --button-danger-bgColor-active: var(--bgColor-danger-emphasis);
2110
2106
  --button-danger-bgColor-rest: var(--control-bgColor-rest);
2111
2107
  --button-danger-fgColor-active: var(--base-color-neutral-13);
2112
2108
  --button-danger-fgColor-disabled: #f8514980;
@@ -2126,7 +2122,6 @@
2126
2122
  --button-outline-bgColor-hover: var(--control-bgColor-hover);
2127
2123
  --button-outline-fgColor-active: var(--base-color-neutral-13);
2128
2124
  --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
2129
- --button-primary-borderColor-rest: #ffffff1a;
2130
2125
  --button-primary-fgColor-disabled: #ffffff66;
2131
2126
  --buttonCounter-danger-bgColor-disabled: #da36330d;
2132
2127
  --buttonCounter-danger-bgColor-hover: #ffffff33;
@@ -2148,6 +2143,10 @@
2148
2143
  --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
2149
2144
  --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
2150
2145
  --color-ansi-white-bright: var(--base-color-neutral-13);
2146
+ --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
2147
+ --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
2148
+ --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
2149
+ --contribution-default-borderColor-4: var(--contribution-default-borderColor-0);
2151
2150
  --control-bgColor-disabled: var(--bgColor-disabled);
2152
2151
  --control-bgColor-selected: var(--control-bgColor-rest);
2153
2152
  --control-borderColor-danger: var(--borderColor-danger-emphasis);
@@ -2222,7 +2221,6 @@
2222
2221
  --border-upsell-muted: 0.0625rem solid #ab7df866;
2223
2222
  --borderColor-neutral-muted: var(--borderColor-muted);
2224
2223
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
2225
- --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
2226
2224
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
2227
2225
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
2228
2226
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
@@ -2234,8 +2232,7 @@
2234
2232
  --button-invisible-fgColor-rest: var(--control-fgColor-rest);
2235
2233
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
2236
2234
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
2237
- --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
2238
- --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
2235
+ --button-primary-borderColor-rest: var(--borderColor-translucent);
2239
2236
  --button-primary-fgColor-rest: var(--fgColor-white);
2240
2237
  --button-primary-iconColor-rest: var(--fgColor-white);
2241
2238
  --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
@@ -2252,14 +2249,17 @@
2252
2249
  --overlay-borderColor: var(--borderColor-muted);
2253
2250
  --tooltip-fgColor: var(--fgColor-onEmphasis);
2254
2251
  --border-neutral-muted: 0.0625rem solid #3d444db3;
2255
- --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
2252
+ --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
2256
2253
  --button-default-borderColor-active: var(--button-default-borderColor-rest);
2257
2254
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
2255
+ --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
2256
+ --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
2258
2257
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
2259
2258
  --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
2260
2259
  --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
2261
2260
  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
2262
2261
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
2262
+ --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
2263
2263
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
2264
2264
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
2265
2265
  }