Skip to content

Commit

Permalink
🎨 feat(colors): totally refactor color usage to make it possible to r…
Browse files Browse the repository at this point in the history
…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.
  • Loading branch information
Horgix committed Sep 13, 2022
1 parent 34c3c41 commit 9daea4b
Show file tree
Hide file tree
Showing 7 changed files with 65 additions and 28 deletions.
4 changes: 3 additions & 1 deletion src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@
</script>

<style lang="scss">
@import "./styles/variables";
@font-face {
font-family: 'Futura Next';
font-style: normal;
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Footer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
8 changes: 5 additions & 3 deletions src/components/Header/Header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>
5 changes: 2 additions & 3 deletions src/components/Talk2.vue
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ export default Vue.extend({
@import "../styles/variables";
.talk {
background-color: #FFFFFF;
padding: 6px;
border-radius: $radius;
box-shadow: $shadow;
Expand All @@ -46,7 +45,7 @@ export default Vue.extend({
&.keynote {
background-color: $primary;
color: #FFFFFF;
color: $text-on-primary;
border-left: none;
.title {
Expand All @@ -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);
Expand Down
38 changes: 35 additions & 3 deletions src/styles/variables.scss
Original file line number Diff line number Diff line change
@@ -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%);
Expand All @@ -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) {
Expand Down
5 changes: 3 additions & 2 deletions src/views/Schedule2.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>
31 changes: 16 additions & 15 deletions src/views/TalkInfo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export default {
.info {
@extend %body-shared;
padding: 10px;
background-color: lighten($background, 2);
}
.head {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down

0 comments on commit 9daea4b

Please sign in to comment.