diff --git a/src/components/Badge/Badge.jsx b/src/components/Badge/Badge.jsx index ef841489..653938ff 100644 --- a/src/components/Badge/Badge.jsx +++ b/src/components/Badge/Badge.jsx @@ -32,7 +32,8 @@ Badge.defaultProps = { Badge.propTypes = { /** - * [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the badge. + * Color to clarify importance and meaning of the badge. 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/Badge/Badge.module.scss b/src/components/Badge/Badge.module.scss index 1949d937..7e57d903 100644 --- a/src/components/Badge/Badge.module.scss +++ b/src/components/Badge/Badge.module.scss @@ -2,14 +2,14 @@ @use "sass:math"; @use "../../styles/theme/borders"; @use "../../styles/theme/typography"; - -$_badge-size: 1.25rem; +@use "../../styles/tools/collections"; +@use "settings"; @layer components.badge { .root { display: inline-block; - min-width: $_badge-size; - height: $_badge-size; + min-width: settings.$badge-size; + height: settings.$badge-size; padding: 0.25rem 0.35rem; overflow: hidden; font-weight: map.get(typography.$font-weight-values, bold); @@ -19,7 +19,7 @@ $_badge-size: 1.25rem; white-space: nowrap; vertical-align: baseline; color: var(--rui-local-color); - border-radius: math.div($_badge-size, 2); + border-radius: math.div(settings.$badge-size, 2); } .isRootPriorityFilled { @@ -27,45 +27,20 @@ $_badge-size: 1.25rem; box-shadow: var(--rui-local-box-shadow, #{0 0 0 2px rgb(255 255 255 / 80%)}); } - .isRootColorSuccess { - --rui-local-color: var(--rui-color-feedback-on-success); - --rui-local-background-color: var(--rui-color-feedback-success); - } - - .isRootColorWarning { - --rui-local-color: var(--rui-color-feedback-on-warning); - --rui-local-background-color: var(--rui-color-feedback-warning); - } - - .isRootColorDanger { - --rui-local-color: var(--rui-color-feedback-on-danger); - --rui-local-background-color: var(--rui-color-feedback-danger); - } - - .isRootColorHelp { - --rui-local-color: var(--rui-color-feedback-on-help); - --rui-local-background-color: var(--rui-color-feedback-help); - } - - .isRootColorInfo { - --rui-local-color: var(--rui-color-feedback-on-info); - --rui-local-background-color: var(--rui-color-feedback-info); - } - - .isRootColorNote { - --rui-local-color: var(--rui-color-feedback-on-note); - --rui-local-background-color: var(--rui-color-feedback-note); - } - - .isRootColorLight { - --rui-local-color: var(--rui-color-neutral-on-light); - --rui-local-background-color: var(--rui-color-neutral-light); - --rui-local-box-shadow: none; + @each $color in settings.$colors { + @include collections.generate-properties( + $prefix: "rui-", + $component-name: "Badge", + $modifier-name: "priority", + $modifier-value: "filled", + $variant-name: "color", + $variant-value: $color, + $properties: settings.$themeable-properties-filled, + ); } + .isRootColorLight, .isRootColorDark { - --rui-local-color: var(--rui-color-neutral-on-dark); - --rui-local-background-color: var(--rui-color-neutral-dark); --rui-local-box-shadow: none; } @@ -75,35 +50,15 @@ $_badge-size: 1.25rem; border: borders.$width solid currentcolor; } - .isRootPriorityOutline.isRootColorSuccess { - --rui-local-color: var(--rui-color-feedback-success); - } - - .isRootPriorityOutline.isRootColorWarning { - --rui-local-color: var(--rui-color-feedback-warning); - } - - .isRootPriorityOutline.isRootColorDanger { - --rui-local-color: var(--rui-color-feedback-danger); - } - - .isRootPriorityOutline.isRootColorHelp { - --rui-local-color: var(--rui-color-feedback-help); - } - - .isRootPriorityOutline.isRootColorInfo { - --rui-local-color: var(--rui-color-feedback-info); - } - - .isRootPriorityOutline.isRootColorNote { - --rui-local-color: var(--rui-color-feedback-note); - } - - .isRootPriorityOutline.isRootColorLight { - --rui-local-color: var(--rui-color-neutral-light); - } - - .isRootPriorityOutline.isRootColorDark { - --rui-local-color: var(--rui-color-neutral-dark); + @each $color in settings.$colors { + @include collections.generate-properties( + $prefix: "rui-", + $component-name: "Badge", + $modifier-name: "priority", + $modifier-value: "outline", + $variant-name: "color", + $variant-value: $color, + $properties: settings.$themeable-properties-outline, + ); } } diff --git a/src/components/Badge/README.md b/src/components/Badge/README.md index 84f343d2..ceec6fed 100644 --- a/src/components/Badge/README.md +++ b/src/components/Badge/README.md @@ -29,8 +29,9 @@ lowest: 1. filled 2. outline -All priorities come in supported -[component colors](/docs/foundation/colors#component-colors). +All priorities are available in colors from supported +[color collections](/docs/foundation/collections#colors). +Check [API](#api) to see which collections are supported. ### Filled @@ -102,5 +103,21 @@ helps to improve its accessibility. +## Theming + +It's possible to adjust the theme of specific badge color variant. Naming +convention looks as follows: + +`--rui-Badge----__` + +Where: + +- `` is one of `filled` or `outline`, +- `` is a value from supported + [color collections](/docs/foundation/collections#colors) + (check [API](#api) to see which collections are supported), +- `` is one of `color` (color of text) or `background-color` for the + filled priority, or just `color` for the outline priority. + [div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes [React common props]: https://react.dev/reference/react-dom/components/common#common-props diff --git a/src/components/Badge/_settings.scss b/src/components/Badge/_settings.scss new file mode 100644 index 00000000..294181de --- /dev/null +++ b/src/components/Badge/_settings.scss @@ -0,0 +1,8 @@ +@use "sass:list"; +@use "../../styles/settings/collections"; + +$badge-size: 1.25rem; + +$colors: list.join(collections.$feedback-colors, collections.$neutral-colors); +$themeable-properties-filled: color, background-color; +$themeable-properties-outline: color; diff --git a/src/styles/tools/_collections.scss b/src/styles/tools/_collections.scss new file mode 100644 index 00000000..2d557398 --- /dev/null +++ b/src/styles/tools/_collections.scss @@ -0,0 +1,36 @@ +@use "string" as rui-string; + +@mixin generate-properties( + $prefix, + $component-name, + $modifier-name: null, + $modifier-value: null, + $variant-name, + $variant-value, + $properties, +) { + $combined-class-name: + if( + $modifier-name and $modifier-value, + ".isRoot#{rui-string.capitalize($modifier-name)}#{rui-string.capitalize($modifier-value)}", + "" + ); + + #{$combined-class-name}.isRoot#{rui-string.capitalize($variant-name)}#{rui-string.capitalize($variant-value)} { + @each $property in $properties { + --#{$prefix}local-#{$property}: + var( + #{ + "--" + + $prefix + + $component-name + + if($modifier-value, "--" + $modifier-value, "") + + "--" + + $variant-value + + "__" + + $property + } + ); + } + } +} diff --git a/src/styles/tools/_string.scss b/src/styles/tools/_string.scss index f0dde40c..b8dc32b9 100644 --- a/src/styles/tools/_string.scss +++ b/src/styles/tools/_string.scss @@ -1,7 +1,10 @@ -// Author: Hugo Giraudel - @use "sass:string"; +@function capitalize($string) { + @return string.to-upper-case(string.slice($string, 1, 1)) + string.slice($string, 2); +} + +// Author: Hugo Giraudel @function replace($string, $search, $replace: "") { $index: string.index($string, $search); diff --git a/src/theme.scss b/src/theme.scss index ae0ebb51..d7537a63 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -306,6 +306,70 @@ --rui-Alert--dark__foreground-color: var(--rui-color-neutral-on-dark); --rui-Alert--dark__background-color: var(--rui-color-background-dark); + // + // Badge + // ===== + + // Badge: filled priority + + // Badge: filled priority: success variant + --rui-Badge--filled--success__color: var(--rui-color-feedback-on-success); + --rui-Badge--filled--success__background-color: var(--rui-color-feedback-success); + + // Badge: filled priority: warning variant + --rui-Badge--filled--warning__color: var(--rui-color-feedback-on-warning); + --rui-Badge--filled--warning__background-color: var(--rui-color-feedback-warning); + + // Badge: filled priority: danger variant + --rui-Badge--filled--danger__color: var(--rui-color-feedback-on-danger); + --rui-Badge--filled--danger__background-color: var(--rui-color-feedback-danger); + + // Badge: filled priority: help variant + --rui-Badge--filled--help__color: var(--rui-color-feedback-on-help); + --rui-Badge--filled--help__background-color: var(--rui-color-feedback-help); + + // Badge: filled priority: info variant + --rui-Badge--filled--info__color: var(--rui-color-feedback-on-info); + --rui-Badge--filled--info__background-color: var(--rui-color-feedback-info); + + // Badge: filled priority: note variant + --rui-Badge--filled--note__color: var(--rui-color-feedback-on-note); + --rui-Badge--filled--note__background-color: var(--rui-color-feedback-note); + + // Badge: filled priority: light variant + --rui-Badge--filled--light__color: var(--rui-color-neutral-on-light); + --rui-Badge--filled--light__background-color: var(--rui-color-neutral-light); + + // Badge: filled priority: dark variant + --rui-Badge--filled--dark__color: var(--rui-color-neutral-on-dark); + --rui-Badge--filled--dark__background-color: var(--rui-color-neutral-dark); + + // Badge: outline priority + + // Badge: outline priority: success variant + --rui-Badge--outline--success__color: var(--rui-color-feedback-success); + + // Badge: outline priority: warning variant + --rui-Badge--outline--warning__color: var(--rui-color-feedback-warning); + + // Badge: outline priority: danger variant + --rui-Badge--outline--danger__color: var(--rui-color-feedback-danger); + + // Badge: outline priority: help variant + --rui-Badge--outline--help__color: var(--rui-color-feedback-help); + + // Badge: outline priority: info variant + --rui-Badge--outline--info__color: var(--rui-color-feedback-info); + + // Badge: outline priority: note variant + --rui-Badge--outline--note__color: var(--rui-color-feedback-note); + + // Badge: outline priority: light variant + --rui-Badge--outline--light__color: var(--rui-color-neutral-light); + + // Badge: outline priority: dark variant + --rui-Badge--outline--dark__color: var(--rui-color-neutral-dark); + // // Button // ======