feat(docs): update colors

Author: alicanerdurmaz

documentation/docs/advanced-tutorials/auth/auth0.md

@@ -97,7 +97,7 @@ export const Login: React.FC = () => {
 
 After clicking the `Login` button, you will be directed to the auth0 login screen.
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/auth0/auth0-login-min.gif" className="border border-gray-200 rounded" alt="auth0-login" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/auth0/auth0-login-min.gif" className="border border-zinc-200 rounded" alt="auth0-login" />
 
 ## Auth Provider
 

documentation/docs/advanced-tutorials/web3/ethereum-signin.md

@@ -194,7 +194,7 @@ export const Login: React.FC = () => {
 </p>
 </details>
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/web3/login-min.gif" alt="ethereum-login" className="border border-gray-200 rounded" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/web3/login-min.gif" alt="ethereum-login" className="border border-zinc-200 rounded" />
 
 ## Create Dashboard
 
@@ -258,7 +258,7 @@ export const DashboardPage: React.FC = () => {
 </p>
 </details>
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/web3/dashboard.jpg" alt="refine-dashboard" className="border border-gray-200 rounded" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/web3/dashboard.jpg" alt="refine-dashboard" className="border border-zinc-200 rounded" />
 
 Now lets customize **Refine** dashboard. Send your test ethereum via **Refine** dashboard and Metamask.
 
@@ -411,11 +411,11 @@ export const DashboardPage: React.FC = () => {
 </p>
 </details>
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/web3/customize.jpg" alt="refine-customize" className="border border-gray-200 rounded" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/web3/customize.jpg" alt="refine-customize" className="border border-zinc-200 rounded" />
 
 We can now request to send ethereum through our **Refine** dashboard and also view your account details on [Etherscan Ropsten Test Network](https://ropsten.etherscan.io/)
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/web3/overview-min.gif" alt="refine-overview" className="border border-gray-200 rounded" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/web3/overview-min.gif" alt="refine-overview" className="border border-zinc-200 rounded" />
 
 ## Example
 

documentation/docs/data/packages/supabase/index.md

@@ -1370,7 +1370,7 @@ You will find the Google Auth option in the Auth providers section; enable it an
 
 Here is the result:
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/data-provider/supabase/social-login-min.gif" className="border border-gray-200 rounded" alt="socialLogin" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/data-provider/supabase/social-login-min.gif" className="border border-zinc-200 rounded" alt="socialLogin" />
 
 ## Let's recap what we have done so far
 
@@ -1423,7 +1423,7 @@ For live features to work automatically, we set `liveMode: "auto"` in the option
 
 ### Let see how real-time feature works in the app
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/data-provider/supabase/real-time-min.gif" className="border border-gray-200 rounded" alt="realTime" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/data-provider/supabase/real-time-min.gif" className="border border-zinc-200 rounded" alt="realTime" />
 
 :::tip
 

documentation/docs/getting-started/quickstart.md

@@ -20,7 +20,7 @@ npm create refine-app@latest
 ```
 
 <figure>
-   <img className="w-full rounded-lg border border-solid border-gray-200 dark:border-gray-700" src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/refine-vite-mui-rest-auth-screenshot.webp" alt="Example result" />
+   <img className="w-full rounded-lg border border-solid border-zinc-200 dark:border-zinc-700" src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/refine-vite-mui-rest-auth-screenshot.webp" alt="Example result" />
     <figcaption className="text-center">A Refine app created with CLI using Vite + Material UI + REST API + Custom Auth Provider</figcaption>
 </figure>
 

documentation/src/refine-theme/ai-landing-join-the-waitlist-cta.tsx

@@ -17,8 +17,8 @@ export const JoinWaitlist = ({ className }: { className?: string }) => {
           "border-none",
           "no-underline",
           "cursor-pointer",
-          "dark:bg-orange-500 bg-refine-indigo",
-          "dark:text-white text-white",
+          "dark:bg-refine-green-alt bg-refine-indigo",
+          "dark:text-gray-900 text-white",
           "rounded-full",
           "w-max",
           "min-h-12",

documentation/src/refine-theme/common-codeblock-string.tsx

@@ -97,12 +97,9 @@ export const CodeBlockString = ({
       className={clsx(
         "refine-common-code-block",
         language && `language-${language}`,
-        "rounded-lg",
+        "rounded-xl",
         "bg-refine-react-light-code",
         "dark:bg-refine-react-dark-code",
-        "border",
-        "border-gray-300",
-        "dark:border-0",
         "mb-6",
         "relative",
         "refine-wider-container",

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

@@ -17,7 +17,7 @@ export const CommonDetails = (props) => {
       className={clsx(
         props.className,
         "refine-details",
-        "border dark:border-gray-700 border-gray-300",
+        "border dark:border-zinc-700 border-zinc-200",
         "rounded-lg",
         "overflow-hidden",
         "mb-4",

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

@@ -61,7 +61,7 @@ export const CommonHeader = ({
             "landing-md:backdrop-blur-[12px]",
             "z-[-1]",
             !isLanding &&
-              "bg-gray-0 bg-opacity-80 dark:bg-zinc-900 dark:bg-opacity-80",
+              "bg-white bg-opacity-80 dark:bg-zinc-900 dark:bg-opacity-80",
             isLanding && "bg-zinc-900 bg-opacity-80",
             "pointer-events-none",
             className,
@@ -92,17 +92,17 @@ export const CommonHeader = ({
               <Link to="/" onContextMenu={openFigma}>
                 <RefineCoreLogoIcon
                   className={clsx(
-                    !isLanding && "text-gray-900 dark:text-gray-0",
-                    isLanding && "text-gray-0",
+                    !isLanding && "text-zinc-900 dark:text-white",
+                    isLanding && "text-white",
                   )}
                 />
               </Link>
             </div>
             <button
               type="button"
               className={clsx(
-                !isLanding && "text-gray-900 dark:text-gray-0",
-                isLanding && "text-gray-0",
+                !isLanding && "text-zinc-900 dark:text-white",
+                isLanding && "text-white",
                 "block landing-md:hidden",
               )}
               onClick={() => setIsModalOpen(true)}
@@ -226,8 +226,8 @@ const NavLinksDesktop = ({
             className={clsx(
               "whitespace-nowrap",
               !isLanding &&
-                "text-gray-900 dark:text-gray-0 hover:text-gray-900 dark:hover:text-gray-0",
-              isLanding && "text-gray-0 hover:text-gray-0",
+                "text-zinc-900 dark:text-white hover:text-zinc-900 dark:hover:text-white",
+              isLanding && "text-white hover:text-white",
               "hover:no-underline",
               "transition-colors",
             )}
@@ -240,7 +240,7 @@ const NavLinksDesktop = ({
         className={clsx(
           "h-6",
           "w-[1px]",
-          !isLanding && "bg-gray-300 dark:bg-zinc-600",
+          !isLanding && "bg-zinc-300 dark:bg-zinc-600",
           isLanding && "bg-zinc-600",
         )}
       />
@@ -250,8 +250,8 @@ const NavLinksDesktop = ({
         className={clsx(
           "whitespace-nowrap",
           !isLanding &&
-            "text-gray-900 dark:text-gray-0 hover:text-gray-900 dark:hover:text-gray-0",
-          isLanding && "text-gray-0 hover:text-gray-0",
+            "text-zinc-900 dark:text-white hover:text-zinc-900 dark:hover:text-white",
+          isLanding && "text-white hover:text-white",
           "hover:no-underline",
           "transition-colors",
         )}
@@ -295,7 +295,7 @@ const MobileMenuModal = ({
         "fixed",
         "inset-0",
         "z-[999]",
-        !isLanding && "bg-gray-0 dark:bg-zinc-900",
+        !isLanding && "bg-white dark:bg-zinc-900",
         isLanding && "bg-zinc-900",
         "flex",
         "flex-col",
@@ -310,15 +310,15 @@ const MobileMenuModal = ({
           "px-4",
           "h-16",
           "border-b",
-          !isLanding && "border-gray-200 dark:border-zinc-700",
+          !isLanding && "border-zinc-200 dark:border-zinc-700",
           isLanding && "border-zinc-700",
         )}
       >
         <Link to="/" onClick={onClose}>
           <RefineCoreLogoIcon
             className={clsx(
-              !isLanding && "text-gray-900 dark:text-white",
-              isLanding && "text-gray-0",
+              !isLanding && "text-zinc-900 dark:text-white",
+              isLanding && "text-white",
             )}
           />
         </Link>
@@ -329,8 +329,8 @@ const MobileMenuModal = ({
             "flex",
             "items-center",
             "gap-2",
-            !isLanding && "text-gray-900 dark:text-white",
-            isLanding && "text-gray-0",
+            !isLanding && "text-zinc-900 dark:text-white",
+            isLanding && "text-white",
             "text-sm",
             "font-normal",
           )}
@@ -378,9 +378,9 @@ const MobileMenuModal = ({
                 "px-4",
                 "py-3.5",
                 !isLanding &&
-                  "bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 rounded-lg text-gray-900 dark:text-white",
+                  "bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-lg text-zinc-900 dark:text-white",
                 isLanding &&
-                  "bg-zinc-800 hover:bg-zinc-700 rounded-lg text-gray-0",
+                  "bg-zinc-800 hover:bg-zinc-700 rounded-lg text-white",
                 "text-sm",
                 "font-normal",
                 "hover:no-underline",
@@ -396,7 +396,7 @@ const MobileMenuModal = ({
         <div
           className={clsx(
             "h-[1px]",
-            !isLanding && "bg-gray-200 dark:bg-zinc-700",
+            !isLanding && "bg-zinc-200 dark:bg-zinc-700",
             isLanding && "bg-zinc-700",
             "my-6",
           )}
@@ -415,8 +415,8 @@ const MobileMenuModal = ({
             "px-4",
             "py-3.5",
             !isLanding &&
-              "bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 rounded-lg text-gray-900 dark:text-white",
-            isLanding && "bg-zinc-800 hover:bg-zinc-700 rounded-lg text-gray-0",
+              "bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-lg text-zinc-900 dark:text-white",
+            isLanding && "bg-zinc-800 hover:bg-zinc-700 rounded-lg text-white",
             "text-sm",
             "font-normal",
             "hover:no-underline",
@@ -434,7 +434,7 @@ const MobileMenuModal = ({
           "py-6",
           "border-t",
           !isLanding &&
-            "border-gray-200 dark:border-zinc-700 bg-gray-50 dark:bg-black",
+            "border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-black",
           isLanding && "border-zinc-700 bg-black",
         )}
       >
@@ -444,8 +444,8 @@ const MobileMenuModal = ({
             <div
               className={clsx(
                 "ml-4",
-                !isLanding && "text-gray-900 dark:text-white",
-                isLanding && "text-gray-0",
+                !isLanding && "text-zinc-900 dark:text-white",
+                isLanding && "text-white",
               )}
             >
               If you like Refine, don’t forget to star us on GitHub!

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

@@ -44,7 +44,7 @@ export const CommonLayout = (props: Props) => {
           "main-wrapper",
           "min-h-[100dvh]",
           "flex flex-col",
-          "dark:bg-zinc-900 bg-gray-0",
+          "dark:bg-zinc-900 bg-white",
           className,
         )}
       >

documentation/src/refine-theme/common-show-source-prompt.tsx

@@ -18,12 +18,12 @@ export const CommonShowSourcePrompt = ({ path }: Props) => {
         "flex items-center",
         "gap-2",
         "rounded-lg",
-        "dark:bg-gray-700",
-        "bg-gray-100",
+        "dark:bg-zinc-950",
+        "bg-zinc-50",
         "mb-6",
       )}
     >
-      <GithubIcon className="ml-1.5 w-5 h-5 text-gray-800 dark:text-gray-100" />
+      <GithubIcon className="ml-1.5 w-5 h-5 text-zinc-900 dark:text-white" />
       <a
         href={path}
         target="_blank"