lib-ts-theme

aka theme

Theme created using @stitches/react.

Installation

npm install --save-dev @uphillhealth/theme@latest

Usage

Using the given provider

import { styled } from '@uphillhealth/theme'

export const ComponentStyled = styled('div', {
  backgroundColor: '$primary500'
})

Extending Theme Provider

import { createStitches } from '@stitches/react';
import { themeTokens } from '@uphillhealth/theme'

const ExtendedThemeProvider = createStiches({
  ...themeTokens,
  colors: {
    ...themeTokens.colors,
    myColor: '#000'
  }
})

// And to create components using your extended theme
const MyExtendedComponent = ExtendedThemeProvider.styled('div', {
  backgroundColor: '$myColor'
})

Creating new color scales

Access Color Scale generator and configure like the image bellow:

It will give you the scale from 1000 to 50.