Add slate accent color option (#296)

Add `data-theme="slate"` selector to global.css Add new slate color option for the accent color, added to both accent selector implementations
AVGVSTVS96 · Apr 30, 2024 · d730159 · d730159
1 parent b11f47f
commit d730159
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/src/components/AccentColorSelector.tsx b/src/components/AccentColorSelector.tsx
@@ -8,8 +8,8 @@ import {
   TooltipContent,
 } from '@components/ui/tooltip';
 
-
 const themeOptions = [
+  { colorName: 'Slate', colorClass: 'bg-slate-400', href: '#slate' },
   { colorName: 'Sky', colorClass: 'bg-sky-400', href: '#sky' },
   { colorName: 'Cyan', colorClass: 'bg-cyan-400', href: '#cyan' },
   { colorName: 'Teal', colorClass: 'bg-teal-400', href: '#teal' },
@@ -57,7 +57,9 @@ export const AccentColorSelector: React.FC = () => {
 
   return (
     <TooltipProvider>
-      <DropdownMenu ariaLabel="Open accent color selector menu" variant="outline">
+      <DropdownMenu
+        ariaLabel="Open accent color selector menu"
+        variant="outline">
         <div className="flex items-center">
           <div className="size-5 rounded-full bg-accent-400" />
         </div>

diff --git a/src/components/ThemeSwitcher.astro b/src/components/ThemeSwitcher.astro
@@ -5,6 +5,7 @@ import type { HTMLAttributes } from 'astro/types';
 type Props = HTMLAttributes<'div'>;
 
 const themeOptions = [
+  { name: 'Slate', href: '#slate' },
   { name: 'Sky', href: '#sky' },
   { name: 'Cyan', href: '#cyan' },
   { name: 'Teal', href: '#teal' },

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -10,7 +10,6 @@
     scroll-behavior: smooth;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
-
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
 
@@ -90,6 +89,20 @@
     background-color: hsla(0, 0%, 60%, 0.3);
   }
 
+  [data-theme='slate'] {
+    --accent-50: theme(colors.slate.50);
+    --accent-100: theme(colors.slate.100);
+    --accent-200: theme(colors.slate.200);
+    --accent-300: theme(colors.slate.300);
+    --accent-400: theme(colors.slate.400);
+    --accent-500: theme(colors.slate.500);
+    --accent-600: theme(colors.slate.600);
+    --accent-700: theme(colors.slate.700);
+    --accent-800: theme(colors.slate.800);
+    --accent-900: theme(colors.slate.900);
+    --accent-950: theme(colors.slate.950);
+  }
+
   [data-theme='sky'] {
     --accent-50: theme(colors.sky.50);
     --accent-100: theme(colors.sky.100);