Input/select placeholder font change (#2844)

* font weights

* change input placeholder colors

* update screenshots pt 1

* update screenshots pt 2

* update screenshots pt 3

toolkit/chakra/input-group.tsx

@@ -59,7 +59,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
     return (
       <Group ref={ ref } w="100%" { ...rest }>
         { startElement && (
-          <InputElement pointerEvents="none" ref={ startElementRef } px={ 0 } color="gray.500" { ...startElementProps }>
+          <InputElement pointerEvents="none" ref={ startElementRef } px={ 0 } color="input.placeholder" { ...startElementProps }>
             { startElement }
           </InputElement>
         ) }
@@ -76,7 +76,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
           });
         }) }
         { endElement && (
-          <InputElement placement="end" ref={ endElementRef } px={ 0 } color="gray.500" { ...endElementProps }>
+          <InputElement placement="end" ref={ endElementRef } px={ 0 } color="input.placeholder" { ...endElementProps }>
             { endElement }
           </InputElement>
         ) }

toolkit/theme/foundations/semanticTokens.ts

@@ -268,13 +268,13 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         error: { value: '{colors.red.500}' },
       },
       placeholder: {
-        DEFAULT: { value: '{colors.gray.500}' },
+        DEFAULT: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
         error: { value: '{colors.red.500}' },
       },
     },
     field: {
       placeholder: {
-        DEFAULT: { value: '{colors.gray.500}' },
+        DEFAULT: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
         disabled: { value: '{colors.gray.500/20}' },
         error: { value: '{colors.red.500}' },
       },
@@ -305,12 +305,12 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
       },
       indicator: {
         fg: {
-          DEFAULT: { value: '{colors.gray.500}' },
+          DEFAULT: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
         },
       },
       placeholder: {
         fg: {
-          DEFAULT: { value: '{colors.gray.500}' },
+          DEFAULT: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
           error: { value: '{colors.red.500}' },
         },
       },

toolkit/theme/recipes/input.recipe.ts

@@ -14,6 +14,7 @@ export const recipe = defineRecipe({
     color: 'input.fg',
     '--focus-color': 'colors.border.error',
     '--error-color': 'colors.border.error',
+    fontWeight: 'medium',
     _invalid: {
       focusRingColor: 'var(--error-color)',
       borderColor: 'var(--error-color)',

toolkit/theme/recipes/select.recipe.ts

@@ -20,7 +20,7 @@ export const recipe = defineSlotRecipe({
       borderRadius: 'base',
       userSelect: 'none',
       textAlign: 'start',
-      fontWeight: 'semibold',
+      fontWeight: 'medium',
       cursor: 'pointer',
       focusVisibleRing: 'none',
       _disabled: {