feat: completely migrate from DeprecatedThemeColors to Antd semantic tokens (#34732)

Co-authored-by: Claude <noreply@anthropic.com>

superset-frontend/packages/generator-superset/generators/plugin-chart/templates/src/types.erb

@@ -25,7 +25,7 @@ import {
 export interface <%= packageLabel %>StylesProps {
   height: number;
   width: number;
-  headerFontSize: keyof typeof supersetTheme.typography.sizes;
+  headerFontSize: 'fontSizeSM' | 'fontSize' | 'fontSizeLG' | 'fontSizeXL' | 'fontSizeHeading1' | 'fontSizeHeading2' | 'fontSizeHeading3' | 'fontSizeHeading4' | 'fontSizeHeading5';
   boldText: boolean;
 }
 

superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx

@@ -24,7 +24,7 @@ import { css, styled, useTheme, t } from '@superset-ui/core';
 
 const StyledCalculatorIcon = styled(CalculatorOutlined)`
   ${({ theme }) => css`
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorIcon};
     font-size: ${theme.fontSizeSM}px;
     & svg {
       margin-left: ${theme.sizeUnit}px;

superset-frontend/packages/superset-ui-core/src/chart/components/FallbackComponent.tsx

@@ -27,8 +27,8 @@ export default function FallbackComponent({ error, height, width }: Props) {
   return (
     <div
       css={(theme: SupersetTheme) => ({
-        backgroundColor: theme.colors.grayscale.dark2,
+        backgroundColor: theme.colorBgContainer,
-        color: theme.colors.grayscale.light5,
+        color: theme.colorText,
         overflow: 'auto',
         padding: 32,
       })}

superset-frontend/packages/superset-ui-core/src/components/Checkbox/CheckboxIcons.tsx

@@ -52,7 +52,7 @@ export const CheckboxHalfChecked = () => {
     >
       <path
         d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z"
-        fill={theme.colors.grayscale.light1}
+        fill={theme.colorFill}
       />
       <path d="M14 10H4V8H14V10Z" fill="white" />
     </svg>
@@ -71,7 +71,7 @@ export const CheckboxUnchecked = () => {
     >
       <path
         d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z"
-        fill={theme.colors.grayscale.light2}
+        fill={theme.colorFillSecondary}
       />
       <path d="M16 2V16H2V2H16V2Z" fill="white" />
     </svg>

superset-frontend/packages/superset-ui-core/src/components/DeleteModal/index.tsx

@@ -27,7 +27,7 @@ const StyledDiv = styled.div`
   padding-top: 8px;
   width: 50%;
   label {
-    color: ${({ theme }) => theme.colors.grayscale.base};
+    color: ${({ theme }) => theme.colorTextLabel};
   }
 `;
 

superset-frontend/packages/superset-ui-core/src/components/Dropdown/index.tsx

@@ -31,7 +31,7 @@ const MenuDots = styled.div`
   width: ${({ theme }) => theme.sizeUnit * 0.75}px;
   height: ${({ theme }) => theme.sizeUnit * 0.75}px;
   border-radius: 50%;
-  background-color: ${({ theme }) => theme.colors.grayscale.light1};
+  background-color: ${({ theme }) => theme.colorFill};
 
   font-weight: ${({ theme }) => theme.fontWeightNormal};
   display: inline-flex;
@@ -53,7 +53,7 @@ const MenuDots = styled.div`
     width: ${({ theme }) => theme.sizeUnit * 0.75}px;
     height: ${({ theme }) => theme.sizeUnit * 0.75}px;
     border-radius: 50%;
-    background-color: ${({ theme }) => theme.colors.grayscale.light1};
+    background-color: ${({ theme }) => theme.colorFill};
   }
 
   &::before {

superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.tsx

@@ -325,13 +325,13 @@ export const DropdownContainer = forwardRef(
                   }
                   ::-webkit-scrollbar-thumb {
                     border-radius: 9px;
-                    background-color: ${theme.colors.grayscale.light1};
+                    background-color: ${theme.colorFillSecondary};
                     border: 3px solid transparent;
                     background-clip: content-box;
                   }
                   ::-webkit-scrollbar-track {
-                    background-color: ${theme.colors.grayscale.light4};
+                    background-color: ${theme.colorFillQuaternary};
-                    border-left: 1px solid ${theme.colors.grayscale.light2};
+                    border-left: 1px solid ${theme.colorFillTertiary};
                   }
                 }
               `}
@@ -368,7 +368,7 @@ export const DropdownContainer = forwardRef(
                     color={
                       (dropdownTriggerCount ?? overflowingCount) > 0
                         ? theme.colorPrimary
-                        : theme.colors.grayscale.light1
+                        : theme.colorTextSecondary
                     }
                     showZero
                     css={css`
@@ -377,7 +377,7 @@ export const DropdownContainer = forwardRef(
                   />
                   <Icons.DownOutlined
                     iconSize="m"
-                    iconColor={theme.colors.grayscale.light1}
+                    iconColor={theme.colorIcon}
                     css={css`
                       .anticon {
                         display: flex;

superset-frontend/packages/superset-ui-core/src/components/Icons/Icons.stories.tsx

@@ -28,14 +28,17 @@ export default {
   component: BaseIconComponent,
 };
 
-const palette: Record<string, string | null> = { Default: null };
+const palette: Record<string, string | null> = {
-Object.entries(supersetTheme.colors).forEach(([familyName, family]) => {
+  Default: null,
-  Object.entries(family as Record<string, string>).forEach(
+  Primary: supersetTheme.colorPrimary,
-    ([colorName, colorValue]) => {
+  Success: supersetTheme.colorSuccess,
-      palette[`${familyName} / ${colorName}`] = colorValue;
+  Warning: supersetTheme.colorWarning,
-    },
+  Error: supersetTheme.colorError,
-  );
+  Info: supersetTheme.colorInfo,
-});
+  Text: supersetTheme.colorText,
+  'Text Secondary': supersetTheme.colorTextSecondary,
+  Icon: supersetTheme.colorIcon,
+};
 
 const IconSet = styled.div`
   display: grid;

superset-frontend/packages/superset-ui-core/src/components/Label/index.tsx

@@ -25,7 +25,7 @@ import type { LabelProps } from './types';
 
 export function Label(props: LabelProps) {
   const theme = useTheme();
-  const { transitionTiming } = theme;
+  // Use Ant Design's motion duration instead of deprecated transitionTiming
   const {
     type = 'default',
     monospace = false,
@@ -46,7 +46,7 @@ export function Label(props: LabelProps) {
   const borderColorHover = onClick ? baseColor.borderHover : borderColor;
 
   const labelStyles = css`
-    transition: background-color ${transitionTiming}s;
+    transition: background-color ${theme.motionDurationMid};
     white-space: nowrap;
     cursor: ${onClick ? 'pointer' : 'default'};
     overflow: hidden;

superset-frontend/packages/superset-ui-core/src/components/ListViewCard/index.tsx

@@ -53,7 +53,7 @@ const StyledCard = styled(Card)`
 
 const Cover = styled.div`
   height: 264px;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+  border-bottom: 1px solid ${({ theme }) => theme.colorSplit};
   overflow: hidden;
 
   .cover-footer {

superset-frontend/packages/superset-ui-core/src/components/Menu/index.tsx

@@ -53,7 +53,7 @@ const StyledMenuItem = styled(AntdMenu.Item)`
         justify-content: space-between;
       }
       a {
-        transition: background-color ${theme.motionDurationMid}s;
+        transition: background-color ${theme.motionDurationMid};
         &:after {
           content: '';
           position: absolute;
@@ -63,7 +63,7 @@ const StyledMenuItem = styled(AntdMenu.Item)`
           height: 3px;
           opacity: 0;
           transform: translateX(-50%);
-          transition: translate ${theme.motionDurationMid}s;
+          transition: translate ${theme.motionDurationMid};
         }
         &:focus {
           @media (max-width: 767px) {
@@ -140,7 +140,7 @@ const StyledSubMenu = styled(AntdMenu.SubMenu)`
         height: 3px;
         opacity: 0;
         transform: translateX(-50%);
-        transition: all ${theme.transitionTiming}s;
+        transition: all ${theme.motionDurationMid};
       }
     }
   `}

superset-frontend/packages/superset-ui-core/src/components/Metadata/index.tsx

@@ -30,7 +30,7 @@ const MetadataWrapper = styled.div`
 
 const MetadataText = styled.span`
   font-size: ${({ theme }) => theme.fontSizeXS}px;
-  color: ${({ theme }) => theme.colors.grayscale.light1};
+  color: ${({ theme }) => theme.colorTextSecondary};
   font-weight: ${({ theme }) => theme.fontWeightStrong};
 `;
 

superset-frontend/packages/superset-ui-core/src/components/PopoverDropdown/index.tsx

@@ -60,12 +60,12 @@ const menuItemStyles = (theme: any) => css`
     }
 
     &:hover {
-      background: ${theme.colors.grayscale.light3};
+      background: ${theme.colorFillQuaternary};
     }
 
     &.active {
       font-weight: ${theme.fontWeightStrong};
-      background: ${theme.colors.grayscale.light2};
+      background: ${theme.colorFillTertiary};
     }
   }
 

superset-frontend/packages/superset-ui-core/src/components/PopoverSection/index.tsx

@@ -66,16 +66,14 @@ export default function PopoverSection({
             <Icons.InfoCircleOutlined
               role="img"
               iconSize="s"
-              iconColor={theme.colors.grayscale.light1}
+              iconColor={theme.colorIcon}
             />
           </Tooltip>
         )}
         <Icons.CheckOutlined
           iconSize="s"
           role="img"
-          iconColor={
+          iconColor={isSelected ? theme.colorPrimary : theme.colorIcon}
-            isSelected ? theme.colorPrimary : theme.colors.grayscale.base
-          }
         />
       </div>
       <div

superset-frontend/packages/superset-ui-core/src/components/RefreshLabel/index.tsx

@@ -45,7 +45,7 @@ const RefreshLabel = ({
         onClick={disabled ? undefined : onClick}
         css={(theme: SupersetTheme) => ({
           cursor: 'pointer',
-          color: theme.colors.grayscale.base,
+          color: theme.colorIcon,
           '&:hover': { color: theme.colorPrimary },
         })}
       />

superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx

@@ -104,17 +104,17 @@ export const StyledLoadingText = styled.div`
   ${({ theme }) => `
    margin-left: ${theme.sizeUnit * 3}px;
    line-height: ${theme.sizeUnit * 8}px;
-   color: ${theme.colors.grayscale.light1};
+   color: ${theme.colorTextSecondary};
  `}
 `;
 
 export const StyledHelperText = styled.div`
   ${({ theme }) => `
    padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 3}px;
-   color: ${theme.colors.grayscale.base};
+   color: ${theme.colorText};
    font-size: ${theme.fontSizeSM}px;
    cursor: default;
-   border-bottom: 1px solid ${theme.colors.grayscale.light2};
+   border-bottom: 1px solid ${theme.colorBorderSecondary};
  `}
 `;
 
@@ -140,6 +140,6 @@ export const StyledErrorMessage = styled.div`
 export const StyledBulkActionsContainer = styled(Flex)`
   ${({ theme }) => `
     padding: ${theme.sizeUnit}px;
-    border-top: 1px solid ${theme.colors.grayscale.light3};
+    border-top: 1px solid ${theme.colorSplit};
   `}
 `;

superset-frontend/packages/superset-ui-core/src/components/Table/cell-renderers/NullCell/index.tsx

@@ -20,7 +20,7 @@ import { styled } from '../../../..';
 import { Constants } from '../../..';
 
 const GrayCell = styled.span`
-  color: ${({ theme }) => theme.colors.grayscale.light1};
+  color: ${({ theme }) => theme.colorTextSecondary};
 `;
 
 function NullCell() {

superset-frontend/packages/superset-ui-core/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx

@@ -74,7 +74,7 @@ function HeaderWithRadioGroup(props: HeaderWithRadioGroupProps) {
       >
         <Icons.SettingOutlined
           iconSize="m"
-          iconColor={theme.colors.grayscale.light1}
+          iconColor={theme.colorIcon}
           css={css`
             margin-top: ${theme.sizeUnit * 0.75}px;
             margin-right: ${theme.sizeUnit}px;

superset-frontend/packages/superset-ui-core/src/components/Tabs/Tabs.tsx

@@ -83,7 +83,7 @@ const Tabs = Object.assign(StyledTabs, {
 const StyledEditableTabs = styled(StyledTabs)`
   ${({ theme }) => `
     .ant-tabs-content-holder {
-      background: ${theme.colors.grayscale.light5};
+      background: ${theme.colorBgContainer};
     }
 
     & > .ant-tabs-nav {
@@ -99,7 +99,7 @@ const StyledEditableTabs = styled(StyledTabs)`
 `;
 
 const StyledCloseOutlined = styled(Icons.CloseOutlined)`
-  color: ${({ theme }) => theme.colors.grayscale.base};
+  color: ${({ theme }) => theme.colorIcon};
 `;
 export const EditableTabs = Object.assign(StyledEditableTabs, {
   TabPane: StyledTabPane,

superset-frontend/packages/superset-ui-core/src/components/TruncatedList/index.tsx

@@ -79,7 +79,7 @@ const StyledVisibleItem = styled.span`
 
 const StyledTooltipItem = styled.div`
   .link {
-    color: ${({ theme }) => theme.colors.grayscale.light5};
+    color: ${({ theme }) => theme.colorTextTertiary};
     display: block;
     text-decoration: underline;
   }

superset-frontend/packages/superset-ui-core/src/theme/Theme.test.tsx

@@ -58,8 +58,9 @@ describe('Theme', () => {
       // Verify default font family is set
       expect(theme.theme.fontFamily).toContain('Inter');
 
-      // Verify the theme is initialized with colors
+      // Verify the theme is initialized with semantic color tokens
-      expect(theme.theme.colors).toBeDefined();
+      expect(theme.theme.colorText).toBeDefined();
+      expect(theme.theme.colorBgBase).toBeDefined();
     });
 
     it('creates a theme with custom tokens when provided', () => {

superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx

@@ -43,7 +43,6 @@ import {
 } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { noop } from 'lodash';
-import { isThemeDark } from './utils/themeUtils';
 import { GlobalStyles } from './GlobalStyles';
 
 import {
@@ -53,15 +52,9 @@ import {
   SupersetTheme,
   allowedAntdTokens,
   SharedAntdTokens,
-  DeprecatedThemeColors,
 } from './types';
 
-import {
+import { normalizeThemeConfig, serializeThemeConfig } from './utils';
-  normalizeThemeConfig,
-  serializeThemeConfig,
-  getSystemColors,
-  getDeprecatedColors,
-} from './utils';
 
 /* eslint-disable theme-colors/no-literal-colors */
 
@@ -166,15 +159,8 @@ export class Theme {
       ...Theme.defaultTokens,
       ...antdConfig.token, // Passing through the extra, superset-specific tokens
       ...tokens,
-      colors: {} as DeprecatedThemeColors, // Placeholder that will be filled in the second phase
     };
 
-    // Second phase: Now that theme is initialized, we can determine if it's dark
-    // and generate the legacy colors correctly
-    const systemColors = getSystemColors(tokens);
-    const isDark = isThemeDark(this.theme); // Use utility function with theme
-    this.theme.colors = getDeprecatedColors(systemColors, isDark);
-
     // Update the providers with the fully formed theme
     this.updateProviders(
       this.theme,

superset-frontend/packages/superset-ui-core/src/theme/types.ts

@@ -108,36 +108,6 @@ export interface ColorVariants {
   textActive: string;
 }
 
-export interface DeprecatedColorVariations {
-  base: string;
-  light1: string;
-  light2: string;
-  light3: string;
-  light4: string;
-  light5: string;
-  dark1: string;
-  dark2: string;
-  dark3: string;
-  dark4: string;
-  dark5: string;
-}
-
-export interface DeprecatedThemeColors {
-  primary: DeprecatedColorVariations;
-  error: DeprecatedColorVariations;
-  warning: DeprecatedColorVariations;
-  success: DeprecatedColorVariations;
-  info: DeprecatedColorVariations;
-  grayscale: DeprecatedColorVariations;
-}
-
-export interface LegacySupersetTheme {
-  // Old colors structure with light/dark semantics still heavily referenced in code base
-  // TODO: replace/realign with antd-type tokens
-  colors: DeprecatedThemeColors;
-  transitionTiming: number;
-}
-
 export interface SupersetSpecificTokens {
   // Font-related
   fontSizeXS: string;
@@ -391,10 +361,8 @@ export type AllowedAntdTokenKeys = Extract<
 
 export type SharedAntdTokens = Pick<AntdTokens, AllowedAntdTokenKeys>;
 
-/** The final shape for our custom theme object, combining old theme + shared antd + superset specifics. */
+/** The final shape for our custom theme object, combining shared antd + superset specifics. */
-export type SupersetTheme = LegacySupersetTheme &
+export type SupersetTheme = SharedAntdTokens & SupersetSpecificTokens;
-  SharedAntdTokens &
-  SupersetSpecificTokens;
 
 export interface ThemeStorage {
   getItem(key: string): string | null;

superset-frontend/packages/superset-ui-core/src/theme/utils.test.ts

@@ -24,8 +24,6 @@ import {
   normalizeThemeConfig,
   getAntdConfig,
   getSystemColors,
-  getDeprecatedColors,
-  genDeprecatedColorVariations,
 } from './utils';
 import {
   type AnyThemeConfig,
@@ -34,17 +32,6 @@ import {
   ThemeAlgorithm,
 } from './types';
 
-// Mock tinycolor2 for consistent testing
-jest.mock('tinycolor2', () => {
-  const mockMix = jest.fn().mockImplementation(() => ({
-    toHexString: jest.fn().mockReturnValue('#mixed-color'),
-  }));
-
-  return {
-    mix: mockMix,
-  };
-});
-
 describe('Theme utilities', () => {
   describe('isSerializableConfig', () => {
     it('returns true when algorithm is undefined', () => {
@@ -362,43 +349,4 @@ describe('Theme utilities', () => {
       });
     });
   });
-
-  describe('genDeprecatedColorVariations', () => {
-    it('generates color variations for light mode', () => {
-      const result = genDeprecatedColorVariations('#base-color', false);
-
-      expect(result.base).toBe('#base-color');
-      expect(result.light1).toBe('#mixed-color');
-      expect(result.dark1).toBe('#mixed-color');
-    });
-
-    it('generates color variations for dark mode', () => {
-      const result = genDeprecatedColorVariations('#base-color', true);
-
-      expect(result.base).toBe('#base-color');
-      expect(result.light1).toBe('#mixed-color');
-      expect(result.dark1).toBe('#mixed-color');
-    });
-  });
-
-  describe('getDeprecatedColors', () => {
-    it('generates deprecated colors from system colors', () => {
-      const systemColors = {
-        colorPrimary: '#primary',
-        colorError: '#error',
-        colorWarning: '#warning',
-        colorSuccess: '#success',
-        colorInfo: '#info',
-      };
-
-      const result = getDeprecatedColors(systemColors, false);
-
-      expect(result.primary.base).toBe('#primary');
-      expect(result.error.base).toBe('#error');
-      expect(result.warning.base).toBe('#warning');
-      expect(result.success.base).toBe('#success');
-      expect(result.info.base).toBe('#info');
-      expect(result.grayscale.base).toBe('#666');
-    });
-  });
 });

superset-frontend/packages/superset-ui-core/src/theme/utils.ts

@@ -17,13 +17,10 @@
  * under the License.
  */
 import { theme as antdThemeImport } from 'antd';
-import tinycolor from 'tinycolor2';
 import {
   type AntdThemeConfig,
   type AnyThemeConfig,
   type SerializableThemeConfig,
-  type DeprecatedColorVariations,
-  type DeprecatedThemeColors,
   type SystemColors,
   type SupersetTheme,
   ThemeAlgorithm,
@@ -144,50 +141,6 @@ export function getAntdConfig(
   };
 }
 
-/**
- * Generate deprecated color variations from a base color
- */
-export function genDeprecatedColorVariations(
-  color: string,
-  isDark: boolean,
-): DeprecatedColorVariations {
-  const bg = isDark ? '#FFF' : '#000';
-  const fg = isDark ? '#000' : '#FFF';
-  const adjustColor = (c: string, perc: number, tgt: string): string =>
-    tinycolor.mix(c, tgt, perc).toHexString();
-  return {
-    base: color,
-    light1: adjustColor(color, 20, fg),
-    light2: adjustColor(color, 45, fg),
-    light3: adjustColor(color, 70, fg),
-    light4: adjustColor(color, 90, fg),
-    light5: adjustColor(color, 95, fg),
-    dark1: adjustColor(color, 10, bg),
-    dark2: adjustColor(color, 20, bg),
-    dark3: adjustColor(color, 40, bg),
-    dark4: adjustColor(color, 60, bg),
-    dark5: adjustColor(color, 80, bg),
-  };
-}
-
-/**
- * Generate deprecated theme colors from system colors
- */
-export function getDeprecatedColors(
-  systemColors: SystemColors,
-  isDark: boolean,
-): DeprecatedThemeColors {
-  const sc: SystemColors = systemColors;
-  return {
-    primary: genDeprecatedColorVariations(sc.colorPrimary, isDark),
-    error: genDeprecatedColorVariations(sc.colorError, isDark),
-    warning: genDeprecatedColorVariations(sc.colorWarning, isDark),
-    success: genDeprecatedColorVariations(sc.colorSuccess, isDark),
-    info: genDeprecatedColorVariations(sc.colorInfo, isDark),
-    grayscale: genDeprecatedColorVariations('#666', isDark),
-  };
-}
-
 /**
  * Extract system colors from Ant Design tokens
  */

superset-frontend/packages/superset-ui-demo/storybook/shared/components/ResizableChartDemo.tsx

@@ -24,7 +24,7 @@ import { ResizeCallbackData } from 'react-resizable';
 import ResizablePanel, { Size } from './ResizablePanel';
 
 export const SupersetBody = styled.div`
-  background: ${({ theme }) => theme.colors.grayscale.light4};
+  background: ${({ theme }) => theme.colorBgLayout};
   padding: 16px;
   min-height: 100%;
 

superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-country-map/CountryMap.stories.tsx

@@ -84,7 +84,7 @@ export const BasicCountryMapStory = (
     return (
       <div
         style={{
-          color: theme.colors.grayscale.base,
+          color: theme.colorTextLabel,
           textAlign: 'center',
           padding: 20,
         }}

superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js

@@ -124,7 +124,7 @@ function Calendar(element, props) {
         colorScale,
         min: legendColors[0],
         max: legendColors[legendColors.length - 1],
-        empty: theme.colors.grayscale.light5,
+        empty: theme.colorBgElevated,
       },
       displayLegend: showLegend,
       itemName: '',

superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx

@@ -32,8 +32,8 @@ const Calendar = ({ className, ...otherProps }) => {
           .d3-tip {
             line-height: 1;
             padding: ${theme.sizeUnit * 3}px;
-            background: ${theme.colors.grayscale.dark2};
+            background: ${theme.colorBgElevated};
-            color: ${theme.colors.grayscale.light5};
+            color: ${theme.colorTextLightSolid};
             border-radius: 4px;
             pointer-events: none;
             z-index: 1000;
@@ -46,7 +46,7 @@ const Calendar = ({ className, ...otherProps }) => {
             font-size: ${theme.fontSizeXS};
             width: 100%;
             line-height: 1;
-            color: ${theme.colors.grayscale.dark2};
+            color: ${theme.colorBgElevated};
             position: absolute;
             pointer-events: none;
           }
@@ -112,8 +112,8 @@ export default styled(Calendar)`
     .superset-legacy-chart-calendar .d3-tip {
       line-height: 1;
       padding: ${theme.sizeUnit * 3}px;
-      background: ${theme.colors.grayscale.dark2};
+      background: ${theme.colorBgElevated};
-      color: ${theme.colors.grayscale.light5};
+      color: ${theme.colorTextLightSolid};
       border-radius: ${theme.borderRadius}px;
       pointer-events: none;
       z-index: 1000;
@@ -124,7 +124,7 @@ export default styled(Calendar)`
     }
 
     .cal-heatmap-container .graph-label {
-      fill: ${theme.colors.grayscale.base};
+      fill: ${theme.colorTextTertiary};
       font-size: ${theme.fontSizeXS}px;
     }
 
@@ -134,11 +134,11 @@ export default styled(Calendar)`
     }
 
     .cal-heatmap-container .graph-rect {
-      fill: ${theme.colors.grayscale.light2};
+      fill: ${theme.colorBorder};
     }
 
     .cal-heatmap-container .graph-subdomain-group rect:hover {
-      stroke: ${theme.colors.grayscale.dark2};
+      stroke: ${theme.colorBgElevated};
       stroke-width: 1px;
     }
 
@@ -152,23 +152,23 @@ export default styled(Calendar)`
     }
 
     .cal-heatmap-container .qi {
-      background-color: ${theme.colors.grayscale.base};
+      background-color: ${theme.colorTextTertiary};
-      fill: ${theme.colors.grayscale.base};
+      fill: ${theme.colorTextTertiary};
     }
 
     .cal-heatmap-container .q1 {
-      background-color: ${theme.colors.warning.light2};
+      background-color: ${theme.colorWarningBg};
-      fill: ${theme.colors.warning.light2};
+      fill: ${theme.colorWarningBg};
     }
 
     .cal-heatmap-container .q2 {
-      background-color: ${theme.colors.warning.light1};
+      background-color: ${theme.colorWarning};
-      fill: ${theme.colors.warning.light1};
+      fill: ${theme.colorWarning};
     }
 
     .cal-heatmap-container .q3 {
-      background-color: ${theme.colors.success.light1};
+      background-color: ${theme.colorSuccess};
-      fill: ${theme.colors.success.light1};
+      fill: ${theme.colorSuccess};
     }
 
     .cal-heatmap-container .q4 {
@@ -177,8 +177,8 @@ export default styled(Calendar)`
     }
 
     .cal-heatmap-container .q5 {
-      background-color: ${theme.colors.success.dark1};
+      background-color: ${theme.colorSuccessActive};
-      fill: ${theme.colors.success.dark1};
+      fill: ${theme.colorSuccessActive};
     }
 
     .cal-heatmap-container rect.highlight {
@@ -207,7 +207,7 @@ export default styled(Calendar)`
     .ch-tooltip {
       padding: ${theme.sizeUnit * 2}px;
       background: ${theme.colorText};
-      color: ${theme.colors.grayscale.light1};
+      color: ${theme.colorTextLightSolid};
       font-size: ${theme.fontSizeSM}px;
       line-height: 1.4;
       width: 140px;
@@ -215,7 +215,7 @@ export default styled(Calendar)`
       z-index: 99999;
       text-align: center;
       border-radius: ${theme.borderRadius}px;
-      box-shadow: 2px 2px 2px ${theme.colors.grayscale.dark2};
+      box-shadow: 2px 2px 2px ${theme.colorBorder};
       display: none;
       box-sizing: border-box;
     }

superset-frontend/plugins/legacy-plugin-chart-country-map/src/ReactCountryMap.jsx

@@ -30,7 +30,7 @@ const CountryMap = ({ className, ...otherProps }) => (
 export default styled(CountryMap)`
   ${({ theme }) => `
     .superset-legacy-chart-country-map svg {
-      background-color: ${theme.colors.grayscale.light5};
+      background-color: ${theme.colorBgContainer};
     }
 
     .superset-legacy-chart-country-map {
@@ -38,13 +38,13 @@ export default styled(CountryMap)`
     }
 
     .superset-legacy-chart-country-map .background {
-      fill: ${theme.colors.grayscale.light5};
+      fill: ${theme.colorBgContainer};
       pointer-events: all;
     }
 
     .superset-legacy-chart-country-map .map-layer {
-      fill: ${theme.colors.grayscale.light5};
+      fill: ${theme.colorBgContainer};
-      stroke: ${theme.colors.grayscale.light1};
+      stroke: ${theme.colorBorderSecondary};
     }
 
     .superset-legacy-chart-country-map .effect-layer {
@@ -69,7 +69,7 @@ export default styled(CountryMap)`
 
     .superset-legacy-chart-country-map path.region {
       cursor: pointer;
-      stroke: ${theme.colors.grayscale.light2};
+      stroke: ${theme.colorSplit};
     }
   `}
 `;

superset-frontend/plugins/legacy-plugin-chart-horizon/src/HorizonChart.jsx

@@ -65,7 +65,7 @@ const StyledDiv = styled.div`
     }
 
     .superset-legacy-chart-horizon .horizon-row {
-      border-bottom: solid 1px ${theme.colors.grayscale.light2};
+      border-bottom: solid 1px ${theme.colorBorderSecondary};
       border-top: 0;
       padding: 0;
       margin: 0;

superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/PairedTTest.jsx

@@ -70,7 +70,7 @@ const StyledDiv = styled.div`
     }
 
     .reactable-data tr:hover {
-      background-color: ${theme.colors.grayscale.light3};
+      background-color: ${theme.colorFillTertiary};
     }
 
     .reactable-data tr .false {
@@ -90,14 +90,14 @@ const StyledDiv = styled.div`
     }
 
     .reactable-data .control td {
-      background-color: ${theme.colors.grayscale.light3};
+      background-color: ${theme.colorFillTertiary};
     }
 
     .reactable-header-sortable:hover,
     .reactable-header-sortable:focus,
     .reactable-header-sort-asc,
     .reactable-header-sort-desc {
-      background-color: ${theme.colors.grayscale.light3};
+      background-color: ${theme.colorFillTertiary};
       position: relative;
     }
 

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.jsx

@@ -39,7 +39,7 @@ export default styled(ParallelCoordinates)`
         overflow: auto;
         div.row {
           &:hover {
-            background-color: ${theme.colors.grayscale.light2};
+            background-color: ${theme.colorBgTextHover};
           }
         }
       }
@@ -62,14 +62,14 @@ export default styled(ParallelCoordinates)`
       fill: transparent;
     }
     .parcoords rect.background:hover {
-      fill: ${addAlpha(theme.colors.grayscale.base, 0.2)};
+      fill: ${addAlpha(theme.colorBorder, 0.2)};
     }
     .parcoords .resize rect {
-      fill: ${addAlpha(theme.colors.grayscale.dark2, 0.1)};
+      fill: ${addAlpha(theme.colorText, 0.1)};
     }
     .parcoords rect.extent {
-      fill: ${addAlpha(theme.colors.grayscale.light5, 0.25)};
+      fill: ${addAlpha(theme.colorBgContainer, 0.25)};
-      stroke: ${addAlpha(theme.colors.grayscale.dark2, 0.6)};
+      stroke: ${addAlpha(theme.colorText, 0.6)};
     }
     .parcoords .axis line,
     .parcoords .axis path {
@@ -93,7 +93,7 @@ export default styled(ParallelCoordinates)`
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
-      background-color: ${theme.colors.grayscale.light5};
+      background-color: ${theme.colorBgContainer};
     }
 
     /* data table styles */
@@ -106,7 +106,7 @@ export default styled(ParallelCoordinates)`
       margin: 0px;
     }
     .parcoords .row:nth-of-type(odd) {
-      background: ${addAlpha(theme.colors.grayscale.dark2, 0.05)};
+      background: ${addAlpha(theme.colorText, 0.05)};
     }
     .parcoords .header {
       font-weight: ${theme.fontWeightStrong};

superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.jsx

@@ -40,8 +40,8 @@ export default styled(Partition)`
     }
 
     .superset-legacy-chart-partition rect {
-      stroke: ${theme.colors.grayscale.light2};
+      stroke: ${theme.borderColorSecondary};
-      fill: ${theme.colors.grayscale.light1};
+      fill: ${theme.colorBgLayout};
       fill-opacity: 80%;
       transition: fill-opacity 180ms linear;
       cursor: pointer;
@@ -57,7 +57,7 @@ export default styled(Partition)`
     }
 
     .superset-legacy-chart-partition g:hover text {
-      fill: ${theme.colors.grayscale.dark2};
+      fill: ${theme.colorTextHeading};
     }
 
     .superset-legacy-chart-partition .partition-tooltip {
@@ -67,14 +67,14 @@ export default styled(Partition)`
       opacity: 0;
       padding: ${theme.sizeUnit}px;
       pointer-events: none;
-      background-color: ${theme.colors.grayscale.dark2};
+      background-color: ${theme.colorBgElevated};
       border-radius: ${theme.borderRadius}px;
     }
 
     .partition-tooltip td {
       padding-left: ${theme.sizeUnit}px;
       font-size: ${theme.fontSizeSM}px;
-      color: ${theme.colors.grayscale.light5};
+      color: ${theme.colorTextSecondary};
     }
   `}
 `;

superset-frontend/plugins/legacy-plugin-chart-rose/src/ReactRose.jsx

@@ -29,8 +29,8 @@ const Rose = ({ className, ...otherProps }) => (
         .tooltip {
           line-height: 1;
           padding: ${theme.sizeUnit * 3}px;
-          background: ${theme.colors.grayscale.dark2};
+          background: ${theme.colorBgElevated};
-          color: ${theme.colors.grayscale.light5};
+          color: ${theme.colorText};
           border-radius: 4px;
           pointer-events: none;
           z-index: 1000;
@@ -46,7 +46,7 @@ export default styled(Rose)`
   ${({ theme }) => `
     .superset-legacy-chart-rose path {
         transition: fill-opacity 180ms linear;
-        stroke: ${theme.colors.grayscale.light5};
+        stroke: ${theme.colorBorder};
         stroke-width: 1px;
         stroke-opacity: 1;
         fill-opacity: 0.75;

superset-frontend/plugins/legacy-plugin-chart-world-map/src/ReactWorldMap.jsx

@@ -39,7 +39,7 @@ export default styled(WorldMapComponent)`
   .superset-legacy-chart-world-map {
     position: relative;
     svg {
-      background-color: ${({ theme }) => theme.colors.grayscale.light5};
+      background-color: ${({ theme }) => theme.colorBgLayout};
     }
   }
   .hoverinfo {

superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js

@@ -203,14 +203,14 @@ function WorldMap(element, props) {
     height,
     data: processedData,
     fills: {
-      defaultFill: theme.colors.grayscale.light2,
+      defaultFill: theme.colorBorder,
     },
     geographyConfig: {
       popupOnHover: !inContextMenu,
       highlightOnHover: !inContextMenu,
       borderWidth: 1,
       borderColor: theme.colorSplit,
-      highlightBorderColor: theme.colors.grayscale.light5,
+      highlightBorderColor: theme.colorIcon,
       highlightFillColor: color,
       highlightBorderWidth: 1,
       popupTemplate: (geo, d) =>
@@ -232,7 +232,7 @@ function WorldMap(element, props) {
       animate: true,
       highlightOnHover: !inContextMenu,
       highlightFillColor: color,
-      highlightBorderColor: theme.colors.grayscale.dark2,
+      highlightBorderColor: theme.colorTextSecondary,
       highlightBorderWidth: 2,
       highlightBorderOpacity: 1,
       highlightFillOpacity: 0.85,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.tsx

@@ -27,8 +27,8 @@ const StyledLegend = styled.div`
   ${({ theme }) => `
     font-size: ${theme.fontSizeSM}px;
     position: absolute;
-    background: ${theme.colors.grayscale.light5};
+    background: ${theme.colorBgElevated};
-    box-shadow: 0 0 ${theme.sizeUnit}px ${theme.colors.grayscale.light2};
+    box-shadow: 0 0 ${theme.sizeUnit}px ${theme.colorBorderSecondary};
     margin: ${theme.sizeUnit * 6}px;
     padding: ${theme.sizeUnit * 3}px ${theme.sizeUnit * 5}px;
     outline: none;
@@ -42,7 +42,7 @@ const StyledLegend = styled.div`
 
       & li a {
         display: flex;
-        color: ${theme.colors.grayscale.base};
+        color: ${theme.colorText};
         text-decoration: none;
         padding: ${theme.sizeUnit}px 0;
 

superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Tooltip.tsx

@@ -38,8 +38,8 @@ const StyledDiv = styled.div<{ top: number; left: number }>`
     left: ${left}px;
     padding: ${theme.sizeUnit * 2}px;
     margin: ${theme.sizeUnit * 2}px;
-    background: ${theme.colors.grayscale.dark2};
+    background: ${theme.colorBgElevated};
-    color: ${theme.colors.grayscale.light5};
+    color: ${theme.colorText};
     maxWidth: 300px;
     fontSize: ${theme.fontSizeSM}px;
     zIndex: 9;

superset-frontend/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.jsx

@@ -164,15 +164,15 @@ export default styled(NVD3)`
   .d3-tip.nv-event-annotation-layer-NATIVE {
     width: 200px;
     border-radius: 2px;
-    background-color: ${({ theme }) => theme.colors.grayscale.base};
+    background-color: ${({ theme }) => theme.colorBgContainer};
     fill-opacity: 0.6;
     margin: ${({ theme }) => theme.sizeUnit * 2}px;
     padding: ${({ theme }) => theme.sizeUnit * 2}px;
-    color: ${({ theme }) => theme.colors.grayscale.light5};
+    color: ${({ theme }) => theme.colorTextLightSolid};
     &:after {
       content: '\\25BC';
       font-size: ${({ theme }) => theme.fontSize};
-      color: ${({ theme }) => theme.colors.grayscale.base};
+      color: ${({ theme }) => theme.colorText};
       position: absolute;
       bottom: -14px;
       left: 94px;

superset-frontend/plugins/plugin-chart-ag-grid-table/src/styles/index.tsx

@@ -130,13 +130,13 @@ export const MenuContainer = styled.div`
       gap: ${theme.sizeUnit * 2}px;
 
       &:hover {
-        background-color: ${theme.colors.primary.light4};
+        background-color: ${theme.colorPrimaryBgHover};
       }
     }
 
     .menu-divider {
       height: 1px;
-      background-color: ${theme.colors.grayscale.light2};
+      background-color: ${theme.colorBorderSecondary};
       margin: ${theme.sizeUnit}px 0;
     }
   `}
@@ -165,12 +165,12 @@ export const PopoverContainer = styled.div`
 
 export const PaginationContainer = styled.div`
   ${({ theme }) => `
-    border: 1px solid ${theme.colors.grayscale.light2};
+    border: 1px solid ${theme.colorBorderSecondary};
     display: flex;
     align-items: center;
     justify-content: flex-end;
     padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px;
-    border-top: 1px solid ${theme.colors.grayscale.light2};
+    border-top: 1px solid ${theme.colorBorderSecondary};
     font-size: ${theme.fontSize}px;
     color: ${theme.colorTextBase};
     transform: translateY(-${theme.sizeUnit}px);
@@ -222,7 +222,7 @@ export const PageButton = styled.div<{ disabled?: boolean }>`
     svg {
       height: ${theme.sizeUnit * 3}px;
       width: ${theme.sizeUnit * 3}px;
-      fill: ${disabled ? theme.colors.grayscale.light1 : theme.colors.grayscale.dark2};
+      fill: ${disabled ? theme.colorTextQuaternary : theme.colorTextSecondary};
     }
   `}
 `;
@@ -239,14 +239,14 @@ export const InfoText = styled.div`
   max-width: 242px;
   ${({ theme }) => `
     padding: 0 ${theme.sizeUnit * 2}px;
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorTextBase};
     font-size: ${theme.fontSizeSM}px;
   `}
 `;
 
 export const ColumnLabel = styled.span`
   ${({ theme }) => `
-    color: ${theme.colors.grayscale.dark2};
+    color: ${theme.colorTextLabel};
   `}
 `;
 
@@ -292,7 +292,7 @@ export const StyledChartContainer = styled.div<{
     }
 
     .dt-is-active-filter {
-      background: ${theme.colors.primary.light3};
+      background: ${theme.colorPrimaryBg};
       :hover {
         background-color: ${theme.colorPrimaryBgHover};
       }
@@ -386,7 +386,7 @@ export const StyledChartContainer = styled.div<{
     .input-wrapper svg {
       pointer-events: none;
       transform: translate(${theme.sizeUnit * 7}px, ${theme.sizeUnit / 2}px);
-      color: ${theme.colors.grayscale.base};
+      color: ${theme.colorTextBase};
     }
 
     .input-wrapper input {
@@ -396,16 +396,16 @@ export const StyledChartContainer = styled.div<{
         ${theme.sizeUnit * 1.5}px ${theme.sizeUnit * 8}px;
       line-height: 1.8;
       border-radius: ${theme.borderRadius}px;
-      border: 1px solid ${theme.colors.grayscale.light2};
+      border: 1px solid ${theme.colorBorderSecondary};
       background-color: transparent;
       outline: none;
 
       &:focus {
-        border-color: ${theme.colors.primary.base};
+        border-color: ${theme.colorPrimary};
       }
 
       &::placeholder {
-        color: ${theme.colors.grayscale.light1};
+        color: ${theme.colorTextQuaternary};
       }
     }
   `}

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

@@ -169,7 +169,7 @@ export default function PopKPI(props: PopKPIProps) {
 
   const getArrowIndicatorColor = () => {
     if (!comparisonColorEnabled || percentDifferenceNumber === 0) {
-      return theme.colors.grayscale.base;
+      return theme.colorTextTertiary;
     }
 
     if (percentDifferenceNumber > 0) {
@@ -190,7 +190,7 @@ export default function PopKPI(props: PopKPIProps) {
   `;
 
   const defaultBackgroundColor = theme.colorBgContainer;
-  const defaultTextColor = theme.colors.grayscale.base;
+  const defaultTextColor = theme.colorTextTertiary;
   const { backgroundColor, textColor } = useMemo(() => {
     let bgColor = defaultBackgroundColor;
     let txtColor = defaultTextColor;

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

@@ -25,6 +25,7 @@ import {
   getXAxisLabel,
   Metric,
   getValueFormatter,
+  supersetTheme,
   t,
   tooltipHtml,
 } from '@superset-ui/core';
@@ -78,7 +79,6 @@ export default function transformProps(
     queriesData,
     formData,
     rawFormData,
-    theme,
     hooks,
     inContextMenu,
     datasource: { currencyFormats = {}, columnFormats = {} },
@@ -281,7 +281,7 @@ export default function transformProps(
                 },
                 {
                   offset: 1,
-                  color: theme.colors.grayscale.light5,
+                  color: supersetTheme.colorBgContainer,
                 },
               ]),
             },

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

@@ -176,9 +176,9 @@ export default function transformProps(
       },
       emphasis: {
         itemStyle: {
-          borderColor: supersetTheme.colors.grayscale.light5,
+          borderColor: supersetTheme.colorBgContainer,
           shadowBlur: 10,
-          shadowColor: supersetTheme.colors.grayscale.dark2,
+          shadowColor: supersetTheme.colorTextBase,
         },
       },
     },

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts

@@ -424,7 +424,7 @@ export function transformIntervalAnnotation(
     const intervalLabel: SeriesLabelOption = showLabel
       ? {
           show: true,
-          color: theme.colors.grayscale.dark2,
+          color: theme.colorTextLabel,
           position: 'insideTop',
           verticalAlign: 'top',
           fontWeight: 'bold',
@@ -432,19 +432,19 @@ export function transformIntervalAnnotation(
           emphasis: {
             position: 'insideTop',
             verticalAlign: 'top',
-            backgroundColor: theme.colors.grayscale.light5,
+            backgroundColor: theme.colorPrimaryBgHover,
           },
         }
       : {
           show: false,
-          color: theme.colors.grayscale.dark2,
+          color: theme.colorTextLabel,
           // @ts-ignore
           emphasis: {
             fontWeight: 'bold',
             show: true,
             position: 'insideTop',
             verticalAlign: 'top',
-            backgroundColor: theme.colors.grayscale.light5,
+            backgroundColor: theme.colorPrimaryBgHover,
           },
         };
     series.push({
@@ -505,25 +505,25 @@ export function transformEventAnnotation(
     const eventLabel: SeriesLineLabelOption = showLabel
       ? {
           show: true,
-          color: theme.colors.grayscale.dark2,
+          color: theme.colorTextLabel,
           position: 'insideEndTop',
           fontWeight: 'bold',
           formatter: (params: CallbackDataParams) => params.name,
           // @ts-ignore
           emphasis: {
-            backgroundColor: theme.colors.grayscale.light5,
+            backgroundColor: theme.colorPrimaryBgHover,
           },
         }
       : {
           show: false,
-          color: theme.colors.grayscale.dark2,
+          color: theme.colorTextLabel,
           position: 'insideEndTop',
           // @ts-ignore
           emphasis: {
             formatter: (params: CallbackDataParams) => params.name,
             fontWeight: 'bold',
             show: true,
-            backgroundColor: theme.colors.grayscale.light5,
+            backgroundColor: theme.colorPrimaryBgHover,
           },
         };
 

superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx

@@ -64,12 +64,12 @@ const METRIC_KEY = t('Metric');
 const vals = ['value'];
 
 const StyledPlusSquareOutlined = styled(PlusSquareOutlined)`
-  stroke: ${({ theme }) => theme.colors.grayscale.light2};
+  stroke: ${({ theme }) => theme.colorBorderSecondary};
   stroke-width: 16px;
 `;
 
 const StyledMinusSquareOutlined = styled(MinusSquareOutlined)`
-  stroke: ${({ theme }) => theme.colors.grayscale.light2};
+  stroke: ${({ theme }) => theme.colorBorderSecondary};
   stroke-width: 16px;
 `;
 

superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js

@@ -62,7 +62,7 @@ export const Styles = styled.div`
     table.pvtTable thead th.pvtSubtotalLabel,
     table.pvtTable tbody tr:last-of-type th,
     table.pvtTable tbody tr:last-of-type td {
-      border-bottom: 1px solid ${theme.colors.grayscale.light2};
+      border-bottom: 1px solid ${theme.colorSplit};
     }
 
     table.pvtTable
@@ -77,7 +77,7 @@ export const Styles = styled.div`
 
     table.pvtTable tbody tr td:last-of-type,
     table.pvtTable thead tr th:last-of-type:not(.pvtSubtotalLabel) {
-      border-right: 1px solid ${theme.colors.grayscale.light2};
+      border-right: 1px solid ${theme.colorSplit};
     }
 
     table.pvtTable
@@ -104,9 +104,9 @@ export const Styles = styled.div`
     table.pvtTable tbody tr td {
       color: ${theme.colorPrimaryText};
       padding: ${theme.sizeUnit}px;
-      background-color: ${theme.colors.grayscale.light5};
+      background-color: ${theme.colorBgBase};
-      border-top: 1px solid ${theme.colors.grayscale.light2};
+      border-top: 1px solid ${theme.colorSplit};
-      border-left: 1px solid ${theme.colors.grayscale.light2};
+      border-left: 1px solid ${theme.colorSplit};
       vertical-align: top;
       text-align: right;
     }

superset-frontend/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx

@@ -106,7 +106,7 @@ class WordCloud extends PureComponent<FullWordCloudProps, WordCloudState> {
       text: 'Text',
     },
     defaultEncoding: {
-      color: { value: this.props.theme.colors.grayscale.dark2 },
+      color: { value: this.props.theme.colorTextLabel },
       fontFamily: { value: this.props.theme.fontFamily },
       fontSize: { value: 20 },
       fontWeight: { value: 'bold' },

superset-frontend/src/SqlLab/components/QueryTable/styles.ts

@@ -33,7 +33,7 @@ export const verticalAlign = css`
 export const StyledTooltip = styled(IconTooltip)`
   padding-right: ${({ theme }) => theme.sizeUnit * 2}px;
   span {
-    color: ${({ theme }) => theme.colors.grayscale.base};
+    color: ${({ theme }) => theme.colorIcon};
     &: hover {
       color: ${({ theme }) => theme.colorPrimary};
     }

superset-frontend/src/SqlLab/components/SaveQuery/index.tsx

@@ -65,7 +65,7 @@ const Styles = styled.span`
   span[role='img']:not([aria-label='down']) {
     display: flex;
     margin: 0;
-    color: ${({ theme }) => theme.colors.grayscale.base};
+    color: ${({ theme }) => theme.colorIcon};
     svg {
       vertical-align: -${({ theme }) => theme.sizeUnit * 1.25}px;
       margin: 0;

superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx

@@ -125,7 +125,7 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
       [QueryState.TimedOut]: theme.colorError,
     };
 
-    return statusColors[state] || theme.colors.grayscale.light2;
+    return statusColors[state] || theme.colorIcon;
   };
   return (
     <TabTitleWrapper>

superset-frontend/src/components/Chart/Chart.tsx

@@ -165,7 +165,7 @@ const MessageSpan = styled.span`
   text-align: center;
   margin: ${({ theme }) => theme.sizeUnit * 4}px auto;
   width: fit-content;
-  color: ${({ theme }) => theme.colors.grayscale.base};
+  color: ${({ theme }) => theme.colorText};
 `;
 
 class Chart extends PureComponent<ChartProps, {}> {

superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx

@@ -286,11 +286,7 @@ const ChartContextMenu = (
               {t('Add cross-filter')}
               <MenuItemTooltip
                 title={crossFilteringTooltipTitle}
-                color={
+                color={!isCrossFilterDisabled ? theme.colorIcon : undefined}
-                  !isCrossFilterDisabled
-                    ? theme.colors.grayscale.base
-                    : undefined
-                }
               />
             </div>
           )}

superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.tsx

@@ -123,7 +123,7 @@ export default function TableControls({
       >
         <RowCountLabel loading={loading && !totalCount} rowcount={totalCount} />
         <Icons.ReloadOutlined
-          iconColor={theme.colors.grayscale.light1}
+          iconColor={theme.colorIcon}
           iconSize="l"
           aria-label={t('Reload')}
           role="button"

superset-frontend/src/components/GridTable/Header.tsx

@@ -70,7 +70,7 @@ const HeaderAction = styled.div`
     box-shadow: 0 0 2px var(--ag-chip-border-color);
     border-radius: 50%;
     &:hover {
-      box-shadow: 0 0 4px ${({ theme }) => theme.colors.grayscale.light1};
+      box-shadow: 0 0 4px ${({ theme }) => theme.colorBorderSecondary};
     }
   }
 `;

superset-frontend/src/components/ListView/CrossLinks.tsx

@@ -53,7 +53,7 @@ const StyledCrossLinks = styled.div`
 
       .count {
         cursor: pointer;
-        color: ${theme.colors.grayscale.base};
+        color: ${theme.colorTextSecondary};
         font-weight: ${theme.fontWeightStrong};
       }
     }

superset-frontend/src/components/ListView/CrossLinksTooltip.tsx

@@ -30,7 +30,7 @@ export type CrossLinksTooltipProps = {
 
 const StyledLinkedTooltip = styled.div`
   .link {
-    color: ${({ theme }) => theme.colors.grayscale.light5};
+    color: ${({ theme }) => theme.colorLink};
     display: block;
     text-decoration: underline;
   }

superset-frontend/src/components/ListView/Filters/Search.tsx

@@ -96,10 +96,7 @@ function SearchFilter(
         onPressEnter={handleSubmit}
         onBlur={handleSubmit}
         prefix={
-          <Icons.SearchOutlined
+          <Icons.SearchOutlined iconColor={theme.colorIcon} iconSize="l" />
-            iconColor={theme.colors.grayscale.light1}
-            iconSize="l"
-          />
         }
       />
     </FilterContainer>

superset-frontend/src/components/ListView/ListView.tsx

@@ -88,7 +88,7 @@ const ListViewStyles = styled.div`
 
     .row-count-container {
       margin-top: ${theme.sizeUnit * 2}px;
-      color: ${theme.colors.grayscale.base};
+      color: ${theme.colorText};
     }
   `}
 `;
@@ -160,7 +160,7 @@ const ViewModeContainer = styled.div`
     }
 
     .active {
-      background-color: ${theme.colors.grayscale.base};
+      background-color: ${theme.colorText};
 
       svg {
         color: ${theme.colorBgLayout};

superset-frontend/src/components/MessageToasts/ToastPresenter.tsx

@@ -63,7 +63,7 @@ const StyledToastPresenter = styled.div<VisualProps>(
     }
 
     .toast > button {
-      color: ${theme.colors.grayscale.light5};
+      color: ${theme.colorTextLightSolid};
       opacity: 1;
     }
 

superset-frontend/src/components/TableSelector/index.tsx

@@ -68,7 +68,7 @@ const TableSelectorWrapper = styled.div`
     }
 
     .table-length {
-      color: ${theme.colors.grayscale.light1};
+      color: ${theme.colorTextSecondary};
     }
 
     .select {

superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx

@@ -96,7 +96,7 @@ const MetadataItem: FC<{
     <span
       css={(theme: Theme) => css`
         margin-right: ${theme.sizeUnit * 4}px;
-        color: ${theme.colors.grayscale.base};
+        color: ${theme.colorText};
       `}
     >
       {label}
@@ -214,7 +214,7 @@ const AddSliceCard: FC<{
           color: ${theme.colorText};
 
           &:hover {
-            //background: ${theme.colors.grayscale.light4};
+            //background: ${theme.colorFillTertiary};
           }
 
           opacity: ${isSelected ? 0.4 : 'unset'};

superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx

@@ -53,7 +53,7 @@ const BuilderComponentPane = ({ topOffset = 0 }) => (
         position: absolute;
         height: 100%;
         width: ${BUILDER_PANE_WIDTH}px;
-        box-shadow: -4px 0 4px 0 ${rgba(theme.colors.grayscale.dark2, 0.1)};
+        box-shadow: -4px 0 4px 0 ${rgba(theme.colorBorder, 0.1)};
         background-color: ${theme.colorBgBase};
       `}
     >

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx

@@ -140,7 +140,7 @@ const DashboardContentWrapper = styled.div`
       /* drop shadow for top-level tabs only */
       & .dashboard-component-tabs {
         box-shadow: 0 ${theme.sizeUnit}px ${theme.sizeUnit}px 0
-          ${addAlpha(theme.colors.grayscale.dark2, 0.1)};
+          ${addAlpha(theme.colorBorderSecondary, 0.1)};
         padding-left: ${theme.sizeUnit *
         2}px; /* note this is added to tab-level padding, to match header */
       }

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardWrapper.tsx

@@ -44,8 +44,8 @@ const StyledDiv = styled.div`
       }
       & .empty-droptarget:before {
         display: block;
-        border-color: ${theme.colors.primary.light1};
+        border-color: ${theme.colorPrimary};
-        background-color: ${theme.colors.primary.light3};
+        background-color: ${theme.colorPrimaryBg};
       }
       & .grid-row:after {
         border-style: hidden;

superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx

@@ -175,7 +175,7 @@ const DetailsPanelPopover = ({
 
   return (
     <Popover
-      color={`${theme.colors.grayscale.dark2}cc`}
+      color={`${theme.colorBgElevated}cc`}
       content={content}
       open={popoverVisible}
       onOpenChange={handleVisibility}

superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx

@@ -21,8 +21,8 @@ import { css, styled } from '@superset-ui/core';
 export const Pill = styled.div`
   ${({ theme }) => css`
     display: flex;
-    color: ${theme.colors.grayscale.light5};
+    color: ${theme.colorBgBase};
-    background: ${theme.colors.grayscale.base};
+    background: ${theme.colorText};
     border-radius: 1em;
     vertical-align: text-top;
     padding: ${theme.sizeUnit}px ${theme.sizeUnit * 2}px;
@@ -36,7 +36,7 @@ export const Pill = styled.div`
 
     svg {
       position: relative;
-      color: ${theme.colors.grayscale.light5};
+      color: ${theme.colorBgBase};
       width: 1em;
       height: 1em;
       display: inline-block;
@@ -115,7 +115,7 @@ export const FiltersDetailsContainer = styled.div`
     max-width: 300px;
     overflow-x: hidden;
 
-    color: ${theme.colors.grayscale.light5};
+    color: ${theme.colorBgBase};
   `}
 `;
 
@@ -129,7 +129,7 @@ export const Separator = styled.div`
   ${({ theme }) => css`
     width: 100%;
     height: 1px;
-    background-color: ${theme.colors.grayscale.light1};
+    background-color: ${theme.colorBorderSecondary};
     margin: ${theme.sizeUnit * 4}px 0;
   `}
 `;

superset-frontend/src/dashboard/components/FiltersBadge/index.tsx

@@ -63,14 +63,14 @@ const StyledFilterCount = styled.div`
     margin-right: ${theme.sizeUnit}px;
     padding-left: ${theme.sizeUnit * 2}px;
     padding-right: ${theme.sizeUnit * 2}px;
-    background: ${theme.colors.grayscale.light4};
+    background: ${theme.colorBgContainer};
     border-radius: 4px;
     height: 100%;
     .anticon {
       vertical-align: middle;
-      color: ${theme.colors.grayscale.base};
+      color: ${theme.colorIcon};
       &:hover {
-        color: ${theme.colors.grayscale.light1};
+        color: ${theme.colorIconHover};
       }
     }
 

superset-frontend/src/dashboard/components/Header/index.jsx

@@ -130,18 +130,18 @@ const StyledUndoRedoButton = styled(Button)`
 `;
 
 const undoRedoStyle = theme => css`
-  color: ${theme.colors.grayscale.light1};
+  color: ${theme.colorIcon};
   &:hover {
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorIconHover};
   }
 `;
 
 const undoRedoEmphasized = theme => css`
-  color: ${theme.colors.grayscale.base};
+  color: ${theme.colorIcon};
 `;
 
 const undoRedoDisabled = theme => css`
-  color: ${theme.colors.grayscale.light2};
+  color: ${theme.colorTextDisabled};
 `;
 
 const saveBtnStyle = theme => css`

superset-frontend/src/dashboard/components/IconButton.tsx

@@ -29,7 +29,7 @@ const StyledDiv = styled.div`
   display: flex;
   align-items: center;
   cursor: pointer;
-  color: ${({ theme }) => theme.colors.grayscale.base};
+  color: ${({ theme }) => theme.colorIcon};
   &:hover {
     color: ${({ theme }) => theme.colorPrimary};
   }

superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx

@@ -58,7 +58,7 @@ const StackableHeader = styled(Button)<{ top: number }>`
   ${({ theme, top }) => `
      position: sticky;
      top: ${top}px;
-     background-color: ${theme.colors.grayscale.light5};
+     background-color: ${theme.colorBgContainer};
      margin: 0px;
      padding: 8px 4px;
      z-index: 1;

superset-frontend/src/dashboard/components/dnd/DragHandle.tsx

@@ -35,7 +35,7 @@ const DragHandleContainer = styled.div<{ position: 'left' | 'top' }>`
       transform: rotate(90deg);
     `}
     & path {
-      fill: ${theme.colors.grayscale.base};
+      fill: ${theme.colorIcon};
     }
   `}
 `;

superset-frontend/src/dashboard/components/filterscope/FilterScope.test.tsx

@@ -170,7 +170,7 @@ function getCheckboxState(name: string): CheckboxState {
   const fill = svgPath.getAttribute('fill');
   return fill === supersetTheme.colorPrimary
     ? CHECKED
-    : fill === supersetTheme.colors.grayscale.light1
+    : fill === supersetTheme.colorTextSecondary
       ? INDETERMINATE
       : UNCHECKED;
 }

superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx

@@ -227,7 +227,7 @@ const ScopeSelector = styled.div`
               border-radius: ${theme.borderRadius}px;
               margin-top: ${theme.sizeUnit * -2}px;
               box-shadow: inset 0 0 0 2px ${theme.colorBorder};
-              background: ${theme.colors.grayscale.light3};
+              background: ${theme.colorFill};
             }
           }
 
@@ -309,7 +309,7 @@ const ActionsContainer = styled.div`
   ${({ theme }) => `
     height: ${theme.sizeUnit * 16}px;
 
-    border-top: ${theme.sizeUnit / 4}px solid ${theme.colors.primary.light3};
+    border-top: ${theme.sizeUnit / 4}px solid ${theme.colorPrimaryBg};
     padding: ${theme.sizeUnit * 6}px;
     margin: 0 0 0 ${-theme.sizeUnit * 6}px;
     text-align: right;

superset-frontend/src/dashboard/components/gridComponents/Divider.jsx

@@ -47,7 +47,7 @@ const DividerLine = styled.div`
       content: '';
       height: 1px;
       width: 100%;
-      background-color: ${theme.colors.grayscale.light2};
+      background-color: ${theme.colorSplit};
       display: block;
     }
 

superset-frontend/src/dashboard/components/gridComponents/Tab.jsx

@@ -78,13 +78,11 @@ const defaultProps = {
 };
 
 const TabTitleContainer = styled.div`
-  ${({ isHighlighted, theme: { sizeUnit, colors } }) => `
+  ${({ isHighlighted, theme: { sizeUnit, colorPrimaryBg } }) => `
     padding: ${sizeUnit}px ${sizeUnit * 8}px ${sizeUnit}px ${sizeUnit * 2}px;
     margin: ${-sizeUnit}px ${sizeUnit * -2}px;
     transition: box-shadow 0.2s ease-in-out;
-    ${
+    ${isHighlighted && `box-shadow: 0 0 ${sizeUnit}px ${colorPrimaryBg};`}
-      isHighlighted && `box-shadow: 0 0 ${sizeUnit}px ${colors.primary.light1};`
-    }
   `}
 `;
 

superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.tsx

@@ -19,7 +19,6 @@
 import { PureComponent } from 'react';
 import cx from 'classnames';
 import { css, styled } from '@superset-ui/core';
-import { Icons } from '@superset-ui/core/components/Icons';
 import { DragDroppable } from 'src/dashboard/components/dnd/DragDroppable';
 import { NEW_COMPONENTS_SOURCE_ID } from 'src/dashboard/util/constants';
 import { NEW_COMPONENT_SOURCE_TYPE } from 'src/dashboard/util/componentTypes';
@@ -37,33 +36,18 @@ interface DraggableNewComponentProps {
 const NewComponent = styled.div`
   ${({ theme }) => css`
     display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
     align-items: center;
-    justify-content: space-between;
+    padding: ${theme.sizeUnit * 4}px;
-    padding: 0 ${theme.sizeUnit}px;
+    background: ${theme.colorBgContainer};
-    margin: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px;
-
-    // hack to make the drag preview image corners rounded
-    transform: translate(0, 0);
-    color: ${theme.colorText};
-    background-color: ${theme.colorBgLayout};
-    border-radius: ${theme.borderRadius}px;
     cursor: move;
-
+    &:not(.static):hover {
-    &:hover {
+      background: ${theme.colorFillContentHover};
-      background-color: ${theme.colorPrimaryBgHover};
     }
   `}
 `;
 
-const NewComponentContent = styled.div`
-  ${({ theme }) => css`
-    display: flex;
-    align-items: center;
-    min-width: 0;
-    margin-right: ${theme.sizeUnit * 2}px;
-  `}
-`;
-
 const NewComponentPlaceholder = styled.div`
   ${({ theme }) => css`
     position: relative;
@@ -99,15 +83,12 @@ export default class DraggableNewComponent extends PureComponent<DraggableNewCom
       >
         {({ dragSourceRef }) => (
           <NewComponent ref={dragSourceRef} data-test="new-component">
-            <NewComponentContent>
+            <NewComponentPlaceholder
-              <NewComponentPlaceholder
+              className={cx('new-component-placeholder', className)}
-                className={cx('new-component-placeholder', className)}
+            >
-              >
+              {IconComponent && <IconComponent iconSize="xl" />}
-                {IconComponent && <IconComponent iconSize="xl" />}
+            </NewComponentPlaceholder>
-              </NewComponentPlaceholder>
+            {label}
-              {label}
-            </NewComponentContent>
-            <Icons.Drag iconSize="xl" />
           </NewComponent>
         )}
       </DragDroppable>

superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx

@@ -75,8 +75,8 @@ const PopoverMenuStyles = styled.div`
     top: -42px;
     height: ${theme.sizeUnit * 10}px;
     padding: 0 ${theme.sizeUnit * 4}px;
-    background: ${theme.colors.grayscale.light5};
+    background: ${theme.colorBgContainer};
-    box-shadow: 0 1px 2px 1px ${addAlpha(theme.colors.grayscale.dark2, 0.35)};
+    box-shadow: 0 1px 2px 1px ${addAlpha(theme.colorTextBase, 0.35)};
     font-size: ${theme.fontSize}px;
     cursor: default;
     z-index: 3000;
@@ -93,7 +93,7 @@ const PopoverMenuStyles = styled.div`
       content: '';
       width: 1px;
       height: 100%;
-      background: ${theme.colors.grayscale.light2};
+      background: ${theme.colorSplit};
       margin: 0 ${theme.sizeUnit * 4}px;
     }
   `}

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx

@@ -103,7 +103,7 @@ const CrossFilter = (props: {
                 margin-bottom: ${theme.sizeUnit * 4}px;
                 margin-top: ${theme.sizeUnit * 4}px;
             `}
-            background: ${theme.colors.grayscale.light2};
+            background: ${theme.colorSplit};
           `}
         />
       )}

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx

@@ -33,7 +33,7 @@ const StyledCrossFilterTitle = styled.div`
   ${({ theme }) => `
     display: flex;
     font-size: ${theme.fontSizeSM}px;
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorText};
     vertical-align: middle;
     align-items: center;
   `}
@@ -42,13 +42,13 @@ const StyledCrossFilterTitle = styled.div`
 const StyledIconSearch = styled(Icons.SearchOutlined)`
   ${({ theme }) => `
     & > span.anticon.anticon-search {
-      color: ${theme.colors.grayscale.light1};
+      color: ${theme.colorIcon};
       margin-left: ${theme.sizeUnit}px;
       transition: 0.3s;
       vertical-align: middle;
       line-height: 0;
       &:hover {
-        color: ${theme.colors.grayscale.base};
+        color: ${theme.colorIconHover};
       }
     }
   `}

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx

@@ -71,7 +71,7 @@ const ScopingTitle = ({
     >
       {label}
       <Icons.DeleteOutlined
-        iconColor={theme.colors.grayscale.light3}
+        iconColor={theme.colorIcon}
         iconSize="xl"
         onClick={(event: React.MouseEvent<HTMLElement>) => {
           event.stopPropagation();
@@ -150,7 +150,7 @@ export const ChartsScopingListPanel = ({
         css={css`
           width: 100%;
           height: 1px;
-          background-color: ${theme.colors.grayscale.light3};
+          background-color: ${theme.colorSplit};
           margin: ${theme.sizeUnit * 3}px 0;
         `}
       />

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx

@@ -51,7 +51,7 @@ interface ScopingTreePanelProps {
 const InfoText = styled.div`
   ${({ theme }) => css`
     font-size: ${theme.fontSizeSM}px;
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorTextSecondary};
     margin-bottom: ${theme.sizeUnit * 7}px;
   `}
 `;

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx

@@ -130,7 +130,7 @@ const HorizontalOverflowDivider = ({
               ${truncationCSS};
               display: block;
               font-size: ${theme.fontSizeSM}px;
-              color: ${theme.colors.grayscale.base};
+              color: ${theme.colorTextDescription};
               margin: ${theme.sizeUnit}px 0 0 0;
             `}
           >

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx

@@ -36,7 +36,7 @@ const HorizontalBar = styled.div`
       theme.sizeUnit * 3
     }px ${theme.sizeUnit * 4}px;
     background: ${theme.colorBgBase};
-    box-shadow: inset 0px -2px 2px -1px ${theme.colors.grayscale.light2};
+    box-shadow: inset 0px -2px 2px -1px ${theme.colorSplit};
   `}
 `;
 
@@ -57,7 +57,7 @@ const HorizontalBarContent = styled.div`
 const FilterBarEmptyStateContainer = styled.div`
   ${({ theme }) => `
     font-weight: ${theme.fontWeightStrong};
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorText};
     font-size: ${theme.fontSizeSM}px;
     padding-left: ${theme.sizeUnit * 2}px;
   `}

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx

@@ -63,7 +63,7 @@ const Bar = styled.div<{ width: number }>`
     flex-direction: column;
     flex-grow: 1;
     width: ${width}px;
-    background: ${theme.colors.grayscale.light5};
+    background: ${theme.colorBgContainer};
     border-right: 1px solid ${theme.colorSplit};
     border-bottom: 1px solid ${theme.colorSplit};
     min-height: 100%;

superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx

@@ -101,7 +101,7 @@ export const DependenciesRow = memo(({ filter }: FilterCardRowProps) => {
         >
           <Icons.InfoCircleOutlined
             iconSize="m"
-            iconColor={theme.colors.grayscale.light1}
+            iconColor={theme.colorIcon}
             css={css`
               margin-left: ${theme.sizeUnit}px;
             `}

superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx

@@ -73,7 +73,7 @@ export const NameRow = ({
         >
           <Icons.EditOutlined
             iconSize="l"
-            iconColor={theme.colors.grayscale.light1}
+            iconColor={theme.colorIcon}
             css={() => css`
               cursor: pointer;
             `}

superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts

@@ -41,7 +41,7 @@ export const Row = styled.div`
 
 export const RowLabel = styled.span`
   ${({ theme }) => css`
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorText};
     padding-right: ${theme.sizeUnit * 4}px;
     margin-right: auto;
     white-space: nowrap;

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx

@@ -57,7 +57,7 @@ const DeleteFilter = styled(Icons.DeleteOutlined)`
   ${({ theme }) => `
     cursor: pointer;
     margin-left: ${theme.sizeUnit * 2}px;
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorIcon};
     &:hover {
       color: ${theme.colorText};
     }
@@ -79,7 +79,7 @@ const RowPanel = styled.div`
 
 const Label = styled.div`
   font-size: ${({ theme }) => theme.fontSizeSM}px;
-  color: ${({ theme }) => theme.colors.grayscale.base};
+  color: ${({ theme }) => theme.colorText};
   margin-bottom: ${({ theme }) => theme.sizeUnit}px;
 `;
 

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx

@@ -183,7 +183,7 @@ const FilterTypeInfo = styled.div<{ expanded: boolean }>`
   ${({ theme, expanded }) => `
     width: ${expanded ? '49%' : `${FORM_ITEM_WIDTH}px`};
     font-size: ${theme.fontSizeSM}px;
-    color: ${theme.colors.grayscale.light1};
+    color: ${theme.colorTextSecondary};
     margin:
       ${theme.sizeUnit * 2}px
       0px

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/RemovedFilter.tsx

@@ -27,7 +27,7 @@ const RemovedContent = styled.div`
   text-align: center;
   justify-content: center;
   align-items: center;
-  color: ${({ theme }) => theme.colors.grayscale.base};
+  color: ${({ theme }) => theme.colorText};
 `;
 
 type RemovedFilterProps = {

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx

@@ -740,7 +740,7 @@ function FiltersConfigModal({
           <StyledExpandButtonWrapper>
             <ToggleIcon
               iconSize="l"
-              iconColor={theme.colors.grayscale.dark2}
+              iconColor={theme.colorIcon}
               onClick={toggleExpand}
             />
           </StyledExpandButtonWrapper>

superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts

@@ -31,7 +31,7 @@ const useFilterFocusHighlightStyles = (chartId: number) => {
 
   const focusedChartStyles = useMemo(
     () => ({
-      borderColor: theme.colors.primary.light2,
+      borderColor: theme.colorPrimaryBorder,
       opacity: 1,
       boxShadow: `0px 0px ${theme.sizeUnit * 2}px ${theme.colorPrimary}`,
       pointerEvents: 'auto',

superset-frontend/src/explore/components/DataTableControl/index.tsx

@@ -42,7 +42,7 @@ import { prepareCopyToClipboardTabularData } from 'src/utils/common';
 import { getTimeColumns, setTimeColumns } from './utils';
 
 export const CellNull = styled('span')`
-  color: ${({ theme }) => theme.colors.grayscale.light1};
+  color: ${({ theme }) => theme.colorTextTertiary};
 `;
 
 export const CopyButton = styled(Button)`
@@ -161,7 +161,7 @@ const FormatPickerContainer = styled.div`
 
 const FormatPickerLabel = styled.span`
   font-size: ${({ theme }) => theme.fontSizeSM}px;
-  color: ${({ theme }) => theme.colors.grayscale.base};
+  color: ${({ theme }) => theme.colorText};
   margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
 `;
 
@@ -216,7 +216,7 @@ const DataTableTemporalHeaderCell = ({
       >
         <Icons.SettingOutlined
           iconSize="m"
-          iconColor={theme.colors.grayscale.light1}
+          iconColor={theme.colorIcon}
           css={{ marginRight: `${theme.sizeUnit}px` }}
           onClick={(e: React.MouseEvent<HTMLElement>) => e.stopPropagation()}
         />

superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx

@@ -17,13 +17,7 @@
  * under the License.
  */
 import { useCallback, useEffect, useMemo, useState, MouseEvent } from 'react';
-import {
+import { isFeatureEnabled, FeatureFlag, styled, t } from '@superset-ui/core';
-  isFeatureEnabled,
-  FeatureFlag,
-  styled,
-  t,
-  useTheme,
-} from '@superset-ui/core';
 import { Icons } from '@superset-ui/core/components/Icons';
 import Tabs from '@superset-ui/core/components/Tabs';
 import {
@@ -96,7 +90,6 @@ export const DataTablesPane = ({
   setForceQuery,
   canDownload,
 }: DataTablesPaneProps) => {
-  const theme = useTheme();
   const [activeTabKey, setActiveTabKey] = useState<string>(ResultTypes.Results);
   const [isRequest, setIsRequest] = useState<Record<ResultTypes, boolean>>({
     results: false,
@@ -189,7 +182,7 @@ export const DataTablesPane = ({
         )}
       </TableControlsWrapper>
     );
-  }, [handleCollapseChange, panelOpen, theme.colors.grayscale.base]);
+  }, [handleCollapseChange, panelOpen]);
 
   const queryResultsPanes = useResultsPane({
     errorMessage,

superset-frontend/src/explore/components/DatasourcePanel/index.tsx

@@ -87,7 +87,7 @@ const DatasourceContainer = styled.div`
     .field-length {
       margin-bottom: ${theme.sizeUnit * 2}px;
       font-size: ${theme.fontSizeSM}px;
-      color: ${theme.colors.grayscale.light1};
+      color: ${theme.colorTextTertiary};
     }
     .form-control.input-md {
       display: inline-flex;
@@ -97,7 +97,7 @@ const DatasourceContainer = styled.div`
     }
     .type-label {
       font-size: ${theme.fontSizeSM}px;
-      color: ${theme.colors.grayscale.base};
+      color: ${theme.colorTextSecondary};
     }
     .Control {
       padding-bottom: 0;

superset-frontend/src/explore/components/RunQueryButton/index.tsx

@@ -43,7 +43,7 @@ export const RunQueryButton = ({
   const theme = useTheme();
   return loading ? (
     <Button onClick={onStop} buttonStyle="danger" disabled={!canStopQuery}>
-      <Icons.Square iconSize="xs" iconColor={theme.colors.primary.light5} />
+      <Icons.Square iconSize="xs" iconColor={theme.colorIcon} />
       {t('Stop')}
     </Button>
   ) : (

superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx

@@ -220,7 +220,7 @@ class AnnotationLayerControl extends PureComponent<Props, PopoverState> {
         css={theme => ({
           '&:hover': {
             cursor: 'pointer',
-            backgroundColor: theme.colors.grayscale.light4,
+            backgroundColor: theme.colorFillContentHover,
           },
         })}
         content={this.renderPopover(

superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx

@@ -173,7 +173,7 @@ export default function ColumnConfigControl<T extends ColumnConfig>({
               fontSize: theme.fontSizeXS,
               color: theme.colorTextLabel,
               ':hover': {
-                backgroundColor: theme.colors.grayscale.light4,
+                backgroundColor: theme.colorFillContentHover,
               },
             }}
             onClick={() => setShowAllColumns(!showAllColumns)}

superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx

@@ -34,7 +34,8 @@ export default memo(function ColumnConfigItem({
   width,
   height,
 }: ColumnConfigItemProps) {
-  const { colors, sizeUnit } = useTheme();
+  const theme = useTheme();
+  const { sizeUnit } = theme;
   const caretWidth = sizeUnit * 6;
 
   const outerContainerStyle = css({
@@ -42,20 +43,20 @@ export default memo(function ColumnConfigItem({
     alignItems: 'center',
     cursor: 'pointer',
     padding: `${sizeUnit}px ${2 * sizeUnit}px`,
-    borderBottom: `1px solid ${colors.grayscale.light2}`,
+    borderBottom: `1px solid ${theme.colorBorderSecondary}`,
     position: 'relative',
     paddingRight: `${caretWidth}px`,
     ':last-child': {
       borderBottom: 'none',
     },
     ':hover': {
-      background: colors.grayscale.light4,
+      background: theme.colorFillTertiary,
     },
     '> .fa': {
-      color: colors.grayscale.light2,
+      color: theme.colorTextTertiary,
     },
     ':hover > .fa': {
-      color: colors.grayscale.light1,
+      color: theme.colorTextSecondary,
     },
   });
 
@@ -78,11 +79,9 @@ export default memo(function ColumnConfigItem({
     top: 3 * sizeUnit,
     transform: 'translateY(-50%)',
     gap: sizeUnit,
-    color: colors.grayscale.light1,
+    color: theme.colorTextSecondary,
   });
 
-  const theme = useTheme();
-
   const caretIconStyle = css({
     fontSize: `${theme.fontSizeSM}px`,
     fontWeight: theme.fontWeightNormal,
@@ -114,7 +113,7 @@ export default memo(function ColumnConfigItem({
           {column.isChildColumn && column.config?.visible === false && (
             <Icons.EyeInvisibleOutlined
               iconSize="s"
-              iconColor={colors.grayscale.base}
+              iconColor={theme.colorIcon}
             />
           )}
           <Icons.RightOutlined css={caretIconStyle} />