From 626ef19e4f51b4501eb4a2013a05850abca23851 Mon Sep 17 00:00:00 2001
From: Adam Skoufis <askoufis@users.noreply.github.com>
Date: Mon, 23 Oct 2023 15:39:38 +1100
Subject: [PATCH] TextLink: Ensure consistent underline thickness (#1380)

---
 .changeset/smooth-comics-call.md                 | 14 ++++++++++++++
 .../src/lib/components/TextLink/TextLink.css.ts  | 16 +++++++++++++---
 2 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/smooth-comics-call.md

diff --git a/.changeset/smooth-comics-call.md b/.changeset/smooth-comics-call.md
new file mode 100644
index 00000000000..8206c10ba73
--- /dev/null
+++ b/.changeset/smooth-comics-call.md
@@ -0,0 +1,14 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - TextLink
+  - TextLinkButton
+---
+
+**TextLink, TextLinkButton:** Ensure consistent underline thickness on weak links
+
+A subtle bug affecting weak links was resulting in a change in underline thickness on hover.
+This bug has been fixed such that weak links now always have the same underline thickness regardless of hover state.
diff --git a/packages/braid-design-system/src/lib/components/TextLink/TextLink.css.ts b/packages/braid-design-system/src/lib/components/TextLink/TextLink.css.ts
index d4926dbf68c..3f87c1ae29a 100644
--- a/packages/braid-design-system/src/lib/components/TextLink/TextLink.css.ts
+++ b/packages/braid-design-system/src/lib/components/TextLink/TextLink.css.ts
@@ -27,16 +27,18 @@ const weakLinkVars = assignVars(textLinkVars, {
   colorHover: 'inherit',
 });
 
+const textDecorationThickness = '0.08em';
+
 export const base = style({
   color: textLinkVars.color,
   textDecoration: vars.linkDecoration,
-  textDecorationThickness: '0.08em',
+  textDecorationThickness,
   textUnderlineOffset: 3,
   ':hover': {
     color: textLinkVars.colorHover,
     textDecoration: 'underline',
     /*
-      Duplicating the thickness rule due to inconsistent support
+      Duplicating the thickness property due to inconsistent support
       for shorthand properties of `text-decoration`. Without this,
       applying the above decoration rule resets the thickness in
       browsers that do support shorthands.
@@ -44,7 +46,7 @@ export const base = style({
       We also cannot use the long-form `text-decoration-line` due
       to browser support policy of Edge 16+.
     */
-    textDecorationThickness: '0.08em',
+    textDecorationThickness,
   },
   ':focus-visible': {
     color: textLinkVars.colorHover,
@@ -57,6 +59,14 @@ export const base = style({
 export const weakLink = style({
   vars: weakLinkVars,
   textDecoration: 'underline',
+  /*
+    Duplicating the thickness property again as the `textDecoration`
+    property above overrides the `textDecorationThickness` property
+    in the `base` style due to CSS rule ordering. Without this property,
+    weak links were receiving `auto` thickness instead of the desired
+    value.
+  */
+  textDecorationThickness,
 });
 
 export const regularLinkLightMode = styleVariants({