Merge pull request #1970 from carljbowman/develop

Update WWW to unify color and typography with scratch-gui

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,16 +37,11 @@ $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;
 
-/* Component colors */
-$splash-green: #9c0;
-$splash-pink: #c2479d;
-$splash-blue: #199ed7;
-
 /* Down Deep */
 $dd-darkblue: hsla(195, 72.4, 17.1, 1);

src/components/forms/button.scss

@@ -8,31 +8,21 @@ $pass-bg: $ui-aqua;
     display: inline-block;
     margin: .5em 0;
     border: 0;
-    border-radius: 5px;
-    box-shadow: 0 1px 1px $box-shadow-gray;
+    border-radius: .5rem;
     background-color: $ui-blue;
     cursor: pointer;
-    padding: .75em 1em;
+    padding: 1em 1.25em;
     color: $type-white;
     font-size: .8rem;
     font-weight: bold;
 
     /* USER BUTTON STATES */
-    &:hover {
-        box-shadow: 0 2px 2px $box-shadow-gray;
-    }
-
-    &:active {
-        box-shadow: inset 0 1px 2px $box-shadow-gray;
-    }
-
     &:focus {
         outline: none;
     }
 
     /* DATA BUTTON STATES */
     &.white {
-        border-top: 1px inset $active-gray;
         background-color: $base-bg;
         color: $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/intro/intro.scss

@@ -94,37 +94,37 @@
 
         &.sprite-1 {
             .circle {
-                background-color: $splash-green;
+                background-color: $ui-aqua;
             }
 
             .text {
                 top: 60px;
                 left: 50px;
-                color: $splash-green;
+                color: $ui-aqua;
             }
         }
 
         &.sprite-2 {
             .circle {
-                background-color: $splash-pink;
+                background-color: $ui-purple;
             }
 
             .text {
                 top: 77px;
                 left: 50px;
-                color: $splash-pink;
+                color: $ui-purple;
             }
         }
 
         &.sprite-3 {
             .circle {
-                background-color: $splash-blue;
+                background-color: $ui-blue;
             }
 
             .text {
                 top: 37px;
                 left: 45px;
-                color: $splash-blue;
+                color: $ui-blue;
             }
 
             .subtext {
@@ -145,19 +145,19 @@
 
             &.sprite-1 {
                 .circle {
-                    box-shadow: 0 0 10px 2px $splash-green;
+                    box-shadow: 0 0 10px 2px $ui-aqua;
                 }
             }
 
             &.sprite-2 {
                 .circle {
-                    box-shadow: 0 0 10px 2px $splash-pink;
+                    box-shadow: 0 0 10px 2px $ui-purple;
                 }
             }
 
             &.sprite-3 {
                 .circle {
-                    box-shadow: 0 0 10px 2px $splash-blue;
+                    box-shadow: 0 0 10px 2px $ui-blue;
                 }
             }
         }

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/components/welcome/welcome.scss

@@ -37,31 +37,31 @@
 
         &.blue {
             #{$color-bars} {
-                background-color: $splash-blue;
+                background-color: $ui-blue;
             }
 
             a {
-                color: $splash-blue;
+                color: $ui-blue;
             }
         }
 
         &.green {
             #{$color-bars} {
-                background-color: $splash-green;
+                background-color: $ui-aqua;
             }
 
             a {
-                color: $splash-green;
+                color: $ui-aqua;
             }
         }
 
         &.pink {
             #{$color-bars} {
-                background-color: $splash-pink;
+                background-color: $ui-purple;
             }
 
             a {
-                color: $splash-pink;
+                color: $ui-purple;
             }
         }
     }

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;
@@ -22,34 +22,34 @@ h4 {
     padding: 0;
 
     color: $header-gray;
-    font-weight: 700;
+    font-weight: bold;
 }
 
 h1 {
     font-size: 2.5rem;
-    font-weight: 900;
+    font-weight: bold;
 }
 
 h2 {
     font-size: 2rem;
-    font-weight: 600;
+    font-weight: bold;
 }
 
 h3 {
     font-size: 1.4rem;
-    font-weight: 500;
+    font-weight: bold;
 }
 
 h4 {
     font-size: 1rem;
-    font-weight: 700;
+    font-weight: bold;
 }
 
 h5 {
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: .85rem;
-    font-weight: 700;
+    font-weight: bold;
 }
 
 p {
@@ -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 {
@@ -85,14 +85,14 @@ p {
 
 b,
 strong {
-    font-weight: 500;
+    font-weight: bold;
 }
 
 /* Links */
 a {
     cursor: pointer;
     color: $ui-blue;
-    font-weight: 500;
+    font-weight: bold;
 
     &:link,
     &:visited,
@@ -103,17 +103,15 @@ a {
 
     &:hover {
         text-decoration: none;
-        color: darken($ui-blue, 15);
+        color: $ui-blue-dark;
     }
 }
 
 /* Classes */
 .empty {
-    $bg-blue: #d9edf7;
-    $bg-blue-accent: #bce8f1;
-    border: 1px solid $bg-blue-accent;
+    border: 1px solid $active-gray;
     border-radius: 5px;
-    background-color: $bg-blue;
+    background-color: $ui-blue-10percent;
     padding: 10px;
     text-align: center;
     line-height: 2rem;
@@ -136,7 +134,7 @@ p {
 
 p {
     font-size: 1rem;
-    font-weight: 300;
+    font-weight: normal;
 }
 
 ::selection {
@@ -149,7 +147,7 @@ ul {
 
     line-height: 1.5em;
     font-size: 1rem;
-    font-weight: 300;
+    font-weight: normal;
 
     li {
         margin: .75em 0;
@@ -159,10 +157,10 @@ ul {
 dl {
     line-height: 1.5rem;
     font-size: 1rem;
-    font-weight: 300;
+    font-weight: normal;
 
     dt {
-        font-weight: 700;
+        font-weight: bold;
     }
 
     dd {

src/views/components/components.jsx

@@ -57,9 +57,9 @@ const Components = () => (
                 <span className="type-gray">$type-gray</span>
                 <span className="type-white">$type-white</span>
                 <span className="link-blue">$link-blue</span>
-                <span className="splash-green">$splash-green</span>
-                <span className="splash-pink">$splash-pink</span>
-                <span className="splash-blue">$splash-blue</span>
+                <span className="splash-green">$ui-aqua</span>
+                <span className="splash-pink">$ui-purple</span>
+                <span className="splash-blue">$ui-blue</span>
             </div>
         </div>
     </div>

src/views/components/components.scss

@@ -101,15 +101,15 @@
         }
 
         .splash-green {
-            background-color: $splash-green;
+            background-color: $ui-aqua;
         }
 
         .splash-pink {
-            background-color: $splash-pink;
+            background-color: $ui-purple;
         }
 
         .splash-blue {
-            background-color: $splash-blue;
+            background-color: $ui-blue;
         }
     }
 }

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;
             }
 
@@ -74,13 +70,17 @@ $developer-spot: $splash-blue;
     .installation-column {
         max-width: $cols4;
         text-align: center;
+
+        p {
+            margin-right: .5rem;
+            margin-left: .5rem;
+        }
     }
 
     .installation-column-number {
         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/explore/explore.jsx

@@ -209,7 +209,6 @@ class Explore extends React.Component {
                             showViews={false}
                         />
                         <Button
-                            className="white"
                             onClick={this.handleGetExploreMore}
                         >
                             <FormattedMessage id="general.loadMore" />

src/views/explore/explore.scss

@@ -114,6 +114,7 @@ $base-bg: $ui-white;
         .button {
             display: block;
             margin: 0 auto;
+            width: 58.75rem;
         }
     }
 }
@@ -128,6 +129,12 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols4;
         }
+
+        #projectBox {
+            .button {
+                width: $cols4;
+            }
+        }
     }
 }
 
@@ -141,6 +148,12 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols6;
         }
+
+        #projectBox {
+            .button {
+                width: $cols6;
+            }
+        }
     }
 }
 
@@ -161,6 +174,9 @@ $base-bg: $ui-white;
                     width: $cols9;
                 }
             }
