/** * ============================================================ * StockMVP - Design Tokens (Variáveis Globais de Tema) * ============================================================ * Fonte única de verdade para cores, tipografia, sombras e raios * de borda de todo o sistema. Para mudar uma cor no projeto INTEIRO * (ex: tom de roxo do botão principal), mude APENAS aqui. * * Como funciona a troca de tema: * - Tema claro (padrão): sem atributo, ou data-theme="light" * - Tema escuro: * - A troca é feita por /shared/js/theme-toggle.js, que salva a * escolha em localStorage e aplica o atributo em . * * Qualquer CSS de página específica (dashboard.css, login.css, etc) * deve usar estas variáveis em vez de cores fixas, para funcionar * automaticamente nos dois temas. * ============================================================ */ :root, :root[data-theme="light"] { /* Paleta principal (roxo + azul) */ --color-primary: #6C4CE0; --color-primary-dark: #5636C4; --color-secondary: #2F5DFF; --gradient-primary: linear-gradient(135deg, #6C4CE0 0%, #2F5DFF 100%); /* Fundo e superfícies */ --color-bg: #F5F7FB; --color-surface: #FFFFFF; --color-surface-alt: #F1F4FA; --color-border: #E3E8F2; /* Traço mais firme: borda de tabela, contorno de botão neutro, divisória que precisa ser vista. --color-border sozinho some no fundo claro. */ --color-border-strong: #CBD3E1; /* Fundo da linha sob o ponteiro (tabelas e listas). */ --color-surface-hover: #F7F9FD; /* Texto */ --color-text: #131A2A; --color-text-muted: #64708A; --color-text-inverse: #FFFFFF; /* Estados semânticos */ --color-success: #22C55E; --color-success-bg: #E9FBF0; --color-warning: #F59E0B; --color-warning-bg: #FEF6E7; --color-danger: #E63946; --color-danger-bg: #FCEAEC; --color-info: #2F5DFF; --color-info-bg: #EAF0FF; /* Sombra e raio de borda Sombra curta e em duas camadas (contato + difusa) em vez de um borrão só: o cartão parece apoiado na tela, e não flutuando. O contorno de 1px (--color-border) é que separa o cartão do fundo — a sombra é acabamento, não estrutura. */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 10px rgba(16, 24, 40, 0.06), 0 10px 24px rgba(16, 24, 40, 0.08); --shadow-lg: 0 8px 20px rgba(16, 24, 40, 0.12), 0 24px 48px rgba(16, 24, 40, 0.16); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; /* Menu lateral: a largura compacta (só ícones) é o espaço que o conteúdo realmente perde — a largura cheia só aparece por cima, no hover. Estas duas medidas valem para os dois temas, por isso ficam só aqui. */ --sidebar-width: 280px; --sidebar-width-compact: 76px; /* Tipografia */ --font-display: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; } :root[data-theme="dark"] { --color-primary: #8567FF; --color-primary-dark: #6C4CE0; --color-secondary: #5B8CFF; --gradient-primary: linear-gradient(135deg, #8567FF 0%, #5B8CFF 100%); --color-bg: #0C0F1C; --color-surface: #151A2B; --color-surface-alt: #1D2337; --color-border: #2A3150; --color-border-strong: #3B4470; --color-surface-hover: #1B2135; --color-text: #EDEFF7; --color-text-muted: #949BBA; --color-text-inverse: #0F1220; --color-success: #34D399; --color-success-bg: rgba(52, 211, 153, 0.14); --color-warning: #FBBF24; --color-warning-bg: rgba(251, 191, 36, 0.14); --color-danger: #F87171; --color-danger-bg: rgba(248, 113, 113, 0.14); --color-info: #5B8CFF; --color-info-bg: rgba(91, 140, 255, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.45), 0 24px 48px rgba(0, 0, 0, 0.55); } /** * ============================================================ * Paletas de cor por loja * ============================================================ * O super-admin escolhe uma dessas chaves por loja em /admin > editar * loja > "Cor da loja" (ver StoreCatalogService.PALETAS_VALIDAS no * backend — as chaves aqui têm que bater com as de lá). O front lê a * escolha em GET /catalog-settings e aplica `data-palette=""` * na tag (ver aplicarPaletaDaLoja em shared/js/http-client.js). * * Só as 4 variáveis "de marca" (botões, ícone/item ativo do menu) mudam * — cores semânticas (sucesso/aviso/perigo/info) ficam sempre iguais * pra não perder o significado. Sem loja com paleta escolhida (ou chave * "roxo"), cai no roxo padrão acima — por isso não existe bloco "roxo" * aqui embaixo, é só a ausência do atributo. * * De propósito é uma lista curta e pronta, não um seletor de cor livre: * cada tom já foi escolhido pra ter contraste bom com o texto branco * (tema claro) ou quase-preto (tema escuro) que aparece em cima dele. */ :root[data-palette="azul"] { --color-primary: #2563EB; --color-primary-dark: #1D4ED8; --color-secondary: #0EA5E9; --gradient-primary: linear-gradient(135deg, #2563EB 0%, #0EA5E9 100%); } :root[data-theme="dark"][data-palette="azul"] { --color-primary: #60A5FA; --color-primary-dark: #2563EB; --color-secondary: #38BDF8; --gradient-primary: linear-gradient(135deg, #60A5FA 0%, #38BDF8 100%); } :root[data-palette="verde"] { --color-primary: #0D9488; --color-primary-dark: #0F766E; --color-secondary: #14B8A6; --gradient-primary: linear-gradient(135deg, #0D9488 0%, #14B8A6 100%); } :root[data-theme="dark"][data-palette="verde"] { --color-primary: #2DD4BF; --color-primary-dark: #0D9488; --color-secondary: #5EEAD4; --gradient-primary: linear-gradient(135deg, #2DD4BF 0%, #5EEAD4 100%); } :root[data-palette="laranja"] { --color-primary: #EA580C; --color-primary-dark: #C2410C; --color-secondary: #FB923C; --gradient-primary: linear-gradient(135deg, #EA580C 0%, #FB923C 100%); } :root[data-theme="dark"][data-palette="laranja"] { --color-primary: #FB923C; --color-primary-dark: #EA580C; --color-secondary: #FDBA74; --gradient-primary: linear-gradient(135deg, #FB923C 0%, #FDBA74 100%); } :root[data-palette="rosa"] { --color-primary: #DB2777; --color-primary-dark: #BE185D; --color-secondary: #EC4899; --gradient-primary: linear-gradient(135deg, #DB2777 0%, #EC4899 100%); } :root[data-theme="dark"][data-palette="rosa"] { --color-primary: #F472B6; --color-primary-dark: #DB2777; --color-secondary: #F9A8D4; --gradient-primary: linear-gradient(135deg, #F472B6 0%, #F9A8D4 100%); } :root[data-palette="vermelho"] { --color-primary: #DC2626; --color-primary-dark: #B91C1C; --color-secondary: #F87171; --gradient-primary: linear-gradient(135deg, #DC2626 0%, #F87171 100%); } :root[data-theme="dark"][data-palette="vermelho"] { --color-primary: #F87171; --color-primary-dark: #DC2626; --color-secondary: #FCA5A5; --gradient-primary: linear-gradient(135deg, #F87171 0%, #FCA5A5 100%); }