Add type helpers for modular text plugins

assets/scss/5-typography/_all.scss

@@ -4,6 +4,7 @@
 //
 // Styleguide 5.0
 @import 'byline';
+@import 'copy';
 @import 'headline';
 @import 'links';
 @import 'sectionhead';

assets/scss/5-typography/_copy.scss

@@ -0,0 +1,41 @@
+// Copy (t-copy)
+//
+// This helper will set reasonable defaults on copy.
+//
+// .t-copy--level-2 - Adds highest layer of hierarchy to text. Level modifiers are typically used on heading tags.
+// .t-copy--level-3 - Adds next layer of hierarchy to text.
+// .t-copy--level-4 - Adds lowest layer of hierarchy to text.
+//
+// Markup: <h2 class="t-copy {{ className }}">Example of {{ className }} text</h2><p class="t-copy">Normal paragraph of text with no modifier.</p>
+//
+// Styleguide 5.1.1
+//
+.t-copy {
+  @include font-setting('secondary');
+  line-height: $font-line-height-b;
+  margin: $size-b auto;
+  max-width: $story-narrow;
+
+  // must be em for SASSmq helper
+  @include mq($until: ($story-narrow / 1rem) + 2em) {
+    // Hack: breakpoint divides by 1rem for compatible units
+    padding: 0 $size-xs;
+  }
+
+  &--level-2 {
+    font-size: $size-m;
+    margin-top: $size-giant;
+  }
+
+  &--level-3 {
+    @include font-setting('primary');
+    font-size: $size-b;
+    margin-top: $size-xxl;
+  }
+
+  &--level-4 {
+    @include font-setting('primary');
+    font-size: $size-s;
+    margin-top: $size-xl;
+  }
+}

assets/scss/6-components/list/_list.scss

@@ -2,21 +2,26 @@
 //
 // Our standard list is just plain ol' bullets
 //
+// .c-list--hoverable - Bullets become yellow on hover; best used for a list of links maybe.
+// .c-list--indented - Lists used in the context of an article
+//
 // Markup: 6-components/list/list.html
 //
 // Styleguide 6.1.3
 .c-list {
   padding-left: $size-b;
 
-  li {
+  &:not(ol) {
     list-style: disc;
+  }
 
-    &::marker {
-      color: $color-black-off;
-    }
-
-    &:hover::marker {
+  &--hoverable {
+    li:hover::marker {
       color: $color-yellow-tribune;
     }
   }
+
+  &--indented {
+    padding-left: 3.5rem;
+  }
 }

assets/scss/6-components/list/list.html

@@ -1,6 +1,13 @@
-<ul class="c-list">
+<ul class="c-list {{ className }}">
   <li>Bacon</li>
   <li>Eggs</li>
   <li>Cheese</li>
   <li>Potato</li>
 </ul>
+
+<ol class="c-list {{ className }}">
+  <li>Bacon</li>
+  <li>Eggs</li>
+  <li>Cheese</li>
+  <li>Potato</li>
+</ol>