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

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>
  );
}