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

const style = {
    list: {
        listStyleType: 'none',
        paddingLeft: '0px',
    },
    seeAll: {
        textAlign: 'center',
        fontSize: '13px',
        marginBottom: '5px',
    },
    sender: {
        fontSize: '13px',
        lineHeight: '15px',
        margin: 0,
        color: colors.grey800,
    },
    snippet: {
        color: colors.grey800,
        fontSize: '13px',
        lineHeight: '15px',
        maxHeight: '30px',
        overflow: 'hidden',
    },
};

class MessagesItem extends Component {
    state = {
        uiLocale: '',
    };

    async componentDidMount() {

const ClearIcon = ({ className }) => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="{colors.grey800}">
        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
        <path fill="none" d="M0 0h24v24H0z"></path>
    </svg>
);

import EditTitleBar from './EditTitleBar';
import ViewTitleBar from './ViewTitleBar';

import './TitleBar.css';

const style = {
    title: {
        position: 'relative',
        fontSize: 21,
        fontWeight: 500,
        color: colors.black,
        minWidth: 50,
    },
    description: {
        fontSize: 14,
        color: colors.grey800,
    },
};

const TitleBar = ({ edit }) => {
    return (
        <div style="{{">
            {edit ? (
                
            ) : (
                
            )}</div>

listStyleType: 'none',
        paddingLeft: '0px',
    },
    seeAll: {
        textAlign: 'center',
        fontSize: '13px',
        marginBottom: '5px',
    },
    sender: {
        fontSize: '13px',
        lineHeight: '15px',
        margin: 0,
        color: colors.grey800,
    },
    snippet: {
        color: colors.grey800,
        fontSize: '13px',
        lineHeight: '15px',
        maxHeight: '30px',
        overflow: 'hidden',
    },
};

class MessagesItem extends Component {
    state = {
        uiLocale: '',
    };

    async componentDidMount() {
        const uiLocale = await this.context.d2.currentUser.userSettings.get(
            'keyUiLocale'
        );