Add accent colors

src/components/Button.jsx

@@ -3,7 +3,7 @@ import clsx from 'clsx'
 
 const styles = {
   primary:
-    'rounded-full bg-sky-300 py-2 px-4 text-sm font-semibold text-slate-900 hover:bg-sky-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500',
+    'rounded-full bg-accent-300 py-2 px-4 text-sm font-semibold text-slate-900 hover:bg-accent-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-300/50 active:bg-accent-500',
   secondary:
     'rounded-full bg-slate-800 py-2 px-4 text-sm font-medium text-white hover:bg-slate-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400',
 }

src/components/Callout.jsx

@@ -7,13 +7,13 @@ const styles = {
     container:
       'bg-sky-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10',
     title: 'text-sky-900 dark:text-sky-400',
-    body: 'text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-slate-300 dark:prose-code:text-slate-300',
+    body: 'text-sky-800 [--tw-prose-underline:theme(colors.sky.400)] [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-slate-300 dark:prose-code:text-slate-300 dark:[--tw-prose-underline:theme(colors.accent.700)]',
   },
   warning: {
     container:
       'bg-amber-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10',
     title: 'text-amber-900 dark:text-amber-500',
-    body: 'text-amber-800 [--tw-prose-underline:theme(colors.amber.400)] [--tw-prose-background:theme(colors.amber.50)] prose-a:text-amber-900 prose-code:text-amber-900 dark:text-slate-300 dark:[--tw-prose-underline:theme(colors.sky.700)] dark:prose-code:text-slate-300',
+    body: 'text-amber-800 [--tw-prose-underline:theme(colors.amber.400)] [--tw-prose-background:theme(colors.accent.50)] prose-a:text-amber-900 prose-code:text-amber-900 dark:text-slate-300 dark:[--tw-prose-underline:theme(colors.accent.700)] dark:prose-code:text-slate-300',
   },
 }
 

src/components/DialectSwitcher.jsx

