feat: massive collaborative theming feature branch

[mistercrunch]

Excuse the large PR, but this is fairly tangled up, and working on fixing up theming probably requires some massive PRs as it's really hard to proceed PR-by-PR - especially during the holiday break...

Introducing less handlebars templates

First. Clearly we should move away from less and commit to emotion/antd for theming Now deleting the less files is going to be difficult. In the meantime, I wanted to provide a way for less files to source from the main theme object. I decided to go with handlebars since that should be part of the build process.

Considerations:

• this is temporary, goal is to get rid of less altogether. Having this enables layering the theming work, and allows to make the theme DRY, instead of referncing the same colors a bunch of times
• eventually could remove the .less files from the repo, and make sure they are dynamically generated on every builds. In the meantime I thought I'd leave them here, and we can instruct people to alter .less.hds files and run npm run compile-less on demand, if/when altering the main theme

Large refactor - what's in this PR?

• less templates - as described above
• New Theme object and subpackage as commented in the theming SIP
• Refactoring/fixing out-of-theme, css-heavy components
  • Alert - vanilla is better!
  • AceEditor
  • EmptyState refactor (that component WAS A MESS, felt almost like on-purpose maze of indirections), fixed the svg so it can receive currentColor as opposed to using an tag - required for making it themable/dark-modable
  • ErrorAlert refactor (also a huge mess, simplifying quite a bit here)
• Making antd components more vanilla
• Getting rid of a bunch of CSS
• Start aligning our css-in-js across the app to use the antd theme tokens
• storybook improvements
  • improving the theme stories

what's NOT in this PR? - yet to come

• more theme.antd referencing in emotion
• move CSS / LESS deletion
• antd v5 migrations
• ability to configure an antd ThemeConfig as the theme setup, this will require more moving from legacy theme object to antd

Compiling TODOs / visual bug as of 3/4/25

ok did a round of updates here, tackled some and left some TODOs in the list... thanks to @kgabryje and others for finding these issues!

• Spacing between the header and the filters section is smaller
• Import dashboards icon has different color
• Table chart looks a bit different - now the header is gray, and before every other row had a light gray background, now its all white
• Native filters modal - spacings are a bit off, the settings/scoping tabs background is gray
• Explore Borders is controls are much darker
• Explore: In table chart, when I applied conditional formatting, the colors are much lighter (more transparent??) than before

antd-v5-related

these should fix themselves as we migrate the components to antd-v5

• Filters placeholders were light grey before
• When you click on a filter, the active option in the menu has darker color than before

[korbit-ai[bot]]

Based on your review schedule, I'll hold off on reviewing this PR until it's marked as ready for review. If you'd like me to take a look now, comment /korbit-review.

Your admin can change your review schedule in the Korbit Console

[mistercrunch]

/korbit-review

[michael-s-molina]

@mistercrunch I'm a little confused. Is this PR ready for review or are you still moving things to separate PRs?

factoring out pre-commit changes into another PR fix(Menu): Adjust hover and bottom styles in light mode

If the work is still in progress, can you convert this PR to a draft?

[michael-s-molina]

@mistercrunch I pulled this branch and did a quick navigation. I understand the importance of merging this before the breaking window closes and that we can fix the issues during the RC rounds but I think we need to polish a little bit more before merging this PR. Here's some examples of things that need adjustment:

1. The home page style looks off and there's a weird toggle at the top. I believe this is used to change from light to dark theme and it should be hidden.

2. Tabs style

3. Empty container icon

4. Icons size

5. Controls, drag-and-drop image, buttons

6. Font sizes for the error messages

7. Menu buttons

8. Database connections

[michael-s-molina]

It's also important to add a message to UPDATING.md explaining how this change affects folks using the THEME_OVERRIDES configuration and how can they migrate to the new schema.

[mistercrunch]

It's ready for review if reviewers accept a large PR. At this point I moved the larger refactors out of here and this should be basically:

• a new theming system (see packages/superset-ui-core/theme)
• aligning the codebase with new theming system (mapping old tokens to new tokens)

[mistercrunch]

Thanks for reporting the visual issues, planning on solving the bulk of them (and other ones we find) prior to merging this.

[mistercrunch]

~~/testenv up~~ oops I think we're label-based now!

[github-actions[bot]]

@mistercrunch Processing your ephemeral environment request here. Action: up.

[kgabryje]

A few visual bugs that I found while testing:

1. Weird background behind dropdown triggers (home page, dashboard)

2. 2 primary buttons in edit dashboard modal (and many other places)

3. Nit but we probably should have a tooltip or an icon in the light/dark trigger

4. Gray background behind the native filters bar looks kinda weird. Also, the full tab content background should probably be white, and it's gray (on the right of the deckgl chart)

5. The background behind the copy button is kinda strong

6. Gray background behind the pagination component. Also, the edit chart button doesnt look like our secondary buttons. The modal header and table header are white, and they were gray before, not sure if that's intentional. Side note - the border radius seems to be bigger than before, is that intentional?

7. Submenu looks like it's behind the menu instead of in front of it. That however might be related to the recent antd5 migration because I'm seeing the same thing on master

8. The tooltips are more transparent and they're a bit hard to read when on top of some text

9. Discard button should be secondary in edit mode, the right panel was white before (I think it looked better)

10. Gray background behind the update chart button in Explore - is that intentional? Also, the colors in the controls are a bit strong and overwhelming, they were lighter gray before and I think they looked better

11. 3 primary buttons in Save chart modal

