@reverb-ui/tokens v2.2.0

📦 reverb-package-tokens

The @reverb/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 @reverb/tokens

yarn add @reverb/tokens

🔨 Usage

import ReverbUITheme from '@reverb/tokens';
import { ThemeProvider } from "@reverb/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://git@gitlab.rockcontent.com: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