@@ -45,7 +45,7 @@ export function DialectSwitcher({ children, title, dialects }) {
                     clsx(
                       'flex cursor-pointer select-none items-center rounded-[0.625rem] px-2 py-1',
                       {
-                        'text-sky-500': selected,
+                        'text-accent-500': selected,
                         'text-slate-900 dark:text-white': active && !selected,
                         'text-slate-700 dark:text-slate-400':
                           !active && !selected,

src/components/Hero.jsx

@@ -1,12 +1,12 @@
-import clsx from 'clsx';
-import Image from 'next/image';
-import Highlight, { defaultProps } from 'prism-react-renderer';
-import { Fragment } from 'react';
+import clsx from 'clsx'
+import Image from 'next/image'
+import Highlight, { defaultProps } from 'prism-react-renderer'
+import { Fragment } from 'react'
 
-import { Button } from '@/components/Button';
-import { HeroBackground } from '@/components/HeroBackground';
-import blurCyanImage from '@/images/blur-cyan.png';
-import blurIndigoImage from '@/images/blur-indigo.png';
+import { Button } from '@/components/Button'
+import { HeroBackground } from '@/components/HeroBackground'
+import blurCyanImage from '@/images/blur-cyan.png'
+import blurIndigoImage from '@/images/blur-indigo.png'
 
 const codeLanguage = 'rust'
 const code = `pub struct Metadata {
@@ -50,7 +50,7 @@ export function Hero({ page }) {
               priority
             />
             <div className="relative">
-              <p className="inline bg-gradient-to-r from-indigo-200 via-sky-400 to-indigo-200 bg-clip-text font-display text-5xl tracking-tight text-transparent">
+              <p className="inline bg-gradient-to-r from-indigo-200 via-accent-400 to-indigo-200 bg-clip-text font-display text-5xl tracking-tight text-transparent">
                 {page.product.name}
               </p>
               <p className="mt-3 text-2xl tracking-tight text-slate-400">
@@ -87,10 +87,10 @@ export function Hero({ page }) {
                 unoptimized
                 priority
               />
-              <div className="absolute inset-0 rounded-2xl bg-gradient-to-tr from-sky-300 via-sky-300/70 to-blue-300 opacity-10 blur-lg" />
-              <div className="absolute inset-0 rounded-2xl bg-gradient-to-tr from-sky-300 via-sky-300/70 to-blue-300 opacity-10" />
+              <div className="via-accent-300/70 absolute inset-0 rounded-2xl bg-gradient-to-tr from-accent-300 to-blue-300 opacity-10 blur-lg" />
+              <div className="via-accent-300/70 absolute inset-0 rounded-2xl bg-gradient-to-tr from-accent-300 to-blue-300 opacity-10" />
               <div className="relative rounded-2xl bg-[#0A101F]/80 ring-1 ring-white/10 backdrop-blur">
-                <div className="absolute -top-px left-20 right-11 h-px bg-gradient-to-r from-sky-300/0 via-sky-300/70 to-sky-300/0" />
+                <div className="from-accent-300/0 via-accent-300/70 to-accent-300/0 absolute -top-px left-20 right-11 h-px bg-gradient-to-r" />
                 <div className="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-blue-400/0 via-blue-400 to-blue-400/0" />
                 <div className="pl-4 pt-4">
                   <TrafficLightsIcon className="h-2.5 w-auto stroke-slate-500/30" />
@@ -101,7 +101,7 @@ export function Hero({ page }) {
                         className={clsx(
                           'flex h-6 rounded-full',
                           tab.isActive
-                            ? 'bg-gradient-to-r from-sky-400/30 via-sky-400 to-sky-400/30 p-px font-medium text-sky-300'
+                            ? 'from-accent-400/30 to-accent-400/30 bg-gradient-to-r via-accent-400 p-px font-medium text-accent-300'
                             : 'text-slate-500'
                         )}
                       >

src/components/Layout.jsx

@@ -1,14 +1,25 @@
+import { useEffect } from 'react'
 import Link from 'next/link'
+import clsx from 'clsx'
 
 import { Header } from '@/components/Header'
 import { Hero } from '@/components/Hero'
 import { Navigation } from '@/components/Navigation'
 import { Prose } from '@/components/Prose'
 import { TableOfContent } from '@/components/TableOfContent'
-import clsx from 'clsx'
 
 export function Layout({ children, page }) {
   const hasNavigation = !!page.activeSection?.navigation
+  useEffect(() => {
+    document.querySelector('body').classList.forEach((className) => {
+      if (className.startsWith('accent-')) {
+        document.querySelector('body').classList.remove(className)
+      }
+    })
+    if (page.product?.className) {
+      document.querySelector('body').classList.add(page.product?.className)
+    }
+  })
 
   return (
     <>
@@ -16,12 +27,14 @@ export function Layout({ children, page }) {
 
       {page.isIndexPage && <Hero page={page} />}
 
-      <div className={clsx(
-        "relative mx-auto flex justify-center sm:px-2 lg:px-8 xl:px-12",
-        hasNavigation ? 'max-w-8xl' : 'max-w-6xl'
-      )}>
+      <div
+        className={clsx(
+          'relative mx-auto flex justify-center sm:px-2 lg:px-8 xl:px-12',
+          hasNavigation ? 'max-w-8xl' : 'max-w-6xl'
+        )}
+      >
         {/* Navigation. */}
-        { hasNavigation && (
+        {hasNavigation && (
           <div className="hidden lg:relative lg:block lg:flex-none">
             <div className="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden" />
             <div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
@@ -36,15 +49,17 @@ export function Layout({ children, page }) {
         )}
 
         {/* Content. */}
-        <div className={clsx(
-          "min-w-0 max-w-2xl flex-auto lg:max-w-none px-4 py-16",
-          hasNavigation ? 'lg:pl-8 lg:pr-0 xl:px-16' : 'lg:pl-0 lg:pr-16'
-        )}>
+        <div
+          className={clsx(
+            'min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none',
+            hasNavigation ? 'lg:pl-8 lg:pr-0 xl:px-16' : 'lg:pl-0 lg:pr-16'
+          )}
+        >
           <article>
             {(page.title || page.activeSection?.navigationGroup) && (
               <header className="mb-9 space-y-1">
                 {page.activeSection?.navigationGroup && (
-                  <p className="font-display text-sm font-medium text-sky-500">
+                  <p className="font-display text-sm font-medium text-accent-500">
                     {page.activeSection.navigationGroup.title}
                   </p>
                 )}
@@ -94,12 +109,14 @@ export function Layout({ children, page }) {
         </div>
 
         {/* Table of contents. */}
-        <div className={clsx(
-          "hidden",
-          hasNavigation
-            ? 'xl:sticky xl:top-[7rem] xl:-mr-6 xl:block xl:h-[calc(100vh-7rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6'
-            : 'lg:sticky lg:top-[7rem] lg:-mr-6 lg:block lg:h-[calc(100vh-7rem)] lg:flex-none lg:overflow-y-auto lg:py-16 lg:pr-6'
-        )}>
+        <div
+          className={clsx(
+            'hidden',
+            hasNavigation
+              ? 'xl:sticky xl:top-[7rem] xl:-mr-6 xl:block xl:h-[calc(100vh-7rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6'
+              : 'lg:sticky lg:top-[7rem] lg:-mr-6 lg:block lg:h-[calc(100vh-7rem)] lg:flex-none lg:overflow-y-auto lg:py-16 lg:pr-6'
+          )}
+        >
           <TableOfContent
             tableOfContents={page.tableOfContents}
           ></TableOfContent>

src/components/Navigation.jsx

@@ -24,7 +24,7 @@ export function Navigation({ navigation, className }) {
                     className={clsx(
                       'block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full',
                       link.href === router.pathname
-                        ? 'font-semibold text-sky-500 before:bg-sky-500'
+                        ? 'font-semibold text-accent-500 before:bg-accent-500'
                         : 'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300'
                     )}
                   >

src/components/Prose.jsx

@@ -11,9 +11,9 @@ export function Prose({ as: Component = 'div', className, ...props }) {
         // lead
         'prose-lead:text-slate-500 dark:prose-lead:text-slate-400',
         // links
-        'prose-a:font-semibold dark:prose-a:text-sky-400',
+        'prose-a:font-semibold dark:prose-a:text-accent-400',
         // link underline
-        'prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))] hover:prose-a:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] dark:hover:prose-a:[--tw-prose-underline-size:6px]',
+        'prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.accent.300))] hover:prose-a:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.accent.800))] dark:hover:prose-a:[--tw-prose-underline-size:6px]',
         // pre
         'prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10',
         // hr

src/components/QuickLinks.jsx

@@ -15,7 +15,10 @@ export function QuickLink({ title, description, href, icon }) {
     <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="relative overflow-hidden rounded-xl p-6">
-        <Icon icon={icon} className="h-8 w-8 group-hover:text-sky-600 dark:group-hover:text-sky-500" />
+        <Icon
+          icon={icon}
+          className="h-8 w-8 group-hover:text-accent-600 dark:group-hover:text-accent-500"
+        />
         <h2 className="mt-4 font-display text-base text-slate-900 dark:text-white">
           <Link href={href}>
             <span className="absolute -inset-px rounded-xl" />

src/components/TableOfContent.jsx

@@ -76,7 +76,7 @@ export function TableOfContent({ tableOfContents }) {
                     href={`#${section.id}`}
                     className={clsx(
                       isActive(section)
-                        ? 'text-sky-500'
+                        ? 'text-accent-500'
                         : 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
                     )}
                   >
@@ -94,7 +94,7 @@ export function TableOfContent({ tableOfContents }) {
                           href={`#${subSection.id}`}
                           className={
                             isActive(subSection)
-                              ? 'text-sky-500'
+                              ? 'text-accent-500'
                               : 'hover:text-slate-600 dark:hover:text-slate-300'
                           }
                         >

src/components/ThemeSelector.jsx

@@ -85,8 +85,8 @@ export function ThemeSelector(props) {
         className="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
         aria-label={selectedTheme?.name}
       >
-        <LightIcon className="hidden h-4 w-4 fill-sky-400 [[data-theme=light]_&]:block" />
-        <DarkIcon className="hidden h-4 w-4 fill-sky-400 [[data-theme=dark]_&]:block" />
+        <LightIcon className="hidden h-4 w-4 fill-accent-400 [[data-theme=light]_&]:block" />
+        <DarkIcon className="hidden h-4 w-4 fill-accent-400 [[data-theme=dark]_&]:block" />
         <LightIcon className="hidden h-4 w-4 fill-slate-400 [:not(.dark)[data-theme=system]_&]:block" />
         <DarkIcon className="hidden h-4 w-4 fill-slate-400 [.dark[data-theme=system]_&]:block" />
       </Listbox.Button>
@@ -99,7 +99,7 @@ export function ThemeSelector(props) {
               clsx(
                 'flex cursor-pointer select-none items-center rounded-[0.625rem] p-1',
                 {
-                  'text-sky-500': selected,
+                  'text-accent-500': selected,
                   'text-slate-900 dark:text-white': active && !selected,
                   'text-slate-700 dark:text-slate-400': !active && !selected,
                   'bg-slate-100 dark:bg-slate-900/40': active,
@@ -114,7 +114,7 @@ export function ThemeSelector(props) {
                     className={clsx(
                       'h-4 w-4',
                       selected
-                        ? 'fill-sky-400 dark:fill-sky-400'
+                        ? 'fill-accent-400 dark:fill-accent-400'
                         : 'fill-slate-400'
                     )}
                   />

src/components/products/bubblegum/index.js

@@ -13,6 +13,7 @@ export const bubblegum = {
   path: 'bubblegum',
   logo: Logo,
   github: 'https://github.com',
+  className: 'accent-green',
   sections: [
     {
       ...documentationSection('bubblegum'),
@@ -33,7 +34,10 @@ export const bubblegum = {
           title: 'Introduction',
           links: [
             { title: 'Getting started', href: '/bubblegum/references' },
-            { title: 'Installation', href: '/bubblegum/references/installation' },
+            {
+              title: 'Installation',
+              href: '/bubblegum/references/installation',
+            },
           ],
         },
       ],

src/components/products/candyMachine/index.js

@@ -13,6 +13,7 @@ export const candyMachine = {
   path: 'candy-machine',
   logo: Logo,
   github: 'https://github.com',
+  className: 'accent-pink',
   sections: [
     {
       ...documentationSection('candy-machine'),
@@ -33,7 +34,10 @@ export const candyMachine = {
           title: 'Introduction',
           links: [
             { title: 'Getting started', href: '/candy-machine/references' },
-            { title: 'Installation', href: '/candy-machine/references/installation' },
+            {
+              title: 'Installation',
+              href: '/candy-machine/references/installation',
+            },
           ],
         },
       ],

src/components/products/fusion/index.js

@@ -13,6 +13,7 @@ export const fusion = {
   path: 'fusion',
   logo: Logo,
   github: 'https://github.com',
+  className: 'accent-amber',
   sections: [
     {
       ...documentationSection('fusion'),

src/components/products/hydra/index.js

@@ -13,6 +13,7 @@ export const hydra = {
   path: 'hydra',
   logo: Logo,
   github: 'https://github.com',
+  className: 'accent-amber',
   sections: [
     {
       ...documentationSection('hydra'),

src/components/products/tokenAuthRules/index.js

@@ -13,6 +13,7 @@ export const tokenAuthRules = {
   path: 'token-auth-rules',
   logo: Logo,
   github: 'https://github.com',
+  className: 'accent-green',
   sections: [
     {
       ...documentationSection('token-auth-rules'),
@@ -33,7 +34,10 @@ export const tokenAuthRules = {
           title: 'Introduction',
           links: [
             { title: 'Getting started', href: '/token-auth-rules/references' },
-            { title: 'Installation', href: '/token-auth-rules/references/installation' },
+            {
+              title: 'Installation',
+              href: '/token-auth-rules/references/installation',
+            },
           ],
         },
       ],

src/components/products/tokenMetadata/index.js

@@ -13,6 +13,7 @@ export const tokenMetadata = {
   path: 'token-metadata',
   logo: Logo,
   github: 'https://github.com',
+  className: 'accent-green',
   sections: [
     {
       ...documentationSection('token-metadata'),
@@ -122,7 +123,10 @@ export const tokenMetadata = {
           title: 'Introduction',
           links: [
             { title: 'Getting started', href: '/token-metadata/references' },
-            { title: 'Installation', href: '/token-metadata/references/installation' },
+            {
+              title: 'Installation',
+              href: '/token-metadata/references/installation',
+            },
           ],
         },
         {

src/components/products/toolbox/index.js

@@ -13,6 +13,7 @@ export const toolbox = {
   path: 'toolbox',
   logo: Logo,
   github: 'https://github.com',
+  className: 'accent-sky',
   sections: [
     {
       ...documentationSection('toolbox'),

src/pages/token-metadata/index.md

@@ -65,7 +65,7 @@ This is what a disclaimer message looks like. You might want to include inline `
 
 ## Basic usage
 
-Praesentium laudantium magni. Consequatur reiciendis aliquid nihil iusto ut in et. Quisquam ut et aliquid occaecati. Culpa veniam aut et voluptates amet perspiciatis. Qui exercitationem in qui. Vel qui dignissimos sit quae distinctio.
+Praesentium laudantium magni. [Consequatur reiciendis](#) aliquid nihil iusto ut in et. Quisquam ut et aliquid occaecati. Culpa veniam aut et voluptates amet perspiciatis. Qui exercitationem in qui. Vel qui dignissimos sit quae distinctio.
 
 ### Your first cache
 

src/styles/accent.css

@@ -0,0 +1,75 @@
+: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');
+}
+
+@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');
+    }
+}

src/styles/tailwind.css

@@ -4,5 +4,6 @@
 @import './prism.css';
 @import './react-flow.css';
 @import './totem.css';
+@import './accent.css';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';

src/styles/totem.css

@@ -14,9 +14,9 @@
     /* lead */
     @apply prose-lead:text-slate-400;
     /* links */
-    @apply prose-a:text-sky-400;
+    @apply prose-a:text-accent-400;
     /* link underline */
-    @apply [--tw-prose-background:theme(colors.slate.900)] prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] hover:prose-a:[--tw-prose-underline-size:6px];
+    @apply [--tw-prose-background:theme(colors.slate.900)] prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.accent.800))] hover:prose-a:[--tw-prose-underline-size:6px];
     /* pre */
     @apply prose-pre:m-0 prose-pre:rounded-none prose-pre:shadow-none prose-pre:dark:bg-transparent prose-pre:dark:ring-0;
     /* hr */

tailwind.config.js

@@ -28,6 +28,20 @@ module.exports = {
       maxWidth: {
         '8xl': '88rem',
       },
+      colors: {
+        accent: {
+          50: 'var(--color-accent-50)',
+          100: 'var(--color-accent-100)',
+          200: 'var(--color-accent-200)',
+          300: 'var(--color-accent-300)',
+          400: 'var(--color-accent-400)',
+          500: 'var(--color-accent-500)',
+          600: 'var(--color-accent-600)',
+          700: 'var(--color-accent-700)',
+          800: 'var(--color-accent-800)',
+          900: 'var(--color-accent-900)',
+        },
+      },
     },
   },
   plugins: [require('@tailwindcss/typography')],