[Feature] {all} - Add base configuration on component

[MGREMY]

Preview

Description

In the document, it would be nice to have a marker/int/something on each component pages to tell people this component is implementing a flowbite-angular standard theming. By flowbite-angular standard, I mean, inside the theme configuration of that component, having different sections for different TailwindCSS states

Proposed solution

Documentation

Having a Check icon

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
    d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>

under the page's header with a little mention This component is implementing flowbite-angular configuration standard

Library

Implementing this feature on documentation AND components MUST NOT affect existing code (the customStyle input will be discussed later as it's a DeepPartial type, it won't break existing code, but it may not work anymore in some case) Here are states that will must be implemented for each theme section

• hover
• dark
• focus
• disabled

If we take the color property for a random component, its theme should look like this

root: {
  ...
  color: {
    primary: {
      base: {
        light: '',
        dark: '',
      },
      hover: {
        light: '',
        dark: '',
      },
      focus: {
        light: '',
        dark: '',
      },
      disabled: {
        light: '',
        dark: '',
      },
    },
  },
  ...
},

Therefore, as it is always the same scheme, a global type should be created, named StandardThemeConfiguration located inside flowbite-angular/common/type-definition

type StandardThemeConfiguration = {
  base: {
    light: string;
    dark: string;
  };
  hover:
    | {
        light: string;
        dark: string;
      }
    | undefined;
  focus:
    | {
        light: string;
        dark: string;
      }
    | undefined;
  disabled:
    | {
        light: string;
        dark: string;
      }
    | undefined;
};

Having multiple input per component won't be verry clever, so I suggest to have one global type StandardThemeInput located inside flowbite-angular/common/type-definition, with key to boolean values like so

type StandardThemeInput = {
  hasDark: boolean;
  hasHover: boolean;
  hasFocus: boolean;
  hasDisabled: boolean;
}

As this will be a standardized way of doing things, we could create a function for theme services to merge and retrieve classes from a theme, with parameter of type StandardThemeInput

Default values for common cases could be created in the same file as StandardThemeInput

const allTrueStandardThemeInput = {
  hasDark: true,
  hasHover: true,
  hasFocus: true,
  hasDisabled: true,
}

const allFalseStandardThemeInput = {
  hasDark: false,
  hasHover: false,
  hasFocus: false,
  hasDisabled: false,
}

Alternatives considered

No response