From 262787cf3ea3a7cc5a40c7c9e4f6f9212e8c6aa6 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Mon, 2 Sep 2024 22:58:41 +0200
Subject: [PATCH 1/4] Inherit link color in components using the Feedback color
 collection (#492)

---
 src/components/Alert/Alert.module.scss |  7 ++-
 src/components/Alert/README.md         | 15 ++++-
 src/components/Card/Card.module.scss   | 11 ++--
 src/components/Card/README.md          | 22 +++++++
 src/components/TextLink/README.md      | 13 +++-
 src/components/TextLink/_theme.scss    |  6 +-
 src/styles/elements/_links.scss        |  8 ++-
 src/styles/theme/_links.scss           |  6 +-
 src/styles/tools/_collections.scss     | 84 ++++++++++++++++++++++++--
 9 files changed, 147 insertions(+), 25 deletions(-)

diff --git a/src/components/Alert/Alert.module.scss b/src/components/Alert/Alert.module.scss
index cd8c2b72..658fe9c5 100644
--- a/src/components/Alert/Alert.module.scss
+++ b/src/components/Alert/Alert.module.scss
@@ -46,9 +46,11 @@
         line-height: settings.$line-height;
     }
 
-    .message a,
-    .message strong {
+    .message :is(a, strong) {
         font-weight: theme.$emphasis-font-weight;
+    }
+
+    .message strong {
         color: var(--rui-local-foreground-color);
     }
 
@@ -73,6 +75,7 @@
             $variant-name: "color",
             $variant-value: $color,
             $properties: settings.$themeable-properties,
+            $inherit-link-color: true,
         );
     }
 }
diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md
index befc886e..292bfd4d 100644
--- a/src/components/Alert/README.md
+++ b/src/components/Alert/README.md
@@ -41,6 +41,8 @@ Success alerts confirm that an operation has been processed successfully.
 ```docoff-react-preview
 <Alert color="success">
   <strong>Success:</strong> Settings have been successfully saved.
+  {' '}
+  <TextLink href="/" label="Undo" />
 </Alert>
 ```
 
@@ -53,7 +55,7 @@ suggest an action to resolve the problem.
 <Alert color="warning">
   <strong>Warning:</strong> Your credit card is going to expire soon.
   {' '}
-  <a href="/">Update my payment options</a>
+  <TextLink href="/" label="Update my payment options" />
 </Alert>
 ```
 
@@ -68,7 +70,7 @@ problem.
   <strong>Error:</strong> Cannot connect to the server. Is your internet
   connection working fine?
   {' '}
-  <a href="/">Try again</a>
+  <TextLink href="/" label="Try again" />
 </Alert>
 ```
 
@@ -80,6 +82,8 @@ This kind of alert can be used to display helpful information.
 <Alert color="help">
   <strong>Help:</strong> You should choose a password you don&apos;t use
   anywhere else.
+  {' '}
+  <TextLink href="/" label="Help me choose" />
 </Alert>
 ```
 
@@ -90,6 +94,8 @@ Another common, informative alert.
 ```docoff-react-preview
 <Alert color="info">
   <strong>Info:</strong> This feature depends on user&apos;s OS preferences.
+  {' '}
+  <TextLink href="/" label="Open preferences" />
 </Alert>
 ```
 
@@ -100,6 +106,8 @@ Neutral informative alert.
 ```docoff-react-preview
 <Alert>
   <strong>Note:</strong> This feature may not be available in all regions.
+  {' '}
+  <TextLink href="/" label="Show list of regions" />
 </Alert>
 ```
 
@@ -111,6 +119,8 @@ Light alert variant.
 <docoff-placeholder dark>
   <Alert color="light">
     <strong>Light alert:</strong> Stands out on dark backgrounds.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </Alert>
 </docoff-placeholder>
 ```
@@ -122,6 +132,7 @@ Dark alert variant.
 ```docoff-react-preview
 <Alert color="dark">
   <strong>Dark alert:</strong> Stands out on light backgrounds.
+  <TextLink href="/" label="This is a link" />
 </Alert>
 ```
 
diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
index 03befec5..92032d79 100644
--- a/src/components/Card/Card.module.scss
+++ b/src/components/Card/Card.module.scss
@@ -34,18 +34,19 @@
         box-shadow: theme.$raised-box-shadow;
     }
 
