@lui-ui/lui-vue/dist/composables/useGlobalColorClasses.mjs

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

import { computed } from "vue";
export function useGlobalColorClasses(props) {
  const computedBackgroundColorClasses = computed(() => {
    const classes = {
      backgroundColor: props.variant.value === "solid" ? {
        [`bg-${props.color.value}-500`]: props.filter.value === "none",
        // filter none
        [`bg-${props.color.value}-100`]: props.filter.value === "lighten",
        // filter lighten
        [`bg-${props.color.value}-800`]: props.filter.value === "darken"
        // filter darken
      } : null
    };
    return Object.values({ ...classes });
  });
  const computedTextColorClasses = computed(() => {
    const classes = {
      textColor: props.variant.value === "solid" ? {
        "text-white": props.filter.value === "none",
        // filter none
        [`text-${props.color.value}-500`]: props.filter.value === "lighten",
        // filter lighten
        [`text-${props.color.value}-100`]: props.filter.value === "darken"
        // filter darken
      } : {
        [`text-${props.color.value}-500`]: props.filter.value === "none",
        // filter none
        [`text-${props.color.value}-100`]: props.filter.value === "lighten",
        // filter lighten
        [`text-${props.color.value}-800`]: props.filter.value === "darken"
        // filter darken
      }
    };
    return Object.values({ ...classes });
  });
  const computedBorderColorClasses = computed(() => {
    const classes = {
      borderColor: props.variant.value === "outline" ? {
        [`border-${props.color.value}-500`]: props.filter.value === "none",
        // filter none
        [`border-${props.color.value}-100`]: props.filter.value === "lighten",
        // filter lighten
        [`border-${props.color.value}-800`]: props.filter.value === "darken"
        // filter darken
      } : props.border !== void 0 && props.border.value ? {
        "border-white": props.filter.value === "none",
        // filter none
        [`border-${props.color.value}-500`]: props.filter.value === "lighten",
        // filter lighten
        [`border-${props.color.value}-100`]: props.filter.value === "darken"
        // filter darken
      } : "border-transparent"
    };
    return Object.values({ ...classes });
  });
  return {
    backgroundColorClasses: computedBackgroundColorClasses,
    textColorClasses: computedTextColorClasses,
    borderColorClasses: computedBorderColorClasses
  };
}