feat(badge): implement standard configuration

Author: MGREMY

libs/flowbite-angular/badge/badge.component.ts

@@ -1,7 +1,7 @@
 import type { BadgeClass, BadgeColors, BadgeSizes, BadgeTheme } from './badge.theme';
 import { BadgeThemeService } from './badge.theme.service';
 
-import type { DeepPartial } from 'flowbite-angular';
+import type { DeepPartial, StandardThemeInput } from 'flowbite-angular';
 import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
 import { IconComponent, IconRegistry } from 'flowbite-angular/icon';
 import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link';
@@ -38,6 +38,9 @@ export const FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE = new InjectionToken<boolean>(
   'FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE'
 );
 
+export const FLOWBITE_BADGE_STANDARD_THEME_CONFIG_DEFAULT_VALUE =
+  new InjectionToken<StandardThemeInput>('FLOWBITE_BADGE_STANDARD_THEME_CONFIG_DEFAULT_VALUE');
+
 export const FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
   DeepPartial<BadgeTheme>
 >('FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE');
@@ -71,6 +74,10 @@ export const badgeDefaultValueProvider = makeEnvironmentProviders([
     provide: FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE,
     useValue: false,
   },
+  {
+    provide: FLOWBITE_BADGE_STANDARD_THEME_CONFIG_DEFAULT_VALUE,
+    useValue: { hasDark: true, hasHover: true, hasFocus: false, hasDisabled: false },
+  },
   {
     provide: FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE,
     useValue: {},
@@ -159,6 +166,13 @@ export class BadgeComponent extends BaseComponent<BadgeClass> {
    * @default false
    */
   public isPill = model(inject(FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE));
+  /**
+   * Set the standard theme configuration for this badge
+   *
+   * @default
+   * { hasDark: true, hasHover: true, hasFocus: false, hasDisabled: false }
+   */
+  public standardThemeConfig = model(inject(FLOWBITE_BADGE_STANDARD_THEME_CONFIG_DEFAULT_VALUE));
   /**
    * Set the custom style for this badge
    */
@@ -186,6 +200,7 @@ export class BadgeComponent extends BaseComponent<BadgeClass> {
       isIconOnly: booleanToFlowbiteBoolean(this.isIconOnly()),
       isPill: booleanToFlowbiteBoolean(this.isPill()),
       link: this.flowbiteRouterLink?.routerLink.urlTree ?? null,
+      standardThemeConfig: this.standardThemeConfig(),
       customStyle: this.customStyle(),
     });
   }

libs/flowbite-angular/badge/badge.theme.service.ts

@@ -1,7 +1,7 @@
 import type { BadgeClass, BadgeProperties, BadgeTheme } from './badge.theme';
 
 import type { FlowbiteThemeService } from 'flowbite-angular';
-import { mergeTheme } from 'flowbite-angular/utils';
+import { fetchStandardTheme, mergeTheme } from 'flowbite-angular/utils';
 
 import { inject, Injectable, InjectionToken } from '@angular/core';
 import { twMerge } from 'tailwind-merge';
@@ -30,7 +30,7 @@ export class BadgeThemeService implements FlowbiteThemeService<BadgeProperties>
     const output: BadgeClass = {
       rootClass: twMerge(
         theme.root.base,
-        theme.root.color[properties.color],
+        fetchStandardTheme(properties.standardThemeConfig, theme.root.color[properties.color]),
         theme.root.hasBorder[properties.hasBorder],
         theme.root.size[properties.size],
         theme.root.isPill[
@@ -41,7 +41,13 @@ export class BadgeThemeService implements FlowbiteThemeService<BadgeProperties>
         theme.root.isIconOnly[properties.isIconOnly],
         theme.root.link[properties.link ? 'enabled' : 'disabled']
       ),
-      closeButtonClass: twMerge(theme.closeButton.base, theme.closeButton.color[properties.color]),
+      closeButtonClass: twMerge(
+        theme.closeButton.base,
+        fetchStandardTheme(
+          properties.standardThemeConfig,
+          theme.closeButton.color[properties.color]
+        )
+      ),
     };
 
     return output;

libs/flowbite-angular/badge/badge.theme.ts

@@ -2,9 +2,11 @@ import type {
   DeepPartial,
   FlowbiteBoolean,
   FlowbiteClass,
-  FlowbiteColors,
   FlowbiteSizes,
+  FlowbiteStandardColors,
   RouterLinkParameter,
+  StandardThemeConfiguration,
+  StandardThemeInput,
 } from 'flowbite-angular';
 import { createTheme } from 'flowbite-angular/utils';
 
@@ -14,10 +16,10 @@ import { createTheme } from 'flowbite-angular/utils';
  */
 export interface BadgeColors
   extends Pick<
-    FlowbiteColors,
+    FlowbiteStandardColors,
     'primary' | 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink'
   > {
-  [key: string]: string;
+  [key: string]: StandardThemeConfiguration;
 }
 
 /**
@@ -38,6 +40,7 @@ export interface BadgeProperties {
   isIconOnly: keyof FlowbiteBoolean;
   isPill: keyof FlowbiteBoolean;
   link: RouterLinkParameter;
+  standardThemeConfig: StandardThemeInput;
   customStyle: DeepPartial<BadgeTheme>;
 }
 
@@ -67,20 +70,96 @@ export const badgeTheme: BadgeTheme = createTheme({
   root: {
     base: 'flex h-fit items-center gap-1 font-semibold',
     color: {
-      primary:
-        'bg-primary-100 dark:bg-primary-700 text-primary-800 dark:text-primary-300 group-hover:bg-primary-200 dark:group-hover:bg-primary-600 border-primary-300 dark:border-primary-800',
-      dark: 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 group-hover:bg-gray-200 dark:group-hover:bg-gray-600 border-gray-300 dark:border-gray-600',
-      blue: 'bg-blue-100 dark:bg-blue-200 text-blue-800 dark:text-blue-800 group-hover:bg-blue-200 dark:group-hover:bg-blue-300 border-blue-300 dark:border-blue-800',
-      red: 'bg-red-100 dark:bg-red-200 text-red-800 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300 border-red-300 dark:border-red-800',
-      green:
-        'bg-green-100 dark:bg-green-200 text-green-800 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300 border-green-300 dark:border-green-800',
-      yellow:
-        'bg-yellow-100 dark:bg-yellow-200 text-yellow-800 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300 border-yellow-300 dark:border-yellow-800',
-      indigo:
-        'bg-indigo-100 dark:bg-indigo-200 text-indigo-800 dark:text-indigo-900 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-300 border-indigo-300 dark:border-indigo-800',
-      purple:
-        'bg-purple-100 dark:bg-purple-200 text-purple-800 dark:text-purple-900 group-hover:bg-purple-200 dark:group-hover:bg-purple-300 border-purple-300 dark:border-purple-800',
-      pink: 'bg-pink-100 dark:bg-pink-200 text-pink-800 dark:text-pink-900 group-hover:bg-pink-200 dark:group-hover:bg-pink-300 border-pink-300 dark:border-pink-800',
+      primary: {
+        base: {
+          light: 'bg-primary-100 text-primary-800 border-primary-300',
+          dark: 'dark:bg-primary-700 dark:text-primary-300 dark:border-primary-800',
+        },
+        hover: {
+          light: 'group-hover:bg-primary-200',
+          dark: 'dark:group-hover:bg-primary-600',
+        },
+      },
+      dark: {
+        base: {
+          light: 'bg-gray-100 text-gray-800 border-gray-300',
+          dark: 'dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600',
+        },
+        hover: {
+          light: 'group-hover:bg-gray-200',
+          dark: 'dark:group-hover:bg-gray-600',
+        },
+      },
+      blue: {
+        base: {
+          light: 'bg-blue-100 text-blue-800 border-blue-300',
+          dark: 'dark:bg-blue-200 dark:text-blue-800 dark:border-blue-800',
+        },
+        hover: {
+          light: 'group-hover:bg-blue-200',
+          dark: 'dark:group-hover:bg-blue-300',
+        },
+      },
+      red: {
+        base: {
+          light: 'bg-red-100 text-red-800 border-red-300',
+          dark: 'dark:bg-red-200 dark:text-red-900 dark:border-red-800',
+        },
+        hover: {
+          light: 'group-hover:bg-red-200',
+          dark: 'dark:group-hover:bg-red-300',
+        },
+      },
+      green: {
+        base: {
+          light: 'bg-green-100 text-green-800 border-green-300',
+          dark: 'dark:bg-green-200 dark:text-green-900 dark:border-green-800',
+        },
+        hover: {
+          light: 'group-hover:bg-green-200',
+          dark: 'dark:group-hover:bg-green-300',
+        },
+      },
+      yellow: {
+        base: {
+          light: 'bg-yellow-100 text-yellow-800 border-yellow-300',
+          dark: 'dark:bg-yellow-200 dark:text-yellow-900 dark:border-yellow-800',
+        },
+        hover: {
+          light: 'group-hover:bg-yellow-200',
+          dark: 'dark:group-hover:bg-yellow-300',
+        },
+      },
+      indigo: {
+        base: {
+          light: 'bg-indigo-100 text-indigo-800 border-indigo-300',
+          dark: 'dark:bg-indigo-200 dark:text-indigo-900 dark:border-indigo-800',
+        },
+        hover: {
+          light: 'group-hover:bg-indigo-200',
+          dark: 'dark:group-hover:bg-indigo-300',
+        },
+      },
+      purple: {
+        base: {
+          light: 'bg-purple-100 text-purple-800 border-purple-300',
+          dark: 'dark:bg-purple-200 dark:text-purple-900 dark:border-purple-800',
+        },
+        hover: {
+          light: 'group-hover:bg-purple-200',
+          dark: 'dark:group-hover:bg-purple-300',
+        },
+      },
+      pink: {
+        base: {
+          light: 'bg-pink-100 text-pink-800 border-pink-300',
+          dark: 'dark:bg-pink-200 dark:text-pink-900 dark:border-pink-800',
+        },
+        hover: {
+          light: 'group-hover:bg-pink-200',
+          dark: 'dark:group-hover:bg-pink-300',
+        },
+      },
     },
     hasBorder: {
       enabled: 'border',
@@ -106,16 +185,96 @@ export const badgeTheme: BadgeTheme = createTheme({
   closeButton: {
     base: 'ms-1 inline-flex items-center rounded-sm p-1 focus:ring-2',
     color: {
-      primary:
-        'text-primary-500 dark:text-primary-600 hover:bg-primary-200 dark:hover:bg-primary-300',
-      dark: 'text-gray-500 dark:text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-300',
-      blue: 'text-blue-500 dark:text-blue-600 hover:bg-blue-200 dark:hover:bg-blue-300',
-      red: 'text-red-500 dark:text-red-600 hover:bg-red-200 dark:hover:bg-red-300',
-      green: 'text-green-500 dark:text-green-600 hover:bg-green-200 dark:hover:bg-green-300',
-      yellow: 'text-yellow-500 dark:text-yellow-600 hover:bg-yellow-200 dark:hover:bg-yellow-300',
-      indigo: 'text-indigo-500 dark:text-indigo-600 hover:bg-indigo-200 dark:hover:bg-indigo-300',
-      purple: 'text-purple-500 dark:text-purple-600 hover:bg-purple-200 dark:hover:bg-purple-300',
-      pink: 'text-pink-500 dark:text-pink-600 hover:bg-pink-200 dark:hover:bg-pink-300',
+      primary: {
+        base: {
+          light: 'text-primary-500',
+          dark: 'dark:text-primary-600',
+        },
+        hover: {
+          light: 'hover:bg-primary-200',
+          dark: 'dark:hover:bg-primary-300',
+        },
+      },
+      dark: {
+        base: {
+          light: 'text-gray-500',
+          dark: 'dark:text-gray-600',
+        },
+        hover: {
+          light: 'hover:bg-gray-200',
+          dark: 'dark:hover:bg-gray-300',
+        },
+      },
+      blue: {
+        base: {
+          light: 'text-blue-500',
+          dark: 'dark:text-blue-600',
+        },
+        hover: {
+          light: 'hover:bg-blue-200',
+          dark: 'dark:hover:bg-blue-300',
+        },
+      },
+      red: {
+        base: {
+          light: 'text-red-500',
+          dark: 'dark:text-red-600',
+        },
+        hover: {
+          light: 'hover:bg-red-200',
+          dark: 'dark:hover:bg-red-300',
+        },
+      },
+      green: {
+        base: {
+          light: 'text-green-500',
+          dark: 'dark:text-green-600',
+        },
+        hover: {
+          light: 'hover:bg-green-200',
+          dark: 'dark:hover:bg-green-300',
+        },
+      },
+      yellow: {
+        base: {
+          light: 'text-yellow-500',
+          dark: 'dark:text-yellow-600',
+        },
+        hover: {
+          light: 'hover:bg-yellow-200',
+          dark: 'dark:hover:bg-yellow-300',
+        },
+      },
+      indigo: {
+        base: {
+          light: 'text-indigo-500',
+          dark: 'dark:text-indigo-600',
+        },
+        hover: {
+          light: 'hover:bg-indigo-200',
+          dark: 'dark:hover:bg-indigo-300',
+        },
+      },
+      purple: {
+        base: {
+          light: 'text-purple-500',
+          dark: 'dark:text-purple-600',
+        },
+        hover: {
+          light: 'hover:bg-purple-200',
+          dark: 'dark:hover:bg-purple-300',
+        },
+      },
+      pink: {
+        base: {
+          light: 'text-pink-500',
+          dark: 'dark:text-pink-600',
+        },
+        hover: {
+          light: 'hover:bg-pink-200',
+          dark: 'dark:hover:bg-pink-300',
+        },
+      },
     },
   },
 });