Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
design tokens - second layer of abstraction
import colors from './colors.ts';
const baseTheme = {
colors: {
// primary is a semantic name.
primary: colors.blue100,
secondary: colors.gray:100,
}
}
const brandATheme = {
...baseTheme
}
// A brand theme can extend other themes
// and then override some aspects when needed
const brandBTheme = {
...baseTheme,
colors: {
primary: colors.blue200,
secondary: colors.gray:200,
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment