@eduzz/ui-tailwind-theme
Version:
Eduzz UI: Tailwind Theme
118 lines (90 loc) • 6.2 kB
Markdown
# Eduzz UI: Tailwind Theme
[](https://www.npmjs.com/package/@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 |