fix: Set input background color based on parent fill level (#606)

Author: maciaszczykm

src/components/Input.tsx

@@ -1,13 +1,13 @@
 import { ExtendTheme, Input as HonorableInput, mergeTheme } from 'honorable'
 import type { InputProps as HonorableInputProps } from 'honorable'
 import { type ComponentProps, type ReactNode, forwardRef, useRef } from 'react'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { mergeRefs } from 'react-merge-refs'
 import { mergeProps } from 'react-aria'
 
 import { simulateInputChange } from '../utils/simulateInputChange'
 
-import { useFillLevel } from './contexts/FillLevelContext'
+import { type FillLevel, useFillLevel } from './contexts/FillLevelContext'
 import { TitleContent } from './Select'
 import Tooltip from './Tooltip'
 import IconFrame from './IconFrame'
@@ -45,6 +45,13 @@ const startEndStyles = {
   paddingLeft: 0,
 }
 
+const parentFillLevelToBackground = {
+  0: 'fill-one',
+  1: 'fill-two',
+  2: 'fill-three',
+  3: 'fill-three',
+} as const satisfies Record<FillLevel, string>
+
 const ClearButton = styled(
   ({
     className,
@@ -90,6 +97,7 @@ const Input = forwardRef(
     }: InputProps,
     ref
   ) => {
+    const theme = useTheme()
     const inputRef = useRef<HTMLInputElement>(null)
 
     inputProps = {
@@ -193,6 +201,9 @@ const Input = forwardRef(
               </>
             ) : undefined
           }
+          backgroundColor={
+            theme.colors[parentFillLevelToBackground[parentFillLevel]]
+          }
           inputProps={inputProps}
           {...props}
         />

src/stories/Input.stories.tsx

@@ -8,6 +8,7 @@ import CaretDownIcon from '../components/icons/CaretDownIcon'
 import SearchIcon from '../components/icons/SearchIcon'
 import Input from '../components/Input'
 import Input2 from '../components/Input2'
+import { Card } from '../index'
 
 export default {
   title: 'Input',
@@ -18,7 +19,7 @@ function InputSet(props: any) {
   return (
     <Flex
       direction="column"
-      maxWidth="400px"
+      maxWidth="500px"
       gap="large"
     >
       <Input {...props} />
@@ -51,7 +52,7 @@ function Template(args: any) {
   return (
     <Flex
       direction="column"
-      maxWidth="400px"
+      maxWidth="500px"
       gap="large"
     >
       <InputSet
@@ -63,6 +64,21 @@ function Template(args: any) {
         {...props}
         small
       />
+      <Card padding="large">
+        <InputSet {...props} />
+      </Card>
+      <Card
+        fillLevel={2}
+        padding="large"
+      >
+        <InputSet {...props} />
+      </Card>
+      <Card
+        fillLevel={3}
+        padding="large"
+      >
+        <InputSet {...props} />
+      </Card>
     </Flex>
   )
 }
@@ -81,7 +97,7 @@ function CustomInputTemplate(args: any) {
   return (
     <Flex
       direction="column"
-      maxWidth="400px"
+      maxWidth="500px"
     >
       <Div>
         <Input
@@ -123,7 +139,7 @@ function CustomInputV2Template(args: any) {
   return (
     <Flex
       direction="column"
-      maxWidth="400px"
+      maxWidth="500px"
     >
       <Div marginTop="medium">
         <Input2