tailwindcss-css-variables-palette-plugin/dist/plugin.es.js

Palette plugin using CSS variables for TailwindCSS

var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var createPlugin$3 = {};
var createPlugin$2 = {};
Object.defineProperty(createPlugin$2, "__esModule", {
  value: true
});
createPlugin$2.default = void 0;
function createPlugin$1(plugin2, config) {
  return {
    handler: plugin2,
    config
  };
}
createPlugin$1.withOptions = function(pluginFunction, configFunction = () => ({})) {
  const optionsFunction = function(options) {
    return {
      __options: options,
      handler: pluginFunction(options),
      config: configFunction(options)
    };
  };
  optionsFunction.__isOptionsFunction = true;
  optionsFunction.__pluginFunction = pluginFunction;
  optionsFunction.__configFunction = configFunction;
  return optionsFunction;
};
var _default$1 = createPlugin$1;
createPlugin$2.default = _default$1;
Object.defineProperty(createPlugin$3, "__esModule", {
  value: true
});
createPlugin$3.default = void 0;
var _createPlugin = _interopRequireDefault(createPlugin$2);
function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {
    default: obj
  };
}
var _default = _createPlugin.default;
createPlugin$3.default = _default;
let createPlugin = createPlugin$3;
var plugin = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default;
function hexToRgb(hex) {
  const sanitizedHex = hex.replace(/##/g, "#");
  const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(sanitizedHex);
  if (!colorParts) {
    return null;
  }
  const [, r, g, b] = colorParts;
  return {
    r: parseInt(r, 16),
    g: parseInt(g, 16),
    b: parseInt(b, 16)
  };
}
function rgbToHex(r, g, b) {
  const toHex = (c) => `0${c.toString(16)}`.slice(-2);
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
const lighten = (hex, intensity) => {
  const color = hexToRgb(`#${hex}`);
  if (!color) {
    return "";
  }
  const r = Math.round(color.r + (255 - color.r) * intensity);
  const g = Math.round(color.g + (255 - color.g) * intensity);
  const b = Math.round(color.b + (255 - color.b) * intensity);
  return rgbToHex(r, g, b);
};
const darken = (hex, intensity) => {
  const color = hexToRgb(hex);
  if (!color) {
    return "";
  }
  const r = Math.round(color.r * intensity);
  const g = Math.round(color.g * intensity);
  const b = Math.round(color.b * intensity);
  return rgbToHex(r, g, b);
};
const generatePalette = (name, baseColor) => {
  const base = `#${baseColor.replace(/#/g, "")}`;
  const palette = {
    name,
    colors: {
      DEFAULT: base,
      500: `#${baseColor.replace(/#/g, "")}`
    }
  };
  const intensityMap = {
    100: 0.9,
    200: 0.75,
    300: 0.6,
    400: 0.3,
    600: 0.9,
    700: 0.75,
    800: 0.6,
    900: 0.49
  };
  [100, 200, 300, 400].forEach((level) => {
    palette.colors[level] = lighten(baseColor, intensityMap[level]);
  });
  [600, 700, 800, 900].forEach((level) => {
    palette.colors[level] = darken(baseColor, intensityMap[level]);
  });
  return palette;
};
const generateColorTokens = (name, palette) => {
  const colors = {};
  Object.keys(palette).map((key) => {
    const hex = palette[key];
    const cssToken = key === "DEFAULT" ? `--color-${name}` : `--color-${name}-${key}`;
    colors[key] = `var(${cssToken}, ${hex})`;
  });
  return {
    colorsObject: colors,
    colorName: name
  };
};
const generateColor = (name, color) => {
  const palette = generatePalette(name, color);
  return generateColorTokens(palette.name, palette.colors);
};
const extendedThemeColors = (colorsArray) => {
  const colorList = Object.keys(colorsArray).map((key) => ({ name: key, value: colorsArray[key] }));
  const colorPaletteList = {};
  colorList.forEach((color) => {
    const colors = generateColor(color.name, color.value);
    colorPaletteList[colors.colorName] = colors.colorsObject;
  });
  return colorPaletteList;
};
const extractColorVars = (colorObj, colorGroup = "") => {
  return Object.keys(colorObj).reduce((vars, colorKey) => {
    const value = colorObj[colorKey];
    const tokenString = colorKey === "DEFAULT" ? { [`--color${colorGroup}`]: value } : { [`--color${colorGroup}-${colorKey}`]: value };
    const newVars = typeof value === "string" ? tokenString : extractColorVars(value, `-${colorKey}`);
    return __spreadValues(__spreadValues({}, vars), newVars);
  }, {});
};
const paletteCssVariablesPlugin = plugin.withOptions(function(options) {
  return function({ addBase, theme }) {
    addBase({
      ":root": extractColorVars(theme("colors"))
    });
  };
}, function(options) {
  const colorsPalette = extendedThemeColors(options == null ? void 0 : options.colors);
  return {
    theme: {
      extend: {
        colors: __spreadValues({
          inherit: "inherit",
          current: "currentColor",
          transparent: "transparent",
          black: "#000",
          white: "#fff"
        }, colorsPalette)
      }
    }
  };
});
export { paletteCssVariablesPlugin as default };