vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Migrated message components

pull/5507/head
Cagatay Civici 2024-03-12 13:20:51 +03:00
parent add991240a
commit 7616deb940
6 changed files with 182 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
components/lib/themes/primeone/base/inlinemessage/index.js
View File

@ -28,63 +28,64 @@ export default {
}
.p-inline-message-info {
background: var(--p-inlinemessage-info-background);
border: 1px solid var(--p-inlinemessage-info-border-color);
color: var(--p-inlinemessage-info-text-color);
box-shadow: var(--p-inlinemessage-info-box-shadow);
background: ${dt('inlinemessage.info.background')};
border: 1px solid ${dt('inlinemessage.info.border.color')};
color: ${dt('inlinemessage.info.color')};
box-shadow: ${dt('inlinemessage.info.box.shadow')};
}
.p-inline-message-info .p-inline-message-icon {
color: var(--p-inlinemessage-info-text-color);
color: ${dt('inlinemessage.info.color')};
}
.p-inline-message-success {
background: var(--p-inlinemessage-success-background);
border: 1px solid var(--p-inlinemessage-success-border-color);
color: var(--p-inlinemessage-success-text-color);
box-shadow: var(--p-inlinemessage-success-box-shadow);
background: ${dt('inlinemessage.success.background')};
border: 1px solid ${dt('inlinemessage.success.border.color')};
color: ${dt('inlinemessage.success.color')};
box-shadow: ${dt('inlinemessage.success.box.shadow')};
}
.p-inline-message-success .p-inline-message-icon {
color: var(--p-inlinemessage-success-text-color);
color: ${dt('inlinemessage.success.color')};
}
.p-inline-message-warn {
background: var(--p-inlinemessage-warn-background);
border: 1px solid var(--p-inlinemessage-warn-border-color);
color: var(--p-inlinemessage-warn-text-color);
box-shadow: var(--p-inlinemessage-warn-box-shadow);
background: ${dt('inlinemessage.warn.background')};
border: 1px solid ${dt('inlinemessage.warn.border.color')};
color: ${dt('inlinemessage.warn.color')};
box-shadow: ${dt('inlinemessage.warn.box.shadow')};
}
.p-inline-message-warn .p-inline-message-icon {
color: var(--p-inlinemessage-warn-text-color);
color: ${dt('inlinemessage.warn.color')};
}
.p-inline-message-error {
background: var(--p-inlinemessage-error-background);
border: 1px solid var(--p-inlinemessage-error-border-color);
color: var(--p-inlinemessage-error-text-color);
box-shadow: var(--p-inlinemessage-error-box-shadow);
background: ${dt('inlinemessage.error.background')};
border: 1px solid ${dt('inlinemessage.error.border.color')};
color: ${dt('inlinemessage.error.color')};
box-shadow: ${dt('inlinemessage.error.box.shadow')};
}
.p-inline-message-error .p-inline-message-icon {
color: var(--p-inlinemessage-error-text-color);
color: ${dt('inlinemessage.error.color')};
}
.p-inline-message-secondary {
background: var(--p-inlinemessage-secondary-background);
border: 1px solid var(--p-inlinemessage-secondary-border-color);
color: var(--p-inlinemessage-secondary-text-color);
box-shadow: var(--p-inlinemessage-secondary-box-shadow);
background: ${dt('inlinemessage.secondary.background')};
border: 1px solid ${dt('inlinemessage.secondary.border.color')};
color: ${dt('inlinemessage.secondary.color')};
box-shadow: ${dt('inlinemessage.secondary.box.shadow')};
}
.p-inline-message-secondary .p-inline-message-icon {
color: var(--p-inlinemessage-secondary-text-color);
color: ${dt('inlinemessage.secondary.color')};
}
.p-inline-message-contrast {
background: var(--p-inlinemessage-contrast-background);
border: 1px solid var(--p-inlinemessage-contrast-border-color);
color: var(--p-inlinemessage-contrast-text-color);
box-shadow: var(--p-inlinemessage-contrast-box-shadow);
background: ${dt('inlinemessage.contrast.background')};
border: 1px solid ${dt('inlinemessage.contrast.border.color')};
color: ${dt('inlinemessage.contrast.color')};
box-shadow: ${dt('inlinemessage.contrast.box.shadow')};
}
.p-inline-message-contrast .p-inline-message-icon {
color: var(--p-inlinemessage-contrast-text-color);
color: ${dt('inlinemessage.contrast.color')};
}
.p-inline-message-icon-only .p-inline-message-icon {

72
components/lib/themes/primeone/base/message/index.js
View File

@ -39,93 +39,93 @@ export default {
}
.p-message-info {
background: var(--p-message-info-background);
border: 1px solid var(--p-message-info-border-color);
color: var(--p-message-info-text-color);
box-shadow: var(--p-message-info-box-shadow);
background: ${dt('message.info.background')};
border: 1px solid ${dt('message.info.border.color')};
color: ${dt('message.info.color')};
box-shadow: ${dt('message.info.box.shadow')};
}
.p-message-info .p-message-close:focus-visible {
outline-color: var(--p-message-info-text-color);
outline-color: ${dt('message.info.color')};
}
.p-message-info .p-message-close:hover {
background: var(--p-message-info-close-background-hover);
background: ${dt('message.info.close.hover.background')};
}
.p-message-success {
background: var(--p-message-success-background);
border: 1px solid var(--p-message-success-border-color);
color: var(--p-message-success-text-color);
box-shadow: var(--p-message-success-box-shadow);
background: ${dt('message.success.background')};
border: 1px solid ${dt('message.success.border.color')};
color: ${dt('message.success.color')};
box-shadow: ${dt('message.success.box.shadow')};
}
.p-message-success .p-message-close:focus-visible {
outline-color: var(--p-message-success-text-color);
outline-color: ${dt('message.success.color')};
}
.p-message-success .p-message-close:hover {
background: var(--p-message-success-close-background-hover);
background: ${dt('message.success.close.hover.background')};
}
.p-message-warn {
background: var(--p-message-warn-background);
border: 1px solid var(--p-message-warn-border-color);
color: var(--p-message-warn-text-color);
box-shadow: var(--p-message-warn-box-shadow);
background: ${dt('message.warn.background')};
border: 1px solid ${dt('message.warn.border.color')};
color: ${dt('message.warn.color')};
box-shadow: ${dt('message.warn.box.shadow')};
}
.p-message-warn .p-message-close:focus-visible {
outline-color: var(--p-message-warn-text-color);
outline-color: ${dt('message.warn.color')};
}
.p-message-warn .p-message-close:hover {
background: var(--p-message-warn-close-background-hover);
background: ${dt('message.warn.close.hover.background')};
}
.p-message-error {
background: var(--p-message-error-background);
border: 1px solid var(--p-message-error-border-color);
color: var(--p-message-error-text-color);
box-shadow: var(--p-message-error-box-shadow);
background: ${dt('message.error.background')};
border: 1px solid ${dt('message.error.border.color')};
color: ${dt('message.error.color')};
box-shadow: ${dt('message.error.box.shadow')};
}
.p-message-error .p-message-close:focus-visible {
outline-color: var(--p-message-error-text-color);
outline-color: ${dt('message.error.color')};
}
.p-message-error .p-message-close:hover {
background: var(--p-message-error-close-background-hover);
background: ${dt('message.error.close.hover.background')};
}
.p-message-secondary {
background: var(--p-message-secondary-background);
border: 1px solid var(--p-message-secondary-border-color);
color: var(--p-message-secondary-text-color);
box-shadow: var(--p-message-secondary-box-shadow);
background: ${dt('message.secondary.background')};
border: 1px solid ${dt('message.secondary.border.color')};
color: ${dt('message.secondary.color')};
box-shadow: ${dt('message.secondary.box.shadow')};
}
.p-message-secondary .p-message-close:focus-visible {
outline-color: var(--p-message-secondary-text-color);
outline-color: ${dt('message.secondary.color')};
}
.p-message-secondary .p-message-close:hover {
background: var(--p-message-secondary-close-background-hover);
background: ${dt('message.secondary.close.hover.background')};
}
.p-message-contrast {
background: var(--p-message-contrast-background);
border: 1px solid var(--p-message-contrast-border-color);
color: var(--p-message-contrast-text-color);
box-shadow: var(--p-message-contrast-box-shadow);
background: ${dt('message.contrast.background')};
border: 1px solid ${dt('message.contrast.border.color')};
color: ${dt('message.contrast.color')};
box-shadow: ${dt('message.contrast.box.shadow')};
}
.p-message-contrast .p-message-close:focus-visible {
outline-color: var(--p-message-contrast-text-color);
outline-color: ${dt('message.contrast.color')};
}
.p-message-contrast .p-message-close:hover {
background: var(--p-message-contrast-close-background-hover);
background: ${dt('message.contrast.close.hover.background')};
}
.p-message-text {

86
components/lib/themes/primeone/base/toast/index.js
View File

@ -7,7 +7,7 @@ export default {
}
.p-toast-message {
backdrop-filter: blur(var(--p-toast-blur));
backdrop-filter: blur(${dt('toast.blur')});
margin: 0 0 1rem 0;
border-radius: ${dt('rounded.base')};
}
@ -63,117 +63,117 @@ export default {
}
.p-toast-message-info {
background: var(--p-toast-info-background);
border: 1px solid var(--p-toast-info-border-color);
color: var(--p-toast-info-text-color);
box-shadow: var(--p-toast-info-box-shadow);
background: ${dt('toast.info.background')};
border: 1px solid ${dt('toast.info.border.color')};
color: ${dt('toast.info.color')};
box-shadow: ${dt('toast.info.box.shadow')};
}
.p-toast-message-info .p-toast-detail {
color: var(--p-toast-info-detail-text-color);
color: ${dt('toast.info.detail.color')};
}
.p-toast-message-info .p-toast-icon-close:focus-visible {
outline-color: var(--p-toast-info-text-color);
color: ${dt('toast.info.color')};
}
.p-toast-message-info .p-toast-icon-close:hover {
background: var(--p-toast-info-close-background-hover);
background: ${dt('toast.info.close.hover.background')};
}
.p-toast-message-success {
background: var(--p-toast-success-background);
border: 1px solid var(--p-toast-success-border-color);
color: var(--p-toast-success-text-color);
box-shadow: var(--p-toast-success-box-shadow);
background: ${dt('toast.success.background')};
border: 1px solid ${dt('toast.success.border.color')};
color: ${dt('toast.success.color')};
box-shadow: ${dt('toast.success.box.shadow')};
}
.p-toast-message-success .p-toast-detail {
color: var(--p-toast-success-detail-text-color);
color: ${dt('toast.success.detail.color')};
}
.p-toast-message-success .p-toast-icon-close:focus-visible {
outline-color: var(--p-toast-success-text-color);
color: ${dt('toast.success.color')};
}
.p-toast-message-success .p-toast-icon-close:hover {
background: var(--p-toast-success-close-background-hover);
background: ${dt('toast.success.close.hover.background')};
}
.p-toast-message-warn {
background: var(--p-toast-warn-background);
border: 1px solid var(--p-toast-warn-border-color);
color: var(--p-toast-warn-text-color);
box-shadow: var(--p-toast-warn-box-shadow);
background: ${dt('toast.warn.background')};
border: 1px solid ${dt('toast.warn.border.color')};
color: ${dt('toast.warn.color')};
box-shadow: ${dt('toast.warn.box.shadow')};
}
.p-toast-message-warn .p-toast-detail {
color: var(--p-toast-warn-detail-text-color);
color: ${dt('toast.warn.detail.color')};
}
.p-toast-message-warn .p-toast-icon-close:focus-visible {
outline-color: var(--p-toast-warn-text-color);
color: ${dt('toast.warn.color')};
}
.p-toast-message-warn .p-toast-icon-close:hover {
background: var(--p-toast-warn-close-background-hover);
background: ${dt('toast.warn.close.hover.background')};
}
.p-toast-message-error {
background: var(--p-toast-error-background);
border: 1px solid var(--p-toast-error-border-color);
color: var(--p-toast-error-text-color);
box-shadow: var(--p-toast-error-box-shadow);
background: ${dt('toast.error.background')};
border: 1px solid ${dt('toast.error.border.color')};
color: ${dt('toast.error.color')};
box-shadow: ${dt('toast.error.box.shadow')};
}
.p-toast-message-error .p-toast-detail {
color: var(--p-toast-error-detail-text-color);
color: ${dt('toast.error.detail.color')};
}
.p-toast-message-error .p-toast-icon-close:focus-visible {
outline-color: var(--p-toast-error-text-color);
color: ${dt('toast.error.color')};
}
.p-toast-message-error .p-toast-icon-close:hover {
background: var(--p-toast-error-close-background-hover);
background: ${dt('toast.error.close.hover.background')};
}
.p-toast-message-secondary {
background: var(--p-toast-secondary-background);
border: 1px solid var(--p-toast-secondary-border-color);
color: var(--p-toast-secondary-text-color);
box-shadow: var(--p-toast-secondary-box-shadow);
background: ${dt('toast.secondary.background')};
border: 1px solid ${dt('toast.secondary.border.color')};
color: ${dt('toast.secondary.color')};
box-shadow: ${dt('toast.secondary.box.shadow')};
}
.p-toast-message-secondary .p-toast-detail {
color: var(--p-toast-secondary-detail-text-color);
color: ${dt('toast.secondary.detail.color')};
}
.p-toast-message-secondary .p-toast-icon-close:focus-visible {
outline-color: var(--p-toast-secondary-text-color);
color: ${dt('toast.secondary.color')};
}
.p-toast-message-secondary .p-toast-icon-close:hover {
background: var(--p-toast-secondary-close-background-hover);
background: ${dt('toast.secondary.close.hover.background')};
}
.p-toast-message-contrast {
background: var(--p-toast-contrast-background);
border: 1px solid var(--p-toast-contrast-border-color);
color: var(--p-toast-contrast-text-color);
box-shadow: var(--p-toast-contrast-box-shadow);
background: ${dt('toast.contrast.background')};
border: 1px solid ${dt('toast.contrast.border.color')};
color: ${dt('toast.contrast.color')};
box-shadow: ${dt('toast.contrast.box.shadow')};
}
.p-toast-message-contrast .p-toast-detail {
color: var(--p-toast-contrast-detail-text-color);
color: ${dt('toast.contrast.detail.color')};
}
.p-toast-message-contrast .p-toast-icon-close:focus-visible {
outline-color: var(--p-toast-contrast-text-color);
color: ${dt('toast.contrast.color')};
}
.p-toast-message-contrast .p-toast-icon-close:hover {
background: var(--p-toast-contrast-close-background-hover);
background: ${dt('toast.contrast.close.hover.background')};
}
.p-toast-top-center {

24
components/lib/themes/primeone/presets/aura/inlinemessage/index.js
View File

@ -4,37 +4,37 @@ export default {
info: {
background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
borderColor: '{blue.200}',
textColor: '{blue.600}',
color: '{blue.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)'
},
success: {
background: 'color-mix(in srgb, {green.50}, transparent 5%)',
borderColor: '{green.200}',
textColor: '{green.600}',
color: '{green.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)'
},
warn: {
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
borderColor: '{yellow.200}',
textColor: '{yellow.600}',
color: '{yellow.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)'
},
error: {
background: 'color-mix(in srgb, {red.50}, transparent 5%)',
borderColor: '{red.200}',
textColor: '{red.600}',
color: '{red.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)'
},
secondary: {
background: '{surface.100}',
borderColor: '{surface.200}',
textColor: '{surface.600}',
color: '{surface.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)'
},
contrast: {
background: '{surface.900}',
borderColor: '{surface.950}',
textColor: '{surface.50}',
color: '{surface.50}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)'
}
},
@ -42,37 +42,37 @@ export default {
info: {
background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
textColor: '{blue.500}',
color: '{blue.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)'
},
success: {
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
textColor: '{green.500}',
color: '{green.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)'
},
warn: {
background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
textColor: '{yellow.500}',
color: '{yellow.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)'
},
error: {
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
textColor: '{red.500}',
color: '{red.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)'
},
secondary: {
background: '{surface.800}',
borderColor: '{surface.700}',
textColor: '{surface.300}',
color: '{surface.300}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)'
},
contrast: {
background: '{surface.0}',
borderColor: '{surface.100}',
textColor: '{surface.950}',
color: '{surface.950}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)'
}
}

48
components/lib/themes/primeone/presets/aura/message/index.js
View File

@ -4,88 +4,88 @@ export default {
info: {
background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
borderColor: '{blue.200}',
textColor: '{blue.600}',
color: '{blue.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
closeBackgroundHover: '{blue.100}'
closeHoverBackground: '{blue.100}'
},
success: {
background: 'color-mix(in srgb, {green.50}, transparent 5%)',
borderColor: '{green.200}',
textColor: '{green.600}',
color: '{green.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
closeBackgroundHover: '{green.100}'
closeHoverBackground: '{green.100}'
},
warn: {
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
borderColor: '{yellow.200}',
textColor: '{yellow.600}',
color: '{yellow.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
closeBackgroundHover: '{yellow.100}'
closeHoverBackground: '{yellow.100}'
},
error: {
background: 'color-mix(in srgb, {red.50}, transparent 5%)',
borderColor: '{red.200}',
textColor: '{red.600}',
color: '{red.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
closeBackgroundHover: '{red.100}'
closeHoverBackground: '{red.100}'
},
secondary: {
background: '{surface.100}',
borderColor: '{surface.200}',
textColor: '{surface.600}',
color: '{surface.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
closeBackgroundHover: '{surface.200}'
closeHoverBackground: '{surface.200}'
},
contrast: {
background: '{surface.900}',
borderColor: '{surface.950}',
textColor: '{surface.50}',
color: '{surface.50}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
closeBackgroundHover: '{surface.800}'
closeHoverBackground: '{surface.800}'
}
},
dark: {
info: {
background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
textColor: '{blue.500}',
color: '{blue.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
closeBackgroundHover: 'rgba(255, 255, 255, 0.05)'
closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
},
success: {
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
textColor: '{green.500}',
color: '{green.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
closeBackgroundHover: 'rgba(255, 255, 255, 0.05)'
closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
},
warn: {
background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
textColor: '{yellow.500}',
color: '{yellow.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
closeBackgroundHover: 'rgba(255, 255, 255, 0.05)'
closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
},
error: {
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
textColor: '{red.500}',
color: '{red.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
closeBackgroundHover: 'rgba(255, 255, 255, 0.05)'
closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
},
secondary: {
background: '{surface.800}',
borderColor: '{surface.700}',
textColor: '{surface.300}',
color: '{surface.300}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
closeBackgroundHover: '{surface.700}'
closeHoverBackground: '{surface.700}'
},
contrast: {
background: '{surface.0}',
borderColor: '{surface.100}',
textColor: '{surface.950}',
color: '{surface.950}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
closeBackgroundHover: '{surface.100}'
closeHoverBackground: '{surface.100}'
}
}
}

72
components/lib/themes/primeone/presets/aura/toast/index.js
View File

@ -5,50 +5,50 @@ export default {
info: {
background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
borderColor: '{blue.200}',
textColor: '{blue.600}',
detailTextColor: '{surface.700}',
color: '{blue.600}',
detailColor: '{surface.700}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
closeBackgroundHover: '{blue.100}'
closeHoverBackground: '{blue.100}'
},
success: {
background: 'color-mix(in srgb, {green.50}, transparent 5%)',
borderColor: '{green.200}',
textColor: '{green.600}',
detailTextColor: '{surface.700}',
color: '{green.600}',
detailColor: '{surface.700}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
closeBackgroundHover: '{green.100}'
closeHoverBackground: '{green.100}'
},
warn: {
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
borderColor: '{yellow.200}',
textColor: '{yellow.600}',
detailTextColor: '{surface.700}',
color: '{yellow.600}',
detailColor: '{surface.700}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
closeBackgroundHover: '{yellow.100}'
closeHoverBackground: '{yellow.100}'
},
error: {
background: 'color-mix(in srgb, {red.50}, transparent 5%)',
borderColor: '{red.200}',
textColor: '{red.600}',
detailTextColor: '{surface.700}',
color: '{red.600}',
detailColor: '{surface.700}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
closeBackgroundHover: '{red.100}'
closeHoverBackground: '{red.100}'
},
secondary: {
background: '{surface.100}',
borderColor: '{surface.200}',
textColor: '{surface.600}',
detailTextColor: '{surface.700}',
color: '{surface.600}',
detailColor: '{surface.700}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
closeBackgroundHover: '{surface.200}'
closeHoverBackground: '{surface.200}'
},
contrast: {
background: '{surface.900}',
borderColor: '{surface.950}',
textColor: '{surface.50}',
detailTextColor: '{surface.0}',
color: '{surface.50}',
detailColor: '{surface.0}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
closeBackgroundHover: '{surface.800}'
closeHoverBackground: '{surface.800}'
}
},
dark: {
@ -56,50 +56,50 @@ export default {
info: {
background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
textColor: '{blue.500}',
detailTextColor: '{surface.0}',
color: '{blue.500}',
detailColor: '{surface.0}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
closeBackgroundHover: 'rgba(255, 255, 255, 0.05)'
closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
},
success: {
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
textColor: '{green.500}',
detailTextColor: '{surface.0}',
color: '{green.500}',
detailColor: '{surface.0}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
closeBackgroundHover: 'rgba(255, 255, 255, 0.05)'
closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
},
warn: {
background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
textColor: '{yellow.500}',
detailTextColor: '{surface.0}',
color: '{yellow.500}',
detailColor: '{surface.0}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
closeBackgroundHover: 'rgba(255, 255, 255, 0.05)'
closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
},
error: {
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
textColor: '{red.500}',
detailTextColor: '{surface.0}',
color: '{red.500}',
detailColor: '{surface.0}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
closeBackgroundHover: 'rgba(255, 255, 255, 0.05)'
closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
},
secondary: {
background: '{surface.800}',
borderColor: '{surface.700}',
textColor: '{surface.300}',
detailTextColor: '{surface.0}',
color: '{surface.300}',
detailColor: '{surface.0}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
closeBackgroundHover: '{surface.700}'
closeHoverBackground: '{surface.700}'
},
contrast: {
background: '{surface.0}',
borderColor: '{surface.100}',
textColor: '{surface.950}',
detailTextColor: '{surface.950}',
color: '{surface.950}',
detailColor: '{surface.950}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
closeBackgroundHover: '{surface.100}'
closeHoverBackground: '{surface.100}'
}
}
}