Add variables for theme in ymap (#1963)

datalens-tech · Dec 19, 2024 · 69b954c · 69b954c
1 parent c7ec84b
commit 69b954c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 22 deletions.
diff --git a/src/ui/libs/DatalensChartkit/ChartKit/theme.scss b/src/ui/libs/DatalensChartkit/ChartKit/theme.scss
@@ -53,14 +53,15 @@
     --dl-table-footer-bg-color: var(--g-color-base-generic);
 }
 
-.g-root_theme_dark .chartkit .chartkit-ymap,
-.g-root_theme_dark-hc .chartkit .chartkit-ymap {
+// Apply themed styles to chartkit ymap contents
+
+.g-root .chartkit .chartkit-ymap {
     & .chartkit-map-ground-pane {
-        filter: invert(0.9) saturate(0.4) hue-rotate(-30deg);
+        filter: var(--dl-filter-ymap-background);
     }
 
     & [class*='map-bg'] {
-        background: transparent;
+        background: var(--dl-color-ymap-background);
     }
 
     & [class*='zoom__plus'],
@@ -70,27 +71,12 @@
     }
 
     & [class*='zoom__icon'] {
-        filter: invert(1);
-    }
-}
-
-.g-root_theme_dark-hc .chartkit .chartkit-ymap {
-    & .chartkit-map-ground-pane {
-        filter: invert(0.95) saturate(0.4) hue-rotate(-30deg);
-    }
-}
-
-// hitmap color change together with map color styles
-// therefor hitmap legend should also be inverted
-
-.g-root_theme_dark .chartkit .chartkit-ymap-legend {
-    & .chartkit-ymap-legend-layer__color-preview_default-heatmap {
-        filter: invert(0.9) saturate(0.4) hue-rotate(-30deg);
+        filter: var(--dl-filter-zoom-control);
     }
 }
 
-.g-root_theme_dark-hc .chartkit .chartkit-ymap-legend {
+.g-root .chartkit .chartkit-ymap-legend {
     & .chartkit-ymap-legend-layer__color-preview_default-heatmap {
-        filter: invert(0.95) saturate(0.4) hue-rotate(-30deg);
+        filter: var(--dl-filter-ymap-heatmap);
     }
 }
diff --git a/src/ui/styles/variables.scss b/src/ui/styles/variables.scss
@@ -56,6 +56,10 @@ $monospaceFontFamily: 'Consolas', 'Menlo', 'Ubuntu Mono', monospace;
         --dl-color-contrast-4: rgba(0, 0, 0, 0.04);
         --dl-color-base-workbook-icon: #d1dfff;
         --dl-color-fixed-header-background: rgb(242, 242, 242);
+        --dl-filter-ymap-background: none;
+        --dl-filter-ymap-heatmap: none;
+        --dl-color-ymap-background: #fafafa;
+        --dl-filter-zoom-control: none;
     }
 
     &_theme_light-hc {
@@ -67,6 +71,10 @@ $monospaceFontFamily: 'Consolas', 'Menlo', 'Ubuntu Mono', monospace;
         --dl-color-contrast-4: rgba(0, 0, 0, 0.04);
         --dl-color-base-workbook-icon: #a8c3ff;
         --dl-color-fixed-header-background: rgb(242, 242, 242);
+        --dl-filter-ymap-background: none;
+        --dl-filter-ymap-heatmap: none;
+        --dl-color-ymap-background: #fafafa;
+        --dl-filter-zoom-control: none;
     }
 
     &_theme_dark {
@@ -78,6 +86,10 @@ $monospaceFontFamily: 'Consolas', 'Menlo', 'Ubuntu Mono', monospace;
         --dl-color-contrast-4: rgba(255, 255, 255, 0.04);
         --dl-color-base-workbook-icon: #c2d0f0;
         --dl-color-fixed-header-background: rgb(45, 40, 45);
+        --dl-filter-ymap-background: invert(0.9) saturate(0.4) hue-rotate(-30deg);
+        --dl-filter-ymap-heatmap: invert(0.9) saturate(0.4) hue-rotate(-30deg);
+        --dl-color-ymap-background: transparent;
+        --dl-filter-zoom-control: invert(1);
     }
 
     &_theme_dark-hc {
@@ -89,5 +101,9 @@ $monospaceFontFamily: 'Consolas', 'Menlo', 'Ubuntu Mono', monospace;
         --dl-color-contrast-4: rgba(255, 255, 255, 0.04);
         --dl-color-base-workbook-icon: #c0d3fd;
         --dl-color-fixed-header-background: rgb(30, 29, 30);
+        --dl-filter-ymap-background: invert(0.95) saturate(0.4) hue-rotate(-30deg);
+        --dl-filter-ymap-heatmap: invert(0.95) saturate(0.4) hue-rotate(-30deg);
+        --dl-color-ymap-background: transparent;
+        --dl-filter-zoom-control: invert(1);
     }
 }