Eduzz UI: Antd Theme
Tema de antd ajustado aos padrões de UI da Eduzz.
Instalação
Para adicionar o tema no seu projeto, pasta rodar:
pnpm add @eduzz/ui-antd-theme
Utilização
import { ThemeProvider } from '@eduzz/ui-antd-theme';
function App() {
return (
<ThemeProvider>
<section>
<Typography.Title level={1}>H1 - Roboto</Typography.Title>
<Typography.Title level={2}>H2 - Roboto</Typography.Title>
<Typography.Title level={3}>H3 - Roboto</Typography.Title>
<Typography.Title level={4}>H4 - Roboto</Typography.Title>
<Typography.Title level={5}>H5 - Roboto</Typography.Title>
<Typography.Paragraph>Paragraph - Roboto</Typography.Paragraph>
</section>
</ThemeProvider>
);
}
export default App;
Parâmetros
Aceita todas as props do ConfigProvider do Antd e mais:
| Propriedade | Tipo | Obrigatório | Padrão | Descrição |
|---|---|---|---|---|
| mode | light|dark | false | 'light' | Modo do tema (dark/light), troca automaticamente com o ModeSwitcher do @eduzz/ui-layout |
| persistMode | boolean | false | false | Quando true, lê e grava o modo no cookie eduzz-theme (mesmo cookie do @eduzz/ui-layout). Também aceita ?eduzzMode=dark|light na URL. |
| enableAnimation | boolean | false | false | Habilita motion tokens do Antd e o efeito de wave/ripple nos botões (showInsetEffect por padrão). Override via prop wave. |
useTheme
Hook para ler e alterar o modo do tema (light / dark). Deve ser usado dentro de um ThemeProvider.
Se estiver utilizando @eduzz/ui-layout, utilize o useTheme do @eduzz/ui-layout.
import { useTheme } from '@eduzz/ui-antd-theme';
function ThemeToggle() {
const { theme, toggle, setTheme } = useTheme();
return (
<>
<button onClick={toggle}>Tema atual: {theme}</button>
<button onClick={() => setTheme('dark')}>Dark</button>
</>
);
}
Icon
Proxy sobre os ícones do lucide-react, acessados por nome (Icon.Home). Já inclui wrapper compatível com anticon do Antd e aceita todas as LucideProps (size, color, strokeWidth, etc.). className, style, ref e aria-label aplicam-se ao wrapper (span.anticon); props visuais do Lucide ficam no SVG.
import { Icon } from '@eduzz/ui-antd-theme';
import { Button } from 'antd';
function Example() {
return (
<Button icon={<Icon.Rocket />}>
Launch
</Button>
);
}
Animação nos botões
Com enableAnimation, o ThemeProvider aplica showInsetEffect app-wide no ConfigProvider. Para trocar o efeito, passe wave ou use showShakeEffect:
import { ThemeProvider, showShakeEffect } from '@eduzz/ui-antd-theme';
import { Button } from 'antd';
function App() {
return (
<ThemeProvider enableAnimation wave={{ showEffect: showShakeEffect }}>
<Button type="primary">Click me</Button>
</ThemeProvider>
);
}