@braineet/ui
Version:
Braineet design system
101 lines (98 loc) • 3.25 kB
JavaScript
/* eslint-disable import/prefer-default-export */
import chroma from 'chroma-js';
import isObject from 'lodash/isObject';
var getKeyByValue = function getKeyByValue(object, value) {
return Object.keys(object).find(function (key) {
return !isObject(object[key]) && object[key].toLowerCase() === value.toLowerCase();
});
};
export var getContrast = function getContrast(bgColor, textColor) {
try {
return chroma.contrast(bgColor, textColor);
} catch (error) {
return 1;
}
};
export var textColorContrast = function textColorContrast(color, lightColor, darkColor) {
var textColor = color;
if (!textColor) return;
if (textColor.slice(0, 1) === '#') {
textColor = textColor.slice(1);
}
// If a three-character hexcode, make six-character
if (textColor.length === 3) {
textColor = textColor.split('').map(function (hex) {
return hex + hex;
}).join('');
}
// Convert to RGB value
var r = parseInt(textColor.substr(0, 2), 16);
var g = parseInt(textColor.substr(2, 2), 16);
var b = parseInt(textColor.substr(4, 2), 16);
// Get YIQ ratio
var yiq = (r * 299 + g * 587 + b * 114) / 1000;
return yiq >= 128 ? darkColor || 'black' : lightColor || 'white';
};
export var getPalette = function getPalette(object, color, selector) {
if (object && isObject(object) && color) {
if (object[color] && ['10', '20', '50', '90', '100'].every(function (c) {
return !color.includes(c);
})) {
var paletteGenerated = {
default: object[color],
100: object[color + "100"],
90: object[color + "90"],
50: object[color],
20: object[color + "20"],
10: object[color + "10"]
};
if (selector && paletteGenerated[selector]) {
return paletteGenerated[selector];
}
return paletteGenerated;
}
if (color.includes('#')) {
var keyColor = getKeyByValue(object, color);
if (keyColor) {
var mainKeyColor = ['10', '20', '50', '90', '100'].some(function (c) {
return keyColor.includes(c);
}) ? keyColor.substring(0, keyColor.length - 2) : keyColor;
var palette = {
default: object[mainKeyColor + "50"],
100: object[mainKeyColor + "100"],
90: object[mainKeyColor + "90"],
50: object[mainKeyColor + "50"],
20: object[mainKeyColor + "20"],
10: object[mainKeyColor + "10"]
};
if (selector && palette[selector]) return palette[selector];
return palette;
}
var defaultColor = color;
var chromaColor = chroma(defaultColor);
var tint100 = chromaColor.darken(3);
var tint90 = chromaColor.darken();
var tint20 = chromaColor.saturate().luminance(0.6);
var tint10 = chromaColor.saturate(3).luminance(0.9);
var _paletteGenerated = {
default: color,
100: tint100.hex(),
90: tint90.hex(),
50: defaultColor,
20: tint20.hex(),
10: tint10.hex()
};
if (selector && _paletteGenerated[selector]) return _paletteGenerated[selector];
return _paletteGenerated;
}
}
if (selector) return '';
return {
default: color,
100: '',
90: '',
50: '',
20: '',
10: ''
};
};