certificates: removing edX-centric Sass variables from config

lms/static/certificates/css/style-application.css

@@ -1036,7 +1036,7 @@ body, .view-validate-certificate .list-requirements .item, .view-validate-certif
   .view-certificate.is-honorcode .certificate-type {
     color: #88c7ec; }
   .view-certificate.is-idverified .status {
-    background: #3aa2e0; }
+    background: #88c7ec; }
   .view-certificate.is-idverified .accomplishment {
     background: white url("../images/logo-idverified-cropped.png") bottom left no-repeat;
     background-size: 75%; }

lms/static/certificates/sass/utilities/_variables.scss

@@ -48,49 +48,54 @@ $shadow-d1: rgba($black-t,0.4);
 $shadow-d2: rgba($black-t,0.6);
 
 // colors - default
-$edx-blue: rgb(58, 162, 224);
-$edx-blue-l1: tint($edx-blue,20%);
-$edx-blue-l2: tint($edx-blue,40%);
-$edx-blue-l3: tint($edx-blue,60%);
-$edx-blue-l4: tint($edx-blue,80%);
-$edx-blue-l5: tint($edx-blue,90%);
-$edx-blue-d1: shade($edx-blue,20%);
-$edx-blue-d2: shade($edx-blue,40%);
-$edx-blue-d3: shade($edx-blue,60%);
-$edx-blue-d4: shade($edx-blue,80%);
-$edx-blue-d5: shade($edx-blue,90%);
-$edx-blue-s1: saturate($edx-blue,15%);
-$edx-blue-s2: saturate($edx-blue,30%);
-$edx-blue-s3: saturate($edx-blue,45%);
-$edx-blue-u1: desaturate($edx-blue,15%);
-$edx-blue-u2: desaturate($edx-blue,30%);
-$edx-blue-u3: desaturate($edx-blue,45%);
-$edx-blue-t0: rgba($edx-blue,0.125);
-$edx-blue-t1: rgba($edx-blue,0.25);
-$edx-blue-t2: rgba($edx-blue,0.50);
-$edx-blue-t3: rgba($edx-blue,0.75);
-
-$edx-pink: rgb(182,37,104);
-$edx-pink-l1: tint($edx-pink,20%);
-$edx-pink-l2: tint($edx-pink,40%);
-$edx-pink-l3: tint($edx-pink,60%);
-$edx-pink-l4: tint($edx-pink,80%);
-$edx-pink-l5: tint($edx-pink,90%);
-$edx-pink-d1: shade($edx-pink,20%);
-$edx-pink-d2: shade($edx-pink,40%);
-$edx-pink-d3: shade($edx-pink,60%);
-$edx-pink-d4: shade($edx-pink,80%);
-$edx-pink-d5: shade($edx-pink,90%);
-$edx-pink-s1: saturate($edx-pink,15%);
-$edx-pink-s2: saturate($edx-pink,30%);
-$edx-pink-s3: saturate($edx-pink,45%);
-$edx-pink-u1: desaturate($edx-pink,15%);
-$edx-pink-u2: desaturate($edx-pink,30%);
-$edx-pink-u3: desaturate($edx-pink,45%);
-$edx-pink-t0: rgba($edx-pink,0.125);
-$edx-pink-t1: rgba($edx-pink,0.25);
-$edx-pink-t2: rgba($edx-pink,0.50);
-$edx-pink-t3: rgba($edx-pink,0.75);
+$blue: rgb(58, 162, 224);
+$blue-l1: tint($blue,20%);
+$blue-l2: tint($blue,40%);
+$blue-l3: tint($blue,60%);
+$blue-l4: tint($blue,80%);
+$blue-l5: tint($blue,90%);
+$blue-d1: shade($blue,20%);
+$blue-d2: shade($blue,40%);
+$blue-d3: shade($blue,60%);
+$blue-d4: shade($blue,80%);
+$blue-d5: shade($blue,90%);
+$blue-s1: saturate($blue,15%);
+$blue-s2: saturate($blue,30%);
+$blue-s3: saturate($blue,45%);
+$blue-u1: desaturate($blue,15%);
+$blue-u2: desaturate($blue,30%);
+$blue-u3: desaturate($blue,45%);
+$blue-t0: rgba($blue,0.125);
+$blue-t1: rgba($blue,0.25);
+$blue-t2: rgba($blue,0.50);
+$blue-t3: rgba($blue,0.75);
+
+$pink: rgb(182,37,104);
+$pink-l1: tint($pink,20%);
+$pink-l2: tint($pink,40%);
+$pink-l3: tint($pink,60%);
+$pink-l4: tint($pink,80%);
+$pink-l5: tint($pink,90%);
+$pink-d1: shade($pink,20%);
+$pink-d2: shade($pink,40%);
+$pink-d3: shade($pink,60%);
+$pink-d4: shade($pink,80%);
+$pink-d5: shade($pink,90%);
+$pink-s1: saturate($pink,15%);
+$pink-s2: saturate($pink,30%);
+$pink-s3: saturate($pink,45%);
+$pink-u1: desaturate($pink,15%);
+$pink-u2: desaturate($pink,30%);
+$pink-u3: desaturate($pink,45%);
+$pink-t0: rgba($pink,0.125);
+$pink-t1: rgba($pink,0.25);
+$pink-t2: rgba($pink,0.50);
+$pink-t3: rgba($pink,0.75);
+
+// colors - achievement branding
+$color-basic-achievement: $blue-l2;
+$color-greater-achievement: $blue;
+$color-greatest-achievement: $blue-s1;
 
 // ====================
 
@@ -132,16 +137,16 @@ $anim-distance-offviewport: ($baseline-h*100);                         // for la
 // ====================
 
 // application: general actions
-$color-primary: $edx-blue-d1;
-$color-secondary: $edx-blue-l1;
+$color-primary: $blue-d1;
+$color-secondary: $blue-l1;
 $color-tertiary: $gray-l1;
 $color-quarternary: $gray-l2;
 
 // application: general links
-$color-link: $edx-blue-d1;
-$color-link-focus: $edx-blue;
-$color-link-active: $edx-blue;
-$color-link-visited: $edx-blue-d2;
+$color-link: $blue-d1;
+$color-link-focus: $blue;
+$color-link-active: $blue;
+$color-link-visited: $blue-d2;
 
 // application: actions & links (button-focused)
 $bg-action-primary: $color-primary;
@@ -173,8 +178,8 @@ $color-copy-supplemental: $gray-l1;
 // ====================
 
 // application: states
-$bg-selected: $edx-blue-t1;
-$color-selected: $edx-blue-s1;
+$bg-selected: $blue-t1;
+$color-selected: $blue-s1;
 
 // ====================
 

lms/static/certificates/sass/views/_certificate.scss

@@ -181,15 +181,16 @@
     }
   }
 
