diff --git a/documentation/blog/2025-09-18-refine-v5-blog.md b/documentation/blog/2025-09-18-refine-v5-blog.md index b9b6f6d05ecba..7a920f42b64a2 100644 --- a/documentation/blog/2025-09-18-refine-v5-blog.md +++ b/documentation/blog/2025-09-18-refine-v5-blog.md @@ -1,6 +1,6 @@ --- -title: Refine v5 is here! -description: Refine v5 brings React 19 support, TanStack Query v5, cleaner APIs, and automatic migration with codemods. +title: Refine CORE v5 is here! +description: Refine CORE v5 brings React 19 support, TanStack Query v5, cleaner APIs, and automatic migration with codemods. slug: refine-v5-announcement authors: ozgur tags: [refine, react, announcement] diff --git a/documentation/blog/2025-11-17-supabase-tutorial.md b/documentation/blog/2025-11-17-supabase-tutorial.md index 1f24b6295c9ff..c2f578c962e66 100644 --- a/documentation/blog/2025-11-17-supabase-tutorial.md +++ b/documentation/blog/2025-11-17-supabase-tutorial.md @@ -190,7 +190,10 @@ If you see `ERROR: 42P01: relation "public.employees" does not exist`: ::: :::tip No results or NULL department values? -`LEFT JOIN` will keep employees visible even when `department_id` isn’t set yet. To see department names, edit the employee and paste the UUID of the correct department into `department_id`. + +`LEFT JOIN` will keep employees visible even when `department_id` isn’t set yet. To see department names, edit the employee and paste the UUID of the +correct department into `department_id`. + ::: ## This flexibility means you can build relational structures that Refine AI (or any frontend) can use directly. diff --git a/documentation/docs/advanced-tutorials/auth/auth0.md b/documentation/docs/advanced-tutorials/auth/auth0.md index e577557ab8af1..761d9820793e8 100644 --- a/documentation/docs/advanced-tutorials/auth/auth0.md +++ b/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. -auth0-login +auth0-login ## Auth Provider diff --git a/documentation/docs/advanced-tutorials/web3/ethereum-signin.md b/documentation/docs/advanced-tutorials/web3/ethereum-signin.md index ccf2da4f245fa..b4c82d1ada87e 100644 --- a/documentation/docs/advanced-tutorials/web3/ethereum-signin.md +++ b/documentation/docs/advanced-tutorials/web3/ethereum-signin.md @@ -194,7 +194,7 @@ export const Login: React.FC = () => {

-ethereum-login +ethereum-login ## Create Dashboard @@ -258,7 +258,7 @@ export const DashboardPage: React.FC = () => {

