@mantine-vue/colors-generator 1.1.2

package/cjs/index.cjs

@@ -0,0 +1,76 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region \0rolldown/runtime.js
+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 __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let chroma_js = require("chroma-js");
+chroma_js = __toESM(chroma_js);
+//#region src/generate-colors.ts
+var LIGHTNESS_MAP = [
+	.96,
+	.907,
+	.805,
+	.697,
+	.605,
+	.547,
+	.518,
+	.445,
+	.395,
+	.34
+];
+var SATURATION_MAP = [
+	.32,
+	.16,
+	.08,
+	.04,
+	0,
+	0,
+	.04,
+	.08,
+	.16,
+	.32
+];
+function getClosestLightness(colorObject) {
+	const lightnessGoal = colorObject.get("hsl.l");
+	return LIGHTNESS_MAP.reduce((prev, curr) => Math.abs(curr - lightnessGoal) < Math.abs(prev - lightnessGoal) ? curr : prev);
+}
+function generateColorsMap(color) {
+	const colorObject = (0, chroma_js.default)(color);
+	const closestLightness = getClosestLightness(colorObject);
+	const baseColorIndex = LIGHTNESS_MAP.findIndex((l) => l === closestLightness);
+	const colors = LIGHTNESS_MAP.map((l) => colorObject.set("hsl.l", l)).map((c) => (0, chroma_js.default)(c)).map((c, i) => {
+		const saturationDelta = SATURATION_MAP[i] - SATURATION_MAP[baseColorIndex];
+		return saturationDelta >= 0 ? c.saturate(saturationDelta) : c.desaturate(saturationDelta * -1);
+	});
+	colors[baseColorIndex] = (0, chroma_js.default)(color);
+	return {
+		baseColorIndex,
+		colors
+	};
+}
+function generateColors(color) {
+	return generateColorsMap(color).colors.map((c) => c.hex());
+}
+//#endregion
+exports.generateColors = generateColors;
+exports.generateColorsMap = generateColorsMap;
+
+//# sourceMappingURL=index.cjs.map

