From f71b28adf06779532b6303568a2b6e3b5020257a Mon Sep 17 00:00:00 2001 From: Alex Lebens Date: Thu, 21 May 2026 15:57:34 -0500 Subject: [PATCH] feat: update background colors --- src/layouts/BaseLayout.astro | 11 +---------- src/styles/global.css | 13 +++++++++---- src/styles/utilities-buttons.css | 4 ++-- src/styles/utilities-cards.css | 8 ++++---- src/styles/utilities-misc.css | 4 ++-- 5 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 7e9ed49..448bbc7 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -171,7 +171,7 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`; .bg { animation: slide 25s ease-in-out infinite alternate; will-change: transform; - background-image: linear-gradient(-55deg, var(--bg-primary) 33.3%, var(--bg-secondary) 33.3%, var(--bg-secondary) 66.6%, var(--bg-tertiary) 66.6%); + background-image: linear-gradient(-55deg, var(--color-background-1) 33.3%, var(--color-background-2) 33.3%, var(--color-background-2) 66.6%, var(--color-background-3) 66.6%); filter: blur(40px); top: 0; bottom: 0; @@ -180,15 +180,6 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`; opacity: .5; position: fixed; z-index: -1; - --bg-primary: #e5e5e5; - --bg-secondary: #dce3eb; - --bg-tertiary: #f4f6f8; - } - - :global(.dark) .bg { - --bg-primary: #3b3836; - --bg-secondary: #332f2e; - --bg-tertiary: #44403c; } .bg2 { diff --git a/src/styles/global.css b/src/styles/global.css index 0893e8b..2446f99 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -39,11 +39,16 @@ --color-secondary: light-dark(var(--color-neutral-500), var(--color-neutral-400)); --color-secondary-hover: light-dark(var(--color-neutral-800), var(--color-neutral-200)); - /* Object colors */ - --color-background: light-dark(var(--color-neutral-200), var(--color-stone-700)); - --color-background-accent: light-dark(color-mix(in srgb, var(--color-slate-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent)); - --color-background-card: light-dark(color-mix(in srgb, var(--color-neutral-100) 80%, transparent), color-mix(in srgb, var(--color-neutral-800) 60%, transparent)); + /* Background colors */ + --color-background: light-dark(var(--color-neutral-200), var(--color-mist-800)); + --color-background-accent: light-dark(color-mix(in srgb, var(--color-slate-300) 40%, transparent), color-mix(in srgb, var(--color-mist-900) 20%, transparent)); + --color-background-card: light-dark(color-mix(in srgb, var(--color-mist-100) 80%, transparent), color-mix(in srgb, var(--color-mist-900) 50%, transparent)); + --color-background-1: light-dark(color-mix(in srgb, var(--color-mist-200) 75%, var(--color-slate-100)), color-mix(in srgb, var(--color-mist-700) 95%, var(--color-mist-950))); + --color-background-2: light-dark(color-mix(in srgb, var(--color-mist-400) 10%, var(--color-slate-100)), color-mix(in srgb, var(--color-mist-700) 80%, var(--color-mist-950))); + --color-background-3: light-dark(color-mix(in srgb, var(--color-mist-200) 85%, var(--color-slate-100)), color-mix(in srgb, var(--color-mist-700) 85%, var(--color-mist-950))); + + /* Object colors */ --color-divider: light-dark(color-mix(in srgb, var(--color-slate-400) 40%, transparent), color-mix(in srgb, var(--color-neutral-500) 50%, transparent)); /* Typography */ diff --git a/src/styles/utilities-buttons.css b/src/styles/utilities-buttons.css index 85df765..224756d 100644 --- a/src/styles/utilities-buttons.css +++ b/src/styles/utilities-buttons.css @@ -8,7 +8,7 @@ @utility button-base-hidden { @apply transition-all duration-300 border border-transparent - hover:bg-neutral-200 dark:hover:bg-neutral-700 + hover:bg-mist-200 dark:hover:bg-mist-700 p-2 } @@ -41,7 +41,7 @@ @utility button-bg-neutral { @apply transition-all duration-300 - border border-neutral-100 dark:border-stone-500/20 + border border-neutral-100 dark:border-mist-700/20 bg-background-card hover:bg-neutral-100 dark:hover:bg-neutral-800/90 } diff --git a/src/styles/utilities-cards.css b/src/styles/utilities-cards.css index 74da20f..9a05786 100644 --- a/src/styles/utilities-cards.css +++ b/src/styles/utilities-cards.css @@ -1,8 +1,8 @@ @utility card-base { @apply transition-all duration-300 rounded-xl - border border-neutral-100 dark:border-stone-500/20 - bg-background-card hover:bg-neutral-100 dark:hover:bg-neutral-800/90 + border border-mist-100/20 dark:border-mist-700/20 + bg-background-card hover:bg-neutral-100 dark:hover:bg-mist-900/70 shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg } @@ -10,7 +10,7 @@ @apply transition-all duration-300 rounded-2xl border border-transparent - hover:bg-neutral-400/20 dark:hover:bg-neutral-800/40 + hover:bg-mist-400/20 dark:hover:bg-mist-800/40 } @utility card-hover-icon-color { @@ -21,7 +21,7 @@ @utility card-hover-icon-scale { @apply transition-transform duration-300 will-change-transform - drop-shadow-md dark:drop-shadow-xl dark:drop-shadow-neutral-500/60 + drop-shadow-md dark:drop-shadow-xl dark:drop-shadow-mist-500/60 group-hover:scale-3d group-hover:scale-105 } diff --git a/src/styles/utilities-misc.css b/src/styles/utilities-misc.css index 387214f..111b967 100644 --- a/src/styles/utilities-misc.css +++ b/src/styles/utilities-misc.css @@ -1,7 +1,7 @@ /* Nav */ @utility nav-base { - @apply border border-neutral-100 dark:border-stone-500/20 - bg-neutral-100 dark:bg-neutral-800 + @apply border border-mist-100/20 dark:border-mist-700/20 + bg-mist-100/80 dark:bg-mist-900/40 shadow-xs dark:shadow-md }