🎨 feat(colors): totally refactor color usage to make it possible to r…

…e-theme the app

Prior to this commit, a lot of colors where hardoded inside the "style"
section of the .vue files. The color variables available for
configuration in the variables.scss file and their usage was also
blurry.

This commit totally overhauls that, defining color variables by purpose
and using them everywhere accordingly, effectively removing any
hardcoded colors and allowing to re-theme the schedule more easily.

src/App.vue

@@ -48,6 +48,8 @@
 </script>
 
 <style lang="scss">
+@import "./styles/variables";
+
   @font-face {
     font-family: 'Futura Next';
     font-style: normal;
@@ -62,7 +64,7 @@
   body {
     margin: 0;
     padding: 0;
-    background-color: #E6E6E6;
+    background-color: $background;
     font-family: 'Futura Next', serif;
     font-weight: 400;
     -webkit-font-smoothing: antialiased;

src/components/Footer.vue

@@ -43,7 +43,7 @@ export default {
 <style scoped lang="scss">
 .footer {
   font-size: .8em;
-  color: #2B2B2B;
+  color: lighten(black, 10);
   text-align: center;
   margin: 30px 10px;
 }

src/components/Header/Header.vue

@@ -23,8 +23,10 @@
 </script>
 
 <style scoped lang="scss">
+@import "../../styles/variables";
+
   .header {
-    background-color: #FFFFFF;
+    background-color: $background;
     width: 100%;
     text-transform: uppercase;
     text-align: center;
@@ -39,12 +41,12 @@
     &__banner {
       margin-top: 20px;
       height: 40px;
-      background-color: #b2b2b2;
+      background-color: $passive;
+      color: $text-on-passive;
       vertical-align: middle;
       text-align: center;
       font-weight: 600;
       line-height: 44px;
-      color: #FFFFFF;
     }
   }
 </style>

src/components/Talk.vue

@@ -35,7 +35,6 @@ export default Vue.extend({
 @import "../styles/variables";
 
 .talk {
-  background-color: #FFFFFF;
   padding: 6px;
   border-radius: $radius;
   box-shadow: $shadow;
@@ -46,7 +45,7 @@ export default Vue.extend({
 
   &.keynote {
     background-color: $primary;
-    color: #FFFFFF;
+    color: $text-on-primary;
     border-left: none;
 
     .title {
@@ -55,7 +54,7 @@ export default Vue.extend({
   }
 
   &:hover {
-    background-color: darken(#FFFFFF, 10);
+    background-color: darken(white, 10);
 
     &.keynote {
       background-color: darken($primary, 10);

src/styles/variables.scss

@@ -1,6 +1,38 @@
+// Color branding below according to Publicis Sapient colors
+
+// Primary coolor is used as the baseline for the theme to appear in important
+// locations. It is used:
+//  - in the **Schedule** view for the background of the **keynote sessions**
+//  - in the **TalkInfo** view for the **speaker** blocks background
 $primary: #FE414D;
-$secondary: hsla(0, 0%, 0%, 1);
-$tertiary: #419FFE;
+$text-on-primary: white;
+
+// Accent color is used to put accent on things that should stand out somehow.
+// It is used:
+//  - in the **Schedule** view for the **dashed line** to show the current time
+//  - in the **TalkInfo** view
+//      - for the **_rate/comment_** button
+//      - for the **time** badge
+//      - for the **room** badge
+$accent: #419FFE;
+$text-on-accent: white;
+
+// Passive color is used to dissociate "passive" information while not
+// especially making them stand out
+//  - in the **Header** for the background color of the banner with the date
+//  - in the **TalkInfo** view for the **_back to planning_** button
+$passive: #B2B2B2;
+$text-on-passive: white;
+
+// Background color is used to compute all the main colored backgrounds
+// everywhere; it is used: - for the **Header** background
+//  - in the **Schedule** view
+//      - for the main background
+//      - for the schedule ("wrapper") background, by lightening it a bit
+//  - in the **TalkInfo** view
+//      - for the main background
+//      - for the main talk summary background, by lightening it a bit
+$background: #E6E6E6;
 
 $radius: 2px;
 $shadow: 0 0 20px 0 rgb(0 0 0 / 15%);
@@ -17,7 +49,7 @@ $other: #000000;
   box-shadow: $shadow;
   border-radius: $radius;
   margin: 30px auto auto;
-  background-color: #F2F2F2;
+  background-color: $background;
   padding-bottom: 10px;
 
   @media (max-width: 1024px) {

src/views/Schedule.vue

@@ -111,10 +111,11 @@ export default Vue.extend({
 
 .wrapper {
   position: relative;
+  background-color: lighten($background, 2);
 }
 
 .talk {
-  background-color: #FFFFFF;
+  background-color: white;
   position: absolute;
   width: 220px;
 
@@ -126,7 +127,7 @@ export default Vue.extend({
 .now-bar {
   position: absolute;
   width: 100%;
-  border-top: 2px dashed $tertiary;
+  border-top: 2px dashed $accent;
   z-index: 2;
 }
 </style>

src/views/TalkInfo.vue

@@ -76,6 +76,7 @@ export default {
 .info {
   @extend %body-shared;
   padding: 10px;
+  background-color: lighten($background, 2);
 }
 
 .head {
@@ -84,23 +85,23 @@ export default {
 }
 
 .back {
-  background-color: #B2B2B2;
+  background-color: $passive;
+  color: $text-on-passive;
   padding: 10px 0;
-  color: #FFFFFF;
   font-size: .8em;
   border-radius: $radius;
   margin-top: 30px;
   text-transform: uppercase;
   text-align: center;
 
   &:hover {
-    background-color: darken(#B2B2B2, 5);
+    background-color: darken($passive, 10);
   }
 }
 
 .rate {
-  background-color: $primary;
-  color: #FFFFFF;
+  background-color: $accent;
+  color: $text-on-accent;
   padding: 10px 0;
   border-radius: $radius;
   margin-top: 10px;
@@ -109,12 +110,12 @@ export default {
   font-size: .8em;
 
   &:hover {
-    background-color: darken($primary, 5);
+    background-color: darken($accent, 10);
   }
 }
 
 .meet {
-  background-color: #00E6C3;
+  background-color: $accent;
   padding: 10px 0;
   border-radius: $radius;
   margin-top: 30px;
@@ -123,12 +124,12 @@ export default {
   font-size: .8em;
 
   &:hover {
-    background-color: darken(#00E6C3, 5);
+    background-color: darken($accent, 10);
   }
 }
 
 .summary {
-  color: #2B2B2B;
+  color: lighten(black, 10);
   font-size: .9em;
   margin-top: 30px;
   margin-bottom: 40px;
@@ -137,24 +138,24 @@ export default {
 .time {
   display: block;
   font-size: .8em;
-  background-color: $primary;
+  background-color: $accent;
   padding: 3px 5px 0 5px;
-  color: #FFFFFF;
+  color: $text-on-accent;
   border-radius: $radius;
 }
 
 .room {
   font-size: .8em;
-  background-color: $primary;
+  background-color: $accent;
   padding: 3px 5px 0 5px;
-  color: #FFFFFF;
+  color: $text-on-accent;
   border-radius: $radius;
   width: fit-content;
 }
 
 .speaker {
-  background-color: $tertiary;
-  color: #FFFFFF;
+  background-color: $primary;
+  color: $text-on-primary;
   padding: 10px;
   font-size: .8em;
   border-radius: $radius;