Merge pull request #452 from MeshJS/playground-update-styles

Playground update styles
MeshJS · Dec 18, 2024 · 2511e25 · 2511e25
2 parents d3004a3 + 33fa2d9
commit 2511e25
Show file tree

Hide file tree

Showing 48 changed files with 267 additions and 218 deletions.
diff --git a/apps/playground/src/components/button/button-float-documentation.tsx b/apps/playground/src/components/button/button-float-documentation.tsx
@@ -6,7 +6,7 @@ import Button from "./button";
 export default function ButtonFloatDocumentation({ href }: { href: string }) {
   return (
     <Link href={href}>
-      <Button className="fixed bottom-0 left-2 z-30" tooltip="Documentation" style="info">
+      <Button className="fixed bottom-0 left-2 z-30" tooltip="Documentation" style="dark">
         <DocumentTextIcon className="h-5 w-5" />
       </Button>
     </Link>

diff --git a/apps/playground/src/components/button/button-group.tsx b/apps/playground/src/components/button/button-group.tsx
@@ -16,7 +16,7 @@ export default function ButtonGroup({
             className={`${
               currentSelected == item.key &&
               "z-10 border text-blue-700 ring-2 ring-blue-700 dark:text-white dark:ring-blue-500"
-            } border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100  hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white`}
+            } border-neutral-200 bg-white px-4 py-2 text-sm font-medium text-neutral-900 hover:bg-neutral-100  hover:text-blue-700 dark:border-neutral-600 dark:bg-neutral-700 dark:text-white dark:hover:bg-neutral-600 dark:hover:text-white`}
             aria-label={item.label}
           >
             {item.label}

diff --git a/apps/playground/src/components/button/button.tsx b/apps/playground/src/components/button/button.tsx
@@ -33,8 +33,8 @@ export default function Button({
       "inline-flex items-center border border-yellow-500 bg-yellow-500 text-white rounded-md px-4 py-2 mr-2 mt-2 mb-2 transition duration-500 ease select-none hover:bg-yellow-600 focus:outline-none focus:shadow-outline",
     info: "inline-flex items-center border border-teal-500 bg-teal-500 text-white rounded-md px-4 py-2 mr-2 mt-2 mb-2 transition duration-500 ease select-none hover:bg-teal-600 focus:outline-none focus:shadow-outline",
     light:
-      "inline-flex items-center border border-gray-200 bg-gray-200 text-gray-700 rounded-md px-4 py-2 mr-2 mt-2 mb-2 transition duration-500 ease select-none hover:bg-gray-300 focus:outline-none focus:shadow-outline",
-    dark: "inline-flex items-center border border-gray-700 bg-gray-700 text-white rounded-md px-4 py-2 mr-2 mt-2 mb-2 transition duration-500 ease select-none hover:bg-gray-800 focus:outline-none focus:shadow-outline",
+      "inline-flex items-center border border-neutral-200 bg-neutral-200 text-neutral-700 rounded-md px-4 py-2 mr-2 mt-2 mb-2 transition duration-500 ease select-none hover:bg-neutral-300 focus:outline-none focus:shadow-outline",
+    dark: "inline-flex items-center border border-neutral-700 bg-neutral-700 text-white rounded-md px-4 py-2 mr-2 mt-2 mb-2 transition duration-500 ease select-none hover:bg-neutral-800 focus:outline-none focus:shadow-outline",
   };
 
   let _style = style && styles[style] ? styles[style] : styles.primary;
@@ -61,7 +61,7 @@ export default function Button({
       >
         {children}
         {tooltip && (
-          <div className="button-with-tooltip-content tooltip invisible absolute z-10 -ml-4 mb-20 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white shadow-sm dark:bg-gray-700">
+          <div className="button-with-tooltip-content tooltip invisible absolute z-10 -ml-4 mb-20 inline-block rounded-lg bg-neutral-900 px-3 py-2 text-sm font-medium text-white shadow-sm dark:bg-neutral-700">
             {tooltip}
           </div>
         )}

diff --git a/apps/playground/src/components/card/card-title-desc-image.tsx b/apps/playground/src/components/card/card-title-desc-image.tsx
@@ -22,49 +22,47 @@ export default function CardTitleDescImage({
 }) {
   return (
     <Link href={link}>
-      <Card className="h-full cursor-pointer">
-        <div className="flex flex-row items-center gap-2">
-          {icon ? (
-            <div className="w-8 dark:text-white">
-              <Icon icon={icon} />
-            </div>
-          ) : thumbnailNotioly ? (
-            <div className="relative h-40 w-full bg-white">
-              <span className="absolute right-0 top-0 flex h-full w-1/2 flex-col justify-center">
-                <div className="text-2xl font-black">{title}</div>
-              </span>
-              <Image
-                src="/logo-mesh/black/logo-mesh-black-64x64.png"
-                className="absolute bottom-2 right-2 h-8"
-                layout="fill"
-                objectFit="contain"
-                alt={title}
-              />
-              <Image
-                src={`/notioly/Main/${thumbnailNotioly}.svg`}
-                className="h-full"
-                layout="fill"
-                objectFit="contain"
-                alt={title}
-              />
-            </div>
-          ) : (
-            thumbnailImage && (
-              <Image
-                className="mb-5 h-48 w-full rounded-lg object-contain"
-                src={thumbnailImage}
-                alt={title}
-                width={640}
-                height={640}
-              />
-            )
-          )}
-          <h2 className="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
-            {title}
-          </h2>
-        </div>
+      <Card className="h-full cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-700">
+        {icon ? (
+          <div className="w-8 dark:text-white">
+            <Icon icon={icon} />
+          </div>
+        ) : thumbnailNotioly ? (
+          <div className="relative h-40 w-full bg-white">
+            <span className="absolute right-0 top-0 flex h-full w-1/2 flex-col justify-center">
+              <div className="text-2xl font-black">{title}</div>
+            </span>
+            <Image
+              src="/logo-mesh/black/logo-mesh-black-64x64.png"
+              className="absolute bottom-2 right-2 h-8"
+              layout="fill"
+              objectFit="contain"
+              alt={title}
+            />
+            <Image
+              src={`/notioly/Main/${thumbnailNotioly}.svg`}
+              className="h-full"
+              layout="fill"
+              objectFit="contain"
+              alt={title}
+            />
+          </div>
+        ) : (
+          thumbnailImage && (
+            <Image
+              className="mb-5 h-48 w-full rounded-lg object-contain"
+              src={thumbnailImage}
+              alt={title}
+              width={640}
+              height={640}
+            />
+          )
+        )}
+        <h2 className="text-xl font-bold tracking-tight text-neutral-900 dark:text-white">
+          {title}
+        </h2>
         {desc && (
-          <p className="font-light text-gray-500 dark:text-gray-400">{desc}</p>
+          <p className="font-light text-neutral-500 dark:text-neutral-400">{desc}</p>
         )}
       </Card>
     </Link>

diff --git a/apps/playground/src/components/card/card.tsx b/apps/playground/src/components/card/card.tsx
@@ -11,15 +11,15 @@ export default function Card({
 }) {
   return (
     <section
-      className={`mt-4 overflow-x-hidden rounded-lg border border-gray-200 bg-white p-6 shadow-md dark:border-gray-700 dark:bg-gray-800 ${
+      className={`mt-4 overflow-x-hidden rounded-lg border border-neutral-200 bg-white p-6 shadow-md dark:border-neutral-700 dark:bg-neutral-800 ${
         className && className
       }`}
     >
       {title && (
-        <div className="bg-white text-left text-lg font-semibold text-gray-900 dark:bg-gray-800 dark:text-white">
+        <div className="bg-white text-left text-lg font-semibold text-neutral-900 dark:bg-neutral-800 dark:text-white">
           {title}
           {subtitle && (
-            <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
+            <p className="mt-1 text-sm font-normal text-neutral-500 dark:text-neutral-400">
               {subtitle}
             </p>
           )}

diff --git a/apps/playground/src/components/form/input.tsx b/apps/playground/src/components/form/input.tsx
@@ -16,7 +16,7 @@ export default function Input({
   label?: undefined | string;
 }) {
   let _classname =
-    "shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 mb-4";
+    "shadow-sm bg-neutral-50 border border-neutral-300 text-neutral-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 mb-4";
 
   if (className.length > 0) {
     _classname += ` ${className}`;
@@ -25,7 +25,7 @@ export default function Input({
   return (
     <>
       {label && (
-        <label className="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
+        <label className="mb-2 block text-sm font-medium text-neutral-900 dark:text-white">
           {label}
         </label>
       )}

diff --git a/apps/playground/src/components/form/select.tsx b/apps/playground/src/components/form/select.tsx
@@ -18,13 +18,13 @@ export default function Select({
     <>
       <label
         htmlFor={id}
-        className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-400"
+        className="mb-2 block text-sm font-medium text-neutral-900 dark:text-neutral-400"
       >
         {label}
       </label>
       <select
         id={id}
-        className="mb-4 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+        className="mb-4 block w-full rounded-lg border border-neutral-300 bg-neutral-50 p-2.5 text-sm text-neutral-900 focus:border-blue-500 focus:ring-blue-500 dark:border-neutral-600 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
         onChange={onChange}
         value={value}
       >

diff --git a/apps/playground/src/components/form/textarea.tsx b/apps/playground/src/components/form/textarea.tsx
@@ -14,7 +14,7 @@ const Textarea = ({
   label?: undefined | string;
 }) => {
   let _classname =
-    "block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 mb-4";
+    "block p-2.5 w-full text-sm text-neutral-900 bg-neutral-50 rounded-lg border border-neutral-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 mb-4";
 
   if (className.length > 0) {
     _classname = className;
@@ -23,7 +23,7 @@ const Textarea = ({
   return (
     <>
       {label && (
-        <label className="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
+        <label className="mb-2 block text-sm font-medium text-neutral-900 dark:text-white">
           {label}
         </label>
       )}

diff --git a/apps/playground/src/components/layouts/image-header-and-body.tsx b/apps/playground/src/components/layouts/image-header-and-body.tsx
@@ -22,7 +22,7 @@ export default function LayoutImageHeaderAndBody({
   return (
     <>
       <Metatags title={title} description={description} image={cover} />
-      <main className="bg-white pb-16 lg:pb-36 dark:bg-gray-900">
+      <main className="bg-white pb-16 lg:pb-36 dark:bg-neutral-900">
         <header
           style={{ backgroundImage: `url(${image})` }}
           className={`relative h-[460px] w-full bg-cover bg-center bg-no-repeat bg-blend-darken xl:h-[537px]`}
@@ -32,10 +32,10 @@ export default function LayoutImageHeaderAndBody({
             <h1 className="mb-4 max-w-4xl text-2xl font-extrabold leading-none text-white sm:text-3xl lg:text-4xl">
               {title}
             </h1>
-            <p className="text-lg font-normal text-gray-300">{description}</p>
+            <p className="text-lg font-normal text-neutral-300">{description}</p>
           </div>
         </header>
-        <div className="relative z-20 -m-36 mx-4 flex max-w-screen-xl justify-between rounded-lg border border-gray-200 bg-white p-6 shadow-md xl:-m-32 xl:mx-auto xl:p-9 dark:border-gray-700 dark:bg-gray-800">
+        <div className="relative z-20 -m-36 mx-4 flex max-w-screen-xl justify-between rounded-lg border border-neutral-200 bg-white p-6 shadow-md xl:-m-32 xl:mx-auto xl:p-9 dark:border-neutral-700 dark:bg-neutral-800">
           <article className="format format-blue dark:format-invert prose prose-slate w-full max-w-none xl:w-[828px]">
             <Markdown>{children}</Markdown>
           </article>

diff --git a/apps/playground/src/components/layouts/sidebar/index.tsx b/apps/playground/src/components/layouts/sidebar/index.tsx
@@ -28,7 +28,7 @@ export default function Sidebar({
     <div className="mb-6 mr-6 hidden lg:w-72 xl:block">
       <div className="sticky top-24">
         <aside>
-          <nav className="h-[calc(100vh-150px)] overflow-y-auto rounded-lg border border-gray-200 p-6 font-medium text-gray-500 dark:border-gray-700 dark:text-gray-400">
+          <nav className="h-[calc(100vh-150px)] overflow-y-auto rounded-lg border border-neutral-200 p-6 font-medium text-neutral-500 dark:border-neutral-700 dark:text-neutral-400">
             <ul className="space-y-4">
               {sidebarItems.map((item, i) => {
                 return (

diff --git a/apps/playground/src/components/layouts/sidebar/sticky-sidebar.tsx b/apps/playground/src/components/layouts/sidebar/sticky-sidebar.tsx
@@ -11,7 +11,7 @@ export default function StickySidebar({
     <div className="mb-6 hidden lg:w-72 xl:block">
       <div className="sticky top-20">
         {authors && (
-          <div className="mb-6 rounded-lg border border-gray-200 p-6 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+          <div className="mb-6 rounded-lg border border-neutral-200 p-6 text-neutral-500 dark:border-neutral-700 dark:text-neutral-400">
             {authors &&
               authors!.map((author, i) => {
                 return (
@@ -30,7 +30,7 @@ export default function StickySidebar({
                       />
                     </div>
                     <div className="mr-3">
-                      <span className="block font-medium text-gray-900 dark:text-white">
+                      <span className="block font-medium text-neutral-900 dark:text-white">
                         {author.name}
                       </span>
                       <span className="text-sm">{author.about}</span>
@@ -45,7 +45,7 @@ export default function StickySidebar({
           <h3 id="categories-label" className="sr-only">
             Topics
           </h3>
-          <nav className="rounded-lg border border-gray-200 p-6 font-medium text-gray-500 dark:border-gray-700 dark:text-gray-400">
+          <nav className="rounded-lg border border-neutral-200 p-6 font-medium text-neutral-500 dark:border-neutral-700 dark:text-neutral-400">
             <ul className="space-y-4">
               {sidebarItems.map((item, i) => {
                 return (
@@ -65,14 +65,14 @@ export default function StickySidebar({
                 );
               })}
             </ul>
-            {/* <h4 className="mb-4 text-gray-900 dark:text-white">Others</h4> */}
+            {/* <h4 className="mb-4 text-neutral-900 dark:text-white">Others</h4> */}
           </nav>
         </aside>
         {/* <aside>
-          <div className="flex justify-center items-center mb-3 w-full h-32 bg-gray-100 rounded-lg dark:bg-gray-800">
+          <div className="flex justify-center items-center mb-3 w-full h-32 bg-neutral-100 rounded-lg dark:bg-neutral-800">
             <svg
               aria-hidden="true"
-              className="w-8 h-8 text-gray-400"
+              className="w-8 h-8 text-neutral-400"
               fill="currentColor"
               viewBox="0 0 20 20"
               xmlns="http://www.w3.org/2000/svg"
@@ -84,10 +84,10 @@ export default function StickySidebar({
               ></path>
             </svg>
           </div>
-          <p className="mb-2 text-sm font-light text-gray-500 dark:text-gray-400">
+          <p className="mb-2 text-sm font-light text-neutral-500 dark:text-neutral-400">
             Students and Teachers, save up to 60% on Flowbite Creative Cloud.
           </p>
-          <p className="text-xs font-light text-gray-400 uppercase dark:text-gray-500">
+          <p className="text-xs font-light text-neutral-400 uppercase dark:text-neutral-500">
             Ads placeholder
           </p>
         </aside> */}

diff --git a/apps/playground/src/components/sections/hero-logo-two-sections-links.tsx b/apps/playground/src/components/sections/hero-logo-two-sections-links.tsx
@@ -15,17 +15,17 @@ export default function HeroLogoTwoSectionsLinks({
   links: MenuItem[];
 }) {
   return (
-    <section className="bg-white dark:bg-gray-900">
+    <section>
       <div className="mx-auto max-w-screen-xl px-4 py-8 sm:py-16 lg:px-6 lg:py-24">
         <div className="text-center">{logo}</div>
 
         <div className="mx-auto max-w-screen-xl px-4 py-8 sm:py-16 lg:px-6">
           <div className="grid space-y-8 lg:grid-cols-2 lg:gap-12 lg:space-y-0">
             <div>
-              <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white">
+              <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-neutral-900 dark:text-white">
                 {title}
               </h2>
-              <p className="mb-4 text-gray-500 sm:text-xl dark:text-gray-400">
+              <p className="mb-4 text-neutral-500 sm:text-xl dark:text-neutral-400">
                 {description}
               </p>
             </div>
@@ -45,10 +45,10 @@ function Item({ item }: { item: MenuItem }) {
   return (
     <Link
       href={item.link}
-      className="border-primary-600 dark:border-primary-500 mb-6 flex items-center justify-between rounded-lg border-l-8 bg-white p-4 shadow hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700"
+      className="border-primary-600 dark:border-primary-500 mb-6 flex items-center justify-between rounded-lg border-l-8 bg-white p-4 shadow hover:bg-neutral-50 dark:bg-neutral-800 dark:hover:bg-neutral-700"
     >
       <div>
-        <span className="mb-1 block text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
+        <span className="mb-1 block text-xs font-medium uppercase text-neutral-500 dark:text-neutral-400">
           {item.desc}
         </span>
         <span className="text-primary-600 dark:text-primary-300 text-xl font-semibold">

diff --git a/apps/playground/src/components/sections/hero-two-sections.tsx b/apps/playground/src/components/sections/hero-two-sections.tsx
@@ -20,20 +20,20 @@ export default function HeroTwoSections({
   code?: string;
 }) {
   return (
-    <section className="bg-white dark:bg-gray-900">
-      <div className="mx-auto grid max-w-screen-xl px-4 py-8 lg:grid-cols-12 lg:gap-8 lg:py-16 xl:gap-0">
+    <section>
+      <div className="mx-auto grid max-w-screen-xl px-4 py-8 lg:grid-cols-12 lg:gap-8 xl:gap-0">
         <div className="mr-auto place-self-center lg:col-span-7">
           <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl dark:text-white">
             {title}
           </h1>
-          <p className="mb-6 max-w-2xl font-light text-gray-500 md:text-lg lg:mb-8 lg:text-xl dark:text-gray-400">
+          <p className="mb-6 max-w-2xl font-light text-neutral-500 md:text-lg lg:mb-8 lg:text-xl dark:text-neutral-400">
             {description}
           </p>
 
           {link && (
             <Link
               href={link.href}
-              className="mr-3 inline-flex items-center justify-center rounded-lg bg-primary-700 px-5 py-3 text-center text-base font-medium text-white hover:bg-primary-800"
+              className="bg-primary-700 hover:bg-primary-800 mr-3 inline-flex items-center justify-center rounded-lg px-5 py-3 text-center text-base font-medium text-white"
             >
               {link.label}
               <ArrowRightIcon className="-mr-1 ml-2 h-5 w-5" />

diff --git a/apps/playground/src/components/sections/input-table.tsx b/apps/playground/src/components/sections/input-table.tsx
@@ -5,11 +5,11 @@ export default function InputTable({
 }) {
   return (
     <div className="relative overflow-x-auto">
-      <table className="m-0 w-full text-left text-sm text-gray-500 dark:text-gray-400">
+      <table className="m-0 w-full text-left text-sm text-neutral-500 dark:text-neutral-400">
         <tbody>
           {listInputs.map((input, i) => {
             return (
-              <tr key={i} className="border-none bg-white dark:bg-gray-800">
+              <tr key={i} className="border-none bg-white dark:bg-neutral-800">
                 <td>{input}</td>
               </tr>
             );

diff --git a/apps/playground/src/components/sections/live-code-demo.tsx b/apps/playground/src/components/sections/live-code-demo.tsx
@@ -91,7 +91,7 @@ export default function LiveCodeDemo({
             label={runDemoButtonLabel}
           />
           {runDemoButtonTooltip && (
-            <p className="mt-0 text-sm text-gray-500 dark:text-gray-400">
+            <p className="mt-0 text-sm text-neutral-500 dark:text-neutral-400">
               {runDemoButtonTooltip}
             </p>
           )}