Fixed #6672 - New Design Token for invalid placeholder color
parent
2271bc3593
commit
b1822ff9ef
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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')};
|
||||
}
|
||||
|
|
|
@ -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')};
|
||||
}
|
||||
|
|
|
@ -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')};
|
||||
|
|
|
@ -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')};
|
||||
}
|
||||
|
|
|
@ -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')});
|
||||
}
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
@ -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')};
|
||||
}
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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)'
|
||||
},
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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'
|
||||
},
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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'
|
||||
},
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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'
|
||||
},
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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}',
|
||||
|
|
Loading…
Reference in New Issue