feat(Alert): add succes intent

src/components/Alert/Alert.module.css

@@ -1,18 +1,32 @@
 .alert {
   padding: 14.5px 18px;
-  background-color: var(--color-error-light);
   display: flex;
   align-items: center;
   border-radius: var(--border-radius-small);
 }
 
+.alert.alertError {
+  background-color: var(--color-error-light);
+}
+
+.alert.alertSuccess {
+  background-color: var(--color-success-light);
+}
+
 .message {
   display: inline-block;
 }
 
 svg.icon {
   margin-right: 10px;
-  color: var(--color-error);
   height: 16px;
   width: 16px;
 }
+
+svg.icon.iconSuccess {
+  color: var(--color-success);
+}
+
+svg.icon.iconError {
+  color: var(--color-error);
+}

src/components/Alert/Alert.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AlertCircle } from 'react-feather';
+import { AlertCircle, CheckCircle } from 'react-feather';
 import classNames from 'classnames';
 
 import cssReset from '../../css-reset.module.css';
@@ -14,11 +14,22 @@ interface Props {
 }
 
 const Alert: React.FC<Props> = ({ intent = 'error', message, className }: Props) => {
-  const mergedClassNames = classNames(cssReset.ventura, styles.alert, className);
+  const mergedClassNames = classNames(
+    cssReset.ventura,
+    styles.alert,
+    {
+      [styles.alertError]: intent === 'error',
+      [styles.alertSuccess]: intent === 'success',
+    },
+    className,
+  );
 
   return (
     <div className={mergedClassNames}>
-      {intent === 'error' && <AlertCircle className={styles.icon} />}
+      {intent === 'error' && <AlertCircle className={classNames(styles.icon, styles.iconError)} />}
+      {intent === 'success' && (
+        <CheckCircle className={classNames(styles.icon, styles.iconSuccess)} />
+      )}
       <span className={styles.message}>{message}</span>
     </div>
   );

src/components/Toaster/Toaster.mdx

@@ -16,7 +16,10 @@ Toaster allow you to display status messages.
 ### Basic usage
 
 <Playground>
-   <Button onClick={(event) => {
-     toaster.error('Error toaster')}
-     }>Click me</Button>
+  <Button onClick={(event) => {
+    toaster.error('Error toaster')}
+    }>Click me</Button>
+  <Button onClick={(event) => {
+    toaster.success('Success toaster')}
+    }>Click me</Button>
 </Playground>

src/theme.css

@@ -13,6 +13,8 @@
   --color-neutral-8: #2e2e2e;
   --color-neutral-9: #000000;
 
+  --color-success-1: #e1f5e3;
+  --color-success-2:#5cc767;
   --color-error-1: #ffe2e2;
   --color-error-2: #eb3737;
 }
@@ -31,6 +33,8 @@
   --color-secondary-font: var(--color-neutral-8);
   --color-secondary-hover: var(--color-neutral-2);
 
+  --color-success: var(--color-success-2);
+  --color-success-light: var(--color-success-1);
   --color-error: var(--color-error-2);
   --color-error-light: var(--color-error-1);