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

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

.cursor/rules/dev-standard.mdc

@@ -0,0 +1,125 @@
+---
+description: Apache Superset development standards and guidelines for Cursor IDE
+globs: ["**/*.py", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "**/*.sql", "**/*.md"]
+alwaysApply: true
+---
+
+# Apache Superset Development Standards for Cursor IDE
+
+Apache Superset is a data visualization platform with Flask/Python backend and React/TypeScript frontend.
+
+## ⚠️ CRITICAL: Ongoing Refactors (What NOT to Do)
+
+**These migrations are actively happening - avoid deprecated patterns:**
+
+### Frontend Modernization
+- **NO `any` types** - Use proper TypeScript types
+- **NO JavaScript files** - Convert to TypeScript (.ts/.tsx)
+- **NO Enzyme** - Use React Testing Library/Jest (Enzyme fully removed)
+- **Use @superset-ui/core** - Don't import Ant Design directly
+
+### Testing Strategy Migration
+- **Prefer unit tests** over integration tests
+- **Prefer integration tests** over Cypress end-to-end tests
+- **Cypress is last resort** - Actively moving away from Cypress
+- **Use Jest + React Testing Library** for component testing
+
+### Backend Type Safety
+- **Add type hints** - All new Python code needs proper typing
+- **MyPy compliance** - Run `pre-commit run mypy` to validate
+- **SQLAlchemy typing** - Use proper model annotations
+
+## Code Standards
+
+### TypeScript Frontend
+- **NO `any` types** - Use proper TypeScript
+- **Functional components** with hooks
+- **@superset-ui/core** for UI components (not direct antd)
+- **Jest** for testing (NO Enzyme)
+- **Redux** for global state, hooks for local
+
+### Python Backend
+- **Type hints required** for all new code
+- **MyPy compliant** - run `pre-commit run mypy`
+- **SQLAlchemy models** with proper typing
+- **pytest** for testing
+
+### Apache License Headers
+- **New files require ASF license headers** - When creating new code files, include the standard Apache Software Foundation license header
+- **LLM instruction files are excluded** - Files like LLMS.md, CLAUDE.md, etc. are in `.rat-excludes` to avoid header token overhead
+
+## Key Directory Structure
+
+```
+superset/
+├── superset/                    # Python backend (Flask, SQLAlchemy)
+│   ├── views/api/              # REST API endpoints
+│   ├── models/                 # Database models
+│   └── connectors/             # Database connections
+├── superset-frontend/src/       # React TypeScript frontend
+│   ├── components/             # Reusable components
+│   ├── explore/                # Chart builder
+│   ├── dashboard/              # Dashboard interface
+│   └── SqlLab/                 # SQL editor
+├── superset-frontend/packages/
+│   └── superset-ui-core/       # UI component library (USE THIS)
+├── tests/                      # Python/integration tests
+├── docs/                       # Documentation (UPDATE FOR CHANGES)
+└── UPDATING.md                 # Breaking changes log
+```
+
+## Architecture Patterns
+
+### Dataset-Centric Approach
+Charts built from enriched datasets containing:
+- Dimension columns with labels/descriptions
+- Predefined metrics as SQL expressions
+- Self-service analytics within defined contexts
+
+### Security & Features
+- **RBAC**: Role-based access via Flask-AppBuilder
+- **Feature flags**: Control feature rollouts
+- **Row-level security**: SQL-based data access control
+
+## Test Utilities
+
+### Python Test Helpers
+- **`SupersetTestCase`** - Base class in `tests/integration_tests/base_tests.py`
+- **`@with_config`** - Config mocking decorator
+- **`@with_feature_flags`** - Feature flag testing
+- **`login_as()`, `login_as_admin()`** - Authentication helpers
+- **`create_dashboard()`, `create_slice()`** - Data setup utilities
+
+### TypeScript Test Helpers
+- **`superset-frontend/spec/helpers/testing-library.tsx`** - Custom render() with providers
+- **`createWrapper()`** - Redux/Router/Theme wrapper
+- **`selectOption()`** - Select component helper
+- **React Testing Library** - NO Enzyme (removed)
+
+## Pre-commit Validation
+
+**Use pre-commit hooks for quality validation:**
+
+```bash
+# Install hooks
+pre-commit install
+
+# Quick validation (faster than --all-files)
+pre-commit run                    # Staged files only
+pre-commit run mypy              # Python type checking
+pre-commit run prettier          # Code formatting
+pre-commit run eslint            # Frontend linting
+```
+
+## Development Guidelines
+
+- **Documentation**: Update docs/ for any user-facing changes
+- **Breaking Changes**: Add to UPDATING.md
+- **Docstrings**: Required for new functions/classes
+- **Follow existing patterns**: Mimic code style, use existing libraries and utilities
+- **Type Safety**: This codebase is actively modernizing toward full TypeScript and type safety
+- **Always run `pre-commit run`** to validate changes before committing
+
+---
+
+**Note**: This codebase is actively modernizing toward full TypeScript and type safety. Always run `pre-commit run` to validate changes. Follow the ongoing refactors section to avoid deprecated patterns.

