typography.scss

@import "../pui-variables";

@mixin font-helper($name, $weight, $style) {
  @font-face {
    font-family: 'SourceSansPro';
    src: url("fonts/#{$name}.eot");
    src: url("fonts/#{$name}.eot?#iefix") format("embedded-opentype"),
    url("fonts/#{$name}.woff") format("woff"),
    url("fonts/#{$name}.ttf") format("truetype"),
    url("fonts/#{$name}.svg##{$name}") format("svg");
    font-weight: $weight;
    font-style: $style;
  }
}
@include font-helper('sourcesanspro-light-webfont', 200, normal);
@include font-helper('sourcesanspro-regular-webfont', 400, normal);
@include font-helper('sourcesanspro-it-webfont', 400, italic);
@include font-helper('sourcesanspro-bold-webfont', 600, normal);
@include font-helper('sourcesanspro-black-webfont', 900, normal);

/*doc
---
title: Typography
name: type
categories:
 - css_base_typography
 - css_all
---

Source Sans Pro is our font family.
It can be used with the following modifiers to achieve a variety of effects.
*/

* {
  -webkit-font-smoothing: antialiased;
}

/*doc
---
title: Alignment
name: type_alignment
parent: type
---

See the [alignment component][alignment] for classes to use for text alignment.

*/

/*doc
---
title: Sizes
name: 1_type_sizes
parent: type
---

Set font sizes using headings and modifier classes.

```html_example_table
<h1 class="title">h1.title 48px</h1>

<h1>h1 42px</h1>

<h2>h2 36px</h2>

<h3>h3 26px</h3>

<h4>h4 20px</h4>

<h5>h5 18px</h5>

<h6>h6 14px</h6>

<p>base font size 16px</p>

<p class="type-sm">small text 13px</p>

<p class="type-xs">extra small text 12px</p>
```

<div class="alert alert-info mbxl">
  <h5 class="em-high mtn">
    Separating code and visual semantics
  </h5>
  <p>
    Sometimes you may need to use a heading which has different visual and code semantics.
    You can accomplish this by combining classes with elements
    (classes take visual precedence over elements in this case).
  </p>
</div>



```html_example_table
  <h1 class="h2">I am a h1!</h1>

  <h2 class="h1">I am a h2!</h2>
```

If it's not a heading but you need similar visual treatment you can add just the class to any element.

<div class="alert alert-warning mbxl">
  <p class="em-high">
    Use headings when possible since they add semantic value.
  </p>
</div>

```html_example_table
  <div class="h2">Heading level 2 on a div</div>
```

*/

// Override the bootstrap margins to use our margin classes so we can align
// things. This is necessary because we have to keep the whitespace margins in sync with this

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  padding-top: $headings-padding;
  padding-bottom: $headings-padding;
}

h1, .h1, h2, .h2, h3, .h3 {
  margin-top: $whitespace-xl;
  margin-bottom: $whitespace-l;
}

h4, .h4, h5, .h5, h6, .h6 {
  margin-top: $whitespace-l;
  margin-bottom: $whitespace-l;
}

@media all and (max-width: $screen-sm) {
  h1, .h1, h2, .h2, h3, .h3 {
    margin-top: $whitespace-screen-sm-xl;
    margin-bottom: $whitespace-screen-sm-l;
  }

  h4, .h4, h5, .h5, h6, .h6 {
    margin-top: $whitespace-screen-sm-l;
    margin-bottom: $whitespace-screen-sm-l;
  }
}


.h1 {
  font-size: $font-size-h1 !important;
  font-weight: $font-weight-h1 !important;
}

.h2 {
  font-size: $font-size-h2 !important;
  font-weight: $font-weight-h2 !important;
}

.h3 {
  font-size: $font-size-h3 !important;
  font-weight: $font-weight-h3 !important;
}

.h4 {
  font-size: $font-size-h4 !important;
  font-weight: $font-weight-h4 !important;
}

.h5 {
  font-size: $font-size-h5 !important;
  font-weight: $font-weight-h5 !important;
}

.h6 {
  font-size: $font-size-h6 !important;
  font-weight: $font-weight-h6 !important;
}

