chore: Add success version to badge + story

web/src/components/Badge.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Badge from './Badge';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Basics/Badge',
+  component: Badge,
+  decorators: [
+    (Story) => (
+      <div className="flex">
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: ['default', 'success', 'warning'],
+        labels: {
+          default: 'Default',
+          success: 'Success',
+          warning: 'Warning',
+        },
+      },
+    },
+  },
+  args: {
+    pillText: 'Badge',
+    type: 'default',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  name: 'Default Badge',
+};
+
+export const Success: Story = {
+  name: 'Success Badge',
+  args: {
+    type: 'success',
+  },
+};
+
+export const Warning: Story = {
+  name: 'Warning Badge',
+  args: {
+    type: 'warning',
+  },
+};

web/src/components/Badge.tsx

@@ -1,4 +1,4 @@
-export type PillType = 'default' | 'warning';
+export type PillType = 'default' | 'warning' | 'success';
 
 type BadgeProps = {
   pillText: string;
@@ -7,14 +7,27 @@ type BadgeProps = {
 };
 
 export default function Badge({ pillText, type, icon }: BadgeProps) {
-  const classes =
-    type == 'warning'
-      ? 'bg-amber-700/10 dark:bg-amber-500/10 text-amber-700 dark:text-amber-500'
-      : 'bg-neutral-200 dark:bg-gray-700 text-black dark:text-white';
+  let classes = '';
+
+  switch (type) {
+    case 'warning': {
+      classes =
+        'bg-warning/10 dark:bg-warning-dark/10 text-warning dark:text-warning-dark';
+      break;
+    }
+    case 'success': {
+      classes =
+        'bg-success/10 dark:bg-success-dark/10 text-success dark:text-success-dark';
+      break;
+    }
+    default: {
+      classes = 'bg-neutral-200 dark:bg-gray-700 text-black dark:text-white';
+    }
+  }
 
   return (
     <span
-      className={`ml-2 flex h-[22px] flex-row items-center gap-1 whitespace-nowrap rounded-full px-2 py-1 text-xs font-semibold ${classes}`}
+      className={`flex h-6 flex-row items-center gap-1 whitespace-nowrap rounded-full px-2 py-1 text-xs font-semibold ${classes}`}
       data-test-id="badge"
     >
       {icon != undefined && <div className={`${icon}`} />}

web/src/features/panels/zone/EstimationCard.tsx

@@ -156,7 +156,7 @@ function BaseCard({
     <div
       className={`w-full rounded-lg px-3 py-1.5 ${
         estimationMethod == 'outage'
-          ? 'bg-amber-700/20 dark:bg-amber-500/20'
+          ? 'bg-warning/20 dark:bg-warning-dark/20'
           : 'bg-neutral-100 dark:bg-gray-800'
       } mb-4 gap-2 border border-neutral-200 transition-all dark:border-gray-700`}
     >
@@ -224,7 +224,7 @@ function OutageCard({
       iconPill="h-[12px] w-[12px] mt-[1px] bg-[url('/images/warning_light.svg')] bg-center dark:bg-[url('/images/warning_dark.svg')]"
       showMethodologyLink={false}
       pillType="warning"
-      textColorTitle="text-amber-700 dark:text-amber-500"
+      textColorTitle="text-warning dark:text-warning-dark"
       cardType="outage-card"
     />
   );
@@ -259,7 +259,7 @@ function EstimatedCard({
       iconPill={undefined}
       showMethodologyLink={true}
       pillType="default"
-      textColorTitle="text-amber-700 dark:text-amber-500"
+      textColorTitle="text-warning dark:text-warning-dark"
       cardType="estimated-card"
     />
   );
@@ -274,7 +274,7 @@ function EstimatedTSACard() {
       iconPill={undefined}
       showMethodologyLink={true}
       pillType={undefined}
-      textColorTitle="text-amber-700 dark:text-amber-500"
+      textColorTitle="text-warning dark:text-warning-dark"
       cardType="estimated-card"
     />
   );

web/tailwind.config.cjs

@@ -3,6 +3,7 @@ const defaultConfig = require('tailwindcss/defaultConfig');
 const formsPlugin = require('@tailwindcss/forms');
 const radix = require('tailwindcss-radix');
 const typography = require('@tailwindcss/typography');
+const colors = require('tailwindcss/colors');
 
 /** @type {import('tailwindcss/types').Config} */
 const config = {
@@ -35,6 +36,18 @@ const config = {
         'brand-green': '#135836',
         'brand-yellow': '#E9B73B',
         'brand-brown': '#702214',
+        success: {
+          DEFAULT: colors.emerald[800],
+          dark: colors.emerald[500],
+        },
+        warning: {
+          DEFAULT: colors.amber[700],
+          dark: colors.amber[500],
+        },
+        danger: {
+          DEFAULT: colors.red[700],
+          dark: colors.red[400],
+        },
       },
     },
     fontFamily: {