@tiger-ui/color-palette-generator
Version:
Install the package in your project directory with: ### npm: ``` npm install @tiger-ui/color-palette-generator ``` ### yarn: ``` yarn add @tiger-ui/color-palette-generator ```
186 lines • 7.25 kB
JavaScript
import { __assign } from "tslib";
import ColorConverter from "@tiger-ui/color-converter";
import { contrastColor } from "@tiger-ui/contrast-color";
/* *************** COLOR *************** */
var rgbaToHslaCodes = ColorConverter.rgbaToHslaCodes, rgbaToRgbaCodes = ColorConverter.rgbaToRgbaCodes, rgbToHslCodes = ColorConverter.rgbToHslCodes, rgbToRgbCodes = ColorConverter.rgbToRgbCodes, hslaToRgbaCodes = ColorConverter.hslaToRgbaCodes, hexToHslCodes = ColorConverter.hexToHslCodes, rgbToHex = ColorConverter.rgbToHex;
var Color = /** @class */ (function () {
/**
* @param colorPalette - 'hex' | 'rgb' | 'rgba' | { main: string; light?: string; dark?: string; contrast?: string }
*/
function Color(colorPalette, options) {
this.mainColor = '';
this.defaultOptions = {
lightColorIntensity: 3, // %3
darkColorIntensity: 3, // %3
contrastDarkValue: '#000000', // default: dark
contrastLightValue: '#ffffff', // default: white
contrastThresholdValue: 128,
};
if (options)
this.options = __assign(__assign({}, this.defaultOptions), options);
else
this.options = this.defaultOptions;
if (typeof colorPalette === 'string') {
this.mainColor = colorPalette;
}
if (typeof colorPalette === 'object') {
this.mainColor = colorPalette.main;
this.lightColor = colorPalette.light;
this.darkColor = colorPalette.dark;
this.contrastColor = colorPalette.contrast;
}
}
Object.defineProperty(Color.prototype, "main", {
/* ------ GETTER METHODS ------ */
get: function () {
return this.mainColor;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Color.prototype, "dark", {
get: function () {
var _a;
if (this.darkColor)
return this.darkColor;
var darkColorLightness = (_a = this.options.darkColorIntensity) !== null && _a !== void 0 ? _a : this.defaultOptions.darkColorIntensity;
return this.lightnessSelective(darkColorLightness, /* x% */ 'subtract');
},
enumerable: false,
configurable: true
});
Object.defineProperty(Color.prototype, "light", {
get: function () {
var _a;
if (this.lightColor)
return this.lightColor;
var lightColorLightness = (_a = this.options.lightColorIntensity) !== null && _a !== void 0 ? _a : this.defaultOptions.lightColorIntensity;
return this.lightnessSelective(lightColorLightness, /* x% */ 'add');
},
enumerable: false,
configurable: true
});
Object.defineProperty(Color.prototype, "contrast", {
get: function () {
if (this.contrastColor)
return this.contrastColor;
var _a = this.options, contrastDarkValue = _a.contrastDarkValue, contrastLightValue = _a.contrastLightValue, contrastThresholdValue = _a.contrastThresholdValue;
return contrastColor(this.mainColor, {
darkColor: contrastDarkValue,
lightColor: contrastLightValue,
threshold: contrastThresholdValue,
});
},
enumerable: false,
configurable: true
});
Object.defineProperty(Color.prototype, "colorOptions", {
get: function () {
return this.options;
},
enumerable: false,
configurable: true
});
/* ------ END - GETTER METHODS ------ */
/* ------ PRIVATE HELPER METHODS ------ */
Color.prototype.getColorType = function (color) {
var type = undefined;
if (color.startsWith('#') && color.length <= 7 && color.length >= 4) {
type = 'hex';
}
if (color.startsWith('rgb')) {
type = 'rgb';
}
if (color.startsWith('rgba')) {
type = 'rgba';
}
return type;
};
/**
*
* @param lightness (in percent) - example: 5 (5%)
* @param operator - 'add' | 'subtract' | 'set'
*
* OPERATORS:
* Sets what action the lightness value will be subjected to.
* - set: sets lightness to typed percentage.
*
* - add: adds the lightness value of the color.
* Example:
* color: hsl(0, 100%, 50%)
* color after added lightness: hsl(0, 100%, 55%) (5% applied)
*
* - subtract: reduces the lightness value of the color
* Example:
* color: hsl(0, 100%, 50%)
* color after lightness reduction: hsl(0, 100%, 45%) (5% applied)
*/
Color.prototype.lightnessSelective = function (lightness, operator) {
// color values
var color = this.main;
var colorType = this.getColorType(color);
// value to return
var finalColor = '';
var hsl = {
h: 0,
s: 0,
l: 0,
a: 1,
};
// check color type
if (colorType === 'hex') {
hsl = hexToHslCodes(color);
}
if (colorType === 'rgb') {
var rgb = rgbToRgbCodes(color);
hsl = rgbToHslCodes(rgb.r, rgb.g, rgb.b);
}
;
if (colorType === 'rgba') {
var rgba = rgbaToRgbaCodes(color);
hsl = rgbaToHslaCodes(rgba.r, rgba.g, rgba.b, rgba.a);
}
// lightness values
// The lightness range is between 100 and 0. The maximum value should be 100.
var lightnessMax = 100;
// The lightness range is between 100 and 0. The minimum value should be 0.
var lightnessMin = 0;
// get hsl(a) values
var h = hsl.h, s = hsl.s, l = hsl.l, a = hsl.a;
var lValue = (function () {
var result = 0;
if (operator === 'add') {
var value = l + lightness; /* lightness + %x */
result = value < lightnessMax ? value : lightnessMax;
}
if (operator === 'subtract') {
var value = l - lightness /* lightness - %x */;
result = value > lightnessMin ? value : lightnessMin;
}
if (operator === 'set') {
if (lightness > lightnessMax)
result = lightnessMax;
else if (lightness < lightnessMin)
result = lightnessMin;
else
result = lightness;
}
return result;
})();
var colorRgba = hslaToRgbaCodes(h, s, lValue, a !== null && a !== void 0 ? a : 1);
if (colorType === 'hex') {
finalColor = rgbToHex(colorRgba.r, colorRgba.g, colorRgba.b);
}
if (colorType === 'rgb') {
finalColor = 'rgb(' + colorRgba.r + ',' + colorRgba.g + ',' + colorRgba.b + ')';
}
if (colorType === 'rgba') {
finalColor = 'rgba(' + colorRgba.r + ', ' + colorRgba.g + ', ' + colorRgba.b + ', ' + colorRgba.a + ')';
}
return finalColor;
};
return Color;
}());
export { Color };
/* *************** END - COLOR *************** */
//# sourceMappingURL=index.js.map