From 2a39ca5930b203719b8bf3d5ce543877eb690d00 Mon Sep 17 00:00:00 2001
From: Josemar Luedke <josemarluedke@gmail.com>
Date: Fri, 16 Feb 2024 16:04:59 -0800
Subject: [PATCH] docs: improve docs styling

---
 packages/overlays/src/components/modal.gts    |   6 +-
 packages/overlays/src/components/popover.gts  |   8 +-
 pnpm-lock.yaml                                |  18 +-
 site/.docfy-config.js                         |   2 +-
 site/app/components/docfy/docfy-header.gts    |  20 +-
 site/app/components/docfy/docfy-jump-to.gts   |  19 +-
 .../docfy/docfy-sidebar-nav/content.gts       |  12 +-
 .../docfy/docfy-sidebar-nav/index.gts         |   8 +-
 .../components/docfy/docfy-theme-switcher.gts |   3 +
 site/app/components/signature.gts             |  16 +-
 site/app/index.html                           |   2 +
 site/app/styles/docfy-demo.css                |   5 +-
 site/app/styles/highlight.css                 | 228 +++++++++---------
 site/app/templates/application.gts            |   1 -
 site/package.json                             |   4 +-
 site/tailwind.config.js                       |   1 +
 16 files changed, 179 insertions(+), 174 deletions(-)

