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 importar 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 como bg-, text-*, etc

$3

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




$3

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

| Classe | Cor |
|-----------------|----------------------------------------------|
| *-primary-50 | #D1DBEC |
| *-primary-100 | #8FA7D1 |
| *-primary-200 | #4D72B6 |
| *-primary-300 | #1B4BA2 |
| *-primary-400 | #163E91 |
| *-primary-500 | #0D2772 |
| *-primary-600 | #0E2568 |
| *-primary-700 | #0F235C |
| *-primary-800 | #102050 |
| *-primary-900 | #111F49 |
| *-primary-950 | #0A132C |




$3

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

| Classe | Cor |
|-------------------|----------------------------------------------|
| *-secondary-50 | #FFF8E5 |
| *-secondary-100 | #FFF1CC |
| *-secondary-200 | #FFE499 |
| *-secondary-300 | #FFD666 |
| *-secondary-400 | #FFDC52 |
| *-secondary-500 | #FFCD29 |
| *-secondary-600 | #FFBC00 |
| *-secondary-700 | #D99800 |
| *-secondary-800 | #B37700 |
| *-secondary-900 | #8C5900 |
| *-secondary-950 | #332500 |

$3

| Classe | Cor |
|----------------------------|----------------------------------------------|
| *--belt-white: | #D9D9D9 |
| *--belt-red | #FF4141 |
| *--belt-orange | #FFA439 |
| *--belt-green | #33DB7A |
| *--belt-black | #000000 |
| *--belt-golden | #FFCE00 |
| *--belt-white-foreground | #4D4D4D |
| *--belt-red-foreground | #4D1414 |
| *--belt-orange-foreground| #4D3111 |
| *--belt-green-foreground | #124D2B |
| *--belt-black-foreground | #FFFFFF |
| *--belt-golden-foreground`| #4D3E00 |