Inherit link color in components using the Feedback color collection (#…

…492)
react-ui-org · Sep 2, 2024 · 4791a36 · 4791a36
1 parent 69d7426
commit 4791a36
Show file tree

Hide file tree

Showing 9 changed files with 131 additions and 20 deletions.
diff --git 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
@@ -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
@@ -40,6 +40,7 @@
             $component-name: "Card",
             $variant-name: "color",
             $variant-value: $color,
+            $inherit-link-color: true,
             $properties: settings.$themeable-properties,
         );
     }

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,6 +1,31 @@
+@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)
+        + ")";
+}
+
+// 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 +40,7 @@
 //
 // Example:
 //
-// @include generate-properties(
+// @include generate-component-properties(
 //     $prefix: "rui-",
 //     $component-name: "Card",
 //     $variant-name: "color",
@@ -29,7 +54,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 +97,38 @@
     }
 }
 
+// Mixin to generate CSS custom properties for links theme.
+//
+// 1. Links theming is only available for feedback colors.
+//
+// @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);
+
+    // 1.
+    // TODO: Figure out what to do with the `dark` color category where blue links do not work.
+    @if $color-category == "feedback" {
+        --#{$prefix}local-link-color: var(--rui-color-#{$color-category}-#{$variant-value});
+        --#{$prefix}local-link-color-hover: var(--rui-color-#{$color-category}-#{$variant-value}-hover);
+        --#{$prefix}local-link-color-active: var(--rui-color-#{$color-category}-#{$variant-value}-active);
+    }
+}
+
 // Mixin to generate CSS classes for a component variant.
 //
 // @param {String} $prefix - The prefix for the CSS custom properties.
@@ -81,6 +138,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 +205,7 @@
     $variant-name,
     $variant-value,
     $generate-interaction-states: false,
+    $inherit-link-color: false,
     $properties,
 ) {
     $modifier-class-name:
@@ -168,7 +227,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,13 +238,17 @@
                 }
             }
         } @else {
-            @include generate-properties(
+            @include generate-component-properties(
                 $prefix: $prefix,
                 $component-name: $component-name,
                 $modifier-value: $modifier-value,
                 $variant-value: $variant-value,
                 $properties: $properties,
             );
         }
+
+        @if $inherit-link-color {
+            @include generate-link-properties($prefix: $prefix, $variant-value: $variant-value);
+        }
     }
 }