TextLink: Ensure consistent underline thickness (#1380)

.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.

packages/braid-design-system/src/lib/components/TextLink/TextLink.css.ts

@@ -27,24 +27,26 @@ 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.
 
       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({