refactor: add flowbite-themable-children for theming elements and support theme

src/components/Button/Button.vue

@@ -1,6 +1,5 @@
 <template>
-  <button type="button" :class="wrapperClasses" :disabled="disabled">
-
+  <flowbite-themable-children tag="button" :apply="['background', 'hover', 'focus']" :class="wrapperClasses" :disabled="disabled">
     <div v-if="!isOutlineGradient && ($slots.prefix || loadingPrefix)" class="mr-2"> <!--automatically add mr class if slot provided or loading -->
       <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingPrefix" />
       <slot name="prefix" v-else />
@@ -24,8 +23,7 @@
       <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingSuffix" />
       <slot name="suffix" v-else />
     </div>
-
-  </button>
+  </flowbite-themable-children>
 </template>
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
@@ -33,8 +31,8 @@ import type { PropType } from 'vue'
 import Spinner from '../Spinner/Spinner.vue'
 import { useButtonClasses } from './composables/useButtonClasses'
 import { useButtonSpinner } from './composables/useButtonSpinner'
+import FlowbiteThemableChildren from '../../components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/FlowbiteThemableChildren.vue'
 import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types'
-
 const props = defineProps({
   color: {
     type: String as PropType<ButtonVariant>,

src/components/Button/composables/useButtonClasses.ts

@@ -168,8 +168,6 @@ const alternativeColors = ['alternative', 'light']
 export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses: Ref<string>, spanClasses: Ref<string> } {
   const slots = useSlots()
 
-  const theme = useFlowbiteThemable()
-
   const sizeClasses = computed(() => {
     if (props.square.value) return buttonSquareSizeClasses[props.size.value]
     return buttonSizeClasses[props.size.value]
@@ -180,7 +178,6 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
     const isColor = !!props.color.value
     const isOutline = props.outline.value
 
-    const isActiveTheme = theme.isActive.value
 
     let hoverClass = ''
     let backgroundClass = ''
@@ -205,7 +202,7 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
 
     } else if (isColor && isOutline) { // COLOR AND OUTLINE
       if (!alternativeColors.includes(props.color.value)) {
-        const color = isActiveTheme ? theme.color.value : props.color.value
+        const color = props.color.value
 
         backgroundClass = buttonOutlineColorClasses.default[color as unknown as keyof typeof buttonOutlineColorClasses.default]
 
@@ -217,7 +214,7 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
 
 
     } else { // JUST COLOR
-      const color = isActiveTheme ? theme.color.value : props.color.value
+      const color = props.color.value
 
       backgroundClass = buttonColorClasses.default[color as unknown as keyof typeof buttonColorClasses.default]