convert modal backdrop to dark (#6123)

frontend/src/metabase/css/components/modal.css

+:root {
+  --modal-background-color: rgba(46, 53, 59, 0.6);
+  --modal-background-color-transition: rgba(46, 53, 59, 0.01);
+}
+
 .ModalContainer {
-    z-index: 4;
+  z-index: 4;
 }
 
 .Modal {
@@ -12,9 +17,9 @@
 
 /* On IE11, single flex item with `margin: auto` gets shifted to flex end
  * https://github.com/philipwalton/flexbugs/issues/157
- * Set margin to zero when using Flexbox in `WindowModal` component 
+ * Set margin to zero when using Flexbox in `WindowModal` component
  */
-.Modal-backdrop > .Modal, .Modal-backdrop--dark > .Modal {
+.Modal-backdrop > .Modal {
   margin: 0;
 }
 
@@ -37,11 +42,7 @@
 }
 
 .Modal-backdrop {
-    background-color: rgba(255, 255, 255, 0.6);
-}
-
-.Modal-backdrop--dark {
-    background-color: rgba(75, 75, 75, 0.7);
+  background-color: var(--modal-background-color);
 }
 
 /* TRANSITIONS */
@@ -51,21 +52,21 @@
 .Modal-backdrop.Modal-appear,
 .Modal-backdrop.Modal-enter {
   transition: background-color 200ms ease-in-out;
-  background-color: rgba(255, 255, 255, 0.01);
+  background-color: var(--modal-background-color-transition);
 }
 
 .Modal-backdrop.Modal-appear-active,
 .Modal-backdrop.Modal-enter-active {
-  background-color: rgba(255, 255, 255, 0.6);
+  background-color: var(--modal-background-color);
 }
 
 .Modal-backdrop.Modal-leave {
   transition: background-color 200ms ease-in-out 100ms;
-  background-color: rgba(255, 255, 255, 0.6);
+  background-color: var(--modal-background-color);
 }
 
 .Modal-backdrop.Modal-leave-active {
-  background-color: rgba(255, 255, 255, 0.01);
+  background-color: var(--modal-background-color-transition);
 }
 
 

frontend/src/metabase/query_builder/components/QueryModeButton.jsx

@@ -59,7 +59,7 @@ export default class QueryModeButton extends Component {
                     </span>
                 </Tooltip>
 
-                <Modal medium backdropClassName="Modal-backdrop--dark" isOpen={this.state.isOpen} onClose={() => this.setState({isOpen: false})}>
+                <Modal medium isOpen={this.state.isOpen} onClose={() => this.setState({isOpen: false})}>
                     <div className="p4">
                         <div className="mb3 flex flex-row flex-full align-center justify-between">
                             <h2>{capitalize(nativeQueryName)} for this question</h2>