From 99a729e4f704f4232b29e68fde28cf23c85f8070 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Fri, 30 Oct 2020 23:44:47 -0600
Subject: [PATCH 1/5] Add a dark high contrast theme

---
 .../static/css/theme/dark-high-contrast.css   | 76 +++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 public/static/css/theme/dark-high-contrast.css

diff --git a/public/static/css/theme/dark-high-contrast.css b/public/static/css/theme/dark-high-contrast.css
new file mode 100644
index 0000000..c7ba7fe
--- /dev/null
+++ b/public/static/css/theme/dark-high-contrast.css
@@ -0,0 +1,76 @@
+:root {
+	--spotify-green: #1DB954;
+	--spotify-white: #FFFFFF;
+	--spotify-black: #000000;
+
+	--accent1: #7289da;
+	--accent2: #00aa00;
+
+	--error: #ff0000;
+	--error-background: #ff00005d;
+	--error-text: #FFFFFF;
+	--error-accent: var(--error);
+
+	--success: var(--accent2);
+	--success-background: #00aa002f;
+	--success-text: var(--card-text);
+	--success-accent: #00aa00;
+
+	--background: black;
+	--background-text: white;
+
+	--card-border-colour: white;
+	--card-border-style: solid;
+	--card-border-width: 2px;
+	--card-colour: black;
+	--card-text: white;
+
+	--on-card-colour: black;
+	--on-card-text: white;
+
+	--modal-container-background: #0e0f10eb;
+	--modal-background: var(--card-colour);
+	--modal-close-button: var(--card-text);
+	--modal-text: var(--card-text);
+
+	--fonts: 'Open Sans', sans-serif;
+
+	--corner-rounding: 7px;
+
+	--input-background: var(--spotify-black);
+	--input-text: var(--spotify-green);
+	--input-active-border: var(--accent2);
+
+	--button-hover-background: var(--accent2);
+	--button-background: var(--spotify-green);
+	--button-disabled-background: #09682a;
+	--button-text: var(--spotify-black);
+	--button-disabled-text: var(--spotify-black);
+
+	--textarea-background: var(--spotify-black);
+	--textarea-text-colour: var(--spotify-green);
+	--textarea-border-colour: var(--accent2);
+
+	--missing-picture-background: var(--background);
+	--missing-picture-foreground: var(--accent2);
+
+	--tooltip-colour: white;
+	--tooltip-text: black;
+
+	--percent-filled: var(--accent2);
+	--percent-empty: var(--on-card-colour);
+	--percent-text: var(--on-card-text);
+
+	--scrollbar-background: #0f0f0f;
+	--scrollbar-handle: #4d4d4d;
+	--scrollbar-handle-hover: #5e5e5e;
+
+	--card-bottom-row-text-colour: var(--accent2);
+	--card-bottom-row-background: var(--on-card-colour);
+	--card-bottom-row-hover-background: #1d1d1d;
+	--card-bottom-row-divider-colour: #000000;
+	--card-bottom-row-icon-colour: var(--card-bottom-row-text-colour);
+
+	--icon-primary: var(--accent2);
+	--icon-secondary: var(--accent1);
+}
\ No newline at end of file

From 4946d08165ed87283fa4c2d12efb9e475d2f5172 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Fri, 30 Oct 2020 23:45:01 -0600
Subject: [PATCH 2/5] Add border variables to the other themes

---
 public/static/css/theme/dark.css      | 3 +++
 public/static/css/theme/halloween.css | 3 +++
 public/static/css/theme/light.css     | 3 +++
 3 files changed, 9 insertions(+)

diff --git a/public/static/css/theme/dark.css b/public/static/css/theme/dark.css
index 362d610..b838f0d 100644
--- a/public/static/css/theme/dark.css
+++ b/public/static/css/theme/dark.css
@@ -19,6 +19,9 @@
 	--background: #23272A;
 	--background-text: var(--spotify-white);
 
+	--card-border-colour: transparent;
+	--card-border-style: none;
+	--card-border-width: 0px;
 	--card-colour: #2C2F33;
 	--card-text: #ffffff80;
 
