src/utils/ColorConstants.js
/**
* Complete color palette used in the user interface
* @enum {string}
*/
const ColorPalette = Object.freeze({
WHITE: '#FFFFFF',
BLACK: '#000000',
ALMOST_WHITE: '#FBFCFB',
BLANCHED_ALMOND: '#FFEBCD',
LIGHT_CYAN: '#D7F7FE',
TURQUOISE_BLUE: '#68E1FB', // turquoise
PACIFIC_BLUE: '#05A3C7',
AZURE: '#297EFF', // not used
SAPPHIRE: '#094DB3', // not used
PURPLE: '#7228A4',
DOGWOOD_ROSE: '#C91E63',
BURGONDY: '#7D0032',
LIGHT_GREEN: '#F0FAC7', // green
MINDARO: '#DDF37C',
HARLEQUIN_GREEN: '#59CC0C',
SLIMY_GREEN: '#3B8609',
CARROT_ORANGE: '#EB9617', // orange
SOFT_ORANGE: '#F3B353',
MISTY_ROSE: '#F8D2C9', // red
DARK_SALMON: '#EE9581',
DARK_RED: '#BD381A',
SCARLET: '#F0411A',
ATOMIC_TANGERINE: '#FF8B5E',
PIGGY_PINK: '#F9DCE8',
VERY_LIGHT_GRAY: '#F3F3F3', // gray
PLATINUM: '#EBEAEB',
LIGHT_GRAY: '#CECCCF',
ROCKET_METALLIC: '#7C777E',
ERASER: '#00000000',
});
/**
* The default colors used for the UI elements
* @enum {string}
* @property {string} NORMAL - Default color
* @property {string} LIGHT - Light color
* @property {string} WARNING - Color for warning messages
* @property {string} ERROR - Color for error messages
* @property {string} CONFIRMATION - Color for confirmation messages
* @property {string} SHADOW - Shadow color
* @property {string} OVERLAY - Color of overlay
* @property {string} BACKGROUND_AVATAR - Background of avatar
* @property {string} BACKGROUND_VIEW - Default background color of views
* @property {string} BACKGROUND_BUTTON - Default background color of button
*/
const UIColors = Object.freeze({
NORMAL: ColorPalette.BLACK,
LIGHT: ColorPalette.WHITE,
WARNING: ColorPalette.DARK_RED,
ERROR: ColorPalette.DARK_RED,
CONFIRMATION: ColorPalette.SLIMY_GREEN,
SHADOW: ColorPalette.BLACK,
OVERLAY: 'rgba(246,246,246,0.8)',
BACKGROUND_AVATAR: ColorPalette.ALMOST_WHITE,
BACKGROUND_VIEW: ColorPalette.BLANCHED_ALMOND,
BACKGROUND_BUTTON: ColorPalette.ALMOST_WHITE,
});
/**
* UI colors used in journal
* @enum {string}
* @property {string} LIGHT - Light color
* @property {string} BACKGROUND_VIEW - Default background color of view
* @property {string} BACKGROUND_DARK - Dark background (journal)
* @property {string} BACKGROUND_ELEMENT - Default background of elements
* @property {string} BACKGROUND_BUTTON_NORMAL - Normal background color of button in journal
* @property {string} BACKGROUND_BUTTON_NORMAL_TEXT - Normal background color of text on button in journal
* @property {string} BACKGROUND_BUTTON_LIGHT - Light background color of button in journal
* @property {string} BACKGROUND_BUTTON_LIGHT_TEXT - Light background color of text on button in journal
*/
const JournalColors = Object.freeze({
LIGHT: ColorPalette.WHITE,
BACKGROUND_VIEW: ColorPalette.VERY_LIGHT_GRAY,
BACKGROUND_DARK: ColorPalette.PACIFIC_BLUE,
BACKGROUND_ELEMENT: ColorPalette.WHITE,
BACKGROUND_BUTTON_NORMAL: ColorPalette.PACIFIC_BLUE,
BACKGROUND_BUTTON_NORMAL_TEXT: ColorPalette.WHITE,
BACKGROUND_BUTTON_LIGHT: ColorPalette.LIGHT_CYAN,
BACKGROUND_BUTTON_LIGHT_TEXT: ColorPalette.BLACK,
});
/**
* Colors used in the color selector for drawing and free text
* @type {string[]}
*/
const CSSColors = [
// White, black, grey
'White',
'Black',
'Grey',
'Silver',
'Whitesmoke',
// Blue
'Blue',
'DodgerBlue',
'lightSkyBlue',
'DarkTurquoise',
'Aqua',
'LightCyan',
// Red
'DarkRed',
'Red',
'Tomato',
'orange',
// Yellow
'gold',
'yellow',
'lemonchiffon',
// Pink
'Crimson',
'deeppink',
'indigo',
'BlueViolet',
'plum',
'pink',
'MistyRose',
// Green
'green',
'LimeGreen',
'Chartreuse',
'PaleGreen',
// Brown
'SaddleBrown',
'chocolate',
'BurlyWood',
'bisque',
];
export {ColorPalette, CSSColors, UIColors, JournalColors};