feat(tailwind): new component and base heading styles (#2483)

Author: thecristen

assets/css/_descriptive-link.scss

@@ -30,7 +30,7 @@
 .c-descriptive-link__title {
   // Use all aspects of H3 except
   // font-family and margin-top
-  @include h3();
+  @apply h3;
   color: $link-color;
   font-family: $font-family-base;
   margin-top: 0;

assets/css/_footer.scss

@@ -118,7 +118,7 @@
 }
 
 .m-footer__group-title {
-  @include h3();
+  @apply h3;
   margin: 0 0 24px;
 
   @include media-breakpoint-only(xs) {

assets/css/_layout-cms.scss

@@ -146,7 +146,7 @@ $body-columns: ();
 }
 
 .c-cms__meta {
-  @include h4();
+  @apply h4;
 }
 
 .c-cms__content,
@@ -193,7 +193,7 @@ $body-columns: ();
 
     @include media-breakpoint-up(md) {
       .c-cms__sidebar-title {
-        @include h3();
+        @apply h3;
         margin: 0 0 $h1-bottom; // Match the below the h1
         padding: $top-adjust 0 $bottom-adjust; // Equalize line-height differences and base-align
       }

assets/css/_mixins.scss

@@ -56,140 +56,6 @@
   }
 }
 
-/////////////////////////////////////////////////////
-// Supporting @mixins for heading typography below //
-/////////////////////////////////////////////////////
-
-@mixin base-heading {
-  font-family: $headings-font-family;
-  font-weight: $headings-font-weight;
-  line-height: $headings-line-height;
-  margin-bottom: $headings-margin-bottom;
-  margin-top: $headings-margin-top;
-}
-
-@mixin h1 {
-  @include base-heading();
-  font-size: $font-size-h1;
-
-  @include media-breakpoint-down(sm) {
-    font-size: $font-size-h1-sm;
-  }
-}
-
-@mixin h2 {
-  @include base-heading();
-  @include after-heading-space();
-  font-size: $font-size-h2;
-
-  @include media-breakpoint-down(sm) {
-    font-size: $font-size-h2-sm;
-  }
-}
-
-@mixin h3 {
-  @include base-heading();
-  @include after-heading-space();
-  font-size: $font-size-h3;
-
-  + h4,
-  + .h4 {
-    @include reduce-adjacent-heading-space();
-  }
-}
-
-@mixin h4 {
-  @include base-heading();
-  @include after-heading-space();
-  font-size: $font-size-h4;
-  font-weight: bold;
-
-  + h5,
-  + .h5 {
-    @include reduce-adjacent-heading-space();
-  }
-}
-
-@mixin h5 {
-  @include base-heading();
-  @include after-heading-space();
-  font-size: $font-size-h5;
-
-  + h6,
-  + .h6 {
-    @include reduce-adjacent-heading-space();
-  }
-}
-
-@mixin h6 {
-  @include h5();
-  font-weight: $font-weight-medium;
-}
-
-@mixin reduce-adjacent-heading-space {
-  // Adjacent (sibling) headings should not have additional space
-  // between them (similar concept to paragraphs following headlines).
-  //
-  // This rule helps sub-headings feel "attached" or grouped under
-  // their parent headings, and not disjointed or ambiguous.
-  //
-  // EXCLUSIONS: H1 and H2, as well as H6. H1 usually exists in its
-  // own space and we want to always have consistent space after it.
-  // H2 is used to introduce large sections often with tables and other
-  // non-text content, so it's OK to have the original space under it.
-  // H6 has no following H7 element, so it's excluded for obvious reasons.
-  margin-top: -.125em;
-}
-
-@mixin after-heading-space {
-
-  // Paragraph copy directly following headlines (even if nested in divs) have
-  // their own built-in spacing (line-heights, em-square), so we undo the
-  // global after-heading spacing when paragraphs directly follow headings.
-  + p,
-  + div > p:first-child,
-  + div > div > p:first-child,
-  + ul,
-  + div > ul:first-child,
-  + div > div > ul:first-child,
-  + ol,
-  + div > ol:first-child,
-  + div > div > ol:first-child {
-    margin-top: -$after-heading-adjustment;
-  }
-
-  // When columns break and are ordered vertically only the first should get
-  // the updated spacing
-  @include media-breakpoint-down(sm) {
-    + div > div ~ div > p:first-child,
-    + div > div ~ div > ul:first-child,
-    + div > div ~ div > ol:first-child {
-      margin-top: 0;
-    }
-  }
-
-  // If an author floats media between a heading and body copy, we lose
-  // the heading + copy relationship. Add this scenario back here:
-  @include media-breakpoint-up(sm) {
-    + .c-media--half + p {
-      margin-top: -$after-heading-adjustment;
-    }
-  }
-
-  // When images are visually directly after a headline, they should get
-  // the same gap non-paragraphs get by default (undo negative margin above).
-  + p > img:first-child,
-  + p > a:first-child > img:first-child {
-    margin-top: $after-heading-adjustment;
-  }
-  // Make floated media items align with the top of adjacent wrapped text characters
-  @include media-breakpoint-up(sm) {
-    + .c-media--half .c-media__content {
-      margin-top: $after-heading-adjustment;
-    }
-  }
-}
-
 /////////////////////////////////////////////////////
 // Supporting @mixins for CMS layout & media below //
 /////////////////////////////////////////////////////

assets/css/_project.scss

@@ -1,7 +1,7 @@
 // Featured project elixir template
 
 .featured-project-title {
-  @include h3();
+  @apply h3;
 
   @include media-breakpoint-up(sm) {
     margin-top: 0;

assets/css/_right-rail.scss

@@ -15,10 +15,8 @@
     // Optical adjustment to top margin of the first direct child
     // heading due to presence background color in sidebar paragraphs.
     @each $heading in $headings {
-      > #{$heading}:first-child,
-      > .#{$heading}:first-child,
-      .c-multi-column__column:first-child > #{$heading}:first-child,
-      .c-multi-column__column:first-child > .#{$heading}:first-child {
+      > :where(#{$heading}, .#{$heading}):first-child,
+      .c-multi-column__column:first-child > :where(#{$heading}, .#{$heading}):first-child {
         margin-top: .125em; // Should be relative to heading font-size
       }
     }

assets/css/_schedule-page.scss

@@ -158,7 +158,7 @@
   }
 
   .schedule-finder__heading {
-    @include h3();
+    @apply h3;
     color: $brand-primary;
     margin-top: 0;
   }

assets/css/_stop-card.scss

@@ -227,7 +227,7 @@ $radius: 4px;
   }
 
   .departure-card__headsign-name {
-    @include h4();
+    @apply h4;
     flex-grow: 1;
     margin: 0;
     max-width: 16.25rem;

assets/css/_transit-near-me.scss

@@ -288,7 +288,7 @@ $xxl-map-height: map-get($container-max-widths, xxl) * math.div(9, 16);
 }
 
 .m-tnm-sidebar__direction-destination {
-  @include h3();
+  @apply h3;
   margin: 0;
 }
 
@@ -305,7 +305,7 @@ $xxl-map-height: map-get($container-max-widths, xxl) * math.div(9, 16);
 }
 
 .m-tnm-sidebar__headsign-name--large {
-  @include h3();
+  @apply h3;
   margin: 0;
 }
 
@@ -369,7 +369,7 @@ $xxl-map-height: map-get($container-max-widths, xxl) * math.div(9, 16);
 }
 
 .m-tnm-sidebar__time-number {
-  @include h3();
+  @apply h3;
   line-height: 1em;
   margin-bottom: 0;
   margin-top: calc(#{$base-spacing} / 4);

assets/css/_variables.scss

@@ -94,8 +94,6 @@ $font-size-h2-sm: 1.625rem;
 $font-weight-medium: 500;
 
 $headings-margin-top: 1.075em;
-$headings-line-height: 1.275em;
-$headings-margin-bottom: .375em;
 
 $pagination-line-height: 1.5rem;