style: update GitHub install button and theme toggle styles (#324)

Author: ecmasx

src/components/GitHubInstallButtons/styles.module.css

@@ -26,26 +26,28 @@
 }
 
 .installButton {
-  background: var(--primary, hsl(0 0% 9%));
-  color: var(--primary-foreground, hsl(0 0% 98%));
-  border-radius: 9999px;
+  background: hsl(var(--primary, 0 0% 9%));
+  color: hsl(var(--primary-foreground, 0 0% 98%));
+  border-radius: 0.375rem;
   padding: 0.375rem 0.75rem;
+  transition: all 0.2s ease;
 }
 
 .installButton:hover {
-  background: var(--primary-hover, hsl(0 0% 9% / 0.9));
+  background: hsl(var(--primary-hover, 0 0% 9% / 0.9));
   text-decoration: none;
-  color: var(--primary-foreground, hsl(0 0% 98%));
+  color: hsl(var(--primary-foreground, 0 0% 98%));
+  scale: 1.05;
 }
 
 [data-theme='dark'] .installButton {
-  background: var(--primary-dark, hsl(0 0% 98%));
-  color: var(--primary-foreground-dark, hsl(0 0% 9%));
+  background: hsl(var(--primary, 0 0% 98%));
+  color: hsl(var(--primary-foreground, 0 0% 9%));
 }
 
 [data-theme='dark'] .installButton:hover {
-  background: var(--primary-dark-hover, hsl(0 0% 98% / 0.9));
-  color: var(--primary-foreground-dark, hsl(0 0% 9%));
+  background: hsl(var(--primary-dark-hover, 0 0% 98% / 0.9));
+  color: hsl(var(--primary-foreground, 0 0% 9%));
 }
 
 .icon {
@@ -63,4 +65,4 @@
   .container {
     display: none;
   }
-}
+}

src/css/custom.css

@@ -35,7 +35,7 @@
   --chart-5: 115 100% 50%;
 
   /* GitHub install button colors */
-  --primary-hover: hsl(0 0% 9% / 0.9);
+  --primary-hover: 0 0% 9% / 0.9;
   --ifm-color-gray-400: #9ca3af;
   --ifm-color-gray-200: #e5e7eb;
 
@@ -77,7 +77,7 @@
   --ring: 0 0% 83.1%;
 
   /* GitHub install button colors for dark mode */
-  --primary-dark-hover: hsl(0 0% 98% / 0.9);
+  --primary-dark-hover: 0 0% 98% / 0.9;
   --ifm-color-gray-400: #9ca3af;
   --ifm-color-gray-200: #e5e7eb;
 

src/theme/Navbar/ColorModeToggle/styles.module.css

@@ -14,22 +14,22 @@
 }
 
 .themeToggle:hover {
-  background-color: var(--accent, hsl(0 0% 96.1%));
-  color: var(--accent-foreground, hsl(0 0% 9%));
+  background-color: hsl(var(--accent, 0 0% 96.1%));
+  color: hsl(var(--accent-foreground, 0 0% 9%));
 }
 
 [data-theme='dark'] .themeToggle:hover {
-  background-color: var(--accent, hsl(0 0% 14.9%));
-  color: var(--accent-foreground, hsl(0 0% 98%));
+  background-color: hsl(var(--accent, 0 0% 14.9%));
+  color: hsl(var(--accent-foreground, 0 0% 98%));
 }
 
 .themeToggle:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 1px var(--ring, hsl(0 0% 3.9%));
+  box-shadow: 0 0 0 1px hsl(var(--ring, 0 0% 3.9%));
 }
 
 [data-theme='dark'] .themeToggle:focus-visible {
-  box-shadow: 0 0 0 1px var(--ring, hsl(0 0% 83.1%));
+  box-shadow: 0 0 0 1px hsl(var(--ring, 0 0% 83.1%));
 }
 
 .icon {