Fixed #6672 - New Design Token for invalid placeholder color

pull/6674/head
Cagatay Civici 2024-10-28 23:55:20 +03:00
parent 2271bc3593
commit b1822ff9ef
44 changed files with 122 additions and 61 deletions

View File

@ -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="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
<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="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
<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="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
<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="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
<AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
</div>
</template>

View File

@ -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="date2" :invalid="!date2" variant="filled" />
<DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
<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="date2" :invalid="!date2" variant="filled" />
<DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
<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="date2" :invalid="!date2" variant="filled" />
<DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
<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="date2" :invalid="!date2" variant="filled" />
<DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
<DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
</div>
</template>

View File

@ -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="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled" />
<InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
<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="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled "/>
<InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
<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="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled "/>
<InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
<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="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled "/>
<InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
<InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
</div>
</template>

View File

@ -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="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
<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" 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="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
<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" 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="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
<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" 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="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
<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" placeholder="Amount" />
</div>
</template>

View File

@ -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="value2" :invalid="!value2" variant="filled" />
<InputText v-model="value1" :invalid="!value1" placeholder="Name" />
<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="value2" :invalid="!value2" variant="filled" />
<InputText v-model="value1" :invalid="!value1" placeholder="Name" />
<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="value2" :invalid="!value2" variant="filled" />
<InputText v-model="value1" :invalid="!value1" placeholder="Name" />
<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="value2" :invalid="!value2" variant="filled" />
<InputText v-model="value1" :invalid="!value1" placeholder="Name" />
<InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
</div>
</template>

View File

@ -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="value2" :invalid="!value2" variant="filled" />
<Password v-model="value1" :invalid="!value1" placeholder="Password" />
<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="value2" :invalid="!value2" variant="filled" />
<Password v-model="value1" :invalid="!value1" placeholder="Password" />
<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="value2" :invalid="!value2" variant="filled" />
<Password v-model="value1" :invalid="!value1" placeholder="Password" />
<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="value2" :invalid="!value2" variant="filled" />
<Password v-model="value1" :invalid="!value1" placeholder="Password" />
<Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
</div>
</template>

View File

@ -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>

View File

@ -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">

View File

@ -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')};
}

View File

@ -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')};
}

View File

@ -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')};

View File

@ -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')};
}

View File

@ -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')});
}

View File

@ -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%;
}

View File

@ -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')};
}

View File

@ -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}',

View File

@ -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)'
},

View File

@ -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}',

View File

@ -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}',

View File

@ -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}',

View File

@ -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}',

View File

@ -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}',

View File

@ -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}',

View File

@ -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'
},

View File

@ -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}',

View File

@ -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}',

View File

@ -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}',

View File

@ -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}',

View File

@ -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}',

View File

@ -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}',

View File

@ -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'
},

View File

@ -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}',

View File

@ -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}',

View File

@ -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}',

View File

@ -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}',

View File

@ -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}',

View File

@ -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}',

View File

@ -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'
},

View File

@ -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}',

View File

@ -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}',

View File

@ -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}',

View File

@ -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}',

View File

@ -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}',

View File

@ -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}',