feat(#2956): update Link component for V2

[twjeffery]

Summary

Updates the Link component to support V2 design system styling with size variants and an expanded color system, while maintaining full backward compatibility with V1.

Note: This is a Token+CSS update WITHOUT a version prop - the size and color props handle all variations with sensible defaults.

Changes

New Props

• size ("xsmall" | "small" | "medium" | "large", default "medium"): Controls link typography and icon sizing
• color - Updated to include "dark" option: "interactive" | "dark" | "light" (default "interactive")

V2 Styling Updates

Size Variants

• XSmall: 14px/20px typography with 12px icons, 2px gap (for captions)
• Small: 16px/22px typography with 16px icons, 3px gap (for small text)
• Medium: 18px/24px typography with 18px icons, 4px gap (standard body text)
• Large: 24px/36px typography with 20px icons, 5px gap (for headings)

Color Variants

• Interactive (blue): Default link color, existing behavior maintained
• Dark (black): NEW - For subtle links on light backgrounds
• Light (white): Updated with proper hover/visited states for dark backgrounds

State Styling

• Default: Size-appropriate typography and color
• Hover: Color changes based on variant (darker blue, grey, or light grey)
• Visited: Purple for interactive/dark variants, light grey for light variant
• All states maintain underline decoration

Icon Integration

• Icons automatically size to match link typography
• Gap spacing scales with link size (2px to 5px)
• Leading and trailing icons supported
• Proper vertical alignment with inline text

Technical Implementation

No Version Prop Pattern

• Size and color props are additive with backward-compatible defaults
• size="medium" matches V1 typography (18px/24px)
• color="interactive" maintains V1 blue link behavior
• Token fallbacks ensure V1 environment works correctly

Gap Spacing with Fallbacks

• Base gap: var(--goa-link-gap, 0.25rem) provides 4px default
• Size-specific gaps: var(--goa-link-gap-medium, 0.25rem) with fallback values
• CSS specificity ensures size variants override base gap

Dynamic Icon Sizing

• Helper function maps link size to icon size prop
• XSmall → 2xsmall (12px), Small → xsmall (16px), etc.
• Maintains visual hierarchy across size variants

Related

• Parent issue: Design system 2.0 coded component update #2998
• Component issue: Link 2.0 update #2956
• Design tokens PR for Link
• V2 Figma component

[bdfranck]

Looks good! I have a suggestion of how to improve the icon size and the focus state.

[twjeffery]

@bdfranck I made your suggested changes and added component tokens to the related design tokens PR for the focus styling.

I also saw a couple other things I missed:

1. Fixed color variants not applying to link text - The original implementation only colored icons, not the actual tag text. Added variant-specific slotted anchor rules with !important to override global anchor styles.
2. Updated light color hover state - Changed from greyscale.100 to greyscale.150
3. Custom light visited color - Used #9D8EBB (lighter purple) for better visibility on dark backgrounds, while interactive and dark variants use the standard {color.interactive.visited}