How to use the grommet/utils.normalizeColor function in grommet

//                      ||
//                    \\||//
//                     \\//
//                 ____________
//
export const DropzoneIcon = () => (
  
    
);
const DropzoneIconStyled = styled.svg`
  fill: ${normalizeColor('light-5', theme)};
  width: 4rem;
  height: 4rem;
`;

dropzoneDragText: {
    defaultMessage: 'or drop it here',
    description: `File upload dropzone: helptext on the dropzone,
      goes along with the button (components.UploadForm.dropzoneButtonPick)`,
    id: 'components.UploadForm.dropzoneDragText',
  },
});

const DropzonePlaceholderStyled = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex-grow: 1;
  align-items: center;
  background-color: ${normalizeColor('light-1', theme)};
  padding-top: 2rem;
  padding-bottom: 1rem;
`;

// Align the helptext vertically exactly with the button
const DropzoneHelpText = styled.span`
  padding: 0.375rem 0.75rem 0.375rem 0.375rem;
  display: inline-block;
  border: 1px solid transparent;
  vertical-align: middle;
`;

// Make sure the dashbox background does not overlay the interactive UI
const DropzoneTextBox = styled(Box)`
  z-index: 1;
`;

border: 1px solid transparent;
  vertical-align: middle;
`;

// Make sure the dashbox background does not overlay the interactive UI
const DropzoneTextBox = styled(Box)`
  z-index: 1;
`;

const DropzoneDashBox = styled.div`
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  left: 0.5rem;
  border: 3px dashed ${normalizeColor('light-5', theme)};
  border-radius: 0.375rem;
`;

export const DropzonePlaceholder = () => (
  
    
    
    
      <button label="{<FormattedMessage" color="{'brand'}">}
        primary={true}
      /&gt;
      
        </button>

${props => props.resizing && `
    opacity: 1;
    background-color: ${normalizeColor('brand', props.theme)};
    height: calc(100% - 4px);
    top: 2px;
  `}
`;

defaultMessage: 'There was an error during track creation.',
    description:
      'Generic error message when we fail to create a subtitle/transcript/caption track.',
    id: 'components.TimedTextCreationForm.error',
  },
});

const TimedTextCreationFormStyled = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
`;

const ErrorMessage = styled.div`
  color: ${normalizeColor('status-error', theme)};
`;

interface SelectOption {
  label: string;
  value: string;
}

/** Props shape for the TimedTextCreationForm component. */
interface TimedTextCreationFormProps {
  excludedLanguages: string[];
  mode: timedTextMode;
}

const isSelectOption = (
  option: ValueType,
): option is SelectOption => (option as SelectOption).value !== undefined;

  color: ${({ color }: Props) => normalizeColor(color, theme)};

extend: props => {
      const { theme: { global: { colors } }, completeness } = props
      const color = normalizeColor(colors['neutral-4'], props.theme)
      const secondaryColor = getGradientShade(color)
      const percentComplete = `${completeness}%`
      const progressGradient = [
        `${colors['accent-4']} ${percentComplete}`,
        `transparent ${percentComplete}`
      ].join(',')

      return `
        background: ${color};
        box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
        position: relative;
        text-align: left;
        transition-property: color, border-color, box-shadow;
        > div {
          justify-content: space-between;
        }

extend: function extend(_ref) {
        var theme = _ref.theme,
            checked = _ref.checked;
        return "\n        " + (checked && "background-color: " + normalizeColor('neutral-1', theme) + ";") + "\n        ";
      }
    },

import { normalizeColor } from 'grommet/utils';
import React from 'react';
import styled from 'styled-components';

import { theme } from '../../utils/theme/theme';

const LoaderStyled = styled.div`
  border: 0.125rem solid transparent;
  border-left-color: ${normalizeColor('brand', theme)};
  border-top-color: ${normalizeColor('brand', theme)};
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: baseline;

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }

{colors.map((color) => {
        const colorValue = normalizeColor(color, theme);
        return (
          
            
              {color}
            
            
              
                
                  
                  
                
              
            
          
        );
      })