diff --git a/packages/overlays/src/components/modal.gts b/packages/overlays/src/components/modal.gts
index 7c45c98f..098ef8a7 100644
--- a/packages/overlays/src/components/modal.gts
+++ b/packages/overlays/src/components/modal.gts
@@ -75,10 +75,8 @@ export interface ModalSignature {
   Blocks: {
     default: [
       {
-        CloseButton: WithBoundArgs<typeof CloseButton, 'onClick'> &
-          WithBoundArgs<typeof CloseButton, 'class'>;
-        Header: WithBoundArgs<typeof ModalHeader, 'labelledById'> &
-          WithBoundArgs<typeof ModalHeader, 'class'>;
+        CloseButton: WithBoundArgs<typeof CloseButton, 'onClick' | 'class'>;
+        Header: WithBoundArgs<typeof ModalHeader, 'labelledById' | 'class'>;
         Body: WithBoundArgs<typeof ModalBody, 'class'>;
         Footer: WithBoundArgs<typeof ModalFooter, 'class'>;
         headerId: string;
diff --git a/packages/overlays/src/components/popover.gts b/packages/overlays/src/components/popover.gts
index 3fc083ca..6c9016e2 100644
--- a/packages/overlays/src/components/popover.gts
+++ b/packages/overlays/src/components/popover.gts
@@ -100,8 +100,8 @@ class Popover extends Component<PopoverSignature> {
     (el: HTMLElement, [eventType]: [eventType?: 'click' | 'hover']) => {
       this.triggerEl = el as HTMLLIElement;
       if (eventType === 'hover') {
-        el.addEventListener('mouseenter', this.toggle);
-        el.addEventListener('mouseleave', this.toggle);
+        el.addEventListener('mouseenter', this.open);
+        el.addEventListener('mouseleave', this.close);
       } else {
         el.addEventListener('click', this.toggle);
       }
@@ -111,8 +111,8 @@ class Popover extends Component<PopoverSignature> {
 
       return () => {
         if (eventType === 'hover') {
-          el.removeEventListener('mouseenter', this.toggle);
-          el.removeEventListener('mouseleave', this.toggle);
+          el.removeEventListener('mouseenter', this.open);
+          el.removeEventListener('mouseleave', this.close);
         } else {
           el.removeEventListener('click', this.toggle);
         }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 60bb82c4..aa0a5682 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1014,11 +1014,11 @@ importers:
         specifier: ^0.8.0
         version: 0.8.0
       '@docfy/ember':
-        specifier: ^0.8.0
-        version: 0.8.0(@babel/core@7.23.9)(@glint/template@1.3.0)
+        specifier: ^0.8.4
+        version: 0.8.4(@babel/core@7.23.9)(@glint/template@1.3.0)
       '@docfy/plugin-with-prose':
-        specifier: ^0.8.0
-        version: 0.8.0
+        specifier: ^0.8.4
+        version: 0.8.4
       '@ember/optional-features':
         specifier: ^2.0.0
         version: 2.0.0
@@ -2893,8 +2893,8 @@ packages:
       - supports-color
     dev: true
 
-  /@docfy/ember@0.8.0(@babel/core@7.23.9)(@glint/template@1.3.0):
-    resolution: {integrity: sha512-Wcvx/UAFOrhjNiYNEnd92ICU12UEMl8QItiQCj8zytBFbxZ9Ta/+vz/xNMbAohbuQ0k/YGfAivCdAOQWxDwgqg==}
+  /@docfy/ember@0.8.4(@babel/core@7.23.9)(@glint/template@1.3.0):
+    resolution: {integrity: sha512-RS4SdqNVMSnHaucHzYiYsjUDOCcrCxKS4yDCT7Eg/2K5JTWZEELGD5uk9oxSJgvnEz2jmzt7ARtKIGz9Cd2dkA==}
     engines: {node: '>= 12'}
     dependencies:
       '@docfy/core': 0.8.0
@@ -2922,8 +2922,8 @@ packages:
       - supports-color
     dev: true
 
-  /@docfy/plugin-with-prose@0.8.0:
-    resolution: {integrity: sha512-oaob3CDuBSSzv/a8D9ShuD5YqkwAH0QGRp3zwEyyOcCULFFlTF/Y+M47h0E36bgoohPW/mevabB0Sf2PLOhO2w==}
+  /@docfy/plugin-with-prose@0.8.4:
+    resolution: {integrity: sha512-ejHSZEslPYK/AiI8cynbWWnIX13tQg4GWOAnYuaw4NlJ8iV3tRrfiRc18GkkHvTVCKStZ/T8ZEKeUFsMgsIsOQ==}
     engines: {node: '>= 12.*'}
     dependencies:
       '@docfy/core': 0.8.0
@@ -9387,7 +9387,7 @@ packages:
     resolution: {integrity: sha512-diD+HwwY8QqpEk5DnDYfH7onYwl6NOgr1qv1ENbXih+/iiWYUVS/e0S/PlM7A4gdorD9spn1bnisnTLTf49Wpw==}
     engines: {node: 12.* || 14.* || >= 16}
     dependencies:
-      '@embroider/macros': 1.13.4(@glint/template@1.3.0)
+      '@embroider/macros': 1.13.5(@glint/template@1.3.0)
       ember-cli-babel: 7.26.11
     transitivePeerDependencies:
       - '@glint/template'
diff --git a/site/.docfy-config.js b/site/.docfy-config.js
index 6f4b551d..ff08c5c5 100644
--- a/site/.docfy-config.js
+++ b/site/.docfy-config.js
@@ -13,7 +13,7 @@ module.exports = {
     editBranch: 'main'
   },
   tocMaxDepth: 3,
-  plugins: [withProse({ className: 'prose dark:prose-light' })],
+  plugins: [withProse({ className: 'prose dark:prose-invert' })],
   remarkPlugins: [autolinkHeadings, codeImport],
   rehypePlugins: [
     [
diff --git a/site/app/components/docfy/docfy-header.gts b/site/app/components/docfy/docfy-header.gts
index b2e4046b..5df328f6 100644
--- a/site/app/components/docfy/docfy-header.gts
+++ b/site/app/components/docfy/docfy-header.gts
@@ -4,7 +4,6 @@ import DocfyThemeSwitcher from './docfy-theme-switcher';
 
 interface DocfyHeaderSignature {
   Args: {
-    darkOnly?: boolean;
     indexRoute?: string;
     githubUrl: string;
     disableThemeSwitcher?: boolean;
@@ -19,31 +18,26 @@ interface DocfyHeaderSignature {
 
 export default class DocfyHeader extends Component<DocfyHeaderSignature> {
   <template>
-    <div class="sticky top-0 z-1 {{if @darkOnly 'dark'}}">
+    <div class="sticky top-0 z-1 dark">
       <div
-        class="h-16 border-b border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 backdrop-filter backdrop-blur
-          {{if
-            @darkOnly
-            'dark:bg-opacity-90'
-            'bg-opacity-50 dark:bg-opacity-50'
-          }}"
+        class="h-16 border-b border-primary-200 bg-primary-200 backdrop-filter backdrop-blur bg-opacity-90"
         ...attributes
       >
         <div class="flex h-full px-4 mx-auto sm:px-6 max-w-screen-2xl">
           <div class="flex items-center mr-4">
             <LinkTo
               @route={{if @indexRoute @indexRoute "index"}}
-              class="text-black dark:text-white text-lg font-bold outline-none focus-visible:ring"
+              class="text-white text-lg font-bold outline-none focus-visible:ring"
             >
               {{yield to="title"}}
             </LinkTo>
           </div>
           <div
-            class="flex items-center justify-between flex-grow px-2 md:px-6 text-gray-800 dark:text-gray-200"
+            class="flex items-center justify-between flex-grow px-2 md:px-6 text-default-800"
           >
             {{#let
-              "transition pb-1.5 pt-1.5 border-b-2 border-transparent hover:border-primary-700 dark:hover:border-primary-500 outline-none focus-visible:ring hover:text-gray-800 dark:hover:text-gray-400"
-              "border-primary-700 dark:border-primary-500"
+              "transition pb-1.5 pt-1.5 border-b-2 border-transparent hover:border-primary-500 outline-none focus-visible:ring hover:text-default-600"
+              "border-primary-500"
               as |linkClass linkClassActive|
             }}
               <div class="flex items-center gap-4">
@@ -57,7 +51,7 @@ export default class DocfyHeader extends Component<DocfyHeaderSignature> {
                   href={{@githubUrl}}
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="transition text-gray-800 dark:text-gray-200 outline-none focus-visible:ring hover:text-gray-800 dark:hover:text-gray-400"
+                  class="transition text-default-800 outline-none focus-visible:ring hover:text-default-600"
                 >
                   <svg viewBox="0 0 20 20" class="w-6 h-6 fill-current">
                     <title>
diff --git a/site/app/components/docfy/docfy-jump-to.gts b/site/app/components/docfy/docfy-jump-to.gts
index 6b26ceca..b356beaf 100644
--- a/site/app/components/docfy/docfy-jump-to.gts
+++ b/site/app/components/docfy/docfy-jump-to.gts
@@ -155,7 +155,7 @@ export default class DocfyJumpTo extends Component<DocfyJumpToArgs> {
   <template>
     <button
       type="button"
-      class="transition flex items-center rounded focus-visible:ring outline-none hover:text-gray-800 dark:hover:text-gray-400"
+      class="transition flex items-center rounded focus-visible:ring outline-none hover:text-default-800"
       {{on "click" this.toggle}}
       {{this.setupShortcut}}
     >
@@ -174,7 +174,7 @@ export default class DocfyJumpTo extends Component<DocfyJumpToArgs> {
 
       Search
       <code
-        class="hidden sm:block ml-3 rounded border font-bold border-gray-300 dark:border-gray-600 px-2 py-1 text-xs leading-none"
+        class="hidden sm:block ml-3 rounded border font-bold border-default-600 px-2 py-1 text-xs leading-none"
       >
         /
       </code>
@@ -187,11 +187,11 @@ export default class DocfyJumpTo extends Component<DocfyJumpToArgs> {
       @backdrop={{"blur"}}
     >
       <div
-        class="p-4 mx-auto text-white mt-20 max-w-md w-full"
+        class="p-4 mx-auto text-white mt-20 max-w-md w-full dark"
         {{this.registerContainerElement}}
       >
         <div
-          class="bg-gray-900 backdrop-blur bg-opacity-80 rounded overflow-hidden border border-gray-700"
+          class="bg-default-50 backdrop-blur bg-opacity-80 rounded overflow-hidden border border-default-200"
         >
           {{!  template-lint-disable self-closing-void-elements  }}
           <VisuallyHidden>
@@ -203,8 +203,8 @@ export default class DocfyJumpTo extends Component<DocfyJumpToArgs> {
             id="docfy-jump-to-input"
             autocomplete="off"
             placeholder="Search..."
-            class="p-4 bg-transparent w-full focus:outline-none placeholder-gray-500
-              {{if this.results.length 'border-b border-gray-700'}}
+            class="p-4 bg-transparent w-full focus:outline-none placeholder-default-500
+              {{if this.results.length 'border-b border-default-300'}}
               "
             {{on "input" this.search}}
             {{on "keydown" this.onInputKeyDown}}
@@ -216,7 +216,10 @@ export default class DocfyJumpTo extends Component<DocfyJumpToArgs> {
               <DocfyLink
                 @to={{result.item.url}}
                 class="flex items-center p-4 outline-none focus-visible:ring ring-inset
-                  {{if (eq this.selected index) 'bg-gray-700 text-white'}}"
+                  {{if
+                    (eq this.selected index)
+                    'bg-primary-500 text-primary-foreground'
+                  }}"
                 data-result={{index}}
                 {{on "click" this.onItemClick}}
                 {{on "mouseenter" this.selectElement}}
@@ -240,7 +243,7 @@ export default class DocfyJumpTo extends Component<DocfyJumpToArgs> {
                   ></path>
                 </svg>
 
-                <span class="text-gray-300">
+                <span class="text-default-800">
                   {{result.item.title}}
                 </span>
               </DocfyLink>
diff --git a/site/app/components/docfy/docfy-sidebar-nav/content.gts b/site/app/components/docfy/docfy-sidebar-nav/content.gts
index a09349f0..4176d5e5 100644
--- a/site/app/components/docfy/docfy-sidebar-nav/content.gts
+++ b/site/app/components/docfy/docfy-sidebar-nav/content.gts
@@ -22,8 +22,8 @@ export default class DocfySidebarNavContent extends Component<Signature> {
           <li>
             <DocfyLink
               @to={{page.url}}
-              class="transition pl-2 py-1 hover:text-primary-800 text-sm block rounded hover:bg-primary-100 outline-none focus-visible:ring ring-inset"
-              @activeClass="text-primary-800"
+              class="transition pl-2 py-1 hover:text-primary-950 text-sm block rounded hover:bg-primary-50 outline-none focus-visible:ring ring-inset"
+              @activeClass="text-foreground"
             >
               {{page.title}}
             </DocfyLink>
@@ -41,8 +41,8 @@ export default class DocfySidebarNavContent extends Component<Signature> {
                 <li class="truncate">
                   <DocfyLink
                     @to={{page.url}}
-                    class="transition pl-6 py-1 hover:text-primary-800 text-sm block rounded hover:bg-primary-100 outline-none focus-visible:ring ring-inset"
-                    @activeClass="text-primary-800 d bg-primary-100 0"
+                    class="transition pl-6 py-1 hover:text-primary-950 text-sm block rounded hover:bg-primary-50 outline-none focus-visible:ring ring-inset"
+                    @activeClass="text-foreground d bg-primary-50"
                   >
                     {{page.title}}
                     {{#if page.frontmatter.label}}
@@ -70,8 +70,8 @@ export default class DocfySidebarNavContent extends Component<Signature> {
                       <li class="truncate">
                         <DocfyLink
                           @to={{page.url}}
-                          class="transition pl-10 py-1 hover:text-primary-800 text-sm block rounded hover:bg-primary-100 outline-none focus-visible:ring ring-inset"
-                          @activeClass="text-primary-800 bg-primary-100 "
+                          class="transition pl-10 py-1 hover:text-primary-950 text-sm block rounded hover:bg-primary-50 outline-none focus-visible:ring ring-inset"
+                          @activeClass="text-foreground bg-primary-50"
                         >
                           {{page.title}}
                         </DocfyLink>
diff --git a/site/app/components/docfy/docfy-sidebar-nav/index.gts b/site/app/components/docfy/docfy-sidebar-nav/index.gts
index f8c8ce3a..c71eee02 100644
--- a/site/app/components/docfy/docfy-sidebar-nav/index.gts
+++ b/site/app/components/docfy/docfy-sidebar-nav/index.gts
@@ -48,7 +48,7 @@ export default class SidebarNav extends Component<Signature> {
   <template>
     <button
       type="button"
-      class="fixed z-1 bottom-4 right-4 flex items-center p-4 border rounded-full lg:hidden bg-gray-900 backdrop-filter backdrop-blur bg-opacity-70 text-white border-gray-700 focus-visible:ring outline-none"
+      class="fixed z-1 bottom-4 right-4 flex items-center p-4 border rounded-full lg:hidden bg-default-400 backdrop-filter backdrop-blur bg-opacity-70 text-white border-default-700 focus-visible:ring outline-none"
       {{on "click" this.toggle}}
     >
       <VisuallyHidden>Contents</VisuallyHidden>
@@ -66,13 +66,13 @@ export default class SidebarNav extends Component<Signature> {
       @onClose={{this.toggle}}
       @size="xs"
       @allowCloseButton={{false}}
-      class="bg-gray-900 backdrop-filter backdrop-blur bg-opacity-80 dark border-l border-gray-700 outline-none focus-visible:ring ring-inset"
+      class="backdrop-filter backdrop-blur bg-opacity-80 outline-none focus-visible:ring ring-inset"
       as |m|
     >
       <m.CloseButton
-        class="dark:text-white hover:bg-gray-800 outline-none focus-visible:ring"
+        class="dark:text-white hover:bg-default-800 outline-none focus-visible:ring"
       />
-      <m.Header class="border-b border-gray-700 dark:text-white">
+      <m.Header class="text-foreground">
         Contents
       </m.Header>
       <m.Body class="dark:text-white">
diff --git a/site/app/components/docfy/docfy-theme-switcher.gts b/site/app/components/docfy/docfy-theme-switcher.gts
index a8af792f..82aa6440 100644
--- a/site/app/components/docfy/docfy-theme-switcher.gts
+++ b/site/app/components/docfy/docfy-theme-switcher.gts
@@ -12,6 +12,7 @@ interface Signature {
 declare const FastBoot: unknown;
 
 const DARK_MODE_CLASS = 'dark';
+const LIGHT_MODE_CLASS = 'light';
 
 export default class DocfyThemeSwitcher extends Component<Signature> {
   @tracked prefersDark = false;
@@ -52,9 +53,11 @@ export default class DocfyThemeSwitcher extends Component<Signature> {
     body.style.transitionDelay = '0s, 0s';
 
     if (this.prefersDark) {
+      document.documentElement.classList.remove(LIGHT_MODE_CLASS);
       document.documentElement.classList.add(DARK_MODE_CLASS);
     } else {
       document.documentElement.classList.remove(DARK_MODE_CLASS);
+      document.documentElement.classList.add(LIGHT_MODE_CLASS);
     }
 
     later(
diff --git a/site/app/components/signature.gts b/site/app/components/signature.gts
index 45247984..73fb456f 100644
--- a/site/app/components/signature.gts
+++ b/site/app/components/signature.gts
@@ -82,7 +82,10 @@ const PropertiesTable: TOC<{
     items?: ComponentDoc['Args'];
   };
 }> = <template>
-  <div class="prose dark:prose-light mt-8 overflow-x-scroll" ...attributes>
+  <div
+    class="prose dark:prose-invert mt-8 overflow-x-scroll hljs-light-theme"
+    ...attributes
+  >
     <table class="text-sm">
       <thead>
         <tr>
@@ -105,7 +108,7 @@ const PropertiesTable: TOC<{
           {{#unless (shouldIgnoreTag arg.tags)}}
             <tr>
               <td class="">
-                <code class="hljs-light-theme code-transparent">
+                <code class="code-transparent">
                   <span class="hljs-name">
                     {{arg.identifier}}
                   </span>
@@ -136,7 +139,7 @@ const PropertiesTable: TOC<{
                 {{/if}}
               </td>
               <td class="flex items-center">
-                <code class="hljs-light-theme code-transparent">
+                <code class="code-transparent">
                   {{! template-lint-disable  }}
                   {{{arg.type.type}}}
                   {{! template-lint-enable }}
@@ -155,9 +158,9 @@ const PropertiesTable: TOC<{
                     <pop.Content
                       @closeOnOutsideClick={{false}}
                       @size="lg"
-                      @class="p-4"
+                      @class="p-4 hljs-light-theme"
                     >
-                      <code class="hljs-light-theme code-transparent">
+                      <code class="code-transparent">
                         {{! template-lint-disable  }}
                         {{{arg.type.raw}}}
                         {{! template-lint-enable }}
@@ -168,8 +171,7 @@ const PropertiesTable: TOC<{
               </td>
               <td>
                 {{#if arg.defaultValue}}
-
-                  <code class="hljs-light-theme code-transparent">
+                  <code class="code-transparent">
                     {{! template-lint-disable  }}
                     {{{arg.defaultValue}}}
                     {{! template-lint-enable }}
diff --git a/site/app/index.html b/site/app/index.html
index 28684597..ce746716 100644
--- a/site/app/index.html
+++ b/site/app/index.html
@@ -33,6 +33,8 @@
 
       if (colorMode === 'dark') {
         root.classList.add('dark');
+      } else {
+        root.classList.add('light');
       }
     })();
   </script>
diff --git a/site/app/styles/docfy-demo.css b/site/app/styles/docfy-demo.css
index 82ca230a..658f9513 100644
--- a/site/app/styles/docfy-demo.css
+++ b/site/app/styles/docfy-demo.css
@@ -18,6 +18,7 @@
 
     &__edit-url {
       @apply text-xs;
+
       &:hover {
         @apply text-primary-600;
       }
@@ -44,8 +45,9 @@
   @apply border rounded-b;
 
   pre {
+    @apply m-0;
     @apply p-4;
-    @apply flex text-default-200 bg-default-800;
+    @apply flex text-gray-200 bg-gray-800;
     @apply text-sm leading-normal;
     @apply font-mono;
     @apply rounded-b;
@@ -68,7 +70,6 @@
   }
 
   .docfy-demo__snippet pre {
-    @apply bg-content1;
     @apply border-default-200;
   }
 
diff --git a/site/app/styles/highlight.css b/site/app/styles/highlight.css
index 8da6360e..0846d3b8 100644
--- a/site/app/styles/highlight.css
+++ b/site/app/styles/highlight.css
@@ -127,118 +127,120 @@
   padding: 0;
 }
 
-.hljs-light-theme {
-  .hljs {
-    color: #24292e;
-  }
-
-  .hljs-doctag,
-  .hljs-keyword,
-  .hljs-meta .hljs-keyword,
-  .hljs-template-tag,
-  .hljs-template-variable,
-  .hljs-type,
-  .hljs-variable.language_ {
-    /* prettylights-syntax-keyword */
-    color: #d73a49;
-  }
-
-  .hljs-title,
-  .hljs-title.class_,
-  .hljs-title.class_.inherited__,
-  .hljs-title.function_ {
-    /* prettylights-syntax-entity */
-    color: #6f42c1;
-  }
-
-  .hljs-attr,
-  .hljs-attribute,
-  .hljs-literal,
-  .hljs-meta,
-  .hljs-number,
-  .hljs-operator,
-  .hljs-variable,
-  .hljs-selector-attr,
-  .hljs-selector-class,
-  .hljs-selector-id {
-    /* prettylights-syntax-constant */
-    color: #005cc5;
-  }
-
-  .hljs-regexp,
-  .hljs-string,
-  .hljs-meta .hljs-string {
-    /* prettylights-syntax-string */
-    color: #032f62;
-  }
-
-  .hljs-built_in,
-  .hljs-symbol {
-    /* prettylights-syntax-variable */
-    color: #e36209;
-  }
-
-  .hljs-comment,
-  .hljs-code,
-  .hljs-formula {
-    /* prettylights-syntax-comment */
-    color: #6a737d;
-  }
-
-  .hljs-name,
-  .hljs-quote,
-  .hljs-selector-tag,
-  .hljs-selector-pseudo {
-    /* prettylights-syntax-entity-tag */
-    color: #22863a;
-  }
-
-  .hljs-subst {
-    /* prettylights-syntax-storage-modifier-import */
-    color: #24292e;
-  }
-
-  .hljs-section {
-    /* prettylights-syntax-markup-heading */
-    color: #005cc5;
-    font-weight: bold;
-  }
-
-  .hljs-bullet {
-    /* prettylights-syntax-markup-list */
-    color: #735c0f;
-  }
-
-  .hljs-emphasis {
-    /* prettylights-syntax-markup-italic */
-    color: #24292e;
-    font-style: italic;
-  }
-
-  .hljs-strong {
-    /* prettylights-syntax-markup-bold */
-    color: #24292e;
-    font-weight: bold;
-  }
-
-  .hljs-addition {
-    /* prettylights-syntax-markup-inserted */
-    color: #22863a;
-    background-color: #f0fff4;
-  }
-
-  .hljs-deletion {
-    /* prettylights-syntax-markup-deleted */
-    color: #b31d28;
-    background-color: #ffeef0;
-  }
-
-  .hljs-char.escape_,
-  .hljs-link,
-  .hljs-params,
-  .hljs-property,
-  .hljs-punctuation,
-  .hljs-tag {
-    /* purposely ignored */
+.light {
+  .hljs-light-theme {
+    .hljs {
+      color: #24292e;
+    }
+
+    .hljs-doctag,
+    .hljs-keyword,
+    .hljs-meta .hljs-keyword,
+    .hljs-template-tag,
+    .hljs-template-variable,
+    .hljs-type,
+    .hljs-variable.language_ {
+      /* prettylights-syntax-keyword */
+      color: #d73a49;
+    }
+
+    .hljs-title,
+    .hljs-title.class_,
+    .hljs-title.class_.inherited__,
+    .hljs-title.function_ {
+      /* prettylights-syntax-entity */
+      color: #6f42c1;
+    }
+
+    .hljs-attr,
+    .hljs-attribute,
+    .hljs-literal,
+    .hljs-meta,
+    .hljs-number,
+    .hljs-operator,
+    .hljs-variable,
+    .hljs-selector-attr,
+    .hljs-selector-class,
+    .hljs-selector-id {
+      /* prettylights-syntax-constant */
+      color: #005cc5;
+    }
+
+    .hljs-regexp,
+    .hljs-string,
+    .hljs-meta .hljs-string {
+      /* prettylights-syntax-string */
+      color: #032f62;
+    }
+
+    .hljs-built_in,
+    .hljs-symbol {
+      /* prettylights-syntax-variable */
+      color: #e36209;
+    }
+
+    .hljs-comment,
+    .hljs-code,
+    .hljs-formula {
+      /* prettylights-syntax-comment */
+      color: #6a737d;
+    }
+
+    .hljs-name,
+    .hljs-quote,
+    .hljs-selector-tag,
+    .hljs-selector-pseudo {
+      /* prettylights-syntax-entity-tag */
+      color: #22863a;
+    }
+
+    .hljs-subst {
+      /* prettylights-syntax-storage-modifier-import */
+      color: #24292e;
+    }
+
+    .hljs-section {
+      /* prettylights-syntax-markup-heading */
+      color: #005cc5;
+      font-weight: bold;
+    }
+
+    .hljs-bullet {
+      /* prettylights-syntax-markup-list */
+      color: #735c0f;
+    }
+
+    .hljs-emphasis {
+      /* prettylights-syntax-markup-italic */
+      color: #24292e;
+      font-style: italic;
+    }
+
+    .hljs-strong {
+      /* prettylights-syntax-markup-bold */
+      color: #24292e;
+      font-weight: bold;
+    }
+
+    .hljs-addition {
+      /* prettylights-syntax-markup-inserted */
+      color: #22863a;
+      background-color: #f0fff4;
+    }
+
+    .hljs-deletion {
+      /* prettylights-syntax-markup-deleted */
+      color: #b31d28;
+      background-color: #ffeef0;
+    }
+
+    .hljs-char.escape_,
+    .hljs-link,
+    .hljs-params,
+    .hljs-property,
+    .hljs-punctuation,
+    .hljs-tag {
+      /* purposely ignored */
+    }
   }
 }
diff --git a/site/app/templates/application.gts b/site/app/templates/application.gts
index 5c82dbed..bfaca269 100644
--- a/site/app/templates/application.gts
+++ b/site/app/templates/application.gts
@@ -9,7 +9,6 @@ import { VisuallyHidden } from '@frontile/utilities';
 const application = <template>
   {{pageTitle "Frontile"}}
   <DocfyHeader
-    @darkOnly={{true}}
     @githubUrl="https://github.com/josemarluedke/frontile"
     class="overflow-x-scroll sm:overflow-x-auto"
   >
diff --git a/site/package.json b/site/package.json
index fbcc6c3f..006ec083 100644
--- a/site/package.json
+++ b/site/package.json
@@ -20,8 +20,8 @@
   },
   "devDependencies": {
     "@docfy/core": "^0.8.0",
-    "@docfy/ember": "^0.8.0",
-    "@docfy/plugin-with-prose": "^0.8.0",
+    "@docfy/ember": "^0.8.4",
+    "@docfy/plugin-with-prose": "^0.8.4",
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^3.3.0",
     "@embroider/compat": "^3.4.4",
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
index 70b84265..3c0dbb3e 100644
--- a/site/tailwind.config.js
+++ b/site/tailwind.config.js
@@ -140,6 +140,7 @@ module.exports = {
   safelist: [
     { pattern: /^js-focus-visible/ },
     { pattern: /^sr-only/ },
+    { pattern: /^not-prose/ },
 
     // Frontile Notifications
     { pattern: /^notification-transition/ },