Inherit link color in components using the Feedback color collection (#492)

src/components/Alert/Alert.jsx

@@ -70,7 +70,8 @@ Alert.propTypes = {
    */
   children: PropTypes.node.isRequired,
   /**
-   * [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the alert.
+   * Color variant to clarify importance and meaning of the alert. Implements
+   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
    */
   color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
   /**

src/components/Alert/Alert.module.scss

@@ -1,10 +1,10 @@
 @use "sass:map";
 @use "../../styles/theme/typography";
 @use "../../styles/tools/accessibility";
+@use "../../styles/tools/collections";
 @use "../../styles/tools/reset";
 @use "settings";
 @use "theme";
-@use "tools";
 
 @layer components.alert {
     .root {
@@ -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);
     }
 
@@ -66,35 +68,14 @@
         top: -0.1em;
     }
 
-    .isRootColorSuccess {
-        @include tools.color(success);
-    }
-
-    .isRootColorWarning {
-        @include tools.color(warning);
-    }
-
-    .isRootColorDanger {
-        @include tools.color(danger);
-    }
-
-    .isRootColorHelp {
-        @include tools.color(help);
-    }
-
-    .isRootColorInfo {
-        @include tools.color(info);
-    }
-
-    .isRootColorNote {
-        @include tools.color(note);
-    }
-
-    .isRootColorLight {
-        @include tools.color(light);
-    }
-
-    .isRootColorDark {
-        @include tools.color(dark);
+    @each $color in settings.$colors {
+        @include collections.generate-class(
+            $prefix: "rui-",
+            $component-name: "Alert",
+            $variant-name: "color",
+            $variant-value: $color,
+            $properties: settings.$themeable-properties,
+            $inherit-link-color: true,
+        );
     }
 }

src/components/Alert/README.md

@@ -31,8 +31,8 @@ See [API](#api) for all available options.
 
 ## Color Variants
 
-All [component colors](/docs/foundation/colors#component-colors) are supported by
-alert to cover all possible needs of your project.
+To cover all possible needs of your project, Alert is available in colors from
+[Feedback and Neutral color collections](/docs/foundation/collections#colors).
 
 ### Success
 
@@ -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>
 ```
 
@@ -208,9 +219,10 @@ convention looks as follows:
 
 Where:
 
-- `<COLOR>` is one of supported
-  [component colors](/docs/foundation/colors#component-colors)
-  (see alert [color variants](#color-variants) and [API](#api)),
+- `<COLOR>` is a value from supported
+  [color collections](/docs/foundation/collections#colors)
+  (check [color variants](#color-variants) and [API](#api) to see which
+  collections are supported),
 - `<PROPERTY>` is one of `color` (color of text), `foreground-color` (color of
   border, icon, links, and emphasis), or `background-color`.
 

src/components/Alert/__tests__/Alert.test.jsx

@@ -5,7 +5,8 @@ import {
   within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { colorPropTest } from '../../../../tests/propTests/colorPropTest';
+import { feedbackColorPropTest } from '../../../../tests/propTests/feedbackColorPropTest';
+import { neutralColorPropTest } from '../../../../tests/propTests/neutralColorPropTest';
 import defaultTranslations from '../../../translations/en';
 import { Alert } from '../Alert';
 
@@ -20,7 +21,8 @@ describe('rendering', () => {
       { children: <div>content text</div> },
       (rootElement) => expect(within(rootElement).getByText('content text')),
     ],
-    ...colorPropTest,
+    ...feedbackColorPropTest,
+    ...neutralColorPropTest,
     [
       { icon: (<div>icon</div>) },
       (rootElement) => expect(within(rootElement).getByText('icon')),

src/components/Alert/_settings.scss

@@ -1,7 +1,12 @@
+@use "sass:list";
 @use "sass:map";
+@use "../../styles/settings/collections";
 @use "../../styles/theme/typography";
 @use "theme";
 
 $font-size: map.get(typography.$font-size-values, 1);
 $line-height: typography.$line-height-base;
 $min-height: calc(#{$font-size} * #{$line-height} + 2 * #{theme.$padding});
+
+$colors: list.join(collections.$feedback-colors, collections.$neutral-colors);
+$themeable-properties: color, foreground-color, background-color;

src/components/Alert/_theme.scss

@@ -4,46 +4,3 @@ $border-width: var(--rui-Alert__border-width);
 $border-radius: var(--rui-Alert__border-radius);
 $emphasis-font-weight: var(--rui-Alert__emphasis__font-weight);
 $stripe-width: var(--rui-Alert__stripe__width);
-
-$colors: (
-    success: (
-        color: var(--rui-Alert--success__color),
-        foreground-color: var(--rui-Alert--success__foreground-color),
-        background-color: var(--rui-Alert--success__background-color),
-    ),
-    warning: (
-        color: var(--rui-Alert--warning__color),
-        foreground-color: var(--rui-Alert--warning__foreground-color),
-        background-color: var(--rui-Alert--warning__background-color),
-    ),
-    danger: (
-        color: var(--rui-Alert--danger__color),
-        foreground-color: var(--rui-Alert--danger__foreground-color),
-        background-color: var(--rui-Alert--danger__background-color),
-    ),
-    info: (
-        color: var(--rui-Alert--info__color),
-        foreground-color: var(--rui-Alert--info__foreground-color),
-        background-color: var(--rui-Alert--info__background-color),
-    ),
-    help: (
-        color: var(--rui-Alert--help__color),
-        foreground-color: var(--rui-Alert--help__foreground-color),
-        background-color: var(--rui-Alert--help__background-color),
-    ),
-    note: (
-        color: var(--rui-Alert--note__color),
-        foreground-color: var(--rui-Alert--note__foreground-color),
-        background-color: var(--rui-Alert--note__background-color),
-    ),
-    light: (
-        color: var(--rui-Alert--light__color),
-        foreground-color: var(--rui-Alert--light__foreground-color),
-        background-color: var(--rui-Alert--light__background-color),
-    ),
-    dark: (
-        color: var(--rui-Alert--dark__color),
-        foreground-color: var(--rui-Alert--dark__foreground-color),
-        background-color: var(--rui-Alert--dark__background-color),
-    ),
-);

src/components/Badge/Badge.jsx

@@ -4,6 +4,7 @@ import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
+import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
 import styles from './Badge.module.scss';
 
 export const Badge = ({
@@ -16,7 +17,7 @@ export const Badge = ({
     {...transferProps(restProps)}
     className={classNames(
       styles.root,
-      priority === 'outline' && styles.isRootPriorityOutline,
+      getRootPriorityClassName(priority, styles),
       getRootColorClassName(color, styles),
     )}
   >
@@ -31,7 +32,8 @@ Badge.defaultProps = {
 
 Badge.propTypes = {
   /**
-   * [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the badge.
+   * Color to clarify importance and meaning of the badge. Implements
+   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
    */
   color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
   /**