+    .isRootDisabled {
+        background-color: theme.$disabled-background-color;
+        opacity: theme.$disabled-opacity;
+    }
+
     @each $color in settings.$colors {
         @include collections.generate-class(
             $prefix: "rui-",
             $component-name: "Card",
             $variant-name: "color",
             $variant-value: $color,
+            $inherit-link-color: true,
             $properties: settings.$themeable-properties,
         );
     }
-
-    .isRootDisabled {
-        background-color: theme.$disabled-background-color;
-        opacity: theme.$disabled-opacity;
-    }
 }
diff --git a/src/components/Card/README.md b/src/components/Card/README.md
index 1604f519..42b2d3a1 100644
--- a/src/components/Card/README.md
+++ b/src/components/Card/README.md
@@ -154,6 +154,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="success">
   <CardBody>
     Hello! I&apos;m success variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="success" />
@@ -162,6 +164,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="warning">
   <CardBody>
     Hello! I&apos;m warning variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="warning" />
@@ -170,6 +174,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="danger">
   <CardBody>
     Hello! I&apos;m danger variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="danger" />
@@ -178,6 +184,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="help">
   <CardBody>
     Hello! I&apos;m help variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="help" />
@@ -186,6 +194,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="info">
   <CardBody>
     Hello! I&apos;m info variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="info" />
@@ -194,6 +204,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="note">
   <CardBody>
     Hello! I&apos;m note variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="note" />
@@ -202,6 +214,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card>
   <CardBody>
     Hello! I&apos;m light (default) variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="dark" />
@@ -210,6 +224,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="dark">
   <CardBody>
     Hello! I&apos;m dark variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="light" />
@@ -228,6 +244,8 @@ its interactive elements to disallow user's interaction.
 <Card disabled>
   <CardBody>
     Hello! I&apos;m a disabled card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" disabled />
@@ -236,6 +254,8 @@ its interactive elements to disallow user's interaction.
 <Card disabled raised>
   <CardBody>
     Hello! I&apos;m a disabled raised card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" disabled />
@@ -244,6 +264,8 @@ its interactive elements to disallow user's interaction.
 <Card color="success" disabled>
   <CardBody>
     Hello! I&apos;m a disabled success variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="success" disabled />
diff --git a/src/components/TextLink/README.md b/src/components/TextLink/README.md
index 32e87605..656d5df2 100644
--- a/src/components/TextLink/README.md
+++ b/src/components/TextLink/README.md
@@ -64,13 +64,20 @@ helps to improve its accessibility.
 
 ## Theming
 
