feat(docs): update color palette to use zinc shades for improved consistency

Author: alicanerdurmaz

documentation/src/components/blog/post-paginator/index.js

@@ -22,7 +22,7 @@ export const PostPaginator = ({ posts, title }) => {
       )}
     >
       <div className="blog-sm:px-6 w-full px-4">
-        <h2 className="m-0 mb-4 p-0 pl-4 text-2xl font-semibold text-refine-react-8 dark:text-refine-react-1">
+        <h2 className="m-0 mb-4 p-0 pl-4 text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
           {title}
         </h2>
         <div className="flex flex-col not-prose">
@@ -38,9 +38,9 @@ export const PostPaginator = ({ posts, title }) => {
                 "p-5",
                 "mb-5",
                 "rounded-lg",
-                "border border-refine-react-3 dark:border-refine-react-6",
-                "bg-white dark:bg-refine-react-8",
-                "hover:bg-gray-100 dark:hover:bg-refine-react-7",
+                "border border-zinc-200 dark:border-zinc-700",
+                "bg-white dark:bg-zinc-800",
+                "hover:bg-zinc-100 dark:hover:bg-zinc-700",
                 "not-prose",
                 "no-underline",
               )}
@@ -50,26 +50,23 @@ export const PostPaginator = ({ posts, title }) => {
                 rel="dofollow"
                 className={clsx(
                   "font-bold",
-                  "text-refine-react-8 dark:text-refine-react-1",
+                  "text-zinc-900 dark:text-zinc-100",
                   "no-underline",
-                  "hover:text-gray-800 hover:no-underline dark:hover:text-gray-200",
+                  "hover:text-zinc-800 hover:no-underline dark:hover:text-zinc-200",
                 )}
               >
                 {post.title}
               </div>
 
               <p
-                className={clsx(
-                  "font-sm",
-                  "text-refine-react-5 dark:text-refine-react-4",
-                )}
+                className={clsx("font-sm", "text-zinc-600 dark:text-zinc-400")}
               >
                 {post.description}
               </p>
 
               <div
                 id="post-info"
-                className="flex items-center gap-2 text-sm text-refine-react-4 dark:text-refine-react-5"
+                className="flex items-center gap-2 text-sm text-zinc-500 dark:text-zinc-400"
               >
                 <Date date={post.date} formattedDate={post.formattedDate} />
               </div>

documentation/src/pages/index.tsx

@@ -36,7 +36,7 @@ function Home() {
         className={clsx("bg-zinc-900")}
       >
         <div className={clsx()}>
-          <CommonHeader variant="landing" />
+          <CommonHeader showThemeToggle={false} />
           <div
             className={clsx(
               "flex flex-col",

documentation/src/refine-theme/blog-hero.tsx

@@ -39,7 +39,7 @@ export const BlogHero: FC<Props> = ({ className }) => {
             "text-[32px] leading-[40px] landing-sm:text-[56px] landing-sm:leading-[72px]",
           )}
         >
-          <div className={clsx("dark:text-gray-0 text-gray-900")}>Refine </div>
+          <div className={clsx("dark:text-white text-zinc-900")}>Refine </div>
           <div
             className={clsx(
               "font-semibold",
@@ -56,7 +56,7 @@ export const BlogHero: FC<Props> = ({ className }) => {
             "text-base",
             "text-start landing-md:text-center",
             "max-w-[588px]",
-            "dark:text-gray-400 text-gray-600",
+            "dark:text-zinc-400 text-zinc-600",
             "pb-2",
           )}
         >

documentation/src/refine-theme/blog-layout.tsx

@@ -38,15 +38,7 @@ export const RefineBlogLayout = (props: Props) => {
     >
       {/* If there's TOC, then we can say that this is a blog post page. */}
       {/* Then we can pass `trackProgress` prop to the header. */}
-      <CommonHeader
-        hasSticky={true}
-        trackProgress={!!toc}
-        variant="blog"
-        className={clsx(
-          "!bg-white dark:!bg-refine-react-8",
-          "!bg-opacity-100 dark:!bg-opacity-100",
-        )}
-      />
+      <CommonHeader hasSticky={true} trackProgress={!!toc} />
       {props.showHero && <BlogHero />}
       <div
         className={clsx(

documentation/src/refine-theme/blog-toc.tsx

@@ -27,7 +27,7 @@ export const BlogTOC = (props) => {
         "px-3",
         "pb-10",
         "pt-4 blog-lg:pt-9",
-        "border-l dark:border-l-gray-700 border-l-gray-100",
+        "border-l dark:border-l-zinc-700 border-l-zinc-100",
         !hasTOC && "invisible",
         "not-prose",
       )}

documentation/src/refine-theme/common-drawer.tsx

@@ -90,9 +90,9 @@ const DrawerComponent: FC<PropsWithChildren<Props>> = ({
           "w-[240px] h-full",
           "ml-auto",
           "p-4",
-          variant === "templates" && "bg-gray-0 dark:bg-gray-900 ",
+          variant === "templates" && "bg-zinc-0 dark:bg-zinc-900 ",
           variant === "blog" && "bg-white dark:bg-refine-react-7",
-          "border-l dark:border-gray-800",
+          "border-l dark:border-zinc-800",
           "dark:shadow-[0_0_72px_24px_#14141F]",
           "shadow-[0_0_72px_24px_rgba(20, 20, 31, 0.50)]",
         )}
@@ -110,7 +110,7 @@ const DrawerComponent: FC<PropsWithChildren<Props>> = ({
             "items-center",
             "justify-between",
             "mb-10",
-            "dark:text-gray-300 text-gray-900",
+            "dark:text-zinc-300 text-zinc-900",
           )}
         >
           <h3 className={clsx("text-base", "font-semibold")}>{title}</h3>