revising typographical extend names to not use military alphabet

apps/openassessment/xblock/static/sass/oa/utilities/_developer.scss

@@ -30,59 +30,59 @@
 .wrapper--xblock {
   // typography tests
   .h1 {
-    @extend %hd-alpha;
+    @extend %hd-1;
   }
 
   .h2 {
-    @extend %hd-bravo;
+    @extend %hd-2;
   }
 
   .h3 {
-    @extend %hd-charlie;
+    @extend %hd-3;
   }
 
   .h4 {
-    @extend %hd-delta;
+    @extend %hd-4;
   }
 
   .h5 {
-    @extend %hd-epsilon;
+    @extend %hd-5;
   }
 
   .h6 {
-    @extend %hd-foxtrot;
+    @extend %hd-6;
   }
 
   .h7 {
-    @extend %hd-golf;
+    @extend %hd-7;
   }
 
   .h8 {
-    @extend %hd-hotel;
+    @extend %hd-8;
   }
 
   .copy-1 {
-    @extend %copy-alpha;
+    @extend %copy-1;
   }
 
   .copy-2 {
-    @extend %copy-bravo;
+    @extend %copy-2;
   }
 
   .copy-3 {
-    @extend %copy-charlie;
+    @extend %copy-3;
   }
 
   .copy-4 {
-    @extend %copy-delta;
+    @extend %copy-4;
   }
 
   .copy-5 {
-    @extend %copy-epsilon;
+    @extend %copy-5;
   }
 
   .copy-6 {
-    @extend %copy-foxtrot;
+    @extend %copy-6;
   }
 }
 

apps/openassessment/xblock/static/sass/oa/utilities/_extends.scss

@@ -24,7 +24,7 @@
 }
 
 %ui-section-title {
-  @extend %hd-golf;
+  @extend %hd-7;
   @extend %t-weight3;
   padding: ($baseline-v/2) $baseline-v;
   background: $color-decorative-tertiary;
@@ -58,7 +58,7 @@
   }
 
   .question__title__copy {
-    @extend %hd-delta;
+    @extend %hd-4;
     @extend %t-weight3;
     color: $heading-primary-color;
   }
@@ -109,7 +109,7 @@
     }
 
     .answer__label {
-      @extend %copy-delta;
+      @extend %copy-4;
       @extend %t-weight3;
       margin-bottom: 0; // FIX: need to reset base label style
       color: $color-unfocused;
@@ -154,7 +154,7 @@
   .answer__tip {
     margin-bottom: ($baseline-v/2);
 
-    @extend %copy-epsilon;
+    @extend %copy-5;
     margin-right: $baseline-v;
     color: $copy-supplemental-color;
 
@@ -182,10 +182,10 @@
   }
 
   .answer__points {
-    @extend %copy-epsilon;
+    @extend %copy-5;
     color: $copy-color;
 
-    @extend %copy-epsilon;
+    @extend %copy-5;
     margin-right: $baseline-v;
     color: $copy-supplemental-color;
 
@@ -205,7 +205,7 @@
     }
 
     .label {
-      @extend %copy-epsilon; // FIX: need to reset base label style
+      @extend %copy-5; // FIX: need to reset base label style
       display: inline-block; // FIX: need to reset base label style
       margin-left: ($baseline-v/4);
       color: $copy-supplemental-color;

apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss

@@ -23,13 +23,13 @@
   }
 
   .openassessment__title--super {
-    @extend %hd-charlie;
+    @extend %hd-3;
     display: block;
     margin-bottom: ($baseline-v/4);
   }
 
   .openassessment__title--sub {
-    @extend %hd-golf;
+    @extend %hd-7;
     display: block;
     color: $heading-tertiary-color;
   }
@@ -115,7 +115,7 @@
 
         // increment: show numbers using parent list counter
         &:before {
-          @extend %hd-foxtrot;
+          @extend %hd-6;
           @extend %t-weight4;
           content: counter(item, decimal);
           counter-increment: item;
@@ -133,13 +133,13 @@
       }
 
       .step__label {
-        @extend %hd-delta;
+        @extend %hd-4;
         @extend %t-weight3;
         @extend %trans-color;
       }
 
       .step__deadline {
-        @extend %hd-hotel;
+        @extend %hd-8;
         @extend %trans-color;
         color: $heading-secondary-color;
       }
@@ -173,7 +173,7 @@
       }
 
       .copy {
-        @extend %copy-foxtrot;
+        @extend %copy-6;
         @extend %t-titlecase;
         color: $white-t;
       }
