blockscout · isstuev · Sep 2, 2025
diff --git a/toolkit/chakra/field.tsx b/toolkit/chakra/field.tsx
@@ -32,7 +32,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
       };
 
       const labelElement = (
-        <ChakraField.Label bgColor={ rest.bgColor }>
+        <ChakraField.Label bgColor={ rest.bgColor || 'input.bg' }>
           { label }
           <ChakraField.RequiredIndicator fallback={ optionalText }/>
           { errorText && (

diff --git a/toolkit/theme/foundations/semanticTokens.ts b/toolkit/theme/foundations/semanticTokens.ts
@@ -278,7 +278,7 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         error: { value: '{colors.text.error}' },
       },
       bg: {
-        DEFAULT: { value: { _light: '{colors.white}', _dark: '{colors.black}' } },
+        DEFAULT: { value: 'transparent' },
         readOnly: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' } },
       },
       border: {

diff --git a/ui/address/contract/methods/form/ContractMethodFieldInput.tsx b/ui/address/contract/methods/form/ContractMethodFieldInput.tsx
@@ -47,7 +47,6 @@ const ContractMethodFieldInput = ({ data, hideLabel, path: name, className, isDi
   const { control, setValue, getValues } = useFormContext();
   const { field, fieldState } = useController({ control, name, rules: { validate } });
 
-  const inputBgColor = { _light: 'white', _dark: 'black' };
   const nativeCoinRowBgColor = { _light: 'gray.100', _dark: 'gray.700' };
 
   const hasMultiplyButton = argTypeMatchInt && Number(argTypeMatchInt.power) >= 64;
@@ -172,7 +171,6 @@ const ContractMethodFieldInput = ({ data, hideLabel, path: name, className, isDi
   const inputProps = {
     ...field,
     size: 'sm' as const,
-    bgColor: inputBgColor,
     onChange: handleChange,
     required: !isOptional,
     placeholder: data.type,

diff --git a/...ts__/ContractMethodForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/...ts__/ContractMethodForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
diff --git a/...creenshots__/ContractMethodForm.pw.tsx_default_base-view-mobile-dark-mode-1.png b/...creenshots__/ContractMethodForm.pw.tsx_default_base-view-mobile-dark-mode-1.png
diff --git a/...screenshots__/ContractMethodForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/...screenshots__/ContractMethodForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png
diff --git a/ui/address/tokenSelect/TokenSelectMenu.tsx b/ui/address/tokenSelect/TokenSelectMenu.tsx
@@ -32,7 +32,6 @@ const TokenSelectMenu = ({ erc20sort, erc1155sort, erc404sort, filteredData, onI
       <FilterInput
         placeholder="Search by token name"
         size="sm"
-        inputProps={{ bgColor: 'dialog.bg' }}
         mb={ 5 }
         onChange={ onInputChange }
       />

diff --git a/...okenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-1.png b/...okenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-1.png
diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_filter-1.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_filter-1.png
diff --git a/...ddress/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_long-values-1.png b/...ddress/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_long-values-1.png
diff --git a/ui/showcases/__screenshots__/Field.pw.tsx_dark-color-mode_default-dark-mode-1.png b/ui/showcases/__screenshots__/Field.pw.tsx_dark-color-mode_default-dark-mode-1.png
diff --git a/ui/showcases/__screenshots__/Field.pw.tsx_default_default-dark-mode-1.png b/ui/showcases/__screenshots__/Field.pw.tsx_default_default-dark-mode-1.png
diff --git a/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_email-login-2.png b/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_email-login-2.png
diff --git a/ui/snippets/auth/fields/AuthModalFieldOtpCode.tsx b/ui/snippets/auth/fields/AuthModalFieldOtpCode.tsx
@@ -36,7 +36,6 @@ const AuthModalFieldOtpCode = ({ isDisabled: isDisabledProp }: Props) => {
           onValueChange={ handleChange }
           disabled={ isDisabled }
           invalid={ Boolean(fieldState.error) }
-          bgColor="dialog.bg"
         />
       </HStack>
       { fieldState.error?.message && <Text color="text.error" textStyle="sm" mt={ 1 }>{ fieldState.error.message }</Text> }

diff --git a/ui/snippets/auth/screens/AuthModalScreenEmail.tsx b/ui/snippets/auth/screens/AuthModalScreenEmail.tsx
@@ -85,7 +85,6 @@ const AuthModalScreenEmail = ({ onSubmit, isAuth, mixpanelConfig }: Props) => {
           name="email"
           required
           placeholder="Email"
-          bgColor="dialog.bg"
           mt={ 6 }
         />
         <ReCaptcha { ...recaptcha }/>

diff --git a/ui/watchlist/AddressModal/AddressForm.tsx b/ui/watchlist/AddressModal/AddressForm.tsx
@@ -131,7 +131,6 @@ const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd,
         <FormFieldAddress<Inputs>
           name="address"
           required
-          bgColor="dialog.bg"
           mb={ 5 }
         />
         <FormFieldText<Inputs>
@@ -141,7 +140,6 @@ const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd,
           rules={{
             maxLength: TAG_MAX_LENGTH,
           }}
-          bgColor="dialog.bg"
           mb={ 8 }
         />
         { hasEmail ? (