Fix styling inconsistency for FormSingleRecordFieldChip placeholder (#12795)

## Before

![CleanShot 2025-06-23 at 17 01
16@2x](https://github.com/user-attachments/assets/8fb40b91-a17a-48dc-8d5e-6657bdcf8434)



## After


![CleanShot 2025-06-23 at 17 01
01@2x](https://github.com/user-attachments/assets/a9781e13-200c-4aa2-9907-a0c8f4a1dd67)

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldPlaceholder.tsx

@@ -0,0 +1,8 @@
+import { FORM_FIELD_PLACEHOLDER_STYLES } from '@/object-record/record-field/form-types/constants/FormFieldPlaceholderStyles';
+import styled from '@emotion/styled';
+
+const StyledPlaceholder = styled.div`
+  ${FORM_FIELD_PLACEHOLDER_STYLES}
+`;
+
+export { StyledPlaceholder as FormFieldPlaceholder };

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer';
 import { FormFieldInputInnerContainer } from '@/object-record/record-field/form-types/components/FormFieldInputInnerContainer';
 import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer';
+import { FormFieldPlaceholder } from '@/object-record/record-field/form-types/components/FormFieldPlaceholder';
 import { VariableChipStandalone } from '@/object-record/record-field/form-types/components/VariableChipStandalone';
 import { FormMultiSelectFieldInputHotKeyScope } from '@/object-record/record-field/form-types/constants/FormMultiSelectFieldInputHotKeyScope';
 import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
@@ -59,9 +60,7 @@ const StyledSelectInputContainer = styled.div`
   top: ${({ theme }) => theme.spacing(9)};
 `;
 
-const StyledPlaceholder = styled.div`
+const StyledPlaceholder = styled(FormFieldPlaceholder)`
-  color: ${({ theme }) => theme.font.color.light};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
   width: 100%;
 `;
 

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordFieldChip.tsx

@@ -1,4 +1,5 @@
 import { RecordChip } from '@/object-record/components/RecordChip';
+import { FormFieldPlaceholder } from '@/object-record/record-field/form-types/components/FormFieldPlaceholder';
 import {
   RecordId,
   Variable,
@@ -12,9 +13,7 @@ const StyledRecordChip = styled(RecordChip)`
   margin: ${({ theme }) => theme.spacing(2)};
 `;
 
-const StyledPlaceholder = styled.div`
+const StyledPlaceholder = styled(FormFieldPlaceholder)`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  font-size: ${({ theme }) => theme.font.size.md};
   margin: ${({ theme }) => theme.spacing(2)};
 `;
 

packages/twenty-front/src/modules/object-record/record-field/form-types/components/TextVariableEditor.tsx

@@ -1,3 +1,4 @@
+import { FORM_FIELD_PLACEHOLDER_STYLES } from '@/object-record/record-field/form-types/constants/FormFieldPlaceholderStyles';
 import styled from '@emotion/styled';
 import { Editor, EditorContent } from '@tiptap/react';
 
@@ -30,9 +31,8 @@ const StyledEditor = styled.div<{
     white-space: ${({ multiline }) => (multiline ? 'pre' : 'nowrap')};
 
     p.is-editor-empty:first-of-type::before {
+      ${FORM_FIELD_PLACEHOLDER_STYLES}
       content: attr(data-placeholder);
-      color: ${({ theme }) => theme.font.color.light};
-      font-weight: ${({ theme }) => theme.font.weight.medium};
       float: left;
       height: 0;
       pointer-events: none;

packages/twenty-front/src/modules/object-record/record-field/form-types/constants/FormFieldPlaceholderStyles.ts

@@ -0,0 +1,10 @@
+import { css } from '@emotion/react';
+import { ThemeType } from 'twenty-ui/theme';
+
+export const FORM_FIELD_PLACEHOLDER_STYLES = (props: {
+  theme: ThemeType;
+}) => css`
+  color: ${props.theme.font.color.light};
+  font-size: ${props.theme.font.size.md};
+  font-weight: ${props.theme.font.weight.medium};
+`;

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx

@@ -1,6 +1,7 @@
 import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer';
 import { FormFieldInputInnerContainer } from '@/object-record/record-field/form-types/components/FormFieldInputInnerContainer';
 import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer';
+import { FormFieldPlaceholder } from '@/object-record/record-field/form-types/components/FormFieldPlaceholder';
 import { InputLabel } from '@/ui/input/components/InputLabel';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
@@ -111,9 +112,7 @@ const StyledFieldContainer = styled.div<{
     `}
 `;
 
-const StyledPlaceholder = styled.div`
+const StyledPlaceholder = styled(FormFieldPlaceholder)`
-  color: ${({ theme }) => theme.font.color.light};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
   width: 100%;
 `;