fix(Modal): ensure dropdown menu layer is correct (#14303)

tw15egan · web-flow · commit 379ea239366b · 2023-08-07T16:04:59.000Z
* fix(Modal): ensure dropdown menu layer is correct

* style(Modal): add more overrides for Dropdown in dark theme
diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
@@ -67,6 +67,11 @@
       background-color: $field-02;
     }
 
+    // Override to align layer token with field
+    .#{$prefix}--list-box__menu {
+      background-color: $layer-02;
+    }
+
     .#{$prefix}--number__rule-divider {
       background-color: $border-subtle-02;
     }
@@ -77,12 +82,12 @@
 
     .#{$prefix}--list-box__menu-item:hover
       .#{$prefix}--list-box__menu-item__option {
-      border-top-color: $layer-hover;
+      border-top-color: $layer-hover-02;
     }
 
     .#{$prefix}--list-box__menu-item--active:hover
       .#{$prefix}--list-box__menu-item__option {
-      border-top-color: $layer-selected-hover;
+      border-top-color: $layer-selected-hover-02;
     }
 
     // Fluid inputs
@@ -106,6 +111,23 @@
       background-color: $field-01;
     }
 
+    // Override to align layer token with field
+    .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__menu {
+      background-color: $layer-01;
+    }
+
+    .#{$prefix}--list-box__menu-item:hover {
+      background-color: $layer-hover-02;
+    }
+
+    .#{$prefix}--list-box__menu-item--active {
+      background-color: $layer-selected-02;
+    }
+
+    .#{$prefix}--list-box__menu-item--active:hover {
+      background-color: $layer-selected-hover-02;
+    }
+
     .#{$prefix}--number-input--fluid
       .#{$prefix}--number__control-btn:hover::before,
     .#{$prefix}--number-input--fluid
