# Eduzz UI: Tailwind Theme

[![version](https://img.shields.io/npm/v/@eduzz/ui-tailwind-theme)](https://www.npmjs.com/package/@eduzz/ui-tailwind-theme)
[![size](https://img.shields.io/bundlephobia/min/@eduzz/ui-tailwind-theme)](https://www.npmjs.com/package/@eduzz/ui-tailwind-theme)

Aplica os Tokens de UI da Eduzz no Tailwind.

## Instalação

```bash
pnpm add @eduzz/ui-tailwind-theme
```

## Importação

No arquivo css principal do seu projeto adicione o código abaixo na primeira linha: 
```css
@import "@eduzz/ui-tailwind-theme";
```
Note que não é necessário importa o tailwind via `@import "tailwindcss";` pois já é feito através do import do @eduzz/ui-tailwind-theme.

Com isso é só sair utilizando as classes =]

## Prefixos
Para utilizar os prefixos basta adicionar `prefix(nome)` após a importação do `@eduzz/ui-tailwind-theme`

```
@import '@eduzz/ui-tailwind-theme' prefix(name);
```


## Customização
Todos os tokens são configuráveis através do `@theme` então caso queira substituir uma cor basta apenas sobrescrever:

```css
@import "@eduzz/ui-tailwind-theme";

@theme {
  --color-primary-500: #ff0000;
}
```

## Tokens

A maior parte das tokens seguem os padrões do tailwind, abaixo é listado as cores que foram adicionadas para seguir os padrões Eduzz. Onde o `*` pode ser trocado pelos [utilities do tailwind](https://tailwindcss.com/docs/colors#using-color-utilities) como `bg-*`, `text-*`, etc 

### Base

| Classe                | Light                                        | Dark                                         |
|-----------------------|----------------------------------------------|----------------------------------------------|
| `*-surface-subtle`    | <input type="color" value="#fcfcfc"> #fcfcfc | <input type="color" value="#1f1f1f"> #1f1f1f |
| `*-surface-default`   | <input type="color" value="#ffffff"> #ffffff | <input type="color" value="#141414"> #141414 |
| `*-surface-disabled`  | <input type="color" value="#bebebe"> #bebebe | <input type="color" value="#424242"> #424242 |
| `*-outline-default`   | <input type="color" value="#e4e4e7"> #e4e4e7 | <input type="color" value="#585858"> #585858 |
| `*-outline-disabled`  | <input type="color" value="#dbdbdb"> #dbdbdb | <input type="color" value="#424242"> #424242 |
| `*-outline-darker`    | <input type="color" value="#040404"> #040404 | <input type="color" value="#dbdbdb"> #dbdbdb |
| `*-content-title`     | <input type="color" value="#000000"> #000000 | <input type="color" value="#ffffff"> #ffffff |
| `*-content-body`      | <input type="color" value="#3f3f46"> #3f3f46 | <input type="color" value="#fcfcfc"> #fcfcfc |
| `*-content-subtitle`  | <input type="color" value="#6b7280"> #6b7280 | <input type="color" value="#f2f2f2"> #f2f2f2 |
| `*-content-caption`   | <input type="color" value="#1f1f1f"> #1f1f1f | <input type="color" value="#8c8c8c"> #8c8c8c |
| `*-content-negative`  | <input type="color" value="#ffffff"> #ffffff | <input type="color" value="#000000"> #000000 |
| `*-content-disabled`  | <input type="color" value="#a0a0a9"> #a0a0a9 | <input type="color" value="#424242"> #424242 |


### Primary

É recomendada a utilização `*-primary-500` como cor primária no light mode

| Classe          | Cor                                          |
|-----------------|----------------------------------------------|
| `*-primary-50` | <input type="color" value="#D1DBEC"> #D1DBEC |
| `*-primary-100` | <input type="color" value="#8FA7D1"> #8FA7D1 |
| `*-primary-200` | <input type="color" value="#4D72B6"> #4D72B6 |
| `*-primary-300` | <input type="color" value="#1B4BA2"> #1B4BA2 |
| `*-primary-400` | <input type="color" value="#163E91"> #163E91 |
| `*-primary-500` | <input type="color" value="#0D2772"> #0D2772 |
| `*-primary-600` | <input type="color" value="#0E2568"> #0E2568 |
| `*-primary-700` | <input type="color" value="#0F235C"> #0F235C |
| `*-primary-800` | <input type="color" value="#102050"> #102050 |
| `*-primary-900` | <input type="color" value="#111F49"> #111F49 |
| `*-primary-950` | <input type="color" value="#0A132C"> #0A132C |


### Secondary

É recomendada a utilização `*-secondary-600` como cor primária no dark mode

| Classe            | Cor                                          |
|-------------------|----------------------------------------------|
| `*-secondary-50` | <input type="color" value="#FFF8E5"> #FFF8E5 |
| `*-secondary-100` | <input type="color" value="#FFF1CC"> #FFF1CC |
| `*-secondary-200` | <input type="color" value="#FFE499"> #FFE499 |
| `*-secondary-300` | <input type="color" value="#FFD666"> #FFD666 |
| `*-secondary-400` | <input type="color" value="#FFDC52"> #FFDC52 |
| `*-secondary-500` | <input type="color" value="#FFCD29"> #FFCD29 |
| `*-secondary-600` | <input type="color" value="#FFBC00"> #FFBC00 |
| `*-secondary-700` | <input type="color" value="#D99800"> #D99800 |
| `*-secondary-800` | <input type="color" value="#B37700"> #B37700 |
| `*-secondary-900` | <input type="color" value="#8C5900"> #8C5900 |
| `*-secondary-950` | <input type="color" value="#332500"> #332500 |

### Belts

| Classe                     | Cor                                          |
|----------------------------|----------------------------------------------|
| `*--belt-white:`           | <input type="color" value="#D9D9D9"> #D9D9D9 |
| `*--belt-red`              | <input type="color" value="#FF4141"> #FF4141 |
| `*--belt-orange`           | <input type="color" value="#FFA439"> #FFA439 |
| `*--belt-green`            | <input type="color" value="#33DB7A"> #33DB7A |
| `*--belt-black`            | <input type="color" value="#000000"> #000000 |
| `*--belt-golden`           | <input type="color" value="#FFCE00"> #FFCE00 |
| `*--belt-white-foreground` | <input type="color" value="#4D4D4D"> #4D4D4D |
| `*--belt-red-foreground`   | <input type="color" value="#4D1414"> #4D1414 |
| `*--belt-orange-foreground`| <input type="color" value="#4D3111"> #4D3111 |
| `*--belt-green-foreground` | <input type="color" value="#124D2B"> #124D2B |
| `*--belt-black-foreground` | <input type="color" value="#FFFFFF"> #FFFFFF |
| `*--belt-golden-foreground`| <input type="color" value="#4D3E00"> #4D3E00 |