@aurora-ds/components 1.7.3 → 1.7.4

package/dist/cjs/index.js

@@ -928,6 +928,10 @@ const LINK_STYLES = theme.createStyles((theme) => ({
         const hoverColor = color === 'secondary' ? theme.colors.textTertiary : theme.colors.linkHover;
         const activeColor = color === 'secondary' ? theme.colors.textPrimary : theme.colors.linkActive;
         const disabledColor = color === 'secondary' ? theme.colors.textDisabled : theme.colors.linkDisabled;
+        // We always set `text-decoration: underline` and drive visibility via
+        // `text-decoration-color` so the transition is smooth.
+        const underlineVisible = underline === 'always' ? mainColor : 'transparent';
+        const underlineHover = underline !== 'none' ? hoverColor : 'transparent';
         return {
             display: 'inline-flex',
             alignItems: 'center',
@@ -937,22 +941,25 @@ const LINK_STYLES = theme.createStyles((theme) => ({
             fontSize: 'inherit',
             lineHeight: 'inherit',
             fontWeight: 'inherit',
-            textDecoration: underline === 'always' ? 'underline' : 'none',
+            textDecoration: 'underline',
+            textDecorationColor: underlineVisible,
+            textUnderlineOffset: '0.2em',
             cursor: 'pointer',
             borderRadius: theme.radius.xs,
-            transition: `color ${theme.transition.fast}`,
+            transition: `color ${theme.transition.fast}, text-decoration-color ${theme.transition.fast}`,
             ':hover:not([aria-disabled="true"])': {
                 color: hoverColor,
-                textDecoration: underline !== 'none' ? 'underline' : 'none',
+                textDecorationColor: underlineHover,
             },
             ':active:not([aria-disabled="true"])': {
                 color: activeColor,
+                textDecorationColor: underline !== 'none' ? activeColor : 'transparent',
             },
             ':focus-visible': getFocusRingStyles(theme),
             '&[aria-disabled="true"]': {
                 color: disabledColor,
                 cursor: 'not-allowed',
-                textDecoration: 'none',
+                textDecorationColor: 'transparent',
             },
         };
     },
@@ -987,7 +994,12 @@ const Link = ({ ref, label, fontSize = 'sm', underline = 'hover', color = 'defau
             e.preventDefault();
             return;
         }
-        onClick?.(e);
+        // When an onClick handler is provided (e.g. React Router's navigate),
+        // prevent the browser from following the href and let the handler drive navigation.
+        if (onClick) {
+            e.preventDefault();
+            onClick(e);
+        }
     };
     const handleKeyDown = (e) => {
         if (disabled && e.key === 'Enter') {
@@ -7045,8 +7057,8 @@ const lightPalette = {
     skeletonSecondary: '#edf0f5',
     // Link (Blue)
     linkMain: '#1e40af',
-    linkHover: '#1d4ed8',
-    linkActive: '#2563eb',
+    linkHover: '#2563eb',
+    linkActive: '#4f46e5',
     linkDisabled: '#93c5fd',
 };
 
@@ -7323,11 +7335,11 @@ const darkPalette = {
     // Skeleton — visible shimmer on dark surfaces
     skeletonPrimary: '#1e293b',
     skeletonSecondary: '#334155',
-    // Link (Blue)
+    // Link — 3-step progression: sky blue → indigo → violet
     // linkMain (#60a5fa) → contrast ~6.7:1 on surfaceBackground ✓ (AA)
     linkMain: '#60a5fa',
-    linkHover: '#93c5fd',
-    linkActive: '#bfdbfe',
+    linkHover: '#818cf8',
+    linkActive: '#c4b5fd',
     linkDisabled: '#1e40af',
 };