From 37b5404bceddba59fcde3bcb5e1e4fd67fbdde44 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Sat, 31 Aug 2024 17:15:55 +0200 Subject: [PATCH] Use collections to generate styles of `Alert` color variants --- src/components/Alert/Alert.jsx | 3 +- src/components/Alert/Alert.module.scss | 40 ++++++------------------ src/components/Alert/README.md | 11 ++++--- src/components/Alert/_settings.scss | 5 +++ src/components/Alert/_theme.scss | 43 -------------------------- src/components/Alert/_tools.scss | 10 ------ 6 files changed, 22 insertions(+), 90 deletions(-) delete mode 100644 src/components/Alert/_tools.scss diff --git a/src/components/Alert/Alert.jsx b/src/components/Alert/Alert.jsx index d07852e2..34bf8623 100644 --- a/src/components/Alert/Alert.jsx +++ b/src/components/Alert/Alert.jsx @@ -70,7 +70,8 @@ Alert.propTypes = { */ children: PropTypes.node.isRequired, /** - * [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the alert. + * Color variant to clarify importance and meaning of the alert. 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/Alert/Alert.module.scss b/src/components/Alert/Alert.module.scss index 285e7476..b2a8f9b9 100644 --- a/src/components/Alert/Alert.module.scss +++ b/src/components/Alert/Alert.module.scss @@ -1,10 +1,10 @@ @use "sass:map"; @use "../../styles/theme/typography"; @use "../../styles/tools/accessibility"; +@use "../../styles/tools/collections"; @use "../../styles/tools/reset"; @use "settings"; @use "theme"; -@use "tools"; @layer components.alert { .root { @@ -66,35 +66,13 @@ top: -0.1em; } - .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: "Alert", + $variant-name: "color", + $variant-value: $color, + $properties: settings.$themeable-properties, + ); } } diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md index 5abf8452..befc886e 100644 --- a/src/components/Alert/README.md +++ b/src/components/Alert/README.md @@ -31,8 +31,8 @@ See [API](#api) for all available options. ## Color Variants -All [component colors](/docs/foundation/colors#component-colors) are supported by -alert to cover all possible needs of your project. +To cover all possible needs of your project, Alert is available in colors from +[Feedback and Neutral color collections](/docs/foundation/collections#colors). ### Success @@ -208,9 +208,10 @@ convention looks as follows: Where: -- `` is one of supported - [component colors](/docs/foundation/colors#component-colors) - (see alert [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), `foreground-color` (color of border, icon, links, and emphasis), or `background-color`. diff --git a/src/components/Alert/_settings.scss b/src/components/Alert/_settings.scss index 036e8a37..b7ab4487 100644 --- a/src/components/Alert/_settings.scss +++ b/src/components/Alert/_settings.scss @@ -1,7 +1,12 @@ +@use "sass:list"; @use "sass:map"; +@use "../../styles/settings/collections"; @use "../../styles/theme/typography"; @use "theme"; $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); +$themeable-properties: color, foreground-color, background-color; diff --git a/src/components/Alert/_theme.scss b/src/components/Alert/_theme.scss index 208ed6fc..8dc449e4 100644 --- a/src/components/Alert/_theme.scss +++ b/src/components/Alert/_theme.scss @@ -4,46 +4,3 @@ $border-width: var(--rui-Alert__border-width); $border-radius: var(--rui-Alert__border-radius); $emphasis-font-weight: var(--rui-Alert__emphasis__font-weight); $stripe-width: var(--rui-Alert__stripe__width); - -$colors: ( - success: ( - color: var(--rui-Alert--success__color), - foreground-color: var(--rui-Alert--success__foreground-color), - background-color: var(--rui-Alert--success__background-color), - ), - warning: ( - color: var(--rui-Alert--warning__color), - foreground-color: var(--rui-Alert--warning__foreground-color), - background-color: var(--rui-Alert--warning__background-color), - ), - danger: ( - color: var(--rui-Alert--danger__color), - foreground-color: var(--rui-Alert--danger__foreground-color), - background-color: var(--rui-Alert--danger__background-color), - ), - info: ( - color: var(--rui-Alert--info__color), - foreground-color: var(--rui-Alert--info__foreground-color), - background-color: var(--rui-Alert--info__background-color), - ), - help: ( - color: var(--rui-Alert--help__color), - foreground-color: var(--rui-Alert--help__foreground-color), - background-color: var(--rui-Alert--help__background-color), - ), - note: ( - color: var(--rui-Alert--note__color), - foreground-color: var(--rui-Alert--note__foreground-color), - background-color: var(--rui-Alert--note__background-color), - ), - light: ( - color: var(--rui-Alert--light__color), - foreground-color: var(--rui-Alert--light__foreground-color), - background-color: var(--rui-Alert--light__background-color), - ), - dark: ( - color: var(--rui-Alert--dark__color), - foreground-color: var(--rui-Alert--dark__foreground-color), - background-color: var(--rui-Alert--dark__background-color), - ), -); diff --git a/src/components/Alert/_tools.scss b/src/components/Alert/_tools.scss deleted file mode 100644 index 0608c962..00000000 --- a/src/components/Alert/_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-foreground-color: #{map.get($color-variant-properties, foreground-color)}; - --rui-local-background-color: #{map.get($color-variant-properties, background-color)}; -}