From 5e6bdcf991e87c161d24e22e906d786295895e72 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Tue, 20 Aug 2024 18:19:56 +0200
Subject: [PATCH] tailwind-material-colors

---
 package-lock.json                     | 101 ++++++++++++++++++++++++++
 package.json                          |   1 +
 src/app/ThemeProvider.tsx             |   4 +-
 src/app/[...slug]/Menu.tsx            |  19 ++---
 src/app/[...slug]/layout.tsx          |  40 +++++-----
 src/app/[...slug]/page.tsx            |   7 +-
 src/app/globals.css                   |  90 +++++++----------------
 src/app/layout.tsx                    |  13 ++--
 src/app/page.tsx                      |  12 +--
 src/components/Codesandbox.tsx        |  34 +++++++--
 src/components/Icon.tsx               |   4 +-
 src/components/Nav.tsx                |  10 +--
 src/components/Search/SearchItem.tsx  |  13 ++--
 src/components/Search/SearchModal.tsx |  17 +++--
 src/components/Search/index.tsx       |  19 +++--
 src/components/Toc.tsx                |  16 ++--
 src/components/ToggleTheme.tsx        |  49 -------------
 src/components/mdx/Grid.tsx           |  11 ++-
 src/components/mdx/Hint.tsx           |  10 ++-
 src/components/mdx/index.tsx          |  47 +++++++-----
 tailwind.config.ts                    |  28 ++++++-
 21 files changed, 329 insertions(+), 216 deletions(-)
 delete mode 100644 src/components/ToggleTheme.tsx

diff --git a/package-lock.json b/package-lock.json
index 9e5e0459..eb03ef7b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
         "prettier": "^3.3.3",
         "prettier-plugin-tailwindcss": "^0.6.6",
         "semantic-release": "^24.0.0",
+        "tailwind-material-colors": "^3.0.2",
         "tailwindcss": "^3.4.10",
         "typescript": "^5.5.4"
       },
@@ -391,6 +392,13 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@material/material-color-utilities": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@material/material-color-utilities/-/material-color-utilities-0.2.7.tgz",
+      "integrity": "sha512-0FCeqG6WvK4/Cc06F/xXMd/pv4FeisI0c1tUpBbfhA2n9Y8eZEv4Karjbmf2ZqQCPUWMrGp8A571tCjizxoTiQ==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/@mdx-js/mdx": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-2.3.0.tgz",
@@ -2434,6 +2442,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2452,6 +2474,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/colorette": {
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
@@ -12134,6 +12167,23 @@
         "node": ">=4"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/skin-tone": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/skin-tone/-/skin-tone-2.0.0.tgz",
@@ -12699,6 +12749,34 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-material-colors": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tailwind-material-colors/-/tailwind-material-colors-3.0.2.tgz",
+      "integrity": "sha512-GAOfciMclkv9MdP2DY1JzLQwjBtTCltWZKK8NUuP0GT4Siy7LZ5TWL1cxvGwl/C1LC3XVcxpIZqcv98Je8I6hA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@material/material-color-utilities": "^0.2.7",
+        "tailwind-material-surfaces": "^3.0.2",
+        "tailwind-mode-aware-colors": "^2.0.2"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.0.0"
+      }
+    },
+    "node_modules/tailwind-material-surfaces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tailwind-material-surfaces/-/tailwind-material-surfaces-3.0.2.tgz",
+      "integrity": "sha512-ZElG3IPbSrFr2nzxQ++JvNYtJ2ffDfCc/9idAezXYznHrf9vpO0rV9gH1dPUVmXVSkhHerL34Boz14FGZ2H8uw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tailwindcss-color-mix": "0.0.8"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.0.0"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz",
@@ -12709,6 +12787,19 @@
         "url": "https://github.com/sponsors/dcastil"
       }
     },
+    "node_modules/tailwind-mode-aware-colors": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/tailwind-mode-aware-colors/-/tailwind-mode-aware-colors-2.0.2.tgz",
+      "integrity": "sha512-ohgCFHWrGtT3PY3keun9LUDspt3+DFfaG4tA+MTjv8lCVLe0AxLSUrfAfr2eOcNP2c/V4KpB7qAmAsTJMHrfkw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color": "^4.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.4.1"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz",
@@ -12746,6 +12837,16 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-color-mix": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/tailwindcss-color-mix/-/tailwindcss-color-mix-0.0.8.tgz",
+      "integrity": "sha512-agTN7BAA9eny2WABRX6jpHciQoBoSYGkZfLM1PpHAyNBPErQKFWUm1o1HjwNsZkilJL3hhUi2+H9MoCg+HT89A==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": "^3.0.0"
+      }
+    },
     "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz",
diff --git a/package.json b/package.json
index b1f1721f..0e7b2a63 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "semantic-release": "^24.0.0",
+    "tailwind-material-colors": "^3.0.2",
     "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4"
   },
diff --git a/src/app/ThemeProvider.tsx b/src/app/ThemeProvider.tsx
index d4b4bbfd..d445e3e8 100644
--- a/src/app/ThemeProvider.tsx
+++ b/src/app/ThemeProvider.tsx
@@ -4,6 +4,6 @@ import * as React from 'react'
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 import { type ThemeProviderProps } from 'next-themes/dist/types'
 
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+export function ThemeProvider(props: ThemeProviderProps) {
+  return <NextThemesProvider {...props} />
 }
