Merge pull request #1370 from primer/replace-border-overlay

Replace border-overlay with border-primary

Author: simurai

.changeset/khaki-lizards-report.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": major
+---
+
+Replace border-overlay with border-primary

docs/content/support/v16-migration.mdx

@@ -100,7 +100,6 @@ See [color utility classes](/utilities/colors) for a list of all the functional
 | `.border-yellow`                                                           | `.color-border-warning`   |
 | `.border-red`                                                              | `.color-border-danger`    |
 | `.border-white`                                                            | `.color-border-inverse`   |
-| n/a                                                                        | `.color-border-overlay`   |
 | `.border-gray-darker`                                                      | n/a                       |
 | `.border-blue-light`                                                       | n/a                       |
 | `.border-red-light`                                                        | n/a                       |
@@ -217,7 +216,6 @@ See [color system](/support/color-system) for a list of all the functional CSS v
 | `$border-green` (`$green-400`)                        | `var(--color-border-success)`   |
 | `$border-red` (`$red-500`)                            | `var(--color-border-danger)`    |
 | `$border-yellow` (`$yellow-600`)                      | `var(--color-border-warning)`   |
-| n/a                                                   | `var(--color-border-overlay)`   |
 | `$border-gray-darker` (`$gray-700`)                   | n/a                             |
 | `$border-blue-light` (`$blue-200`)                    | n/a                             |
 | `$border-red-light` (`$red-300`)                      | n/a                             |

src/autocomplete/autocomplete.scss

@@ -9,7 +9,7 @@
   font-size: 13px;
   list-style: none;
   background: var(--color-bg-overlay);
-  border: $border-width $border-style var(--color-border-overlay);
+  border: $border-width $border-style var(--color-border-primary);
   border-radius: $border-radius;
   box-shadow: var(--color-autocomplete-shadow);
 }

src/autocomplete/suggester.scss

@@ -12,7 +12,7 @@
   list-style: none;
   cursor: pointer;
   background: var(--color-bg-overlay);
-  border: $border-width $border-style var(--color-border-overlay);
+  border: $border-width $border-style var(--color-border-primary);
   border-radius: $border-radius;
   box-shadow: var(--color-autocomplete-shadow);
 

src/dropdown/dropdown.scss

@@ -32,7 +32,7 @@
   list-style: none;
   background-color: var(--color-bg-overlay);
   background-clip: padding-box;
-  border: $border-width $border-style var(--color-border-overlay);
+  border: $border-width $border-style var(--color-border-primary);
   border-radius: $border-radius;
   box-shadow: var(--color-dropdown-shadow);
 
@@ -47,7 +47,7 @@
   &::before {
     // stylelint-disable-next-line primer/borders
     border: $spacer-2 $border-style transparent;
-    border-bottom-color: var(--color-border-overlay);
+    border-bottom-color: var(--color-border-primary);
   }
 
   // caret background (should match dropdown background)
@@ -113,7 +113,7 @@
   display: block;
   height: 0;
   margin: $spacer-2 0;
-  border-top: $border-width $border-style var(--color-border-overlay);
+  border-top: $border-width $border-style var(--color-border-primary);
 }
 
 .dropdown-header {
@@ -144,7 +144,7 @@
     right: -$spacer-3;
     left: auto;
     border-color: transparent;
-    border-left-color: var(--color-border-overlay);
+    border-left-color: var(--color-border-primary);
   }
 
   &::after {
@@ -168,7 +168,7 @@
     top: 10px;
     left: -$spacer-3;
     border-color: transparent;
-    border-right-color: var(--color-border-overlay);
+    border-right-color: var(--color-border-primary);
   }
 
   &::after {
@@ -197,7 +197,7 @@
     bottom: -$spacer-2;
     left: 9px;
     // stylelint-disable-next-line primer/borders
-    border-top: $spacer-2 $border-style var(--color-border-overlay);
+    border-top: $spacer-2 $border-style var(--color-border-primary);
     // stylelint-disable-next-line primer/borders
     border-right: $spacer-2 $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-border-overlay);
+    border-bottom-color: var(--color-border-primary);
   }
 
   &::after {
@@ -54,7 +54,7 @@
 
   &::before {
     bottom: -$spacer-3;
-    border-top-color: var(--color-border-overlay);
+    border-top-color: var(--color-border-primary);
   }
 
   &::after {
@@ -133,7 +133,7 @@
 .Popover-message--right-bottom {
   &::before {
     right: -$spacer-3;
-    border-left-color: var(--color-border-overlay);
+    border-left-color: var(--color-border-primary);
   }
 
   &::after {
@@ -149,7 +149,7 @@
 .Popover-message--left-bottom {
   &::before {
     left: -$spacer-3;
-    border-right-color: var(--color-border-overlay);
+    border-right-color: var(--color-border-primary);
   }
 
   &::after {

src/select-menu/select-menu.scss

@@ -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-border-overlay);
+    border-color: var(--color-border-primary);
     border-radius: $border-radius;
     box-shadow: var(--color-shadow-large);
     animation-name: SelectMenu-modal-animation--sm;

src/utilities/colors.scss

@@ -24,7 +24,6 @@
 .color-border-primary   { border-color: var(--color-border-primary) !important; }
 .color-border-secondary { border-color: var(--color-border-secondary) !important; }
 .color-border-tertiary  { border-color: var(--color-border-tertiary) !important; }
-.color-border-overlay   { border-color: var(--color-border-overlay) !important; }
 .color-border-inverse   { border-color: var(--color-border-inverse) !important; }
 .color-border-info      { border-color: var(--color-border-info) !important; }
 .color-border-success   { border-color: var(--color-border-success) !important; }