From 1720ddf93fe9c6d9f9a022458623f8fe394b57d2 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 11 Aug 2014 22:49:58 -0400
Subject: [PATCH 1/2] Studio: refactoring font-size to use Sass mixin * moving
 font-size to use @include font-size() mixin * re-organizing vendor reset
 styling into _vendor.scss override rather than _reset.scss * initial rule
 re-organization and minor line-height tweaks

---
 cms/static/sass/_base.scss                    | 22 ++---
 cms/static/sass/_reset.scss                   | 91 +------------------
 cms/static/sass/assets/_graphics.scss         |  2 +-
 cms/static/sass/elements/_forms.scss          | 10 +-
 cms/static/sass/elements/_modal.scss          |  2 +-
 .../sass/elements/_system-feedback.scss       |  9 +-
 cms/static/sass/elements/_tender-widget.scss  | 10 +-
 cms/static/sass/elements/_vendor.scss         | 88 +++++++++++++++++-
 cms/static/sass/elements/_xmodules.scss       |  2 +-
 cms/static/sass/views/_assets.scss            |  2 +-
 cms/static/sass/views/_export-git.scss        |  6 +-
 cms/static/sass/views/_export.scss            | 14 +--
 cms/static/sass/views/_settings.scss          | 12 +--
 cms/static/sass/views/_static-pages.scss      |  8 +-
 cms/static/sass/views/_updates.scss           | 20 ++--
 common/static/sass/_mixins-inherited.scss     |  4 +-
 16 files changed, 150 insertions(+), 152 deletions(-)

diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 47b6db55db..6e117932a6 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -287,9 +287,9 @@ hr.divide {
 }
 
 .details {
+    @include font-size(14);
     display: none;
     margin-bottom: 30px;
-    font-size: 14px;
 }
 
 .window {
@@ -304,13 +304,13 @@ hr.divide {
   }
 
   .header {
+    @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+    @include font-size(14);
     padding: 6px 14px;
     border-bottom: 1px solid $mediumGrey;
     border-radius: 2px 2px 0 0;
-    @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
     background-color: $lightBluishGrey;
     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
-    font-size: 14px;
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
   }
 
@@ -324,9 +324,9 @@ hr.divide {
     }
 
     .description {
+      @include font-size(11);
       @extend %t-regular;
       display: block;
-      font-size: 11px;
       font-style: italic;
       line-height: 1.3;
       color: #999;
@@ -345,6 +345,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));
   display: none;
   position: fixed;
   top: 20px;
@@ -354,10 +356,8 @@ hr.divide {
   padding: 15px 20px 17px;
   border-radius: 3px;
   border: 1px solid #333;
-  @include linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
   background-color: rgba(30, 30, 30, .92);
   box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
-  font-size: 13px;
   text-align: center;
   color: #fff;
 
@@ -366,37 +366,37 @@ hr.divide {
   }
 
   strong {
+    @include font-size(16);
     @extend %t-strong;
     display: block;
     margin-bottom: 10px;
-    font-size: 16px;
     text-align: center;
   }
 
   .close-button {
+    @include font-size(22);
     @extend %t-strong;
     position: absolute;
     top: 0;
     right: 0;
     width: 27px;
     height: 27px;
-    font-size: 22px;
     line-height: 25px;
     color: #aaa;
     text-align: center;
 
     .close-icon {
+      @include font-size(16);
       @extend %t-strong;
-      font-size: 16px;
     }
   }
 
   .action-button {
     @include blue-button;
     @include box-sizing(border-box);
+    @include font-size(12);
     width: 100%;
     margin-top: 10px;
-    font-size: 12px;
     text-align: center;
   }
 }
@@ -513,13 +513,13 @@ hr.divide {
   opacity: 0.0;
 
   &:after {
+    @include font-size(20);
     content: '▾';
     display: block;
     position: absolute;
     bottom: -14px;
     left: 50%;
     margin-left: -7px;
-    font-size: 20px;
     color: rgba(0, 0, 0, 0.85);
   }
 }
