From 4845321b431f539faeb6fb4083b2d7dbb6f3028a Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 11 Mar 2020 09:30:08 +0100
Subject: [PATCH] Modals: Unify angular/react modals backdrop color (#22708)

---
 .../src/components/Modal/getModalStyles.ts    | 122 ++++++++++--------
 .../src/themes/_variables.dark.scss.tmpl.ts   |   2 +-
 public/sass/_variables.dark.generated.scss    |   2 +-
 3 files changed, 67 insertions(+), 59 deletions(-)

diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
index 2a6d2946dee..d36f653640c 100644
--- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts
+++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
@@ -1,60 +1,68 @@
 import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
-import { stylesFactory } from '../../themes';
+import { selectThemeVariant, stylesFactory } from '../../themes';
 
-export const getModalStyles = stylesFactory((theme: GrafanaTheme) => ({
-  modal: css`
-    position: fixed;
-    z-index: ${theme.zIndex.modal};
-    background: ${theme.colors.pageBg};
-    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-    background-clip: padding-box;
-    outline: none;
-    width: 750px;
-    max-width: 100%;
-    left: 0;
-    right: 0;
-    margin-left: auto;
-    margin-right: auto;
-    top: 10%;
-  `,
-  modalBackdrop: css`
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: ${theme.zIndex.modalBackdrop};
-    background-color: ${theme.colors.blueFaint};
-    opacity: 0.8;
-    backdrop-filter: blur(4px);
-  `,
-  modalHeader: css`
-    background: ${theme.background.pageHeader};
-    box-shadow: ${theme.shadow.pageHeader};
-    border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
-    display: flex;
-  `,
-  modalHeaderTitle: css`
-    font-size: ${theme.typography.heading.h3};
-    padding-top: ${theme.spacing.sm};
-    margin: 0 ${theme.spacing.md};
-  `,
-  modalHeaderIcon: css`
-    margin-right: ${theme.spacing.md};
-    font-size: inherit;
-    &:before {
-      vertical-align: baseline;
-    }
-  `,
-  modalHeaderClose: css`
-    margin-left: auto;
-    padding: 9px ${theme.spacing.d};
-  `,
-  modalContent: css`
-    padding: calc(${theme.spacing.d} * 2);
-    overflow: auto;
-    width: 100%;
-    max-height: calc(90vh - ${theme.spacing.d} * 2);
-  `,
-}));
+export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
+  const backdropBackground = selectThemeVariant(
+    {
+      light: theme.colors.bodyBg,
+      dark: theme.colors.gray25,
+    },
+    theme.type
+  );
+  return {
+    modal: css`
+      position: fixed;
+      z-index: ${theme.zIndex.modal};
+      background: ${theme.colors.pageBg};
+      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+      background-clip: padding-box;
+      outline: none;
+      width: 750px;
+      max-width: 100%;
+      left: 0;
+      right: 0;
+      margin-left: auto;
+      margin-right: auto;
+      top: 10%;
+    `,
+    modalBackdrop: css`
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: ${theme.zIndex.modalBackdrop};
+      background-color: ${backdropBackground};
+      opacity: 0.7;
+    `,
+    modalHeader: css`
+      background: ${theme.background.pageHeader};
+      box-shadow: ${theme.shadow.pageHeader};
+      border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
+      display: flex;
+    `,
+    modalHeaderTitle: css`
+      font-size: ${theme.typography.heading.h3};
+      padding-top: ${theme.spacing.sm};
+      margin: 0 ${theme.spacing.md};
+    `,
+    modalHeaderIcon: css`
+      margin-right: ${theme.spacing.md};
+      font-size: inherit;
+      &:before {
+        vertical-align: baseline;
+      }
+    `,
+    modalHeaderClose: css`
+      margin-left: auto;
+      padding: 9px ${theme.spacing.d};
+    `,
+    modalContent: css`
+      padding: calc(${theme.spacing.d} * 2);
+      overflow: auto;
+      width: 100%;
+      max-height: calc(90vh - ${theme.spacing.d} * 2);
+    `,
+  };
+});
diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
index 8cc1b6cf4ef..9e33479dcea 100644
--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -127,7 +127,7 @@ $divider-border-color: $gray-1;
 $tight-form-func-bg: $dark-9;
 $tight-form-func-highlight-bg: $dark-10;
 
-$modal-backdrop-bg: #353c42;
+$modal-backdrop-bg: #343b40;
 $code-tag-bg: $dark-1;
 $code-tag-border: $dark-9;
 
diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss
index 26d593b0586..0dd4105d78f 100644
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -130,7 +130,7 @@ $divider-border-color: $gray-1;
 $tight-form-func-bg: $dark-9;
 $tight-form-func-highlight-bg: $dark-10;
 
-$modal-backdrop-bg: #353c42;
+$modal-backdrop-bg: #343b40;
 $code-tag-bg: $dark-1;
 $code-tag-border: $dark-9;