Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use collections to generate styles of Card color variants
Browse files Browse the repository at this point in the history
adamkudrna committed Sep 11, 2024
1 parent 37b5404 commit b8fcfb5
Showing 6 changed files with 23 additions and 91 deletions.
3 changes: 2 additions & 1 deletion src/components/Card/Card.jsx
Original file line number Diff line number Diff line change
@@ -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']),
/**
41 changes: 10 additions & 31 deletions src/components/Card/Card.module.scss
Original file line number Diff line number Diff line change
@@ -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 {
12 changes: 6 additions & 6 deletions src/components/Card/README.md
Original file line number Diff line number Diff line change
@@ -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`.

5 changes: 5 additions & 0 deletions src/components/Card/_settings.scss
Original file line number Diff line number Diff line change
@@ -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;
43 changes: 0 additions & 43 deletions src/components/Card/_theme.scss
Original file line number Diff line number Diff line change
@@ -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),
),
);
10 changes: 0 additions & 10 deletions src/components/Card/_tools.scss

This file was deleted.

0 comments on commit b8fcfb5

Please sign in to comment.