How to use the datax-common.Colors.neutralTertiaryAlt function in datax-common

);

// Props
SideToolbar.propTypes = {
    isTestQueryOutputPanelVisible: PropTypes.bool.isRequired,

    onShowTestQueryOutputPanel: PropTypes.func.isRequired
};

export default SideToolbar;

// Styles
const panelStyle = {
    position: 'fixed',
    right: 0,
    backgroundColor: Colors.neutralTertiaryAlt,
    width: 39
};

const itemContainerStyle = {
    transform: 'rotate(90deg) translateX(39px)',
    transformOrigin: '39px 0 0',
    height: 39,
    display: 'flex'
};

const itemStyle = {
    backgroundColor: Colors.customBlueDarker,
    color: Colors.white,
    fontSize: 15,
    paddingTop: 9,
    paddingBottom: 9,

onUpdateBatchEndTime: value => dispatch(Actions.updateBatchEndTime(value)),
    onUpdateBatchIntervalValue: value => dispatch(Actions.updateBatchIntervalValue(value)),
    onUpdateBatchIntervalType: value => dispatch(Actions.updateBatchIntervalType(value)),
    onUpdateBatchDelayValue: value => dispatch(Actions.updateBatchDelayValue(value)),
    onUpdateBatchDelayType: value => dispatch(Actions.updateBatchDelayType(value)),
    onUpdateBatchWindowValue: value => dispatch(Actions.updateBatchWindowValue(value)),
    onUpdateBatchWindowType: value => dispatch(Actions.updateBatchWindowType(value))
});

// Styles
const contentStyle = {
    paddingTop: 20,
    paddingLeft: 20,
    paddingRight: 20,
    paddingBottom: 20,
    backgroundColor: Colors.neutralTertiaryAlt,
    display: 'flex',
    flexDirection: 'column',
    overflowX: 'hidden',
    overflowY: 'hidden',
    flex: 1
};

const tabContainerStyle = {
    display: 'flex',
    flexDirection: 'column',
    overflowX: 'hidden',
    overflowY: 'hidden',
    flex: 1
};

const modelHeaderStyle = {

paddingTop: 30,
    paddingBottom: 30,
    flex: 1,
    display: 'flex',
    flexDirection: 'column'
};

const filterContainerStyle = {
    paddingBottom: 15,
    display: 'flex',
    flexDirection: 'row'
};

const detailsContainerStyle = {
    backgroundColor: Colors.white,
    border: `1px solid ${Colors.neutralTertiaryAlt}`,
    flex: 1,
    overflowY: 'auto'
};

const buttonStyle = {
    paddingLeft: 10
};

export default withRouter(
    connect(
        mapStateToProps,
        mapDispatchToProps
    )(SparkJobs)
);

const itemContainerStyle = {
    transform: 'rotate(90deg) translateX(39px)',
    transformOrigin: '39px 0 0',
    height: 39,
    display: 'flex'
};

const itemStyle = {
    backgroundColor: Colors.customBlueDarker,
    color: Colors.white,
    fontSize: 15,
    paddingTop: 9,
    paddingBottom: 9,
    minWidth: 180,
    textAlign: 'center',
    borderRight: `3px solid ${Colors.neutralTertiaryAlt}`,
    cursor: 'pointer',
    whiteSpace: 'nowrap',
    ':hover': {
        backgroundColor: Colors.customYellow,
        color: Colors.neutralPrimary,
        fontWeight: 600
    }
};

const contentStyle = {
    display: 'flex',
    flexDirection: 'row',
    overflowY: 'hidden',
    flex: 1
};

const panelHeaderButtonStyle = {
    backgroundColor: Colors.neutralLighter
};

const leftPaneStyle = {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    borderRight: `1px solid ${Colors.neutralTertiaryAlt}`
};

const leftPaneContentStyle = {
    paddingLeft: 30,
    paddingRight: 30,
    paddingTop: 30,
    paddingBottom: 30,
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    overflowY: 'hidden'
};

const rightPaneStyle = {
    flex: 3,
    display: 'flex',

};

const leftPaneStyle = {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    borderRight: `1px solid ${Colors.neutralTertiaryAlt}`
};

const leftPaneSectionStyle = {
    paddingLeft: 30,
    paddingRight: 30
};

const dividerStyle = {
    borderBottom: `1px solid ${Colors.neutralTertiaryAlt}`,
    marginTop: 15,
    marginBottom: 15
};

const rightPaneStyle = {
    flex: 3,
    display: 'flex',
    flexDirection: 'column',
    paddingBottom: 30
};

const rightPaneTopContentStyle = {
    flex: 3,
    paddingLeft: 30,
    paddingRight: 30,
    paddingTop: 20,

paddingBottom: 30,
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    overflowY: 'hidden'
};

const rightPaneStyle = {
    flex: 3,
    display: 'flex',
    flexDirection: 'column'
};

const listContainerStyle = {
    backgroundColor: Colors.white,
    border: `1px solid ${Colors.neutralTertiaryAlt}`,
    flex: 1,
    overflowY: 'auto'
};

const sinkTypeSection = {
    paddingBottom: 40
};

const sectionStyle = {
    paddingBottom: 15
};

const statementBoxSectionStyle = {
    paddingTop: 12,
    paddingBottom: 30
};

const statementBoxStyle = {
    border: `1px solid ${Colors.neutralTertiaryAlt}`,
    backgroundColor: Colors.white
};

const linkStyle = {
    fontSize: 14,
    lineHeight: '29px',
    color: Colors.themePrimary
};

const contentStyle = {
    display: 'flex',
    flexDirection: 'row',
    overflowY: 'hidden',
    flex: 1
};

const panelHeaderButtonStyle = {
    backgroundColor: Colors.neutralLighter
};

const leftPaneStyle = {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    borderRight: `1px solid ${Colors.neutralTertiaryAlt}`
};

const leftPaneContentStyle = {
    paddingLeft: 30,
    paddingRight: 30,
    paddingTop: 30,
    paddingBottom: 30,
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    overflowY: 'hidden'
};

const rightPaneStyle = {
    flex: 3,
    display: 'flex',