/* ============================================================ FAMILIA DE TEMAS: PRIME ------------------------------------------------------------ Camada compartilhada por todas as variacoes de cor. Carregada junto com o arquivo da variacao ativa. ARQUITETURA O bundle aplica a classe do tema-base em e define ali ~200 variaveis --ep-*. Das 80 semanticas, 79 sao var() para as rampas de cor. Sobrescrevendo as rampas, o site inteiro muda. .prime -> este arquivo (ouro, acentos, raios, gradientes) .prime-verde -> arquivo da variacao (primaria, neutra, inverse) Especificidade html.prime (0,1,1) vence a do tema-base (0,1,0). ============================================================ */ html.prime { /* ---------- SECUNDARIA: OURO ---------- Compartilhada por todas as variacoes: e o que mantem a familia coesa. Botao de login, valores premiados, selos. */ --ep-secondary-secondary-900: rgb(74, 52, 0); --ep-secondary-secondary-800: rgb(110, 78, 0); --ep-secondary-secondary-700: rgb(155, 110, 0); --ep-secondary-secondary-600: rgb(200, 143, 1); --ep-secondary-secondary-500: rgb(255, 183, 2); --ep-secondary-secondary-400: rgb(252, 208, 0); --ep-secondary-secondary-300: rgb(252, 228, 0); --ep-secondary-secondary-200: rgb(253, 240, 130); --ep-secondary-secondary-100: rgb(254, 248, 200); --ep-secondary-secondary-Opacity: rgba(255, 183, 2, .4); /* ---------- ACENTOS DE STATUS ---------- Semantica fixa, igual em todas as variacoes. Erro e sempre vermelho, sucesso e sempre verde, independente do tema. */ --ep-accent-red: rgb(214, 31, 31); --ep-accent-green: rgb(58, 182, 24); --ep-accent-orange: rgb(252, 151, 76); --ep-accent-yellow: rgb(252, 208, 0); --ep-accent-blue: rgb(24, 140, 165); --ep-accent-colors-red: rgb(214, 31, 31); --ep-accent-colors-green: rgb(58, 182, 24); --ep-accent-colors-orange: rgb(252, 151, 76); --ep-accent-colors-yellow: rgb(252, 208, 0); --ep-accent-colors-blue: rgb(24, 140, 165); /* ---------- RAIOS ---------- */ --ep-border-radius-surface-small: .75rem; --ep-border-radius-surface-default: .75rem; --ep-border-radius-surface-large: 1.25rem; /* ---------- GRADIENTES ---------- Por padrao o tema-base monta o gradiente primario como primary -> inverse, o que mistura duas familias de cor. Aqui os dois extremos saem da propria rampa primaria, entao o CTA fica claro -> escuro na cor da variacao ativa. */ --ep-color-background-fill-gradients-primary-a: var(--ep-primary-primary-300); --ep-color-background-fill-gradients-primary-b: var(--ep-primary-primary-500); --ep-color-background-fill-gradients-secondary-a: var(--ep-secondary-secondary-300); --ep-color-background-fill-gradients-secondary-b: var(--ep-secondary-secondary-500); }