From 379ea239366b6155eb147395421392a3d16e689b Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 7 Aug 2023 12:04:59 -0400
Subject: [PATCH] fix(Modal): ensure dropdown menu layer is correct (#14303)

* fix(Modal): ensure dropdown menu layer is correct

* style(Modal): add more overrides for Dropdown in dark theme
---
 .../styles/scss/components/modal/_modal.scss  | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
index 0f2c191dafc4..971aabcfdbb1 100644
--- 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