Refactor CSS night mode variables (#23958)

frontend/src/metabase/css/core/colors.css

@@ -39,10 +39,6 @@
   --color-saturated-purple: #885ab1;
   --color-saturated-red: #ed6e6e;
   --color-saturated-yellow: #f9cf48;
-
-  /* night mode colors */
-  --night-mode-color: color-mod(var(--color-text-white) alpha(-14%));
-  --night-mode-card: #42484e;
 }
 
 /* NOTE: DEPRECATED, replaced with colors above

frontend/src/metabase/css/dashboard.css

@@ -62,11 +62,6 @@
   stroke: none !important;
 }
 
-.Dashboard.Dashboard--night .DashCard .Card {
-  background-color: var(--night-mode-card);
-  border-color: var(--night-mode-card);
-}
-
 .Dashboard.Dashboard--night .enable-dots-onhover .dc-tooltip circle.dot:hover,
 .Dashboard.Dashboard--night .enable-dots .dc-tooltip circle.dot {
   fill: currentColor;
@@ -112,8 +107,6 @@
   left: 0;
   bottom: 0;
   right: 0;
-  background-color: white;
-  border: 1px solid var(--color-border);
 }
 
 .DashCard .Card.Card--slow {
@@ -158,7 +151,6 @@
 }
 
 .DashCard .Card {
-  border: none;
   border-radius: 8px;
   box-shadow: 0px 1px 3px var(--color-shadow);
 }

frontend/src/metabase/dashboard/components/DashCard.jsx

@@ -32,6 +32,7 @@ import _ from "underscore";
 import { getIn } from "icepick";
 import { getParameterValuesBySlug } from "metabase/parameters/utils/parameter-values";
 import Utils from "metabase/lib/utils";
+import { DashCardRoot } from "./DashCard.styled";
 
 const DATASET_USUALLY_FAST_THRESHOLD = 15 * 1000;
 
@@ -59,6 +60,7 @@ export default class DashCard extends Component {
     fetchCardData: PropTypes.func.isRequired,
     navigateToNewCardFromDashboard: PropTypes.func.isRequired,
     headerIcon: PropTypes.shape(iconPropTypes),
+    isNightMode: PropTypes.bool,
   };
 
   constructor(props) {
@@ -114,6 +116,7 @@ export default class DashCard extends Component {
       parameterValues,
       mode,
       headerIcon,
+      isNightMode,
     } = this.props;
 
     const mainCard = {
@@ -184,9 +187,9 @@ export default class DashCard extends Component {
     const gridSize = { width: dashcard.sizeX, height: dashcard.sizeY };
 
     return (
-      <div
+      <DashCardRoot
         className={cx(
-          "Card bordered rounded flex flex-column hover-parent hover--visibility",
+          "Card rounded flex flex-column hover-parent hover--visibility",
           {
             "Card--slow": isSlow === "usually-slow",
           },
@@ -196,6 +199,7 @@ export default class DashCard extends Component {
             ? { border: 0, background: "transparent", boxShadow: "none" }
             : null
         }
+        isNightMode={isNightMode}
       >
         {isEditingDashboardLayout ? (
           <DashboardCardActionsPanel onMouseDown={this.preventDragging}>
@@ -299,7 +303,7 @@ export default class DashCard extends Component {
           }
           onChangeLocation={this.props.onChangeLocation}
         />
-      </div>
+      </DashCardRoot>
     );
   }
 }

frontend/src/metabase/dashboard/components/DashCard.styled.tsx

+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { color } from "metabase/lib/colors";
+
+export interface DashCardRootProps {
+  isNightMode: boolean;
+}
+
+export const DashCardRoot = styled.div<DashCardRootProps>`
+  background-color: ${color("white")};
+
+  ${({ isNightMode }) =>
+    isNightMode &&
+    css`
+      border-color: ${color("bg-night")};
+      background-color: ${color("bg-night")};
+    `}
+`;

frontend/src/metabase/dashboard/components/Dashboard/Dashboard.jsx

@@ -313,6 +313,7 @@ class Dashboard extends Component {
                   {dashboardHasCards(dashboard) ? (
                     <DashboardGrid
                       {...this.props}
+                      isNightMode={shouldRenderAsNightMode}
                       onEditingChange={this.setEditing}
                     />
                   ) : (

frontend/src/metabase/dashboard/components/DashboardGrid.jsx

@@ -50,6 +50,7 @@ class DashboardGrid extends Component {
     isEditing: PropTypes.oneOfType([PropTypes.bool, PropTypes.object])
       .isRequired,
     isEditingParameter: PropTypes.bool.isRequired,
+    isNightMode: PropTypes.bool,
     dashboard: PropTypes.object.isRequired,
     parameterValues: PropTypes.object.isRequired,
 
@@ -286,6 +287,7 @@ class DashboardGrid extends Component {
         isEditing={this.props.isEditing}
         isEditingParameter={this.props.isEditingParameter}
         isFullscreen={this.props.isFullscreen}
+        isNightMode={this.props.isNightMode}
         isMobile={isMobile}
         onRemove={this.onDashCardRemove.bind(this, dc)}
         onAddSeries={this.onDashCardAddSeries.bind(this, dc)}

frontend/src/metabase/lib/colors/palette.ts

@@ -35,6 +35,7 @@ export const colors: ColorPalette = {
   "bg-light": "#F9FBFC",
   "bg-white": "#FFFFFF",
   "bg-yellow": "#FFFCF2",
+  "bg-night": "#42484E",
   shadow: "rgba(0,0,0,0.08)",
   border: "#EEECEC",
   "border-dark": "#C9CED3",