Update styles of form inputs (#1914)

* Update styles of form inputs

* update token info form

* update demo values

* fix preset for sepolia

* update screenshots

configs/envs/.env.eth_sepolia

@@ -24,8 +24,8 @@ NEXT_PUBLIC_API_BASE_PATH=/
 # ui config
 ## homepage
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND='rgba(51, 53, 67, 1)'
-NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR='rgba(165, 252, 122, 1)'
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(51,53,67,1)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(165,252,122,1)
 ## sidebar
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/eth-sepolia.json
 NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg

deploy/values/review/values.yaml.gotmpl

@@ -94,7 +94,6 @@ frontend:
     NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE: "{ \"id\": \"632018\", \"width\": \"320\", \"height\": \"100\" }"
     NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED: true
     NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED: true
-    NEXT_PUBLIC_COLOR_THEME_DEFAULT: "dim"
   envFromSecret:
     NEXT_PUBLIC_SENTRY_DSN: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_SENTRY_DSN
     SENTRY_CSP_REPORT_URI: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SENTRY_CSP_REPORT_URI

theme/components/Form.ts

@@ -1,9 +1,8 @@
 import { formAnatomy as parts } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
-import { getColor, mode } from '@chakra-ui/theme-tools';
 
-import getDefaultFormColors from '../utils/getDefaultFormColors';
+import getFormStyles from '../utils/getFormStyles';
 import FancySelect from './FancySelect';
 import FormLabel from './FormLabel';
 import Input from './Input';
@@ -13,8 +12,7 @@ const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys);
 
 function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunctionProps) {
-  const { theme } = props;
-  const { focusPlaceholderColor, errorColor } = getDefaultFormColors(props);
+  const formStyles = getFormStyles(props);
 
   const activeLabelStyles = {
     ...FormLabel.variants?.floating?.(props)._focusWithin,
@@ -63,12 +61,29 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction
       // label styles
       label: FormLabel.sizes?.[size](props) || {},
       'input:not(:placeholder-shown) + label, textarea:not(:placeholder-shown) + label': activeLabelStyles,
+      'textarea:not(:placeholder-shown) + label': {
+        bgColor: formStyles.input.filled.bgColor,
+      },
+      [`
+        input[readonly] + label,
+        textarea[readonly] + label,
+        &[aria-readonly=true] label
+      `]: {
+        bgColor: formStyles.input.readOnly.bgColor,
+      },
       [`
         input[aria-invalid=true] + label, 
         textarea[aria-invalid=true] + label,
         &[aria-invalid=true] label
       `]: {
-        color: getColor(theme, errorColor),
+        color: formStyles.placeholder.error.color,
+      },
+      [`
+        input[disabled] + label,
+        textarea[disabled] + label,
+        &[aria-disabled=true] label
+      `]: {
+        color: formStyles.placeholder.disabled.color,
       },
 
       // input styles
@@ -79,31 +94,24 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction
         padding: inputPx,
       },
       'input:not(:placeholder-shown), textarea:not(:placeholder-shown)': activeInputStyles,
-      [`
-        input[disabled] + label, 
-        &[aria-disabled=true] label
-      `]: {
-        backgroundColor: 'transparent',
-      },
-      // in textarea bg of label could not be transparent; it should match the background color of input but without alpha
-      // so we have to use non-standard colors here
-      'textarea[disabled] + label': {
-        backgroundColor: mode('#ececec', '#232425')(props),
-      },
-      'textarea[disabled] + label[data-in-modal=true]': {
-        backgroundColor: mode('#ececec', '#292b34')(props),
-      },
 
       // indicator styles
       'input:not(:placeholder-shown) + label .chakra-form__required-indicator, textarea:not(:placeholder-shown) + label .chakra-form__required-indicator': {
-        color: getColor(theme, focusPlaceholderColor),
+        color: formStyles.placeholder.default.color,
       },
       [`
         input[aria-invalid=true] + label .chakra-form__required-indicator,
         textarea[aria-invalid=true] + label .chakra-form__required-indicator,
         &[aria-invalid=true] .chakra-form__required-indicator
       `]: {
-        color: getColor(theme, errorColor),
+        color: formStyles.placeholder.error.color,
+      },
+      [`
+        input[disabled] + label .chakra-form__required-indicator,
+        textarea[disabled] + label .chakra-form__required-indicator,
+        &[aria-disabled=true] .chakra-form__required-indicator
+      `]: {
+        color: formStyles.placeholder.disabled.color,
       },
     },
   };

theme/components/Form/FormControl.pw.tsx

@@ -65,6 +65,19 @@ test.describe('floating label size md +@dark-mode', () => {
     await expect(component).toHaveScreenshot();
   });
 
