Update some reflex ui components

carlosabadia · carlosabadia · commit 539fe80f7622 · 2026-04-08T21:17:24.000-07:00
diff --git a/packages/reflex-ui-shared/src/reflex_ui_shared/styles/globals.css b/packages/reflex-ui-shared/src/reflex_ui_shared/styles/globals.css
@@ -1228,10 +1228,10 @@
     --animate-ellipse-reversed: ellipse-reversed 2400ms ease-out infinite;
     /* Radius */
     --radius-ui-xxs: calc(var(--radius) - 0.25rem);
-    --radius-ui-xs: calc(var(--radius) - 0.125rem);
+    --radius-ui-xs: var(--radius);
     --radius-ui-sm: var(--radius);
     --radius-ui-md: calc(var(--radius) + 0.125rem);
-    --radius-ui-lg: calc(var(--radius) + 0.25rem);
+    --radius-ui-lg: calc(var(--radius) + 0.125rem);
     --radius-ui-xl: calc(var(--radius) + 0.375rem);
     --radius-ui-2xl: calc(var(--radius) + 0.5rem);
     /* Width */
diff --git a/packages/reflex-ui/src/reflex_ui/components/base/button.py b/packages/reflex-ui/src/reflex_ui/components/base/button.py
@@ -18,6 +18,7 @@
     "outline-shadow",
     "secondary",
     "ghost",
+    "ghost-highlight",
     "link",
     "dark",
 ]
@@ -33,9 +34,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",
+        "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",
+        "ghost-highlight": "text-secondary-12 hover:text-primary-9",
         "link": "text-secondary-12 underline-offset-4 hover:underline",
         "dark": "bg-secondary-12 text-secondary-1 hover:bg-secondary-12/80",
     },
diff --git a/packages/reflex-ui/src/reflex_ui/components/base/input.py b/packages/reflex-ui/src/reflex_ui/components/base/input.py
@@ -36,8 +36,8 @@
 class ClassNames:
     """Class names for input components."""
 
-    INPUT = "outline-none bg-transparent text-secondary-12 placeholder:text-secondary-9 text-sm leading-normal peer disabled:text-secondary-8 disabled:placeholder:text-secondary-8 w-full data-[disabled]:pointer-events-none font-medium"
-    DIV = "flex flex-row items-center focus-within:shadow-[0px_0px_0px_2px_var(--primary-4)] focus-within:border-primary-a6 not-data-[invalid]:focus-within:hover:border-primary-a6 bg-secondary-1 shrink-0 border border-secondary-a4 hover:border-secondary-a6 transition-[color,box-shadow] text-secondary-9 [&_svg]:pointer-events-none has-data-[disabled]:border-secondary-4 has-data-[disabled]:bg-secondary-3 has-data-[disabled]:text-secondary-8 has-data-[disabled]:cursor-not-allowed cursor-text has-data-[invalid]:border-destructive-10 has-data-[invalid]:focus-within:border-destructive-a11 has-data-[invalid]:focus-within:shadow-[0px_0px_0px_2px_var(--destructive-4)] has-data-[invalid]:hover:border-destructive-a11"
+    INPUT = "outline-none bg-transparent text-secondary-12 placeholder:text-secondary-10 text-sm leading-normal peer disabled:text-secondary-8 disabled:placeholder:text-secondary-8 w-full data-[disabled]:pointer-events-none font-medium"
+    DIV = "flex flex-row items-center focus-within:shadow-[0px_0px_0px_2px_var(--primary-4)] focus-within:border-primary-a6 not-data-[invalid]:focus-within:hover:border-primary-a6 bg-white dark:bg-secondary-3 shrink-0 border border-secondary-4 hover:border-secondary-a6 transition-[color,box-shadow] text-secondary-9 [&_svg]:pointer-events-none has-data-[disabled]:border-secondary-4 has-data-[disabled]:bg-secondary-3 has-data-[disabled]:text-secondary-8 has-data-[disabled]:cursor-not-allowed cursor-text has-data-[invalid]:border-destructive-10 has-data-[invalid]:focus-within:border-destructive-a11 has-data-[invalid]:focus-within:shadow-[0px_0px_0px_2px_var(--destructive-4)] has-data-[invalid]:hover:border-destructive-a11 shadow-[0_1px_2px_0_rgba(0,0,0,0.02),0_1px_4px_0_rgba(0,0,0,0.02)] dark:shadow-none dark:border-secondary-5"
 
 
 class InputBaseComponent(BaseUIComponent):
