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

* docs(badge.stories.tsx): inline-radio with all FlowbiteColors on storybook * feat(badge.tsx): add FlowbiteColors support to badge added all non-existing colors from FlowbiteColors to Badge --------- Co-authored-by: Ricardo Lüders <[email protected]>
themesberg · Feb 22, 2023 · f00628f · f00628f
1 parent 3f115c6
commit f00628f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/lib/components/Badge/Badge.stories.tsx b/src/lib/components/Badge/Badge.stories.tsx
@@ -1,11 +1,18 @@
 import type { Meta, Story } from '@storybook/react/types-6-0';
 import { HiCheck } from 'react-icons/hi';
+import theme from '../../theme/default';
 import type { BadgeProps } from './Badge';
 import { Badge } from './Badge';
 
 export default {
   title: 'Components/Badge',
   component: Badge,
+  argTypes: {
+    color: {
+      options: Object.keys(theme.badge.root.color),
+      control: { type: 'inline-radio' },
+    },
+  },
 } as Meta;
 
 const Template: Story<BadgeProps> = (args) => (

diff --git a/src/lib/components/Badge/Badge.tsx b/src/lib/components/Badge/Badge.tsx
@@ -12,7 +12,7 @@ export interface FlowbiteBadgeTheme {
 
 export interface FlowbiteBadgeRootTheme {
   base: string;
-  color: BadgeColors;
+  color: FlowbiteColors;
   href: string;
   size: BadgeSizes;
 }
@@ -21,17 +21,12 @@ export interface FlowbiteBadgeIconTheme extends FlowbiteBoolean {
   size: BadgeSizes;
 }
 
-export interface BadgeColors
-  extends Pick<FlowbiteColors, 'failure' | 'gray' | 'indigo' | 'info' | 'pink' | 'purple' | 'success'> {
-  [key: string]: string;
-}
-
 export interface BadgeSizes extends Pick<FlowbiteSizes, 'xs' | 'sm'> {
   [key: string]: string;
 }
 
 export interface BadgeProps extends PropsWithChildren<Omit<ComponentProps<'span'>, 'color'>> {
-  color?: keyof BadgeColors;
+  color?: keyof FlowbiteColors;
   href?: string;
   icon?: FC<ComponentProps<'svg'>>;
   size?: keyof BadgeSizes;

diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
@@ -165,6 +165,18 @@ const theme: FlowbiteTheme = {
         purple:
           'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900 group-hover:bg-purple-200 dark:group-hover:bg-purple-300',
         pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900 group-hover:bg-pink-200 dark:group-hover:bg-pink-300',
+        blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-900 group-hover:bg-blue-200 dark:group-hover:bg-blue-300',
+        cyan: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-900 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300',
+        dark: 'bg-gray-600 text-gray-100 dark:bg-gray-900 dark:text-gray-200 group-hover:bg-gray-500 dark:group-hover:bg-gray-700',
+        light:
+          'bg-gray-200 text-gray-800 dark:bg-gray-400 dark:text-gray-900 group-hover:bg-gray-300 dark:group-hover:bg-gray-500',
+        green:
+          'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300',
+        lime: 'bg-lime-100 text-lime-800 dark:bg-lime-200 dark:text-lime-900 group-hover:bg-lime-200 dark:group-hover:bg-lime-300',
+        red: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300',
+        teal: 'bg-teal-100 text-teal-800 dark:bg-teal-200 dark:text-teal-900 group-hover:bg-teal-200 dark:group-hover:bg-teal-300',
+        yellow:
+          'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300',
       },
       href: 'group',
       size: {