From 805cfbd7c882f2b59b223147d456150f7979480e Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Wed, 7 Oct 2020 15:29:40 +0900
Subject: [PATCH] Update borders, states and more

Follows the changes from https://github.com/primer/primitives/pull/21/files
---
 package-lock.json                  |  6 +++---
 package.json                       |  2 +-
 src/autocomplete/autocomplete.scss |  2 +-
 src/autocomplete/suggester.scss    |  4 ++--
 src/base/base.scss                 |  2 +-
 src/base/kbd.scss                  |  6 +++---
 src/blankslate/blankslate.scss     |  2 +-
 src/markdown/headings.scss         |  4 ++--
 src/navigation/menu.scss           |  4 ++--
 src/navigation/sidenav.scss        |  2 +-
 src/navigation/subnav.scss         |  2 +-
 src/navigation/underline-nav.scss  |  4 ++--
 src/pagination/pagination.scss     |  2 +-
 src/select-menu/select-menu.scss   | 22 +++++++++++-----------
 src/support/variables/colors.scss  |  2 +-
 src/utilities/colors.scss          |  2 --
 16 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 861d965c..913d1516 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2680,9 +2680,9 @@
       }
     },
     "@primer/primitives": {
-      "version": "0.0.0-e66591e",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-e66591e.tgz",
-      "integrity": "sha512-HBRA0WnUDY56L3cjStiq4dC1elei/7b1WfB2yOeFlbi924UxJJkV+R0eLgWshkUo4+Mr+q/1qLHf/O3Pb4AcWw=="
+      "version": "0.0.0-4813158",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-4813158.tgz",
+      "integrity": "sha512-GTIs1uOeukZY0L+cjvDy4iVkcYHL7iSSvYN1FGm+O5UPP0Use7lI7F8Oca5O0kxxc/ASmRIR/Ls7XJlrkWtAjw=="
     },
     "@reach/router": {
       "version": "1.3.3",
diff --git a/package.json b/package.json
index f4a32b4a..fb016345 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@primer/octicons": "^9.1.1",
-    "@primer/primitives": "0.0.0-e66591e"
+    "@primer/primitives": "0.0.0-4813158"
   },
   "devDependencies": {
     "@octokit/rest": "^16.34.0",
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index f709ce6b..6d156181 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -38,7 +38,7 @@
   &.navigation-focus {
     color: var(--color-text-inverse);
     text-decoration: none;
-    background-color: var(--color-bg-selected);
+    background-color: var(--color-state-selected-primary-bg);
 
     // Inherit color on all child elements to ensure enough contrast
     * {
diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss
index be8f19ad..d7f6e4f0 100644
--- a/src/autocomplete/suggester.scss
+++ b/src/autocomplete/suggester.scss
@@ -20,7 +20,7 @@
     display: block;
     padding: $spacer-1 $spacer-2;
     font-weight: $font-weight-semibold;
-    border-bottom: $border-width $border-style var(--color-border-primary-light);
+    border-bottom: $border-width $border-style var(--color-border-secondary);
 
     small {
       font-weight: $font-weight-normal;
@@ -43,7 +43,7 @@
     &.navigation-focus {
       color: var(--color-text-inverse);
       text-decoration: none;
-      background: var(--color-bg-selected);
+      background: var(--color-state-selected-primary-bg);
 
       small {
         color: var(--color-text-inverse);
diff --git a/src/base/base.scss b/src/base/base.scss
index 21261143..efbbf4be 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -45,7 +45,7 @@ hr,
   overflow: hidden;
   background: transparent;
   border: 0;
-  border-bottom: $border-width $border-style var(--color-border-secondary);
+  border-bottom: $border-width $border-style var(--color-border-tertiary);
   @include clearfix();
 }
 
diff --git a/src/base/kbd.scss b/src/base/kbd.scss
index 794b7aa4..d51b921a 100644
--- a/src/base/kbd.scss
+++ b/src/base/kbd.scss
@@ -13,9 +13,9 @@ kbd {
   vertical-align: middle;
   background-color: var(--color-bg-tertiary);
   // stylelint-disable-next-line primer/borders
-  border: $border-style $border-width var(--color-border-secondary);
-  border-bottom-color: var(--color-border-secondary);
+  border: $border-style $border-width var(--color-border-tertiary);
+  border-bottom-color: var(--color-border-tertiary);
   border-radius: $border-radius;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-border-secondary);
+  box-shadow: inset 0 -1px 0 var(--color-border-tertiary);
 }
diff --git a/src/blankslate/blankslate.scss b/src/blankslate/blankslate.scss
index df633fb6..874af262 100644
--- a/src/blankslate/blankslate.scss
+++ b/src/blankslate/blankslate.scss
@@ -9,7 +9,7 @@
     padding: 2px 5px 3px;
     font-size: $h5-size;
     background: var(--color-bg-canvas);
-    border: $border-width $border-style var(--color-border-tertiary);
+    border: $border-width $border-style var(--color-auto-gray-0);
     border-radius: $border-radius;
   }
 
diff --git a/src/markdown/headings.scss b/src/markdown/headings.scss
index 97a88130..3cd86e98 100644
--- a/src/markdown/headings.scss
+++ b/src/markdown/headings.scss
@@ -39,7 +39,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 2em;
-    border-bottom: $border-width $border-style var(--color-border-primary-light);
+    border-bottom: $border-width $border-style var(--color-border-secondary);
   }
 
   h2 {
@@ -47,7 +47,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 1.5em;
-    border-bottom: $border-width $border-style var(--color-border-primary-light);
+    border-bottom: $border-width $border-style var(--color-border-secondary);
   }
 
   h3 {
diff --git a/src/navigation/menu.scss b/src/navigation/menu.scss
index 347e98bc..5306cc13 100644
--- a/src/navigation/menu.scss
+++ b/src/navigation/menu.scss
@@ -15,7 +15,7 @@
   display: block;
   padding: $spacer-2 $spacer-3;
   color: var(--color-text-primary);
-  border-bottom: $border-width $border-style var(--color-border-primary-light);
+  border-bottom: $border-width $border-style var(--color-border-secondary);
 
   &:first-child {
     border-top: 0;
@@ -100,7 +100,7 @@
   font-size: inherit;
   font-weight: $font-weight-bold;
   color: var(--color-text-primary);
-  border-bottom: $border-width $border-style var(--color-border-primary-light);
+  border-bottom: $border-width $border-style var(--color-border-secondary);
 
   &:hover {
     text-decoration: none;
diff --git a/src/navigation/sidenav.scss b/src/navigation/sidenav.scss
index 46256abe..2afbabfb 100644
--- a/src/navigation/sidenav.scss
+++ b/src/navigation/sidenav.scss
@@ -16,7 +16,7 @@
   text-align: left;
   background-color: transparent;
   border: 0;
-  border-top: $border-width $border-style var(--color-border-primary-light);
+  border-top: $border-width $border-style var(--color-border-secondary);
 
   &:first-child {
     border-top: 0;
diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss
index 2aad11b1..21b82944 100644
--- a/src/navigation/subnav.scss
+++ b/src/navigation/subnav.scss
@@ -10,7 +10,7 @@
 .subnav-bordered {
   // stylelint-disable-next-line primer/spacing
   padding-bottom: 20px;
-  border-bottom: $border-width $border-style var(--color-border-primary-light);
+  border-bottom: $border-width $border-style var(--color-border-secondary);
 }
 
 .subnav-flush {
diff --git a/src/navigation/underline-nav.scss b/src/navigation/underline-nav.scss
index 6ec194f7..d249bd07 100644
--- a/src/navigation/underline-nav.scss
+++ b/src/navigation/underline-nav.scss
@@ -28,7 +28,7 @@
   &:hover,
   &:focus {
     text-decoration: none;
-    border-bottom-color: var(--color-border-secondary);
+    border-bottom-color: var(--color-border-tertiary);
     outline: 1px dotted transparent; // Support Firfox custom colors
     outline-offset: -1px;
     transition-timing-function: ease-out;
@@ -45,7 +45,7 @@
     outline-offset: -1px;
 
     .UnderlineNav-octicon {
-      color: var(--color-text-secondary);
+      color: var(--color-text-tertiary);
     }
   }
 }
diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss
index f39f4116..f6e013ab 100644
--- a/src/pagination/pagination.scss
+++ b/src/pagination/pagination.scss
@@ -30,7 +30,7 @@
     }
 
     &:active {
-      border-color: var(--color-border-primary-light);
+      border-color: var(--color-border-secondary);
       transition: none;
     }
   }
diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss
index 861b41e3..3373ba72 100644
--- a/src/select-menu/select-menu.scss
+++ b/src/select-menu/select-menu.scss
@@ -103,7 +103,7 @@ $SelectMenu-max-height: 480px !default;
   padding: $spacer-3;
   flex: none; // fixes header from getting squeezed in Safari iOS
   align-items: center;
-  border-bottom: $border-width $border-style var(--color-border-primary-light);
+  border-bottom: $border-width $border-style var(--color-border-secondary);
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -144,7 +144,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-filter {
   padding: $spacer-3;
   margin: 0;
-  border-bottom: $border-width $border-style var(--color-border-primary-light);
+  border-bottom: $border-width $border-style var(--color-border-secondary);
 
   @include breakpoint(sm) {
     padding: $spacer-2;
@@ -192,7 +192,7 @@ $SelectMenu-max-height: 480px !default;
   cursor: pointer;
   background-color: var(--color-bg-primary);
   border: 0;
-  border-bottom: $border-width $border-style var(--color-border-primary-light);
+  border-bottom: $border-width $border-style var(--color-border-secondary);
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -234,7 +234,7 @@ $SelectMenu-max-height: 480px !default;
   overflow-x: auto;
   overflow-y: hidden;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-border-primary-light);
+  box-shadow: inset 0 -1px 0 var(--color-border-secondary);
   -webkit-overflow-scrolling: touch;
 
   // Hide scrollbar so it doesn't cover the text
@@ -257,7 +257,7 @@ $SelectMenu-max-height: 480px !default;
   background-color: transparent;
   border: 0;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-border-primary-light);
+  box-shadow: inset 0 -1px 0 var(--color-border-secondary);
 
   @include breakpoint(sm) {
     flex: none;
@@ -274,10 +274,10 @@ $SelectMenu-max-height: 480px !default;
     cursor: default;
     background-color: var(--color-bg-primary);
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0 1px var(--color-border-primary-light);
+    box-shadow: 0 0 0 1px var(--color-border-secondary);
 
     @include breakpoint(sm) {
-      border-color: var(--color-border-primary-light);
+      border-color: var(--color-border-secondary);
       box-shadow: none;
     }
   }
@@ -292,7 +292,7 @@ $SelectMenu-max-height: 480px !default;
   padding: 7px $spacer-3;
   text-align: center;
   background-color: var(--color-bg-primary);
-  border-bottom: $border-width $border-style var(--color-border-primary-light);
+  border-bottom: $border-width $border-style var(--color-border-secondary);
 }
 
 // Blankslate and Loading
@@ -317,11 +317,11 @@ $SelectMenu-max-height: 480px !default;
   font-weight: $font-weight-semibold;
   color: var(--color-text-tertiary);
   background-color: var(--color-bg-secondary);
-  border-bottom: $border-width $border-style var(--color-border-primary-light);
+  border-bottom: $border-width $border-style var(--color-border-secondary);
 
   // Borderless
   .SelectMenu-list--borderless & {
-    border-top: $border-width $border-style var(--color-border-primary-light);
+    border-top: $border-width $border-style var(--color-border-secondary);
 
     &:empty {
       padding: 0;
@@ -340,7 +340,7 @@ $SelectMenu-max-height: 480px !default;
   font-size: $font-size-small;
   color: var(--color-text-tertiary);
   text-align: center;
-  border-top: $border-width $border-style var(--color-border-primary-light);
+  border-top: $border-width $border-style var(--color-border-secondary);
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
diff --git a/src/support/variables/colors.scss b/src/support/variables/colors.scss
index dcee982e..b04e04ff 100644
--- a/src/support/variables/colors.scss
+++ b/src/support/variables/colors.scss
@@ -13,7 +13,7 @@ $border-black-fade:  $black-fade-15 !default;
 $border-white-fade:  $white-fade-15 !default;
 $border-gray-dark:   $gray-300 !default;
 $border-gray-darker: $gray-700 !default;
-$border-gray-light:  var(--color-border-primary-light) !default; // lighten($gray-200, 3%)
+$border-gray-light:  var(--color-border-secondary) !default; // lighten($gray-200, 3%)
 $border-gray:        $gray-200 !default;
 $border-blue:        $blue-500 !default;
 $border-blue-light:  $blue-200 !default;
diff --git a/src/utilities/colors.scss b/src/utilities/colors.scss
index c2e6db90..a09959f5 100644
--- a/src/utilities/colors.scss
+++ b/src/utilities/colors.scss
@@ -25,7 +25,6 @@
 
 // Border colors
 .border-primary         { border-color: var(--color-border-primary) !important; }
-.border-primary-light   { border-color: var(--color-border-primary-light) !important; }
 .border-secondary       { border-color: var(--color-border-secondary) !important; }
 .border-tertiary        { border-color: var(--color-border-tertiary) !important; }
 .border-inverse         { border-color: var(--color-border-inverse) !important; }
@@ -41,7 +40,6 @@
 .bg-secondary       { background-color: var(--color-bg-secondary) !important; }
 .bg-tertiary        { background-color: var(--color-bg-tertiary) !important; }
 .bg-overlay         { background-color: var(--color-bg-overlay) !important; }
-.bg-selected        { background-color: var(--color-bg-selected) !important; }
 .bg-info            { background-color: var(--color-bg-info) !important; }
 .bg-info-inverse    { background-color: var(--color-bg-info-inverse) !important; }
 .bg-danger          { background-color: var(--color-bg-danger) !important; }