@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 ```
72 lines (71 loc) • 1.99 kB
TypeScript
export type ColorPalette = {
main: string;
light?: string;
dark?: string;
contrast?: string;
};
export type ColorOptions = {
/**
* Intensity value in light variation.
*
* default value: 3 (%3)
*
* range: between [0, 100]
*/
lightColorIntensity?: number;
/**
* Intensity value in dark variation.
*
* default value: 3 (%3)
*
* range: between [0, 100]
*/
darkColorIntensity?: number;
/**
* Determines the color to return when the contrast color is close to dark.
*/
contrastDarkValue?: string;
/**
* Determines the color to return when the contrast color is close to light.
*/
contrastLightValue?: string;
contrastThresholdValue?: number;
};
export declare class Color {
private mainColor;
private lightColor;
private darkColor;
private contrastColor;
private options;
private defaultOptions;
/**
* @param colorPalette - 'hex' | 'rgb' | 'rgba' | { main: string; light?: string; dark?: string; contrast?: string }
*/
constructor(colorPalette: ColorPalette | string, options?: ColorOptions);
get main(): string;
get dark(): string;
get light(): string;
get contrast(): string;
get colorOptions(): Required<ColorOptions>;
private getColorType;
/**
*
* @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)
*/
private lightnessSelective;
}