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

Adds standard colors from Tailwind CSS, like cyan, which were missing from the options for `<Button color="..">`.

* 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

* feat(add more colors in button): added support to FlowbiteColors in Button

re #473

* fix(typescript button.tsx): uses FlowbiteColors instead of Pick

re #473

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

* revert(alert.tsx changes): revert changes that should've added in another PR

---------

Co-authored-by: Conner Davis <[email protected]>

src/lib/components/Button/Button.stories.tsx

@@ -9,7 +9,7 @@ export default {
   argTypes: {
     color: {
       options: Object.keys(theme.button.color),
-      control: { type: 'radio' },
+      control: { type: 'inline-radio' },
     },
   },
 } as Meta;

src/lib/components/Button/Button.tsx

@@ -15,7 +15,7 @@ import ButtonGroup from './ButtonGroup';
 export interface FlowbiteButtonTheme {
   base: string;
   fullSized: string;
-  color: ButtonColors;
+  color: FlowbiteColors;
   disabled: string;
   gradient: ButtonGradientColors;
   gradientDuoTone: ButtonGradientDuoToneColors;
@@ -59,7 +59,7 @@ export interface ButtonSizes extends Pick<FlowbiteSizes, 'xs' | 'sm' | 'lg' | 'x
 }
 
 export interface ButtonProps extends Omit<ComponentProps<'button'>, 'color' | 'ref'> {
-  color?: keyof ButtonColors;
+  color?: keyof FlowbiteColors;
   fullSized?: boolean;
   gradientDuoTone?: keyof ButtonGradientDuoToneColors;
   gradientMonochrome?: keyof ButtonGradientColors;

src/lib/theme/default.ts

@@ -184,6 +184,18 @@ const theme: FlowbiteTheme = {
         'text-white bg-green-700 border border-transparent hover:bg-green-800 focus:ring-4 focus:ring-green-300 disabled:hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 dark:disabled:hover:bg-green-600',
       warning:
         'text-white bg-yellow-400 border border-transparent hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 disabled:hover:bg-yellow-400 dark:focus:ring-yellow-900 dark:disabled:hover:bg-yellow-400',
+      blue: 'text-blue-900 bg-white border border-blue-300 hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 disabled:hover:bg-white dark:bg-blue-600 dark:text-white dark:border-blue-600 dark:hover:bg-blue-700 dark:hover:border-blue-700 dark:focus:ring-blue-700',
+      cyan: 'text-cyan-900 bg-white border border-cyan-300 hover:bg-cyan-100 focus:ring-4 focus:ring-cyan-300 disabled:hover:bg-white dark:bg-cyan-600 dark:text-white dark:border-cyan-600 dark:hover:bg-cyan-700 dark:hover:border-cyan-700 dark:focus:ring-cyan-700',
+      green:
+        'text-green-900 bg-white border border-green-300 hover:bg-green-100 focus:ring-4 focus:ring-green-300 disabled:hover:bg-white dark:bg-green-600 dark:text-white dark:border-green-600 dark:hover:bg-green-700 dark:hover:border-green-700 dark:focus:ring-green-700',
+      indigo:
+        'text-indigo-900 bg-white border border-indigo-300 hover:bg-indigo-100 focus:ring-4 focus:ring-indigo-300 disabled:hover:bg-white dark:bg-indigo-600 dark:text-white dark:border-indigo-600 dark:hover:bg-indigo-700 dark:hover:border-indigo-700 dark:focus:ring-indigo-700',
+      lime: 'text-lime-900 bg-white border border-lime-300 hover:bg-lime-100 focus:ring-4 focus:ring-lime-300 disabled:hover:bg-white dark:bg-lime-600 dark:text-white dark:border-lime-600 dark:hover:bg-lime-700 dark:hover:border-lime-700 dark:focus:ring-lime-700',
+      pink: 'text-pink-900 bg-white border border-pink-300 hover:bg-pink-100 focus:ring-4 focus:ring-pink-300 disabled:hover:bg-white dark:bg-pink-600 dark:text-white dark:border-pink-600 dark:hover:bg-pink-700 dark:hover:border-pink-700 dark:focus:ring-pink-700',
+      red: 'text-red-900 bg-white border border-red-300 hover:bg-red-100 focus:ring-4 focus:ring-red-300 disabled:hover:bg-white dark:bg-red-600 dark:text-white dark:border-red-600 dark:hover:bg-red-700 dark:hover:border-red-700 dark:focus:ring-red-700',
+      teal: 'text-teal-900 bg-white border border-teal-300 hover:bg-teal-100 focus:ring-4 focus:ring-teal-300 disabled:hover:bg-white dark:bg-teal-600 dark:text-white dark:border-teal-600 dark:hover:bg-teal-700 dark:hover:border-teal-700 dark:focus:ring-teal-700',
+      yellow:
+        'text-yellow-900 bg-white border border-yellow-300 hover:bg-yellow-100 focus:ring-4 focus:ring-yellow-300 disabled:hover:bg-white dark:bg-yellow-600 dark:text-white dark:border-yellow-600 dark:hover:bg-yellow-700 dark:hover:border-yellow-700 dark:focus:ring-yellow-700',
     },
     disabled: 'cursor-not-allowed opacity-50',
     gradient: {