From 41bddf530869bfcc2f60f38c9a8ad4931e76ef76 Mon Sep 17 00:00:00 2001
From: "Jip J. Dekker" <jip@dekker.one>
Date: Thu, 30 Nov 2023 17:16:05 +1100
Subject: [PATCH] Darken accent colour in light theme

---
 src/app/about/page.tsx           |  4 ++--
 src/app/projects/page.tsx        |  2 +-
 src/components/Card.tsx          |  2 +-
 src/components/Footer.tsx        |  2 +-
 src/components/Header.tsx        |  6 +++---
 src/components/ThemeSelector.tsx |  8 ++++----
 typography.ts                    | 14 +++++++-------
 7 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 79d4ac3..92c2c3b 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -28,9 +28,9 @@ function SocialLink({
     <li className={clsx(className, 'flex')}>
       <Link
         href={href}
-        className="group flex text-sm font-medium text-text-800 transition hover:text-accent-500 dark:text-text-200 dark:hover:text-accent-500"
+        className="group flex text-sm font-medium text-text-800 transition hover:text-accent-800 dark:text-text-200 dark:hover:text-accent-400"
       >
-        <Icon className="h-6 w-6 flex-none fill-text-500 transition group-hover:fill-accent-500" />
+        <Icon className="h-6 w-6 flex-none fill-text-500 transition group-hover:fill-accent-800 dark:group-hover:" />
         <span className="ml-4">{children}</span>
       </Link>
     </li>
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index 379d864..6d164c9 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -81,7 +81,7 @@ export default function Projects() {
               <Card.Link href={project.link.href}>{project.name}</Card.Link>
             </h2>
             <Card.Description>{project.description}</Card.Description>
-            <p className="relative z-10 mt-6 flex text-sm font-medium text-text-400 transition group-hover:text-accent-500 dark:text-text-200">
+            <p className="relative z-10 mt-6 flex text-sm font-medium text-text-400 transition group-hover:text-accent-800 dark:text-text-200">
               <LinkIcon className="h-6 w-6 flex-none" />
               <span className="ml-2">{project.link.label}</span>
             </p>
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index eef7b7c..d2215c8 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -69,7 +69,7 @@ Card.Cta = function CardCta({ children }: { children: React.ReactNode }) {
   return (
     <div
       aria-hidden="true"
-      className="relative z-10 mt-4 flex items-center text-sm font-medium text-accent-500"
+      className="relative z-10 mt-4 flex items-center text-sm font-medium text-accent-800 dark:text-accent-400"
     >
       {children}
       <ChevronRightIcon className="ml-1 h-4 w-4 stroke-current" />
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index d17daca..59f8321 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -15,7 +15,7 @@ function NavLink({
   return (
     <Link
       href={href}
-      className="transition hover:text-accent-500 dark:hover:text-accent-400"
+      className="transition hover:text-accent-800 dark:hover:text-accent-700"
     >
       {children}
     </Link>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 9a9a7c4..e4c1223 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -110,13 +110,13 @@ function NavItem({
         className={clsx(
           'relative block px-3 py-2 transition',
           isActive
-            ? 'text-accent-500 dark:text-accent-400'
-            : 'hover:text-accent-500 dark:hover:text-accent-400',
+            ? 'text-accent-800 dark:text-accent-400'
+            : 'hover:text-accent-800 dark:hover:text-accent-400',
         )}
       >
         {children}
         {isActive && (
-          <span className="absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-accent-500/0 via-accent-500/40 to-accent-500/0 dark:from-accent-400/0 dark:via-accent-400/40 dark:to-accent-400/0" />
+          <span className="absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-accent-800/0 via-accent-800/40 to-accent-800/0 dark:from-accent-400/0 dark:via-accent-400/40 dark:to-accent-400/0" />
         )}
       </Link>
     </li>
diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
index 9ca8e8b..a3128a0 100644
--- a/src/components/ThemeSelector.tsx
+++ b/src/components/ThemeSelector.tsx
@@ -36,7 +36,7 @@ export function ThemeSelector(
             'h-6 w-6 dark:hidden',
             theme === 'system'
               ? 'fill-text-400 stroke-text-400'
-              : 'fill-accent-400 stroke-accent-400',
+              : 'fill-accent-700 stroke-accent-700 dark:fill-accent-400 dark:stroke-accent-400',
           )}
         />
         <MoonIcon
@@ -44,7 +44,7 @@ export function ThemeSelector(
             'hidden h-6 w-6 dark:block',
             theme === 'system'
               ? 'fill-text-400 stroke-text-400'
-              : 'fill-accent-400 stroke-accent-400',
+              : 'fill-accent-700 stroke-accent-700 dark:fill-accent-400 dark:stroke-accent-400',
           )}
         />
       </Listbox.Button>
@@ -57,7 +57,7 @@ export function ThemeSelector(
               clsx(
                 'flex cursor-pointer select-none items-center rounded-[0.625rem] p-1',
                 {
-                  'text-accent-500': selected,
+                  'text-accent-800 dark:text-accent-400': selected,
                   'text-text-900 dark:text-white': active && !selected,
                   'text-text-700 dark:text-text-400': !active && !selected,
                   'bg-text-100 dark:bg-text-900/40': active,
@@ -72,7 +72,7 @@ export function ThemeSelector(
                     className={clsx(
                       'h-4 w-4',
                       selected
-                        ? 'fill-accent-400 stroke-accent-400'
+                        ? 'fill-accent-700 stroke-accent-700 dark:fill-accent-400 dark:stroke-accent-400'
                         : 'fill-text-400  stroke-text-400',
                     )}
                   />
diff --git a/typography.ts b/typography.ts
index d09f9e6..0b9a5de 100644
--- a/typography.ts
+++ b/typography.ts
@@ -29,10 +29,10 @@ export default function typographyStyles({ theme }: PluginUtils) {
       css: {
         '--tw-prose-body': theme('colors.text.600'),
         '--tw-prose-headings': theme('colors.text.900'),
-        '--tw-prose-links': theme('colors.accent.500'),
+        '--tw-prose-links': theme('colors.accent.800'),
         '--tw-prose-links-hover': theme('colors.accent.600'),
-        '--tw-prose-underline': theme('colors.accent.500 / 0.2'),
-        '--tw-prose-underline-hover': theme('colors.accent.500'),
+        '--tw-prose-underline': theme('colors.accent.800 / 0.2'),
+        '--tw-prose-underline-hover': theme('colors.accent.800'),
         '--tw-prose-bold': theme('colors.text.900'),
         '--tw-prose-counters': theme('colors.text.900'),
         '--tw-prose-bullets': theme('colors.text.900'),
@@ -49,10 +49,10 @@ export default function typographyStyles({ theme }: PluginUtils) {
 
         '--tw-prose-invert-body': theme('colors.text.400'),
         '--tw-prose-invert-headings': theme('colors.text.200'),
-        '--tw-prose-invert-links': theme('colors.accent.400'),
-        '--tw-prose-invert-links-hover': theme('colors.accent.400'),
-        '--tw-prose-invert-underline': theme('colors.accent.400 / 0.3'),
-        '--tw-prose-invert-underline-hover': theme('colors.accent.400'),
+        '--tw-prose-invert-links': theme('colors.accent.700'),
+        '--tw-prose-invert-links-hover': theme('colors.accent.700'),
+        '--tw-prose-invert-underline': theme('colors.accent.700 / 0.3'),
+        '--tw-prose-invert-underline-hover': theme('colors.accent.700'),
         '--tw-prose-invert-bold': theme('colors.text.200'),
         '--tw-prose-invert-counters': theme('colors.text.200'),
         '--tw-prose-invert-bullets': theme('colors.text.200'),