Highlight quicklinks using accent colors

src/components/QuickLinks.jsx

@@ -13,7 +13,7 @@ export function QuickLinks({ children }) {
 export function QuickLink({ title, description, href, icon }) {
   return (
     <div className="group relative rounded-xl border border-slate-200 dark:border-slate-800">
-      <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]" />
+      <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_bottom,var(--quick-links-hover-border))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]" />
       <div className="relative overflow-hidden rounded-xl p-6">
         <Icon
           icon={icon}

src/styles/accent.css

@@ -1,4 +1,21 @@
 :root {
+  --color-accent-50: theme('colors.sky.50');
+  --color-accent-100: theme('colors.sky.100');
+  --color-accent-200: theme('colors.sky.200');
+  --color-accent-300: theme('colors.sky.300');
+  --color-accent-400: theme('colors.sky.400');
+  --color-accent-500: theme('colors.sky.500');
+  --color-accent-600: theme('colors.sky.600');
+  --color-accent-700: theme('colors.sky.700');
+  --color-accent-800: theme('colors.sky.800');
+  --color-accent-900: theme('colors.sky.900');
+  --quick-links-hover-bg: var(--color-accent-50);
+  --quick-links-hover-border: theme('colors.sky.500'), theme('colors.cyan.400'),
+    theme('colors.indigo.400');
+}
+
+@layer components {
+  .accent-sky {
     --color-accent-50: theme('colors.sky.50');
     --color-accent-100: theme('colors.sky.100');
     --color-accent-200: theme('colors.sky.200');
@@ -9,67 +26,68 @@
     --color-accent-700: theme('colors.sky.700');
     --color-accent-800: theme('colors.sky.800');
     --color-accent-900: theme('colors.sky.900');
-}
-
-@layer components {
-    .accent-sky {
-        --color-accent-50: theme('colors.sky.50');
-        --color-accent-100: theme('colors.sky.100');
-        --color-accent-200: theme('colors.sky.200');
-        --color-accent-300: theme('colors.sky.300');
-        --color-accent-400: theme('colors.sky.400');
-        --color-accent-500: theme('colors.sky.500');
-        --color-accent-600: theme('colors.sky.600');
-        --color-accent-700: theme('colors.sky.700');
-        --color-accent-800: theme('colors.sky.800');
-        --color-accent-900: theme('colors.sky.900');
-    }
-    .accent-green {
-        --color-accent-50: theme('colors.green.50');
-        --color-accent-100: theme('colors.green.100');
-        --color-accent-200: theme('colors.green.200');
-        --color-accent-300: theme('colors.green.300');
-        --color-accent-400: theme('colors.green.400');
-        --color-accent-500: theme('colors.green.500');
-        --color-accent-600: theme('colors.green.600');
-        --color-accent-700: theme('colors.green.700');
-        --color-accent-800: theme('colors.green.800');
-        --color-accent-900: theme('colors.green.900');
-    }
-    .accent-emerald {
-        --color-accent-50: theme('colors.emerald.50');
-        --color-accent-100: theme('colors.emerald.100');
-        --color-accent-200: theme('colors.emerald.200');
-        --color-accent-300: theme('colors.emerald.300');
-        --color-accent-400: theme('colors.emerald.400');
-        --color-accent-500: theme('colors.emerald.500');
-        --color-accent-600: theme('colors.emerald.600');
-        --color-accent-700: theme('colors.emerald.700');
-        --color-accent-800: theme('colors.emerald.800');
-        --color-accent-900: theme('colors.emerald.900');
-    }
-    .accent-pink {
-        --color-accent-50: theme('colors.pink.50');
-        --color-accent-100: theme('colors.pink.100');
-        --color-accent-200: theme('colors.pink.200');
-        --color-accent-300: theme('colors.pink.300');
-        --color-accent-400: theme('colors.pink.400');
-        --color-accent-500: theme('colors.pink.500');
-        --color-accent-600: theme('colors.pink.600');
-        --color-accent-700: theme('colors.pink.700');
-        --color-accent-800: theme('colors.pink.800');
-        --color-accent-900: theme('colors.pink.900');
-    }
-    .accent-amber {
-        --color-accent-50: theme('colors.amber.50');
-        --color-accent-100: theme('colors.amber.100');
-        --color-accent-200: theme('colors.amber.200');
-        --color-accent-300: theme('colors.amber.300');
-        --color-accent-400: theme('colors.amber.400');
-        --color-accent-500: theme('colors.amber.500');
-        --color-accent-600: theme('colors.amber.600');
-        --color-accent-700: theme('colors.amber.700');
-        --color-accent-800: theme('colors.amber.800');
-        --color-accent-900: theme('colors.amber.900');
-    }
+    --quick-links-hover-bg: var(--color-accent-50);
+    --quick-links-hover-border: theme('colors.sky.500'),
+      theme('colors.cyan.400'), theme('colors.indigo.400');
+  }
+  .accent-green {
+    --color-accent-50: theme('colors.green.50');
+    --color-accent-100: theme('colors.green.100');
+    --color-accent-200: theme('colors.green.200');
+    --color-accent-300: theme('colors.green.300');
+    --color-accent-400: theme('colors.green.400');
+    --color-accent-500: theme('colors.green.500');
+    --color-accent-600: theme('colors.green.600');
+    --color-accent-700: theme('colors.green.700');
+    --color-accent-800: theme('colors.green.800');
+    --color-accent-900: theme('colors.green.900');
+    --quick-links-hover-bg: var(--color-accent-50);
+    --quick-links-hover-border: theme('colors.green.400'),
+      theme('colors.lime.400'), theme('colors.green.500');
+  }
+  .accent-emerald {
+    --color-accent-50: theme('colors.emerald.50');
+    --color-accent-100: theme('colors.emerald.100');
+    --color-accent-200: theme('colors.emerald.200');
+    --color-accent-300: theme('colors.emerald.300');
+    --color-accent-400: theme('colors.emerald.400');
+    --color-accent-500: theme('colors.emerald.500');
+    --color-accent-600: theme('colors.emerald.600');
+    --color-accent-700: theme('colors.emerald.700');
+    --color-accent-800: theme('colors.emerald.800');
+    --color-accent-900: theme('colors.emerald.900');
+    --quick-links-hover-bg: var(--color-accent-50);
+    --quick-links-hover-border: theme('colors.green.400'),
+      theme('colors.lime.400'), theme('colors.green.500');
+  }
+  .accent-pink {
+    --color-accent-50: theme('colors.pink.50');
+    --color-accent-100: theme('colors.pink.100');
+    --color-accent-200: theme('colors.pink.200');
+    --color-accent-300: theme('colors.pink.300');
+    --color-accent-400: theme('colors.pink.400');
+    --color-accent-500: theme('colors.pink.500');
+    --color-accent-600: theme('colors.pink.600');
+    --color-accent-700: theme('colors.pink.700');
+    --color-accent-800: theme('colors.pink.800');
+    --color-accent-900: theme('colors.pink.900');
+    --quick-links-hover-bg: var(--color-accent-50);
+    --quick-links-hover-border: theme('colors.pink.400'),
+      theme('colors.rose.300'), theme('colors.fuchsia.500');
+  }
+  .accent-amber {
+    --color-accent-50: theme('colors.amber.50');
+    --color-accent-100: theme('colors.amber.100');
+    --color-accent-200: theme('colors.amber.200');
+    --color-accent-300: theme('colors.amber.300');
+    --color-accent-400: theme('colors.amber.400');
+    --color-accent-500: theme('colors.amber.500');
+    --color-accent-600: theme('colors.amber.600');
+    --color-accent-700: theme('colors.amber.700');
+    --color-accent-800: theme('colors.amber.800');
+    --color-accent-900: theme('colors.amber.900');
+    --quick-links-hover-bg: var(--color-accent-50);
+    --quick-links-hover-border: theme('colors.amber.400'),
+      theme('colors.yellow.300'), theme('colors.orange.400');
+  }
 }