🎨 Color Modes

src/autocomplete/autocomplete.scss

@@ -8,8 +8,8 @@
   // stylelint-disable-next-line primer/typography
   font-size: 13px;
   list-style: none;
-  background: var(--color-autocomplete-bg);
-  border: $border-width $border-style var(--color-autocomplete-border);
+  background: var(--color-bg-overlay);
+  border: $border-width $border-style var(--color-border-overlay);
   border-radius: $border-radius;
   box-shadow: var(--color-autocomplete-shadow);
 }
@@ -29,7 +29,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
-  background-color: var(--color-autocomplete-bg);
+  background-color: var(--color-bg-overlay);
   border: 0;
 
   &:hover {

src/autocomplete/suggester.scss

@@ -11,8 +11,8 @@
   margin-top: $spacer-4;
   list-style: none;
   cursor: pointer;
-  background: var(--color-autocomplete-bg);
-  border: $border-width $border-style var(--color-autocomplete-border);
+  background: var(--color-bg-overlay);
+  border: $border-width $border-style var(--color-border-overlay);
   border-radius: $border-radius;
   box-shadow: var(--color-autocomplete-shadow);
 

src/dropdown/dropdown.scss

@@ -30,9 +30,9 @@
   // stylelint-disable-next-line primer/spacing
   margin-top: 2px;
   list-style: none;
-  background-color: var(--color-dropdown-bg);
+  background-color: var(--color-bg-overlay);
   background-clip: padding-box;
-  border: $border-width $border-style var(--color-dropdown-border);
+  border: $border-width $border-style var(--color-border-overlay);
   border-radius: $border-radius;
   box-shadow: var(--color-dropdown-shadow);
 
@@ -47,15 +47,15 @@
   &::before {
     // stylelint-disable-next-line primer/borders
     border: $spacer-2 $border-style transparent;
-    border-bottom-color: var(--color-dropdown-border);
+    border-bottom-color: var(--color-border-overlay);
   }
 
   // caret background (should match dropdown background)
   &::after {
     // stylelint-disable-next-line primer/borders
     border: 7px $border-style transparent;
     // stylelint-disable-next-line primer/borders
-    border-bottom-color: var(--color-dropdown-bg);
+    border-bottom-color: var(--color-bg-overlay);
   }
 
   // stylelint-disable-next-line selector-max-type
@@ -113,7 +113,7 @@
   display: block;
   height: 0;
   margin: $spacer-2 0;
-  border-top: $border-width $border-style var(--color-dropdown-border);
+  border-top: $border-width $border-style var(--color-border-overlay);
 }
 
 .dropdown-header {
@@ -144,7 +144,7 @@
     right: -$spacer-3;
     left: auto;
     border-color: transparent;
-    border-left-color: var(--color-dropdown-border);
+    border-left-color: var(--color-border-overlay);
   }
 
   &::after {
@@ -153,7 +153,7 @@
     left: auto;
     border-color: transparent;
     // stylelint-disable-next-line primer/borders
-    border-left-color: var(--color-dropdown-bg);
+    border-left-color: var(--color-bg-overlay);
   }
 }
 
@@ -168,15 +168,15 @@
     top: 10px;
     left: -$spacer-3;
     border-color: transparent;
-    border-right-color: var(--color-dropdown-border);
+    border-right-color: var(--color-border-overlay);
   }
 
   &::after {
     top: 11px;
     left: -14px;
     border-color: transparent;
     // stylelint-disable-next-line primer/borders
-    border-right-color: var(--color-dropdown-bg);
+    border-right-color: var(--color-bg-overlay);
   }
 }
 
@@ -197,7 +197,7 @@
     bottom: -$spacer-2;
     left: 9px;
     // stylelint-disable-next-line primer/borders
-    border-top: $spacer-2 $border-style var(--color-dropdown-border);
+    border-top: $spacer-2 $border-style var(--color-border-overlay);
     // stylelint-disable-next-line primer/borders
     border-right: $spacer-2 $border-style transparent;
     border-bottom: 0;
@@ -209,7 +209,7 @@
     bottom: -7px;
     left: 10px;
     // stylelint-disable-next-line primer/borders
-    border-top: 7px $border-style var(--color-dropdown-bg);
+    border-top: 7px $border-style var(--color-bg-overlay);
     // stylelint-disable-next-line primer/borders
     border-right: 7px $border-style transparent;
     border-bottom: 0;

src/popover/popover.scss

@@ -24,7 +24,7 @@
     margin-left: -9px;
     // stylelint-disable-next-line primer/borders
     border: $spacer-2 $border-style transparent;
