feat(link): add textUnderlineOffset to Link component theme override

Author: igera93

packages/shared-types/src/ComponentThemeVariables.ts

@@ -653,6 +653,7 @@ export type LinkTheme = {
   focusInverseIconOutlineColor: Colors['contrasts']['white1010']
   iconSize: string
   iconPlusTextMargin: Spacing['xxSmall']
+  textUnderlineOffset: string
 }
 
 export type InlineListItemTheme = {

packages/ui-link/src/Link/styles.ts

@@ -57,6 +57,7 @@ const generateStyle = (
     outlineStyle: componentTheme.focusOutlineStyle,
     borderRadius: componentTheme.focusOutlineBorderRadius,
     outlineOffset: '0.25rem',
+    textUnderlineOffset: componentTheme.textUnderlineOffset,
 
     // If TruncateText is used in Link with icon, align the icon and the text vertically
     ...(renderIcon &&

packages/ui-link/src/Link/theme.ts

@@ -71,7 +71,8 @@ const generateComponentTheme = (theme: Theme): LinkTheme => {
     focusInverseIconOutlineColor: colors?.contrasts?.white1010,
 
     iconSize: '1.125em', // make icon slightly larger than inherited font-size,
-    iconPlusTextMargin: spacing?.xxSmall
+    iconPlusTextMargin: spacing?.xxSmall,
+    textUnderlineOffset: 'auto'
   }
 
   return {