From 703de9c6384d321e6e29e95342218beb2c96808b Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 24 Jun 2020 10:05:22 +0200
Subject: [PATCH] Improve color palette
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
js/src/common.scss | 2 +-
js/src/components/Event/DateCalendarIcon.vue | 9 +-
.../components/Event/EventMetadataBlock.vue | 2 +
js/src/components/Tag.vue | 6 +-
js/src/variables.scss | 89 +++++++++++++------
js/src/views/About.vue | 5 +-
js/src/views/About/AboutMobilizon.vue | 4 -
7 files changed, 80 insertions(+), 37 deletions(-)
diff --git a/js/src/common.scss b/js/src/common.scss
index 650effcdf..b2aac58d6 100644
--- a/js/src/common.scss
+++ b/js/src/common.scss
@@ -1,6 +1,6 @@
a {
text-decoration: underline;
- text-decoration-color: #fea72b;
+ text-decoration-color: #ED8D07;
text-decoration-thickness: 2px;
&.navbar-item,
diff --git a/js/src/components/Event/DateCalendarIcon.vue b/js/src/components/Event/DateCalendarIcon.vue
index 6712d32af..21d72c23c 100644
--- a/js/src/components/Event/DateCalendarIcon.vue
+++ b/js/src/components/Event/DateCalendarIcon.vue
@@ -42,9 +42,11 @@ export default class DateCalendarIcon extends Vue {
</script>
<style lang="scss" scoped>
+@import "../../variables.scss";
+
time.datetime-container {
- background: #f6f7f8;
- border: 1px solid rgba(46, 62, 72, 0.12);
+ background: $backgrounds;
+ border: 1px solid $borders;
border-radius: 8px;
display: flex;
flex-direction: column;
@@ -59,7 +61,7 @@ time.datetime-container {
font-weight: 600;
&.month {
- color: #fa3e3e;
+ color: $danger;
padding: 2px 0;
font-size: 12px;
line-height: 12px;
@@ -67,6 +69,7 @@ time.datetime-container {
}
&.day {
+ color: $violet-3;
font-size: 20px;
line-height: 20px;
}
diff --git a/js/src/components/Event/EventMetadataBlock.vue b/js/src/components/Event/EventMetadataBlock.vue
index 4aab57660..79d9af5b3 100644
--- a/js/src/components/Event/EventMetadataBlock.vue
+++ b/js/src/components/Event/EventMetadataBlock.vue
@@ -20,6 +20,8 @@ export default class EventMetadataBlock extends Vue {
}
</script>
<style lang="scss" scoped>
+@import "../../variables.scss";
+
h2 {
font-size: 1.8rem;
font-weight: 500;
diff --git a/js/src/components/Tag.vue b/js/src/components/Tag.vue
index 7444eda0f..efc45ecc9 100644
--- a/js/src/components/Tag.vue
+++ b/js/src/components/Tag.vue
@@ -13,9 +13,11 @@ export default class Tag extends Vue {}
</script>
<style lang="scss" scoped>
+@import "../variables.scss";
+
span.tag {
- background: #ecebf7;
- color: #8e8bae;
+ background: $purple-3;
+ color: $violet-2;
text-transform: uppercase;
&::before {
content: "#";
diff --git a/js/src/variables.scss b/js/src/variables.scss
index 16549bf26..37a3001db 100644
--- a/js/src/variables.scss
+++ b/js/src/variables.scss
@@ -4,52 +4,79 @@ $bleuvert: #1e7d97;
$jaune: #ffd599;
$violet: #424056;
+/**
+ * Text body, paragraphs
+ */
+$violet-1: #3A384C;
+$violet-2: #474467;
+
+/**
+ * Titles, dark borders, buttons
+ */
+$violet-3: #3C376E;
+
+/**
+ * Borders
+ */
+$borders: #D7D6DE;
+$backgrounds: #ECEBF2;
+
+/**
+ * Text
+ */
+$purple-1: #757199;
+
+/**
+ * Background
+ */
+$purple-2: #CDCAEA;
+$purple-3: #E6E4F4;
+
+$orange-2: #ED8D07;
+$orange-3: #D35204;
+
+$yellow-1: #FFD599;
+$yellow-2: #FFF1DE;
+$yellow-3: #FBD5CB;
+$yellow-4: #f7ba30;
+
$primary: $bleuvert;
$primary-invert: findColorInvert($primary);
-//$secondary: #ffcc85;
$secondary: $jaune;
$secondary-invert: findColorInvert($secondary);
-$background-color: $violet;
+$background-color: $violet-2;
-$success: #0eccaf;
+$success: #0D8758;
$success-invert: findColorInvert($success);
$info: #36bcd4;
$info-invert: findColorInvert($info);
-$danger: #ff7061;
+$danger: #FF2E54;
$danger-invert: findColorInvert($danger);
$link: $primary;
$link-invert: $primary-invert;
+$text: $violet-1;
-$colors: map-merge(
- $colors,
- (
- "primary": (
- $primary,
+$colors: map-merge($colors,
+ ("primary": ($primary,
$primary-invert,
),
- "secondary": (
- $secondary,
+ "secondary": ($secondary,
$secondary-invert,
),
- "success": (
- $success,
+ "success": ($success,
$success-invert,
),
- "info": (
- $info,
+ "info": ($info,
$info-invert,
),
- "danger": (
- $danger,
+ "danger": ($danger,
$danger-invert,
),
- "link": (
- $link,
+ "link": ($link,
$link-invert,
),
- )
-);
+ ));
// Navbar
$navbar-background-color: $secondary;
@@ -64,25 +91,34 @@ $body-background-color: #efeef4;
$fullhd-enabled: false;
$hero-body-padding-medium: 6rem 1.5rem;
-main > .container {
+main>.container {
background: $body-background-color;
}
$title-color: #3c376e;
-$title-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
- serif;
+$title-family: "Liberation Sans",
+"Helvetica Neue",
+Roboto,
+Helvetica,
+Arial,
+serif;
$title-weight: 700;
$title-size: 40px;
$title-sub-size: 45px;
$title-sup-size: 30px;
$subtitle-color: #3a384c;
-$subtitle-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
- serif;
+$subtitle-family: "Liberation Sans",
+"Helvetica Neue",
+Roboto,
+Helvetica,
+Arial,
+serif;
$subtitle-weight: 400;
$subtitle-size: 32px;
$subtitle-sub-size: 30px;
$subtitle-sup-size: 15px;
+
.title {
margin: 30px auto 45px;
}
@@ -97,3 +133,4 @@ $subtitle-sup-size: 15px;
$input-border-color: #dbdbdb;
$breadcrumb-item-color: $primary;
$checkbox-background-color: #fff;
+$title-color: $violet-3;
\ No newline at end of file
diff --git a/js/src/views/About.vue b/js/src/views/About.vue
index e39ccbd0d..c7bd7afce 100644
--- a/js/src/views/About.vue
+++ b/js/src/views/About.vue
@@ -134,7 +134,10 @@ export default class About extends Vue {
}
.hero.register {
- background: lighten($background-color, 20%);
+ .title {
+ color: $violet-1;
+ }
+ background: $purple-2;
}
aside.menu {
diff --git a/js/src/views/About/AboutMobilizon.vue b/js/src/views/About/AboutMobilizon.vue
index 33bfbb182..3518c6f25 100644
--- a/js/src/views/About/AboutMobilizon.vue
+++ b/js/src/views/About/AboutMobilizon.vue
@@ -184,10 +184,6 @@ export default class AboutMobilizon extends Vue {}
}
}
-.hero.register {
- background: lighten($background-color, 20%);
-}
-
section {
padding: 3rem 0;