/* Tema claro do webphone. * * COMO ISTO FUNCIONA, e por que é tão pouco código: o bundle nasce CLARO. Ele * usa as classes do Tailwind cruas — `bg-white`, `text-gray-800`, `bg-blue-500` * — e quem o deixa escuro é o `dark-theme.css`, mapeando cada classe do * Tailwind para um token nosso (`.bg-white` → `var(--bp-panel)`). * * Esse mapeamento já é semântico. Então o tema claro não precisa de regra * nenhuma nova: basta dar OUTROS VALORES aos mesmos tokens. `.bg-white` * continua lendo `--bp-panel`; em claro, `--bp-panel` é branco. * * O `dark-theme.css` NÃO FOI TOCADO. Este arquivo carrega depois dele e só * acrescenta: * 1. tokens novos que os nossos scripts injetados precisavam (eles tinham * cor fixa no meio do código); * 2. os valores claros de todos os tokens; * 3. os poucos pontos em que o escuro usou cor fixa em vez de token — sete * no total, contados a dedo. * * Sem o atributo `data-bp-tema="claro"` no , nada aqui se aplica e o * escuro segue exatamente como sempre foi. */ /* --- 1. tokens que faltavam ------------------------------------------------ * * Estes valores são EXATAMENTE as cores que estavam fixas dentro de * bravophone-input.js, bravophone-sem-ramal.js e bravophone-route-selector.js. * Declará-los aqui não muda um pixel do escuro — só dá nome ao que já existia, * para o claro ter onde pegar outro valor. */ :root { --bp-marca: #6c5ce7; /* o roxo da marca, no seletor de prefixo */ --bp-marca-clara: #8b7cf8; --bp-panel-alt2: #242b3d; /* fundo do campo de discagem */ --bp-border-forte: #3b4258; --bp-text-suave: #c8cee0; --bp-neutro: #4a5268; --bp-scrim: rgba(0, 0, 0, .5); /* véu atrás dos painéis */ --bp-scrim-medio: rgba(0, 0, 0, .6); --bp-scrim-forte: rgba(0, 0, 0, .65); --bp-alerta-bg: #241a20; /* o aviso de "nenhum ramal atribuído" */ --bp-alerta-borda: #5a2b33; --bp-alerta-texto: #ffb3b3; --bp-alerta-titulo: #ff8a8a; --bp-alerta-dim: #c9a6ab; --bp-aviso: #ffc107; /* avisos amarelos (microfone, etc.) */ --bp-aviso-suave: #ffd7a3; --bp-realce: rgba(255, 255, 255, .07); /* passar o mouse, no escuro clareia */ --bp-sombra-menu: rgba(0, 0, 0, .55); --bp-selecionado: #93c5fd; --bp-toast-aviso-bg: #241e16; --bp-toast-aviso-borda: #5a4526; --bp-toast-aviso-icone: #ffb454; --bp-toast-ok-bg: #16241d; --bp-toast-ok-borda: #26553d; --bp-toast-ok-texto: #a9e3c1; --bp-toast-ok-icone: #4ade80; --bp-alerta-pulso: #43222c; --bp-text-forte: #ffffff; /* texto sobre superficie de destaque */ --bp-ambar-texto: #f5b342; --bp-verde-zap: #25d366; /* o verde do WhatsApp, na origem da rota */ --bp-branco: #fff; --bp-preto-zap: #0b141a; } /* --- 2. os mesmos tokens, em claro ---------------------------------------- */ :root[data-bp-tema="claro"] { --bp-bg: #f4f6fa; --bp-panel: #ffffff; --bp-panel-alt: #eef1f7; --bp-panel-alt2: #e4e8f0; --bp-border: #d5dae5; --bp-border-soft: #e7eaf2; --bp-border-forte: #c3cad8; --bp-text: #161a24; --bp-text-dim: #5a6379; --bp-text-faint: #868fa3; --bp-text-suave: #3c4456; --bp-neutro: #9aa3b5; /* Verde mais fechado que o do escuro. O #22c55e sobre branco tem contraste baixo demais para texto; sobre fundo escuro ele funciona. */ --bp-accent: #16a34a; --bp-accent-dark: #15803d; --bp-danger: #dc2626; --bp-danger-soft: #fee2e2; --bp-blue: #2563eb; --bp-marca: #5b4bd6; --bp-marca-clara: #6c5ce7; /* O véu continua escuro: um véu claro sobre fundo claro não separa o painel do resto, que é a única função dele. */ --bp-scrim: rgba(15, 23, 42, .45); --bp-scrim-medio: rgba(15, 23, 42, .5); --bp-scrim-forte: rgba(15, 23, 42, .6); --bp-alerta-bg: #fef2f2; --bp-alerta-borda: #fecaca; --bp-alerta-texto: #b91c1c; --bp-alerta-titulo: #dc2626; --bp-alerta-dim: #9f5b5b; --bp-aviso: #b45309; --bp-aviso-suave: #92400e; /* Clarear com branco não existe sobre branco: no claro o realce escurece. */ --bp-realce: rgba(15, 23, 42, .06); --bp-sombra-menu: rgba(16, 24, 40, .16); --bp-selecionado: #1d4ed8; --bp-toast-aviso-bg: #fffbeb; --bp-toast-aviso-borda: #fde68a; --bp-toast-aviso-icone: #b45309; --bp-toast-ok-bg: #f0fdf4; --bp-toast-ok-borda: #bbf7d0; --bp-toast-ok-texto: #166534; --bp-toast-ok-icone: #16a34a; --bp-alerta-pulso: #fee2e2; --bp-text-forte: #161a24; --bp-ambar-texto: #b45309; } /* --- 3. os sete pontos em que o escuro usou cor fixa ----------------------- * * Só estes precisam de regra própria. Todo o resto do dark-theme.css já lê * token e virou claro sozinho ao trocar os valores acima. */ /* Superfícies de destaque: no escuro eram verde translúcido sobre preto. */ :root[data-bp-tema="claro"] #app .bg-blue-50, :root[data-bp-tema="claro"] #app .bg-green-50 { background-color: rgba(22, 163, 74, .10) !important; } :root[data-bp-tema="claro"] #app .focus\:ring-blue-100:focus { --tw-ring-color: rgba(22, 163, 74, .22) !important; } /* Aviso amarelo. */ :root[data-bp-tema="claro"] #app .bg-amber-50 { background-color: #fef3c7 !important; } :root[data-bp-tema="claro"] #app .text-amber-700 { color: #b45309 !important; } /* Sombras. O escuro precisou de sombra pesada para separar painel de fundo; sobre branco a mesma sombra vira uma mancha suja. */ :root[data-bp-tema="claro"] #app .shadow-sm { box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important; } :root[data-bp-tema="claro"] #app .shadow, :root[data-bp-tema="claro"] #app .shadow-lg, :root[data-bp-tema="claro"] #app .shadow-xl { box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 4px 12px rgba(16, 24, 40, .06) !important; } /* O cursor piscante depois do número discado. */ :root[data-bp-tema="claro"] #app .bp-cursor { background: var(--bp-blue) !important; } /* --- 4. o que o claro precisa e o escuro não pediu ------------------------- */ /* Verde vivo funciona como FUNDO de botão (texto branco por cima), mas como TEXTO sobre branco ele some. Estas são as regras em que o token é usado como cor de texto. */ :root[data-bp-tema="claro"] #app .text-blue-500, :root[data-bp-tema="claro"] #app .text-blue-600, :root[data-bp-tema="claro"] #app .text-green-500, :root[data-bp-tema="claro"] #app .text-green-600 { color: var(--bp-accent-dark) !important; } /* O bundle desenha o cabeçalho com gradiente e o escuro achatou tudo para uma cor só. Em claro o gradiente original volta a fazer sentido, mas partindo dos nossos tokens em vez das cores do Tailwind. */ :root[data-bp-tema="claro"] #app .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--bp-panel-alt), var(--bp-panel)) !important; } /* Barras de rolagem: o dark-theme já lê token, então isto é só o webkit, que precisa da regra repetida para pegar o valor novo. */ :root[data-bp-tema="claro"] ::-webkit-scrollbar-track { background: var(--bp-panel-alt); } :root[data-bp-tema="claro"] ::-webkit-scrollbar-thumb { background: var(--bp-border); } /* A cor de fundo da própria página, antes de o Vue montar. Sem isto a janela pisca escuro no primeiro quadro de cada abertura. */ :root[data-bp-tema="claro"], :root[data-bp-tema="claro"] body { background: var(--bp-bg) !important; color-scheme: light; } :root[data-bp-tema="escuro"] { color-scheme: dark; } /* --- 5. a tela de chamada -------------------------------------------------- * * O fundo dela vem de uma computed do bundle que devolve o gradiente pronto, * aplicado como estilo inline. Estilo inline vence classe, então aqui é * `!important`. * * NÃO MIRAMOS PELO ATRIBUTO `style`. Foi a primeira tentativa e estava errada: * o Vue aplica pela CSSOM, e o navegador RE-SERIALIZA a declaração — * `#12141c` vira `rgb(18, 20, 28)`, e o `180deg` do gradiente some. Um * seletor `[style*="#12141c"]` nunca casa no app de verdade. (Casou no meu * teste porque eu tinha escrito o atributo à mão no HTML, que é justamente o * caso que não acontece em produção.) * * `.call-screen` é classe estável e só existe uma. Basta ela. */ :root[data-bp-tema="claro"] #app .call-screen { background: linear-gradient(180deg, var(--bp-panel-alt) 0%, var(--bp-panel) 100%) !important; } /* Botões de ação em repouso (mudo, espera, transferir, teclado). * * Aqui o atributo é inevitável: o botão ativo e o inativo são o MESMO * elemento, com a mesma classe, e só a cor inline os distingue. Usamos a * forma serializada, que é o que existe no DOM — e ela é definida por * especificação (`rgb(` r `, ` g `, ` b `)`), não um capricho do Chrome. * A forma hexadecimal fica junto por segurança; não custa nada. * * O ativo é verde com texto branco e serve nos dois temas — fica de fora. */ :root[data-bp-tema="claro"] #app .call-screen [style*="rgb(28, 33, 49)"], :root[data-bp-tema="claro"] #app .call-screen [style*="#1c2131"] { background: var(--bp-panel-alt) !important; color: var(--bp-text) !important; box-shadow: inset 0 0 0 1px var(--bp-border) !important; } /* O painel de comandos que sobe por cima (transferência, teclado DTMF). */ :root[data-bp-tema="claro"] #app .call-screen .commands-overlay { background: var(--bp-panel) !important; } /* Os textos da tela — status, nome, número, origem — usam `text-gray-*`, que * o dark-theme.css já mapeia para os nossos tokens. Viram escuros sozinhos. * Não há regra para eles aqui de propósito: duplicar criaria duas fontes para * a mesma cor. */ /* --- 6. sugestões de contato, abaixo do campo ----------------------------- * * A lista é do bundle e tem o mesmo problema do fundo inline. A âncora aqui é * ESTRUTURAL: ela é a irmã seguinte do nosso campo de discagem, e o * `bravophone-input.js` já depende disso há tempo para esconder a lista. * * O nome do contato usa `text-white`, que o dark-theme.css nunca remapeou * porque branco já era certo no escuro — o mesmo motivo pelo qual o "+55" * sumia. O hover dos itens é `hover:bg-gray-800`, também fora do mapeamento: * no claro seria um piscar preto sobre uma lista branca. * * O número do contato usa `text-gray-400`, esse sim já mapeado. */ :root[data-bp-tema="claro"] #app .bpi-wrap ~ .z-20.shadow-lg { background: var(--bp-panel) !important; border-color: var(--bp-border) !important; } :root[data-bp-tema="claro"] #app .bpi-wrap ~ .z-20.shadow-lg .text-white { color: var(--bp-text) !important; } :root[data-bp-tema="claro"] #app .bpi-wrap ~ .z-20.shadow-lg .hover\:bg-gray-800:hover { background-color: var(--bp-panel-alt) !important; }