@nexim/tailwind-material-colors/dist/main.cjs

A Tailwind CSS plugin to automatically generate and apply Material Design 3 color palettes.

/* @nexim/tailwind-material-colors v1.0.0 */
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/main.ts
var main_exports = {};
__export(main_exports, {
  materialThemeBuilder: () => materialThemeBuilder,
  materialThemeBuilderTailwindPlugin: () => materialThemeBuilderTailwindPlugin
});
module.exports = __toCommonJS(main_exports);
var import_package_tracer = require("@alwatr/package-tracer");
var import_material_color_utilities3 = require("@material/material-color-utilities");
var import_change_case = require("change-case");
var import_plugin = __toESM(require("tailwindcss/plugin"), 1);

// src/lib/constants.ts
var import_material_color_utilities = require("@material/material-color-utilities");
var SchemeObjects = {
  content: import_material_color_utilities.SchemeContent,
  expressive: import_material_color_utilities.SchemeExpressive,
  fidelity: import_material_color_utilities.SchemeFidelity,
  monochrome: import_material_color_utilities.SchemeMonochrome,
  neutral: import_material_color_utilities.SchemeNeutral,
  tonalSpot: import_material_color_utilities.SchemeTonalSpot,
  vibrant: import_material_color_utilities.SchemeVibrant,
  rainbow: import_material_color_utilities.SchemeRainbow,
  fruitsalad: import_material_color_utilities.SchemeFruitSalad
};
var AllMaterialDynamicColors = {
  background: import_material_color_utilities.MaterialDynamicColors.background,
  onBackground: import_material_color_utilities.MaterialDynamicColors.onBackground,
  surface: import_material_color_utilities.MaterialDynamicColors.surface,
  surfaceDim: import_material_color_utilities.MaterialDynamicColors.surfaceDim,
  surfaceBright: import_material_color_utilities.MaterialDynamicColors.surfaceBright,
  surfaceContainerLowest: import_material_color_utilities.MaterialDynamicColors.surfaceContainerLowest,
  surfaceContainerLow: import_material_color_utilities.MaterialDynamicColors.surfaceContainerLow,
  surfaceContainer: import_material_color_utilities.MaterialDynamicColors.surfaceContainer,
  surfaceContainerHigh: import_material_color_utilities.MaterialDynamicColors.surfaceContainerHigh,
  surfaceContainerHighest: import_material_color_utilities.MaterialDynamicColors.surfaceContainerHighest,
  onSurface: import_material_color_utilities.MaterialDynamicColors.onSurface,
  surfaceVariant: import_material_color_utilities.MaterialDynamicColors.surfaceVariant,
  onSurfaceVariant: import_material_color_utilities.MaterialDynamicColors.onSurfaceVariant,
  inverseSurface: import_material_color_utilities.MaterialDynamicColors.inverseSurface,
  inverseOnSurface: import_material_color_utilities.MaterialDynamicColors.inverseOnSurface,
  outline: import_material_color_utilities.MaterialDynamicColors.outline,
  outlineVariant: import_material_color_utilities.MaterialDynamicColors.outlineVariant,
  shadow: import_material_color_utilities.MaterialDynamicColors.shadow,
  scrim: import_material_color_utilities.MaterialDynamicColors.scrim,
  surfaceTint: import_material_color_utilities.MaterialDynamicColors.surfaceTint,
  primary: import_material_color_utilities.MaterialDynamicColors.primary,
  onPrimary: import_material_color_utilities.MaterialDynamicColors.onPrimary,
  primaryContainer: import_material_color_utilities.MaterialDynamicColors.primaryContainer,
  onPrimaryContainer: import_material_color_utilities.MaterialDynamicColors.onPrimaryContainer,
  inversePrimary: import_material_color_utilities.MaterialDynamicColors.inversePrimary,
  secondary: import_material_color_utilities.MaterialDynamicColors.secondary,
  onSecondary: import_material_color_utilities.MaterialDynamicColors.onSecondary,
  secondaryContainer: import_material_color_utilities.MaterialDynamicColors.secondaryContainer,
  onSecondaryContainer: import_material_color_utilities.MaterialDynamicColors.onSecondaryContainer,
  tertiary: import_material_color_utilities.MaterialDynamicColors.tertiary,
  onTertiary: import_material_color_utilities.MaterialDynamicColors.onTertiary,
  tertiaryContainer: import_material_color_utilities.MaterialDynamicColors.tertiaryContainer,
  onTertiaryContainer: import_material_color_utilities.MaterialDynamicColors.onTertiaryContainer,
  error: import_material_color_utilities.MaterialDynamicColors.error,
  onError: import_material_color_utilities.MaterialDynamicColors.onError,
  errorContainer: import_material_color_utilities.MaterialDynamicColors.errorContainer,
  onErrorContainer: import_material_color_utilities.MaterialDynamicColors.onErrorContainer,
  primaryFixed: import_material_color_utilities.MaterialDynamicColors.primaryFixed,
  primaryFixedDim: import_material_color_utilities.MaterialDynamicColors.primaryFixedDim,
  onPrimaryFixed: import_material_color_utilities.MaterialDynamicColors.onPrimaryFixed,
  onPrimaryFixedVariant: import_material_color_utilities.MaterialDynamicColors.onPrimaryFixedVariant,
  secondaryFixed: import_material_color_utilities.MaterialDynamicColors.secondaryFixed,
  secondaryFixedDim: import_material_color_utilities.MaterialDynamicColors.secondaryFixedDim,
  onSecondaryFixed: import_material_color_utilities.MaterialDynamicColors.onSecondaryFixed,
  onSecondaryFixedVariant: import_material_color_utilities.MaterialDynamicColors.onSecondaryFixedVariant,
  tertiaryFixed: import_material_color_utilities.MaterialDynamicColors.tertiaryFixed,
  tertiaryFixedDim: import_material_color_utilities.MaterialDynamicColors.tertiaryFixedDim,
  onTertiaryFixed: import_material_color_utilities.MaterialDynamicColors.onTertiaryFixed,
  onTertiaryFixedVariant: import_material_color_utilities.MaterialDynamicColors.onTertiaryFixedVariant
};