12. Some controls are unreadable in dark mode

13. maybe we should make the border color lighter? It looks kinda overwhelming in many places, like here in viz type selector

14. Lots of primary buttons in sql lab, also the ag grid table theme looks a bit different? Filter input looks like its disabled, but its not

[msyavuz]

There are also some more visual bugs? on dark mode:

1. Chart text on Dashboard is black on dark mode

2. Explore page white bg on bottom

3. Sqllab tabs have white bg

4. Some inputs don't change in dark mode which i think is unintentional

Also i think there is a dark mode Superset logo which we can use in dark mode.

[mistercrunch]

Hey, just clarifying here, the dark mode switch (behind a feature flag) is expected to expose styling issues until we can remove all of our reliance on .less files, and until everything is move to css-to-jss. Big part of the puzzle is the antd-v5 migration that's well under way.

For the time being this switch helps visualize where things aren't themed properly yet. Also note that during this [hopefully short] transition period, running npm run compile-less should fix issues as our .less files are now templated with Handlebars (while transitioning).

[github-actions[bot]]

@mistercrunch Processing your ephemeral environment request here. Action: up.

[github-actions[bot]]

@mistercrunch Ephemeral environment spinning up at http://34.208.200.129:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

[kgabryje]

Looks much better already! I've got some second pass comments:

Dashboard list page

1. Secondary button looks different
2. Buttons have larger border radius than before
3. Spacing between the header and the filters section is smaller
4. Import dashboards icon has different color
5. Filters placeholders were light grey before
6. When you click on a filter, the active option in the menu has darker color than before

Dashboard

1. Native filters bar has gray background instead of white
2. The gray background behind the metadata bar is gone
3. Font size of the dashboard header is smaller
4. Table chart looks a bit different - now the header is gray, and before every other row had a light gray background, now its all white
5. Native filters modal - spacings are a bit off, the settings/scoping tabs background is gray
6. In edit mode, the right panel has gray background, and "create new chart" button has different color
7. Discard button is primary, should be secondary

Explore

1. Borders is controls are much darker
2. Gray background behind Update Chart button
3. In table chart, when I applied conditional formatting, the colors are much lighter (more transparent??) than before

[mistercrunch]

ok did a round of updates here, tackled some and left some TODOs in the list...

Dashboard list page

Secondary button looks different

Trying to address this with secondary="filled" with color="primary" instead of "outlined" / "grayscale"

Buttons have larger border radius than before

Going vanilla! We could reduce it if we want to maintain consistency with previous theme for this specifically

Spacing between the header and the filters section is smaller

TODO

Import dashboards icon has different color TODO: I'm a bit puzzled by this one

Filters placeholders were light grey before

Should fix itself as we migrate Form to antd-v5

When you click on a filter, the active option in the menu has darker color than before

Should fix itself as migrate Select to antd-v5

Dashboard

Native filters bar has gray background instead of white

Fixed!

The gray background behind the metadata bar is gone

Fixed, using colorLayout instead of colorBgElevated, which is white in the theme

Font size of the dashboard header is smaller looks like it's 20px now

Table chart looks a bit different - now the header is gray, and before every other row had a light gray background, now its all white

TODO

Native filters modal - spacings are a bit off, the settings/scoping tabs background is gray

TODO

In edit mode, the right panel has gray background, and "create new chart" button has different color Fixed!

Discard button is primary, should be secondary

Fixed!

Explore

Borders is controls are much darker

mmmh is that for large Selects? Like the box containing the things in the select?

Gray background behind Update Chart button fixed! (I think...)

In table chart, when I applied conditional formatting, the colors are much lighter (more transparent??) than before

TODO

[mistercrunch]

Other notes:

• the FAB views look pretty off, not sure if it's a dealbreaker. To be fair, they look bad on master too, but worse now after this PR. Goal is to kill them, so wondering if a regression in a to-be-deprecated area is tolerable.
• reminder to turn off the dark theme switch feature flag before merging...

[github-actions[bot]]

@mistercrunch Processing your ephemeral environment request here. Action: up.

[mistercrunch]

about

• Font size of the dashboard header is smaller

I checked and the the branch is at 20px while master is at 21px, good eye for spotting this @kgabryje :) . I think 20px is ok :)

[github-actions[bot]]

@mistercrunch Ephemeral environment spinning up at http://35.88.225.32:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

[github-actions[bot]]

@mistercrunch Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

[github-actions[bot]]

@mistercrunch Ephemeral environment spinning up at http://34.219.110.18:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

[msyavuz]

There are two visual issues that i found while working branched out from this pr:

1. Hover state in database modal database buttons looks off

2. Second one is introduced with recent changes. Filter settings icon color is different.

[mistercrunch]

Yeah found a few after the latest merge, will do further merge/fix/push today.

@msyavuz one thing I found with the recent <Icon /> changes is it would be nice if the component would simply inherit the color from parent. I don't think it does now.

[msyavuz]

@msyavuz one thing I found with the recent <Icon /> changes is it would be nice if the component would simply inherit the color from parent. I don't think it does now.

Yes, it defaults to theme.colors.grayscale.base.

[github-actions[bot]]

@mistercrunch Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

[github-actions[bot]]

@mistercrunch Ephemeral environment spinning up at http://34.220.247.28:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

[github-actions[bot]]

@msyavuz Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

[github-actions[bot]]

@msyavuz Ephemeral environment spinning up at http://35.91.167.34:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

[github-actions[bot]]

@EnxDev Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments