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

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 }) => {
    return (
        <div style="{{">
            {disabled ? (
                <div>{i18n.t('Show more')}</div>
            ) : (
                <div>
                    {isMaxHeight ? i18n.t('Show less') : i18n.t('Show more')}
                </div>
            )}
        </div>

itemTypeMap,
    CHART,
    MAP,
    REPORT_TABLE,
    EVENT_CHART,
    EVENT_REPORT,
    DOMAIN_TYPE_AGGREGATE,
} from '../../../modules/itemTypes';
import { colors, theme } from '@dhis2/ui-core';
import { isSingleValue } from '@dhis2/analytics';

const style = {
    iconBase: {
        width: '24px',
        height: '24px',
        fill: colors.grey500,
    },
    buttonBase: {
        padding: '5px 6px 3px 6px',
    },
    buttonDisabled: {
        padding: '5px 6px 3px 6px',
        opacity: 0.5,
        cursor: 'unset',
    },
    toggleFooterPadding: {
        padding: '7px 6px 1px 6px',
    },
    border: {
        borderRadius: '2px',
        border: `1px solid ${colors.grey200}`,
    },

const DescriptionIcon = ({ className }) => (
    <svg fill="{colors.grey500}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path fill="none" d="M0 0h24v24H0z"></path>
        <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"></path>
    </svg>
);