.github/copilot-instructions.md

@@ -0,0 +1 @@
+../LLMS.md

.gitignore

@@ -127,5 +127,7 @@ docker/*local*
 # Jest test report
 test-report.html
 superset/static/stats/statistics.html
-.aider*
+
+# LLM-related
 CLAUDE.local.md
+.aider*

.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\/

.rat-excludes

@@ -76,3 +76,11 @@ ydb.svg
 erd.puml
 erd.svg
 intro_header.txt
+
+# for LLMs
+llm-context.md
+LLMS.md
+CLAUDE.md
+CURSOR.md
+GEMINI.md
+GPT.md

CLAUDE.md

@@ -0,0 +1 @@
+LLMS.md

Dockerfile

@@ -167,7 +167,7 @@ RUN mkdir -p \
     && touch superset/static/version_info.json
 
 # Install Playwright and optionally setup headless browsers
-ARG INCLUDE_CHROMIUM="true"
+ARG INCLUDE_CHROMIUM="false"
 ARG INCLUDE_FIREFOX="false"
 RUN --mount=type=cache,target=${SUPERSET_HOME}/.cache/uv \
     if [ "$INCLUDE_CHROMIUM" = "true" ] || [ "$INCLUDE_FIREFOX" = "true" ]; then \
@@ -223,7 +223,7 @@ RUN --mount=type=cache,target=${SUPERSET_HOME}/.cache/uv \
     /app/docker/pip-install.sh --requires-build-essential -r requirements/base.txt
 # Install the superset package
 RUN --mount=type=cache,target=${SUPERSET_HOME}/.cache/uv \
-    uv pip install .
+    uv pip install -e .
 RUN python -m compileall /app/superset
 
 USER superset
@@ -246,7 +246,7 @@ RUN --mount=type=cache,target=${SUPERSET_HOME}/.cache/uv \
     /app/docker/pip-install.sh --requires-build-essential -r requirements/development.txt
 # Install the superset package
 RUN --mount=type=cache,target=${SUPERSET_HOME}/.cache/uv \
-    uv pip install .
+    uv pip install -e .
 
 RUN uv pip install .[postgres]
 RUN python -m compileall /app/superset

GEMINI.md

@@ -0,0 +1 @@
+LLMS.md

GPT.md

@@ -0,0 +1 @@
+LLMS.md

LLMS.md

@@ -0,0 +1,148 @@
+# LLM Context Guide for Apache Superset
+
+Apache Superset is a data visualization platform with Flask/Python backend and React/TypeScript frontend.
+
+## ⚠️ CRITICAL: Ongoing Refactors (What NOT to Do)
+
+**These migrations are actively happening - avoid deprecated patterns:**
+
+### Frontend Modernization
+- **NO `any` types** - Use proper TypeScript types
+- **NO JavaScript files** - Convert to TypeScript (.ts/.tsx)
+- **Use @superset-ui/core** - Don't import Ant Design directly
+
+### Testing Strategy Migration
+- **Prefer unit tests** over integration tests
+- **Prefer integration tests** over Cypress end-to-end tests
+- **Cypress is last resort** - Actively moving away from Cypress
+- **Use Jest + React Testing Library** for component testing
+
+### Backend Type Safety
+- **Add type hints** - All new Python code needs proper typing
+- **MyPy compliance** - Run `pre-commit run mypy` to validate
+- **SQLAlchemy typing** - Use proper model annotations
+
+## Key Directories
+
+```
+superset/
+├── superset/                    # Python backend (Flask, SQLAlchemy)
+│   ├── views/api/              # REST API endpoints
+│   ├── models/                 # Database models
+│   └── connectors/             # Database connections
+├── superset-frontend/src/       # React TypeScript frontend
+│   ├── components/             # Reusable components
+│   ├── explore/                # Chart builder
+│   ├── dashboard/              # Dashboard interface
+│   └── SqlLab/                 # SQL editor
+├── superset-frontend/packages/
+│   └── superset-ui-core/       # UI component library (USE THIS)
+├── tests/                      # Python/integration tests
+├── docs/                       # Documentation (UPDATE FOR CHANGES)
+└── UPDATING.md                 # Breaking changes log
+```
+
+## Code Standards
+
+### TypeScript Frontend
+- **Avoid `any` types** - Use proper TypeScript, reuse existing types
+- **Functional components** with hooks
+- **@superset-ui/core** for UI components (not direct antd)
+- **Jest** for testing (NO Enzyme)
+- **Redux** for global state where it exists, hooks for local
+
+### Python Backend  
+- **Type hints required** for all new code
+- **MyPy compliant** - run `pre-commit run mypy`
+- **SQLAlchemy models** with proper typing
+- **pytest** for testing
+
+### Apache License Headers
+- **New files require ASF license headers** - When creating new code files, include the standard Apache Software Foundation license header
+- **LLM instruction files are excluded** - Files like LLMS.md, CLAUDE.md, etc. are in `.rat-excludes` to avoid header token overhead
+
+## Documentation Requirements
+
+- **docs/**: Update for any user-facing changes
+- **UPDATING.md**: Add breaking changes here
+- **Docstrings**: Required for new functions/classes
+
+## Architecture Patterns
+
+### Security & Features
+- **RBAC**: Role-based access via Flask-AppBuilder
+- **Feature flags**: Control feature rollouts
+- **Row-level security**: SQL-based data access control
+
+## Test Utilities
+
+### Python Test Helpers
+- **`SupersetTestCase`** - Base class in `tests/integration_tests/base_tests.py`
+- **`@with_config`** - Config mocking decorator
+- **`@with_feature_flags`** - Feature flag testing
+- **`login_as()`, `login_as_admin()`** - Authentication helpers
+- **`create_dashboard()`, `create_slice()`** - Data setup utilities
+
+### TypeScript Test Helpers
+- **`superset-frontend/spec/helpers/testing-library.tsx`** - Custom render() with providers
+- **`createWrapper()`** - Redux/Router/Theme wrapper
+- **`selectOption()`** - Select component helper
+- **React Testing Library** - NO Enzyme (removed)
+
+### Running Tests
+```bash
+# Frontend
+npm run test                           # All tests
+npm run test -- filename.test.tsx     # Single file
+
+# Backend  
+pytest                                 # All tests
+pytest tests/unit_tests/specific_test.py  # Single file
+pytest tests/unit_tests/               # Directory
+
+# If pytest fails with database/setup issues, ask the user to run test environment setup
+```
+
+## Environment Validation
+
+**Quick Setup Check (run this first):**
+
+```bash
+# Verify Superset is running
+curl -f http://localhost:8088/health || echo "❌ Setup required - see https://superset.apache.org/docs/contributing/development#working-with-llms"
+```
+
+**If health checks fail:**
+"It appears you aren't set up properly. Please refer to the [Working with LLMs](https://superset.apache.org/docs/contributing/development#working-with-llms) section in the development docs for setup instructions."
+
+**Key Project Files:**
+- `superset-frontend/package.json` - Frontend build scripts (`npm run dev` on port 9000, `npm run test`, `npm run lint`)
+- `pyproject.toml` - Python tooling (ruff, mypy configs)
+- `requirements/` folder - Python dependencies (base.txt, development.txt)
+
+## Pre-commit Validation
+
+**Use pre-commit hooks for quality validation:**
+
+```bash
+# Install hooks
+pre-commit install
+
+# Quick validation (faster than --all-files)
+pre-commit run                    # Staged files only
+pre-commit run mypy              # Python type checking
+pre-commit run prettier          # Code formatting
+pre-commit run eslint            # Frontend linting
+```
+
+## Platform-Specific Instructions
+
+- **[CLAUDE.md](CLAUDE.md)** - For Claude/Anthropic tools
+- **[.github/copilot-instructions.md](.github/copilot-instructions.md)** - For GitHub Copilot  
+- **[GEMINI.md](GEMINI.md)** - For Google Gemini tools
+- **[GPT.md](GPT.md)** - For OpenAI/ChatGPT tools
+- **[.cursor/rules/dev-standard.mdc](.cursor/rules/dev-standard.mdc)** - For Cursor editor
+
+---
+
+**LLM Note**: This codebase is actively modernizing toward full TypeScript and type safety. Always run `pre-commit run` to validate changes. Follow the ongoing refactors section to avoid deprecated patterns.

UPDATING.md

@@ -23,6 +23,8 @@ 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`.
   There's a migration added that can potentially affect a significant number of existing charts.

docs/docs/contributing/development.mdx

@@ -194,6 +194,48 @@ You can also run the pre-commit checks manually in various ways:
   Replace `<hook_id>` with the ID of the specific hook you want to run. You can find the list
   of available hooks in the `.pre-commit-config.yaml` file.
 
+## Working with LLMs
+
+### Environment Setup
+Ensure Docker Compose is running before starting LLM sessions:
+```bash
+docker compose up
+```
+
+Validate your environment:
+```bash
+curl -f http://localhost:8088/health && echo "✅ Superset ready"
+```
+
+### LLM Session Best Practices
+- Always validate environment setup first using the health checks above
+- Use focused validation commands: `pre-commit run` (not `--all-files`)
+- **Read [LLMS.md](https://github.com/apache/superset/blob/master/LLMS.md) first** - Contains comprehensive development guidelines, coding standards, and critical refactor information
+- **Check platform-specific files** when available:
+  - `CLAUDE.md` - For Claude/Anthropic tools
+  - `CURSOR.md` - For Cursor editor
+  - `GEMINI.md` - For Google Gemini tools
+  - `GPT.md` - For OpenAI/ChatGPT tools
+- Follow the TypeScript migration guidelines and avoid deprecated patterns listed in LLMS.md
+
+### Key Development Commands
+```bash
+# Frontend development
+cd superset-frontend
+npm run dev          # Development server on http://localhost:9000
+npm run test         # Run all tests
+npm run test -- filename.test.tsx  # Run single test file
+npm run lint         # Linting and type checking
+
+# Backend validation
+pre-commit run mypy  # Type checking
+pytest              # Run all tests
+pytest tests/unit_tests/specific_test.py  # Run single test file
+pytest tests/unit_tests/  # Run all tests in directory
+```
+
+For detailed development context, environment setup, and coding guidelines, see [LLMS.md](https://github.com/apache/superset/blob/master/LLMS.md).
+
 ## Alternatives to `docker compose`
 
 :::caution

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/AsyncAceEditor/index.tsx

@@ -202,7 +202,7 @@ export function AsyncAceEditor(
 
                 /* Basic editor styles with dark mode support */
                 .ace_editor.ace-github,
