shyampotta opened a new issue, #41618:
URL: https://github.com/apache/superset/issues/41618
## Title
Dashboard chart tiles (`.dashboard-component-chart-holder`) don't use
`colorBorder` token — no visible boundary in either theme mode
## Summary
The dashboard header divider was recently migrated from the deprecated
`colorSplit` token to `colorBorder` in #35199, which correctly ties it to the
active theme (light/dark, or any custom theme) and switches automatically with
the in-app theme toggle.
The chart tile wrapper (`dashboard-component-chart-holder` — the card that
wraps every KPI/chart on a dashboard) does not appear to have received the same
treatment. In both light and dark custom themes, tiles render with no visible
border at all, even when `colorBorder` is explicitly set in the theme JSON. The
header divider above the tiles renders correctly with the same theme active,
confirming this is scoped to the chart-holder component specifically, not a
general token-propagation failure.
## Steps to reproduce
1. Create a custom theme in Settings → Themes with `colorBorder` set to a
value visibly distinct from the background (e.g. `#333335` on a `#1f1f1f` dark
background)
2. Apply the theme (system-wide or per-dashboard)
3. View any dashboard with multiple chart tiles side by side
4. Observe: no boundary is visible between tiles or between a tile and the
canvas
5. Compare: the horizontal line separating the dashboard header from the
content area *does* render using the theme's border color correctly
## Expected behavior
Chart tiles should render a border using `colorBorder`, consistent with how
the header divider already behaves post-#35199, and should switch automatically
with theme/mode changes — the same way the header border does — without
requiring dashboard-level custom CSS.
## Actual behavior
No border renders on chart tiles in any tested theme. The only way to add a
visible tile boundary today is raw CSS in the dashboard's CSS editor, which is
static and does not respond to the in-app light/dark toggle (confirmed:
toggling the theme via the paint-roller icon does not add/remove any class or
`data-*` attribute on `<html>` or `<body>`, so there's no DOM hook a static
stylesheet can key off).
## Suggested fix
Following the pattern from #35199: locate wherever
`.dashboard-component-chart-holder` (or its current component name, if renamed
since) sets its border style, and switch it to read `theme.colorBorder` via
Emotion's `css` prop, the same way `Header/index.jsx` does for
`headerContainerStyle`.
## Environment
- Superset version: 6.1.0
- Reproduced with: custom theme via Settings → Themes (UI-based theme
administration)
## Related
- #35199 — the precedent fix for the header divider
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
