feat(theming): land Ant Design v5 overhaul — dynamic themes, real dark mode + massive styling refactor (#31590)

Co-authored-by: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com>
Co-authored-by: Diego Pucci <diegopucci.me@gmail.com>
Co-authored-by: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Co-authored-by: Geido <60598000+geido@users.noreply.github.com>
Co-authored-by: Alexandru Soare <37236580+alexandrusoare@users.noreply.github.com>
Co-authored-by: Damian Pendrak <dpendrak@gmail.com>
Co-authored-by: Pius Iniobong <67148161+payose@users.noreply.github.com>
Co-authored-by: Enzo Martellucci <enzomartellucci@gmail.com>
Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>

superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts

@@ -45,7 +45,6 @@ import {
   GAP_WIDTH,
   LABEL_FONTSIZE,
   extractTreePathInfo,
-  BORDER_COLOR,
 } from './constants';
 import { OpacityEnum } from '../constants';
 import { getDefaultTooltip } from '../utils/tooltip';
@@ -124,6 +123,7 @@ export default function transformProps(
   const { columnFormats = {}, currencyFormats = {} } = datasource;
   const { setDataMask = () => {}, onContextMenu } = hooks;
   const coltypeMapping = getColtypesMapping(queriesData[0]);
+  const BORDER_COLOR = theme.colorBgBase;
 
   const {
     colorScheme,
@@ -163,6 +163,11 @@ export default function transformProps(
   const metricLabel = getMetricLabel(metric);
   const groupbyLabels = groupby.map(getColumnLabel);
   const treeData = treeBuilder(data, groupbyLabels, metricLabel);
+  const labelProps = {
+    color: theme.colorText,
+    borderColor: theme.colorBgBase,
+    borderWidth: 1,
+  };
   const traverse = (treeNodes: TreeNode[], path: string[]) =>
     treeNodes.map(treeNode => {
       const { name: nodeName, value, groupBy } = treeNode;
@@ -201,9 +206,12 @@ export default function transformProps(
             ...item,
             itemStyle: {
               colorAlpha: OpacityEnum.SemiTransparent,
+              color: theme.colorText,
+              borderColor: theme.colorBgBase,
+              borderWidth: 2,
             },
             label: {
-              color: `rgba(0, 0, 0, ${OpacityEnum.SemiTransparent})`,
+              ...labelProps,
             },
           };
         }
@@ -238,7 +246,7 @@ export default function transformProps(
         show: false,
       },
       itemStyle: {
-        color: theme.colors.primary.base,
+        color: theme.colorPrimary,
       },
     },
   ];
@@ -256,18 +264,20 @@ export default function transformProps(
       },
       emphasis: {
         label: {
+          ...labelProps,
           show: true,
         },
       },
       levels,
       label: {
+        ...labelProps,
         show: showLabels,
         position: labelPosition,
         formatter,
-        color: theme.colors.grayscale.dark2,
         fontSize: LABEL_FONTSIZE,
       },
       upperLabel: {
+        ...labelProps,
         show: showUpperLabels,
         formatter,
         textBorderColor: 'transparent',
@@ -290,7 +300,6 @@ export default function transformProps(
     },
     series,
   };
-
   return {
     formData,
     width,