AC-517 fixes color-contrast ignores across platform

cms/static/sass/_base.scss

@@ -44,10 +44,10 @@ body, input, button {
 a {
   @include transition(color $tmg-f2 ease-in-out 0s);
   text-decoration: none;
-  color: $blue;
+  color: $uxpl-blue-base;
 
   &:hover {
-    color: $orange-d1;
+    color: $uxpl-blue-hover-active;
   }
 }
 
@@ -84,7 +84,7 @@ h1 {
     position: relative;
     top: ($baseline/4);
     display: block;
-    color: $gray-l2;
+    color: $gray-d2;
   }
 }
 
@@ -293,14 +293,6 @@ p, ul, ol, dl {
         .button {
           padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
         }
-
-        .new-button {
-
-        }
-
-        .view-button {
-
-        }
       }
     }
 
@@ -452,11 +444,11 @@ p, ul, ol, dl {
 
     .tip {
       @extend %t-copy-sub2;
+      @include text-align(right);
+      @include float(right);
       width: flex-grid(7, 12);
-      float: right;
       margin-top: ($baseline/2);
-      text-align: right;
-      color: $gray-l2;
+      color: $gray-d1;
     }
   }
 }
@@ -705,9 +697,10 @@ hr.divider {
       color: $white;
     }
 
-    &:hover {
+    &:hover,
+    &:active {
       top: 0;
-      background: $blue;
+      background: $uxpl-blue-base;
     }
   }
 

cms/static/sass/_build-v1.scss

@@ -81,3 +81,7 @@
 
 @import 'developer'; // used for any developer-created scss that needs further polish/refactoring
 @import 'shame';     // used for any bad-form/orphaned scss
+
+// +CodeMirror Overrides
+// ====================
+@import 'elements/codemirror-overrides';

cms/static/sass/elements/_codemirror-overrides.scss

@@ -0,0 +1,11 @@
+/*
+ * CodeMirror color contrast overrides
+ * (so we don't change the vendor file)
+ */
+
+.CodeMirror {
+
+    .CodeMirror-linenumber.CodeMirror-gutter-elt {
+        color: $gray-d3 !important;
+    }
+}

cms/static/sass/elements/_controls.scss

@@ -62,45 +62,45 @@
 // blue primary button
 %btn-primary-blue {
   @extend %ui-btn-primary;
-  background: $blue;
-  border-color: $blue-s1;
+  background: $uxpl-blue-base;
+  border-color: $uxpl-blue-base;
   color: $white;
 
   &:hover, &:active {
-    background: $blue-l1;
-    border-color: $blue-l1;
+    background: $uxpl-blue-hover-active;
+    border-color: $uxpl-blue-hover-active;
   }
 
   &.current, &.active {
-    background: $blue-d1;
+    background: $uxpl-blue-hover-active;
+    border-color: $uxpl-blue-hover-active;
     color: $blue-l4;
-    border-color: $blue-d2;
 
     &:hover, &:active {
-      background: $blue-d1;
+      background: $uxpl-blue-hover-active;
     }
   }
 }
 
 // green primary button
 %btn-primary-green {
   @extend %ui-btn-primary;
-  background: $green;
-  border-color: $green;
+  background: $uxpl-green-base;
+  border-color: $uxpl-green-base;
   color: $white;
 
   &:hover, &:active {
-    background: $green-s1;
-    border-color: $green-s1;
+    background: $uxpl-green-hover-active;
+    border-color: $uxpl-green-hover-active;
   }
 
   &.current, &.active {
-    background: $green-d1;
-    color: $green-l4;
-    border-color: $green-d2;
+    background: $uxpl-green-hover-active;
+    color: $white;
+    border-color: $uxpl-green-hover-active;
 
     &:hover, &:active {
-      background: $green-d1;
+      background: $uxpl-green-hover-active;
     }
   }
 }
@@ -132,21 +132,17 @@
 %btn-secondary-blue {
   @extend %ui-btn-secondary;
   border-color: $blue-l3;
-  color: $blue;
+  color: $uxpl-blue-base;
 
   &:hover, &:active {
     background: $blue-l4;
-    color: $blue-s2;
+    color: $uxpl-blue-hover-active;
   }
 
   &.current, &.active {
     border-color: $blue-l3;
     background: $blue-l3;
-    color: $blue-d1;
-
-    &:hover, &:active {
-
-    }
+    color: $uxpl-blue-base;
   }
 }
 
@@ -235,15 +231,15 @@
 
   &:hover, &:active {
     background: $white;
-    color: $blue-s1;
+    color: $uxpl-blue-hover-active;
   }
 
   &.current, &.active {
     background: $white;
     color: $gray-d4;
 
     &:hover, &:active {
-      color: $blue-s1;
+      color: $uxpl-blue-hover-active;
     }
   }
 }
@@ -268,7 +264,7 @@
       color: $gray-l1;
 
       &:hover {
-        background-color: $blue;
+        background-color: $uxpl-blue-base;
         color: $gray-l6;
       }
 
