[6.0] Improves dark theme support in the filter editor (#13522) (#13578)

* Improves dark theme support in the filter editor (#13522)

Fixes #12955

* Added dark theme support to the ui framework modal component
* Also fixed z-index issue where dashboard panels would appear above the filter editor modal when the user moved or resized the panel (see gif below)

* Fix example

src/core_plugins/kibana/public/dashboard/styles/index.less

@@ -81,6 +81,7 @@ dashboard-grid {
   display: block;
   margin: 0;
   padding: 5px;
+  z-index: @dashboardGridDepth;
 }
 
 .start-screen {

src/ui/public/styles/variables/depth.less

@@ -1,5 +1,7 @@
 /**
  * 1. The local nav contains tooltips which should pop over the filter bar.
+ * 2. The filter and local nav components should always appear above the dashboard grid items.
  */
-@filterBarDepth: 1; /* 1 */
+@filterBarDepth: 2; /* 1 */
 @localNavDepth: 3; /* 1 */
+@dashboardGridDepth: 1; /* 2 */

ui_framework/components/modal/_index.scss

@@ -4,5 +4,9 @@ $modalBackgroundColor: #FFF;
 $modalOverlayBackground: rgba(#000000, 0.5);
 $globalModalDepth: 1000;
 
+// Dark theme colors
+$modalBorderColor--darkTheme: #000;
+$modalBackgroundColor--darkTheme: #525252;
+
 @import "modal_overlay";
 @import "modal";

ui_framework/components/modal/_modal.scss

@@ -5,6 +5,11 @@
   border-radius: $globalBorderRadius;
   box-shadow: $globalBoxShadow;
   z-index: $globalModalDepth + 1;
+
+  @include darkTheme {
+    background-color: $modalBackgroundColor--darkTheme;
+    border-color: $modalBorderColor--darkTheme;
+  }
 }
 
 .kuiModalHeader {
@@ -14,10 +19,18 @@
   padding: $modalPadding;
   padding-left: $modalPadding * 2;
   border-bottom: $globalBorderThin;
+
+  @include darkTheme {
+    border-bottom-color: $modalBorderColor--darkTheme;
+  }
 }
 
   .kuiModalHeader__title {
     font-size: $globalTitleFontSize;
+
+    @include darkTheme {
+      color: $globalTextColor--darkTheme;
+    }
   }
 
 .kuiModalHeaderCloseButton {
@@ -31,13 +44,17 @@
 
 .kuiModalBodyText {
   font-size: 14px;
+
+  @include darkTheme {
+    color: $globalTextColor--darkTheme;
+  }
 }
 
 .kuiModalFooter {
   display: flex;
   justify-content: flex-end;
   padding: $modalPadding * 2;
-  padding-top:: $modalPadding;
+  padding-top: $modalPadding;
 
   > * + * {
     margin-left: 5px;

ui_framework/dist/ui_framework.css

@@ -2490,6 +2490,9 @@ main {
   border-radius: 4px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
   z-index: 1001; }
+  .theme-dark .kuiModal {
+    background-color: #525252;
+    border-color: #000; }
 
 .kuiModalHeader {
   display: -webkit-box;
@@ -2507,9 +2510,13 @@ main {
   padding: 10px;
   padding-left: 20px;
   border-bottom: 1px solid #D9D9D9; }
+  .theme-dark .kuiModalHeader {
+    border-bottom-color: #000; }
 
 .kuiModalHeader__title {
   font-size: 18px; }
+  .theme-dark .kuiModalHeader__title {
+    color: #cecece; }
 
 .kuiModalHeaderCloseButton {
   display: inline-block;
@@ -2533,6 +2540,8 @@ main {
 
 .kuiModalBodyText {
   font-size: 14px; }
+  .theme-dark .kuiModalBodyText {
+    color: #cecece; }
 
 .kuiModalFooter {
   display: -webkit-box;

ui_framework/doc_site/src/views/modal/modal_example.js

@@ -43,6 +43,16 @@ export default props => (
             title="Confirm Modal Title"
           />
       </GuideDemo>
+      <GuideDemo isDarkTheme>
+        <KuiConfirmModal
+          onCancel={() => {}}
+          onConfirm={() => {}}
+          confirmButtonText="Confirm"
+          cancelButtonText="Cancel"
+          message="This is a confirmation modal"
+          title="Confirm Modal Title"
+        />
+      </GuideDemo>
     </GuideSection>
 
     <GuideSection