diff --git a/src/components/Alert/Alert.jsx b/src/components/Alert/Alert.jsx index 8cf8ff7b4..fa25e4853 100644 --- 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 index 7b5e2dfa9..d431f3fd5 100644 --- a/src/components/Alert/README.md +++ b/src/components/Alert/README.md @@ -111,32 +111,6 @@ Neutral informative alert. ``` -### Light - -Light alert variant. - -```docoff-react-preview - - - Light alert: Stands out on dark backgrounds. - {' '} - - - -``` - -### Dark - -Dark alert variant. - -```docoff-react-preview - - Dark alert: Stands out on light backgrounds. - {' '} - - -``` - ## 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 index 591cca145..1f58f671e 100644 --- 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: (
icon
) }, (rootElement) => expect(within(rootElement).getByText('icon')), diff --git a/src/components/Alert/_settings.scss b/src/components/Alert/_settings.scss index b7ab4487e..e9b852fd6 100644 --- 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 index 2c8c80fe8..69acb7366 100644 --- 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 index 92032d794..cdfcf559f 100644 --- 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 index 42b2d3a1a..b59653a09 100644 --- 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 @@ -211,26 +211,6 @@ To cover all possible needs of your project, Card is available in colors from