Fluid-type typography and spacing (border, margin, padding) for `styled-components`.

lines.js

export const lines = {
  h: '1.8em',
  l: '1.6em',
  m: '1.4em',
  s: '1.2em',
  x: '1',
  n: '0',
}

export const _line = lines;

setFluid.js

// via https://www.sassmeister.com/gist/7f22e44ace49b5124eec

const getFluidStyles = (property, minValue, maxValue) => {
  const screen = { min: 320, max: 1440 };
  const minVal = parseInt(minValue, 10);
  const maxVal = parseInt(maxValue, 10);
  return `
    ${property}: ${minValue};
    @media screen and (min-width: ${screen.min}px) {
      ${property}: calc(${minValue} + ${maxVal - minVal} * (100vw - ${screen.min}px) / ${screen.max - screen.min});
    }
    @media screen and (min-width: ${screen.max}px) {
      ${property}: ${maxValue};
    }
  `
}

const _setFluid = (properties, minValue, maxValue) => {
  if (Array.isArray(properties)) {
    return properties.map(property => getFluidStyles(property, minValue, maxValue));
  } else {
    return getFluidStyles(properties, minValue, maxValue);
  }
}

export default _setFluid

setType.js

import _setFluid from './setFluid.js'
import _line from './lines.js'
import _size from './sizes.js'

export const _setType = size => {
  switch(size) {
    case 'h':
      return _setFluid('font-size', _size.h[0], _size.h[1]) + `line-height: ${_line.s}`
      break
    case 'l':
      return _setFluid('font-size', _size.l[0], _size.l[1]) + `line-height: ${_line.m}`
      break
    case 's':
      return _setFluid('font-size', _size.s[0], _size.s[1]) + `line-height: ${_line.m}`
      break
    case 'x':
      return _setFluid('font-size', _size.x[0], _size.x[1]) + `line-height: ${_line.x}`
      break
    case 'm':
    default:
      return _setFluid('font-size', _size.m[0], _size.m[1]) + `line-height: ${_line.h}`
  }
}

sizes.js

export const sizes = {
  h: ['26px', '76px'],
  l: ['22px', '50px'],
  m: ['15px', '20px'],
  s: ['13px', '17px'],
  x: ['11px', '14px'],
}

export const _size = sizes