/* ========================================================================== WooPanel — Design Tokens (CSS Custom Properties) Parte 5: Arquitetura de cores centralizada e configurável. ESCOPO: Todas as variáveis são definidas dentro da classe .woopanel para evitar conflitos com o tema, Elementor, WooCommerce e outros plugins. Não utilizar :root para evitar poluição do escopo global. HIERARQUIA DE CONFIGURAÇÃO (preparada para implementação futura): 1. Valores padrão definidos aqui (woopanel-tokens.css) ↓ sobrescrito por 2. Valores salvos via WP Settings API (PHP injeta ↓ sobrescrito por 3. Personalização no frontend (JS do color picker altera a propriedade CSS inline no elemento .woopanel) Exemplo: document.querySelector('.woopanel').style.setProperty('--woopanel-color-primary', novaCorHex); NOMENCLATURA: Prefixo exclusivo --woopanel- em todos os tokens para evitar conflito com qualquer outro plugin, tema ou framework CSS. ========================================================================== */ .woopanel { /* ----------------------------------------------------------------------- TIPOGRAFIA ----------------------------------------------------------------------- */ /** Família tipográfica padrão (herda do sistema, compatível com WP). */ --woopanel-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* ----------------------------------------------------------------------- CORES PRINCIPAIS Utilizadas em botões primários, links de ação principal e destaques. ----------------------------------------------------------------------- */ /** Cor primária — ações principais, links ativos, foco. */ --woopanel-color-primary: #0c85d0; /** Cor primária em hover — versão levemente mais escura. */ --woopanel-color-primary-hover: #0a70b0; /** Fundo suave da cor primária — usado em badges e botões terciários. */ --woopanel-color-primary-bg: #e7f5ff; /** Borda da cor primária — usado em badges e inputs focados. */ --woopanel-color-primary-border: #a5d8ff; /** Cor secundária — ações de duplicação, variações, badges especiais. */ --woopanel-color-secondary: #6741d9; /** Cor secundária em hover. */ --woopanel-color-secondary-hover: #5635b8; /** Fundo suave da cor secundária. */ --woopanel-color-secondary-bg: #f3f0ff; /** Borda da cor secundária. */ --woopanel-color-secondary-border: #d0bfff; /** Cor de destaque — âmbar, usado em badges de tipo agrupado e alertas. */ --woopanel-color-accent: #d48806; /** Fundo suave do accent. */ --woopanel-color-accent-bg: #fff9db; /* ----------------------------------------------------------------------- FUNDO (BACKGROUNDS) ----------------------------------------------------------------------- */ /** Fundo base da página/seção — branco puro. */ --woopanel-bg-base: #ffffff; /** Fundo de superfície — cabeçalhos de tabela, barras laterais. */ --woopanel-bg-surface: #f6f7f8; /** Fundo hover de linhas e elementos interativos. */ --woopanel-bg-hover: #f8f9fb; /** Fundo sutil — placeholders, imagens sem imagem, badges neutros. */ --woopanel-bg-subtle: #f0f1f2; /** Fundo de elementos desabilitados e muted. */ --woopanel-bg-muted: #f1f3f5; /* ----------------------------------------------------------------------- TEXTOS ----------------------------------------------------------------------- */ /** Texto principal — títulos, nomes de produto, conteúdo principal. */ --woopanel-text-primary: #1d2327; /** Texto base — parágrafos e células da tabela. */ --woopanel-text-base: #2c3338; /** Texto secundário — SKU, datas, metadados. */ --woopanel-text-secondary: #787c82; /** Texto desabilitado/placeholder — "Sem imagem", "Sem categoria", etc. */ --woopanel-text-disabled: #9aa2ab; /** Texto neutro — badges de tipo "Externo" e outros. */ --woopanel-text-neutral: #495057; /* ----------------------------------------------------------------------- BORDAS ----------------------------------------------------------------------- */ /** Borda padrão — tabelas, imagens, wrappers. */ --woopanel-border-default: #e0e4e8; /** Borda sutil — separadores internos de células e linhas. */ --woopanel-border-subtle: #eef0f2; /** Borda forte — cabeçalho de tabela (linha inferior). */ --woopanel-border-strong: #dcdcde; /** Borda de separação de colunas no cabeçalho. */ --woopanel-border-header: #e8ebee; /* ----------------------------------------------------------------------- ESTADO: SUCESSO Usado em: estoque em dia, status publicado, feedback positivo. ----------------------------------------------------------------------- */ /** Cor de texto/ícone de sucesso. */ --woopanel-color-success: #2b8a3e; /** Fundo suave de sucesso. */ --woopanel-color-success-bg: #ebfbee; /** Borda de sucesso. */ --woopanel-color-success-border: #b2f2bb; /** Sombra de foco de sucesso (ring). */ --woopanel-color-success-ring: rgba(43, 138, 62, 0.15); /* ----------------------------------------------------------------------- ESTADO: PERIGO / ERRO Usado em: estoque esgotado, botão excluir, feedback de erro. ----------------------------------------------------------------------- */ /** Cor de texto/ícone de perigo. */ --woopanel-color-danger: #c92a2a; /** Fundo suave de perigo. */ --woopanel-color-danger-bg: #fff5f5; /** Borda de perigo. */ --woopanel-color-danger-border: #ffc9c9; /** Fundo hover de perigo. */ --woopanel-color-danger-bg-hover: #ffe3e3; /** Sombra de foco de perigo (ring). */ --woopanel-color-danger-ring: rgba(201, 42, 42, 0.2); /* ----------------------------------------------------------------------- ESTADO: AVISO Usado em: alertas de configuração, avisos gerais. ----------------------------------------------------------------------- */ /** Cor de texto de aviso. */ --woopanel-color-warning-text: #665000; /** Fundo de aviso. */ --woopanel-color-warning-bg: #fff8e5; /** Cor da borda/accent de aviso. */ --woopanel-color-warning: #ffb900; /* ----------------------------------------------------------------------- ESTADO: INFORMAÇÃO Reservado para uso futuro em notificações informativas. ----------------------------------------------------------------------- */ /** Cor de texto informativo. */ --woopanel-color-info: #0c85d0; /** Fundo informativo. */ --woopanel-color-info-bg: #e7f5ff; /* ----------------------------------------------------------------------- STATUS DO PRODUTO Variáveis semânticas para os dois status suportados na tabela. Permitem personalização individual de cada status no futuro. ----------------------------------------------------------------------- */ /** Status Publicado — texto. */ --woopanel-status-publish-color: #2b8a3e; /** Status Publicado — fundo. */ --woopanel-status-publish-bg: #ebfbee; /** Status Publicado — borda. */ --woopanel-status-publish-border: #b2f2bb; /** Status Publicado — foco/ring. */ --woopanel-status-publish-ring: rgba(43, 138, 62, 0.15); /** Status Privado — texto. */ --woopanel-status-private-color: #c2255c; /** Status Privado — fundo. */ --woopanel-status-private-bg: #fff0f6; /** Status Privado — borda. */ --woopanel-status-private-border: #ffb8d9; /** Status Privado — foco/ring. */ --woopanel-status-private-ring: rgba(194, 37, 92, 0.15); /* ----------------------------------------------------------------------- TIPOS DE PRODUTO Badge colorido por tipo de produto no WooCommerce. ----------------------------------------------------------------------- */ /** Tipo: Simples — texto. */ --woopanel-type-simple-color: #0c85d0; /** Tipo: Simples — fundo. */ --woopanel-type-simple-bg: #e7f5ff; /** Tipo: Variável — texto. */ --woopanel-type-variable-color: #6741d9; /** Tipo: Variável — fundo. */ --woopanel-type-variable-bg: #f3f0ff; /** Tipo: Agrupado — texto. */ --woopanel-type-grouped-color: #d48806; /** Tipo: Agrupado — fundo. */ --woopanel-type-grouped-bg: #fff9db; /** Tipo: Externo / Outros — texto. */ --woopanel-type-other-color: #495057; /** Tipo: Externo / Outros — fundo. */ --woopanel-type-other-bg: #f1f3f5; /* ----------------------------------------------------------------------- AÇÕES (BOTÕES) Um conjunto de cores semântico para cada ação da tabela. Permite personalização individual de cada botão no futuro. ----------------------------------------------------------------------- */ /* --- Botão Editar --- */ --woopanel-action-edit-color: #0c85d0; --woopanel-action-edit-bg: #e7f5ff; --woopanel-action-edit-border: #a5d8ff; --woopanel-action-edit-bg-hover: #d0ebff; --woopanel-action-edit-border-hover: #0c85d0; --woopanel-action-edit-ring: rgba(12, 133, 208, 0.2); /* --- Botão Duplicar Produto --- */ --woopanel-action-duplicate-color: #6741d9; --woopanel-action-duplicate-bg: #f3f0ff; --woopanel-action-duplicate-border: #d0bfff; --woopanel-action-duplicate-bg-hover: #e5dbff; --woopanel-action-duplicate-border-hover: #6741d9; --woopanel-action-duplicate-ring: rgba(103, 65, 217, 0.2); /* --- Botão Excluir --- */ --woopanel-action-delete-color: #c92a2a; --woopanel-action-delete-bg: #fff5f5; --woopanel-action-delete-border: #ffc9c9; --woopanel-action-delete-bg-hover: #ffe3e3; --woopanel-action-delete-border-hover: #c92a2a; --woopanel-action-delete-ring: rgba(201, 42, 42, 0.2); /* ----------------------------------------------------------------------- SOMBRAS E ELEVAÇÃO ----------------------------------------------------------------------- */ /** Sombra leve — wrappers, cards, tabelas. */ --woopanel-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.07); /** Ring de foco genérico — para elementos interativos sem cor semântica definida. */ --woopanel-shadow-focus: 0 0 0 2px rgba(12, 133, 208, 0.2); /* ----------------------------------------------------------------------- TRANSIÇÕES Valores padrão de animação para elementos interativos. ----------------------------------------------------------------------- */ --woopanel-transition-fast: 0.1s ease; --woopanel-transition-base: 0.15s ease; --woopanel-transition-slow: 0.3s ease; }