color-palette.ts
May 6, 2021•357 words
/**
* This file contains reference to every color defined in the core design system
* All color usage should reference identifiers within this file.
*/
/* eslint no-unused-vars: 0 */
enum Colors {
// Core
primary = '#ef5a5e', // primary red
secondary = '#4082bc', // Windows '98 blue
// Action colors
success = '#52bfbb',
error = '#fb9c33',
// Greyscale
darkGrey = '#484848',
midGrey = '#787878',
paleGrey = '#e9e8e8',
white = '#ffffff',
}
/**
* Adds an alpha value, to a given color, and returns a hex value
* @param color Color to modify, from the pallet
* @param alpha Amount of transparency to add, min=0 and max=1
*/
export const addAlpha = (color: Colors, alpha: number) => {
let calcAlpha = Math.floor(alpha * 255).toString(16); // Convert to Hex
if (calcAlpha.length < 16) calcAlpha = `0${calcAlpha}`; // Pad with 0 if <2
return color + calcAlpha; // Append calculated xx alpha onto #xxxxxx col
};
/**
* Brightens or darkens a given color
* Can be used for hover, focus, shadow colors...
* in order to avoid additional color definitions
* @param color a color specified in the ColorPallet
* @param percent amount of change, in range of -99 and +100,
* Where negative wil darken, positive will brighten
*/
export const shadeColor = (color: Colors, percent: number) => {
// Get the RGB components of the hex code
let r = parseInt(color.substring(1, 3), 16);
let g = parseInt(color.substring(3, 5), 16);
let b = parseInt(color.substring(5, 7), 16);
// Apply brightening/ darkening
r = Math.round((r * (100 + percent)) / 100);
g = Math.round((g * (100 + percent)) / 100);
b = Math.round((b * (100 + percent)) / 100);
// Ensure RGB values are within valid range
r = r < 255 ? r : 255;
g = g < 255 ? g : 255;
b = b < 255 ? b : 255;
// Convert RGB back into hex
const rr = r.toString(16).length === 1 ? `0${r.toString(16)}` : r.toString(16);
const gg = g.toString(16).length === 1 ? `0${g.toString(16)}` : g.toString(16);
const bb = b.toString(16).length === 1 ? `0${b.toString(16)}` : b.toString(16);
return `#${rr}${gg}${bb}`;
};
export default Colors;