<commit_before>/// This is the beginning of fixing typography usage in Canvas. We originally were pulling in a bunch of
/// bootstrap styles, of which, we'd like to phase out in multiple iterations.
/// Below is the combination of overwrites and bootstrap styles that were originally in Canvas.
/// As we sift through fixing things to the way we need them, this file should get smaller and smaller. :)

/// Repeat - this is a work in progress, iterative approach to handing typography in Canvas.
/// There's a lot here we don't want, and a lot more we need to re-work, but not all in one go.


@import "base/environment"; // pulls in global typography variables set in base/_variables

///////==============
/// Global Settings
///////==============

body {
  margin: 0;
  line-height: $ic-line-height;
  @include fontSize($ic-font-size);
  font-family: $ic-font-family;
  color: $ic-color-dark;
}

p {
  margin: $ic-sp 0;
}

///////==============
/// Emphasis and Utility Settings
///////==============

small {
  font-size: 85%; // Ex: 14px base font * 85% = about 12px
}
strong {
  font-weight: bold;
}
em {
  font-style: italic;
}
cite {
  font-style: normal;
}
.lead {
  margin-bottom: $ic-line-height;
  @include fontSize($ic-font-size);
  font-weight: 200;
  line-height: $ic-line-height * 1.5;
}
.muted {
  @if $use_high_contrast { color: darken($ic-color-neutral, 20%); }
  @else { color: $ic-color-neutral; }
}
.text-warning { color: $ic-color-alert; }
a.text-warning:hover { color: darken($ic-color-alert, 10%); }

.text-error { color: $ic-color-danger; }
a.text-error:hover { color: darken($ic-color-danger, 10%); }

.text-info { color: $ic-brand-primary; }
a.text-info:hover { color: darken($ic-brand-primary, 10%); }

.text-success { color: $ic-color-success; }
a.text-success:hover { color: darken($ic-color-success, 10%); }

///////==============
/// Heading Settings
///////==============

h1, h2, h3, h4, h5, h6 {
  margin: ($ic-line-height / 2) 0;
  font-family: $ic-font-family;
  font-weight: $ic-font-weight;
  line-height: $ic-line-height;
  color: $ic-color-dark;
  text-rendering: optimizelegibility; // Fix the character spacing for headings
  small {
    font-weight: normal;
    line-height: $ic-line-height/0.5;
    color: $ic-font-color--subdued;
  }
}

h1, h2, h3 { line-height: $ic-line-height * 2; }

h1 { font-size: $ic-font-size * 2.75; } // ~38px
h2 { font-size: $ic-font-size * 2.25; } // ~32px
h3 { font-size: $ic-font-size * 1.75; } // ~24px
h4 { font-size: $ic-font-size * 1.25; } // ~18px
h5 { font-size: $ic-font-size; }
h6 { font-size: $ic-font-size * 0.85; } // ~12px

h1 small { font-size: $ic-font-size * 1.75; } // ~24px
h2 small { font-size: $ic-font-size * 1.25; } // ~18px
h3 small { font-size: $ic-font-size; }
h4 small { font-size: $ic-font-size; }

// now tweak them all a bit to be less shouty

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: normal;
}
h1, h2, .h1, .h2 {
  font-size: 1.8em;
  @if $use_new_styles {
    font-weight: 300;
    line-height: $ic-line-height;
  }
}
h3, .h3 {
  font-size: 1.5em;
}

.page-header {
  padding-bottom: ($ic-line-height / 2) - 1;
  margin: 20px 0 30px;
  border-bottom: 1px solid $ic-border-color;
}

///////==============
/// Links
///////==============