package/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/generate-colors.ts"],"sourcesContent":["import chroma from 'chroma-js'\n\nconst LIGHTNESS_MAP = [0.96, 0.907, 0.805, 0.697, 0.605, 0.547, 0.518, 0.445, 0.395, 0.34]\nconst SATURATION_MAP = [0.32, 0.16, 0.08, 0.04, 0, 0, 0.04, 0.08, 0.16, 0.32]\n\nfunction getClosestLightness(colorObject: chroma.Color) {\n  const lightnessGoal = colorObject.get('hsl.l')\n  return LIGHTNESS_MAP.reduce((prev, curr) =>\n    Math.abs(curr - lightnessGoal) < Math.abs(prev - lightnessGoal) ? curr : prev,\n  )\n}\n\nexport function generateColorsMap(color: string) {\n  const colorObject = chroma(color)\n  const closestLightness = getClosestLightness(colorObject)\n  const baseColorIndex = LIGHTNESS_MAP.findIndex((l) => l === closestLightness)\n\n  const colors = LIGHTNESS_MAP.map((l) => colorObject.set('hsl.l', l))\n    .map((c) => chroma(c))\n    .map((c, i) => {\n      const saturationDelta = SATURATION_MAP[i] - SATURATION_MAP[baseColorIndex]\n      return saturationDelta >= 0 ? c.saturate(saturationDelta) : c.desaturate(saturationDelta * -1)\n    })\n\n  colors[baseColorIndex] = chroma(color)\n\n  return { baseColorIndex, colors }\n}\n\nexport type MantineColorsTuple = readonly [\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  ...string[],\n]\n\nexport function generateColors(color: string) {\n  return generateColorsMap(color).colors.map((c) => c.hex()) as unknown as MantineColorsTuple\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAM,gBAAgB;CAAC;CAAM;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;AAAI;AACzF,IAAM,iBAAiB;CAAC;CAAM;CAAM;CAAM;CAAM;CAAG;CAAG;CAAM;CAAM;CAAM;AAAI;AAE5E,SAAS,oBAAoB,aAA2B;CACtD,MAAM,gBAAgB,YAAY,IAAI,OAAO;CAC7C,OAAO,cAAc,QAAQ,MAAM,SACjC,KAAK,IAAI,OAAO,aAAa,IAAI,KAAK,IAAI,OAAO,aAAa,IAAI,OAAO,IAC3E;AACF;AAEA,SAAgB,kBAAkB,OAAe;CAC/C,MAAM,eAAA,GAAA,UAAA,SAAqB,KAAK;CAChC,MAAM,mBAAmB,oBAAoB,WAAW;CACxD,MAAM,iBAAiB,cAAc,WAAW,MAAM,MAAM,gBAAgB;CAE5E,MAAM,SAAS,cAAc,KAAK,MAAM,YAAY,IAAI,SAAS,CAAC,CAAC,EAChE,KAAK,OAAA,GAAA,UAAA,SAAa,CAAC,CAAC,EACpB,KAAK,GAAG,MAAM;EACb,MAAM,kBAAkB,eAAe,KAAK,eAAe;EAC3D,OAAO,mBAAmB,IAAI,EAAE,SAAS,eAAe,IAAI,EAAE,WAAW,kBAAkB,EAAE;CAC/F,CAAC;CAEH,OAAO,mBAAA,GAAA,UAAA,SAAyB,KAAK;CAErC,OAAO;EAAE;EAAgB;CAAO;AAClC;AAgBA,SAAgB,eAAe,OAAe;CAC5C,OAAO,kBAAkB,KAAK,EAAE,OAAO,KAAK,MAAM,EAAE,IAAI,CAAC;AAC3D"}

package/esm/index.mjs

@@ -0,0 +1,51 @@
+import chroma from "chroma-js";
+//#region src/generate-colors.ts
+var LIGHTNESS_MAP = [
+	.96,
+	.907,
+	.805,
+	.697,
+	.605,
+	.547,
+	.518,
+	.445,
+	.395,
+	.34
+];
+var SATURATION_MAP = [
+	.32,
+	.16,
+	.08,
+	.04,
+	0,
+	0,
+	.04,
+	.08,
+	.16,
+	.32
+];
+function getClosestLightness(colorObject) {
+	const lightnessGoal = colorObject.get("hsl.l");
+	return LIGHTNESS_MAP.reduce((prev, curr) => Math.abs(curr - lightnessGoal) < Math.abs(prev - lightnessGoal) ? curr : prev);
+}
+function generateColorsMap(color) {
+	const colorObject = chroma(color);
+	const closestLightness = getClosestLightness(colorObject);
+	const baseColorIndex = LIGHTNESS_MAP.findIndex((l) => l === closestLightness);
+	const colors = LIGHTNESS_MAP.map((l) => colorObject.set("hsl.l", l)).map((c) => chroma(c)).map((c, i) => {
+		const saturationDelta = SATURATION_MAP[i] - SATURATION_MAP[baseColorIndex];
+		return saturationDelta >= 0 ? c.saturate(saturationDelta) : c.desaturate(saturationDelta * -1);
+	});
+	colors[baseColorIndex] = chroma(color);
+	return {
+		baseColorIndex,
+		colors
+	};
+}
+function generateColors(color) {
+	return generateColorsMap(color).colors.map((c) => c.hex());
+}
+//#endregion
+export { generateColors, generateColorsMap };
+
+//# sourceMappingURL=index.mjs.map

package/esm/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/generate-colors.ts"],"sourcesContent":["import chroma from 'chroma-js'\n\nconst LIGHTNESS_MAP = [0.96, 0.907, 0.805, 0.697, 0.605, 0.547, 0.518, 0.445, 0.395, 0.34]\nconst SATURATION_MAP = [0.32, 0.16, 0.08, 0.04, 0, 0, 0.04, 0.08, 0.16, 0.32]\n\nfunction getClosestLightness(colorObject: chroma.Color) {\n  const lightnessGoal = colorObject.get('hsl.l')\n  return LIGHTNESS_MAP.reduce((prev, curr) =>\n    Math.abs(curr - lightnessGoal) < Math.abs(prev - lightnessGoal) ? curr : prev,\n  )\n}\n\nexport function generateColorsMap(color: string) {\n  const colorObject = chroma(color)\n  const closestLightness = getClosestLightness(colorObject)\n  const baseColorIndex = LIGHTNESS_MAP.findIndex((l) => l === closestLightness)\n\n  const colors = LIGHTNESS_MAP.map((l) => colorObject.set('hsl.l', l))\n    .map((c) => chroma(c))\n    .map((c, i) => {\n      const saturationDelta = SATURATION_MAP[i] - SATURATION_MAP[baseColorIndex]\n      return saturationDelta >= 0 ? c.saturate(saturationDelta) : c.desaturate(saturationDelta * -1)\n    })\n\n  colors[baseColorIndex] = chroma(color)\n\n  return { baseColorIndex, colors }\n}\n\nexport type MantineColorsTuple = readonly [\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  ...string[],\n]\n\nexport function generateColors(color: string) {\n  return generateColorsMap(color).colors.map((c) => c.hex()) as unknown as MantineColorsTuple\n}\n"],"mappings":";;AAEA,IAAM,gBAAgB;CAAC;CAAM;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;AAAI;AACzF,IAAM,iBAAiB;CAAC;CAAM;CAAM;CAAM;CAAM;CAAG;CAAG;CAAM;CAAM;CAAM;AAAI;AAE5E,SAAS,oBAAoB,aAA2B;CACtD,MAAM,gBAAgB,YAAY,IAAI,OAAO;CAC7C,OAAO,cAAc,QAAQ,MAAM,SACjC,KAAK,IAAI,OAAO,aAAa,IAAI,KAAK,IAAI,OAAO,aAAa,IAAI,OAAO,IAC3E;AACF;AAEA,SAAgB,kBAAkB,OAAe;CAC/C,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,mBAAmB,oBAAoB,WAAW;CACxD,MAAM,iBAAiB,cAAc,WAAW,MAAM,MAAM,gBAAgB;CAE5E,MAAM,SAAS,cAAc,KAAK,MAAM,YAAY,IAAI,SAAS,CAAC,CAAC,EAChE,KAAK,MAAM,OAAO,CAAC,CAAC,EACpB,KAAK,GAAG,MAAM;EACb,MAAM,kBAAkB,eAAe,KAAK,eAAe;EAC3D,OAAO,mBAAmB,IAAI,EAAE,SAAS,eAAe,IAAI,EAAE,WAAW,kBAAkB,EAAE;CAC/F,CAAC;CAEH,OAAO,kBAAkB,OAAO,KAAK;CAErC,OAAO;EAAE;EAAgB;CAAO;AAClC;AAgBA,SAAgB,eAAe,OAAe;CAC5C,OAAO,kBAAkB,KAAK,EAAE,OAAO,KAAK,MAAM,EAAE,IAAI,CAAC;AAC3D"}

package/lib/generate-colors.d.ts

@@ -0,0 +1,19 @@
+import chroma from 'chroma-js';
+export declare function generateColorsMap(color: string): {
+    baseColorIndex: number;
+    colors: chroma.Color[];
+};
+export type MantineColorsTuple = readonly [
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    ...string[]
+];
+export declare function generateColors(color: string): MantineColorsTuple;

package/lib/index.d.mts

@@ -0,0 +1,2 @@
+export { generateColors, generateColorsMap } from './generate-colors';
+export type { MantineColorsTuple } from './generate-colors';

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export { generateColors, generateColorsMap } from './generate-colors';
+export type { MantineColorsTuple } from './generate-colors';

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@mantine-vue/colors-generator",
+  "version": "1.1.2",
+  "description": "A library to generate 10 shades of color based on provided color value",
+  "license": "MIT",
+  "files": [
+    "cjs",
+    "esm",
+    "lib",
+    "styles.css",
+    "styles.layer.css",
+    "styles"
+  ],
+  "sideEffects": false,
+  "main": "./cjs/index.cjs",
+  "module": "./esm/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/index.d.mts",
+        "default": "./esm/index.mjs"
+      },
+      "require": {
+        "types": "./lib/index.d.ts",
+        "default": "./cjs/index.cjs"
+      }
+    }
+  },
+  "devDependencies": {
+    "@types/chroma-js": "^3.1.2",
+    "chroma-js": "^3.2.0"
+  },
+  "peerDependencies": {
+    "chroma-js": ">=2.4.2"
+  }
+}