How to use the @dhis2/ui-core.colors.grey700 function in @dhis2/ui-core

import ClearButton from './ClearButton';
import { DEFAULT_STATE_DASHBOARDS_FILTER_NAME } from '../../reducers/dashboardsFilter';

export const KEYCODE_ENTER = 13;
export const KEYCODE_ESCAPE = 27;

const styles = {
    filterField: {
        fontSize: '14px',
        width: '200px',
        height: '30px',
        top: '-4px',
    },
    searchIcon: {
        color: colors.grey700,
        width: '20px',
        height: '20px',
    },
};

export class Filter extends Component {
    constructor(props) {
        super(props);

        this.state = {
            value: DEFAULT_STATE_DASHBOARDS_FILTER_NAME,
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({

link: {
        color: colors.grey600,
        display: 'inline-block',
        textDecoration: 'none',
        verticalAlign: 'top',
    },
    icon: {
        height: '20px',
        marginTop: '2px',
        width: '20px',
    },
    selected: {
        fill: colors.white,
    },
    unselected: {
        fill: colors.grey700,
    },
};

export const DashboardItemChip = ({
    starred,
    selected,
    label,
    dashboardId,
    classes,
}) => {
    const chipProps = {
        selected,
        className: classes.chip,
    };

    if (starred) {

import React from 'react';
import PropTypes from 'prop-types';
import i18n from '@dhis2/d2-i18n';
import { colors } from '@dhis2/ui-core';
import { withStyles } from '@material-ui/core/styles';

export const SHOWMORE_BAR_HEIGHT = 16;

const styles = {
    showMore: {
        color: colors.grey700,
        cursor: 'pointer',
        fontSize: 11,
        paddingTop: 5,
        '&:hover': {
            textDecoration: 'underline',
        },
    },
    disabled: {
        paddingTop: 5,
        color: colors.grey500,
        fontSize: 11,
        cursor: 'not-allowed',
    },
};

export const ShowMoreButton = ({ onClick, isMaxHeight, classes, disabled }) => {