@primer/css 20.7.0-rc.5025a8f3 → 20.7.0-rc.b85cd3b0

package/utilities/typography.scss

@@ -1,4 +1,4 @@
-// stylelint-disable comment-empty-line-before
+// stylelint-disable comment-empty-line-before, primer/typography
 
 // Type scale variables found in ../support/lib/variables.scss
 // $h00-size-mobile: 40px;
@@ -17,40 +17,47 @@
 
 /* Set the font size to 26px */
 .h1 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h1-size-mobile !important;
+  font-size: var(--h1-size-mobile, $h1-size-mobile) !important;
 
-  @include breakpoint(md) { font-size: $h1-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h1-size, $h1-size) !important;
+  }
 }
 
 /* Set the font size to 22px */
 .h2 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h2-size-mobile !important;
+  font-size: var(--h2-size-mobile, $h2-size-mobile) !important;
 
-  @include breakpoint(md) { font-size: $h2-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h2-size, $h2-size) !important;
+  }
 }
 
 /* Set the font size to 18px */
 .h3 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h3-size-mobile !important;
+  font-size: var(--h3-size-mobile, $h3-size-mobile) !important;
 
-  @include breakpoint(md) { font-size: $h3-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h3-size, $h3-size) !important;
+  }
 }
 
 /* Set the font size to #{$h4-size} */
 .h4 {
-  font-size: $h4-size !important;
+  font-size: var(--h4-size, $h4-size) !important;
 }
 
 /* Set the font size to #{$h5-size} */
-.h5 { font-size: $h5-size !important; }
+.h5 {
+  font-size: var(--h5-size, $h5-size) !important;
+}
 
 // Does not include color property like typography base
 // styles, color should be applied with color utilities.
 /* Set the font size to #{$h6-size} */
-.h6 { font-size: $h6-size !important; }
+.h6 {
+  font-size: var(--h6-size, $h6-size) !important;
+}
 
 // Heading utilities
 .h1,
@@ -58,102 +65,123 @@
 .h3,
 .h4,
 .h5,
-.h6 { font-weight: $font-weight-bold !important; }
+.h6 {
+  font-weight: var(--base-text-weight-semibold, $font-weight-bold) !important;
+}
 
 // Type utilities that match type sale
 /* Set the font size to 26px */
 .f1 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h1-size-mobile !important;
+  font-size: var(--h1-size-mobile, $h1-size-mobile) !important;
 
-  @include breakpoint(md) { font-size: $h1-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h1-size, $h1-size) !important;
+  }
 }
 
 /* Set the font size to 22px */
 .f2 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h2-size-mobile !important;
+  font-size: var(--h2-size-mobile, $h2-size-mobile) !important;
 
-  @include breakpoint(md) { font-size: $h2-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h2-size, $h2-size) !important;
+  }
 }
 
 /* Set the font size to 18px */
 .f3 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h3-size-mobile !important;
+  font-size: var(--h3-size-mobile, $h3-size-mobile) !important;
 
-  @include breakpoint(md) { font-size: $h3-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h3-size, $h3-size) !important;
+  }
 }
 
 /* Set the font size to #{$h4-size} */
 .f4 {
-  font-size: $h4-size !important;
+  font-size: var(--h4-size, $h4-size) !important;
 
-  @include breakpoint(md) { font-size: $h4-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h4-size, $h4-size) !important;
+  }
 }
 
 /* Set the font size to #{$h5-size} */
-.f5 { font-size: $h5-size !important; }
+.f5 {
+  font-size: var(--h5-size, $h5-size) !important;
+}
+
 /* Set the font size to #{$h6-size} */
-.f6 { font-size: $h6-size !important; }
+.f6 {
+  font-size: var(--h6-size, $h6-size) !important;
+}
 
 // Type utils with light weight that match type scale
 /* Set the font size to 40px and weight to light */
 .f00-light {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h00-size-mobile !important;
-  font-weight: $font-weight-light !important;
+  font-size: var(--h00-size-mobile, $h00-size-mobile) !important;
+  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
 
-  @include breakpoint(md) { font-size: $h00-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h00-size, $h00-size) !important;
+  }
 }
 
 /* Set the font size to 32px and weight to light */
 .f0-light {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h0-size-mobile !important;
-  font-weight: $font-weight-light !important;
+  font-size: var(--h0-size-mobile, $h0-size-mobile) !important;
+  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
 
-  @include breakpoint(md) { font-size: $h0-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h0-size, $h0-size) !important;
+  }
 }
 
 /* Set the font size to 26px and weight to light */
 .f1-light {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h1-size-mobile !important;
-  font-weight: $font-weight-light !important;
+  font-size: var(--h1-size-mobile, $h1-size-mobile) !important;
+  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
 
-  @include breakpoint(md) { font-size: $h1-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h1-size, $h1-size) !important;
+  }
 }
 
 /* Set the font size to 22px and weight to light */
 .f2-light {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h2-size-mobile !important;
-  font-weight: $font-weight-light !important;
+  font-size: var(--h2-size-mobile, $h2-size-mobile) !important;
+  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
 
-  @include breakpoint(md) { font-size: $h2-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h2-size, $h2-size) !important;
+  }
 }
 
 // Same size and weight as .lead but without color property
 /* Set the font size to 18px and weight to light */
 .f3-light {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h3-size-mobile !important;
-  font-weight: $font-weight-light !important;
+  font-size: var(--h3-size-mobile, $h3-size-mobile) !important;
+  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
 
-  @include breakpoint(md) { font-size: $h3-size !important; }
+  @include breakpoint(md) {
+    font-size: var(--h3-size, $h3-size) !important;
+  }
 }
 
 // Smallest text size
 /* Set the font size to ${#h6-size} */
