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

package/dist/internalCss/dark-dimmed.css

@@ -2,7 +2,7 @@
 [data-color-mode="dark"][data-dark-theme="dark_dimmed"] ::backdrop,
 [data-color-mode="auto"][data-light-theme="dark_dimmed"],
 [data-color-mode="auto"][data-light-theme="dark_dimmed"] ::backdrop {
-  --base-color-black: #1c2128;
+  --base-color-black: #010409;
   --base-color-blue-0: #c6e6ff;
   --base-color-blue-1: #96d0ff;
   --base-color-blue-2: #6cb6ff;
@@ -296,14 +296,14 @@
   --borderWidth-thick: 0.125rem;
   --borderWidth-thicker: 0.25rem;
   --borderWidth-thin: 0.0625rem;
-  --button-danger-bgColor-active: #c33d38;
+  --button-danger-fgColor-active: #ffffff;
+  --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-rest: #ea5c53;
-  --button-danger-iconColor-rest: #ea5c53;
   --button-outline-fgColor-disabled: #478be680;
   --button-primary-bgColor-active: #428f46;
-  --button-primary-bgColor-disabled: #50a254;
+  --button-primary-bgColor-disabled: #105823;
   --button-primary-bgColor-hover: #3b8640;
-  --button-primary-borderColor-disabled: #50a254;
+  --button-primary-borderColor-disabled: #105823;
   --button-primary-fgColor-rest: #ffffff;
   --button-primary-iconColor-rest: #ffffff;
   --color-ansi-cyan: #39c5cf;
@@ -372,6 +372,7 @@
   --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow for borders */
   --button-danger-bgColor-hover: var(--base-color-red-6);
   --button-danger-borderColor-rest: var(--control-borderColor-rest);
+  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
   --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
   --button-default-borderColor-rest: var(--control-borderColor-rest);
   --button-default-shadow-resting: 0px 0px 0px 0px #000000;
@@ -453,11 +454,7 @@
   --contribution-default-bgColor-2: var(--base-color-green-6);
   --contribution-default-bgColor-3: var(--base-color-green-4);
   --contribution-default-bgColor-4: var(--base-color-green-2);
-  --contribution-default-borderColor-0: #cdd9e50d;
-  --contribution-default-borderColor-1: #cdd9e50d;
-  --contribution-default-borderColor-2: #cdd9e50d;
-  --contribution-default-borderColor-3: #cdd9e50d;
-  --contribution-default-borderColor-4: #cdd9e50d;
+  --contribution-default-borderColor-0: #0104090d;
   --contribution-halloween-bgColor-1: var(--base-display-color-orange-9);
   --contribution-halloween-bgColor-2: var(--base-display-color-orange-5);
   --contribution-halloween-bgColor-3: var(--base-display-color-orange-4);
@@ -990,10 +987,9 @@
   --borderColor-translucent: #cdd9e526;
   --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
   --borderColor-upsell-muted: var(--borderColor-done-muted);
+  --button-danger-bgColor-active: var(--bgColor-danger-emphasis);
   --button-danger-bgColor-rest: var(--control-bgColor-rest);
-  --button-danger-fgColor-active: var(--base-color-neutral-13);
   --button-danger-fgColor-disabled: #e5534b80;
-  --button-danger-fgColor-hover: var(--base-color-neutral-13);
   --button-danger-iconColor-hover: var(--base-color-neutral-13);
   --button-default-bgColor-active: var(--control-bgColor-active);
   --button-default-bgColor-hover: var(--control-bgColor-hover);
@@ -1010,7 +1006,6 @@
   --button-outline-bgColor-hover: var(--control-bgColor-hover);
   --button-outline-fgColor-active: var(--base-color-neutral-13);
   --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
-  --button-primary-borderColor-rest: #cdd9e51a;
   --button-primary-fgColor-disabled: #cdd9e566;
   --buttonCounter-danger-bgColor-disabled: #c93c370d;
   --buttonCounter-danger-bgColor-hover: #cdd9e533;
@@ -1032,6 +1027,10 @@
   --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
   --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
   --color-ansi-white-bright: var(--base-color-neutral-13);
+  --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
+  --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
+  --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
+  --contribution-default-borderColor-4: var(--contribution-default-borderColor-0);
   --control-bgColor-disabled: var(--bgColor-disabled);
   --control-bgColor-selected: var(--control-bgColor-rest);
   --control-borderColor-danger: var(--borderColor-danger-emphasis);
@@ -1086,15 +1085,15 @@
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #316dcab3;
-  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #1c2128;
-  --shadow-floating-legacy: 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
-  --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #1c212866, 0px 4px 32px -4px #1c212866, 0px 24px 48px -12px #1c212866, 0px 48px 96px -24px #1c212866;
-  --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
-  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #1c2128;
-  --shadow-inset: inset 0px 1px 0px 0px #1c21283d;
-  --shadow-resting-medium: 0px 1px 1px 0px #1c212866, 0px 3px 6px 0px #1c2128cc;
-  --shadow-resting-small: 0px 1px 1px 0px #1c212899, 0px 1px 3px 0px #1c212899;
-  --shadow-resting-xsmall: 0px 1px 1px 0px #1c2128cc;
+  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
+  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+  --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;
+  --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
+  --shadow-inset: inset 0px 1px 0px 0px #0104093d;
+  --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
+  --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
+  --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
   --tooltip-bgColor: var(--bgColor-emphasis);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
@@ -1109,7 +1108,6 @@
   --border-upsell-emphasis: 0.0625rem solid #8256d0;
   --border-upsell-muted: 0.0625rem solid #986ee266;
   --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
-  --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
   --button-default-bgColor-disabled: var(--control-bgColor-disabled);
   --button-default-fgColor-rest: var(--control-fgColor-rest);
   --button-invisible-fgColor-active: var(--control-fgColor-rest);
@@ -1119,8 +1117,7 @@
   --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
   --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-  --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
-  --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
+  --button-primary-borderColor-rest: var(--borderColor-translucent);
   --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
   --control-checked-borderColor-rest: var(--control-checked-bgColor-rest);
   --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
@@ -1128,13 +1125,16 @@
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
   --focus-outline: 2px solid #316dca;
-  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
+  --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
+  --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
+  --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
+  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode="auto"][data-dark-theme="dark_dimmed"],
-  [data-color-mode="auto"][data-dark-theme="dark_dimmed"] ::backdrop {
-    --base-color-black: #1c2128;
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed"],
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed"] ::backdrop {
+    --base-color-black: #010409;
     --base-color-blue-0: #c6e6ff;
     --base-color-blue-1: #96d0ff;
     --base-color-blue-2: #6cb6ff;
@@ -1428,14 +1428,14 @@
     --borderWidth-thick: 0.125rem;
     --borderWidth-thicker: 0.25rem;
     --borderWidth-thin: 0.0625rem;
-    --button-danger-bgColor-active: #c33d38;
+    --button-danger-fgColor-active: #ffffff;
+    --button-danger-fgColor-hover: #ffffff;
     --button-danger-fgColor-rest: #ea5c53;
-    --button-danger-iconColor-rest: #ea5c53;
     --button-outline-fgColor-disabled: #478be680;
     --button-primary-bgColor-active: #428f46;
-    --button-primary-bgColor-disabled: #50a254;
+    --button-primary-bgColor-disabled: #105823;
     --button-primary-bgColor-hover: #3b8640;
-    --button-primary-borderColor-disabled: #50a254;
+    --button-primary-borderColor-disabled: #105823;
     --button-primary-fgColor-rest: #ffffff;
     --button-primary-iconColor-rest: #ffffff;
     --color-ansi-cyan: #39c5cf;
@@ -1504,6 +1504,7 @@
     --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow for borders */
     --button-danger-bgColor-hover: var(--base-color-red-6);
     --button-danger-borderColor-rest: var(--control-borderColor-rest);
+    --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
     --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
     --button-default-borderColor-rest: var(--control-borderColor-rest);
     --button-default-shadow-resting: 0px 0px 0px 0px #000000;
@@ -1585,11 +1586,7 @@
     --contribution-default-bgColor-2: var(--base-color-green-6);
     --contribution-default-bgColor-3: var(--base-color-green-4);
     --contribution-default-bgColor-4: var(--base-color-green-2);
-    --contribution-default-borderColor-0: #cdd9e50d;
-    --contribution-default-borderColor-1: #cdd9e50d;
-    --contribution-default-borderColor-2: #cdd9e50d;
-    --contribution-default-borderColor-3: #cdd9e50d;
-    --contribution-default-borderColor-4: #cdd9e50d;
+    --contribution-default-borderColor-0: #0104090d;
     --contribution-halloween-bgColor-1: var(--base-display-color-orange-9);
     --contribution-halloween-bgColor-2: var(--base-display-color-orange-5);
     --contribution-halloween-bgColor-3: var(--base-display-color-orange-4);
@@ -2122,10 +2119,9 @@
     --borderColor-translucent: #cdd9e526;
     --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
     --borderColor-upsell-muted: var(--borderColor-done-muted);
+    --button-danger-bgColor-active: var(--bgColor-danger-emphasis);
     --button-danger-bgColor-rest: var(--control-bgColor-rest);
-    --button-danger-fgColor-active: var(--base-color-neutral-13);
     --button-danger-fgColor-disabled: #e5534b80;
-    --button-danger-fgColor-hover: var(--base-color-neutral-13);
     --button-danger-iconColor-hover: var(--base-color-neutral-13);
     --button-default-bgColor-active: var(--control-bgColor-active);
     --button-default-bgColor-hover: var(--control-bgColor-hover);
@@ -2142,7 +2138,6 @@
     --button-outline-bgColor-hover: var(--control-bgColor-hover);
     --button-outline-fgColor-active: var(--base-color-neutral-13);
     --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
-    --button-primary-borderColor-rest: #cdd9e51a;
     --button-primary-fgColor-disabled: #cdd9e566;
     --buttonCounter-danger-bgColor-disabled: #c93c370d;
     --buttonCounter-danger-bgColor-hover: #cdd9e533;
@@ -2164,6 +2159,10 @@
     --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
     --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
     --color-ansi-white-bright: var(--base-color-neutral-13);
+    --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
+    --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
+    --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
+    --contribution-default-borderColor-4: var(--contribution-default-borderColor-0);
     --control-bgColor-disabled: var(--bgColor-disabled);
     --control-bgColor-selected: var(--control-bgColor-rest);
     --control-borderColor-danger: var(--borderColor-danger-emphasis);
@@ -2218,15 +2217,15 @@
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
     --selection-bgColor: #316dcab3;
-    --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #1c2128;
-    --shadow-floating-legacy: 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
-    --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #1c212866, 0px 4px 32px -4px #1c212866, 0px 24px 48px -12px #1c212866, 0px 48px 96px -24px #1c212866;
-    --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
-    --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #1c2128;
-    --shadow-inset: inset 0px 1px 0px 0px #1c21283d;
-    --shadow-resting-medium: 0px 1px 1px 0px #1c212866, 0px 3px 6px 0px #1c2128cc;
-    --shadow-resting-small: 0px 1px 1px 0px #1c212899, 0px 1px 3px 0px #1c212899;
-    --shadow-resting-xsmall: 0px 1px 1px 0px #1c2128cc;
+    --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
+    --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+    --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;
+    --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+    --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
+    --shadow-inset: inset 0px 1px 0px 0px #0104093d;
+    --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
+    --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
+    --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
     --tooltip-bgColor: var(--bgColor-emphasis);
     --tooltip-fgColor: var(--fgColor-onEmphasis);
     --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
@@ -2241,7 +2240,6 @@
     --border-upsell-emphasis: 0.0625rem solid #8256d0;
     --border-upsell-muted: 0.0625rem solid #986ee266;
     --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
-    --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
     --button-default-bgColor-disabled: var(--control-bgColor-disabled);
     --button-default-fgColor-rest: var(--control-fgColor-rest);
     --button-invisible-fgColor-active: var(--control-fgColor-rest);
@@ -2251,8 +2249,7 @@
     --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
     --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-    --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
-    --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
+    --button-primary-borderColor-rest: var(--borderColor-translucent);
     --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
     --control-checked-borderColor-rest: var(--control-checked-bgColor-rest);
     --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
@@ -2260,7 +2257,10 @@
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
     --focus-outline: 2px solid #316dca;
-    --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
+    --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
     --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
+    --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
+    --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
+    --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
   }
 }

