Update colors to match 3.0 palette

Updates maintain WWW color variable naming conventions, but replaces values with 3.0 colors.

Colors have the commented HEX and GUI variable name.

More work to do auditing but it’s a start.

src/_colors.scss

 /* UI Primary Colors */
-$ui-blue: hsla(200, 90, 55, 1); // #25AFF4
-$ui-orange: hsla(35, 90, 55, 1); // #F49D25
+$ui-blue: hsla(215, 100, 65, 1); // #4C97FF Motion Primary
+$ui-blue-dark: hsla(215, 65, 55, 1); // #3373CC Motion Secondary
+$ui-blue-10percent: hsla(215, 100, 65, .1);
+$ui-blue-25percent:  hsla(215, 100, 65, .25);
+
+$ui-orange: hsla(38, 100, 55, 1); // #FFAB19 Control Primary
+$ui-orange-25percent: hsla(35, 90, 55, .25);
+
 $ui-light-gray: hsla(0, 0, 98, 1); //#FAFAFA
 $ui-gray: hsla(0, 0, 95, 1); //#F2F2F2
 $ui-dark-gray: hsla(0, 0, 70, 1); //#B3B3B3
@@ -9,21 +15,20 @@ $background-color: hsla(0, 0, 99, 1); //#FDFDFD
 
 
 /* UI Secondary Colors */
-$ui-aqua: hsla(170, 70, 50, 1); //#26D9BB
-$ui-purple: hsla(265, 55, 55, 1); //#824DCB
-$ui-yellow: hsla(45, 100, 50, 1); //#FFBF00
-$ui-white: #fff;
-
-$ui-border: hsla(0, 0, 85, 1); //#D9D9D9
-
 /* 3.0 colors */
 /* Using www naming convention for now, should be consistent with gui */
-$ui-green: hsla(163, 83, 40, 1); // #0fbd8c Pen Primary
-$ui-coral: hsla(350, 100, 70, 1); // #FF6680 More Primary
-$ui-coral-dark: hsla(350, 100, 60, 1); // #FF3355 More tertiary
-$ui-blue-10percent: hsla(215, 100, 65, .1);
-$ui-blue-25percent:  hsla(215, 100, 65, .25);
-$ui-orange-25percent: hsla(35, 90, 55, .25);
+$ui-aqua: hsla(163, 85, 40, 1); // #0FBD8C Extension Primary
+$ui-purple: hsla(260, 100, 70, 1); // #9966FF Looks Primary
+$ui-purple-dark: hsla(260, 60, 60, 1); // #774DCB Looks Secondary
+
+$ui-yellow: hsla(45, 100, 50, 1); // #FFBF00 Control Primary
+$ui-coral: hsla(350, 100, 70, 1); // #FF6680 More Blocks Primary
+$ui-coral-dark: hsla(350, 100, 60, 1); // #FF3355 More Blocks tertiary
+
+$ui-white: hsla(0, 100%, 100%, 1); //#FFF
+$ui-white-15percent: hsla(0, 100%, 100%, .15); //#FFF
+
+$ui-border: hsla(0, 0, 85, 1); //#D9D9D9
 
 /* Overlay UI Gray Colors */
 $active-gray: hsla(0, 0, 0, .1);
@@ -32,9 +37,9 @@ $box-shadow-gray: hsla(0, 0, 0, .25);
 $overlay-gray: hsla(0, 0, 0, .75);
 
 /* Typography Colors */
-$header-gray: hsla(0, 0, 42, 1); //#6B6B6B
-$type-gray: hsla(0, 0, 42, 1); //#6B6B6B
-$type-white: #fff;
+$header-gray: hsla(225, 15, 40, 1); //#575E75
+$type-gray: hsla(225, 15, 40, 1); //#575E75
+$type-white: hsla(0, 100, 100, 1); //#FFF
 
 $link-blue: $ui-blue;
 

src/components/grid/grid.scss

