feat: simplify theme files

themesberg · Aug 12, 2024 · 22a69b8 · 22a69b8
1 parent 95dd989
commit 22a69b8
Show file tree

Hide file tree

Showing 100 changed files with 1,089 additions and 1,080 deletions.
diff --git a/apps/docs/src/assets/examples/accordion/default.component.html b/apps/docs/src/assets/examples/accordion/default.component.html
@@ -3,25 +3,29 @@
     <flowbite-accordion-panel isOpen>
       <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
       <flowbite-accordion-content>
-        <p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons,
           dropdowns, modals, navbars, and more.
         </p>
-        <p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Check out this guide to learn how to
-          <a href="https://flowbite.com/docs/getting-started/introduction/">Get started</a>
+          <a
+            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+            href="https://flowbite.com/docs/getting-started/introduction/">
+            Get started
+          </a>
           and start developing websites even faster with components on top of Tailwind CSS.
         </p>
       </flowbite-accordion-content>
     </flowbite-accordion-panel>
     <flowbite-accordion-panel>
       <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
       <flowbite-accordion-content>
-        <p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is first conceptualized and designed using the Figma software so everything you see in the library
           has a design equivalent in our Figma file.
         </p>
-        <p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Check out the
           <a href="https://flowbite.com/figma/">Figma design system</a>
           based on the utility classes from Tailwind CSS and components from Flowbite.
@@ -31,22 +35,27 @@
     <flowbite-accordion-panel>
       <flowbite-accordion-title>What are the differences between Flowbite and Tailwind UI ?</flowbite-accordion-title>
       <flowbite-accordion-content>
-        <p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           The main difference is that the core components from Flowbite are open source under the MIT license, whereas
           Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone
           components, whereas Tailwind UI offers sections of pages.
         </p>
-        <p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no
           technical reason stopping you from using the best of two worlds.
         </p>
-        <p>Learn more about these technologies :</p>
-        <ul class="list-disc list-inside">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">Learn more about these technologies :</p>
+        <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
           <li>
-            <a href="https://flowbite.com/pro/">Flowbite Pro</a>
+            <a
+              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+              href="https://flowbite.com/pro/">
+              Flowbite Pro
+            </a>
           </li>
           <li>
             <a
+              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
               href="https://tailwindui.com/"
               rel="nofollow">
               Tailwind UI

diff --git a/libs/flowbite-angular/src/lib/components/accordion/accordion-content.component.ts b/libs/flowbite-angular/src/lib/components/accordion/accordion-content.component.ts
@@ -3,7 +3,7 @@ import { AccordionPanelStateService, AccordionStateService } from '../../service
 import { createClass } from '../../utils';
 import { booleanToFlowbiteBoolean } from '../../utils/boolean.util';
 import { BaseComponent } from '../base.component';
-import type { AccordionContentBaseTheme, AccordionContentClass } from './accordion-content.theme';
+import type { AccordionContentClass, AccordionContentTheme } from './accordion-content.theme';
 import { AccordionContentThemeService } from './accordion-content.theme.service';
 
 import { NgClass, NgIf } from '@angular/common';
