react-ui-org · adamkudrna · Apr 11, 2025 · Mar 24, 2025
diff --git a/src/components/Alert/Alert.jsx b/src/components/Alert/Alert.jsx
@@ -69,9 +69,9 @@ Alert.propTypes = {
   children: PropTypes.node.isRequired,
   /**
    * Color variant to clarify importance and meaning of the alert. Implements
-   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
+   * [Feedback color collection](/docs/foundation/collections#colors).
    */
-  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
+  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note']),
   /**
    * Optional element to be displayed next to the alert body.
    */

diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md
@@ -111,32 +111,6 @@ Neutral informative alert.
 </Alert>
 ```
 
-### Light
-
-Light alert variant.
-
-```docoff-react-preview
-<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>
-```
-
-### Dark
-
-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>
-```
-
 ## Alerts with Icons
 
 An icon can (and should) accompany the message.

diff --git a/src/components/Alert/__tests__/Alert.test.jsx b/src/components/Alert/__tests__/Alert.test.jsx
@@ -6,7 +6,6 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { feedbackColorPropTest } from '../../../../tests/propTests/feedbackColorPropTest';
-import { neutralColorPropTest } from '../../../../tests/propTests/neutralColorPropTest';
 import defaultTranslations from '../../../translations/en';
 import { Alert } from '../Alert';
 
@@ -22,7 +21,6 @@ describe('rendering', () => {
       (rootElement) => expect(within(rootElement).getByText('content text')),
     ],
     ...feedbackColorPropTest,
-    ...neutralColorPropTest,
     [
       { icon: (<div>icon</div>) },
       (rootElement) => expect(within(rootElement).getByText('icon')),

diff --git a/src/components/Alert/_settings.scss b/src/components/Alert/_settings.scss
@@ -1,4 +1,3 @@
-@use "sass:list";
 @use "sass:map";
 @use "../../styles/settings/collections";
 @use "../../styles/theme/typography";
@@ -8,5 +7,5 @@ $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);
+$colors: collections.$feedback-colors;
 $themeable-properties: color, foreground-color, background-color;
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
@@ -18,7 +18,7 @@ export const Card = ({
     {...transferProps(restProps)}
     className={classNames(
       styles.root,
-      getRootColorClassName(color, styles),
+      color && getRootColorClassName(color, styles),
       dense && styles.isRootDense,
       raised && styles.isRootRaised,
       disabled && styles.isRootDisabled,
@@ -29,7 +29,7 @@ export const Card = ({
 );
 
 Card.defaultProps = {
-  color: 'light',
+  color: undefined,
   dense: false,
   disabled: false,
   raised: false,
@@ -45,9 +45,9 @@ Card.propTypes = {
   children: PropTypes.node.isRequired,
   /**
    * Color to clarify importance and meaning of the card. Implements
-   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
+   * [Feedback color collection](/docs/foundation/collections#colors).
    */
-  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
+  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note']),
   /**
    * Make the card more compact.
    */

diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
@@ -12,9 +12,9 @@
         flex-direction: column;
         min-width: 0; // 1.
         color: var(--rui-local-color);
-        border: theme.$border-width solid var(--rui-local-border-color);
+        border: theme.$border-width solid var(--rui-local-border-color, transparent);
         border-radius: theme.$border-radius;
-        background-color: var(--rui-local-background-color);
+        background-color: var(--rui-local-background-color, theme.$background-color);
     }
 
     .body {

diff --git a/src/components/Card/README.md b/src/components/Card/README.md
@@ -148,7 +148,7 @@ for card content.
 ## Color Variants
 
 To cover all possible needs of your project, Card is available in colors from
-[Feedback and Neutral color collections](/docs/foundation/collections#colors).
+[Feedback color collection](/docs/foundation/collections#colors).
 
 ```docoff-react-preview
 <Card color="success">
@@ -211,26 +211,6 @@ To cover all possible needs of your project, Card is available in colors from
     <Button label="Read more" priority="outline" color="note" />
   </CardFooter>
 </Card>
-<Card>
-  <CardBody>
-    Hello! I&apos;m light (default) variant of card.
-    {' '}
-    <TextLink href="/" label="This is a link" />
-  </CardBody>
-  <CardFooter>
-    <Button label="Read more" priority="outline" color="dark" />
-  </CardFooter>
-</Card>
-<Card color="dark">
-  <CardBody>
-    Hello! I&apos;m dark variant of card.
-    {' '}
-    <TextLink href="/" label="This is a link" />
-  </CardBody>
-  <CardFooter>
-    <Button label="Read more" priority="outline" color="light" />
-  </CardFooter>
-</Card>
 ```
 
 ## States
@@ -314,6 +294,7 @@ Separate your card actions with CardFooter. See
 | `--rui-Card__padding`                                | Padding shared by card header, body and footer               |
 | `--rui-Card__border-width`                           | Border width                                                 |
 | `--rui-Card__border-radius`                          | Corner radius                                                |
+| `--rui-Card__background-color`                       | Card background color                                        |
 | `--rui-Card--dense__padding`                         | Padding of dense card                                        |
 | `--rui-Card--raised__box-shadow`                     | Box shadow of raised card                                    |
 | `--rui-Card--disabled__background-color`             | Card background color in disabled state                      |

diff --git a/src/components/Card/__tests__/Card.test.jsx b/src/components/Card/__tests__/Card.test.jsx
@@ -4,7 +4,6 @@ import {
   within,
 } from '@testing-library/react';
 import { feedbackColorPropTest } from '../../../../tests/propTests/feedbackColorPropTest';
-import { neutralColorPropTest } from '../../../../tests/propTests/neutralColorPropTest';
 import { raisedPropTest } from '../../../../tests/propTests/raisedPropTest';
 import { ScrollView } from '../../ScrollView';
 import { Card } from '../Card';
@@ -35,7 +34,6 @@ describe('rendering', () => {
       (rootElement) => expect(within(rootElement).getByText('scroll view content')),
     ],
     ...feedbackColorPropTest,
-    ...neutralColorPropTest,
     ...densePropTest('Root'),
     [
       { disabled: true },

diff --git a/src/components/Card/_settings.scss b/src/components/Card/_settings.scss
@@ -1,5 +1,4 @@
-@use "sass:list";
 @use "../../styles/settings/collections";
 
-$colors: list.join(collections.$feedback-colors, collections.$neutral-colors);
+$colors: collections.$feedback-colors;
 $themeable-properties: color, border-color, background-color;
diff --git a/src/components/Card/_theme.scss b/src/components/Card/_theme.scss
@@ -1,6 +1,7 @@
 $padding: var(--rui-Card__padding);
 $border-width: var(--rui-Card__border-width);
 $border-radius: var(--rui-Card__border-radius);
+$background-color: var(--rui-Card__background-color);
 
 $dense-padding: var(--rui-Card--dense__padding);
 $raised-box-shadow: var(--rui-Card--raised__box-shadow);

diff --git a/src/docs/foundation/collections.md b/src/docs/foundation/collections.md
@@ -17,8 +17,8 @@ used to ensure consistency across the design system.
 The following color names are designed for use in components that support the
 `color` prop:
 
-| Collection | Available values                                       | Description                                                                      |
-|------------|--------------------------------------------------------|----------------------------------------------------------------------------------|
-| Action     | `primary`, `secondary`, `selected`                     | Reserved for actionable elements, such as buttons and navigation links           |
-| Feedback   | `success`, `warning`, `danger`, `info`, `help`, `note` | For components with feedback state, such as alerts and badges                    |
-| Neutral    | `light`, `dark`                                        | For components that require a neutral background color, such as cards and badges |
+| Collection | Available values                                       | Description                                                                        |
+|------------|--------------------------------------------------------|------------------------------------------------------------------------------------|
+| Action     | `primary`, `secondary`, `selected`                     | Reserved for actionable elements, such as buttons and navigation links             |
+| Feedback   | `success`, `warning`, `danger`, `info`, `help`, `note` | For components with feedback state, such as alerts and buttons                     |
+| Neutral    | `light`, `dark`                                        | For components that require a neutral background color, such as badges and buttons |
diff --git a/src/styles/tools/_collections.scss b/src/styles/tools/_collections.scss
@@ -25,22 +25,6 @@
         + ")";
 }
 
-// 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.
@@ -133,11 +117,10 @@
 
 @mixin generate-link-properties($prefix, $variant-value) {
     $color-category: _get-category-by-value($value: $variant-value, $collections: collections.$colors);
-    $resolved-variant-value: _get-link-color-by-value($variant-value);
 
-    --#{$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}-#{$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.

diff --git a/src/theme.scss b/src/theme.scss
@@ -803,6 +803,7 @@
         --rui-Card__padding: var(--rui-dimension-space-4);
         --rui-Card__border-width: var(--rui-dimension-border-width-1);
         --rui-Card__border-radius: var(--rui-dimension-radius-2);
+        --rui-Card__background-color: var(--rui-color-background-layer-1);
         --rui-Card--dense__padding: var(--rui-dimension-space-2);
         --rui-Card--raised__box-shadow: var(--rui-shadow-layer-1);
         --rui-Card--disabled__background-color: var(--rui-color-background-disabled);