How to use ic-snacks - 10 common examples

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

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