Consolidate box-shadow mixins

src/styles/annotator/annotator.scss

@@ -2,7 +2,7 @@
 @use '../variables' as var;
 @use '../mixins/focus';
 @use '../mixins/reset';
-@use '../mixins/shadow';
+@use '../mixins/utils';
 
 // Shared components.
 @use '../components/svg-icon';
@@ -82,7 +82,7 @@ $sidebar-collapse-transition-time: 150ms;
     @include focus.outline-on-keyboard-focus;
 
     transition: background-color 0.25s;
-    @include shadow.smallshadow;
+    @include utils.shadow;
     background: var.$white;
     border: solid 1px var.$grey-3;
     border-radius: 4px;

src/styles/annotator/bucket-bar.scss

 @use "../mixins/reset";
-@use "../mixins/shadow";
+@use "../mixins/utils";
 @use "../variables" as var;
 
 // Bucket-bar styles are nested inside `.annotator-frame` to ensure they take
@@ -69,7 +69,7 @@
 
     &.lower,
     &.upper {
-      @include shadow.smallshadow;
+      @include utils.shadow;
       z-index: 1;
 
       &:before,

src/styles/mixins/molecules.scss

@@ -10,8 +10,8 @@
  */
 @mixin card-frame {
   @include utils.border;
+  @include utils.shadow;
   border-radius: 2px;
-  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
   background-color: var.$color-background;
 }
 
@@ -27,7 +27,7 @@
 
   &:hover,
   &.is-focused {
-    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
+    @include utils.active-shadow;
   }
 
   &--theme-clean {

src/styles/mixins/shadow.scss

-@mixin smallshadow($a: 0, $b: 1px, $c: 0.1) {
-  box-shadow: $a $b 1px hsla(0, 0%, 0%, $c);
-}

src/styles/mixins/utils.scss

@@ -73,3 +73,11 @@
   font-size: var.$font-size--large;
   font-weight: 500;
 }
+
+@mixin shadow {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+@mixin active-shadow {
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
+}

src/styles/sidebar/components/autocomplete-list.scss

 @use "../../variables" as var;
+@use "../../mixins/utils";
 
 .autocomplete-list {
   position: relative;
@@ -8,6 +9,7 @@
 }
 
 .autocomplete-list__items {
+  @include utils.shadow;
   @supports (clip-path: polygon(0 0, 100% 0, 0% 100%, 0% 100%)) {
     &:before {
       /**
@@ -34,7 +36,6 @@
   min-width: 10em;
   background-color: var.$white;
   border: 1px solid var.$grey-3;
-  box-shadow: var.$popup-menu-shadow;
   z-index: 10;
 
   @media (pointer: coarse) {

src/styles/sidebar/components/menu.scss

@@ -73,8 +73,8 @@
 .menu__content {
   @include utils.font--large;
   @include utils.border;
+  @include utils.shadow;
   background-color: white;
-  box-shadow: var.$popup-menu-shadow;
   position: absolute;
   top: calc(100% + 5px);
   z-index: 1;

src/styles/variables.scss

@@ -108,7 +108,6 @@ $zindex-tooltip: 20;
 // -------------------------
 $bucket-bar-width: 22px;
 $top-bar-height: 40px;
-$popup-menu-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 
 $color-border: $grey-3;
 $border-width: 1px;