feat(theme): brutal treatment system-wide#3
Merged
Conversation
Refatora Login.tsx para layout brutal vertical mobile-first: - Login no topo (Acessar terminal) - Guild Console abaixo como <details> nativo, iniciando colapsado - IBM Plex Mono unica, bordas 4px (3px mobile), zero shadow, 0 radius - Paleta TaskForge preservada (--tf-*) via novos tokens --bx-line/--bx-line-w - Layer brutal escopado .bx-/.lg-/.gc- (anti-frankenstein: zero hardcode, sem duplicacao das classes .tf-*, sem inline styles, sem !important) Acessibilidade (frontend-reviewer agent) — corrigido: - aria-describedby liga inputs aos erros inline - Espaco antes do <Link> "Criar conta" para screen readers - focus-visible com outline 2px gold + offset 2px em inputs e botao - .lg-meta e .gc-tagline trocadas para tf-text-main (contraste >= 7:1) - @Keyframes movido para fora do @layer (compat cross-browser) - @import de fontes movido para o topo do CSS (warning PostCSS resolvido) Mantidos intactos: - Tokens --tf-* (Dashboard/Tasks/Register dependem) - Logica do Login (zod, react-hook-form, useAuthStore, navigate) - frontend/vite.config.ts (Eruda) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ition Single-point change in index.css que propaga o tratamento brutal de headline para todas as 38+ ocorrencias de .tf-title em 7 arquivos: - pages/Login, Register, Dashboard, Tasks, Achievements, Leaderboard - components/character/CharacterEditor, components/layout/Layout Antes (pixel arcade vibe): font-family: 'Pixelify Sans' letter-spacing: 0.04em Agora (brutal): font-family: var(--bx-font-mono) /* IBM Plex Mono */ font-weight: 700 text-transform: uppercase letter-spacing: -0.01em Sem mexer em JSX (anti-frankenstein: editar o arquivo certo, propagar via token unico). Tracking maior em eyebrows continua via Tailwind utility tracking-[0.18em] aplicado ja no JSX. Bonus: removida a fonte Pixelify Sans do @import (nao mais usada em nenhum lugar do codebase apos esta mudanca). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Single-point CSS refactor em frontend/src/index.css — redefine TODAS as primitivas .tf-* (panel, panel-inset, frame, btn, btn-primary/secondary/ghost, input, label, badge, progress, progress-bar, sidebar-link, sidebar-link-active, screen, muted) com tratamento brutal. Propaga automaticamente para as 145+ ocorrencias em 7 arquivos de pages/componentes. Tratamento brutal aplicado: - Borda 4px (3px mobile via --bx-line-w) solida em --tf-text-main - border-radius: 0 em todas as primitivas (badge era 999px, progress era 999px) - box-shadow: none (removidas as sombras 4px 4px 0 e gradient shadows) - Backgrounds solidos (removidos linear-gradients) - Zero transform animations (hover translate removido, active translate removido) - :hover via inversao de cor (bg ↔ text) - Body bg: solido + grid pattern (removido overlay de gradient) Fontes: - body e .tf-screen usam var(--bx-font-mono) (IBM Plex Mono) - .tf-btn, .tf-input, .tf-label, .tf-badge, .tf-sidebar-link, .tf-progress todos com font-family mono Acessibilidade (frontend-reviewer agent pos-refactor): - .tf-input/:lg-input focus-visible com outline 2px primary + offset 2px - .gc-summary :focus-visible adicionado (keyboard nav do collapsible) - .tf-btn/.tf-sidebar-link :focus-visible idem - Placeholders trocados para --tf-text-muted (contraste 6.5:1, vs 4.4:1 falhando) - Removido color override no focus dos inputs (evita mudar cor do texto ja digitado) Anti-frankenstein: - Zero hardcoded #hex nas novas definicoes (todas via var) - Zero !important - Zero duplicacao de classes - Tokens --tf-* preservados intactos (palette nao mudou) - Edit unica propaga — nenhum JSX tocado Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
frontend/src/index.cssque redefine TODAS as primitivas.tf-*(panel, btn, input, frame, badge, progress, sidebar-link, etc.) com tratamento brutal: bordas 4px, zero radius, zero shadow, zero gradient, zero transform animation--tf-*preservada intacta; apenas o tratamento visual mudou:focus-visiblecom outline 2px primary em todos interativos; contraste de placeholder corrigido (6.5:1 vs 4.4:1 antes)Contexto
Continuacao de #1. Login ja havia sido refatorado no brutal (commits d1275eb + ed6b7dd). Esta PR expande o mesmo tratamento para o sistema inteiro via redefinicao das primitivas CSS.
Anti-Frankenstein (governanca CSS)
var(--tf-*)!importantReview passada
Agent
frontend-reviewer(via agnostic-core) apontou 3 ALTAs — todas corrigidas neste commit:--tf-text-dimem--tf-bg-insetcontraste 4.4:1 (fail AA) → trocado para--tf-text-muted(6.5:1)color: var(--tf-primary)no focus dos inputs mudava cor do texto ja digitado → removido.gc-summarynao tinha:focus-visible→ adicionadoTest plan
npm run dev— abrir http://localhost:5173/login — confirmar Login brutal OKnpm run build— build passa sem erroEscopo NAO incluido
rounded-lgsobrepondoborder-radius: 0), ajustar caso a caso em PR futura.🤖 Generated with Claude Code