From 095f041891c4d25e956b0082ff762d8dc8dec967 Mon Sep 17 00:00:00 2001 From: deyvisonwanderley Date: Sun, 23 Nov 2025 04:58:38 -0300 Subject: [PATCH] feat: update CSS theming and enhance variable application for improved UI consistency - Refactored CSS styles to utilize HSL color values for better theme adaptability. - Added custom light and dark themes with comprehensive variable definitions to ensure consistent styling across the application. - Implemented a mechanism to force CSS variable updates, ensuring that custom themes are applied correctly during runtime. --- apps/web/src/app.css | 99 +++++++++++++++++++++++++++++++-- apps/web/src/lib/utils/temas.ts | 8 +++ 2 files changed, 102 insertions(+), 5 deletions(-) diff --git a/apps/web/src/app.css b/apps/web/src/app.css index cacf989..5af36f7 100644 --- a/apps/web/src/app.css +++ b/apps/web/src/app.css @@ -34,9 +34,9 @@ inset: -2px; border-radius: 1.15rem; box-shadow: - 0 0 0 1px rgba(15, 23, 42, 0.04), - 0 14px 32px -22px rgba(15, 23, 42, 0.45), - 0 6px 18px -16px rgba(102, 126, 234, 0.35); + 0 0 0 1px hsl(var(--bc) / 0.04), + 0 14px 32px -22px hsl(var(--bc) / 0.45), + 0 6px 18px -16px hsl(var(--p) / 0.35); opacity: 0.55; transition: opacity 220ms ease, transform 220ms ease; pointer-events: none; @@ -48,7 +48,7 @@ position: absolute; inset: 0; border-radius: 1rem; - background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.12)); + background: linear-gradient(135deg, hsl(var(--p) / 0.12), hsl(var(--s) / 0.12)); opacity: 0; transform: scale(0.96); transition: opacity 220ms ease, transform 220ms ease; @@ -58,7 +58,7 @@ :where(.card, .card-hover):hover { transform: translateY(-6px); - box-shadow: 0 20px 45px -20px rgba(15, 23, 42, 0.35); + box-shadow: 0 20px 45px -20px hsl(var(--bc) / 0.35); } :where(.card, .card-hover):hover::before { @@ -156,6 +156,15 @@ html[data-theme="sgse-blue"] body, --tab-radius: 0.5rem; } +/* Garantir que todas as variáveis CSS sejam aplicadas em todos os elementos */ +html[data-theme] { + color-scheme: var(--color-scheme, light); +} + +html[data-theme] * { + color-scheme: inherit; +} + html[data-theme="sgse-green"], html[data-theme="sgse-green"] body, [data-theme="sgse-green"] { @@ -388,4 +397,84 @@ html[data-theme="sgse-corporate"] body, --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; +} + +/* Tema Light customizado para garantir funcionamento completo */ +html[data-theme="light"], +html[data-theme="light"] body, +[data-theme="light"] { + color-scheme: light; + --p: 217 91% 60%; + --pf: 217 91% 50%; + --pc: 0 0% 100%; + --s: 217 91% 60%; + --sf: 217 91% 50%; + --sc: 0 0% 100%; + --a: 217 91% 60%; + --af: 217 91% 50%; + --ac: 0 0% 100%; + --n: 217 20% 17%; + --nf: 217 20% 10%; + --nc: 0 0% 100%; + --b1: 0 0% 100%; + --b2: 217 20% 95%; + --b3: 217 20% 90%; + --bc: 217 20% 17%; + --in: 217 91% 60%; + --inc: 0 0% 100%; + --su: 142 76% 36%; + --suc: 0 0% 100%; + --wa: 38 92% 50%; + --wac: 0 0% 100%; + --er: 0 84% 60%; + --erc: 0 0% 100%; + --rounded-box: 1rem; + --rounded-btn: 0.5rem; + --rounded-badge: 1.9rem; + --animation-btn: 0.25s; + --animation-input: 0.2s; + --btn-focus-scale: 0.95; + --border-btn: 1px; + --tab-border: 1px; + --tab-radius: 0.5rem; +} + +/* Tema Dark customizado para garantir funcionamento completo */ +html[data-theme="dark"], +html[data-theme="dark"] body, +[data-theme="dark"] { + color-scheme: dark; + --p: 217 91% 60%; + --pf: 217 91% 50%; + --pc: 0 0% 100%; + --s: 217 91% 60%; + --sf: 217 91% 50%; + --sc: 0 0% 100%; + --a: 217 91% 60%; + --af: 217 91% 50%; + --ac: 0 0% 100%; + --n: 217 30% 15%; + --nf: 217 30% 8%; + --nc: 0 0% 100%; + --b1: 217 30% 10%; + --b2: 217 30% 15%; + --b3: 217 30% 20%; + --bc: 217 10% 90%; + --in: 217 91% 60%; + --inc: 0 0% 100%; + --su: 142 76% 36%; + --suc: 0 0% 100%; + --wa: 38 92% 50%; + --wac: 0 0% 100%; + --er: 0 84% 60%; + --erc: 0 0% 100%; + --rounded-box: 1rem; + --rounded-btn: 0.5rem; + --rounded-badge: 1.9rem; + --animation-btn: 0.25s; + --animation-input: 0.2s; + --btn-focus-scale: 0.95; + --border-btn: 1px; + --tab-border: 1px; + --tab-radius: 0.5rem; } \ No newline at end of file diff --git a/apps/web/src/lib/utils/temas.ts b/apps/web/src/lib/utils/temas.ts index 9e9d43e..da4c782 100644 --- a/apps/web/src/lib/utils/temas.ts +++ b/apps/web/src/lib/utils/temas.ts @@ -171,6 +171,14 @@ export function aplicarTema(temaId: TemaId | string | null | undefined): void { // Forçar reflow para garantir que o CSS seja aplicado void htmlElement.offsetHeight; + // Forçar atualização de todas as variáveis CSS + // Isso garante que os temas customizados sejam aplicados corretamente + if (typeof window !== 'undefined' && window.getComputedStyle) { + const computedStyle = window.getComputedStyle(htmlElement); + // Forçar recálculo das variáveis CSS + computedStyle.getPropertyValue('--p'); + } + // Disparar evento customizado para notificar mudança de tema if (typeof window !== 'undefined') { window.dispatchEvent(new CustomEvent('themechange', { detail: { theme: nomeDaisyUI } }));