/** * Sistema de Temas — CSS Custom Properties * Cada tema define suas variaveis, aplicadas via data-theme no . * * DNA visual: padrao "Dash Pro" — fundo carvao, amarelo vivo como primario, * roxo como acento, cards com "aba" contornada, barra de marca no topo na cor primaria do tema. * * Tokens estruturais (fonte, raio, sombras) ficam no bloco base e valem para * todos os temas. Os temas alternativos so sobrescrevem cores. * * Tokens principais: * --color-primary / -hover / -light / -text primario e texto sobre ele * --color-primary-strong primario legivel como TEXTO sobre o fundo do tema * --color-accent / -light / -text cor secundaria (roxo) * --color-bg-body / -sidebar / -card / -elevated superficies * --color-bg-topbar / --color-topbar-text barra de marca. Em TODOS os temas segue * var(--color-primary) / var(--color-primary-text); * nunca fixe hex aqui. Cor propria so via editor * de cores (override theme_overrides_{tema}). * --color-topbar-chip / -chip-text botoes redondos da barra (sempre escuros) * --card-tab-border contorno da "aba" dos cards * --chart-1..6 / --chart-grid / --chart-tick paleta dos graficos (charts-helper.js) */ /* ============================== TEMA PADRAO: Dash Black (chave gold_black) ============================== */ :root, [data-theme="gold_black"] { /* Primario: amarelo Dash */ --color-primary: #FCE803; --color-primary-hover: #E5D200; --color-primary-light: rgba(252, 232, 3, 0.10); --color-primary-text: #0D0D0D; --color-primary-strong: #FCE803; /* Acento: roxo */ --color-accent: #A855F7; --color-accent-light: #C084FC; --color-accent-dark: #7C3AED; --color-accent-soft: rgba(168, 85, 247, 0.14); --color-accent-text: #FFFFFF; --color-magenta: #FF2D7A; /* Superficies */ --color-bg-body: #0D0D0D; --color-bg-sidebar: #111111; --color-bg-card: #161616; --color-bg-card-hover: #1A1A1A; --color-bg-elevated: #1F1F1F; --color-bg-input: #1A1A1A; --color-bg-modal: #161616; --color-bg-topbar: var(--color-primary); --color-topbar-text: var(--color-primary-text); --color-topbar-chip: #141414; --color-topbar-chip-text: #F7F7F7; --color-overlay: rgba(0, 0, 0, 0.65); /* Bordas */ --color-border: #262626; --color-border-light: #2E2E2E; --color-divider: #1F1F1F; --card-tab-border: var(--color-primary); /* Texto */ --color-text-primary: #F7F7F7; --color-text-secondary: #A3A3A3; --color-text-muted: #6B6B6B; --color-text-inverse: #0D0D0D; /* Semanticas */ --color-success: #22C55E; --color-success-light: rgba(34, 197, 94, 0.14); --color-warning: #F59E0B; --color-warning-light: rgba(245, 158, 11, 0.14); --color-error: #EF4444; --color-error-hover: #DC2626; --color-error-light: rgba(239, 68, 68, 0.14); --color-info: #407EFE; --color-info-light: rgba(64, 126, 254, 0.14); --color-neutral-light: rgba(163, 163, 163, 0.14); /* Graficos */ --chart-1: var(--color-primary); --chart-2: var(--color-accent); --chart-3: #FF2D7A; --chart-4: #407EFE; --chart-5: #22C55E; --chart-6: #F97316; --chart-grid: rgba(255, 255, 255, 0.05); --chart-tick: #6B6B6B; --chart-tooltip-bg: #141414; --chart-tooltip-border: #2E2E2E; --chart-tooltip-text: #F7F7F7; /* Brilho (so hover/foco de primarios e item ativo do menu) */ --glow-primary: 0 0 0 1px rgba(252, 232, 3, 0.35), 0 0 24px rgba(252, 232, 3, 0.18); /* Tipografia */ --font-display: 'Rethink Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Raios */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --border-radius: var(--radius-sm); --border-radius-lg: var(--radius-md); /* Layout e sombras */ --sidebar-width: 260px; --header-height: 64px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55); --transition: all 0.2s ease; /* Aliases legados (usados em regras antigas e em views) */ --color-text: var(--color-text-primary); --color-bg: var(--color-bg-body); --color-bg-subtle: var(--color-bg-elevated); color-scheme: dark; } /* Brilho generico para temas com outro primario */ [data-theme]:not([data-theme="gold_black"]) { --glow-primary: 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent), 0 0 24px color-mix(in srgb, var(--color-primary) 18%, transparent); } /* ============================== Blue Black ============================== */ [data-theme="blue_black"] { --color-primary: #407EFE; --color-primary-hover: #2F6AE8; --color-primary-light: rgba(64, 126, 254, 0.14); --color-primary-text: #FFFFFF; --color-primary-strong: #6B9BFF; --color-accent: #A855F7; --chart-4: #FCE803; } /* ============================== Cyan Black ============================== */ [data-theme="cyan_black"] { --color-primary: #06B6D4; --color-primary-hover: #0891B2; --color-primary-light: rgba(6, 182, 212, 0.14); --color-primary-text: #0D0D0D; --color-primary-strong: #22D3EE; --color-accent: #A855F7; } /* ============================== Green Black ============================== */ [data-theme="green_black"] { --color-primary: #22C55E; --color-primary-hover: #16A34A; --color-primary-light: rgba(34, 197, 94, 0.14); --color-primary-text: #0D0D0D; --color-primary-strong: #4ADE80; --color-accent: #A855F7; --chart-5: #FCE803; } /* ============================== Brown Black ============================== */ [data-theme="brown_black"] { --color-primary: #A16207; --color-primary-hover: #854D0E; --color-primary-light: rgba(161, 98, 7, 0.16); --color-primary-text: #FFFFFF; --color-primary-strong: #D69E2E; --color-accent: #C084FC; } /* ============================== Purple Black ============================== */ [data-theme="purple_black"] { --color-primary: #A855F7; --color-primary-hover: #9333EA; --color-primary-light: rgba(168, 85, 247, 0.14); --color-primary-text: #FFFFFF; --color-primary-strong: #C084FC; --color-accent: #FCE803; --color-accent-text: #0D0D0D; --color-accent-soft: rgba(252, 232, 3, 0.12); } /* ============================== Orange Black ============================== */ [data-theme="orange_black"] { --color-primary: #F97316; --color-primary-hover: #EA580C; --color-primary-light: rgba(249, 115, 22, 0.14); --color-primary-text: #0D0D0D; --color-primary-strong: #FB923C; --color-accent: #A855F7; --chart-6: #FCE803; } /* ============================== Rose Black ============================== */ [data-theme="rose_black"] { --color-primary: #FF2D7A; --color-primary-hover: #E11D68; --color-primary-light: rgba(255, 45, 122, 0.14); --color-primary-text: #FFFFFF; --color-primary-strong: #FF5C98; --color-accent: #A855F7; --chart-3: #FCE803; } /* ============================== Dash Light (chave administration_light) — claro padrao do sistema ============================== */ [data-theme="administration_light"] { --color-primary: #FCE803; --color-primary-hover: #E5D200; --color-primary-light: rgba(252, 232, 3, 0.22); --color-primary-text: #0D0D0D; --color-primary-strong: #141414; --color-accent: #7C3AED; --color-accent-light: #A855F7; --color-accent-dark: #6D28D9; --color-accent-soft: rgba(124, 58, 237, 0.10); --color-accent-text: #FFFFFF; --color-bg-body: #F7F7F7; --color-bg-sidebar: #FFFFFF; --color-bg-card: #FFFFFF; --color-bg-card-hover: #FAFAFA; --color-bg-elevated: #FAFAFA; --color-bg-input: #FFFFFF; --color-bg-modal: #FFFFFF; --color-bg-topbar: var(--color-primary); --color-topbar-text: var(--color-primary-text); --color-topbar-chip: #141414; --color-topbar-chip-text: #F7F7F7; --color-overlay: rgba(13, 13, 13, 0.45); --color-border: #E5E5E5; --color-border-light: #D9D9D9; --color-divider: #EFEFEF; --card-tab-border: #141414; --color-text-primary: #141414; --color-text-secondary: #525252; --color-text-muted: #8A8A8A; --color-text-inverse: #F7F7F7; --color-success: #16A34A; --color-success-light: rgba(22, 163, 74, 0.10); --color-warning: #D97706; --color-warning-light: rgba(217, 119, 6, 0.10); --color-error: #DC2626; --color-error-hover: #B91C1C; --color-error-light: rgba(220, 38, 38, 0.08); --color-info: #2F6AE8; --color-info-light: rgba(47, 106, 232, 0.08); --color-neutral-light: rgba(82, 82, 82, 0.08); /* No claro o amarelo puro some como linha: serie 1 usa amarelo escurecido */ --chart-1: #E5CF00; --chart-2: var(--color-accent); --chart-3: #E11D68; --chart-4: #2F6AE8; --chart-5: #16A34A; --chart-6: #EA580C; --chart-grid: rgba(0, 0, 0, 0.06); --chart-tick: #8A8A8A; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.07); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12); color-scheme: light; } /* ============================== Minimal White — mesmo DNA claro, primario grafite ============================== */ [data-theme="minimal_white"] { --color-primary: #141414; --color-primary-hover: #2E2E2E; --color-primary-light: rgba(20, 20, 20, 0.07); --color-primary-text: #FFFFFF; --color-primary-strong: #141414; --color-accent: #7C3AED; --color-accent-light: #A855F7; --color-accent-dark: #6D28D9; --color-accent-soft: rgba(124, 58, 237, 0.10); --color-accent-text: #FFFFFF; --color-bg-body: #FFFFFF; --color-bg-sidebar: #FAFAFA; --color-bg-card: #FFFFFF; --color-bg-card-hover: #FAFAFA; --color-bg-elevated: #F7F7F7; --color-bg-input: #FFFFFF; --color-bg-modal: #FFFFFF; --color-bg-topbar: var(--color-primary); --color-topbar-text: var(--color-primary-text); /* Barra grafite: chip um tom acima para nao sumir sobre ela */ --color-topbar-chip: #2E2E2E; --color-topbar-chip-text: #F7F7F7; --color-overlay: rgba(13, 13, 13, 0.45); --color-border: #E5E5E5; --color-border-light: #D9D9D9; --color-divider: #EFEFEF; --card-tab-border: #141414; --color-text-primary: #141414; --color-text-secondary: #525252; --color-text-muted: #8A8A8A; --color-text-inverse: #F7F7F7; --color-success: #16A34A; --color-success-light: rgba(22, 163, 74, 0.10); --color-warning: #D97706; --color-warning-light: rgba(217, 119, 6, 0.10); --color-error: #DC2626; --color-error-hover: #B91C1C; --color-error-light: rgba(220, 38, 38, 0.08); --color-info: #2F6AE8; --color-info-light: rgba(47, 106, 232, 0.08); --color-neutral-light: rgba(82, 82, 82, 0.08); --chart-1: #141414; --chart-2: var(--color-accent); --chart-3: #E11D68; --chart-4: #2F6AE8; --chart-5: #16A34A; --chart-6: #EA580C; --chart-grid: rgba(0, 0, 0, 0.06); --chart-tick: #8A8A8A; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.07); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12); color-scheme: light; } /* ============================== Industrial Blue ============================== */ [data-theme="industrial_blue"] { --color-primary: #407EFE; --color-primary-hover: #2F6AE8; --color-primary-light: rgba(64, 126, 254, 0.18); --color-primary-text: #FFFFFF; --color-primary-strong: #6B9BFF; --color-accent: #A855F7; --color-bg-body: #0F172A; --color-bg-sidebar: #111A2E; --color-bg-card: #1E293B; --color-bg-card-hover: #243247; --color-bg-elevated: #2A3850; --color-bg-input: #1E293B; --color-bg-modal: #1E293B; --color-border: #334155; --color-border-light: #475569; --color-divider: #2A3850; --color-text-primary: #F1F5F9; --color-text-secondary: #94A3B8; --color-text-muted: #64748B; --chart-4: #FCE803; --chart-tick: #64748B; --chart-tooltip-bg: #0F172A; --chart-tooltip-border: #334155; } /* ============================== Granite Black ============================== */ [data-theme="granite_black"] { --color-primary: #A3A3A3; --color-primary-hover: #8A8A8A; --color-primary-light: rgba(163, 163, 163, 0.16); --color-primary-text: #0D0D0D; --color-primary-strong: #D4D4D4; --color-accent: #A855F7; --color-bg-body: #111827; --color-bg-sidebar: #151E2E; --color-bg-card: #1F2937; --color-bg-card-hover: #273344; --color-bg-elevated: #2B3748; --color-bg-input: #1F2937; --color-bg-modal: #1F2937; --color-border: #374151; --color-border-light: #4B5563; --color-divider: #2B3748; --color-text-primary: #F9FAFB; --color-text-secondary: #9CA3AF; --color-text-muted: #6B7280; --chart-1: #FCE803; --chart-tick: #6B7280; } /* ============================== Dark Purple ============================== */ [data-theme="dark_purple"] { --color-primary: #7C3AED; --color-primary-hover: #6D28D9; --color-primary-light: rgba(124, 58, 237, 0.16); --color-primary-text: #FFFFFF; --color-primary-strong: #A78BFA; --color-accent: #FCE803; --color-accent-text: #0D0D0D; --color-accent-soft: rgba(252, 232, 3, 0.12); --color-bg-body: #0A0A0F; --color-bg-sidebar: #13111C; --color-bg-card: #1A1725; --color-bg-card-hover: #221E30; --color-bg-elevated: #262136; --color-bg-input: #1A1725; --color-bg-modal: #1A1725; --color-border: #2D2640; --color-border-light: #3D3555; --color-divider: #262136; --chart-tooltip-bg: #13111C; --chart-tooltip-border: #3D3555; }