Fixed #6672 - New Design Token for invalid placeholder color

apps/showcase/doc/autocomplete/InvalidDoc.vue

@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
-        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,14 +18,14 @@ export default {
             items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
+<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
-<AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
+<AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
-        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
     </div>
 </template>
 
@@ -49,8 +49,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
-        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
     </div>
 </template>
 

apps/showcase/doc/datepicker/InvalidDoc.vue

@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <DatePicker v-model="date1" :invalid="!date1" />
+        <DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
-        <DatePicker v-model="date2" :invalid="!date2" variant="filled" />
+        <DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,14 +17,14 @@ export default {
             date2: null,
             code: {
                 basic: `
-<DatePicker v-model="date1" :invalid="!date1" />
+<DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
-<DatePicker v-model="date2" :invalid="!date2" variant="filled" />
+<DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <DatePicker v-model="date1" :invalid="!date1" />
+        <DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
-        <DatePicker v-model="date2" :invalid="!date2" variant="filled" />
+        <DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
     </div>
 </template>
 
@@ -42,8 +42,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <DatePicker v-model="date1" :invalid="!date1" />
+        <DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
-        <DatePicker v-model="date2" :invalid="!date2" variant="filled" />
+        <DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
     </div>
 </template>
 

apps/showcase/doc/inputmask/InvalidDoc.vue

@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputMask v-model="value1" mask="99-999999" placeholder="99-999999" :invalid="!value1" />
+        <InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
-        <InputMask v-model="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled" />
+        <InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,14 +17,14 @@ export default {
             value2: '',
             code: {
                 basic: `
-<InputMask v-model="value1" mask="99-999999" placeholder="99-999999" :invalid="!value1" />
+<InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
-<InputMask v-model="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled "/>
+<InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputMask v-model="value1" mask="99-999999" placeholder="99-999999" :invalid="!value1" />
+        <InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
-        <InputMask v-model="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled "/>
+        <InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
     </div>
 </template>
 
@@ -43,8 +43,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputMask v-model="value1" mask="99-999999" placeholder="99-999999" :invalid="!value1" />
+        <InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
-        <InputMask v-model="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled "/>
+        <InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
     </div>
 </template>
 

apps/showcase/doc/inputnumber/InvalidDoc.vue

@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" />
+        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
-        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
+        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,14 +17,14 @@ export default {
             value2: null,
             code: {
                 basic: `
-<InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" />
+<InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
-<InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
+<InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" />
+        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
-        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
+        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
     </div>
 </template>
 
@@ -42,8 +42,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" />
+        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
-        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
+        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
     </div>
 </template>
 

apps/showcase/doc/inputtext/InvalidDoc.vue

@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputText v-model="value1" :invalid="!value1" />
+        <InputText v-model="value1" :invalid="!value1" placeholder="Name" />
-        <InputText v-model="value2" :invalid="!value2" variant="filled" />
+        <InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,14 +17,14 @@ export default {
             value2: '',
             code: {
                 basic: `
-<InputText v-model="value1" :invalid="!value1" />
+<InputText v-model="value1" :invalid="!value1" placeholder="Name" />
-<InputText v-model="value2" :invalid="!value2" variant="filled" />
+<InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputText v-model="value1" :invalid="!value1" />
+        <InputText v-model="value1" :invalid="!value1" placeholder="Name" />
-        <InputText v-model="value2" :invalid="!value2" variant="filled" />
+        <InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
     </div>
 </template>
 
@@ -42,8 +42,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputText v-model="value1" :invalid="!value1" />
+        <InputText v-model="value1" :invalid="!value1" placeholder="Name" />
-        <InputText v-model="value2" :invalid="!value2" variant="filled" />
+        <InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
     </div>
 </template>
 

apps/showcase/doc/password/InvalidDoc.vue

@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <Password v-model="value1" :invalid="!value1" />
+        <Password v-model="value1" :invalid="!value1" placeholder="Password" />
-        <Password v-model="value2" :invalid="!value2" variant="filled" />
+        <Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,14 +17,14 @@ export default {
             value2: null,
             code: {
                 basic: `
-<Password v-model="value1" :invalid="!value1" />
+<Password v-model="value1" :invalid="!value1" placeholder="Password" />
-<Password v-model="value2" :invalid="!value2" variant="filled" />
+<Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <Password v-model="value1" :invalid="!value1" />
+        <Password v-model="value1" :invalid="!value1" placeholder="Password" />
-        <Password v-model="value2" :invalid="!value2" variant="filled" />
+        <Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
     </div>
 </template>
 
@@ -42,8 +42,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <Password v-model="value1" :invalid="!value1" />
+        <Password v-model="value1" :invalid="!value1" placeholder="Password" />
-        <Password v-model="value2" :invalid="!value2" variant="filled" />
+        <Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
     </div>
 </template>
 

apps/showcase/doc/textarea/InvalidDoc.vue

@@ -3,7 +3,7 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" :invalid="value === ''" style="resize: none" />
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: '',
             code: {
                 basic: `
-<Textarea v-model="value" rows="5" cols="30" :invalid="value ===''"  />
+<Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" :invalid="value ===''"  />
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" :invalid="value ===''"  />
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
     </div>
 </template>
 

apps/showcase/layouts/AppConfigurator.vue

@@ -31,7 +31,7 @@
             </div>
             <div class="config-panel-settings">
                 <span class="config-panel-label">Presets</span>
-                <SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" />
+                <SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" size="small" />
             </div>
             <div class="flex">
                 <div class="flex-1">

packages/primevue/src/autocomplete/style/AutoCompleteStyle.js

@@ -230,6 +230,10 @@ const theme = ({ dt }) => `
     color: ${dt('autocomplete.placeholder.color')};
 }
 
+.p-autocomplete.p-invalid .p-autocomplete-input-chip input::placeholder {
+    color: ${dt('autocomplete.invalid.placeholder.color')};
+}
+
 .p-autocomplete-empty-message {
     padding: ${dt('autocomplete.empty.message.padding')};
 }

packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js

@@ -86,6 +86,10 @@ const theme = ({ dt }) => `
     color: ${dt('cascadeselect.placeholder.color')};
 }
 
+.p-cascadeselect.p-invalid .p-cascadeselect-label.p-placeholder {
+    color: ${dt('cascadeselect.invalid.placeholder.color')};
+}
+
 .p-cascadeselect.p-disabled .p-cascadeselect-label {
     color: ${dt('cascadeselect.disabled.color')};
 }

packages/primevue/src/inputtext/style/InputTextStyle.js

@@ -56,6 +56,10 @@ const theme = ({ dt }) => `
     color: ${dt('inputtext.placeholder.color')};
 }
 
+.p-inputtext.p-invalid::placeholder {
+    color: ${dt('inputtext.invalid.placeholder.color')};
+}
+
 .p-inputtext-sm {
     font-size: ${dt('inputtext.sm.font.size')};
     padding-block: ${dt('inputtext.sm.padding.y')};

packages/primevue/src/multiselect/style/MultiSelectStyle.js

@@ -90,6 +90,10 @@ const theme = ({ dt }) => `
     color: ${dt('multiselect.placeholder.color')};
 }
 
+.p-multiselect.p-invalid .p-multiselect-label.p-placeholder {
+    color: ${dt('multiselect.invalid.placeholder.color')};
+}
+
 .p-multiselect.p-disabled .p-multiselect-label {
     color: ${dt('multiselect.disabled.color')};
 }

packages/primevue/src/select/style/SelectStyle.js

@@ -86,6 +86,10 @@ const theme = ({ dt }) => `
     color: ${dt('select.placeholder.color')};
 }
 
+.p-select.p-invalid .p-select-label.p-placeholder {
+    color: ${dt('select.invalid.placeholder.color')};
+}
+
 .p-select:has(.p-select-clear-icon) .p-select-label {
     padding-inline-end: calc(1rem + ${dt('select.padding.x')});
 }

packages/primevue/src/textarea/style/TextareaStyle.js

@@ -52,6 +52,10 @@ const theme = ({ dt }) => `
     color: ${dt('textarea.placeholder.color')};
 }
 
+.p-textarea.p-invalid::placeholder {
+    color: ${dt('textarea.invalid.placeholder.color')};
+}
+
 .p-textarea-fluid {
     width: 100%;
 }

packages/primevue/src/treeselect/style/TreeSelectStyle.js

@@ -90,6 +90,10 @@ const theme = ({ dt }) => `
     color: ${dt('treeselect.placeholder.color')};
 }
 
+.p-treeselect.p-invalid .p-treeselect-label.p-placeholder {
+    color: ${dt('treeselect.invalid.placeholder.color')};
+}
+
 .p-treeselect.p-disabled .p-treeselect-label {
     color: ${dt('treeselect.disabled.color')};
 }

packages/themes/src/presets/aura/autocomplete/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/aura/base/index.js

@@ -182,10 +182,11 @@ export default {
                     color: '{surface.700}',
                     disabledColor: '{surface.500}',
                     placeholderColor: '{surface.500}',
+                    invalidPlaceholderColor: '{red.600}',
                     floatLabelColor: '{surface.500}',
                     floatLabelFocusColor: '{primary.600}',
                     floatLabelActiveColor: '{surface.500}',
-                    floatLabelInvalidColor: '{red.400}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.400}',
                     shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
                 },
@@ -306,10 +307,11 @@ export default {
                     color: '{surface.0}',
                     disabledColor: '{surface.400}',
                     placeholderColor: '{surface.400}',
+                    invalidPlaceholderColor: '{red.400}',
                     floatLabelColor: '{surface.400}',
                     floatLabelFocusColor: '{primary.color}',
                     floatLabelActiveColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.300}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.400}',
                     shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
                 },

packages/themes/src/presets/aura/cascadeselect/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/aura/inputtext/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/aura/multiselect/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/aura/select/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/aura/textarea/index.js

@@ -11,6 +11,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/aura/treeselect/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/lara/base/index.js

@@ -184,10 +184,11 @@ export default {
                     color: '{surface.700}',
                     disabledColor: '{surface.500}',
                     placeholderColor: '{surface.500}',
+                    invalidPlaceholderColor: '{red.600}',
                     floatLabelColor: '{surface.500}',
                     floatLabelFocusColor: '{primary.600}',
                     floatLabelActiveColor: '{surface.500}',
-                    floatLabelInvalidColor: '{red.400}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.500}',
                     shadow: 'none'
                 },
@@ -311,10 +312,11 @@ export default {
                     color: '{surface.0}',
                     disabledColor: '{surface.400}',
                     placeholderColor: '{surface.400}',
+                    invalidPlaceholderColor: '{red.400}',
                     floatLabelColor: '{surface.400}',
                     floatLabelFocusColor: '{primary.color}',
                     floatLabelActiveColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.300}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.400}',
                     shadow: 'none'
                 },

packages/themes/src/presets/lara/cascadeselect/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/lara/inputtext/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/lara/multiselect/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/lara/select/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/lara/textarea/index.js

@@ -11,6 +11,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/lara/treeselect/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/material/base/index.js

@@ -184,10 +184,11 @@ export default {
                     color: '{surface.900}',
                     disabledColor: '{surface.600}',
                     placeholderColor: '{surface.600}',
+                    invalidPlaceholderColor: '{red.800}',
                     floatLabelColor: '{surface.600}',
                     floatLabelFocusColor: '{primary.600}',
                     floatLabelActiveColor: '{surface.600}',
-                    floatLabelInvalidColor: '{red.800}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.600}',
                     shadow: 'none'
                 },
@@ -311,10 +312,11 @@ export default {
                     color: '{surface.0}',
                     disabledColor: '{surface.400}',
                     placeholderColor: '{surface.400}',
+                    invalidPlaceholderColor: '{red.300}',
                     floatLabelColor: '{surface.400}',
                     floatLabelFocusColor: '{primary.color}',
                     floatLabelActiveColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.300}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.400}',
                     shadow: 'none'
                 },

packages/themes/src/presets/material/cascadeselect/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/material/inputtext/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/material/multiselect/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/material/select/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/material/textarea/index.js

@@ -11,6 +11,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/material/treeselect/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/nora/base/index.js

@@ -182,10 +182,11 @@ export default {
                     color: '{surface.900}',
                     disabledColor: '{surface.600}',
                     placeholderColor: '{surface.600}',
+                    invalidPlaceholderColor: '{red.600}',
                     floatLabelColor: '{surface.600}',
                     floatLabelFocusColor: '{primary.color}',
                     floatLabelActiveColor: '{surface.600}',
-                    floatLabelInvalidColor: '{red.500}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.900}',
                     shadow: 'none'
                 },
@@ -306,10 +307,11 @@ export default {
                     color: '{surface.0}',
                     disabledColor: '{surface.400}',
                     placeholderColor: '{surface.400}',
+                    invalidPlaceholderColor: '{red.400}',
                     floatLabelColor: '{surface.400}',
                     floatLabelFocusColor: '{primary.color}',
                     floatLabelActiveColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.400}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.0}',
                     shadow: 'none'
                 },

packages/themes/src/presets/nora/cascadeselect/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/nora/inputtext/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/nora/multiselect/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/nora/select/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/nora/textarea/index.js

@@ -11,6 +11,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',

packages/themes/src/presets/nora/treeselect/index.js

@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',