fix: ensure nested link is properly styled when idle

Author: rmartins90

src/button/button.module.css

@@ -32,6 +32,7 @@
 
     /* variant="tertiary" (only has fill when hovered) */
     --reactist-actionable-tertiary-idle-tint: #006f85;
+    --reactist-actionable-tertiary-idle-fill: transparent;
     --reactist-actionable-tertiary-hover-tint: #006f85;
     --reactist-actionable-tertiary-hover-fill: #f2f6f7;
     --reactist-actionable-tertiary-disabled-tint: #99c5ce;

src/text-link/text-link.module.css

@@ -1,8 +1,8 @@
 :root {
     --reactist-text-link-idle-tint: var(--reactist-actionable-tertiary-idle-tint);
     --reactist-text-link-hover-tint: var(--reactist-actionable-tertiary-hover-tint);
-    --reactist-text-link-idle-decoration: underline;
-    --reactist-text-link-hover-decoration: underline;
+    --reactist-text-link-idle-decoration: underline var(--reactist-actionable-tertiary-idle-fill);
+    --reactist-text-link-hover-decoration: underline var(--reactist-text-link-hover-tint);
 }
 
 .container {
@@ -14,6 +14,11 @@
     cursor: pointer;
 }
 
+.container > * {
+    text-decoration: var(--reactist-text-link-idle-decoration);
+    color: var(--reactist-text-link-idle-tint);
+}
+
 /**
  * We need to target the child elements to ensure that styles are
  * applied to the text independently of the DOM elements hierarchy.

src/text-link/text-link.stories.mdx

@@ -41,3 +41,36 @@ A component used to create text-based hyperlinks.
 ## Props
 
 <ArgsTable of={TextLink} />
+
+## Nested elements
+
+When using nested elements inside a `TextLink`, hover styles are properly applied to all children.
+
+<Canvas>
+    <Story
+        name="Nested elements"
+        parameters={{
+            docs: { source: { type: 'code' } },
+            chromatic: { disableSnapshot: false },
+        }}
+    >
+        <Stack space="medium" align="start">
+            <TextLink href="https://www.doist.com/">
+                <span>Link with nested span</span>
+            </TextLink>
+            <TextLink href="https://www.doist.com/">
+                <div>Link with nested div</div>
+            </TextLink>
+            <TextLink href="https://www.doist.com/">
+                Text with <strong>bold</strong> section
+            </TextLink>
+            <TextLink href="https://www.doist.com/">
+                Text with{' '}
+                <a href="https://www.doist.com" target="_blank">
+                    link
+                </a>{' '}
+                section
+            </TextLink>
+        </Stack>
+    </Story>
+</Canvas>