Add new colors

app/filters/rating-color.filter.js

@@ -14,35 +14,35 @@
       var colors = [
         // grey
         {
-          'color': '#7f7f7f',
+          'color': '#9D9FA0',
           'darkerColor': '#656565',
           'start': 0,
           'end': 899
         },
         // green
         {
-          'color': '#99cc09',
+          'color': '#69C329',
           'darkerColor': '#7aa307',
           'start': 900,
           'end': 1199
         },
         // blue
         {
-          'color': '#09affe',
+          'color': '#616BD5',
           'darkerColor': '#078ccb',
           'start': 1200,
           'end': 1499
         },
         // yellow
         {
-          'color': '#f39426',
+          'color': '#FCB816',
           'darkerColor': '#c2761e',
           'start': 1500,
           'end': 2199
         },
         // red
         {
-          'color': '#fe0866',
+          'color': '#EF3A3A',
           'darkerColor': '#cb0651',
           'start': 2200,
           'end': Infinity

app/my-dashboard/subtrack-stats/subtrack-stats.jade

@@ -7,7 +7,7 @@
       .flex-wrapper
         p.subtrack {{subtrack.subTrack | underscoreStrip}}
 
-        p.rating {{subtrack.stat | number}}
+        p.rating(style="color: {{subtrack.stat | ratingColor}}") {{subtrack.stat | number}}
           span(style="background-color: {{subtrack.stat | ratingColor}}", ng-if="subtrack.track === 'DEVELOP' || subtrack.track === 'DATA_SCIENCE'")
 
         p {{subtrack.statType}}

assets/css/directives/challenge-tile.scss

@@ -36,7 +36,7 @@ challenge-tile .challenge.tile-view {
         @include sofia-pro-medium;
         font-size: 14px;
         line-height: 18px;
-        color: $primary-text;
+        color: $gray-darkest;
         text-decoration: none;
         @include ellipsis;
 
@@ -91,7 +91,7 @@ challenge-tile .challenge.tile-view {
       .time-remaining {
         margin-top: 5px;
         font-size: 24px;
-        color: $primary-text;
+        color: $gray-darkest;
       }
 
       .unit-of-time {
@@ -128,7 +128,7 @@ challenge-tile .challenge.tile-view {
         @include sofia-pro-regular;
         font-size: 12px;
         text-transform: uppercase;
-        color: $primary-text;
+        color: $gray-darkest;
 
         &:before {
           content: '';
@@ -146,7 +146,7 @@ challenge-tile .challenge.tile-view {
     .roles {
       min-height: 36px;
       margin-bottom: 25px;
-      color: $primary-text;
+      color: $gray-darkest;
       @include source-sans-regular;
       font-size: 13px;
       line-height: 18px;
@@ -185,7 +185,7 @@ challenge-tile .challenge.tile-view {
       p {
         @include sofia-pro-medium;
         font-size: 12px;
-        color: $primary-text;
+        color: $gray-darkest;
       }
 
       .forum p {
@@ -243,7 +243,7 @@ challenge-tile .challenge.tile-view {
         @include sofia-pro-medium;
         font-size: 14px;
         line-height: 18px;
-        color: $primary-text;
+        color: $gray-darkest;
         text-decoration: none;
 
         &:hover {
@@ -277,7 +277,7 @@ challenge-tile .challenge.tile-view {
         margin-bottom: 30px;
         @include sofia-pro-regular;
         font-size: 20px;
-        color: $primary-text;
+        color: $gray-darkest;
 
         &.first-place {
           font-weight: bold;
@@ -303,7 +303,7 @@ challenge-tile .challenge.tile-view {
           margin-bottom: 5px;
           @include sofia-pro-bold;
           font-size: 18px;
-          color: $primary-text;
+          color: $gray-darkest;
         }
 
         p:last-child {
@@ -360,7 +360,7 @@ challenge-tile .challenge.list-view {
       display: block;
       @include sofia-pro-medium;
       font-size: 18px;
-      color: $primary-text;
+      color: $gray-darkest;
       text-decoration: none;
       @include ellipsis;
 
@@ -381,7 +381,7 @@ challenge-tile .challenge.list-view {
       max-width: 362px;
       @include source-sans-regular;
       font-size: 13px;
-      color: $primary-text;
+      color: $gray-darkest;
       @include ellipsis;
 
       .role {
@@ -407,7 +407,7 @@ challenge-tile .challenge.list-view {
         margin-bottom: 10px;
         @include sofia-pro-light;
         font-size: 18px;
-        color: $primary-text;
+        color: $gray-darkest;
         text-transform: uppercase;
       }
 
@@ -436,7 +436,7 @@ challenge-tile .challenge.list-view {
         @include sofia-pro-regular;
         font-size: 12px;
         text-transform: uppercase;
-        color: $primary-text;
+        color: $gray-darkest;
 
         &:before {
           content: '';
@@ -478,7 +478,7 @@ challenge-tile .challenge.list-view {
     p {
       @include sofia-pro-light;
       font-size: 24px;
-      color: $primary-text;
+      color: $gray-darkest;
     }
 
     .forum p {
@@ -512,30 +512,30 @@ challenge-tile .challenge.list-view {
 
 // Dynamic colors based on track
 .DESIGN {
-  .challenge-track { background-color: $accent-color; }
+  .challenge-track { background-color: $design; }
 
   &.tile-view {
-    header .subtrack-color { color: $accent-color; }
+    header .subtrack-color { color: $design; }
   }
 }
 .DEVELOP {
-  .challenge-track { background-color: $success-color; }
+  .challenge-track { background-color: $develop; }
 
   &.tile-view {
-    header .subtrack-color { color: $success-color; }
+    header .subtrack-color { color: $develop; }
   }
 }
 .DATA_SCIENCE {
-  .challenge-track { background-color: #F39426; }
+  .challenge-track { background-color: $data_science; }
 
   &.tile-view {
-    header .subtrack-color { color: #F39426; }
+    header .subtrack-color { color: $data_science; }
   }
 }
 .COPILOT {
-  .challenge-track { background-color: #7F7F7F; }
+  .challenge-track { background-color: $copilot; }
 
   &.tile-view {
-    header .subtrack-color { color: #7F7F7F; }
+    header .subtrack-color { color: $copilot; }
   }
 }

assets/css/directives/ios-card.scss

@@ -30,7 +30,7 @@ ios-card .challenge.tile-view {
       @include sofia-pro-medium;
       font-size: 14px;
       line-height: 18px;
-      color: $primary-text;
+      color: $gray-darkest;
       text-decoration: none;
       @include ellipsis;
     }
@@ -88,7 +88,7 @@ ios-card .challenge.tile-view {
     .time-remaining {
       margin-top: 5px;
       font-size: 24px;
-      color: $primary-text;
+      color: $gray-darkest;
     }
 
     .unit-of-time {
@@ -107,7 +107,7 @@ ios-card .challenge.tile-view {
   .roles {
     min-height: 36px;
     margin-bottom: 25px;
-    color: $primary-text;
+    color: $gray-darkest;
     @include source-sans-regular;
     font-size: 13px;
     line-height: 18px;
@@ -146,7 +146,7 @@ ios-card .challenge.tile-view {
     p {
       @include sofia-pro-bold;
       font-size: 11px;
-      color: $primary-text;
+      color: $gray-darkest;
     }
 
     .forum p {
@@ -180,20 +180,20 @@ ios-card .challenge.tile-view {
 
   // Dynamic colors based on track
   &.DESIGN {
-    .challenge-track { background-color: $accent-color; }
-    header p { color: $accent-color; }
+    .challenge-track { background-color: $design; }
+    header p { color: $design; }
   }
   &.DEVELOP {
-    .challenge-track { background-color: $success-color; }
-    header p { color: $success-color; }
+    .challenge-track { background-color: $develop; }
+    header p { color: $develop; }
   }
   &.DATA_SCIENCE {
-    .challenge-track { background-color: #F39426; }
-    header p { color: #F39426; }
+    .challenge-track { background-color: $data_science; }
+    header p { color: $data_science; }
   }
   &.COPILOT {
-    .challenge-track { background-color: #7F7F7F; }
-    header p { color: #7F7F7F; }
+    .challenge-track { background-color: $copilot; }
+    header p { color: $copilot; }
   }
 }
 

assets/css/directives/srm-tile.scss

@@ -33,7 +33,7 @@
       @include sofia-pro-medium;
       font-size: 14px;
       line-height: 49px;
-      color: $primary-text;
+      color: $gray-darkest;
       text-decoration: none;
       @include ellipsis;
     }
@@ -73,7 +73,7 @@
       &.day {
         margin-top: 2px;
         font-size: 24px;
-        color: $primary-text;
+        color: $gray-darkest;
       }
       &.month, &.time-zone {
         letter-spacing: 1.6px;
@@ -92,7 +92,7 @@
         margin-left: 3px;
         @include sofia-pro-regular;
         font-size: 12px;
-        color: $primary-text;
+        color: $gray-darkest;
       }
     }
   }

assets/css/layout/footer.scss

@@ -1,7 +1,7 @@
 @import '../partials/combined';
 
 .bottom-footer {
-	background-color: $primary-text;
+	background-color: $gray-darkest;
 	padding: 1px 20px 30px 20px;
 }
 

assets/css/layout/header.scss

@@ -108,7 +108,7 @@
 }
 
 .btn-open-menu {
-  color: $primary-text;
+  color: $gray-darkest;
   font-size: 15px;
   line-height: 55px;
   font-family: inherit;
@@ -246,7 +246,7 @@
     }
 
     .top-header {
-      background-color: $primary-text;
+      background-color: $gray-darkest;
     }
   }
 

assets/css/my-dashboard/community-updates.scss

@@ -3,7 +3,7 @@
 .community-updates {
   display: flex;
   flex-direction: column;
-  color: $primary-text;
+  color: $gray-darkest;
   @media only screen and (min-width: 1132px) {
     padding-bottom: 60px;
   }

assets/css/my-dashboard/header-dashboard.scss

@@ -27,7 +27,7 @@
       @include sofia-pro-bold;
       font-size: 22px;
       line-height: 26px;
-      color: $primary-text;
+      color: $gray-darkest;
       text-transform: uppercase;
       @media only screen and (min-width: 600px) {
         margin-bottom: 0;
@@ -65,7 +65,7 @@
           @include sofia-pro-bold;
           font-size: 18px;
           line-height: 23px;
-          color: $primary-text;
+          color: $gray-darkest;
           @media only screen and (min-width: 600px) {
             font-size: 22px;
             line-height: 28px;

assets/css/my-dashboard/my-challenges.scss

@@ -60,7 +60,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    color: $primary-text;
+    color: $gray-darkest;
     padding-left: 20px;
     padding-right: 20px;
 

assets/css/my-dashboard/my-dashboard.scss

@@ -37,7 +37,7 @@
   .section-title {
     @include sofia-pro-bold;
     font-size: 22px;
-    color: $primary-text;
+    color: $gray-darkest;
     text-align: center;
     text-transform: uppercase;
     @media only screen and (min-width: 450px) {

assets/css/my-dashboard/programs.scss

@@ -63,7 +63,7 @@
       @include sofia-pro-light;
       font-size: 23px;
       text-transform: uppercase;
-      color: $primary-text;
+      color: $gray-darkest;
       @media only screen and (min-width: 900px) {
         margin-top: 0;
       }
@@ -156,7 +156,7 @@
         margin-bottom: 37px;
         @include sofia-pro-light;
         font-size: 20px;
-        color: $primary-text;
+        color: $gray-darkest;
       }
 
       .badge-timeline {
@@ -210,7 +210,7 @@
       @include source-sans-regular;
       font-size: 14px;
       line-height: 20px;
-      color: $primary-text;
+      color: $gray-darkest;
       @media only screen and (min-width: 900px) {
         font-size: 16px;
       }

assets/css/my-dashboard/srms.scss

@@ -98,7 +98,7 @@
           @include sofia-pro-light;
           font-size: 24px;
           text-align: center;
-          color: $primary-text;
+          color: $gray-darkest;
           text-transform: uppercase;
           white-space: normal;
         }
@@ -120,7 +120,7 @@
       @include source-sans-regular;
       font-size: 14px;
       line-height: 20px;
-      color: $primary-text;
+      color: $gray-darkest;
       @media only screen and (min-width: 900px) {
         font-size: 16px;
       }

assets/css/my-dashboard/subtrack-stats.scss

@@ -26,15 +26,15 @@
           cursor: pointer;
 
           &:hover {
-            background-color: #F5FAE5;
+            background-color: $gray-lightest;
 
             .subtrack {
-              color: #99CC00;
-              border-bottom-color: #99CC00;
+              color: $gray-darkest;
+              border-bottom-color: $gray-darkest;
             }
 
             p:last-child {
-              color: #5E9EF1;
+              color: $gray-darkest;
             }
           }
 
@@ -73,7 +73,7 @@
         p {
           @include sofia-pro-regular;
           font-size: 12px;
-          color: #A3A3AE;
+          color: $system-gray;
 
           &:last-child {
             text-transform: uppercase;
@@ -90,7 +90,6 @@
           margin-top: 17px;
           margin-bottom: 7px;
           font-size: 32px;
-          color: $primary-text;
           @media only screen and (max-width: 767px) {
             margin-top: 10px;
           }

assets/css/partials/_colors.scss

@@ -1,8 +1,4 @@
-$white      : #fff;
-$off-white  : #fffffe;
-$white-gray : #d8d8d8;
 $light-black: #333;
-$black      : #000;
 
 // grays
 $light-gray      : #929292;
@@ -26,25 +22,42 @@ $dark-blue  : #0096ff;
 $review-blue: #0071bc;
 $login-blue : #26A9E0;
 
-//dashboard ported colors
-$color_storm_dust_approx: #666;
-$color_celeste_approx: rgb(207,207,207);
-$color_selective_yellow_approx: #ffb800;
-$color_wild_sand_approx: #f5f5f5;
-$color_mine_shaft_approx: #333;
-$alabaster: #fafafa;
-$color_bon_jour_approx: #e1e1e1;
-$color_california_approx: #ff9900;
-$color_flush_orange_approx: #ff7a00;
-
 // UI REFRESH COLORS
-$primary-text: #3D3D3D;
 $primary-color: #00aeff;
-$accent-color: #0096ff;
+$accent-color: #21B2F1;
 $success-color: #99cc00;
 $danger-color: #ff0066;
 $warning-color: #DAD714;
 
+$accent: #0096FF;
+$error: #F31D3D;
+$success: #5BC921;
+
+$level-5: #EF3A3A;
+$level-4: #FCB816;
+$level-3: #616BD5;
+$level-2: #69C329;
+$level-1: #9D9FA0;
+
+$design: #21B2F1;
+$data_science: #FC9A00;
+$develop: #05C14F;
+$copilot: #7D939E;
+
+$system-dark-gray: #394146;
+$system-gray: #A3A3AE;
+
+$white: #fff;
+$black: #000;
+$gray-darkest: #3D3D3D;
+$gray-darker: #7F7F7F;
+$gray-dark: #B7B7B7;
+$gray: #D1D3D4;
+$gray-light: #F0F0F0;
+$gray-lighter: #F6F6F6;
+$gray-lightest: #FCFCFC;
+
+// Refactor and get rid of these:
 $ui-page-gray: #f1f2f2;
 
 $ui-dark-gray: #231F20;

assets/css/skill-picker/skill-picker.scss

@@ -73,7 +73,7 @@
           cursor: pointer;
         }
         &.checked-track {
-          color: $primary-text;
+          color: $gray-darkest;
 
           span {
             background: url(/images/checkbox-sprite.png) left top no-repeat;