An atomic component library by Overdose.
npm install @overdose/componentsAn atomic component library by Overdose.
``shell`
yarn add @overdose/components @overdose/theme
yarn add @overdose/design-tokens-transformer -D
- The @overdose/components package contains the base react components@overdose/theme
- The package contains themeable CSS variables the base components depend on@overdose/design-tokens-transformer
- The package contains a script to transform design tokens exported from Figma into theme CSS variables
Import the component and theme stylesheets into your App file.
- Nextjs (eg. Carrots): _app.tsxapp.scss
- Frontastic: App.server.tsx
- Hydrogen: App.js
- Deity: global.css
- Shogun Frontend:
`jsx`
// JavaScript/TypeScript
import '@overdose/components/build/esm/styles.css'
import '@overdose/theme/styles.css'
`jsx
import { Typography } from '@overdose/components';
const MyComponent = () => (
What's up, Doc?
);
`
Components are highly themeable both globally and locally.
#### Global theming
Design tokens can be exported from Overdose-made Figma design files and automatically converted to CSS variables with @overdose/design-tokens-transformer.
1. Export design tokens from Figma using the Design Tokens plugin. Save the exported JSON file in your project (for example as /theme/tokens/design-tokens.tokens.json)
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__/"
3. Import the generated CSS variables into your App file after @overdose/theme/styles.css.
`jsx`
// JavaScript/TypeScript
import '@overdose/components/build/esm/styles.css'
import '@overdose/theme/styles.css'
import 'theme/__generated__/_tokens.css'
4. Fine-tune the CSS variables as required for the project. Available variables are documented in the Storybook.
`css`
:root {
--btn-border-radius-default: 4px;
}
#### Local theming
Components expose a type-safe theme prop which allows passing in new class names for the component's root element and child elements.
For example:
`jsx
import { Accordion, AccordionItem } from '@overdose/components';
import styles from './MyComponent.module.css';
root: styles.accordion,
}}>
theme={{
active: styles.accordionActive,
title: styles.accordionTitle,
content: styles.accordionContent,
}}>
{/ ... /}
``
Visit the docs site for more detailed usage and the contributing quick-start guide for a quick overview of how to contribute to the project.