fix: Replace old colors on Alerts page & stories (#156)

- `blue` -> `info`
- `green` -> `success`
- `yellow` -> `warning`
- `red` -> `failure`

src/docs/pages/AlertsPage.tsx

@@ -14,20 +14,20 @@ const AlertsPage: FC = () => {
   const examples: CodeExample[] = [
     {
       title: 'Default alert',
-      code: <Alert color="blue">{alertText}</Alert>,
+      code: <Alert color="info">{alertText}</Alert>,
     },
     {
       title: 'Alerts with icon',
       code: (
-        <Alert color="red" icon={HiInformationCircle}>
+        <Alert color="failure" icon={HiInformationCircle}>
           {alertText}
         </Alert>
       ),
     },
     {
       title: 'Dismissible alerts',
       code: (
-        <Alert color="green" onDismiss={() => alert('Alert dismissed!')}>
+        <Alert color="success" onDismiss={() => alert('Alert dismissed!')}>
           {alertText}
         </Alert>
       ),
@@ -36,15 +36,15 @@ const AlertsPage: FC = () => {
     {
       title: 'Rounded',
       code: (
-        <Alert color="yellow" rounded={false}>
+        <Alert color="warning" rounded={false}>
           {alertText}
         </Alert>
       ),
     },
     {
       title: 'Border accent',
       code: (
-        <Alert color="yellow" withBorderAccent>
+        <Alert color="warning" withBorderAccent>
           {alertText}
         </Alert>
       ),
@@ -53,7 +53,7 @@ const AlertsPage: FC = () => {
       title: 'Additional content',
       code: (
         <Alert
-          color="blue"
+          color="info"
           additionalContent={
             <>
               <div className="mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800">
@@ -87,7 +87,7 @@ const AlertsPage: FC = () => {
       title: 'All options',
       code: (
         <Alert
-          color="green"
+          color="success"
           rounded={false}
           withBorderAccent
           onDismiss={() => alert('Alert dismissed!')}

src/lib/components/Alert/Alert.spec.tsx

@@ -47,7 +47,7 @@ const TestAlert = (): JSX.Element => {
           </div>
         </>
       }
-      color="blue"
+      color="info"
       icon={HiInformationCircle}
       onDismiss={() => setDismissed(!isDismissed)}
     >

src/lib/components/Alert/Alert.stories.tsx

@@ -38,15 +38,15 @@ AlertWithIcons.args = {
 export const AlertDismissible = Template.bind({});
 AlertDismissible.storyName = 'Dismissible';
 AlertDismissible.args = {
-  color: 'green',
+  color: 'success',
   onDismiss: () => alert('Alert dismissed!'),
   children: <>Info alert! Change a few things up and try submitting again.</>,
 };
 
 export const AlertRounded = Template.bind({});
 AlertRounded.storyName = 'Not rounded';
 AlertRounded.args = {
-  color: 'yellow',
+  color: 'warning',
   rounded: false,
   onDismiss: false,
   children: <>Info alert! Change a few things up and try submitting again.</>,
@@ -55,7 +55,7 @@ AlertRounded.args = {
 export const AlertWithBorderAccent = Template.bind({});
 AlertWithBorderAccent.storyName = 'Border accent';
 AlertWithBorderAccent.args = {
-  color: 'yellow',
+  color: 'warning',
   onDismiss: false,
   withBorderAccent: true,
   children: <>Info alert! Change a few things up and try submitting again.</>,
@@ -64,7 +64,7 @@ AlertWithBorderAccent.args = {
 export const AlertWithAdditionalContent = Template.bind({});
 AlertWithAdditionalContent.storyName = 'Additional content';
 AlertWithAdditionalContent.args = {
-  color: 'blue',
+  color: 'info',
   icon: HiInformationCircle,
   onDismiss: false,
   withBorderAccent: true,
@@ -101,7 +101,7 @@ AlertWithAdditionalContent.args = {
 export const AlertWithAllOptions = Template.bind({});
 AlertWithAllOptions.storyName = 'All options';
 AlertWithAllOptions.args = {
-  color: 'green',
+  color: 'success',
   rounded: false,
   withBorderAccent: true,
   onDismiss: () => alert('Alert dismissed!'),