@@ -153,7 +153,7 @@ def create(cls, *children, **props) -> BaseUIComponent:
         return Div.create(  # pyright: ignore[reportReturnType]
             (
                 Span.create(
-                    hi(icon, class_name="text-secondary-9 size-4 pointer-events-none"),
+                    hi(icon, class_name="text-secondary-12 size-4 pointer-events-none"),
                     aria_hidden="true",
                 )
                 if icon
@@ -183,7 +183,7 @@ def _create_clear_button(id: str, clear_events: list[EventHandler]) -> Button:
                 *clear_events,
             ],
             tab_index=-1,
-            class_name="opacity-100 peer-placeholder-shown:opacity-0 hover:text-secondary-12 transition-colors peer-placeholder-shown:pointer-events-none peer-disabled:pointer-events-none peer-disabled:opacity-0 h-full",
+            class_name="opacity-100 peer-placeholder-shown:opacity-0 hover:text-secondary-12 transition-colors peer-placeholder-shown:pointer-events-none peer-disabled:pointer-events-none peer-disabled:opacity-0 h-full text-secondary-11",
         )
 
     def _exclude_props(self) -> list[str]:
diff --git a/packages/reflex-ui/src/reflex_ui/components/base/tabs.py b/packages/reflex-ui/src/reflex_ui/components/base/tabs.py
@@ -9,16 +9,34 @@
 from reflex_ui.components.base_ui import PACKAGE_NAME, BaseUIComponent
 
 LiteralOrientation = Literal["horizontal", "vertical"]
+LiteralTabsSize = Literal["sm", "md", "lg"]
 
 
 class ClassNames:
     """Class names for tabs components."""
 
     ROOT = "flex flex-col gap-2"
-    LIST = "bg-secondary-3 inline-flex gap-1 p-1 items-center justify-start rounded-ui-md relative z-0"
-    TAB = "h-7 px-1.5 rounded-ui-sm justify-center items-center gap-1.5 inline-flex text-sm font-medium text-secondary-11 cursor-pointer z-[1] hover:text-secondary-12 transition-color text-nowrap data-[active]:text-secondary-12 data-[disabled]:cursor-not-allowed data-[disabled]:text-secondary-8"
-    INDICATOR = "absolute top-1/2 left-0 -z-1 h-7 w-(--active-tab-width) -translate-y-1/2 translate-x-(--active-tab-left) rounded-ui-sm bg-secondary-1 shadow-small transition-all duration-200 ease-in-out"
+    LIST = "bg-secondary-1 inline-flex items-center justify-start relative z-0 shadow-button-outline dark:border dark:border-secondary-4"
+    TAB = "justify-center items-center inline-flex font-medium text-secondary-11 cursor-pointer z-[1] hover:text-primary-9 transition-color text-nowrap data-[active]:text-secondary-12 data-[disabled]:cursor-not-allowed data-[disabled]:text-secondary-8 text-sm"
+    INDICATOR = "absolute left-0 inset-y-0 my-0.5 -z-1 w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200 ease-in-out dark:shadow-[0_1px_0_0_rgba(255,255,255,0.08)_inset] bg-white dark:bg-secondary-3 text-secondary-12 shadow-button-outline"
     PANEL = "flex flex-col gap-2"
+    SIZES = {
+        "list": {
+            "sm": "p-0.5 rounded-ui-md gap-0.5",
+            "md": "p-0.5 rounded-ui-md gap-0.5",
+            "lg": "p-0.5 rounded-ui-md gap-0.5",
+        },
+        "tab": {
+            "sm": "h-7 px-1.5 rounded-ui-sm gap-1",
+            "md": "h-8 px-2 rounded-ui-sm gap-1.5",
+            "lg": "h-9 px-2.5 rounded-ui-sm gap-2",
+        },
+        "indicator": {
+            "sm": "rounded-ui-sm",
+            "md": "rounded-ui-sm",
+            "lg": "rounded-ui-sm",
+        },
+    }
 
 
 class TabsBaseComponent(BaseUIComponent):
@@ -75,17 +93,24 @@ class TabsList(TabsBaseComponent):
     # Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. Defaults to True.
     loop_focus: Var[bool]
 
+    # The size of the tabs list. Defaults to "sm".
+    size: Var[LiteralTabsSize]
+
     @classmethod
     def create(cls, *children, **props) -> BaseUIComponent:
         """Create the tabs list component.
 
         Returns:
             The component.
         """
+        size = props.pop("size", "sm")
         props["data-slot"] = "tabs-list"
