Merge pull request #15300 from edx/sarahkf/fix-color-contrast

fixing color contrast issues in studio

cms/static/sass/elements/_controls.scss

@@ -90,17 +90,17 @@
   color: $white;
 
   &:hover, &:active {
-    background: $uxpl-green-hover-active;
-    border-color: $uxpl-green-hover-active;
+    background: $uxpl-green-dark-hover-active;
+    border-color: $uxpl-green-dark-hover-active;
   }
 
   &.current, &.active {
-    background: $uxpl-green-hover-active;
+    background: $uxpl-green-dark-hover-active;
     color: $white;
-    border-color: $uxpl-green-hover-active;
+    border-color: $uxpl-green-dark-hover-active;
 
     &:hover, &:active {
-      background: $uxpl-green-hover-active;
+      background: $uxpl-green-dark-hover-active;
     }
   }
 }
@@ -111,7 +111,7 @@
 %btn-secondary-gray {
   @extend %ui-btn-secondary;
   border-color: $gray-l3;
-  color: $gray-l1;
+  color: $gray-d1;
 
   &:hover, &:active {
     background: $gray-l3;
@@ -294,7 +294,7 @@
       display: block;
       border-radius: 3px;
       padding: 3px ($baseline/2);
-      color: $gray-l1;
+      color: $gray-d1;
 
       &:hover {
         background-color: $uxpl-blue-base;

cms/static/sass/elements/_forms.scss

@@ -276,7 +276,7 @@ form {
 
         display: block;
         margin-top: ($baseline/4);
-        color: $gray-l3;
+        color: $gray-d1;
       }
 
       .tip-note {

cms/static/sass/elements/_layout.scss

@@ -107,7 +107,7 @@
         display: inline-block;
         vertical-align: bottom; // correct for extra padding in FF
         max-width: 250px;
-        color: $gray;
+        color: $gray-d2;
 
         &.navigation-current {
           @extend %ui-disabled;

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

@@ -114,7 +114,7 @@
             @extend %t-regular;
             background-image: none;
             background-color: $white;
-            color: $mediumGrey;
+            color: $gray-d1;
             border-radius: 0;
             box-shadow: none;
             border: 0;
@@ -122,11 +122,11 @@
             text-transform: uppercase;
             &:hover {
               background-color: $white;
-              color: $blue;
+              color: $uxpl-blue-base;
             }
             &.active {
-              border-bottom: 4px solid $blue-d2;
-              color: $offBlack;
+              border-bottom: 4px solid $uxpl-blue-base;
+              color: $uxpl-blue-base;
             }
           }
         }
@@ -191,7 +191,7 @@
       }
 
       a {
-        color: $blue;
+        color: $blue-d2;
 
         &:hover {
           color: $blue-s2;

cms/static/sass/elements/_navigation.scss

@@ -159,7 +159,7 @@ nav {
         display: block;
 
         &:hover, &:active {
-          color: $blue-s1;
+          color: $uxpl-blue-base;
         }
       }
     }

cms/static/sass/elements/_uploaded-assets.scss

@@ -42,11 +42,11 @@
         padding: 0 ($baseline/2) ($baseline*0.75) ($baseline/2);
         vertical-align: middle;
         text-align: left;
-        color: $gray;
+        color: $gray-d2;
 
         .column-sort-link {
           cursor: pointer;
-          color: $blue;
+          color: $blue-d2;
         }
 
         .current-sort {
@@ -111,7 +111,7 @@
             .date-col,
             .embed-col,
             .embed-col .embeddable-xml-input {
-              color: $gray;
+              color: $gray-d1;
             }
           }
         }
@@ -141,13 +141,13 @@
         .date-col {
           @include transition(all $tmg-f2 ease-in-out 0s);
           @extend %t-copy-sub2;
-          color: $gray-l2;
+          color: $gray-d1;
         }
 
         .embed-col {
           @include transition(all $tmg-f2 ease-in-out 0s);
           padding-left: ($baseline*0.75);
-          color: $gray-l2;
+          color: $gray-d1;
 
           .embeddable-xml-input {
             @include transition(all $tmg-f2 ease-in-out 0s);
@@ -156,7 +156,7 @@
             border: 1px solid transparent;
             background: none;
             width: 100%;
-            color: $gray-l2;
+            color: $gray-d1;
 
             &:focus {
               background-color: $white;

cms/static/sass/partials/_variables.scss

@@ -43,9 +43,11 @@ $transparent: rgba(0,0,0,0) !default; // used when color value is needed for UI
 // ====================
 $uxpl-blue-base: rgb(0, 117, 180) !default; // wcag2a compliant
 $uxpl-blue-hover-active: rgb(6, 86, 131) !default; // wcag2a compliant
+$uxpl-light-blue-base: rgb(242, 248, 251) !default
 
 $uxpl-green-base: rgb(0, 129, 0) !default; // wcag2a compliant
 $uxpl-green-hover-active: rgb(0, 155, 0) !default; // wcag2a compliant
+$uxpl-green-dark-hover-active: rgb(0,88,0) !default;
 
 $uxpl-pink-base: rgb(194, 56, 125) !default; // wcag2a compliant
 $uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%) !default; // wcag2a compliant
@@ -218,7 +220,7 @@ $color-staff-only: $black !default;
 $color-gated: $black !default;
 
 $color-heading-base: $gray-d2 !default;
-$color-copy-base: $gray-l1 !default;
+$color-copy-base: $gray-d2 !default;
 $color-copy-emphasized: $gray-d2 !default;
 
 // +Timing

cms/static/sass/views/_assets.scss

@@ -54,7 +54,7 @@
       display: inline-block;
       vertical-align: top;
       width: flex-grid(9, 12);
-      color: $gray-l1;
+      color: $gray-d1;
 
       .count-current-shown,
       .count-total,
@@ -130,7 +130,7 @@
         margin: 0 ($baseline*0.75);
         padding: ($baseline/4);
         text-align: center;
-        color: $gray;
+        color: $gray-d1;
       }
 
       .current-page {
@@ -143,7 +143,7 @@
         @extend %t-title4;
         @extend %t-regular;
         vertical-align: middle;
-        color: $gray-l2;
+        color: $gray;
       }
 
 
@@ -219,7 +219,7 @@
         &.nav-dd{
           // basic layout - nav items
           margin: 0 -($baseline/2);
-          color: $blue;
+          color: $blue-d2;
           cursor: pointer;
           .wrapper-nav-sub {
             top: 35px;
@@ -342,7 +342,7 @@
 
         .type-col {
           @extend %t-copy-sub2;
-          color: $gray-l2;
+          color: $gray-d1;
         }
 
         .date-col {

cms/static/sass/views/_container.scss

@@ -246,7 +246,7 @@
 
         .copy {
           @extend %t-copy-sub2;
-          color: $gray;
+          color: $gray-d2;
         }
 
         .date,
@@ -287,7 +287,7 @@
           @extend %cont-text-wrap;
 
           a {
-            color: $blue;
+            color: $uxpl-blue-base;
 
             &:hover {
               color: $orange-d1;

cms/static/sass/views/_dashboard.scss

@@ -491,7 +491,7 @@
     .course-metadata {
       @extend %t-copy-sub1;
       @include transition(opacity $tmg-f1 ease-in-out 0);
-      color: $gray;
+      color: $gray-d2;
 
       .metadata-item {
         display: inline-block;

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

@@ -21,6 +21,7 @@
 
     .no-content {
       @extend %no-content;
+      color: $gray-d1;
     }
 
     .wrapper-groups {

cms/static/sass/views/_index.scss

@@ -228,7 +228,7 @@
               min-height: ($baseline*8);
               margin-right: flex-gutter();
               padding: ($baseline*0.75) $baseline;
-              color: $gray-l1;
+              color: $gray-d1;
 
               .title {
                 @extend %t-copy-base;
@@ -244,7 +244,7 @@
                 top: -($baseline/5);
 
                 .title {
-                  color: $blue;
+                  color: $blue-d2;
                 }
               }
 

cms/static/sass/views/_settings.scss

@@ -1078,7 +1078,7 @@
           background-color: $pink-l5;
 
           .status {
-            color: $pink-l2;
+            color: $pink;
           }
         }
       }

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

@@ -17,6 +17,7 @@
     .add-pages {
       @extend %no-content;
       margin: ($baseline*1.5) 0;
+      color: $gray-d1;
     }
 
     .notice-incontext {
@@ -257,7 +258,7 @@
           width: auto;
           height: ($baseline*1.5);
           border-radius: 3px;
-          color: $gray-l1;
+          color: $gray-d1;
           text-transform: uppercase;
 
           &:hover {

cms/static/sass/views/_textbooks.scss

@@ -12,6 +12,7 @@
 
     .no-textbook-content {
       @extend %no-content;
+      color: $gray-d1;
     }
 
     .textbook {

cms/static/sass/views/_updates.scss

@@ -182,7 +182,7 @@
 	margin: 0;
 	@include border-radius(0, 3px, 3px, 0);
 	@include border-left(none);
-	background: $lightGrey;
+	background: $uxpl-light-blue-base;
 
 	.title {
 		@extend %t-title4;