From 3f11a2d6b3a7b5f0cb6cc1a09f1b9ef0773912f6 Mon Sep 17 00:00:00 2001
From: Shintaro Jokagi <taroj1205@gmail.com>
Date: Sun, 16 Mar 2025 18:17:40 +1300
Subject: [PATCH] chore(bg): replace the bg for buttons with a subtle
 background color

---
 src/components/Button.astro   |  2 +-
 src/components/Features.astro | 10 +++++-----
 src/layouts/Layout.astro      |  2 ++
 tailwind.config.mjs           |  1 +
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/Button.astro b/src/components/Button.astro
index 6798d34..8f109ee 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -24,7 +24,7 @@ const {
           : isAlert
             ? 'bg-red-300 text-dark'
             : !isBordered
-              ? 'bg-[rgba(0,0,0,.05)]'
+              ? 'bg-subtle'
               : '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm',
       ]}
     >
diff --git a/src/components/Features.astro b/src/components/Features.astro
index b092569..7eb656c 100644
--- a/src/components/Features.astro
+++ b/src/components/Features.astro
@@ -235,20 +235,20 @@ const {
 
 <style>
   .feature {
-    @apply w-full cursor-pointer select-none rounded-lg p-4 hover:bg-[rgba(0,0,0,.05)] dark:hover:bg-white/10;
+    @apply w-full cursor-pointer select-none rounded-lg p-4 hover:bg-subtle;
     transition: all 0.2s ease-in-out;
-    
+
     &[data-active='true'] {
-      @apply bg-[rgba(0,0,0,.05)] dark:bg-white/10;
+      @apply bg-subtle;
     }
   }
 
   .feature-tab {
-    @apply rounded-lg px-4 py-2 text-lg font-medium hover:bg-[rgba(0,0,0,.05)] dark:hover:bg-white/10;
+    @apply rounded-lg px-4 py-2 text-lg font-medium hover:bg-subtle;
     transition: all 0.2s ease-in-out;
 
     &[data-active='true'] {
-      @apply bg-[rgba(0,0,0,.05)] dark:bg-white/10;
+      @apply bg-subtle;
     }
   }
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index c27b760..ab1f793 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -127,11 +127,13 @@ import MobileNavBar from '../components/MobileNavBar'
     --zen-paper: #f2f0e3;
     --zen-dark: #2e2e2e;
     --zen-muted: rgba(0, 0, 0, 0.05);
+    --zen-subtle: rgba(0,0,0,0.05);
 
     &[data-theme='dark'] {
       --zen-paper: #1f1f1f;
       --zen-dark: #d1cfc0;
       --zen-muted: rgba(255, 255, 255, 0.05);
+      --zen-subtle: rgba(255,255,255,0.1);
     }
   }
 
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 7d8f3fc..997066f 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -12,6 +12,7 @@ export default {
         paper: 'var(--zen-paper)',
         coral: '#F76F53',
         dark: 'var(--zen-dark)',
+        subtle: 'var(--zen-subtle)',
         muted: 'var(--zen-muted)',
         'zen-blue': '#6287f5',
         'zen-green': '#63f78b',