@@ -225,7 +225,7 @@
 
     // step instructions
     .step__instruction {
-      @extend %copy-delta;
+      @extend %copy-4;
       margin-bottom: $baseline-v;
       color: $copy-color;
     }
@@ -257,7 +257,7 @@
 
       .action--submit {
         @extend %btn--primary;
-        @extend %action-delta;
+        @extend %action-4;
       }
     }
 
@@ -402,7 +402,7 @@
   }
 
   .openassessment__prompt__copy {
-    @extend %copy-bravo;
+    @extend %copy-2;
     color: $copy-lead-color;
 
     > * {
@@ -481,7 +481,7 @@
 
       .action--save {
         @extend %btn--secondary;
-        @extend %action-delta;
+        @extend %action-4;
         display: block;
         text-align: center;
 
@@ -507,7 +507,7 @@
       }
 
       .tip {
-        @extend %copy-epsilon;
+        @extend %copy-5;
         color: $copy-supplemental-color;
       }
     }
@@ -522,7 +522,7 @@
     }
 
     .submission__answer__display__content {
-      @extend %copy-charlie;
+      @extend %copy-3;
       @extend %ui-content-longanswer;
       @extend %ui-section-content;
     }
@@ -552,7 +552,7 @@
       }
 
       .peer-assessment__display__title {
-        @extend %hd-golf; // FIX: needed due to DOM structure
+        @extend %hd-7; // FIX: needed due to DOM structure
         @extend %t-weight3;
         margin-bottom: ($baseline-v/4);
 
@@ -578,7 +578,7 @@
       }
 
       .peer-assessment__expected-time {
-        @extend %hd-golf;  // FIX: needed due to DOM structure
+        @extend %hd-7;  // FIX: needed due to DOM structure
         @extend %t-weight3;
 
         @include media($bp-ds) {
@@ -601,7 +601,7 @@
 
     .peer-assessment__display__response {
       @extend %ui-section-content;
-      @extend %copy-charlie;
+      @extend %copy-3;
       @extend %ui-content-longanswer;
     }
 
@@ -655,7 +655,7 @@
 
       .action--submit {
         @extend %btn--primary;
-        @extend %action-delta;
+        @extend %action-4;
       }
     }
   }
@@ -680,14 +680,14 @@
       }
 
       .self-assessment__display__title {
-        @extend %hd-golf; // FIX: needed due to DOM structure
+        @extend %hd-7; // FIX: needed due to DOM structure
         @extend %t-weight3;
         float: left;
       }
     }
 
     .self-assessment__display__response {
-      @extend %copy-charlie;
+      @extend %copy-3;
       @extend %ui-content-longanswer;
       @extend %ui-section-content;
     }
@@ -742,7 +742,7 @@
 
       .action--submit {
         @extend %btn--primary;
-        @extend %action-delta;
+        @extend %action-4;
       }
     }
   }
@@ -762,7 +762,7 @@
     }
 
     .openassessment__grade__title {
-      @extend %hd-delta;
+      @extend %hd-4;
       margin-right: $baseline-v;
       color: $heading-tertiary-color;
     }
@@ -770,12 +770,12 @@
     .openassessment__grade__content {
 
       .grade__value {
-        @extend %hd-delta;
+        @extend %hd-4;
         margin-bottom: ($baseline-v/2);
       }
 
       .grade__description {
-        @extend %copy-delta;
+        @extend %copy-4;
       }
     }
 
@@ -832,14 +832,14 @@
     }
 
     .question__title__copy {
-      @extend %hd-delta;
+      @extend %hd-4;
       @extend %t-weight3;
       float: left;
       color: $heading-secondary-color;
     }
 
     .question__score {
-      @extend %copy-foxtrot;
+      @extend %copy-6;
       @extend %t-titlecase;
       float: right;
       position: relative;
@@ -900,20 +900,20 @@
     }
 
     .answer__source {
-      @extend %hd-golf;
+      @extend %hd-7;
       display: block;
       color: $heading-tertiary-color;
     }
 
     .answer__value {
-      @extend %copy-charlie;
+      @extend %copy-3;
       display: block;
       margin-bottom: ($baseline-v/2);
       color: $heading-primary-color;
     }
 
     .answer__content {
-      @extend %copy-delta;
+      @extend %copy-4;
       display: block;
       color: $copy-supplemental-color;
     }