+            .button {
+                width: $cols9;
+            }
         }
     }
 }

src/views/messages/messages.scss

@@ -122,6 +122,7 @@
 .messages-social-loadmore {
     display: block;
     margin: 1rem auto;
+    width: 58.75rem;
 }
 
 .emoji-text.mod-comment {
@@ -137,6 +138,10 @@
     .comment-text {
         max-width: 9.75rem;
     }
+
+    .messages-social-loadmore {
+        width: $cols4;
+    }
 }
 
 @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
@@ -148,10 +153,18 @@
     .comment-text {
         max-width: 19.5rem;
     }
+
+    .messages-social-loadmore {
+        width: $cols6;
+    }
 }
 
 @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
     .comment-text {
         max-width: 23.75rem;
     }
+
+    .messages-social-loadmore {
+        width: $cols8;
+    }
 }

src/views/messages/presentation.jsx

@@ -161,7 +161,7 @@ class SocialMessagesList extends React.Component {
         if (loadMore) {
             return (
                 <Button
-                    className="messages-social-loadmore white"
+                    className="messages-social-loadmore"
                     key="load-more"
                     onClick={this.props.onLoadMoreMethod}
                 >

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.jsx

@@ -136,7 +136,6 @@ class Search extends React.Component {
         } else if (this.state.loadMore) {
             searchAction = (
                 <Button
-                    className="white"
                     onClick={this.handleGetSearchMore}
                 >
                     <FormattedMessage id="general.loadMore" />

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 {
@@ -131,6 +131,7 @@ $base-bg: $ui-white;
         .button {
             display: block;
             margin: 0 auto;
+            width: 58.75rem;
         }
 
         .search-prompt {
@@ -160,6 +161,12 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols4;
         }
+
+        #projectBox {
+            .button {
+                width: $cols4;
+          }
+        }
     }
 }
 
@@ -174,6 +181,12 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols6;
         }
+
+        #projectBox {
+            .button {
+                width: $cols6;
+          }
+        }
     }
 }
 
@@ -187,5 +200,11 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols8;
         }
+
+        #projectBox {
+            .button {
+                width: $cols9;
+          }
+        }
     }
 }

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;
             }
         }
     }