A bunch of CSS vars for use with Overdose components
npm install @overdose/themeA CSS based theming engine for use with Overdose Figma design tokens.
``shell`
yarn add @overdose/theme
yarn add @overdose/design-tokens-transformer -D
`js
// JavaScript/TypeScript
import '@overdose/theme/styles.css'
`
`css
/ CSS /
@import '@overdose/theme/styles.css';
`
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 "
For example:
`shell`
yarn transform-design-tokens build -s "./theme/tokens/design-tokens.tokens.json" -d "./theme/__generated__/"
`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';
`
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.