package/dist/internalCss/dark-high-contrast.css

@@ -296,7 +296,6 @@
   --borderWidth-thick: 0.125rem;
   --borderWidth-thicker: 0.25rem;
   --borderWidth-thin: 0.0625rem;
-  --button-danger-iconColor-rest: #ffb1af;
   --button-primary-bgColor-active: #109135;
   --button-primary-bgColor-disabled: #048f2f;
   --button-primary-bgColor-hover: #08792b;
@@ -361,6 +360,7 @@
   --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick);
   --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker);
   --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow for borders */
+  --button-danger-bgColor-hover: var(--base-color-red-9);
   --button-danger-borderColor-active: var(--base-color-red-2);
   --button-danger-borderColor-hover: var(--base-color-red-2);
   --button-danger-fgColor-rest: var(--base-color-red-2);
@@ -379,9 +379,7 @@
   --button-outline-fgColor-hover: var(--base-color-blue-3);
   --button-outline-fgColor-rest: var(--base-color-blue-4);
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-primary-borderColor-active: var(--base-color-green-2);
   --button-primary-borderColor-disabled: #4ae16866;
-  --button-primary-borderColor-hover: var(--base-color-green-2);
   --button-primary-borderColor-rest: var(--base-color-green-2);
   --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
   --button-star-iconColor: var(--base-color-yellow-2);
