Studio: refactoring font-size to use existing Sass scale-based placeholders

cms/static/sass/_base.scss

@@ -247,8 +247,8 @@ p, ul, ol, dl {
 .new-unit-item,
 .new-subsection-item,
 .new-policy-item {
-  @include grey-button;
-  @include font-size(10);
+  @include grey-button();
+  @extend %t-action5;
   margin: ($baseline/2);
   padding: 3px ($baseline/2) 4px ($baseline/2);
 
@@ -287,7 +287,7 @@ hr.divide {
 }
 
 .details {
-    @include font-size(14);
+    @extend %t-copy-sub1;
     display: none;
     margin-bottom: 30px;
 }
@@ -305,7 +305,7 @@ hr.divide {
 
   .header {
     @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
-    @include font-size(14);
+    @extend %t-title7;
     padding: 6px 14px;
     border-bottom: 1px solid $mediumGrey;
     border-radius: 2px 2px 0 0;
@@ -324,11 +324,10 @@ hr.divide {
     }
 
     .description {
-      @include font-size(11);
+      @extend %t-copy-sub2;
       @extend %t-regular;
       display: block;
       font-style: italic;
-      line-height: 1.3;
       color: #999;
     }
   }
@@ -345,8 +344,8 @@ hr.divide {
 // system notifications
 .toast-notification {
   @include transition(all $tmg-f2 linear 0s);
-  @include font-size(13);
   @include linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
+  @extend %t-copy-sub1;
   display: none;
   position: fixed;
   top: 20px;
@@ -366,7 +365,7 @@ hr.divide {
   }
 
   strong {
-    @include font-size(16);
+    @extend %t-copy-base;
     @extend %t-strong;
     display: block;
     margin-bottom: 10px;
@@ -374,7 +373,7 @@ hr.divide {
   }
 
   .close-button {
-    @include font-size(22);
+    @extend %t-action1;
     @extend %t-strong;
     position: absolute;
     top: 0;
@@ -386,7 +385,7 @@ hr.divide {
     text-align: center;
 
     .close-icon {
-      @include font-size(16);
+      @extend %t-action2;
       @extend %t-strong;
     }
   }
@@ -394,7 +393,7 @@ hr.divide {
   .action-button {
     @include blue-button;
     @include box-sizing(border-box);
-    @include font-size(12);
+    @extend %t-action4;
     width: 100%;
     margin-top: 10px;
     text-align: center;
@@ -463,7 +462,7 @@ hr.divide {
   }
 
   .icon-eye-open {
-    @include font-size(16);
+    @extend %t-action2;
     display: inline-block;
     vertical-align: middle;
     margin-right: 8px;
@@ -497,8 +496,8 @@ hr.divide {
 }
 
 .tooltip {
-  @include font-size(12);
   @include transition(opacity $tmg-f3 ease-out 0s);
+  @include font-size(12);
   @extend %t-regular;
   @extend %ui-depth5;
   position: absolute;
@@ -563,7 +562,7 @@ hr.divider {
 
 // ui - skipnav
 .nav-skip {
-  @include font-size(13);
+  @extend %t-action3;
   display: block;
   position: absolute;
   left: 0px;
@@ -615,7 +614,7 @@ body.js {
       }
 
       [class^="icon-"] {
-        @include font-size(18);
+        @extend %t-action1;
         color: $white;
       }
 

cms/static/sass/assets/_graphics.scss

@@ -156,7 +156,7 @@
 .draft-tag,
 .public-tag,
 .private-tag {
-	@include font-size(9);
+	@extend %t-action5;
 	@extend %t-strong;
 	margin-left: 3px;
 	text-transform: uppercase;

cms/static/sass/elements/_controls.scss

@@ -290,7 +290,7 @@
 
   .ui-toggle-expansion {
     @include transition(all $tmg-f2 ease-in-out 0s);
-    @include font-size(18);
+    @extend %t-action1;
     display: inline-block;
     margin-right: ($baseline/4);
     color: $gray-l3;

cms/static/sass/elements/_footer.scss

@@ -50,7 +50,7 @@
 
           [class^="icon-"] {
             @include transition(top $tmg-f2 ease-in-out 0.25s);
-            @include font-size(15);
+            @extend %t-action3;
             display: inline-block;
             vertical-align: middle;
             margin-right: ($baseline/4);

cms/static/sass/elements/_forms.scss

@@ -6,9 +6,9 @@ input[type="text"],
 input[type="email"],
 input[type="password"],
 textarea.text {
-  @include font-size(11);
   @include box-sizing(border-box);
   @include linear-gradient($gray-l5, $white);
+  @extend %t-copy-sub2;
   padding: 6px 8px 8px;
   border: 1px solid $gray-l2;
   border-radius: 2px;
@@ -60,8 +60,7 @@ textarea.text {
 form {
 
   input[type=file] {
-    @include font-size(14);
-    line-height: 1;
+    @extend %t-copy-sub1;
   }
 
   .note {
@@ -382,7 +381,7 @@ input.search {
 }
 
 label {
-  @include font-size(12);
+  @extend %t-copy-sub2;
 }
 
 code {
@@ -393,7 +392,7 @@ code {
 }
 
 .CodeMirror {
-  @include font-size(13);
+  @extend %t-copy-sub1;
   background: #fff;
 }
 

cms/static/sass/elements/_header.scss

@@ -309,16 +309,16 @@
       }
 
       .action-signup {
-        @include blue-button;
-        @include font-size(14);
+        @include blue-button();
+        @extend %t-action3;
         @extend %t-strong;
         padding: ($baseline/4) ($baseline/2);
         text-transform: uppercase;
       }
 
       .action-signin {
-        @include white-button;
-        @include font-size(14);
+        @include white-button();
+        @extend %t-action3;
         @extend %t-strong;
         padding: ($baseline/4) ($baseline/2);
         text-transform: uppercase;

cms/static/sass/elements/_modal-window.scss

@@ -104,7 +104,7 @@
 
       .action-primary {
         @include blue-button();
-        @include font-size(14); // needed due to bad button mixins for now
+        @extend %t-action3;
         border-color: $blue-d1;
         color: $white;
       }

cms/static/sass/elements/_modal.scss

@@ -36,7 +36,7 @@
 	}
 
 	h2 {
-		@include font-size(19);
+		@extend %t-title5;
 		@extend %t-light;
 		margin: 0 10px 30px;
 		color: #646464;

cms/static/sass/elements/_navigation.scss

@@ -118,7 +118,7 @@ nav {
 
     .nav-item {
       @extend %t-action3;
-      @extend %t-strong;
+      @extend %t-regular;
       display: block;
       margin: 0 0 ($baseline/4) 0;
       border-bottom: 1px solid $gray-l5;

cms/static/sass/elements/_sock.scss

@@ -34,7 +34,7 @@
       color: $gray;
 
       [class^="icon-"] {
-        @include font-size(14);
+        @extend %t-icon6;
         margin-right: ($baseline/4);
       }
 
@@ -96,7 +96,7 @@
             display: block;
 
             [class^="icon-"] {
-              @include font-size(18);
+              @extend %t-icon4;
               vertical-align: middle;
               margin-right: $baseline/4;
 

cms/static/sass/elements/_system-feedback.scss

@@ -19,9 +19,9 @@
   color: $white;
 
   [class^="icon-"] {
+    @extend %t-icon5;
     position: relative;
     top: 1px;
-    @include font-size(16);
     display: inline-block;
     margin-right: ($baseline/2);
   }
@@ -79,7 +79,7 @@
 
     .nav-actions .action-primary {
       @include blue-button();
-      @include font-size(12); // needed due to bad button mixins for now
+      @extend %t-action4;
       border-color: $blue-d2;
     }
 
@@ -97,7 +97,7 @@
 
     .nav-actions .action-primary {
       @include orange-button();
-      @include font-size(12); // needed due to bad button mixins for now
+      @extend %t-action4;
       border-color: $orange-d2;
       color: $gray-d4;
     }
@@ -116,7 +116,7 @@
 
     .nav-actions .action-primary {
       @include red-button();
-      @include font-size(12); // needed due to bad button mixins for now
+      @extend %t-action4;
       border-color: $red-d2;
     }
 
@@ -134,7 +134,7 @@
 
     .nav-actions .action-primary {
       @include blue-button();
-      @include font-size(12); // needed due to bad button mixins for now
+      @extend %t-action4;
       border-color: $blue-d2;
     }
 
@@ -152,7 +152,7 @@
 
     .nav-actions .action-primary {
       @include green-button();
-      @include font-size(12); // needed due to bad button mixins for now
+      @extend %t-action4;
       border-color: $green-d2;
     }
 
@@ -170,7 +170,7 @@
 
     .nav-actions .action-primary {
       @include pink-button();
-      @include font-size(12); // needed due to bad button mixins for now
+      @extend %t-action4;
       border-color: $pink-d2;
     }
 
@@ -407,7 +407,7 @@
 
   [class^="icon"] {
     @include transition (color 0.50s ease-in-out 0s);
-    @include font-size(22);
+    @extend %t-icon3;
     width: flex-grid(1, 12);
     height: ($baseline*1.25);
     margin-top: ($baseline/4);
@@ -585,7 +585,7 @@
 
   [class^="icon"] {
     @include transition (color 0.50s ease-in-out 0s);
-    @include font-size(22);
+    @extend %t-icon3;
     width: flex-grid(1, 12);
     margin: ($baseline/4) flex-gutter() 0 0;
     text-align: right;
@@ -656,7 +656,7 @@
     }
 
     [class^="icon"] {
-      @include font-size(14);
+      @extend %t-icon6;
       color: $white;
       width: auto;
       margin: 0;
@@ -847,7 +847,7 @@ body.uxdesign.alerts {
 .main-wrapper {
 
   .alert {
-    @include font-size(14);
+    @extend %t-copy-sub1;
     padding: 15px 20px;
     margin-bottom: 30px;
     border-radius: 3px;
@@ -895,7 +895,7 @@ body.error {
   }
 
   h1 {
-    @include font-size(60);
+    @extend %t-title1;
     @extend %t-light;
     float: none;
     margin: 0;
@@ -903,13 +903,13 @@ body.error {
   }
 
   .description {
-    @include font-size(21);
+    @extend %t-copy-lead2;
     margin-bottom: 50px;
   }
 
   .back-button {
-    @include font-size(18);
-    @include blue-button;
+    @include blue-button();
+    @extend %t-action1;
     padding: 14px 40px 18px;
   }
 }

cms/static/sass/elements/_tender-widget.scss

@@ -65,7 +65,7 @@
 }
 
 .widget-layout .header h1 {
-  @include font-size(22);
+  @extend %t-title4;
 }
 
 .widget-layout .content {
@@ -86,14 +86,14 @@
 }
 
 .widget-layout label {
-  @include font-size(14);
+  @extend %t-copy-sub1;
   @extend %t-strong;
   margin-bottom: 5px;
   color: #4c4c4c;
 }
 
 .widget-layout input[type="text"], .widget-layout textarea {
-  @include font-size(16);
+  @extend %t-copy-base;
   padding: 10px;
   color: rgb(0,0,0) !important;
   border: 1px solid #b0b6c2;
@@ -177,7 +177,7 @@
 }
 
 .widget-layout #discussion_body:before {
-  @include font-size(14);
+  @extend %t-copy-sub1;
   @extend %t-strong;
   content: "What Question or Feedback Would You Like to Share?";
   display: block;
@@ -214,7 +214,7 @@
 }
 
 .widget-layout .form-actions .btn-post_topic {
-  @include font-size(16);
+  @extend %t-copy-base;
   @extend %t-strong;
   display: block;
   width: 100%;

cms/static/sass/elements/_typography.scss

@@ -138,6 +138,11 @@
   @include line-height(12);
 }
 
+%t-action5 {
+  @include font-size(10);
+  @include line-height(10);
+}
+
 
 // ====================
 

cms/static/sass/elements/_vendor.scss

@@ -3,7 +3,7 @@
 
 // JQUI calendar
 .ui-datepicker {
-  @include font-size(12);
+  @extend %t-copy-sub2;
   border-color: $darkGrey;
   border-radius: 2px;
   background: #fff;
@@ -92,8 +92,7 @@
   background: none;
 }
 .ui-widget {
-  @include font-size(16);
-  font-family: 'Open Sans', sans-serif;
+  @extend %t-copy-base;
 }
 
 .ui-widget-header {

cms/static/sass/elements/_xblocks.scss

@@ -539,8 +539,8 @@
 
     input, select, input[type="number"] {
       @include placeholder($gray-l4);
-      @include font-size(16);
       @include size(100%,100%);
+      @extend %t-copy-base;
       width: 45%;
       min-width: 100px;
       padding: ($baseline/2);
@@ -582,7 +582,7 @@
     }
 
     .action.setting-clear {
-      @include font-size(11);
+      @extend %t-action4;
       color: $gray;
       width: 25px;
       height: 25px;
@@ -609,7 +609,7 @@
     }
 
     .setting-help {
-      @include font-size(12);
+      @extend %t-copy-sub2;
       display: inline-block;
       font-color: $gray-l6;
       min-width: ($baseline*10);
@@ -674,7 +674,7 @@
 
       .remove-setting {
         @include transition(color 0.25s ease-in-out);
-        @include font-size(20);
+        @extend %t-action1;
         display: inline-block;
         background: transparent;
         color: $blue-l3;
@@ -745,7 +745,7 @@
 
       .remove-setting {
         @include transition(color 0.25s ease-in-out);
-        @include font-size(20);
+        @extend %t-action1;
         display: inline-block;
         background: transparent;
         color: $blue-l3;

cms/static/sass/elements/_xmodules.scss

@@ -136,7 +136,7 @@
         margin-top: 10px;
 
         .transcripts-message {
-          @include font-size(12);
+          @extend %t-copy-sub2;
         }
 
         .transcripts-message-status {
@@ -149,15 +149,15 @@
 
           [class^="icon-"],
           [class*=" icon-"] {
+            @extend %t-icon4;
             margin-right: 5px;
-            @include font-size(18);
           }
         }
 
         .transcripts-error-message {
+          @extend %t-copy-sub1;
           background: $red;
           color: $white;
-          @include font-size(14);
           padding: ($baseline/3);
 
           &.is-invisible {
@@ -191,7 +191,7 @@
     }
 
     .progress-bar {
-      @include font-size(18);
+      @extend %t-copy-lead1;
       display: block;
       height: 30px;
       margin: 10px 0;
@@ -318,7 +318,7 @@
 
         .remove-setting {
           @include transition(color .25s ease-in-out);
-          @include font-size(20);
+          @extend %t-action1;
           display: inline-block;
           background: transparent;
           color: $blue-l3;

cms/static/sass/views/_assets.scss

@@ -35,7 +35,7 @@
     color: $gray;
 
     .new-button {
-      @include font-size(14);
+      @extend %t-action3;
       margin-left: $baseline;
 
       [class^="icon-"] {
@@ -414,8 +414,8 @@
     }
 
     .choose-file-button {
-      @include font-size(17);
-      @include blue-button;
+      @include blue-button();
+      @extend %t-action2;
       padding: 10px 82px 12px;
     }
 

cms/static/sass/views/_checklists.scss

@@ -63,7 +63,7 @@
 
         .ui-toggle-expansion {
           @include transition(all $tmg-f2 ease-in-out 0s);
-          @include font-size(21);
+          @extend %t-action1;
           display: inline-block;
           vertical-align: middle;
           margin-right: ($baseline/2);
@@ -93,7 +93,7 @@
 
 
         .icon-ok {
-          @include font-size(20);
+          @extend %t-icon4;
           display: inline-block;
           margin-left: ($baseline/2);
           color: $gray-l4;
@@ -130,7 +130,7 @@
         float: left;
 
         .icon-add {
-          @include font-size(12);
+          @extend %t-icon7;
           display: inline-block;
           vertical-align: middle;
           margin-right: ($baseline/4);
@@ -144,7 +144,7 @@
         float: right;
 
         .icon-delete {
-          @include font-size(12);
+          @extend %t-icon7;
           display: inline-block;
           vertical-align: middle;
           margin-right: ($baseline/4);

cms/static/sass/views/_container.scss

@@ -19,9 +19,7 @@
       .page-header {
 
         .page-header-title {
-          @include font-size(28);
-          @include line-height(32);
-          @extend %t-title;
+          @extend %t-title4;
           @extend %t-strong;
         }
 

cms/static/sass/views/_dashboard.scss

@@ -166,7 +166,7 @@
 
         .icon-cog {
           @include transition(all $tmg-f1 ease-in-out $tmg-f1);
-          @include font-size(20);
+          @extend %t-icon4;
           position: absolute;
           top: ($baseline/2);
           left: -($baseline);

cms/static/sass/views/_export-git.scss

@@ -23,20 +23,20 @@
   }
 
   h3 {
-    @include font-size(19);
+    @extend %t-title5;
     @extend %t-strong;
   }
 
   .export-git-info-block {
 
     dt {
-      @include font-size(19);
+      @extend %t-copy-lead1;
       @extend %t-strong;
       margin-top: 12px;
     }
 
     dd {
-      @include font-size(17);
+      @extend %t-copy-base;
       margin-bottom: 20px;
     }
 

cms/static/sass/views/_export.scss

@@ -90,13 +90,13 @@
 
   // OLD
   .description {
-    @include font-size(14);
+    @extend %t-copy-sub1;
     float: left;
     width: 62%;
     margin-right: 3%;
 
     h2 {
-      @include font-size(19);
+      @extend %t-title5;
       @extend %t-strong;
       margin-bottom: 20px;
     }
@@ -132,13 +132,13 @@
       text-align: center;
 
       h2 {
-        @include font-size(26);
+        @extend %t-title4;
         @extend %t-light;
         margin-bottom: 30px;
       }
 
       .error-block {
-        @include font-size(13);
+        @extend %t-copy-sub1;
         display: none;
         margin-bottom: 15px;
       }
@@ -149,12 +149,12 @@
 
       .button-export {
         @include green-button();
-        @include font-size(17);
+        @extend %t-action1;
         padding: 10px 50px 11px;
       }
 
       .message-status {
-        @include font-size(12);
+        @extend %t-copy-sub2;
         margin-top: 10px;
       }
 

cms/static/sass/views/_group-configuration.scss

@@ -28,7 +28,7 @@
     }
 
     .new-button {
-      @include font-size(14);
+      @extend %t-action3;
       margin-left: $baseline;
 
       [class^="icon-"] {
@@ -51,10 +51,8 @@
           }
 
           .group-configuration-title {
-            @extend %t-title;
+            @extend %t-title4;
             @extend %t-strong;
-            @include font-size(22);
-            @include line-height(22);
             overflow: hidden;
             text-overflow: ellipsis;
             margin-right: ($baseline*14);
@@ -109,7 +107,7 @@
 
           .ui-toggle-expansion {
             @include transition(rotate .15s ease-in-out .25s);
-            @include font-size(21);
+            @extend %t-action1;
             display: inline-block;
             width: ($baseline*0.75);
             vertical-align: baseline;
@@ -133,9 +131,7 @@
             margin-bottom: ($baseline*0.75);
 
             .group {
-              @extend %t-copy-sub2;
-              @include font-size(18);
-              @include line-height(16);
+              @extend %t-copy-lead1;
               padding: ($baseline/7) 0 ($baseline/4);
               border-top: 1px solid $gray-l4;
               white-space: nowrap;
@@ -193,7 +189,7 @@
         }
 
         .wrapper-group-configuration-usages {
-          @include font-size(14);
+          @extend %t-copy-sub1;
           background-color: #f8f8f8;
           box-shadow: 0 2px 2px 0 $shadow inset;
           padding: $baseline ($baseline*1.5) $baseline ($baseline*2.5);
@@ -445,7 +441,7 @@
 
             .action-close {
               @include transition(color 0.25s ease-in-out);
-              @include font-size(22);
+              @extend %t-action1;
               display: inline-block;
               border: 0;
               padding: 0;
@@ -471,8 +467,8 @@
 
       .action-add-group {
         @extend %ui-btn-flat-outline;
+        @extend %t-action2;
         @extend %t-strong;
-        @include font-size(16);
         display: block;
         width: 100%;
         margin: ($baseline*1.5) 0 0 0;

cms/static/sass/views/_import.scss

@@ -137,7 +137,7 @@
 
         *[class^="icon-"] {
           @include transition(opacity $tmg-f1 ease-in-out 0);
-          @include font-size(22);
+          @extend %t-icon4;
           position: absolute;
           top: ($baseline/2);
           left: $baseline;

cms/static/sass/views/_index.scss

@@ -163,8 +163,8 @@
               opacity: 0.0;
 
               [class^="icon-"] {
-                @include font-size(18);
                 @include border-top-radius(3px);
+                @extend %t-icon4;
                 display: inline-block;
                 padding: ($baseline/2);
                 background: $blue;

cms/static/sass/views/_outline.scss

@@ -118,7 +118,7 @@
   // forms
   .new-section-name,
   .new-subsection-name-input {
-    @include font-size(16);
+    @extend %t-copy-base;
     display: inline-block;
     width: 515px;
     padding: ($baseline/4);
@@ -126,11 +126,11 @@
   }
 
   .new-subsection-name-input {
-    @include font-size(14);
+    @extend %t-copy-sub1;
   }
   .new-section-name-save,
   .new-subsection-name-save {
-    @include blue-button;
+    @include blue-button();
     margin: 0 5px;
     padding: 4px 20px 7px;
     color: $white;
@@ -138,7 +138,7 @@
 
   .new-section-name-cancel,
   .new-subsection-name-cancel {
-    @include white-button;
+    @include white-button();
     padding: 4px 20px 7px;
     color: $gray-l1;
   }

cms/static/sass/views/_settings.scss

@@ -17,7 +17,7 @@
 
   // messages - should be synced up with global messages in the future
   .message {
-    @include font-size(14);
+    @extend %t-copy-sub1;
     display: block;
   }
 
@@ -120,8 +120,7 @@
     }
 
     .new-button {
-      // @extend %t-action3; - bad buttons won't render this properly
-      @include font-size(14);
+      @extend %t-action3;
     }
 
     // form basics
@@ -623,7 +622,7 @@
               }
 
               .remove-button {
-                @include font-size(10);
+                @extend %t-action5;
                 display: none;
                 position: absolute;
                 top: -17px;
@@ -653,11 +652,10 @@
               }
 
               .letter-grade {
-                @include font-size(16);
-                @include line-height(16);
+                @extend %t-copy-base;
                 @extend %t-strong;
                 display: block;
-                margin: 10px 15px 0 0;
+                margin: 5px 15px 0 0;
               }
 
               .range {

cms/static/sass/views/_static-pages.scss

@@ -331,8 +331,8 @@
   }
 
   .xblock-student_view {
-    @include font-size(24);
     @include transition(background-color $tmg-s3 linear 0s);
+    @extend %t-title4;
     padding: 20px 20px 22px;
     background: #fff;
   }
@@ -347,7 +347,7 @@
     box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
 
     .page-name {
-      @include font-size(19);
+      @extend %t-title5;
       @extend %t-strong;
     }
 
@@ -373,14 +373,14 @@
   }
 
   .page-display-name-input {
-    @include font-size(20);
+    @extend %t-copy-lead1;
     width: 100%;
   }
 
   .page-contents {
-    @include font-size(13);
     @include box-sizing(border-box);
     @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
+    @extend %t-copy-sub1;
     width: 100%;
     height: 360px;
     padding: 15px;

cms/static/sass/views/_textbooks.scss

@@ -36,7 +36,7 @@
 
         .ui-toggle-expansion {
           @include transition(rotate .15s ease-in-out .25s);
-          @include font-size(21);
+          @extend %t-action1;
           display: inline-block;
           width: ($baseline*0.75);
           vertical-align: text-bottom;
@@ -325,7 +325,7 @@
 
           .action-close {
             @include transition(color 0.25s ease-in-out);
-            @include font-size(22);
+            @extend %t-action1;
             display: inline-block;
             float: right;
             margin-top: ($baseline*2);
@@ -344,7 +344,7 @@
 
       .action-add-chapter {
         @extend %ui-btn-flat-outline;
-        @include font-size(16);
+        @extend %t-action1;
         display: block;
         width: 100%;
         margin: ($baseline*1.5) 0 0 0;

cms/static/sass/views/_updates.scss

@@ -54,13 +54,13 @@
     }
 
     h1 {
-      @include font-size(24);
+      @extend %t-title4;
       @extend %t-light;
       float: none;
     }
 
     h2 {
-      @include font-size(14);
+      @extend %t-title7;
       @extend %t-strong;
       margin-bottom: 18px;
       line-height: 30px;
@@ -70,7 +70,7 @@
     }
 
     h3 {
-      @include font-size(16);
+      @extend %t-title6;
       @extend %t-strong;
       margin: 34px 0 11px;
     }
@@ -78,7 +78,7 @@
 
   .update-contents {
     p {
-      @include font-size(16);
+      @extend %t-copy-base;
       line-height: 25px;
     }
 
@@ -111,7 +111,7 @@
     }
 
     pre {
-      @include font-size(16);
+      @extend %t-copy-base;
       margin: 1em 0;
       color: $baseFontColor;
       font-family: monospace, serif;
@@ -144,8 +144,8 @@
 
     .edit-button,
     .delete-button {
-      @include font-size(12);
-      @include white-button;
+      @include white-button();
+      @extend %t-action4;
       @extend %t-regular;
       float: left;
       padding: 3px 10px 4px;
@@ -169,14 +169,14 @@
   background: $lightGrey;
 
   .title {
-    @include font-size(22);
+    @extend %t-title4;
     @extend %t-light;
     margin-bottom: 24px;
   }
 
   .edit-button {
     @include white-button();
-    @include font-size(12);
+    @extend %t-action4;
     @extend %t-regular;
     float: right;
     padding: 3px 10px 4px;
@@ -189,7 +189,7 @@
   }
 
   .handouts-content {
-    font-size: 14px;
+    @extend %t-copy-sub1;
   }
 
   .treeview-handoutsnav li {

common/static/sass/_mixins-inherited.scss

@@ -119,8 +119,8 @@
 
 // mixins - grandfathered
 @mixin button {
-  @include font-size(14);
   @include transition(background-color 0.15s, box-shadow 0.15s);
+  @extend %t-action3;
   @extend %t-strong;
   box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0);
   display: inline-block;
@@ -367,7 +367,7 @@
 
   .section-item {
     @include transition(background $tmg-avg ease-in-out 0);
-    @include font-size(13);
+    @extend %t-action3;
     position: relative;
     display: block;
     padding: 6px 8px 8px 16px;
@@ -388,8 +388,8 @@
     .draft-item:after,
     .public-item:after,
     .private-item:after {
-      @include font-size(9);
       @extend %t-strong;
+      @extend %t-action5;
       margin-left: 3px;
       text-transform: uppercase;
     }

common/static/sass/_mixins.scss

@@ -297,7 +297,7 @@
   .button,
   .action {
     @extend %btn-primary-green;
-    @include font-size(14);
+    @extend %t-action3;
     margin-left: $baseline;
 
     [class^="icon-"] {