White background in pivot tables (#23624)

Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Gh0sT <coolmagnas@gmail.com>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: GitStart <1501599+gitstart@users.noreply.github.com>
Co-authored-by: Benjamin Mayanja <vibenjamin6@gmail.com>
Co-authored-by: Júlio Piubello da Silva Cabral <julio.piubello@gitstart.dev>

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Gh0sT <coolmagnas@gmail.com>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: Benjamin Mayanja <vibenjamin6@gmail.com>
Co-authored-by: Júlio Piubello da Silva Cabral <julio.piubello@gitstart.dev>

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

@@ -231,6 +231,7 @@ export default class DashCard extends Component {
           rawSeries={series}
           showTitle
           isFullscreen={isFullscreen}
+          isNightMode={isNightMode}
           isDashboard
           dispatch={this.props.dispatch}
           dashboard={dashboard}

frontend/src/metabase/visualizations/visualizations/PivotTable.jsx

@@ -28,10 +28,21 @@ import { findDOMNode } from "react-dom";
 import { connect } from "react-redux";
 import { PLUGIN_SELECTORS } from "metabase/plugins";
 
-const getBgLightColor = hasCustomColors =>
-  hasCustomColors ? darken("white", 0.01) : lighten("brand", 0.65);
-const getBgDarkColor = hasCustomColors =>
-  hasCustomColors ? darken("white", 0.035) : lighten("brand", 0.6);
+const getBgLightColor = (hasCustomColors, isNightMode) => {
+  if (isNightMode) {
+    return lighten("bg-black", 0.3);
+  }
+
+  return hasCustomColors ? darken("white", 0.01) : lighten("brand", 0.65);
+};
+
+const getBgDarkColor = (hasCustomColors, isNightMode) => {
+  if (isNightMode) {
+    return lighten("bg-black", 0.1);
+  }
+
+  return hasCustomColors ? darken("white", 0.035) : lighten("brand", 0.6);
+};
 
 const partitions = [
   {
@@ -244,6 +255,7 @@ class PivotTable extends Component {
       width,
       hasCustomColors,
       onUpdateVisualizationSettings,
+      isNightMode,
     } = this.props;
     if (data == null || !data.cols.some(isPivotGroupColumn)) {
       return null;
@@ -302,7 +314,7 @@ class PivotTable extends Component {
           key={key}
           style={{
             ...style,
-            backgroundColor: getBgLightColor(hasCustomColors),
+            backgroundColor: getBgLightColor(hasCustomColors, isNightMode),
           }}
           className={cx("overflow-hidden", {
             "border-right border-medium": !hasChildren,
@@ -315,6 +327,7 @@ class PivotTable extends Component {
             isGrandTotal={isGrandTotal}
             hasCustomColors={hasCustomColors}
             onClick={this.getCellClickHander(clicked)}
+            isNightMode={isNightMode}
             icon={
               (isSubtotal || hasSubtotal) && (
                 <RowToggleIcon
@@ -323,6 +336,7 @@ class PivotTable extends Component {
                   updateSettings={onUpdateVisualizationSettings}
                   hideUnlessCollapsed={isSubtotal}
                   rowIndex={rowIndex} // used to get a list of "other" paths when open one item in a collapsed column
+                  isNightMode={isNightMode}
                 />
               )
             }
@@ -397,6 +411,7 @@ class PivotTable extends Component {
               isSubtotal={isSubtotal}
               isGrandTotal={isGrandTotal}
               hasCustomColors={hasCustomColors}
+              isNightMode={isNightMode}
               isBody
               onClick={this.getCellClickHander(clicked)}
             />
@@ -417,7 +432,10 @@ class PivotTable extends Component {
                     "border-right border-bottom border-medium": leftHeaderWidth,
                   })}
                   style={{
-                    backgroundColor: getBgLightColor(hasCustomColors),
+                    backgroundColor: getBgLightColor(
+                      hasCustomColors,
+                      isNightMode,
+                    ),
                     // add left spacing unless the header width is 0
                     paddingLeft: leftHeaderWidth && LEFT_HEADER_LEFT_SPACING,
                     width: leftHeaderWidth,
@@ -430,6 +448,7 @@ class PivotTable extends Component {
                       value={this.getColumnTitle(rowIndex)}
                       style={{ width: LEFT_HEADER_CELL_WIDTH }}
                       hasCustomColors={hasCustomColors}
+                      isNightMode={isNightMode}
                       icon={
                         // you can only collapse before the last column
                         index < rowIndexes.length - 1 &&
@@ -439,6 +458,7 @@ class PivotTable extends Component {
                             settings={settings}
                             updateSettings={onUpdateVisualizationSettings}
                             hasCustomColors={hasCustomColors}
+                            isNightMode={isNightMode}
                           />
                         )
                       }
@@ -532,6 +552,7 @@ function RowToggleIcon({
   hideUnlessCollapsed,
   rowIndex,
   hasCustomColors,
+  isNightMode,
 }) {
   if (value == null) {
     return null;
@@ -590,8 +611,8 @@ function RowToggleIcon({
         padding: "4px",
         borderRadius: "4px",
         backgroundColor: isCollapsed
-          ? getBgLightColor(hasCustomColors)
-          : getBgDarkColor(hasCustomColors),
+          ? getBgLightColor(hasCustomColors, isNightMode)
+          : getBgDarkColor(hasCustomColors, isNightMode),
       }}
       onClick={e => {
         e.stopPropagation();
@@ -615,6 +636,7 @@ function Cell({
   className,
   icon,
   hasCustomColors,
+  isNightMode,
 }) {
   return (
     <div
@@ -623,7 +645,9 @@ function Cell({
         ...(isGrandTotal ? { borderTop: "1px solid white" } : {}),
         ...style,
         ...(isSubtotal
-          ? { backgroundColor: getBgDarkColor(hasCustomColors) }
+          ? {
+              backgroundColor: getBgDarkColor(hasCustomColors, isNightMode),
+            }
           : {}),
       }}
       className={cx(