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

instructure · Dec 10, 2024 · 2b2a997 · 2b2a997
1 parent 3bd4c99
commit 2b2a997
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/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 = {

diff --git a/packages/ui-link/src/Link/styles.ts b/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 &&

diff --git a/packages/ui-link/src/Link/theme.ts b/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 {