How to use the styled-components.css function in styled-components

var borderStyle = function borderStyle(data, responsive, theme) {
  var styles = [];
  var color = colorForName(data.color || 'border', theme);
  var borderSize = data.size || 'xsmall';
  var side = typeof data === 'string' ? data : data.side || 'all';
  var value = 'solid ' + theme.global.borderSize[borderSize] + ' ' + color;
  var narrowValue = 'solid ' + theme.global.borderSize.narrow[borderSize] + ' ' + color;
  if (side === 'top' || side === 'bottom' || side === 'left' || side === 'right') {
    styles.push(css(['border-', ':', ';'], side, value));
    if (responsive) {
      styles.push(palm('border-' + side + ': ' + narrowValue + ';'));
    }
  } else if (side === 'vertical') {
    styles.push(css(['border-left:', ';border-right:', ';'], value, value));
    if (responsive) {
      styles.push(palm('\n        border-left: ' + narrowValue + ';\n        border-right: ' + narrowValue + ';\n      '));
    }
  } else if (side === 'horizontal') {
    styles.push(css(['border-top:', ';border-bottom:', ';'], value, value));
    if (responsive) {
      styles.push(palm('\n        border-top: ' + narrowValue + ';\n        border-bottom: ' + narrowValue + ';\n      '));
    }
  } else {
    styles.push(css(['border:', ';'], value));
    if (responsive) {

}, function (props) {
    return props.hasBoxShadow && css(_templateObject10, function (props) {
      return props.primary ? returnBoxShadow(props.theme.primary.main, 0.46) : props.secondary ? returnBoxShadow(props.theme.secondary.main, 0.46) : props.backgroundColor ? returnBoxShadow(props.backgroundColor, 0.46) : "0 .4rem 1.8rem 0 rgba(0,0,0,0.12), 0 .7rem 1rem -.5rem rgba(0,0,0,0.15)";
    });
  });
}, StyledNavBarRes, function (props) {

}, function (props) {
  return props.height && css(_templateObject3$4, props.height, Bar, props.height);
});

between: 'space-between',
  center: 'center',
  end: 'flex-end',
  start: 'flex-start',
  stretch: 'stretch'
};
var alignContentStyle = css(["align-content:", ";"], function (props) {
  return ALIGN_CONTENT_MAP[props.alignContent];
});
var JUSTIFY_MAP = {
  center: 'center',
  end: 'flex-end',
  start: 'flex-start',
  stretch: 'stretch'
};
var justifyStyle = css(["justify-items:", ";"], function (props) {
  return JUSTIFY_MAP[props.justify];
});
var JUSTIFY_CONTENT_MAP = {
  around: 'space-around',
  between: 'space-between',
  center: 'center',
  end: 'flex-end',
  start: 'flex-start',
  stretch: 'stretch'
};
var justifyContentStyle = css(["justify-content:", ";"], function (props) {
  return JUSTIFY_CONTENT_MAP[props.justifyContent];
});

var gapStyle = function gapStyle(props) {
  if (typeof props.gap === 'string') {

Object.keys(statusColors).forEach(function (color) {
  colors['status-' + color] = statusColors[color];
});

export default deepFreeze({
  global: {
    colors: colors,
    control: {
      color: brandColor
    },
    drop: {
      background: '#333333'
    },
    focus: {
      border: {
        color: css(['', ''], function (props) {
          return colorForName('focus', props.theme);
        }),
        width: '2px'
      }
    },
    font: {
      family: 'Arial'
    },
    input: {
      weight: 700
    },
    text: {
      dark: textColor,
      light: '#000000'
    }
  },

button: {
    border: {
      color: css(['', ''], function (props) {
        return props.theme.global.colors.brand;
      }),
      width: borderWidth + 'px',
      radius: '5px'
    },
    colors: {
      accent: css(['', ''], function (props) {
        return colorForName('accent-1', props.theme);
      }),
      critical: css(['', ''], function (props) {
        return props.theme.global.colors.status.critical;
      }),
      secondary: css(['', ''], function (props) {
        return colorForName('neutral-2', props.theme);
      }),
      text: css(['', ''], function (props) {
        return props.theme.global.colors.text;
      })
    },
    minWidth: baseSpacing * 4 + 'px',
    maxWidth: baseSpacing * 16 + 'px',
    padding: {
      vertical: baseSpacing / 2 - borderWidth + 'px',
      horizontal: baseSpacing / 2 - borderWidth + 'px'
    }
  },
  calendar: {
    small: {
      fontSize: '16px',

var borderStyle = function borderStyle(data, responsive, theme) {
  var styles = [];
  var color = colorForName(data.color || (theme.dark ? 'border-dark' : 'border-light'), theme);
  var borderSize = data.size || 'xsmall';
  var side = typeof data === 'string' ? data : data.side || 'all';
  var value = 'solid ' + theme.global.borderSize[borderSize] + ' ' + color;
  var narrowValue = 'solid ' + theme.global.borderSize.narrow[borderSize] + ' ' + color;
  if (side === 'top' || side === 'bottom' || side === 'left' || side === 'right') {
    styles.push(css(['border-', ':', ';'], side, value));
    if (responsive) {
      styles.push(palm('border-' + side + ': ' + narrowValue + ';'));
    }
  } else if (side === 'vertical') {
    styles.push(css(['border-left:', ';border-right:', ';'], value, value));
    if (responsive) {
      styles.push(palm('\n        border-left: ' + narrowValue + ';\n        border-right: ' + narrowValue + ';\n      '));
    }
  } else if (side === 'horizontal') {
    styles.push(css(['border-top:', ';border-bottom:', ';'], value, value));
    if (responsive) {
      styles.push(palm('\n        border-top: ' + narrowValue + ';\n        border-bottom: ' + narrowValue + ';\n      '));
    }
  } else {
    styles.push(css(['border:', ';'], value));
    if (responsive) {

function getHoverIndicatorStyle(hoverIndicator, theme) {
  var background = void 0;
  if (hoverIndicator === true || hoverIndicator === 'background') {
    background = theme.global.hover.background;
  } else {
    background = hoverIndicator;
  }
  return css(['', ' color:', ';'], backgroundStyle(background, theme), normalizeColor(theme.global.hover.color, theme));
}

}, function (props) {
  return props.textarea && css(_templateObject8, function (props) {
    return props.autosize && "hidden";
  });
}, function (props) {
  return props.icon && css(_templateObject9, function (props) {

start: 'flex-start',
  stretch: 'stretch'
};

var alignContentStyle = css(['align-content:', ';'], function (props) {
  return ALIGN_CONTENT_MAP[props.alignContent];
});

var JUSTIFY_MAP = {
  center: 'center',
  end: 'flex-end',
  start: 'flex-start',
  stretch: 'stretch'
};

var justifyStyle = css(['justify-items:', ';'], function (props) {
  return JUSTIFY_MAP[props.justify];
});

var JUSTIFY_CONTENT_MAP = {
  around: 'space-around',
  between: 'space-between',
  center: 'center',
  end: 'flex-end',
  start: 'flex-start',
  stretch: 'stretch'
};

var justifyContentStyle = css(['justify-content:', ';'], function (props) {
  return JUSTIFY_CONTENT_MAP[props.justifyContent];
});