You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by as...@apache.org on 2026/03/12 14:57:07 UTC
(superset) 01/01: fix(button): make button more configurable via theme
This is an automated email from the ASF dual-hosted git repository.
asoare pushed a commit to branch alexandrusoare/fix/theme-button
in repository https://gitbox.apache.org/repos/asf/superset.git
commit f10b6cd03dc38f4d72791b4478d1bcb91e51b63d
Author: alexandrusoare <al...@gmail.com>
AuthorDate: Thu Mar 12 16:56:45 2026 +0200
fix(button): make button more configurable via theme
---
.../packages/superset-core/src/theme/Theme.tsx | 2 ++
.../packages/superset-core/src/theme/types.ts | 32 ++++++++++++++++++++++
.../src/components/Button/index.tsx | 25 +++++++++++++----
superset/config.py | 26 ++++++++++++++++++
4 files changed, 79 insertions(+), 6 deletions(-)
diff --git a/superset-frontend/packages/superset-core/src/theme/Theme.tsx b/superset-frontend/packages/superset-core/src/theme/Theme.tsx
index 7a890982eaa..9a8709d1735 100644
--- a/superset-frontend/packages/superset-core/src/theme/Theme.tsx
+++ b/superset-frontend/packages/superset-core/src/theme/Theme.tsx
@@ -120,6 +120,8 @@ export class Theme {
...(echartsOptionsOverridesByChartType && {
echartsOptionsOverridesByChartType,
}),
+ // Include component-level tokens for custom styling (e.g., Button secondary tokens)
+ ...(antdConfig.components && { components: antdConfig.components }),
} as SupersetTheme;
// Update the providers with the fully formed theme
diff --git a/superset-frontend/packages/superset-core/src/theme/types.ts b/superset-frontend/packages/superset-core/src/theme/types.ts
index a0b30ca5956..3df7c2be470 100644
--- a/superset-frontend/packages/superset-core/src/theme/types.ts
+++ b/superset-frontend/packages/superset-core/src/theme/types.ts
@@ -109,6 +109,35 @@ export interface ColorVariants {
textActive: string;
}
+/**
+ * Superset-specific Button component tokens.
+ * These extend Ant Design's Button tokens to support secondary button styling.
+ */
+export interface SupersetButtonTokens {
+ // Secondary button tokens (Superset-specific, not available in Ant Design)
+ secondaryColor?: string;
+ secondaryBg?: string;
+ secondaryBorderColor?: string;
+ secondaryHoverColor?: string;
+ secondaryHoverBg?: string;
+ secondaryHoverBorderColor?: string;
+ secondaryActiveColor?: string;
+ secondaryActiveBg?: string;
+ secondaryActiveBorderColor?: string;
+ // Allow any other Ant Design Button tokens to pass through
+ [key: string]: any;
+}
+
+/**
+ * Component-level tokens that can be customized via theme configuration.
+ * This allows accessing component tokens via useTheme() for custom CSS overrides.
+ */
+export interface SupersetComponentTokens {
+ Button?: SupersetButtonTokens;
+ // Other components can be added here as needed
+ [key: string]: Record<string, any> | undefined;
+}
+
export interface SupersetSpecificTokens {
// Font-related
fontSizeXS: string;
@@ -168,6 +197,9 @@ export interface SupersetSpecificTokens {
* Defaults to colorPrimaryBgHover if not specified.
*/
colorEditorSelection?: string;
+
+ // Component-level tokens for custom styling
+ components?: SupersetComponentTokens;
}
/**
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Button/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/Button/index.tsx
index 626abfaa404..655df11ce2c 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Button/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Button/index.tsx
@@ -64,6 +64,7 @@ export function Button(props: ButtonProps) {
const theme = useTheme();
const { fontSizeSM, fontWeightStrong } = theme;
+ const buttonTokens = theme.components?.Button;
let height = 32;
let padding = 18;
@@ -132,12 +133,24 @@ export function Button(props: ButtonProps) {
'& > span > :first-of-type': {
marginRight: firstChildMargin,
},
- ':not(:hover)': effectiveButtonStyle === 'secondary' &&
- !disabled && {
- // 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`,
- },
+ // Secondary button styling via customizable tokens
+ ...(effectiveButtonStyle === 'secondary' &&
+ !disabled &&
+ buttonTokens && {
+ color: buttonTokens.secondaryColor,
+ backgroundColor: buttonTokens.secondaryBg,
+ borderColor: buttonTokens.secondaryBorderColor,
+ '&:hover': {
+ color: buttonTokens.secondaryHoverColor,
+ backgroundColor: buttonTokens.secondaryHoverBg,
+ borderColor: buttonTokens.secondaryHoverBorderColor,
+ },
+ '&:active': {
+ color: buttonTokens.secondaryActiveColor,
+ backgroundColor: buttonTokens.secondaryActiveBg,
+ borderColor: buttonTokens.secondaryActiveBorderColor,
+ },
+ }),
}}
icon={icon}
{...restProps}
diff --git a/superset/config.py b/superset/config.py
index 2216c325b37..1c0e8df34fa 100644
--- a/superset/config.py
+++ b/superset/config.py
@@ -958,6 +958,21 @@ THEME_DEFAULT: Theme = {
# Editor selection color (for SQL Lab text highlighting)
"colorEditorSelection": "#fff5cf",
},
+ "components": {
+ "Button": {
+ # Secondary button tokens (Superset-specific)
+ # These provide full theming control for secondary buttons
+ "secondaryColor": "#2893B3",
+ "secondaryBg": "rgba(40, 147, 179, 0.15)",
+ "secondaryBorderColor": "transparent",
+ "secondaryHoverColor": "#2893B3",
+ "secondaryHoverBg": "rgba(40, 147, 179, 0.25)",
+ "secondaryHoverBorderColor": "transparent",
+ "secondaryActiveColor": "#2893B3",
+ "secondaryActiveBg": "rgba(40, 147, 179, 0.35)",
+ "secondaryActiveBorderColor": "transparent",
+ },
+ },
"algorithm": "default",
}
@@ -971,6 +986,17 @@ THEME_DARK: Optional[Theme] = {
# Darker selection color for dark mode
"colorEditorSelection": "#5c4d1a",
},
+ "components": {
+ **THEME_DEFAULT.get("components", {}),
+ "Button": {
+ **THEME_DEFAULT.get("components", {}).get("Button", {}),
+ # Dark mode secondary button tokens
+ "secondaryColor": "#4db8d5",
+ "secondaryBg": "rgba(77, 184, 213, 0.15)",
+ "secondaryHoverBg": "rgba(77, 184, 213, 0.25)",
+ "secondaryActiveBg": "rgba(77, 184, 213, 0.35)",
+ },
+ },
"algorithm": "dark",
}