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

fix: dim accent color for background blobs

Browse Source 
CSS wave-blobs now use accent-800 instead of accent-500 for a subdued
background glow. Aurora WebGL shader receives a darkened accent (45%
brightness) so bright accent colors like #e85002 no longer produce
overly intense background blobs while button colors stay unchanged.
This commit is contained in:
c0mrade
2026-02-04 14:51:12 +03:00
parent 576893f5c6
commit bb32cd8757
2 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/layout/AppShell/Aurora.tsx
View File

@@ -107,8 +107,23 @@ function hexToRgb(hex: string): [number, number, number] {
return [r, g, b]; return [r, g, b];
} }
// Reduce lightness of a hex color for subdued background blobs
function dimAccent(hex: string, factor = 0.45): string {
hex = hex.replace('#', '');
if (hex.length === 3) {
hex = hex
.split('')
.map((c) => c + c)
.join('');
}
const r = Math.round(parseInt(hex.substring(0, 2), 16) * factor);
const g = Math.round(parseInt(hex.substring(2, 4), 16) * factor);
const b = Math.round(parseInt(hex.substring(4, 6), 16) * factor);
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
}
function generateColorStops(background: string, surface: string, accent: string): string[] { function generateColorStops(background: string, surface: string, accent: string): string[] {
return [background, surface, accent]; return [background, surface, dimAccent(accent)];
} }
export function Aurora() { export function Aurora() {

6
src/styles/globals.css
View File

@@ -1436,7 +1436,7 @@ input[type='checkbox']:hover:not(:checked) {
.wave-blob-1 { .wave-blob-1 {
width: 400px; width: 400px;
height: 400px; height: 400px;
background: radial-gradient(circle, rgba(var(--color-accent-500), 0.6) 0%, transparent 70%); background: radial-gradient(circle, rgba(var(--color-accent-800), 0.6) 0%, transparent 70%);
top: -15%; top: -15%;
left: -10%; left: -10%;
animation: wave1 20s ease-in-out infinite; /* Slower = less CPU */ animation: wave1 20s ease-in-out infinite; /* Slower = less CPU */
@@ -1517,7 +1517,7 @@ input[type='checkbox']:hover:not(:checked) {
} }
.light .wave-blob-1 { .light .wave-blob-1 {
background: radial-gradient(circle, rgba(var(--color-accent-500), 0.7) 0%, transparent 70%); background: radial-gradient(circle, rgba(var(--color-accent-800), 0.7) 0%, transparent 70%);
} }
/* Mobile: brighter and faster animations */ /* Mobile: brighter and faster animations */
@@ -1530,7 +1530,7 @@ input[type='checkbox']:hover:not(:checked) {
.wave-blob-1 { .wave-blob-1 {
width: 300px; width: 300px;
height: 300px; height: 300px;
background: radial-gradient(circle, rgba(var(--color-accent-500), 0.8) 0%, transparent 70%); background: radial-gradient(circle, rgba(var(--color-accent-800), 0.8) 0%, transparent 70%);
animation: wave1-mobile 12s ease-in-out infinite; animation: wave1-mobile 12s ease-in-out infinite;
} }