tailwind-material-colors

pmndrs · Aug 20, 2024 · 019c918 · 019c918
1 parent c5b1564
commit 019c918
Show file tree

Hide file tree

Showing 21 changed files with 496 additions and 489 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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'
 import { VscGithubAlt } from 'react-icons/vsc'
@@ -81,22 +80,11 @@ export default async function Layout({ params, children }: Props) {
                       <PiDiscordLogoLight />
                     </Link>
                   )}
-                  <ToggleTheme className="hidden size-9 items-center justify-center sm:flex" />
+                  {/* <ToggleTheme className="hidden size-9 items-center justify-center sm:flex" /> */}
                 </div>
               </>
             }
-            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={
               <>
@@ -105,7 +93,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
@@ -117,13 +105,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>
@@ -132,11 +126,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
@@ -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
@@ -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,27 +60,27 @@ 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) {
   @apply text-sm;
 }
 
 .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 */