+  test('filled read-only', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <FormControl variant="floating" id="name" isRequired size="md">
+          <Input required value="foo" isReadOnly/>
+          <FormLabel>Smart contract / Address (0x...)</FormLabel>
+        </FormControl>
+      </TestApp>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
   test('filled error', async({ mount }) => {
     const component = await mount(
       <TestApp>

theme/components/FormLabel.ts

@@ -1,7 +1,6 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
-import { getColor } from '@chakra-ui/theme-tools';
 
-import getDefaultFormColors from '../utils/getDefaultFormColors';
+import getFormStyles from '../utils/getFormStyles';
 
 const baseStyle = defineStyle({
   display: 'flex',
@@ -13,14 +12,12 @@ const baseStyle = defineStyle({
   transitionDuration: 'normal',
   opacity: 1,
   _disabled: {
-    opacity: 0.4,
+    opacity: 0.2,
   },
 });
 
 const variantFloating = defineStyle((props) => {
-  const { theme, backgroundColor } = props;
-  const { focusPlaceholderColor } = getDefaultFormColors(props);
-  const bc = backgroundColor || 'transparent';
+  const formStyles = getFormStyles(props);
 
   return {
     left: '2px',
@@ -29,8 +26,8 @@ const variantFloating = defineStyle((props) => {
     position: 'absolute',
     borderRadius: 'base',
     boxSizing: 'border-box',
-    color: 'gray.500',
-    backgroundColor: 'transparent',
+    color: formStyles.placeholder.default.color,
+    backgroundColor: props.bgColor || props.backgroundColor || 'transparent',
     pointerEvents: 'none',
     margin: 0,
     transformOrigin: 'top left',
@@ -39,8 +36,8 @@ const variantFloating = defineStyle((props) => {
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     _focusWithin: {
-      backgroundColor: bc,
-      color: getColor(theme, focusPlaceholderColor),
+      backgroundColor: props.bgColor || props.backgroundColor || 'transparent',
+      color: formStyles.placeholder.default.color,
       fontSize: 'xs',
       lineHeight: '16px',
       borderTopRightRadius: 'none',
@@ -70,7 +67,7 @@ const sizes = {
       return {
         fontSize: 'md',
         lineHeight: '24px',
-        padding: '28px 4px 28px 24px',
+        padding: '26px 4px 26px 24px',
         right: '22px',
         _focusWithin: {
           padding: '16px 0 2px 24px',

theme/components/Modal.ts

@@ -10,11 +10,11 @@ import { runIfFn } from '@chakra-ui/utils';
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const baseStyleDialog = defineStyle((props) => {
+const baseStyleDialog = defineStyle(() => {
   return {
     padding: 8,
     borderRadius: 'lg',
-    bg: mode('white', 'gray.900')(props),
+    bg: 'dialog_bg',
     margin: 'auto',
   };
 });
@@ -61,7 +61,7 @@ const baseStyleOverlay = defineStyle({
 });
 
 const baseStyle = definePartsStyle((props) => ({
-  dialog: runIfFn(baseStyleDialog, props),
+  dialog: runIfFn(baseStyleDialog),
   dialogContainer: baseStyleDialogContainer,
 
   header: runIfFn(baseStyleHeader, props),

theme/components/Textarea.ts

@@ -1,22 +1,8 @@
 import { Textarea as TextareaComponent } from '@chakra-ui/react';
 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
-import { mode } from '@chakra-ui/theme-tools';
 
 import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
 
-const variantFilledInactive = defineStyle((props) => {
-  return {
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=1362573
-    // there is a problem with scrollbar color in chromium
-    // so blackAlpha.50 here is replaced with #f5f5f6
-    // and whiteAlpha.50 is replaced with #1a1b1b
-
-    // bgColor: mode('blackAlpha.50', 'whiteAlpha.50')(props),
-    bgColor: mode('#f5f5f6', '#1a1b1b')(props),
-
-  };
-});
-
 const sizes = {
   md: defineStyle({
     fontSize: 'md',
@@ -38,7 +24,6 @@ const Textarea = defineStyleConfig({
   sizes,
   variants: {
     outline: defineStyle(getOutlinedFieldStyles),
-    filledInactive: variantFilledInactive,
   },
   defaultProps: {
     variant: 'outline',

theme/foundations/semanticTokens.ts

@@ -23,6 +23,10 @@ const semanticTokens = {
       'default': 'red.400',
       _dark: 'red.300',
     },
+    dialog_bg: {
+      'default': 'white',
+      _dark: 'gray.900',
+    },
   },
   shadows: {
     action_bar: '0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%)',

theme/utils/getFormStyles.ts

@@ -0,0 +1,55 @@
+import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
+import { mode, transparentize } from '@chakra-ui/theme-tools';
+
+export default function getFormStyles(props: StyleFunctionProps) {
+  return {
+    input: {
+      empty: {
+        // there is no text in the empty input
+        // color: ???,
+        bgColor: props.bgColor || mode('white', 'black')(props),
+        borderColor: mode('gray.100', 'gray.700')(props),
+      },
+      hover: {
+        color: mode('gray.800', 'gray.50')(props),
+        bgColor: props.bgColor || mode('white', 'black')(props),
+        borderColor: mode('gray.200', 'gray.500')(props),
+      },
+      focus: {
+        color: mode('gray.800', 'gray.50')(props),
+        bgColor: props.bgColor || mode('white', 'black')(props),
+        borderColor: mode('blue.400', 'blue.400')(props),
+      },
+      filled: {
+        color: mode('gray.800', 'gray.50')(props),
+        bgColor: props.bgColor || mode('white', 'black')(props),
+        borderColor: mode('gray.300', 'gray.600')(props),
+      },
+      readOnly: {
+        color: mode('gray.800', 'gray.50')(props),
+        bgColor: mode('gray.200', 'gray.800')(props),
+        borderColor: mode('gray.200', 'gray.800')(props),
+      },
+      // we use opacity to show the disabled state
+      disabled: {
+        opacity: 0.2,
+      },
+      error: {
+        color: mode('gray.800', 'gray.50')(props),
+        bgColor: props.bgColor || mode('white', 'black')(props),
+        borderColor: mode('red.500', 'red.500')(props),
+      },
+    },
+    placeholder: {
+      'default': {
+        color: mode('gray.500', 'gray.500')(props),
+      },
+      disabled: {
+        color: transparentize('gray.500', 0.2)(props.theme),
+      },
+      error: {
+        color: mode('red.500', 'red.500')(props),
+      },
+    },
+  };
+}