a {
  color: $ic-link-color;
  &:focus, &:hover { color: darken($ic-link-color, 10%); }

  @if $use_high_contrast {
    text-decoration: underline;
    &:focus, &:hover { text-decoration: none; }
    @include ic-focus-base;
    &:focus { @include ic-focus-variant($color: $ic-link-color, $offset: -1px); }
  }

  @else {
    text-decoration: none;
    &:focus, &:hover { text-decoration: underline; }
  }<commit_msg>Change some margins to use $ic-sp not $ic-line-height<commit_after>/// This is the beginning of fixing typography usage in Canvas. We originally were pulling in a bunch of
/// bootstrap styles, of which, we'd like to phase out in multiple iterations.
/// Below is the combination of overwrites and bootstrap styles that were originally in Canvas.
/// As we sift through fixing things to the way we need them, this file should get smaller and smaller. :)

/// Repeat - this is a work in progress, iterative approach to handing typography in Canvas.
/// There's a lot here we don't want, and a lot more we need to re-work, but not all in one go.


@import "base/environment"; // pulls in global typography variables set in base/_variables

///////==============
/// Global Settings
///////==============

body {
  margin: 0;
  line-height: $ic-line-height;
  @include fontSize($ic-font-size);
  font-family: $ic-font-family;
  color: $ic-color-dark;
}

p {
  margin: $ic-sp 0;
}

///////==============
/// Emphasis and Utility Settings
///////==============

small {
  font-size: 85%; // Ex: 14px base font * 85% = about 12px
}
strong {
  font-weight: bold;
}
em {
  font-style: italic;
}
cite {
  font-style: normal;
}
.lead {
  margin-bottom: $ic-sp;
  @include fontSize($ic-font-size);
  font-weight: 200;
  line-height: $ic-line-height * 1.5;
}
.muted {
  @if $use_high_contrast { color: darken($ic-color-neutral, 20%); }
  @else { color: $ic-color-neutral; }
}
.text-warning { color: $ic-color-alert; }
a.text-warning:hover { color: darken($ic-color-alert, 10%); }

.text-error { color: $ic-color-danger; }
a.text-error:hover { color: darken($ic-color-danger, 10%); }

.text-info { color: $ic-brand-primary; }
a.text-info:hover { color: darken($ic-brand-primary, 10%); }

.text-success { color: $ic-color-success; }
a.text-success:hover { color: darken($ic-color-success, 10%); }

///////==============
/// Heading Settings
///////==============

h1, h2, h3, h4, h5, h6 {
  margin: $ic-sp/2 0;
  font-family: $ic-font-family;
  font-weight: $ic-font-weight;
  line-height: $ic-line-height;
  color: $ic-color-dark;
  text-rendering: optimizelegibility; // Fix the character spacing for headings
  small {
    font-weight: normal;
    line-height: $ic-line-height/0.5;
    color: $ic-font-color--subdued;
  }
}

h1, h2, h3 { line-height: $ic-line-height * 2; }

h1 { font-size: $ic-font-size * 2.75; } // ~38px
h2 { font-size: $ic-font-size * 2.25; } // ~32px
h3 { font-size: $ic-font-size * 1.75; } // ~24px
h4 { font-size: $ic-font-size * 1.25; } // ~18px
h5 { font-size: $ic-font-size; }
h6 { font-size: $ic-font-size * 0.85; } // ~12px

h1 small { font-size: $ic-font-size * 1.75; } // ~24px
h2 small { font-size: $ic-font-size * 1.25; } // ~18px
h3 small { font-size: $ic-font-size; }
h4 small { font-size: $ic-font-size; }

// now tweak them all a bit to be less shouty

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: normal;
}
h1, h2, .h1, .h2 {
  font-size: 1.8em;
  @if $use_new_styles {
    font-weight: 300;
    line-height: $ic-line-height;
  }
}
h3, .h3 {
  font-size: 1.5em;
}

.page-header {
  padding-bottom: ($ic-sp / 2);
  margin: 20px 0 30px;
  border-bottom: 1px solid $ic-border-color;
}

///////==============
/// Links
///////==============

a {
  color: $ic-link-color;
  &:focus, &:hover { color: darken($ic-link-color, 10%); }

  @if $use_high_contrast {
    text-decoration: underline;
    &:focus, &:hover { text-decoration: none; }
    @include ic-focus-base;
    &:focus { @include ic-focus-variant($color: $ic-link-color, $offset: -1px); }
  }

  @else {
    text-decoration: none;
    &:focus, &:hover { text-decoration: underline; }
  }
{'fraction_non_alphanumeric': 0.21034809697954762, 'fraction_numerical': 0.032371664634972236, 'mean_word_length': 2.9634997316156735, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7478558', 'n_tokens_mistral': 2995, 'n_tokens_neox': 2782, 'n_words': 745}