@eduzz/ui-tailwind-theme NPM

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

@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