+  // TODO - Determine what basic types are supported
   // CASE: honor code
   &.is-honorcode {
 
     .status {
-      background: $edx-blue-l2;
+      background: $color-basic-achievement;
     }
 
     .certificate-type {
-      color: $edx-blue-l2;
+      color: $color-basic-achievement;
     }
   }
 
@@ -197,7 +198,7 @@
   &.is-idverified {
 
     .status {
-      background: $edx-blue;
+      background: $color-basic-achievement;
     }
 
     .accomplishment {
@@ -214,7 +215,7 @@
     }
 
     .certificate-type {
-      color: $edx-blue;
+      color: $blue;
 
       .wrapper-img {
         width: 200px;

lms/static/certificates/sass/views/_invalid.scss

@@ -36,7 +36,7 @@
 
     .copy {
       @extend %t-copy-lead2;
-      color: $edx-pink;
+      color: $pink;
     }
   }
 

lms/static/certificates/sass/views/_validate.scss

@@ -87,7 +87,7 @@
       min-height: ($baseline-v*8);
       margin-bottom: $baseline-v;
       border-radius: ($baseline-v/10);
-      border-top: 4px solid $edx-blue-s1;
+      border-top: 4px solid $blue-s1;
       padding: ($baseline-v) ($baseline-h);
       color: $gray-l1;
       background: $gray-l5;
@@ -138,7 +138,7 @@
     }
 
     .requirement-allitems {
-      border-top-color: $edx-pink;
+      border-top-color: $pink;
     }
   }