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

* feat(more colors to alert component): adds more possible colors to alert component (issue #473)

#473

re #473

* feat(add more colors and check contrast): added gray and light + update dark

add "gray" and "light" to add support to all FlowbiteColors

re #473

* fix(linter): linter

linter

* fix(use flowbitecolors): changes AlertColors extends FlowbiteColors to just FlowbiteColors

Since AlertColors now implement all colors from FlowbiteColors I had replaced it

* docs(alert.stories.tsx): inline-radio with all FlowbiteColors on storybook

* fix(/components/alert/alert.tsx): reverts "pink" default color to "info"

* revert(/lib/theme): undo remove from `Alert` theme

This was a mistake I made while merging their PR manually.

* chore(/lib/components/alert): fix story refers to old theme

---------

Co-authored-by: Conner Davis <conner@tulup.io>
Co-authored-by: Ricardo Lüders <ricardo@luders.com.br>

Author: 3 people

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.color),
+      control: { type: 'inline-radio' },
+    },
+  },
 } as Meta;
 
 const Template: Story<AlertProps> = (props) => <Alert {...props} />;

src/lib/components/Alert/Alert.tsx

@@ -10,25 +10,21 @@ export interface FlowbiteAlertTheme {
   base: string;
   borderAccent: string;
   closeButton: FlowbiteAlertCloseButtonTheme;
-  color: AlertColors;
+  color: FlowbiteColors;
   icon: string;
   rounded: string;
   wrapper: string;
 }
 
 export interface FlowbiteAlertCloseButtonTheme {
   base: string;
-  color: AlertColors;
+  color: FlowbiteColors;
   icon: string;
 }
 
-export interface AlertColors extends Pick<FlowbiteColors, 'failure' | 'gray' | 'info' | 'success' | 'warning'> {
-  [key: string]: string;
-}
-
 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;

src/lib/theme/default.ts

@@ -47,6 +47,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',
       },
     },
     color: {
@@ -55,6 +72,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',