small,
.type-sm { font-size: $font-size-small; } // bootstrap override

.type-xs,
.type-terms { font-size: $font-size-extra-small; } // bootstrap override

.title {
  font-size: $font-size-title;
}

/*doc
---
title: Emphasis Modifiers
name: type_modifiers
parent: type
---

Type emphasis modifiers can be used on any type element.

```html_example_table
<h1 class="em-high">Really Important</h1>
<p>
  I mean <span class="em-max">reeeeeeeeeeeally</span>
</p>
```

Here's a table of all the emphasis modifier classes.

```html_example_table
<h1 class="em-low">Low emphasis</h1>

<h1 class="em-default">Default emphasis</h1>

<h1 class="em-high">High emphasis</h1>

<h1 class="em-max">Maximum emphasis</h1>

<h1 class="em-alt">Emphasis alternate</h1>
```

*/

.em-low { font-weight: $font-weight-em-low !important; }
.em-default { font-weight: $font-weight-em-default !important; }
.em-high { font-weight: $font-weight-em-high !important; }
.em-max { font-weight: $font-weight-em-max !important; }
.em-alt { text-transform: uppercase !important; }

/*doc
---
title: Colors
name: type_colors
parent: type
---

You can apply color to any text with the color classes.

```html_example_table
<p class="type-brand-8">I'm a brand color!</p>
```

Here's a table of all the color classes.

<table class="styleguide">
  <tr>
    <td class="bg-neutral-11"> <p class="type-inverse">Type inverse</p> </td>
    <td class="bg-dark-2"> <p class="type-inverse">Type inverse</p> </td>
    <td> <code>.type-inverse</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-1">Type neutral 1</p> </td>
    <td class="bg-dark-2"> <p class="type-neutral-1">Type neutral 1</p> </td>
    <td> <code>.type-neutral-1</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-2">Type neutral 2</p> </td>
    <td class="bg-dark-2"> <p class="type-neutral-2">Type neutral 2</p> </td>
    <td> <code>.type-neutral-2</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-3">Type neutral 3</p> </td>
    <td class="bg-dark-2"> <p class="type-neutral-3">Type neutral 3</p> </td>
    <td> <code>.type-neutral-3</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-4">Type neutral 4</p> </td>
    <td class="bg-dark-2"> <p class="type-neutral-4">Type neutral 4</p> </td>
    <td> <code>.type-neutral-4</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-5">Type neutral 5</p> </td>
    <td class="bg-dark-2"> <p class="type-neutral-5">Type neutral 5</p> </td>
    <td> <code>.type-neutral-5</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-6">Type neutral 6</p> </td>
    <td class="bg-dark-2"> <p class="type-neutral-6">Type neutral 6</p> </td>
    <td> <code>.type-neutral-6</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-7">Type neutral 7</p> </td>
    <td class="bg-dark-2"> <p class="type-neutral-7">Type neutral 7</p> </td>
    <td> <code>.type-neutral-7</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-8">Type neutral 8</p> </td>
    <td class="bg-dark-2"> <p class="type-neutral-8">Type neutral 8</p> </td>
    <td> <code>.type-neutral-8</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-9">Type neutral 9</p> </td>
    <td class="bg-dark-2"> <p class="type-neutral-9">Type neutral 9</p> </td>
    <td> <code>.type-neutral-9</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-10">Type neutral 10</p> </td>
    <td class="bg-dark-2"> <p class="type-neutral-10">Type neutral 10</p> </td>
    <td> <code>.type-neutral-10</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-neutral-11">Type neutral 11</p> </td>
    <td class="bg-dark-2"> <p class="type-neutral-11">Type neutral 11</p> </td>
    <td> <code>.type-neutral-11</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-dark-1">Type dark 1</p> </td>
    <td class="bg-dark-2"> <p class="type-dark-1">Type dark 1</p> </td>
    <td> <code>.type-dark-1</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-dark-2">Type dark 2</p> </td>
    <td class="bg-dark-2"> <p class="type-dark-2">Type dark 2</p> </td>
    <td> <code>.type-dark-2</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-dark-3">Type dark 3</p> </td>
    <td class="bg-dark-2"> <p class="type-dark-3">Type dark 3</p> </td>
    <td> <code>.type-dark-3</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-dark-4">Type dark 4</p> </td>
    <td class="bg-dark-2"> <p class="type-dark-4">Type dark 4</p> </td>
    <td> <code>.type-dark-4</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-dark-5">Type dark 5</p> </td>
    <td class="bg-dark-2"> <p class="type-dark-5">Type dark 5</p> </td>
    <td> <code>.type-dark-5</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-dark-6">Type dark 6</p> </td>
    <td class="bg-dark-2"> <p class="type-dark-6">Type dark 6</p> </td>
    <td> <code>.type-dark-6</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-dark-7">Type dark 7</p> </td>
    <td class="bg-dark-2"> <p class="type-dark-7">Type dark 7</p> </td>
    <td> <code>.type-dark-7</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-dark-8">Type dark 8</p> </td>
    <td class="bg-dark-2"> <p class="type-dark-8">Type dark 8</p> </td>
    <td> <code>.type-dark-8</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-dark-9">Type dark 9</p> </td>
    <td class="bg-dark-2"> <p class="type-dark-9">Type dark 9</p> </td>
    <td> <code>.type-dark-9</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-dark-10">Type dark 10</p> </td>
    <td class="bg-dark-2"> <p class="type-dark-10">Type dark 10</p> </td>
    <td> <code>.type-dark-10</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-dark-11">Type dark 11</p> </td>
    <td class="bg-dark-2"> <p class="type-dark-11">Type dark 11</p> </td>
    <td> <code>.type-dark-11</code> </td>
  </tr>
    <tr>
    <td class="bg-neutral-11"> <p class="type-accent-1">Type accent 1</p> </td>
    <td class="bg-dark-2"> <p class="type-accent-1">Type accent 1</p> </td>
    <td> <code>.type-accent-1</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-accent-2">Type accent 2</p> </td>
    <td class="bg-dark-2"> <p class="type-accent-2">Type accent 2</p> </td>
    <td> <code>.type-accent-2</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-accent-3">Type accent 3</p> </td>
    <td class="bg-dark-2"> <p class="type-accent-3">Type accent 3</p> </td>
    <td> <code>.type-accent-3</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-accent-4">Type accent 4</p> </td>
    <td class="bg-dark-2"> <p class="type-accent-4">Type accent 4</p> </td>
    <td> <code>.type-accent-4</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-accent-5">Type accent 5</p> </td>
    <td class="bg-dark-2"> <p class="type-accent-5">Type accent 5</p> </td>
    <td> <code>.type-accent-5</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-accent-6">Type accent 6</p> </td>
    <td class="bg-dark-2"> <p class="type-accent-6">Type accent 6</p> </td>
    <td> <code>.type-accent-6</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-brand-1">Type brand 1</p> </td>
    <td class="bg-dark-2"> <p class="type-brand-1">Type brand 1</p> </td>
    <td> <code>.type-brand-1</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-brand-2">Type brand 2</p> </td>
    <td class="bg-dark-2"> <p class="type-brand-2">Type brand 2</p> </td>
    <td> <code>.type-brand-2</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-brand-3">Type brand 3</p> </td>
    <td class="bg-dark-2"> <p class="type-brand-3">Type brand 3</p> </td>
    <td> <code>.type-brand-3</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-brand-4">Type brand 4</p> </td>
    <td class="bg-dark-2"> <p class="type-brand-4">Type brand 4</p> </td>
    <td> <code>.type-brand-4</code> </td>
  </tr>
    <tr>
    <td class="bg-neutral-11"> <p class="type-brand-5">Type brand 5</p> </td>
    <td class="bg-dark-2"> <p class="type-brand-5">Type brand 5</p> </td>
    <td> <code>.type-brand-5</code> </td>
  </tr>
    <tr>
    <td class="bg-neutral-11"> <p class="type-brand-6">Type brand 6</p> </td>
    <td class="bg-dark-2"> <p class="type-brand-6">Type brand 6</p> </td>
    <td> <code>.type-brand-6</code> </td>
  </tr>
    <tr>
    <td class="bg-neutral-11"> <p class="type-brand-7">Type brand 7</p> </td>
    <td class="bg-dark-2"> <p class="type-brand-7">Type brand 7</p> </td>
    <td> <code>.type-brand-7</code> </td>
  </tr>
    <tr>
    <td class="bg-neutral-11"> <p class="type-brand-8">Type brand 8</p> </td>
    <td class="bg-dark-2"> <p class="type-brand-8">Type brand 8</p> </td>
    <td> <code>.type-brand-8</code> </td>
  </tr>
    <tr>
    <td class="bg-neutral-11"> <p class="type-brand-9">Type brand 9</p> </td>
    <td class="bg-dark-2"> <p class="type-brand-9">Type brand 9</p> </td>
    <td> <code>.type-brand-9</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-brand-10">Type brand 10</p> </td>
    <td class="bg-dark-2"> <p class="type-brand-10">Type brand 10</p> </td>
    <td> <code>.type-brand-10</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-brand-11">Type brand 11</p> </td>
    <td class="bg-dark-2"> <p class="type-brand-11">Type brand 11</p> </td>
    <td> <code>.type-brand-11</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-error-1">Type error 1</p> </td>
    <td class="bg-dark-2"> <p class="type-error-1">Type error 1</p> </td>
    <td> <code>.type-error-1</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-error-2">Type error 2</p> </td>
    <td class="bg-dark-2"> <p class="type-error-2">Type error 2</p> </td>
    <td> <code>.type-error-2</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-error-3">Type error 3</p> </td>
    <td class="bg-dark-2"> <p class="type-error-3">Type error 3</p> </td>
    <td> <code>.type-error-3</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-error-4">Type error 4</p> </td>
    <td class="bg-dark-2"> <p class="type-error-4">Type error 4</p> </td>
    <td> <code>.type-error-4</code> </td>
  </tr>
    <tr>
    <td class="bg-neutral-11"> <p class="type-error-5">Type error 5</p> </td>
    <td class="bg-dark-2"> <p class="type-error-5">Type error 5</p> </td>
    <td> <code>.type-error-5</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-error-6">Type error 6</p> </td>
    <td class="bg-dark-2"> <p class="type-error-6">Type error 6</p> </td>
    <td> <code>.type-error-6</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-success-1">Type success 1</p> </td>
    <td class="bg-dark-2"> <p class="type-success-1">Type success 1</p> </td>
    <td> <code>.type-success-1</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-success-2">Type success 2</p> </td>
    <td class="bg-dark-2"> <p class="type-success-2">Type success 2</p> </td>
    <td> <code>.type-success-2</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-success-3">Type success 3</p> </td>
    <td class="bg-dark-2"> <p class="type-success-3">Type success 3</p> </td>
    <td> <code>.type-success-3</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-success-4">Type success 4</p> </td>
    <td class="bg-dark-2"> <p class="type-success-4">Type success 4</p> </td>
    <td> <code>.type-success-4</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-success-5">Type success 5</p> </td>
    <td class="bg-dark-2"> <p class="type-success-5">Type success 5</p> </td>
    <td> <code>.type-success-5</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-success-6">Type success 6</p> </td>
    <td class="bg-dark-2"> <p class="type-success-6">Type success 6</p> </td>
    <td> <code>.type-success-6</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-warn-1">Type warn 1</p> </td>
    <td class="bg-dark-2"> <p class="type-warn-1">Type warn 1</p> </td>
    <td> <code>.type-warn-1</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-warn-2">Type warn 2</p> </td>
    <td class="bg-dark-2"> <p class="type-warn-2">Type warn 2</p> </td>
    <td> <code>.type-warn-2</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-warn-3">Type warn 3</p> </td>
    <td class="bg-dark-2"> <p class="type-warn-3">Type warn 3</p> </td>
    <td> <code>.type-warn-3</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-warn-4">Type warn 4</p> </td>
    <td class="bg-dark-2"> <p class="type-warn-4">Type warn 4</p> </td>
    <td> <code>.type-warn-4</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-warn-5">Type warn 5</p> </td>
    <td class="bg-dark-2"> <p class="type-warn-5">Type warn 5</p> </td>
    <td> <code>.type-warn-5</code> </td>
  </tr>
  <tr>
    <td class="bg-neutral-11"> <p class="type-warn-6">Type warn 6</p> </td>
    <td class="bg-dark-2"> <p class="type-warn-6">Type warn 6</p> </td>
    <td> <code>.type-warn-6</code> </td>
  </tr>
</table>

*/

