Design/error alert

.changeset/nervous-glasses-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add new Error alert, 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 {
@@ -149,3 +153,10 @@
     transform: scale(scale.$effect-shrink);
   }
 }
+
+.c-alert__error {
+  .c-alert__extra {
+    background-color: var(--theme-color-background-icon-error);
+    color: var(--theme-color-icon-error);
+  }
+}

src/components/alert/alert.stories.mdx

@@ -65,6 +65,24 @@ Alerts work well even when displayed at full width. Their contents will constrai
   </Story>
 </Canvas>
 
+## Error
+
+The 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>
+
 ## Icon
 
 An option to add an icon to the alert. You can add any icon name from our library in the `icon` property. Right now, the color is hardcoded to orange to satisfy the current use case of our offline notification, but it would be nice to add more color options in the future.

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
+
+Includes colors that can reflect the status of elements.
+
+<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,14 @@
+{
+  "color": {
+    "status": {
+      "error_dark": {
+        "value": "#bc1919",
+        "comment": "For errors, intended to be used for the foreground when used on the light theme"
+      },
+      "error_light": {
+        "value": "#ffcaca",
+        "comment": "For errors, intended for backgrounds when used on the light theme"
+      }
+    }
+  }
+}