From 78764a0807827ef1beff7b7c73af210024374b7e Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Wed, 6 Nov 2024 11:46:40 -0500
Subject: [PATCH] [CL-503] Add notification color variables (#11802)

---
 libs/components/src/stories/colors.mdx  | 4 ++++
 libs/components/src/tw-theme.css        | 6 ++++++
 libs/components/tailwind.config.base.js | 7 +++++++
 3 files changed, 17 insertions(+)

diff --git a/libs/components/src/stories/colors.mdx b/libs/components/src/stories/colors.mdx
index 2891fe66803..22079dfcbf7 100644
--- a/libs/components/src/stories/colors.mdx
+++ b/libs/components/src/stories/colors.mdx
@@ -57,6 +57,10 @@ export const Table = (args) => (
       {Row("info-600")}
       {Row("info-700")}
     </tbody>
+    <tbody>
+      {Row("notification-100")}
+      {Row("notification-600")}
+    </tbody>
     <tbody>
       {Row("art-primary")}
       {Row("art-accent")}
diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css
index d2cce9a842b..0a5a66337ac 100644
--- a/libs/components/src/tw-theme.css
+++ b/libs/components/src/tw-theme.css
@@ -37,6 +37,9 @@
   --color-success-600: 12 128 24;
   --color-success-700: 11 111 21;
 
+  --color-notification-100: 255 225 247;
+  --color-notification-600: 192 17 118;
+
   --color-art-primary: 2 15 102;
   --color-art-accent: 44 221 223;
 
@@ -92,6 +95,9 @@
   --color-info-600: 121 161 233;
   --color-info-700: 219 229 246;
 
+  --color-notification-100: 117 37 83;
+  --color-notification-600: 255 143 208;
+
   --color-art-primary: 243 246 249;
   --color-art-accent: 44 221 233;
 
diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js
index 58409899c92..dbfb6c54272 100644
--- a/libs/components/tailwind.config.base.js
+++ b/libs/components/tailwind.config.base.js
@@ -58,6 +58,10 @@ module.exports = {
         600: rgba("--color-info-600"),
         700: rgba("--color-info-700"),
       },
+      notification: {
+        100: rgba("--color-notification-100"),
+        600: rgba("--color-notification-600"),
+      },
       art: {
         primary: rgba("--color-art-primary"),
         accent: rgba("--color-art-accent"),
@@ -116,6 +120,9 @@ module.exports = {
         300: rgba("--color-secondary-300"),
         700: rgba("--color-secondary-700"),
       },
+      notification: {
+        600: rgba("--color-notification-600"),
+      },
     },
     ringOffsetColor: ({ theme }) => ({
       DEFAULT: theme("colors.background"),