update misc variables: box-shadow, tooltip, & btn—to use color variables

Author: broccolini

packages/primer-support/lib/variables/misc.scss

@@ -12,15 +12,15 @@ $border-radius: 3px !default;
 $exploregrid-item-border-radius: 4px;
 
 // Box shadow
-$box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !default;
-$box-shadow-medium: 0 1px 5px rgba(0, 0, 0, 0.15) !default;
-$box-shadow-large: 0 1px 15px rgba(0, 0, 0, 0.15) !default;
-$box-shadow-extra-large: 0 10px 50px rgba(0, 0, 0, 0.07) !default;
+$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;
 
 // Tooltips
 $tooltip-max-width: 250px !default;
-$tooltip-background-color: rgba(0, 0, 0, 0.8) !default;
-$tooltip-text-color: #fff !default;
+$tooltip-background-color: rgba($black, 0.8) !default;
+$tooltip-text-color: $white !default;
 $tooltip-delay: 0.4s !default;
 $tooltip-duration: 0.1s !default;
 
@@ -37,9 +37,4 @@ $max_tab_size: 12;
 // Button and form variables
 $form-control-shadow: inset 0 1px 2px rgba($black, 0.075);
 $btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3);
-$btn-active-shadow: inset 0 0.15em 0.3em rgba($black, 0.15);
-
-$btn-shadow-inner: inset 0 -1px 0 rgba($black, 0.15);
-$btn-shadow-outer: 0 1px 2px rgba($black, 0.15);
-$btn-shadow-hover: 0 6px 10px rgba($black, 0.15);
-$btn-shadow-active-inner: inset 0 0.125em 0.25em rgba($black, 0.25);
+$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15;