<commit_before>@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:
  - Elements
  - 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 42px</h1>

<h1>h1 31px</h1>

<h2>h2 25px</h2>

<h3>h3 20px</h3>

<h4>h4 18px</h4>

<h5>h5 16px</h5>

<h6>h6 13px</h6>

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

<p class="type-sm">small text 14px</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, .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;
  }
}

// We handle font-weight here, bootstrap handles font-size and color

h1, .h1 {
  //If you add new h1 styles, make sure to update the h1 mixin
  font-weight: $font-weight-h1;
}

h2, .h2 {
  font-weight: $font-weight-h2;
}

h3, .h3 {
  font-weight: $font-weight-h3;
}

h4, .h4 {
  font-weight: $font-weight-h4;
}

h5, .h5 {
  font-weight: $font-weight-h5;
}

h6, .h6 {
  font-weight: $font-weight-h6;
}

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

.type-xs,<commit_msg>feat(typography): typography size classes are !important<commit_after>@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:
  - Elements
  - 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 42px</h1>

<h1>h1 31px</h1>

<h2>h2 25px</h2>

<h3>h3 20px</h3>

<h4>h4 18px</h4>

<h5>h5 16px</h5>

<h6>h6 13px</h6>

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

<p class="type-sm">small text 14px</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, .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;
  }
}

// We handle font-weight here, bootstrap handles font-size and color

h1 {
  //If you add new h1 styles, make sure to update the h1 mixin
  font-weight: $font-weight-h1;
}

h2 {
  font-weight: $font-weight-h2;
}

h3 {
  font-weight: $font-weight-h3;
}

h4 {
  font-weight: $font-weight-h4;
}

h5 {
  font-weight: $font-weight-h5;
}

h6 {
  font-weight: $font-weight-h6;
}


.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,
{'fraction_non_alphanumeric': 0.16475911631620974, 'fraction_numerical': 0.03167420814479638, 'mean_word_length': 3.5573074590661005, 'pattern_counts': {'":': 0, '<': 75, '<?xml version=': 0, '>': 75, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2554961', 'n_tokens_mistral': 3055, 'n_tokens_neox': 2911, 'n_words': 778}