@indielayer/ui/lib/composables/useColors.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { inject as m, computed as p, unref as f } from "vue";
import { injectThemeKey as g } from "./keys.js";
import { tailwindColors as n, setOpacity as l, isValidColor as d, colorShade as t } from "../common/colors.js";
import { mergeRightDeep as y } from "../common/utils.js";
const a = {}, C = {
  primary: n.emerald,
  secondary: n.slate,
  success: n.green,
  warning: n.yellow,
  error: n.red
}, i = (r) => n[r], c = (r, s) => l(r, s), w = () => {
  const r = m(g, {}), s = p(() => y(C, f(r).colors || {}));
  return {
    getPalette: (e) => {
      if (!e)
        return i("gray");
      const o = i(e);
      if (o)
        return o;
      if (a[e])
        return a[e];
      if (s.value[e])
        return s.value[e];
      if (!d(e))
        return console.warn(`Invalid color: ${e}`), i("gray");
      const u = {
        50: t(e, 0.9),
        100: t(e, 0.8),
        200: t(e, 0.6),
        300: t(e, 0.4),
        400: t(e, 0.1),
        500: e,
        600: t(e, -0.1),
        700: t(e, -0.25),
        800: t(e, -0.58),
        900: t(e, -0.7),
        950: t(e, -0.8)
      };
      return a[e] = u, u;
    },
    getColorOpacity: c
  };
};
w.props = (r) => ({
  color: {
    type: String,
    default: r
  }
});
export {
  w as useColors
};