-
Notifications
You must be signed in to change notification settings - Fork 49
Description
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