-                .ace_editor.ace-textmate {
+                .ace_editor.ace-tm {
                   background-color: ${token.colorBgContainer} !important;
                   color: ${token.colorText} !important;
                 }

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,19 +65,19 @@ 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';
-    color = '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') {
-    color = 'primary';
     variant = 'dashed';
     antdType = 'dashed';
   } else if (buttonStyle === 'danger') {
@@ -90,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 {
@@ -102,6 +102,7 @@ export function Button(props: ButtonProps) {
 
   const button = (
     <AntdButton
+      ghost={ghost}
       href={disabled ? undefined : href}
       disabled={disabled}
       type={antdType}
@@ -120,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,
@@ -134,6 +135,11 @@ export function Button(props: ButtonProps) {
         '& > span > :first-of-type': {
           marginRight: firstChildMargin,
         },
+        ':not(:hover)': effectiveButtonStyle === 'secondary' && {
+          // NOTE: This is the best we can do contrast wise for the secondary button using antd tokens
+          // and abusing the semantics. Should be revisited when possible. https://github.com/apache/superset/pull/34253#issuecomment-3104834692
+          color: `${theme.colorPrimaryTextHover} !important`,
+        },
       }}
       icon={icon}
       {...restProps}

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,15 +27,10 @@ const StyledDiv = styled.div`
   padding-top: 8px;
   width: 50%;
   label {
-    color: ${({ theme }) => theme.colors.grayscale.base};
+    color: ${({ theme }) => theme.colorText};
   }
 `;
 
-const DescriptionContainer = styled.div`
-  line-height: ${({ theme }) => theme.sizeUnit * 4}px;
-  padding-top: 16px;
-`;
-
 export function DeleteModal({
   description,
   onConfirm,
@@ -81,12 +76,12 @@ export function DeleteModal({
       onHide={hide}
       onHandledPrimaryAction={confirm}
       primaryButtonName={t('Delete')}
-      primaryButtonType="danger"
+      primaryButtonStyle="danger"
       show={open}
       title={title}
       centered
     >
-      <DescriptionContainer>{description}</DescriptionContainer>
+      {description}
       <StyledDiv>
         <FormLabel htmlFor="delete">
           {t('Type "%s" to confirm', t('DELETE'))}

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/Modal/Modal.stories.tsx

@@ -33,7 +33,7 @@ export const InteractiveModal = (props: ModalProps) => (
 InteractiveModal.args = {
   disablePrimaryButton: false,
   primaryButtonName: 'Danger',
-  primaryButtonType: 'danger',
+  primaryButtonStyle: 'danger',
   show: true,
   title: "I'm a modal!",
   resizable: false,

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

@@ -77,7 +77,7 @@ export const StyledModal = styled(BaseModal)<StyledModalProps>`
     .ant-modal-header {
       flex: 0 0 auto;
       border-radius: ${theme.borderRadius}px ${theme.borderRadius}px 0 0;
-      padding: ${theme.sizeUnit * 4}px ${theme.sizeUnit * 6}px;
+      padding: ${theme.sizeUnit * 4}px ${theme.sizeUnit * 4}px;
 
       .ant-modal-title {
         font-weight: ${theme.fontWeightStrong};
@@ -122,6 +122,7 @@ export const StyledModal = styled(BaseModal)<StyledModalProps>`
     .ant-modal-body {
       flex: 0 1 auto;
       padding: ${theme.sizeUnit * 4}px;
+      padding-bottom: ${theme.sizeUnit * 2}px;
       overflow: auto;
       ${!resizable && height && `height: ${height};`}
     }
@@ -208,7 +209,7 @@ const CustomModal = ({
   onHide,
   onHandledPrimaryAction,
   primaryButtonName = t('OK'),
-  primaryButtonType = 'primary',
+  primaryButtonStyle = 'primary',
   show,
   name,
   title,
@@ -261,7 +262,7 @@ const CustomModal = ({
         </Button>,
         <Button
           key="submit"
-          buttonStyle={primaryButtonType}
+          buttonStyle={primaryButtonStyle}
           disabled={disablePrimaryButton}
           tooltip={primaryTooltipMessage}
           loading={primaryButtonLoading}

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

@@ -20,6 +20,7 @@ import type { CSSProperties, ReactNode } from 'react';
 import type { ModalFuncProps } from 'antd';
 import type { ResizableProps } from 're-resizable';
 import type { DraggableProps } from 'react-draggable';
+import { ButtonStyle } from '../Button/types';
 
 export interface ModalProps {
   className?: string;
@@ -30,7 +31,7 @@ export interface ModalProps {
   onHide: () => void;
   onHandledPrimaryAction?: () => void;
   primaryButtonName?: string;
-  primaryButtonType?: 'primary' | 'danger';
+  primaryButtonStyle?: ButtonStyle;
   show: boolean;
   name?: string;
   title: ReactNode;

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

@@ -24,7 +24,7 @@ import {
   getSequentialSchemeRegistry,
   CategoricalColorNamespace,
 } from '@superset-ui/core';
-import Datamap from 'datamaps/dist/datamaps.world.min';
+import Datamap from 'datamaps/dist/datamaps.all.min';
 import { ColorBy } from './utils';
 
 const propTypes = {
@@ -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/ErrorMessage/ErrorMessageWithStackTrace.tsx

@@ -54,7 +54,8 @@ export function ErrorMessageWithStackTrace({
   // Check if a custom error message component was registered for this message
   if (error) {
     const ErrorMessageComponent = getErrorMessageComponentRegistry().get(
-      error.error_type,
+      // @ts-ignore: plan to modify this part so that all errors in Superset 6.0 are standardized as Superset API error types
+      error.errorType ?? error.error_type,
     );
     if (ErrorMessageComponent) {
       return (

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/ImportModal/index.tsx

@@ -362,7 +362,7 @@ export const ImportModal: FunctionComponent<ImportModelsModalProps> = ({
       onHandledPrimaryAction={onUpload}
       onHide={hide}
       primaryButtonName={needsOverwriteConfirm ? t('Overwrite') : t('Import')}
-      primaryButtonType={needsOverwriteConfirm ? 'danger' : 'primary'}
+      primaryButtonStyle={needsOverwriteConfirm ? 'danger' : 'primary'}
       width="750px"
       show={show}
       title={<h4>{t('Import %s', resourceLabel)}</h4>}

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;
   `}
 `;