// src/lib/utils.ts
var import_material_color_utilities2 = require("@material/material-color-utilities");
var colorToRgbString = (color) => `${(0, import_material_color_utilities2.redFromArgb)(color)}, ${(0, import_material_color_utilities2.greenFromArgb)(color)}, ${(0, import_material_color_utilities2.blueFromArgb)(color)}`;

// src/main.ts
__dev_mode__: import_package_tracer.packageTracer.add("@nexim/tailwind-material-colors", "1.0.0");
function materialThemeBuilder(options) {
  const source = (0, import_material_color_utilities3.argbFromHex)(options.primaryColor);
  const SchemeObject = SchemeObjects[options.scheme ?? "content"];
  const lightScheme = new SchemeObject(import_material_color_utilities3.Hct.fromInt(source), false, options.contrast ?? 0);
  const darkScheme = new SchemeObject(import_material_color_utilities3.Hct.fromInt(source), true, options.contrast ?? 0);
  const lightColors = {};
  const darkColors = {};
  Object.entries(AllMaterialDynamicColors).forEach(([name, DynamicColor]) => {
    name = (0, import_change_case.kebabCase)(name);
    lightColors[name] = colorToRgbString(DynamicColor.getArgb(lightScheme));
    darkColors[name] = colorToRgbString(DynamicColor.getArgb(darkScheme));
  });
  if (options.extraColors) {
    for (let colorName of Object.keys(options.extraColors)) {
      colorName = (0, import_change_case.kebabCase)(colorName);
      const { hex, blend } = options.extraColors[colorName];
      const { light, dark } = (0, import_material_color_utilities3.customColor)(source, {
        name: colorName,
        value: (0, import_material_color_utilities3.argbFromHex)(hex),
        blend: blend ?? true
      });
      lightColors[colorName] = colorToRgbString(light.color);
      lightColors[`on-${colorName}`] = colorToRgbString(light.onColor);
      lightColors[`${colorName}-container`] = colorToRgbString(light.colorContainer);
      lightColors[`on-${colorName}-container`] = colorToRgbString(light.onColorContainer);
      darkColors[colorName] = colorToRgbString(dark.color);
      darkColors[`on-${colorName}`] = colorToRgbString(dark.onColor);
      darkColors[`${colorName}-container`] = colorToRgbString(dark.colorContainer);
      darkColors[`on-${colorName}-container`] = colorToRgbString(dark.onColorContainer);
    }
  }
  return { lightColors, darkColors };
}
function generateColorList(options) {
  const allColorNames = [];
  Object.keys(AllMaterialDynamicColors).forEach((name) => allColorNames.push((0, import_change_case.kebabCase)(name)));
  if (options.extraColors) {
    Object.keys(options.extraColors).forEach((colorName) => {
      const kebabName = (0, import_change_case.kebabCase)(colorName);
      allColorNames.push(kebabName);
      allColorNames.push(`on-${kebabName}`);
      allColorNames.push(`${kebabName}-container`);
      allColorNames.push(`on-${kebabName}-container`);
    });
  }
  return allColorNames;
}
var materialThemeBuilderTailwindPlugin = import_plugin.default.withOptions(
  (options) => {
    return (pluginApi) => {
      if (options == void 0) {
        throw new Error("Material Theme Plugin: options is undefined");
      }
      const { lightColors, darkColors } = materialThemeBuilder(options);
      pluginApi.addBase({
        ":root": Object.fromEntries(Object.entries(lightColors).map(([name, value]) => [`--ref-color-${name}`, value])),
        "@media (prefers-color-scheme: dark)": {
          ":root": Object.fromEntries(Object.entries(darkColors).map(([name, value]) => [`--ref-color-${name}`, value]))
        },
        ".dark": Object.fromEntries(Object.entries(darkColors).map(([name, value]) => [`--ref-color-${name}`, value]))
      });
      const stateUtils = {};
      for (const name of generateColorList(options)) {
        const varName = `--ref-color-${name}`;
        const colorVar = `rgb(var(${varName}))`;
        const hoverBg = `linear-gradient(rgba(var(${varName}), 0.08), rgba(var(${varName}), 0.08))`;
        const focusVisibleBg = `linear-gradient(rgba(var(${varName}), 0.12), rgba(var(${varName}), 0.12))`;
        const activeBg = `linear-gradient(rgba(var(${varName}), 0.12), rgba(var(${varName}), 0.12))`;
        stateUtils[`.state-${name}`] = {
          color: colorVar,
          "&:hover": {
            backgroundImage: hoverBg
          },
          "&:focus-visible": {
            backgroundImage: focusVisibleBg
          },
          "&:active": {
            backgroundImage: activeBg
          }
        };
        stateUtils[`.stateHover-${name}`] = {
          color: colorVar,
          "&:hover": {
            backgroundImage: hoverBg
          }
        };
        stateUtils[`.stateActive-${name}`] = {
          color: colorVar,
          "&:active": {
            backgroundImage: activeBg
          }
        };
      }
      pluginApi.addUtilities(stateUtils);
    };
  },
  (options) => ({
    theme: {
      extend: {
        colors: () => {
          if (options == void 0) {
            throw new Error("Material Theme Plugin: options is undefined");
          }
          return Object.fromEntries(generateColorList(options).map((name) => [name, `rgb(var(--ref-color-${name}))`]));
        }
      }
    }
  })
);
//# sourceMappingURL=main.cjs.map