@limetech/lime-elements
Version:
69 lines (68 loc) • 1.67 kB
JavaScript
export const colors = [
'red',
'pink',
'magenta',
'purple',
'violet',
'indigo',
'blue',
'sky',
'cyan',
'teal',
'green',
'lime',
'grass',
'yellow',
'amber',
'orange',
'coral',
'brown',
'gray',
'glaucous',
];
export const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];
/**
* Returns the CSS variable name holding the RGB triplet for the color & brightness.
*
* @param color the base color identifier (e.g. "red", "blue")
* @param brightness the brightness variant (e.g. "light", "default")
* @returns CSS variable name in the form --color-{color}-{brightness}
*/
export function getColorName(color, brightness) {
return `--color-${color}-${brightness}`;
}
/**
* Swatch value: inline CSS color value in the required format: rgb(var(--color-*-*))
* @param color
* @param brightness
*/
export function getSwatchValue(color, brightness) {
return `rgb(var(${getColorName(color, brightness)}))`;
}
/**
* Swatch name: human readable label like "red default"
* @param color
* @param brightness
*/
export function getSwatchName(color, brightness) {
return `${color} ${brightness}`;
}
/**
* Convenience factory returning both name & value.
* @param color
* @param brightness
*/
export function createSwatch(color, brightness) {
return {
name: getSwatchName(color, brightness),
value: getSwatchValue(color, brightness),
};
}
/**
* Returns the CSS color value for the given color and brightness.
* @param color
* @param brightness
*/
export function getCssColor(color, brightness) {
return getSwatchValue(color, brightness);
}