@@ -320,7 +316,7 @@
   vertical-align: top;
 
   &:hover {
-    color: $blue;
+    color: $uxpl-blue-base;
   }
 
   .ui-toggle-expansion {
@@ -358,7 +354,7 @@
     // STATE: hover/active
     &:hover, &:active {
       @extend %ui-fake-link;
-      color: $ui-link-color-focus;
+      color: $uxpl-blue-base;
     }
   }
 
@@ -404,7 +400,7 @@
       position: absolute;
       top: -12px;
       left: -($baseline/4);
-      color: $blue-s1;
+      color: $blue-d1;
     }
   }
 

cms/static/sass/elements/_footer.scss

@@ -27,10 +27,10 @@
     }
 
     a {
-      color: $ui-link-color;
+      color: $uxpl-blue-base;
 
       &:hover, &:active {
-        color: $ui-link-color-focus;
+        color: $uxpl-blue-hover-active;
       }
     }
 

cms/static/sass/elements/_forms.scss

@@ -249,7 +249,7 @@ form {
         &:focus {
 
           + .tip {
-            color: $gray;
+            color: $gray-d1;
           }
         }
       }

cms/static/sass/elements/_header.scss

@@ -76,7 +76,7 @@
       color: $gray-d1;
 
       &:hover {
-        color: $blue-s1;
+        color: $uxpl-blue-hover-active;
       }
     }
   }
@@ -151,7 +151,8 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      opacity: 0.75;
+      opacity: 1.0;
+      color: $gray-d3;
     }
 
     .course-org {
@@ -172,10 +173,10 @@
     .course-link {
       @include transition(color $tmg-f2 ease-in-out 0s);
       display: block;
-      color: $gray-d1;
+      color: $gray-d3;
 
       &:hover {
-        color: $blue-s1;
+        color: $uxpl-blue-hover-active;
       }
     }
   }
@@ -398,10 +399,10 @@ body.course.view-team .nav-library-settings .title,
 body.course.view-team .nav-library-settings-team,
 
 {
-  color: $blue;
+  color: $uxpl-blue-base;
 
   a {
-    color: $blue;
+    color: $uxpl-blue-base;
     pointer-events: none;
   }
 }

cms/static/sass/elements/_layout.scss

@@ -261,7 +261,7 @@
       float: right;
       margin-top: ($baseline/2);
       text-align: right;
-      color: $gray-l2;
+      color: $gray-d1;
     }
   }
 }

cms/static/sass/elements/_modules.scss

@@ -26,13 +26,13 @@
       @extend %t-title8;
       @extend %t-strong;
       margin-bottom: ($baseline/4);
-      color: $gray-l2;
+      color: $gray-d2;
       text-transform: uppercase;
     }
 
     .meta {
       @extend %t-copy-sub2;
-      color: $gray-l1;
+      color: $gray-d2;
     }
   }
 }
@@ -110,7 +110,7 @@
       @extend %t-title5;
       @extend %t-strong;
       margin-bottom: ($baseline*0.75);
-      color: $green-d1;
+      color: $uxpl-green-base;
     }
 
     // add component - list of green buttons
@@ -131,16 +131,10 @@
         height: ($baseline*5);
         margin-bottom: ($baseline/2);
         box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, .4) inset;
-        border: 1px solid $green-d2;
         border-radius: ($baseline/4);
         padding: 0;
-        background-color: $green-l1;
         text-align: center;
-        color: $white;
-
-        &:hover {
-          background: $green-s1;
-        }
+        @extend %btn-primary-green;
 
         .name {
           @include box-sizing(border-box);

cms/static/sass/elements/_pagination.scss

@@ -69,7 +69,7 @@
     margin: 0 ($baseline*0.75);
     padding: ($baseline/4);
     text-align: center;
-    color: $gray;
+    color: $gray-d2;
   }
 
   .current-page {
@@ -82,7 +82,7 @@
     @extend %t-title4;
     @extend %t-regular;
     vertical-align: middle;
-    color: $gray-l2;
+    color: $gray;
   }
 
   .pagination-form {

cms/static/sass/elements/_sock.scss

@@ -31,15 +31,15 @@
       @extend %t-action4;
       background: $gray-l5;
       padding: ($baseline/2) $baseline;
-      color: $gray;
+      color: $gray-d2;
 
       .icon {
         @extend %t-icon6;
         @include margin-right($baseline/4);
       }
 
       &:hover {
-        background: $blue;
+        background: $uxpl-blue-base;
         color: $white;
       }
     }

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

@@ -220,7 +220,7 @@
   margin: 0 0 $baseline 0;
   border-bottom: 1px solid $gray-l4;
   padding: 0 0 $baseline 0;
-  color: $gray-l1;
+  color: $gray-d1;
 
   &:last-child {
     margin-bottom: 0;

cms/static/sass/elements/_xblocks.scss

@@ -167,7 +167,7 @@
       display: inline-block;
       vertical-align: top;
       width: flex-grid(9, 12);
-      color: $gray-l1;
+      color: $gray-d1;
 
       .count-current-shown,
       .count-total,