## Responsive styles

**IMPORTANT** the default api relies on a single base font size. for multiple font sizes see advanced.

This is based on [facepaint](https://github.com/emotion-js/facepaint) and uses facepaint under the hood.

### api

```code
// takes an object and "replaces"* all array properties with string
// (* does not do this, but tells the consumer this to enable css typing)
export type ResponsiveTokens<Tokens> = {
  [TokenKey in keyof Tokens]: Tokens[TokenKey] extends Array<string | number>
    ? string
    : ResponsiveTokens<Tokens[TokenKey]>;
}

/** helper to create css shorthand properties from the responsive scale tokens */
export type Shorthand = (value: ScaleCssShorthand) => string;

interface ResponsiveStyles {
  (
    options: {
      mediaQueries: string[];
      tokens: Tokens;
    },
  ): (scaledProperties: (
    tokens: ResponsiveTokens<Tokens>,
    helpers: { shorthand: Shorthand }
  ): Styles;
}
```

### example usage

```code
import { responsiveStyles } from 'responsive-styles';
import styled from 'styled-components';

const scaleProperties = responsiveStyles({
  mediaQueries: ['@media(min-width: 731px)', '@media(min-width: 1695px)'],
  tokens: {
    spacing: {
      // in practice these should be rem values based off the base font size
      moon: [4, 6, 10],
      mars: [8, 13, 20],
      earth: [16, 26, 41],
      saturn: [32, 52, 82],
      sun: [66, 106, 180],
    },
  },
});

const StyledSpan = css`
  ${scaleProperties((scale, { shorthand }) => ({
    padding: shorthand([scale.spacing.moon, scale.spacing.earth]),
    margin: scale.spacing.earth,
    '& div': {
      padding: scale.spacing.saturn,
      margin: scale.spacing.sun,
    },
  }))};
`;
```

generates

```code
padding:  4 16;
margin: 16;
@media(min-width: 731px) {
  padding:  6 26;
  margin: 26;
}
@media(min-width: 1695px) {
  padding:  10 41;
  margin: 41;
}
& div {
  padding: 32;
  margin: 66;
  @media(min-width: 731px) {
    padding: 52;
    margin: 106;
  }
  @media(min-width: 1695px) {
    padding: 82;
    margin: 180;
  }
}
```