// gray type

.type-neutral-1 { color: $neutral-1 !important; }
.type-neutral-2 { color: $neutral-2 !important; }
.type-neutral-3 { color: $neutral-3 !important; }
.type-neutral-4 { color: $neutral-4 !important; }
.type-neutral-5 { color: $neutral-5 !important; }
.type-neutral-6 { color: $neutral-6 !important; }
.type-neutral-7 { color: $neutral-7 !important; }
.type-neutral-8 { color: $neutral-8 !important; }
.type-neutral-9 { color: $neutral-9 !important; }
.type-neutral-10 { color: $neutral-10 !important; }
.type-neutral-11 { color: $neutral-11 !important; }

// navy type

.type-dark-1 { color: $dark-1 !important; }
.type-dark-2 { color: $dark-2 !important; }
.type-dark-3 { color: $dark-3 !important; }
.type-dark-4 { color: $dark-4 !important; }
.type-dark-5 { color: $dark-5 !important; }
.type-dark-6 { color: $dark-6 !important; }
.type-dark-7 { color: $dark-7 !important; }
.type-dark-8 { color: $dark-8 !important; }
.type-dark-9 { color: $dark-9 !important; }
.type-dark-10 { color: $dark-10 !important; }
.type-dark-11 { color: $dark-11 !important; }

