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/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx

@@ -26,7 +26,8 @@ import {
   t,
   useTheme,
 } from '@superset-ui/core';
-import { DEFAULT_DATE_PATTERN, Tooltip } from '@superset-ui/chart-controls';
+import { Tooltip } from '@superset-ui/core/components';
+import { DEFAULT_DATE_PATTERN } from '@superset-ui/chart-controls';
 import { isEmpty } from 'lodash';
 import {
   ColorSchemeEnum,
@@ -38,11 +39,11 @@ import { useOverflowDetection } from './useOverflowDetection';
 
 const MetricNameText = styled.div<{ metricNameFontSize?: number }>`
   ${({ theme, metricNameFontSize }) => `
-    font-family: ${theme.typography.families.sansSerif};
-    font-weight: ${theme.typography.weights.normal};
-    font-size: ${metricNameFontSize || theme.typography.sizes.s * 2}px;
+    font-family: ${theme.fontFamily};
+    font-weight: ${theme.fontWeightNormal};
+    font-size: ${metricNameFontSize || theme.fontSizeSM * 2}px;
     text-align: center;
-    margin-bottom: ${theme.gridUnit * 3}px;
+    margin-bottom: ${theme.sizeUnit * 3}px;
   `}
 `;
 
@@ -59,10 +60,10 @@ const NumbersContainer = styled.div`
 
 const ComparisonValue = styled.div<PopKPIComparisonValueStyleProps>`
   ${({ theme, subheaderFontSize }) => `
-    font-weight: ${theme.typography.weights.light};
+    font-weight: ${theme.fontWeightLight};
     display: flex;
     justify-content: center;
-    font-size: ${subheaderFontSize || 20}px;
+    font-size: ${String(subheaderFontSize) || 20}px;
     flex: 1 1 0px;
   `}
 `;
@@ -71,9 +72,9 @@ const SymbolWrapper = styled.span<PopKPIComparisonSymbolStyleProps>`
   ${({ theme, backgroundColor, textColor }) => `
     background-color: ${backgroundColor};
     color: ${textColor};
-    padding: ${theme.gridUnit}px ${theme.gridUnit * 2}px;
-    border-radius: ${theme.gridUnit * 2}px;
-    margin-right: ${theme.gridUnit}px;
+    padding: ${theme.sizeUnit}px ${theme.sizeUnit * 2}px;
+    border-radius: ${theme.borderRadius}px;
+    margin-right: ${theme.sizeUnit}px;
   `}
 `;
 
@@ -138,9 +139,9 @@ export default function PopKPI(props: PopKPIProps) {
   }, [currentTimeRangeFilter, shift, startDateOffset, dashboardTimeRange]);
 
   const theme = useTheme();
-  const flexGap = theme.gridUnit * 5;
+  const flexGap = theme.sizeUnit * 5;
   const wrapperDivStyles = css`
-    font-family: ${theme.typography.families.sansSerif};
+    font-family: ${theme.fontFamily};
     display: flex;
     justify-content: center;
     align-items: center;
@@ -150,19 +151,19 @@ export default function PopKPI(props: PopKPIProps) {
   `;
 
   const bigValueContainerStyles = css`
-    font-size: ${headerFontSize || 60}px;
-    font-weight: ${theme.typography.weights.normal};
+    font-size: ${String(headerFontSize) || 60}px;
+    font-weight: ${theme.fontWeightNormal};
     text-align: center;
-    margin-bottom: ${theme.gridUnit * 4}px;
+    margin-bottom: ${theme.sizeUnit * 4}px;
   `;
 
   const SubtitleText = styled.div`
     ${({ theme }) => `
-    font-family: ${theme.typography.families.sansSerif};
-    font-weight: ${theme.typography.weights.medium};
+    font-family: ${theme.fontFamily};
+    font-weight: ${theme.fontWeightNormal};
     text-align: center;
     margin-top: -10px;
-    margin-bottom: ${theme.gridUnit * 4}px;
+    margin-bottom: ${theme.sizeUnit * 4}px;
   `}
   `;
 
@@ -174,21 +175,21 @@ export default function PopKPI(props: PopKPIProps) {
     if (percentDifferenceNumber > 0) {
       // Positive difference
       return comparisonColorScheme === ColorSchemeEnum.Green
-        ? theme.colors.success.base
-        : theme.colors.error.base;
+        ? theme.colorSuccess
+        : theme.colorError;
     }
     // Negative difference
     return comparisonColorScheme === ColorSchemeEnum.Red
-      ? theme.colors.success.base
-      : theme.colors.error.base;
+      ? theme.colorSuccess
+      : theme.colorError;
   };
 
   const arrowIndicatorStyle = css`
     color: ${getArrowIndicatorColor()};
-    margin-left: ${theme.gridUnit}px;
+    margin-left: ${theme.sizeUnit}px;
   `;
 
-  const defaultBackgroundColor = theme.colors.grayscale.light4;
+  const defaultBackgroundColor = theme.colorBgContainer;
   const defaultTextColor = theme.colors.grayscale.base;
   const { backgroundColor, textColor } = useMemo(() => {
     let bgColor = defaultBackgroundColor;
@@ -204,9 +205,7 @@ export default function PopKPI(props: PopKPIProps) {
       bgColor = useSuccess
         ? theme.colors.success.light2
         : theme.colors.error.light2;
-      txtColor = useSuccess
-        ? theme.colors.success.base
-        : theme.colors.error.base;
+      txtColor = useSuccess ? theme.colorSuccess : theme.colorError;
     }
 
     return {

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/types.ts

@@ -18,17 +18,18 @@
  */
 import {
   QueryFormData,
-  supersetTheme,
   TimeseriesDataRecord,
   Metric,
   SimpleAdhocFilter,
 } from '@superset-ui/core';
 
+export type FontSizeOptions = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+
 export interface PopKPIStylesProps {
   height: number;
   width: number;
-  headerFontSize: keyof typeof supersetTheme.typography.sizes;
-  subheaderFontSize: keyof typeof supersetTheme.typography.sizes;
+  headerFontSize: FontSizeOptions;
+  subheaderFontSize: FontSizeOptions;
   boldText: boolean;
   comparisonColorEnabled: boolean;
 }
@@ -44,7 +45,7 @@ interface PopKPICustomizeProps {
 }
 
 export interface PopKPIComparisonValueStyleProps {
-  subheaderFontSize?: keyof typeof supersetTheme.typography.sizes;
+  subheaderFontSize?: FontSizeOptions;
 }
 
 export interface PopKPIComparisonSymbolStyleProps {

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx

@@ -26,6 +26,7 @@ import {
   BRAND_COLOR,
   styled,
   BinaryQueryObjectFilterClause,
+  themeObject,
 } from '@superset-ui/core';
 import Echart from '../components/Echart';
 import { BigNumberVizProps } from './types';
@@ -212,6 +213,7 @@ class BigNumberVis extends PureComponent<BigNumberVizProps, BigNumberVisState> {
     const hasThresholdColorFormatter =
       Array.isArray(colorThresholdFormatters) &&
       colorThresholdFormatters.length > 0;
+    const { theme } = themeObject;
 
     let numberColor;
     if (hasThresholdColorFormatter) {
@@ -224,7 +226,7 @@ class BigNumberVis extends PureComponent<BigNumberVizProps, BigNumberVisState> {
         }
       });
     } else {
-      numberColor = 'black';
+      numberColor = theme.colorText;
     }
 
     const container = this.createTemporaryContainer();
@@ -394,7 +396,7 @@ class BigNumberVis extends PureComponent<BigNumberVizProps, BigNumberVisState> {
   }
 
   getTotalElementsHeight() {
-    const marginPerElement = 8; // theme.gridUnit = 4, so margin-bottom = 8px
+    const marginPerElement = 8; // theme.sizeUnit = 4, so margin-bottom = 8px
 
     const refs = [
       this.metricNameRef,
@@ -517,7 +519,7 @@ class BigNumberVis extends PureComponent<BigNumberVizProps, BigNumberVisState> {
 
 export default styled(BigNumberVis)`
   ${({ theme }) => `
-    font-family: ${theme.typography.families.sansSerif};
+    font-family: ${theme.fontFamily};
     position: relative;
     display: flex;
     flex-direction: column;
@@ -534,29 +536,29 @@ export default styled(BigNumberVis)`
       justify-content: center;
       align-items: flex-start;
       .alert {
-        font-size: ${theme.typography.sizes.s};
+        font-size: ${theme.fontSizeSM};
         margin: -0.5em 0 0.4em;
         line-height: 1;
-        padding: ${theme.gridUnit}px;
-        border-radius: ${theme.gridUnit}px;
+        padding: ${theme.sizeUnit}px;
+        border-radius: ${theme.borderRadius}px;
       }
     }
 
     .kicker {
       line-height: 1em;
-      margin-bottom: ${theme.gridUnit * 2}px;
+      margin-bottom: ${theme.sizeUnit * 2}px;
     }
 
     .metric-name {
       line-height: 1em;
-      margin-bottom: ${theme.gridUnit * 2}px;
+      margin-bottom: ${theme.sizeUnit * 2}px;
     }
 
     .header-line {
       position: relative;
       line-height: 1em;
       white-space: nowrap;
-      margin-bottom:${theme.gridUnit * 2}px;
+      margin-bottom:${theme.sizeUnit * 2}px;
       span {
         position: absolute;
         bottom: 0;
@@ -565,19 +567,19 @@ export default styled(BigNumberVis)`
 
     .subheader-line {
       line-height: 1em;
-      margin-bottom: ${theme.gridUnit * 2}px;
+      margin-bottom: ${theme.sizeUnit * 2}px;
     }
 
     .subtitle-line {
       line-height: 1em;
-      margin-bottom: ${theme.gridUnit * 2}px;
+      margin-bottom: ${theme.sizeUnit * 2}px;
     }
 
     &.is-fallback-value {
       .kicker,
       .header-line,
       .subheader-line {
-        opacity: ${theme.opacity.mediumHeavy};
+        opacity: 60%;
       }
     }
   `}