Theme

A CSS based theming engine for use with Overdose Figma design tokens.

Usage

``shell
yarn add @overdose/theme
yarn add @overdose/design-tokens-transformer -D
`

$3

`js
// JavaScript/TypeScript

import '@overdose/theme/styles.css'
`

`css
/ CSS /

@import '@overdose/theme/styles.css';
`

$3

Tokens from @overdose/theme work best with CSS variables generated from Figma. Check the @overdose/design-tokens-transformer docs for more information.

1. Export design tokens from Figma using the Design Tokens plugin. Save the exported design-tokens.tokens.json file in your project.
2. Generate tokens with:

`shell
yarn transform-design-tokens build -s "" -d ""
`

For example:

`shell
yarn transform-design-tokens build -s "./theme/tokens/design-tokens.tokens.json" -d "./theme/__generated__/"
`

$3

`jsx
// JavaScript/TypeScript

import '@overdose/theme/styles.css'
import 'theme/__generated__/_tokens.css'
`

`css
/ CSS /

@import '@overdose/theme/styles.css';
@import 'theme/__generated__/_tokens.css';
`

$3

Variables can be overwritten when the default value is not appropriate for your project.

`css
@import '@overdose/theme/styles.css';

:root {
--btn-border-radius-default: 4px;
}
``

Check out the pwa monorepo for a full list of available variables.