diff --git a/docs/app/assets/components/GradientButton.tsx b/docs/app/assets/components/GradientButton.tsx index a4152cf3913..0a7adcfffcf 100644 --- a/docs/app/assets/components/GradientButton.tsx +++ b/docs/app/assets/components/GradientButton.tsx @@ -33,7 +33,7 @@ const VARIANT_CLASSES: Record = { outline: "shadow-[0_-1px_0_0_rgba(0,0,0,0.08)_inset,0_0_0_1px_rgba(0,0,0,0.08)_inset,0_1px_2px_0_rgba(0,0,0,0.02),0_1px_4px_0_rgba(0,0,0,0.02)] dark:shadow-[0_1px_0_0_rgba(255,255,255,0.16)_inset] bg-white dark:bg-m-slate-10 hover:bg-m-slate-2 dark:hover:bg-m-slate-9 text-m-slate-12 dark:text-m-slate-3", ghost: - "text-m-slate-12 dark:text-m-slate-3 hover:text-primary-10 dark:hover:text-primary-9", + "text-secondary-12 hover:text-primary-10", }; const SIZE_CLASSES: Record = { diff --git a/docs/app/reflex_docs/templates/docpage/docpage.py b/docs/app/reflex_docs/templates/docpage/docpage.py index 96dfe4b5d6b..3eea150c3f7 100644 --- a/docs/app/reflex_docs/templates/docpage/docpage.py +++ b/docs/app/reflex_docs/templates/docpage/docpage.py @@ -182,7 +182,7 @@ def feedback_button_toc() -> rx.Component: size="sm", type="button", on_click=FeedbackState.set_score(1), - class_name="justify-start pl-0 text-m-slate-7 dark:text-m-slate-6", + class_name="justify-start pl-0 text-secondary-11 hover:text-primary-10", ), content=feedback_content(), ) @@ -203,7 +203,7 @@ def copy_to_markdown(text: str) -> rx.Component: type="button", size="sm", variant="ghost", - class_name="justify-start pl-0 text-m-slate-7 dark:text-m-slate-6", + class_name="justify-start pl-0 text-secondary-11 hover:text-primary-10", on_click=[ rx.call_function(copied.set_value(True)), rx.set_clipboard(text), @@ -219,7 +219,7 @@ def ask_ai_chat() -> rx.Component: "Ask AI about this page", size="sm", variant="ghost", - class_name="justify-start pl-0 text-m-slate-7 dark:text-m-slate-6", + class_name="justify-start pl-0 text-secondary-11 hover:text-primary-10", native_button=False, ), to="/ai/integrations/mcp-overview/", @@ -231,7 +231,7 @@ def link_pill(text: str, href: str) -> rx.Component: text, href=href, underline="none", - class_name="lg:flex hidden flex-row justify-center items-center gap-2 lg:border-slate-5 bg-slate-3 lg:bg-slate-1 hover:bg-slate-3 shadow-none lg:shadow-large px-3 py-0.5 lg:border lg:border-solid border-none rounded-lg lg:rounded-full w-auto font-small font-small text-slate-9 !hover:text-slate-11 hover:!text-slate-9 truncate whitespace-nowrap transition-bg transition-color cursor-pointer", + class_name="lg:flex hidden flex-row justify-center items-center gap-2 lg:border-secondary-5 bg-secondary-3 lg:bg-secondary-1 hover:bg-secondary-3 shadow-none lg:shadow-large px-3 py-0.5 lg:border lg:border-solid border-none rounded-lg lg:rounded-full w-auto font-small font-small text-secondary-11 !hover:text-secondary-12 hover:!text-secondary-11 truncate whitespace-nowrap transition-bg transition-color cursor-pointer", ) @@ -626,7 +626,7 @@ def breadcrumb(path: str, nav_sidebar: rx.Component, doc_content: str | None = N breadcrumbs.append( rx.el.a( to_title_case(to_snake_case(segment), sep=" "), - class_name="min-h-8 flex items-center text-sm font-[525] text-m-slate-12 dark:text-m-slate-3 last:text-m-slate-7 dark:last:text-m-slate-6 hover:text-primary-10 dark:hover:text-primary-9" + class_name="min-h-8 flex items-center text-sm font-[525] text-secondary-12 last:text-secondary-11 hover:text-primary-11" + (" truncate" if i == len(segments) - 1 else ""), underline="none", href=current_path, @@ -638,13 +638,13 @@ def breadcrumb(path: str, nav_sidebar: rx.Component, doc_content: str | None = N breadcrumbs.append( ui.icon( "ArrowRight01Icon", - class_name="lg:flex hidden dark:text-m-slate-6 text-m-slate-7 size-4", + class_name="lg:flex hidden text-secondary-11 size-4", ), ) breadcrumbs.append( rx.text( "/", - class_name="font-sm dark:text-m-slate-6 text-m-slate-7 lg:hidden flex", + class_name="font-sm text-secondary-11 lg:hidden flex", ) ) from reflex_site_shared.views.hosting_banner import HostingBannerState @@ -808,14 +808,14 @@ def wrapper(*args, **kwargs) -> rx.Component: rx.el.main( rx.box( sidebar, - class_name=( - "w-[19.5rem] shrink-0 hidden lg:block z-10 border-r border-m-slate-4 dark:border-m-slate-10 sticky left-0 " - "before:content-[''] before:absolute before:top-0 before:bottom-0 before:right-0 before:w-[100vw] before:bg-white-1 dark:before:bg-secondary-2 before:-z-10 " - + rx.cond( + class_name=ui.cn( + "w-[19.5rem] shrink-0 hidden lg:block z-10 border-r border-secondary-4 sticky left-0 " + "before:content-[''] before:absolute before:top-0 before:bottom-0 before:right-0 before:w-[100vw] before:bg-white-1 before:-z-10", + rx.cond( HostingBannerState.is_banner_visible, - " top-[113px] h-[calc(100vh-113px)]", - " top-[77px] h-[calc(100vh-77px)]", - ) + "top-[113px] h-[calc(100vh-113px)]", + "top-[77px] h-[calc(100vh-77px)]", + ), ), ), rx.box( @@ -825,13 +825,13 @@ def wrapper(*args, **kwargs) -> rx.Component: nav_sidebar=nav_sidebar, doc_content=doc_content, ), - class_name=( - "px-0 pt-0 mb-[2rem]" - + rx.cond( + class_name=ui.cn( + "px-0 pt-0 mb-[2rem]", + rx.cond( HostingBannerState.is_banner_visible, - " mt-[90px]", + "mt-[90px]", "", - ) + ), ), ), rx.box( @@ -855,10 +855,10 @@ def wrapper(*args, **kwargs) -> rx.Component: rx.icon( "align-left", size=14, - class_name="dark:text-m-slate-3 text-m-slate-12", + class_name="text-secondary-12", ), "On This Page", - class_name="text-sm h-8 flex items-center gap-1.5 justify-start font-[525] dark:text-m-slate-3 text-m-slate-12", + class_name="text-sm h-8 flex items-center gap-1.5 justify-start font-[525] text-secondary-12", ), rx.el.ul( *[ @@ -866,7 +866,7 @@ def wrapper(*args, **kwargs) -> rx.Component: rx.el.li( rx.el.a( text, - class_name="text-sm font-[525] text-m-slate-7 dark:text-m-slate-6 pl-4 py-1 block hover:text-m-slate-9 dark:hover:text-m-slate-5 transition-colors truncate", + class_name="text-sm font-[525] text-secondary-11 pl-4 py-1 block hover:text-secondary-12 transition-colors truncate", href=path + "#" + text.lower().replace(" ", "-"), @@ -877,7 +877,7 @@ def wrapper(*args, **kwargs) -> rx.Component: rx.el.li( rx.el.a( text, - class_name="text-sm font-[525] text-m-slate-7 dark:text-m-slate-6 pl-4 py-1 block hover:text-m-slate-9 dark:hover:text-m-slate-5 transition-colors truncate", + class_name="text-sm font-[525] text-secondary-11 pl-4 py-1 block hover:text-secondary-12 transition-colors truncate", href=path + "#" + text.lower().replace( @@ -889,7 +889,7 @@ def wrapper(*args, **kwargs) -> rx.Component: else rx.el.li( rx.el.a( text, - class_name="text-sm font-[525] text-m-slate-7 dark:text-m-slate-6 pl-8 py-1 block hover:text-m-slate-9 dark:hover:text-m-slate-5 transition-colors truncate", + class_name="text-sm font-[525] text-secondary-11 pl-8 py-1 block hover:text-secondary-12 transition-colors truncate", href=path + "#" + text.lower().replace( @@ -902,7 +902,7 @@ def wrapper(*args, **kwargs) -> rx.Component: for level, text in toc ], id="toc-navigation", - class_name="flex flex-col gap-y-1 list-none shadow-[1.5px_0_0_0_var(--m-slate-4)_inset] dark:shadow-[1.5px_0_0_0_var(--m-slate-9)_inset] max-h-[80vh]", + class_name="flex flex-col gap-y-1 list-none shadow-[1.5px_0_0_0_var(--secondary-4)_inset] max-h-[80vh]", ), rx.el.div( feedback_button_toc(), @@ -929,7 +929,7 @@ def wrapper(*args, **kwargs) -> rx.Component: ), class_name="flex justify-center mx-auto mt-0 max-w-[108rem] h-full min-h-screen w-full", ), - class_name="flex flex-col justify-center bg-m-slate-1 dark:bg-m-slate-12 w-full relative", + class_name="flex flex-col justify-center bg-secondary-1 w-full relative", on_mount=rx.call_script(right_sidebar_item_highlight()), ) diff --git a/docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py b/docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py index 8a86bf0d3fa..f8146f984a6 100644 --- a/docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py +++ b/docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py @@ -119,14 +119,14 @@ def sidebar_leaf( item.link == url, sidebar_link( rx.el.div( - class_name="absolute left-0 top-1/2 -translate-y-1/2 w-full h-8 rounded-lg bg-m-slate-2 dark:bg-slate-3 z-[-1]", + class_name="absolute left-0 top-1/2 -translate-y-1/2 w-full h-8 rounded-lg bg-secondary-2 dark:bg-secondary-3 z-[-1]", ), rx.flex( rx.text( item.names, class_name="text-sm text-primary-10 font-[525] transition-color pl-4", ), - class_name="border-l-[1.5px] border-primary-10 relative ml-[2.5rem] max-w-[14rem] h-8 flex items-center", + class_name="border-l-[1.5px] border-primary-9 relative ml-[2.5rem] max-w-[14rem] h-8 flex items-center", ), href=item.link, class_name="w-full relative", @@ -137,7 +137,7 @@ def sidebar_leaf( item.names, class_name="text-sm text-secondary-11 hover:text-secondary-12 transition-color w-full font-[525]", ), - class_name="border-l-[1.5px] border-m-slate-4 dark:border-m-slate-9 hover:border-m-slate-8 dark:hover:border-m-slate-5 pl-4 h-8 flex items-center", + class_name="border-l-[1.5px] border-secondary-4 hover:border-secondary-12 pl-4 h-8 flex items-center", ), href=item.link, class_name="w-full ml-[2.5rem]", @@ -209,14 +209,14 @@ def sidebar_item_comp( "ArrowDown01Icon", class_name="size-4 group-data-[state=open]:rotate-180 transition-transform", ), - class_name="!px-0 flex items-center !bg-transparent !hover:bg-transparent !py-1 !pr-0 w-full !text-m-slate-7 hover:!text-m-slate-11 dark:hover:!text-m-slate-5 dark:!text-m-slate-6 transition-color group xl:max-w-[14rem]", + class_name="!px-0 flex items-center !bg-transparent !hover:bg-transparent !py-1 !pr-0 w-full !text-secondary-11 hover:!text-secondary-12 transition-color group xl:max-w-[14rem]", ), class_name="justify-start !ml-[2.5rem]", ), rx.accordion.content( rx.accordion.root( rx.accordion.item( - class_name="absolute left-[2.5rem] size-full !shadow-[1.5px_0_0_0_var(--m-slate-4)_inset] dark:!shadow-[1.5px_0_0_0_var(--m-slate-9)_inset] z-[-1] pointer-events-none !rounded-none", + class_name="absolute left-[2.5rem] size-full !shadow-[1.5px_0_0_0_var(--secondary-4)_inset] z-[-1] pointer-events-none !rounded-none", ), *[ sidebar_item_comp( @@ -335,7 +335,7 @@ def sidebar_category(name: str, url: str, icon: str, index: int): "flex flex-row justify-start items-center gap-2.5 w-full text-sm text-secondary-11 hover:text-secondary-12 h-8", rx.cond( SidebarState.sidebar_index == index, - "text-slate-12", + "text-primary-10 hover:text-primary-10", "", ), ), @@ -345,7 +345,7 @@ def sidebar_category(name: str, url: str, icon: str, index: int): rx.cond( SidebarState.sidebar_index == index, rx.el.div( - class_name="absolute left-0 top-0 w-full h-full bg-m-slate-2 dark:bg-slate-3 rounded-lg z-[-1]", + class_name="absolute left-0 top-0 w-full h-full bg-secondary-2 dark:bg-secondary-3 rounded-lg z-[-1]", ), ), rx.el.a( @@ -377,11 +377,11 @@ def create_sidebar_section( rx.link( rx.el.h2( section_title, - class_name="font-mono text-m-slate-12 dark:text-m-slate-3 hover:text-primary-10 dark:hover:text-primary-9 uppercase text-[0.8125rem] leading-6 font-medium", + class_name="font-mono text-secondary-12 hover:text-primary-11 uppercase text-[0.8125rem] leading-6 font-medium", ), underline="none", href=section_url, - class_name="h-8 mb-2 flex items-center justify-start ml-[2.5rem]", + class_name="h-8 mb-4 flex items-center justify-start ml-[2.5rem]", ), rx.accordion.root( *[ diff --git a/packages/reflex-site-shared/src/reflex_site_shared/components/docs.py b/packages/reflex-site-shared/src/reflex_site_shared/components/docs.py index cbc127c9078..9262f9ffea3 100644 --- a/packages/reflex-site-shared/src/reflex_site_shared/components/docs.py +++ b/packages/reflex-site-shared/src/reflex_site_shared/components/docs.py @@ -15,12 +15,10 @@ def right_sidebar_item_highlight(): setTimeout(() => { const tocLinks = document.querySelectorAll('#toc-navigation a'); const activeClasses = [ - 'text-primary-9', - 'dark:text-primary-11', - 'shadow-[1.5px_0_0_0_var(--primary-11)_inset]', - 'dark:shadow-[1.5px_0_0_0_var(--primary-9)_inset]', + 'text-primary-10', + 'shadow-[1.5px_0_0_0_var(--primary-9)_inset]', ]; - const defaultClasses = ['text-m-slate-7', 'dark:text-m-slate-6']; + const defaultClasses = ['text-secondary-11']; function normalizeId(id) { return id.toLowerCase().replace(/\s+/g, '-'); diff --git a/packages/reflex-site-shared/src/reflex_site_shared/utils/docpage.py b/packages/reflex-site-shared/src/reflex_site_shared/utils/docpage.py index f997566670f..51e7b3243ea 100644 --- a/packages/reflex-site-shared/src/reflex_site_shared/utils/docpage.py +++ b/packages/reflex-site-shared/src/reflex_site_shared/utils/docpage.py @@ -13,12 +13,10 @@ def right_sidebar_item_highlight(): setTimeout(() => { const tocLinks = document.querySelectorAll('#toc-navigation a'); const activeClasses = [ - 'text-primary-9', - 'dark:text-primary-11', - 'shadow-[1.5px_0_0_0_var(--primary-11)_inset]', - 'dark:shadow-[1.5px_0_0_0_var(--primary-9)_inset]', + 'text-primary-10', + 'shadow-[1.5px_0_0_0_var(--primary-9)_inset]', ]; - const defaultClasses = ['text-m-slate-7', 'dark:text-m-slate-6']; + const defaultClasses = ['text-secondary-11']; function normalizeId(id) { return id.toLowerCase().replace(/\s+/g, '-');