Merge pull request #1040 from primer/next-overlays

Refresh box-shadow and borders

Author: simurai

src/autocomplete/autocomplete.scss

@@ -11,7 +11,7 @@
   background: $bg-white;
   border-radius: $border-radius;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: 0 0 5px $black-fade-30;
+  box-shadow: inset 0 0 0 1px $border-color, $box-shadow-medium;
 }
 
 // One of the items that appears within an autocomplete group

src/autocomplete/suggester.scss

@@ -19,8 +19,8 @@
   li {
     display: block;
     padding: $spacer-1 $spacer-2;
-    font-weight: $font-weight-bold;
-    border-bottom: $border;
+    font-weight: $font-weight-semibold;
+    border-bottom: $border-width $border-style $border-gray-light;
 
     small {
       font-weight: $font-weight-normal;

src/box/box.scss

@@ -3,7 +3,7 @@
 
 .Box {
   background-color: $bg-white;
-  border: $border-width $border-style $border-gray-dark;
+  border: $border;
   border-radius: $border-radius;
 }
 
@@ -75,7 +75,7 @@
   // stylelint-disable-next-line primer/spacing
   margin: (-$border-width) (-$border-width) 0;
   background-color: $bg-gray;
-  border-color: $border-gray-dark;
+  border-color: $border-color;
   border-style: $border-style;
   border-width: $border-width;
   border-top-left-radius: $border-radius;
@@ -95,10 +95,8 @@
   &:last-of-type {
     // stylelint-disable-next-line primer/spacing
     margin-bottom: -$border-width;
-    // stylelint-disable-next-line primer/borders
-    border-bottom-right-radius: 2px;
-    // stylelint-disable-next-line primer/borders
-    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
   }
 }
 
@@ -108,21 +106,17 @@
   // stylelint-disable-next-line primer/spacing
   margin-top: -1px;
   list-style-type: none; // To account for applying Box component to a list
-  border-top: $border-width $border-style $border-gray;
+  border-top: $border;
 
   &:first-of-type {
     border-top-color: transparent;
-    // stylelint-disable-next-line primer/borders
-    border-top-left-radius: 2px;
-    // stylelint-disable-next-line primer/borders
-    border-top-right-radius: 2px;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
   }
 
   &:last-of-type {
-    // stylelint-disable-next-line primer/borders
-    border-bottom-right-radius: 2px;
-    // stylelint-disable-next-line primer/borders
-    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
   }
 
   // Adds a blue vertical line to the left of the row
@@ -216,7 +210,7 @@
   padding: $spacer-3;
   // stylelint-disable-next-line primer/spacing
   margin-top: -1px; // prevents double border when used with .Box-body
-  border-top: $border-width $border-style $border-gray;
+  border-top: $border;
 }
 
 // Option for a box with scrolling content

src/buttons/button.scss

@@ -69,8 +69,7 @@
   color: $text-gray-dark;
   background-color: $bg-gray-light;
   border-color: $border-color-button;
-  // stylelint-disable-next-line primer/box-shadow
-  box-shadow: 0 1px 0 rgba($gray-400, 0.1), inset 0 1px 0 rgba($white, 0.25);
+  box-shadow: $box-shadow, $box-shadow-highlight;
 
   &:focus,
   &.focus {
@@ -108,7 +107,7 @@
   $bg: #159739; // custom green
   $border-color: $green-600;
   $shadow: $green-900;
-  $box-shadow: 0 1px 0 rgba($shadow, 0.1), inset 0 1px 0 rgba($white, 0.03);
+  $box-shadow: $box-shadow, inset 0 1px 0 rgba($white, 0.03);
 
   $bg-hover: #138934; // custom green
   $border-hover: $green-700;
@@ -213,7 +212,7 @@
     color: rgba($color, 0.5);
     background-color: #f3f4f6;
     border-color: $border-color-button;
-    box-shadow: 0 1px 0 rgba($gray-400, 0.1), inset 0 1px 0 rgba($white, 0.25);
+    box-shadow: $box-shadow, $box-shadow-highlight;
   }
 
   .Counter {

src/buttons/misc.scss

@@ -77,8 +77,7 @@
   border-left: 0;
   border-top-right-radius: $border-radius;
   border-bottom-right-radius: $border-radius;
-  // stylelint-disable-next-line primer/box-shadow
-  box-shadow: 0 1px 0 rgba($gray-400, 0.1), inset 0 1px 0 rgba($white, 0.25);
+  box-shadow: $box-shadow, $box-shadow-highlight;
 
   &:hover,
   &:active {

src/dropdown/dropdown.scss

@@ -31,9 +31,8 @@
   list-style: none;
   background-color: $bg-white;
   background-clip: padding-box;
-  border: $border-width $border-style $border-black-fade;
-  // stylelint-disable-next-line primer/borders
-  border-radius: $spacer-1;
+  border: $border;
+  border-radius: $border-radius;
   box-shadow: $box-shadow-large;
 
   &::before,

src/select-menu/select-menu.scss

@@ -73,7 +73,7 @@ $SelectMenu-max-height: 480px !default;
   // stylelint-disable-next-line primer/borders
   border-radius: $border-radius * 2;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0 18px rgba($black, 0.4);
   animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
 
   @keyframes SelectMenu-modal-animation {
@@ -96,9 +96,9 @@ $SelectMenu-max-height: 480px !default;
     max-height: $SelectMenu-max-height;
     margin: $spacer-1 0 $spacer-3 0;
     font-size: $font-size-small;
-    border: $border-width $border-style $border-gray-dark;
+    border: $border;
     border-radius: $border-radius;
-    box-shadow: $box-shadow-medium;
+    box-shadow: $box-shadow-large;
     animation-name: SelectMenu-modal-animation--sm;
   }
 }

src/support/variables/misc.scss

@@ -8,10 +8,12 @@ $border: $border-width $border-color $border-style !default;
 $border-radius: 6px !default;
 
 // Box shadow
-$box-shadow: 0 1px 1px rgba($black, 0.1) !default;
-$box-shadow-medium: 0 1px 5px $black-fade-15 !default;
-$box-shadow-large: 0 1px 15px $black-fade-15 !default;
-$box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default;
+$box-shadow: 0 1px 0 rgba($gray-400, 0.1) !default;
+$box-shadow-medium: 0 3px 6px rgba($gray-400, 0.15) !default;
+$box-shadow-large: 0 8px 24px rgba($gray-400, 0.2) !default;
+$box-shadow-extra-large: 0 12px 48px rgba($gray-400, 0.3) !default;
+
+$box-shadow-highlight: inset 0 1px 0 rgba($white, 0.25) !default;
 
 // Focus shadow
 $focus-shadow: 0 0 0 3px rgba($border-blue, 0.3) !default;

src/toasts/toasts.scss

@@ -7,7 +7,7 @@
   background-color: $bg-white;
   border-radius: $border-radius;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 0 0 1px $border-gray-dark, $box-shadow-medium;
+  box-shadow: inset 0 0 0 1px $border-color, $box-shadow-large;
 
   @include breakpoint(sm) {
     width: max-content;