@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
59 lines (58 loc) • 2.54 kB
TypeScript
/**
* Converts hex to rgb
* @param {string} hex: The hex color value (with or without #)
* @return {Array<number>|null} The converted rgb array
**/
export declare function hexToRgb(hex: string): Array<number> | null;
/**
* Converts rgb to hex
* @param {Array<number>} rgbArray: The rgb color
* @return {string} The converted hex value
**/
export declare function rgbToHex(rgbArray: Array<number>): string;
/**
* Dim or brighten a hex color
* @param {string} rgb: The rgb color value
* @return {string} The brightened or dimmed hex color
**/
export declare function calculateShadeColor(rgb: Array<number>, percent: number): string;
/**
* Get the luminance of an rgb color
* @param {Array<number>} rgb: The rgb value as an array
* @return {Number} Returns value between 0 and 1, where 1 is white
**/
export declare function getLuminanace(rgb: Array<number>): number;
/**
* Get the contrast ratio between two rgb colors
* @param {Array<number>} rgbColorA: The first rgb value as an array
* @param {Array<number>} rgbColorB: The second rgb value as an array
* @return {Number} Returns value between 1 and 21, where 1 is no contrast and 21 is max contrast
**/
export declare function getContrastRatio(rgbColorA: Array<number>, rgbColorB: Array<number>): number;
/**
* Gives you a random hashed color for a string, e.g. if you give it 'owncloud' it will always return the same color
* @param {string} name: Can be any string
* @return {string} Returns a hex color
**/
export declare function generateHashedColorForString(name: string): string;
/**
* Adjusts a given color to match the contrast ratio of another color
* @param {Array<number>} targetColorRgb: color to adjust
* @param {Array<number>} associatedColorRgb: brightest reference color
* @param {Array<number>} desiredRatio: desired contrast ratio
* @return {string} Returns a rgb color array
**/
export declare function setDesiredContrastRatio(targetColorRgb: Array<number>, associatedColorRgb: Array<number>, desiredRatio: number): Array<number>;
/**
* Convert a css rgb value like rgb(255, 255, 255) to a hex value like #FFFFFF
* works also with rgba()
* @param {string} cssRgb: color to adjust
* @return {string} Returns a hex color
**/
export declare function cssRgbToHex(cssRgb: string): string;
/**
* Get the hex value of a css var()
* @param {string} variable: The css var name e.g. var(--color-primary) or --color-primary
* @return {string} Returns a hex color
**/
export declare function getHexFromCssVar(variable: string): string;