@xjur-ui/styles

Biblioteca de estilos CSS para o XJur Design System, baseada no TailwindCSS 4.x com tokens de design personalizados e sistema de temas.

Instalação

npm install @xjur-ui/styles

Dependências

Este pacote inclui o TailwindCSS CLI integrado, não sendo necessário instalar separadamente.

Uso

Estilos Base

Importe os estilos compilados na sua aplicação:

@import '@xjur-ui/styles';

Ou via JavaScript/TypeScript:

import '@xjur-ui/styles'

Sistema de Temas

Para usar apenas os tokens de tema sem todos os estilos do Tailwind:

@import '@xjur-ui/styles/theme.css';

Ou via JavaScript:

import '@xjur-ui/styles/theme.css'

Configuração Programática de Tema

Para projetos que precisam dos tokens como JavaScript/JSON:

import { theme } from '@xjur-ui/styles/theme'

// Uso dos tokens
const primaryColor = theme.colors.primary['500']
const spacing = theme.spacing['4']

Estrutura dos Arquivos

| Arquivo | Descrição | Tamanho | |---------|-----------|---------| | index.css | Estilos completos compilados | ~30KB | | theme.css | Apenas tokens de design | ~5KB | | theme.js | Tokens como JavaScript object | ~2KB |

Customização

Extensão do Tema

Para estender ou sobrescrever tokens:

:root {
  /* Sobrescrever cor primária */
  --color-primary-500: #6366f1;
  
  /* Adicionar nova cor */
  --color-brand: #8b5cf6;
}

Desenvolvimento

# Instalar dependências
npm install

# Modo desenvolvimento (watch)
npm run dev

# Build de produção (minificado)
npm run build

Performance

• Build otimizado: CSS minificado para produção
• Purging automático: Remove estilos não utilizados
• Compressão gzip: ~8KB gzipped para o bundle completo
• Modularidade: Importe apenas os tokens necessários

Licença

Licenciado sob a Licença MIT.