Style utilities

Usage example

const Demo = styled.div`
  font-size: ${getTextSize('xl')};
  padding: ${getSpace('xl')};
  width: ${getDimension('240px')};
  color: ${getColor('success')};
  border-radius: ${getRadius('m')};

  ${getResponsiveSpace('margin', {
    default: 'm',
    '@media (min-width: 700px)': 'l',
    '@media (min-width: 1200px)': 'xl',
  })};
`;

getTextSize

One of text sizes

getTextSize('xl');

getWeight

One of weights

getWeight('medium');

getSpace

One of spaces | string | number

getSpace('xl');
getSpace('40px');
getSpace(5); // 5 * 8px

getDimension

string | number

getDimension('240px');
getDimension(30); // 30 * 8px

getColor

One of colors

getColor('success');

getRadius

One of radii

getRadius('m');

getShadow

One of shadows

getShadow('m');

getTransition

One of transitions

getTransition('fast');

getResponsiveSpace

Takes 2 arguments:

• a CSS space property, like margin or padding
• media queries and values object, same value types as getSpace

getResponsiveSpace('padding', {
  default: 'm',
  '@media (min-width: 700px)': 3,
  '@media (min-width: 1200px)': '40px',
});

getResponsiveDimension

Takes 2 arguments:

• a CSS dimention property, like width or height
• media queries and values object, same value types as getDimension

getResponsiveDimension('width', {
  default: '100%',
  '@media (min-width: 700px)': '240px',
  '@media (min-width: 1200px)': 40,
});

getResponsiveTextSize

Takes media queries and text size values object, same value types as getTextSize

getResponsiveTextSize({
  default: 'l',
  '@media (min-width: 700px)': 'xl',
  '@media (min-width: 1200px)': 'xxl',
});

getResponsiveOneOf

Takes 2 arguments:

• any CSS property
• media queries and values object with any CSS value

getResponsiveOneOf('align-items', {
  default: 'start',
  '@media (min-width: 700px)': 'center',
  '@media (min-width: 1200px)': 'end',
});