diff --git a/.changeset/nervous-glasses-sparkle.md b/.changeset/nervous-glasses-sparkle.md new file mode 100644 index 000000000..9120c785c --- /dev/null +++ b/.changeset/nervous-glasses-sparkle.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add new error modifier for the Alert component, confused face icon, and status color design tokens. diff --git a/src/assets/icons/confused-face.svg b/src/assets/icons/confused-face.svg new file mode 100644 index 000000000..14cd07604 --- /dev/null +++ b/src/assets/icons/confused-face.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index 7ef035fc6..16d0659a6 100644 --- a/src/components/alert/alert.scss +++ b/src/components/alert/alert.scss @@ -16,11 +16,15 @@ $lightness: 30% )}; --theme-color-icon: #{color.$base-orange}; + --theme-color-icon-error: #{color.$status-error-dark}; + --theme-color-background-icon-error: #{color.$status-error-light}; } @include theme.props(dark) { --theme-color-background-icon: #{color.$base-orange}; --theme-color-icon: #{sass-color.adjust(color.$base-orange, $lightness: 30%)}; + --theme-color-icon-error: #{color.$status-error-light}; + --theme-color-background-icon-error: #{color.$status-error-dark}; } .c-alert { @@ -106,6 +110,11 @@ border: ms.step(-4) solid var(--theme-color-background-secondary); border-radius: size.$border-radius-full; } + + .c-alert--error & { + background-color: var(--theme-color-background-icon-error); + color: var(--theme-color-icon-error); + } } .c-alert__content { diff --git a/src/components/alert/alert.stories.mdx b/src/components/alert/alert.stories.mdx index 931cfcff2..646d928c0 100644 --- a/src/components/alert/alert.stories.mdx +++ b/src/components/alert/alert.stories.mdx @@ -81,6 +81,24 @@ An option to add an icon to the alert. You can add any icon name from our librar +## Error + +The modifier class `c-alert--error` will override the orange default color and make the icon and background red. + + + + {(args) => template(args)} + + + ## Floating By adding `floating: true`, a light border and shadow will be added to the alert for a floating effect. The background is white to improve the contrast between the border, shadow and background. In the future, we could make it a possibility to change the background color by itself. diff --git a/src/design/colors.stories.mdx b/src/design/colors.stories.mdx index 1cfdb214f..06f55a248 100644 --- a/src/design/colors.stories.mdx +++ b/src/design/colors.stories.mdx @@ -125,3 +125,18 @@ We design and build with accessibility in mind. Color contrast for text should m colors={[colors.text.action.value]} /> + +## Status Colors + +These colors help communicate the status of elements, for example an icon accompanying an error message. + + + + + diff --git a/src/tokens/color/status.json b/src/tokens/color/status.json new file mode 100644 index 000000000..255d64ca9 --- /dev/null +++ b/src/tokens/color/status.json @@ -0,0 +1,12 @@ +{ + "color": { + "status": { + "error_dark": { + "value": "#bc1919" + }, + "error_light": { + "value": "#ffcaca" + } + } + } +}