mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-03-25 12:20:24 -04:00
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.
This commit is contained in:
carljbowman
parent
656b22f713
commit
ebd41b169e
16 changed files with 42 additions and 44 deletions
src
_colors.scssmain.scss
components
grid
informationpage
spinner
thumbnailcolumn
views
conference/2018/schedule
download
preview
search
studentcompleteregistration
studentregistration
teacherregistration
teachers/landing
teacherwaitingroom
wedo2
|
|
@ -1,6 +1,12 @@
|
|||
/* 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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
content: "";
|
||||
|
||||
.white & {
|
||||
background-color: darken($ui-blue, 8%);
|
||||
background-color: $ui-blue-dark
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
display: block;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($ui-blue, 40);
|
||||
background-color: $ui-blue-10percent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
@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;
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
html,
|
||||
body {
|
||||
background-color: darken($ui-purple, 8%);
|
||||
background-color: $ui-purple-dark
|
||||
}
|
||||
|
||||
.student-complete-registration {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
html,
|
||||
body {
|
||||
background-color: darken($ui-purple, 8%);
|
||||
background-color: $ui-purple-dark
|
||||
}
|
||||
|
||||
.student-registration {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
html,
|
||||
body {
|
||||
background-color: darken($ui-purple, 8%);
|
||||
background-color: $ui-purple-dark
|
||||
}
|
||||
|
||||
.teacher-registration {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "../../../colors";
|
||||
@import "../../../frameless";
|
||||
|
||||
$teacher-spot: $ui-purple;
|
||||
$teacher-spot: $ui-purple-dark;
|
||||
$story-width: $cols3;
|
||||
|
||||
#view {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
html,
|
||||
body {
|
||||
background-color: darken($ui-purple, 8%);
|
||||
background-color: $ui-purple-dark
|
||||
}
|
||||
|
||||
.teacher-waitingroom {
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
p {
|
||||
color: darken($ui-blue, 15);
|
||||
color: $ui-blue-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue