etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 02:23:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: use dynamic champagne variables for light theme palette swap

Browse Source 
Replace hardcoded RGB values with var(--color-champagne-*) references
so the light theme respects admin-configured colors (background, surface,
text). Add !important to override inline styles from applyThemeColors.
Update card/glass/input/button overrides to use champagne-50 (dynamic
surface color) instead of hardcoded white.
This commit is contained in:
c0mrade
2026-02-04 13:10:27 +03:00
parent 9ac00c94a6
commit ecd912b16a
1 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/styles/globals.css
View File

@@ -217,21 +217,22 @@
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
/* Light theme: swap dark palette to champagne equivalents via CSS variables. /* Light theme: swap dark palette → dynamic champagne palette from API.
This automatically handles ALL opacity variants, hover states, borders, etc. */ Uses var() to reference values set by applyThemeColors().
!important overrides inline styles from applyThemeColors on :root. */
.light { .light {
--color-dark-50: 31, 26, 18; /* champagne-950 */ --color-dark-50: var(--color-champagne-950) !important;
--color-dark-100: 61, 52, 36; /* champagne-900 */ --color-dark-100: var(--color-champagne-900) !important;
--color-dark-200: 92, 79, 53; /* champagne-800 */ --color-dark-200: var(--color-champagne-800) !important;
--color-dark-300: 125, 107, 72; /* champagne-700 */ --color-dark-300: var(--color-champagne-700) !important;
--color-dark-400: 160, 139, 94; /* champagne-600 */ --color-dark-400: var(--color-champagne-600) !important;
--color-dark-500: 191, 164, 119; /* champagne-500 */ --color-dark-500: var(--color-champagne-500) !important;
--color-dark-600: 212, 188, 150; /* champagne-400 */ --color-dark-600: var(--color-champagne-400) !important;
--color-dark-700: 232, 212, 181; /* champagne-300 */ --color-dark-700: var(--color-champagne-300) !important;
--color-dark-800: 247, 231, 206; /* champagne-200 */ --color-dark-800: var(--color-champagne-50) !important;
--color-dark-850: 250, 240, 223; /* between champagne-100/200 */ --color-dark-850: var(--color-champagne-100) !important;
--color-dark-900: 254, 249, 240; /* champagne-100 */ --color-dark-900: var(--color-champagne-100) !important;
--color-dark-950: 247, 231, 206; /* champagne-200 (body bg) */ --color-dark-950: var(--color-champagne-200) !important;
} }
/* Custom scrollbar - Dark */ /* Custom scrollbar - Dark */
@@ -369,19 +370,19 @@
} }
.light .bento-card { .light .bento-card {
@apply border-champagne-300/50 bg-white/90 shadow-sm; @apply border-champagne-300/50 bg-champagne-50/90 shadow-sm;
/* Light Theme Glass Border */ /* Light Theme Glass Border */
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.03); box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.03);
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.light .bento-card { .light .bento-card {
@apply bg-white/80 backdrop-blur-sm; @apply bg-champagne-50/80 backdrop-blur-sm;
} }
} }
.light .bento-card-hover:hover { .light .bento-card-hover:hover {
@apply border-champagne-400/50 bg-white shadow-md; @apply border-champagne-400/50 bg-champagne-50 shadow-md;
transform: translateY(-4px); transform: translateY(-4px);
/* Intensify Light Theme Glass Border */ /* Intensify Light Theme Glass Border */
box-shadow: box-shadow:
@@ -614,7 +615,7 @@
/* Cards - Light */ /* Cards - Light */
.light .card { .light .card {
@apply border-champagne-300/50 bg-white/90 p-5 shadow-sm sm:p-6; @apply border-champagne-300/50 bg-champagne-50/90 p-5 shadow-sm sm:p-6;
border-radius: var(--bento-radius); border-radius: var(--bento-radius);
transform: translateZ(0); transform: translateZ(0);
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.03); box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.03);
@@ -622,12 +623,12 @@
@media (min-width: 1024px) { @media (min-width: 1024px) {
.light .card { .light .card {
@apply bg-white/80 backdrop-blur-sm; @apply bg-champagne-50/80 backdrop-blur-sm;
} }
} }
.light .card-hover { .light .card-hover {
@apply hover:border-champagne-400/50 hover:bg-white hover:shadow-md; @apply hover:border-champagne-400/50 hover:bg-champagne-50 hover:shadow-md;
} }
.light .card-glow { .light .card-glow {
@@ -636,13 +637,13 @@
/* Glass effect - Light (optimized for mobile) */ /* Glass effect - Light (optimized for mobile) */
.light .glass { .light .glass {
@apply border border-champagne-300/40 bg-white/90; @apply border border-champagne-300/40 bg-champagne-50/90;
transform: translateZ(0); transform: translateZ(0);
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.light .glass { .light .glass {
@apply bg-white/60 backdrop-blur-xl; @apply bg-champagne-50/60 backdrop-blur-xl;
} }
} }
@@ -656,7 +657,7 @@
} }
.light .btn-secondary { .light .btn-secondary {
@apply border border-champagne-300 bg-white text-champagne-800 hover:border-champagne-400 hover:bg-champagne-50 hover:text-champagne-900 focus-visible:ring-champagne-400 active:bg-champagne-100; @apply border border-champagne-300 bg-champagne-50 text-champagne-800 hover:border-champagne-400 hover:bg-champagne-100 hover:text-champagne-900 focus-visible:ring-champagne-400 active:bg-champagne-200;
} }
.light .btn-ghost { .light .btn-ghost {
@@ -673,7 +674,7 @@
/* Inputs - Light */ /* Inputs - Light */
.light .input { .light .input {
@apply rounded-xl border border-champagne-300 bg-white text-champagne-900 placeholder-champagne-400 focus:border-accent-400 focus:ring-accent-300/30; @apply rounded-xl border border-champagne-300 bg-champagne-50 text-champagne-900 placeholder-champagne-400 focus:border-accent-400 focus:ring-accent-300/30;
} }
.light .input-error { .light .input-error {