UNPKG

@bobthered/tailwindcss-palette-generator

Version:

Quickly generate tailwindcss color palettes from a base color or colors.

1 lines 8.21 kB
{"version":3,"sources":["../../../src/lib/hexToHSL.ts","../../../src/lib/hslToHex.ts","../../../src/lib/generateColor.ts","../../../src/lib/tailwindcssPaletteGenerator.ts"],"sourcesContent":["import type { HSL } from './types.js';\r\n\r\nexport const hexToHSL = (hex: string): HSL => {\r\n\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex) || [];\r\n\ttry {\r\n\t\tlet r = parseInt(result[1], 16);\r\n\t\tlet g = parseInt(result[2], 16);\r\n\t\tlet b = parseInt(result[3], 16);\r\n\t\t(r /= 255), (g /= 255), (b /= 255);\r\n\t\tconst max = Math.max(r, g, b),\r\n\t\t\tmin = Math.min(r, g, b);\r\n\t\tlet h = 0,\r\n\t\t\ts,\r\n\t\t\tl = (max + min) / 2;\r\n\t\tif (max == min) {\r\n\t\t\th = s = 0; // achromatic\r\n\t\t} else {\r\n\t\t\tconst d = max - min;\r\n\t\t\ts = l > 0.5 ? d / (2 - max - min) : d / (max + min);\r\n\t\t\tswitch (max) {\r\n\t\t\t\tcase r:\r\n\t\t\t\t\th = (g - b) / d + (g < b ? 6 : 0);\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase g:\r\n\t\t\t\t\th = (b - r) / d + 2;\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase b:\r\n\t\t\t\t\th = (r - g) / d + 4;\r\n\t\t\t\t\tbreak;\r\n\t\t\t}\r\n\t\t\th /= 6;\r\n\t\t}\r\n\t\tconst HSL: HSL = { h: 0, s: 0, l: 0 };\r\n\t\tHSL.h = Math.round(h * 360);\r\n\t\tHSL.s = Math.round(s * 100);\r\n\t\tHSL.l = Math.round(l * 100);\r\n\t\treturn HSL;\r\n\t} catch (error) {\r\n\t\tconsole.log(hex);\r\n\t\treturn { h: 0, s: 0, l: 0 };\r\n\t}\r\n};\r\n","import type { HSL } from './types.js';\r\n\r\nexport const hslToHex = ({ h, s, l }: HSL): string => {\r\n\tl /= 100;\r\n\tconst a = (s * Math.min(l, 1 - l)) / 100;\r\n\tconst f = (n: number) => {\r\n\t\tconst k = (n + h / 30) % 12;\r\n\t\tconst color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\r\n\t\treturn Math.round(255 * color)\r\n\t\t\t.toString(16)\r\n\t\t\t.padStart(2, '0'); // convert to Hex and prefix \"0\" if needed\r\n\t};\r\n\treturn `#${f(0)}${f(8)}${f(4)}`;\r\n};\r\n","import { hexToHSL } from './hexToHSL.js';\r\nimport { hslToHex } from './hslToHex.js';\r\nimport { type Color, type HSL, type Shade } from './types.js';\r\n\r\nexport const generateColor = ({\r\n\thex,\r\n\tpreserve,\r\n\tshades\r\n}: {\r\n\thex: string;\r\n\tpreserve: boolean;\r\n\tshades: Shade[];\r\n}): Color => {\r\n\t// convert hex to hsl\r\n\tconst colorHSL = hexToHSL(hex);\r\n\r\n\t// initiate lightnessDelta map\r\n\tconst lightnessDelta: Record<string | number, number> = {};\r\n\r\n\t// create object\r\n\tconst obj: Color = shades.reduce((obj: Record<string | number, string>, { name, lightness }) => {\r\n\t\t// destructure h, s, l\r\n\t\tconst { h, s, l } = colorHSL;\r\n\r\n\t\t// generate shade hsl\r\n\t\tconst hsl: HSL = { h, s, l: lightness };\r\n\r\n\t\t// convert hsl to hex\r\n\t\tconst hex = hslToHex(hsl);\r\n\r\n\t\t// update map\r\n\t\tobj[name] = hex;\r\n\r\n\t\t// update lightnessDelta if preserving color\r\n\t\tif (preserve) lightnessDelta[name] = Math.abs(l - lightness);\r\n\r\n\t\treturn obj;\r\n\t}, {});\r\n\r\n\t// if preserving color, inject original color at closest shade\r\n\tif (preserve) {\r\n\t\tconst [closestShade] = Object.keys(lightnessDelta).sort(\r\n\t\t\t(a, b) => lightnessDelta[a] - lightnessDelta[b]\r\n\t\t);\r\n\t\tobj[closestShade] = hex;\r\n\t}\r\n\r\n\treturn obj;\r\n};\r\n","import { type Options, type Palette } from './types.js';\r\nimport { generateColor } from './generateColor.js';\r\n\r\nexport const tailwindcssPaletteGenerator = (options: string | string[] | Options): Palette => {\r\n\t// set default values\r\n\tconst defaults: Options = {\r\n\t\tcolors: [],\r\n\t\tnames: [\r\n\t\t\t'primary',\r\n\t\t\t'secondary',\r\n\t\t\t'tertiary',\r\n\t\t\t'quaternary',\r\n\t\t\t'quinary',\r\n\t\t\t'senary',\r\n\t\t\t'septenary',\r\n\t\t\t'octonary',\r\n\t\t\t'nonary',\r\n\t\t\t'denary'\r\n\t\t],\r\n\t\tpreserve: true,\r\n\t\tshades: [\r\n\t\t\t{ name: '50', lightness: 98 },\r\n\t\t\t{ name: '100', lightness: 95 },\r\n\t\t\t{ name: '200', lightness: 90 },\r\n\t\t\t{ name: '300', lightness: 82 },\r\n\t\t\t{ name: '400', lightness: 64 },\r\n\t\t\t{ name: '500', lightness: 46 },\r\n\t\t\t{ name: '600', lightness: 33 },\r\n\t\t\t{ name: '700', lightness: 24 },\r\n\t\t\t{ name: '800', lightness: 14 },\r\n\t\t\t{ name: '900', lightness: 7 },\r\n\t\t\t{ name: '950', lightness: 4 }\r\n\t\t]\r\n\t};\r\n\r\n\t// update options based on input\r\n\tif (typeof options === 'string') options = { colors: [options] };\r\n\tif (typeof options === 'object' && Array.isArray(options)) options = { colors: options };\r\n\r\n\t// merge options with defaults\r\n\toptions = Object.assign(defaults, options);\r\n\r\n\t// destructure options\r\n\tconst { colors, names, preserve, shades } = options;\r\n\r\n\tif (colors === undefined || names === undefined || preserve === undefined || shades === undefined)\r\n\t\treturn {};\r\n\r\n\t// create palette\r\n\tconst palette: Palette = colors.reduce(\r\n\t\t(obj: Record<string | number, Record<string | number, string>>, hex, index) => {\r\n\t\t\tconst name = names[index];\r\n\t\t\tconst color = generateColor({ hex, preserve, shades });\r\n\t\t\tobj[name] = color;\r\n\t\t\treturn obj;\r\n\t\t},\r\n\t\t{}\r\n\t);\r\n\r\n\treturn palette;\r\n};\r\n"],"mappings":";AAEO,IAAM,WAAW,CAAC,QAAqB;AAC7C,QAAM,SAAS,4CAA4C,KAAK,GAAG,KAAK,CAAC;AACzE,MAAI;AACH,QAAI,IAAI,SAAS,OAAO,CAAC,GAAG,EAAE;AAC9B,QAAI,IAAI,SAAS,OAAO,CAAC,GAAG,EAAE;AAC9B,QAAI,IAAI,SAAS,OAAO,CAAC,GAAG,EAAE;AAC9B,IAAC,KAAK,KAAO,KAAK,KAAO,KAAK;AAC9B,UAAM,MAAM,KAAK,IAAI,GAAG,GAAG,CAAC,GAC3B,MAAM,KAAK,IAAI,GAAG,GAAG,CAAC;AACvB,QAAI,IAAI,GACP,GACA,KAAK,MAAM,OAAO;AACnB,QAAI,OAAO,KAAK;AACf,UAAI,IAAI;AAAA,IACT,OAAO;AACN,YAAM,IAAI,MAAM;AAChB,UAAI,IAAI,MAAM,KAAK,IAAI,MAAM,OAAO,KAAK,MAAM;AAC/C,cAAQ,KAAK;AAAA,QACZ,KAAK;AACJ,eAAK,IAAI,KAAK,KAAK,IAAI,IAAI,IAAI;AAC/B;AAAA,QACD,KAAK;AACJ,eAAK,IAAI,KAAK,IAAI;AAClB;AAAA,QACD,KAAK;AACJ,eAAK,IAAI,KAAK,IAAI;AAClB;AAAA,MACF;AACA,WAAK;AAAA,IACN;AACA,UAAM,MAAW,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE;AACpC,QAAI,IAAI,KAAK,MAAM,IAAI,GAAG;AAC1B,QAAI,IAAI,KAAK,MAAM,IAAI,GAAG;AAC1B,QAAI,IAAI,KAAK,MAAM,IAAI,GAAG;AAC1B,WAAO;AAAA,EACR,SAAS,OAAO;AACf,YAAQ,IAAI,GAAG;AACf,WAAO,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE;AAAA,EAC3B;AACD;;;ACvCO,IAAM,WAAW,CAAC,EAAE,GAAG,GAAG,EAAE,MAAmB;AACrD,OAAK;AACL,QAAM,IAAK,IAAI,KAAK,IAAI,GAAG,IAAI,CAAC,IAAK;AACrC,QAAM,IAAI,CAAC,MAAc;AACxB,UAAM,KAAK,IAAI,IAAI,MAAM;AACzB,UAAM,QAAQ,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE;AAC5D,WAAO,KAAK,MAAM,MAAM,KAAK,EAC3B,SAAS,EAAE,EACX,SAAS,GAAG,GAAG;AAAA,EAClB;AACA,SAAO,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;AAC9B;;;ACTO,IAAM,gBAAgB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACD,MAIa;AAEZ,QAAM,WAAW,SAAS,GAAG;AAG7B,QAAM,iBAAkD,CAAC;AAGzD,QAAM,MAAa,OAAO,OAAO,CAACA,MAAsC,EAAE,MAAM,UAAU,MAAM;AAE/F,UAAM,EAAE,GAAG,GAAG,EAAE,IAAI;AAGpB,UAAM,MAAW,EAAE,GAAG,GAAG,GAAG,UAAU;AAGtC,UAAMC,OAAM,SAAS,GAAG;AAGxB,IAAAD,KAAI,IAAI,IAAIC;AAGZ,QAAI,SAAU,gBAAe,IAAI,IAAI,KAAK,IAAI,IAAI,SAAS;AAE3D,WAAOD;AAAA,EACR,GAAG,CAAC,CAAC;AAGL,MAAI,UAAU;AACb,UAAM,CAAC,YAAY,IAAI,OAAO,KAAK,cAAc,EAAE;AAAA,MAClD,CAAC,GAAG,MAAM,eAAe,CAAC,IAAI,eAAe,CAAC;AAAA,IAC/C;AACA,QAAI,YAAY,IAAI;AAAA,EACrB;AAEA,SAAO;AACR;;;AC7CO,IAAM,8BAA8B,CAAC,YAAkD;AAE7F,QAAM,WAAoB;AAAA,IACzB,QAAQ,CAAC;AAAA,IACT,OAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,MACP,EAAE,MAAM,MAAM,WAAW,GAAG;AAAA,MAC5B,EAAE,MAAM,OAAO,WAAW,GAAG;AAAA,MAC7B,EAAE,MAAM,OAAO,WAAW,GAAG;AAAA,MAC7B,EAAE,MAAM,OAAO,WAAW,GAAG;AAAA,MAC7B,EAAE,MAAM,OAAO,WAAW,GAAG;AAAA,MAC7B,EAAE,MAAM,OAAO,WAAW,GAAG;AAAA,MAC7B,EAAE,MAAM,OAAO,WAAW,GAAG;AAAA,MAC7B,EAAE,MAAM,OAAO,WAAW,GAAG;AAAA,MAC7B,EAAE,MAAM,OAAO,WAAW,GAAG;AAAA,MAC7B,EAAE,MAAM,OAAO,WAAW,EAAE;AAAA,MAC5B,EAAE,MAAM,OAAO,WAAW,EAAE;AAAA,IAC7B;AAAA,EACD;AAGA,MAAI,OAAO,YAAY,SAAU,WAAU,EAAE,QAAQ,CAAC,OAAO,EAAE;AAC/D,MAAI,OAAO,YAAY,YAAY,MAAM,QAAQ,OAAO,EAAG,WAAU,EAAE,QAAQ,QAAQ;AAGvF,YAAU,OAAO,OAAO,UAAU,OAAO;AAGzC,QAAM,EAAE,QAAQ,OAAO,UAAU,OAAO,IAAI;AAE5C,MAAI,WAAW,UAAa,UAAU,UAAa,aAAa,UAAa,WAAW;AACvF,WAAO,CAAC;AAGT,QAAM,UAAmB,OAAO;AAAA,IAC/B,CAAC,KAA+D,KAAK,UAAU;AAC9E,YAAM,OAAO,MAAM,KAAK;AACxB,YAAM,QAAQ,cAAc,EAAE,KAAK,UAAU,OAAO,CAAC;AACrD,UAAI,IAAI,IAAI;AACZ,aAAO;AAAA,IACR;AAAA,IACA,CAAC;AAAA,EACF;AAEA,SAAO;AACR;","names":["obj","hex"]}