diff --git a/src/app/[...slug]/Menu.tsx b/src/app/[...slug]/Menu.tsx
index f0bcd76a..ec2870e6 100644
--- a/src/app/[...slug]/Menu.tsx
+++ b/src/app/[...slug]/Menu.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import * as React from 'react'
-import clsx from 'clsx'
 import { useLockBodyScroll } from '@/hooks/useLockBodyScroll'
 import { useDocs } from './DocsContext'
 import { useMenu } from './MenuContext'
 import Icon from '@/components/Icon'
+import cn from '@/lib/cn'
 
 export function Menu({
   header,
@@ -31,7 +31,7 @@ export function Menu({
 
   return (
     <>
-      <header className="max-w-8xl sticky top-0 z-40 mx-auto flex w-full flex-none border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 lg:z-50">
+      <header className="max-w-8xl bg-surface sticky top-0 z-40 mx-auto flex w-full flex-none border-b border-outline-variant/50 lg:z-50">
         <div className="flex w-full items-center justify-between pr-2">
           {header}
           <button
@@ -45,18 +45,18 @@ export function Menu({
         </div>
       </header>
 
-      <div className="max-w-8xl mx-auto w-full dark:bg-gray-900 dark:text-gray-100">
+      <div className="max-w-8xl mx-auto w-full">
         <div className="lg:flex">
           <div
             id="sidebar"
-            className={clsx(
-              'fixed inset-0 z-40 h-full w-full flex-none bg-white bg-opacity-25 dark:!bg-gray-900 dark:text-gray-100 lg:static lg:block lg:h-auto lg:w-60 lg:overflow-y-visible lg:pt-0 xl:w-72',
+            className={cn(
+              'fixed inset-0 z-40 h-full w-full flex-none lg:static lg:block lg:h-auto lg:w-60 lg:overflow-y-visible lg:pt-0 xl:w-72',
               !menuOpen && 'hidden',
             )}
           >
             <div
               id="nav-wrapper"
-              className="scrolling-touch relative z-10 mr-24 h-full overflow-hidden overflow-y-auto bg-white dark:bg-gray-900 lg:sticky lg:top-16 lg:mr-0 lg:block lg:h-auto lg:bg-transparent"
+              className="scrolling-touch bg-surface relative z-10 mr-24 h-full overflow-hidden overflow-y-auto lg:sticky lg:top-16 lg:mr-0 lg:block lg:h-auto lg:bg-transparent"
             >
               <nav
                 id="nav"
@@ -67,13 +67,14 @@ export function Menu({
             </div>
             <button
               onClick={() => setMenuOpen(false)}
-              className={clsx(
-                'fixed right-0 top-0 z-0 h-screen w-screen bg-gray-900 opacity-0 dark:bg-gray-200',
+              className={cn(
+                'bg-surface/70',
+                'fixed right-0 top-0 z-0 h-screen w-screen',
                 !menuOpen && 'hidden',
               )}
             />
           </div>
-          <div id="content-wrapper" className={clsx('flex-auto', menuOpen && 'overflow-hidden')}>
+          <div id="content-wrapper" className={cn('flex-auto', menuOpen && 'overflow-hidden')}>
             <div className="flex w-full">
               <main className="min-w-0 flex-auto px-4 pb-24 pt-8 sm:px-6 lg:pb-16 xl:px-8">
                 <div>{children}</div>
diff --git a/src/app/[...slug]/layout.tsx b/src/app/[...slug]/layout.tsx
index 032e1382..36fdafed 100644
--- a/src/app/[...slug]/layout.tsx
+++ b/src/app/[...slug]/layout.tsx
@@ -7,7 +7,6 @@ import { Menu } from './Menu'
 import Nav from '@/components/Nav'
 import Link from 'next/link'
 import Search from '@/components/Search'
-import ToggleTheme from '@/components/ToggleTheme'
 import Toc from '@/components/Toc'
 import cn from '@/lib/cn'
 
@@ -59,21 +58,9 @@ export default async function Layout({ params, children }: Props) {
                 </div>
 
                 <Search />
-                <ToggleTheme />
-              </>
-            }
-            nav={
-              <>
-                {/* <div className="mt-8 md:mt-0 mb-4">
-                  {NEXT_PUBLIC_LIBNAME?.length && (
-                    <span className="mt-4 block w-full px-6 py-2 focus:outline-none bg-black rounded-md font-bold text-lg text-white dark:bg-white dark:text-gray-900 text-center">
-                      {NEXT_PUBLIC_LIBNAME}
-                    </span>
-                  )}
-                </div> */}
-                <Nav docs={docs} asPath={asPath} />
               </>
             }
+            nav={<Nav docs={docs} asPath={asPath} />}
             aside={<Toc toc={doc.tableOfContents} />}
             footer={
               <>
@@ -82,7 +69,7 @@ export default async function Layout({ params, children }: Props) {
                     <a
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="mb-2 text-base text-gray-500 hover:underline"
+                      className={cn('mb-2 text-base hover:underline', 'text-on-surface-variant/50')}
                       href={currentPage.editURL || '#no-edit-url'}
                     >
                       Edit this page
@@ -94,13 +81,19 @@ export default async function Layout({ params, children }: Props) {
                   <nav className="mx-auto mt-12 flex w-full max-w-3xl justify-between">
                     {!!previousPage && (
                       <div className="">
-                        <label className="mb-2 text-xs font-bold uppercase leading-4 text-gray-500">
+                        <label
+                          className={cn(
+                            'mb-2 text-xs font-bold uppercase leading-4',
+                            // "text-gray-500"
+                            'text-on-surface-variant/50',
+                          )}
+                        >
                           Previous
                         </label>
                         <div className="text-xl">
                           <Link
                             href={previousPage.url}
-                            className="text-gray-900 dark:text-gray-300"
+                            // className="text-gray-900 dark:text-gray-300"
                           >
                             {previousPage.title}
                           </Link>
@@ -109,11 +102,20 @@ export default async function Layout({ params, children }: Props) {
                     )}
                     {!!nextPage && (
                       <div className="ml-auto text-right">
-                        <label className="mb-2 text-xs font-bold uppercase leading-4 text-gray-500">
+                        <label
+                          className={cn(
+                            'mb-2 text-xs font-bold uppercase leading-4',
+                            // "text-gray-500"
+                            'text-on-surface-variant/50',
+                          )}
+                        >
                           Next
                         </label>
                         <div className="text-xl">
-                          <Link href={nextPage.url} className="text-gray-900 dark:text-gray-300">
+                          <Link
+                            href={nextPage.url}
+                            // className="text-gray-900 dark:text-gray-300"
+                          >
                             {nextPage.title}
                           </Link>
                         </div>
diff --git a/src/app/[...slug]/page.tsx b/src/app/[...slug]/page.tsx
index 156723f4..4b70ff5d 100644
--- a/src/app/[...slug]/page.tsx
+++ b/src/app/[...slug]/page.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 
 import Post from '@/components/Post'
 import { getData, getDocs } from '@/utils/docs'
+import cn from '@/lib/cn'
 
 export type Props = {
   params: { slug: string[] }
@@ -40,10 +41,12 @@ export default async function Page({ params }: Props) {
   return (
     <>
       <div className="mx-auto max-w-3xl">
-        <div className="post-header mb-4 border-b pb-6 dark:border-gray-700">
+        <div className={cn('post-header mb-4 border-b pb-6', 'border-outline-variant/50')}>
           <h1 className="mb-4 text-5xl font-bold tracking-tighter">{doc?.title}</h1>
           {!!doc?.description?.length && (
-            <p className="text-base leading-5 text-gray-400">{doc.description}</p>
+            <p className={cn('text-base leading-5', 'text-on-surface-variant/50')}>
+              {doc.description}
+            </p>
           )}
         </div>
         <div className="content-container">{doc ? <Post doc={doc} /> : 'empty doc'}</div>
diff --git a/src/app/globals.css b/src/app/globals.css
index ced774ae..487dd481 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -6,20 +6,13 @@
   scroll-behavior: smooth;
   --header-height: 4rem; /* TODO: make this value dynamic */
   scroll-margin-top: var(--header-height);
+  font-size: 17px;
 }
 
 body {
   font-optical-sizing: auto;
 }
 
-* {
-  font-family: 'Inter', sans-serif;
-}
-
-body {
-  font-size: 15px;
-}
-
 pre,
 code,
 code span {
@@ -28,7 +21,7 @@ code span {
 
 /* Inline code */
 :not(pre) > code {
-  @apply rounded-md bg-gray-100 px-1.5 py-0.5 dark:bg-gray-800 dark:text-gray-300;
+  @apply bg-surface-container-high rounded-md px-1.5 py-0.5;
 }
 
 /* Start purging... */
@@ -37,18 +30,13 @@ code span {
 
 /* Write your own custom component styles here */
 .btn-blue {
-  @apply rounded bg-blue-500 px-4 py-2 font-bold text-white;
+  @apply bg-primary-container rounded px-4 py-2 font-bold;
 }
 
 /* Start purging... */
 @tailwind utilities;
 /* Stop purging. */
 
-.text-base {
-  font-size: 0.9375rem;
-  line-height: 1.35rem;
-}
-
 /* Your own custom utilities */
 @supports (position: sticky) {
   @media (min-width: theme('screens.lg')) {
@@ -72,7 +60,7 @@ code span {
 
 .content-container ul > li:before {
   content: '—';
-  @apply mr-3 inline-block text-gray-300;
+  @apply mr-3 inline-block;
 }
 
 .content-container :is(pre, code) {
@@ -80,19 +68,19 @@ code span {
 }
 
 .content-container pre {
-  @apply mb-8 overflow-hidden overflow-x-auto rounded bg-gray-900 p-4;
+  @apply mb-8 overflow-hidden overflow-x-auto rounded p-4;
 }
 
 main a {
-  @apply text-blue-400;
+  @apply text-primary;
 }
 
 .content-container .heading {
-  @apply block font-bold text-gray-900 no-underline hover:underline dark:text-gray-300;
+  @apply block font-bold text-on-surface no-underline hover:underline;
 }
 
 blockquote p {
-  @apply text-gray-400 !important;
+  @apply text-on-surface-variant/50;
 }
 
 details {
@@ -103,54 +91,41 @@ summary {
   @apply -ml-4 mb-2 cursor-pointer select-none;
 }
 
+table {
+  @apply bg-surface-container-low;
+}
+
 th {
-  @apply px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500;
+  @apply px-6 py-3 text-left text-xs font-medium uppercase tracking-wide;
 }
 
 thead {
-  @apply bg-gray-50 dark:bg-gray-800;
+  /* @apply bg-gray-50 dark:bg-gray-800; */
+  @apply text-on-surface-variant/50;
 }
 
 tbody tr:nth-child(even) {
-  @apply bg-white dark:bg-gray-900;
+  /* @apply bg-white dark:bg-gray-900; */
+  @apply bg-surface;
 }
 
 tbody tr:nth-child(odd) {
-  @apply bg-gray-50 dark:bg-gray-800;
+  /* @apply bg-gray-50 dark:bg-gray-800; */
 }
 
 td {
-  @apply px-6 py-4 text-sm text-gray-900 dark:text-gray-300;
+  @apply px-6 py-4 text-sm;
 }
 
 td:first-child {
   @apply font-medium;
 }
 
-.grid-list li {
-  @apply text-base text-gray-700;
-  font-size: 0.9375rem;
-  line-height: 1.35rem;
-}
-
-.grid-list li a {
-  @apply mb-2 block;
-}
-
 ul.grid-list > li:before {
   display: none;
 }
 
-@layer utilities {
-  .scrolling-touch {
-    -webkit-overflow-scrolling: touch;
-  }
-  .scrolling-auto {
-    -webkit-overflow-scrolling: auto;
-  }
-}
-
-#intro-demos {
+/* #intro-demos {
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-around;
@@ -185,30 +160,19 @@ ul.grid-list > li:before {
 
 .demo-grid > div:last-of-type:nth-child(odd) {
   grid-column: 1 / -1;
-}
+} */
 
 .search-item.focus-visible li > div {
-  @apply bg-gray-800 text-gray-200;
+  /* @apply bg-gray-800 text-gray-200; */
 }
 
 .hint p {
-  @apply dark:text-gray-500;
+  /* @apply dark:text-gray-500; */
 }
-
 .hint p.mb-4:last-of-type {
   margin-bottom: 0;
 }
 
-/*::-webkit-scrollbar {
-  width: 14px;
-}
-::-webkit-scrollbar-thumb {
-  @apply border-4 border-black border-opacity-0 bg-gray-300 rounded-full dark:bg-gray-700;
-}
-::-webkit-scrollbar-track {
-  @apply dark:bg-gray-800;
-}*/
-
 /**
  * Pmndrs theme for JavaScript, CSS and HTML
  * Loosely based on https://marketplace.visualstudio.com/items?itemName=pmndrs.pmndrs
@@ -217,10 +181,10 @@ ul.grid-list > li:before {
 
 code[class*='language-'],
 pre[class*='language-'] {
-  color: #e4f0fb;
   background: none;
-  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-  font-family: Menlo, Monaco, 'Courier New', monospace;
+  /* color: #e4f0fb;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3); */
+  /* font-family: Menlo, Monaco, 'Courier New', monospace; */
   text-align: left;
   white-space: pre;
   word-spacing: normal;
@@ -259,7 +223,7 @@ pre[class*='language-'] {
 
 :not(pre) > code[class*='language-'],
 pre[class*='language-'] {
-  background: #252b37;
+  @apply bg-inverse-surface-light;
 }
 
 /* Inline code */
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 466b6f00..68a53fed 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,7 +3,8 @@ import { Inter } from 'next/font/google'
 import './globals.css'
 import { svg } from '@/utils/icon'
 import resolveMdxUrl from '@/utils/resolveMdxUrl'
-import { ThemeProvider } from './ThemeProvider'
+import { ThemeProvider } from 'next-themes'
+import cn from '@/lib/cn'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -54,12 +55,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
+      <body className={cn(inter.className, 'bg-surface')}>
         <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
+        // attribute="class"
+        // defaultTheme="system"
+        // enableSystem
+        // disableTransitionOnChange
         >
           {children}
         </ThemeProvider>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5bda704b..fef080c3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -151,7 +151,7 @@ export default function Page() {
 
   return (
     <>
-      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 dark:text-gray-100">
+      <div className="min-h-screen">
         <div className="px-4 py-8 pb-12 lg:px-28 lg:py-12 lg:pb-20">
           <header className="text-center text-3xl lg:text-left">
             <Link href="/" aria-label="Poimandres Docs" className="font-bold">
@@ -164,13 +164,13 @@ export default function Page() {
             {Object.entries(libs).map(([id, data]) => (
               <div
                 key={id}
-                className="relative overflow-hidden rounded-md border border-gray-200 bg-white font-normal shadow-lg dark:border-gray-700 dark:bg-gray-800/30"
+                className="bg-surface-container relative overflow-hidden rounded-md border border-outline-variant font-normal"
               >
                 <div className="relative z-10 flex h-full flex-col justify-between">
                   <div className="flex items-center justify-between px-6">
                     <div className="max-w-md">
                       <div className="pt-4 text-lg font-bold">{data.title}</div>
-                      <div className="flex-grow pb-4 pr-4 pt-1 text-base !leading-relaxed text-gray-500">
+                      <div className="flex-grow pb-4 pr-4 pt-1 text-sm !leading-relaxed text-on-surface-variant/50">
                         {data.description}
                       </div>
                     </div>
@@ -192,10 +192,10 @@ export default function Page() {
                       </a>
                     )}
                   </div>
-                  <div className="flex w-full divide-x divide-gray-200 border-t border-gray-200 dark:divide-gray-700 dark:border-gray-700">
+                  <div className="flex w-full divide-x divide-outline-variant border-t border-outline-variant text-sm">
                     <Link
                       href={data.url}
-                      className="inline-flex flex-1 items-center space-x-2 px-6 py-4 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
+                      className="interactive-bg-surface-container inline-flex flex-1 items-center space-x-2 px-6 py-4 transition-colors"
                     >
                       <Icon icon="docs" />
                       <span className="sm:hidden">Docs</span>
@@ -205,7 +205,7 @@ export default function Page() {
                       href={data.github}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="inline-flex flex-1 items-center space-x-2 px-6 py-4 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
+                      className="interactive-bg-surface-container inline-flex flex-1 items-center space-x-2 px-6 py-4 transition-colors"
                     >
                       <Icon icon="github" />
                       <span>GitHub</span>
diff --git a/src/components/Codesandbox.tsx b/src/components/Codesandbox.tsx
index 32b96265..2b13305a 100644
--- a/src/components/Codesandbox.tsx
+++ b/src/components/Codesandbox.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image'
 
-import clsx from 'clsx'
 import { cache } from 'react'
+import cn from '@/lib/cn'
 
 export type CSB = {
   id: string
@@ -35,10 +35,15 @@ export default function Codesandbox({
           sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
         />
       ) : (
-        <a href={`https://codesandbox.io/s/${id}`} target="_blank" rel="noreferrer">
+        <a
+          href={`https://codesandbox.io/s/${id}`}
+          target="_blank"
+          rel="noreferrer"
+          className="mb-2 block"
+        >
           {screenshot_url && (
             <Image
-              className="rounded-lg"
+              className="bg-surface-container rounded-lg"
               src={screenshot_url}
               placeholder="empty"
               alt={title}
@@ -52,15 +57,30 @@ export default function Codesandbox({
 
       {!hideTitle && (
         <>
-          <h6 className="mt-4 font-bold text-gray-700">{title}</h6>
-          <p className="mt-1 text-gray-700">{description}</p>
+          <h6
+            className={cn(
+              'mt-4 font-bold',
+              // "text-gray-700"
+            )}
+          >
+            {title}
+          </h6>
+          <p
+            className={cn(
+              'mt-1',
+              // "text-gray-700"
+            )}
+          >
+            {description}
+          </p>
           <div className="w-full">
             {tags.map((tag, i) => (
               <span
                 key={i}
-                className={clsx(
-                  'mt-2 inline-block rounded bg-gray-100 px-1 py-1 text-xs text-gray-500',
+                className={cn(
+                  'mt-2 inline-block rounded px-1 py-1 text-xs',
                   i !== tags.length - 1 && 'mr-1',
+                  // 'bg-gray-100 text-gray-500',
                 )}
               >
                 {tag}
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index e54f89f2..6bb366bd 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import clsx from 'clsx'
+import cn from '@/lib/cn'
 
 type SVGProps = Partial<React.SVGProps<SVGSVGElement>>
 
@@ -61,7 +61,7 @@ export interface IconProps extends SVGProps {
 
 function Icon({ icon, className, ...props }: IconProps) {
   const Component = icons[icon]
-  return <Component aria-hidden className={clsx(className, 'h-5 w-5 flex-none')} {...props} />
+  return <Component aria-hidden className={cn(className, 'h-5 w-5 flex-none')} {...props} />
 }
 
 export default Icon
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 29cabef5..3217c096 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
-import clsx from 'clsx'
 import Link from 'next/link'
 import { Doc } from '@/app/[...slug]/DocsContext'
+import cn from '@/lib/cn'
 
 interface NavItemProps {
   doc: Doc
@@ -14,9 +14,9 @@ function NavItem({ doc, asPath }: NavItemProps) {
   return (
     <Link
       href={doc.url ?? '/'}
-      className={clsx(
-        'mb-1 block cursor-pointer rounded-md px-6 py-2 font-normal text-gray-800 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-700',
-        active && 'bg-gray-100 dark:bg-gray-700',
+      className={cn(
+        'mb-1 block cursor-pointer rounded-md px-6 py-2 font-normal',
+        active ? 'interactive-bg-primary-container' : 'interactive-bg-surface',
       )}
     >
       {doc.title}
@@ -48,7 +48,7 @@ function Nav({ docs, asPath }: { docs: Doc[]; asPath: string }) {
     <ul>
       {Object.entries(nav).map(([key, doc]) => (
         <li key={key}>
-          <h3 className="mb-2 mt-8 px-6 text-sm font-semibold uppercase tracking-wide text-gray-900 dark:text-gray-300 lg:text-xs">
+          <h3 className="mb-2 mt-8 px-6 text-sm font-bold uppercase tracking-wide text-on-surface-variant/50 lg:text-xs">
             {key.replace(/\-/g, ' ')}
           </h3>
           {doc.url ? (
diff --git a/src/components/Search/SearchItem.tsx b/src/components/Search/SearchItem.tsx
index 6b5dc526..2961e655 100644
--- a/src/components/Search/SearchItem.tsx
+++ b/src/components/Search/SearchItem.tsx
@@ -23,16 +23,14 @@ function SearchItem({ search, result }: SearchItemProps) {
       target={result.url.startsWith('http') ? '_blank' : undefined}
     >
       <li className="px-2 py-1">
-        <div className="flex items-center justify-between rounded-md bg-gray-100 p-4 py-5 transition-all hover:bg-gray-800 hover:text-gray-200 dark:bg-gray-900/50 dark:text-gray-100 dark:hover:bg-gray-900/70">
+        <div className="interactive-bg-surface-container-high flex items-center justify-between rounded-md p-4 py-5 transition-colors">
           <span
             className="pr-3"
             dangerouslySetInnerHTML={{
               __html: `
-                  <span class="block text-xs text-gray-400 dark:text-gray-500 pb-1">${
-                    result.label
-                  }</span>
+                  <span class="block text-xs text-on-surface-variant/50 pb-1">${result.label}</span>
                   ${highlight(result.title, search)}
-                  <span class="block text-sm text-gray-600 dark:text-gray-400 pt-2">
+                  <span class="block text-sm text-on-surface-variant/50 pt-2">
                     ${highlight(result.description, search)}
                   </span>
                 `,
@@ -42,7 +40,10 @@ function SearchItem({ search, result }: SearchItemProps) {
             // eslint-disable-next-line @next/next/no-img-element
             <img className="max-w-[40%] rounded" src={result.image} alt={result.title} />
           ) : (
-            <Icon icon="enter" className="text-gray-400" />
+            <Icon
+              icon="enter"
+              // className="text-gray-400"
+            />
           )}
         </div>
       </li>
diff --git a/src/components/Search/SearchModal.tsx b/src/components/Search/SearchModal.tsx
index 565364f2..86b44d09 100644
--- a/src/components/Search/SearchModal.tsx
+++ b/src/components/Search/SearchModal.tsx
@@ -1,7 +1,7 @@
-import clsx from 'clsx'
 import * as React from 'react'
 import Icon from '@/components/Icon'
 import SearchItem, { SearchResult } from './SearchItem'
+import cn from '@/lib/cn'
 
 export interface SearchModelProps {
   search: string
@@ -13,18 +13,22 @@ export interface SearchModelProps {
 function SearchModal({ search, results, onClose, onChange }: SearchModelProps) {
   return (
     <div className="absolute bottom-0 left-0 right-0 top-0 z-[99] h-screen w-screen">
-      <button type="button" className="h-full w-full bg-gray-900 opacity-50" onClick={onClose} />
+      <button type="button" className="0 h-full w-full bg-surface-dim/80" onClick={onClose} />
+
       <div className="z-100 absolute bottom-20 left-2/4 top-20 w-[500px] max-w-[90%] -translate-x-1/2 transform overflow-y-auto">
         <div className="relative mt-1 rounded-md shadow-sm">
           <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-            <Icon icon="search" className="text-gray-300" />
+            <Icon
+              icon="search"
+              // className="text-gray-300"
+            />
           </div>
           <input
             type="search"
             name="search"
             id="search"
-            className={clsx(
-              'block w-full border-gray-300 px-4 py-6 pl-10 text-gray-700 outline-none focus:border-gray-200 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 sm:text-sm',
+            className={cn(
+              'bg-surface-container block w-full px-4 py-6 pl-10 outline-none sm:text-sm',
               results.length > 0 ? 'rounded-t-md' : 'rounded-md',
             )}
             autoComplete="off"
@@ -32,8 +36,9 @@ function SearchModal({ search, results, onClose, onChange }: SearchModelProps) {
             placeholder="Search the docs"
             onChange={onChange}
           />
+
           {results.length > 0 && (
-            <ul className="z-2 absolute left-0 m-0 w-full list-none rounded-b-md bg-white p-0 pb-1 dark:bg-gray-800 dark:text-gray-400">
+            <ul className="z-2 bg-surface-container absolute left-0 m-0 w-full list-none rounded-b-md p-0 pb-1">
               {results.map((result, index) => (
                 <SearchItem key={`search-item-${index}`} search={search} result={result} />
               ))}
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index c03ac42d..bb27abcd 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -8,6 +8,7 @@ import { useLockBodyScroll } from '@/hooks/useLockBodyScroll'
 
 import Icon from '@/components/Icon'
 import { SearchModalContainer } from './SearchModalContainer'
+import cn from '@/lib/cn'
 
 function Search() {
   // const router = useRouter()
@@ -39,24 +40,28 @@ function Search() {
         />
       )}
       <div className="relative grow">
-        <div className="flex h-16 flex-auto items-center justify-between px-4">
+        <div className="flex h-16 flex-auto items-center justify-between px-4 text-on-surface-variant/50 transition-colors duration-200 hover:text-[inherit]">
           <button
             type="button"
             onClick={() => setShowSearchModal(true)}
-            className="group flex w-full items-center space-x-3 py-2 font-medium leading-6 text-gray-400 transition-colors duration-200 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400 sm:space-x-4"
+            className={cn(
+              'group flex w-full items-center space-x-3 py-2 font-medium leading-6 sm:space-x-4',
+
+              'interative-bg-surface-container',
+            )}
             onFocus={() => setShowSearchModal(true)}
           >
-            <Icon
-              icon="search"
-              className="h-6 w-6 text-gray-400 transition-colors duration-200 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400"
-            />
+            <Icon icon="search" className={cn('h-6 w-6')} />
             <span>
               Quick search
               <span className="hidden sm:inline"> for anything</span>
             </span>
             <span
               style={{ opacity: 1 }}
-              className="hidden rounded-md border border-gray-300 px-1.5 py-0.5 text-sm leading-5 text-gray-400 dark:border-gray-700 sm:block"
+              className={cn(
+                'hidden rounded-md border px-1.5 py-0.5 text-sm leading-5 sm:block',
+                // 'border-gray-300 text-gray-400 dark:border-gray-700',
+              )}
             >
               <span className="sr-only">Press </span>
               <kbd className="font-sans">
diff --git a/src/components/Toc.tsx b/src/components/Toc.tsx
index f4f75f81..fc59af1c 100644
--- a/src/components/Toc.tsx
+++ b/src/components/Toc.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import * as React from 'react'
-import clsx from 'clsx'
 import type { DocToC } from '@/app/[...slug]/DocsContext'
+import cn from '@/lib/cn'
 
 export interface ToCProps {
   toc: DocToC[]
@@ -31,7 +31,12 @@ function Toc({ toc }: ToCProps) {
 
   return (
     <div className="max-h-(screen-16) sticky top-16 flex flex-col justify-between overflow-y-auto pb-6">
-      <label className="mb-2 mt-12 text-sm font-semibold uppercase tracking-wide text-gray-900 dark:text-gray-300 lg:text-xs">
+      <label
+        className={cn(
+          'mb-2 mt-12 text-sm font-semibold uppercase tracking-wide lg:text-xs',
+          // "text-gray-900 dark:text-gray-300"
+        )}
+      >
         On This Page
       </label>
       {toc.map((item, index) => (
@@ -39,10 +44,11 @@ function Toc({ toc }: ToCProps) {
           <a
             aria-label={item.title}
             aria-current={index === activeIndex}
-            className={clsx(
-              'block py-1 text-sm font-normal leading-6 text-gray-500 hover:underline',
+            className={cn(
+              'block py-1 text-sm font-normal leading-6 text-on-surface-variant/50 hover:underline',
+
               item.parent && 'ml-4',
-              index === activeIndex && 'text-gray-900 dark:text-gray-200',
+              index === activeIndex && 'text-on-surface',
             )}
             href={`#${item.id}`}
           >
diff --git a/src/components/ToggleTheme.tsx b/src/components/ToggleTheme.tsx
deleted file mode 100644
index a68cddac..00000000
--- a/src/components/ToggleTheme.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { CiDark, CiLight } from 'react-icons/ci'
-import { useTheme } from 'next-themes'
-import Image from 'next/image'
-
-const ToggleTheme = () => {
-  const { setTheme, resolvedTheme } = useTheme()
-
-  const [isDark, setIsDark] = React.useState<boolean | undefined>(undefined)
-  React.useEffect(() => {
-    switch (resolvedTheme) {
-      case 'light':
-        setIsDark(false)
-        break
-      case 'dark':
-        setIsDark(true)
-        break
-      default:
-        setIsDark(undefined)
-        break
-    }
-  }, [resolvedTheme])
-
-  return (
-    <button
-      className="flex h-9 w-9 items-center justify-center"
-      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
-    >
-      {isDark !== undefined ? (
-        isDark ? (
-          <CiLight size="21" />
-        ) : (
-          <CiDark size="21" />
-        )
-      ) : (
-        <Image
-          src={'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'}
-          width={21}
-          height={21}
-          alt=""
-        />
-      )}
-    </button>
-  )
-}
-
-export default ToggleTheme
diff --git a/src/components/mdx/Grid.tsx b/src/components/mdx/Grid.tsx
index e60bea8c..46e4484b 100644
--- a/src/components/mdx/Grid.tsx
+++ b/src/components/mdx/Grid.tsx
@@ -1,14 +1,19 @@
+import cn from '@/lib/cn'
+
 export const Grid = ({ children, cols = 4 }: { children: React.ReactNode; cols?: number }) => (
   <ul
-    className={`grid sm:grid-cols-2 ${
+    className={cn(
+      'grid sm:grid-cols-2',
       cols === 4
         ? 'md:grid-cols-4'
         : cols === 3
           ? 'md:grid-cols-3'
           : cols === 2
             ? 'md:grid-cols-2'
-            : 'md:grid-cols-1'
-    } grid-list gap-4 text-sm text-gray-700`}
+            : 'md:grid-cols-1',
+      `grid-list gap-4 text-sm`,
+      // 'text-gray-700',
+    )}
     style={{ marginBottom: '1rem' }}
   >
     {children}
diff --git a/src/components/mdx/Hint.tsx b/src/components/mdx/Hint.tsx
index 12ec0f44..74ea8dc0 100644
--- a/src/components/mdx/Hint.tsx
+++ b/src/components/mdx/Hint.tsx
@@ -1,6 +1,14 @@
+import cn from '@/lib/cn'
+
 export const Hint = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="hint my-6 overflow-clip rounded-lg bg-yellow-100 px-6 py-4 dark:text-gray-500">
+    <div
+      className={cn(
+        'hint my-6 overflow-clip rounded-lg px-6 py-4',
+        // 'bg-yellow-100 dark:text-gray-500',
+        'bg-hint-container',
+      )}
+    >
       {children}
     </div>
   )
diff --git a/src/components/mdx/index.tsx b/src/components/mdx/index.tsx
index 444e53b8..48fdb8d4 100644
--- a/src/components/mdx/index.tsx
+++ b/src/components/mdx/index.tsx
@@ -1,4 +1,6 @@
+import cn from '@/lib/cn'
 import { MARKDOWN_REGEX } from '@/utils/docs'
+import { ComponentProps } from 'react'
 
 export * from './Grid'
 export * from './Hint'
@@ -26,20 +28,41 @@ export const ol = ({ children }: { children: React.ReactNode }) => (
   <ol className="mb-8 px-4">{children}</ol>
 )
 export const li = ({ children }: { children: React.ReactNode }) => (
-  <li className="mb-4 text-base leading-6 text-gray-700 dark:text-gray-400">{children}</li>
+  <li
+    className={cn(
+      'mb-4 text-base leading-6',
+      // 'text-gray-700 dark:text-gray-400'
+    )}
+  >
+    {children}
+  </li>
 )
 
 export const p = ({ children }: { children: React.ReactNode }) => (
-  <p className="mb-4 text-base text-gray-700 dark:text-gray-400">{children}</p>
+  <p
+    className={cn(
+      'mb-4 text-base',
+      // 'text-gray-700 dark:text-gray-400'
+    )}
+  >
+    {children}
+  </p>
 )
 
 export const blockquote = ({ children }: { children: React.ReactNode }) => (
-  <blockquote className="mb-8 border-l-4 border-gray-600 pl-4 text-base">{children}</blockquote>
+  <blockquote
+    className={cn(
+      'mb-8 border-l-4 pl-4 text-base',
+      // "border-gray-600"
+    )}
+  >
+    {children}
+  </blockquote>
 )
 
 export const table = ({ children }: { children: React.ReactNode }) => (
-  <div className="my-8 overflow-auto rounded-lg border border-gray-200 dark:border-gray-700">
-    <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">{children}</table>
+  <div className="my-8 overflow-auto rounded-lg border border-outline-variant">
+    <table className="min-w-full divide-y divide-outline-variant">{children}</table>
   </div>
 )
 
@@ -65,18 +88,7 @@ export const a = ({
   )
 }
 
-export const img = ({
-  src,
-  alt,
-  width,
-  height,
-  ...rest
-}: {
-  src: string
-  alt: string
-  width: number
-  height: number
-}) => (
+export const img = ({ src, alt, width, height, className, ...rest }: ComponentProps<'img'>) => (
   // eslint-disable-next-line @next/next/no-img-element
   <img
     src={src}
@@ -85,6 +97,7 @@ export const img = ({
     alt={alt}
     width={width}
     height={height}
+    className={cn('bg-surface-container', className)}
     {...rest}
   />
 )
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 44b2db9f..0773f754 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,8 +1,34 @@
 import type { Config } from 'tailwindcss'
+import { withMaterialColors } from 'tailwind-material-colors'
 
 const config: Config = {
   darkMode: 'class',
   content: ['./src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/app/**/*.{js,ts,jsx,tsx,mdx}'],
   plugins: [require('@tailwindcss/typography'), require('@tailwindcss/aspect-ratio')],
 }
-export default config
+
+//
+// https://tailwind-material-colors-docs.vercel.app/
+//
+const config2 = withMaterialColors(
+  config,
+  {
+    // Your base colors as HEX values. 'primary' is required.
+    primary: '#323e48',
+    // secondary and/or tertiary are optional, if not set they will be derived from the primary color.
+    // secondary: '#ffff00',
+    // tertiary: '#0000ff',
+
+    // Add any named colors you need:
+    hint: '#d29922',
+    // green: '#00ff00',
+    // blue: '#0000ff',
+  },
+  {
+    extend: false,
+    scheme: 'tonalSpot', // one of 'content', 'expressive', 'fidelity', 'monochrome', 'neutral', 'tonalSpot' or 'vibrant'
+    contrast: 0, // contrast is optional and ranges from -1 (less contrast) to 1 (more contrast).
+  },
+)
+
+export default config2