This project provides an extensible style system for React with Typescript typed theme support and several base components following the principle of style as function of state:
Base components as building blocks which are integrated with theming:
Typed components with Typescript
A typed base theme with sensible defaults (e.g. font styles based on system fonts)
Installation and usage
yarn install @indoqa/style-system
Setup the application theme based on the BaseTheme provided by Indoqa Style-System:
- The interface
Themeextends the interface
BaseTheme. This is important because all provided components are based on
BaseThemeor extensions of it.
- The implementation
baseThemeproperties or overrides them.
renderRebootCssprovides basic CSS styles based on the theme
- provide a
RendererProvider(all React components can get access to the Fela renderer)
- provide a
ThemeProvider(all React components can get access to the application theme)
createFelaConfigconfigures Fela with all the plugins which are usually required for web applications. It also registers named keys for breakpoints and print styles which are aligned with the PStyle type.