add default underline for links (#3148)

reflex/components/radix/themes/typography/link.py

@@ -2,11 +2,13 @@
 
 https://www.radix-ui.com/themes/docs/theme/typography
 """
+
 from __future__ import annotations
 
 from typing import Literal
 
 from reflex.components.component import Component, MemoizationLeaf
+from reflex.components.core.colors import color
 from reflex.components.core.cond import cond
 from reflex.components.el.elements.inline import A
 from reflex.components.next.link import NextLink
@@ -23,7 +25,7 @@ from .base import (
     LiteralTextWeight,
 )
 
-LiteralLinkUnderline = Literal["auto", "hover", "always"]
+LiteralLinkUnderline = Literal["auto", "hover", "always", "none"]
 
 next_link = NextLink.create()
 
@@ -45,7 +47,7 @@ class Link(RadixThemesComponent, A, MemoizationLeaf):
     # Removes the leading trim space: "normal" | "start" | "end" | "both"
     trim: Var[LiteralTextTrim]
 
-    # Sets the visibility of the underline affordance: "auto" | "hover" | "always"
+    # Sets the visibility of the underline affordance: "auto" | "hover" | "always" | "none"
     underline: Var[LiteralLinkUnderline]
 
     # Overrides the accent color inherited from the Theme.
@@ -74,12 +76,17 @@ class Link(RadixThemesComponent, A, MemoizationLeaf):
         Returns:
             Component: The link component
         """
+        props.setdefault(":hover", {"color": color("accent", 8)})
+
         is_external = props.pop("is_external", None)
+
         if is_external is not None:
             props["target"] = cond(is_external, "_blank", "")
+
         if props.get("href") is not None:
             if not len(children):
                 raise ValueError("Link without a child will not display")
+
             if "as_child" not in props:
                 # Extract props for the NextLink, the rest go to the Link/A element.
                 known_next_link_props = NextLink.get_props()
@@ -87,6 +94,7 @@ class Link(RadixThemesComponent, A, MemoizationLeaf):
                 for prop in props.copy():
                     if prop in known_next_link_props:
                         next_link_props[prop] = props.pop(prop)
+
                 # If user does not use `as_child`, by default we render using next_link to avoid page refresh during internal navigation
                 return super().create(
                     NextLink.create(*children, **next_link_props),

reflex/components/radix/themes/typography/link.pyi

@@ -9,6 +9,7 @@ from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Literal
 from reflex.components.component import Component, MemoizationLeaf
+from reflex.components.core.colors import color
 from reflex.components.core.cond import cond
 from reflex.components.el.elements.inline import A
 from reflex.components.next.link import NextLink
@@ -17,7 +18,7 @@ from reflex.vars import Var
 from ..base import LiteralAccentColor, RadixThemesComponent
 from .base import LiteralTextSize, LiteralTextTrim, LiteralTextWeight
 
-LiteralLinkUnderline = Literal["auto", "hover", "always"]
+LiteralLinkUnderline = Literal["auto", "hover", "always", "none"]
 next_link = NextLink.create()
 
 class Link(RadixThemesComponent, A, MemoizationLeaf):
@@ -47,8 +48,8 @@ class Link(RadixThemesComponent, A, MemoizationLeaf):
         ] = None,
         underline: Optional[
             Union[
-                Var[Literal["auto", "hover", "always"]],
-                Literal["auto", "hover", "always"],
+                Var[Literal["auto", "hover", "always", "none"]],
+                Literal["auto", "hover", "always", "none"],
             ]
         ] = None,
         color_scheme: Optional[
@@ -237,7 +238,7 @@ class Link(RadixThemesComponent, A, MemoizationLeaf):
             size: Text size: "1" - "9"
             weight: Thickness of text: "light" | "regular" | "medium" | "bold"
             trim: Removes the leading trim space: "normal" | "start" | "end" | "both"
-            underline: Sets the visibility of the underline affordance: "auto" | "hover" | "always"
+            underline: Sets the visibility of the underline affordance: "auto" | "hover" | "always" | "none"
             color_scheme: Overrides the accent color inherited from the Theme.
             high_contrast: Whether to render the text with higher contrast color
             is_external: If True, the link will open in a new tab