@@ -444,16 +442,11 @@
   --color-prettylights-syntax-string-regexp: var(--base-color-green-1);
   --color-prettylights-syntax-sublimelinter-gutter-mark: var(--base-color-neutral-7);
   --color-prettylights-syntax-variable: var(--base-color-orange-2);
-  --contribution-default-bgColor-0: var(--base-color-neutral-2);
   --contribution-default-bgColor-1: var(--base-color-green-8);
   --contribution-default-bgColor-2: var(--base-color-green-6);
   --contribution-default-bgColor-3: var(--base-color-green-4);
   --contribution-default-bgColor-4: var(--base-color-green-2);
-  --contribution-default-borderColor-0: #ffffff0d;
-  --contribution-default-borderColor-1: #ffffff0d;
-  --contribution-default-borderColor-2: #ffffff0d;
-  --contribution-default-borderColor-3: #ffffff0d;
-  --contribution-default-borderColor-4: #ffffff0d;
+  --contribution-default-borderColor-0: var(--base-color-white);
   --contribution-halloween-bgColor-1: var(--base-display-color-orange-9);
   --contribution-halloween-bgColor-2: var(--base-display-color-orange-5);
   --contribution-halloween-bgColor-3: var(--base-display-color-orange-4);
@@ -939,7 +932,6 @@
   --timelineBadge-bgColor: var(--base-color-neutral-3);
   --underlineNav-borderColor-active: var(--base-color-coral-3);
   --avatar-bgColor: #ffffff1a;
