Add new button style and bump (#58)

Author: carlosabadia

.pre-commit-config.yaml

@@ -2,7 +2,7 @@ fail_fast: true
 
 repos:
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.14.13
+    rev: v0.15.5
     hooks:
       - id: ruff-check
         files: ^reflex_ui/
@@ -11,7 +11,7 @@ repos:
         files: ^reflex_ui/
 
   - repo: https://github.com/codespell-project/codespell
-    rev: v2.4.1
+    rev: v2.4.2
     hooks:
       - id: codespell
         files: ^reflex_ui/

demo/assets/css/globals.css

@@ -1104,6 +1104,14 @@
 		0px -24px 12px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0)),
 		0px -8px 8px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0)),
 		0px -2px 6px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0));
+	--shadow-button-bordered:
+		0 0 0 1px var(--primary-9) inset,
+		0 2px 0 0 rgba(255, 255, 255, 0.22) inset;
+	--shadow-button-outline:
+		0 -1px 0 0 light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) inset,
+		0 0 0 1px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) inset,
+		0 1px 2px 0 light-dark(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0)),
+		0 1px 4px 0 light-dark(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
 	/* Radius */
 	--radius-ui-xxs: calc(var(--radius) - 0.25rem);
 	--radius-ui-xs: calc(var(--radius) - 0.125rem);

reflex_ui/blocks/demo_form.py

@@ -11,7 +11,6 @@
 from reflex.vars.base import get_unique_variable_name
 
 import reflex_ui as ui
-from reflex_ui.components.base.button import BUTTON_VARIANTS, DEFAULT_CLASS_NAME
 
 demo_form_error_message = ClientStateVar.create("demo_form_error_message", "")
 demo_form_open_cs = ClientStateVar.create("demo_form_open", False)
@@ -226,9 +225,7 @@ def select_field(
                 required=required,
                 class_name=ui.cn(
                     "w-full appearance-none pr-9",
-                    DEFAULT_CLASS_NAME,
-                    BUTTON_VARIANTS["variant"]["outline"],
-                    BUTTON_VARIANTS["size"]["md"],
+                    ui.button.class_names.for_button("outline", "md"),
                     "outline-primary-6 focus:border-primary-6",
                 ),
             ),

reflex_ui/blocks/intro_form.py

@@ -11,7 +11,6 @@
 from reflex.vars.base import get_unique_variable_name
 
 import reflex_ui as ui
-from reflex_ui.components.base.button import BUTTON_VARIANTS, DEFAULT_CLASS_NAME
 
 intro_form_error_message = ClientStateVar.create("intro_form_error_message", "")
 intro_form_open_cs = ClientStateVar.create("intro_form_open", False)
@@ -227,9 +226,7 @@ def select_field(
                 required=required,
                 class_name=ui.cn(
                     "w-full appearance-none pr-9",
-                    DEFAULT_CLASS_NAME,
-                    BUTTON_VARIANTS["variant"]["outline"],
-                    BUTTON_VARIANTS["size"]["md"],
+                    ui.button.class_names.for_button("outline", "md"),
                     "outline-primary-6 focus:border-primary-6",
                 ),
             ),

reflex_ui/components/base/button.py

@@ -2,6 +2,7 @@
 
 from typing import Literal
 
+from reflex.components.component import ComponentNamespace
 from reflex.components.core.cond import cond
 from reflex.components.el import Button as BaseButton
 from reflex.vars.base import Var
@@ -10,7 +11,15 @@
 from reflex_ui.components.icons.others import spinner
 
 LiteralButtonVariant = Literal[
-    "primary", "destructive", "outline", "secondary", "ghost", "link", "dark"
+    "primary",
+    "primary-bordered",
+    "destructive",
+    "outline",
+    "outline-shadow",
+    "secondary",
+    "ghost",
+    "link",
+    "dark",
 ]
 LiteralButtonSize = Literal[
     "xs", "sm", "md", "lg", "xl", "icon-xs", "icon-sm", "icon-md", "icon-lg", "icon-xl"
@@ -21,8 +30,10 @@
 BUTTON_VARIANTS = {
     "variant": {
         "primary": "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",
+        "outline-shadow": "dark:border dark:border-secondary-a4 bg-white dark:bg-secondary-1 hover:bg-secondary-3 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",
         "link": "text-secondary-12 underline-offset-4 hover:underline",
@@ -43,6 +54,18 @@
 }
 
 
+class ClassNames:
+    """Class names for button components."""
+
+    DEFAULT = DEFAULT_CLASS_NAME
+    VARIANTS = BUTTON_VARIANTS
+
+    @staticmethod
+    def for_button(variant: str = "primary", size: str = "md") -> str:
+        """Return combined class string for the given variant and size."""
+        return f"{ClassNames.DEFAULT} {ClassNames.VARIANTS['variant'][variant]} {ClassNames.VARIANTS['size'][size]}"
+
+
 class Button(BaseButton, CoreComponent):
     """A custom button component."""
 
@@ -109,4 +132,12 @@ def _exclude_props(self) -> list[str]:
         ]
 
 
-button = Button.create
+class ButtonNamespace(ComponentNamespace):
+    """Namespace for Button components."""
+
+    create = staticmethod(Button.create)
+    class_names = ClassNames
+    __call__ = staticmethod(Button.create)
+
+
+button = ButtonNamespace()