/* ------------------------------------------------------------------ */ /* Obrify Design Tokens — piloto de migração de cores (Atividades) */ /* Fonte de verdade para as novas variáveis de cor. Não substitui */ /* --bs-primary nem os demais overrides existentes em custom.css. */ /* */ /* O bloco :root abaixo é LEGADO e permanece global (é consumido pelo */ /* override de sidebar em custom.css) — não remover/renomear sem migrar */ /* esse ponto. Deixou de ser consumido por app/views/main/index.html.erb */ /* quando o bridge de lá foi movido para .obrify-theme-lab em */ /* obrify_dashboard_theme.css, remapeado direto para os tokens --ob-*. */ /* ------------------------------------------------------------------ */ :root { --surface-page: #F6F8F6; --surface-card: #FFFFFF; --surface-sunken: #EEF1EE; --border-subtle: #E4E9E4; --brand-green: #59BC5B; --brand-green-dark: #3F8C42; --brand-green-soft: #E7F5E8; --brand-green-deep: #16281A; --brand-carvao: #232B25; --status-success: #28C76F; --status-warning: #FF9F43; --status-info: #00CFE8; --status-danger: #EA5455; --status-neutral: #82868B; } /* ------------------------------------------------------------------ */ /* Design System "Enterprise Premium" — tokens semânticos */ /* */ /* Escopo restrito à tela de Atividades (tasks#index) através da */ /* classe .obrify-theme-lab, aplicada condicionalmente no em */ /* application.html.erb via ApplicationHelper#obrify_theme_lab?. */ /* Nenhuma outra tela referencia estas variáveis --ob-*, então nenhuma */ /* outra tela é afetada por este bloco. */ /* */ /* Tema padrão = Light. Dark é um override completo sob */ /* [data-obrify-theme="dark"] (atributo próprio, não usa data-bs-theme */ /* para não colidir com o dark mode global já existente no template). */ /* ------------------------------------------------------------------ */ .obrify-theme-lab { color-scheme: light; /* Superfícies */ --ob-background: #F5F7F8; --ob-background-secondary: #EDF0F1; --ob-surface: #FFFFFF; --ob-surface-secondary: #F0F2F1; --ob-card: #FFFFFF; --ob-card-inner: #F2F4F3; /* cards internos: chips de metadado */ --ob-card-hover: #FAFBFA; --ob-table-row-hover: #F4F6F5; /* hover de linha de tabela — mais sutil que card-hover */ --ob-table-bg: #F8FAF9; /* superfície própria da tabela */ --ob-row-activity-bg: #FFFFFF; --ob-row-stage-bg: #F1F3F2; /* superfície neutra — hierarquia vem de peso/borda, não de cor */ --ob-border: #E6E8EB; --ob-divider: #EEF0F1; /* Seleção/foco */ --ob-selected: #E3F2E4; /* Marca */ --ob-primary: #58B85A; --ob-primary-hover: #4AA24C; --ob-primary-soft: #E9F6EA; --ob-primary-rgb: 88, 184, 90; --ob-sidebar-bg: #1F342D; --ob-sidebar-bg-rgb: 31, 52, 45; --ob-header-bg: rgba(255, 255, 255, 0.86); /* Variantes -rgb: o Vuexy usa --bs-body-bg-rgb (não --bs-body-bg) no gradiente de blur do header fixo (.layout-page::before) e --bs-paper-bg-rgb no fundo do navbar "detached" — sem remapear essas duas, o header no dark herdava um branco residual por trás, independente da cor sólida aplicada no #layout-navbar. */ --bs-body-bg-rgb: 245, 247, 248; --bs-paper-bg-rgb: 255, 255, 255; /* Estado / feedback */ --ob-success: #58B85A; --ob-warning: #F2A93C; --ob-danger: #E5484D; --ob-info: #3B82F6; /* Texto */ --ob-text-primary: #222222; --ob-text-secondary: #6B7280; --ob-text-label: #6B7280; --ob-text-muted: #9AA1A9; --ob-text-on-primary: #FFFFFF; /* Sombra */ --ob-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04); --ob-shadow-strong: 0 12px 28px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06); /* Gráficos */ --ob-chart-green: #58B85A; /* Cinza neutro das barras de avanço: precisa ler contra o track (que usa --ob-card-inner/--ob-surface-secondary, ambos bem claros) sem virar cor de destaque. O tom anterior (#C8CDD2) media ~1,4:1 de contraste — abaixo do mínimo de 3:1 (WCAG 1.4.11) para componentes gráficos. */ --ob-chart-gray: #78828D; --ob-chart-red: #E5484D; --ob-chart-grid: rgba(34, 34, 34, 0.08); /* Trilho da barra de avanço da TABELA: precisa ser claramente visível mesmo contra fundo branco/quase-branco das linhas, senão a barra some inteira quando o avanço é 0-1%. Cinza médio-claro perceptível a olho nu — não é sobre razão de contraste WCAG isolada, é sobre a forma da barra ser identificável instantaneamente, vazia ou não. */ --ob-progress-track: #CBD1D7; /* Selo sólido sobre FOTO (capa de obra etc.): propositalmente IGUAIS em claro e escuro — o fundo aqui é uma imagem arbitrária (JPEG de canteiro de obra), não a superfície do app, então não faz sentido variar por tema. Preenchimento opaco + texto branco fixo, para nunca depender da cor/luminância da foto por baixo (os tons "soft" de --ob-info/--ob-danger etc. são translúcidos — funcionam sobre card sólido, não sobre foto). */ --ob-status-solid-neutral: #5C6470; --ob-status-solid-info: #2563EB; --ob-status-solid-danger: #DC2626; --ob-status-solid-success: #2F9E4F; /* Selo "Inativa" (condição comercial/licenciamento, não um status operacional): tom deliberadamente fora da paleta dos 4 acima, para não ser lido como um 5º status quando aparecer ao lado de um deles. */ --ob-status-solid-inactive: #4B5563; /* Escala de espaçamento */ --ob-space-4: 4px; --ob-space-8: 8px; --ob-space-12: 12px; --ob-space-16: 16px; --ob-space-24: 24px; --ob-space-32: 32px; --ob-space-40: 40px; --ob-space-48: 48px; /* Forma */ --ob-radius-sm: 8px; --ob-radius: 12px; --ob-radius-lg: 16px; --ob-radius-pill: 999px; /* Tipografia */ --ob-font-display: "Barlow Condensed", "Public Sans", sans-serif; /* Movimento */ --ob-transition-fast: 150ms ease; --ob-transition: 250ms ease; /* -------------------------------------------------------------- */ /* Remapeamento das CSS variables nativas do Bootstrap: os */ /* componentes (.btn, .card, .table, .form-select, .dropdown-menu, */ /* .progress, .badge...) continuam sendo os MESMOS — nenhum é */ /* duplicado — apenas passam a herdar a nova paleta. */ /* -------------------------------------------------------------- */ --bs-body-bg: var(--ob-background); --bs-body-color: var(--ob-text-primary); --bs-emphasis-color: var(--ob-text-primary); --bs-secondary-color: var(--ob-text-secondary); --bs-tertiary-color: var(--ob-text-muted); --bs-tertiary-bg: var(--ob-surface-secondary); --bs-secondary-bg: var(--ob-background-secondary); --bs-border-color: var(--ob-border); --bs-border-color-translucent: var(--ob-border); --bs-card-bg: var(--ob-card); --bs-card-border-color: var(--ob-border); --bs-card-cap-bg: var(--ob-card); --bs-primary: var(--ob-primary); --bs-primary-rgb: var(--ob-primary-rgb); --primary: var(--ob-primary); --bs-success: var(--ob-success); --bs-warning: var(--ob-warning); --bs-danger: var(--ob-danger); --bs-info: var(--ob-info); --bs-table-bg: transparent; --bs-table-color: var(--ob-text-primary); --bs-table-border-color: var(--ob-border); --bs-table-hover-bg: var(--ob-surface-secondary); --bs-table-striped-bg: var(--ob-surface-secondary); /* Vuexy usa --bs-paper-bg (não --bs-body-bg) como base do color-mix() dos badges .bg-label-*; sem remapear, os badges ficam sempre "lavados" contra branco, mesmo no dark. */ --bs-paper-bg: var(--ob-card); } .obrify-theme-lab[data-obrify-theme="dark"] { color-scheme: dark; /* Superfícies — carvão neutro com um TOQUE sutil de verde da marca (mesma família de --brand-carvao/--brand-green-deep do bloco :root legado), bem mais discreto que a primeira tentativa (essa girava a mesma matiz mas com saturação ~3x maior — ficou "verde demais", perdendo o efeito de neutro e lendo estranho em telas cheias de conteúdo). Aqui a saturação é baixa o bastante pra ler como "carvão" à primeira vista, só denunciando o verde quando comparado lado a lado com um cinza puro. Sistema de camadas preservado (mesma escala de luminância desde a primeira rodada, só a saturação mudou): Background < Canvas < Tabela < Linha de atividade < Cards < Linha de etapa < Card interno < Hover < Borda. */ --ob-background: #111311; /* fundo da página */ --ob-background-secondary: #181C19; /* canvas: wrapper que agrupa o conteúdo */ --ob-surface: #181C19; /* canvas */ --ob-surface-secondary: #272D28; /* superfícies utilitárias (switch, selects) */ --ob-card: #272D28; /* cards principais (KPIs, prazos, filtros) */ --ob-card-inner: #343B35; /* cards internos: chips de metadado */ --ob-card-hover: #3D443F; /* hover de card/dropdown/botão */ --ob-table-row-hover: #272C28; /* hover de linha de tabela — bem mais sutil */ --ob-selected: #3D443F; --ob-table-bg: #1E221E; /* superfície própria da tabela */ --ob-row-activity-bg: #232824; --ob-row-stage-bg: #2E3530; --ob-border: #434A44; --ob-divider: #2F3530; /* Marca */ --ob-primary: #58B85A; --ob-primary-hover: #6BC96D; --ob-primary-soft: rgba(88, 184, 90, 0.16); --ob-primary-rgb: 88, 184, 90; --ob-sidebar-bg: #101110; --ob-sidebar-bg-rgb: 16, 17, 16; --ob-header-bg: #1C1F1C; /* Ver nota no bloco light: sem isso, o gradiente de blur do header fixo e o fundo do navbar "detached" do Vuexy ficavam claros mesmo no dark. */ --bs-body-bg-rgb: 17, 19, 17; --bs-paper-bg-rgb: 39, 45, 40; /* Estado / feedback */ --ob-success: #58B85A; --ob-warning: #F2B84B; --ob-danger: #EF5350; --ob-info: #5EA1FF; /* Texto — 4 níveis de contraste decrescente, mesmo toque sutil de verde das superfícies (em vez de branco/cinza neutro azulado da rodada original) para não reintroduzir o "frio" que a paleta de superfície acabou de perder. */ --ob-text-primary: #F8F9F8; --ob-text-secondary: #CDD2CE; --ob-text-label: #ABB3AD; --ob-text-muted: #8C978E; /* "desabilitado" — L calibrada para manter >=3:1 contra --ob-card-inner */ --ob-text-on-primary: #10190F; /* Sombra */ --ob-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); --ob-shadow-strong: 0 16px 36px rgba(0, 0, 0, 0.45); /* Gráficos */ --ob-chart-green: #58B85A; /* Mesmo racional do bloco light: tom claro o bastante para >=3:1 contra o track escuro (--ob-card-inner), sem virar uma cor "acesa". */ --ob-chart-gray: #A0A7A1; --ob-chart-red: #EF5350; --ob-chart-grid: rgba(255, 255, 255, 0.08); /* Trilho claramente mais claro que os cards ao redor — mesmo racional do bloco light. */ --ob-progress-track: #474F49; /* Selo sólido sobre foto: mesmos valores do bloco light, de propósito (ver comentário lá) — não dependem do tema. */ --ob-status-solid-neutral: #5C6470; --ob-status-solid-info: #2563EB; --ob-status-solid-danger: #DC2626; --ob-status-solid-success: #2F9E4F; --ob-status-solid-inactive: #4B5563; /* Remapeamento Bootstrap — mesmos componentes, pele dark */ --bs-body-bg: var(--ob-background); --bs-body-color: var(--ob-text-primary); --bs-emphasis-color: var(--ob-text-primary); --bs-secondary-color: var(--ob-text-secondary); --bs-tertiary-color: var(--ob-text-muted); --bs-tertiary-bg: var(--ob-surface-secondary); --bs-secondary-bg: var(--ob-background-secondary); --bs-border-color: var(--ob-border); --bs-border-color-translucent: var(--ob-border); --bs-card-bg: var(--ob-card); --bs-card-border-color: var(--ob-border); --bs-card-cap-bg: var(--ob-card); --bs-success: var(--ob-success); --bs-warning: var(--ob-warning); --bs-danger: var(--ob-danger); --bs-info: var(--ob-info); --bs-table-bg: transparent; --bs-table-color: var(--ob-text-primary); --bs-table-border-color: var(--ob-border); --bs-table-hover-bg: var(--ob-card-hover); --bs-table-striped-bg: var(--ob-surface-secondary); --bs-dropdown-bg: var(--ob-card); --bs-dropdown-link-color: var(--ob-text-primary); --bs-dropdown-link-hover-bg: var(--ob-card-hover); --bs-dropdown-link-active-bg: var(--ob-selected); --bs-dropdown-border-color: var(--ob-border); --bs-form-select-bg: var(--ob-surface); --bs-paper-bg: var(--ob-card); }