feat: accent-focus color

Signed-off-by: Innei <i@innei.in>

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>
           )
         })}

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)]
 }

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}%`};
         }
         `,
         }}