Theinium

A base for UI library I've always wanted to use for work with design systems

Quickstart

yarn
yarn storybook

Example

const themes = {
  vanilla: {
    colors: {
      brand: '#F3E5AB'
    },
    variants: {
      italic: {
        fontStyle: 'italic'
      }
    }
  },
  pistachio: {
    colors: {
      brand: '#93C572'
    }
  }
}

const ThemeAwareComponent = styled(Element)`
  color: ${getColor('brand')}
`;

const ThemedApp = () => (
  <ThemeContextProvider themes={themes}>
    <ThemeProvider name="vanilla">
      <ThemeAwareComponent>vanilla</ThemeAwareComponent>
      <ThemeProvider name="pistachio">
        <ThemeAwareComponent variant="italic">pistachio</ThemeAwareComponent>
      </ThemeProvider>
    </ThemeProvider>
  </ThemeContextProvider>
);

TODO

• using tokens as values in themes
• export token selectors

License

Dual CC0 and MIT.