From 6d137356331496d6d05470cb1289f521c9f7ff8b Mon Sep 17 00:00:00 2001
From: default <joe@rocketmakers.com>
Date: Wed, 6 Mar 2024 10:40:53 +0000
Subject: [PATCH] fix: ARM-201 - Additional variables added for form field
 styling

---
 module/CHANGELOG.md                                   | 3 +--
 module/src/components/checkbox/checkbox.theme.css     | 2 +-
 module/src/components/input/input.theme.css           | 3 ++-
 module/src/components/radioGroup/radioGroup.theme.css | 2 +-
 module/src/components/select/select.theme.css         | 9 +++++++--
 module/src/components/textArea/textArea.theme.css     | 3 ++-
 module/src/theme/variables.css                        | 6 ++++++
 7 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/module/CHANGELOG.md b/module/CHANGELOG.md
index 6e984534..34862256 100644
--- a/module/CHANGELOG.md
+++ b/module/CHANGELOG.md
@@ -1,9 +1,8 @@
 # [3.4.0](https://github.com/Rocketmakers/armstrong-edge/compare/v3.3.1...v3.4.0) (2024-02-15)
 
-
 ### Features
 
-* bind now returns the full keychain back to the root, not just to the root of the child binder ([3a9adfa](https://github.com/Rocketmakers/armstrong-edge/commit/3a9adfabb1dcc3a648b154e2749b04fd12ec930c))
+- bind now returns the full keychain back to the root, not just to the root of the child binder ([3a9adfa](https://github.com/Rocketmakers/armstrong-edge/commit/3a9adfabb1dcc3a648b154e2749b04fd12ec930c))
 
 ## [3.3.1](https://github.com/Rocketmakers/armstrong-edge/compare/v3.3.0...v3.3.1) (2024-02-13)
 
diff --git a/module/src/components/checkbox/checkbox.theme.css b/module/src/components/checkbox/checkbox.theme.css
index c327a737..c6b5ea69 100644
--- a/module/src/components/checkbox/checkbox.theme.css
+++ b/module/src/components/checkbox/checkbox.theme.css
@@ -35,7 +35,7 @@
 }
 
 .arm-checkbox[data-state='unchecked'] {
-  background-color: var(--arm-color-white);
+  background-color: var(--arm-checkbox-bg-color);
 }
 
 .arm-checkbox[data-state='checked'] {
diff --git a/module/src/components/input/input.theme.css b/module/src/components/input/input.theme.css
index 97798ddd..88960585 100644
--- a/module/src/components/input/input.theme.css
+++ b/module/src/components/input/input.theme.css
@@ -3,7 +3,7 @@
   min-height: var(--arm-input-height);
   display: flex;
   align-items: center;
-  background-color: var(--arm-color-white);
+  background-color: var(--arm-input-bg-color);
   border: var(--arm-form-border-thickness) solid var(--arm-color-grey-600);
   border-radius: var(--arm-form-border-radius);
   overflow: hidden;
@@ -13,6 +13,7 @@
   width: 100%;
   flex: 1;
   padding: var(--arm-spacing-small) var(--arm-spacing-medium);
+  color: var(--arm-input-fg-color);
   border: none;
   background-color: transparent;
   outline: none;
diff --git a/module/src/components/radioGroup/radioGroup.theme.css b/module/src/components/radioGroup/radioGroup.theme.css
index 85cd624a..49126985 100644
--- a/module/src/components/radioGroup/radioGroup.theme.css
+++ b/module/src/components/radioGroup/radioGroup.theme.css
@@ -22,7 +22,7 @@
 
 .arm-radio-group[data-mode='radio'] .arm-radio-group-item {
   all: unset;
-  background-color: white;
+  background-color: var(--arm-radio-bg-color);
   width: var(--arm-spacing-xlarge);
   height: var(--arm-spacing-xlarge);
   border-radius: 100%;
diff --git a/module/src/components/select/select.theme.css b/module/src/components/select/select.theme.css
index 3e19d8f8..bec95e4c 100644
--- a/module/src/components/select/select.theme.css
+++ b/module/src/components/select/select.theme.css
@@ -203,7 +203,8 @@
   display: flex;
   border: var(--arm-form-border-thickness) solid var(--arm-color-grey-600);
   border-radius: var(--arm-form-border-radius);
-  background-color: var(--arm-color-white);
+  background-color: var(--arm-input-bg-color);
+  color: var(--arm-input-fg-color);
   min-height: var(--arm-input-height);
 }
 
@@ -218,7 +219,7 @@
 .arm-select-native-wrapper .arm-select-inner {
   border: var(--arm-form-border-thickness) solid var(--arm-color-grey-600);
   border-radius: var(--arm-form-border-radius);
-  background-color: var(--arm-color-white);
+  background-color: var(--arm-input-bg-color);
   width: auto;
   position: relative;
   justify-content: flex-end;
@@ -227,6 +228,10 @@
   box-sizing: content-box;
 }
 
+.arm-select-native-wrapper .arm-select-inner select {
+  color: var(--arm-input-fg-color);
+}
+
 .arm-select-native-wrapper .arm-select-inner[data-error-icon='left'] {
   justify-content: space-between;
 }
diff --git a/module/src/components/textArea/textArea.theme.css b/module/src/components/textArea/textArea.theme.css
index dfad544c..e155537c 100644
--- a/module/src/components/textArea/textArea.theme.css
+++ b/module/src/components/textArea/textArea.theme.css
@@ -4,7 +4,8 @@
   width: var(--arm-input-width);
   min-height: var(--arm-text-area-height, 8rem);
   padding: 1em;
-  background-color: var(--arm-color-white);
+  background-color: var(--arm-input-bg-color);
+  color: var(--arm-input-fg-color);
   border-radius: 6px;
   font-family: inherit;
   font-size: inherit;
diff --git a/module/src/theme/variables.css b/module/src/theme/variables.css
index 82d6aa6c..15981e8a 100644
--- a/module/src/theme/variables.css
+++ b/module/src/theme/variables.css
@@ -70,6 +70,12 @@
   --arm-input-height: 2.25rem;
   --arm-input-height-medium: 3rem;
   --arm-input-height-large: 3.5rem;
+  --arm-input-bg-color: var(--arm-color-white);
+  --arm-checkbox-bg-color: var(--arm-input-bg-color);
+  --arm-radio-bg-color: var(--arm-input-bg-color);
+  --arm-input-fg-color: inherit;
+  --arm-checkbox-fg-color: var(--arm-input-fg-color);
+  --arm-radio-fg-color: var(--arm-input-fg-color);
 
   /* Spinner */
   --arm-spinner-speed: 500ms;