Theming

[miralemd]

Motivation

White labeling and customizing the look and feel is an important aspect of integration for mashups.

Concerns

• Modifying styles by directly referencing CSS classes isn't ideal as various integrations could easily interfere with eachother.
• Supporting different versions of nebula (which could have different styles in different versions) in the same page would also be a risk of clashing styles.
• Applying a different style per chart on the same page should also be possible.
• UI and visualizations should be broken down into components, the theme is defined on component level, not on chart level.

Solution

For those reasons we will be taking a CSS-in-JS approach as it will minimize the above risks.

The definition of a theme might look like this:

{
  typography: {
    fontFamily: '"Source Sans Pro", Arial, sans-serif',
    fontSize: '14px',
  },
  palette: {
    primary: 'green',
    secondary: 'purple',
    background: '#fafafa',
    surface: '#ffffff',
    text: {
      primary: '#404040',
      secondary: '#999',
    }
  },
  shape: {
    borderRadius: 4
  },
  data: {
    nil: '#eee',
    categorical: ['red', 'green', 'blue'],
  },
}

Themes are used per app and nucleus instance:

const nebbie = nebula(enigmaApp).theme({ typeography: { fontFamily: 'Georgia' }});

// all charts created from the same nucleus instance will have the same theme
nebbie.get({ id: 'fgdtr' }, { element });
nebbie.get({ id: 'fs4fr' }, { element });

// it should be possible to apply a different theme to a different instance on the same page
const nebbie2 = nebula(enigmaApp).theme({ typeography: { fontFamily: 'Monaco' }});
nebbie.get2({ id: 'adfs3' }, { element });
nebbie.get({ id: 'bcnhj' }, { element });