Open
Description
As all platforms are just about to support their own versions of dark mode, theming is becoming an important part of an efficient design workflow.
Let's talk about how design tokens should handle theming.
Here's a rough draft that essentially mimics how the CSS cascade works:
// Defaults
[
{ name: 'tokenA', value: 'foo' },
{ name: 'tokenB', value: 'bar' },
]
// Overrides for dark mode, loaded subsequently
[
{ name: 'tokenA', value: 'baz' },
]
// Should resolve to:
[
{ name: 'tokenA', value: 'baz' },
{ name: 'tokenB', value: 'bar' },
]
In a design tool, a designer could load and toggle any number of override files in order to get to the target platform (such as: Defaults < Android < Dark mode).