From cea7c54d8523441611a813733b4bd7b520f1e4b4 Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Fri, 2 Oct 2020 21:20:37 +0900
Subject: [PATCH] Fix a few regressions

---
 src/avatars/avatar-stack.scss |  4 +-
 src/box/box.scss              |  2 +-
 src/dropdown/dropdown.scss    | 69 ++++++++++++++++++++++++++++++++++-
 src/forms/form-control.scss   | 26 ++++++++++++-
 src/forms/form-group.scss     |  7 ++--
 5 files changed, 98 insertions(+), 10 deletions(-)

diff --git a/src/avatars/avatar-stack.scss b/src/avatars/avatar-stack.scss
index 42d2c651..3adea7d0 100644
--- a/src/avatars/avatar-stack.scss
+++ b/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 {
diff --git a/src/box/box.scss b/src/box/box.scss
index d6a7ed28..323b6f9b 100644
--- a/src/box/box.scss
+++ b/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 {
diff --git a/src/dropdown/dropdown.scss b/src/dropdown/dropdown.scss
index 303e18c3..3311aaea 100644
--- a/src/dropdown/dropdown.scss
+++ b/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;
+    }
+  }
+}
diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
index 302b24da..c52b537f 100644
--- a/src/forms/form-control.scss
+++ b/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
 }
 
diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss
index 4c1430b4..a6e4e8f3 100644
--- a/src/forms/form-group.scss
+++ b/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);
+        border-bottom-color: var(--color-bg-danger); // stylelint-disable-line primer/borders
       }
 
       &::before {
-        border-bottom-color: var(--color-border-danger);
+        border-bottom-color: var(--color-scale-red-3); // stylelint-disable-line primer/borders
       }
     }
   }