-.text-small { font-size: $h6-size !important; } // 12px
+.text-small {
+  font-size: var(--h6-size, $h6-size) !important;
+}
+
+// 12px
 
 /* Large leading paragraphs */
 .lead {
   // stylelint-disable-next-line primer/spacing
   margin-bottom: 30px;
-  font-size: $h3-size;
-  font-weight: $font-weight-light;
+  font-size: var(--h3-size, $h3-size);
+  font-weight: var(--base-text-weight-light, $font-weight-light);
 }
 
 // Line-height variations
@@ -163,14 +191,26 @@
 // Responsive line-height
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
+
     /* Set the line height to ultra condensed */
-    .lh#{$variant}-condensed-ultra { line-height: $lh-condensed-ultra !important; }
+    .lh#{$variant}-condensed-ultra {
+      line-height: $lh-condensed-ultra !important;
+    }
+
     /* Set the line height to condensed */
-    .lh#{$variant}-condensed { line-height: $lh-condensed !important; }
+    .lh#{$variant}-condensed {
+      line-height: $lh-condensed !important;
+    }
+
     /* Set the line height to default */
-    .lh#{$variant}-default { line-height: $lh-default !important; }
+    .lh#{$variant}-default {
+      line-height: $lh-default !important;
+    }
+
     /* Set the line height to zero */
-    .lh#{$variant}-0 { line-height: 0 !important; }
+    .lh#{$variant}-0 {
+      line-height: 0 !important;
+    }
   }
 }
 
@@ -178,34 +218,72 @@
 // Responsive text alignment
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
+
     /* Text align to the right */
-    .text#{$variant}-right { text-align: right !important; }
+    .text#{$variant}-right {
+      text-align: right !important;
+    }
+
     /* Text align to the left */
-    .text#{$variant}-left { text-align: left !important; }
+    .text#{$variant}-left {
+      text-align: left !important;
+    }
+
     /* Text align to the center */
-    .text#{$variant}-center { text-align: center !important; }
+    .text#{$variant}-center {
+      text-align: center !important;
+    }
   }
 }
 
 // Text styles
 /* Set the font weight to normal */
-.text-normal { font-weight: $font-weight-normal !important; }
+.text-normal {
+  font-weight: $font-weight-normal !important;
+}
+
 /* Set the font weight to bold */
-.text-bold { font-weight: $font-weight-bold !important; }
-.text-semibold { font-weight: $font-weight-semibold !important; }
-.text-light { font-weight: $font-weight-light !important; }
+.text-bold {
+  font-weight: $font-weight-bold !important;
+}
+
+.text-semibold {
+  font-weight: $font-weight-semibold !important;
+}
+
+.text-light {
+  font-weight: $font-weight-light !important;
+}
+
 /* Set the font to italic */
-.text-italic { font-style: italic !important; }
+.text-italic {
+  font-style: italic !important;
+}
+
 /* Make text uppercase */
-.text-uppercase { text-transform: uppercase !important; }
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
 /* Underline text */
-.text-underline { text-decoration: underline !important; }
+.text-underline {
+  text-decoration: underline !important;
+}
+
 /* Don't underline text */
-.no-underline { text-decoration: none !important; }
+.no-underline {
+  text-decoration: none !important;
+}
+
 /* Don't wrap white space */
-.no-wrap { white-space: nowrap !important; }
+.no-wrap {
+  white-space: nowrap !important;
+}
+
 /* Normal white space */
-.ws-normal { white-space: normal !important; }
+.ws-normal {
+  white-space: normal !important;
+}
 
 /* Force long "words" to wrap if they exceed the width of the container */
 .wb-break-word {
@@ -225,14 +303,18 @@
  *
  * see: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Values
  */
-.wb-break-all { word-break: break-all !important; }
+.wb-break-all {
+  word-break: break-all !important;
+}
 
 .text-emphasized {
-  font-weight: $font-weight-bold;
+  font-weight: var(--base-text-weight-semibold, $font-weight-bold);
 }
 
 // List styles
-.list-style-none { list-style: none !important; }
+.list-style-none {
+  list-style: none !important;
+}
 
 /* Set to monospace font */
 .text-mono {