Consolidate some box-shadow rules, colors, variables

Fixes #1537
hypothesis · Sep 15, 2020 · 06fe03c · 06fe03c
1 parent a8c4963
commit 06fe03c
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/src/styles/annotator/annotator.scss b/src/styles/annotator/annotator.scss
@@ -1,4 +1,5 @@
 @use "sass:meta";
+@use "sass:color";
 @use '../variables' as var;
 @use '../mixins/focus';
 @use '../mixins/reset';
@@ -13,6 +14,7 @@
 @use './highlights';
 
 $sidebar-collapse-transition-time: 150ms;
+$shadow--sidebar: 0px 1px 4px color.scale(var.$color-shadow, $alpha: -50%);
 
 // Sidebar
 .annotator-frame {
@@ -115,8 +117,9 @@ $sidebar-collapse-transition-time: 150ms;
     color: var.$grey-semi;
   }
 
+  /** Visible with clean theme */
   .annotator-frame-button--sidebar_close {
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.5);
+    box-shadow: $shadow--sidebar;
     border-radius: 0px;
     border-style: solid none solid solid;
     width: 27px;
@@ -126,8 +129,9 @@ $sidebar-collapse-transition-time: 150ms;
   }
 }
 
+/** Visible with clean theme */
 .annotator-frame--drop-shadow-enabled {
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+  box-shadow: $shadow--sidebar;
 }
 
 .annotator-placeholder {

diff --git a/src/styles/mixins/forms.scss b/src/styles/mixins/forms.scss
@@ -17,7 +17,7 @@
 
 @mixin focus-outline {
   border-color: var.$color-focus-outline;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.075) inset,
+  box-shadow: 0px 1px 2px var.$color-shadow--base inset,
     0px 0px 5px var.$color-focus-shadow;
 }
 

diff --git a/src/styles/mixins/utils.scss b/src/styles/mixins/utils.scss
@@ -75,9 +75,9 @@
 }
 
 @mixin shadow {
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 1px var.$color-shadow--base;
 }
 
 @mixin shadow--active {
-  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
+  box-shadow: 0px 2px 3px 0px var.$color-shadow--active;
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -48,6 +48,11 @@ $color-error: #d93c3f;
 $color-brand: #bd1c2b;
 $color-quote: #58cef4;
 
+$color-shadow: #000000;
+$color-shadow--base: color.scale($color-shadow, $alpha: -90%);
+$color-shadow--active: color.scale($color-shadow, $alpha: -85%);
+$color-shadow--sidebar: color.scale($color-shadow, $alpha: -50%);
+
 $color-focus-outline: #51a7e8;
 $color-focus-shadow: color.scale($color-focus-outline, $alpha: -50%);