update buttons defaults styles (#71)

* update buttons defaults styles

* pyi

Author: carlosabadia

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",

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",
             ]
         ]