# @reverb-ui/tokens

> a library that contains all tokens from Reverb Theme.

Latest version **2.2.0** (published 2022-05-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install @reverb-ui/tokens
pnpm add @reverb-ui/tokens
yarn add @reverb-ui/tokens
bun add @reverb-ui/tokens
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2022-05-09 |
| First published | 2021-08-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 121.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | TeamReverb |
| Maintainers | nataliacoelho, benitsrock, kelvin.chaves, fernandacantorock, zayit |

## Links

- npm: https://www.npmjs.com/package/@reverb-ui/tokens
- Repository: https://gitlab.rockcontent.com:2222/reverb/package/reverb-package-tokens
- npm.io page: https://npm.io/package/@reverb-ui/tokens

## Recent versions

- 2.2.0 (latest) — 2022-05-09
- 2.1.1 — 2022-04-26
- 2.1.0 — 2022-04-25
- 2.0.0 — 2021-12-14
- 1.0.2-beta — 2021-08-26
- 1.0.1 — 2021-08-26
- 1.0.0 — 2021-08-23

## README

# 📦 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](https://system-ui.com/theme/).

## 📦 Install

```bash
npm install @reverb/tokens
```

```bash
yarn add @reverb/tokens
```

## 🔨 Usage

```jsx
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:](https://reverb.rockcontent.com/doc/default-theme-XVgEtTACbL)

## 🎨 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](https://reverb.rockcontent.com/doc/component-style-2FGZOAtobb).

## 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:

```bash
 git clone ssh://git@gitlab.rockcontent.com:2222/reverb/package/reverb-package-tokens.git
```

or

```bash
 git clone https://gitlab.rockcontent.com/reverb/package/reverb-package-tokens.git
```

then:

```bash
 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](https://wiki.rockcontent.com/doc/gitflow-workflow-pMwl52On0C)

---
_Source: https://npm.io/package/@reverb-ui/tokens · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._