fix: use disabled text color in input and select

Apply correct text color for input and select when element is disabled.
tablecheck · Apr 25, 2024 · e6cf4f8 · e6cf4f8
1 parent 49d5858
commit e6cf4f8
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git 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
@@ -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