fix: corrige contraste AA do laranja de acento no tema claro
- --cor-acento-contraste passa de branco pra #17171a (texto escuro sobre fundo laranja em botoes, unificando com o tema escuro) - contraste ~7:1 - novo token --cor-acento-texto (#B3510C no tema claro, #F5821F no tema escuro) usado para laranja como cor de TEXTO sobre fundo claro (link padrao, badge-acento, item ativo da sidebar, chave gerada em gerador_chave.html) - contraste 5.12:1 contra branco, acima do minimo AA de 4.5:1 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
b5098a3aed
commit
9012795973
@@ -8,8 +8,9 @@
|
||||
--cor-texto-secundario: #6b6b74;
|
||||
--cor-borda: #e4e4e9;
|
||||
--cor-acento: #F5821F;
|
||||
--cor-acento-contraste: #ffffff;
|
||||
--cor-acento-contraste: #17171a;
|
||||
--cor-acento-suave: #fff1e4;
|
||||
--cor-acento-texto: #B3510C;
|
||||
--cor-sucesso: #15803d;
|
||||
--cor-sucesso-fundo: #dcfce7;
|
||||
--cor-perigo: #b91c1c;
|
||||
@@ -30,6 +31,7 @@
|
||||
--cor-borda: #2e2e33;
|
||||
--cor-acento-contraste: #17171a;
|
||||
--cor-acento-suave: rgba(245,130,31,0.16);
|
||||
--cor-acento-texto: #F5821F;
|
||||
--cor-sucesso: #4ade80;
|
||||
--cor-sucesso-fundo: rgba(74,222,128,0.14);
|
||||
--cor-perigo: #f87171;
|
||||
@@ -49,6 +51,7 @@
|
||||
--cor-borda: #2e2e33;
|
||||
--cor-acento-contraste: #17171a;
|
||||
--cor-acento-suave: rgba(245,130,31,0.16);
|
||||
--cor-acento-texto: #F5821F;
|
||||
--cor-sucesso: #4ade80;
|
||||
--cor-sucesso-fundo: rgba(74,222,128,0.14);
|
||||
--cor-perigo: #f87171;
|
||||
@@ -72,7 +75,7 @@ h1, h2, h3 { font-weight: 700; line-height: 1.25; }
|
||||
h1 { font-size: 1.5rem; margin: 0 0 16px; }
|
||||
h2 { font-size: 1.15rem; margin: 28px 0 12px; }
|
||||
|
||||
a { color: var(--cor-acento); }
|
||||
a { color: var(--cor-acento-texto); }
|
||||
|
||||
/* ---------- layout raiz: sidebar + área de conteúdo ---------- */
|
||||
|
||||
@@ -106,7 +109,7 @@ a { color: var(--cor-acento); }
|
||||
transition: background var(--transicao), color var(--transicao);
|
||||
}
|
||||
.sidebar-nav a:hover { background: var(--cor-superficie-alt); }
|
||||
.sidebar-nav a.ativo { background: var(--cor-acento-suave); color: var(--cor-acento); font-weight: 600; }
|
||||
.sidebar-nav a.ativo { background: var(--cor-acento-suave); color: var(--cor-acento-texto); font-weight: 600; }
|
||||
.sidebar-nav svg { flex-shrink: 0; width: 20px; height: 20px; }
|
||||
.sidebar-nav span { overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
@@ -214,7 +217,7 @@ a.botao:hover { border-color: var(--cor-acento); color: var(--cor-acento); }
|
||||
.mensagem.warning { background: var(--cor-aviso-fundo); color: var(--cor-aviso); }
|
||||
|
||||
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
|
||||
.badge-acento { background: var(--cor-acento-suave); color: var(--cor-acento); }
|
||||
.badge-acento { background: var(--cor-acento-suave); color: var(--cor-acento-texto); }
|
||||
.badge-neutro { background: var(--cor-superficie-alt); color: var(--cor-texto-secundario); }
|
||||
.badge-sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<button id="gerar">Gerar chave</button>
|
||||
|
||||
<div id="erro" style="color:var(--cor-perigo);margin-top:14px;display:none;"></div>
|
||||
<div id="resultado" style="margin-top:20px;padding:14px;border-radius:8px;background:var(--cor-superficie-alt);border:1px solid var(--cor-borda);border-left:3px solid var(--cor-acento);word-break:break-all;font-family:'Courier New',monospace;color:var(--cor-acento);display:none;"></div>
|
||||
<div id="resultado" style="margin-top:20px;padding:14px;border-radius:8px;background:var(--cor-superficie-alt);border:1px solid var(--cor-borda);border-left:3px solid var(--cor-acento);word-break:break-all;font-family:'Courier New',monospace;color:var(--cor-acento-texto);display:none;"></div>
|
||||
<button id="copiar" style="display:none;background:transparent;border:1px solid var(--cor-borda);color:var(--cor-texto-secundario);width:auto;padding:6px 10px;">Copiar</button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user