From b82edd7e2c38885f9c72b2123ac334802538a0b4 Mon Sep 17 00:00:00 2001
From: Adam Coldrick <adam@sotk.co.uk>
Date: Sun, 27 Sep 2020 17:36:55 +0100
Subject: [PATCH] Convert colours to use standardised variables

This commit also makes some styling changes to improve accessibility and
tidy up the overall design somewhat.
---
 src/App.vue                             | 10 ++--
 src/components/Chip.vue                 |  9 ++--
 src/components/ChipInputDropdown.vue    |  8 ++--
 src/components/DateInline.vue           |  4 --
 src/components/EventComment.vue         |  2 +-
 src/components/EventTagsAdded.vue       |  4 +-
 src/components/Header.vue               |  4 +-
 src/components/ProjectGroupListItem.vue | 28 ++++++-----
 src/components/ProjectListItem.vue      | 13 +----
 src/components/ProjectTabDetails.vue    |  4 +-
 src/components/ProjectTabStories.vue    |  4 --
 src/components/Sidebar.vue              | 14 +++---
 src/components/Spinner.vue              |  9 ++--
 src/components/StoryListItem.vue        | 63 ++++++++++++++++---------
 src/components/TaskListEntry.vue        | 44 ++++++++++++++++-
 src/components/TimelineEvent.vue        | 41 ++++++++++------
 src/components/UserListItem.vue         |  8 +---
 src/views/ProjectDetail.vue             |  9 ++--
 src/views/ProjectGroupDetail.vue        |  9 ++--
 src/views/ProjectGroupList.vue          |  2 +-
 src/views/ProjectList.vue               |  2 +-
 src/views/StoryDetail.vue               | 29 ++++--------
 src/views/StoryList.vue                 |  2 +-
 src/views/UserDetail.vue                | 10 ++--
 24 files changed, 185 insertions(+), 147 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 16b1354..dc170e7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,13 +22,13 @@ export default {
 </script>
 
 <style lang="scss">
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
 
 #app {
   font-family: 'Roboto', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #333;
+  color: $grey-900;
 }
 
 #page {