-  --avatar-borderColor: #ffffffe6;
   --bgColor-black: var(--base-color-neutral-0);
   --bgColor-closed-emphasis: var(--bgColor-danger-emphasis);
   --bgColor-closed-muted: var(--bgColor-danger-muted);
@@ -977,12 +969,12 @@
   --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
   --borderColor-upsell-muted: var(--borderColor-done-muted);
   --button-danger-bgColor-active: var(--bgColor-danger-emphasis);
-  --button-danger-bgColor-hover: var(--bgColor-danger-emphasis);
   --button-danger-bgColor-rest: var(--control-bgColor-rest);
   --button-danger-fgColor-active: var(--base-color-neutral-13);
   --button-danger-fgColor-disabled: #ff949280;
   --button-danger-fgColor-hover: var(--base-color-neutral-13);
   --button-danger-iconColor-hover: var(--base-color-neutral-13);
+  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
   --button-default-bgColor-active: var(--control-bgColor-active);
   --button-default-bgColor-hover: var(--control-bgColor-hover);
   --button-default-bgColor-rest: var(--control-bgColor-rest);
@@ -993,6 +985,8 @@
   --button-outline-bgColor-hover: var(--control-bgColor-hover);
   --button-outline-fgColor-active: var(--base-color-neutral-13);
   --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
