From 5f0f244045b7319def58cfadd774112291c07981 Mon Sep 17 00:00:00 2001
From: Benjamin Perez <benjamin@bexsoft.net>
Date: Fri, 2 Aug 2024 14:42:29 -0700
Subject: [PATCH] Update Input Style colors

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
---
 src/components/InputBox/InputBox.tsx | 24 +++++++++++++++++-------
 src/global/themeColors.ts            |  8 ++++++++
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/InputBox/InputBox.tsx b/src/components/InputBox/InputBox.tsx
index 5e3915f7..b92eb3d2 100644
--- a/src/components/InputBox/InputBox.tsx
+++ b/src/components/InputBox/InputBox.tsx
@@ -62,7 +62,7 @@ const InputBase = styled.input<InputBoxProps & ExtraInputProps>(
       paddingBottom: sizeMode === "small" ? 4 : 8,
       paddingRight: paddingRight,
       paddingLeft: !!startIcon ? 35 : 8,
-      color: theme.colors["Color/Neutral/Text/colorTextHeading"] + "!important",
+      color: theme.colors["Color/Neutral/Text/colorTextHeading"],
       fontSize: 14,
       fontWeight: 400,
       borderWidth: "1px",
@@ -71,13 +71,13 @@ const InputBase = styled.input<InputBoxProps & ExtraInputProps>(
       borderColor: theme.colors["Color/Neutral/Border/colorBorderSubtle"],
       outline: "none",
       transitionDuration: "0.1s",
-      backgroundColor: get(theme, "inputBox.backgroundColor", "#fff"),
+      backgroundColor: theme.colors["Color/Neutral/Bg/colorBgFields"],
       letterSpacing: "0.16px",
       "&.filled": {
-        borderColor: theme.colors["Color/Neutral/Border/colorBorderBold"],
+        borderColor: theme.colors["Color/Neutral/Border/colorBorderSubtle"],
       },
-      "&:placeholder": {
-        color: get(theme, "inputBox.placeholderColor", "#858585"),
+      "&::placeholder": {
+        color: theme.colors["Color/Neutral/Text/colorTextPlaceholder"],
         opacity: 1,
         fontWeight: 400,
         letterSpacing: "0.16px",
@@ -89,10 +89,10 @@ const InputBase = styled.input<InputBoxProps & ExtraInputProps>(
         borderColor: theme.colors["Color/Brand/Primary/colorPrimaryBorder"],
         boxShadow: "0px 0px 0px 2px rgba(43, 100, 229, 0.30)",
       },
-      "&:disabled, &:read-only": {
+      "&:read-only": {
         color: theme.colors["Color/Neutral/Text/colorTextHeading"],
         borderColor: theme.colors["Color/Neutral/Border/colorBorderSubtle"],
-        backgroundColor: theme.colors["Color/Neutral/Bg/colorBgDisabled"],
+        backgroundColor: theme.colors["Color/Neutral/Bg/colorBgShell"],
         "&:placeholder": {
           color: get(theme, "inputBox.disabledPlaceholder", "#E6EBEB"),
         },
@@ -104,6 +104,16 @@ const InputBase = styled.input<InputBoxProps & ExtraInputProps>(
       "&[type=number]": {
         "-moz-appearance": "textfield",
       },
+      "&:disabled": {
+        cursor: "not-allowed",
+        userSelect: "none",
+        color: theme.colors["Color/Neutral/Text/colorTextPlaceholder"],
+        borderColor: theme.colors["Color/Neutral/Border/colorBorderSubtle"],
+        backgroundColor: theme.colors["Color/Neutral/Bg/colorBgDisabled"],
+        "&:placeholder": {
+          color: theme.colors["Color/Neutral/Text/colorTextPlaceholder"],
+        },
+      },
     };
   },
 );
diff --git a/src/global/themeColors.ts b/src/global/themeColors.ts
index dfc50537..6889095d 100644
--- a/src/global/themeColors.ts
+++ b/src/global/themeColors.ts
@@ -249,6 +249,10 @@ export const themeColors: ThemeColorItem = {
     lightMode: "#ffffff",
     darkMode: "##2D2D2F",
   },
+  "Color/Neutral/Bg/colorBgFields": {
+    lightMode: "#FCFCFF",
+    darkMode: "#434347",
+  },
   "Color/Neutral/Bg/colorBgOverlay": {
     lightMode: "#202022a6",
     darkMode: "#202022a6",
@@ -729,6 +733,10 @@ export const themeColors: ThemeColorItem = {
     lightMode: "#550228",
     darkMode: "#fef1f8",
   },
+  "Color/Base/Gray/1": {
+    lightMode: "#FCFCFF",
+    darkMode: "#09090B",
+  },
   "Color/Dataviz/1": {
     lightMode: "#2B64E5",
     darkMode: "#4182F0",