fixup! fixup! Inherit link color in components using the Feedback col…

…or collection (#492)

src/components/Card/Card.module.scss

@@ -1,4 +1,5 @@
 // 1. Retain equal card widths in flex and grid layouts independently on their content.
+// 2. For Cards, links theming is disabled for the light color from the Neutral color collection.
 
 @use "../../styles/tools/collections";
 @use "settings";
@@ -34,19 +35,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,
+            $inherit-link-color: $color != "light", // 2.
             $properties: settings.$themeable-properties,
         );
     }
-
-    .isRootDisabled {
-        background-color: theme.$disabled-background-color;
-        opacity: theme.$disabled-opacity;
-    }
 }

src/components/Card/README.md

@@ -150,6 +150,10 @@ for card content.
 To cover all possible needs of your project, Card is available in colors from
 [Feedback and Neutral color collections](/docs/foundation/collections#colors).
 
+ℹ️ To match users' expectation, links in the light neutral variant of Card use
+the [default link color](/docs/foundation/colors/#text-colors). In other
+variants, links are colored according to the variant.
+
 ```docoff-react-preview
 <Card color="success">
   <CardBody>

src/styles/tools/_collections.scss

@@ -25,6 +25,22 @@
         + ")";
 }
 
+// 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.
@@ -99,9 +115,6 @@
 
 // Mixin to generate CSS custom properties for links theme.
 //
-// 1. Use light color for links in the dark variant.
-// 2. Links theming is not available for the light color from the Neutral color collection.
-//
 // @param {String} $prefix - The prefix for the CSS custom properties.
 // @param {String} $variant-value - The value of the variant.
 //
@@ -120,14 +133,11 @@
 
 @mixin generate-link-properties($prefix, $variant-value) {
     $color-category: _get-category-by-value($value: $variant-value, $collections: collections.$colors);
-    $resolved-variant-value: if($variant-value == "dark", "light", $variant-value); // 1.
+    $resolved-variant-value: _get-link-color-by-value($variant-value);
 
-    // 2.
-    @if $variant-value != "light" {
-        --#{$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);
-    }
+    --#{$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.