From e6cf4f89b815ef23b4ce63c3b48957f8bf61a075 Mon Sep 17 00:00:00 2001
From: Alexandr Shostyr <sashashostyr@gmail.com>
Date: Mon, 22 Apr 2024 13:19:56 +0300
Subject: [PATCH] fix: use disabled text color in input and select

Apply correct text color for input and select when element is disabled.
---
 system/core/src/components/InputWithIcons.ts | 1 +
 system/react-select/src/index.tsx            | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/system/core/src/components/InputWithIcons.ts b/system/core/src/components/InputWithIcons.ts
index 92a18761e..3cce9f7c9 100644
--- a/system/core/src/components/InputWithIcons.ts
+++ b/system/core/src/components/InputWithIcons.ts
@@ -32,6 +32,7 @@ export const baseStyles = css`
 
   & > input,
   & > select {
+    color: currentColor;
     &,
     &[data-pseudo='focus'],
     &:focus {
diff --git a/system/react-select/src/index.tsx b/system/react-select/src/index.tsx
index ba64d4465..d9992ed9c 100644
--- a/system/react-select/src/index.tsx
+++ b/system/react-select/src/index.tsx
@@ -83,7 +83,7 @@ const IconWrapper = styled.div`
 const IndicatorWrapper = styled.div`
   height: 20px;
   svg {
-    color: var(--text);
+    color: currentColor;
   }
 `;
 
@@ -327,7 +327,7 @@ export function useReactSelectConfig<
           backgroundColor: isDisabled
             ? 'var(--surface-disabled)'
             : 'var(--surface)',
-          color: 'var(--text)',
+          color: isDisabled ? 'var(--text-disabled)' : 'var(--text)',
           boxShadow,
           display: 'grid',
           gridTemplateAreas: icon