From 9daea4b0f4827adedd8696cb91a0775c0850b254 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/Talk2.vue | 5 ++--- src/styles/variables.scss | 38 +++++++++++++++++++++++++++++--- src/views/Schedule2.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 4cf5c96..5a04e35 100644 --- a/src/App.vue +++ b/src/App.vue @@ -48,6 +48,8 @@ diff --git a/src/components/Talk2.vue b/src/components/Talk2.vue index fa62b55..e0e6153 100644 --- a/src/components/Talk2.vue +++ b/src/components/Talk2.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/Schedule2.vue b/src/views/Schedule2.vue index ab183c9..aaff11e 100644 --- a/src/views/Schedule2.vue +++ b/src/views/Schedule2.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 52cda0d..71faf24 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;