SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: update CSS theming and enhance variable application for improved UI consistency

Browse Source 
- 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.
This commit is contained in:
deyvisonwanderley
2025-11-23 04:58:38 -03:00
parent 467e04b605
commit 095f041891
2 changed files with 102 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
apps/web/src/app.css
View File

@@ -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;
}

8
apps/web/src/lib/utils/temas.ts
View File

@@ -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 } }));