style: change theme

src/components/buttons/play/play.module.css

@@ -8,11 +8,10 @@
   font-size: var(--font-base);
   line-height: 0;
   color: #022c22;
+  color: var(--color-neutral-200);
   cursor: pointer;
-  background-color: #10b981;
-  border: none;
-  border-top: 2px solid #34d399;
-  border-bottom: 3px solid #059669;
+  background-color: var(--color-neutral-950);
+  border: 1px solid var(--color-neutral-50);
   border-radius: 100px;
   outline: none;
 

src/components/buttons/unselect/unselect.module.css

@@ -9,10 +9,8 @@
   line-height: 0;
   color: var(--color-foreground);
   cursor: pointer;
-  background-color: #f43f5e;
-  border: none;
-  border-top: 2px solid #fb7185;
-  border-bottom: 3px solid #be123c;
+  background-color: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 100px;
   outline: none;
   transition: 0.2s;
@@ -21,13 +19,6 @@
   &.disabled {
     cursor: not-allowed;
   }
-
-  &.restore {
-    color: var(--color-neutral-200);
-    background-color: var(--color-neutral-700);
-    border-top-color: var(--color-neutral-950);
-    border-bottom-color: var(--color-neutral-600);
-  }
 }
 
 .tooltip {

src/components/buttons/unselect/unselect.tsx

@@ -48,7 +48,6 @@ export function UnselectButton() {
                 }
                 className={cn(
                   styles.unselectButton,
-                  hasHistory && styles.restore,
                   noSelected && !hasHistory && styles.disabled,
                 )}
                 onClick={() => {

src/components/sections/ready.astro

@@ -75,7 +75,6 @@ import { Container } from '@/components/container';
         width: 45px;
         height: 45px;
         font-size: var(--font-md);
-        color: #fbbf24;
         background-color: var(--color-neutral-100);
         border: 1px solid var(--color-neutral-300);
         border-radius: 50%;

src/components/sections/why.astro

@@ -127,7 +127,7 @@ const reasons = [
         height: 40px;
         margin-bottom: 12px;
         font-size: var(--font-md);
-        color: #34d399;
+        color: var(--color-foreground-subtle);
         background: linear-gradient(var(--color-neutral-100), transparent);
         border: 1px solid var(--color-neutral-200);
         border-radius: 12px;

src/components/sound/favorite/favorite.module.css

@@ -17,6 +17,6 @@
   outline: none;
 
   &.isFavorite {
-    color: #f43f5e;
+    color: var(--color-foreground);
   }
 }

src/components/sound/sound.module.css

@@ -39,6 +39,7 @@
     width: 40px;
     height: 40px;
     font-size: var(--font-base);
+    color: var(--color-foreground-subtler);
     transition: 0.2s;
 
     &::after {
@@ -79,12 +80,10 @@
 
   &.selected {
     border-color: transparent;
-    box-shadow:
-      0 0 0 2px #34d399,
-      0 10px 20px #34d39933;
+    box-shadow: 0 0 0 2px var(--color-neutral-800);
 
     & .icon {
-      color: #34d399;
+      color: var(--color-foreground);
     }
   }
 

src/styles/variables/color.css

@@ -12,7 +12,7 @@
   --color-neutral-950: #fafafa;
 
   /* Foreground */
-  --color-foreground: var(--color-neutral-900);
+  --color-foreground: var(--color-neutral-950);
   --color-foreground-subtle: var(--color-neutral-600);
   --color-foreground-subtler: var(--color-neutral-500);
 }