Pular para conteúdo

Aula 20 - Projeto Capstone: Design System Integrado Autônomo 🏆

Objetivo Pedagógico

Objetivo: Desenvolvimento do projeto prático integrador consolidando tokens W3C, biblioteca de componentes atômicos acessíveis, documentação interativa e fluxo de publicação.

📑 1. Fundamentos Teóricos & Análise Técnica

O Projeto Capstone desta disciplina consolida a especificação e construção de um Design System Completo e Autônomo. O objetivo é simular as demandas reais de uma organização de engenharia de software que precisa fornecer componentes padronizados para múltiplas equipes de produto.

O projeto exige a integração de: 1. Dicionário de Tokens: Definição em JSON estruturado com tokens de cores, tipografia, grid e espaçamento. 2. Biblioteca de Componentes: Implementação de botões, inputs, cards e janelas modais construídos estritamente com HTML5 semântico e CSS orientado a variáveis. 3. Página de Documentação Viva: Criação de um showcase de componentes com visualização interativa, guias de acessibilidade e snippets de código prontos para consumo. 4. Validação de Conformidade: Relatório técnico atestando pontuação 100 no Lighthouse Accessibility e conformidade total com WCAG 2.2 Nível AA.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph LR
    Tokens["Tokens JSON<br>(W3C Spec)"] --> Compiler["Compilador / Build<br>(Style Dictionary)"]
    Compiler --> CSSVars["CSS Variables<br>(tokens.css)"]
    CSSVars --> Components["Biblioteca de Componentes<br>(HTML5 + CSS3)"]
    Components --> Showcase["Documentação Viva<br>(Showcase Interativo)"]
    Showcase --> Auditoria["Auditoria Automatizada<br>(Axe-Core / WCAG AA)"]
    style Tokens fill:#e1f5fe,stroke:#01579b
    style Components fill:#fff3e0,stroke:#e65100
    style Auditoria fill:#e8f5e9,stroke:#2e7d32

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Modularidade Absoluta: Componentes autocontidos que podem ser importados individualmente sem poluir o escopo global. - Resiliência de Layout: Comportamento testado em resoluções extremas (320px em smartphones antigos até 4K em monitores ultrawide). - Documentação Exaustiva: Cada componente deve demonstrar seus estados: default, hover, focus, disabled e loading. - Critérios Rigorosos de Aceitação: Zero erros no console, zero falhas de contraste de texto e navegação 100% autônoma por teclado.

🛠️ 2. Implementação Prática em Design Systems e Arquitetura UI

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// design-system-capstone.css (Exemplo Integrado da Arquitetura)
:root {
  --ds-color-primary: #2563eb;
  --ds-color-text-main: #0f172a;
  --ds-color-bg-card: #ffffff;
  --ds-space-md: 16px;
  --ds-space-lg: 24px;
  --ds-radius-base: 8px;
}

.ds-card {
  background-color: var(--ds-color-bg-card);
  border-radius: var(--ds-radius-base);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: var(--ds-space-lg);
  border: 1px solid #e2e8f0;
}

.ds-card__title {
  color: var(--ds-color-text-main);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--ds-space-md);
}

💡 Análise Passo a Passo do Código

  1. Camada de Abstração: Todas as propriedades visuais dependem de --ds-*, facilitando a implementação de Dark Mode.
  2. Convenção BEM: Uso da metodologia Block-Element-Modifier (.ds-card, .ds-card__title) para prevenir vazamentos de escopo.
  3. Escalabilidade da Aplicação: Novos componentes herdam imediatamente os valores da escala sem necessidade de ajustes manuais.

🎯 3. Próximos Passos & Sequência Didática