diff --git a/cms/static/sass/_reset.scss b/cms/static/sass/_reset.scss
index ba12a7f6c3..041a038d1d 100644
--- a/cms/static/sass/_reset.scss
+++ b/cms/static/sass/_reset.scss
@@ -58,6 +58,7 @@ q:before, q:after {
 ins {
 	text-decoration: none;
 }
+
 del {
 	text-decoration: line-through;
 }
@@ -72,93 +73,3 @@ abbr[title] {
 	text-decoration: none;
 	cursor: help;
 }
-
-// ====================
-
-// grandfathered styles
-
-// reset styles to remove ui-lightness jquery ui theme from the tabs component (used in the add component problem tab menu)
-.ui-tabs {
-	padding: 0;
-	white-space: normal;
-}
-
-.ui-corner-all, .ui-corner-bottom, .ui-corner-left, ui-corner-top, .ui-corner-br, .ui-corner-right {
-	border-bottom-right-radius: 0;
-	border-bottom-left-radius: 0;
-	border-top-right-radius: 0;
-	border-top-left-radius: 0;
-}
-
-
-.ui-widget-content {
-	border: 0;
-	background: none;
-}
-.ui-widget {
-	font-family: 'Open Sans', sans-serif;
-	font-size: 16px;
-}
-
-.ui-widget-header {
-	border:none;
-	background: none;
-}
-
-.ui-tabs .ui-tabs-nav {
-	padding: 0;
-}
-
-.ui-tabs .ui-tabs-nav li {
-	margin: 0;
-	padding: 0;
-	border: none;
-	top: 0;
-	margin: 0;
-	float: none;
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
-}
-
-.ui-tabs-nav {
-
-	li {
-		top: 0;
-		margin: 0;
-	}
-	a {
-		@extend %t-regular;
-		float: none;
-	}
-}
-
-.ui-tabs .ui-tabs-panel {
-	padding: 0;
-}
-
-// reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling
-.problem-type-tabs {
-	border:none;
-	list-style-type: none;
-	width: 100%;
-	@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
-	//background-color: $lightBluishGrey;
-	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;
-
-	li:first-child {
-		margin-left: 20px;
-	}
-	li {
-		opacity: 0.8;
-
-		&:ui-state-active {
-			@extend %t-regular;
-			background-color: rgba(255, 255, 255, .3);
-			opacity: 1.0;
-		}
-		a:focus {
-			outline: none;
-			border: 0px;
-		}
-	}
-}
diff --git a/cms/static/sass/assets/_graphics.scss b/cms/static/sass/assets/_graphics.scss
index af0a467916..2b6dabc04f 100644
--- a/cms/static/sass/assets/_graphics.scss
+++ b/cms/static/sass/assets/_graphics.scss
@@ -156,9 +156,9 @@
 .draft-tag,
 .public-tag,
 .private-tag {
+	@include font-size(9);
 	@extend %t-strong;
 	margin-left: 3px;
-	font-size: 9px;
 	text-transform: uppercase;
 	color: #a4aab7;
 }
diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss
index 66ce3827c4..636eb7f149 100644
--- a/cms/static/sass/elements/_forms.scss
+++ b/cms/static/sass/elements/_forms.scss
@@ -6,15 +6,15 @@ input[type="text"],
 input[type="email"],
 input[type="password"],
 textarea.text {
-  padding: 6px 8px 8px;
+  @include font-size(11);
   @include box-sizing(border-box);
+  @include linear-gradient($gray-l5, $white);
+  padding: 6px 8px 8px;
   border: 1px solid $gray-l2;
   border-radius: 2px;
-  @include linear-gradient($gray-l5, $white);
   background-color: $gray-l5;
   box-shadow: inset 0 1px 2px $shadow-l1;
   font-family: 'Open Sans', sans-serif;
-  font-size: 11px;
   color: $baseFontColor;
   outline: 0;
 
@@ -382,7 +382,7 @@ input.search {
 }
 
 label {
-  font-size: 12px;
+  @include font-size(12);
 }
 
 code {
@@ -393,7 +393,7 @@ code {
 }
 
 .CodeMirror {
-  font-size: 13px;
+  @include font-size(13);
   background: #fff;
 }
 
diff --git a/cms/static/sass/elements/_modal.scss b/cms/static/sass/elements/_modal.scss
index 532f747a95..5b6e718451 100644
--- a/cms/static/sass/elements/_modal.scss
+++ b/cms/static/sass/elements/_modal.scss
@@ -36,10 +36,10 @@
 	}
 
 	h2 {
+		@include font-size(19);
 		@extend %t-light;
 		margin: 0 10px 30px;
 		color: #646464;
-		font-size: 19px;
 		letter-spacing: 1px;
 		text-transform: uppercase;
 	}
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index cf0a54937b..585e671900 100644
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -845,7 +845,9 @@ body.uxdesign.alerts {
 
 // artifact styles
 .main-wrapper {
+
   .alert {
+    @include font-size(14);
     padding: 15px 20px;
     margin-bottom: 30px;
     border-radius: 3px;
@@ -853,7 +855,6 @@ body.uxdesign.alerts {
     border-radius: 3px;
     background: #fbf6e1;
     // background: #edbd3c;
-    font-size: 14px;
     @include clearfix;
 
     .alert-message {
@@ -894,21 +895,21 @@ body.error {
   }
 
   h1 {
+    @include font-size(60);
     @extend %t-light;
     float: none;
     margin: 0;
-    font-size: 60px;
     color: $gray-d3;
   }
 
   .description {
+    @include font-size(21);
     margin-bottom: 50px;
-    font-size: 21px;
   }
 
   .back-button {
+    @include font-size(18);
     @include blue-button;
     padding: 14px 40px 18px;
-    font-size: 18px;
   }
 }
diff --git a/cms/static/sass/elements/_tender-widget.scss b/cms/static/sass/elements/_tender-widget.scss
index bf35b5016b..802e6bc86d 100644
--- a/cms/static/sass/elements/_tender-widget.scss
+++ b/cms/static/sass/elements/_tender-widget.scss
@@ -65,7 +65,7 @@
 }
 
 .widget-layout .header h1 {
-  font-size: 22px;
+  @include font-size(22);
 }
 
 .widget-layout .content {
@@ -86,15 +86,15 @@
 }
 
 .widget-layout label {
+  @include font-size(14);
   @extend %t-strong;
-  font-size: 14px;
   margin-bottom: 5px;
   color: #4c4c4c;
 }
 
 .widget-layout input[type="text"], .widget-layout textarea {
+  @include font-size(16);
   padding: 10px;
-  font-size: 16px;
   color: rgb(0,0,0) !important;
   border: 1px solid #b0b6c2;
   border-radius: 2px;
@@ -177,10 +177,10 @@
 }
 
 .widget-layout #discussion_body:before {
+  @include font-size(14);
   @extend %t-strong;
   content: "What Question or Feedback Would You Like to Share?";
   display: block;
-  font-size: 14px;
   margin-bottom: 5px;
   color: #4c4c4c;
 }
@@ -214,11 +214,11 @@
 }
 
 .widget-layout .form-actions .btn-post_topic {
+  @include font-size(16);
   @extend %t-strong;
   display: block;
   width: 100%;
   height: auto !important;
-  font-size: 16px;
   -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);
diff --git a/cms/static/sass/elements/_vendor.scss b/cms/static/sass/elements/_vendor.scss
index 961f575d7b..78b94f96b2 100644
--- a/cms/static/sass/elements/_vendor.scss
+++ b/cms/static/sass/elements/_vendor.scss
@@ -3,11 +3,11 @@
 
 // JQUI calendar
 .ui-datepicker {
+  @include font-size(12);
   border-color: $darkGrey;
   border-radius: 2px;
   background: #fff;
   font-family: $f-sans-serif;
-  font-size: 12px;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
   z-index: 100000 !important;
 
@@ -72,3 +72,89 @@
   }
 }
 // ====================
+
+// reset styles to remove ui-lightness jquery ui theme from the tabs component (used in the add component problem tab menu)
+.ui-tabs {
+  padding: 0;
+  white-space: normal;
+}
+
+.ui-corner-all, .ui-corner-bottom, .ui-corner-left, ui-corner-top, .ui-corner-br, .ui-corner-right {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+
+.ui-widget-content {
+  border: 0;
+  background: none;
+}
+.ui-widget {
+  @include font-size(16);
+  font-family: 'Open Sans', sans-serif;
+}
+
+.ui-widget-header {
+  border:none;
+  background: none;
+}
+
+.ui-tabs .ui-tabs-nav {
+  padding: 0;
+}
+
+.ui-tabs .ui-tabs-nav li {
+  margin: 0;
+  padding: 0;
+  border: none;
+  top: 0;
+  margin: 0;
+  float: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.ui-tabs-nav {
+
+  li {
+    top: 0;
+    margin: 0;
+  }
+  a {
+    @extend %t-regular;
+    float: none;
+  }
+}
+
+.ui-tabs .ui-tabs-panel {
+  padding: 0;
+}
+
+// reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling
+.problem-type-tabs {
+  border:none;
+  list-style-type: none;
+  width: 100%;
+  @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+  //background-color: $lightBluishGrey;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;
+
+  li:first-child {
+    margin-left: 20px;
+  }
+  li {
+    opacity: 0.8;
+
+    &:ui-state-active {
+      @extend %t-regular;
+      background-color: rgba(255, 255, 255, .3);
+      opacity: 1.0;
+    }
+    a:focus {
+      outline: none;
+      border: 0px;
+    }
+  }
+}
diff --git a/cms/static/sass/elements/_xmodules.scss b/cms/static/sass/elements/_xmodules.scss
index 8bc2aa1971..246666bc22 100644
--- a/cms/static/sass/elements/_xmodules.scss
+++ b/cms/static/sass/elements/_xmodules.scss
@@ -191,12 +191,12 @@
     }
 
     .progress-bar {
+      @include font-size(18);
       display: block;
       height: 30px;
       margin: 10px 0;
       border: 1px solid $blue;
       text-align: center;
-      font-size: 1.14em;
 
       &.is-invisible {
         display: none;
diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss
index fe16b85f26..f5b4d691f3 100644
--- a/cms/static/sass/views/_assets.scss
+++ b/cms/static/sass/views/_assets.scss
@@ -414,9 +414,9 @@
     }
 
     .choose-file-button {
+      @include font-size(17);
       @include blue-button;
       padding: 10px 82px 12px;
-      font-size: 17px;
     }
 
     .progress-bar {
diff --git a/cms/static/sass/views/_export-git.scss b/cms/static/sass/views/_export-git.scss
index 81c152497a..473190aa31 100644
--- a/cms/static/sass/views/_export-git.scss
+++ b/cms/static/sass/views/_export-git.scss
@@ -23,20 +23,20 @@
   }
 
   h3 {
+    @include font-size(19);
     @extend %t-strong;
-    font-size: 19px;
   }
 
   .export-git-info-block {
 
     dt {
+      @include font-size(19);
       @extend %t-strong;
-      font-size: 19px;
       margin-top: 12px;
     }
 
     dd {
-      font-size: 17px;
+      @include font-size(17);
       margin-bottom: 20px;
     }
 
diff --git a/cms/static/sass/views/_export.scss b/cms/static/sass/views/_export.scss
index 9a023d3f4b..88696b2672 100644
--- a/cms/static/sass/views/_export.scss
+++ b/cms/static/sass/views/_export.scss
@@ -90,14 +90,14 @@
 
   // OLD
   .description {
+    @include font-size(14);
     float: left;
     width: 62%;
     margin-right: 3%;
-    font-size: 14px;
 
     h2 {
+      @include font-size(19);
       @extend %t-strong;
-      font-size: 19px;
       margin-bottom: 20px;
     }
 
@@ -132,15 +132,15 @@
       text-align: center;
 
       h2 {
+        @include font-size(26);
         @extend %t-light;
         margin-bottom: 30px;
-        font-size: 26px;
       }
 
       .error-block {
+        @include font-size(13);
         display: none;
         margin-bottom: 15px;
-        font-size: 13px;
       }
 
       .error-block {
@@ -148,14 +148,14 @@
       }
 
       .button-export {
-        @include green-button;
+        @include green-button();
+        @include font-size(17);
         padding: 10px 50px 11px;
-        font-size: 17px;
       }
 
       .message-status {
+        @include font-size(12);
         margin-top: 10px;
-        font-size: 12px;
       }
 
       .progress-bar {
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index 01cce38925..5af8e3deb6 100644
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -17,8 +17,8 @@
 
   // messages - should be synced up with global messages in the future
   .message {
+    @include font-size(14);
     display: block;
-    font-size: 14px;
   }
 
   .message-status {
@@ -544,11 +544,11 @@
             position: relative;
 
             li {
+              @include font-size(9);
               position: absolute;
               top: 52px;
               width: 30px;
               margin-left: -15px;
-              font-size: 9px;
               text-align: center;
 
               &.increment-0 {
@@ -623,12 +623,12 @@
               }
 
               .remove-button {
+                @include font-size(10);
                 display: none;
                 position: absolute;
                 top: -17px;
                 right: 1px;
                 height: 17px;
-                font-size: 10px;
               }
 
               &:nth-child(1) {
@@ -653,17 +653,17 @@
               }
 
               .letter-grade {
+                @include font-size(16);
+                @include line-height(16);
                 @extend %t-strong;
                 display: block;
                 margin: 10px 15px 0 0;
-                font-size: 16px;
-                line-height: 14px;
               }
 
               .range {
+                @include font-size(10);
                 display: block;
                 margin-right: 15px;
-                font-size: 10px;
                 line-height: 12px;
               }
 
diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
index eee48d542f..e5b5a8056c 100644
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -331,9 +331,9 @@
   }
 
   .xblock-student_view {
+    @include font-size(24);
     @include transition(background-color $tmg-s3 linear 0s);
     padding: 20px 20px 22px;
-    font-size: 24px;
     background: #fff;
   }
 
@@ -347,8 +347,8 @@
     box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
 
     .page-name {
+      @include font-size(19);
       @extend %t-strong;
-      font-size: 19px;
     }
 
     .item-actions {
@@ -373,11 +373,12 @@
   }
 
   .page-display-name-input {
+    @include font-size(20);
     width: 100%;
-    font-size: 20px;
   }
 
   .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));
     width: 100%;
@@ -388,7 +389,6 @@
     background-color: #edf1f5;
     box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
     font-family: Monaco, monospace;
-    font-size: 13px;
     color: #3c3c3c;
     outline: 0;
   }
diff --git a/cms/static/sass/views/_updates.scss b/cms/static/sass/views/_updates.scss
index d263d34032..a6a4fea715 100644
--- a/cms/static/sass/views/_updates.scss
+++ b/cms/static/sass/views/_updates.scss
@@ -54,15 +54,15 @@
     }
 
     h1 {
+      @include font-size(24);
       @extend %t-light;
       float: none;
-      font-size: 24px;
     }
 
     h2 {
+      @include font-size(14);
       @extend %t-strong;
       margin-bottom: 18px;
-      font-size: 14px;
       line-height: 30px;
       color: #646464;
       letter-spacing: 1px;
@@ -70,15 +70,15 @@
     }
 
     h3 {
+      @include font-size(16);
       @extend %t-strong;
       margin: 34px 0 11px;
-      font-size: 16px;
     }
   }
 
   .update-contents {
     p {
-      font-size: 16px;
+      @include font-size(16);
       line-height: 25px;
     }
 
@@ -111,10 +111,10 @@
     }
 
     pre {
+      @include font-size(16);
       margin: 1em 0;
       color: $baseFontColor;
       font-family: monospace, serif;
-      font-size: 1em;
       white-space: pre-wrap;
       word-wrap: break-word;
     }
@@ -143,13 +143,13 @@
     float: right;
 
     .edit-button,
-    .delete-button{
+    .delete-button {
+      @include font-size(12);
       @include white-button;
       @extend %t-regular;
       float: left;
       padding: 3px 10px 4px;
       margin-left: 7px;
-      font-size: 12px;
 
       .edit-icon,
       .delete-icon {
@@ -169,18 +169,18 @@
   background: $lightGrey;
 
   .title {
+    @include font-size(22);
     @extend %t-light;
     margin-bottom: 24px;
-    font-size: 22px;
   }
 
   .edit-button {
-    @include white-button;
+    @include white-button();
+    @include font-size(12);
     @extend %t-regular;
     float: right;
     padding: 3px 10px 4px;
     margin-left: 7px;
-    font-size: 12px;
 
     .edit-icon,
     .delete-icon {
diff --git a/common/static/sass/_mixins-inherited.scss b/common/static/sass/_mixins-inherited.scss
index abb0aecd0b..8f8538e51c 100644
--- a/common/static/sass/_mixins-inherited.scss
+++ b/common/static/sass/_mixins-inherited.scss
@@ -367,11 +367,11 @@
 
   .section-item {
     @include transition(background $tmg-avg ease-in-out 0);
+    @include font-size(13);
     position: relative;
     display: block;
     padding: 6px 8px 8px 16px;
     background: #edf1f5;
-    font-size: 13px;
 
     &:hover, &:focus {
       background: $blue-l5;
@@ -388,9 +388,9 @@
     .draft-item:after,
     .public-item:after,
     .private-item:after {
+      @include font-size(9);
       @extend %t-strong;
       margin-left: 3px;
-      font-size: 9px;
       text-transform: uppercase;
     }
 

From 998e33ec378b00e4c9a0b45c460a2e6b0eed5762 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 12 Aug 2014 00:04:15 -0400
Subject: [PATCH 2/2] Studio: refactoring font-size to use existing Sass
 scale-based placeholders

---
 cms/static/sass/_base.scss                    | 29 +++++++++---------
 cms/static/sass/assets/_graphics.scss         |  2 +-
 cms/static/sass/elements/_controls.scss       |  2 +-
 cms/static/sass/elements/_footer.scss         |  2 +-
 cms/static/sass/elements/_forms.scss          |  9 +++---
 cms/static/sass/elements/_header.scss         |  8 ++---
 cms/static/sass/elements/_modal-window.scss   |  2 +-
 cms/static/sass/elements/_modal.scss          |  2 +-
 cms/static/sass/elements/_navigation.scss     |  2 +-
 cms/static/sass/elements/_sock.scss           |  4 +--
 .../sass/elements/_system-feedback.scss       | 30 +++++++++----------
 cms/static/sass/elements/_tender-widget.scss  | 10 +++----
 cms/static/sass/elements/_typography.scss     |  5 ++++
 cms/static/sass/elements/_vendor.scss         |  5 ++--
 cms/static/sass/elements/_xblocks.scss        | 10 +++----
 cms/static/sass/elements/_xmodules.scss       | 10 +++----
 cms/static/sass/views/_assets.scss            |  6 ++--
 cms/static/sass/views/_checklists.scss        |  8 ++---
 cms/static/sass/views/_container.scss         |  4 +--
 cms/static/sass/views/_dashboard.scss         |  2 +-
 cms/static/sass/views/_export-git.scss        |  6 ++--
 cms/static/sass/views/_export.scss            | 12 ++++----
 .../sass/views/_group-configuration.scss      | 18 +++++------
 cms/static/sass/views/_import.scss            |  2 +-
 cms/static/sass/views/_index.scss             |  2 +-
 cms/static/sass/views/_outline.scss           |  8 ++---
 cms/static/sass/views/_settings.scss          | 12 ++++----
 cms/static/sass/views/_static-pages.scss      |  8 ++---
 cms/static/sass/views/_textbooks.scss         |  6 ++--
 cms/static/sass/views/_updates.scss           | 20 ++++++-------
 common/static/sass/_mixins-inherited.scss     |  6 ++--
 common/static/sass/_mixins.scss               |  2 +-
 32 files changed, 124 insertions(+), 130 deletions(-)

diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 6e117932a6..b1b57f5ff0 100644
--- a/cms/static/sass/_base.scss
+++ b/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;
       }
 
diff --git a/cms/static/sass/assets/_graphics.scss b/cms/static/sass/assets/_graphics.scss
index 2b6dabc04f..a3d5d26ab4 100644
--- a/cms/static/sass/assets/_graphics.scss
+++ b/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;
diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss
index 5e113f7586..16434c5410 100644
--- a/cms/static/sass/elements/_controls.scss
+++ b/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;
diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss
index 268afc1a2e..4fd58f7128 100644
--- a/cms/static/sass/elements/_footer.scss
+++ b/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);
diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss
index 636eb7f149..b9d486451b 100644
--- a/cms/static/sass/elements/_forms.scss
+++ b/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;
 }
 
diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss
index 8560bb1739..cbe02a029b 100644
--- a/cms/static/sass/elements/_header.scss
+++ b/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;
diff --git a/cms/static/sass/elements/_modal-window.scss b/cms/static/sass/elements/_modal-window.scss
index 1263f041e6..543218c5d8 100644
--- a/cms/static/sass/elements/_modal-window.scss
+++ b/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;
       }
diff --git a/cms/static/sass/elements/_modal.scss b/cms/static/sass/elements/_modal.scss
index 5b6e718451..85cead835c 100644
--- a/cms/static/sass/elements/_modal.scss
+++ b/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;
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
index 2963b41b63..98932abb10 100644
--- a/cms/static/sass/elements/_navigation.scss
+++ b/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;
diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss
index 66b797f530..d29077f642 100644
--- a/cms/static/sass/elements/_sock.scss
+++ b/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;
 
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index 585e671900..3326ca4427 100644
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/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;
   }
 }
diff --git a/cms/static/sass/elements/_tender-widget.scss b/cms/static/sass/elements/_tender-widget.scss
index 802e6bc86d..056bb405b3 100644
--- a/cms/static/sass/elements/_tender-widget.scss
+++ b/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%;
diff --git a/cms/static/sass/elements/_typography.scss b/cms/static/sass/elements/_typography.scss
index e14d52f6d2..356b8f9517 100644
--- a/cms/static/sass/elements/_typography.scss
+++ b/cms/static/sass/elements/_typography.scss
@@ -138,6 +138,11 @@
   @include line-height(12);
 }
 
+%t-action5 {
+  @include font-size(10);
+  @include line-height(10);
+}
+
 
 // ====================
 
diff --git a/cms/static/sass/elements/_vendor.scss b/cms/static/sass/elements/_vendor.scss
index 78b94f96b2..4e2dd73ba3 100644
--- a/cms/static/sass/elements/_vendor.scss
+++ b/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 {
diff --git a/cms/static/sass/elements/_xblocks.scss b/cms/static/sass/elements/_xblocks.scss
index 0ec084acff..2054fa928a 100644
--- a/cms/static/sass/elements/_xblocks.scss
+++ b/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;
diff --git a/cms/static/sass/elements/_xmodules.scss b/cms/static/sass/elements/_xmodules.scss
index 246666bc22..1c8b3ad5ee 100644
--- a/cms/static/sass/elements/_xmodules.scss
+++ b/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;
diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss
index f5b4d691f3..e1df5d107f 100644
--- a/cms/static/sass/views/_assets.scss
+++ b/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;
     }
 
diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss
index 2f50e04564..8a246d49f4 100644
--- a/cms/static/sass/views/_checklists.scss
+++ b/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);
diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss
index cea328ad4f..4064a34e0f 100644
--- a/cms/static/sass/views/_container.scss
+++ b/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;
         }
 
diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss
index 49bec99934..69ba41fd2b 100644
--- a/cms/static/sass/views/_dashboard.scss
+++ b/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);
diff --git a/cms/static/sass/views/_export-git.scss b/cms/static/sass/views/_export-git.scss
index 473190aa31..a33269fe17 100644
--- a/cms/static/sass/views/_export-git.scss
+++ b/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;
     }
 
