src/utils/Colors.js
//All colors in CSS
const cssColors = [
'Red',
'Blue',
'Yellow',
'Aqua',
'Aquamarine',
'Azure',
'Beige',
'Bisque',
'Black',
'BlueViolet',
'Brown',
'BurlyWood',
'CadetBlue',
'Chartreuse',
'Chocolate',
'Coral',
'CornflowerBlue',
'Crimson',
'Cyan',
'DarkBlue',
'DarkCyan',
'DarkGoldenRod',
'DarkGrey',
'DarkGreen',
'DarkKhaki',
'DarkMagenta',
'DarkOliveGreen',
'DarkOrange',
'DarkOrchid',
'DarkRed',
'DarkSalmon',
'DarkSeaGreen',
'DarkSlateBlue',
'DarkSlateGray',
'DarkTurquoise',
'DarkViolet',
'DeepPink',
'DeepSkyBlue',
'DimGray',
'DodgerBlue',
'FireBrick',
'FloralWhite',
'ForestGreen',
'Fuchsia',
'GhostWhite',
'Gold',
'GoldenRod',
'Gray',
'Green',
'GreenYellow',
'HotPink',
'IndianRed',
'Indigo',
'Khaki',
'Lavender',
'LawnGreen',
'LemonChiffon',
'LightBlue',
'LightCoral',
'LightCyan',
'LightGoldenRodYellow',
'LightGreen',
'LightPink',
'LightSalmon',
'LightSeaGreen',
'LightSkyBlue',
'LightSlateGrey',
'LightSteelBlue',
'LightYellow',
'Lime',
'LimeGreen',
'Linen',
'Magenta',
'Maroon',
'MediumAquaMarine',
'MediumBlue',
'MediumOrchid',
'MediumPurple',
'MediumSeaGreen',
'MediumSlateBlue',
'MediumSpringGreen',
'MediumTurquoise',
'MediumVioletRed',
'MidnightBlue',
'MistyRose',
'Moccasin',
'Navy',
'OldLace',
'Olive',
'OliveDrab',
'Orange',
'OrangeRed',
'Orchid',
'PaleGoldenRod',
'PaleGreen',
'PaleTurquoise',
'PaleVioletRed',
'PapayaWhip',
'PeachPuff',
'Peru',
'Pink',
'Plum',
'PowderBlue',
'Purple',
'RebeccaPurple',
'RosyBrown',
'RoyalBlue',
'SaddleBrown',
'Salmon',
'SandyBrown',
'SeaGreen',
'Sienna',
'Silver',
'SkyBlue',
'SlateBlue',
'SlateGray',
'Snow',
'SpringGreen',
'SteelBlue',
'Tan',
'Teal',
'Thistle',
'Tomato',
'Turquoise',
'Violet',
'Wheat',
'YellowGreen',
];
//Complete color palette
const colorPalette = {
white: '#FFFFFF',
black: '#000000',
almostWhite: '#FBFCFB',
blanchedAlmond: '#FFEBCD',
lightCyan: '#D7F7FE',
turquoiseBlue: '#68E1FB', // turquoise
pacificBlue: '#05A3C7',
lavenderBlue: '#C5DBFC', // blue
azure: '#297EFF',
sapphire: '#094DB3',
lavender: '#EDDEF7', // purple
brightLavender: '#C08CE3',
purple: '#7228A4',
charmPink: '#EC83AD', // pink
dogwoodRose: '#C91E63',
burgondy: '#7D0032',
lightGreen: '#F0FAC7', // green
mindaro: '#DDF37C',
vividLimeGreen: '#ABCD13',
mintGreen: '#C3F99F',
harlequinGreen: '#59CC0C',
slimyGreen: '#3B8609',
carrotOrange: '#EB9617', // orange
mustardBrown: '#CF820E',
softOrange: '#F3B353',
deepChampagne: '#F8D5A0',
mistyRose: '#F8D2C9', // red
darkSalmon: '#EE9581',
darkRed: '#BD381A',
scarlet: '#F0411A',
atomicTangerine: '#FF8B5E',
piggyPink: '#F9DCE8',
veryLightGray: '#F3F3F3', // gray
platinum: '#EBEAEB',
lightGray: '#CECCCF',
rocketMetallic: '#7C777E',
};
//Important colors
const colors = {
backgroundDefault: colorPalette.blanchedAlmond,
textDefault: colorPalette.black,
textConfirmation: 'green',
textError: 'red',
shadowButton: colorPalette.black,
overlay: 'rgba(246,246,246,0.8)',
// diaryCover: '#C96561',
};
/**
* Function to convert CSS colors (first letter capitalized) to React colors (all lowercase)
* @returns {[string]} All CSS colors with names understood by React
*/
function getColors() {
const colors = [];
let i = 0;
cssColors.forEach(
color => colors.push({id: i++, name: color.toLowerCase()}), //Convert
);
return colors;
}
export {getColors, colors, colorPalette};