Home Reference Source

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};