@@ -21,7 +21,7 @@
     .thumbnail {
         margin: 7px;
         border-radius: 4px;
-        box-shadow: 0 0 3px $box-shadow-gray;
+        box-shadow: 0 0 0 1px $active-gray;
         background-color: $ui-white;
         padding-bottom: 4px;
         width: $thumbnail-width;

src/components/informationpage/informationpage.scss

@@ -6,11 +6,9 @@
     @import "../../colors";
     @import "../../frameless";
 
-    $ui-secondary: darken($ui-blue, 10%);
-
     .title-banner {
         &.masthead {
-            background-color: $ui-secondary;
+            background-color: $ui-blue-dark;
             padding-bottom: .5rem;
 
             h1 {

src/components/spinner/spinner.scss

@@ -24,7 +24,7 @@
             content: "";
 
             .white & {
-                background-color: darken($ui-blue, 8%);    
+                background-color: $ui-blue-dark    
             }
         }
     }

src/components/thumbnailcolumn/thumbnailcolumn.scss

@@ -17,7 +17,7 @@
     .thumbnail {
         margin: 7px;
         border-radius: 4px;
-        box-shadow: 0 0 3px $box-shadow-gray;
+        box-shadow: 0 0 0 1px $active-gray;
         background-color: $ui-white;
         padding-bottom: 4px;
         width: $thumbnail-width;

src/main.scss

@@ -6,7 +6,7 @@ html,
 body {
     display: block;
     margin: 0;
-    background-color: darken($ui-blue, 8%);
+    background-color: $ui-blue-dark;
     padding: 0;
     color: $type-gray;
     font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
@@ -69,8 +69,8 @@ p {
 
         margin: 1.5em 0;
         border: 1px solid $active-gray;
-        border-radius: 5px;
-        background-color: lighten($ui-blue, 40);
+        border-radius: .5rem;
+        background-color: $ui-blue-10percent;
         padding: 1.25em;
 
         &.orange {
@@ -103,7 +103,7 @@ a {
 
     &:hover {
         text-decoration: none;
-        color: darken($ui-blue, 15);
+        color: $ui-blue-dark;
     }
 }
 

src/views/conference/2018/schedule/schedule.scss

@@ -67,7 +67,7 @@
                 display: block;
 
                 &:hover {
-                    background-color: lighten($ui-blue, 40);
+                    background-color: $ui-blue-10percent;
                 }
             }
         }

src/views/download/download.scss

 @import "../../colors";
 @import "../../frameless";
 
-$developer-spot: $splash-blue;
-
 #view {
     padding: 0;
 }
@@ -11,7 +9,7 @@ $developer-spot: $splash-blue;
     .title-banner {
         &.masthead {
             margin-bottom: 0;
-            background-color: $developer-spot;
+            background-color: $ui-blue-dark;
             padding-bottom: 0;
 
             h1 {
@@ -32,10 +30,8 @@ $developer-spot: $splash-blue;
             }
 
             .band {
-                $band-color: #3baddd;
-                
                 margin-top: 2rem;
-                background-color: $band-color;
+                background-color: $ui-white-15percent;
                 padding: 1rem 0;
             }
 
@@ -80,7 +76,6 @@ $developer-spot: $splash-blue;
         margin: 2rem auto;
         border: 2px solid $active-gray;
         border-radius: 2rem;
-        box-shadow: 0 0 0 .5rem lighten($ui-blue, 35);
         background-color: $ui-blue;
         width: 3.75rem;
         height: 3.75rem;

src/views/preview/preview.scss

@@ -151,7 +151,7 @@ $stage-height: 404px;
     }
 
     .remix-button {
-        background-color: $ui-green;
+        background-color: $ui-aqua;
         
         &:before {
             background-image: url("/svgs/project/remix-white.svg");

src/views/search/search.scss

@@ -12,7 +12,7 @@ $base-bg: $ui-white;
     .title-banner {
         &.masthead {
             margin-bottom: 0;
-            background-color: darken($ui-blue, 10%);
+            background-color: $ui-blue-dark;
             padding: 0;
 
             h1 {

src/views/studentcompleteregistration/studentcompleteregistration.scss

@@ -5,7 +5,7 @@
 
 html,
 body {
-    background-color: darken($ui-purple, 8%);
+    background-color: $ui-purple-dark
 }
 
 .student-complete-registration {

src/views/studentregistration/studentregistration.scss

@@ -5,7 +5,7 @@
 
 html,
 body {
-    background-color: darken($ui-purple, 8%);
+    background-color: $ui-purple-dark
 }
 
 .student-registration {

src/views/teacherregistration/teacherregistration.scss

@@ -5,7 +5,7 @@
 
 html,
 body {
-    background-color: darken($ui-purple, 8%);
+    background-color: $ui-purple-dark
 }
 
 .teacher-registration {

src/views/teachers/landing/landing.scss

 @import "../../../colors";
 @import "../../../frameless";
 
-$teacher-spot: $ui-purple;
+$teacher-spot: $ui-purple-dark;
 $story-width: $cols3;
 
 #view {

src/views/teacherwaitingroom/teacherwaitingroom.scss

@@ -2,7 +2,7 @@
 
 html,
 body {
-    background-color: darken($ui-purple, 8%);
+    background-color: $ui-purple-dark
 }
 
 .teacher-waitingroom {

src/views/wedo2/wedo2.scss

@@ -135,7 +135,7 @@
             cursor: pointer; 
 
             p {
-                color: darken($ui-blue, 15);
+                color: $ui-blue-dark;
             }
         }
     }