feat(/lib/theme): add Tailwind CSS colors to <Alert>s

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

@@ -1,11 +1,18 @@
 import type { Meta, Story } from '@storybook/react/types-6-0';
 import { HiEye, HiInformationCircle } from 'react-icons/hi';
+import theme from '../../theme/default';
 import type { AlertProps } from './Alert';
 import { Alert } from './Alert';
 
 export default {
   title: 'Components/Alert',
   component: Alert,
+  argTypes: {
+    color: {
+      options: Object.keys(theme.alert.root.color),
+      control: { type: 'inline-radio' },
+    },
+  },
 } as Meta;
 
 const Template: Story<AlertProps> = (props) => <Alert {...props} />;

src/lib/components/Alert/Alert.tsx

@@ -15,24 +15,20 @@ export interface FlowbiteAlertRootTheme {
   base: string;
   borderAccent: string;
   wrapper: string;
-  color: AlertColors;
+  color: FlowbiteColors;
   icon: string;
   rounded: string;
 }
 
 export interface FlowbiteAlertCloseButtonTheme {
   base: string;
   icon: string;
-  color: AlertColors;
-}
-
-export interface AlertColors extends Pick<FlowbiteColors, 'failure' | 'gray' | 'info' | 'success' | 'warning'> {
-  [key: string]: string;
+  color: FlowbiteColors;
 }
 
 export interface AlertProps extends PropsWithChildren<Omit<ComponentProps<'div'>, 'color'>> {
   additionalContent?: ReactNode;
-  color?: keyof AlertColors;
+  color?: keyof FlowbiteColors;
   icon?: FC<ComponentProps<'svg'>>;
   onDismiss?: boolean | (() => void);
   rounded?: boolean;
@@ -43,7 +39,7 @@ export interface AlertProps extends PropsWithChildren<Omit<ComponentProps<'div'>
 export const Alert: FC<AlertProps> = ({
   additionalContent,
   children,
-  color = 'info',
+  color = 'pink',
   icon: Icon,
   onDismiss,
   rounded = true,

src/lib/theme/default.ts

@@ -43,6 +43,18 @@ const theme: FlowbiteTheme = {
         failure: 'text-red-700 bg-red-100 border-red-500 dark:bg-red-200 dark:text-red-800',
         success: 'text-green-700 bg-green-100 border-green-500 dark:bg-green-200 dark:text-green-800',
         warning: 'text-yellow-700 bg-yellow-100 border-yellow-500 dark:bg-yellow-200 dark:text-yellow-800',
+        red: 'text-red-700 bg-red-100 border-red-500 dark:bg-red-200 dark:text-red-800',
+        green: 'text-green-700 bg-green-100 border-green-500 dark:bg-green-200 dark:text-green-800',
+        yellow: 'text-yellow-700 bg-yellow-100 border-yellow-500 dark:bg-yellow-200 dark:text-yellow-800',
+        blue: 'text-blue-700 bg-blue-100 border-blue-500 dark:bg-blue-200 dark:text-blue-800',
+        cyan: 'text-cyan-700 bg-cyan-100 border-cyan-500 dark:bg-cyan-200 dark:text-cyan-800',
+        pink: 'text-pink-700 bg-pink-100 border-pink-500 dark:bg-pink-200 dark:text-pink-800',
+        lime: 'text-lime-700 bg-lime-100 border-lime-500 dark:bg-lime-200 dark:text-lime-800',
+        dark: 'text-gray-200 bg-gray-800 border-gray-600 dark:bg-gray-900 dark:text-gray-300',
+        indigo: 'text-indigo-700 bg-indigo-100 border-indigo-500 dark:bg-indigo-200 dark:text-indigo-800',
+        purple: 'text-purple-700 bg-purple-100 border-purple-500 dark:bg-purple-200 dark:text-purple-800',
+        teal: 'text-teal-700 bg-teal-100 border-teal-500 dark:bg-teal-200 dark:text-teal-800',
+        light: 'text-gray-600 bg-gray-50 border-gray-400 dark:bg-gray-500 dark:text-gray-200',
       },
       icon: 'mr-3 inline h-5 w-5 flex-shrink-0',
       rounded: 'rounded-lg',
@@ -59,6 +71,23 @@ const theme: FlowbiteTheme = {
           'bg-green-100 text-green-500 hover:bg-green-200 focus:ring-green-400 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300',
         warning:
           'bg-yellow-100 text-yellow-500 hover:bg-yellow-200 focus:ring-yellow-400 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300',
+        red: 'bg-red-100 text-red-500 hover:bg-red-200 focus:ring-red-400 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300',
+        green:
+          'bg-green-100 text-green-500 hover:bg-green-200 focus:ring-green-400 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300',
+        yellow:
+          'bg-yellow-100 text-yellow-500 hover:bg-yellow-200 focus:ring-yellow-400 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300',
+        blue: 'bg-blue-100 text-blue-500 hover:bg-blue-200 focus:ring-blue-400 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300',
+        cyan: 'bg-cyan-100 text-cyan-500 hover:bg-cyan-200 focus:ring-cyan-400 dark:bg-cyan-200 dark:text-cyan-600 dark:hover:bg-cyan-300',
+        pink: 'bg-pink-100 text-pink-500 hover:bg-pink-200 focus:ring-pink-400 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300',
+        lime: 'bg-lime-100 text-lime-500 hover:bg-lime-200 focus:ring-lime-400 dark:bg-lime-200 dark:text-lime-600 dark:hover:bg-lime-300',
+        dark: 'bg-gray-100 text-gray-500 hover:bg-gray-200 focus:ring-gray-400 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300',
+        indigo:
+          'bg-indigo-100 text-indigo-500 hover:bg-indigo-200 focus:ring-indigo-400 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300',
+        purple:
+          'bg-purple-100 text-purple-500 hover:bg-purple-200 focus:ring-purple-400 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300',
+        teal: 'bg-teal-100 text-teal-500 hover:bg-teal-200 focus:ring-teal-400 dark:bg-teal-200 dark:text-teal-600 dark:hover:bg-teal-300',
+        light:
+          'bg-gray-50 text-gray-500 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white',
       },
     },
   },