more fixes maybe

Author: jderochervlk

app/routes/ApiRoute.res

@@ -195,7 +195,8 @@ let default = () => {
           <VersionSelect />
         </div>
         <button
-          className="flex items-center" onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
+          className="flex items-center text-gray-60 dark:text-gray-30 hover:text-gray-80 dark:hover:text-gray-20"
+          onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
         >
           <Icon.Close />
         </button>

src/ApiDocs.res

@@ -52,8 +52,18 @@ module RightSidebar = {
       switch item {
       | Value({name, deprecated}) as kind | Type({name, deprecated}) as kind =>
         let (icon, textColor, bgColor, href) = switch kind {
-        | Type(_) => ("t", "text-fire-30", "bg-fire-5", `#type-${name}`)
-        | Value(_) => ("v", "text-sky-30", "bg-sky-5", `#value-${name}`)
+        | Type(_) => (
+            "t",
+            "text-fire-30 dark:text-fire-dark",
+            "bg-fire-5 dark:bg-fire-100",
+            `#type-${name}`,
+          )
+        | Value(_) => (
+            "v",
+            "text-sky-30 dark:text-water-dark",
+            "bg-sky-5 dark:bg-sky-90",
+            `#value-${name}`,
+          )
         }
         let deprecatedIcon = switch deprecated->Null.toOption {
         | Some(_) =>
@@ -69,7 +79,7 @@ module RightSidebar = {
         <li className="my-3" key={href}>
           <ReactRouter.Link.String
             title
-            className="flex items-center w-full font-normal text-14 text-gray-40 leading-tight hover:text-gray-80"
+            className="flex items-center w-full font-normal text-14 text-gray-40 dark:text-gray-30 leading-tight hover:text-gray-80 dark:hover:text-gray-20"
             to=href
             onClick={_ => onLinkClick->Option.forEach(fn => fn())}
           >
@@ -109,8 +119,8 @@ module SidebarTree = {
 
     let isCurrentlyAtRoot = currentPathname == moduleRoute
 
-    let summaryClassName = "truncate py-1 md:h-auto tracking-tight text-gray-60 font-medium text-14 rounded-sm hover:bg-gray-20 hover:-ml-2 hover:py-1 hover:pl-2 "
-    let classNameActive = " bg-fire-5 text-red-500 -ml-2 pl-2 font-medium hover:bg-fire-70"
+    let summaryClassName = "truncate py-1 md:h-auto tracking-tight text-gray-60 dark:text-gray-30 font-medium text-14 rounded-sm hover:bg-gray-20 dark:hover:bg-gray-90 hover:-ml-2 hover:py-1 hover:pl-2 "
+    let classNameActive = " bg-fire-5 dark:bg-fire-100 text-red-500 dark:text-fire-dark -ml-2 pl-2 font-medium hover:bg-fire-70 dark:hover:bg-fire-90"
 
     let subMenu = switch items->Array.length > 0 {
     | true =>
@@ -179,7 +189,10 @@ module SidebarTree = {
 
     <aside className="px-4 w-full block">
       <div className="my-10">
-        <div className="hl-overline block text-gray-80 mt-5 mb-2" dataTestId="overview">
+        <div
+          className="hl-overline block text-gray-80 dark:text-gray-20 mt-5 mb-2"
+          dataTestId="overview"
+        >
           {"Overview"->React.string}
         </div>
         <Link.String
@@ -190,7 +203,9 @@ module SidebarTree = {
         </Link.String>
         {isCurrentlyAtRoot ? subMenu : React.null}
       </div>
-      <div className="hl-overline text-gray-80 mt-5 mb-2"> {"submodules"->React.string} </div>
+      <div className="hl-overline text-gray-80 dark:text-gray-20 mt-5 mb-2">
+        {"submodules"->React.string}
+      </div>
       {node.children
       ->Array.toSorted((v1, v2) => String.compare(v1.name, v2.name))
       ->Array.filter(child => child.name !== node.name)
@@ -299,11 +314,13 @@ let make = (props: props) => {
   // This is the sidebar on the right side of the page for desktops showing types and values
   let rightSidebar = switch props {
   | Ok({module_: {items}}) if Array.length(items) > 0 =>
-    <div className="hidden xl:block lg:w-1/5 md:h-auto md:relative overflow-y-visible bg-white">
+    <div
+      className="hidden xl:block lg:w-1/5 md:h-auto md:relative overflow-y-visible bg-white dark:bg-gray-95"
+    >
       <aside
-        className="relative pl-4 w-full block md:top-28 md:pt-4 md:sticky border-l border-gray-20 overflow-y-auto pb-24 h-[calc(100vh-7rem)]"
+        className="relative pl-4 w-full block md:top-28 md:pt-4 md:sticky border-l border-gray-20 dark:border-gray-80 overflow-y-auto pb-24 h-[calc(100vh-7rem)]"
       >
-        <div className="hl-overline block text-gray-80 mb-2">
+        <div className="hl-overline block text-gray-80 dark:text-gray-20 mb-2">
           {"Types and values"->React.string}
         </div>
         <ul>
@@ -319,10 +336,10 @@ let make = (props: props) => {
   | Ok({toctree, module_: {items}}) =>
     <div
       id="sidebar"
-      className="hidden md:block md:w-48 md:-ml-4 lg:w-1/5 h-auto md:relative overflow-y-visible bg-white"
+      className="hidden md:block md:w-48 md:-ml-4 lg:w-1/5 h-auto md:relative overflow-y-visible bg-white dark:bg-gray-95"
     >
       <div
-        className="w-80 h-full relative top-12 w-full md:top-28 md:sticky border-r border-gray-20 overflow-y-auto pb-24 max-h-[calc(100vh-7rem)]"
+        className="w-80 h-full relative top-12 w-full md:top-28 md:sticky border-r border-gray-20 dark:border-gray-80 overflow-y-auto pb-24 max-h-[calc(100vh-7rem)]"
       >
         <SidebarTree node={toctree} items />
       </div>

src/components/CodeExample.res

@@ -64,7 +64,7 @@ module CopyButton = {
         // and in the next tick, add the opacity-100 class, so the transition animation actually takes place.
         // If we don't do that, the banner will essentially pop up without any animation
         let bannerEl = WebAPI.Document.createElement(document, "div")
-        bannerEl.className = "opacity-0 absolute -top-6 right-0 -mt-5 -mr-4 px-4 py-2 w-40 rounded-lg captions text-white bg-gray-100 text-gray-80-tr transition-all duration-1000 ease-in-out "
+        bannerEl.className = "opacity-0 absolute -top-6 right-0 -mt-5 -mr-4 px-4 py-2 w-40 rounded-lg captions bg-gray-100 text-gray-20 shadow transition-all duration-1000 ease-in-out "
 
         let textNode = WebAPI.Document.createTextNode(document, "Copied to clipboard")
 
@@ -98,7 +98,7 @@ module CopyButton = {
       onClick
     >
       <Icon.Clipboard
-        className="text-gray-30 mt-px hover:cursor-pointer hover:text-gray-60 hover:bg-gray-30 w-6 h-6 p-1 rounded transition-all duration-300 ease-in-out"
+        className="text-gray-40 dark:text-gray-40 mt-px hover:cursor-pointer hover:text-gray-60 dark:hover:text-gray-20 hover:bg-gray-30 dark:hover:bg-gray-80 w-6 h-6 p-1 rounded transition-all duration-300 ease-in-out"
       />
     </button>
   }
@@ -127,7 +127,7 @@ let make = (
       "top-0"
     }
     <div
-      className={`absolute ${rightPosition} ${topPosition} p-1 font-sans text-12 font-bold text-gray-30 pointer-events-none`}
+      className={`absolute ${rightPosition} ${topPosition} p-1 font-sans text-12 font-bold text-gray-30 dark:text-gray-40 pointer-events-none`}
     >
       {//RES or JS Label
       String.toUpperCase(label)->React.string}
@@ -146,7 +146,7 @@ let make = (
 
   <div
     //normal code-text without tabs
-    className="relative w-full flex-col rounded xs:rounded border border-gray-20 bg-gray-10 pt-2 text-gray-80"
+    className="relative w-full flex-col rounded xs:rounded border border-gray-20 dark:border-gray-80 bg-gray-10 dark:bg-gray-95 pt-2 text-gray-80 dark:text-gray-20"
   >
     label
     copyButton
@@ -189,9 +189,9 @@ module Toggle = {
         }
 
         let activeClass = if selected === i {
-          "font-medium text-12 text-gray-40 bg-gray-5 border-t-2 first:border-l"
+          "font-medium text-12 text-gray-40 dark:text-gray-20 bg-gray-5 dark:bg-gray-95 border-t-2 border-gray-20 dark:border-gray-80 first:border-l"
         } else {
-          "font-medium text-12 hover:text-gray-60 border-t-2 bg-gray-20 hover:cursor-pointer"
+          "font-medium text-12 text-gray-40 dark:text-gray-40 hover:text-gray-60 dark:hover:text-gray-20 border-t-2 bg-gray-20 dark:bg-gray-90 hover:cursor-pointer"
         }
 
         let onClick = evt => {
@@ -208,7 +208,7 @@ module Toggle = {
         }
 
         let borderColor = if selected === i {
-          "border-t-gray-60"
+          "border-t-gray-60 dark:border-t-fire-dark"
         } else {
           "border-t-transparent"
         }
@@ -253,7 +253,7 @@ module Toggle = {
               >
                 // ICON Link to PLAYGROUND
                 <Icon.ExternalLink
-                  className="text-gray-30 mt-px hover:cursor-pointer hover:text-gray-60 hover:bg-gray-30 w-6 h-6 p-1 rounded transition-all duration-300 ease-in-out"
+                  className="text-gray-40 dark:text-gray-40 mt-px hover:cursor-pointer hover:text-gray-60 dark:hover:text-gray-20 hover:bg-gray-30 dark:hover:bg-gray-80 w-6 h-6 p-1 rounded transition-all duration-300 ease-in-out"
                 />
               </Link.String>
             : React.null
@@ -267,18 +267,20 @@ module Toggle = {
       | None => React.null
       }
 
-      <div className="relative pt-6 w-full rounded-none text-gray-80">
+      <div className="relative pt-6 w-full rounded-none text-gray-80 dark:text-gray-20">
         //text within code-box
         <div
-          className="absolute flex w-full font-sans bg-transparent text-14 text-gray-40 mt-[-26px] overflow-x-auto"
+          className="absolute flex w-full font-sans bg-transparent text-14 text-gray-40 dark:text-gray-30 mt-[-26px] overflow-x-auto"
         >
           <div className="flex xs:ml-0"> {React.array(tabElements)} </div>
-          <div className="flex-1 w-full bg-gray-20 border-b rounded-tr border-gray-20 items-center">
+          <div
+            className="flex-1 w-full bg-gray-20 dark:bg-gray-90 border-b border-gray-20 dark:border-gray-80 rounded-tr items-center"
+          >
             buttonDiv
           </div>
         </div>
         <div
-          className="px-4 lg:px-5 text-14 pb-4 pt-4 overflow-x-auto bg-gray-10 border-gray-20 rounded-b border"
+          className="px-4 lg:px-5 text-14 pb-4 pt-4 overflow-x-auto bg-gray-10 dark:bg-gray-95 border-gray-20 dark:border-gray-80 rounded-b border"
         >
           <pre> children </pre>
         </div>

src/components/DocsSidebar.res

@@ -11,7 +11,10 @@ let make = (
       <div className="flex flex-col text-fire font-medium">
         <VersionSelect />
       </div>
-      <button className="flex items-center" onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}>
+      <button
+        className="flex items-center text-gray-60 dark:text-gray-30 hover:text-gray-80 dark:hover:text-gray-20"
+        onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
+      >
         <Icon.Close />
       </button>
     </div>

src/components/Markdown.res

@@ -4,7 +4,9 @@
 module P = {
   @react.component
   let make = (~children) =>
-    <p className="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16"> children </p>
+    <p className="md-p md:leading-5 tracking-[-0.015em] text-gray-80 dark:text-gray-20 md:text-16">
+      children
+    </p>
 }
 
 // Used for hero like introduction text in
@@ -30,13 +32,15 @@ module Cite = {
 module Info = {
   @react.component
   let make = (~children) =>
-    <div className="infobox my-5 py-6 pl-8 pr-10 rounded-lg bg-sky-5"> children </div>
+    <div className="infobox my-5 py-6 pl-8 pr-10 rounded-lg bg-sky-5 dark:bg-sky-90/25">
+      children
+    </div>
 }
 
 module Warn = {
   @react.component
   let make = (~children) =>
-    <div className="my-6 py-6 pl-8 pr-10 rounded-lg bg-orange-10"> children </div>
+    <div className="my-6 py-6 pl-8 pr-10 rounded-lg bg-orange-10 dark:bg-orange-15"> children </div>
 }
 
 module UrlBox = {
@@ -100,9 +104,11 @@ module UrlBox = {
         <Icon.ArrowRight className="ml-1" />
       </ReactRouter.Link.String>
     }
-    <div className="md-url-box text-16 border-l-2 border-gray-60 my-6 py-6 pl-8 pr-10 bg-gray-5">
+    <div
+      className="md-url-box text-16 border-l-2 border-gray-60 dark:border-gray-40 my-6 py-6 pl-8 pr-10 bg-gray-5 dark:bg-gray-95"
+    >
       content
-      <div className="mt-4 text-sky hover:text-sky-30"> link </div>
+      <div className="mt-4 text-sky dark:text-water-dark hover:text-sky-30"> link </div>
     </div>
   }
 }
@@ -114,11 +120,11 @@ module Anchor = {
     <span className="inline group relative" title=?title>
       <a
         title=?title
-        className="scroll-mt-30 invisible text-gray-60 opacity-50 hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible"
+        className="scroll-mt-30 invisible text-gray-60 dark:text-gray-30 opacity-50 hover:opacity-100 hover:text-gray-60 dark:hover:text-gray-20 hover:cursor-pointer group-hover:visible"
         href={"#" ++ id}
         id={id}
       >
-        <Icon.Hyperlink className="inline-block align-middle text-gray-40" />
+        <Icon.Hyperlink className="inline-block align-middle text-gray-40 dark:text-gray-30" />
       </a>
     </span>
   }
@@ -175,7 +181,7 @@ module H5 = {
   let make = (~id, ~children, ~title=?) => {
     <h5
       id
-      className="group mt-12 mb-3 text-12 leading-2 font-sans font-semibold uppercase tracking-wide text-gray-80"
+      className="group mt-12 mb-3 text-12 leading-2 font-sans font-semibold uppercase tracking-wide text-gray-80 dark:text-gray-20"
     >
       children
       <span className="ml-2">
@@ -194,7 +200,7 @@ module InlineCode = {
   @react.component
   let make = (~children) =>
     <code
-      className="md-inline-code px-2 py-0.5  text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90/5"
+      className="md-inline-code px-2 py-0.5 text-gray-60 dark:text-gray-20 font-mono rounded-sm bg-gray-10-tr dark:bg-gray-90 border border-gray-90/5 dark:border-gray-80"
     >
       children
     </code>
@@ -217,15 +223,20 @@ module Th = {
   @react.component
   let make = (~children) =>
     <th
-      className="py-2 pr-8 text-12 text-gray-60 uppercase font-medium tracking-wide text-left border-b-2 border-gray-20"
+      className="py-2 pr-8 text-12 text-gray-60 dark:text-gray-30 uppercase font-medium tracking-wide text-left border-b-2 border-gray-20 dark:border-gray-80"
     >
       children
     </th>
 }
 
 module Td = {
   @react.component
-  let make = (~children) => <td className="border-b border-gray-20 py-3 pr-8"> children </td>
+  let make = (~children) =>
+    <td
+      className="border-b border-gray-20 dark:border-gray-80 py-3 pr-8 text-gray-80 dark:text-gray-20"
+    >
+      children
+    </td>
 }
 
 module Code = {
@@ -349,7 +360,7 @@ module Blockquote = {
 
 module Hr = {
   @react.component
-  let make = () => <hr className="my-4" />
+  let make = () => <hr className="my-4 border-gray-20 dark:border-gray-80" />
 }
 
 /*
@@ -381,15 +392,18 @@ module A = {
       <a
         href
         rel="noopener noreferrer"
-        className="no-underline text-fire hover:underline"
+        className="no-underline text-fire dark:text-fire-dark hover:underline"
         ?target
         dataTestId="absolute-url"
       >
         children
       </a>
     } else {
       <ReactRouter.Link.String
-        to={href} className="no-underline text-fire hover:underline" ?target relative="route"
+        to={href}
+        className="no-underline text-fire dark:text-fire-dark hover:underline"
+        ?target
+        relative="route"
       >
         children
       </ReactRouter.Link.String>
@@ -518,7 +532,11 @@ module Image = {
       {switch caption {
       | None => React.null
       | Some(caption) =>
-        <div className={`mt-4 text-14 text-gray-60 ${size === #large ? "md:ml-16" : ""}`}>
+        <div
+          className={`mt-4 text-14 text-gray-60 dark:text-gray-30 ${size === #large
+              ? "md:ml-16"
+              : ""}`}
+        >
           {React.string(caption)}
         </div>
       }}
@@ -538,7 +556,9 @@ module Video = {
       {switch caption {
       | None => React.null
       | Some(caption) =>
-        <div className="mt-4 text-14 text-gray-80 md:ml-16"> {React.string(caption)} </div>
+        <div className="mt-4 text-14 text-gray-80 dark:text-gray-20 md:ml-16">
+          {React.string(caption)}
+        </div>
       }}
     </div>
   }

src/components/NavbarSecondary.res

@@ -15,7 +15,7 @@ let make = () => {
 
   <nav
     dataTestId="navbar-secondary"
-    className={"text-12 md:text-14 shadow h-12 w-full bg-white sticky z-95 top-16 transition-transform duration-300 px-4 " ++
+    className={"text-12 md:text-14 shadow h-12 w-full bg-white dark:bg-gray-95 text-gray-60 dark:text-gray-30 border-b border-gray-20 dark:border-gray-80 sticky z-95 top-16 transition-transform duration-300 px-4 " ++
     navbarClasses}
   >
     <div className="flex gap-6 lg:gap-10 items-center h-full w-full max-w-1280 m-auto">

src/components/NavbarTertiary.res

@@ -27,18 +27,18 @@ let make = (~sidebar: option<React.element>=?, ~children) => {
   <>
     <nav
       dataTestId="navbar-tertiary"
-      className={`shadow h-12 w-full bg-white sticky z-90 transition-transform duration-300 px-4
+      className={`shadow h-12 w-full bg-white dark:bg-gray-95 text-gray-60 dark:text-gray-30 border-b border-gray-20 dark:border-gray-80 sticky z-90 transition-transform duration-300 px-4
       ${navbarClasses}
       ${isDocRoute(~route=pathname) ? "top-28" : "top-16"}`}
     >
       <div className="flex items-center h-full w-full max-w-1280 m-auto">
         <button
-          className="md:hidden mr-3"
+          className="md:hidden mr-3 text-gray-60 dark:text-gray-30"
           onClick={toggleMobileTertiaryDrawer}
           ariaLabel="Toggle navigation menu"
           type_="button"
         >
-          <img className="h-4" src="/ic_sidebar_drawer.svg" />
+          <img className="h-4 dark:invert" src="/ic_sidebar_drawer.svg" />
         </button>
         <div
           className="truncate overflow-x-auto touch-scroll flex items-center space-x-4 justify-between mr-4 w-full"
@@ -52,7 +52,7 @@ let make = (~sidebar: option<React.element>=?, ~children) => {
       onClick={handleBackdropClick}
       className={`${isDocRoute(~route=pathname)
           ? "top-40"
-          : "top-28"} flex-col h-full w-full z-50 bg-white overflow-y-auto pb-8 backdrop:bg-transparent`}
+          : "top-28"} flex-col h-full w-full z-50 bg-white dark:bg-gray-95 text-gray-60 dark:text-gray-30 overflow-y-auto pb-8 backdrop:bg-transparent`}
     >
       {switch sidebar {
       | Some(sidebar) => sidebar