-    border-bottom-color: var(--color-popover-border);
+    border-bottom-color: var(--color-border-overlay);
   }
 
   &::after {
@@ -33,7 +33,12 @@
     // stylelint-disable-next-line primer/borders
     border: 7px $border-style transparent;
     // stylelint-disable-next-line primer/borders
-    border-bottom-color: var(--color-bg-primary);
+    border-bottom-color: var(--color-bg-overlay);
+  }
+
+  // TODO: Refactor so that .Popover is not dependant on .Box
+  &.Box {
+    background-color: var(--color-bg-overlay);
   }
 }
 
@@ -49,13 +54,13 @@
 
   &::before {
     bottom: -$spacer-3;
-    border-top-color: var(--color-popover-border);
+    border-top-color: var(--color-border-overlay);
   }
 
   &::after {
     bottom: -14px;
     // stylelint-disable-next-line primer/borders
-    border-top-color: var(--color-bg-primary);
+    border-top-color: var(--color-bg-overlay);
   }
 }
 
@@ -128,13 +133,13 @@
 .Popover-message--right-bottom {
   &::before {
     right: -$spacer-3;
-    border-left-color: var(--color-popover-border);
+    border-left-color: var(--color-border-overlay);
   }
 
   &::after {
     right: -14px;
     // stylelint-disable-next-line primer/borders
-    border-left-color: var(--color-bg-primary);
+    border-left-color: var(--color-bg-overlay);
   }
 }
 
@@ -144,13 +149,13 @@
 .Popover-message--left-bottom {
   &::before {
     left: -$spacer-3;
-    border-right-color: var(--color-popover-border);
+    border-right-color: var(--color-border-overlay);
   }
 
   &::after {
     left: -14px;
     // stylelint-disable-next-line primer/borders
-    border-right-color: var(--color-bg-primary);
+    border-right-color: var(--color-bg-overlay);
   }
 }
 

src/select-menu/select-menu.scss

@@ -61,7 +61,7 @@ $SelectMenu-max-height: 480px !default;
   overflow: hidden; // Enables border radius on scrollable child elements
   pointer-events: auto;
   flex-direction: column;
-  background-color: var(--color-select-menu-bg);
+  background-color: var(--color-bg-overlay);
   border: $border-width $border-style var(--color-select-menu-backdrop-border);
   // stylelint-disable-next-line primer/borders
   border-radius: $border-radius * 2;
@@ -88,7 +88,7 @@ $SelectMenu-max-height: 480px !default;
     max-height: $SelectMenu-max-height;
     margin: $spacer-2 0 $spacer-3 0;
     font-size: $font-size-small;
-    border-color: var(--color-select-menu-border);
+    border-color: var(--color-border-overlay);
     border-radius: $border-radius;
     box-shadow: var(--color-shadow-large);
     animation-name: SelectMenu-modal-animation--sm;
@@ -174,7 +174,7 @@ $SelectMenu-max-height: 480px !default;
   flex: auto;
   overflow-x: hidden;
   overflow-y: auto;
-  background-color: var(--color-select-menu-bg);
+  background-color: var(--color-bg-overlay);
   -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
 }
 
@@ -191,7 +191,7 @@ $SelectMenu-max-height: 480px !default;
   color: var(--color-text-primary);
   text-align: left;
   cursor: pointer;
-  background-color: var(--color-select-menu-bg);
+  background-color: var(--color-bg-overlay);
   border: 0;
   border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
 
@@ -273,7 +273,7 @@ $SelectMenu-max-height: 480px !default;
     z-index: 1; // Keeps box-shadow visible when hovering
     color: var(--color-text-primary);
     cursor: default;
-    background-color: var(--color-select-menu-bg);
+    background-color: var(--color-bg-overlay);
     // stylelint-disable-next-line primer/box-shadow
     box-shadow: 0 0 0 1px var(--color-select-menu-border-secondary);
 
@@ -292,7 +292,7 @@ $SelectMenu-max-height: 480px !default;
   // stylelint-disable-next-line primer/spacing
   padding: 7px $spacer-3;
   text-align: center;
-  background-color: var(--color-select-menu-bg);
+  background-color: var(--color-bg-overlay);
   border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
 }
 
@@ -304,7 +304,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-loading {
   padding: $spacer-4 $spacer-3;
   text-align: center;
-  background-color: var(--color-select-menu-bg);
+  background-color: var(--color-bg-overlay);
 }
 
 // Divider