How to use the polished.size function in polished

marginLeft: 'auto',
  [breakpoints.md]: {
    marginTop: 8
  }
});

const SocialLink = styled.a({
  color: colors.text2,
  ':hover': {
    color: colors.text3
  },
  ':not(:last-child)': {
    marginRight: 24
  },
  svg: {
    ...size(24),
    display: 'block',
    fill: 'currentColor'
  }
});

export default function DocsetSwitcher(props) {
  const menuRef = useRef(null);
  const {width} = useWindowSize();
  useKey('Escape', props.onClose);

  useEffect(() => {
    if (props.open) {
      // focus the menu after it has been transitioned in
      setTimeout(() => {
        menuRef.current.focus();
      }, transitionDuration);

    ${({ iconSize }) => iconSize && size(iconSize)}
  }

const circleStyles = ({ circle }) =>
  circle &&
  css`
    display: flex;
    align-items: center;
    justify-content: center;
    ${size(24)};
  `;

const knobBaseStyles = ({ theme }) => css`
  label: toggle__switch-knob;
  display: block;
  background-color: ${theme.colors.n100};
  box-shadow: ${knobShadow(theme.colors.n500)};
  position: absolute;
  top: 50%;
  transform: translate3d(${theme.spacings.bit}, -50%, 0);
  transition: box-shadow ${ANIMATION_TIMING}, transform ${ANIMATION_TIMING};
  ${size(KNOB_SIZE)};
  border-radius: ${KNOB_SIZE}px;
`;

import { storiesOf } from '@storybook/react';
import { margin, size } from 'polished';
import React, { DetailedHTMLProps, HTMLAttributes } from 'react';
import { StyledComponentClass, withTheme } from 'styled-components';

import styled from 'src/styled-components';
import Theme, { monospace } from 'src/Theme';
import Typography from 'src/Typography';

const Color = styled.div`
  background: ${props => props.color};
  border: 0.0625em solid ${props => props.theme.text};
  ${size('1.5625em')};
  ${margin('0.3125em', '0.625em')};
  border-radius: 50%;
`;

const Code = styled(Typography)`
  font-family: ${monospace};
` as StyledComponentClass<
  DetailedHTMLProps, HTMLElement>,
  Theme
>;

Code.defaultProps = { as: 'code' };

const VerticallyCentered = styled.div`
  display: flex;
  align-items: center;

box-sizing: border-box;
    box-shadow: inset 0 1px 2px 0 rgba(102, 113, 123, 0.12);
    background-color: ${theme.colors.white};
    border: 1px solid ${theme.colors.n500};
    border-radius: 3px;
    content: '';
    display: block;
    position: absolute;
    top: ${theme.spacings.kilo};
    left: 0;
    transform: translateY(-50%);
    transition: border 0.05s ease-in, background-color 0.05s ease-in;
  }

  svg {
    ${size(10)};
    box-sizing: border-box;
    fill: ${theme.colors.p500};
    display: block;
    left: 3px;
    line-height: 0;
    opacity: 0;
    position: absolute;
    top: ${theme.spacings.kilo};
    transform: translateY(-50%) scale(0, 0);
    transition: transform 0.05s ease-in, opacity 0.05s ease-in;
  }
`;

box-shadow: inset 0 1px 2px 0 rgba(102, 113, 123, 0.12);
    background-color: ${theme.colors.white};
    border: 1px solid ${theme.colors.n500};
    border-radius: 100%;
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: border 0.05s ease-in;
  }

  &::after {
    box-sizing: border-box;
    ${size(theme.spacings.byte)};
    background-color: ${theme.colors.p500};
    border-radius: 100%;
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: ${theme.spacings.bit};
    transform: translateY(-50%) scale(0, 0);
    opacity: 0;
    transition: transform 0.05s ease-in, opacity 0.05s ease-in;
  }
`;

backgroundPosition: 'center',
});

const svgClassName = css({
  display: 'block',
  fill: 'currentColor',
});

const Header = styled('header')(svgClassName, {
  width: '100%',
  marginBottom: unit * 5,
  padding: unit * 2.5,
  position: 'relative',
});

const StyledLogo = styled(Logo)(size(56), {
  display: 'block',
  margin: '0 auto',
  position: 'relative',
});

const StyledCurve = styled(Curve)(size('100%'), {
  fill: colors.primary,
  position: 'absolute',
  top: 0,
  left: 0,
});

const Heading = styled('h1')({
  margin: `${unit * 3}px 0 ${unit * 6}px`,
});

import React from 'react';
import styled from '@emotion/styled';
import {IconMenu} from '@apollo/space-kit/icons/IconMenu';
import {size} from 'polished';

const StyledButton = styled.button({
  padding: 0,
  marginRight: 20,
  color: 'inherit',
  border: 'none',
  background: 'none',
  outline: 'none',
  cursor: 'pointer'
});

const StyledIcon = styled(IconMenu)(size(24), {
  display: 'block',
  fill: 'currentColor'
});

export default function MenuButton(props) {
  return (
    
      
    
  );
}

MenuButton.propTypes = {
  onClick: PropTypes.func.isRequired
};

${({ size: sizeProp }) =>
    sizeProp
      ? size(sizeProp)
      : css`
          width: 30px;
          height: 30px;
        `}