tailwind-material-colors

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"
  },

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} />
 }

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>

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>

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>