How to use the ic-snacks.colors.GREEN_500 function in ic-snacks

export const iconHover = {
  background: colors.GRAY_93,
}

export const navGroupTitle = {
  fontSize: 14,
  fontWeight: 600,
  color: colors.GRAY_20,
  width: '100%',
  display: 'inline-block',
  textTransform: 'uppercase',

}

export const navGroupTitleHover = {
  color: colors.GREEN_500,
}

export default function Colors() {
  return (
    
      Colors
      We have two main color palettes - a UI color palette (primary and
      secondary colors) and an illustration color palette that has some expanded
      colors for selective use.
      Primary
      
        
        
        
        
        
      
      Secondary
      
        
        
        
        
        
      
      Grayscale

export default function Colors() {
  return (
    
      Colors
      
        We have two main color palettes - a UI color palette (primary and
        secondary colors) and an illustration color palette that has some
        expanded colors for selective use.
      
      Primary
      <div style="{group}">
        
        
        
        
        
      </div>
      Secondary
      <div style="{group}">
        
        
        
        
        
      </div>
      Grayscale
      <div style="{group}">
        
        
        </div>

width: '100%',
    cursor: 'pointer',

    ':hover': {}
  },
  navGroupTitle: {
    fontSize: 14,
    fontWeight: 600,
    color: colors.GRAY_20,
    width: '100%',
    display: 'inline-block',
    textTransform: 'uppercase',

  },
  navGroupTitleHover: {
    color: colors.GREEN_500,
  },
  navGroupIcon: {
    color: colors.GRAY_74,
    padding: 4,
    borderRadius: 3,
    transition: 'transform 150ms',
  },
  navGroupIconOpen: {
    transform: 'rotate(-180deg)',
  },
  navGroupIconHover: {
    background: colors.GRAY_93,
  },
  navGroupLinks: {
    ...spacing.PADDING_LEFT_SM,
  },

groups[group].map(icon => (
                <div style="{{">
                  </div>}
                  &gt;
                    {icon}
                  
                
              ))
            }

...spacing.PADDING_LEFT_SM,
  },
  navLinkRow: {
    height: 40,
    lineHeight: '40px',
    width: '100%',
  },
  navLinkInactive: {
    ...navLink,
    color: '#424242',
  },
  navLinkText: {
    display: 'inline-block',
    width: '100%',
    ':hover': {
      color: colors.GREEN_500,
    },
  }
}