@clidey/dory 0.49.0 → 1.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clidey/dory",
   "private": false,
-  "version": "0.49.0",
+  "version": "1.0.1",
   "type": "module",
   "description": "A CLI tool for building and previewing documentation sites",
   "keywords": [
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "@algolia/autocomplete-core": "1.19.9",
-    "@clidey/ux": "0.59.0",
+    "@clidey/ux": "1.2.2",
     "@fortawesome/fontawesome-svg-core": "7.3.0",
     "@fortawesome/free-brands-svg-icons": "7.3.0",
     "@fortawesome/free-regular-svg-icons": "7.3.0",
@@ -78,7 +78,7 @@
     "sass-embedded": "1.100.0",
     "sirv": "3.0.2",
     "tailwindcss": "4.3.2",
-    "tsx": "4.23.0",
+    "tsx": "4.23.1",
     "typescript": "7.0.2",
     "unist-util-visit": "5.1.0",
     "vite": "8.1.4",

package/src/components/loading.tsx

@@ -14,7 +14,7 @@ export const Loading = ({ className, showText = false, loadingText, textClassNam
       <Spinner className={className} />
       {
         showText &&
-        <div className={classNames("text-sm text-gray-500", textClassName)}>{ loadingText ?? "Loading..."}</div>
+        <div className={classNames("text-sm text-muted-foreground", textClassName)}>{ loadingText ?? "Loading..."}</div>
       }
     </div>
   )

package/src/components/navigation.tsx

@@ -28,7 +28,7 @@ export function Navigation() {
                     {currentTab.groups.map(group => (
                         <div key={group.title}>
                             <h3 className="mt-4 text-sm font-semibold">{group.title}</h3>
-                            <ul role="list" className="mt-2 space-y-2 border-l-2 border-slate-100 lg:mt-4 lg:space-y-4 lg:border-slate-200 dark:border-slate-800">
+                            <ul role="list" className="mt-2 space-y-2 border-l-2 border-border lg:mt-4 lg:space-y-4 lg:border-border">
                                 {group.pages.map((page) => {
                                     const isActive = effectivePath === page.href;
                                     return (
@@ -39,7 +39,7 @@ export function Navigation() {
                                                 'block w-full pl-3.5 before:pointer-events-none before:absolute before:top-1/2 before:-left-1 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full',
                                                 {
                                                     'font-semibold text-brand-foreground': isActive,
-                                                    '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': !isActive
+                                                    'text-muted-foreground before:hidden before:bg-slate-300 hover:text-muted-foreground hover:before:block dark:text-muted-foreground dark:before:bg-slate-700 dark:hover:text-slate-300': !isActive
                                                 },
                                             )}>
                                                 {page.title}

package/src/components/routes.tsx

@@ -39,7 +39,7 @@ export default function Routes() {
       <div className="flex flex-col items-center justify-center min-h-[50vh] p-8">
         <h1 className="text-6xl font-bold text-gray-300 dark:text-gray-700 mb-4">404</h1>
         <h2 className="text-2xl font-semibold mb-4">Page Not Found</h2>
-        <p className="text-gray-600 dark:text-gray-400 mb-6 text-center max-w-md">
+        <p className="text-gray-600 dark:text-muted-foreground mb-6 text-center max-w-md">
           The page <code className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-sm">{pathname}</code> doesn't exist.
         </p>
         <button

package/src/components/search.tsx

@@ -154,7 +154,7 @@ function SearchResult({
         <div
           id={`${id}-hierarchy`}
           aria-hidden="true"
-          className="mt-1 truncate text-2xs whitespace-nowrap text-zinc-500"
+          className="mt-1 truncate text-2xs whitespace-nowrap text-muted-foreground"
         >
           {hierarchy.map((item, itemIndex, items) => (
             <Fragment key={itemIndex}>
@@ -348,7 +348,7 @@ function SearchDialog({
               />
               <div
                 ref={panelRef}
-                className="border-t border-zinc-200 bg-white empty:hidden dark:border-zinc-100/5 dark:bg-white/2.5"
+                className="border-t border-border bg-white empty:hidden dark:border-zinc-100/5 dark:bg-white/2.5"
                 {...autocomplete.getPanelProps({})}
               >
                 {autocompleteState.isOpen && (

package/src/embed/widget-iframe.ts

@@ -32,7 +32,7 @@ export class DoryWidget {
       this.overlay.style.cssText = `
         position: fixed;
         inset: 0;
-        background: rgba(0, 0, 0, 0.5);
+        background: rgb(14 34 64 / 0.5);
         z-index: 999998;
         opacity: 0;
         pointer-events: none;

package/src/entry-server.tsx

@@ -153,14 +153,14 @@ export async function render(routePath: string, frontmatter?: Record<string, any
                                 {currentTab.groups.map(group => (
                                   <div key={group.title}>
                                     <h3 class="mt-4 text-sm font-semibold">{group.title}</h3>
-                                    <ul role="list" class="mt-2 space-y-2 border-l-2 border-slate-100 lg:mt-4 lg:space-y-4 lg:border-slate-200 dark:border-slate-800">
+                                    <ul role="list" class="mt-2 space-y-2 border-l-2 border-border lg:mt-4 lg:space-y-4 lg:border-border">
                                       {group.pages.map(page => (
                                         <li key={page.href} class="relative">
                                           <a
                                             href={page.href}
                                             class={routePath === page.href
                                               ? 'block w-full pl-3.5 font-semibold text-brand-foreground before:pointer-events-none before:absolute before:top-1/2 before:-left-1 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full'
-                                              : 'block w-full pl-3.5 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 before:pointer-events-none before:absolute before:top-1/2 before:-left-1 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full'}
+                                              : 'block w-full pl-3.5 text-muted-foreground before:hidden before:bg-slate-300 hover:text-muted-foreground hover:before:block dark:text-muted-foreground dark:before:bg-slate-700 dark:hover:text-slate-300 before:pointer-events-none before:absolute before:top-1/2 before:-left-1 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full'}
                                           >
                                             {page.title}
                                           </a>

package/src/main.tsx

@@ -1,5 +1,6 @@
 import { render, hydrate } from 'preact'
 import '@clidey/ux/styles.css';
+import '@clidey/ux/brand.css';
 import { App } from './app.tsx'
 import { withMDX } from './components/mdx-provider.tsx'
 import { ErrorBoundary } from './components/error-boundary.tsx'

package/src/mdx/api-playground.tsx

@@ -154,8 +154,8 @@ export const HeadersTab = ({ requestConfig, setRequestConfig }: HeadersTabProps)
   return (
     <div className="flex flex-col gap-2 px-2 py-4">
       <div className="flex items-center gap-2 px-2">
-        <span className="text-sm font-medium text-zinc-400 w-32">Key</span>
-        <span className="text-sm font-medium text-zinc-400 flex-1">Value</span>
+        <span className="text-sm font-medium text-muted-foreground w-32">Key</span>
+        <span className="text-sm font-medium text-muted-foreground flex-1">Value</span>
       </div>
       {headersList.map((hdr, idx) => (
         <div key={idx} className="flex items-center gap-2">
@@ -274,8 +274,8 @@ export const ParamsTab = ({ queryParams, setQueryParams }: ParamsTabProps) => {
   return (
     <div className="flex flex-col gap-2 px-2 py-4">
       <div className="flex items-center gap-2">
-        <span className="text-sm font-medium text-zinc-400 w-32">Name</span>
-        <span className="text-sm font-medium text-zinc-400 flex-1">Value</span>
+        <span className="text-sm font-medium text-muted-foreground w-32">Name</span>
+        <span className="text-sm font-medium text-muted-foreground flex-1">Value</span>
       </div>
       {paramsList.map((p, i) => (
         <div key={i} className="flex items-center gap-2">
@@ -472,7 +472,7 @@ export function APIPlayground({
                       'px-4 py-3 text-sm font-medium transition border-b-2',
                       selected
                         ? 'border-brand-foreground text-brand-foreground'
-                        : 'border-transparent text-zinc-400 hover:text-zinc-300'
+                        : 'border-transparent text-muted-foreground hover:text-zinc-300'
                     )
                   }
                 >
@@ -518,7 +518,7 @@ export function APIPlayground({
                     </Highlight>
                   </div>
                 ) : (
-                  <p className="text-sm text-zinc-400">Request body not applicable for {method.toUpperCase()} requests.</p>
+                  <p className="text-sm text-muted-foreground">Request body not applicable for {method.toUpperCase()} requests.</p>
                 )}
               </TabPanel>
 
@@ -624,7 +624,7 @@ export function APIPlayground({
                   )}>
                     {response.status} {response.statusText}
                   </span>
-                  <span className="text-xs text-zinc-400">{response.duration}ms</span>
+                  <span className="text-xs text-muted-foreground">{response.duration}ms</span>
                 </div>
 
                 <div className="space-y-2">
@@ -642,7 +642,7 @@ export function APIPlayground({
                   <div className="space-y-1">
                     {Object.entries(response.headers).map(([key, value]) => (
                       <div key={key} className="flex text-xs">
-                        <span className="text-zinc-400 w-32">{key}:</span>
+                        <span className="text-muted-foreground w-32">{key}:</span>
                         <span className="text-zinc-300">{value}</span>
                       </div>
                     ))}

package/src/mdx/api.tsx

@@ -86,11 +86,11 @@ function CopyButton({ code }: { code: string }) {
       <span
         aria-hidden={copied}
         className={classNames(
-          'pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300',
+          'pointer-events-none flex items-center gap-0.5 text-muted-foreground transition duration-300',
           copied && '-translate-y-1.5 opacity-0',
         )}
       >
-        <ClipboardIcon className="h-4 w-4 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
+        <ClipboardIcon className="h-4 w-4 fill-zinc-500/20 stroke-muted-foreground transition-colors group-hover/button:stroke-muted-foreground" />
       </span>
       <span
         aria-hidden={!copied}
@@ -121,7 +121,7 @@ function APIPanelHeader({ tag, label }: { tag?: string; label?: string }) {
         <span className="h-0.5 w-0.5 rounded-full bg-zinc-500" />
       )}
       {label && (
-        <span className="font-mono text-xs text-zinc-400">{label}</span>
+        <span className="font-mono text-xs text-muted-foreground">{label}</span>
       )}
     </div>
   )
@@ -191,7 +191,7 @@ function APIGroupHeader({
                 'pt-2 transition data-selected:not-data-focus:outline-hidden',
                 childIndex === selectedIndex
                   ? 'border-sky-500 text-sky-400'
-                  : 'border-transparent text-zinc-400 hover:text-zinc-300',
+                  : 'border-transparent text-muted-foreground hover:text-zinc-300',
               )}
             >
               {/* @ts-expect-error child.props is not typed */}

package/src/mdx/async-api.tsx

@@ -254,7 +254,7 @@ export function AsyncAPI({
                                 >
                                   {prop.description}
                                   {prop.default !== undefined && (
-                                    <span className="text-gray-500 ml-1">(default: {JSON.stringify(prop.default)})</span>
+                                    <span className="text-muted-foreground ml-1">(default: {JSON.stringify(prop.default)})</span>
                                   )}
                                 </Property>
                               ))}

package/src/mdx/code.tsx

@@ -92,11 +92,11 @@ function CopyButton({ code }: { code: string }) {
       <span
         aria-hidden={copied}
         className={classNames(
-          'pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300 text-sm',
+          'pointer-events-none flex items-center gap-0.5 text-muted-foreground transition duration-300 text-sm',
           copied && '-translate-y-1.5 opacity-0',
         )}
       >
-        <ClipboardIcon className="h-4 w-4 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
+        <ClipboardIcon className="h-4 w-4 fill-zinc-500/20 stroke-muted-foreground transition-colors group-hover/button:stroke-muted-foreground" />
       </span>
       <span
         aria-hidden={!copied}
@@ -122,7 +122,7 @@ function CodePanelHeader({ tag, label }: { tag?: string; label?: string }) {
         </div>
       )}
       {tag && label && <span className="h-0.5 w-0.5 rounded-full bg-zinc-500" />}
-      {label && <span className="font-mono text-xs text-zinc-400">{label}</span>}
+      {label && <span className="font-mono text-xs text-muted-foreground">{label}</span>}
     </div>
   )
 }
@@ -200,7 +200,7 @@ function CodeGroupHeader({
                   'pt-2 transition data-selected:not-data-focus:outline-hidden',
                   index === selectedIndex
                     ? 'border-emerald-500 text-emerald-400'
-                    : 'border-transparent text-zinc-400 hover:text-zinc-300',
+                    : 'border-transparent text-muted-foreground hover:text-zinc-300',
                 )}
               >
                 {panelTitle}

package/src/mdx/expandable.tsx

@@ -14,18 +14,18 @@ export function Expandable({
     <Accordion
       type="single"
       collapsible
-      className="my-6 rounded-xl border border-slate-200 dark:border-slate-700"
+      className="my-6 rounded-xl border border-border"
     >
       <AccordionItem value="expandable">
-        <AccordionTrigger className="group flex w-full items-start justify-between text-left text-slate-900 dark:text-white p-6">
+        <AccordionTrigger className="group flex w-full items-start justify-between text-left text-foreground dark:text-white p-6">
           <div className="flex items-center gap-2">
             {icon && <Icon icon={icon} className="h-8 w-8" />}
-            <span className="text-base font-display text-slate-900 dark:text-white">{title}</span>
+            <span className="text-base font-display text-foreground dark:text-white">{title}</span>
           </div>
         </AccordionTrigger>
         <AccordionContent asChild>
           <dd className="px-6 pb-6">
-            <div className="text-sm text-slate-700 dark:text-slate-400 leading-tight [&>p]:mb-0">
+            <div className="text-sm text-foreground/80 leading-tight [&>p]:mb-0">
               {children}
             </div>
           </dd>

package/src/mdx/mdx.tsx

@@ -65,6 +65,6 @@ export const wrapper = ({ children }: { children: preact.ComponentChildren }) =>
 };
 
 
-export const hr = () => <hr className="my-4 text-gray-500/25 dark:text-gray-200/25" />;
+export const hr = () => <hr className="my-4 text-muted-foreground/25 dark:text-gray-200/25" />;
 
 export const br = () => <br />;

package/src/mdx/mermaid.tsx

@@ -137,7 +137,7 @@ export function MermaidRenderer({ content }: { content: string }) {
     return (
         <div className="mermaid-wrapper my-8">
             {!isLoaded && (
-                <div className="flex items-center justify-center py-8 text-gray-400">
+                <div className="flex items-center justify-center py-8 text-muted-foreground">
                     <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
                     <span className="ml-2">Loading diagram...</span>
                 </div>

package/src/mdx/open-api.tsx

@@ -35,7 +35,7 @@ export function Property({
       <div className="my-4 flex flex-wrap items-center gap-x-3 gap-2">
         <div className="flex gap-2 items-center grow">
           <Tag className="px-4 py-1">{name}</Tag>
-          <p className="font-mono text-xs text-zinc-400 dark:text-zinc-500">
+          <p className="font-mono text-xs text-muted-foreground/80">
             {type}
           </p>
           <div className="flex grow justify-end ">
@@ -63,7 +63,7 @@ export function ParamField({ body, type, default: defaultValue, required, childr
     <Property name={body} type={type} required={required}>
       {children}
       {defaultValue != null && (
-        <span className="text-gray-500 ml-1">(default: {defaultValue})</span>
+        <span className="text-muted-foreground ml-1">(default: {defaultValue})</span>
       )}
     </Property>
   );

package/src/mdx/source.tsx

@@ -37,7 +37,7 @@ export const Source = ({ url, branch = "main", paths }: SourceProps) => {
 
     return (
         <div>
-            <p className="text-sm text-slate-900 dark:text-white">Sources:</p>
+            <p className="text-sm text-foreground dark:text-white">Sources:</p>
             <ul className="list-none pl-0 flex flex-wrap gap-2 mt-2">
                 {paths.map(({ path, range }) => (
                     <li key={path + (range || '')}>
@@ -45,7 +45,7 @@ export const Source = ({ url, branch = "main", paths }: SourceProps) => {
                             href={createSourceUrl(path, range)}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="rounded px-3 py-1 font-mono text-sm text-slate-700 dark:text-slate-400 hover:opacity-80 transition-colors border border-slate-200 dark:border-slate-700"
+                            className="rounded px-3 py-1 font-mono text-sm text-foreground/80 hover:opacity-80 transition-colors border border-border"
                         >
                             {path}
                             {range && <span className="ml-2 opacity-70">{range}</span>}

package/src/mdx/websocket-playground.tsx

@@ -145,8 +145,8 @@ export const HeadersTab = ({ wsConfig, setWsConfig }: HeadersTabProps) => {
   return (
     <div className="flex flex-col gap-2 px-2 py-4">
       <div className="flex items-center gap-2 px-2">
-        <span className="text-sm font-medium text-zinc-400 w-32">Key</span>
-        <span className="text-sm font-medium text-zinc-400 flex-1">Value</span>
+        <span className="text-sm font-medium text-muted-foreground w-32">Key</span>
+        <span className="text-sm font-medium text-muted-foreground flex-1">Value</span>
       </div>
       {headersList.map((hdr, idx) => (
         <div key={idx} className="flex items-center gap-2">
@@ -264,7 +264,7 @@ export const SubprotocolsTab = ({ subprotocols, setWsConfig }: SubprotocolsTabPr
   return (
     <div className="flex flex-col gap-2 px-2 py-4">
       <div className="flex items-center gap-2">
-        <span className="text-sm font-medium text-zinc-400 flex-1">Subprotocol</span>
+        <span className="text-sm font-medium text-muted-foreground flex-1">Subprotocol</span>
       </div>
       {subprotocolsList.map((s, i) => (
         <div key={i} className="flex items-center gap-2">
@@ -460,7 +460,7 @@ function WebSocketPlaygroundInternal({
       case 'error':
         return 'text-red-400'
       default:
-        return 'text-zinc-400'
+        return 'text-muted-foreground'
     }
   }
 
@@ -498,7 +498,7 @@ function WebSocketPlaygroundInternal({
             className={classNames(
               'flex items-center gap-2',
               connectionState === 'connecting' || connectionState === 'connected'
-                ? 'bg-zinc-600 text-zinc-400 cursor-not-allowed'
+                ? 'bg-zinc-600 text-muted-foreground cursor-not-allowed'
                 : 'bg-green-600 text-white hover:bg-green-700'
             )}
           >
@@ -515,7 +515,7 @@ function WebSocketPlaygroundInternal({
             variant="destructive"
             className={classNames(
               'flex items-center gap-2',
-              connectionState === 'disconnected' && 'bg-zinc-600 text-zinc-400 cursor-not-allowed'
+              connectionState === 'disconnected' && 'bg-zinc-600 text-muted-foreground cursor-not-allowed'
             )}
           >
             <DisconnectButton className="h-4 w-4" />
@@ -554,7 +554,7 @@ function WebSocketPlaygroundInternal({
                         'px-4 py-3 text-sm font-medium transition border-b-2',
                         selected
                           ? 'border-brand-foreground text-brand-foreground'
-                          : 'border-transparent text-zinc-400 hover:text-zinc-300'
+                          : 'border-transparent text-muted-foreground hover:text-zinc-300'
                       )
                     }
                   >
@@ -659,7 +659,7 @@ function WebSocketPlaygroundInternal({
                 onClick={clearMessages}
                 variant="ghost"
                 size="sm"
-                className="text-xs text-zinc-400 hover:text-zinc-300"
+                className="text-xs text-muted-foreground hover:text-zinc-300"
               >
                 Clear
               </Button>
@@ -686,14 +686,14 @@ function WebSocketPlaygroundInternal({
                         msg.type === 'sent' && 'text-sky-400',
                         msg.type === 'received' && 'text-green-400',
                         msg.type === 'error' && 'text-red-400',
-                        msg.type === 'system' && 'text-zinc-400'
+                        msg.type === 'system' && 'text-muted-foreground'
                       )}>
                         {msg.type === 'sent' ? 'Sent' : 
                          msg.type === 'received' ? 'Received' : 
                          msg.type === 'error' ? 'Error' : 'System'}
                         {msg.binary && ' (Binary)'}
                       </span>
-                      <span className="text-xs text-zinc-500">
+                      <span className="text-xs text-muted-foreground">
                         {new Date(msg.timestamp).toLocaleTimeString()}
                       </span>
                     </div>
@@ -791,7 +791,7 @@ export function WebSocketPlayground(props: WebSocketPlaygroundProps) {
         <div className="px-4 py-3">
           <div className="flex flex-col gap-2">
             <div className="flex items-center gap-2">
-              <span className="text-xs font-medium text-zinc-400">Endpoint:</span>
+              <span className="text-xs font-medium text-muted-foreground">Endpoint:</span>
               <Badge>
                 {props.servers?.[0]?.url || 'ws://localhost'}{props.url}
               </Badge>
@@ -799,7 +799,7 @@ export function WebSocketPlayground(props: WebSocketPlaygroundProps) {
 
             {props.subprotocols && props.subprotocols.length > 0 && (
               <div className="flex items-center gap-2">
-                <span className="text-xs font-medium text-zinc-400">Subprotocols:</span>
+                <span className="text-xs font-medium text-muted-foreground">Subprotocols:</span>
                 <div className="flex gap-1">
                   {props.subprotocols.map((protocol, idx) => (
                     <Badge key={idx}>
@@ -812,7 +812,7 @@ export function WebSocketPlayground(props: WebSocketPlaygroundProps) {
 
             {props.authType && props.authType !== 'none' && (
               <div className="flex items-center gap-2">
-                <span className="text-xs font-medium text-zinc-400">Authentication:</span>
+                <span className="text-xs font-medium text-muted-foreground">Authentication:</span>
                 <Badge>
                   {props.authType}
                 </Badge>

package/src/theme.scss

@@ -4,10 +4,10 @@
     -moz-osx-font-smoothing: grayscale;
 
     // Brand colors (dynamically set from dory.json via loadColors())
-    --brand-foreground: #0ea5e9;
-    --brand-primary: #0ea5e9;
-    --brand-light: #38bdf8;
-    --brand-dark: #0284c7;
+    --brand-foreground: #2C6BD4;
+    --brand-primary: #2C6BD4;
+    --brand-light: #2C6BD4;
+    --brand-dark: #4787F3;
 
     // Font families
     --font-body: inherit;
@@ -103,8 +103,8 @@ html, body, #app {
     // Page title — large display serif
     .dory-page-title {
         font-family: var(--font-heading, var(--font-body, inherit));
-        font-weight: 380;
-        font-variation-settings: "opsz" 144, "SOFT" 30;
+        font-weight: 700;
+        font-variation-settings: "opsz" 96;
         letter-spacing: -0.02em;
     }
 
@@ -120,8 +120,8 @@ html, body, #app {
     // Article headings — serif with proper optical sizing
     article h2 {
         font-family: var(--font-heading, var(--font-body, inherit));
-        font-weight: 400;
-        font-variation-settings: "opsz" 48, "SOFT" 50;
+        font-weight: 600;
+        font-variation-settings: "opsz" 48;
         letter-spacing: -0.015em;
     }
 

package/src/ui/table-of-content.tsx

@@ -138,7 +138,7 @@ export function TableOfContents() {
           <>
             <h2
               id="on-this-page-title"
-              className="font-display text-sm font-medium text-slate-900 dark:text-white"
+              className="font-display text-sm font-medium text-foreground dark:text-white"
             >
               On this page
             </h2>
@@ -150,13 +150,13 @@ export function TableOfContents() {
                       href={`#${section.id}`}
                       className={classNames({
                         "text-brand-foreground": isActive(section),
-                        "font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300": !isActive(section),
+                        "font-normal text-muted-foreground hover:text-foreground/80 dark:hover:text-slate-300": !isActive(section),
                       })}>
                       {section.title}
                     </a>
                   </h3>
                   {section.children.length > 0 && (
-                    <ol role="list" className="mt-2 space-y-3 pl-5 text-slate-500 dark:text-slate-400">
+                    <ol role="list" className="mt-2 space-y-3 pl-5 text-muted-foreground dark:text-muted-foreground">
                       {section.children.map((subSection) => (
                         <li key={subSection.id}>
                           <a
@@ -164,7 +164,7 @@ export function TableOfContents() {
                             className={
                               isActive(subSection)
                                 ? 'text-brand-foreground'
-                                : 'hover:text-slate-600 dark:hover:text-slate-300'
+                                : 'hover:text-muted-foreground dark:hover:text-slate-300'
                             }
                           >
                             {subSection.title}