Fix a few regressions

src/avatars/avatar-stack.scss

@@ -33,7 +33,7 @@
     // stylelint-disable-next-line primer/spacing
     margin-right: -11px;
     background-color: var(--color-bg-canvas);
-    border-right: $border-width $border-style var(--color-border-white);
+    border-right: $border-width $border-style var(--color-bg-canvas);
     // stylelint-disable-next-line primer/borders
     border-radius: $border-radius-1;
     transition: margin 0.1s ease-in-out;
@@ -91,7 +91,7 @@
     content: "";
     // stylelint-disable-next-line primer/borders
     border-radius: 2px;
-    outline: $border-width $border-style var(--color-border-inverse);
+    outline: $border-width $border-style var(--color-bg-canvas);
   }
 
   &::before {

src/box/box.scss

@@ -268,7 +268,7 @@
 // Box row highlight themes
 
 .Box-row--yellow {
-  background-color: var(--color-bg-warning);
+  background-color: var(--color-scale-yellow-1);
 }
 
 .Box-row--blue {

src/dropdown/dropdown.scss

@@ -19,7 +19,6 @@
 // Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which
 // way the menu should render from the element triggering it.
 
-.dropdown-menu-dark, // TODO: Deprecate
 .dropdown-menu {
   position: absolute;
   top: 100%;
@@ -260,3 +259,71 @@
     left: 10px;
   }
 }
+
+// Dark dropdowns
+// TODO: Deprecate
+
+.dropdown-menu-dark {
+  color: $text-white;
+  // stylelint-disable-next-line primer/colors
+  background: $gray-800;
+  border-color: $border-gray-darker;
+  box-shadow: $box-shadow-large;
+
+  &::before {
+    border-bottom-color: $border-gray-darker;
+  }
+
+  &::after {
+    // stylelint-disable-next-line primer/borders
+    border-bottom-color: $gray-800;
+  }
+
+  .dropdown-header {
+    // stylelint-disable-next-line primer/colors
+    color: $gray-300;
+  }
+
+  .dropdown-divider {
+    border-top-color: $border-gray-darker;
+  }
+
+  .dropdown-item {
+    color: inherit;
+  }
+
+  // Directional classes
+
+  &.dropdown-menu-w {
+    &::before {
+      border-color: transparent transparent transparent $border-gray-darker;
+    }
+
+    &::after {
+      // stylelint-disable-next-line primer/borders
+      border-color: transparent transparent transparent $gray-800;
+    }
+  }
+
+  &.dropdown-menu-e {
+    &::before {
+      border-color: transparent $border-gray-darker transparent transparent;
+    }
+
+    &::after {
+      // stylelint-disable-next-line primer/borders
+      border-color: transparent $gray-800 transparent transparent;
+    }
+  }
+
+  &.dropdown-menu-ne {
+    &::before {
+      border-color: $border-gray-darker transparent transparent transparent;
+    }
+
+    &::after {
+      // stylelint-disable-next-line primer/borders
+      border-color: $gray-800 transparent transparent transparent;
+    }
+  }
+}

src/forms/form-control.scss

@@ -15,7 +15,6 @@ label {
   font-weight: $font-weight-bold;
 }
 
-.input-dark, // TODO: deprecate
 .form-control,
 .form-select {
   // stylelint-disable-next-line primer/spacing
@@ -69,9 +68,32 @@ textarea.form-control {
   &:focus { background-color: var(--color-bg-primary); }
 }
 
+// Inputs to be used against dark backgrounds.
+// TODO: Deprecate
+.input-dark {
+  color: $text-white;
+  // stylelint-disable-next-line primer/colors
+  background-color: $white-fade-15;
+  border-color: transparent;
+  box-shadow: none;
+
+  &::placeholder {
+    color: inherit;
+    opacity: 0.6; // inceases contrast ratio to 4.52
+  }
+
+  &.focus,
+  &:focus {
+    // stylelint-disable-next-line primer/borders
+    border-color: $black-fade-30;
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: var(--color-input-shadow-focus);
+  }
+}
+
 // Custom styling for HTML5 validation bubbles (WebKit only)
 ::placeholder {
-  color: var(--color-text-tertiary);
+  color: var(--color-text-placeholder);
   opacity: 1; // override opacity in normalize.css
 }
 

src/forms/form-group.scss

@@ -239,15 +239,14 @@
 
     .error {
       background-color: var(--color-bg-danger);
-      border-color: var(--color-border-danger);
+      border-color: var(--color-scale-red-3); // stylelint-disable-line primer/borders
 
       &::after {
-        // stylelint-disable-next-line primer/borders
+        border-bottom-color: var(--color-bg-danger); // stylelint-disable-line primer/borders
-        border-bottom-color: var(--color-bg-danger);
       }
 
       &::before {
-        border-bottom-color: var(--color-border-danger);
+        border-bottom-color: var(--color-scale-red-3); // stylelint-disable-line primer/borders
       }
     }
   }