basekick.js

/**
 * This code was adapted from the excellent Braid Design System
 * by SEEK OSS, you can find their original code code here 
 * https://github.com/seek-oss/braid-design-system/blob/master/lib/hooks/typography/basekick.ts
 * 
 * They're doing some really amazing stuff and I got to copy them here,
 * you should definitely check them out.
 */


/**
 * Make web typography great again*
 * 
 * *for the first time
 *
 * @param   {number}  typeSizeModifier - The multiplier for the font size
 * @param   {number}  baseFontSize - The base size of the font
 * @param   {number}  descenderHeightScale - The height of the descender expressed as a ratio of the font
 * @param   {number}  typeRowSpan - How many rows should the type span
 * @param   {number}  gridRowHeight - The height of each row
 * @param   {number}  capHeight - The font's cap height expressed as a ratio of the font
 * @return  {object} - PostCSS style object for the postcss-mixins plugin
 */
function jsBasekick(typeSizeModifier, baseFontSize, descenderHeightScale, typeRowSpan, gridRowHeight, capHeight) {
  const fontSize = typeSizeModifier * baseFontSize;

  const calculateTypeOffset = lh => {
    const lineHeightScale = lh / fontSize;
    return (lineHeightScale - 1) / 2 + descenderHeightScale;
  };

  const lineHeight = typeRowSpan * gridRowHeight;
  const typeOffset = calculateTypeOffset(lineHeight);

  const topSpace = lineHeight - capHeight * fontSize;
  const heightCorrection = topSpace > gridRowHeight ? topSpace - (topSpace % gridRowHeight) : 0;

  const preventCollapse = 1;

  return {
    'font-size': `${fontSize}px`,
    'line-height': `${lineHeight}px`,
    transform: `translateY(${typeOffset}em)`,
    'padding-top': preventCollapse,
    '&::before': {
    content: '""',
    'margin-top': -(heightCorrection + preventCollapse),
    display: 'block',
    height: 0
    }
  };
}