@@ -938,7 +938,7 @@
 
     .action--submit {
       @extend %btn--secondary;
-      @extend %action-delta;
+      @extend %action-4;
       margin-right: ($baseline-v/2);
     }
   }

apps/openassessment/xblock/static/sass/xb/elements/_forms.scss

@@ -32,7 +32,7 @@
     font-family: $f-copy;
 
     label, .label {
-      @extend %copy-delta;
+      @extend %copy-4;
       display: block;
       margin-bottom: ($baseline-v/2);
       color: $copy-color;

apps/openassessment/xblock/static/sass/xb/elements/_typography.scss

@@ -61,7 +61,7 @@
 // --------------------
 // canned headings
 // --------------------
-%hd-alpha {
+%hd-1 {
   @extend %t-weight1;
   @extend %t-titlecase;
   @include font-size(24);
@@ -69,14 +69,14 @@
   font-family: $f-title;
 }
 
-%hd-bravo {
+%hd-2 {
   @extend %t-weight3;
   @include font-size(21);
   @include lh(21);
   font-family: $f-title;
 }
 
-%hd-charlie {
+%hd-3 {
   @extend %t-weight1;
   @extend %t-titlecase;
   @include font-size(18);
@@ -84,14 +84,14 @@
   font-family: $f-title;
 }
 
-%hd-delta {
+%hd-4 {
   @extend %t-weight3;
   @include font-size(16);
   @include lh(16);
   font-family: $f-title;
 }
 
-%hd-epsilon {
+%hd-5 {
   @extend %t-weight1;
   @extend %t-titlecase;
   @include font-size(16);
@@ -99,14 +99,14 @@
   font-family: $f-title;
 }
 
-%hd-foxtrot {
+%hd-6 {
   @extend %t-weight3;
   @include font-size(16);
   @include lh(16);
   font-family: $f-title;
 }
 
-%hd-golf {
+%hd-7 {
   @extend %t-weight1;
   @extend %t-titlecase;
   @include font-size(13);
@@ -114,58 +114,50 @@
   font-family: $f-title;
 }
 
-%hd-hotel {
+%hd-8 {
   @extend %t-weight1;
   @include font-size(13);
   @include lh(13);
   font-family: $f-title;
 }
 
-%hd-india {
-  @extend %t-weight1;
-  @extend %t-titlecase;
-  @include font-size(11);
-  @include lh(11);
-  font-family: $f-title;
-}
-
 
 // --------------------
 // canned copy
 // --------------------
-%copy-alpha {
+%copy-1 {
   @extend %t-weight0;
   @include font-size(24);
   @include lh(24);
   font-family: $f-copy;
 }
 
-%copy-bravo {
+%copy-2 {
   @include font-size(18);
   @include lh(18);
   font-family: $f-copy;
 }
 
-%copy-charlie {
+%copy-3 {
   @extend %t-weight1;
   @include font-size(16);
   @include lh(16);
   font-family: $f-copy;
 }
 
-%copy-delta {
+%copy-4 {
   @include font-size(14);
   @include lh(14);
   font-family: $f-copy;
 }
 
-%copy-epsilon {
+%copy-5 {
   @include font-size(13);
   @include lh(12);
   font-family: $f-copy;
 }
 
-%copy-foxtrot {
+%copy-6 {
   @include font-size(12);
   @include lh(12);
   font-family: $f-copy;
@@ -175,31 +167,31 @@
 // --------------------
 // canned actions
 // --------------------
-%action-alpha {
+%action-1 {
   @include font-size(18);
   @include lh(18);
   font-family: $f-action;
 }
 
-%action-bravo {
+%action-2 {
   @include font-size(18);
   @include lh(18);
   font-family: $f-action;
 }
 
-%action-charlie {
+%action-3 {
   @include font-size(16);
   @include lh(16);
   font-family: $f-action;
 }
 
-%action-delta {
+%action-4 {
   @include font-size(14);
   @include lh(14);
   font-family: $f-action;
 }
 
-%action-epsilon {
+%action-5 {
   @include font-size(12);
   @include lh(12);
   font-family: $f-action;
@@ -213,12 +205,12 @@
   font-style: normal;
 }
 
-%emphasis-alpha {
+%emphasis-1 {
   @extend %emphasis;
   @extend %t-weight3;
 }
 
-%emphasis-bravo {
+%emphasis-2 {
   @extend %emphasis;
   @extend %t-weight2;
 }