FlowbiteThemable does not correctly style outline buttons.

[grahamsutton]

When using Button components wrapped in FlowbiteThemable, the button text and borders do not match the theme color. Additionally, the background color is being applied when it should not be (because it's an outline).

(The 1w button is a regular button that looks selected.)

Code sample (not from screenshot):

<script setup>
import { Button, FlowbiteThemable } from 'flowbite-vue'
</script>

<template>
  <FlowbiteThemable theme="pink">
    <Button outline>Click me</Button>
  </FlowbiteThemable>
</template>

These are the CSS classes being applied:

text-blue-700 border border-blue-700 focus:ring-pink-300 focus:outline-none font-medium rounded-lg dark:border-blue-500 dark:text-blue-500 dark:focus:ring-pink-900 hover:text-white hover:bg-pink-800 dark:hover:text-white dark:hover:bg-pink-700 px-4 py-2 bg-pink-700 dark:bg-pink-600 text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800 hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600 text-sm px-4 py-2

Most classes appear to not apply any theme styling, while some do, such as focus, hover, bg, and dark. However, some of those styles appear to get overridden by default classes.

This works fine for regular buttons where :outline="false". Current workaround is having to apply external styles.

[cogor]

Hi, FlowbiteThemable isn't ready yet, I'll work on it after migration to tailwind-merge for components classes

[cogor]

You can track these issues #192 and #191