@@ -37,8 +37,8 @@ export default {
 
 body {
   margin: 0;
-  background-color: #f7f6f4;
-  color: #333;
+  background-color: $grey-000;
+  color: $grey-900;
 
   h1 {
     font-size: 3rem;
@@ -48,7 +48,7 @@ body {
 }
 
 a {
-  color: #c43422;
+  color: $red-500;
   text-decoration: none;
 
   &:hover {
diff --git a/src/components/Chip.vue b/src/components/Chip.vue
index ea11b4c..fd7b9ad 100644
--- a/src/components/Chip.vue
+++ b/src/components/Chip.vue
@@ -34,13 +34,14 @@ export default {
   justify-content: space-between;
   padding: 6px 12px;
   margin: 0 5px;
-  background-color: #f0ad4e;
-  color: #f7f6f4;
+  background-color: $yellow-100;
+  color: $yellow-900;
   border-radius: 20px;
 }
 
 .chip-delete {
-  background: darken(#f0ad4e, 20%);
+  background: $yellow-300;
+  color: $yellow-800;
   font-size: 12px;
   cursor: pointer;
   border-radius: 50%;
@@ -50,7 +51,7 @@ export default {
   transition: background 0.2s;
 
   &:hover {
-    background: darken(#f0ad4e, 30%);
+    background: $yellow-400;
   }
 }
 </style>
diff --git a/src/components/ChipInputDropdown.vue b/src/components/ChipInputDropdown.vue
index 794e85c..48a1fe2 100644
--- a/src/components/ChipInputDropdown.vue
+++ b/src/components/ChipInputDropdown.vue
@@ -129,7 +129,7 @@ export default {
 <style lang="scss">
 .chip-input {
   align-items: center;
-  background-color: white;
+  background-color: $white;
   box-shadow: 2px 2px 4px rgba(0, 0, 0, .125);
   display: flex;
   margin-top: 5px;
@@ -146,7 +146,7 @@ export default {
     margin: 0;
     padding: 0 10px;
     line-height: 0;
-    color: #666666;
+    color: $grey-600;
   }
 }
 
@@ -180,13 +180,13 @@ export default {
   }
 
   li {
-    background: white;
+    background: $white;
     cursor: pointer;
     padding: 8px 10px;
 
     &.selected,
     &:hover {
-      background: #eeeeee;
+      background: $grey-100;
     }
   }
 }
diff --git a/src/components/DateInline.vue b/src/components/DateInline.vue
index d845817..b711f10 100644
--- a/src/components/DateInline.vue
+++ b/src/components/DateInline.vue
@@ -17,7 +17,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/src/components/EventComment.vue b/src/components/EventComment.vue
index 2743a6b..bf36918 100644
--- a/src/components/EventComment.vue
+++ b/src/components/EventComment.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="event-details">
+  <div class="event-details comment">
     <p class="event-title">
       <UserLinkInline v-if="event.author_id" :user-id="event.author_id" />
       commented on {{ createdDate.toDateString() }}
diff --git a/src/components/EventTagsAdded.vue b/src/components/EventTagsAdded.vue
index f098b25..2c7d8a7 100644
--- a/src/components/EventTagsAdded.vue
+++ b/src/components/EventTagsAdded.vue
@@ -34,8 +34,8 @@ export default {
 .tag {
   padding: 6px 12px;
   margin: 0 5px;
-  background-color: #f0ad4e;
-  color: #f7f6f4;
+  background-color: $yellow-100;
+  color: $yellow-900;
   border-radius: 20px;
 }
 </style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index deaea8e..ab2e535 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -16,8 +16,8 @@ export default {
   top: 0;
   left: 0;
   height: 60px;
-  background-color: #c43422;
-  color: #f7f6f4;
+  background-color: $red-500;
+  color: $grey-000;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
   padding: 0 10px;
   z-index: 2000;
diff --git a/src/components/ProjectGroupListItem.vue b/src/components/ProjectGroupListItem.vue
index d1181c5..b257370 100644
--- a/src/components/ProjectGroupListItem.vue
+++ b/src/components/ProjectGroupListItem.vue
@@ -97,16 +97,11 @@ export default {
 <style lang="scss" scoped>
 .project-group {
   padding: 20px;
-  border-top: solid 1px #ddd;
+  border-top: solid 1px $grey-100;
 
   h3 {
     margin: 0;
     font-size: 1.25em;
-    font-weight: 300;
-  }
-
-  &:hover {
-    background-color: #fff;
   }
 
   .metadata {
@@ -114,15 +109,11 @@ export default {
     align-items: center;
 
     .text-muted {
-      color: #999;
+      color: $grey-600;
     }
 
     p {
       margin: 0.5em 1em 0 1em;
-
-      &.text-muted {
-        color: #777;
-      }
     }
 
     ul {
@@ -132,7 +123,8 @@ export default {
       padding: 0;
 
       a {
-        color: #333;
+        color: $grey-800;
+        font-weight: 500;
       }
     }
   }
@@ -143,7 +135,17 @@ export default {
 
   .svg-inline--fa {
     margin-right: 10px;
-    color: #7c342b;
+    color: $red-700;
+    font-size: 22px;
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: $white;
+
+    .svg-inline--fa {
+      color: $red-500;
+    }
   }
 }
 
diff --git a/src/components/ProjectListItem.vue b/src/components/ProjectListItem.vue
index 9c92e6c..eeb70bb 100644
--- a/src/components/ProjectListItem.vue
+++ b/src/components/ProjectListItem.vue
@@ -50,11 +50,7 @@ export default {
 <style lang="scss" scoped>
 .project {
   padding: 20px;
-  border-top: solid 1px #ddd;
-
-  &:hover {
-    background-color: #fff;
-  }
+  border-top: solid 1px $grey-100;
 
   .header {
     display: flex;
@@ -64,7 +60,6 @@ export default {
     h3 {
       margin: 0;
       font-size: 1.25em;
-      font-weight: 300;
     }
   }
 
@@ -73,15 +68,11 @@ export default {
     align-items: center;
 
     .text-muted {
-      color: #999;
+      color: $grey-600;
     }
 
     p {
       margin: 0.5em 1em 0 1em;
-
-      &.text-muted {
-        color: #777;
-      }
     }
   }
 
diff --git a/src/components/ProjectTabDetails.vue b/src/components/ProjectTabDetails.vue
index 50e22a4..c66b55f 100644
--- a/src/components/ProjectTabDetails.vue
+++ b/src/components/ProjectTabDetails.vue
@@ -95,7 +95,7 @@ export default {
   margin: 10px;
   padding: 30px;
   border-radius: 5px;
-  background-color: #fff;
+  background-color: $white;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
 
   h2 {
@@ -104,7 +104,7 @@ export default {
   }
 
   .svg-inline--fa {
-    color: #777;
+    color: $grey-400;
     margin-right: 10px;
   }
 
diff --git a/src/components/ProjectTabStories.vue b/src/components/ProjectTabStories.vue
index 8aa52c5..08ddec6 100644
--- a/src/components/ProjectTabStories.vue
+++ b/src/components/ProjectTabStories.vue
@@ -50,7 +50,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index cb20d0d..ba9a8fa 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -61,23 +61,23 @@ export default {
   left: 0;
   height: calc(100vh - 60px);
   width: 10vw;
-  background-color: #333;
+  background-color: $grey-900;
   box-shadow: inset -6px 0 10px rgba(0, 0, 0, 0.5);
 
   a {
-    color: #f9f0eb;
+    color: $grey-100;
     display: block;
     padding: 20px 20px;
     text-decoration: none;
     text-align: left;
 
     &.router-link-active {
-      color: #f7f6f4;
-      background-color: #a03427;
+      color: $grey-000;
+      background-color: $red-600;
     }
     &:hover {
-      color: #f7f6f4;
-      background-color: #7c342b;
+      color: $grey-000;
+      background-color: $red-700;
     }
 
     svg {
@@ -88,7 +88,7 @@ export default {
   .divider {
     margin: 9px 10px;
     height: 1px;
-    background-color: #444;
+    background-color: $grey-700;
   }
 }
 </style>
diff --git a/src/components/Spinner.vue b/src/components/Spinner.vue
index 9864a26..d0c936f 100644
--- a/src/components/Spinner.vue
+++ b/src/components/Spinner.vue
@@ -26,17 +26,16 @@ export default {
   width: 11em;
   height: 11em;
   border-radius: 50%;
-  background: linear-gradient(to right, rgb(196, 52, 34) 10%, rgba(196, 52, 34, 0.42));
+  background: linear-gradient(to right, $red-300, $red-500);
   position: relative;
-  animation: spin 1.2s infinite linear;
+  animation: spin 1.4s infinite linear;
   transform: translateZ(0);
 }
 
 .spinner:before {
   width: 50%;
   height: 50%;
-  background: #f7f6f4;
-  border-radius: 100% 0 0 0;
+  background: $grey-000;
   position: absolute;
   top: 0;
   left: 0;
@@ -44,7 +43,7 @@ export default {
 }
 
 .spinner:after {
-  background: #f7f6f4;
+  background: $grey-000;
   width: 75%;
   height: 75%;
   border-radius: 50%;
diff --git a/src/components/StoryListItem.vue b/src/components/StoryListItem.vue
index 2275d23..e86b4be 100644
--- a/src/components/StoryListItem.vue
+++ b/src/components/StoryListItem.vue
@@ -65,10 +65,10 @@ export default {
 <style lang="scss" scoped>
 .story {
   padding: 20px;
-  border-top: solid 1px #ddd;
+  border-top: solid 1px $grey-100;
 
   &:hover {
-    background-color: #fff;
+    background-color: $grey-000;
   }
 
   .header {
@@ -79,27 +79,44 @@ export default {
     h3 {
       margin: 0;
       font-size: 1.25em;
-      font-weight: 300;
     }
 
-    .story-status-badge {
-      padding: 6px 12px;
-      margin: 0 5px;
-      color: #f7f6f4;
-      border-radius: 20px;
-      width: 60px;
-      text-align: center;
+    .header-details {
+      display: flex;
 
-      &.merged {
-        background-color: #5cb85c;
-      }
+      .badge {
+        padding: 6px 12px;
+        margin: 0 5px;
+        border-radius: 20px;
+        width: 80px;
+        text-align: center;
 
-      &.active {
-        background-color: #5bc0de;
-      }
+        &.story-status {
+          color: $grey-000;
 
-      &.invalid {
-        background-color: #777;
+          &.merged {
+            background-color: $lime-100;
+            color: $lime-900;
+          }
+
+          &.active {
+            background-color: $cyan-100;
+            color: $cyan-900;
+          }
+
+          &.invalid {
+            background-color: $grey-100;
+            color: $grey-900;
+          }
+        }
+
+        &.security {
+          width: 160px;
+        }
+
+        &.privacy {
+          width: 80px;
+        }
       }
     }
   }
@@ -109,7 +126,7 @@ export default {
     align-items: center;
 
     .text-muted {
-      color: #999;
+      color: $grey-600;
     }
 
     p {
@@ -124,9 +141,13 @@ export default {
       display: inline-block;
       padding: 6px 12px;
       margin: 0 5px;
-      background-color: #f0ad4e;
-      color: #f7f6f4;
+      background-color: $yellow-100;
+      color: $yellow-900;
       border-radius: 20px;
+
+      .svg-inline--fa {
+        color: $yellow-600;
+      }
     }
   }
 
diff --git a/src/components/TaskListEntry.vue b/src/components/TaskListEntry.vue
index 1dc0d89..f99181d 100644
--- a/src/components/TaskListEntry.vue
+++ b/src/components/TaskListEntry.vue
@@ -10,7 +10,9 @@
       Not assigned
     </div>
     <p class="thin"><FontAwesomeIcon icon="code-branch" fixed-width />{{ branch.name }}</p>
-    <p class="thin">{{ task.status }}</p>
+    <p class="thin right-align">
+      <span class="status" :class="[task.status]">{{ task.status }}</span>
+    </p>
   </div>
 </template>
 
@@ -71,7 +73,7 @@ export default {
 }
 
 .svg-inline--fa {
-  color: #777;
+  color: $grey-400;
 
   &.fa-code-branch {
     margin-right: 10px;
@@ -91,4 +93,42 @@ export default {
   display: inline-flex;
   align-items: center;
 }
+
+.right-align {
+  text-align: right;
+}
+
+.status {
+  display: inline-block;
+  text-align: center;
+  padding: 6px 12px;
+  margin: 0 5px;
+  border-radius: 20px;
+  width: 80px;
+  color: $grey-000;
+
+  &.todo {
+    background-color: $grey-100;
+    color: $grey-900;
+  }
+
+  &.merged {
+    background-color: $lime-100;
+    color: $lime-900;
+  }
+
+  &.inprogress {
+    background-color: $cyan-100;
+    color: $cyan-900;
+  }
+
+  &.invalid {
+    color: $grey-600;
+  }
+
+  &.review {
+    background-color: $yellow-100;
+    color: $yellow-900;
+  }
+}
 </style>
diff --git a/src/components/TimelineEvent.vue b/src/components/TimelineEvent.vue
index c065b60..a5e9a90 100644
--- a/src/components/TimelineEvent.vue
+++ b/src/components/TimelineEvent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="timeline-event">
+  <div class="timeline-event" :class="{ 'align-top': isComment }">
     <p class="timeline-event-icon" :class="iconClass">
       <FontAwesomeIcon :icon="eventIcon" />
     </p>
@@ -81,29 +81,33 @@ export default {
 <style lang="scss" scoped>
 .timeline-event {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   margin-top: 20px;
 
+  &.align-top {
+    align-items: flex-start;
+  }
+
   .timeline-event-icon {
     flex: 0 0 30px;
     margin: 3px 5px;
-    background-color: #f7f6f4;
+    background-color: $grey-000;
     width: 30px;
     height: 30px;
     border-radius: 50px;
-    border: 3px solid #ddd;
+    border: 3px solid $grey-200;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #999;
+    color: $grey-400;
 
     &.primary {
       flex-basis: 40px;
       margin: 0;
       width: 40px;
       height: 40px;
-      background-color: #c43422;
-      color: #f7f6f4;
+      background-color: $red-500;
+      color: $grey-000;
       box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
     }
   }
@@ -119,18 +123,25 @@ export default {
     ::v-deep .event-title {
       padding: 5px 10px;
       line-height: 30px;
-      background-color: #eee;
-      border: 1px solid #ddd;
-      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
       z-index: 10;
-      position: relative;
+      color: $grey-600;
     }
 
-    ::v-deep .event-body {
-      background-color: #fff;
-      margin: 0 2px;
-      padding: 20px;
+    &.comment {
+      background-color: $white;
       box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
+      border-radius: 10px;
+
+      ::v-deep .event-title {
+        background-color: $grey-100;
+        color: $grey-700;
+        border-radius: 10px 10px 0 0;
+      }
+
+      ::v-deep .event-body {
+        margin: 0 2px;
+        padding: 20px;
+      }
     }
   }
 }
diff --git a/src/components/UserListItem.vue b/src/components/UserListItem.vue
index 0868ee7..15431cc 100644
--- a/src/components/UserListItem.vue
+++ b/src/components/UserListItem.vue
@@ -33,11 +33,7 @@ export default {
   align-items: center;
 
   padding: 20px;
-  border-top: solid 1px #ddd;
-
-  &:hover {
-    background-color: #fff;
-  }
+  border-top: solid 1px $grey-100;
 
   img {
     margin-right: 20px;
@@ -51,7 +47,7 @@ export default {
 
   .metadata {
     margin: 0;
-    color: #777;
+    color: $grey-600;
   }
 }
 </style>
diff --git a/src/views/ProjectDetail.vue b/src/views/ProjectDetail.vue
index 6235a20..3afb1a4 100644
--- a/src/views/ProjectDetail.vue
+++ b/src/views/ProjectDetail.vue
@@ -69,9 +69,8 @@ export default {
   .tabs {
     list-style: none;
     display: flex;
-    //margin: 20px 15% 10px 15%;
     padding: 0;
-    border-bottom: solid 1px #ddd;
+    border-bottom: solid 1px $grey-200;
     text-align: center;
 
     .tab {
@@ -82,12 +81,12 @@ export default {
       transition: 100ms ease-in-out all;
 
       &:hover {
-        box-shadow: 0 -1px 0 inset #c43422;
+        box-shadow: 0 -2px 0 inset $red-500;
       }
 
       &.active {
-        color: #c43422;
-        box-shadow: 0 -2px 0 inset #c43422;
+        color: $red-500;
+        box-shadow: 0 -4px 0 inset $red-500;
       }
     }
   }
diff --git a/src/views/ProjectGroupDetail.vue b/src/views/ProjectGroupDetail.vue
index b077f84..ad1295e 100644
--- a/src/views/ProjectGroupDetail.vue
+++ b/src/views/ProjectGroupDetail.vue
@@ -69,9 +69,8 @@ export default {
   .tabs {
     list-style: none;
     display: flex;
-    //margin: 20px 15% 10px 15%;
     padding: 0;
-    border-bottom: solid 1px #ddd;
+    border-bottom: solid 1px $grey-200;
     text-align: center;
 
     .tab {
@@ -82,12 +81,12 @@ export default {
       transition: 100ms ease-in-out all;
 
       &:hover {
-        box-shadow: 0 -1px 0 inset #c43422;
+        box-shadow: 0 -2px 0 inset $red-500;
       }
 
       &.active {
-        color: #c43422;
-        box-shadow: 0 -2px 0 inset #c43422;
+        color: $red-500;
+        box-shadow: 0 -4px 0 inset $red-500;
       }
     }
   }
diff --git a/src/views/ProjectGroupList.vue b/src/views/ProjectGroupList.vue
index ba22e6a..3e58138 100644
--- a/src/views/ProjectGroupList.vue
+++ b/src/views/ProjectGroupList.vue
@@ -54,6 +54,6 @@ export default {
 <style lang="scss" scoped>
 .svg-inline--fa {
   margin-right: 30px;
-  color: #999;
+  color: $grey-400;
 }
 </style>
diff --git a/src/views/ProjectList.vue b/src/views/ProjectList.vue
index e245f82..3227c78 100644
--- a/src/views/ProjectList.vue
+++ b/src/views/ProjectList.vue
@@ -54,6 +54,6 @@ export default {
 <style lang="scss" scoped>
 .svg-inline--fa {
   margin-right: 30px;
-  color: #999;
+  color: $grey-400;
 }
 </style>
diff --git a/src/views/StoryDetail.vue b/src/views/StoryDetail.vue
index 30d79b1..6a53b21 100644
--- a/src/views/StoryDetail.vue
+++ b/src/views/StoryDetail.vue
@@ -125,15 +125,10 @@ export default {
   h1 {
     margin: 0;
     padding: 0;
-
-    .svg-inline--fa {
-      color: #999;
-      margin-right: 20px;
-    }
   }
 
   .metadata {
-    color: #959492;
+    color: $grey-600;
 
     p {
       margin: 5px 0;
@@ -158,7 +153,7 @@ h2 {
 }
 
 .svg-inline--fa {
-  color: #777;
+  color: $grey-400;
   margin-right: 10px;
 }
 
@@ -187,29 +182,21 @@ h2 {
   margin: 10px;
   padding: 30px;
   border-radius: 5px;
-  background-color: #fff;
+  background-color: $white;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
 }
 
 .tag {
   padding: 6px 12px;
   margin: 0 5px;
-  background-color: #f0ad4e;
-  color: #f7f6f4;
+  background-color: $yellow-100;
+  color: $yellow-900;
   border-radius: 20px;
 }
 
 .task-list {
-  .task-list-entry {
-    border-top: solid 1px #ddd;
-
-    &:nth-of-type(even) {
-      background-color: #f7f6f4;
-    }
-
-    &:last-of-type {
-      border-bottom: solid 1px #ddd;
-    }
+  .task-list-entry:nth-of-type(even) {
+    background-color: $grey-050;
   }
 }
 
@@ -224,7 +211,7 @@ h2 {
     height: calc(100% - 20px);
     left: 21px;
     top: 20px;
-    background-color: #ddd;
+    background-color: $grey-300;
     z-index: -1;
   }
 }
diff --git a/src/views/StoryList.vue b/src/views/StoryList.vue
index 076e43f..9488015 100644
--- a/src/views/StoryList.vue
+++ b/src/views/StoryList.vue
@@ -57,6 +57,6 @@ export default {
 <style lang="scss" scoped>
 .svg-inline--fa {
   margin-right: 30px;
-  color: #999;
+  color: $grey-400;
 }
 </style>
diff --git a/src/views/UserDetail.vue b/src/views/UserDetail.vue
index 4c198e8..8c09f3b 100644
--- a/src/views/UserDetail.vue
+++ b/src/views/UserDetail.vue
@@ -91,7 +91,7 @@ export default {
 
   .metadata {
     margin: 0;
-    color: #777;
+    color: $grey-600;
   }
 
   .tabs {
@@ -99,7 +99,7 @@ export default {
     display: flex;
     margin: 20px 15% 10px 15%;
     padding: 0;
-    border-bottom: solid 1px #ddd;
+    border-bottom: solid 1px $grey-200;
 
     .tab {
       flex: 1 1 0;
@@ -109,12 +109,12 @@ export default {
       transition: 100ms ease-in-out all;
 
       &:hover {
-        box-shadow: 0 -2px 0 inset #c43422;
+        box-shadow: 0 -2px 0 inset $red-500;
       }
 
       &.active {
-        color: #c43422;
-        box-shadow: 0 -4px 0 inset #c43422;
+        color: $red-500;
+        box-shadow: 0 -4px 0 inset $red-500;
       }
     }
   }