From 92cea2f3ab3f2df50c32f59fbdaf32f65da68a22 Mon Sep 17 00:00:00 2001 From: carlosabadia Date: Mon, 13 Apr 2026 18:51:46 -1000 Subject: [PATCH 1/2] update buttons defaults styles --- reflex_ui/components/base/button.py | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/reflex_ui/components/base/button.py b/reflex_ui/components/base/button.py index a8efdbf..e5291fb 100644 --- a/reflex_ui/components/base/button.py +++ b/reflex_ui/components/base/button.py @@ -12,10 +12,12 @@ LiteralButtonVariant = Literal[ "primary", + "primary-old", "primary-bordered", "destructive", "outline", "outline-shadow", + "outline-old", "secondary", "ghost", "ghost-highlight", @@ -30,10 +32,12 @@ BUTTON_VARIANTS = { "variant": { - "primary": "bg-primary-9 text-primary-contrast hover:bg-primary-10", + "primary": "bg-primary-9 text-primary-contrast hover:bg-primary-10 shadow-button-bordered disabled:shadow-none", + "primary-old": "bg-primary-9 text-primary-contrast hover:bg-primary-10", "primary-bordered": "bg-primary-9 text-primary-contrast hover:bg-primary-10 shadow-button-bordered disabled:shadow-none", - "destructive": "bg-destructive-9 hover:bg-destructive-10 text-primary-contrast", - "outline": "border border-secondary-a4 bg-secondary-1 hover:bg-secondary-3 text-secondary-12", + "destructive": "bg-destructive-9 hover:bg-destructive-10 text-primary-contrast shadow-[0_0_0_1px_var(--destructive-9)_inset,0_2px_0_0_rgba(255,255,255,0.22)_inset]", + "outline": "dark:shadow-[0_1px_0_0_rgba(255,255,255,0.08)_inset] bg-white hover:bg-secondary-2 dark:bg-secondary-3 dark:hover:bg-secondary-4 text-secondary-12 shadow-button-outline disabled:shadow-none", + "outline-old": "border border-secondary-a4 bg-secondary-1 hover:bg-secondary-3 text-secondary-12", "outline-shadow": "dark:shadow-[0_1px_0_0_rgba(255,255,255,0.08)_inset] bg-white hover:bg-secondary-2 dark:bg-secondary-3 dark:hover:bg-secondary-4 text-secondary-12 shadow-button-outline disabled:shadow-none", "secondary": "bg-secondary-4 text-secondary-12 hover:bg-secondary-5", "ghost": "hover:bg-secondary-3 text-secondary-11", From 21b69b61be95b35ccb7b68f5b3182776cf9762cd Mon Sep 17 00:00:00 2001 From: carlosabadia Date: Mon, 13 Apr 2026 18:52:44 -1000 Subject: [PATCH 2/2] pyi --- reflex_ui/components/base/button.pyi | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/reflex_ui/components/base/button.pyi b/reflex_ui/components/base/button.pyi index 048d170..b3516d0 100644 --- a/reflex_ui/components/base/button.pyi +++ b/reflex_ui/components/base/button.pyi @@ -16,10 +16,12 @@ from reflex_ui.components.component import CoreComponent LiteralButtonVariant = Literal[ "primary", + "primary-old", "primary-bordered", "destructive", "outline", "outline-shadow", + "outline-old", "secondary", "ghost", "ghost-highlight", @@ -32,10 +34,12 @@ LiteralButtonSize = Literal[ DEFAULT_CLASS_NAME = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:border disabled:border-secondary-4/80 disabled:bg-secondary-3 disabled:text-secondary-8 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 cursor-pointer box-border" BUTTON_VARIANTS = { "variant": { - "primary": "bg-primary-9 text-primary-contrast hover:bg-primary-10", + "primary": "bg-primary-9 text-primary-contrast hover:bg-primary-10 shadow-button-bordered disabled:shadow-none", + "primary-old": "bg-primary-9 text-primary-contrast hover:bg-primary-10", "primary-bordered": "bg-primary-9 text-primary-contrast hover:bg-primary-10 shadow-button-bordered disabled:shadow-none", - "destructive": "bg-destructive-9 hover:bg-destructive-10 text-primary-contrast", - "outline": "border border-secondary-a4 bg-secondary-1 hover:bg-secondary-3 text-secondary-12", + "destructive": "bg-destructive-9 hover:bg-destructive-10 text-primary-contrast shadow-[0_0_0_1px_var(--destructive-9)_inset,0_2px_0_0_rgba(255,255,255,0.22)_inset]", + "outline": "dark:shadow-[0_1px_0_0_rgba(255,255,255,0.08)_inset] bg-white hover:bg-secondary-2 dark:bg-secondary-3 dark:hover:bg-secondary-4 text-secondary-12 shadow-button-outline disabled:shadow-none", + "outline-old": "border border-secondary-a4 bg-secondary-1 hover:bg-secondary-3 text-secondary-12", "outline-shadow": "dark:shadow-[0_1px_0_0_rgba(255,255,255,0.08)_inset] bg-white hover:bg-secondary-2 dark:bg-secondary-3 dark:hover:bg-secondary-4 text-secondary-12 shadow-button-outline disabled:shadow-none", "secondary": "bg-secondary-4 text-secondary-12 hover:bg-secondary-5", "ghost": "hover:bg-secondary-3 text-secondary-11", @@ -76,9 +80,11 @@ class Button(BaseButton, CoreComponent): "ghost-highlight", "link", "outline", + "outline-old", "outline-shadow", "primary", "primary-bordered", + "primary-old", "secondary", ] | Var[ @@ -89,9 +95,11 @@ class Button(BaseButton, CoreComponent): "ghost-highlight", "link", "outline", + "outline-old", "outline-shadow", "primary", "primary-bordered", + "primary-old", "secondary", ] ] @@ -366,9 +374,11 @@ class ButtonNamespace(ComponentNamespace): "ghost-highlight", "link", "outline", + "outline-old", "outline-shadow", "primary", "primary-bordered", + "primary-old", "secondary", ] | Var[ @@ -379,9 +389,11 @@ class ButtonNamespace(ComponentNamespace): "ghost-highlight", "link", "outline", + "outline-old", "outline-shadow", "primary", "primary-bordered", + "primary-old", "secondary", ] ]