@indoqa/style-system

Indoqa Style-System

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:

  • <Box> (docs)
  • <Flex> (docs)
  • <Text> (docs)
  • <Grid>, <Row>, <Panel>, <ColRow>, <Col> (docs)

• Typed components with Typescript

  

• A typed base theme with sensible defaults (e.g. font styles based on system fonts)

• Base CSS stylesheets (Bootstrap Reboot 4.1 and normalize.css are currently supported)

Changelog

Learn about the latest improvements

Installation and usage

yarn install @indoqa/style-system

Theming

Setup the application theme based on the BaseTheme provided by Indoqa Style-System:

import {BaseColors, BaseFontSizes, baseTheme, BaseTheme, typeScale} from '@indoqa/style-system'

interface FontSizes extends BaseFontSizes {
  readonly extraBig: number | string
}

interface Colors extends BaseColors {
  readonly primary: string
  readonly primaryDark: string
  readonly primaryLight: string
  readonly accent: string
  readonly textSecondary: string
  readonly divider: string
}

interface Layout {
  readonly actionBarHeight: number
  readonly menuWidth: number
}

export interface Theme extends BaseTheme {
  readonly fontSizes: FontSizes
  readonly colors: Colors
  readonly layout: Layout
}

const baseColors = {
  black_1: '#000000',
  black_2: '#120012',
  grey_1: '#727272',
  grey_2: '#BDBDBD',
  white_3: '#d5d5d5',
  white_1: '#ffffff',
  blue_1: '#c5cae9',
  blue_2: '#3f51b5',
  blue_3: '#303f9f',
  orange_1: '#ff5722',
}

const baseFontSizes: FontSizes = {
  text: typeScale(1),
  big: typeScale(2),
  veryBig: typeScale(3),
  extraBig: typeScale(3),
  small: typeScale(0),
  verySmall: typeScale(-1),
}

const theme: Theme = {
  breakpoints: baseTheme.breakpoints,
  colors: {
    primary: baseColors.blue_2,
    primaryDark: baseColors.blue_3,
    primaryLight: baseColors.blue_1,
    accent: baseColors.orange_1,
    text: baseColors.black_2,
    textSecondary: baseColors.grey_1,
    divider: baseColors.white_1,
  },
  fontSizes: baseFontSizes,
  fontStyles: baseTheme.fontStyles,
  layout: {
    actionBarHeight: 50,
    menuWidth: 300,
  },
  spacing: baseTheme.spacing,
  zIndexes: baseTheme.zIndexes,
}

export default theme

• The interface Theme extends the interface BaseTheme. This is important because all provided components are based on BaseTheme or extensions of it.
• The implementation theme uses baseTheme properties or overrides them.

Fela setup

With react-router v6 syntax.

import {BaseCssProps, createFelaConfig, renderRebootCss} from '@indoqa/style-system'
import {createRenderer} from 'fela'
...

const felaConfig = createFelaConfig()
const renderer = createRenderer(felaConfig)

const baseCssProps: BaseCssProps = ...

const App: React.FC = () => {
  React.useLayoutEffect(() => {
    renderRebootCss(renderer, baseCssProps)
  }, [])
  return (
    <RendererProvider renderer={renderer}>
      <Router>
        <ThemeProvider theme={theme}>
          <Routes>
            <Route path="/*" element={<StyleSystemUIExplorer theme={theme} />} />
          </Routes>
        </ThemeProvider>
      </Router>
    </RendererProvider>
  )
}

export default App

• renderRebootCss provides 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)
• createFelaConfig configures 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.

Complete samples can be found at Indoqa Style-System demo and the Indoqa React Starter.

Documentation

• Base components (Box, Flex, Text)
• Grid
• PStyle and breakpoints
• Theming