diff --git a/cms/static/sass/views/_export.scss b/cms/static/sass/views/_export.scss
index 88696b2672..34cef96d04 100644
--- a/cms/static/sass/views/_export.scss
+++ b/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;
       }
 
diff --git a/cms/static/sass/views/_group-configuration.scss b/cms/static/sass/views/_group-configuration.scss
index b83803bf40..9991f4d86f 100644
--- a/cms/static/sass/views/_group-configuration.scss
+++ b/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;
diff --git a/cms/static/sass/views/_import.scss b/cms/static/sass/views/_import.scss
index 83f70135d1..106a67f00f 100644
--- a/cms/static/sass/views/_import.scss
+++ b/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;
diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss
index f3df6ecdb8..ff04f9560c 100644
--- a/cms/static/sass/views/_index.scss
+++ b/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;
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index 4d3df46988..fa2d382181 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/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;
   }
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index 5af8e3deb6..aff6c81b47 100644
--- a/cms/static/sass/views/_settings.scss
+++ b/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 {
diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
index e5b5a8056c..2900f44ae7 100644
--- a/cms/static/sass/views/_static-pages.scss
+++ b/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;
diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss
index 0f7528152c..47ca0b578e 100644
--- a/cms/static/sass/views/_textbooks.scss
+++ b/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;
diff --git a/cms/static/sass/views/_updates.scss b/cms/static/sass/views/_updates.scss
index a6a4fea715..2b29a0703c 100644
--- a/cms/static/sass/views/_updates.scss
+++ b/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 {
diff --git a/common/static/sass/_mixins-inherited.scss b/common/static/sass/_mixins-inherited.scss
index 8f8538e51c..6930abb36b 100644
--- a/common/static/sass/_mixins-inherited.scss
+++ b/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;
     }
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 736ee9d451..bd56a89a78 100644
--- a/common/static/sass/_mixins.scss
+++ b/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-"] {