How to use the polished.modularScale function in polished

return Object.keys(sizes).reduce((scale, size) => {
		// Convert to rems and remove unnecessary precision
		const value = parseFloat(modularScale(sizes[size], 1, ratio));
		scale[size] = `${Math.round(value * 1000) / 1000}rem`;
		return scale;
	}, {});
};

  font-size: ${props => props.size !== undefined ? modularScale(props.size) : '24px'};
  ${space}

import styled from 'styled-components';
import { modularScale } from 'polished';

import Logo from './Logo';
import { colors } from '../style/utils';


const Header = ({ className }) => (
  <header>
    
  </header>
)

export default styled(Header)`
  border-bottom: 1px solid ${colors.grayBorder};
  padding: ${modularScale(2)};
  margin: 0px auto;
  width: 100%;
`;

const scale = value => modularScale(value, "1rem", "goldenSection");

export const fontSizeSm = thd('fontSizeSm', '1rem', s => modularScale(-1, s))
export const fontSizeLg = thd('fontSizeLg', '1rem', s => modularScale(1, s))

const ms = step => modularScale(step, `${typography.sizes.msBase}em`, typography.sizes.msName);

letter-spacing: ${polished.rem(0.3)};
  line-height: 1.5;

  @media (max-width: 600px) {
    margin-left: 0;
    margin-top: ${polished.rem(30)};
  }
`;

const StyledProjectBadge = styled(ProjectBadge)`
  height: 230px;
`;

const Title = styled.h1`
  font-weight: normal;
  font-size: ${polished.modularScale(4)};
  line-height: 1.1;
  margin: 0;
  margin-left: ${polished.rem(20)};

  @media (max-width: 600px) {
    margin-left: 0;
    margin-top: ${polished.rem(25)};
    margin-top: ${polished.rem(25)};
  }
`;

const TitleRow = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;

export const fontSizeLg = thd('fontSizeLg', '1rem', s => modularScale(1, s))

import DismissableIsland from './DismissableIsland';
import { Description, Title } from './Text';

const Warning = ({ className, error }) => (
  
    <title> Oops! 😔 </title>
    Something has gone wrong! 
    <pre>      {error}
    </pre>
   
);


export default styled(Warning)`
  padding: ${modularScale(2)};
  max-width: 700px;
  ${space}
`