Design/error alert

.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.

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 {

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
   </Story>
 </Canvas>
 
+## Error
+
+The modifier class `c-alert--error` will override the orange default color and make the icon and background red.
+
+<Canvas>
+  <Story
+    name="Error"
+    args={{
+      message: 'Oops! Something went wrong.',
+      dismissable: true,
+      class: 'c-alert--error',
+      icon: 'confused-face',
+    }}
+  >
+    {(args) => template(args)}
+  </Story>
+</Canvas>
+
 ## 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.

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]}
   />
 </ColorPalette>
+
+## Status Colors
+
+These colors help communicate the status of elements, for example an icon accompanying an error message.
+
+<ColorPalette>
+  <ColorItem
+    title="$status-error-dark"
+    colors={[colors.status.error_dark.value]}
+  />
+  <ColorItem
+    title="$status-error-light"
+    colors={[colors.status.error_light.value]}
+  />
+</ColorPalette>

src/tokens/color/status.json

@@ -0,0 +1,12 @@
+{
+  "color": {
+    "status": {
+      "error_dark": {
+        "value": "#bc1919"
+      },
+      "error_light": {
+        "value": "#ffcaca"
+      }
+    }
+  }
+}