feat: DH-21259: Add map_style to theme (#2605)

This doesn't really block
deephaven/deephaven-plugins#1279 but is used for
it.
I do think it's best to allow anyone to override the `map_style` in the
theme if we want it to be allowed in the theme, although this method is
a bit wonky so I'm not sure if it's the best way to do it.

Author: jnumainville

package-lock.json

@@ -92,7 +92,7 @@
     "@types/memoizee": "^0.4.5",
     "@types/node": "^24.8.0",
     "@types/papaparse": "5.3.2",
-    "@types/plotly.js": "^3.0.0",
+    "@types/plotly.js": "^3.0.8",
     "@types/pouchdb-browser": "^6.1.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

package.json

@@ -26,4 +26,7 @@
   indicator-increasing: var(--dh-color-chart-indicator-increase);
   indicator-decreasing: var(--dh-color-chart-indicator-decrease);
   indicator-gauge: var(--dh-color-chart-indicator-gauge);
+
+  /* Map */
+  map-style: var(--dh-color-chart-map-style);
 }

packages/chart/src/ChartTheme.module.scss

@@ -33,6 +33,9 @@ export interface ChartTheme {
   indicator_increasing: string;
   indicator_decreasing: string;
   indicator_gauge: string;
+
+  // Map
+  map_style: string;
 }
 
 export function defaultChartTheme(): Readonly<ChartTheme> {
@@ -74,6 +77,8 @@ export function defaultChartTheme(): Readonly<ChartTheme> {
     indicator_increasing: chartTheme['indicator-increasing'],
     indicator_decreasing: chartTheme['indicator-decreasing'],
     indicator_gauge: chartTheme['indicator-gauge'],
+    // Map
+    map_style: chartTheme['map-style'],
   });
 }
 

packages/chart/src/ChartTheme.ts

@@ -2142,6 +2142,7 @@ class ChartUtils {
       ocean_color,
       lake_color,
       river_color,
+      map_style,
       /* eslint-disable camelcase */
     } = theme;
 
@@ -2196,6 +2197,9 @@ class ChartUtils {
         lakecolor: lake_color,
         rivercolor: river_color,
       },
+      map: {
+        style: map_style,
+      },
     };
     layout.datarevision = 0;
 

packages/chart/src/ChartUtils.ts

@@ -13,6 +13,7 @@ exports[`defaultChartTheme should create the default chart theme 1`] = `
   "land_color": "chartTheme['land-color']",
   "legend_color": "chartTheme['legend-color']",
   "linecolor": "chartTheme['linecolor']",
+  "map_style": "chartTheme['map-style']",
   "ocean_color": "chartTheme['ocean-color']",
   "ohlc_decreasing": "chartTheme['ohlc-decreasing']",
   "ohlc_increasing": "chartTheme['ohlc-increasing']",

packages/chart/src/__snapshots__/ChartTheme.test.ts.snap

@@ -104,6 +104,9 @@ exports[`makeDefaultTemplate should create a default template 1`] = `
         "color": "ChartTheme['title_color']",
       },
     },
+    "map": {
+      "style": "ChartTheme['map_style']",
+    },
     "margin": {
       "b": 60,
       "l": 60,

packages/chart/src/__snapshots__/ChartUtils.test.ts.snap

@@ -189,6 +189,11 @@ export function buildColorGroups(
 
       group = groupRemap[group] ?? group;
 
+      // Skip maps as there is no swatch to show currently
+      if (group === 'map') {
+        return acc;
+      }
+
       if (acc[group] == null) {
         acc[group] = [];
       }

packages/code-studio/src/styleguide/colorUtils.ts

@@ -52,4 +52,7 @@
   --dh-color-chart-indicator-increase: var(--dh-color-visual-green);
   --dh-color-chart-indicator-decrease: var(--dh-color-visual-red);
   --dh-color-chart-indicator-gauge: var(--dh-color-green-1000);
+
+  /* Map */
+  --dh-color-chart-map-style: dark;
 }

packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css

@@ -52,4 +52,7 @@
   --dh-color-chart-indicator-increase: var(--dh-color-visual-green);
   --dh-color-chart-indicator-decrease: var(--dh-color-visual-red);
   --dh-color-chart-indicator-gauge: var(--dh-color-green-1000);
+
+  /* Map */
+  --dh-color-chart-map-style: light;
 }