[CL-503] Add notification color variables (#11802)

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")}

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;
 

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"),