diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss index 7d6637dd..2c86f36c 100644 --- a/src/components/Card/Card.module.scss +++ b/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; - } } diff --git a/src/components/Card/README.md b/src/components/Card/README.md index 42b2d3a1..7bfe6026 100644 --- a/src/components/Card/README.md +++ b/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 diff --git a/src/styles/tools/_collections.scss b/src/styles/tools/_collections.scss index 9058bcfd..1fe3a690 100644 --- a/src/styles/tools/_collections.scss +++ b/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.