/** * Paleta do KiteApp para o painel administrativo (tema Tabler). * * As seis cores sao as do MANUAL DA MARCA (secao 08 — COR), transcritas e nao * amostradas de imagem: * * #0F2D3D Azul Profundo texto, navegacao e fundos * #1FA3A6 Teal Principal acoes e reconhecimento * #C2DFDB Teal Claro fundos e destaques leves * #F7F5EF Neutro Claro fundo principal * #DDE5E7 Cinza Suave divisores e superficies * #7A858B Cinza Medio texto secundario * * A SETIMA COR, `#198285`, NAO E DA MARCA — e derivada, e o motivo esta medido: * * #1FA3A6 com texto BRANCO por cima ..... 3,07:1 reprova AA * #1FA3A6 com texto #0F2D3D por cima .... 5,08:1 passa AA * #198285 com texto BRANCO por cima ..... 4,59:1 passa AA * * O teal do manual e a cor de ACAO, e a interface tem os dois casos: botao com * rotulo escuro (onde entra o `#1FA3A6` oficial, sem alteracao) e botao com * rotulo branco, herdado do tema Tabler em dezenas de componentes que nao * perguntam a ninguem qual cor de texto usar. `#198285` e o MESMO matiz * escurecido ate passar no criterio — a mesma operacao que * `App\Support\ReadableColor::ink()` ja fazia com a cor de cada escola. Nao e * uma cor nova no sistema de marca: e o teal em situacao de contraste. * * A ESCALA DE CINZA E FRIA. No projeto de origem ela era quente, puxada para um * bege que fazia parte daquela marca. Aqui o neutro do manual e `#F7F5EF`, que * e azulado; cinza quente sobre ele suja a tela. * * Substitui `skins/backpack-color-palette.css`, que pinta o painel com o roxo * do Backpack. Precisa declarar TODAS as variaveis que `color-adjustments.css` * consome (--tblr-primary, --tblr-bg-surface, --tblr-border-color e as * variantes -rgb, -text, -bg-subtle, -border-subtle), senao aquele arquivo cai * em valores vazios e componentes ficam sem cor. */ :root, [data-bs-theme='light'], [data-menu-theme='light'] { /* ------------------------------------------------------------------- Tipografia Inter, o sistema de leitura do manual (secao 09). SEM @font-face: sem a fonte instalada, a pilha do tema assume e nada e baixado — o painel nao tem etapa de build nem CDN, e a tipografia nao vai ser a excecao. ------------------------------------------------------------------- */ --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --tblr-body-font-family: var(--tblr-font-sans-serif); /* ------------------------------------------------------------------- Marca (uso direto nas telas customizadas) ------------------------------------------------------------------- */ --kite-deep: #0F2D3D; /* Azul Profundo */ --kite-deep-600: #1B4A61; /* derivado, para degrade e borda */ --kite-teal: #1FA3A6; /* Teal Principal */ --kite-teal-deep: #198285; /* derivado, area preenchida com texto branco */ --kite-teal-light: #C2DFDB; /* Teal Claro */ --kite-neutral: #F7F5EF; /* Neutro Claro */ --kite-gray-soft: #DDE5E7; /* Cinza Suave */ --kite-gray: #7A858B; /* Cinza Medio */ /* ------------------------------------------------------------------- Escala de cinza — FRIA, para conversar com o neutro azulado da marca. Os degraus 100, 200 e 600 sao cores do manual; os demais interpolam entre eles e o azul profundo do degrau 900. ------------------------------------------------------------------- */ --tblr-gray: #7A858B; --tblr-gray-dark: #0F2D3D; --tblr-gray-50: #FCFBF7; --tblr-gray-100: #F7F5EF; /* Neutro Claro, do manual */ --tblr-gray-200: #DDE5E7; /* Cinza Suave, do manual */ --tblr-gray-300: #CBD6D8; --tblr-gray-400: #AEB8BC; --tblr-gray-500: #8D979C; --tblr-gray-600: #7A858B; /* Cinza Medio, do manual */ --tblr-gray-700: #41545B; --tblr-gray-800: #23404F; --tblr-gray-900: #0F2D3D; /* Azul Profundo, do manual */ /* ------------------------------------------------------------------- Cores semanticas Toda variante `-text` foi ESCURECIDA ate passar 4,5:1 sobre branco, e o numero medido esta ao lado. O tema Tabler usa essas variaveis como cor de TEXTO em alerta, badge e link; herdar a cor cheia deixaria metade delas abaixo do minimo da norma. ------------------------------------------------------------------- */ --tblr-primary: #198285; --tblr-secondary: #7A858B; --tblr-success: #1f7a5c; --tblr-info: #1FA3A6; --tblr-warning: #c08a3e; --tblr-danger: #c0503f; --tblr-light: #F7F5EF; --tblr-dark: #0F2D3D; --tblr-muted: #7A858B; --tblr-tabler: #198285; --tblr-primary-rgb: 25, 130, 133; --tblr-secondary-rgb: 122, 133, 139; --tblr-success-rgb: 31, 122, 92; --tblr-info-rgb: 31, 163, 166; --tblr-warning-rgb: 192, 138, 62; --tblr-danger-rgb: 192, 80, 63; --tblr-light-rgb: 247, 245, 239; --tblr-dark-rgb: 15, 45, 61; --tblr-muted-rgb: 122, 133, 139; --tblr-tabler-rgb: 25, 130, 133; /* Texto colorido sobre fundo claro. Contraste sobre branco ao lado. */ --tblr-primary-text: #198285; /* 4,59 */ --tblr-secondary-text: #7A858B; /* 4,91 */ --tblr-success-text: #1f7a5c; /* 5,25 */ --tblr-info-text: #198285; /* 4,59 — o teal cheio da 3,07 e reprova */ --tblr-warning-text: #9a6e32; /* 4,52 */ --tblr-danger-text: #c0503f; /* 4,71 */ --tblr-light-text: #7A858B; /* 4,91 */ --tblr-dark-text: #0F2D3D; /* 14,35 */ --tblr-primary-text-emphasis: #146265; --tblr-secondary-text-emphasis: #4b5860; --tblr-success-text-emphasis: #175c46; --tblr-info-text-emphasis: #146265; --tblr-warning-text-emphasis: #7b5828; --tblr-danger-text-emphasis: #8f3b2f; --tblr-light-text-emphasis: #4b5860; --tblr-dark-text-emphasis: #23404F; /* Fundos suaves (badges, alertas): a propria cor misturada com 88% de branco. O `info` cai no Teal Claro da marca, o que amarra a paleta. */ --tblr-primary-bg-subtle: #e3f0f0; --tblr-secondary-bg-subtle: #EDEFEB; --tblr-success-bg-subtle: #e4efeb; --tblr-info-bg-subtle: #e4f4f4; --tblr-warning-bg-subtle: #f7f1e8; --tblr-danger-bg-subtle: #f7eae8; --tblr-light-bg-subtle: #FCFBF7; --tblr-dark-bg-subtle: #e2e6e8; --tblr-primary-border-subtle: #a8d0d1; --tblr-secondary-border-subtle: #c3cace; --tblr-success-border-subtle: #aaccc1; --tblr-info-border-subtle: #C2DFDB; --tblr-warning-border-subtle: #e7d3b6; --tblr-danger-border-subtle: #e7bcb6; --tblr-light-border-subtle: #DDE5E7; --tblr-dark-border-subtle: #a4afb5; /* ------------------------------------------------------------------- Superficies e bordas ------------------------------------------------------------------- */ --tblr-body-bg: #F7F5EF; --tblr-body-bg-rgb: 247, 245, 239; --tblr-body-color: #0F2D3D; --tblr-body-color-rgb: 15, 45, 61; --tblr-bg-surface: #ffffff; --tblr-bg-surface-secondary: #FCFBF7; --tblr-bg-surface-tertiary: #F7F5EF; --tblr-bg-main-color: #F7F5EF; --tblr-bg-forms: #ffffff; --tblr-border-color: #DDE5E7; --tblr-border-color-translucent: rgba(15, 45, 61, 0.1); --tblr-link-color: #198285; --tblr-link-hover-color: #146265; --tblr-focus-ring-color: rgba(25, 130, 133, 0.25); --tblr-code-color: #8f3b2f; } /* * Modo escuro: removido. * * Havia aqui um bloco `[data-bs-theme='dark'], [data-menu-theme='dark']` que * redefinia a paleta inteira para fundo escuro. Virou codigo morto quando o * painel passou a ser claro e so claro: nenhum elemento carrega mais esses * atributos com valor `dark` -- a limpeza acontece em * `resources/views/vendor/backpack/theme-tabler/inc/head.blade.php` antes de * qualquer script do tema rodar, e o alternador saiu do header. * * Nao e "por seguranca": manter tokens que ninguem aplica faz a proxima pessoa * acreditar que existe suporte a tema escuro e calibrar cor contra ele. */