Use collections to generate styles of Card color variants

src/components/Card/Card.jsx

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

src/components/Card/Card.module.scss

@@ -1,7 +1,8 @@
 // 1. Retain equal card widths in flex and grid layouts independently on their content.
 
+@use "../../styles/tools/collections";
+@use "settings";
 @use "theme";
-@use "tools";
 
 @layer components.card {
     .root {
@@ -33,36 +34,14 @@
         box-shadow: theme.$raised-box-shadow;
     }
 
-    .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-properties(
+            $prefix: "rui-",
+            $component-name: "Card",
+            $variant-name: "color",
+            $variant-value: $color,
+            $properties: settings.$themeable-properties,
+        );
     }
 
     .isRootDisabled {

src/components/Card/README.md

@@ -147,9 +147,8 @@ for card content.
 
 ## Color Variants
 
-Card supports all
-[component colors](/docs/foundation/colors#component-colors) to cover different needs
-of your app.
+To cover all possible needs of your project, Card is available in colors from
+[Feedback and Neutral color collections](/docs/foundation/collections#colors).
 
 ```docoff-react-preview
 <Card color="success">
@@ -307,9 +306,10 @@ looks as follows:
 
 Where:
 
-- `<COLOR>` is one of supported
-  [component colors](/docs/foundation/colors#component-colors)
-  (see [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), `border-color`, or
   `background-color`.
 

src/components/Card/_settings.scss

@@ -0,0 +1,5 @@
+@use "sass:list";
+@use "../../styles/settings/collections";
+
+$colors: list.join(collections.$feedback-colors, collections.$neutral-colors);
+$themeable-properties: color, border-color, background-color;

src/components/Card/_theme.scss

@@ -7,46 +7,3 @@ $raised-box-shadow: var(--rui-Card--raised__box-shadow);
 
 $disabled-background-color: var(--rui-Card--disabled__background-color);
 $disabled-opacity: var(--rui-Card--disabled__opacity);
-
-$colors: (
-    success: (
-        color: var(--rui-Card--success__color),
-        border-color: var(--rui-Card--success__border-color),
-        background-color: var(--rui-Card--success__background-color),
-    ),
-    warning: (
-        color: var(--rui-Card--warning__color),
-        border-color: var(--rui-Card--warning__border-color),
-        background-color: var(--rui-Card--warning__background-color),
-    ),
-    danger: (
-        color: var(--rui-Card--danger__color),
-        border-color: var(--rui-Card--danger__border-color),
-        background-color: var(--rui-Card--danger__background-color),
-    ),
-    info: (
-        color: var(--rui-Card--info__color),
-        border-color: var(--rui-Card--info__border-color),
-        background-color: var(--rui-Card--info__background-color),
-    ),
-    help: (
-        color: var(--rui-Card--help__color),
-        border-color: var(--rui-Card--help__border-color),
-        background-color: var(--rui-Card--help__background-color),
-    ),
-    note: (
-        color: var(--rui-Card--note__color),
-        border-color: var(--rui-Card--note__border-color),
-        background-color: var(--rui-Card--note__background-color),
-    ),
-    light: (
-        color: var(--rui-Card--light__color),
-        border-color: var(--rui-Card--light__border-color),
-        background-color: var(--rui-Card--light__background-color),
-    ),
-    dark: (
-        color: var(--rui-Card--dark__color),
-        border-color: var(--rui-Card--dark__border-color),
-        background-color: var(--rui-Card--dark__background-color),
-    ),
-);