mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-26 17:16:11 -05: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
|
|
@ -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…
Reference in a new issue