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

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

Base

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

Primary

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

Secondary

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

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 |