-refine-dashboard +refine-dashboard Now lets customize **Refine** dashboard. Send your test ethereum via **Refine** dashboard and Metamask. @@ -411,11 +411,11 @@ export const DashboardPage: React.FC = () => {

-refine-customize +refine-customize 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/) -refine-overview +refine-overview ## Example diff --git a/documentation/docs/data/packages/supabase/index.md b/documentation/docs/data/packages/supabase/index.md index 492b6a7c947c0..bc890cb109fa3 100644 --- a/documentation/docs/data/packages/supabase/index.md +++ b/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: -socialLogin +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 -realTime +realTime :::tip diff --git a/documentation/docs/getting-started/quickstart.md b/documentation/docs/getting-started/quickstart.md index c6541d2e9aafc..361510dc6a1bd 100644 --- a/documentation/docs/getting-started/quickstart.md +++ b/documentation/docs/getting-started/quickstart.md @@ -20,7 +20,7 @@ npm create refine-app@latest ```
- Example result + Example result
A Refine app created with CLI using Vite + Material UI + REST API + Custom Auth Provider
diff --git a/documentation/sidebars.js b/documentation/sidebars.js index 682c97bce60d4..3c6c8ea1ca8b0 100644 --- a/documentation/sidebars.js +++ b/documentation/sidebars.js @@ -36,7 +36,7 @@ module.exports = { { type: "link", href: "/docs/migration-guide/4x-to-5x/", - label: "Refine v5 is here! 🎉", + label: "Refine CORE v5 is here!", className: "enterprise-badge", }, { diff --git a/documentation/src/assets/integration-icons/entrefine.tsx b/documentation/src/assets/integration-icons/entrefine.tsx index e1ea73a83543e..a42806db5920e 100644 --- a/documentation/src/assets/integration-icons/entrefine.tsx +++ b/documentation/src/assets/integration-icons/entrefine.tsx @@ -1,3 +1,4 @@ +import clsx from "clsx"; import * as React from "react"; import type { SVGProps } from "react"; @@ -9,22 +10,20 @@ const SvgEntRefine = (props: SVGProps) => ( viewBox="0 0 48 48" fill="none" {...props} + className={clsx("text-gray-1000 dark:text-gray-0", props.className)} > diff --git a/documentation/src/assets/integration-icons/headless.tsx b/documentation/src/assets/integration-icons/headless.tsx index 817fe3612e1f9..77c8786f25852 100644 --- a/documentation/src/assets/integration-icons/headless.tsx +++ b/documentation/src/assets/integration-icons/headless.tsx @@ -1,3 +1,4 @@ +import clsx from "clsx"; import * as React from "react"; import type { SVGProps } from "react"; @@ -12,9 +13,12 @@ const SvgHeadless = ({ viewBox="0 0 48 48" fill="none" {...props} + className={clsx( + withBrandColor ? "text-gray-800 dark:text-gray-0" : "inherit", + props.className, + )} > diff --git a/documentation/src/assets/integration-icons/rest-without-text.tsx b/documentation/src/assets/integration-icons/rest-without-text.tsx index a4cb631482f2b..5b5f3a1a18b6c 100644 --- a/documentation/src/assets/integration-icons/rest-without-text.tsx +++ b/documentation/src/assets/integration-icons/rest-without-text.tsx @@ -13,7 +13,7 @@ const SvgRestWithoutText = ({ viewBox="0 0 16 14" fill="none" {...props} - className={clsx("dark:text-gray-100 text-[#273646]", className)} + className={clsx("text-zinc-500 dark:text-white", className)} > { const { metadata, isBlogPostPage } = useBlogPost(); @@ -62,18 +65,20 @@ export const BlogPostPageView = ({ children }) => { - Back to blog + + Back to blog -
- - Share on +
+ + Share on: { title={title} hashtags={tags.map((tag) => tag.label)} > - +
+ +
{ url={url + permalink} title={title} > - +
+ +
{ summary={description} className="flex" > - +
+ +
@@ -119,14 +163,14 @@ export const BlogPostPageView = ({ children }) => {
{typeof readingTime !== "undefined" && ( <> - + )} diff --git a/documentation/src/components/blog/featured-blog-post-item/index.js b/documentation/src/components/blog/featured-blog-post-item/index.js index 2cc53613fffa6..f16b6a95663d3 100644 --- a/documentation/src/components/blog/featured-blog-post-item/index.js +++ b/documentation/src/components/blog/featured-blog-post-item/index.js @@ -19,11 +19,11 @@ export const FeaturedBlogPostItem = () => { } = metadata; return ( - +
{ )}?h=668`} alt={title} className={clsx( - "absolute inset-0 mt-0 h-full w-full rounded-[10px] object-cover", + "absolute inset-0 mt-0 h-full w-full rounded-[0.25rem] object-cover", )} loading="lazy" />
-
-
- {tags.map((tag) => ( - - {tag.label} - - ))} +
+
+ {tags.map((tag) => { + const shouldUppercase = tag.label.length <= 3; + const isRefineTag = + tag.label.toLowerCase() === "refine" || + tag.label.toLowerCase() === "refine-core" || + "refine core"; + + return ( + + {tag.label} + + ); + })}
{
{title} @@ -85,8 +97,9 @@ export const FeaturedBlogPostItem = () => {
{description} @@ -96,7 +109,7 @@ export const FeaturedBlogPostItem = () => {
{ return ( -
+
{ "px-6", "mb-6 blog-lg:mb-12", "text-2xl blog-sm:text-[32px] blog-sm:leading-10", - "dark:text-refine-cyan-alt dark:drop-shadow-[0_0_30px_rgba(71,235,235,0.25)]", - "text-refine-blue drop-shadow-[0_0_30px_rgba(51,51,255,0.3)]", - "font-semibold", + "text-white", + "font-medium", )} > Featured Posts @@ -42,7 +36,7 @@ export const FeaturedBlogPostItems = ({ items }) => {
{items.map(({ content: BlogPostContent }) => ( diff --git a/documentation/src/components/blog/icons.tsx b/documentation/src/components/blog/icons.tsx index 159e5a8c72c84..96b51ea3a118f 100644 --- a/documentation/src/components/blog/icons.tsx +++ b/documentation/src/components/blog/icons.tsx @@ -5,38 +5,67 @@ export const ChevronLeft = ( props: React.SVGProps, ): JSX.Element => ( ); +export const ChevronLeftCircle = ( + props: React.SVGProps, +): JSX.Element => ( + + + + + + + + + + +); + export const ChevronRight = ( props: React.SVGProps, ): JSX.Element => ( ); @@ -59,45 +88,70 @@ export const Github = (props: React.SVGProps): JSX.Element => ( ); -export const Twitter = (props: React.SVGProps): JSX.Element => ( +export const TwitterIcon = ( + props: React.SVGProps, +): JSX.Element => ( - Twitter - + + + + ); -export const Linkedin = (props: React.SVGProps): JSX.Element => ( +export const LinkedinIcon = ( + props: React.SVGProps, +): JSX.Element => ( - LinkedIn - + +); + +export const RedditIcon = ( + props: React.SVGProps, +): JSX.Element => ( + + ); diff --git a/documentation/src/components/blog/post-paginator/index.js b/documentation/src/components/blog/post-paginator/index.js index ccf22c5c02a77..e6d63a6b93880 100644 --- a/documentation/src/components/blog/post-paginator/index.js +++ b/documentation/src/components/blog/post-paginator/index.js @@ -22,7 +22,7 @@ export const PostPaginator = ({ posts, title }) => { )} >
-

+

{title}

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

{post.description}

diff --git a/documentation/src/components/blog/tags/index.js b/documentation/src/components/blog/tags/index.js index 612bcbd8c487a..835ea68c20bfa 100644 --- a/documentation/src/components/blog/tags/index.js +++ b/documentation/src/components/blog/tags/index.js @@ -8,24 +8,36 @@ export const Tags = () => { return (
- {metadata.tags.map((tag) => ( - - {tag.label} - - ))} + {metadata.tags.map((tag) => { + const shouldUppercase = tag.label.length <= 3; + const isRefineTag = + tag.label.toLowerCase() === "refine" || + tag.label.toLowerCase() === "refine-core" || + tag.label.toLowerCase() === "refine core"; + + return ( + + {tag.label} + + ); + })}
); }; diff --git a/documentation/src/components/browser-window/index.tsx b/documentation/src/components/browser-window/index.tsx index e52ab5386e7a3..f148d45f7fedb 100644 --- a/documentation/src/components/browser-window/index.tsx +++ b/documentation/src/components/browser-window/index.tsx @@ -31,23 +31,24 @@ export default function BrowserWindow({ "refine-live-preview-browser-window", "flex", "flex-col", + "gap-1", "h-full", + "rounded-t-lg", + "p-1", + "bg-zinc-200 dark:bg-zinc-800", )} >
@@ -59,15 +60,24 @@ export default function BrowserWindow({ className={clsx( "flex-1", "overflow-hidden", - "bg-gray-100 dark:bg-gray-700", - "border border-gray-300 dark:border-gray-700", + "rounded", + "bg-zinc-50 dark:bg-zinc-950", + "p-0.5", !hasBottom && "rounded-bl-lg rounded-br-lg", - hasBottom && "border-b-gray-300 dark:border-b-gray-900", - hasBottom && "border-b", )} - style={{ minHeight }} > - {children} +
+ {children} +
); diff --git a/documentation/src/components/info-badge/index.tsx b/documentation/src/components/info-badge/index.tsx index be2a7fc361853..3149cad2b2375 100644 --- a/documentation/src/components/info-badge/index.tsx +++ b/documentation/src/components/info-badge/index.tsx @@ -6,7 +6,7 @@ import { BadgeTooltip } from "../badge-tooltip"; type Props = { id: string; icon: React.ReactNode; - color: "orange" | "green" | "purple"; + color: "orange" | "green" | "purple" | "blue" | "gray"; text?: string; description: React.ReactNode; }; @@ -15,22 +15,23 @@ export const InfoBadge = ({ id, icon, color, text, description }: Props) => { const classes = clsx( color === "orange" && clsx( - "bg-refine-react-light-orange-bg dark:bg-refine-react-dark-orange", - "dark:bg-opacity-[0.15]", - "text-refine-react-light-orange dark:text-refine-react-dark-orange", + "bg-orange-100 dark:bg-orange-950", + "text-orange-700 dark:text-orange-300", ), color === "green" && clsx( - "bg-refine-react-light-green-bg dark:bg-refine-react-dark-green", - "dark:bg-opacity-[0.15]", - "text-refine-react-light-green dark:text-refine-react-dark-green", + "bg-emerald-100 dark:bg-emerald-950", + "text-emerald-700 dark:text-emerald-300", ), color === "purple" && clsx( - "bg-refine-react-light-purple-bg dark:bg-refine-react-dark-purple", - "dark:bg-opacity-[0.15]", - "text-refine-react-light-purple dark:text-refine-react-dark-purple", + "bg-purple-100 dark:bg-purple-950", + "text-purple-700 dark:text-purple-300", ), + color === "blue" && + clsx("bg-blue-100 dark:bg-blue-950", "text-blue-700 dark:text-blue-300"), + color === "gray" && + clsx("bg-zinc-200 dark:bg-zinc-800", "text-zinc-900 dark:text-zinc-300"), ); return ( @@ -39,14 +40,16 @@ export const InfoBadge = ({ id, icon, color, text, description }: Props) => { to={`/docs/${id}`} className={clsx( "-mt-px", - // "mr-1.5", - "rounded-[10px]", + "mr-1.5", + "rounded-lg", "inline-flex", "items-center", "justify-center", "text-sm", "no-underline", "gap-1.5", + "h-8", + "w-8", "[&>svg]:hover:scale-110", "[&>svg]:transition-transform [&>svg]:duration-200 [&>svg]:ease-in-out", classes, diff --git a/documentation/src/components/integrations/card/index.tsx b/documentation/src/components/integrations/card/index.tsx index 00a4834ea4b8f..69807679b6fe2 100644 --- a/documentation/src/components/integrations/card/index.tsx +++ b/documentation/src/components/integrations/card/index.tsx @@ -25,26 +25,19 @@ const Card: React.FC = ({ "flex gap-4 sm:gap-8", "no-underline", "p-4 sm:p-8", - "border border-gray-200 dark:border-gray-700", + "border border-zinc-700", "rounded-2xl", )} rel="noreferrer" >
- +
+
{title}
- {title} -
-
@@ -75,8 +68,10 @@ const Card: React.FC = ({ fill="#FF4C4D" /> - by - {contributor.name} + by + + {contributor.name} + ); })} diff --git a/documentation/src/components/integrations/layout/index.tsx b/documentation/src/components/integrations/layout/index.tsx index 76f0f55ab242f..79397571448b7 100644 --- a/documentation/src/components/integrations/layout/index.tsx +++ b/documentation/src/components/integrations/layout/index.tsx @@ -7,12 +7,12 @@ import { BlogFooter } from "@site/src/refine-theme/blog-footer"; const IntegrationsLayout = ({ children }: React.PropsWithChildren<{}>) => { return ( - +
- +
{children}
diff --git a/documentation/src/components/landing/icons/access-control-icon.tsx b/documentation/src/components/landing/icons/access-control-icon.tsx index 21b0a0b1dc93b..e2e890f039284 100644 --- a/documentation/src/components/landing/icons/access-control-icon.tsx +++ b/documentation/src/components/landing/icons/access-control-icon.tsx @@ -4,61 +4,20 @@ import type { SVGProps } from "react"; export const AccessControlIcon = (props: SVGProps) => ( - - - - - - - - - - - - - ); diff --git a/documentation/src/components/landing/icons/black-box-icon.tsx b/documentation/src/components/landing/icons/black-box-icon.tsx index d21ecbe90e984..273171a48b1b5 100644 --- a/documentation/src/components/landing/icons/black-box-icon.tsx +++ b/documentation/src/components/landing/icons/black-box-icon.tsx @@ -7,60 +7,19 @@ export const BlackBoxIcon = (props: SVGProps) => ( xmlns="http://www.w3.org/2000/svg" width={64} height={64} - viewBox="0 0 64 64" fill="none" {...props} - className={clsx( - props.className, - "dark:text-refine-purple-alt text-refine-purple", - )} > - - - - - - - - - - - - - ); diff --git a/documentation/src/components/landing/icons/identity-icon.tsx b/documentation/src/components/landing/icons/identity-icon.tsx index aee6518b7380d..82e02206437f7 100644 --- a/documentation/src/components/landing/icons/identity-icon.tsx +++ b/documentation/src/components/landing/icons/identity-icon.tsx @@ -1,64 +1,27 @@ +import { useThemeConfig } from "@docusaurus/theme-common"; import clsx from "clsx"; import * as React from "react"; import type { SVGProps } from "react"; -export const IdentityIcon = (props: SVGProps) => ( - - ) => { + return ( + - - - - - - - - - - - - - - -); + fill="none" + {...props} + className={clsx(props.className)} + > + + + + ); +}; diff --git a/documentation/src/components/landing/icons/monitor-icon.tsx b/documentation/src/components/landing/icons/monitor-icon.tsx index 00311ddaffaaf..cc45149506e97 100644 --- a/documentation/src/components/landing/icons/monitor-icon.tsx +++ b/documentation/src/components/landing/icons/monitor-icon.tsx @@ -7,55 +7,17 @@ export const MonitorIcon = (props: SVGProps) => ( xmlns="http://www.w3.org/2000/svg" width={64} height={64} - viewBox="0 0 64 64" fill="none" {...props} - className={clsx(props.className, "text-refine-red")} > - - - - - - - - - - - - - ); diff --git a/documentation/src/components/landing/icons/self-hosted-icon.tsx b/documentation/src/components/landing/icons/self-hosted-icon.tsx index cf2ce1441f9ac..993d0d149bc53 100644 --- a/documentation/src/components/landing/icons/self-hosted-icon.tsx +++ b/documentation/src/components/landing/icons/self-hosted-icon.tsx @@ -7,61 +7,20 @@ export const SelfHostedIcon = (props: SVGProps) => ( xmlns="http://www.w3.org/2000/svg" width={64} height={64} - viewBox="0 0 64 64" fill="none" {...props} - className={clsx( - props.className, - "dark:text-refine-green-alt text-refine-green", - )} > - - - - - - - - - - - - - ); diff --git a/documentation/src/components/landing/icons/support-icon.tsx b/documentation/src/components/landing/icons/support-icon.tsx index ae4afa13d6eb1..3f0498105a0b3 100644 --- a/documentation/src/components/landing/icons/support-icon.tsx +++ b/documentation/src/components/landing/icons/support-icon.tsx @@ -7,58 +7,17 @@ export const SupportIcon = (props: SVGProps) => ( xmlns="http://www.w3.org/2000/svg" width={64} height={64} - viewBox="0 0 64 64" fill="none" {...props} - className={clsx( - props.className, - "dark:text-refine-yellow text-refine-orange", - )} > - - - - - - - - - - - - - ); diff --git a/documentation/src/components/landing/showcase-indicator.tsx b/documentation/src/components/landing/showcase-indicator.tsx index d063147463d8e..7bb7c475c8210 100644 --- a/documentation/src/components/landing/showcase-indicator.tsx +++ b/documentation/src/components/landing/showcase-indicator.tsx @@ -5,12 +5,14 @@ type Props = { x: string | number; y: string | number; className?: string; + dark?: boolean; }; export const ShowcaseIndicator = React.memo(function ShowcaseIndicatorBase({ x, y, className, + dark, }: Props) { return (
-
{[0, 400, 800].map((d) => (
-
+
))}
); }); + +const IndicatorSvg = ( + props: React.SVGProps & { dark?: boolean }, +) => ( + + + + +); diff --git a/documentation/src/components/landing/showcase-wrapper.tsx b/documentation/src/components/landing/showcase-wrapper.tsx index 55f24d22d6171..9ca0c14bf3ba8 100644 --- a/documentation/src/components/landing/showcase-wrapper.tsx +++ b/documentation/src/components/landing/showcase-wrapper.tsx @@ -16,12 +16,6 @@ type HighlightProps = { codeClassName?: string; overlap?: boolean; codePosition: "top" | "bottom" | "left" | "right"; -}; - -type Props = { - className?: string; - render: string; - highlights?: Array; dark?: boolean; }; @@ -35,6 +29,7 @@ const HighlightItem = React.memo(function HighlightBase({ codeClassName, codePosition, overlap, + dark, }: HighlightProps) { return (
; + dark?: boolean; +}; + export const ShowcaseWrapper = React.memo( function ShowcaseWrapperBase({ className, render, highlights, dark }: Props) { const ref = React.useRef(null); @@ -265,7 +268,7 @@ export const ShowcaseWrapper = React.memo( )} /> {highlights.map((h) => ( - + ))} )} diff --git a/documentation/src/components/live-preview/index.tsx b/documentation/src/components/live-preview/index.tsx index 821467dc6da7d..1df1ad426c211 100644 --- a/documentation/src/components/live-preview/index.tsx +++ b/documentation/src/components/live-preview/index.tsx @@ -140,7 +140,9 @@ function Editor({ hidden, code }: { hidden: boolean; code: string }) { }; return ( - <> +
- +
); } diff --git a/documentation/src/components/sandpack/index.tsx b/documentation/src/components/sandpack/index.tsx index 684ec198ecd93..2b237f74b2fbf 100644 --- a/documentation/src/components/sandpack/index.tsx +++ b/documentation/src/components/sandpack/index.tsx @@ -80,43 +80,49 @@ const SandpackBase = ({ initMode: "lazy", classes: { "sp-bridge-frame": "!hidden", - "sp-layout": "!rounded-lg !border-gray-300 dark:!border-gray-700", - "sp-editor": "!gap-0 border-r !border-r-gray-300 dark:!border-r-gray-700", + "sp-layout": "!rounded-lg !border-zinc-200 dark:!border-zinc-700", + "sp-editor": "!gap-0 border-r !border-r-zinc-200 dark:!border-r-zinc-700", "sp-tabs": - "!border-b-gray-300 dark:!border-b-gray-700 !bg-gray-0 dark:!bg-gray-800", - "sp-tabs-scrollable-container": "!min-h-[32px]", - "sp-input": "!text-gray-800 dark:!text-gray-100", + "!border-b-zinc-200 dark:!border-b-zinc-700 !bg-zinc-100 dark:!bg-zinc-900", + "sp-tabs-scrollable-container": "!min-h-[32px] !pl-8", + "sp-input": "!text-zinc-900 dark:!text-white", "sp-cm": clsx( "p-0 bg-transparent", - "[&>.cm-editor]:!bg-refine-react-light-code", - "[&>.cm-editor]:dark:!bg-refine-react-dark-code", - "[&_.cm-activeLine]:!bg-gray-100 [&_.cm-activeLine]:dark:!bg-gray-800", + "[&>.cm-editor]:!bg-white", + "[&>.cm-editor]:dark:!bg-zinc-950", + "[&_.cm-activeLine]:!bg-zinc-100 [&_.cm-activeLine]:dark:!bg-zinc-900", ), "sp-icon-standalone": - "!bg-gray-300 dark:!bg-gray-700 !text-gray-400 dark:!text-gray-500", - "sp-file-explorer": "border-r !border-r-gray-300 dark:!border-r-gray-700", + "!bg-zinc-200 dark:!bg-zinc-700 !text-zinc-700 dark:!text-zinc-400", + "sp-file-explorer": "border-r !border-r-zinc-200 dark:!border-r-zinc-700", "sp-console": clsx( "not-prose", "!border-t-0 !border !border-solid !border-t-none", - "!border-gray-300 dark:!border-gray-700", + "!border-zinc-200 dark:!border-zinc-700", "!rounded-bl-lg !rounded-br-lg", "!bg-refine-react-light-code", "dark:!bg-refine-react-dark-code", ), "sp-console-header": clsx( - "!bg-gray-0 dark:!bg-gray-800", - "border-b border-solid !border-b-gray-300 dark:!border-b-gray-700", + "!bg-zinc-200 dark:!bg-zinc-900", + "border-b border-solid !border-b-zinc-200 dark:!border-b-zinc-700", "!h-[32px] !min-h-[32px]", ), "sp-console-header-actions": clsx("h-full", "!gap-0"), "sp-console-header-button": clsx( "!bg-transparent", - "!border !border-solid !border-b-0 !border-x-gray-300 dark:!border-x-gray-700", - "!border-t-2 !border-t-transparent [&[data-active='true']]:!border-t-refine-react-light-link dark:[&[data-active='true']]:!border-t-refine-react-dark-link", + "!border !border-solid !border-b-0 !border-x-zinc-200 dark:!border-x-zinc-700", + "!border-t-2 !border-t-transparent", + "[&[data-active='true']]:!border-t-0", "h-full", - "!text-gray-800 dark:!text-gray-100", + "!text-zinc-700 dark:!text-zinc-400", + "[&[data-active='true']]:!bg-white [&[data-active='true']]:dark:!bg-zinc-950", + "[&[data-active='true']]:!text-zinc-900 [&[data-active='true']]:dark:!text-white", "!rounded-none", "-ml-px", + "[&[data-active='true']]:relative", + "[&[data-active='true']]:before:content-[''] [&[data-active='true']]:before:absolute [&[data-active='true']]:before:top-0.5 [&[data-active='true']]:before:left-0.5 [&[data-active='true']]:before:right-0.5", + "[&[data-active='true']]:before:h-[1px] [&[data-active='true']]:before:bg-refine-react-light-link [&[data-active='true']]:dark:before:bg-refine-react-dark-link", ), "sp-console-list": clsx( "!bg-refine-react-light-code", @@ -126,10 +132,16 @@ const SandpackBase = ({ "sp-tab-button": clsx( "!h-8", "!px-2 !pb-2 !pt-1.5", - "!text-gray-800 dark:!text-gray-100", - "!border !border-solid !border-b-0 !border-x-gray-300 dark:!border-x-gray-700", + "!text-zinc-700 dark:!text-zinc-400", + "!border !border-solid !border-b-0 !border-x-zinc-200 dark:!border-x-zinc-700", "-ml-px first:ml-0", - "!border-t-2 !border-t-transparent [&[data-active='true']]:!border-t-refine-react-light-link dark:[&[data-active='true']]:!border-t-refine-react-dark-link", + "!border-t-2 !border-t-transparent", + "[&[data-active='true']]:!border-t-0", + "[&[data-active='true']]:!bg-white [&[data-active='true']]:dark:!bg-zinc-950", + "[&[data-active='true']]:!text-zinc-900 [&[data-active='true']]:dark:!text-white", + "[&[data-active='true']]:relative", + "[&[data-active='true']]:before:content-[''] [&[data-active='true']]:before:absolute [&[data-active='true']]:before:top-0.5 [&[data-active='true']]:before:left-0.5 [&[data-active='true']]:before:right-0.5", + "[&[data-active='true']]:before:h-[1px] [&[data-active='true']]:before:bg-refine-react-light-link [&[data-active='true']]:dark:before:bg-refine-react-dark-link", ), }, }, diff --git a/documentation/src/css/custom.css b/documentation/src/css/custom.css index 2ab4583475926..7b439af6aa890 100644 --- a/documentation/src/css/custom.css +++ b/documentation/src/css/custom.css @@ -9,269 +9,253 @@ @tailwind components; @tailwind utilities; -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); +@import url("https://rsms.me/inter/inter.css"); @import url("https://refine.ams3.cdn.digitaloceanspaces.com/website/static/fonts/disket.css"); @layer utilities { - .animation-running { - animation-play-state: running; - } - .animation-initial { - animation-play-state: initial; - } - .animation-paused { - animation-play-state: paused; - } - .animation-slower-speed { - animation-duration: 5s; - } - .animation-slow-speed { - animation-duration: 4s; - } - .animation-normal-speed { - animation-duration: 3s; - } - .animation-fast-speed { - animation-duration: 2s; - } - .animation-faster-speed { - animation-duration: 1s; - } - .landing-mask-image-bg { - mask-image: url("../../static/assets/hero-bottom-bg.svg"); - mask-size: 1920px 288px; - mask-position: center; - } - .scrollbar-hidden { - -ms-overflow-style: none; - scrollbar-width: none; - } - .scrollbar-hidden::-webkit-scrollbar { - display: none; - } - - .landing-image-bottom-mobile-bg { - mask-image: url("../../static/assets/hero-video-bottom-mobile.svg"); - mask-size: 620px 350px; - mask-position: top; - } + .animation-running { + animation-play-state: running; + } + .animation-initial { + animation-play-state: initial; + } + .animation-paused { + animation-play-state: paused; + } + .animation-slower-speed { + animation-duration: 5s; + } + .animation-slow-speed { + animation-duration: 4s; + } + .animation-normal-speed { + animation-duration: 3s; + } + .animation-fast-speed { + animation-duration: 2s; + } + .animation-faster-speed { + animation-duration: 1s; + } + .landing-mask-image-bg { + mask-image: url("../../static/assets/hero-bottom-bg.svg"); + mask-size: 1920px 288px; + mask-position: center; + } + .scrollbar-hidden { + -ms-overflow-style: none; + scrollbar-width: none; + } + .scrollbar-hidden::-webkit-scrollbar { + display: none; + } - @screen landing-sm { - .landing-image-bottom-mobile-bg { - mask-image: url("../../static/assets/hero-video-bottom-mobile.svg"); - mask-size: 720px 316px; - mask-position: top; - } - } + .landing-image-bottom-mobile-bg { + mask-image: url("../../static/assets/hero-video-bottom-mobile.svg"); + mask-size: 620px 350px; + mask-position: top; + } - @screen landing-md { - .landing-image-bottom-mobile-bg { - mask-image: url("../../static/assets/hero-video-bottom-mobile.svg"); - mask-size: 1080px 474px; - mask-position: top; - } + @screen landing-sm { + .landing-image-bottom-mobile-bg { + mask-image: url("../../static/assets/hero-video-bottom-mobile.svg"); + mask-size: 720px 316px; + mask-position: top; } + } - .landing-wide-mask { - mask-image: linear-gradient( - 90deg, - rgba(0, 0, 0, 0) 0%, - rgba(0, 0, 0, 0) 1%, - rgba(0, 0, 0, 1) 10%, - rgba(0, 0, 0, 1) 90%, - rgba(0, 0, 0, 0) 99%, - rgba(0, 0, 0, 0) 100% - ); - mask-size: 1920px 100%; - mask-position: center; - mask-repeat: no-repeat; - } - .landing-playground-slide-mask { - mask-image: linear-gradient( - 0deg, - rgba(0, 0, 0, 0.2) 0%, - rgba(0, 0, 0, 0.4) 30%, - rgba(0, 0, 0, 1) 37.5%, - rgba(0, 0, 0, 1) 65%, - rgba(0, 0, 0, 0.4) 75.5%, - rgba(0, 0, 0, 0.2) 100% - ); - mask-size: 100% 100%; - mask-position: center; - mask-repeat: no-repeat; + @screen landing-md { + .landing-image-bottom-mobile-bg { + mask-image: url("../../static/assets/hero-video-bottom-mobile.svg"); + mask-size: 1080px 474px; + mask-position: top; } + } - .bg-landing-component-dark { - background: radial-gradient( - 66.67% 50% at 50% 0%, - rgba(108, 119, 147, 0.15) 0%, - rgba(108, 119, 147, 0) 100% - ), - radial-gradient( - 66.67% 50% at 50% 100%, - rgba(108, 119, 147, 0.05) 0%, - rgba(108, 119, 147, 0) 100% - ), - var(--900, #14141f); - } + .landing-wide-mask { + mask-image: linear-gradient( + 90deg, + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 0) 1%, + rgba(0, 0, 0, 1) 10%, + rgba(0, 0, 0, 1) 90%, + rgba(0, 0, 0, 0) 99%, + rgba(0, 0, 0, 0) 100% + ); + mask-size: 1920px 100%; + mask-position: center; + mask-repeat: no-repeat; + } + .landing-playground-slide-mask { + mask-image: linear-gradient( + 0deg, + rgba(0, 0, 0, 0.2) 0%, + rgba(0, 0, 0, 0.4) 30%, + rgba(0, 0, 0, 1) 37.5%, + rgba(0, 0, 0, 1) 65%, + rgba(0, 0, 0, 0.4) 75.5%, + rgba(0, 0, 0, 0.2) 100% + ); + mask-size: 100% 100%; + mask-position: center; + mask-repeat: no-repeat; + } - .bg-landing-component { - border-radius: 8px; - background: radial-gradient( - 66.67% 50% at 50% 0%, - rgba(31, 173, 102, 0.25) 0%, - rgba(31, 173, 102, 0) 100% - ), - radial-gradient( - 66.67% 50% at 50% 100%, - rgba(31, 173, 102, 0.1) 0%, - rgba(31, 173, 102, 0) 100% - ), - linear-gradient( - 0deg, - rgba(31, 173, 102, 0.03) 0%, - rgba(31, 173, 102, 0.03) 100% - ), - #fff; - } + .bg-landing-component-dark { + background: radial-gradient( + 66.67% 50% at 50% 0%, + rgba(217, 217, 217, 0.15) 0%, + rgba(217, 217, 217, 0) 100% + ), + radial-gradient( + 66.67% 50% at 50% 100%, + rgba(217, 217, 217, 0.05) 0%, + rgba(217, 217, 217, 0) 100% + ), + #27272a; + } } .landing-mask-image-hero-wide { - @apply landing-xl:landing-wide-mask; + @apply landing-xl:landing-wide-mask; } /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: rgb(24, 144, 255); - --ifm-color-primary-dark: rgb(21, 132, 235); - --ifm-color-primary-darker: rgb(18, 120, 215); - --ifm-color-primary-darkest: rgb(6, 100, 187); - --ifm-color-primary-light: rgb(45, 154, 255); - --ifm-color-primary-lighter: rgb(62, 162, 255); - --ifm-color-primary-lightest: rgb(105, 183, 255); - /* --ifm-color-primary: rgb(37, 194, 160); + --ifm-color-primary: rgb(24, 144, 255); + --ifm-color-primary-dark: rgb(21, 132, 235); + --ifm-color-primary-darker: rgb(18, 120, 215); + --ifm-color-primary-darkest: rgb(6, 100, 187); + --ifm-color-primary-light: rgb(45, 154, 255); + --ifm-color-primary-lighter: rgb(62, 162, 255); + --ifm-color-primary-lightest: rgb(105, 183, 255); + /* --ifm-color-primary: rgb(37, 194, 160); --ifm-color-primary-dark: rgb(33, 175, 144); --ifm-color-primary-darker: rgb(31, 165, 136); --ifm-color-primary-darkest: rgb(26, 136, 112); --ifm-color-primary-light: rgb(70, 203, 174); --ifm-color-primary-lighter: rgb(102, 212, 189); --ifm-color-primary-lightest: rgb(146, 224, 208); */ - --ifm-code-font-size: 95%; - --ifm-navbar-background-color: var(--color-purple); - --ifm-navbar-height: 64px; - --ifm-menu-color-background-active: rgba(255, 255, 255, 0.05); - --ifm-menu-color-background-hover: rgba(255, 255, 255, 0.05); - --color-purple: #331049; - --color-turquoise: #0ccee9; - --color-blue: #0b82f0; - --color-text-white: white; - --color-text-black: #3a3e4a; - --color-bg-white: white; - --ifm-navbar-sidebar-width: 100%; - --ifm-table-cell-padding: 6px 8px; - /* aliemir theme overrides start */ - /* --ifm-scrollbar-thumb-hover-background-color: transparent; */ - --doc-sidebar-width: 270px !important; - --ifm-scrollbar-track-background-color: transparent !important; - --ifm-menu-link-padding-horizontal: 0.375rem; - --ifm-menu-link-padding-vertical: 0.375rem; - --ifm-breadcrumb-item-background-active: transparent; - --ifm-breadcrumb-spacing: 0.25rem; - --ifm-breadcrumb-padding-horizontal: 0.4rem; - --ifm-font-color-base: #3a3e4a; - --tutorial-toc-bg-color: #f1f5f9; - --tutorial-toc-text-color: #292d3e; - --tutorial-toc-text-color-dark: #252527; - --tutorial-toc-text-color-light: #6b7280; - --prism-background-color: #292d3e; - --docusaurus-highlighted-code-line-bg: #dee5ed; - --ifm-code-font-size: 85%; - --browser-window-bezel-color: #ebedf0; - --browser-window-bezel-color-accent: #ebedf0; - --ifm-alert-border-radius: 0.25rem; - --ifm-alert-shadow: 0.5px 1px 1px 0px rgba(0, 0, 0, 0.15); - /* var(--ifm-font-size-base)/var(--ifm-line-height-base) var(--ifm-font-family-base) */ - --ifm-menu-link-sublist-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a8a8a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-up'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E"); - --primary-font-sans: "Inter"; - --ifm-font-family-base: var(--primary-font-sans), system-ui, -apple-system, - "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, - BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - /* aliemir theme overrides end */ - --tutorial-card-bg: var(--ifm-card-background-color); - ---tutorial-card-bg-hover: var(--ifm-card-background-color); + --ifm-code-font-size: 95%; + --ifm-navbar-background-color: var(--color-purple); + --ifm-navbar-height: 64px; + --ifm-menu-color-background-active: rgba(255, 255, 255, 0.05); + --ifm-menu-color-background-hover: rgba(255, 255, 255, 0.05); + --color-purple: #331049; + --color-turquoise: #0ccee9; + --color-blue: #0b82f0; + --color-text-white: white; + --color-text-black: #3a3e4a; + --color-bg-white: white; + --ifm-navbar-sidebar-width: 100%; + --ifm-table-cell-padding: 6px 8px; + /* aliemir theme overrides start */ + /* --ifm-scrollbar-thumb-hover-background-color: transparent; */ + --doc-sidebar-width: 270px !important; + --ifm-scrollbar-track-background-color: transparent !important; + --ifm-menu-link-padding-horizontal: 0.375rem; + --ifm-menu-link-padding-vertical: 0.375rem; + --ifm-breadcrumb-item-background-active: transparent; + --ifm-breadcrumb-spacing: 0.25rem; + --ifm-breadcrumb-padding-horizontal: 0.4rem; + --ifm-font-color-base: #3a3e4a; + --tutorial-toc-bg-color: #f1f5f9; + --tutorial-toc-text-color: #292d3e; + --tutorial-toc-text-color-dark: #252527; + --tutorial-toc-text-color-light: #6b7280; + --prism-background-color: #292d3e; + --docusaurus-highlighted-code-line-bg: #dee5ed; + --ifm-code-font-size: 85%; + --browser-window-bezel-color: #ebedf0; + --browser-window-bezel-color-accent: #ebedf0; + --ifm-alert-border-radius: 0.25rem; + --ifm-alert-shadow: 0.5px 1px 1px 0px rgba(0, 0, 0, 0.15); + /* var(--ifm-font-size-base)/var(--ifm-line-height-base) var(--ifm-font-family-base) */ + --ifm-menu-link-sublist-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a8a8a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-up'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E"); + --primary-font-sans: "Inter"; + --ifm-font-family-base: var(--primary-font-sans), system-ui, -apple-system, + "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, + BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + /* aliemir theme overrides end */ + --tutorial-card-bg: var(--ifm-card-background-color); + ---tutorial-card-bg-hover: var(--ifm-card-background-color); +} + +body { + font-feature-settings: "ss01", "cv11"; } html.docs-wrapper { - scroll-behavior: initial !important; + scroll-behavior: initial !important; } [data-theme="dark"] { - --tutorial-card-bg: #252527; - --tutorial-card-bg-hover: #2c2e33; - --ifm-font-color-base: #f6f6f9; - --docusaurus-highlighted-code-line-bg: #303450; - --browser-window-bezel-color: #292d3e; - --browser-window-bezel-color-accent: #4e5264; - --tutorial-toc-bg-color: #27272a; - --tutorial-toc-text-color: #ebedf0; - --tutorial-toc-text-color-dark: #f1f1f1; - --tutorial-toc-text-color-light: #dddee0; + --tutorial-card-bg: #252527; + --tutorial-card-bg-hover: #2c2e33; + --ifm-font-color-base: #f6f6f9; + --docusaurus-highlighted-code-line-bg: #303450; + --browser-window-bezel-color: #292d3e; + --browser-window-bezel-color-accent: #4e5264; + --tutorial-toc-bg-color: #27272a; + --tutorial-toc-text-color: #ebedf0; + --tutorial-toc-text-color-dark: #f1f1f1; + --tutorial-toc-text-color-light: #dddee0; } .img-container { - /* deprecated */ + /* deprecated */ } .window { - display: none; - /* deprecated */ + display: none; + /* deprecated */ } .centered-image { - display: flex; - flex-direction: column; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; } .banner-container { - background-color: #f8f8f8; - padding: 18px; - border-radius: 10px; - font-weight: 500; + background-color: #f8f8f8; + padding: 18px; + border-radius: 10px; + font-weight: 500; } .banner-container.dark { - background: linear-gradient(to bottom, #2f2f2f, #000000); - color: #ffffff; + background: linear-gradient(to bottom, #2f2f2f, #000000); + color: #ffffff; } .banner-header { - font-size: 32px; - font-weight: 700; - line-height: 1.4; - margin-bottom: 25px; - text-align: center; + font-size: 32px; + font-weight: 700; + line-height: 1.4; + margin-bottom: 25px; + text-align: center; } .docusaurus-highlight-code-line { - background-color: rgb(72, 77, 91); - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); + background-color: rgb(72, 77, 91); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); } .required { - font-size: 13px; - border-radius: 3px; - border-style: solid; - border-color: #fa5035; - color: #fa5035; - border-width: 1px; - letter-spacing: 0.02rem; - margin-right: 0; - padding: 0 6px; - display: inline-block; - margin-left: 5px; + font-size: 13px; + border-radius: 3px; + border-style: solid; + border-color: #fa5035; + color: #fa5035; + border-width: 1px; + letter-spacing: 0.02rem; + margin-right: 0; + padding: 0 6px; + display: inline-block; + margin-left: 5px; } /* .deprecated { @@ -311,292 +295,292 @@ html.docs-wrapper { } */ .required-block { - display: flex; - align-items: center; + display: flex; + align-items: center; } .footer__links { - margin-bottom: 20px; + margin-bottom: 20px; } .footer__col:first-child { - flex: 2; + flex: 2; } .footer__col:first-child .footer__items { - display: flex; - flex-direction: row; - flex-wrap: wrap; + display: flex; + flex-direction: row; + flex-wrap: wrap; } .footer__col:first-child .footer__items .footer__item { - flex-basis: 50%; + flex-basis: 50%; } @media screen and (max-width: 966px) { - .footer__link-item { - font-size: 14px; - } + .footer__link-item { + font-size: 14px; + } } .language-js { - font-size: 9px; + font-size: 9px; } .required { - border-radius: 3px; - border-style: solid; - border-color: #fa5035; - color: #fa5035; - border-width: 1px; - letter-spacing: 0.02rem; - margin-right: 0; - padding: 0 6px; - display: inline-block; - margin-left: 5px; + border-radius: 3px; + border-style: solid; + border-color: #fa5035; + color: #fa5035; + border-width: 1px; + letter-spacing: 0.02rem; + margin-right: 0; + padding: 0 6px; + display: inline-block; + margin-left: 5px; } /* Common */ .row--justify--center { - justify-content: center; + justify-content: center; } .row--align--center { - align-items: center; + align-items: center; } /* Header classes */ .navbar__brand { - margin-left: 8px; + margin-left: 8px; } .navbar__link { - font-weight: 600; + font-weight: 600; } .navbar__toggle { - color: var(--color-text-white); + color: var(--color-text-white); } .navbar-sidebar__brand { - justify-content: space-between; - box-shadow: none; + justify-content: space-between; + box-shadow: none; } .navbar-sidebar__items .menu__list .menu__link { - color: var(--color-text-white); + color: var(--color-text-white); } .navbar-sidebar__items .menu__list .menu__link.menu__link--sublist::after { - filter: invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg) - brightness(104%) contrast(98%); + filter: invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg) + brightness(104%) contrast(98%); } .navbar-sidebar__back { - color: var(--color-text-white); + color: var(--color-text-white); } .header-last-nav-item { - margin-right: 30px; + margin-right: 30px; } .header-icon-link { - transition: 0.5s; + transition: 0.5s; } .header-icon-link:hover { - /* filter: brightness(2); */ + /* filter: brightness(2); */ } .header-icon-link::before { - content: ""; - display: flex; - height: 24px; - width: 24px; + content: ""; + display: flex; + height: 24px; + width: 24px; } .popover-icon-link::before { - content: ""; - display: flex; - height: 24px; - width: 24px; + content: ""; + display: flex; + height: 24px; + width: 24px; } .header-github-link::before { - background: url("/icons/github.svg"); - background-size: contain; + background: url("/icons/github.svg"); + background-size: contain; } .header-discord-link::before { - background: url("/icons/discord.svg"); - background-size: contain; + background: url("/icons/discord.svg"); + background-size: contain; } .header-twitter-link::before { - background: url("/icons/twitter.svg"); - background-size: contain; + background: url("/icons/twitter.svg"); + background-size: contain; } /* Code Renderer Styles */ .pre { - text-align: left; - margin: 1em 0; - padding: 0.5em; - overflow: auto; + text-align: left; + margin: 1em 0; + padding: 0.5em; + overflow: auto; } .pre .token-line { - line-height: 1.3em; - height: 1.3em; + line-height: 1.3em; + height: 1.3em; } .code-line { - display: table-row; + display: table-row; } .code-line-no { - display: table-cell; - text-align: right; - padding-right: 1em; - user-select: none; - opacity: 0.5; + display: table-cell; + text-align: right; + padding-right: 1em; + user-select: none; + opacity: 0.5; } .code-line-content { - display: table-cell; + display: table-cell; } [class^="announcementBar"] { - border: none !important; + border: none !important; } .tutorial-cards { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); - gap: 16px; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); + gap: 16px; } .tutorial-cards > a { - width: 100%; + width: 100%; } /* Antd Sider Issue Fix */ .ant-layout-sider-trigger { - position: sticky !important; + position: sticky !important; } .markdown .live-editor-wrapper li + li { - margin-top: 0; + margin-top: 0; } .live-editor-wrapper table th, .live-editor-wrapper table td { - border: none; + border: none; } .live-editor-wrapper table tr:nth-child(2n) { - background: none; + background: none; } .code-block-hidden, .code-block-hidden.theme-code-block-highlighted-line { - display: none; + display: none; } .with-hoverline.hoverline-link { - @apply relative; + @apply relative; } .with-hoverline.hoverline-link:not([role="button"]):hover::after, .with-hoverline.navbar__link--active:not([role="button"])::after { - content: ""; - @apply absolute bottom-[-5px] left-[calc(50%-12px)] h-1 w-6 rounded-sm bg-[#1890ff] transition-opacity duration-200 ease-in-out; + content: ""; + @apply absolute bottom-[-5px] left-[calc(50%-12px)] h-1 w-6 rounded-sm bg-[#1890ff] transition-opacity duration-200 ease-in-out; } .with-hoverline.hoverline-link[role="button"]:hover::before { - content: ""; - @apply absolute bottom-[-5px] left-[calc(50%-12px)] h-1 w-6 rounded-sm bg-[#1890ff] transition-opacity duration-200 ease-in-out; + content: ""; + @apply absolute bottom-[-5px] left-[calc(50%-12px)] h-1 w-6 rounded-sm bg-[#1890ff] transition-opacity duration-200 ease-in-out; } .active-navbar-link::after { - content: ""; - @apply absolute bottom-[-5px] left-[calc(50%-12px)] h-1 w-6 rounded-sm bg-[#1890ff] transition-opacity duration-200 ease-in-out; + content: ""; + @apply absolute bottom-[-5px] left-[calc(50%-12px)] h-1 w-6 rounded-sm bg-[#1890ff] transition-opacity duration-200 ease-in-out; } #__docusaurus .navbar .navbar__items .navbar__item { - @apply hidden lg:inline-block; + @apply hidden lg:inline-block; } #__docusaurus .navbar .navbar__items .header-icon-link { - @apply hidden xl:inline-block; + @apply hidden xl:inline-block; } .navbar-sidebar__item.menu .menu__list { - padding-left: 0; + padding-left: 0; } .navbar-sidebar__item.menu .menu__list .menu__list-item .menu__link { - @apply font-montserrat block text-center font-semibold text-[#2a2a42]; + @apply font-montserrat block text-center font-semibold text-[#2a2a42]; } .theme-doc-sidebar-item-category.menu__list-item { - @apply opacity-90; + @apply opacity-90; } #__docusaurus .navbar-sidebar__items--show-secondary { - transform: translate3d(calc(100% * -1), 0, 0); + transform: translate3d(calc(100% * -1), 0, 0); } #__docusaurus - .navbar-sidebar__items - .menu__list - .menu__link.menu__link--sublist::after { - display: block; - position: relative; - margin-top: -20px; - filter: none; + .navbar-sidebar__items + .menu__list + .menu__link.menu__link--sublist::after { + display: block; + position: relative; + margin-top: -20px; + filter: none; } #__docusaurus - .navbar-sidebar__items - .menu__list - .menu__link.menu__link--sublist[role="button"]::after { - bottom: unset; - margin-top: 0; - top: -26px; - left: unset; - height: 24px; - width: 24px; - background-color: transparent; + .navbar-sidebar__items + .menu__list + .menu__link.menu__link--sublist[role="button"]::after { + bottom: unset; + margin-top: 0; + top: -26px; + left: unset; + height: 24px; + width: 24px; + background-color: transparent; } #__docusaurus .menu__link.menu__link--sublist[role="button"] { - height: 40px; + height: 40px; } #__docusaurus .clean-btn.navbar-sidebar__back { - @apply font-montserrat mb-4 text-center font-semibold text-[#2a2a42]; + @apply font-montserrat mb-4 text-center font-semibold text-[#2a2a42]; } #__docusaurus .navbar-sidebar__item.menu a[href="https://github.com/refinedev/refine"]::after { - display: none; + display: none; } #__docusaurus .social-icons .header-icon-link::before { - width: 32px; - height: 32px; + width: 32px; + height: 32px; } #__docusaurus .social-icons .header-icon-link.header-github-link::before { - width: 32px; - height: 32px; - margin-top: 3px; + width: 32px; + height: 32px; + margin-top: 3px; } #__docusaurus .navbar-sidebar__items .with-hoverline .menu__link--active { - position: relative; + position: relative; } /* #__docusaurus @@ -608,260 +592,260 @@ html.docs-wrapper { } */ #__docusaurus .with-hoverline.active-item::before { - content: ""; - @apply absolute bottom-[-5px] left-[calc(50%-12px)] h-1 w-6 rounded-sm bg-[#1890ff] transition-opacity duration-200 ease-in-out; + content: ""; + @apply absolute bottom-[-5px] left-[calc(50%-12px)] h-1 w-6 rounded-sm bg-[#1890ff] transition-opacity duration-200 ease-in-out; } #__docusaurus .with-hoverline.navbar-sidebar__items .menu__link--active { - position: relative; + position: relative; } .with-hoverline .active-item.hoveline-link { - @apply relative; + @apply relative; } #__docusaurus .menu__link--active:not(.menu__link--sublist) { - background-color: transparent; + background-color: transparent; } .navbar .navbar__items .navbar__item { - @apply hidden xl:inline-block; + @apply hidden xl:inline-block; } #__docusaurus .text-color-base { - color: var(--ifm-font-color-base); + color: var(--ifm-font-color-base); } #__docusaurus .blog-post-item-shadow { - box-shadow: 6px 8px 16px rgba(42, 42, 66, 0.4); + box-shadow: 6px 8px 16px rgba(42, 42, 66, 0.4); } #__docusaurus .dots { - @apply h-8 border-none cursor-default; + @apply h-8 border-none cursor-default; } #__docusaurus .custom-table-of-contents .table-of-contents { - @apply pl-0; - border: none; + @apply pl-0; + border: none; } @media (max-width: 1023px) { - #__docusaurus .custom-table-of-contents .table-of-contents { - @apply hidden; - } + #__docusaurus .custom-table-of-contents .table-of-contents { + @apply hidden; + } } #__docusaurus .github-banner-bg { - background-image: url("/img/blog-static/github-bg.png"); - background-size: cover; - background-repeat: no-repeat; + background-image: url("/img/blog-static/github-bg.png"); + background-size: cover; + background-repeat: no-repeat; } #__docusaurus .twitter-banner-bg { - background: linear-gradient(90deg, #3fdcf7 2.01%, #1890ff 99.51%); + background: linear-gradient(90deg, #3fdcf7 2.01%, #1890ff 99.51%); } #__docusaurus .blog-paginator-item:hover { - background: linear-gradient(90deg, #3fdcf7 2.01%, #1890ff 99.51%); + background: linear-gradient(90deg, #3fdcf7 2.01%, #1890ff 99.51%); } #__docusaurus .blog-paginator-item:hover #post-title { - @apply text-white; + @apply text-white; } #__docusaurus .blog-paginator-item:hover #author-title { - @apply font-semibold text-white; + @apply font-semibold text-white; } #__docusaurus .blog-paginator-item:hover #author-name { - @apply text-white; + @apply text-white; } #__docusaurus .blog-paginator-item:hover #post-info { - @apply font-semibold text-white; + @apply font-semibold text-white; } #__docusaurus .sticky-author-card { - position: sticky; - top: calc(var(--ifm-navbar-height) + 1rem); + position: sticky; + top: calc(var(--ifm-navbar-height) + 1rem); } #__docusaurus .all-tags-button { - background: linear-gradient(90deg, #3fdcf7 2.01%, #1890ff 99.51%); + background: linear-gradient(90deg, #3fdcf7 2.01%, #1890ff 99.51%); } #__docusaurus .all-tags-button:hover svg { - @apply -translate-x-1; + @apply -translate-x-1; } @media (min-width: 1024px) { - html[data-page="index"] footer.refine-footer-index { - scroll-snap-align: end; - } + html[data-page="index"] footer.refine-footer-index { + scroll-snap-align: end; + } } .DocSearch--active .DocSearch-Modal { - @apply fixed md:relative; + @apply fixed md:relative; } .navbar-sidebar__items.navbar-sidebar__items--show-secondary - .navbar-sidebar__item.menu - .menu__list, + .navbar-sidebar__item.menu + .menu__list, .navbar-sidebar__items.navbar-sidebar__items--show-secondary .menu__list-item, .navbar-sidebar__items.navbar-sidebar__items--show-secondary .menu__link { - text-align: left !important; + text-align: left !important; } #__docusaurus - .navbar-sidebar__items.navbar-sidebar__items--show-secondary - .menu__list { - padding-left: 0.75rem; + .navbar-sidebar__items.navbar-sidebar__items--show-secondary + .menu__list { + padding-left: 0.75rem; } #__docusaurus - .navbar-sidebar__items.navbar-sidebar__items--show-secondary - .menu__link { - padding-left: 0; + .navbar-sidebar__items.navbar-sidebar__items--show-secondary + .menu__link { + padding-left: 0; } #__docusaurus .gradient-button:hover { - background: linear-gradient(90deg, #3fdcf7 2.01%, #1890ff 99.51%); + background: linear-gradient(90deg, #3fdcf7 2.01%, #1890ff 99.51%); } #__docusaurus .gradient-button:hover a { - @apply bg-transparent; + @apply bg-transparent; } #__docusaurus .gradient-button:hover .export-icon { - background: #1373cc; - box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.25); + background: #1373cc; + box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.25); } #__docusaurus .example-card { - border: 1px solid #f5f5f5; - box-shadow: 6px 8px 16px rgba(42, 42, 66, 0.1); - filter: none; + border: 1px solid #f5f5f5; + box-shadow: 6px 8px 16px rgba(42, 42, 66, 0.1); + filter: none; } #__docusaurus .example-card:hover { - box-shadow: 6px 8px 16px rgba(42, 42, 66, 0.4); - transform: scale(1.02); + box-shadow: 6px 8px 16px rgba(42, 42, 66, 0.4); + transform: scale(1.02); } /* #__docusaurus .navbar-sidebar__items.navbar-sidebar__items--show-secondary { } */ html[data-customized="true"] - #__docusaurus - .navbar__item.dropdown.dropdown--hoverable.dropdown--right { - display: none; + #__docusaurus + .navbar__item.dropdown.dropdown--hoverable.dropdown--right { + display: none; } #__docusaurus .DocSearch-Search-Icon { - @apply text-[#2A2A42]; + @apply text-[#2A2A42]; } #__docusaurus footer.refine-footer { - background-color: #f6f6f9; + background-color: #f6f6f9; } html[data-theme="dark"]:not([data-customized="true"]) - #__docusaurus - footer.refine-footer { - background-color: #272729; + #__docusaurus + footer.refine-footer { + background-color: #272729; } html[data-customized="true"] #__docusaurus .navbar-theme-toggle { - display: none; + display: none; } html[data-customized="true"], html[data-theme="dark"][data-customized="true"] { - background: white; + background: white; } #__docusaurus .navbar { - @apply border-0 border-b border-solid border-b-[#F6F6F9] border-opacity-80 bg-white bg-opacity-80; + @apply border-0 border-b border-solid border-b-[#F6F6F9] border-opacity-80 bg-white bg-opacity-80; } html[data-theme="dark"]:not([data-customized="true"]) #__docusaurus .navbar { - @apply border-0 border-b border-solid border-b-[#2A2A42] border-opacity-80 bg-[#272729] bg-opacity-80; + @apply border-0 border-b border-solid border-b-[#2A2A42] border-opacity-80 bg-[#272729] bg-opacity-80; } html:not([data-theme="dark"]):not([data-customized="true"]) - #__docusaurus - .navbar { - @apply border-0 border-b border-solid border-b-[#F6F6F9] border-opacity-80 bg-white bg-opacity-80; + #__docusaurus + .navbar { + @apply border-0 border-b border-solid border-b-[#F6F6F9] border-opacity-80 bg-white bg-opacity-80; } html[data-theme="dark"]:not([data-customized="true"]) - #__docusaurus - .DocSearch-Button-Placeholder, + #__docusaurus + .DocSearch-Button-Placeholder, html[data-theme="dark"]:not([data-customized="true"]) - #__docusaurus - .DocSearch-Search-Icon, + #__docusaurus + .DocSearch-Search-Icon, html[data-theme="dark"]:not([data-customized="true"]) - #__docusaurus - .DocSearch-Button-Keys - kbd { - @apply text-[#F6F6F9]; + #__docusaurus + .DocSearch-Button-Keys + kbd { + @apply text-[#F6F6F9]; } html[data-theme="dark"]:not([data-customized="true"]) - #__docusaurus - .navbar - .navbar__item, + #__docusaurus + .navbar + .navbar__item, html[data-theme="dark"]:not([data-customized="true"]) - #__docusaurus - .navbar - .navbar__link { - @apply text-[#F6F6F9]; + #__docusaurus + .navbar + .navbar__link { + @apply text-[#F6F6F9]; } html[data-theme="dark"]:not([data-customized="true"]) - #__docusaurus - .navbar - .header-github-link::before { - @apply brightness-[50]; + #__docusaurus + .navbar + .header-github-link::before { + @apply brightness-[50]; } #__docusaurus .navbar .navbar__items .navbar__item { - @apply text-sm; + @apply text-sm; } #__docusaurus .navbar__items--right > :last-child { - @apply pl-0; + @apply pl-0; } #__docusaurus .theme-doc-sidebar-menu.menu__list .menu__link--active { - color: #1890ff; - position: relative; + color: #1890ff; + position: relative; } #__docusaurus - .with-hoverline - .navbar-sidebar__items.navbar-sidebar__items--show-secondary - .menu__link.menu__link--active::before { - display: none; + .with-hoverline + .navbar-sidebar__items.navbar-sidebar__items--show-secondary + .menu__link.menu__link--active::before { + display: none; } #__docusaurus .theme-doc-sidebar-menu.menu__list .menu__link--active::before { - content: "" !important; - pointer-events: none; - position: absolute !important; - display: block !important; - left: 8px; - top: 14px; - width: 4px; - height: 4px; - border-radius: 4px; - background-color: #1890ff; + content: "" !important; + pointer-events: none; + position: absolute !important; + display: block !important; + left: 8px; + top: 14px; + width: 4px; + height: 4px; + border-radius: 4px; + background-color: #1890ff; } #__docusaurus .theme-doc-sidebar-menu.menu__list .menu__link--active::after { - background-image: url('data:image/svg+xml,'); - filter: none; + background-image: url('data:image/svg+xml,'); + filter: none; } #__docusaurus .theme-doc-sidebar-menu.menu__list .menu__link { - padding-left: 22px; + padding-left: 22px; } /* #__docusaurus .navbar__item.dropdown.dropdown--hoverable.dropdown--right { @@ -869,448 +853,437 @@ html[data-theme="dark"]:not([data-customized="true"]) } */ #__docusaurus .group:hover a:hover .nested-hover-visible { - display: block; + display: block; } #__docusaurus .group:hover a:hover .nested-hover-hidden { - display: none; + display: none; } #__docusaurus .footer__item { - line-height: 18px; + line-height: 18px; } .prop--tag { - font-size: 10px; - font-weight: 600; - letter-spacing: -0.1px; - padding: 0 4px; - user-select: none; - border-radius: 3px; - border-style: solid; - border-width: 1px; - margin-right: 0; - display: inline-block; - margin-left: 5px; - border-color: #9e9e9e; - color: #9e9e9e; + font-size: 10px; + font-weight: 600; + letter-spacing: -0.1px; + padding: 0 4px; + user-select: none; + border-radius: 3px; + border-style: solid; + border-width: 1px; + margin-right: 0; + display: inline-block; + margin-left: 5px; + border-color: #9e9e9e; + color: #9e9e9e; } .prop--tag__deprecated { - border-color: #d97706; - color: #d97706; + border-color: #d97706; + color: #d97706; } .prop--tag__required { - border-color: #1890ff; - color: #1890ff; - font-size: 12px; - line-height: 18px; - vertical-align: middle; + border-color: #1890ff; + color: #1890ff; + font-size: 12px; + line-height: 18px; + vertical-align: middle; } .prop--tag__featured { - border-color: #059669; - color: #059669; + border-color: #059669; + color: #059669; } .props-table { - font-size: 14px; + font-size: 14px; } .props-table td, .props-table th { - padding: 6px 8px; + padding: 6px 8px; } .props-table th { - text-align: left; + text-align: left; } .props-table .props-table__type-cell code { - font-size: 14px; + font-size: 14px; } .props-table { - line-height: 1.5; + line-height: 1.5; } .props-table--name { - vertical-align: middle; + vertical-align: middle; } .props-table--name__deprecated { - text-decoration: line-through; + text-decoration: line-through; } .props-table__type-cell *, .props-table__description-cell *, .props-table__default-value-cell *, .props-list__info-item * { - @apply 2xl:my-0; - margin-bottom: 0; + @apply 2xl:my-0; + margin-bottom: 0; } .props-table--name, .props-table__type-cell p, .props-table__description-cell p, .props-table__default-value-cell p { - @apply text-sm; + @apply text-sm; } .props-table__type-cell code p { - @apply text-sm; + @apply text-sm; } .docs-wrapper table { - font-size: 14px; - line-height: 1.5; + font-size: 14px; + line-height: 1.5; } #__docusaurus .theme-doc-sidebar-container { - --ifm-font-size-base: 14px; - font-size: 14px; - border: none; + --ifm-font-size-base: 14px; + font-size: 14px; + border: none; } #__docusaurus .menu__link--sublist-caret::after, #__docusaurus .menu__caret::before { - background: var(--ifm-menu-link-sublist-icon) 50% / 1.25rem 1.25rem; + background: var(--ifm-menu-link-sublist-icon) 50% / 1.25rem 1.25rem; } #__docusaurus .theme-doc-breadcrumbs { - margin-bottom: 1.25rem; + margin-bottom: 1.25rem; } #__docusaurus .doc-article { - max-width: 740px; - margin: 0 auto; + max-width: 740px; + margin: 0 auto; } #__docusaurus .tabs-container > ul.tabs { - position: relative; - padding-left: 1rem; - padding-right: 1rem; - gap: 8px; + position: relative; + padding-left: 1rem; + padding-right: 1rem; + gap: 8px; } #__docusaurus .tabs-container > ul.tabs::before { - content: ""; - width: 100%; - height: 3px; - background-color: var(--ifm-toc-border-color); - position: absolute; - bottom: 0; - left: 0; - border-radius: 3px; - z-index: -1; + content: ""; + width: 100%; + height: 3px; + background-color: var(--ifm-toc-border-color); + position: absolute; + bottom: 0; + left: 0; + border-radius: 3px; + z-index: -1; } #__docusaurus .tabs-container > ul.tabs .tabs__item { - padding: 0.75rem; + padding: 0.75rem; } #__docusaurus .theme-code-block pre.prism-code { - --prism-color: #bfc7d5; - --prism-background-color: #292d3e; + --prism-color: #bfc7d5; + --prism-background-color: #292d3e; } [data-theme="dark"] #__docusaurus .playground-code > .theme-code-block { - transition: 0.3s border-top ease-in-out; + transition: 0.3s border-top ease-in-out; } [data-theme="dark"] #__docusaurus .playground-code-visible > .theme-code-block { - border-top: 2px solid var(--browser-window-bezel-color-accent); + border-top: 2px solid var(--browser-window-bezel-color-accent); } #__docusaurus .doc--toc-desktop { - max-width: 285px; + max-width: 285px; } @media (min-width: 997px) and (max-width: 1280px) { - aside.theme-doc-sidebar-container - + main - div.container - div.row - div.col.col--3 { - min-width: 30% !important; - } + aside.theme-doc-sidebar-container + + main + div.container + div.row + div.col.col--3 { + min-width: 30% !important; + } } #__docusaurus .theme-doc-sidebar-container nav.menu { - padding-top: 1.125rem; + padding-top: 1.125rem; } .checklist-container { - @apply rounded px-6 py-5 mb-7; - border-left: 5px solid var(--ifm-color-primary); - background-color: var(--tutorial-toc-bg-color); + @apply rounded px-6 py-5 mb-7; + border-left: 5px solid var(--ifm-color-primary); + background-color: var(--tutorial-toc-bg-color); } .checklist-container__title { - @apply text-2xl font-bold text-sky-600 mb-4 flex items-center flex-wrap gap-2; - color: var(--ifm-color-primary); + @apply text-2xl font-bold text-sky-600 mb-4 flex items-center flex-wrap gap-2; + color: var(--ifm-color-primary); } [data-theme="dark"] .checklist-item__button { - border-color: var(--browser-window-bezel-color-accent); - background-color: #3a3e4a; + border-color: var(--browser-window-bezel-color-accent); + background-color: #3a3e4a; } .tutorial--framework-select--wrapper { - font-size: 12px; - text-align: center; - background-color: var(--tutorial-toc-bg-color); - @apply px-[10px] pt-[7px] pb-[10px]; + font-size: 12px; + text-align: center; + background-color: var(--tutorial-toc-bg-color); + @apply px-[10px] pt-[7px] pb-[10px]; } .tutorial--framework-select__title { - color: var(--tutorial-toc-text-color); - text-align: center; - font-size: 0.5rem; - @apply font-montserrat tracking-wide; + color: var(--tutorial-toc-text-color); + text-align: center; + font-size: 0.5rem; + @apply font-montserrat tracking-wide; } .tutorial--framework-select__box { - @apply pt-3 flex items-center justify-between; + @apply pt-3 flex items-center justify-between; } .tutorial--framework-select--button { - @apply underline; + @apply underline; } .sourcecode-badge { - @apply appearance-none no-underline text-xs font-bold bg-slate-800 text-white; - font-size: 12px; - line-height: 13px; - height: 22px; - padding-top: 4px; - padding-bottom: 5px; - vertical-align: middle; + @apply appearance-none no-underline text-xs font-bold bg-slate-800 text-white; + font-size: 12px; + line-height: 13px; + height: 22px; + padding-top: 4px; + padding-bottom: 5px; + vertical-align: middle; - text-decoration: none; - background-color: #24292f; - color: white; + text-decoration: none; + background-color: #24292f; + color: white; } .sourcecode-badge:hover, .sourcecode-badge:active, .sourcecode-badge:focus, .sourcecode-badge:visited { - text-decoration: none; - background-color: #24292f; - color: white; + text-decoration: none; + background-color: #24292f; + color: white; } html[data-theme="dark"] .sourcecode-badge { - background-color: var(--ifm-color-secondary); - color: #24292f; + background-color: var(--ifm-color-secondary); + color: #24292f; } .sourcecode-badge svg { - margin-right: 6px; - height: 13px; - width: 13px; - margin-bottom: -2px; + margin-right: 6px; + height: 13px; + width: 13px; + margin-bottom: -2px; } #__docusaurus .theme-code-block-highlighted-line { - margin: 0; + margin: 0; } .theme-code-block-added-line { - background-color: rgb(87 171 90 / 15%); - display: block; + background-color: rgb(87 171 90 / 15%); + display: block; } .theme-code-block-removed-line { - background-color: rgb(229 83 75 / 15%); - display: block; + background-color: rgb(229 83 75 / 15%); + display: block; } .bg-top-announcement { - border-bottom: 1px solid rgba(71, 235, 235, 0.15); - background: radial-gradient( - 218.19% 111.8% at 0% 0%, - rgba(71, 235, 235, 0.1) 0%, - rgba(71, 235, 235, 0.2) 100% - ), - #14141f; + border-bottom: 1px solid rgba(71, 235, 235, 0.15); + background: radial-gradient( + 218.19% 111.8% at 0% 0%, + rgba(71, 235, 235, 0.1) 0%, + rgba(71, 235, 235, 0.2) 100% + ), + #14141f; } .top-announcement-mask { - mask-image: url(/assets/hexagon.svg); - mask-repeat: repeat; - background: rgba(71, 235, 235, 0.25); + mask-image: url(/assets/hexagon.svg); + mask-repeat: repeat; + background: rgba(71, 235, 235, 0.25); } .refine-info-badge { - margin-bottom: 2px; + margin-bottom: 2px; } .landing-packages-mask { - mask-image: linear-gradient( - 92.03deg, - rgba(0, 0, 0, 0) 3.05%, - #000000 25%, - #000000 50%, - #000000 75%, - rgba(0, 0, 0, 0) 100% - ); - mask-repeat: no-repeat; + mask-image: linear-gradient( + 92.03deg, + rgba(0, 0, 0, 0) 3.05%, + #000000 25%, + #000000 50%, + #000000 75%, + rgba(0, 0, 0, 0) 100% + ); + mask-repeat: no-repeat; } .landing-react-code-mask-dark { - mask-image: radial-gradient( - 100% 100% at 0% 0%, - rgba(217, 217, 217, 0.5) 0%, - rgba(217, 217, 217, 0.5) 25%, - rgba(217, 217, 217, 0.5) 50%, - #d9d9d9 75%, - rgba(217, 217, 217, 0) 100% - ); -} - -.landing-react-code-mask { - mask-image: radial-gradient( - 100% 100% at 0% 0%, - rgba(217, 217, 217, 0.5) 0%, - rgba(217, 217, 217, 0.5) 25%, - #d9d9d9 50%, - #d9d9d9 75%, - rgba(217, 217, 217, 0) 100% - ); + mask-image: radial-gradient( + 100% 100% at 0% 0%, + rgba(217, 217, 217, 0.5) 0%, + rgba(217, 217, 217, 0.5) 25%, + rgba(217, 217, 217, 0.5) 50%, + #27272a 75%, + rgba(217, 217, 217, 0) 100% + ); } .landing-sweet-spot-mask { - mask-image: linear-gradient( - 90deg, - #fff 0%, - rgba(255, 255, 255, 0.25) 80%, - rgba(255, 255, 255, 0) 100% - ); + mask-image: linear-gradient( + 90deg, + #fff 0%, + rgba(255, 255, 255, 0.25) 80%, + rgba(255, 255, 255, 0) 100% + ); } form.DocSearch-Form { - height: 44px; - font-size: 14px; + height: 44px; + font-size: 14px; } form.DocSearch-Form input.DocSearch-Input { - font-size: 1em; + font-size: 1em; } form.DocSearch-Form label.DocSearch-MagnifierLabel svg.DocSearch-Search-Icon { - width: 18px; - height: 18px; + width: 18px; + height: 18px; } .template-detail-markdown { - @apply break-words; + @apply break-words; } .template-detail-markdown h3 + ul { - margin-block-start: -20px; + margin-block-start: -20px; } .template-detail-markdown li > p + p { - @apply mt-6; + @apply mt-6; } .template-detail-markdown strong { - @apply font-semibold; + @apply font-semibold; } .template-detail-markdown a { - @apply dark:text-refine-link-dark text-refine-link-light font-semibold; + @apply dark:text-refine-link-dark text-refine-link-light font-semibold; } .template-detail-markdown strong a { - @apply font-bold; + @apply font-bold; } .template-detail-markdown h1 { - @apply leading-tight border-b text-4xl font-semibold mb-4 mt-6 pb-2; + @apply leading-tight border-b text-4xl font-semibold mb-4 mt-6 pb-2; } .template-detail-markdown h2 { - @apply leading-tight border-b text-2xl font-semibold mb-4 mt-6 pb-2; + @apply leading-tight border-b text-2xl font-semibold mb-4 mt-6 pb-2; } .template-detail-markdown h3 { - @apply leading-snug text-lg font-semibold pb-0 mb-0 mt-6; + @apply leading-snug text-lg font-semibold pb-0 mb-0 mt-6; } .template-detail-markdown h4 { - @apply leading-none text-base font-semibold mb-4 mt-6; + @apply leading-none text-base font-semibold mb-4 mt-6; } .template-detail-markdown h5 { - @apply leading-tight text-sm font-semibold mb-4 mt-6; + @apply leading-tight text-sm font-semibold mb-4 mt-6; } .template-detail-markdown h6 { - @apply leading-tight text-sm font-semibold mb-4 mt-6; + @apply leading-tight text-sm font-semibold mb-4 mt-6; } .template-detail-markdown blockquote { - @apply text-base border-l-4 border-gray-300 pl-4 pr-4; + @apply text-base border-l-4 border-l-zinc-400 dark:border-l-zinc-600 pl-4 pr-4; } .template-detail-markdown code { - @apply text-sm inline bg-gray-200 rounded px-1 py-[0.125rem]; + @apply text-sm inline bg-gray-200 rounded px-1 py-[0.125rem]; } .template-detail-markdown pre { - @apply bg-gray-100 rounded p-4; + @apply bg-gray-100 rounded p-4; } .template-detail-markdown pre code { - @apply block bg-transparent p-0 overflow-visible rounded-none; + @apply block bg-transparent p-0 overflow-visible rounded-none; } .template-detail-markdown ul { - @apply text-base pl-8 list-disc; + @apply text-base pl-8 list-disc; } .template-detail-markdown ol { - @apply text-base pl-8 list-decimal; + @apply text-base pl-8 list-decimal; } .template-detail-markdown kbd { - @apply text-xs inline-block rounded border px-1 py-[0.125rem] align-middle font-normal shadow; + @apply text-xs inline-block rounded border px-1 py-[0.125rem] align-middle font-normal shadow; } .template-detail-markdown table { - @apply text-base border-gray-600; + @apply text-base border-gray-600; } .template-detail-markdown th { - @apply border py-1 px-3; + @apply border py-1 px-3; } .template-detail-markdown td { - @apply border py-1 px-3; + @apply border py-1 px-3; } /* Override pygments style background color. */ .template-detail-markdown .highlight pre { - @apply bg-gray-100 !important; + @apply bg-gray-100 !important; } .sandpack-container .sp-layout .resize-handler { - @apply bg-no-repeat bg-center bg-[size:12px_28px]; - @apply w-3 -ml-px; - @apply opacity-0 hover:opacity-100; - @apply transition-opacity duration-200 ease-in-out; + @apply bg-no-repeat bg-center bg-[size:12px_28px]; + @apply w-3 -ml-px; + @apply opacity-0 hover:opacity-100; + @apply transition-opacity duration-200 ease-in-out; - background-image: url('data:image/svg+xml,'); + background-image: url('data:image/svg+xml,'); } html[data-theme="dark"] .sandpack-container .sp-layout .resize-handler { - background-image: url('data:image/svg+xml,'); + background-image: url('data:image/svg+xml,'); } /* in the initial render, kapa ai widget should be not visible to prevent flickering */ /* in common-layout.tsx we will remove this style */ #kapa-widget-container { - display: none; + display: none; } diff --git a/documentation/src/pages/enterprise/index.tsx b/documentation/src/pages/enterprise/index.tsx index 82b533e0fb208..48a4d20b7364d 100644 --- a/documentation/src/pages/enterprise/index.tsx +++ b/documentation/src/pages/enterprise/index.tsx @@ -30,9 +30,12 @@ const Enterprise: React.FC = () => { as="document" /> - +
- +
- +
- +
- - +
-
+
@@ -82,6 +84,7 @@ function Home() { +
diff --git a/documentation/src/pages/integrations/index.tsx b/documentation/src/pages/integrations/index.tsx index 55f97e9fe3968..73a2cff32be02 100644 --- a/documentation/src/pages/integrations/index.tsx +++ b/documentation/src/pages/integrations/index.tsx @@ -14,7 +14,7 @@ const Title = ({
{
@@ -83,7 +83,7 @@ const Integrations: React.FC = () => {
{
-
+
UI Framework Packages diff --git a/documentation/src/pages/templates/index.tsx b/documentation/src/pages/templates/index.tsx index d311c087351c3..d69a32c114866 100644 --- a/documentation/src/pages/templates/index.tsx +++ b/documentation/src/pages/templates/index.tsx @@ -99,14 +99,18 @@ const Templates: React.FC = () => { as="document" /> - +
- +
{ "w-full", "mx-auto", "px-2 landing-sm:px-8 landing-md:px-0", - "pt-4", - "landing-sm:pt-12", - "landing-md:pt-0", + "pt-0", "w-full max-w-[592px] landing-sm:max-w-[656px] landing-md:max-w-full", )} > { setIsFilterDrawerOpen(true); }} @@ -133,9 +135,8 @@ const Templates: React.FC = () => { "w-full max-w-[592px] landing-sm:max-w-[656px] landing-md:max-w-[896px] landing-lg:max-w-[1200px]", "flex", "items-start", - "gap-6", + "gap-8", "mx-auto", - "mt-12", "relative", "not-prose", )} @@ -152,11 +153,11 @@ const Templates: React.FC = () => { className={clsx( "text-base", "font-semibold", - "dark:text-gray-300 text-gray-900", - "pl-4", + "text-zinc-900", + "pl-3", )} > - Filter Templates + Filter templates { onUIFrameworkChange={(uiFramework) => { handleFilterChange(uiFramework, "uiFramework"); }} - className={clsx("min-w-[180px]", "mt-10")} + className={clsx("min-w-[164px]", "mt-5")} selected={filters} data={dataFilters} /> diff --git a/documentation/src/partials/npm-scripts/install-packages-commands.tsx b/documentation/src/partials/npm-scripts/install-packages-commands.tsx index c747fb710c256..92cb480b3fdd4 100644 --- a/documentation/src/partials/npm-scripts/install-packages-commands.tsx +++ b/documentation/src/partials/npm-scripts/install-packages-commands.tsx @@ -21,7 +21,7 @@ export const InstallPackagesCommand: FC> = ({ }; return ( - + {commands.npm} {children} diff --git a/documentation/src/refine-theme/ai-faq.tsx b/documentation/src/refine-theme/ai-faq.tsx index b17d38d72d218..0d586cf982760 100644 --- a/documentation/src/refine-theme/ai-faq.tsx +++ b/documentation/src/refine-theme/ai-faq.tsx @@ -48,11 +48,11 @@ const AccordionItem: React.FC = ({ question, answer }) => { "rounded-2xl", "text-gray-900 dark:text-white", "border", - "border-gray-200 dark:border-gray-700", + "border-gray-200 dark:border-zinc-700", "transition-colors", "duration-300", { - "bg-gray-50 dark:bg-gray-800": isOpen, + "bg-gray-50 dark:bg-zinc-800": isOpen, "bg-transparent": !isOpen, }, )} @@ -77,11 +77,11 @@ const AccordionItem: React.FC = ({ question, answer }) => { > {isOpen ? ( ) : ( )} @@ -106,7 +106,7 @@ const AccordionItem: React.FC = ({ question, answer }) => { "w-full", "h-[1px]", "border-t", - "border-gray-200 dark:border-gray-700", + "border-gray-200 dark:border-zinc-700", )} />

{description} diff --git a/documentation/src/refine-theme/ai-landing-hero.tsx b/documentation/src/refine-theme/ai-landing-hero.tsx index f5a526c5de4fb..058e0983ce0d5 100644 --- a/documentation/src/refine-theme/ai-landing-hero.tsx +++ b/documentation/src/refine-theme/ai-landing-hero.tsx @@ -76,13 +76,13 @@ export const AiLandingHero = ({ className={clsx( "text-base", "text-gray-600", - "dark:text-gray-200", + "dark:text-zinc-300", "mt-6", "max-w-[588px]", )} > Powered by AI, secure by default and fully React. Export or deploy - whenever you’re ready. + whenever you're ready.

diff --git a/documentation/src/refine-theme/ai-landing-manage-with-ease-scale-with-confidence.tsx b/documentation/src/refine-theme/ai-landing-manage-with-ease-scale-with-confidence.tsx index f75c490135d22..0a6f3539bf7b8 100644 --- a/documentation/src/refine-theme/ai-landing-manage-with-ease-scale-with-confidence.tsx +++ b/documentation/src/refine-theme/ai-landing-manage-with-ease-scale-with-confidence.tsx @@ -21,7 +21,7 @@ export const AiLandingManageWithEaseScaleWithConfidence = ({ "tracking-tight", "text-start", "pl-4 landing-sm:pl-10", - "dark:text-gray-0 text-gray-900", + "dark:text-white text-gray-900", )} > Manage with{" "} diff --git a/documentation/src/refine-theme/ai-landing-packages.tsx b/documentation/src/refine-theme/ai-landing-packages.tsx index 4e1b10241f928..25d908a7dac47 100644 --- a/documentation/src/refine-theme/ai-landing-packages.tsx +++ b/documentation/src/refine-theme/ai-landing-packages.tsx @@ -55,7 +55,8 @@ export const AiLandingPackagesDesktop = ({ className }: Props) => { "justify-start", "gap-4", "dark:bg-ai-landing-packages-dark bg-ai-landing-packages", - "dark:bg-gray-800 bg-gray-50", + "dark:bg-zinc-800 bg-gray-50", + "dark:border dark:border-zinc-700", "rounded-2xl landing-sm:rounded-3xl", "overflow-hidden", )} @@ -122,7 +123,8 @@ export const AiLandingPackagesMobile = ({ className }: Props) => { "w-full", "rounded-2xl landing-sm:rounded-3xl", "dark:bg-ai-landing-packages-mobile-dark bg-ai-landing-packages-mobile", - "dark:bg-gray-800 bg-gray-50", + "dark:bg-zinc-800 bg-gray-50", + "dark:border dark:border-zinc-700", className, )} > @@ -215,7 +217,7 @@ const TextSection = ({ className={clsx( "p-0", "text-base", - "dark:text-gray-400 text-gray-600", + "dark:text-zinc-300 text-gray-600", )} > Out-of-the box integrations for 15+ services including custom REST and @@ -274,7 +276,7 @@ const PackageItem = (props: { "justify-center", "gap-3", "pl-4 pt-4 pb-4 pr-6", - "dark:bg-gray-900 bg-gray-0", + "dark:bg-zinc-900 bg-gray-0", "rounded-full", "cursor-pointer", )} @@ -284,9 +286,7 @@ const PackageItem = (props: { className={clsx( "text-sm", "font-medium", - "dark:bg-landing-packages-text-dark bg-landing-packages-text", - "bg-clip-text", - "text-transparent", + "text-gray-900 dark:text-white", "whitespace-nowrap", )} > diff --git a/documentation/src/refine-theme/ai-landing-step-info.tsx b/documentation/src/refine-theme/ai-landing-step-info.tsx index 0750fbeac5e44..681490559aeac 100644 --- a/documentation/src/refine-theme/ai-landing-step-info.tsx +++ b/documentation/src/refine-theme/ai-landing-step-info.tsx @@ -61,7 +61,7 @@ export const AiLandingStepInfo = ({
{
- +
@@ -319,9 +319,9 @@ const PricingCardPro = () => { "landing-md:max-w-[436px]", "landing-lg:max-w-[384px]", "border", - "dark:border-[#343A46]", + "dark:border-zinc-700", "border-[#E3E4E5]", - "bg-pricing-card-pro-light dark:bg-pricing-card-pro-dark", + "bg-pricing-card-pro-light dark:bg-zinc-800", )} >
@@ -351,7 +351,7 @@ const PricingCardPro = () => {
- +