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
Success: Settings have been successfully saved.
+ {' '}
+
```
@@ -53,7 +55,7 @@ suggest an action to resolve the problem.
Warning: Your credit card is going to expire soon.
{' '}
- Update my payment options
+
```
@@ -68,7 +70,7 @@ problem.
Error: Cannot connect to the server. Is your internet
connection working fine?
{' '}
- Try again
+
```
@@ -80,6 +82,8 @@ This kind of alert can be used to display helpful information.
Help: You should choose a password you don't use
anywhere else.
+ {' '}
+
```
@@ -90,6 +94,8 @@ Another common, informative alert.
```docoff-react-preview
Info: This feature depends on user's OS preferences.
+ {' '}
+
```
@@ -100,6 +106,8 @@ Neutral informative alert.
```docoff-react-preview
Note: This feature may not be available in all regions.
+ {' '}
+
```
@@ -111,6 +119,8 @@ Light alert variant.
Light alert: Stands out on dark backgrounds.
+ {' '}
+
```
@@ -122,6 +132,7 @@ Dark alert variant.
```docoff-react-preview
Dark alert: Stands out on light backgrounds.
+
```
diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
index 03befec5..7d6637dd 100644
--- 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
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
Hello! I'm success variant of card.
+ {' '}
+
@@ -162,6 +164,8 @@ To cover all possible needs of your project, Card is available in colors from
Hello! I'm warning variant of card.
+ {' '}
+
@@ -170,6 +174,8 @@ To cover all possible needs of your project, Card is available in colors from
Hello! I'm danger variant of card.
+ {' '}
+
@@ -178,6 +184,8 @@ To cover all possible needs of your project, Card is available in colors from
Hello! I'm help variant of card.
+ {' '}
+
@@ -186,6 +194,8 @@ To cover all possible needs of your project, Card is available in colors from
Hello! I'm info variant of card.
+ {' '}
+
@@ -194,6 +204,8 @@ To cover all possible needs of your project, Card is available in colors from
Hello! I'm note variant of card.
+ {' '}
+
@@ -202,6 +214,8 @@ To cover all possible needs of your project, Card is available in colors from
Hello! I'm light (default) variant of card.
+ {' '}
+
@@ -210,6 +224,8 @@ To cover all possible needs of your project, Card is available in colors from
Hello! I'm dark variant of card.
+ {' '}
+
@@ -228,6 +244,8 @@ its interactive elements to disallow user's interaction.
Hello! I'm a disabled card.
+ {' '}
+
@@ -236,6 +254,8 @@ its interactive elements to disallow user's interaction.
Hello! I'm a disabled raised card.
+ {' '}
+
@@ -244,6 +264,8 @@ its interactive elements to disallow user's interaction.
Hello! I'm a disabled success variant of card.
+ {' '}
+
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..ad8de098 100644
--- 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,7 +238,7 @@
}
}
} @else {
- @include generate-properties(
+ @include generate-component-properties(
$prefix: $prefix,
$component-name: $component-name,
$modifier-value: $modifier-value,
@@ -187,5 +246,9 @@
$properties: $properties,
);
}
+
+ @if $inherit-link-color {
+ @include generate-link-properties($prefix: $prefix, $variant-value: $variant-value);
+ }
}
}