Variants for #6653
Cagatay Civici
parent
955076393d
commit
8563a32a46
|
|
@ -2,14 +2,16 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Validation errors in a form are displayed with the <i>error</i> severity.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap mb-4 gap-2">
|
||||
<InputText placeholder="Username" aria-label="username" invalid />
|
||||
<Message severity="error">Username is required</Message>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<InputText placeholder="Email" aria-label="email" invalid />
|
||||
<Message severity="error" icon="pi pi-times-circle" />
|
||||
<div class="card flex justify-center">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<InputText placeholder="Username" aria-label="username" invalid />
|
||||
<Message severity="error">Username is required</Message>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<InputText placeholder="Email" aria-label="email" invalid />
|
||||
<Message severity="error" icon="pi pi-times-circle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -21,7 +23,7 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<div class="flex flex-wrap mb-4 gap-2">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<InputText placeholder="Username" aria-label="username" invalid />
|
||||
<Message severity="error">Username is required</Message>
|
||||
</div>
|
||||
|
|
@ -32,14 +34,16 @@ export default {
|
|||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap mb-4 gap-2">
|
||||
<InputText placeholder="Username" aria-label="username" invalid />
|
||||
<Message severity="error">Username is required</Message>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<InputText placeholder="Email" aria-label="email" invalid />
|
||||
<Message severity="error" icon="pi pi-times-circle" />
|
||||
<div class="card flex justify-center">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<InputText placeholder="Username" aria-label="username" invalid />
|
||||
<Message severity="error">Username is required</Message>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<InputText placeholder="Email" aria-label="email" invalid />
|
||||
<Message severity="error" icon="pi pi-times-circle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -49,14 +53,16 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap mb-4 gap-2">
|
||||
<InputText placeholder="Username" aria-label="username" invalid />
|
||||
<Message severity="error">Username is required</Message>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<InputText placeholder="Email" aria-label="email" invalid />
|
||||
<Message severity="error" icon="pi pi-times-circle" />
|
||||
<div class="card flex justify-center">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<InputText placeholder="Username" aria-label="username" invalid />
|
||||
<Message severity="error">Username is required</Message>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<InputText placeholder="Email" aria-label="email" invalid />
|
||||
<Message severity="error" icon="pi pi-times-circle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Message provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
|
||||
<p>Configure the <i>variant</i> value as <i>outlined</i> for messages with borders and no background.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-col items-center gap-4">
|
||||
<Message size="small">Small Message</Message>
|
||||
<Message>Normal Message</Message>
|
||||
<Message size="large">Large Message</Message>
|
||||
<div class="card flex flex-wrap gap-4 justify-center">
|
||||
<Message severity="success" variant="outlined">Success Message</Message>
|
||||
<Message severity="info" variant="outlined">Info Message</Message>
|
||||
<Message severity="warn" variant="outlined">Warn Message</Message>
|
||||
<Message severity="error" variant="outlined">Error Message</Message>
|
||||
<Message severity="secondary" variant="outlined">Secondary Message</Message>
|
||||
<Message severity="contrast" variant="outlined">Contrast Message</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -16,12 +19,22 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Message>Message Content</Message>
|
||||
<Message severity="success" variant="outlined">Success Message</Message>
|
||||
<Message severity="info" variant="outlined">Info Message</Message>
|
||||
<Message severity="warn" variant="outlined">Warn Message</Message>
|
||||
<Message severity="error" variant="outlined">Error Message</Message>
|
||||
<Message severity="secondary" variant="outlined">Secondary Message</Message>
|
||||
<Message severity="contrast" variant="outlined">Contrast Message</Message>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
<div class="card flex flex-wrap gap-4 justify-center">
|
||||
<Message severity="success" variant="outlined">Success Message</Message>
|
||||
<Message severity="info" variant="outlined">Info Message</Message>
|
||||
<Message severity="warn" variant="outlined">Warn Message</Message>
|
||||
<Message severity="error" variant="outlined">Error Message</Message>
|
||||
<Message severity="secondary" variant="outlined">Secondary Message</Message>
|
||||
<Message severity="contrast" variant="outlined">Contrast Message</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -30,8 +43,13 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
<div class="card flex flex-wrap gap-4 justify-center">
|
||||
<Message severity="success" variant="outlined">Success Message</Message>
|
||||
<Message severity="info" variant="outlined">Info Message</Message>
|
||||
<Message severity="warn" variant="outlined">Warn Message</Message>
|
||||
<Message severity="error" variant="outlined">Error Message</Message>
|
||||
<Message severity="secondary" variant="outlined">Secondary Message</Message>
|
||||
<Message severity="contrast" variant="outlined">Contrast Message</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Configure the <i>variant</i> value as <i>plain</i> for messages without borders and backgrounds.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap gap-4 justify-center">
|
||||
<Message severity="success" variant="plain">Success Message</Message>
|
||||
<Message severity="info" variant="plain">Info Message</Message>
|
||||
<Message severity="warn" variant="plain">Warn Message</Message>
|
||||
<Message severity="error" variant="plain">Error Message</Message>
|
||||
<Message severity="secondary" variant="plain">Secondary Message</Message>
|
||||
<Message severity="contrast" variant="plain">Contrast Message</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Message severity="success" variant="plain">Success Message</Message>
|
||||
<Message severity="info" variant="plain">Info Message</Message>
|
||||
<Message severity="warn" variant="plain">Warn Message</Message>
|
||||
<Message severity="error" variant="plain">Error Message</Message>
|
||||
<Message severity="secondary" variant="plain">Secondary Message</Message>
|
||||
<Message severity="contrast" variant="plain">Contrast Message</Message>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4 justify-center">
|
||||
<Message severity="success" variant="plain">Success Message</Message>
|
||||
<Message severity="info" variant="plain">Info Message</Message>
|
||||
<Message severity="warn" variant="plain">Warn Message</Message>
|
||||
<Message severity="error" variant="plain">Error Message</Message>
|
||||
<Message severity="secondary" variant="plain">Secondary Message</Message>
|
||||
<Message severity="contrast" variant="plain">Contrast Message</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4 justify-center">
|
||||
<Message severity="success" variant="plain">Success Message</Message>
|
||||
<Message severity="info" variant="plain">Info Message</Message>
|
||||
<Message severity="warn" variant="plain">Warn Message</Message>
|
||||
<Message severity="error" variant="plain">Error Message</Message>
|
||||
<Message severity="secondary" variant="plain">Secondary Message</Message>
|
||||
<Message severity="contrast" variant="plain">Contrast Message</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Message provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-col items-center gap-4">
|
||||
<Message size="small">Small Message</Message>
|
||||
<Message>Normal Message</Message>
|
||||
<Message size="large">Large Message</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Message>Message Content</Message>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -12,10 +12,10 @@ import IconDoc from '@/doc/message/IconDoc.vue';
|
|||
import ImportDoc from '@/doc/message/ImportDoc.vue';
|
||||
import LifeDoc from '@/doc/message/LifeDoc.vue';
|
||||
import OutlinedDoc from '@/doc/message/OutlinedDoc.vue';
|
||||
import PlainDoc from '@/doc/message/PlainDoc.vue';
|
||||
import PTComponent from '@/doc/message/pt/index.vue';
|
||||
import SeverityDoc from '@/doc/message/SeverityDoc.vue';
|
||||
import SizesDoc from '@/doc/message/SizesDoc.vue';
|
||||
import TextDoc from '@/doc/message/TextDoc.vue';
|
||||
import PTComponent from '@/doc/message/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/message/theming/index.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -48,9 +48,9 @@ export default {
|
|||
component: OutlinedDoc
|
||||
},
|
||||
{
|
||||
id: 'text',
|
||||
label: 'Text',
|
||||
component: TextDoc
|
||||
id: 'plain',
|
||||
label: 'Plain',
|
||||
component: PlainDoc
|
||||
},
|
||||
{
|
||||
id: 'sizes',
|
||||
|
|
|
|||
|
|
@ -68,6 +68,15 @@ const theme = ({ dt }) => `
|
|||
background: ${dt('message.info.close.button.hover.background')};
|
||||
}
|
||||
|
||||
.p-message-info.p-message-variant-outlined {
|
||||
color: ${dt('message.info.outlined.color')};
|
||||
outline-color: ${dt('message.info.outlined.border.color')};
|
||||
}
|
||||
|
||||
.p-message-info.p-message-variant-plain {
|
||||
color: ${dt('message.info.plain.color')};
|
||||
}
|
||||
|
||||
.p-message-success {
|
||||
background: ${dt('message.success.background')};
|
||||
outline-color: ${dt('message.success.border.color')};
|
||||
|
|
@ -84,6 +93,15 @@ const theme = ({ dt }) => `
|
|||
background: ${dt('message.success.close.button.hover.background')};
|
||||
}
|
||||
|
||||
.p-message-success.p-message-variant-outlined {
|
||||
color: ${dt('message.success.outlined.color')};
|
||||
outline-color: ${dt('message.success.outlined.border.color')};
|
||||
}
|
||||
|
||||
.p-message-success.p-message-variant-plain {
|
||||
color: ${dt('message.success.plain.color')};
|
||||
}
|
||||
|
||||
.p-message-warn {
|
||||
background: ${dt('message.warn.background')};
|
||||
outline-color: ${dt('message.warn.border.color')};
|
||||
|
|
@ -100,6 +118,15 @@ const theme = ({ dt }) => `
|
|||
background: ${dt('message.warn.close.button.hover.background')};
|
||||
}
|
||||
|
||||
.p-message-warn.p-message-variant-outlined {
|
||||
color: ${dt('message.warn.outlined.color')};
|
||||
outline-color: ${dt('message.warn.outlined.border.color')};
|
||||
}
|
||||
|
||||
.p-message-warn.p-message-variant-plain {
|
||||
color: ${dt('message.warn.plain.color')};
|
||||
}
|
||||
|
||||
.p-message-error {
|
||||
background: ${dt('message.error.background')};
|
||||
outline-color: ${dt('message.error.border.color')};
|
||||
|
|
@ -116,6 +143,15 @@ const theme = ({ dt }) => `
|
|||
background: ${dt('message.error.close.button.hover.background')};
|
||||
}
|
||||
|
||||
.p-message-error.p-message-variant-outlined {
|
||||
color: ${dt('message.error.outlined.color')};
|
||||
outline-color: ${dt('message.error.outlined.border.color')};
|
||||
}
|
||||
|
||||
.p-message-error.p-message-variant-plain {
|
||||
color: ${dt('message.error.plain.color')};
|
||||
}
|
||||
|
||||
.p-message-secondary {
|
||||
background: ${dt('message.secondary.background')};
|
||||
outline-color: ${dt('message.secondary.border.color')};
|
||||
|
|
@ -132,6 +168,15 @@ const theme = ({ dt }) => `
|
|||
background: ${dt('message.secondary.close.button.hover.background')};
|
||||
}
|
||||
|
||||
.p-message-secondary.p-message-variant-outlined {
|
||||
color: ${dt('message.secondary.outlined.color')};
|
||||
outline-color: ${dt('message.secondary.outlined.border.color')};
|
||||
}
|
||||
|
||||
.p-message-secondary.p-message-variant-plain {
|
||||
color: ${dt('message.secondary.plain.color')};
|
||||
}
|
||||
|
||||
.p-message-contrast {
|
||||
background: ${dt('message.contrast.background')};
|
||||
outline-color: ${dt('message.contrast.border.color')};
|
||||
|
|
@ -148,6 +193,15 @@ const theme = ({ dt }) => `
|
|||
background: ${dt('message.contrast.close.button.hover.background')};
|
||||
}
|
||||
|
||||
.p-message-contrast.p-message-variant-outlined {
|
||||
color: ${dt('message.contrast.outlined.color')};
|
||||
outline-color: ${dt('message.contrast.outlined.border.color')};
|
||||
}
|
||||
|
||||
.p-message-contrast.p-message-variant-plain {
|
||||
color: ${dt('message.contrast.plain.color')};
|
||||
}
|
||||
|
||||
.p-message-text {
|
||||
font-size: ${dt('message.text.font.size')};
|
||||
font-weight: ${dt('message.text.font.weight')};
|
||||
|
|
@ -225,6 +279,22 @@ const theme = ({ dt }) => `
|
|||
width: ${dt('message.close.icon.lg.size')};
|
||||
height: ${dt('message.close.icon.lg.size')};
|
||||
}
|
||||
|
||||
.p-message-variant-outlined {
|
||||
background: transparent;
|
||||
outline-width: ${dt('message.outlined.border.width')};
|
||||
}
|
||||
|
||||
.p-message-variant-plain {
|
||||
background: transparent;
|
||||
outline-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.p-message-variant-outlined .p-message-close-button:hover,
|
||||
.p-message-variant-plain .p-message-close-button:hover {
|
||||
background: transparent;
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
|
|
@ -232,7 +302,7 @@ const classes = {
|
|||
'p-message p-component p-message-' + props.severity,
|
||||
{
|
||||
'p-message-variant-outlined': props.variant === 'outlined',
|
||||
'p-message-variant-text': props.variant === 'text',
|
||||
'p-message-variant-plain': props.variant === 'plain',
|
||||
'p-message-sm': props.size === 'small',
|
||||
'p-message-lg': props.size === 'large'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,6 +52,11 @@ export default {
|
|||
size: '1.125rem'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
root: {
|
||||
borderWidth: '1px'
|
||||
}
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
info: {
|
||||
|
|
@ -65,6 +70,13 @@ export default {
|
|||
color: '{blue.600}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{blue.600}',
|
||||
borderColor: '{blue.600}'
|
||||
},
|
||||
plain: {
|
||||
color: '{blue.600}'
|
||||
}
|
||||
},
|
||||
success: {
|
||||
|
|
@ -78,6 +90,13 @@ export default {
|
|||
color: '{green.600}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{green.600}',
|
||||
borderColor: '{green.600}'
|
||||
},
|
||||
plain: {
|
||||
color: '{green.600}'
|
||||
}
|
||||
},
|
||||
warn: {
|
||||
|
|
@ -91,6 +110,13 @@ export default {
|
|||
color: '{yellow.600}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{yellow.600}',
|
||||
borderColor: '{yellow.600}'
|
||||
},
|
||||
plain: {
|
||||
color: '{yellow.600}'
|
||||
}
|
||||
},
|
||||
error: {
|
||||
|
|
@ -104,6 +130,13 @@ export default {
|
|||
color: '{red.600}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{red.600}',
|
||||
borderColor: '{red.600}'
|
||||
},
|
||||
plain: {
|
||||
color: '{red.600}'
|
||||
}
|
||||
},
|
||||
secondary: {
|
||||
|
|
@ -117,6 +150,13 @@ export default {
|
|||
color: '{surface.600}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{surface.500}',
|
||||
borderColor: '{surface.500}'
|
||||
},
|
||||
plain: {
|
||||
color: '{surface.500}'
|
||||
}
|
||||
},
|
||||
contrast: {
|
||||
|
|
@ -130,6 +170,13 @@ export default {
|
|||
color: '{surface.50}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{surface.950}',
|
||||
borderColor: '{surface.950}'
|
||||
},
|
||||
plain: {
|
||||
color: '{surface.950}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -145,6 +192,13 @@ export default {
|
|||
color: '{blue.500}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{blue.500}',
|
||||
borderColor: '{blue.500}'
|
||||
},
|
||||
plain: {
|
||||
color: '{blue.500}'
|
||||
}
|
||||
},
|
||||
success: {
|
||||
|
|
@ -158,6 +212,13 @@ export default {
|
|||
color: '{green.500}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{green.500}',
|
||||
borderColor: '{green.500}'
|
||||
},
|
||||
plain: {
|
||||
color: '{green.500}'
|
||||
}
|
||||
},
|
||||
warn: {
|
||||
|
|
@ -171,6 +232,13 @@ export default {
|
|||
color: '{yellow.500}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{yellow.500}',
|
||||
borderColor: '{yellow.500}'
|
||||
},
|
||||
plain: {
|
||||
color: '{yellow.500}'
|
||||
}
|
||||
},
|
||||
error: {
|
||||
|
|
@ -184,6 +252,13 @@ export default {
|
|||
color: '{red.500}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{red.500}',
|
||||
borderColor: '{red.500}'
|
||||
},
|
||||
plain: {
|
||||
color: '{red.500}'
|
||||
}
|
||||
},
|
||||
secondary: {
|
||||
|
|
@ -197,6 +272,13 @@ export default {
|
|||
color: '{surface.300}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{surface.400}',
|
||||
borderColor: '{surface.400}'
|
||||
},
|
||||
plain: {
|
||||
color: '{surface.400}'
|
||||
}
|
||||
},
|
||||
contrast: {
|
||||
|
|
@ -210,6 +292,13 @@ export default {
|
|||
color: '{surface.950}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{surface.0}',
|
||||
borderColor: '{surface.0}'
|
||||
},
|
||||
plain: {
|
||||
color: '{surface.0}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,6 +52,11 @@ export default {
|
|||
fontSize: '1.125rem'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
root: {
|
||||
borderWidth: '1px'
|
||||
}
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
info: {
|
||||
|
|
@ -65,6 +70,13 @@ export default {
|
|||
color: '{focus.ring.color}',
|
||||
shadow: '0 0 0 0.2rem {blue.200}'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{blue.600}',
|
||||
borderColor: '{blue.600}'
|
||||
},
|
||||
plain: {
|
||||
color: '{blue.600}'
|
||||
}
|
||||
},
|
||||
success: {
|
||||
|
|
@ -78,6 +90,13 @@ export default {
|
|||
color: '{focus.ring.color}',
|
||||
shadow: '0 0 0 0.2rem {green.200}'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{green.600}',
|
||||
borderColor: '{green.600}'
|
||||
},
|
||||
plain: {
|
||||
color: '{green.600}'
|
||||
}
|
||||
},
|
||||
warn: {
|
||||
|
|
@ -91,6 +110,13 @@ export default {
|
|||
color: '{focus.ring.color}',
|
||||
shadow: '0 0 0 0.2rem {yellow.200}'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{yellow.600}',
|
||||
borderColor: '{yellow.600}'
|
||||
},
|
||||
plain: {
|
||||
color: '{yellow.600}'
|
||||
}
|
||||
},
|
||||
error: {
|
||||
|
|
@ -104,6 +130,13 @@ export default {
|
|||
color: '{focus.ring.color}',
|
||||
shadow: '0 0 0 0.2rem {red.200}'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{red.600}',
|
||||
borderColor: '{red.600}'
|
||||
},
|
||||
plain: {
|
||||
color: '{red.600}'
|
||||
}
|
||||
},
|
||||
secondary: {
|
||||
|
|
@ -117,6 +150,13 @@ export default {
|
|||
color: '{focus.ring.color}',
|
||||
shadow: '0 0 0 0.2rem {surface.200}'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{surface.500}',
|
||||
borderColor: '{surface.500}'
|
||||
},
|
||||
plain: {
|
||||
color: '{surface.500}'
|
||||
}
|
||||
},
|
||||
contrast: {
|
||||
|
|
@ -130,6 +170,13 @@ export default {
|
|||
color: '{focus.ring.color}',
|
||||
shadow: '0 0 0 0.2rem {surface.400}'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{surface.900}',
|
||||
borderColor: '{surface.900}'
|
||||
},
|
||||
plain: {
|
||||
color: '{surface.900}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -145,6 +192,13 @@ export default {
|
|||
color: '{focus.ring.color}',
|
||||
shadow: '0 0 0 0.2rem color-mix(in srgb, {blue.500}, transparent 80%)'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{blue.500}',
|
||||
borderColor: '{blue.500}'
|
||||
},
|
||||
plain: {
|
||||
color: '{blue.500}'
|
||||
}
|
||||
},
|
||||
success: {
|
||||
|
|
@ -158,6 +212,13 @@ export default {
|
|||
color: '{focus.ring.color}',
|
||||
shadow: '0 0 0 0.2rem color-mix(in srgb, {green.500}, transparent 80%)'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{green.500}',
|
||||
borderColor: '{green.500}'
|
||||
},
|
||||
plain: {
|
||||
color: '{green.500}'
|
||||
}
|
||||
},
|
||||
warn: {
|
||||
|
|
@ -171,6 +232,13 @@ export default {
|
|||
color: '{focus.ring.color}',
|
||||
shadow: '0 0 0 0.2rem color-mix(in srgb, {yellow.500}, transparent 80%)'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{yellow.500}',
|
||||
borderColor: '{yellow.500}'
|
||||
},
|
||||
plain: {
|
||||
color: '{yellow.500}'
|
||||
}
|
||||
},
|
||||
error: {
|
||||
|
|
@ -184,6 +252,13 @@ export default {
|
|||
color: '{focus.ring.color}',
|
||||
shadow: '0 0 0 0.2rem color-mix(in srgb, {red.500}, transparent 80%)'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{red.500}',
|
||||
borderColor: '{red.500}'
|
||||
},
|
||||
plain: {
|
||||
color: '{red.500}'
|
||||
}
|
||||
},
|
||||
secondary: {
|
||||
|
|
@ -197,6 +272,13 @@ export default {
|
|||
color: '{focus.ring.color}',
|
||||
shadow: '0 0 0 0.2rem color-mix(in srgb, {surface.300}, transparent 80%)'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{surface.400}',
|
||||
borderColor: '{surface.400}'
|
||||
},
|
||||
plain: {
|
||||
color: '{surface.400}'
|
||||
}
|
||||
},
|
||||
contrast: {
|
||||
|
|
@ -210,6 +292,13 @@ export default {
|
|||
color: '{focus.ring.color}',
|
||||
shadow: '0 0 0 0.2rem color-mix(in srgb, {surface.950}, transparent 80%)'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{surface.0}',
|
||||
borderColor: '{surface.0}'
|
||||
},
|
||||
plain: {
|
||||
color: '{surface.0}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,6 +52,11 @@ export default {
|
|||
fontSize: '1.125rem'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
root: {
|
||||
borderWidth: '1px'
|
||||
}
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
info: {
|
||||
|
|
@ -65,6 +70,13 @@ export default {
|
|||
color: '{blue.600}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{blue.600}',
|
||||
borderColor: '{blue.600}'
|
||||
},
|
||||
plain: {
|
||||
color: '{blue.600}'
|
||||
}
|
||||
},
|
||||
success: {
|
||||
|
|
@ -78,6 +90,13 @@ export default {
|
|||
color: '{green.600}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{green.600}',
|
||||
borderColor: '{green.600}'
|
||||
},
|
||||
plain: {
|
||||
color: '{green.600}'
|
||||
}
|
||||
},
|
||||
warn: {
|
||||
|
|
@ -91,6 +110,13 @@ export default {
|
|||
color: '{yellow.600}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{yellow.900}',
|
||||
borderColor: '{yellow.900}'
|
||||
},
|
||||
plain: {
|
||||
color: '{yellow.900}'
|
||||
}
|
||||
},
|
||||
error: {
|
||||
|
|
@ -104,6 +130,13 @@ export default {
|
|||
color: '{red.600}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{red.600}',
|
||||
borderColor: '{red.600}'
|
||||
},
|
||||
plain: {
|
||||
color: '{red.600}'
|
||||
}
|
||||
},
|
||||
secondary: {
|
||||
|
|
@ -117,6 +150,13 @@ export default {
|
|||
color: '{surface.600}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{surface.600}',
|
||||
borderColor: '{surface.600}'
|
||||
},
|
||||
plain: {
|
||||
color: '{surface.600}'
|
||||
}
|
||||
},
|
||||
contrast: {
|
||||
|
|
@ -130,6 +170,13 @@ export default {
|
|||
color: '{surface.50}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{surface.950}',
|
||||
borderColor: '{surface.950}'
|
||||
},
|
||||
plain: {
|
||||
color: '{surface.950}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -145,6 +192,13 @@ export default {
|
|||
color: '{blue.500}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{blue.500}',
|
||||
borderColor: '{blue.500}'
|
||||
},
|
||||
plain: {
|
||||
color: '{blue.500}'
|
||||
}
|
||||
},
|
||||
success: {
|
||||
|
|
@ -158,6 +212,13 @@ export default {
|
|||
color: '{green.500}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{green.500}',
|
||||
borderColor: '{green.500}'
|
||||
},
|
||||
plain: {
|
||||
color: '{green.500}'
|
||||
}
|
||||
},
|
||||
warn: {
|
||||
|
|
@ -171,6 +232,13 @@ export default {
|
|||
color: '{yellow.500}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{yellow.500}',
|
||||
borderColor: '{yellow.500}'
|
||||
},
|
||||
plain: {
|
||||
color: '{yellow.500}'
|
||||
}
|
||||
},
|
||||
error: {
|
||||
|
|
@ -184,6 +252,13 @@ export default {
|
|||
color: '{red.500}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{red.500}',
|
||||
borderColor: '{red.500}'
|
||||
},
|
||||
plain: {
|
||||
color: '{red.500}'
|
||||
}
|
||||
},
|
||||
secondary: {
|
||||
|
|
@ -197,6 +272,13 @@ export default {
|
|||
color: '{surface.300}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{surface.400}',
|
||||
borderColor: '{surface.400}'
|
||||
},
|
||||
plain: {
|
||||
color: '{surface.400}'
|
||||
}
|
||||
},
|
||||
contrast: {
|
||||
|
|
@ -210,6 +292,13 @@ export default {
|
|||
color: '{surface.950}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{surface.0}',
|
||||
borderColor: '{surface.0}'
|
||||
},
|
||||
plain: {
|
||||
color: '{surface.0}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,6 +52,11 @@ export default {
|
|||
size: '1.125rem'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
root: {
|
||||
borderWidth: '1px'
|
||||
}
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
info: {
|
||||
|
|
@ -65,6 +70,13 @@ export default {
|
|||
color: '{blue.50}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{blue.800}',
|
||||
borderColor: '{blue.800}'
|
||||
},
|
||||
plain: {
|
||||
color: '{blue.800}'
|
||||
}
|
||||
},
|
||||
success: {
|
||||
|
|
@ -78,6 +90,13 @@ export default {
|
|||
color: '{green.50}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{green.800}',
|
||||
borderColor: '{green.800}'
|
||||
},
|
||||
plain: {
|
||||
color: '{green.800}'
|
||||
}
|
||||
},
|
||||
warn: {
|
||||
|
|
@ -91,6 +110,13 @@ export default {
|
|||
color: '{yellow.50}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{yellow.600}',
|
||||
borderColor: '{yellow.600}'
|
||||
},
|
||||
plain: {
|
||||
color: '{yellow.600}'
|
||||
}
|
||||
},
|
||||
error: {
|
||||
|
|
@ -104,6 +130,13 @@ export default {
|
|||
color: '{red.50}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{red.800}',
|
||||
borderColor: '{red.800}'
|
||||
},
|
||||
plain: {
|
||||
color: '{red.800}'
|
||||
}
|
||||
},
|
||||
secondary: {
|
||||
|
|
@ -117,6 +150,13 @@ export default {
|
|||
color: '{surface.700}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{surface.600}',
|
||||
borderColor: '{surface.600}'
|
||||
},
|
||||
plain: {
|
||||
color: '{surface.600}'
|
||||
}
|
||||
},
|
||||
contrast: {
|
||||
|
|
@ -130,6 +170,13 @@ export default {
|
|||
color: '{surface.50}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{surface.900}',
|
||||
borderColor: '{surface.900}'
|
||||
},
|
||||
plain: {
|
||||
color: '{surface.900}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -145,6 +192,13 @@ export default {
|
|||
color: '{blue.950}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{blue.200}',
|
||||
borderColor: '{blue.200}'
|
||||
},
|
||||
plain: {
|
||||
color: '{blue.200}'
|
||||
}
|
||||
},
|
||||
success: {
|
||||
|
|
@ -158,6 +212,13 @@ export default {
|
|||
color: '{green.950}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{green.200}',
|
||||
borderColor: '{green.200}'
|
||||
},
|
||||
plain: {
|
||||
color: '{green.200}'
|
||||
}
|
||||
},
|
||||
warn: {
|
||||
|
|
@ -171,6 +232,13 @@ export default {
|
|||
color: '{yellow.950}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{yellow.200}',
|
||||
borderColor: '{yellow.200}'
|
||||
},
|
||||
plain: {
|
||||
color: '{yellow.200}'
|
||||
}
|
||||
},
|
||||
error: {
|
||||
|
|
@ -184,6 +252,13 @@ export default {
|
|||
color: '{red.950}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{red.200}',
|
||||
borderColor: '{red.200}'
|
||||
},
|
||||
plain: {
|
||||
color: '{red.200}'
|
||||
}
|
||||
},
|
||||
secondary: {
|
||||
|
|
@ -197,6 +272,13 @@ export default {
|
|||
color: '{surface.200}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{surface.400}',
|
||||
borderColor: '{surface.400}'
|
||||
},
|
||||
plain: {
|
||||
color: '{surface.400}'
|
||||
}
|
||||
},
|
||||
contrast: {
|
||||
|
|
@ -210,6 +292,13 @@ export default {
|
|||
color: '{surface.950}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: '{surface.0}',
|
||||
borderColor: '{surface.0}'
|
||||
},
|
||||
plain: {
|
||||
color: '{surface.0}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue