fk-react-ui-components/lib/colorCodes.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
var baseColorPalette = {
    colorBaseWhite: '#FFFFFF',
    colorBaseBlack: '#000000',
    colorBaseGold: '#DBAF2C',
    colorBaseRed: '#E85C5C',
    colorBaseGreen: '#27AC70',
    colorBaseBlue: '#47A0FB',
    colorBaseYellow: '#FFE3B3',

    /**
     * Grayscale
     *
     * Light --> Dark
     */

    colorGrayscaleDust: '#FAFBFC',
    colorGrayscaleSand: '#F7F7F7',
    colorGrayscalePebble: '#DFDFDF',
    colorGrayscaleStone: '#AAAAAA',
    colorGrayscaleRock: '#777777',
    colorGrayscaleSlate: '#3F3F3F'
};

var light = 0.8;
var lighter = 0.5;
var lightest = 0.2;
var lightenColors = {
    light: light,
    lighter: lighter,
    lightest: lightest
};

var guidelineColors = {
    white: baseColorPalette.colorBaseWhite,
    black: baseColorPalette.colorBaseBlack,
    accent: {
        primary: baseColorPalette.colorBaseBlue,
        secondary: baseColorPalette.colorBaseYellow
    },
    states: {
        error: baseColorPalette.colorBaseRed,
        success: baseColorPalette.colorBaseGreen,
        warning: baseColorPalette.colorBaseGold,
        disable: baseColorPalette.colorGrayscaleSand
    },
    text: {
        primary: baseColorPalette.colorGrayscaleSlate,
        secondary: baseColorPalette.colorGrayscaleRock,
        tertiary: baseColorPalette.colorGrayscaleStone
    },
    background: {
        primary: baseColorPalette.colorGrayscaleDust,
        secondary: baseColorPalette.colorGrayscaleSand
    },
    border: {
        primary: baseColorPalette.colorGrayscalePebble
    },
    shadow: {
        primary: baseColorPalette.colorGrayscalePebble
    },
    icon: {
        primary: baseColorPalette.colorGrayscaleStone,
        secondary: baseColorPalette.colorGrayscaleRock
    },
    overlay: {
        primary: baseColorPalette.colorGrayscaleSlate
    },
    lightenColors: lightenColors
};

var colors = {
    brandBlue: guidelineColors.accent.primary, // '#47A0FB'
    /**
     * Owners please check for what darkGrey color is used(3 colors in the guidelines ),
     * guidelineColors.text.tertiary
     * guidelineColors.states.disable
     * guidelineColors.border.primary
     *
     */
    darkGrey: guidelineColors.text.tertiary, // '#484848'
    greyText: guidelineColors.text.secondary, // '#909090',
    greyBorder: guidelineColors.border.primary, // '#EAEAEA',

    /**
     * Owners pleae use polish to lighten the color
     * 47A0fb, lighten 80
     */
    selectedBlue: guidelineColors.accent.primary, // 'rgba(206,229,246,0.5)',
    greyBackground: guidelineColors.background.secondary, // '#FAFAFA',
    /**
     * Owners pleae use polish to lighten the color
     * 47A0fb, lighten 80
     */
    blueBackground: guidelineColors.accent.primary, // '#e6f2fb',
    lineBorder: guidelineColors.border.secondary, // '#DBDBDB',
    titleBlack: guidelineColors.text.primary, // '#2A2C2E',
    whiteText: guidelineColors.white, // '#FFFFFF',
    greyTableHeaderText: guidelineColors.text.primary, // '#717171',
    echoBlueBackground: guidelineColors.background.secondary, // '#E8ECF1',
    success: guidelineColors.states.success, // '#5abf6d',
    failure: guidelineColors.states.error, // '#FC4549',
    headingColor: guidelineColors.text.primary, // '#3F3F3F',
    /**
     * Owners pleae use polish to lighten the color
     * 47A0fb, lighten 80
     */
    activeMenu: guidelineColors.accent.primary, // '#D9ECF9',
    inputBorder: guidelineColors.border.primary, // '#CCCCCC',
    navButtonText: guidelineColors.text.secondary, // '#848482',
    modalFooterShadow: guidelineColors.shadow.primary, // '0px -7px 10px -8px rgba(0,0,0,0.15)',
    modalShadow: guidelineColors.shadow.primary, // 'rgba(0, 0, 0, 0.24) 7px 6px 12px -7px',
    modalHeaderBorderColor: guidelineColors.border.primary, // '#e8e8e8',
    modalBorderColor: guidelineColors.border.primary, // '#f7f7f7',
    loaderColor: guidelineColors.accent.primary, // '#42abff',
    blackText: guidelineColors.black, // '#000000',
    treeMenuItemBorderColor: guidelineColors.border.primary, // '#F1F2F4',
    categoryTobeSelectedColor: guidelineColors.text.tertiary, // '#AEAEAE',
    searchInputTextColor: guidelineColors.text.tertiary, // '#ADADAD',
    statusIconColor: guidelineColors.text.tertiary, // '#A2A2A2',
    /**
     * Need to check with the design team to either change it to
     * #777777 baseColorPalette.colorGrayscaleRock,
     * #AAAAAA baseColorPalette.colorGrayscaleStone
     */
    statusHeadingColor: '#F5F5F5',
    chipBgColor: guidelineColors.background.primary, // '#F2F2F2',
    brandListingBackground: guidelineColors.background.secondary, // '#F8F8F8',
    datePickerBorderColor: guidelineColors.accent.primary, // '#4badff',
    datePickerBgColor: guidelineColors.accent.primary, // '#4bc1ff',
    linkIcon: guidelineColors.accent.primary, // '#3B7ADB',
    successIcon: guidelineColors.states.success, // '#45B95A',
    failureIcon: guidelineColors.states.error, // '#F86D72',
    warningIcon: guidelineColors.states.warning, // '#FF9F00',
    inprogressIcon: guidelineColors.text.tertiary, // '#909090',tertiary
    wizardBorder: guidelineColors.border.primary, // '#DFDFDF',
    nobelHeader: guidelineColors.text.secondary, // '#9B9B9B',
    /**
     * Owners please check for what whiteSmoke color is used(3 colors in the guidelines ),
     * guidelineColors.border.secondary
     * guidelineColors.shadow.primary
     * guidelineColors.background.primary
     *
     */
    whiteSmoke: '#DFDFDF',
    greyBtnBackground: guidelineColors.states.disable, // '#9B9B9B',
    bluishGreyText: guidelineColors.text.primary, // '#86a0b5',
    accordionBorderColor: guidelineColors.border.primary // '#f2f3f4'
};

exports.colors = colors;
exports.guidelineColors = guidelineColors;
exports.lightenColors = lightenColors;