From b8fcfb5818514f87af040a658db4c30fe81cf375 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Sat, 31 Aug 2024 17:35:03 +0200 Subject: [PATCH] Use collections to generate styles of `Card` color variants --- src/components/Card/Card.jsx | 3 +- src/components/Card/Card.module.scss | 41 +++++++------------------- src/components/Card/README.md | 12 ++++---- src/components/Card/_settings.scss | 5 ++++ src/components/Card/_theme.scss | 43 ---------------------------- src/components/Card/_tools.scss | 10 ------- 6 files changed, 23 insertions(+), 91 deletions(-) create mode 100644 src/components/Card/_settings.scss delete mode 100644 src/components/Card/_tools.scss diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx index 074ade48..8616ee55 100644 --- a/src/components/Card/Card.jsx +++ b/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']), /** diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss index 046c9be3..da432403 100644 --- a/src/components/Card/Card.module.scss +++ b/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 { diff --git a/src/components/Card/README.md b/src/components/Card/README.md index b77aac76..1604f519 100644 --- a/src/components/Card/README.md +++ b/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 @@ -307,9 +306,10 @@ looks as follows: Where: -- `` is one of supported - [component colors](/docs/foundation/colors#component-colors) - (see [color variants](#color-variants) and [API](#api)), +- `` 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), - `` is one of `color` (color of text), `border-color`, or `background-color`. diff --git a/src/components/Card/_settings.scss b/src/components/Card/_settings.scss new file mode 100644 index 00000000..c055c8b4 --- /dev/null +++ b/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; diff --git a/src/components/Card/_theme.scss b/src/components/Card/_theme.scss index a5f08b1c..819da99f 100644 --- a/src/components/Card/_theme.scss +++ b/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), - ), -); diff --git a/src/components/Card/_tools.scss b/src/components/Card/_tools.scss deleted file mode 100644 index ee155fc9..00000000 --- a/src/components/Card/_tools.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use "sass:map"; -@use "theme"; - -@mixin color($color) { - $color-variant-properties: map.get(theme.$colors, $color); - - --rui-local-color: #{map.get($color-variant-properties, color)}; - --rui-local-border-color: #{map.get($color-variant-properties, border-color)}; - --rui-local-background-color: #{map.get($color-variant-properties, background-color)}; -}