vuestic-ui/dist/web-components/src/composables/useColors.js

Vue 3 UI Framework

import { computed, capitalize } from "vue";
import { w as warn } from "../utils/console.js";
import { u as useCache } from "./useCache.js";
import { u as useReactiveComputed } from "./useReactiveComputed.js";
import { a as getBoxShadowColor, f as getBoxShadowColorFromBg, c as getHoverColor, b as getFocusColor, g as getGradientBackground, s as shiftHSLAColor, h as setHSLAColor, d as colorToRgba, i as getStateMaskGradientBackground, n as normalizeColorName, j as cssVariableName, k as isCSSVariable, l as getColorLightness } from "../services/color/utils.js";
import { c as camelCaseToKebabCase } from "../utils/text-case.js";
import { u as useGlobalConfig } from "./useGlobalConfig.js";
import { i as isColor } from "../utils/color.js";
const useColorProps = {
  color: {
    type: String,
    default: ""
  }
};
const useColors = () => {
  const gc = useGlobalConfig();
  if (!gc) {
    throw new Error("useColors must be used in setup function or Vuestic GlobalConfigPlugin is not registered!");
  }
  const { globalConfig } = gc;
  const colors = useReactiveComputed({
    get: () => globalConfig.value.colors.presets[globalConfig.value.colors.currentPresetName],
    set: (v) => {
      setColors(v);
    }
  });
  const setColors = (colors2) => {
    globalConfig.value.colors.presets[globalConfig.value.colors.currentPresetName] = {
      ...globalConfig.value.colors.variables,
      ...colors2
    };
  };
  const getColors = () => {
    return colors;
  };
  const getColor = (prop, defaultColor, preferVariables) => {
    if (!defaultColor) {
      defaultColor = colors.primary;
    }
    if (prop === "transparent") {
      return "#ffffff00";
    }
    if (prop === "currentColor") {
      return prop;
    }
    if (prop == null ? void 0 : prop.startsWith("on")) {
      const colorName = prop.slice(2);
      if (colors[normalizeColorName(colorName)]) {
        return getColor(getTextColor(getColor(colorName)), void 0, preferVariables);
      }
    }
    if (!prop) {
      prop = getColor(defaultColor);
    }
    const colorValue = colors[prop] || colors[normalizeColorName(prop)];
    if (colorValue) {
      return preferVariables ? `var(${cssVariableName(prop)})` : colorValue;
    }
    if (isColor(prop)) {
      return prop;
    }
    if (preferVariables && isCSSVariable(prop)) {
      return prop;
    }
    warn(`'${prop}' is not a proper color! Use HEX or default color themes
      names (https://vuestic.dev/en/styles/colors#default-color-themes)`);
    return getColor(defaultColor);
  };
  const getComputedColor = (color) => {
    return computed({
      get() {
        return getColor(color);
      },
      set(v) {
        setColors({ [color]: v });
      }
    });
  };
  const colorsToCSSVariable = (colors2, prefix = "va") => {
    return Object.keys(colors2).filter((key) => colors2[key] !== void 0).reduce((acc, colorName) => {
      acc[`--${prefix}-${camelCaseToKebabCase(colorName)}`] = getColor(colors2[colorName], void 0, true);
      acc[`--${prefix}-on-${camelCaseToKebabCase(colorName)}`] = getColor(getTextColor(getColor(colors2[colorName])), void 0, true);
      return acc;
    }, {});
  };
  const cache = useCache();
  const getColorLightnessFromCache = (color) => {
    if (typeof color !== "string") {
      return getColorLightness(color);
    }
    if (!cache.colorContrast[color]) {
      cache.colorContrast[color] = getColorLightness(color);
    }
    return cache.colorContrast[color];
  };
  const computedDarkColor = computed(() => {
    return getColorLightnessFromCache(getColor("textPrimary")) > 255 / 2 ? "textInverted" : "textPrimary";
  });
  const computedLightColor = computed(() => {
    return getColorLightnessFromCache(getColor("textPrimary")) > 255 / 2 ? "textPrimary" : "textInverted";
  });
  const getTextColor = (color, darkColor, lightColor) => {
    const onColorName = `on${capitalize(String(color))}`;
    if (colors[onColorName]) {
      return colors[onColorName];
    }
    darkColor = darkColor || computedDarkColor.value;
    lightColor = lightColor || computedLightColor.value;
    return getColorLightnessFromCache(color) > globalConfig.value.colors.threshold ? darkColor : lightColor;
  };
  const currentPresetName = computed({
    get: () => globalConfig.value.colors.currentPresetName,
    set: (v) => {
      applyPreset(v);
    }
  });
  const presets = computed(() => globalConfig.value.colors.presets);
  const applyPreset = (presetName) => {
    globalConfig.value.colors.currentPresetName = presetName;
    if (!globalConfig.value.colors.presets[presetName]) {
      return warn(`Preset ${presetName} does not exist`);
    }
  };
  return {
    colors,
    currentPresetName,
    presets,
    applyPreset,
    setColors,
    getColors,
    getColor,
    getComputedColor,
    getBoxShadowColor,
    getBoxShadowColorFromBg,
    getHoverColor,
    getFocusColor,
    getGradientBackground,
    getTextColor,
    shiftHSLAColor,
    setHSLAColor,
    colorsToCSSVariable,
    colorToRgba,
    getStateMaskGradientBackground
  };
};
export {
  useColorProps as a,
  useColors as u
};
//# sourceMappingURL=useColors.js.map