From c287a057568ed00abd79e8fae90de2e6fa95def6 Mon Sep 17 00:00:00 2001 From: "Alexis \"Horgix\" Chotard" Date: Wed, 14 Sep 2022 00:43:03 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20feat(colors):=20totally=20refact?= =?UTF-8?q?or=20color=20usage=20to=20make=20it=20possible=20to=20re-theme?= =?UTF-8?q?=20the=20app?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 4 +++- src/components/Footer.vue | 2 +- src/components/Header/Header.vue | 8 ++++--- src/components/Talk.vue | 5 ++--- src/styles/variables.scss | 38 +++++++++++++++++++++++++++++--- src/views/Schedule.vue | 5 +++-- src/views/TalkInfo.vue | 31 +++++++++++++------------- 7 files changed, 65 insertions(+), 28 deletions(-) diff --git a/src/App.vue b/src/App.vue index 2b75156..4df7098 100644 --- a/src/App.vue +++ b/src/App.vue @@ -48,6 +48,8 @@ diff --git a/src/components/Talk.vue b/src/components/Talk.vue index 8e43752..0df7547 100644 --- a/src/components/Talk.vue +++ b/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); diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 99dd651..5e19785 100644 --- a/src/styles/variables.scss +++ b/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) { diff --git a/src/views/Schedule.vue b/src/views/Schedule.vue index 81ef040..4b2f321 100644 --- a/src/views/Schedule.vue +++ b/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; } diff --git a/src/views/TalkInfo.vue b/src/views/TalkInfo.vue index bc848ef..bd253ba 100644 --- a/src/views/TalkInfo.vue +++ b/src/views/TalkInfo.vue @@ -76,6 +76,7 @@ export default { .info { @extend %body-shared; padding: 10px; + background-color: lighten($background, 2); } .head { @@ -84,9 +85,9 @@ 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; @@ -94,13 +95,13 @@ export default { 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;