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

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

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

const navLink = {
  fontSize: 14,
  textDecoration: 'none',
}

export default {
  container: {
    width: '100%',
    height: '100%',
    boxSizing: 'border-box',
    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,
  },

Secondary
      
        
        
        
        
        
      
      Grayscale
      
        
        
        
        
        
        
        
      
    
  )
}

groups[group].map(icon => (
                <div style="{{">
                  </div>

display: 'flex',
}

export const preview = {
  ...spacing.MARGIN_RIGHT_SM,
  width: 0,
  flex: '1 0 0',
}

export const editor = {
  ...spacing.PADDING_SM,
  width: 0,
  margin: 0,
  flex: '1 0 0',
  overflow: 'scroll',
  backgroundColor: colors.GRAY_97,
  borderRadius: 5,
}