/* ========================================================================== CAMADA DE COMPATIBILIDADE BOOTSTRAP → DESIGN TOKENS -------------------------------------------------------------------------- Bootstrap 5.3.8. Nesta versão o framework é inteiramente parametrizado por custom properties `--bs-*`, então alimentar as variáveis de RAIZ já faz a maioria dos componentes seguir a paleta do lojista — não é mais preciso reescrever seletor por seletor como na época do 5.1. Duas camadas trabalham juntas: 1. `data-bs-theme` no (BaseController → _Layout) alinha os DEFAULTS do framework ao esquema da paleta. Se algum componente escapar dos tokens, ele fica levemente fora da marca em vez de virar texto invisível. 2. As variáveis abaixo refinam para as cores exatas do lojista. Contrato: Docs/DesignTokens/DESIGN_TOKENS.md Diagnóstico e histórico: Docs/DesignTokens/PLANO_CONTRASTE.md ORDEM DE CARGA (definida no _Layout.cshtml) — não alterar: bootstrap.min.css → ESTE ARQUIVO → site.css → themes//theme.css REGRA: `!important` aqui SÓ para vencer utilitários que já são `!important`. ========================================================================== */ /* -------------------------------------------------------------------------- 1. VARIÁVEIS DE RAIZ — a partir daqui o framework inteiro segue os tokens. Precisa valer também dentro de [data-bs-theme], que redeclara as mesmas variáveis com a mesma especificidade: sem isto, o bloco do tema venceria. -------------------------------------------------------------------------- */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { /* Fundo neutro de campo/cabeçalho, derivado da superfície corrente */ --campo-fundo: color-mix(in srgb, var(--cor-texto) 7%, var(--superficie)); --campo-fundo-hover: color-mix(in srgb, var(--cor-texto) 11%, var(--superficie)); /* Texto secundário: alias do conjunto por superfície (piso AA garantido no servidor por ColorHelper.TextoSuave) */ --campo-texto-suave: var(--cor-texto-muted); /* Corpo e tipografia */ --bs-body-color: var(--cor-texto); --bs-body-color-rgb: var(--cor-texto-rgb); --bs-body-bg-rgb: var(--cor-fundo-site-rgb); --bs-body-bg: var(--cor-fundo-site); --bs-heading-color: var(--cor-titulo); /* --bs-emphasis-color alimenta .table, .text-emphasis e afins */ --bs-emphasis-color: var(--cor-titulo); --bs-secondary-color: var(--cor-texto-muted); --bs-tertiary-color: var(--cor-texto-muted); /* Superfícies neutras do framework */ --bs-secondary-bg: var(--campo-fundo); --bs-tertiary-bg: var(--campo-fundo); /* Bordas */ --bs-border-color: var(--cor-borda); --bs-border-color-translucent: var(--cor-borda); /* Marca */ --bs-primary: var(--cor-primaria); --bs-link-color: var(--acento); --bs-link-color-rgb: var(--acento-on-fundo-rgb); --bs-link-hover-color: var(--cor-primaria-dark, var(--cor-primaria)); --bs-focus-ring-color: color-mix(in srgb, var(--cor-primaria) 25%, transparent); } /* -------------------------------------------------------------------------- 2. COMPONENTES COM SUPERFÍCIE PRÓPRIA Estes não seguem --bs-body-bg: têm a própria variável de fundo, que precisa apontar para a superfície do tema (cards, menus, modais...). -------------------------------------------------------------------------- */ .card { --bs-card-bg: var(--superficie); --bs-card-color: var(--cor-texto); --bs-card-cap-bg: transparent; --bs-card-cap-color: var(--cor-titulo); --bs-card-border-color: var(--cor-borda); --bs-card-title-color: var(--cor-titulo); --bs-card-subtitle-color: var(--cor-texto-muted); } .dropdown-menu { --bs-dropdown-bg: var(--superficie); --bs-dropdown-color: var(--cor-texto); --bs-dropdown-link-color: var(--cor-texto); --bs-dropdown-link-hover-color: var(--cor-texto); --bs-dropdown-link-hover-bg: var(--campo-fundo-hover); --bs-dropdown-link-active-color: var(--on-primaria); --bs-dropdown-link-active-bg: var(--cor-primaria); --bs-dropdown-header-color: var(--cor-texto-muted); --bs-dropdown-border-color: var(--cor-borda); --bs-dropdown-divider-bg: var(--cor-borda); } .modal { --bs-modal-bg: var(--superficie); --bs-modal-color: var(--cor-texto); --bs-modal-border-color: var(--cor-borda); --bs-modal-header-border-color: var(--cor-borda); --bs-modal-footer-border-color: var(--cor-borda); } .offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-xl { --bs-offcanvas-bg: var(--superficie); --bs-offcanvas-color: var(--cor-texto); --bs-offcanvas-border-color: var(--cor-borda); } .list-group { --bs-list-group-bg: var(--superficie); --bs-list-group-color: var(--cor-texto); --bs-list-group-border-color: var(--cor-borda); --bs-list-group-action-hover-bg: var(--campo-fundo-hover); --bs-list-group-action-hover-color: var(--cor-texto); --bs-list-group-active-bg: var(--cor-primaria); --bs-list-group-active-border-color: var(--cor-primaria); --bs-list-group-active-color: var(--on-primaria); --bs-list-group-disabled-color: var(--cor-texto-muted); } .accordion { --bs-accordion-bg: var(--superficie); --bs-accordion-color: var(--cor-texto); --bs-accordion-border-color: var(--cor-borda); --bs-accordion-btn-color: var(--cor-titulo); --bs-accordion-btn-bg: var(--superficie); --bs-accordion-active-color: var(--on-primaria-soft); --bs-accordion-active-bg: var(--cor-primaria-soft); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color); } .nav-tabs { --bs-nav-tabs-border-color: var(--cor-borda); --bs-nav-tabs-link-active-color: var(--cor-titulo); --bs-nav-tabs-link-active-bg: var(--superficie); --bs-nav-tabs-link-active-border-color: var(--cor-borda) var(--cor-borda) var(--superficie); --bs-nav-tabs-link-hover-border-color: var(--cor-borda); --bs-nav-link-color: var(--cor-texto-muted); --bs-nav-link-hover-color: var(--cor-texto); } .pagination { --bs-pagination-bg: var(--superficie); --bs-pagination-color: var(--acento); --bs-pagination-border-color: var(--cor-borda); --bs-pagination-hover-bg: var(--campo-fundo-hover); --bs-pagination-hover-color: var(--cor-primaria); --bs-pagination-hover-border-color: var(--cor-borda); --bs-pagination-active-bg: var(--cor-primaria); --bs-pagination-active-border-color: var(--cor-primaria); --bs-pagination-active-color: var(--on-primaria); --bs-pagination-disabled-bg: var(--superficie); --bs-pagination-disabled-color: var(--cor-texto-muted); --bs-pagination-disabled-border-color: var(--cor-borda); } .table { --bs-table-color: var(--cor-texto); --bs-table-border-color: var(--cor-borda); /* MUDANÇA DE COMPORTAMENTO DO 5.3: --bs-table-bg passou a herdar de --bs-body-bg (no 5.1 era `transparent`). Como .table > * > * pinta background-color: var(--bs-table-bg), toda célula passaria a estampar o fundo da PÁGINA por cima da superfície do card. Voltando a transparente, a tabela assume a superfície em que estiver. */ --bs-table-bg: transparent; --bs-table-striped-color: var(--cor-texto); --bs-table-striped-bg: color-mix(in srgb, var(--cor-texto) 5%, transparent); --bs-table-active-color: var(--cor-texto); --bs-table-active-bg: color-mix(in srgb, var(--cor-texto) 10%, transparent); --bs-table-hover-color: var(--cor-texto); --bs-table-hover-bg: color-mix(in srgb, var(--cor-texto) 7%, transparent); } /* Cabeçalho de tabela: as views usam , utilitário !important — fundo e texto precisam andar juntos aqui. */ .table > thead, .table > thead th { /* --campo-texto-suave, nao --cor-texto-muted: o thead fica sobre o FUNDO DE CAMPO, e o muted tem piso medido contra a superficie limpa. */ color: var(--campo-texto-suave); } .table > thead.bg-light, .table > thead.table-light, .table > thead.bg-white { background-color: var(--campo-fundo) !important; } /* -------------------------------------------------------------------------- 3. CAMPOS DE FORMULÁRIO .form-control/.form-select já seguem --bs-body-color/--bs-body-bg no 5.3. Aqui só ajustamos o fundo para a superfície de campo (em vez do fundo da página) e resolvemos o acoplamento com os utilitários de fundo. -------------------------------------------------------------------------- */ .form-control, .form-select { background-color: var(--campo-fundo); border-color: var(--cor-borda); } .form-control:focus, .form-select:focus { background-color: var(--campo-fundo); border-color: var(--cor-primaria); } .form-control:disabled, .form-control[readonly], .form-select:disabled { color: var(--cor-texto-muted); background-color: color-mix(in srgb, var(--cor-texto) 4%, var(--superficie)); } .form-control::placeholder { color: var(--cor-texto-muted); opacity: 1; } /* As views combinam o campo com utilitários de fundo (bg-light/bg-white), que são !important. Sem isto, o campo ficaria claro fixo com o texto do tema. Escopo restrito ao componente — não redefine o utilitário globalmente. */ .form-control.bg-light, .form-control.bg-white, .form-select.bg-light, .form-select.bg-white, .input-group.bg-light, .input-group.bg-white, /* O addon e o campo formam UM controle: com bg-light no addon e o campo tokenizado, o input ficava metade branco e metade escuro no tema escuro. Cada metade era legivel isoladamente — o defeito e a emenda entre elas. */ .input-group-text.bg-light, .input-group-text.bg-white { background-color: var(--campo-fundo) !important; } /* bg-transparent é intencional (busca do Aurora sobre a seção): mantém o fundo herdado, mas o texto segue o token. */ .form-control.bg-transparent, .form-select.bg-transparent { color: var(--cor-texto); } .input-group-text { color: var(--cor-texto); background-color: var(--campo-fundo); border-color: var(--cor-borda); } .form-check-input { background-color: var(--campo-fundo); border-color: var(--cor-borda); } .form-check-input:checked { background-color: var(--cor-primaria); border-color: var(--cor-primaria); } .form-text { color: var(--cor-texto-muted); } .form-label { color: var(--cor-texto); } /* -------------------------------------------------------------------------- 4. UTILITÁRIOS DE TEXTO RELATIVOS .text-dark/.text-muted são cores ABSOLUTAS com !important. As views usam ~350 delas com a intenção de "texto forte" e "texto secundário", não "preto" e "cinza". Aqui passam a significar o que a intenção sempre foi, resolvido pelo CONTEXTO de superfície (site.css, seção CONTEXTOS). Auditoria feita antes de generalizar: TODOS os badges que usam text-dark são `bg-opacity-*`, ou seja, fundo TRANSLÚCIDO sobre o card — no tema escuro renderizam escuros e também querem texto claro. Não existe badge de fundo claro sólido no projeto, então nenhuma exceção foi necessária. Se algum dia existir, a saída é dar contexto (.ctx-claro) ao badge, não voltar à cor fixa. -------------------------------------------------------------------------- */ .text-dark, .text-body, .text-black, .text-body-emphasis { color: var(--cor-titulo) !important; } /* As quatro views de FAQ escrevem `accordion-button ... text-dark`. O !important acima venceria o estado ABERTO, que tem fundo próprio (--cor-primaria-soft) e texto de acento. Override escopado ao componente, mesmo padrão de .form-control.bg-light. */ .accordion-button:not(.collapsed).text-dark, .accordion-button:not(.collapsed).text-body, .accordion-button:not(.collapsed).text-black { color: var(--on-primaria-soft) !important; } .text-muted, .text-secondary, .text-body-secondary, .text-body-tertiary { color: var(--cor-texto-muted) !important; } /* Cores semanticas de TEXTO: o Bootstrap aponta .text-success e afins para --bs-success (o tom cheio), que sobre uma superficie escura mede ~2,9. O 5.3 ja mantem variantes -text-emphasis tematizadas pelo data-bs-theme; usamos elas. O FUNDO (.bg-success e afins) continua no tom cheio, de proposito. */ .text-success { color: var(--bs-success-text-emphasis) !important; } .text-danger { color: var(--bs-danger-text-emphasis) !important; } .text-warning { color: var(--bs-warning-text-emphasis) !important; } .text-info { color: var(--bs-info-text-emphasis) !important; } .text-primary { color: var(--bs-primary-text-emphasis) !important; } /* -------------------------------------------------------------------------- 5. DIVISÓRIAS -------------------------------------------------------------------------- */ hr, .dropdown-divider { border-top-color: var(--cor-borda); opacity: 1; }