feat: update background colors

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 {

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 */
+  /* Background colors */
-  --color-background: light-dark(var(--color-neutral-200), var(--color-stone-700));
+  --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-stone-800) 20%, transparent));
+  --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-neutral-100) 80%, transparent), color-mix(in srgb, var(--color-neutral-800) 60%, 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 */

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
 }
 

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
+         border border-mist-100/20 dark:border-mist-700/20
-         bg-background-card hover:bg-neutral-100 dark:hover:bg-neutral-800/90
+         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
 }
 

src/styles/utilities-misc.css

@@ -1,7 +1,7 @@
 /* Nav */
 @utility nav-base {
-  @apply border border-neutral-100 dark:border-stone-500/20
+  @apply border border-mist-100/20 dark:border-mist-700/20
-         bg-neutral-100 dark:bg-neutral-800
+         bg-mist-100/80 dark:bg-mist-900/40
          shadow-xs dark:shadow-md
 }