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.
+
+
+
## 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"
+ }
+ }
+ }
+}