+  --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
+  --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
   --button-primary-fgColor-disabled: #ffffff66;
   --buttonCounter-danger-bgColor-disabled: #ad01160d;
   --buttonCounter-danger-bgColor-hover: #01040926;
@@ -1008,6 +1002,11 @@
   --codeMirror-gutterMarker-fgColor-muted: var(--fgColor-muted);
   --codeMirror-lineNumber-fgColor: var(--fgColor-muted);
   --color-ansi-white-bright: var(--base-color-neutral-13);
+  --contribution-default-bgColor-0: var(--base-color-neutral-0);
+  --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
+  --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
+  --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
+  --contribution-default-borderColor-4: var(--contribution-default-borderColor-0);
   --control-bgColor-disabled: var(--bgColor-disabled);
   --control-bgColor-selected: var(--control-bgColor-rest);
   --control-borderColor-danger: var(--borderColor-danger-emphasis);
@@ -1061,6 +1060,7 @@
   --topicTag-borderColor: var(--borderColor-accent-emphasis);
   --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
   --underlineNav-iconColor-rest: var(--fgColor-muted);
+  --avatar-borderColor: var(--borderColor-emphasis);
   --border-closed-emphasis: var(--border-danger-emphasis);
   --border-closed-muted: var(--border-danger-muted);
   --border-emphasis: 0.0625rem solid #b7bdc8;
@@ -1132,8 +1132,8 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode="auto"][data-dark-theme="dark_high_contrast"],
-  [data-color-mode="auto"][data-dark-theme="dark_high_contrast"] ::backdrop {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_high_contrast"],
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_high_contrast"] ::backdrop {
     --base-color-black: #010409;
     --base-color-blue-0: #caeaff;
     --base-color-blue-1: #addcff;
@@ -1428,7 +1428,6 @@
     --borderWidth-thick: 0.125rem;
     --borderWidth-thicker: 0.25rem;
     --borderWidth-thin: 0.0625rem;
-    --button-danger-iconColor-rest: #ffb1af;
     --button-primary-bgColor-active: #109135;
     --button-primary-bgColor-disabled: #048f2f;
     --button-primary-bgColor-hover: #08792b;
@@ -1493,6 +1492,7 @@
     --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick);
     --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker);
     --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow for borders */
+    --button-danger-bgColor-hover: var(--base-color-red-9);
     --button-danger-borderColor-active: var(--base-color-red-2);
     --button-danger-borderColor-hover: var(--base-color-red-2);
     --button-danger-fgColor-rest: var(--base-color-red-2);
@@ -1511,9 +1511,7 @@
     --button-outline-fgColor-hover: var(--base-color-blue-3);
     --button-outline-fgColor-rest: var(--base-color-blue-4);
     --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-primary-borderColor-active: var(--base-color-green-2);
     --button-primary-borderColor-disabled: #4ae16866;
-    --button-primary-borderColor-hover: var(--base-color-green-2);
     --button-primary-borderColor-rest: var(--base-color-green-2);
     --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
     --button-star-iconColor: var(--base-color-yellow-2);
@@ -1576,16 +1574,11 @@
     --color-prettylights-syntax-string-regexp: var(--base-color-green-1);
     --color-prettylights-syntax-sublimelinter-gutter-mark: var(--base-color-neutral-7);
     --color-prettylights-syntax-variable: var(--base-color-orange-2);
