From 5fffb75c7bb11fec159b18b43e4593c65f5ee640 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Tue, 4 Jul 2023 11:45:39 +0800
Subject: [PATCH] feat: accent-focus color

Signed-off-by: Innei <i@innei.in>
---
 src/components/widgets/post/PostRelated.tsx  |  8 ++++----
 src/lib/color.ts                             |  4 ++--
 src/providers/root/accent-color-provider.tsx | 12 ++++++++++--
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/widgets/post/PostRelated.tsx b/src/components/widgets/post/PostRelated.tsx
index e38a1076ac..0f4ef866f9 100644
--- a/src/components/widgets/post/PostRelated.tsx
+++ b/src/components/widgets/post/PostRelated.tsx
@@ -1,10 +1,10 @@
 'use client'
 
+import Link from 'next/link'
+
 import { Divider } from '~/components/ui/divider'
 import { useCurrentPostDataSelector } from '~/providers/post/CurrentPostDataProvider'
 
-import { PeekLink } from '../peek/PeekLink'
-
 export const PostRelated = () => {
   const related = useCurrentPostDataSelector((s) => s?.related)
   if (!related) {
@@ -24,12 +24,12 @@ export const PostRelated = () => {
         {related.map((post) => {
           return (
             <li key={post.id}>
-              <PeekLink
+              <Link
                 href={`/posts/${post.category.slug}/${post.slug}`}
                 className="underline-current underline-dashed leading-10 underline"
               >
                 {post.title}
-              </PeekLink>
+              </Link>
             </li>
           )
         })}
diff --git a/src/lib/color.ts b/src/lib/color.ts
index 1cfcb9b587..6c3ad25b3f 100644
--- a/src/lib/color.ts
+++ b/src/lib/color.ts
@@ -84,7 +84,7 @@ export function addAlphaToHSL(hsl: string, alpha: number): string {
   return hsla.replace('hsl', 'hsla')
 }
 
-export function hexToHsl(hex: string): string {
+export function hexToHsl(hex: string) {
   // Remove the '#' symbol from the hex code
   hex = hex.replace('#', '')
 
@@ -121,5 +121,5 @@ export function hexToHsl(hex: string): string {
   s = Math.round(s * 100)
 
   // Return the HSL values as a string
-  return `${h} ${s}% ${Math.round(l * 100)}%`
+  return [h, s, Math.round(l * 100)]
 }
diff --git a/src/providers/root/accent-color-provider.tsx b/src/providers/root/accent-color-provider.tsx
index c9e5abf2ef..212af8f4bb 100644
--- a/src/providers/root/accent-color-provider.tsx
+++ b/src/providers/root/accent-color-provider.tsx
@@ -27,14 +27,22 @@ export const AccentColorProvider = ({ children }: PropsWithChildren) => {
     const accentColorL = sample(accentColorLight)
     const accentColorD = sample(accentColorDark)
 
+    const lightHsl = hexToHsl(accentColorL)
+    const darkHsl = hexToHsl(accentColorD)
+
+    const [hl, sl, ll] = lightHsl
+    const [hd, sd, ld] = darkHsl
+
     return (
       <style
         dangerouslySetInnerHTML={{
           __html: `html[data-theme='dark'] {
-          --a: ${hexToHsl(accentColorD)};
+          --a: ${`${hl} ${sl}% ${ll}%`};
+          --af: ${`${hl} ${sl}% ${ll + 6}%`};
         }
         html[data-theme='light'] {
-          --a: ${hexToHsl(accentColorL)};
+          --a: ${`${hd} ${sd}% ${ld}%`};
+          --af: ${`${hd} ${sd}% ${ld - 6}%`};
         }
         `,
         }}