Mixins & Methods
===

### UI Tokens

This **`get()`** method is the easiest way to use our design tokens in your SCSS. Just pass in a token key and it will return the token from our SCSS variable map:
```scss
.link {
  color: get(color 'blue'); // COMPILED-> color: #118CFD;
}
```

#### Whitelabeling

You can use CSS variables to enable end-user theming:

```scss
.highlight {
  color: var(--some-user-var, #{get(color, 'slate')});
}
```

### Modular Scale

The UI is [designed on a scale](https://www.modularscale.com/?14&px&1.2) to create visual harmony and rhythm throughout our layouts. Use the **`ms()`** method in your SCSS to generate scale-based values for margins, font sizes, and so on:
```scss
.MyElement {
  &-headline {
    font-size: ms(5);
    font-weight: bold;
  }
  &-byline {
    padding: ms(3) 0;
    font-size: ms(-1);
  }
}
```

The base proportions of our are scale are as follows:
- **Root**: `1rem` (this assumes the default `14px` base font-size.)
- **Ratio**: `5:6` (the slope at which our scale values increment.)
- **Rhythm**: `2` (the root line-height, essentially.)