Redesign das páginas internas no novo design system (AAA) (#2)
* feat(design): redesign das páginas internas no novo design system Padroniza todas as páginas e componentes internos nos tokens e primitivos de app/globals.css, com contraste AAA (7:1) nos dois temas e alvos de toque de 44px. - Páginas reescritas: glossário, séries, série, seletor, comparador, diagnóstico, catálogo, component registry, frameworks, framework, sobre e a nova 404. - Componentes: PageHero e SectionHead novos; BoardCard, CodeExample, PinRestrictions, SeriesTabMenu e ConnectionsDiagram refeitos, com abas e diálogo acessíveis. - Remove emojis, cores avulsas por série, caixa alta com tracking, texto menor que 12px e os pares slate-*/dark:*. - Comparador: "mostrar só as diferenças" e leitura de ?chips=. - Corrige overflow em 320/390px e ajusta accent/copper do tema claro para fechar 7:1. - scripts/auditar-temas.mjs passa a travar paleta crua, dark:, texto pequeno, emoji e contraste dos tokens. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016W1xmizFcmXLrmabSvfSuc * ci: roda lint, auditorias de design e build em cada PR Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016W1xmizFcmXLrmabSvfSuc --------- Co-authored-by: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Lucas Rayan GuerraandClaude Sonnet 5.5 authored and GitHub committed
1 parent
4f27f5858b
commit
bc9ae5c036
34 files changed
+4911
-6874
No files matched your search
@@ -23,7 +23,7 @@ const GRUPOS = [
|
||||
id: "entrada",
|
||||
titulo: "Somente entrada",
|
||||
icone: ArrowDownToLine,
|
||||
cor: "text-sky-500",
|
||||
cor: "text-accent",
|
||||
explicacao:
|
||||
"Aceitam apenas leitura. Não podem ser configurados como saída e não possuem resistores de pull-up ou pull-down internos. Se precisar de um, coloque no circuito.",
|
||||
combina: (avisos) => /apenas de entrada|input only/.test(avisos),
|
||||
@@ -32,7 +32,7 @@ const GRUPOS = [
|
||||
id: "flash",
|
||||
titulo: "Ligados à memória flash/PSRAM",
|
||||
icone: HardDrive,
|
||||
cor: "text-rose-500",
|
||||
cor: "text-copper",
|
||||
explicacao:
|
||||
"Já estão conectados à memória de onde o firmware é lido. Usá-los como GPIO comum normalmente trava o chip ou corrompe a execução. Em módulos com flash interna eles nem chegam ao encapsulamento.",
|
||||
combina: (avisos) =>
|
||||
@@ -43,7 +43,7 @@ const GRUPOS = [
|
||||
id: "strapping",
|
||||
titulo: "Strapping (modo de boot)",
|
||||
icone: Power,
|
||||
cor: "text-amber-500",
|
||||
cor: "text-gold",
|
||||
explicacao:
|
||||
"O chip lê o nível destes pinos no instante do reset para decidir como inicializar. Dá para usá-los depois do boot, mas o circuito externo não pode forçar o nível errado durante o reset, senão a placa não inicia ou entra em modo de gravação sozinha.",
|
||||
combina: (avisos, cats) =>
|
||||
@@ -54,7 +54,7 @@ const GRUPOS = [
|
||||
id: "debug",
|
||||
titulo: "Gravação e depuração",
|
||||
icone: Bug,
|
||||
cor: "text-violet-500",
|
||||
cor: "text-accent",
|
||||
explicacao:
|
||||
"São a UART de gravação e as linhas de JTAG. Continuam utilizáveis como GPIO, mas ao reaproveitá-los você perde o caminho de gravar e depurar a placa sem desconectar o que estiver ali.",
|
||||
combina: (avisos, cats) => /debugging/.test(avisos) || cats.includes("JTAG"),
|
||||
@@ -63,7 +63,7 @@ const GRUPOS = [
|
||||
id: "usb",
|
||||
titulo: "USB nativo",
|
||||
icone: Usb,
|
||||
cor: "text-teal-500",
|
||||
cor: "text-accent",
|
||||
explicacao:
|
||||
"Saem de fábrica ligados ao USB Serial/JTAG interno. Para usá-los como GPIO é preciso desativar essa função, o que também remove a gravação por USB direto.",
|
||||
combina: (avisos) => /usb serial\/jtag|usb_d[+-]/.test(avisos),
|
||||
@@ -72,7 +72,7 @@ const GRUPOS = [
|
||||
id: "eletrico",
|
||||
titulo: "Não podem ficar flutuando",
|
||||
icone: Zap,
|
||||
cor: "text-orange-500",
|
||||
cor: "text-gold",
|
||||
explicacao:
|
||||
"Precisam de nível definido por hardware: pull-up externo ou circuito RC de atraso. Deixá-los soltos causa reset aleatório ou inicialização instável.",
|
||||
combina: (avisos) => /flutuando/.test(avisos),
|
||||
@@ -101,7 +101,7 @@ function derivarGrupos(conexoes) {
|
||||
}).filter((g) => g.pinos.length > 0);
|
||||
}
|
||||
|
||||
export default function PinRestrictions({ conexoes, serieKey, cor }) {
|
||||
export default function PinRestrictions({ conexoes, serieKey }) {
|
||||
if (!conexoes?.length) return null;
|
||||
|
||||
const grupos = derivarGrupos(conexoes);
|
||||
@@ -110,69 +110,54 @@ export default function PinRestrictions({ conexoes, serieKey, cor }) {
|
||||
const totalPinos = new Set(grupos.flatMap((g) => g.pinos)).size;
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl p-6 md:p-8 border border-slate-300 dark:border-slate-800/80 shadow-2xl mb-12">
|
||||
<h2 className="text-xl font-bold text-slate-850 dark:text-slate-100 mb-3 pb-3 border-b border-slate-200 dark:border-slate-800/65 flex items-center gap-3">
|
||||
<AlertTriangle className="w-5 h-5" style={{ color: cor }} />
|
||||
<span>Pinos com Restrição de Uso</span>
|
||||
<section id="restricoes" aria-labelledby="restricoes-titulo" className="card mt-5 scroll-mt-28 p-5 sm:p-7">
|
||||
<h2 id="restricoes-titulo" className="flex items-center gap-3 font-display text-xl font-semibold tracking-[-0.03em] text-ink">
|
||||
<span className="grid h-9 w-9 place-items-center rounded-full bg-gold-soft text-gold">
|
||||
<AlertTriangle className="h-4 w-4" aria-hidden="true" />
|
||||
</span>
|
||||
Pinos com restrição de uso
|
||||
</h2>
|
||||
|
||||
<p className="text-sm text-slate-650 dark:text-slate-350 leading-relaxed mb-8">
|
||||
<p className="mt-3 max-w-3xl text-sm leading-relaxed text-muted">
|
||||
Nem todo pino do {serieKey} está livre para uso geral. {totalPinos} deles têm alguma
|
||||
condição: já estão ocupados por memória, são lidos durante o boot ou só funcionam
|
||||
como entrada. Vale conferir antes de fechar o esquemático.
|
||||
</p>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-5">
|
||||
<div className="mt-6 grid gap-4 md:grid-cols-2">
|
||||
{grupos.map(({ id, titulo, icone: Icone, cor: corIcone, explicacao, pinos }) => (
|
||||
<div
|
||||
key={id}
|
||||
className="bg-slate-50 dark:bg-slate-950/40 rounded-2xl p-5 border border-slate-200 dark:border-slate-800/60"
|
||||
>
|
||||
<div className="flex items-center gap-2.5 mb-3">
|
||||
<Icone className={`w-4 h-4 shrink-0 ${corIcone}`} />
|
||||
<h3 className="text-sm font-bold text-slate-800 dark:text-slate-200">{titulo}</h3>
|
||||
<span className="ml-auto text-[10px] font-bold text-slate-500 dark:text-slate-400 tabular">
|
||||
<div key={id} className="tile">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Icone className={`h-4 w-4 shrink-0 ${corIcone}`} aria-hidden="true" />
|
||||
<h3 className="text-sm font-semibold text-ink">{titulo}</h3>
|
||||
<span className="ml-auto text-xs text-muted tabular-nums">
|
||||
{pinos.length} {pinos.length === 1 ? "pino" : "pinos"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-1.5 mb-3.5">
|
||||
<ul className="mt-3 flex flex-wrap gap-1.5">
|
||||
{pinos.map((p) => (
|
||||
<span
|
||||
key={p}
|
||||
className="px-2 py-1 rounded-lg text-[10px] font-bold font-mono"
|
||||
style={{
|
||||
backgroundColor: `${cor}18`,
|
||||
color: cor,
|
||||
border: `1px solid ${cor}30`,
|
||||
}}
|
||||
>
|
||||
<li key={p} className="rounded-md border border-line bg-surface px-2 py-1 font-mono text-xs text-ink-soft">
|
||||
{p}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
|
||||
{explicacao}
|
||||
</p>
|
||||
<p className="mt-3 text-sm leading-relaxed text-muted">{explicacao}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-7 pt-6 border-t border-slate-200 dark:border-slate-800/65 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 leading-relaxed max-w-xl">
|
||||
<div className="mt-6 flex flex-col justify-between gap-4 border-t border-line pt-5 sm:flex-row sm:items-center">
|
||||
<p className="max-w-xl text-sm leading-relaxed text-muted">
|
||||
Estes grupos vêm dos mesmos dados do diagrama de conexões. Lá você vê pino a pino
|
||||
todas as funções, o domínio de alimentação e os avisos completos de cada um.
|
||||
todas as funções, o domínio de alimentação e os avisos completos.
|
||||
</p>
|
||||
<Link
|
||||
href="#connections"
|
||||
className="inline-flex items-center justify-center gap-2 shrink-0 px-5 py-3 rounded-xl font-bold text-xs uppercase tracking-wider text-white transition-opacity hover:opacity-90"
|
||||
style={{ backgroundColor: cor }}
|
||||
>
|
||||
<span>Abrir diagrama de pinos</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
<Link href="#connections" className="btn btn-ghost shrink-0">
|
||||
Abrir diagrama de pinos
|
||||
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user