iclips-reverb-ui-tokens
v2.1.3
Published
a library that contains all tokens from Reverb Theme.
Downloads
6
Readme
📦 iclips-reverb-package-tokens
The iclips-reverb-ui-tokens object is for you to define the design system color palette, type scale, font stacks, breakpoints, edge radius values, and more.
Theming with Reverb is based on the Styled System Theme Specification.
📦 Install
npm install iclips-reverb-ui-tokens
yarn add iclips-reverb-ui-tokens
🔨 Usage
import ReverbUITheme from 'iclips-reverb-ui-tokens';
import { ThemeProvider } from "iclips-reverb-ui-react";
const App = () => (
return (
<ThemeProvider theme={ReverbUITheme} resetCSS>
<Components />
</ThemeProvider>
)
);
⚙️ How it's work?
By default, all Reverb components inherit values from the default theme. In some scenarios, you might need to customize theme tokens to match your design requirements.
Here are some options depending on your goals:
- Customize theme tokens such as colors, font sizes, line heights, etc.
- Customize component styles by changing basic styles, sizes or variants.
- Customize global styles.
- Add new values into tokens theme
Learn more about - Default Theme:
🎨 Customizing component styles
Reverb has a specific approach or API for styling components. The main idea is most components have default or base styles (baseStyle), styles for different sizes (sizes), and styles for different visual variants (variants).
It is important to understand this so you can override any component style effectively.
You're not limited to the component styles that Chakra provides, you can also create your own custom component styles. Learn more.
Folder Structure
.
├── src # All json file of tokens from Theme
│ ├── components # All json file of tokens from Components
│ └── typography # All json file of tokens from Typography
├── LICENSE
└── README.md
Use short lowercase names at least for the top-level files and folders except
LICENSE
,README.md
⌨️ Development
Clone locally:
git clone ssh://[email protected]:2222/reverb/package/reverb-package-tokens.git
or
git clone https://gitlab.rockcontent.com/reverb/package/reverb-package-tokens.git
then:
cd reverb-package-tokens
Ready now, just do what you need and open a new Pull Request with your changes.
For learn more about contribuing in our project, you can read this article - Gitflow workflow