From faa782d2971b640be14813b8ba13382f9f93b8ee Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 22 Jan 2021 20:23:34 +0100
Subject: [PATCH] Add grey shades

---
 src/styles/components/list.scss  |  2 +-
 src/styles/theme/colors.scss     | 17 +++++++++++++++++
 src/styles/theme/navigation.scss |  2 +-
 src/styles/theme/variables.scss  |  4 ++--
 4 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 src/styles/theme/colors.scss

diff --git a/src/styles/components/list.scss b/src/styles/components/list.scss
index 35708005f..cd082d61a 100644
--- a/src/styles/components/list.scss
+++ b/src/styles/components/list.scss
@@ -48,7 +48,7 @@
   }
 
   .icon {
-    color: $grey-almost-light;
+    color: $grey-400;
     margin-left: 1rem;
     height: 1rem;
     width: 1rem;
diff --git a/src/styles/theme/colors.scss b/src/styles/theme/colors.scss
new file mode 100644
index 000000000..d89916dc9
--- /dev/null
+++ b/src/styles/theme/colors.scss
@@ -0,0 +1,17 @@
+$grey-100: #F3F4F6;
+$grey-200: #E5E7EB;
+$grey-300: #D1D5DB;
+$grey-400: #9CA3AF;
+$grey-500: #6B7280;
+$grey-600: #4B5563;
+$grey-700: #374151;
+$grey-800: #1F2937;
+$grey-900: #111827;
+
+// Bulma defaults
+$grey-dark: $grey-800;
+$grey-darker: $grey-700;
+$grey: $grey-500;
+$grey-light: $grey-300;
+$grey-lighter: $grey-200;
+$grey-lightest: $grey-100;
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index dc2314216..f6db60a70 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -321,7 +321,7 @@
       }
 
       .icon {
-        color: $grey-almost-light;
+        color: $grey-400;
       }
     }
 
diff --git a/src/styles/theme/variables.scss b/src/styles/theme/variables.scss
index 0445400a7..8981a7c63 100644
--- a/src/styles/theme/variables.scss
+++ b/src/styles/theme/variables.scss
@@ -1,3 +1,5 @@
+@import 'colors';
+
 $black: hsl(0, 0%, 4%) !default;
 $orange: #ff851b;
 $green: #00db60;
@@ -5,8 +7,6 @@ $red: #ff4136;
 $blue: #1973ff;
 $primary: $blue;
 $dark: lighten($black, 8);
-$grey: hsl(0, 0%, 48%);
-$grey-almost-light: hsl(0, 0%, 57%);
 
 $info-invert: #fff;
 $family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;