From 2b2a997d8c255c2568b44c755754a5fa3bdd0468 Mon Sep 17 00:00:00 2001
From: "ildiko.gera" <ildiko.gera@instructure.com>
Date: Mon, 9 Dec 2024 15:09:42 +0100
Subject: [PATCH] feat(link): add textUnderlineOffset to Link component theme
 override

---
 packages/shared-types/src/ComponentThemeVariables.ts | 1 +
 packages/ui-link/src/Link/styles.ts                  | 1 +
 packages/ui-link/src/Link/theme.ts                   | 3 ++-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/packages/shared-types/src/ComponentThemeVariables.ts
index 6c81308bba..91aebc6567 100644
--- 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
index 4d2c67168c..f67f2d55ed 100644
--- 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
index 6b2583e407..dfbeb55279 100644
--- 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 {