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

import {colors, spacing} from 'ic-snacks'

const gray20 = {color: colors.GRAY_20}
const spaced = {characterSpacing: '0.3em'}

export const title1 = {
  ...gray20,
  fontSize: 60,
  fontWeight: 600,
  lineHeight: '82px',
}

export const title2 = {
  ...gray20,
  ...spacing.MARGIN_BOTTOM_LG,
  fontSize: 48,
  fontWeight: 400,
  lineHeight: '65px',
}

Secondary
      <div style="{group}">
        
        
        
        
        
      </div>
      Grayscale
      <div style="{group}">
        
        
        
        
        
        
        
      </div>
    
  )
}

backgroundColor: colors.GRAY_97,
    overflow: 'scroll',
    ...spacing.PADDING_X_LG,
    borderRight: `1px solid ${colors.GRAY_88}`,
  },
  logo: {
    ...spacing.MARGIN_TOP_LG,
    display: 'flex',
    fontSize: 24,
    fontWeight: 600,
    textDecoration: 'none',
  },
  title: {
    position: 'relative',
    top: -2,
    color: colors.GRAY_20,
  },
  carrotIcon: {
  },
  navGroupContainer: {
    display: 'flex',
    flexDirection: 'column'
  },
  navGroupTitleContainer: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: 40,
    width: '100%',
    cursor: 'pointer',

    ':hover': {}

flexDirection: 'column'
  },
  navGroupTitleContainer: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: 40,
    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)',

borderRadius: 3,
  transition: 'transform 150ms',
}

export const iconOpen = {
  transform: 'rotate(-180deg)',
}

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,
}

Secondary
      
        
        
        
        
        
      
      Grayscale
      
        
        
        
        
        
        
        
      
    
  )
}