@import "tailwindcss"; @import "tippy.js/dist/tippy.css"; /* * Tailwind v4 Configuration * https://tailwindcss.com/docs/v4-beta */ @theme { /* Accent — cor de interacao da app (links, estados, focus). Default azul (a mais comum); um tema pode sobrescrever --color-accent-* numa banda sobria/legivel sobre branco. NAO confundir com o chrome (navbar/breadcrumb), que carrega a identidade e varia livremente. */ --color-accent: var(--color-blue-600); --color-accent-strong: var(--color-blue-700); --color-accent-muted: var(--color-blue-100); --color-accent-subtle: var(--color-blue-50); /* Primary — cor de marca; alias da paleta azul. */ --color-primary-50: var(--color-blue-50); --color-primary-100: var(--color-blue-100); --color-primary-200: var(--color-blue-200); --color-primary-300: var(--color-blue-300); --color-primary-400: var(--color-blue-400); --color-primary-500: var(--color-blue-500); --color-primary-600: var(--color-blue-600); --color-primary-700: var(--color-blue-700); --color-primary-800: var(--color-blue-800); --color-primary-900: var(--color-blue-900); --color-primary-950: var(--color-blue-950); /* Navbar — paleta interna do Ui::Navbar::Component (alias de stone). */ --color-navbar: var(--color-stone-500); --color-navbar-active: var(--color-stone-600); --color-navbar-hover: var(--color-stone-400); --color-navbar-muted: var(--color-stone-200); /* Theme — cor base de identidade do portal (chrome + CTA principal). Gera bg-theme/text-theme e serve de default; cada tema sobrescreve --color-theme em .themed. (mesmo padrao do accent). */ --color-theme: var(--color-teal-600); /* Theme heading — tom escuro derivado do tema, usado como tinta de titulos (text-theme-heading). Placeholder aqui; valor real (color-mix) em .themed. */ --color-theme-heading: var(--color-gray-900); /* Page background — cor de fundo da pagina inteira (body, main, aside). Default warm/bege; temas que precisem de fundo branco sobrescrevem. */ --color-page: #F0EFEC; /* Sidebar — tokens consumidos por SideBar::ItemComponent. Valores aqui sao apenas pra Tailwind gerar as utilities (bg-sidebar-selected, text-on-sidebar-selected, bg-sidebar-hover). Os valores efetivos vivem em .themed (@layer base), pra que a cascata atraves de var() funcione corretamente quando o tema sobrescreve accent. */ --color-sidebar-selected: var(--color-blue-50); --color-on-sidebar-selected: var(--color-blue-700); --color-sidebar-hover: var(--color-gray-100); /* Layout — paginas internas (nao home). Larguras das sidebars e max-width do card de conteudo. Ajustar aqui mexe em todas as paginas internas. */ --layout-sidebar-left: 20rem; /* w-80 — 320px */ --layout-sidebar-right: 18rem; /* w-72 — 288px */ --layout-card-max: 56rem; /* 4xl — 896px */ /* Font family */ --font-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif; } /* Source paths for Tailwind to scan */ @source "../../../app/views/**/*.erb"; @source "../../../app/helpers/**/*.rb"; @source "../../../app/components/**/*.rb"; @source "../../../app/components/**/*.erb"; @source "../../../app/javascript/**/*.js"; /* ========================================================================== Portal Theme System Cada tema declara apenas --color-theme (cor base de identidade) e, se quiser, o accent (--color-accent*). As formulas color-mix em .themed derivam o chrome (navbar, breadcrumb, headings, tints) a partir dessa unica cor. Knobs disponiveis no bloco do tema: --color-theme cor base (obrigatorio) --color-accent* acento de interacao (default azul) --color-page fundo da pagina (def. branco) --color-sidebar-selected fundo do item de sidebar selecionado (def. accent-subtle) --color-on-sidebar-selected texto do item de sidebar selecionado (def. accent-strong) --color-sidebar-hover fundo do hover na sidebar (def. gray-100) --link-mute neutro p/ dessaturar links (def. slate-600) --navbar-mix opacidade do navbar (def. 80%) --breadcrumb-link-mix intensidade do link (def. 45%) --breadcrumb-link-hover-mix idem no hover (def. 70%) Qualquer var de saida pode ser sobrescrita como escape hatch (ver jedigital, que usa ambar no breadcrumb e na sidebar selecionada). Body recebe: themed {tema} {controller} {action}. ========================================================================== */ @layer base { .themed { /* --color-theme: default no @theme, sobrescrito por .themed. abaixo */ --link-mute: var(--color-slate-600); --color-theme-dark: color-mix(in oklab, var(--color-theme) 82%, black); --color-theme-heading: color-mix(in oklab, var(--color-theme) 40%, var(--link-mute)); /* navbar: tom escuro da identidade, translucido */ --navbar-bg: color-mix(in oklab, var(--color-theme-dark) var(--navbar-mix, 80%), transparent); --navbar-blur: blur(8px); --breadcrumb-bg: color-mix(in oklab, var(--color-theme) 10%, white); --breadcrumb-border: color-mix(in oklab, var(--color-theme) 26%, white); --breadcrumb-link: color-mix(in oklab, var(--color-theme) var(--breadcrumb-link-mix, 45%), var(--link-mute)); --breadcrumb-link-hover: color-mix(in oklab, var(--color-theme) var(--breadcrumb-link-hover-mix, 70%), var(--link-mute)); /* sidebar: valores efetivos. Cada tema pode sobrescrever. */ --color-sidebar-selected: var(--color-accent-subtle); --color-on-sidebar-selected: var(--color-accent-strong); --color-sidebar-hover: var(--color-gray-100); /* page-nav rail (sidebar direita): card suave tingido do tema, mais leve que o menu da esquerda. O acento do item ativo NAO vem daqui — eh azul fixo (primary), pra sinalizar navegacao secundaria. */ --rail-bg: color-mix(in oklab, var(--color-theme) 5%, white); --rail-border: color-mix(in oklab, var(--color-theme) 14%, white); --rail-hover: color-mix(in oklab, var(--color-theme) 10%, white); --rail-line: color-mix(in oklab, var(--color-theme) 16%, white); /* leve tinta do tema em cabecalhos de secao (widgets da home, barra da Base de Conhecimento, etc.) */ --section-header-bg: color-mix(in oklab, var(--color-theme) 8%, white); --section-header-hover: color-mix(in oklab, var(--color-theme) 14%, white); } /* Tema = uma rampa da paleta. */ .themed.orange { --color-theme: var(--color-orange-600); } .themed.yellow { --color-theme: var(--color-yellow-500); } .themed.green-light { --color-theme: var(--color-green-600); } .themed.green-dark { --color-theme: var(--color-emerald-700); } .themed.teal { --color-theme: var(--color-teal-600); } .themed.blue-light { --color-theme: var(--color-sky-600); } .themed.blue-dark { --color-theme: var(--color-blue-800); } .themed.purple { --color-theme: var(--color-violet-600); } .themed.pink { --color-theme: var(--color-fuchsia-600); } .themed.red { --color-theme: var(--color-rose-600); } /* jedigital: chrome azul + breadcrumb e sidebar selecionada em ambar + fundo branco (em vez do warm default). */ .themed.jedigital { --color-theme: var(--color-blue-600); --breadcrumb-bg: color-mix(in oklab, var(--color-yellow-300) 30%, white); --breadcrumb-border: color-mix(in oklab, var(--color-yellow-700) 28%, white); --breadcrumb-link: color-mix(in oklab, var(--color-yellow-500) 70%, var(--link-mute)); --breadcrumb-link-hover: color-mix(in oklab, var(--color-yellow-600) 80%, var(--link-mute)); --color-sidebar-selected: var(--color-yellow-200); --color-on-sidebar-selected: var(--color-yellow-700); --color-sidebar-hover: var(--color-yellow-50); } /* eleicoes: chrome violet + acento indigo. */ .themed.eleicoes { --color-theme: var(--color-violet-600); --color-accent: var(--color-indigo-600); --color-accent-strong: var(--color-indigo-700); --color-accent-muted: var(--color-indigo-100); --color-accent-subtle: var(--color-indigo-50); } } /* Themed navbar — fundo translucido derivado em .themed. */ .themed .portal-navbar { background-color: var(--navbar-bg); -webkit-backdrop-filter: var(--navbar-blur); backdrop-filter: var(--navbar-blur); } /* Breadcrumb bar */ .breadcrumb-bar { display: flex; align-items: center; background-color: var(--breadcrumb-bg); min-height: 2.3rem; border-bottom: 1px solid var(--breadcrumb-border); } .breadcrumb-bar a { color: var(--breadcrumb-link); } .breadcrumb-bar a:hover { color: var(--breadcrumb-link-hover); text-decoration: none; } /* CKEditor content styles */ @import "./ck_content.css";