-    --contribution-default-bgColor-0: var(--base-color-neutral-2);
     --contribution-default-bgColor-1: var(--base-color-green-8);
     --contribution-default-bgColor-2: var(--base-color-green-6);
     --contribution-default-bgColor-3: var(--base-color-green-4);
     --contribution-default-bgColor-4: var(--base-color-green-2);
-    --contribution-default-borderColor-0: #ffffff0d;
-    --contribution-default-borderColor-1: #ffffff0d;
-    --contribution-default-borderColor-2: #ffffff0d;
-    --contribution-default-borderColor-3: #ffffff0d;
-    --contribution-default-borderColor-4: #ffffff0d;
+    --contribution-default-borderColor-0: var(--base-color-white);
     --contribution-halloween-bgColor-1: var(--base-display-color-orange-9);
     --contribution-halloween-bgColor-2: var(--base-display-color-orange-5);
     --contribution-halloween-bgColor-3: var(--base-display-color-orange-4);
@@ -2071,7 +2064,6 @@
     --timelineBadge-bgColor: var(--base-color-neutral-3);
     --underlineNav-borderColor-active: var(--base-color-coral-3);
     --avatar-bgColor: #ffffff1a;
-    --avatar-borderColor: #ffffffe6;
     --bgColor-black: var(--base-color-neutral-0);
     --bgColor-closed-emphasis: var(--bgColor-danger-emphasis);
     --bgColor-closed-muted: var(--bgColor-danger-muted);
@@ -2109,12 +2101,12 @@
     --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
     --borderColor-upsell-muted: var(--borderColor-done-muted);
     --button-danger-bgColor-active: var(--bgColor-danger-emphasis);
-    --button-danger-bgColor-hover: var(--bgColor-danger-emphasis);
     --button-danger-bgColor-rest: var(--control-bgColor-rest);
     --button-danger-fgColor-active: var(--base-color-neutral-13);
     --button-danger-fgColor-disabled: #ff949280;
     --button-danger-fgColor-hover: var(--base-color-neutral-13);
     --button-danger-iconColor-hover: var(--base-color-neutral-13);
+    --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
     --button-default-bgColor-active: var(--control-bgColor-active);
     --button-default-bgColor-hover: var(--control-bgColor-hover);
     --button-default-bgColor-rest: var(--control-bgColor-rest);
@@ -2125,6 +2117,8 @@
     --button-outline-bgColor-hover: var(--control-bgColor-hover);
     --button-outline-fgColor-active: var(--base-color-neutral-13);
     --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
+    --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
+    --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
     --button-primary-fgColor-disabled: #ffffff66;
     --buttonCounter-danger-bgColor-disabled: #ad01160d;
     --buttonCounter-danger-bgColor-hover: #01040926;
@@ -2140,6 +2134,11 @@
     --codeMirror-gutterMarker-fgColor-muted: var(--fgColor-muted);
     --codeMirror-lineNumber-fgColor: var(--fgColor-muted);
     --color-ansi-white-bright: var(--base-color-neutral-13);
+    --contribution-default-bgColor-0: var(--base-color-neutral-0);
+    --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
+    --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
+    --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
+    --contribution-default-borderColor-4: var(--contribution-default-borderColor-0);
     --control-bgColor-disabled: var(--bgColor-disabled);
     --control-bgColor-selected: var(--control-bgColor-rest);
     --control-borderColor-danger: var(--borderColor-danger-emphasis);
@@ -2193,6 +2192,7 @@
     --topicTag-borderColor: var(--borderColor-accent-emphasis);
     --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
     --underlineNav-iconColor-rest: var(--fgColor-muted);
+    --avatar-borderColor: var(--borderColor-emphasis);
     --border-closed-emphasis: var(--border-danger-emphasis);
     --border-closed-muted: var(--border-danger-muted);
     --border-emphasis: 0.0625rem solid #b7bdc8;