From 2d75452ecec65405688dd01aa7d0dd76e2622ede Mon Sep 17 00:00:00 2001
From: BurnyLlama <burnyllama@protonmail.com>
Date: Wed, 29 Mar 2023 10:30:34 +0200
Subject: [PATCH] Made buttons slightly better.

---
 src/_palette.scss | 11 +++++++++++
 src/buttons.scss  | 27 +++++++++++++--------------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/_palette.scss b/src/_palette.scss
index ad0af1b..8883877 100644
--- a/src/_palette.scss
+++ b/src/_palette.scss
@@ -172,6 +172,17 @@ $primary800: $sea800;
 $primary900: $sea900;
 $primary: $sea;
 
+$accent50:  $purple50;
+$accent100: $purple100;
+$accent200: $purple200;
+$accent300: $purple300;
+$accent400: $purple400;
+$accent500: $purple500;
+$accent600: $purple600;
+$accent700: $purple700;
+$accent800: $purple800;
+$accent900: $purple900;
+$accent: $purple;
 
 $success: $sea;
 $danger: $red;
diff --git a/src/buttons.scss b/src/buttons.scss
index 675dd54..3a39a3d 100644
--- a/src/buttons.scss
+++ b/src/buttons.scss
@@ -1,4 +1,5 @@
 // FIXME: All secondary buttons should maybe use a secondary colour!
+// FIXME: Actually, some should maybe just be black...
 
 @use "palette";
 
@@ -31,19 +32,18 @@
             background-color: palette.$primary;
         }
 
-        // TODO: This looks really bad. :)
         &.secondary {
-            @if lightness(palette.$primary50) < 50 {
+            @if lightness(palette.$accent) < 50 {
                 color: palette.$grey50
             } @else {
                 color: palette.$grey900
             }
-            background-color: palette.$primary200;
-            border-color: palette.$primary200;
-            box-shadow: 0 .3rem 0 0 palette.$primary400;
+            background-color: palette.$accent;
+            border-color: palette.$accent;
+            box-shadow: 0 .3rem 0 0 palette.$accent600;
 
             &:hover {
-                box-shadow: 0 0 0 0 palette.$primary;
+                box-shadow: 0 0 0 0 palette.$accent600;
             }
         }
 
@@ -71,18 +71,18 @@
             background-color: palette.$primary;
         }
 
-        // TODO: This looks really bad. :)
         &.secondary {
-            @if lightness(palette.$primary200) < 50 {
+            @if lightness(palette.$accent) < 50 {
                 color: palette.$grey50
             } @else {
                 color: palette.$grey900
             }
-            background-color: palette.$primary200;
-            border-color: palette.$primary200;
+            background-color: palette.$accent;
+            border-color: palette.$accent;
         }
 
         &:hover {
+            color: palette.$grey900;
             background-color: transparent;
         }
 
@@ -109,18 +109,17 @@
             }
         }
 
-        // TODO: This looks really bad. :)
         &.secondary {
-            @if lightness(palette.$primary200) < 50 {
+            @if lightness(palette.$accent) < 50 {
                 color: palette.$grey50
             } @else {
                 color: palette.$grey900
             }
             background-color: transparent;
-            border-color: palette.$primary200;
+            border-color: palette.$accent;
 
             &:hover {
-                background-color: palette.$primary200;
+                background-color: palette.$accent;
             }
         }