-        cls.set_class_name(ClassNames.LIST, props)
+        cls.set_class_name(f"{ClassNames.LIST} {ClassNames.SIZES['list'][size]}", props)
         return super().create(*children, **props)
 
+    def _exclude_props(self) -> list[str]:
+        return [*super()._exclude_props(), "size"]
+
 
 class TabsTab(TabsBaseComponent):
     """An individual interactive tab button that toggles the corresponding panel. Renders a <button> element."""
@@ -104,17 +129,24 @@ class TabsTab(TabsBaseComponent):
     # The render prop
     render_: Var[Component]
 
+    # The size of the tab. Defaults to "sm".
+    size: Var[LiteralTabsSize]
+
     @classmethod
     def create(cls, *children, **props) -> BaseUIComponent:
         """Create the tabs tab component.
 
         Returns:
             The component.
         """
+        size = props.pop("size", "sm")
         props["data-slot"] = "tabs-tab"
-        cls.set_class_name(ClassNames.TAB, props)
+        cls.set_class_name(f"{ClassNames.TAB} {ClassNames.SIZES['tab'][size]}", props)
         return super().create(*children, **props)
 
+    def _exclude_props(self) -> list[str]:
+        return [*super()._exclude_props(), "size"]
+
 
 class TabsIndicator(TabsBaseComponent):
     """A visual indicator that can be styled to match the position of the currently active tab. Renders a <span> element."""
@@ -127,17 +159,26 @@ class TabsIndicator(TabsBaseComponent):
     # The render prop
     render_: Var[Component]
 
+    # The size of the indicator. Defaults to "sm".
+    size: Var[LiteralTabsSize]
+
     @classmethod
     def create(cls, *children, **props) -> BaseUIComponent:
         """Create the tabs indicator component.
 
         Returns:
             The component.
         """
+        size = props.pop("size", "sm")
         props["data-slot"] = "tabs-indicator"
-        cls.set_class_name(ClassNames.INDICATOR, props)
+        cls.set_class_name(
+            f"{ClassNames.INDICATOR} {ClassNames.SIZES['indicator'][size]}", props
+        )
         return super().create(*children, **props)
 
+    def _exclude_props(self) -> list[str]:
+        return [*super()._exclude_props(), "size"]
+
 
 class TabsPanel(TabsBaseComponent):
     """A panel displayed when the corresponding tab is active. Renders a <div> element."""
diff --git a/packages/reflex-ui/src/reflex_ui/components/base/textarea.py b/packages/reflex-ui/src/reflex_ui/components/base/textarea.py
@@ -9,7 +9,7 @@
 class ClassNames:
     """Class names for textarea components."""
 
-    ROOT = "focus:shadow-[0px_0px_0px_2px_var(--primary-4)] focus:border-primary-7 focus:hover:border-primary-7 bg-secondary-1 border border-secondary-a4 hover:border-secondary-a6 transition-[color,box-shadow] disabled:border-secondary-4 disabled:bg-secondary-3 disabled:text-secondary-8 disabled:cursor-not-allowed cursor-text min-h-24 rounded-ui-md text-secondary-12 placeholder:text-secondary-9 text-sm disabled:placeholder:text-secondary-8 w-full outline-none max-h-[15rem] resize-none overflow-y-auto px-3 py-2.5 font-medium"
+    ROOT = "outline-none bg-white dark:bg-secondary-3 shrink-0 border border-secondary-4 hover:border-secondary-a6 transition-[color,box-shadow] focus:shadow-[0px_0px_0px_2px_var(--primary-4)] focus:border-primary-a6 not-data-[invalid]:focus:hover:border-primary-a6 shadow-[0_1px_2px_0_rgba(0,0,0,0.02),0_1px_4px_0_rgba(0,0,0,0.02)] dark:shadow-none dark:border-secondary-5 disabled:border-secondary-4 disabled:bg-secondary-3 disabled:text-secondary-8 disabled:placeholder:text-secondary-8 disabled:cursor-not-allowed cursor-text has-data-[invalid]:border-destructive-10 has-data-[invalid]:focus:border-destructive-a11 has-data-[invalid]:focus:shadow-[0px_0px_0px_2px_var(--destructive-4)] has-data-[invalid]:hover:border-destructive-a11 text-secondary-12 placeholder:text-secondary-10 text-sm leading-normal w-full font-medium min-h-24 max-h-[15rem] resize-none overflow-y-auto px-2.5 py-1.5 rounded-ui-md"
 
 
 class Textarea(TextareaComponent, CoreComponent):