diff --git a/public/static/css/theme/halloween.css b/public/static/css/theme/halloween.css
index 3c3590c..8092342 100644
--- a/public/static/css/theme/halloween.css
+++ b/public/static/css/theme/halloween.css
@@ -19,6 +19,9 @@
 	--background: #FF8C00;
 	--background-text: var(--spotify-white);
 
+	--card-border-colour: transparent;
+	--card-border-style: none;
+	--card-border-width: 0px;
 	--card-colour: #794200;
 	--card-text: white;
 
diff --git a/public/static/css/theme/light.css b/public/static/css/theme/light.css
index 0338236..2119ac5 100644
--- a/public/static/css/theme/light.css
+++ b/public/static/css/theme/light.css
@@ -19,6 +19,9 @@
 	--background: white;
 	--background-text: dimgray;
 
+	--card-border-colour: transparent;
+	--card-border-style: none;
+	--card-border-width: 0px;
 	--card-colour: #dddddd;
 	--card-text: var(--background-text);
 

From 23a38dfc4fcda5bce99f12e1e1543892474889ad Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Fri, 30 Oct 2020 23:45:17 -0600
Subject: [PATCH 3/5] Add border support to the two card types

---
 src/components/cards/Artist.vue | 4 +++-
 src/components/cards/Track.vue  | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/cards/Artist.vue b/src/components/cards/Artist.vue
