style(Button): change 'secondary' variant to 'outlined' and add 'ghost' to 'tertiary' variant

Co-authored-by: Mehmet Salih Yavuz <salih.yavuz@proton.me>

.pre-commit-config.yaml

@@ -52,14 +52,6 @@ repos:
       - id: trailing-whitespace
         exclude: ^.*\.(snap)
         args: ["--markdown-linebreak-ext=md"]
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v4.0.0-alpha.8 # Use the sha or tag you want to point at
-    hooks:
-      - id: prettier
-        additional_dependencies:
-          - prettier@3.5.3
-        args: ["--ignore-path=./superset-frontend/.prettierignore", "--exclude", "site-packages"]
-        files: "superset-frontend"
   - repo: local
     hooks:
     - id: eslint-frontend
@@ -76,7 +68,7 @@ repos:
       files: ^docs/.*\.(js|jsx|ts|tsx)$
     - id: type-checking-frontend
       name: Type-Checking (Frontend)
-      entry: bash -c './scripts/check-type.js package=superset-frontend excludeDeclarationDir=cypress-base'
+      entry: ./scripts/check-type.js package=superset-frontend excludeDeclarationDir=cypress-base
       language: system
       files: ^superset-frontend\/.*\.(js|jsx|ts|tsx)$
       exclude: ^superset-frontend/cypress-base\/

UPDATING.md

@@ -23,6 +23,7 @@ This file documents any backwards-incompatible changes in Superset and
 assists people when migrating to a new version.
 
 ## Next
