From df41c75eacc5732a14f08dfa19a7aca2210d8078 Mon Sep 17 00:00:00 2001
From: Isaiah Odhner <isaiahodhner@gmail.com>
Date: Mon, 1 Jun 2020 06:10:45 -0400
Subject: [PATCH] Fix contrast issues in non-default themes

- Fix contrast of window text in Dark and Occult themes
- Fix contrast of Edit Colors luminosity arrow in Dark and Occult themes
- Add borders in Edit Colors in Modern theme (for contrast)
---
 src/functions.js          |  2 +-
 styles/layout.css         |  2 --
 styles/themes/classic.css |  6 ++++++
 styles/themes/modern.css  | 12 ++++++++++++
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/functions.js b/src/functions.js
index 94f1bf5..a86ffe9 100644
--- a/src/functions.js
+++ b/src/functions.js
@@ -486,7 +486,7 @@ function show_edit_colors_window($swatch_to_edit, color_selection_slot_to_edit)
 			luminosity_canvas.ctx.fillRect(0, y, luminosity_canvas.width, 6);
 		}
 
-		lum_arrow_canvas.ctx.fillStyle = "black";
+		lum_arrow_canvas.ctx.fillStyle = getComputedStyle($w.$content[0]).getPropertyValue("--ButtonText");
 		for (let x = 0; x < lum_arrow_canvas.width; x++) {
 			lum_arrow_canvas.ctx.fillRect(x, lum_arrow_canvas.width-x-1, 1, 1+x*2);
 		}
diff --git a/styles/layout.css b/styles/layout.css
index 5a1451a..2b531ae 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -702,8 +702,6 @@ html, body, .jspaint {
 	max-width: calc(100vw - 10px);
 	max-height: calc(100vh - 100px);
 	overflow: auto;
-	background: white;
-	color: black;
 }
 .history-entry {
 	cursor: pointer;
diff --git a/styles/themes/classic.css b/styles/themes/classic.css
index d345648..e3f47b6 100644
--- a/styles/themes/classic.css
+++ b/styles/themes/classic.css
@@ -292,6 +292,7 @@ body,
 .window-content {
 	font-family: Arial, sans-serif;
 	font-size: 16px;
+	color: var(--WindowText);
 }
 
 .help-window .item {
@@ -331,6 +332,11 @@ body,
 	mix-blend-mode: difference;
 } */
 
+.history-view {
+	background: var(--Window);
+	color: var(--WindowText);
+}
+
 input[type=text],
 input[type=url] {
 	/* @TODO: fancy 3d inset border (might need a surrounding element because pseudo elements won't work with input) */
diff --git a/styles/themes/modern.css b/styles/themes/modern.css
index 8396b07..21284cf 100644
--- a/styles/themes/modern.css
+++ b/styles/themes/modern.css
@@ -1,6 +1,7 @@
 :root {
 	--theme-loaded: "modern.css";
 	--Hilight: #0178d7;
+	--ButtonText: #000000;
 }
 
 body {
@@ -79,6 +80,7 @@ body {
 .window-content {
 	padding: 16px;
 	background: white;
+	color: black;
 	border-bottom-left-radius: 2px;
 	border-bottom-right-radius: 2px;
 }
@@ -234,6 +236,11 @@ body {
 	margin-left: 1px;
 }
 
+.edit-colors-window .inset-shallow {
+	border: 1px solid rgba(0, 0, 0, 0.5);
+	border-radius: 3px;
+}
+
 .edit-colors-window .swatch {
 	width: 20px;
 	height: 17px;
@@ -358,6 +365,11 @@ body,
 	color: white;
 } */
 
+.history-view {
+	background: white;
+	color: black;
+}
+
 input:invalid {
 	box-shadow: 0 0 0 2px red;
 }