design tokens - second layer of abstraction

gistfile1.txt

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,
  }
}