From e438d8501837d3d61470649f6223616bc49e6848 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Wed, 17 Nov 2021 18:05:41 -0800
Subject: [PATCH] Add input theming

---
 .env                 |  5 ++++-
 src/Input.module.css |  8 ++++----
 src/index.css        |  3 +++
 src/main.jsx         | 10 ++++++++++
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/.env b/.env
index d816338..f94203a 100644
--- a/.env
+++ b/.env
@@ -16,4 +16,7 @@
 # VITE_BG_COLOR_2=#f0f1f4
 # VITE_BG_COLOR_3=#dbdfe4
 # VITE_BG_COLOR_4=#d1d3d7
-# VITE_TEXT_COLOR_1=#000000
+# VITE_INPUT_BORDER_COLOR=#e7e7e7
+# VITE_INPUT_BORDER_COLOR_FOCUSED=#238cf5
+# VITE_TEXT_COLOR_1=#17191c
+# VITE_TEXT_COLOR_2=#61708b
diff --git a/src/Input.module.css b/src/Input.module.css
index 70c1629..4a8e875 100644
--- a/src/Input.module.css
+++ b/src/Input.module.css
@@ -30,7 +30,7 @@
 .inputField {
   border-radius: 4px;
   transition: border-color 0.25s;
-  border: 1px solid #394049;
+  border: 1px solid var(--inputBorderColor);
 }
 
 .inputField input {
@@ -52,7 +52,7 @@
 
 .inputField input:placeholder-shown:focus::placeholder {
   transition: color 0.25s ease-in 0.1s;
-  color: #6f7882;
+  color: var(--textColor2);
 }
 
 .inputField label {
@@ -74,7 +74,7 @@
 }
 
 .inputField:focus-within {
-  border-color: #0086e6;
+  border-color: var(--inputBorderColorFocused);
 }
 
 .inputField input:focus {
@@ -93,7 +93,7 @@
 }
 
 .inputField input:focus + label {
-  color: #0086e6;
+  color: var(--inputBorderColorFocused);
 }
 
 .checkboxField {
diff --git a/src/index.css b/src/index.css
index f348d96..e6152d5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -30,6 +30,9 @@ limitations under the License.
   --bgColor4: #394049;
   --bgColor5: #8d97a5;
   --textColor1: #fff;
+  --textColor2: #6f7882;
+  --inputBorderColor: #394049;
+  --inputBorderColorFocused: #0086e6;
 }
 
 @font-face {
diff --git a/src/main.jsx b/src/main.jsx
index bf6ab55..48cc6e2 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -29,7 +29,17 @@ if (import.meta.env.VITE_CUSTOM_THEME) {
   style.setProperty("--bgColor2", import.meta.env.VITE_BG_COLOR_2);
   style.setProperty("--bgColor3", import.meta.env.VITE_BG_COLOR_3);
   style.setProperty("--bgColor4", import.meta.env.VITE_BG_COLOR_4);
+  style.setProperty("--bgColor5", import.meta.env.VITE_BG_COLOR_5);
   style.setProperty("--textColor1", import.meta.env.VITE_TEXT_COLOR_1);
+  style.setProperty("--textColor2", import.meta.env.VITE_TEXT_COLOR_2);
+  style.setProperty(
+    "--inputBorderColor",
+    import.meta.env.VITE_INPUT_BORDER_COLOR
+  );
+  style.setProperty(
+    "--inputBorderColorFocused",
+    import.meta.env.VITE_INPUT_BORDER_COLOR_FOCUSED
+  );
 }
 
 const history = createBrowserHistory();