Skip to main content

Overview

Theme

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

Usage​

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

1. Import the CSS directly into your project:​

// JavaScript/TypeScript

import '@overdose/theme/styles.css'
/* CSS */

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

2. Generate project design tokens​

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:
yarn transform-design-tokens build -s "<SOURCE_PATH>" -d "<DESTINATION_PATH>"

For example:

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

3. Import the generated CSS variables into your app​

// JavaScript/TypeScript

import '@overdose/theme/styles.css'
import 'theme/__generated__/_tokens.css'
/* CSS */

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

3. Overwrite specific variables​

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

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

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

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