@overdose/theme
v1.1.0
Published
A bunch of CSS vars for use with Overdose components
Downloads
2,924
Keywords
Readme
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.
- Export design tokens from Figma using the Design Tokens plugin. Save the exported design-tokens.tokens.json file in your project.
- 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.