Superset Theming (WIP ‐ subject to debate)

Core tenets/opinions:

• Superset should have its own theme that we maintain, so we can have proper support (version control, semVer) of that theme, and be flexible in adding/changing themes in our codebase more adaptively than before.
• Since we like AntD's theming semantics, we can and should cherry-pick these ideas for the time being as we develop our core theme
• There may be any number of "package themes" (AntD, Echarts, AG Grid, etc) in Superset at any time. These themes should be derivative (generated) from the Superset Theme
• Those "package themes" should be replaceable and overridable by a Superset Theme author.

flowchart TD
  ST[SupersetTheme] --> ANT[AntD Theme];
  ST --> AG[AG Grid Theme];
  ST --> EC[ECharts Theme];
  ST --> E[Emotion Overrides];
  ST --> OT[...Others];
  ANT --> TP[ThemingProvider];
  AG --> TP;
  EC --> TP;
  E --> TP;
  OT --> TP;

Loading

So... let's say we have a Superset Theme object, and it "borrows" some semantics from AntD. We could arrange things to cascade like so:

  export const SupersetTheme = {
    colorPrimary: '#1a6ae3', // AntD concept
    colorBg: '#FFFFFF', // AntD concept
    buttonColor: '#ff0000' // we add this because we want to allow customization
    ...
  }

Now, to make an AntD theme, we can import and leverage that base Superset Theme, and parts of it map 1:1. We may pile in other derived styles, AND/OR leverage SupersetTheme semantics that are made up for our own needs.

  import { SupersetTheme } from '...';
    
  export const AntdTheme = {
    colorPrimary: SupersetTheme.colorPrimary // 1:1 mapping from SupersetTheme
    colorBg: SupersetTheme.colorBg, // 1:1 mapping from SupersetTheme
    components: {
      Button: {
        colorPrimary: SupersetTheme.buttonColor, // wired more purposefully to our own semantics 
        algorithm: true, // Enable algorithm if/when needed... or other AntD trickery.
      }
    },
  }

Similarly, we can create an AG Grid theme. AG Grid has its own semantics, but can also import/use our Superset theme and any properties that live there.

  import { SupersetTheme } from '...';
  // import themeQuartz from wherever
  
  export comst myAgGridTheme = themeQuartz.withParams({
    spacing: SupersetTheme.gridUnit, // our old friend!
    accentColor: SupersetTheme.colorPrimary,
});

We can also build an ECharts theme doing the same:

  import { SupersetTheme } from '...';

  export const myEChartsTheme = {
    "version": 1,
    "themeName": "SupersetEchartsTheme",
    "theme": {
        "seriesCnt": 3,
        "backgroundColor": SupersetTheme.colorBg,
        "titleColor": SupersetTheme.typography.whatever, // TBD
        "textColorShow": false, // proprietary to Echarts

If some library/theme has some semantics we like, we can "promote" that idea back up to SupersetTheme, where we maintain it and consider it contractual (e.g. removing it is a "breaking change"). This could be more and more AntD semantics, ideas from other libraries, or our own concepts like drop shadows / animations / z-index registries.

flowchart TD
  ST[SupersetTheme] -- Cascade fundamental traits downward to themes --> Theme[Any Library/Package Theme];
  Theme -- Promote recyclable bits up to Superset theme when they can be used by others --> ST;

Loading