+- [34235](https://github.com/apache/superset/pull/34235) CSV exports now use `utf-8-sig` encoding by default to include a UTF-8 BOM, improving compatibility with Excel.
 - [34258](https://github.com/apache/superset/pull/34258) changing the default in Dockerfile to INCLUDE_CHROMIUM="false" (from "true") in the past. This ensures the `lean` layer is lean by default, and people can opt-in to the `chromium` layer by setting the build arg `INCLUDE_CHROMIUM=true`. This is a breaking change for anyone using the `lean` layer, as it will no longer include Chromium by default.
 - [34204](https://github.com/apache/superset/pull/33603) OpenStreetView has been promoted as the new default for Deck.gl visualization since it can be enabled by default without requiring an API key. If you have Mapbox set up and want to disable OpenStreeView in your environment, please follow the steps documented here [https://superset.apache.org/docs/configuration/map-tiles].
 - [33116](https://github.com/apache/superset/pull/33116) In Echarts Series charts (e.g. Line, Area, Bar, etc.) charts, the `x_axis_sort_series` and `x_axis_sort_series_ascending` form data items have been renamed with `x_axis_sort` and `x_axis_sort_asc`.

docs/yarn.lock

@@ -4320,12 +4320,12 @@ available-typed-arrays@^1.0.7:
     possible-typed-array-names "^1.0.0"
 
 axios@^1.9.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.10.0.tgz#af320aee8632eaf2a400b6a1979fa75856f38d54"
-  integrity sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.11.0.tgz#c2ec219e35e414c025b2095e8b8280278478fdb6"
+  integrity sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==
   dependencies:
     follow-redirects "^1.15.6"
-    form-data "^4.0.0"
+    form-data "^4.0.4"
     proxy-from-env "^1.1.0"
 
 babel-loader@^9.2.1:
@@ -6653,7 +6653,7 @@ form-data-encoder@^2.1.2:
   resolved "https://registry.yarnpkg.com/form-data-encoder/-/form-data-encoder-2.1.4.tgz#261ea35d2a70d48d30ec7a9603130fa5515e9cd5"
   integrity sha512-yDYSgNMraqvnxiEXO4hi88+YZxaHC6QKzb5N84iRCTDeRO7ZALpir/lVmf/uXUhnwUr2O4HU8s/n6x+yNjQkHw==
 
-form-data@^4.0.0:
+form-data@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.4.tgz#784cdcce0669a9d68e94d11ac4eea98088edd2c4"
   integrity sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==

scripts/check-type.js

@@ -32,6 +32,10 @@ const PACKAGE_ARG_REGEX = /^package=/;
 const EXCLUDE_DECLARATION_DIR_REGEX = /^excludeDeclarationDir=/;
 const DECLARATION_FILE_REGEX = /\.d\.ts$/;
 
+// Configuration for batching and fallback
+const MAX_FILES_FOR_TARGETED_CHECK = 20; // Fallback to full check if more files
+const BATCH_SIZE = 10; // Process files in batches of this size
+
 void (async () => {
   const args = process.argv.slice(2);
   const {
@@ -45,27 +49,94 @@ void (async () => {
   }
 
   const packageRootDir = await getPackage(packageArg);
-  const updatedArgs = removePackageSegment(remainingArgs, packageRootDir);
-  const argsStr = updatedArgs.join(" ");
+  const changedFiles = removePackageSegment(remainingArgs, packageRootDir);
 
-  const excludedDeclarationDirs = getExcludedDeclarationDirs(
-    excludeDeclarationDirArg
+  // Filter to only TypeScript files
+  const tsFiles = changedFiles.filter(file =>
+    /\.(ts|tsx)$/.test(file) && !DECLARATION_FILE_REGEX.test(file)
   );
+
+  console.log(`Type checking ${tsFiles.length} changed TypeScript files...`);
+
+  if (tsFiles.length === 0) {
+    console.log("No TypeScript files to check.");
+    exit(0);
+  }
+
+  // Decide strategy based on number of files
+  if (tsFiles.length > MAX_FILES_FOR_TARGETED_CHECK) {
+    console.log(`Too many files (${tsFiles.length} > ${MAX_FILES_FOR_TARGETED_CHECK}), running full type check...`);
+    await runFullTypeCheck(packageRootDir, excludeDeclarationDirArg);
+  } else {
+    console.log(`Running targeted type check on ${tsFiles.length} files...`);
+    await runTargetedTypeCheck(packageRootDir, tsFiles, excludeDeclarationDirArg);
+  }
+})();
+
+/**
+ * Run full type check on the entire project
+ */
+async function runFullTypeCheck(packageRootDir, excludeDeclarationDirArg) {
+  const packageRootDirAbsolute = join(SUPERSET_ROOT, packageRootDir);
+  const tsConfig = getTsConfig(packageRootDirAbsolute);
+  // Use incremental compilation for better caching
+  const command = `--noEmit --allowJs --incremental --project ${tsConfig}`;
+
+  await executeTypeCheck(packageRootDirAbsolute, command);
+}
+
+/**
+ * Run targeted type check on specific files, with batching
+ */
+async function runTargetedTypeCheck(packageRootDir, tsFiles, excludeDeclarationDirArg) {
+  const excludedDeclarationDirs = getExcludedDeclarationDirs(excludeDeclarationDirArg);
   let declarationFiles = await getFilesRecursively(
-    packageRootDir,
+    join(SUPERSET_ROOT, packageRootDir),
     DECLARATION_FILE_REGEX,
     excludedDeclarationDirs
   );
   declarationFiles = removePackageSegment(declarationFiles, packageRootDir);
-  const declarationFilesStr = declarationFiles.join(" ");
 
   const packageRootDirAbsolute = join(SUPERSET_ROOT, packageRootDir);
   const tsConfig = getTsConfig(packageRootDirAbsolute);
-  const command = `--noEmit --allowJs --composite false --project ${tsConfig} ${argsStr} ${declarationFilesStr}`;
 
+  // Process files in batches to avoid command line length limits
+  const batches = [];
+  for (let i = 0; i < tsFiles.length; i += BATCH_SIZE) {
+    batches.push(tsFiles.slice(i, i + BATCH_SIZE));
+  }
+
+  let hasErrors = false;
+
+  for (const [batchIndex, batch] of batches.entries()) {
+    if (batches.length > 1) {
+      console.log(`\nProcessing batch ${batchIndex + 1}/${batches.length} (${batch.length} files)...`);
+    }
+
+    const argsStr = batch.join(" ");
+    const declarationFilesStr = declarationFiles.join(" ");
+    // For targeted checks, keep composite false since we're passing specific files
+    const command = `--noEmit --allowJs --composite false --project ${tsConfig} ${argsStr} ${declarationFilesStr}`;
+
+    try {
+      await executeTypeCheck(packageRootDirAbsolute, command);
+    } catch (error) {
+      hasErrors = true;
+      // Continue processing other batches to show all errors
+    }
+  }
+
+  if (hasErrors) {
+    exit(1);
+  }
+}
+
+/**
+ * Execute the TypeScript type check command
+ */
+async function executeTypeCheck(packageRootDirAbsolute, command) {
   try {
     chdir(packageRootDirAbsolute);
-    // Please ensure that tscw-config is installed in the package being type-checked.
     const tscw = packageRequire("tscw-config");
     const child = await tscw`${command}`;
 
@@ -77,14 +148,16 @@ void (async () => {
       console.error(child.stderr);
     }
 
-    exit(child.exitCode);
+    if (child.exitCode !== 0) {
+      throw new Error(`Type check failed with exit code ${child.exitCode}`);
+    }
   } catch (e) {
-    console.error("Failed to execute type checking:", e);
-    console.error("Package:", packageRootDir);
+    console.error("Failed to execute type checking:", e.message);
     console.error("Command:", `tscw ${command}`);
-    exit(1);
+    throw e;
   }
-})();
+}
+
 
 /**
  *
@@ -112,7 +185,6 @@ function shouldExcludeDir(fullPath, excludedDirs) {
  *
  * @returns {Promise<string[]>}
  */
-
 async function getFilesRecursively(dir, regex, excludedDirs) {
   try {
     const files = await readdir(dir, { withFileTypes: true });
@@ -186,7 +258,6 @@ function getExcludedDeclarationDirs(excludeDeclarationDirArg) {
  * @param {RegExp[]} regexes
  * @returns {{ matchedArgs: (string | undefined)[], remainingArgs: string[] }}
  */
-
 function extractArgs(args, regexes) {
   /**
    * @type {(string | undefined)[]}

superset-frontend/.storybook/preview.jsx

@@ -77,7 +77,7 @@ const themeDecorator = (Story, context) => {
             minHeight: '100vh',
             width: '100%',
             padding: 24,
-            backgroundColor: themeObject.theme.colorBgBase,
+            backgroundColor: themeObject.theme.colorBgContainer,
           }}
         >
           <Story {...context} />

superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts

@@ -154,6 +154,7 @@ describe('Horizontal FilterBar', () => {
       { name: 'test_12', column: 'year', datasetId: 2 },
     ]);
     setFilterBarOrientation('horizontal');
+
     cy.get('.filter-item-wrapper').should('have.length', 3);
     openMoreFilters();
     cy.getBySel('form-item-value').should('have.length', 12);

superset-frontend/package-lock.json

@@ -249,7 +249,7 @@
         "mini-css-extract-plugin": "^2.9.0",
         "open-cli": "^8.0.0",
         "po2json": "^0.4.5",
-        "prettier": "3.5.3",
+        "prettier": "3.6.2",
         "prettier-plugin-packagejson": "^2.5.3",
         "process": "^0.11.10",
         "react-resizable": "^3.0.5",
@@ -46219,9 +46219,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
-      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "devOptional": true,
       "license": "MIT",
       "bin": {

superset-frontend/package.json

@@ -317,7 +317,7 @@
     "mini-css-extract-plugin": "^2.9.0",
     "open-cli": "^8.0.0",
     "po2json": "^0.4.5",
-    "prettier": "3.5.3",
+    "prettier": "3.6.2",
     "prettier-plugin-packagejson": "^2.5.3",
     "process": "^0.11.10",
     "react-resizable": "^3.0.5",

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.colorText};
     font-size: ${theme.fontSizeSM}px;
     & svg {
       margin-left: ${theme.sizeUnit}px;

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

@@ -86,7 +86,9 @@ export default function Select<VT extends string | number>({
         minWidth,
       }}
     >
-      {options?.map(([val, label]) => <Option value={val}>{label}</Option>)}
+      {options?.map(([val, label]) => (
+        <Option value={val}>{label}</Option>
+      ))}
       {children}
       {value && !optionsHasValue && (
         <Option key={value} value={value}>

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,
-        color: theme.colors.grayscale.light5,
+        backgroundColor: theme.colorTextBase,
+        color: theme.colorBgContainer,
         overflow: 'auto',
         padding: 32,
       })}

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

@@ -17,7 +17,6 @@
  * under the License.
  */
 import { Children, ReactElement, Fragment } from 'react';
-
 import cx from 'classnames';
 import { Button as AntdButton } from 'antd';
 import { useTheme } from '@superset-ui/core';
@@ -66,16 +65,18 @@ export function Button(props: ButtonProps) {
   let antdType: ButtonType = 'default';
   let variant: ButtonVariantType = 'solid';
   let color: ButtonColorType = 'primary';
+  let ghost: boolean = false;
 
   if (!buttonStyle || buttonStyle === 'primary') {
     variant = 'solid';
     antdType = 'primary';
   } else if (buttonStyle === 'secondary') {
-    variant = 'filled';
+    variant = 'outlined';
     color = 'primary';
   } else if (buttonStyle === 'tertiary') {
     variant = 'outlined';
     color = 'default';
+    ghost = true;
   } else if (buttonStyle === 'dashed') {
     variant = 'dashed';
     antdType = 'dashed';
@@ -88,6 +89,7 @@ export function Button(props: ButtonProps) {
   const element = children as ReactElement;
 
   let renderedChildren = [];
+
   if (element && element.type === Fragment) {
     renderedChildren = Children.toArray(element.props.children);
   } else {
@@ -100,6 +102,7 @@ export function Button(props: ButtonProps) {
 
   const button = (
     <AntdButton
+      ghost={ghost}
       href={disabled ? undefined : href}
       disabled={disabled}
       type={antdType}
@@ -118,7 +121,7 @@ export function Button(props: ButtonProps) {
         display: 'inline-flex',
         alignItems: 'center',
         justifyContent: 'center',
-        lineHeight: 1.5715,
+        lineHeight: 1,
         fontSize: fontSizeSM,
         fontWeight: fontWeightStrong,
         height,

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.colorBorder}
       />
       <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.colorBorderSecondary}
       />
       <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.colorText};
   }
 `;
 

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.colorBorder};
 
   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.colorBorder};
   }
 
   &::before {

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

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

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

@@ -144,6 +144,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
   description = t('There is currently no information to display.'),
   image = 'empty.svg',
   buttonText,
+  buttonIcon,
   buttonAction,
   size = 'medium',
   children,
@@ -165,6 +166,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
       )}
       {buttonText && buttonAction && (
         <Button
+          icon={buttonIcon}
           buttonStyle="primary"
           onClick={buttonAction}
           onMouseDown={handleMouseDown}

superset-frontend/packages/superset-ui-core/src/components/EmptyState/types.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 import type { ReactNode, SyntheticEvent } from 'react';
+import type { IconType } from '@superset-ui/core/components';
 
 export type EmptyStateSize = 'small' | 'medium' | 'large';
 
@@ -25,6 +26,7 @@ export type EmptyStateProps = {
   description?: ReactNode;
   image?: ReactNode | string;
   buttonText?: ReactNode;
+  buttonIcon?: IconType;
   buttonAction?: (event: SyntheticEvent) => void;
   size?: EmptyStateSize;
   children?: ReactNode;

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

@@ -18,7 +18,7 @@
  */
 import { useEffect, useState, FunctionComponent } from 'react';
 
-import { t, styled, css } from '@superset-ui/core';
+import { t, styled, css, useTheme } from '@superset-ui/core';
 import dayjs from 'dayjs';
 import { extendedDayjs } from '../../utils/dates';
 import { Icons } from '../Icons';
@@ -38,24 +38,14 @@ extendedDayjs.updateLocale('en', {
 });
 
 const TextStyles = styled.span`
-  color: ${({ theme }) => theme.colors.grayscale.base};
-`;
-
-const RefreshIcon = styled(Icons.SyncOutlined)`
-  ${({ theme }) => `
-  width: auto;
-  height: ${theme.sizeUnit * 5}px;
-  position: relative;
-  top: ${theme.sizeUnit}px;
-  left: ${theme.sizeUnit}px;
-  cursor: pointer;
-`};
+  color: ${({ theme }) => theme.colorText};
 `;
 
 export const LastUpdated: FunctionComponent<LastUpdatedProps> = ({
   updatedAt,
   update,
 }) => {
+  const theme = useTheme();
   const [timeSince, setTimeSince] = useState<dayjs.Dayjs>(
     extendedDayjs(updatedAt),
   );
@@ -75,10 +65,9 @@ export const LastUpdated: FunctionComponent<LastUpdatedProps> = ({
     <TextStyles>
       {t('Last Updated %s', timeSince.isValid() ? timeSince.calendar() : '--')}
       {update && (
-        <RefreshIcon
-          iconSize="l"
+        <Icons.SyncOutlined
           css={css`
-            vertical-align: text-bottom;
+            margin-left: ${theme.sizeUnit * 2}px;
           `}
           onClick={update}
         />

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.colorBorderSecondary};
   overflow: hidden;
 
   .cover-footer {

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.colorBorder};
   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.colorFill};
     }
 
     &.active {
       font-weight: ${theme.fontWeightStrong};
-      background: ${theme.colors.grayscale.light2};
+      background: ${theme.colorBorderSecondary};
     }
   }
 

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.colorBorder}
             />
           </Tooltip>
         )}
         <Icons.CheckOutlined
           iconSize="s"
           role="img"
-          iconColor={
-            isSelected ? theme.colorPrimary : theme.colors.grayscale.base
-          }
+          iconColor={isSelected ? theme.colorPrimary : theme.colorText}
         />
       </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.colorText,
           '&:hover': { color: theme.colorPrimary },
         })}
       />

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

@@ -103,17 +103,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.colorBorder};
  `}
 `;
 
 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};
  `}
 `;
 
@@ -139,6 +139,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.colorFill};
   `}
 `;

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.colorBorder};
 `;
 
 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.colorBorder}
           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.colorText};
 `;
 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.colorBgContainer};
     display: block;
     text-decoration: underline;
   }

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

@@ -32,7 +32,7 @@ export const GlobalStyles = () => {
         }
 
         body {
-          background-color: ${theme.colorBgBase};
+          background-color: ${theme.colorBgContainer};
           color: ${theme.colorText};
           -webkit-font-smoothing: antialiased;
           margin: 0;

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.colorBgContainer};
   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.colorText,
           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.colorBgContainer,
       },
       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};
-            color: ${theme.colors.grayscale.light5};
+            background: ${theme.colorTextBase};
+            color: ${theme.colorBgContainer};
             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.colorTextBase};
             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};
-      color: ${theme.colors.grayscale.light5};
+      background: ${theme.colorTextBase};
+      color: ${theme.colorBgContainer};
       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.colorText};
       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.colorBorderSecondary};
     }
 
     .cal-heatmap-container .graph-subdomain-group rect:hover {
-      stroke: ${theme.colors.grayscale.dark2};
+      stroke: ${theme.colorTextBase};
       stroke-width: 1px;
     }
 
@@ -152,88 +152,88 @@ export default styled(Calendar)`
     }
 
     .cal-heatmap-container .qi {
-      background-color: ${theme.colors.grayscale.base};
-      fill: ${theme.colors.grayscale.base};
-    }
-
-    .cal-heatmap-container .q1 {
-      background-color: ${theme.colors.warning.light2};
-      fill: ${theme.colors.warning.light2};
-    }
-
-    .cal-heatmap-container .q2 {
-      background-color: ${theme.colors.warning.light1};
-      fill: ${theme.colors.warning.light1};
-    }
-
-    .cal-heatmap-container .q3 {
-      background-color: ${theme.colors.success.light1};
-      fill: ${theme.colors.success.light1};
-    }
-
-    .cal-heatmap-container .q4 {
-      background-color: ${theme.colorSuccess};
-      fill: ${theme.colorSuccess};
-    }
-
-    .cal-heatmap-container .q5 {
-      background-color: ${theme.colors.success.dark1};
-      fill: ${theme.colors.success.dark1};
-    }
-
-    .cal-heatmap-container rect.highlight {
-      stroke: ${theme.colorText};
-      stroke-width: 1;
-    }
-
-    .cal-heatmap-container text.highlight {
+      background-color: ${theme.colorText};
       fill: ${theme.colorText};
     }
 
-    .cal-heatmap-container rect.highlight-now {
-      stroke: ${theme.colorError};
-    }
-
-    .cal-heatmap-container text.highlight-now {
+    .cal-heatmap-container .q1 {
+      background-color: ${theme.colorError};
       fill: ${theme.colorError};
-      font-weight: ${theme.fontWeightStrong};
     }
 
-    .cal-heatmap-container .domain-background {
-      fill: none;
-      shape-rendering: crispedges;
+    .cal-heatmap-container .q2 {
+      background-color: ${theme.colorError};
+      fill: ${theme.colorError};
     }
 
-    .ch-tooltip {
-      padding: ${theme.sizeUnit * 2}px;
-      background: ${theme.colorText};
-      color: ${theme.colors.grayscale.light1};
-      font-size: ${theme.fontSizeSM}px;
-      line-height: 1.4;
-      width: 140px;
-      position: absolute;
-      z-index: 99999;
-      text-align: center;
-      border-radius: ${theme.borderRadius}px;
-      box-shadow: 2px 2px 2px ${theme.colors.grayscale.dark2};
-      display: none;
-      box-sizing: border-box;
+    .cal-heatmap-container .q3 {
+      background-color: ${theme.colorSuccessHover};
+      fill: ${theme.colorSuccessHover};
     }
 
-    .ch-tooltip::after {
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-style: solid;
-      content: '';
-      padding: 0;
-      display: block;
-      bottom: -${theme.sizeUnit}px;
-      left: 50%;
-      margin-left: -${theme.sizeUnit}px;
-      border-width: ${theme.sizeUnit}px ${theme.sizeUnit}px 0;
-      border-top-color: ${theme.colorSplit};
-    }
-  `}
+    .cal - heatmap - container.q4 {
+  background - color: ${theme.colorSuccess};
+  fill: ${theme.colorSuccess};
+}
+
+    .cal - heatmap - container.q5 {
+  background - color: ${theme.colorSuccessActive};
+  fill: ${theme.colorSuccessActive};
+}
+
+    .cal - heatmap - container rect.highlight {
+  stroke: ${theme.colorText};
+  stroke - width: 1;
+}
+
+    .cal - heatmap - container text.highlight {
+  fill: ${theme.colorText};
+}
+
+    .cal - heatmap - container rect.highlight - now {
+  stroke: ${theme.colorError};
+}
+
+    .cal - heatmap - container text.highlight - now {
+  fill: ${theme.colorError};
+  font - weight: ${theme.fontWeightStrong};
+}
+
+    .cal - heatmap - container.domain - background {
+  fill: none;
+  shape - rendering: crispedges;
+}
+
+    .ch - tooltip {
+  padding: ${theme.sizeUnit * 2} px;
+  background: ${theme.colorText};
+  color: ${theme.colorBorder};
+  font - size: ${theme.fontSizeSM} px;
+  line - height: 1.4;
+  width: 140px;
+  position: absolute;
+  z - index: 99999;
+  text - align: center;
+  border - radius: ${theme.borderRadius} px;
+  box - shadow: 2px 2px 2px ${theme.colorTextBase};
+  display: none;
+  box - sizing: border - box;
+}
+
+    .ch - tooltip::after {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border - color: transparent;
+  border - style: solid;
+  content: '';
+  padding: 0;
+  display: block;
+  bottom: -${theme.sizeUnit} px;
+  left: 50 %;
+  margin - left: -${theme.sizeUnit} px;
+  border - width: ${theme.sizeUnit}px ${theme.sizeUnit}px 0;
+  border - top - color: ${theme.colorSplit};
+}
+`}
 `;

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};
-      stroke: ${theme.colors.grayscale.light1};
+      fill: ${theme.colorBgContainer};
+      stroke: ${theme.colorBorder};
     }
 
     .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.colorBorderSecondary};
     }
   `}
 `;

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.colorFill};
     }
 
     .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.colorFill};
     }
 
     .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.colorFill};
       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.colorBorderSecondary};
           }
         }
       }
@@ -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.colorText, 0.2)};
     }
     .parcoords .resize rect {
-      fill: ${addAlpha(theme.colors.grayscale.dark2, 0.1)};
+      fill: ${addAlpha(theme.colorTextBase, 0.1)};
     }
     .parcoords rect.extent {
-      fill: ${addAlpha(theme.colors.grayscale.light5, 0.25)};
-      stroke: ${addAlpha(theme.colors.grayscale.dark2, 0.6)};
+      fill: ${addAlpha(theme.colorBgContainer, 0.25)};
+      stroke: ${addAlpha(theme.colorTextBase, 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.colorTextBase, 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};
-      fill: ${theme.colors.grayscale.light1};
+      stroke: ${theme.colorBorderSecondary};
+      fill: ${theme.colorBorder};
       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.colorTextBase};
     }
 
     .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.colorTextBase};
       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.colorBgContainer};
     }
   `}
 `;

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};
-          color: ${theme.colors.grayscale.light5};
+          background: ${theme.colorTextBase};
+          color: ${theme.colorBgContainer};
           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.colorBgContainer};
         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.colorBgContainer};
     }
   }
   .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.colorBorderSecondary,
     },
     geographyConfig: {
       popupOnHover: !inContextMenu,
       highlightOnHover: !inContextMenu,
       borderWidth: 1,
       borderColor: theme.colorSplit,
-      highlightBorderColor: theme.colors.grayscale.light5,
+      highlightBorderColor: theme.colorBgContainer,
       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.colorText,
       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};
-    box-shadow: 0 0 ${theme.sizeUnit}px ${theme.colors.grayscale.light2};
+    background: ${theme.colorBgContainer};
+    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};
-    color: ${theme.colors.grayscale.light5};
+    background: ${theme.colorTextBase};
+    color: ${theme.colorBgContainer};
     maxWidth: 300px;
     fontSize: ${theme.fontSizeSM}px;
     zIndex: 9;

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/controlPanel.ts

@@ -35,6 +35,7 @@ import {
   spatial,
   viewport,
 } from '../../utilities/Shared_DeckGL';
+import { COLOR_SCHEME_TYPES } from '../../utilities/utils';
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
@@ -53,7 +54,10 @@ const config: ControlPanelConfig = {
       label: t('Map'),
       controlSetRows: [
         [mapboxStyle],
-        ...generateDeckGLColorSchemeControls({}),
+        ...generateDeckGLColorSchemeControls({
+          defaultSchemeType: COLOR_SCHEME_TYPES.categorical_palette,
+          disableCategoricalColumn: true,
+        }),
         [viewport],
         [autozoom],
         [gridSize],

superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/utils.ts

@@ -37,4 +37,4 @@ export function formatSelectOptions(options: (string | number)[]) {
 export const isColorSchemeTypeVisible = (
   controls: ControlStateMapping,
   colorSchemeType: ColorSchemeType,
-) => controls.color_scheme_type.value === colorSchemeType;
+) => controls.color_scheme_type?.value === colorSchemeType;

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.colorText};
     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.colorBgContainer};
     &: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.colorBgContainer};
       }
     }
 
     .menu-divider {
       height: 1px;
-      background-color: ${theme.colors.grayscale.light2};
+      background-color: ${theme.colorBorderSecondary};
       margin: ${theme.sizeUnit}px 0;
     }
   `}
@@ -165,16 +165,16 @@ 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);
-    background: ${theme.colorBgBase};
+    background: ${theme.colorBgContainer};
   `}
 `;
 
@@ -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.colorBorder : theme.colorTextBase};
     }
   `}
 `;
@@ -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.colorText};
     font-size: ${theme.fontSizeSM}px;
   `}
 `;
 
 export const ColumnLabel = styled.span`
   ${({ theme }) => `
-    color: ${theme.colors.grayscale.dark2};
+    color: ${theme.colorText};
   `}
 `;
 
@@ -279,9 +279,9 @@ export const StyledChartContainer = styled.div<{
   ${({ theme, height }) => css`
     height: ${height}px;
 
-    --ag-background-color: ${theme.colorBgBase};
+    --ag-background-color: ${theme.colorBgContainer};
     --ag-foreground-color: ${theme.colorText};
-    --ag-header-background-color: ${theme.colorBgBase};
+    --ag-header-background-color: ${theme.colorBgContainer};
     --ag-header-foreground-color: ${theme.colorText};
 
     .dt-is-filter {
@@ -292,7 +292,7 @@ export const StyledChartContainer = styled.div<{
     }
 
     .dt-is-active-filter {
-      background: ${theme.colors.primary.light3};
+      background: ${theme.colorBgLayout};
       :hover {
         background-color: ${theme.colorPrimaryBgHover};
       }
@@ -379,7 +379,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.colorText};
     }
 
     .input-wrapper input {
@@ -389,16 +389,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.colorBorder};
       }
     }
   `}

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.colorText;
     }
 
     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.colorText;
   const { backgroundColor, textColor } = useMemo(() => {
     let bgColor = defaultBackgroundColor;
     let txtColor = defaultTextColor;

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

@@ -249,7 +249,7 @@ export default function transformProps(
                 },
                 {
                   offset: 1,
-                  color: theme.colors.grayscale.light5,
+                  color: theme.colorBgContainer,
                 },
               ]),
             },

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

@@ -228,7 +228,7 @@ export default function transformProps(
     formatter,
     show: showLabels,
     color: theme.colorText,
-    textBorderColor: theme.colorBgBase,
+    textBorderColor: theme.colorBgContainer,
     textBorderWidth: 1,
   };
 

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

@@ -220,7 +220,7 @@ export default function transformProps(
         name: otherName,
         value: otherSum,
         itemStyle: {
-          color: theme.colors.grayscale.dark1,
+          color: theme.colorTextSecondary,
           opacity:
             filterState.selectedValues &&
             !filterState.selectedValues.includes(otherName)
@@ -368,7 +368,7 @@ export default function transformProps(
   const defaultLabel = {
     formatter,
     show: showLabels,
-    color: theme.colors.grayscale.dark2,
+    color: theme.colorText,
   };
 
   const chartPadding = getChartPadding(
@@ -403,7 +403,7 @@ export default function transformProps(
         label: {
           show: true,
           fontWeight: 'bold',
-          backgroundColor: theme.colors.grayscale.light5,
+          backgroundColor: theme.colorBgContainer,
         },
       },
       data: transformedData,

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

@@ -74,7 +74,7 @@ export default function transformProps(
     },
     label: {
       color: theme.colorText,
-      textShadow: theme.colorBgBase,
+      textShadow: theme.colorBgContainer,
     },
   }));
 

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

@@ -276,7 +276,7 @@ export default function transformProps(
   }
   const labelProps = {
     color: theme.colorText,
-    textBorderColor: theme.colorBgBase,
+    textBorderColor: theme.colorBgContainer,
     textBorderWidth: 1,
   };
   const traverse = (

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

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

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

@@ -123,7 +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 BORDER_COLOR = theme.colorBgContainer;
 
   const {
     colorScheme,
@@ -165,7 +165,7 @@ export default function transformProps(
   const treeData = treeBuilder(data, groupbyLabels, metricLabel);
   const labelProps = {
     color: theme.colorText,
-    borderColor: theme.colorBgBase,
+    borderColor: theme.colorBgContainer,
     borderWidth: 1,
   };
   const traverse = (treeNodes: TreeNode[], path: string[]) =>
@@ -207,7 +207,7 @@ export default function transformProps(
             itemStyle: {
               colorAlpha: OpacityEnum.SemiTransparent,
               color: theme.colorText,
-              borderColor: theme.colorBgBase,
+              borderColor: theme.colorBgContainer,
               borderWidth: 2,
             },
             label: {

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

@@ -359,7 +359,7 @@ export default function transformProps(
     show: showValue,
     formatter: seriesformatter,
     color: theme.colorText,
-    borderColor: theme.colorBgBase,
+    borderColor: theme.colorBgContainer,
     borderWidth: 1,
   };
   const barSeries: BarSeriesOption[] = [

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

@@ -33,7 +33,7 @@ export const Styles = styled.div`
     }
 
     table thead {
-      background-color: ${theme.colorBgBase};
+      background-color: ${theme.colorBgContainer};
       position: ${isDashboardEditMode ? 'inherit' : 'sticky'};
       top: 0;
     }
@@ -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.colorBorderSecondary};
     }
 
     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.colorBorderSecondary};
     }
 
     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};
-      border-top: 1px solid ${theme.colors.grayscale.light2};
-      border-left: 1px solid ${theme.colors.grayscale.light2};
+      background-color: ${theme.colorBgContainer};
+      border-top: 1px solid ${theme.colorBorderSecondary};
+      border-left: 1px solid ${theme.colorBorderSecondary};
       vertical-align: top;
       text-align: right;
     }

superset-frontend/plugins/plugin-chart-table/src/Styles.tsx

@@ -41,7 +41,7 @@ export default styled.div`
     thead > tr > th {
       padding-right: 0;
       position: relative;
-      background-color: ${theme.colorBgBase};
+      background-color: ${theme.colorBgContainer};
       text-align: left;
       border-bottom: 2px solid ${theme.colorSplit};
       color: ${theme.colorText};
@@ -154,7 +154,7 @@ export default styled.div`
 
     .dt-pagination .pagination > li > a,
     .dt-pagination .pagination > li > span {
-      background-color: ${theme.colorBgBase};
+      background-color: ${theme.colorBgContainer};
       color: ${theme.colorText};
       border-color: ${theme.colorBorderSecondary};
     }

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.colorTextBase },
       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.colorText};
     &: hover {
       color: ${({ theme }) => theme.colorPrimary};
     }

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

@@ -64,7 +64,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.colorText};
     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.colorBorderSecondary;
   };
   return (
     <TabTitleWrapper>

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

@@ -368,7 +368,9 @@ const TableElement = ({ table, ...props }: TableElementProps) => {
       <div data-test="table-element" css={{ paddingTop: 6 }}>
         {renderWell()}
         <div>
-          {cols?.map(col => <ColumnElement column={col} key={col.name} />)}
+          {cols?.map(col => (
+            <ColumnElement column={col} key={col.name} />
+          ))}
         </div>
       </div>
     );

superset-frontend/src/assets/images/icons/big_number_chart_tile.svg

@@ -16,7 +16,9 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.5 15.0942V13.8545L8.88866 6.92188H9.86557V8.74676H9.2457L6.10669 13.7156V13.795H12.1219V15.0942H4.5ZM9.31512 17.0778V14.7173L9.32504 14.152V6.92188H10.778V17.0778H9.31512Z" fill="#666666"/>
-<path d="M15.2336 14.4942L15.2237 12.6842H15.4816L18.5164 9.46085H20.2917L16.8304 13.1305H16.5973L15.2336 14.4942ZM13.8699 17.0778V6.92188H15.3526V17.0778H13.8699ZM18.6801 17.0778L15.9527 13.4577L16.9742 12.4213L20.5 17.0778H18.6801Z" fill="#666666"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 14" fill="none">
+  <g transform="translate(-4.5, -6.92188)">
+    <path d="M4.5 15.0942V13.8545L8.88866 6.92188H9.86557V8.74676H9.2457L6.10669 13.7156V13.795H12.1219V15.0942H4.5ZM9.31512 17.0778V14.7173L9.32504 14.152V6.92188H10.778V17.0778H9.31512Z" fill="#666666"/>
+    <path d="M15.2336 14.4942L15.2237 12.6842H15.4816L18.5164 9.46085H20.2917L16.8304 13.1305H16.5973L15.2336 14.4942ZM13.8699 17.0778V6.92188H15.3526V17.0778H13.8699ZM18.6801 17.0778L15.9527 13.4577L16.9742 12.4213L20.5 17.0778H18.6801Z" fill="#666666"/>
+  </g>
 </svg>

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

@@ -168,7 +168,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

@@ -224,11 +224,7 @@ const ChartContextMenu = (
               {t('Add cross-filter')}
               <MenuItemTooltip
                 title={crossFilteringTooltipTitle}
-                color={
-                  !isCrossFilterDisabled
-                    ? theme.colors.grayscale.base
-                    : undefined
-                }
+                color={!isCrossFilterDisabled ? theme.colorText : 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.colorBorder}
           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.colorBorder};
     }
   }
 `;

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

@@ -150,7 +150,7 @@ export function GridTable<RecordType extends object>({
             --ag-font-family: ${theme.fontFamily};
             --ag-font-size: ${theme.fontSize}px;
             --ag-row-height: ${rowHeight}px;
-            --ag-background-color: ${theme.colorBgBase};
+            --ag-background-color: ${theme.colorBgContainer};
             --ag-foreground-color: ${theme.colorText};
             --ag-header-background-color: ${theme.colorBgElevated};
             --ag-header-foreground-color: ${theme.colorTextHeading};

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.colorText};
         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.colorBgContainer};
     display: block;
     text-decoration: underline;
   }

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

@@ -100,10 +100,7 @@ function SearchFilter(
         onPressEnter={handleSubmit}
         onBlur={handleSubmit}
         prefix={
-          <Icons.SearchOutlined
-            iconColor={theme.colors.grayscale.light1}
-            iconSize="l"
-          />
+          <Icons.SearchOutlined iconColor={theme.colorBorder} 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/Toast.tsx

@@ -139,7 +139,6 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
       <Icons.CloseOutlined
         iconSize="m"
         className="toast__close pointer"
-        iconColor={theme.colorTextTertiary}
         role="button"
         tabIndex={0}
         onClick={handleClosePress}

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.colorBgContainer};
       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.colorBorder};
     }
 
     .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.colorBgContainer};
           }
 
           opacity: ${isSelected ? 0.4 : 'unset'};

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

@@ -53,8 +53,8 @@ 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)};
-        background-color: ${theme.colorBgBase};
+        box-shadow: -4px 0 4px 0 ${rgba(theme.colorText, 0.1)};
+        background-color: ${theme.colorBgContainer};
       `}
     >
       <Tabs

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.colorText, 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};
-        background-color: ${theme.colors.primary.light3};
+        border-color: ${theme.colorFillQuaternary};
+        background-color: ${theme.colorBgLayout};
       }
       & .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.colorTextBase}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};
-    background: ${theme.colors.grayscale.base};
+    color: ${theme.colorBgContainer};
+    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.colorBgContainer};
       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.colorBgContainer};
   `}
 `;
 
@@ -129,7 +129,7 @@ export const Separator = styled.div`
   ${({ theme }) => css`
     width: 100%;
     height: 1px;
-    background-color: ${theme.colors.grayscale.light1};
+    background-color: ${theme.colorBorder};
     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.colorText};
       &:hover {
-        color: ${theme.colors.grayscale.light1};
+        color: ${theme.colorBorder};
       }
     }
 

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.colorBorder};
   &:hover {
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorText};
   }
 `;
 
 const undoRedoEmphasized = theme => css`
-  color: ${theme.colors.grayscale.base};
+  color: ${theme.colorText};
 `;
 
 const undoRedoDisabled = theme => css`
-  color: ${theme.colors.grayscale.light2};
+  color: ${theme.colorBorderSecondary};
 `;
 
 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.colorText};
   &: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.colorText};
     }
   `}
 `;

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.colorBgLayout};
     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.colorBorderSecondary};
       display: block;
     }
 

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

