docs: design updates (#3098)

Update colors, spacing and fix the toc animation.

Author: marvinhagemeister

www/components/DocsSidebar.tsx

@@ -12,7 +12,7 @@ export function SidebarCategory(props: {
     <li class="my-2 block">
       <a
         href={href}
-        class="text-foreground-secondary hover:text-gray-600 aria-[current]:text-fresh-green aria-[current]:hover:underline font-bold"
+        class="text-foreground-secondary hover:text-gray-600 dark:hover:text-green-300 aria-[current]:text-fresh-green dark:aria-[current]:text-green-300 aria-[current]:hover:underline font-bold"
       >
         {title}
       </a>
@@ -36,7 +36,7 @@ export function SidebarEntry(props: {
     <li class="py-[1px]">
       <a
         href={href}
-        class="aria-[current]:text-fresh-green aria-[current]:border-green-600 aria-[current]:bg-fresh-green/5 border-l-4 border-transparent px-4 py-0.5 transition-colors hover:text-fresh-green/80 font-normal block"
+        class="aria-[current]:text-fresh-green aria-[current]:border-green-600 dark:aria-[current]:text-green-300 aria-[current]:bg-fresh-green/5 dark:hover:text-green-300 border-l-4 border-transparent px-4 py-0.5 transition-colors hover:text-fresh-green/80 font-normal block"
       >
         {title}
       </a>

www/components/Footer.tsx

@@ -20,7 +20,7 @@ export default function Footer(props: JSX.HTMLAttributes<HTMLElement>) {
     <footer
       class={`border-t-2 border-foreground-secondary/20 md:h-16 flex mt-16 justify-center md:mx-16 ${props.class}`}
     >
-      <div class="flex flex-col sm:flex-row gap-4 justify-between items-center max-w-screen-xl mx-auto w-full sm:px-6 md:px-8 p-4">
+      <div class="flex flex-col sm:flex-row gap-4 justify-between items-center max-w-screen-xl mx-auto w-full sm:px-6 md:px-8 p-4 text-base">
         <div class="text-foreground-secondary text-center">
           <span>© {new Date().getFullYear()} the Fresh authors</span>
         </div>

www/islands/TableOfContents.tsx

@@ -118,7 +118,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
                 <use href="/icons.svg#arrow-down" />
               </svg>
             </button>
-            {isOpen && (
+            {isOpen.value && (
               <div class="mt-2 pl-4 border-l border-foreground-primary/20 text-[13px] leading-7">
                 <nav aria-labelledby="toc-outline-btn">
                   <ul>
@@ -127,7 +127,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
                         <li key={heading.id}>
                           <a
                             href={`#${heading.id}`}
-                            class="block truncatetext-gray-600"
+                            class="block truncatetext-gray-600 dark:text-gray-400"
                             // deno-lint-ignore react-no-danger
                             dangerouslySetInnerHTML={{ __html: heading.html }}
                           />
@@ -159,7 +159,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
                         <li key={heading.id}>
                           <a
                             href={`#${heading.id}`}
-                            class="block truncate transition-colors text-gray-600 [&.active]:text-green-600"
+                            class="block truncate transition-colors text-gray-600 dark:text-gray-400 [&.active]:text-green-600 dark:[&.active]:text-green-300"
                             onClick={() => {
                               setActiveLink(
                                 ref.current!,

www/routes/docs/[...slug].tsx

@@ -148,6 +148,8 @@ export default define.page<typeof handler>(function DocsPage(props) {
   const { page } = props.data;
   const { html, headings } = renderMarkdown(page.markdown);
 
+  const isCanary = page.href.includes("/canary");
+
   return (
     <div class="flex flex-col min-h-screen mx-auto max-w-screen-2xl">
       <Header title="docs" active="/docs" />
@@ -176,7 +178,7 @@ export default define.page<typeof handler>(function DocsPage(props) {
           </label>
         </div>
         <nav class="flex-shrink-0 hidden lg:block lg:px-4 bg-white">
-          <div class="fixed top-24 w-[17rem] flex overflow-hidden">
+          <div class="fixed top-24 w-[17rem] flex overflow-hidden text-base">
             <div class="flex-1 h-[calc(100vh_-_6rem)] overflow-y-auto pb-8">
               <SearchButton class="mr-4 sm:mr-0" />
               <div class="mb-4 px-1">
@@ -200,6 +202,14 @@ export default define.page<typeof handler>(function DocsPage(props) {
                 <TableOfContents headings={headings} />
 
                 <div class="lg:order-1 min-w-0 max-w-3xl w-full">
+                  {isCanary
+                    ? (
+                      <div class="bg-[#F0900525] p-4 rounded text-base text-yellow-700 dark:text-yellow-500 mb-8">
+                        🚧 This documentation is work in progress and for an
+                        unreleased version of Fresh.
+                      </div>
+                    )
+                    : null}
                   <h1 class="text-4xl text-foreground-primary tracking-tight font-bold md:mt-0 px-4 md:px-0 mb-4">
                     {page.title}
                   </h1>
@@ -221,7 +231,7 @@ export default define.page<typeof handler>(function DocsPage(props) {
                   <div class="px-4 md:px-0 flex justify-between my-6">
                     <a
                       href={`https://github.com/denoland/fresh/edit/main/${page.file}`}
-                      class="text-gray-700 dark:text-gray-200 text-md flex items-center bg-[#ebedf0] dark:bg-[#1e1f2a] px-4 py-2 rounded hover:bg-gray-200 dark:hover:bg-[#36394c] transition-colors"
+                      class="text-gray-700 dark:text-gray-200 text-md flex items-center bg-[#ebedf0] dark:bg-[#2c2d39] px-4 py-2 rounded hover:bg-gray-200 dark:hover:bg-[#36394c] transition-colors"
                       target="_blank"
                       rel="noopener noreferrer"
                     >
@@ -298,7 +308,7 @@ function ForwardBackButtons(props: {
             <span class="text-sm text-gray-600 dark:text-gray-500">
               Previous page
             </span>
-            <span class="text-green-600 font-medium">
+            <span class="text-green-600 dark:text-green-400 font-medium">
               {prev.title}
             </span>
           </a>
@@ -313,7 +323,7 @@ function ForwardBackButtons(props: {
             <span class="text-sm text-gray-600 dark:text-gray-500">
               Next page
             </span>
-            <span class="text-green-600 font-medium">
+            <span class="text-green-600 dark:text-green-400 font-medium">
               {next.title}
             </span>
           </a>

www/static/markdown.css

@@ -23,7 +23,7 @@
   --color-border-default: hsla(var(--foreground-secondary), 0.3);
   --color-border-muted: hsla(var(--foreground-secondary), 0.1);
   --color-neutral-muted: rgba(175, 184, 193, 0.2);
-  --color-accent-fg: #0969da;
+  --color-accent-fg: #02aa6f;
   --color-accent-emphasis: #0969da;
   --color-danger-fg: #cf222e;
 
@@ -33,12 +33,12 @@
 }
 
 html[data-theme="dark"] {
-  --color-accent-fg: #3d96ff;
-  --color-prettylights-syntax-keyword: #ee5b65;
-  --color-prettylights-syntax-entity: #b291f0;
-  --color-prettylights-syntax-constant: #448ce5;
+  --color-accent-fg: #75eea1;
+  --color-prettylights-syntax-keyword: #f86d76;
+  --color-prettylights-syntax-entity: #b392f0;
+  --color-prettylights-syntax-constant: #8fc0fb;
   --color-prettylights-syntax-entity-tag: #7cb78a;
-  --color-prettylights-syntax-variable: #d18253;
+  --color-prettylights-syntax-variable: #f7955c;
   --color-prettylights-syntax-markup-deleted-text: #ffebe9;
   --color-prettylights-syntax-markup-deleted-bg: #82071e;
   --color-prettylights-syntax-markup-inserted-text: #dafbe1;
@@ -52,7 +52,7 @@ html[data-theme="dark"] {
 .markdown-body {
   word-wrap: break-word;
   font-family: inherit;
-  font-size: 1.125rem;
+  font-size: 1rem;
   line-height: 1.75;
 }
 .markdown-body:before {
@@ -99,6 +99,10 @@ html[data-theme="dark"] {
 .markdown-body details {
   margin-bottom: 1rem;
 }
+.markdown-body ul,
+.markdown-body ol {
+  margin-top: 1rem;
+}
 .markdown-body hr {
   height: 0.25em;
   background-color: var(--color-border-default);
@@ -209,9 +213,12 @@ html[data-theme="dark"] {
   border-bottom: 0;
   padding-bottom: 0;
 }
+.markdown-body strong {
+  font-weight: 600;
+}
 .markdown-body ul,
 .markdown-body ol {
-  padding-left: 2em;
+  padding-left: 1em;
 }
 .markdown-body ul.no-list,
 .markdown-body ol.no-list {
@@ -431,7 +438,7 @@ html[data-theme="dark"] {
   border-radius: 6px;
   padding: 1.25rem 1.5rem;
   font-size: 85%;
-  line-height: 1.45;
+  line-height: 1.75;
   overflow: auto;
 }
 .markdown-body pre code,
@@ -514,7 +521,8 @@ html[data-theme="dark"] {
 }
 .markdown-body a {
   color: var(--color-accent-fg);
-  text-decoration: none;
+  text-decoration: underline;
+  text-underline-offset: 2px;
 }
 .markdown-body a:hover {
   text-decoration: underline;
@@ -633,7 +641,6 @@ html[data-theme="dark"] {
   display: flex;
   align-items: center;
   font-size: 1rem;
-  padding-bottom: 0.5rem;
 }
 .markdown-body .admonition .icon {
   display: inline-flex;
@@ -704,6 +711,8 @@ html[data-theme="dark"] .markdown-body .admonition.info {
   }
 
   .markdown-body .fenced-code,
+  .markdown-body ol,
+  .markdown-body ul,
   .markdown-body h1,
   .markdown-body h2,
   .markdown-body h4,

www/static/styles.css

@@ -21,11 +21,11 @@ html[data-theme="dark"]:root {
   --fresh: 50deg, 100%, 56%;
   --fresh-green: 142deg, 71%, 29%;
 
-  --background-primary: 216deg, 27.8%, 7.1%;
-  --background-secondary: 216deg, 27.7%, 12%;
+  --background-primary: 220deg, 11%, 11%;
+  --background-secondary: 216deg, 19%, 18%;
   --background-tertiary: 216deg, 27.7%, 22%;
   --foreground-primary: 215deg, 17%, 99%;
-  --foreground-secondary: 215deg, 17%, 71%;
+  --foreground-secondary: 215deg, 17%, 83%;
   --foreground-tertiary: 215deg, 17%, 20%;
   --foreground-quaternary: 215deg, 17%, 10%;
 

www/tailwind.config.ts

@@ -2,6 +2,7 @@ import type { Config } from "tailwindcss";
 import plugin from "tailwindcss/plugin.js";
 
 export default {
+  darkMode: ["selector", '[data-theme="dark"]'],
   content: [
     "{routes,islands,components}/**/*.{ts,tsx}",
   ],