@@ -27,7 +27,7 @@ export class AccordionContentComponent extends BaseComponent {
   public override contentClasses = signal<AccordionContentClass>(createClass({ rootClass: '' }));
 
   //#region properties
-  public customStyle = input<DeepPartial<AccordionContentBaseTheme>>({});
+  public customStyle = input<DeepPartial<AccordionContentTheme>>({});
   //#endregion
 
   //#region BaseComponent implementation

diff --git a/libs/flowbite-angular/src/lib/components/accordion/accordion-content.theme.service.ts b/libs/flowbite-angular/src/lib/components/accordion/accordion-content.theme.service.ts
@@ -1,26 +1,26 @@
 import type { FlowbiteThemeService } from '../../common';
 import { mergeTheme } from '../../utils/theme/merge-theme';
 import type {
-  AccordionContentBaseTheme,
   AccordionContentClass,
   AccordionContentProperties,
+  AccordionContentTheme,
 } from './accordion-content.theme';
 
 import { inject, InjectionToken } from '@angular/core';
 import { twMerge } from 'tailwind-merge';
 
-export const FLOWBITE_ACCORDION_CONTENT_THEME_TOKEN = new InjectionToken<AccordionContentBaseTheme>(
+export const FLOWBITE_ACCORDION_CONTENT_THEME_TOKEN = new InjectionToken<AccordionContentTheme>(
   'FLOWBITE_ACCORDION_CONTENT_THEME_TOKEN',
 );
 
 export class AccordionContentThemeService implements FlowbiteThemeService<AccordionContentProperties> {
   private readonly baseTheme = inject(FLOWBITE_ACCORDION_CONTENT_THEME_TOKEN);
 
   public getClasses(properties: AccordionContentProperties): AccordionContentClass {
-    const theme: AccordionContentBaseTheme = mergeTheme(this.baseTheme, properties.customStyle);
+    const theme: AccordionContentTheme = mergeTheme(this.baseTheme, properties.customStyle);
 
     const output: AccordionContentClass = {
-      rootClass: twMerge(theme.base, theme.color[properties.color], theme.isOpen[properties.isOpen]),
+      rootClass: twMerge(theme.root.base, theme.root.color[properties.color], theme.root.isOpen[properties.isOpen]),
     };
 
     return output;

diff --git a/libs/flowbite-angular/src/lib/components/accordion/accordion-content.theme.ts b/libs/flowbite-angular/src/lib/components/accordion/accordion-content.theme.ts
@@ -5,27 +5,31 @@ import type { AccordionColors } from './accordion.theme';
 export interface AccordionContentProperties {
   color: keyof AccordionColors;
   isOpen: keyof FlowbiteBoolean;
-  customStyle: DeepPartial<AccordionContentBaseTheme>;
+  customStyle: DeepPartial<AccordionContentTheme>;
 }
 
-export interface AccordionContentBaseTheme {
-  base: string;
-  color: AccordionColors;
-  isOpen: FlowbiteBoolean;
+export interface AccordionContentTheme {
+  root: {
+    base: string;
+    color: AccordionColors;
+    isOpen: FlowbiteBoolean;
+  };
 }
 
-export const accordionContentTheme: AccordionContentBaseTheme = createTheme({
-  base: 'flex flex-col gap-2',
-  color: {
-    primary: 'border-primary-200 dark:border-primary-700',
-    blue: 'border-blue-200 dark:border-blue-700',
-    red: 'border-red-200 dark:border-red-700',
-    green: 'border-green-200 dark:border-green-700',
-    yellow: 'border-yellow-200 dark:border-yellow-700',
-  },
-  isOpen: {
-    enabled: 'p-5 border',
-    disabled: '',
+export const accordionContentTheme: AccordionContentTheme = createTheme({
+  root: {
+    base: 'flex flex-col gap-2',
+    color: {
+      primary: 'border-primary-200 dark:border-primary-700',
+      blue: 'border-blue-200 dark:border-blue-700',
+      red: 'border-red-200 dark:border-red-700',
+      green: 'border-green-200 dark:border-green-700',
+      yellow: 'border-yellow-200 dark:border-yellow-700',
+    },
+    isOpen: {
+      enabled: 'p-5 border',
+      disabled: '',
+    },
   },
 });
 

diff --git a/libs/flowbite-angular/src/lib/components/accordion/accordion-panel.component.ts b/libs/flowbite-angular/src/lib/components/accordion/accordion-panel.component.ts
@@ -2,7 +2,7 @@ import type { DeepPartial } from '../../common';
 import { AccordionPanelStateService } from '../../services/state/accordion.state';
 import { createClass } from '../../utils';
 import { BaseComponent } from '../base.component';
-import type { AccordionPanelBaseTheme, AccordionPanelClass } from './accordion-panel.theme';
+import type { AccordionPanelClass, AccordionPanelTheme } from './accordion-panel.theme';
 import { AccordionPanelThemeService } from './accordion-panel.theme.service';
 
 import type { OnInit } from '@angular/core';
@@ -36,7 +36,7 @@ export class AccordionPanelComponent extends BaseComponent implements OnInit {
   public isOpen = input<boolean, string | boolean>(false, {
     transform: booleanAttribute,
   });
-  public customStyle = input<DeepPartial<AccordionPanelBaseTheme>>({});
+  public customStyle = input<DeepPartial<AccordionPanelTheme>>({});
   //#endregion
 
   //#region BaseComponent implementation

diff --git a/libs/flowbite-angular/src/lib/components/accordion/accordion-panel.theme.service.ts b/libs/flowbite-angular/src/lib/components/accordion/accordion-panel.theme.service.ts
@@ -1,23 +1,23 @@
 import type { FlowbiteThemeService } from '../../common';
 import { mergeTheme } from '../../utils/theme/merge-theme';
-import type { AccordionPanelBaseTheme, AccordionPanelClass, AccordionPanelProperties } from './accordion-panel.theme';
+import type { AccordionPanelClass, AccordionPanelProperties, AccordionPanelTheme } from './accordion-panel.theme';
 import type { AccordionClass } from './accordion.theme';
 
 import { inject, InjectionToken } from '@angular/core';
 import { twMerge } from 'tailwind-merge';
 
-export const FLOWBITE_ACCORDION_PANEL_THEME_TOKEN = new InjectionToken<AccordionPanelBaseTheme>(
+export const FLOWBITE_ACCORDION_PANEL_THEME_TOKEN = new InjectionToken<AccordionPanelTheme>(
   'FLOWBITE_ACCORDION_PANEL_THEME_TOKEN',
 );
 
 export class AccordionPanelThemeService implements FlowbiteThemeService<AccordionPanelProperties> {
   private readonly baseTheme = inject(FLOWBITE_ACCORDION_PANEL_THEME_TOKEN);
 
   public getClasses(properties: AccordionPanelProperties): AccordionClass {
-    const theme: AccordionPanelBaseTheme = mergeTheme(this.baseTheme, properties.customStyle);
+    const theme: AccordionPanelTheme = mergeTheme(this.baseTheme, properties.customStyle);
 
     const output: AccordionPanelClass = {
-      rootClass: twMerge(theme.base),
+      rootClass: twMerge(theme.root.base),
     };
 
     return output;

diff --git a/libs/flowbite-angular/src/lib/components/accordion/accordion-panel.theme.ts b/libs/flowbite-angular/src/lib/components/accordion/accordion-panel.theme.ts
@@ -2,15 +2,19 @@ import type { DeepPartial, FlowbiteClass } from '../../common';
 import { createTheme } from '../../utils/theme/create-theme';
 
 export interface AccordionPanelProperties {
-  customStyle: DeepPartial<AccordionPanelBaseTheme>;
+  customStyle: DeepPartial<AccordionPanelTheme>;
 }
 
-export interface AccordionPanelBaseTheme {
-  base: string;
+export interface AccordionPanelTheme {
+  root: {
+    base: string;
+  };
 }
 
-export const accordionPanelTheme: AccordionPanelBaseTheme = createTheme({
-  base: '',
+export const accordionPanelTheme: AccordionPanelTheme = createTheme({
+  root: {
+    base: '',
+  },
 });
 
 export type AccordionPanelClass = FlowbiteClass;
diff --git a/libs/flowbite-angular/src/lib/components/accordion/accordion-title.component.ts b/libs/flowbite-angular/src/lib/components/accordion/accordion-title.component.ts
@@ -5,7 +5,7 @@ import { booleanToFlowbiteBoolean } from '../../utils/boolean.util';
 import { CHEVRON_DOWN_SVG_ICON } from '../../utils/icon.list';
 import { BaseComponent } from '../base.component';
 import { IconComponent, IconRegistry } from '../icon';
-import type { AccordionTitleBaseTheme, AccordionTitleClass } from './accordion-title.theme';
+import type { AccordionTitleClass, AccordionTitleTheme } from './accordion-title.theme';
 import { AccordionTitleThemeService } from './accordion-title.theme.service';
 
 import { NgClass } from '@angular/common';
@@ -18,7 +18,7 @@ import { DomSanitizer } from '@angular/platform-browser';
   imports: [NgClass, IconComponent],
   selector: 'flowbite-accordion-title',
   template: `
-    <h2 class="font-bold text-lg">
+    <h2 [ngClass]="contentClasses().textClass">
       <ng-content />
     </h2>
     <flowbite-icon
@@ -34,10 +34,10 @@ export class AccordionTitleComponent extends BaseComponent implements OnInit {
   protected readonly iconRegistry = inject(IconRegistry);
   protected readonly domSanitizer = inject(DomSanitizer);
 
-  public override contentClasses = signal<AccordionTitleClass>(createClass({ rootClass: '' }));
+  public override contentClasses = signal<AccordionTitleClass>(createClass({ rootClass: '', textClass: '' }));
 
   //#region properties
-  public customStyle = input<DeepPartial<AccordionTitleBaseTheme>>({});
+  public customStyle = input<DeepPartial<AccordionTitleTheme>>({});
   //#endregion
 
   //#region BaseComponent implementation

diff --git a/libs/flowbite-angular/src/lib/components/accordion/accordion-title.theme.service.ts b/libs/flowbite-angular/src/lib/components/accordion/accordion-title.theme.service.ts
@@ -1,27 +1,28 @@
 import type { FlowbiteThemeService } from '../../common';
 import { mergeTheme } from '../../utils/theme/merge-theme';
-import type { AccordionTitleBaseTheme, AccordionTitleClass, AccordionTitleProperties } from './accordion-title.theme';
+import type { AccordionTitleClass, AccordionTitleProperties, AccordionTitleTheme } from './accordion-title.theme';
 
 import { inject, InjectionToken } from '@angular/core';
 import { twMerge } from 'tailwind-merge';
 
-export const FLOWBITE_ACCORDION_TITLE_THEME_TOKEN = new InjectionToken<AccordionTitleBaseTheme>(
+export const FLOWBITE_ACCORDION_TITLE_THEME_TOKEN = new InjectionToken<AccordionTitleTheme>(
   'FLOWBITE_ACCORDION_TITLE_THEME_TOKEN',
 );
 
 export class AccordionTitleThemeService implements FlowbiteThemeService<AccordionTitleProperties> {
   private readonly baseTheme = inject(FLOWBITE_ACCORDION_TITLE_THEME_TOKEN);
 
   public getClasses(properties: AccordionTitleProperties): AccordionTitleClass {
-    const theme: AccordionTitleBaseTheme = mergeTheme(this.baseTheme, properties.customStyle);
+    const theme: AccordionTitleTheme = mergeTheme(this.baseTheme, properties.customStyle);
 
     const output: AccordionTitleClass = {
       rootClass: twMerge(
-        theme.base,
-        theme.color[properties.color],
-        theme.isFlush[properties.isFlush],
-        theme.isOpen[properties.isOpen],
+        theme.root.base,
+        theme.root.color[properties.color],
+        theme.root.isFlush[properties.isFlush],
+        theme.root.isOpen[properties.isOpen],
       ),
+      textClass: twMerge(theme.text.base),
     };
 
     return output;

diff --git a/libs/flowbite-angular/src/lib/components/accordion/accordion-title.theme.ts b/libs/flowbite-angular/src/lib/components/accordion/accordion-title.theme.ts
@@ -7,35 +7,47 @@ export interface AccordionTitleProperties {
   color: keyof AccordionColors;
   isOpen: keyof FlowbiteBoolean;
   isFlush: keyof FlowbiteBoolean;
-  customStyle: DeepPartial<AccordionTitleBaseTheme>;
+  customStyle: DeepPartial<AccordionTitleTheme>;
 }
 
-export interface AccordionTitleBaseTheme {
-  base: string;
-  color: AccordionColors;
-  isFlush: FlowbiteBoolean;
-  isOpen: FlowbiteBoolean;
+export interface AccordionTitleTheme {
+  root: {
+    base: string;
+    color: AccordionColors;
+    isFlush: FlowbiteBoolean;
+    isOpen: FlowbiteBoolean;
+  };
+  text: {
+    base: string;
+  };
 }
 
-export const accordionTitleTheme: AccordionTitleBaseTheme = createTheme({
-  base: 'cursor-pointer flex items-center p-5 justify-between',
-  color: {
-    primary:
-      'text-primary-900 dark:text-primary-50 border-primary-200 dark:border-primary-700 bg-primary-100 dark:bg-primary-800',
-    blue: 'text-blue-900 dark:text-blue-50 border-blue-200 dark:border-blue-700 bg-blue-100 dark:bg-blue-800',
-    red: 'text-red-900 dark:text-red-50 border-red-200 dark:border-red-700 bg-red-100 dark:bg-red-800',
-    green: 'text-green-900 dark:text-green-50 border-green-200 dark:border-green-700 bg-green-100 dark:bg-green-800',
-    yellow:
-      'text-yellow-900 dark:text-yellow-50 border-yellow-200 dark:border-yellow-700 bg-yellow-100 dark:bg-yellow-800',
+export const accordionTitleTheme: AccordionTitleTheme = createTheme({
+  root: {
+    base: 'cursor-pointer flex items-center p-5 justify-between',
+    color: {
+      primary:
+        'text-primary-900 dark:text-primary-50 border-primary-200 dark:border-primary-700 bg-primary-100 dark:bg-primary-800',
+      blue: 'text-blue-900 dark:text-blue-50 border-blue-200 dark:border-blue-700 bg-blue-100 dark:bg-blue-800',
+      red: 'text-red-900 dark:text-red-50 border-red-200 dark:border-red-700 bg-red-100 dark:bg-red-800',
+      green: 'text-green-900 dark:text-green-50 border-green-200 dark:border-green-700 bg-green-100 dark:bg-green-800',
+      yellow:
+        'text-yellow-900 dark:text-yellow-50 border-yellow-200 dark:border-yellow-700 bg-yellow-100 dark:bg-yellow-800',
+    },
+    isFlush: {
+      enabled: '',
+      disabled: 'border',
+    },
+    isOpen: {
+      enabled: '',
+      disabled: 'bg-transparent dark:bg-transparent',
+    },
   },
-  isFlush: {
-    enabled: '',
-    disabled: 'border',
-  },
-  isOpen: {
-    enabled: '',
-    disabled: 'bg-transparent dark:bg-transparent',
+  text: {
+    base: 'font-bold text-lg',
   },
 });
 
-export type AccordionTitleClass = FlowbiteClass;
+export interface AccordionTitleClass extends FlowbiteClass {
+  textClass: string;
+}
diff --git a/libs/flowbite-angular/src/lib/components/accordion/accordion.component.ts b/libs/flowbite-angular/src/lib/components/accordion/accordion.component.ts
@@ -3,7 +3,7 @@ import { AccordionStateService } from '../../services';
 import { createClass } from '../../utils';
 import { booleanToFlowbiteBoolean } from '../../utils/boolean.util';
 import { BaseComponent } from '../base.component';
-import type { AccordionBaseTheme, AccordionClass, AccordionColors } from './accordion.theme';
+import type { AccordionClass, AccordionColors, AccordionTheme } from './accordion.theme';
 import { AccordionThemeService } from './accordion.theme.service';
 
 import { NgClass } from '@angular/common';
@@ -38,11 +38,11 @@ export class AccordionComponent extends BaseComponent implements OnInit {
   public override contentClasses = signal<AccordionClass>(createClass({ rootClass: '' }));
 
   //#region properties
-  public color = input<keyof AccordionColors>('light');
+  public color = input<keyof AccordionColors>('primary');
   public isFlush = input<boolean, string | boolean>(false, {
     transform: booleanAttribute,
   });
-  public customStyle = input<DeepPartial<AccordionBaseTheme>>({});
+  public customStyle = input<DeepPartial<AccordionTheme>>({});
   //#endregion
 
   //#region BaseComponent implementation