## Scale Properties

This method is provided to simplify using the scale metrics used in design for typography and spacing across viewports.

### API

```code
type scaleProperties = (
  applyResponsiveStyles: (
    tokens: Tokens,
    helpers: { shorthand: Shorthand }
  ) => Styles
) => Styles

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

#### Usage

```code
export const StyledSpan = styled.span`
  ${scaleProperties((tokens, helpers) => ({
    padding: tokens.spacing.earth,
    margin: helpers.shorthand([tokens.spacing.earth, tokens.spacing.mars])
  }))}
`;
```

By default the `tokens` are setup to use rems based on the Bulb scale metrics. To customise this behaviour see the [Usage](#Usage) section below.

##### tokens

Tokens is a typed object with two keys for our `type` and `space` scales, these each have properties for the scales steps. ie. `tokens.type.mouse` and `tokens.space.saturn`.

When used as css property values the scaleProperties method will create scoped media queries based on the Bulb viewports and scales (which can be overriden by the [setProductMediaQueries](#setProductMediaQueries) method).

ie.

```code
export const StyledSpan = styled.span`
  ${scaleProperties(({spacing}) => ({
    padding: spacing.earth,
  }))}
`;
```

will produce

```code
padding: 1rem;
@media(min-width: 731px) {
  padding: 1.3rem;
}
@media(min-width: 1695px) {
  padding: 1.5769230769230769rem;
}
```

##### helpers

###### shorthand

The shorthand helper enables setting responsive shorthand css properties, it takes an array of tokens at any of the css shorthand lengths.

ie.

```code
export const StyledSpan = styled.span`
  ${scaleProperties((tokens, {shorthand}) => ({
    margin: shorthand([tokens.spacing.earth, tokens.spacing.mars])
  }))}
`;
```

will produce

```code
margin:  1rem 0.5rem;
@media(min-width: 731px) {
  margin: 1.3rem 0.65rem;
}
@media(min-width: 1695px) {
  margin: 1.5769230769230769rem 0.7692307692307693rem;
}
```

```code
export type ScaleCssShorthand =
  | [string, string]
  | [string, string, string]
  | [string, string, string, string];

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