Studio: refactoring font-weight CSS rules to use Sass placeholders

cms/static/sass/_base.scss

@@ -30,7 +30,7 @@ a {
 
 h1 {
   @extend %t-title4;
-  font-weight: 300;
+  @extend %t-light;
 }
 
 .waiting {
@@ -52,23 +52,23 @@ h1 {
 // typography - basic
 .page-header {
   @extend %t-title3;
+  @extend %t-strong;
   display: block;
-  font-weight: 600;
   color: $gray-d3;
 
   .navigation, .subtitle {
     @extend %t-title7;
+    @extend %t-regular;
     position: relative;
     top: ($baseline/4);
     display: block;
     color: $gray-l2;
-    font-weight: 400;
   }
 }
 
 .section-header {
   @extend %t-title4;
-  font-weight: 600;
+  @extend %t-strong;
 
   .subtitle {
     @extend %t-title7;
@@ -77,7 +77,7 @@ h1 {
 
 .area-header {
   @extend %t-title6;
-  font-weight: 600;
+  @extend %t-strong;
 
   .subtitle {
     @extend %t-title8;
@@ -86,7 +86,7 @@ h1 {
 
 .area-subheader {
   @extend %t-title7;
-  font-weight: 600;
+  @extend %t-strong;
 
   .subtitle {
     @extend %t-title9;
@@ -163,7 +163,7 @@ h1 {
 
 // typography - loose headings (BT: needs to be removed once html is clean)
 .title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
-  font-weight: 600;
+  @extend %t-strong;
 }
 
 // typography - primary content
@@ -214,22 +214,22 @@ h1 {
 
 .title-4 {
   @extend %t-title7;
+  @extend %t-regular;
   margin-bottom: $baseline;
-  font-weight: 500
 }
 
 .title-5 {
   @extend %t-title7;
+  @extend %t-regular;
   color: $gray-l1;
   margin-bottom: $baseline;
-  font-weight: 500
 }
 
 .title-6 {
   @extend %t-title7;
+  @extend %t-regular;
   color: $gray-l2;
   margin-bottom: $baseline;
-  font-weight: 500
 }
 
 p, ul, ol, dl {
@@ -317,16 +317,16 @@ hr.divide {
   label {
     display: block;
     margin-bottom: 6px;
-    font-weight: 700;
+    @extend %t-strong;
 
     &.inline-label {
       display: inline;
     }
 
     .description {
+      @extend %t-regular;
       display: block;
       font-size: 11px;
-      font-weight: 400;
       font-style: italic;
       line-height: 1.3;
       color: #999;
@@ -366,28 +366,28 @@ hr.divide {
   }
 
   strong {
+    @extend %t-strong;
     display: block;
     margin-bottom: 10px;
     font-size: 16px;
-    font-weight: 700;
     text-align: center;
   }
 
   .close-button {
+    @extend %t-strong;
     position: absolute;
     top: 0;
     right: 0;
     width: 27px;
     height: 27px;
     font-size: 22px;
-    font-weight: 700;
     line-height: 25px;
     color: #aaa;
     text-align: center;
 
     .close-icon {
+      @extend %t-strong;
       font-size: 16px;
-      font-weight: 700;
     }
   }
 
@@ -418,8 +418,8 @@ hr.divide {
   }
 
   &:after {
-    content: '';
     @extend .spinner-icon;
+    content: '';
     display: block;
     position: absolute;
     top: 50%;
@@ -475,12 +475,12 @@ hr.divide {
 .edit-button.standard,
 .delete-button.standard,
 .duplicate-button.standard {
-  @extend %t-action4;
   @include white-button;
+  @extend %t-regular;
+  @extend %t-action4;
   float: left;
   padding: 3px 10px 4px;
   margin-left: 7px;
-  font-weight: 400;
 
   .edit-icon,
   .delete-icon,
@@ -499,6 +499,7 @@ hr.divide {
 .tooltip {
   @include font-size(12);
   @include transition(opacity $tmg-f3 ease-out 0s);
+  @extend %t-regular;
   @extend %ui-depth5;
   position: absolute;
   top: 0;
@@ -506,7 +507,6 @@ hr.divide {
   padding: 0 10px;
   border-radius: 3px;
   background: rgba(0, 0, 0, 0.85);
-  font-weight: normal;
   line-height: 26px;
   color: $white;
   pointer-events: none;
@@ -635,8 +635,8 @@ body.js {
 
     .title {
       @extend %t-title5;
+      @extend %t-strong;
       margin: 0 0 ($baseline/2) 0;
-      font-weight: 600;
       color: $gray-d3;
     }
 

cms/static/sass/_reset.scss

@@ -127,8 +127,8 @@ abbr[title] {
 		margin: 0;
 	}
 	a {
+		@extend %t-regular;
 		float: none;
-		font-weight: normal;
 	}
 }
 
@@ -152,9 +152,9 @@ abbr[title] {
 		opacity: 0.8;
 
 		&:ui-state-active {
+			@extend %t-regular;
 			background-color: rgba(255, 255, 255, .3);
 			opacity: 1.0;
-			font-weight: 400;
 		}
 		a:focus {
 			outline: none;

cms/static/sass/_shame.scss

@@ -44,7 +44,7 @@
 // yes we have no boldness today - need to fix the resets
 body strong,
 body b {
-  font-weight: 700;
+  @extend %t-ultrastrong;
 }
 
 // ====================

cms/static/sass/assets/_graphics.scss

@@ -156,9 +156,9 @@
 .draft-tag,
 .public-tag,
 .private-tag {
+	@extend %t-strong;
 	margin-left: 3px;
 	font-size: 9px;
-	font-weight: 600;
 	text-transform: uppercase;
 	color: #a4aab7;
 }

cms/static/sass/elements/_forms.scss

@@ -124,7 +124,7 @@ form[class^="create-"] {
 
   .title {
     @extend %t-title4;
-    font-weight: 600;
+    @extend %t-strong;
     padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
   }
 
@@ -146,7 +146,7 @@ form[class^="create-"] {
       &.required {
 
         label {
-          font-weight: 600;
+          @extend %t-strong;
         }
 
         label:after {
@@ -308,9 +308,9 @@ form[class^="create-"] {
 
     .action {
       @include transition(all $tmg-f2 linear 0s);
+      @extend %t-strong;
       display: inline-block;
       padding: ($baseline/5) $baseline;
-      font-weight: 600;
       text-transform: uppercase;
     }
 

cms/static/sass/elements/_header.scss

@@ -52,9 +52,9 @@
 
     > ol > .nav-item {
       @extend %t-action3;
+      @extend %t-strong;
       display: inline-block;
       vertical-align: middle;
-      font-weight: 600;
 
       &:last-child {
         margin-right: 0;
@@ -149,12 +149,12 @@
 
     .course-title {
       @extend %t-action2;
+      @extend %t-strong;
       display: block;
       width: 100%;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      font-weight: 600;
     }
 
     // entire link
@@ -311,17 +311,17 @@
       .action-signup {
         @include blue-button;
         @include font-size(14);
+        @extend %t-strong;
         padding: ($baseline/4) ($baseline/2);
         text-transform: uppercase;
-        font-weight: 600;
       }
 
       .action-signin {
         @include white-button;
         @include font-size(14);
+        @extend %t-strong;
         padding: ($baseline/4) ($baseline/2);
         text-transform: uppercase;
-        font-weight: 600;
       }
     }
   }

cms/static/sass/elements/_icons.scss

@@ -25,11 +25,11 @@
 
 %ui-badge {
   @extend %t-title9;
+  @extend %t-strong;
   position: relative;
   border-bottom-right-radius: ($baseline/10);
   border-bottom-left-radius: ($baseline/10);
   padding: ($baseline/4) ($baseline/2) ($baseline/4) ($baseline/2);
-  font-weight: 600;
   text-transform: uppercase;
 
   * [class^="icon-"] {

cms/static/sass/elements/_layout.scss

@@ -178,9 +178,9 @@
 
     .title-1 {
       @extend %t-title3;
+      @extend %t-strong;
       margin: 0;
       padding: 0;
-      font-weight: 600;
       color: $gray-d3;
     }
   }

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

@@ -25,8 +25,8 @@
 
     .title {
       @extend %t-title5;
+      @extend %t-strong;
       margin: ($baseline/4) ($baseline/2) ($baseline/2) ($baseline/2);
-      font-weight: 600;
       color: $black;
     }
 
@@ -253,9 +253,9 @@
 
         label {
           @extend %t-copy-sub1;
+          @extend %t-strong;
           @include transition(color $tmg-f3 ease-in-out 0s);
           margin: 0 0 ($baseline/4) 0;
-          font-weight: 600;
 
           &.is-focused {
             color: $blue;
@@ -391,11 +391,11 @@
 
         .component-name {
           @extend %t-title5;
+          @extend %t-strong;
           display: inline-block;
           vertical-align: middle;
           width: 48%;
           margin-left: ($baseline/2);
-          font-weight: 600;
           color: $black;
 
           em {
@@ -419,12 +419,12 @@
             a.tab {
               @extend %btn-secondary-gray;
               @extend %t-copy-sub1;
+              @extend %t-regular;
               background-image: none;
               box-shadow: none;
               border: 0;
               padding: ($baseline/4) ($baseline/2);
               text-transform: uppercase;
-              font-weight: normal;
 
               &.current {
                 background-color: $gray-d1;

cms/static/sass/elements/_modal.scss

@@ -36,10 +36,10 @@
 	}
 
 	h2 {
+		@extend %t-light;
 		margin: 0 10px 30px;
 		color: #646464;
 		font-size: 19px;
-		font-weight: 300;
 		letter-spacing: 1px;
 		text-transform: uppercase;
 	}

cms/static/sass/elements/_modules.scss

@@ -11,10 +11,10 @@
 
   .bar-mod-title {
     @extend %t-title6;
+    @extend %t-strong;
     display: block;
     padding: ($baseline/2) ($baseline*.75);
     background-color: $gray-l4;
-    font-weight: 600;
   }
 
   .bar-mod-content {
@@ -24,8 +24,8 @@
 
     .title {
       @extend %t-title8;
+      @extend %t-strong;
       margin-bottom: ($baseline/4);
-      font-weight: 600;
       color: $gray-l2;
       text-transform: uppercase;
     }
@@ -108,9 +108,9 @@
 
     h5 {
       @extend %t-title5;
+      @extend %t-strong;
       margin-bottom: ($baseline*.75);
       color: $green-d1;
-      font-weight: 600;
     }
 
     // add component - list of green buttons
@@ -198,12 +198,12 @@
     a {
       @include clearfix();
       @include transition(none);
+      @extend %t-strong;
       display: block;
       border: 0px;
       padding: 7px $baseline;
       background: $white;
       color: $gray-d3;
-      font-weight: 500;
 
 
       &:hover {

cms/static/sass/elements/_navigation.scss

@@ -118,11 +118,11 @@ nav {
 
     .nav-item {
       @extend %t-action3;
+      @extend %t-strong;
       display: block;
       margin: 0 0 ($baseline/4) 0;
       border-bottom: 1px solid $gray-l5;
       padding: 0 0($baseline/4) 0;
-      font-weight: 500;
 
       &:last-child {
         margin-bottom: 0;

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

@@ -8,13 +8,13 @@
 }
 
 .message-status {
-  display: none;
   @include border-top-radius(2px);
   @include box-sizing(border-box);
+  @extend %t-strong;
+  display: none;
   border-bottom: 2px solid $yellow-d2;
   margin: 0 0 $baseline 0;
   padding: ($baseline/2) $baseline;
-  font-weight: 500;
   background: $yellow-d1;
   color: $white;
 
@@ -234,7 +234,7 @@
 
       .action-primary {
         @extend %t-action4;
-        font-weight: 600;
+        @extend %t-strong;
       }
 
       .action-secondary {
@@ -396,7 +396,7 @@
   min-width: $fg-min-width;
 
   strong {
-    font-weight: 700;
+    @extend %t-strong;
   }
 
   [class^="icon"], .copy {
@@ -459,8 +459,8 @@
 
     .action-primary {
       @include blue-button();
+      @extend %t-strong;
       border-color: $blue-d2;
-      font-weight: 600;
     }
 
     .action-secondary {
@@ -576,7 +576,7 @@
   color: $white;
 
   strong {
-    font-weight: 700;
+    @extend %t-strong;
   }
 
   [class^="icon"], .copy {
@@ -609,37 +609,37 @@
       width: flex-grid(1, 12);
     }
 
-  	.copy {
-  		width: flex-grid(7, 12);
-  		margin-right: flex-gutter();
-  	}
+    .copy {
+      width: flex-grid(7, 12);
+      margin-right: flex-gutter();
+    }
 
-  	.nav-actions {
-  	  width: flex-grid(4, 12);
-      float: right;
-      margin-top: ($baseline/2);
-  	  text-align: right;
+    .nav-actions {
+     width: flex-grid(4, 12);
+     float: right;
+     margin-top: ($baseline/2);
+     text-align: right;
 
-  	  .nav-item {
-  	    display: inline-block;
-  	    vertical-align: middle;
-  	    margin-right: ($baseline/2);
+     .nav-item {
+       display: inline-block;
+       vertical-align: middle;
+       margin-right: ($baseline/2);
 
-  	    &:last-child {
-  	      margin-right: 0;
-  	    }
+       &:last-child {
+         margin-right: 0;
+       }
 
-        .action-primary {
-          @extend %t-action4;
-          font-weight: 600;
-        }
+       .action-primary {
+        @extend %t-action4;
+        @extend %t-strong;
+      }
 
-        .action-secondary {
-          @extend %t-action4;
-        }
-  	  }
-  	}
+      .action-secondary {
+        @extend %t-action4;
+      }
+    }
   }
+}
 
   // with cancel
   .action-alert-close {
@@ -863,7 +863,7 @@ body.uxdesign.alerts {
     }
 
     strong {
-      font-weight: 700;
+      @extend %t-strong;
     }
 
     .alert-action {
@@ -877,38 +877,38 @@ body.uxdesign.alerts {
 }
 
 body.error {
-	background: $gray-d4;
-	color: $gray-d3;
-
-	.primary-header {
-		display: none;
-	}
-
-	.error-prompt {
-		width: 700px;
-		margin: 150px auto;
-		padding: 60px 50px 90px;
-		border-radius: 3px;
-		background: $white;
-		text-align: center;
-	}
-
-	h1 {
-		float: none;
-		margin: 0;
-		font-size: 60px;
-		font-weight: 300;
-		color: $gray-d3;
-	}
-
-	.description {
-		margin-bottom: 50px;
-		font-size: 21px;
-	}
-
-	.back-button {
-		@include blue-button;
-		padding: 14px 40px 18px;
-		font-size: 18px;
-	}
+  background: $gray-d4;
+  color: $gray-d3;
+
+  .primary-header {
+    display: none;
+  }
+
+  .error-prompt {
+    width: 700px;
+    margin: 150px auto;
+    padding: 60px 50px 90px;
+    border-radius: 3px;
+    background: $white;
+    text-align: center;
+  }
+
+  h1 {
+    @extend %t-light;
+    float: none;
+    margin: 0;
+    font-size: 60px;
+    color: $gray-d3;
+  }
+
+  .description {
+    margin-bottom: 50px;
+    font-size: 21px;
+  }
+
+  .back-button {
+    @include blue-button;
+    padding: 14px 40px 18px;
+    font-size: 18px;
+  }
 }

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

@@ -8,7 +8,7 @@
 
   .title {
     @extend %t-title4;
-    font-weight: 600;
+    @extend %t-strong;
   }
 
   .copy {
@@ -16,7 +16,7 @@
   }
 
   strong {
-    font-weight: 600;
+    @extend %t-strong;
   }
 
   // CASE: has links alongside
@@ -56,8 +56,8 @@
 
   .title {
     @extend %t-title6;
+    @extend %t-strong;
     margin-bottom: ($baseline/2);
-    font-weight: 700;
   }
 
   .copy {
@@ -72,7 +72,7 @@
   }
 
   strong {
-    font-weight: 600;
+    @extend %t-strong;
   }
 
   &.has-status {
@@ -230,9 +230,9 @@
 
   h3, .title {
     @extend %t-title7;
+    @extend %t-strong;
     margin: 0 0 ($baseline/4) 0;
     color: $gray-d2;
-    font-weight: 600;
   }
 
   p, .copy {

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

@@ -61,7 +61,7 @@
 }
 
 .widget-layout h1, .widget-layout h2, .widget-layout h3, .widget-layout h4, .widget-layout h5, .widget-layout h6, .widget-layout label {
-  font-weight: 600;
+  @extend %t-strong;
 }
 
 .widget-layout .header h1 {
@@ -86,10 +86,10 @@
 }
 
 .widget-layout label {
+  @extend %t-strong;
   font-size: 14px;
   margin-bottom: 5px;
   color: #4c4c4c;
-  font-weight: 500;
 }
 
 .widget-layout input[type="text"], .widget-layout textarea {
@@ -177,12 +177,12 @@
 }
 
 .widget-layout #discussion_body:before {
+  @extend %t-strong;
   content: "What Question or Feedback Would You Like to Share?";
   display: block;
   font-size: 14px;
   margin-bottom: 5px;
   color: #4c4c4c;
-  font-weight: 500;
 }
 
 
@@ -203,8 +203,8 @@
 }
 
 .widget-layout dl#brain_buster_captcha dd label {
+  @extend %t-strong;
   display: block;
-  font-weight: 700;
   margin: 0 15px 5px 0 !important;
 }
 
@@ -214,11 +214,11 @@
 }
 
 .widget-layout .form-actions .btn-post_topic {
+  @extend %t-strong;
   display: block;
   width: 100%;
   height: auto !important;
   font-size: 16px;
-  font-weight: 700;
   -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0);
   -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0);
   box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0);

cms/static/sass/elements/_xblocks.scss

@@ -313,11 +313,11 @@
     }
 
     .xblock-header-primary {
+      @extend %t-light;
       display: flex;
       margin-bottom: 0;
       border-bottom: 1px solid $gray-l4;
       background-color: $gray-l6;
-      font-weight: 300;
     }
 
     .xblock-render {
@@ -434,10 +434,10 @@
     .upload-setting {
       @extend %ui-btn-flat-outline;
       @extend %t-action3;
+      @extend %t-strong;
       @include box-sizing(border-box);
       display: inline-block;
       padding: ($baseline/2);
-      font-weight: 600;
       width: 49%;
       margin-right: 2%;
     }
@@ -445,10 +445,10 @@
     .download-setting {
       @extend %ui-btn-non;
       @extend %t-action4;
+      @extend %t-strong;
       @include box-sizing(border-box);
       display: inline-block;
       padding: ($baseline/2);
-      font-weight: 600;
       width: 49%;
       text-align: center;
       color: $blue;
@@ -521,8 +521,9 @@
     }
 
     .setting-label {
-      @extend %t-copy-sub1;
       @include transition(color $tmg-f2 ease-in-out 0s);
+      @extend %t-copy-sub1;
+      @extend %t-strong;
       vertical-align: middle;
       display: inline-block;
       position: relative;
@@ -530,7 +531,6 @@
       width: 25%;
       min-width: 100px;
       margin-right: ($baseline/2);
-      font-weight: 600;
 
       &.is-focused {
         color: $blue;
@@ -662,10 +662,10 @@
       .create-setting {
         @extend %ui-btn-flat-outline;
         @extend %t-action3;
+        @extend %t-strong;
         display: block;
         width: 100%;
         padding: ($baseline/2);
-        font-weight: 600;
 
         *[class^="icon-"] {
           margin-right: ($baseline/4);
@@ -733,10 +733,10 @@
       .create-setting {
         @extend %ui-btn-flat-outline;
         @extend %t-action3;
+        @extend %t-strong;
         display: block;
         width: 88%;
         padding: ($baseline/2);
-        font-weight: 600;
 
         *[class^="icon-"] {
           margin-right: ($baseline/4);

cms/static/sass/elements/_xmodules.scss

@@ -52,10 +52,10 @@
 
         .collapse-setting {
           @extend %t-action3;
+          @extend %t-strong;
           display: block;
           width: 100%;
           padding: ($baseline/2);
-          font-weight: 600;
 
           *[class^="icon-"] {
             margin-right: ($baseline/4);
@@ -140,8 +140,8 @@
         }
 
         .transcripts-message-status {
+          @extend %t-strong;
           color: $green;
-          font-weight: 700;
 
           &.status-error {
             color: $red;
@@ -282,9 +282,9 @@
         .create-setting {
           @extend %ui-btn-flat-outline;
           @extend %t-action3;
+          @extend %t-strong;
           display: block;
           padding: ($baseline/2);
-          font-weight: 600;
 
           *[class^="icon-"] {
             margin-right: ($baseline/4);
@@ -294,9 +294,9 @@
         .upload-setting {
           @extend %ui-btn-flat-outline;
           @extend %t-action3;
+          @extend %t-strong;
           display: inline-block;
           padding: ($baseline/2);
-          font-weight: 600;
           width: 49%;
           margin-right: 2%;
         }
@@ -304,9 +304,9 @@
         .download-setting {
           @extend %ui-btn-non;
           @extend %t-action4;
+          @extend %t-strong;
           display: inline-block;
           padding: ($baseline/2);
-          font-weight: 600;
           width: 49%;
           text-align: center;
           color: $blue;

cms/static/sass/views/_account.scss

@@ -29,9 +29,9 @@
 
       h1 {
         @extend %t-title3;
+        @extend %t-strong;
         margin: 0;
         padding: 0;
-        font-weight: 600;
       }
 
       .action {
@@ -70,13 +70,13 @@
         margin-top: $baseline;
 
         .action-primary {
-          @include blue-button;
-          @extend %t-action2;
+          @include blue-button();
           @include transition(all $tmg-f3 linear 0s);
+          @extend %t-action2;
+          @extend %t-strong;
           display: block;
           width: 100%;
           padding: ($baseline*0.75) ($baseline/2);
-          font-weight: 600;
           text-transform: uppercase;
         }
       }
@@ -96,7 +96,7 @@
           &.required {
 
             label {
-              font-weight: 600;
+              @extend %t-strong;
             }
 
             label:after {
@@ -228,9 +228,9 @@
 
       h3 {
         @extend %t-title7;
+        @extend %t-strong;
         margin: 0 0 ($baseline/4) 0;
         color: $gray-d2;
-        font-weight: 600;
       }
 
     }

cms/static/sass/views/_assets.scss

@@ -60,7 +60,7 @@
       .count-current-shown,
       .count-total,
       .sort-order {
-        font-weight: 700;
+        @extend %t-strong;
       }
     }
 
@@ -125,12 +125,12 @@
       .page-number-input,
       .total-pages {
         @extend %t-copy-base;
+        @extend %t-strong;
         width: ($baseline*2.5);
         margin: 0 ($baseline*0.75);
         padding: ($baseline/4);
         text-align: center;
         color: $gray;
-        font-weight: 600;
       }
 
       .current-page {
@@ -141,9 +141,9 @@
 
       .page-divider {
         @extend %t-title4;
+        @extend %t-regular;
         vertical-align: middle;
         color: $gray-l2;
-        font-weight: 400;
       }
 
 
@@ -207,8 +207,8 @@
 
 
         .current-sort {
+          @extend %t-strong;
           border-bottom: 1px solid $gray-l3;
-          font-weight: 700;
         }
 
         // CASE: embed column
@@ -404,9 +404,9 @@
 
     .title {
       @extend %t-title3;
+      @extend %t-light;
       float: none;
       margin: ($baseline*2) 0 ($baseline*1.5);
-      font-weight: 300;
     }
 
     .file-input {
@@ -471,9 +471,9 @@
       margin: ($baseline*1.5) 0 ($baseline*4);
 
       label {
+        @extend %t-strong;
         display: block;
         margin-bottom: ($baseline/2);
-        font-weight: 700;
       }
     }
 

cms/static/sass/views/_checklists.scss

@@ -101,17 +101,17 @@
 
         .status-count {
           @extend %t-copy-base;
+          @extend %t-strong;
           margin-left: ($baseline/4);
           margin-right: ($baseline/4);
           color: $gray-d3;
-          font-weight: 600;
         }
 
         .status-amount {
           @extend %t-copy-base;
+          @extend %t-strong;
           margin-left: ($baseline/4);
           color: $gray-d3;
-          font-weight: 600;
         }
       }
     }
@@ -140,7 +140,7 @@
       .action-secondary {
         @include grey-button();
         @extend %t-action3;
-        font-weight: 400;
+        @extend %t-regular;
         float: right;
 
         .icon-delete {
@@ -232,11 +232,11 @@
       }
 
       .task-details {
+        @extend %t-strong;
         display: inline-block;
         vertical-align: text-top;
         float: left;
         width: flex-grid(6,9);
-        font-weight: 500;
 
         .task-name {
           @include transition(color $tmg-f2 ease-in-out 0s);

cms/static/sass/views/_container.scss

@@ -19,10 +19,10 @@
       .page-header {
 
         .page-header-title {
-          @extend %t-title;
           @include font-size(28);
           @include line-height(32);
-          font-weight: 600;
+          @extend %t-title;
+          @extend %t-strong;
         }
 
         .is-editable {
@@ -52,8 +52,8 @@
 
           .button {
             @extend %t-action3;
+            @extend %t-regular;
             padding: ($baseline/4) ($baseline*.75);
-            font-weight: 400;
           }
         }
       }
@@ -150,22 +150,22 @@
 
         .date,
         .user {
-          font-weight: 600;
+          @extend %t-strong;
         }
       }
 
       .wrapper-release {
 
         .release-date {
-          font-weight: 600;
+          @extend %t-strong;
         }
       }
 
       .wrapper-visibility {
 
         .copy {
+          @extend %t-strong;
           margin-bottom: ($baseline/10);
-          font-weight: 600;
         }
 
         [class^="icon-"] {
@@ -213,7 +213,7 @@
 
         .date,
         .user {
-          font-weight: 600;
+          @extend %t-strong;
         }
       }
     }

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

@@ -23,15 +23,15 @@
   }
 
   h3 {
-      font-size: 19px;
-      font-weight: 700;
+    @extend %t-strong;
+    font-size: 19px;
   }
 
   .export-git-info-block {
 
     dt {
+      @extend %t-strong;
       font-size: 19px;
-      font-weight: 700;
       margin-top: 12px;
     }
 

cms/static/sass/views/_export.scss

@@ -96,13 +96,13 @@
     font-size: 14px;
 
     h2 {
-      font-weight: 700;
+      @extend %t-strong;
       font-size: 19px;
       margin-bottom: 20px;
     }
 
     strong {
-      font-weight: 700;
+      @extend %t-strong;
     }
 
     p + p {
@@ -132,9 +132,9 @@
       text-align: center;
 
       h2 {
+        @extend %t-light;
         margin-bottom: 30px;
         font-size: 26px;
-        font-weight: 300;
       }
 
       .error-block {

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

@@ -52,12 +52,12 @@
 
           .group-configuration-title {
             @extend %t-title;
+            @extend %t-strong;
             @include font-size(22);
             @include line-height(22);
             overflow: hidden;
             text-overflow: ellipsis;
             margin-right: ($baseline*14);
-            font-weight: bold;
 
             .group-toggle {
               display: inline-block;
@@ -248,21 +248,21 @@
           // add a group is below with groups styling
           .action-primary {
             @include blue-button;
-            @extend %t-action2;
             @include transition(all .15s);
+            @extend %t-action2;
+            @extend %t-strong;
             display: inline-block;
             padding: ($baseline/5) $baseline;
-            font-weight: 600;
             text-transform: uppercase;
           }
 
           .action-secondary {
             @include grey-button;
-            @extend %t-action2;
             @include transition(all .15s);
+            @extend %t-action2;
+            @extend %t-strong;
             display: inline-block;
             padding: ($baseline/5) $baseline;
-            font-weight: 600;
             text-transform: uppercase;
           }
 
@@ -282,7 +282,7 @@
           color: $gray;
 
           strong {
-            font-weight: 600;
+            @extend %t-strong;
           }
         }
 
@@ -300,7 +300,7 @@
             &.required {
 
               label {
-                font-weight: 600;
+                @extend %t-strong;
               }
 
               label:after {
@@ -393,7 +393,7 @@
               color: $gray-l1;
 
               .group-configuration-value {
-                font-weight: 600;
+                @extend %t-strong;
                 white-space: nowrap;
                 margin-left: ($baseline*0.5);
               }
@@ -405,7 +405,7 @@
           }
 
           label.required {
-            font-weight: 600;
+            @extend %t-strong;
 
             &:after {
               margin-left: ($baseline/4);
@@ -471,12 +471,12 @@
 
       .action-add-group {
         @extend %ui-btn-flat-outline;
+        @extend %t-strong;
         @include font-size(16);
         display: block;
         width: 100%;
         margin: ($baseline*1.5) 0 0 0;
         padding: ($baseline/2);
-        font-weight: 600;
       }
     }
   }

cms/static/sass/views/_import.scss

@@ -92,7 +92,7 @@
       }
 
       .file-name {
-        font-weight: bold;
+        @extend %t-strong;
       }
     }
 
@@ -151,7 +151,7 @@
 
         .title {
           @extend %t-title5;
-          font-weight: 600;
+          @extend %t-strong;
         }
 
         .copy {

cms/static/sass/views/_index.scss

@@ -63,11 +63,11 @@
 
       h1 {
         @extend %t-title2;
+        @extend %t-strong;
         float: none;
         margin: 0 0 ($baseline/2) 0;
         border-bottom: 1px solid $blue-l1;
         padding: 0;
-        font-weight: 500;
         color: $white;
       }
 
@@ -76,7 +76,7 @@
       }
 
       .logo {
-        font-weight: 600;
+        @extend %t-strong;
         margin-left: ($baseline/2);
       }
 
@@ -197,8 +197,8 @@
 
           h3 {
             @extend %t-title4;
+            @extend %t-strong;
             margin: 0 0 ($baseline/2) 0;
-            font-weight: 600;
           }
 
           > p {
@@ -207,8 +207,8 @@
           }
 
           strong {
+            @extend %t-strong;
             color: $gray-d2;
-            font-weight: 500;
           }
 
           .list-proofpoints {
@@ -232,8 +232,8 @@
 
               .title {
                 @extend %t-copy-base;
+                @extend %t-strong;
                 margin: 0 0 ($baseline/4) 0;
-                font-weight: 500;
                 color: $gray-d3;
               }
 
@@ -323,10 +323,10 @@
           text-align: center;
 
           &.action-primary {
-            @extend %t-action1;
             @include blue-button;
+            @extend %t-action1;
+            @extend %t-strong;
             padding: ($baseline*0.75) ($baseline/2);
-            font-weight: 600;
             text-align: center;
             text-transform: uppercase;
           }

cms/static/sass/views/_settings.scss

@@ -22,13 +22,13 @@
   }
 
   .message-status {
-    display: none;
     @include border-top-radius(2px);
     @include box-sizing(border-box);
+    @extend %t-strong;
+    display: none;
     border-bottom: 2px solid $yellow;
     margin: 0 0 20px 0;
     padding: 10px 20px;
-    font-weight: 500;
     background: $paleYellow;
 
     .text {
@@ -116,7 +116,7 @@
     .remove-item {
       @include white-button;
       @extend %t-action3;
-      font-weight: 400;
+      @extend %t-strong;
     }
 
     .new-button {
@@ -140,7 +140,7 @@
         &.required {
 
           label {
-            font-weight: 600;
+            @extend %t-strong;
           }
 
           label:after {
@@ -154,10 +154,10 @@
         }
 
         label {
-          @extend %t-copy-sub1;
           @include transition(color $tmg-f2 ease-in-out 0s);
+          @extend %t-copy-sub1;
+          @extend %t-strong;
           margin: 0 0 ($baseline/4) 0;
-          font-weight: 400;
 
           &.is-focused {
             color: $blue;
@@ -266,12 +266,12 @@
 
         input, textarea {
           @extend %t-copy-lead1;
+          @extend %t-strong;
           box-shadow: none;
           border: none;
           background: none;
           padding: 0;
           margin: 0;
-          font-weight: 600;
         }
       }
 
@@ -338,7 +338,7 @@
           .action-primary {
             @extend %btn-primary-blue;
             @extend %t-action3;
-            font-weight: 600;
+            @extend %t-strong;
 
             [class^="icon-"] {
               @extend %t-icon5;
@@ -653,10 +653,10 @@
               }
 
               .letter-grade {
+                @extend %t-strong;
                 display: block;
                 margin: 10px 15px 0 0;
                 font-size: 16px;
-                font-weight: 700;
                 line-height: 14px;
               }
 
@@ -799,8 +799,8 @@
         position: relative;
 
         .title {
+          @extend %t-strong;
           margin-top: ($baseline/2);
-          font-weight: 600;
         }
 
         .field {

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

@@ -347,8 +347,8 @@
     box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
 
     .page-name {
+      @extend %t-strong;
       font-size: 19px;
-      font-weight: 700;
     }
 
     .item-actions {

cms/static/sass/views/_textbooks.scss

@@ -30,8 +30,8 @@
 
         .textbook-title {
           @extend %t-title4;
+          @extend %t-strong;
           margin-right: ($baseline*14);
-          font-weight: bold;
         }
 
         .ui-toggle-expansion {
@@ -147,21 +147,21 @@
 
         .action-primary {
           @include blue-button;
-          @extend %t-action2;
           @include transition(all .15s);
+          @extend %t-action2;
+          @extend %t-strong;
           display: inline-block;
           padding: ($baseline/5) $baseline;
-          font-weight: 600;
           text-transform: uppercase;
         }
 
         .action-secondary {
           @include grey-button;
-          @extend %t-action2;
           @include transition(all .15s);
+          @extend %t-action2;
+          @extend %t-strong;
           display: inline-block;
           padding: ($baseline/5) $baseline;
-          font-weight: 600;
           text-transform: uppercase;
         }
 
@@ -175,7 +175,7 @@
 
 
         strong {
-          font-weight: 600;
+          @extend %t-strong;
         }
 
 
@@ -195,7 +195,7 @@
           &.required {
 
             label {
-              font-weight: 600;
+              @extend %t-strong;
             }
 
             label:after {
@@ -349,7 +349,6 @@
         width: 100%;
         margin: ($baseline*1.5) 0 0 0;
         padding: ($baseline/2);
-        font-weight: 600;
       }
     }
   }

cms/static/sass/views/_updates.scss

@@ -3,24 +3,24 @@
 
 .view-updates {
 
-	.course-info-wrapper {
-		display: table;
-		width: 100%;
-		clear: both;
-	}
-
-	.main-column,
-	.course-handouts {
-		float: none;
-		display: table-cell;
-	}
-
-	.main-column {
-		border-radius: 3px 0 0 3px;
-		border-right-color: $mediumGrey;
-	}
-
-	.CodeMirror {
+  .course-info-wrapper {
+    display: table;
+    width: 100%;
+    clear: both;
+  }
+
+  .main-column,
+  .course-handouts {
+    float: none;
+    display: table-cell;
+  }
+
+  .main-column {
+    border-radius: 3px 0 0 3px;
+    border-right-color: $mediumGrey;
+  }
+
+  .CodeMirror {
     border: 1px solid #3c3c3c;
     background: #fff;
     color: #3c3c3c;
@@ -28,185 +28,185 @@
 }
 
 .course-updates {
-	padding: 30px 40px;
-	margin: 0;
-
-	.update-list > li {
-		padding: 34px 0 42px;
-		border-top: 1px solid #cbd1db;
-
-		&:first-child {
-			padding-top: 0;
-			border: none;
-		}
-
-		&.editing {
-			position: relative;
-			z-index: 1001;
-			padding: 0;
-			border-top: none;
-			border-radius: 3px;
-			background: #fff;
-
-			.post-preview {
-				display: none;
-			}
-		}
-
-		h1 {
-			float: none;
-			font-size: 24px;
-			font-weight: 300;
-		}
-
-		h2 {
-			margin-bottom: 18px;
-			font-size: 14px;
-			font-weight: 700;
-			line-height: 30px;
-			color: #646464;
-			letter-spacing: 1px;
-			text-transform: uppercase;
-		}
-
-		h3 {
-			margin: 34px 0 11px;
-			font-size: 16px;
-			font-weight: 700;
-		}
-	}
-
-	.update-contents {
-		p {
-			font-size: 16px;
-			line-height: 25px;
-		}
-
-		p + p {
-			margin-top: 25px;
-		}
-
-		.primary {
-			border: 1px solid #ddd;
-			background: #f6f6f6;
-			padding: 20px;
-		}
-
-		ol, ul {
-		  margin: 1em 0;
-		  padding: 0 0 0 1em;
-		  color: $baseFontColor;
-
-		  li {
-		    margin-bottom: 0.708em;
-		  }
-		}
-
-		ol {
-		  list-style: decimal outside none;
-		}
-
-		ul {
-		  list-style: disc outside none;
-		}
-
-		pre {
-		  margin: 1em 0;
-		  color: $baseFontColor;
-		  font-family: monospace, serif;
-		  font-size: 1em;
-		  white-space: pre-wrap;
-		  word-wrap: break-word;
-		}
-
-		code {
-		  color: $baseFontColor;
-		  font-family: monospace, serif;
-		  background: none;
-		  padding: 0;
-		}
-	}
-
-
-	.new-update-form {
-		@include edit-box;
-		margin-bottom: 24px;
-		padding: 30px;
-		border: none;
-
-		textarea {
-			height: 180px;
-		}
-	}
-
-	.post-actions {
-		float: right;
-
-		.edit-button,
-		.delete-button{
-			float: left;
-			@include white-button;
-	    padding: 3px 10px 4px;
-	    margin-left: 7px;
-	    font-size: 12px;
-	    font-weight: 400;
-
-	    .edit-icon,
-	    .delete-icon {
-	      margin-right: 4px;
-	    }
-		}
-	}
+  padding: 30px 40px;
+  margin: 0;
+
+  .update-list > li {
+    padding: 34px 0 42px;
+    border-top: 1px solid #cbd1db;
+
+    &:first-child {
+      padding-top: 0;
+      border: none;
+    }
+
+    &.editing {
+      position: relative;
+      z-index: 1001;
+      padding: 0;
+      border-top: none;
+      border-radius: 3px;
+      background: #fff;
+
+      .post-preview {
+        display: none;
+      }
+    }
+
+    h1 {
+      @extend %t-light;
+      float: none;
+      font-size: 24px;
+    }
+
+    h2 {
+      @extend %t-strong;
+      margin-bottom: 18px;
+      font-size: 14px;
+      line-height: 30px;
+      color: #646464;
+      letter-spacing: 1px;
+      text-transform: uppercase;
+    }
+
+    h3 {
+      @extend %t-strong;
+      margin: 34px 0 11px;
+      font-size: 16px;
+    }
+  }
+
+  .update-contents {
+    p {
+      font-size: 16px;
+      line-height: 25px;
+    }
+
+    p + p {
+      margin-top: 25px;
+    }
+
+    .primary {
+      border: 1px solid #ddd;
+      background: #f6f6f6;
+      padding: 20px;
+    }
+
+    ol, ul {
+      margin: 1em 0;
+      padding: 0 0 0 1em;
+      color: $baseFontColor;
+
+      li {
+        margin-bottom: 0.708em;
+      }
+    }
+
+    ol {
+      list-style: decimal outside none;
+    }
+
+    ul {
+      list-style: disc outside none;
+    }
+
+    pre {
+      margin: 1em 0;
+      color: $baseFontColor;
+      font-family: monospace, serif;
+      font-size: 1em;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+
+    code {
+      color: $baseFontColor;
+      font-family: monospace, serif;
+      background: none;
+      padding: 0;
+    }
+  }
+
+
+  .new-update-form {
+    @include edit-box;
+    margin-bottom: 24px;
+    padding: 30px;
+    border: none;
+
+    textarea {
+      height: 180px;
+    }
+  }
+
+  .post-actions {
+    float: right;
+
+    .edit-button,
+    .delete-button{
+      @include white-button;
+      @extend %t-regular;
+      float: left;
+      padding: 3px 10px 4px;
+      margin-left: 7px;
+      font-size: 12px;
+
+      .edit-icon,
+      .delete-icon {
+        margin-right: 4px;
+      }
+    }
+  }
 }
 
 .course-handouts {
-	@extend %ui-window;
-	width: 30%;
-	padding: 20px 30px;
-	margin: 0;
-	border-radius: 0 3px 3px 0;
-	border-left: none;
-	background: $lightGrey;
-
-	.title {
-		margin-bottom: 24px;
-		font-size: 22px;
-		font-weight: 300;
-	}
-
-	.edit-button {
-		float: right;
-		@include white-button;
+  @extend %ui-window;
+  width: 30%;
+  padding: 20px 30px;
+  margin: 0;
+  border-radius: 0 3px 3px 0;
+  border-left: none;
+  background: $lightGrey;
+
+  .title {
+    @extend %t-light;
+    margin-bottom: 24px;
+    font-size: 22px;
+  }
+
+  .edit-button {
+    @include white-button;
+    @extend %t-regular;
+    float: right;
     padding: 3px 10px 4px;
     margin-left: 7px;
     font-size: 12px;
-    font-weight: 400;
 
     .edit-icon,
     .delete-icon {
       margin-right: 4px;
     }
-	}
+  }
 
-	.handouts-content {
-		font-size: 14px;
-	}
+  .handouts-content {
+    font-size: 14px;
+  }
 
-	.treeview-handoutsnav li {
-		margin-bottom: 12px;
-	}
+  .treeview-handoutsnav li {
+    margin-bottom: 12px;
+  }
 }
 
 .edit-handouts-form {
-	@include edit-box;
-	position: absolute;
-	right: 0;
-	top: 0;
-	z-index: 10001;
-	width: 800px;
-	padding: 30px;
-
-	textarea {
-		height: 300px;
-	}
+  @include edit-box;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10001;
+  width: 800px;
+  padding: 30px;
+
+  textarea {
+    height: 300px;
+  }
 }

cms/static/sass/views/_users.scss

@@ -101,9 +101,9 @@
         color: $white;
 
         .msg-you {
+          @extend %t-strong;
           margin-left: ($baseline/5);
           text-transform: none;
-          font-weight: 500;
           color: $pink-l3;
         }
 
@@ -131,11 +131,11 @@
         }
 
         .user-username {
-          @extend %t-title4;
           @include transition(color $tmg-f2 ease-in-out 0s);
+          @extend %t-title4;
+          @extend %t-strong;
           margin: 0 ($baseline/2) ($baseline/10) 0;
           color: $gray-d4;
-          font-weight: 600;
         }
 
         .user-email {
@@ -186,20 +186,20 @@
 
           &.add-admin-role {
             @include blue-button;
-            @extend %t-action2;
             @include transition(all .15s);
+            @extend %t-action2;
+            @extend %t-strong;
             display: inline-block;
             padding: ($baseline/5) $baseline;
-            font-weight: 600;
           }
 
           &.remove-admin-role {
             @include grey-button;
-            @extend %t-action2;
             @include transition(all .15s);
+            @extend %t-action2;
+            @extend %t-strong;
             display: inline-block;
             padding: ($baseline/5) $baseline;
-            font-weight: 600;
           }
         }
 

common/static/sass/_mixins-inherited.scss

@@ -121,10 +121,10 @@
 @mixin button {
   @include font-size(14);
   @include transition(background-color 0.15s, box-shadow 0.15s);
+  @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;
   padding: ($baseline/5) $baseline ($baseline/4);
-  font-weight: 700;
 
   &.disabled, &.is-disabled {
     border: 1px solid $gray-l1 !important;
@@ -331,9 +331,9 @@
   }
 
   h5 {
+    @extend %t-strong;
     margin-bottom: 8px;
     color: #fff;
-    font-weight: 700;
   }
 
   .row {
@@ -388,9 +388,9 @@
     .draft-item:after,
     .public-item:after,
     .private-item:after {
+      @extend %t-strong;
       margin-left: 3px;
       font-size: 9px;
-      font-weight: 600;
       text-transform: uppercase;
     }
 

common/static/sass/_mixins.scss

@@ -182,11 +182,11 @@
 %ui-btn-primary {
   @extend %ui-btn;
   @extend %ui-btn-pill;
+  @extend %t-strong;
   padding:($baseline/2) $baseline;
   border-width: 1px;
   border-style: solid;
   box-shadow: none;
-  font-weight: 600;
   line-height: 1.5em;
   text-align: center;
 
@@ -224,9 +224,9 @@
 }
 
 %ui-btn-flat-outline {
-  @extend %t-action4;
   @include transition(all .15s);
-  font-weight: 600;
+  @extend %t-strong;
+  @extend %t-action4;
   text-align: center;
   border-radius: ($baseline/4);
   border: 1px solid $blue-l2;