From 325c04932c78bf3230df124a5f5aa5fa28ff1456 Mon Sep 17 00:00:00 2001
From: Matt Bargar <mbargar@gmail.com>
Date: Fri, 18 Aug 2017 11:05:40 -0400
Subject: [PATCH] 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)
---
 .../kibana/public/dashboard/styles/index.less |  1 +
 src/ui/public/styles/variables/depth.less     |  4 +++-
 ui_framework/dist/ui_framework.css            |  9 +++++++++
 .../doc_site/src/views/modal/modal_example.js |  3 +++
 ui_framework/src/components/modal/_index.scss |  4 ++++
 ui_framework/src/components/modal/_modal.scss | 19 ++++++++++++++++++-
 6 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less
index c437d450a2492..beeb23bc80607 100644
--- a/src/core_plugins/kibana/public/dashboard/styles/index.less
+++ b/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 {
diff --git a/src/ui/public/styles/variables/depth.less b/src/ui/public/styles/variables/depth.less
index 9ae4af17b93b1..6042068c111d7 100644
--- a/src/ui/public/styles/variables/depth.less
+++ b/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 */
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 369a303af80e6..8bc3e3f2017e0 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -2498,6 +2498,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;
@@ -2515,9 +2518,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;
@@ -2541,6 +2548,8 @@ main {
 
 .kuiModalBodyText {
   font-size: 14px; }
+  .theme-dark .kuiModalBodyText {
+    color: #cecece; }
 
 .kuiModalFooter {
   display: -webkit-box;
diff --git a/ui_framework/doc_site/src/views/modal/modal_example.js b/ui_framework/doc_site/src/views/modal/modal_example.js
index 411606adec4d7..d65e49cbfdea4 100644
--- a/ui_framework/doc_site/src/views/modal/modal_example.js
+++ b/ui_framework/doc_site/src/views/modal/modal_example.js
@@ -33,6 +33,9 @@ export default props => (
       <GuideDemo>
         <StaticConfirmModal />
       </GuideDemo>
+      <GuideDemo isDarkTheme>
+        <StaticConfirmModal />
+      </GuideDemo>
     </GuideSection>
 
     <GuideSection
diff --git a/ui_framework/src/components/modal/_index.scss b/ui_framework/src/components/modal/_index.scss
index 27506eaf74402..148cc029ebbd6 100644
--- a/ui_framework/src/components/modal/_index.scss
+++ b/ui_framework/src/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";
diff --git a/ui_framework/src/components/modal/_modal.scss b/ui_framework/src/components/modal/_modal.scss
index 501bb711e7467..f915c93ecfac6 100644
--- a/ui_framework/src/components/modal/_modal.scss
+++ b/ui_framework/src/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;