+ℹ️ The TextLink component is context-aware and can inherit text color from its
+parent component. This applies for components using
+[Feedback color collection](/docs/foundation/collections#colors) and for
+components in any of the supported
+[validation states](/docs/foundation/colors#validation-states).
+In such cases, the custom properties marked with an asterisk (\*) are ignored.
+
 | Custom Property                           | Description                         |
 |-------------------------------------------|-------------------------------------|
-| `--rui-TextLink__color`                   | Text color                          |
+| `--rui-TextLink__color` \*                | Text color                          |
 | `--rui-TextLink__text-decoration`         | Text decoration, e.g. underline     |
-| `--rui-TextLink--hover__color`            | Text color on hover                 |
+| `--rui-TextLink--hover__color` \*         | Text color on hover                 |
 | `--rui-TextLink--hover__text-decoration`  | Text decoration on hover            |
-| `--rui-TextLink--active__color`           | Text color in the active state      |
+| `--rui-TextLink--active__color` \*        | Text color in the active state      |
 | `--rui-TextLink--active__text-decoration` | Text decoration in the active state |
 
 [a-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes
diff --git a/src/components/TextLink/_theme.scss b/src/components/TextLink/_theme.scss
index 54aab00d..a63ef119 100644
--- a/src/components/TextLink/_theme.scss
+++ b/src/components/TextLink/_theme.scss
@@ -1,6 +1,6 @@
-$color: var(--rui-TextLink__color);
+$color: var(--rui-local-link-color, var(--rui-TextLink__color));
 $text-decoration: var(--rui-TextLink__text-decoration);
-$hover-color: var(--rui-TextLink--hover__color);
+$hover-color: var(--rui-local-link-color-hover, var(--rui-TextLink--hover__color));
 $hover-text-decoration: var(--rui-TextLink--hover__text-decoration);
-$active-color: var(--rui-TextLink--active__color);
+$active-color: var(--rui-local-link-color-active, var(--rui-TextLink--active__color));
 $active-text-decoration: var(--rui-TextLink--active__text-decoration);
diff --git a/src/styles/elements/_links.scss b/src/styles/elements/_links.scss
index 0d96b513..30f62de2 100644
--- a/src/styles/elements/_links.scss
+++ b/src/styles/elements/_links.scss
@@ -4,9 +4,13 @@ a {
     text-decoration: links.$decoration;
     color: links.$color;
 
-    &:hover,
-    &:focus {
+    &:hover {
         text-decoration: links.$hover-decoration;
         color: links.$hover-color;
     }
+
+    &:active {
+        text-decoration: links.$active-decoration;
+        color: links.$active-color;
+    }
 }
diff --git a/src/styles/theme/_links.scss b/src/styles/theme/_links.scss
index 189ae654..c3fc7e26 100644
--- a/src/styles/theme/_links.scss
+++ b/src/styles/theme/_links.scss
@@ -1,6 +1,6 @@
-$color: var(--rui-color-text-link);
+$color: var(--rui-local-link-color, var(--rui-color-text-link));
 $decoration: var(--rui-text-decoration-link);
-$hover-color: var(--rui-color-text-link-hover);
+$hover-color: var(--rui-local-link-color-hover, var(--rui-color-text-link-hover));
 $hover-decoration: var(--rui-text-decoration-link-hover);
-$active-color: var(--rui-color-text-link-active);
+$active-color: var(--rui-local-link-color-active, var(--rui-color-text-link-active));
 $active-decoration: var(--rui-text-decoration-link-active);
diff --git a/src/styles/tools/_collections.scss b/src/styles/tools/_collections.scss
index f506a08f..1fe3a690 100644
--- a/src/styles/tools/_collections.scss
+++ b/src/styles/tools/_collections.scss
@@ -1,6 +1,47 @@
+@use "sass:list";
+@use "sass:map";
+@use "../settings/collections";
 @use "string" as rui-string;
 
-// Mixin to generate CSS custom properties for a set of visual properties.
+// Function to get the parent collection category by value.
+//
+// 1. Returns **only the first** matching collection category.
+//
+// @param {String} $value - The value to get the category for.
+// @param {Map} $collections - The collections map to search in.
+
+@function _get-category-by-value($value, $collections) {
+    @each $category, $values in $collections {
+        @if list.index($values, $value) {
+            @return $category; // 1.
+        }
+    }
+
+    @error
+        "Supplied value \""
+        + $value
+        + "\" not found in any category ("
+        + map.keys($collections)
+        + ")";
+}
+
+// Function to get the matching link color for a component variant.
+//
+// @param {String} $value - The value to get the link color for.
+
+@function _get-link-color-by-value($value) {
+    @if $value == "light" {
+        @return "dark";
+    }
+
+    @if $value == "dark" {
+        @return "light";
+    }
+
+    @return $value;
+}
+
+// Mixin to generate CSS custom properties for a component theme.
 //
 // 1. Generates a CSS custom property for each property in the `$properties` list.
 // 2. Theming of the disabled state is optional, so the `default` theme options are used (via CSS custom property
@@ -15,7 +56,7 @@
 //
 // Example:
 //
-// @include generate-properties(
+// @include generate-component-properties(
 //     $prefix: "rui-",
 //     $component-name: "Card",
 //     $variant-name: "color",
@@ -29,7 +70,7 @@
 // --rui-local-border-color: var(--rui-Card--success__border-color);
 // --rui-local-background-color: var(--rui-Card--success__background-color);
 
-@mixin generate-properties(
+@mixin generate-component-properties(
     $prefix,
     $component-name,
     $modifier-value: null,
@@ -72,6 +113,33 @@
     }
 }
 
+// Mixin to generate CSS custom properties for links theme.
+//
+// @param {String} $prefix - The prefix for the CSS custom properties.
+// @param {String} $variant-value - The value of the variant.
+//
+// Example:
+//
+// @include generate-link-properties(
+//     $prefix: "rui-",
+//     $variant-value: "success",
+// );
+//
+// … will output:
+//
+// --rui-local-link-color: var(--rui-color-feedback-success);
+// --rui-local-link-color-hover: var(--rui-color-feedback-success-hover);
+// --rui-local-link-color-active: var(--rui-color-feedback-success-active);
+
+@mixin generate-link-properties($prefix, $variant-value) {
+    $color-category: _get-category-by-value($value: $variant-value, $collections: collections.$colors);
+    $resolved-variant-value: _get-link-color-by-value($variant-value);
+
+    --#{$prefix}local-link-color: var(--rui-color-#{$color-category}-#{$resolved-variant-value});
+    --#{$prefix}local-link-color-hover: var(--rui-color-#{$color-category}-#{$resolved-variant-value}-hover);
+    --#{$prefix}local-link-color-active: var(--rui-color-#{$color-category}-#{$resolved-variant-value}-active);
+}
+
 // Mixin to generate CSS classes for a component variant.
 //
 // @param {String} $prefix - The prefix for the CSS custom properties.
@@ -81,6 +149,7 @@
 // @param {String} $variant-name - The name of the variant.
 // @param {String} $variant-value - The value of the variant.
 // @param {Boolean} $generate-interaction-states - Whether to generate interaction states (disabled, hover, active).
+// @param {Boolean} $inherit-link-color - Whether to inherit link color from the component variant.
 // @param {List} $properties - The list of properties to generate CSS custom properties for.
 //
 // Examples:
@@ -147,6 +216,7 @@
     $variant-name,
     $variant-value,
     $generate-interaction-states: false,
+    $inherit-link-color: false,
     $properties,
 ) {
     $modifier-class-name:
@@ -168,7 +238,7 @@
 
             @each $interaction-state, $interaction-state-selector in $interaction-state-selector-map {
                 #{$interaction-state-selector} {
-                    @include generate-properties(
+                    @include generate-component-properties(
                         $prefix: $prefix,
                         $component-name: $component-name,
                         $modifier-value: $modifier-value,
@@ -179,7 +249,7 @@
                 }
             }
         } @else {
-            @include generate-properties(
+            @include generate-component-properties(
                 $prefix: $prefix,
                 $component-name: $component-name,
                 $modifier-value: $modifier-value,
@@ -187,5 +257,9 @@
                 $properties: $properties,
             );
         }
+
+        @if $inherit-link-color {
+            @include generate-link-properties($prefix: $prefix, $variant-value: $variant-value);
+        }
     }
 }

From bac1e2152ac7acdef68051249f8f8f1f33cc165b Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Wed, 27 Nov 2024 17:59:07 +0100
Subject: [PATCH 2/4] Inherit link color in components that support validation
 states (#492)

---
 src/components/CheckboxField/README.md      | 40 ++++++++++++++++++---
 src/components/TextField/README.md          | 16 +++++++--
 src/components/Toggle/README.md             | 10 +++++-
 src/styles/theme/_form-fields.scss          | 19 ++++++++++
 src/styles/tools/form-fields/_variants.scss |  6 +++-
 webpack.config.babel.js                     |  2 +-
 6 files changed, 83 insertions(+), 10 deletions(-)

diff --git a/src/components/CheckboxField/README.md b/src/components/CheckboxField/README.md
index a280694a..51594d3e 100644
--- a/src/components/CheckboxField/README.md
+++ b/src/components/CheckboxField/README.md
@@ -18,7 +18,13 @@ React.createElement(() => {
   return (
     <CheckboxField
       checked={agree}
-      label="I agree"
+      label={(
+          <>
+            I have read and agree with
+            {' '}
+            <TextLink href="#" label="terms and conditions" />
+          </>
+        )}
       onChange={() => setAgree(!agree)}
     />
   );
@@ -132,20 +138,44 @@ React.createElement(() => {
     <>
       <CheckboxField
         checked={agree}
-        label="I have read and agree with terms and conditions"
+        label={(
+          <>
+            I have read and agree with
+            {' '}
+            <TextLink href="#" label="terms and conditions" />
+          </>
+        )}
         onChange={() => setAgree(!agree)}
         validationState="valid"
       />
       <CheckboxField
         checked={agree}
-        label="I have read and agree with terms and conditions"
+        label={(
+          <>
+            I have read and agree with
+            {' '}
+            <TextLink href="#" label="terms and conditions" />
+          </>
+        )}
         onChange={() => setAgree(!agree)}
         validationState="warning"
-        validationText="Please wait 10 minutes until we verify your data."
+        validationText={(
+          <>
+            Please wait 10 minutes until we verify your data.
+            {' '}
+            <TextLink href="#" label="Cancel" />
+          </>
+        )}
       />
       <CheckboxField
         checked={agree}
-        label="I have read and agree with terms and conditions"
+        label={(
+          <>
+            I have read and agree with
+            {' '}
+            <TextLink href="#" label="terms and conditions" />
+          </>
+        )}
         onChange={() => setAgree(!agree)}
         required
         validationState="invalid"
diff --git a/src/components/TextField/README.md b/src/components/TextField/README.md
index 5e31ec39..f1241a6f 100644
--- a/src/components/TextField/README.md
+++ b/src/components/TextField/README.md
@@ -388,7 +388,13 @@ have.
   label="User name"
   onChange={() => {}}
   validationState="warning"
-  validationText="Account with this name already exists, pick a different one."
+  validationText={(
+    <>
+      Account with this name already exists, pick a different one.
+      {' '}
+      <TextLink href="#" label="Forgot your password?" />
+    </>
+  )}
   value="joe"
   required
 />
@@ -411,7 +417,13 @@ have.
   label="User name"
   onChange={() => {}}
   validationState="warning"
-  validationText="Account with this name already exists, pick a different one."
+  validationText={(
+    <>
+      Account with this name already exists, pick a different one.
+      {' '}
+      <TextLink href="#" label="Forgot your password?" />
+    </>
+  )}
   variant="filled"
   value="joe"
   required
diff --git a/src/components/Toggle/README.md b/src/components/Toggle/README.md
index d84c3806..f1373746 100644
--- a/src/components/Toggle/README.md
+++ b/src/components/Toggle/README.md
@@ -148,7 +148,15 @@ React.createElement(() => {
         label="Listen in studio quality"
         onChange={() => setStudioQuality(!studioQuality)}
         validationState="invalid"
-        validationText="Please upgrade your plan to make this option available."
+        validationText={(
+          <>
+            Please
+            {' '}
+            <TextLink href="#" label="upgrade your plan" />
+            {' '}
+            to make this option available.
+          </>
+        )}
       />
     </>
   );
diff --git a/src/styles/theme/_form-fields.scss b/src/styles/theme/_form-fields.scss
index 7bd1ee6b..f7cd2b5b 100644
--- a/src/styles/theme/_form-fields.scss
+++ b/src/styles/theme/_form-fields.scss
@@ -30,6 +30,25 @@ $horizontal-label-vertical-alignment: var(--rui-FormField--horizontal__label__ve
 $horizontal-field-vertical-alignment: var(--rui-FormField--horizontal__field__vertical-alignment);
 $horizontal-full-width-label-width: var(--rui-FormField--horizontal--full-width__label__width);
 
+// Form fields: links in validation states
+$link-validation-colors: (
+    invalid: (
+        default: var(--rui-color-feedback-success),
+        hover: var(--rui-color-feedback-success-hover),
+        active: var(--rui-color-feedback-success-active),
+    ),
+    valid: (
+        default: var(--rui-color-feedback-valid),
+        hover: var(--rui-color-feedback-valid-hover),
+        active: var(--rui-color-feedback-valid-active),
+    ),
+    warning: (
+        default: var(--rui-color-feedback-warning),
+        hover: var(--rui-color-feedback-warning-hover),
+        active: var(--rui-color-feedback-warning-active),
+    ),
+);
+
 // Form fields: disabled state
 $disabled-cursor: var(--rui-FormField--disabled__cursor);
 $disabled-opacity: var(--rui-FormField--disabled__opacity);
diff --git a/src/styles/tools/form-fields/_variants.scss b/src/styles/tools/form-fields/_variants.scss
index 265843d7..d132eecb 100644
--- a/src/styles/tools/form-fields/_variants.scss
+++ b/src/styles/tools/form-fields/_variants.scss
@@ -70,7 +70,7 @@
             + "Choose one of #{map.keys(settings.$themeable-variant-states)}.";
     }
 
-    $themeable-states: map.get(map.get(settings.$themeable-variant-states, $type), $variant);
+    $themeable-states: map.get(settings.$themeable-variant-states, $type, $variant);
 
     @if list.index($themeable-states, "hover") {
         @include _generate-custom-properties($type, $variant, "default");
@@ -143,5 +143,9 @@
 }
 
 @mixin validation($variant) {
+    --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
+    --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
+    --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
+
     @include _get-theme(validation, $variant);
 }
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index db9839b2..c9263f81 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -5,7 +5,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const VisualizerPlugin = require('webpack-visualizer-plugin2');
 
 const MAX_DEVELOPMENT_OUTPUT_SIZE = 3300000;
-const MAX_PRODUCTION_OUTPUT_SIZE = 430000;
+const MAX_PRODUCTION_OUTPUT_SIZE = 440000;
 
 module.exports = (env, argv) => ({
   devtool: argv.mode === 'production'

From 72081fa337f5c57c82bcba67487c2361c889a10d Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Mon, 2 Dec 2024 16:14:20 +0100
Subject: [PATCH 3/4] Remove configurable font weight of links inside `Alert`
 #577

Links in `Alert` now inherit the font weight which is consistent
with other links in React UI.
---
 src/components/Alert/Alert.module.scss |  9 +++------
 src/components/Alert/README.md         | 16 ++++++++--------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/components/Alert/Alert.module.scss b/src/components/Alert/Alert.module.scss
index 658fe9c5..92e31ffa 100644
--- a/src/components/Alert/Alert.module.scss
+++ b/src/components/Alert/Alert.module.scss
@@ -25,8 +25,8 @@
         padding: theme.$padding;
     }
 
-    .close,
-    .icon {
+    .icon,
+    .close {
         height: settings.$min-height;
         color: var(--rui-local-foreground-color);
     }
@@ -46,11 +46,8 @@
         line-height: settings.$line-height;
     }
 
-    .message :is(a, strong) {
-        font-weight: theme.$emphasis-font-weight;
-    }
-
     .message strong {
+        font-weight: theme.$emphasis-font-weight;
         color: var(--rui-local-foreground-color);
     }
 
diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md
index 292bfd4d..7d5e5f2b 100644
--- a/src/components/Alert/README.md
+++ b/src/components/Alert/README.md
@@ -201,14 +201,14 @@ helps to improve its accessibility.
 
 ### Common Theming Options
 
-| Custom Property                                      | Description                                                  |
-|------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-Alert__padding`                               | Padding between border and message                           |
-| `--rui-Alert__font-weight`                           | Message font weight                                          |
-| `--rui-Alert__border-width`                          | Border width                                                 |
-| `--rui-Alert__border-radius`                         | Corner radius                                                |
-| `--rui-Alert__emphasis__font-weight`                 | Font weight of text emphasised with `<strong>`               |
-| `--rui-Alert__stripe__width`                         | Width of the border at the start of the Alert                |
+| Custom Property                      | Description                                    |
+|--------------------------------------|------------------------------------------------|
+| `--rui-Alert__padding`               | Padding between border and message             |
+| `--rui-Alert__font-weight`           | Message font weight                            |
+| `--rui-Alert__border-width`          | Border width                                   |
+| `--rui-Alert__border-radius`         | Corner radius                                  |
+| `--rui-Alert__emphasis__font-weight` | Font weight of text emphasised with `<strong>` |
+| `--rui-Alert__stripe__width`         | Width of the border at the start of the Alert  |
 
 ### Theming Variants
 

From e9f92dd7bbc4983c0e2fb9023b0dd4bb53d0e100 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Mon, 2 Dec 2024 16:17:00 +0100
Subject: [PATCH 4/4] Make text links underlined by default #577

Since the color inheritance for links has been introduced
in #492, links in e.g. validation messages cannot be
distinguished from regular text until hovered. We chose
to underline all text links by default to make those links
discoverable by users.
---
 src/styles/elements/_links.scss | 1 +
 src/styles/theme/_links.scss    | 1 +
 src/theme.scss                  | 3 ++-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/styles/elements/_links.scss b/src/styles/elements/_links.scss
index 30f62de2..724a9231 100644
--- a/src/styles/elements/_links.scss
+++ b/src/styles/elements/_links.scss
@@ -2,6 +2,7 @@
 
 a {
     text-decoration: links.$decoration;
+    text-underline-offset: links.$underline-offset;
     color: links.$color;
 
     &:hover {
diff --git a/src/styles/theme/_links.scss b/src/styles/theme/_links.scss
index c3fc7e26..67219d42 100644
--- a/src/styles/theme/_links.scss
+++ b/src/styles/theme/_links.scss
@@ -1,5 +1,6 @@
 $color: var(--rui-local-link-color, var(--rui-color-text-link));
 $decoration: var(--rui-text-decoration-link);
+$underline-offset: var(--rui-underline-offset-link);
 $hover-color: var(--rui-local-link-color-hover, var(--rui-color-text-link-hover));
 $hover-decoration: var(--rui-text-decoration-link-hover);
 $active-color: var(--rui-local-link-color-active, var(--rui-color-text-link-active));
diff --git a/src/theme.scss b/src/theme.scss
index d7537a63..8415f20b 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -109,7 +109,8 @@
         --rui-line-height-small: 1.25;
 
         // Text decorations
-        --rui-text-decoration-link: none;
+        --rui-underline-offset-link: 0.1875em;
+        --rui-text-decoration-link: underline;
         --rui-text-decoration-link-hover: underline;
         --rui-text-decoration-link-active: underline;