Custom styles - theming and what comes next

[montezume]

History

The concept of theming was added to UI-Kit in #563. New choices were added, and design tokens were used to point at those choices.

import { ThemeProvider } from 'emotion-theming';
import { TextInput } from '@commercetools-frontend/ui-kit';

const darkTheme = {
  colorSurface: 'black',
  colorSolid: 'white',
};

const InvertedTextInput = ({value, onChange}) => (
    <ThemeProvider theme={darkTheme}>
        <TextInput name="dark-input" value={value} onChange={onChange} />
    </ThemeProvider>
);

However, we only have only really dealt with the concept of theming colours. Taking the TextInput as an example, there are a few others variables that could be themed.

    sizeHeightInput: '32px',
    spacing8: '8px',
    transitionStandard: 'all 0.2s ease' 

Does it make sense to theme things other than colours?

Maybe not. If we take a look at react-select, they allow setting the colours with a theme, and that's it. If you want to override other styles, you need to use another API (their overridable style objects).

Realistically, if a user wants to completely customize our components, providing overridable variables won't be enough. Maybe it makes sense to only allow theming of colours, transitions and maybe margins?

It might also make sense to take a look at some other component libraries and see how they allow custom styles.

[emmenko]

Thanks for tracking this!

Maybe we should make a list of what we think of that can be part of themes. We can start with the obvious ones (colour, fonts, etc) and consider adding more as we see the need to.

On the other hand, I find that by thinking about themes, it "forces" us to (re)think about some naming choices, even though they might not ever end up in themes. For example, the spacing tokens are currently tight to numbers. We could e.g. rename them to t-shirt sizes, thus making it more flexible and not tight to the actual pixel numbers.