scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Update colors to match 3.0 palette

Browse source 
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.
This commit is contained in:
carljbowman 2018-07-16 18:02:12 -04:00
parent 656b22f713
commit ebd41b169e
16 changed files with 42 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/_colors.scss
View file

@ -1,6 +1,12 @@
/* UI Primary Colors */ /* UI Primary Colors */
$ui-blue: hsla(200, 90, 55, 1); // #25AFF4 $ui-blue: hsla(215, 100, 65, 1); // #4C97FF Motion Primary
$ui-orange: hsla(35, 90, 55, 1); // #F49D25 $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-light-gray: hsla(0, 0, 98, 1); //#FAFAFA
$ui-gray: hsla(0, 0, 95, 1); //#F2F2F2 $ui-gray: hsla(0, 0, 95, 1); //#F2F2F2
$ui-dark-gray: hsla(0, 0, 70, 1); //#B3B3B3 $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 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 */ /* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */ /* Using www naming convention for now, should be consistent with gui */
$ui-green: hsla(163, 83, 40, 1); // #0fbd8c Pen Primary $ui-aqua: hsla(163, 85, 40, 1); // #0FBD8C Extension Primary
$ui-coral: hsla(350, 100, 70, 1); // #FF6680 More Primary $ui-purple: hsla(260, 100, 70, 1); // #9966FF Looks Primary
$ui-coral-dark: hsla(350, 100, 60, 1); // #FF3355 More tertiary $ui-purple-dark: hsla(260, 60, 60, 1); // #774DCB Looks Secondary
$ui-blue-10percent: hsla(215, 100, 65, .1);
$ui-blue-25percent: hsla(215, 100, 65, .25); $ui-yellow: hsla(45, 100, 50, 1); // #FFBF00 Control Primary
$ui-orange-25percent: hsla(35, 90, 55, .25); $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 */ /* Overlay UI Gray Colors */
$active-gray: hsla(0, 0, 0, .1); $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); $overlay-gray: hsla(0, 0, 0, .75);
/* Typography Colors */ /* Typography Colors */
$header-gray: hsla(0, 0, 42, 1); //#6B6B6B $header-gray: hsla(225, 15, 40, 1); //#575E75
$type-gray: hsla(0, 0, 42, 1); //#6B6B6B $type-gray: hsla(225, 15, 40, 1); //#575E75
$type-white: #fff; $type-white: hsla(0, 100, 100, 1); //#FFF
$link-blue: $ui-blue; $link-blue: $ui-blue;

2
src/components/grid/grid.scss
View file

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

4
src/components/informationpage/informationpage.scss
View file

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

2
src/components/spinner/spinner.scss
View file

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

2
src/components/thumbnailcolumn/thumbnailcolumn.scss
View file

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

8
src/main.scss
View file

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

2
src/views/conference/2018/schedule/schedule.scss
View file

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

9
src/views/download/download.scss
View file

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

2
src/views/preview/preview.scss
View file

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

2
src/views/search/search.scss
View file

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

2
src/views/studentcompleteregistration/studentcompleteregistration.scss
View file

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

2
src/views/studentregistration/studentregistration.scss
View file

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

2
src/views/teacherregistration/teacherregistration.scss
View file

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

2
src/views/teachers/landing/landing.scss
View file

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

2
src/views/teacherwaitingroom/teacherwaitingroom.scss
View file

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

2
src/views/wedo2/wedo2.scss
View file

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