Improve color palette

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

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;
     }

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;

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: "#";