SWCore / CSS

CSS

Todos os componentes de interface do SWCore, organizados por categoria e ligados diretamente à documentação.

Base do SWCore

01 - Tema e tokens A base de tudo: variáveis CSS que definem cor, espaçamento e tipografia — mude aqui, o framework inteiro segue.

Tipografia

02 - Tipografia Escala de texto pronta, do rótulo minúsculo ao título — sem tocar em font-size na mão.

Cor

03 - Cores semânticas Cor que muda sozinha no dia/noite — --sw-pri, --sw-suc, --sw-err… é o que os componentes usam. 04 - Paleta estendida 30 famílias × 16 tons cada — uma cor ESPECÍFICA que não muda com o tema, pra quando você precisa exatamente daquele tom.

Ícones

05 - Ícones Webfont própria com 1.031 ícones — contorno, sólido e marcas — sem requisição externa nenhuma.

Espaçamento, bordas e sombras

06 - Espaçamento Padding, margin e gap numa escala única — pp · p · m · g · gg · xg · xxg. 07 - Bordas Borda e raio de canto prontos — sólida, tracejada, pontilhada, só de um lado, cantos arredondados até pílula. 08 - Sombras Elevação em camadas — do sutil ao flutuante —, glow colorido, sombra interna e uma galeria técnica de 46 sombras.

Layout

09 - Breakpoints Um sufixo só, o mesmo em grid, coluna e container — mobile-first de verdade. 10 - Container Largura máxima centralizada com respiro lateral — o invólucro de toda página, na mesma escala pp-xxg do espaçamento. 11 - Grid CSS Grid de 12 colunas, mobile-first — N colunas iguais, proporção assimétrica, ou controle coluna a coluna por filho. 12 - Flex Flexbox declarado por classe — direção, quebra, alinhamento, e um item que estica sozinho. 13 - Posição Absoluto, fixo, sticky — e um selo no canto ou um overlay cobrindo o pai, prontos.

Utilitários de conteúdo

14 - Quebra de texto Truncar numa linha, parar numa linha exata, título sem palavra órfã — sem JS nenhum. 15 - Zoom Escala de imagem/elemento pronta — cresce suave no hover ou fixa num tamanho. 16 - Object-fit Como a imagem preenche a caixa (cover/contain) e qual parte fica visível — 9 posições. 17 - Proporção A caixa já nasce do tamanho certo — sem pulo de layout enquanto a imagem carrega. 18 - Filtros P&B, sépia, blur, véu escuro pra texto sobre foto — filtros CSS prontos. 19 - Superfície Painel de vidro fosco (glassmorphism) e halo de brilho — só fazem sentido com conteúdo atrás. 20 - Interação Cursor de mão, bloquear seleção de texto, e um carrossel só de CSS (scroll-snap).

Componentes CSS

21 - Botão Botão com todas as variantes por valor de atributo — nunca por classe solta. 22 - Avatar Foto ou iniciais de usuário, redondo por padrão, com 4 tamanhos, cores em degradê, status ao vivo e pilha em leque. 23 - Badge Selo pequeno de contagem/status — número de notificações, "Novo", pontinho pulsando, ou flutuando no canto de outro elemento. 24 - Breadcrumb Trilha de navegação — Início / Categoria / Página atual. 25 - Card Contêiner de conteúdo com cabeçalho, corpo e rodapé opcionais — 11 tipos prontos (produto, perfil, estatística, depoimento, tarefa…), tudo por token no mesmo atributo. 26 - Divider Linha divisória — sólida, tracejada ou com um texto no meio ("ou continue com"). 27 - Timeline Linha do tempo — histórico de pedido, changelog, deploy — vertical ou horizontal, com 4 estados de marcador. 28 - Skeleton Placeholder animado (efeito "shimmer") enquanto o conteúdo real carrega — texto, avatar, imagem, botão e badge, prontos pra compor. 29 - Stepper Indicador de progresso em etapas — checkout, cadastro em várias telas, horizontal ou vertical. 30 - Segmentado Grupo de opções exclusivas lado a lado — alternativa compacta a um grupo de radio. 31 - Alerta (inline) Caixa de aviso fixa na página — não confundir com o toast flutuante (SW.Alert).