// teal type

.type-brand-1 { color: $brand-1 !important; }
.type-brand-2 { color: $brand-2 !important; }
.type-brand-3 { color: $brand-3 !important; }
.type-brand-4 { color: $brand-4 !important; }
.type-brand-5 { color: $brand-5 !important; }
.type-brand-6 { color: $brand-6 !important; }
.type-brand-7 { color: $brand-7 !important; }
.type-brand-8 { color: $brand-8 !important; }
.type-brand-9 { color: $brand-9 !important; }
.type-brand-10 { color: $brand-10 !important; }
.type-brand-11 { color: $brand-11 !important; }

// blue type

.type-accent-1 { color: $accent-1 !important; }
.type-accent-2 { color: $accent-2 !important; }
.type-accent-3 { color: $accent-3 !important; }
.type-accent-4 { color: $accent-4 !important; }
.type-accent-5 { color: $accent-5 !important; }
.type-accent-6 { color: $accent-6 !important; }

// red type

.type-error-1 { color: $error-1 !important; }
.type-error-2 { color: $error-2 !important; }
.type-error-3 { color: $error-3 !important; }
.type-error-4 { color: $error-4 !important; }
.type-error-5 { color: $error-5 !important; }
.type-error-6 { color: $error-6 !important; }

// yellow type

.type-warn-1 { color: $warn-1 !important; }
.type-warn-2 { color: $warn-2 !important; }
.type-warn-3 { color: $warn-3 !important; }
.type-warn-4 { color: $warn-4 !important; }
.type-warn-5 { color: $warn-5 !important; }
.type-warn-6 { color: $warn-6 !important; }

// green type

.type-success-1 { color: $success-1 !important; }
.type-success-2 { color: $success-2 !important; }
.type-success-3 { color: $success-3 !important; }
.type-success-4 { color: $success-4 !important; }
.type-success-5 { color: $success-5 !important; }
.type-success-6 { color: $success-6 !important; }

.type-inverse {
  color: $type-inverse !important;
}
a:hover.type-inverse {
  color: $type-inverse-hover !important;
}

.error-color {
  color: $error-color !important;
}

/*doc
---
title: Multiline Headings
name: type_mutliline
parent: type
---

Headings are spaced so their line height and padding are consistent on one or many lines.

```html_example_table
<h1>One line heading</h1>

<h1>I am a <br/> multiline heading</h1>
```

*/