Eduzz UI: Tailwind Theme

Aplica os Tokens de UI da Eduzz no Tailwind.

Instalação

pnpm add @eduzz/ui-tailwind-theme

Importação

No arquivo css principal do seu projeto adicione o código abaixo na primeira linha:

@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 =]

Sem Preflight

Se o Preflight do Tailwind conflitar com estilos base existentes, use a entrada sem Preflight:

@import "@eduzz/ui-tailwind-theme/no-preflight.css";

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:

@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

Cores que mudam de acordo com o tema (light e dark)

| Classe | Descrição | |-----------------------|----------------------------------------------| | *-primary | Cor primária | | *-surface-default | Cor de fundo padrão | | *-surface-subtle | Cor de fundo dos containers | | *-surface-disabled | Cor de fundo desabilitado | | *-outline-default | Cor de borda padrão | | *-outline-disabled | Cor de borda sútil | | *-outline-darker | Cor de borda mais escura | | *-content-title | Cor de texto principal | | *-content-body | Cor de texto secundário | | *-content-subtitle | Cor de texto terciário | | *-content-caption | Cor de texto quaternário | | *-content-negative | Cor de texto negativo | | *-content-disabled | Cor de texto desabilitado |

Utilidades

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

| Classe | Descrição | |-----------------|----------------------------------------------| | rounded-default | Raio de borda padrão | | shadow-xs | Sombra sútil | | shadow-sm | Sombra média | | shadow-md | Sombra padrão | | *-primary-400 | #163E91 | | *-primary-500 | #0D2772 | | *-primary-600 | #0E2568 | | *-primary-700 | #0F235C | | *-primary-800 | #102050 | | *-primary-900 | #111F49 | | *-primary-950 | #0A132C |

Belts

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