@@ -79,7 +79,7 @@ const defaultProps = {
 const StyledTabsContainer = styled.div`
   ${({ theme }) => css`
     width: 100%;
-    background-color: ${theme.colorBgBase};
+    background-color: ${theme.colorBgContainer};
 
     .dashboard-component-tabs-content {
       min-height: ${theme.sizeUnit * 12}px;

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

@@ -40,10 +40,10 @@ const NewComponent = styled.div`
     flex-wrap: nowrap;
     align-items: center;
     padding: ${theme.sizeUnit * 4}px;
-    background: ${theme.colors.grayscale.light5};
+    background: ${theme.colorBgContainer};
     cursor: move;
     &:not(.static):hover {
-      background: ${theme.colors.grayscale.light4};
+      background: ${theme.colorBgContainer};
     }
   `}
 `;

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

@@ -47,7 +47,7 @@ const BackgroundStyleOption = styled.div`
       padding-left: 0;
       background: transparent;
       &:before {
-        background: ${theme.colors.grayscale.light5};
+        background: ${theme.colorBgContainer};
         border: 1px solid ${theme.colorBorder};
       }
     }

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};
-    box-shadow: 0 1px 2px 1px ${addAlpha(theme.colors.grayscale.dark2, 0.35)};
+    background: ${theme.colorBgContainer};
+    box-shadow: 0 1px 2px 1px ${addAlpha(theme.colorText, 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.colorBorderSecondary};
       margin: 0 ${theme.sizeUnit * 4}px;
     }
   `}

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx

@@ -89,6 +89,13 @@ const horizontalStyle = (theme: SupersetTheme) => css`
     text-transform: capitalize;
     font-weight: ${theme.fontWeightNormal};
   }
+  & > .filter-apply-button {
+    &[disabled],
+    &[disabled]:hover {
+      color: ${theme.colorBorder};
+      background: ${theme.colorFill};
+    }
+  }
 `;
 
 const ButtonsContainer = styled.div<{ isVertical: boolean; width: number }>`

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.colorBorderSecondary};
           `}
         />
       )}

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.colorBorder};
       margin-left: ${theme.sizeUnit}px;
       transition: 0.3s;
       vertical-align: middle;
       line-height: 0;
       &:hover {
-        color: ${theme.colors.grayscale.base};
+        color: ${theme.colorText};
       }
     }
   `}

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.colorFill}
         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.colorFill};
           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.colorText};
     margin-bottom: ${theme.sizeUnit * 7}px;
   `}
 `;