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

render() {
        const height = Math.max(this.props.height, 0) + DRAG_HANDLE_HEIGHT;

        const rootStyle = Object.assign(
            {
                height,
                top: HEADERBAR_HEIGHT,
                backgroundColor: this.props.editMode
                    ? colors.yellow050
                    : colors.white,
                paddingBottom: DRAG_HANDLE_HEIGHT,
            },
            // Disable animations while dragging
            this.state.dragging ? { transition: 'none' } : {}
        );

        return (
            <div style="{rootStyle}">
                <div>{this.props.children}</div>
                {this.renderDragHandle()}
            </div>
        );
    }
}

chip: {
        margin: '3px',
    },
    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,

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import i18n from '@dhis2/d2-i18n';

import { colors } from '@dhis2/ui-core';

const styles = {
    badgeContainer: {
        margin: '2px',
        padding: '0 16px',
        borderRadius: '4px',
        color: colors.white,
        backgroundColor: '#212934',
        height: 36,
        display: 'flex',
        alignItems: 'center',
    },
    badge: {
        fontSize: '13px',
        cursor: 'pointer',
        whiteSpace: 'nowrap',
    },
    badgeRemove: {
        fontSize: '12px',
        textDecoration: 'underline',
        marginLeft: '24px',
        cursor: 'pointer',
    },