feat(docs): use zinc template

Author: alicanerdurmaz

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

@@ -62,7 +62,7 @@ export const BlogPostPageView = ({ children }) => {
         <Link
           to="/blog"
           className={clsx(
-            "text-refine-react-5 dark:text-refine-react-4",
+            "text-zinc-600 dark:text-zinc-400",
             "text-sm no-underline",
             "flex",
             "items-center",
@@ -72,7 +72,7 @@ export const BlogPostPageView = ({ children }) => {
           <ChevronLeft /> Back to blog
         </Link>
         <div className="flex items-center gap-3 px-2 py-1 not-prose">
-          <span className="text-refine-react-5 dark:text-refine-react-4 text-sm">
+          <span className="text-zinc-600 dark:text-zinc-400 text-sm">
             Share on
           </span>
           <TwitterShareButton
@@ -119,14 +119,14 @@ export const BlogPostPageView = ({ children }) => {
         <div className="mt-6 blog-lg:mt-10 mb-6 text-sm">
           <div
             className={clsx(
-              "flex items-center gap-2 text-refine-reac-5 dark:text-refine-react-4 not-prose",
+              "flex items-center gap-2 text-zinc-600 dark:text-zinc-400 not-prose",
               "ml-4 blog-md:ml-0",
             )}
           >
             <Date date={date} formattedDate={formattedDate} />
             {typeof readingTime !== "undefined" && (
               <>
-                <span className="w-[4px] h-[4px] rounded-full bg-refine-reac-5 dark:bg-refine-react-4 " />
+                <span className="w-[4px] h-[4px] rounded-full bg-zinc-600 dark:bg-zinc-400 " />
                 <ReadingTime readingTime={readingTime} />
               </>
             )}

documentation/src/components/blog/featured-blog-post-item/index.js

@@ -50,8 +50,8 @@ export const FeaturedBlogPostItem = () => {
             <Link
               className={clsx(
                 "text-xs",
-                "bg-refine-react-3 dark:bg-refine-react-7",
-                "text-refine-react-8 dark:text-refine-react-3",
+                "bg-zinc-200 dark:bg-zinc-700",
+                "text-zinc-900 dark:text-zinc-300",
                 "no-underline",
                 "rounded-full",
                 "px-2 py-1",
@@ -73,7 +73,7 @@ export const FeaturedBlogPostItem = () => {
             <div
               className={clsx(
                 "mb-4",
-                "text-gray-700 dark:text-refine-react-3",
+                "text-zinc-700 dark:text-zinc-300",
                 "text-xl",
                 "font-lg",
                 "font-bold",
@@ -85,7 +85,7 @@ export const FeaturedBlogPostItem = () => {
           <div
             className={clsx(
               "line-clamp-3",
-              "text-gray-700 dark:text-refine-react-4",
+              "text-zinc-700 dark:text-zinc-400",
               "text-sm",
             )}
           >
@@ -96,7 +96,7 @@ export const FeaturedBlogPostItem = () => {
         <div className="flex items-center gap-2">
           <span
             className={clsx(
-              "text-gray-600 dark:text-refine-react-5",
+              "text-zinc-600 dark:text-zinc-500",
               "text-xs",
               "leading-6",
               "no-underline",

documentation/src/components/blog/featured-blog-post-items/index.js

@@ -6,12 +6,7 @@ import clsx from "clsx";
 
 export const FeaturedBlogPostItems = ({ items }) => {
   return (
-    <div
-      className={clsx(
-        "w-screen",
-        "bg-refine-react-1 dark:bg-refine-react-dark-code",
-      )}
-    >
+    <div className={clsx("w-screen", "bg-zinc-100 dark:bg-zinc-900")}>
       <div
         className={clsx(
           "blog-sm:max-w-[592px]",

documentation/src/components/blog/icons.tsx

@@ -74,7 +74,7 @@ export const Twitter = (props: React.SVGProps<SVGSVGElement>): JSX.Element => (
       height={24}
       fill="currentColor"
       rx={12}
-      className={clsx("text-refine-react-1 dark:text-black", props.className)}
+      className={clsx("text-zinc-100 dark:text-black", props.className)}
     />
     <path
       fill="currentColor"

documentation/src/components/blog/tags/index.js

@@ -17,8 +17,8 @@ export const Tags = () => {
             "rounded-full",
             "py-1",
             "px-3",
-            "text-refine-react-8 dark:text-refine-react-3",
-            "bg-refine-react-3 dark:bg-refine-react-7",
+            "text-zinc-900 dark:text-zinc-300",
+            "bg-zinc-200 dark:bg-zinc-700",
             "whitespace-nowrap",
           )}
           key={tag.permalink}

documentation/src/components/integrations/card/index.tsx

@@ -25,7 +25,7 @@ const Card: React.FC<LargeCardProps> = ({
         "flex gap-4 sm:gap-8",
         "no-underline",
         "p-4 sm:p-8",
-        "border border-gray-200 dark:border-gray-700",
+        "border border-zinc-200 dark:border-zinc-700",
         "rounded-2xl",
       )}
       rel="noreferrer"
@@ -36,13 +36,13 @@ const Card: React.FC<LargeCardProps> = ({
 
       <div className={clsx("flex flex-col gap-2")}>
         <div
-          className={clsx("text-gray-700 dark:text-gray-200", "font-semibold")}
+          className={clsx("text-zinc-700 dark:text-zinc-200", "font-semibold")}
         >
           {title}
         </div>
         <div
           className={clsx(
-            "text-gray-600 dark:text-gray-300",
+            "text-zinc-600 dark:text-zinc-300",
             "text-xs sm:text-sm",
           )}
           // biome-ignore lint/security/noDangerouslySetInnerHtml: explicitly disabled
@@ -75,7 +75,7 @@ const Card: React.FC<LargeCardProps> = ({
                       fill="#FF4C4D"
                     />
                   </svg>
-                  <span className={clsx("text-gray-500")}>by</span>
+                  <span className={clsx("text-zinc-500")}>by</span>
                   <span className={clsx("underline")}>{contributor.name}</span>
                 </a>
               );

documentation/src/pages/integrations/index.tsx

@@ -14,7 +14,7 @@ const Title = ({
     <div
       className={clsx(
         "font-semibold",
-        "text-gray-700 dark:text-gray-200",
+        "text-zinc-700 dark:text-zinc-200",
         "text-base sm:text-2xl",
         className,
       )}
@@ -74,7 +74,7 @@ const Integrations: React.FC = () => {
         <div
           className={clsx(
             "font-semibold",
-            "text-gray-700 dark:text-gray-200",
+            "text-zinc-700 dark:text-zinc-200",
             "text-xl sm:text-[40px] sm:leading-[56px]",
           )}
         >
@@ -83,7 +83,7 @@ const Integrations: React.FC = () => {
         <div
           className={clsx(
             "font-semibold",
-            "text-gray-700 dark:text-gray-300",
+            "text-zinc-700 dark:text-zinc-300",
             "text-xs sm:text-base",
             "mt-4 sm:mt-8",
           )}
@@ -96,7 +96,7 @@ const Integrations: React.FC = () => {
       <div
         className={clsx(
           "my-10",
-          "border-b border-gray-200 dark:border-gray-700",
+          "border-b border-zinc-200 dark:border-zinc-700",
         )}
       />
 

documentation/src/pages/templates/index.tsx

@@ -152,7 +152,7 @@ const Templates: React.FC = () => {
                   className={clsx(
                     "text-base",
                     "font-semibold",
-                    "dark:text-gray-300 text-gray-900",
+                    "dark:text-zinc-300 text-zinc-900",
                     "pl-4",
                   )}
                 >

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

@@ -12,7 +12,7 @@ export const BlogHero: FC<Props> = ({ className }) => {
         "landing-md:mx-auto",
         "w-full",
         "pt-4 blog-md:pt-12 pb-16 px-6",
-        "bg-white dark:bg-refine-react-8",
+        "bg-white dark:bg-zinc-900",
         className,
       )}
     >

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

@@ -34,7 +34,7 @@ export const RefineBlogLayout = (props: Props) => {
   return (
     <CommonLayout
       {...layoutProps}
-      className={clsx("bg-white dark:bg-refine-react-8")}
+      className={clsx("bg-white dark:bg-zinc-900")}
     >
       {/* If there's TOC, then we can say that this is a blog post page. */}
       {/* Then we can pass `trackProgress` prop to the header. */}