theme.ts

export function getThemeCss<
  T extends { [key: string]: { [key: string]: string } }
>(variables: T): string {
  return `
:root {
  ${Object.keys(variables).reduce((parentAggr, parentKey) => {
    return Object.keys(variables[parentKey]).reduce((aggr, key) => {
      return `${aggr}\n--${parentKey}-${key}: ${variables[parentKey][key]};`
    }, parentAggr)
  }, '')}
}
`
}

export function getTheme<
  T extends { [key: string]: { [key: string]: string } }
>(variables: T): { [P in keyof T]: { [C in keyof T[P]]: string } } {
  return Object.keys(variables).reduce(
    (aggr, key) => ({
      ...aggr,
      [key]: variables[key],
    }),
    {}
  ) as any
}

const variables = {
  colors: {
    primary: 'hsl(206, 57%, 17%)',
    purple: '#c5a5c5',
    yellow: '#fac863',
    green: '#5bd85d',
    blue: '#79b6f2',
    red: '#cc0000',
    dark: 'hsl(206, 57%, 17%)',
    dark2: 'hsl(206, 57%, 13%)',
    dark3: 'hsl(206, 57%, 16%)',
    white: 'hsl(0, 0%, 90%)',
    white2: 'hsl(0, 0%, 85%)',
    white3: 'hsl(0, 0%, 80%)',
    white4: 'hsl(0, 0%, 75%)',
    black: 'hsl(0, 0%, 20%)',
    black2: 'hsl(0, 0%, 25%)',
    gray: 'hsl(0, 0%, 90%)',
    gray2: 'hsl(0, 0%, 95%)',
  },
}

export const css = getThemeCss(variables)
export const theme = getTheme(variables)
export const colors = theme.colors