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 { .p-inline-message-info {
background: var(--p-inlinemessage-info-background); background: ${dt('inlinemessage.info.background')};
border: 1px solid var(--p-inlinemessage-info-border-color); border: 1px solid ${dt('inlinemessage.info.border.color')};
color: var(--p-inlinemessage-info-text-color); color: ${dt('inlinemessage.info.color')};
box-shadow: var(--p-inlinemessage-info-box-shadow); box-shadow: ${dt('inlinemessage.info.box.shadow')};
} }
.p-inline-message-info .p-inline-message-icon { .p-inline-message-info .p-inline-message-icon {
color: var(--p-inlinemessage-info-text-color); color: ${dt('inlinemessage.info.color')};
} }
.p-inline-message-success { .p-inline-message-success {
background: var(--p-inlinemessage-success-background); background: ${dt('inlinemessage.success.background')};
border: 1px solid var(--p-inlinemessage-success-border-color); border: 1px solid ${dt('inlinemessage.success.border.color')};
color: var(--p-inlinemessage-success-text-color); color: ${dt('inlinemessage.success.color')};
box-shadow: var(--p-inlinemessage-success-box-shadow); box-shadow: ${dt('inlinemessage.success.box.shadow')};
} }
.p-inline-message-success .p-inline-message-icon { .p-inline-message-success .p-inline-message-icon {
color: var(--p-inlinemessage-success-text-color); color: ${dt('inlinemessage.success.color')};
} }
.p-inline-message-warn { .p-inline-message-warn {
background: var(--p-inlinemessage-warn-background); background: ${dt('inlinemessage.warn.background')};
border: 1px solid var(--p-inlinemessage-warn-border-color); border: 1px solid ${dt('inlinemessage.warn.border.color')};
color: var(--p-inlinemessage-warn-text-color); color: ${dt('inlinemessage.warn.color')};
box-shadow: var(--p-inlinemessage-warn-box-shadow); box-shadow: ${dt('inlinemessage.warn.box.shadow')};
} }
.p-inline-message-warn .p-inline-message-icon { .p-inline-message-warn .p-inline-message-icon {
color: var(--p-inlinemessage-warn-text-color); color: ${dt('inlinemessage.warn.color')};
} }
.p-inline-message-error { .p-inline-message-error {
background: var(--p-inlinemessage-error-background); background: ${dt('inlinemessage.error.background')};
border: 1px solid var(--p-inlinemessage-error-border-color); border: 1px solid ${dt('inlinemessage.error.border.color')};
color: var(--p-inlinemessage-error-text-color); color: ${dt('inlinemessage.error.color')};
box-shadow: var(--p-inlinemessage-error-box-shadow); box-shadow: ${dt('inlinemessage.error.box.shadow')};
} }
.p-inline-message-error .p-inline-message-icon { .p-inline-message-error .p-inline-message-icon {
color: var(--p-inlinemessage-error-text-color); color: ${dt('inlinemessage.error.color')};
} }
.p-inline-message-secondary { .p-inline-message-secondary {
background: var(--p-inlinemessage-secondary-background); background: ${dt('inlinemessage.secondary.background')};
border: 1px solid var(--p-inlinemessage-secondary-border-color); border: 1px solid ${dt('inlinemessage.secondary.border.color')};
color: var(--p-inlinemessage-secondary-text-color); color: ${dt('inlinemessage.secondary.color')};
box-shadow: var(--p-inlinemessage-secondary-box-shadow); box-shadow: ${dt('inlinemessage.secondary.box.shadow')};
} }
.p-inline-message-secondary .p-inline-message-icon { .p-inline-message-secondary .p-inline-message-icon {
color: var(--p-inlinemessage-secondary-text-color); color: ${dt('inlinemessage.secondary.color')};
} }
.p-inline-message-contrast { .p-inline-message-contrast {
background: var(--p-inlinemessage-contrast-background); background: ${dt('inlinemessage.contrast.background')};
border: 1px solid var(--p-inlinemessage-contrast-border-color); border: 1px solid ${dt('inlinemessage.contrast.border.color')};
color: var(--p-inlinemessage-contrast-text-color); color: ${dt('inlinemessage.contrast.color')};
box-shadow: var(--p-inlinemessage-contrast-box-shadow); box-shadow: ${dt('inlinemessage.contrast.box.shadow')};
} }
.p-inline-message-contrast .p-inline-message-icon { .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 { .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 { .p-message-info {
background: var(--p-message-info-background); background: ${dt('message.info.background')};
border: 1px solid var(--p-message-info-border-color); border: 1px solid ${dt('message.info.border.color')};
color: var(--p-message-info-text-color); color: ${dt('message.info.color')};
box-shadow: var(--p-message-info-box-shadow); box-shadow: ${dt('message.info.box.shadow')};
} }
.p-message-info .p-message-close:focus-visible { .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 { .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 { .p-message-success {
background: var(--p-message-success-background); background: ${dt('message.success.background')};
border: 1px solid var(--p-message-success-border-color); border: 1px solid ${dt('message.success.border.color')};
color: var(--p-message-success-text-color); color: ${dt('message.success.color')};
box-shadow: var(--p-message-success-box-shadow); box-shadow: ${dt('message.success.box.shadow')};
} }
.p-message-success .p-message-close:focus-visible { .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 { .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 { .p-message-warn {
background: var(--p-message-warn-background); background: ${dt('message.warn.background')};
border: 1px solid var(--p-message-warn-border-color); border: 1px solid ${dt('message.warn.border.color')};
color: var(--p-message-warn-text-color); color: ${dt('message.warn.color')};
box-shadow: var(--p-message-warn-box-shadow); box-shadow: ${dt('message.warn.box.shadow')};
} }
.p-message-warn .p-message-close:focus-visible { .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 { .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 { .p-message-error {
background: var(--p-message-error-background); background: ${dt('message.error.background')};
border: 1px solid var(--p-message-error-border-color); border: 1px solid ${dt('message.error.border.color')};
color: var(--p-message-error-text-color); color: ${dt('message.error.color')};
box-shadow: var(--p-message-error-box-shadow); box-shadow: ${dt('message.error.box.shadow')};
} }
.p-message-error .p-message-close:focus-visible { .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 { .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 { .p-message-secondary {
background: var(--p-message-secondary-background); background: ${dt('message.secondary.background')};
border: 1px solid var(--p-message-secondary-border-color); border: 1px solid ${dt('message.secondary.border.color')};
color: var(--p-message-secondary-text-color); color: ${dt('message.secondary.color')};
box-shadow: var(--p-message-secondary-box-shadow); box-shadow: ${dt('message.secondary.box.shadow')};
} }
.p-message-secondary .p-message-close:focus-visible { .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 { .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 { .p-message-contrast {
background: var(--p-message-contrast-background); background: ${dt('message.contrast.background')};
border: 1px solid var(--p-message-contrast-border-color); border: 1px solid ${dt('message.contrast.border.color')};
color: var(--p-message-contrast-text-color); color: ${dt('message.contrast.color')};
box-shadow: var(--p-message-contrast-box-shadow); box-shadow: ${dt('message.contrast.box.shadow')};
} }
.p-message-contrast .p-message-close:focus-visible { .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 { .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 { .p-message-text {

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

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

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

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