index 96dcf38..d3911d8 100644
--- a/src/components/cards/Artist.vue
+++ b/src/components/cards/Artist.vue
@@ -76,13 +76,15 @@ export default {
 
 <style scoped>
 .card {
+	border-color: var(--card-border-colour);
+	border-style: var(--card-border-style);
+	border-width: var(--card-border-width);
 	border-radius: var(--corner-rounding);
 	background-color: var(--card-colour);
 	padding: 10px 10px 1.75em;
 	color: var(--card-text);
 	flex-direction: column;
 	align-items: center;
-	border-style: none;
 	position: relative;
 	margin: 5px auto;
 	display: flex;
diff --git a/src/components/cards/Track.vue b/src/components/cards/Track.vue
index 6fd5a6d..acfe9ff 100644
--- a/src/components/cards/Track.vue
+++ b/src/components/cards/Track.vue
@@ -138,12 +138,14 @@ export default {
 
 <style scoped>
 .card {
+	border-color: var(--card-border-colour);
+	border-style: var(--card-border-style);
+	border-width: var(--card-border-width);
 	border-radius: var(--corner-rounding);
 	background-color: var(--card-colour);
 	color: var(--card-text);
 	flex-direction: column;
 	align-items: center;
-	border-style: none;
 	position: relative;
 	margin: 5px auto;
 	display: flex;

From c6d9cb0455038b8fa43b17dca80e23530552d02f Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Fri, 30 Oct 2020 23:45:37 -0600
Subject: [PATCH 4/5] Add the high contrast theme to the selector

---
 src/components/modals/ThemeModal.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/modals/ThemeModal.vue b/src/components/modals/ThemeModal.vue
index 60cf282..0d35cdf 100644
--- a/src/components/modals/ThemeModal.vue
+++ b/src/components/modals/ThemeModal.vue
@@ -57,11 +57,17 @@ export default {
 			{
 				name: `Halloween`,
 				filename: `halloween`,
-				description: `This exlusive theme only shows up around Halloween, make sure to use it while you can!`,
+				description: `This elusive theme only shows up around Halloween, make sure to use it while you can!`,
 				show() {
 					let date = new Date();
 					return date.getMonth() == 9;
 				},
+			},
+			{
+				name: `High Contrast (Dark)`,
+				filename: `dark-high-contrast`,
+				description: `This theme is designed to be as high contrast as possible for those who need it.`,
+				show() { return true },
 			}
 		]
 	}},

From 1d7c23ff597426325dae9305d488de380b16a639 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Fri, 30 Oct 2020 23:45:56 -0600
Subject: [PATCH 5/5] pnpm lock update

---
 pnpm-lock.yaml | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c917a11..a1e0107 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,7 +12,7 @@ devDependencies:
   '@vue/cli-service': 4.5.8_vue-template-compiler@2.6.12
   babel-eslint: 10.1.0_eslint@6.8.0
   eslint: 6.8.0
-  eslint-plugin-vue: 6.2.2_eslint@6.8.0
+  eslint-plugin-vue: 7.1.0_eslint@6.8.0
   vue-template-compiler: 2.6.12
 lockfileVersion: 5.2
 packages:
@@ -3627,19 +3627,20 @@ packages:
       webpack: '>=2.0.0 <5.0.0'
     resolution:
       integrity: sha512-RLgV9hoCVsMLvOxCuNjdqOrUqIj9oJg8hF44vzJaYqsAHuY9G2YAeN3joQ9nxP0p5Th9iFSIpKo+SD8KISxXRg==
-  /eslint-plugin-vue/6.2.2_eslint@6.8.0:
+  /eslint-plugin-vue/7.1.0_eslint@6.8.0:
     dependencies:
       eslint: 6.8.0
+      eslint-utils: 2.1.0
       natural-compare: 1.4.0
-      semver: 5.7.1
-      vue-eslint-parser: 7.1.0_eslint@6.8.0
+      semver: 7.3.2
+      vue-eslint-parser: 7.1.1_eslint@6.8.0
     dev: true
     engines:
       node: '>=8.10'
     peerDependencies:
-      eslint: ^5.0.0 || ^6.0.0
+      eslint: ^6.2.0 || ^7.0.0
     resolution:
-      integrity: sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ==
+      integrity: sha512-9dW7kj8/d2IkDdgNpvIhJdJ3XzU3x4PThXYMzWt49taktYnGyrTY6/bXCYZ/VtQKU9kXPntPrZ41+8Pw0Nxblg==
   /eslint-scope/4.0.3:
     dependencies:
       esrecurse: 4.3.0
@@ -3666,6 +3667,14 @@ packages:
       node: '>=6'
     resolution:
       integrity: sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
+  /eslint-utils/2.1.0:
+    dependencies:
+      eslint-visitor-keys: 1.3.0
+    dev: true
+    engines:
+      node: '>=6'
+    resolution:
+      integrity: sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
   /eslint-visitor-keys/1.3.0:
     dev: true
     engines:
@@ -7463,6 +7472,13 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
+  /semver/7.3.2:
+    dev: true
+    engines:
+      node: '>=10'
+    hasBin: true
+    resolution:
+      integrity: sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
   /send/0.17.1:
     dependencies:
       debug: 2.6.9
@@ -8564,7 +8580,7 @@ packages:
       vue: ^2
     resolution:
       integrity: sha512-3vdpaOaxRpVRG5Qne8Hjb4HG+P2fxCo6t3SqyQOznMsZApKPcIvTLEMfvJ1yd3R/0DYOjdPYxCDeReMD+UGyuA==
-  /vue-eslint-parser/7.1.0_eslint@6.8.0:
+  /vue-eslint-parser/7.1.1_eslint@6.8.0:
     dependencies:
       debug: 4.2.0
       eslint: 6.8.0
@@ -8579,7 +8595,7 @@ packages:
     peerDependencies:
       eslint: '>=5.0.0'
     resolution:
-      integrity: sha512-Kr21uPfthDc63nDl27AGQEhtt9VrZ9nkYk/NTftJ2ws9XiJwzJJCnCr3AITQ2jpRMA0XPGDECxYH8E027qMK9Q==
+      integrity: sha512-8FdXi0gieEwh1IprIBafpiJWcApwrU+l2FEj8c1HtHFdNXMd0+2jUSjBVmcQYohf/E72irwAXEXLga6TQcB3FA==
   /vue-hot-reload-api/2.3.4:
     dev: true
     resolution:
@@ -9024,7 +9040,7 @@ specifiers:
   clipboard-polyfill: ^3.0.1
   core-js: ^3.6.5
   eslint: ^6.7.2
-  eslint-plugin-vue: ^6.2.2
+  eslint-plugin-vue: ^7.1.0
   v-tooltip: ^2.0.3
   vue: ^2.6.11
   vue-ellipse-progress: ^1.1.1