Link Component Style & Token Update Spec

1. Props & Variants Overview

2. Style + Token Comparison Table

3. New Tokens to Add

4. Deprecated / No Longer Used Tokens

5. Complete Design Token Inventory

6. Implementation Notes

• Size Variants: New size prop with "xs", "s", "m" (default), "l" options affects typography, icon size, and gap spacing
• Encapsulated Sizing: Link size automatically determines typography, icon size, and gap - developers set one size for everything
• Wrapper Pattern: Component wraps <a> elements and applies complete styling including typography, icons, and spacing
• Typography Control: Link size applies appropriate typography to wrapped anchor elements for perfect proportions
• Icon Size Mapping:
  • xs → goa-icon size="s" (16px)
  • s → goa-icon size="2" (18px)
  • m → goa-icon size="m" (20px)
  • l → goa-icon size="l" (24px)
• Visited State: Implement using CSS :visited pseudo-class on wrapped anchor elements with new color (#3f48c0)
• Gap Scaling: Size variants use different gap values (3px, 3px, 4px, 5px) for proportional spacing
• Color Updates: All interactive colors applied to wrapped anchor elements for better contrast and hierarchy
• Backward Compatibility: Default Medium size maintains similar behavior to current implementation
• Component Structure: Size prop is additive - existing usage without size continues to work
• Action Functionality: Existing action/navigation features unchanged
• Developer Experience: Single size prop controls all visual proportions - no need to match icon/gap sizes manually

7. Clarifications Needed

✅ Resolved Clarifications:

• Light color variant: Maintained for dark background usage
• Default size behavior: Medium (m) confirmed as default when size prop not specified
• Icon alignment: Will be addressed in design review after initial implementation
• Leading icon support: Maintained with same gap and proportions as trailing icons for each size

8. Existing Tokens Requiring Fallbacks

9. Cross-Component Impact Analysis

10. Implementation Risks & Mitigation

Handoff Checklist for Implementation

Before proceeding to the component-style-update-process.md implementation phase, ensure:

• Complete design token inventory generated
• All tokens without fallbacks identified and documented
• Breaking changes documented with clear migration paths
• Edge cases and clarifications resolved with user (light variant, default size, icon alignment)
• Cross-component impact assessed and documented
• Implementation risks identified with mitigation strategies
• Specification document complete and ready for AI implementation
• User has reviewed and approved all proposed changes

Additional Context

Current Implementation Files Analyzed:

• Global tokens: /design-tokens/data/goa-global-design-tokens.json
• Component tokens: No existing link-design-tokens.json file found
• Link component: /ui-components/libs/web-components/src/components/link/Link.svelte
• Related: /ui-components/libs/web-components/src/components/link-button/LinkButton.svelte

Figma Designs Analyzed:

• Link component: https://www.figma.com/design/Kkd4vrWhbQ9Oqv0WufXbXC/v2.0?node-id=21567-617048

Key Changes Summary:

1. New Size Variants: xs, s, m (default), l - controls icon size and gap spacing proportions
2. Refined Color Palette: Updated default (#006dcc), hover (#045092), and new visited (#3f48c0) colors
3. Size-Specific Spacing: Custom gap spacing for each size variant (3px, 3px, 4px, 5px)
4. Icon Size Coordination: Icons automatically scale with Link size (16px, 18px, 20px, 24px)
5. Typography Control: Component applies typography sizing to wrapped anchor elements for perfect proportions
6. Visited State Support: New pseudo-class styling for link history indication
7. Backward Compatibility: Medium size serves as default, maintaining existing behavior
8. Encapsulated Sizing: Single size prop controls all visual proportions automatically

Expected Usage Patterns:

// Small link - Link component controls ALL sizing automatically
<GoabLink size="s" trailingIcon="open">
  <a href="/page">Small link text</a>
</GoabLink>
// Results in: 16px text, 18px icon, 3px gap

// Medium link (default) - perfect proportions automatically
<GoabLink trailingIcon="open"> {/* size="m" is default */}
  <a href="/page">Medium link text</a>
</GoabLink>
// Results in: 18px text, 20px icon, 4px gap

// Large link - everything scales together
<GoabLink size="l" trailingIcon="open">
  <a href="/page">Large link text</a>
</GoabLink>
// Results in: 24px text, 24px icon, 5px gap

// Extra small for compact interfaces
<GoabLink size="xs" trailingIcon="open">
  <a href="/page">Extra small link</a>
</GoabLink>
// Results in: 14px text, 16px icon, 3px gap