From ac3f195b56c2ea67818ac90fe4bdc057af672471 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Tue, 26 Mar 2024 12:02:09 +0100
Subject: [PATCH] [chore/frontend] Adjust contrast, mute blurple a bit (#2785)

---
 web/assets/themes/blurple-dark.css  | 58 ++++++++++++++---------------
 web/assets/themes/blurple-light.css | 44 +++++++++++-----------
 web/assets/themes/midnight-trip.css | 24 +-----------
 web/assets/themes/sunset-light.css  |  6 +++
 4 files changed, 56 insertions(+), 76 deletions(-)

diff --git a/web/assets/themes/blurple-dark.css b/web/assets/themes/blurple-dark.css
index 7e4a9cc9a..60978ad00 100644
--- a/web/assets/themes/blurple-dark.css
+++ b/web/assets/themes/blurple-dark.css
@@ -5,18 +5,16 @@
 
 :root {
   /* Define our nice blurple palette */
-  --blurple1: #ffffff;
-  --blurple2: #ebe6f8;
-  --blurple3: #d6cceb;
-  --blurple4: #c2b3e1;
-  --blurple5: #ad99d7;
-  --blurple6: #9980cd;
-  --blurple7: #8566c2;
-  --blurple8: #704db8;
-  --blurple9: #5c33ae;
-  --blurple10: #471aa4;
-  --blurple11: #33009a;
-  --blurple12: #170044;
+  --blurple1: #ebe6f8;
+  --blurple2: #d6cceb;
+  --blurple3: #c2b3e1;
+  --blurple4: #aa60ff;
+  --blurple5: #783d9f;
+  --blurple6: #2d2b55;
+  --blurple7: #1f1f41;
+
+  /* Override orange trim */
+  --orange2: #fad000;
 
   /* Restyle basic colors to use blurple */
   --blue1: var(--blurple1);
@@ -24,23 +22,23 @@
   --blue3: var(--blurple3);
 
   /* Basic page styling (background + foreground) */
-  --bg: var(--blurple12);
-  --bg-accent: var(--blurple11);
+  --bg: linear-gradient(var(--blurple7), black);
+  --bg-accent: var(--blurple6);
   --fg: var(--blurple1);
-  --fg-reduced: var(--blurple3);
+  --fg-reduced: var(--blurple2);
 
-  /* Profile page styling (light) */
-  --profile-bg: var(--blurple11);
+  /* Profile page styling */
+  --profile-bg: var(--blurple6);
 
   /* Blurpleize buttons */
   --button-bg: var(--blurple2);
-  --button-fg: var(--blurple11);
+  --button-fg: var(--blurple5);
 
   /* Blurpleize statuses */
-  --status-bg: var(--blurple11);
-  --status-focus-bg: var(--blurple11);
-  --status-info-bg: var(--blurple9);
-  --status-focus-info-bg: var(--blurple9);
+  --status-bg: var(--blurple6);
+  --status-focus-bg: var(--blurple6);
+  --status-info-bg: var(--blurple5);
+  --status-focus-info-bg: var(--blurple5);
 
   /* Used around statuses + other items */
   --boxshadow-border: 0.08rem solid black;
@@ -48,26 +46,26 @@
 
 /* Scroll bar */
 html, body {
-  scrollbar-color: var(--blurple8) var(--blurple12);
+  scrollbar-color: var(--blurple4) var(--blurple7);
 }
 
 /* Profile fields */
 .profile .about-user .fields .field {
-  border-bottom: 0.1rem solid var(--blurple8);
+  border-bottom: 0.1rem solid var(--blurple4);
 }
 .profile .about-user .fields .field:first-child {
-  border-top: 0.1rem solid var(--blurple8);
+  border-top: 0.1rem solid var(--blurple4);
 }
 
 /* Status media */
 .status .media .media-wrapper {
-  border: 0.08rem solid var(--blurple9);
+  border: 0.08rem solid var(--blurple5);
 }
 .status .media .media-wrapper details .unknown-attachment .placeholder {
   color: var(--blue2);
 }
 .status .media .media-wrapper details video.plyr-video {
-  background: var(--blurple11);
+  background: var(--blurple6);
 }
 
 /* Status polls */
@@ -75,18 +73,18 @@ html, body {
   background-color: var(--bg);
 }
 .status .text .poll .poll-info {
-  background-color: var(--blurple11);
+  background-color: var(--blurple6);
 }
 
 /* Code snippets */
 pre, pre[class*="language-"],
 code, code[class*="language-"] {
-	background-color: var(--blurple12);
+	background-color: var(--blurple7);
   color: var(--fg-reduced);
 }
 
 /* Block quotes */
 blockquote {
-  background-color: var(--blurple12);
+  background-color: var(--blurple7);
   color: var(--fg-reduced);
 }
diff --git a/web/assets/themes/blurple-light.css b/web/assets/themes/blurple-light.css
index 7f5811401..c3c6cbfa1 100644
--- a/web/assets/themes/blurple-light.css
+++ b/web/assets/themes/blurple-light.css
@@ -5,28 +5,26 @@
 
 :root {
   /* Define our nice blurple palette */
-  --blurple1: #ffffff;
-  --blurple2: #ebe6f8;
-  --blurple3: #d6cceb;
-  --blurple4: #c2b3e1;
-  --blurple5: #ad99d7;
-  --blurple6: #9980cd;
-  --blurple7: #8566c2;
-  --blurple8: #704db8;
-  --blurple9: #5c33ae;
-  --blurple10: #471aa4;
-  --blurple11: #33009a;
-  --blurple12: #170044;
+  --blurple1: #ebe6f8;
+  --blurple2: #d6cceb;
+  --blurple3: #c2b3e1;
+  --blurple4: #aa60ff;
+  --blurple5: #783d9f;
+  --blurple6: #2d2b55;
+  --blurple7: #1f1f41;
+
+  /* Override orange trim */
+  --orange2: #700000;
 
   /* Restyle basic colors to use blurple */
   --white1: var(--blurple2);
   --white2: var(--blurple3);
-  --blue1: var(--blurple6);
-  --blue2: var(--blurple8);
-  --blue3: var(--blurple10);
+  --blue1: var(--blurple4);
+  --blue2: var(--blurple5);
+  --blue3: var(--blurple6);
 
   /* Basic page styling (background + foreground) */
-  --bg: linear-gradient(var(--blurple2), var(--blurple1));
+  --bg: linear-gradient(var(--blurple1), white);
   --bg-accent: var(--white2);
   --fg: var(--gray1);
   --fg-reduced: var(--gray2);
@@ -45,25 +43,25 @@
   --status-focus-info-bg: var(--white2);
 
   /* Used around statuses + other items */
-  --boxshadow-border: 0.08rem solid var(--blurple10);
+  --boxshadow-border: 0.08rem solid var(--blurple6);
 }
 
 /* Scroll bar */
 html, body {
-  scrollbar-color: var(--blurple8) var(--blurple2);
+  scrollbar-color: var(--blurple5) var(--blurple2);
 }
 
 /* Profile fields */
 .profile .about-user .fields .field {
-  border-bottom: 0.1rem solid var(--blurple10);
+  border-bottom: 0.1rem solid var(--blurple6);
 }
 .profile .about-user .fields .field:first-child {
-  border-top: 0.1rem solid var(--blurple10);
+  border-top: 0.1rem solid var(--blurple6);
 }
 
 /* Status media */
 .status .media .media-wrapper {
-  border: 0.08rem solid var(--blurple10);
+  border: 0.08rem solid var(--blurple6);
 }
 .status .media .media-wrapper details .unknown-attachment .placeholder {
   color: var(--blue2);
@@ -83,12 +81,12 @@ html, body {
 /* Code snippets */
 pre, pre[class*="language-"],
 code, code[class*="language-"] {
-	background-color: var(--blurple12);
+	background-color: var(--blurple7);
   color: var(--blurple2);
 }
 
 /* Block quotes */
 blockquote {
 	background-color: var(--blurple1);
-  color: var(--blurple12);
+  color: var(--blurple7);
 }
diff --git a/web/assets/themes/midnight-trip.css b/web/assets/themes/midnight-trip.css
index c6b1623ee..27da46c1d 100644
--- a/web/assets/themes/midnight-trip.css
+++ b/web/assets/themes/midnight-trip.css
@@ -9,8 +9,6 @@
   --acid-green-light: #79FF4D;
   --acid-green-dark: #269900;
   --magenta: rgb(153, 50, 204);
-  --darkred: rgb(58, 0, 15);
-  --darkblue: rgb(0, 0, 58);
   --darkmagenta: rgb(47, 1, 65);
 
   /* Override */
@@ -22,27 +20,7 @@
 }
 
 body {
-  background: linear-gradient(-45deg, black, var(--darkmagenta), var(--darkblue), var(--darkred));
-  background-size: 400% 400%;
-  height: 100%;
-}
-
-@media not (prefers-reduced-motion) {
-  body {
-    animation: gradient 30s ease infinite;
-  }
-  
-  @keyframes gradient {
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
-  }
+  background: linear-gradient(90deg, var(--darkmagenta), black, var(--darkmagenta));
 }
 
 html, body {
diff --git a/web/assets/themes/sunset-light.css b/web/assets/themes/sunset-light.css
index c9612e36b..d6c33d720 100644
--- a/web/assets/themes/sunset-light.css
+++ b/web/assets/themes/sunset-light.css
@@ -50,10 +50,16 @@ html, body {
   scrollbar-color: var(--pink) var(--eggshell);
 }
 
+/* Instance title color */
 .page-header a h1 {
   color: var(--eggshell);
 }
 
+/* Role badge background */
+.profile .profile-header .basic-info .namerole .role {
+  background: var(--eggshell);
+}
+
 /* Profile fields */
 .profile .about-user .fields .field {
   border-bottom: 0.1rem solid var(--orange);