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

Tokens for inline message

pull/5756/head
Cagatay Civici 2024-05-09 18:35:57 +03:00
parent a8c70f981d
commit d2101b6829
6 changed files with 73 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/inlinemessage/InlineMessage.vue
View File

@ -3,9 +3,9 @@
<slot name="icon"> <slot name="icon">
<component :is="icon ? 'span' : iconComponent" :class="cx('icon')" v-bind="ptm('icon')"></component> <component :is="icon ? 'span' : iconComponent" :class="cx('icon')" v-bind="ptm('icon')"></component>
</slot> </slot>
<span :class="cx('text')" v-bind="ptm('text')"> <div v-if="$slots.default" :class="cx('text')" v-bind="ptm('text')">
<slot>&nbsp;</slot> <slot></slot>
</span> </div>
</div> </div>
</template> </template>

21
components/lib/inlinemessage/style/InlineMessageStyle.js
View File

@ -5,18 +5,20 @@ const theme = ({ dt }) => `
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0.5rem 0.75rem; padding: ${dt('inlinemessage.padding')};
margin: 0; border-radius: ${dt('inlinemessage.border.radius')};
border-radius: ${dt('border.radius.md')}; gap: ${dt('inlinemessage.gap')};
} }
.p-inline-message-text { .p-inline-message-text {
font-weight: 500; font-weight: ${dt('inlinemessage.text.font.weight')};
} }
.p-inline-message-icon { .p-inline-message-icon {
flex-shrink: 0; flex-shrink: 0;
margin-right: 0.5rem; font-size: ${dt('inlinemessage.icon.size')};
width: ${dt('inlinemessage.icon.size')};
height: ${dt('inlinemessage.icon.size')};
} }
.p-inline-message-icon-only .p-inline-message-text { .p-inline-message-icon-only .p-inline-message-text {
@ -45,6 +47,7 @@ const theme = ({ dt }) => `
color: ${dt('inlinemessage.success.color')}; color: ${dt('inlinemessage.success.color')};
box-shadow: ${dt('inlinemessage.success.shadow')}; box-shadow: ${dt('inlinemessage.success.shadow')};
} }
.p-inline-message-success .p-inline-message-icon { .p-inline-message-success .p-inline-message-icon {
color: ${dt('inlinemessage.success.color')}; color: ${dt('inlinemessage.success.color')};
} }
@ -55,6 +58,7 @@ const theme = ({ dt }) => `
color: ${dt('inlinemessage.warn.color')}; color: ${dt('inlinemessage.warn.color')};
box-shadow: ${dt('inlinemessage.warn.shadow')}; box-shadow: ${dt('inlinemessage.warn.shadow')};
} }
.p-inline-message-warn .p-inline-message-icon { .p-inline-message-warn .p-inline-message-icon {
color: ${dt('inlinemessage.warn.color')}; color: ${dt('inlinemessage.warn.color')};
} }
@ -65,6 +69,7 @@ const theme = ({ dt }) => `
color: ${dt('inlinemessage.error.color')}; color: ${dt('inlinemessage.error.color')};
box-shadow: ${dt('inlinemessage.error.shadow')}; box-shadow: ${dt('inlinemessage.error.shadow')};
} }
.p-inline-message-error .p-inline-message-icon { .p-inline-message-error .p-inline-message-icon {
color: ${dt('inlinemessage.error.color')}; color: ${dt('inlinemessage.error.color')};
} }
@ -75,6 +80,7 @@ const theme = ({ dt }) => `
color: ${dt('inlinemessage.secondary.color')}; color: ${dt('inlinemessage.secondary.color')};
box-shadow: ${dt('inlinemessage.secondary.shadow')}; box-shadow: ${dt('inlinemessage.secondary.shadow')};
} }
.p-inline-message-secondary .p-inline-message-icon { .p-inline-message-secondary .p-inline-message-icon {
color: ${dt('inlinemessage.secondary.color')}; color: ${dt('inlinemessage.secondary.color')};
} }
@ -85,13 +91,10 @@ const theme = ({ dt }) => `
color: ${dt('inlinemessage.contrast.color')}; color: ${dt('inlinemessage.contrast.color')};
box-shadow: ${dt('inlinemessage.contrast.shadow')}; box-shadow: ${dt('inlinemessage.contrast.shadow')};
} }
.p-inline-message-contrast .p-inline-message-icon { .p-inline-message-contrast .p-inline-message-icon {
color: ${dt('inlinemessage.contrast.color')}; color: ${dt('inlinemessage.contrast.color')};
} }
.p-inline-message-icon-only .p-inline-message-icon {
margin-right: 0;
}
`; `;
const classes = { const classes = {

11
components/lib/themes/aura/inlinemessage/index.js
View File

@ -1,4 +1,15 @@
export default { export default {
root: {
padding: '{form.field.padding.y} {form.field.padding.x}',
borderRadius: '{content.border.radius}',
gap: '0.5rem'
},
text: {
fontWeight: '500'
},
icon: {
size: '1rem'
},
colorScheme: { colorScheme: {
light: { light: {
info: { info: {

35
components/lib/themes/lara/inlinemessage/index.js
View File

@ -1,41 +1,52 @@
export default { export default {
root: {
padding: '{form.field.padding.y} {form.field.padding.x}',
borderRadius: '{content.border.radius}',
gap: '0.5rem'
},
text: {
fontWeight: '500'
},
icon: {
size: '1.125rem'
},
colorScheme: { colorScheme: {
light: { light: {
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}',
color: '{blue.600}', color: '{blue.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)' shadow: 'none'
}, },
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}',
color: '{green.600}', color: '{green.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)' shadow: 'none'
}, },
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}',
color: '{yellow.600}', color: '{yellow.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)' shadow: 'none'
}, },
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}',
color: '{red.600}', color: '{red.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)' shadow: 'none'
}, },
secondary: { secondary: {
background: '{surface.100}', background: '{surface.100}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
color: '{surface.600}', color: '{surface.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)' shadow: 'none'
}, },
contrast: { contrast: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.950}', borderColor: '{surface.950}',
color: '{surface.50}', color: '{surface.50}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)' shadow: 'none'
} }
}, },
dark: { dark: {
@ -43,37 +54,37 @@ export default {
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%)',
color: '{blue.500}', color: '{blue.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)' shadow: 'none'
}, },
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%)',
color: '{green.500}', color: '{green.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)' shadow: 'none'
}, },
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%)',
color: '{yellow.500}', color: '{yellow.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)' shadow: 'none'
}, },
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%)',
color: '{red.500}', color: '{red.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)' shadow: 'none'
}, },
secondary: { secondary: {
background: '{surface.800}', background: '{surface.800}',
borderColor: '{surface.700}', borderColor: '{surface.700}',
color: '{surface.300}', color: '{surface.300}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)' shadow: 'none'
}, },
contrast: { contrast: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.100}', borderColor: '{surface.100}',
color: '{surface.950}', color: '{surface.950}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)' shadow: 'none'
} }
} }
} }

24
components/lib/themes/lara/message/index.js
View File

@ -33,7 +33,7 @@ export default {
background: 'color-mix(in srgb, {blue.50}, transparent 5%)', background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
borderColor: '{blue.200}', borderColor: '{blue.200}',
color: '{blue.600}', color: '{blue.600}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: '{blue.100}', hoverBackground: '{blue.100}',
focusRing: { focusRing: {
@ -46,7 +46,7 @@ export default {
background: 'color-mix(in srgb, {green.50}, transparent 5%)', background: 'color-mix(in srgb, {green.50}, transparent 5%)',
borderColor: '{green.200}', borderColor: '{green.200}',
color: '{green.600}', color: '{green.600}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: '{green.100}', hoverBackground: '{green.100}',
focusRing: { focusRing: {
@ -59,7 +59,7 @@ export default {
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)', background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
borderColor: '{yellow.200}', borderColor: '{yellow.200}',
color: '{yellow.600}', color: '{yellow.600}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: '{yellow.100}', hoverBackground: '{yellow.100}',
focusRing: { focusRing: {
@ -72,7 +72,7 @@ export default {
background: 'color-mix(in srgb, {red.50}, transparent 5%)', background: 'color-mix(in srgb, {red.50}, transparent 5%)',
borderColor: '{red.200}', borderColor: '{red.200}',
color: '{red.600}', color: '{red.600}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: '{red.100}', hoverBackground: '{red.100}',
focusRing: { focusRing: {
@ -85,7 +85,7 @@ export default {
background: '{surface.100}', background: '{surface.100}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
color: '{surface.600}', color: '{surface.600}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: '{surface.200}', hoverBackground: '{surface.200}',
focusRing: { focusRing: {
@ -98,7 +98,7 @@ export default {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.950}', borderColor: '{surface.950}',
color: '{surface.50}', color: '{surface.50}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: '{surface.800}', hoverBackground: '{surface.800}',
focusRing: { focusRing: {
@ -113,7 +113,7 @@ export default {
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%)',
color: '{blue.500}', color: '{blue.500}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)', hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: { focusRing: {
@ -126,7 +126,7 @@ export default {
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%)',
color: '{green.500}', color: '{green.500}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)', hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: { focusRing: {
@ -139,7 +139,7 @@ export default {
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%)',
color: '{yellow.500}', color: '{yellow.500}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)', hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: { focusRing: {
@ -152,7 +152,7 @@ export default {
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%)',
color: '{red.500}', color: '{red.500}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)', hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: { focusRing: {
@ -165,7 +165,7 @@ export default {
background: '{surface.800}', background: '{surface.800}',
borderColor: '{surface.700}', borderColor: '{surface.700}',
color: '{surface.300}', color: '{surface.300}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: '{surface.700}', hoverBackground: '{surface.700}',
focusRing: { focusRing: {
@ -178,7 +178,7 @@ export default {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.100}', borderColor: '{surface.100}',
color: '{surface.950}', color: '{surface.950}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: '{surface.100}', hoverBackground: '{surface.100}',
focusRing: { focusRing: {

24
components/lib/themes/lara/toast/index.js
View File

@ -42,7 +42,7 @@ export default {
borderColor: '{blue.200}', borderColor: '{blue.200}',
color: '{blue.600}', color: '{blue.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', shadow: '{overlay.popover.shadow}',
closeButton: { closeButton: {
hoverBackground: '{blue.100}', hoverBackground: '{blue.100}',
focusRing: { focusRing: {
@ -56,7 +56,7 @@ export default {
borderColor: '{green.200}', borderColor: '{green.200}',
color: '{green.600}', color: '{green.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', shadow: '{overlay.popover.shadow}',
closeButton: { closeButton: {
hoverBackground: '{green.100}', hoverBackground: '{green.100}',
focusRing: { focusRing: {
@ -70,7 +70,7 @@ export default {
borderColor: '{yellow.200}', borderColor: '{yellow.200}',
color: '{yellow.600}', color: '{yellow.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', shadow: '{overlay.popover.shadow}',
closeButton: { closeButton: {
hoverBackground: '{yellow.100}', hoverBackground: '{yellow.100}',
focusRing: { focusRing: {
@ -84,7 +84,7 @@ export default {
borderColor: '{red.200}', borderColor: '{red.200}',
color: '{red.600}', color: '{red.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', shadow: '{overlay.popover.shadow}',
closeButton: { closeButton: {
hoverBackground: '{red.100}', hoverBackground: '{red.100}',
focusRing: { focusRing: {
@ -98,7 +98,7 @@ export default {
borderColor: '{surface.200}', borderColor: '{surface.200}',
color: '{surface.600}', color: '{surface.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', shadow: '{overlay.popover.shadow}',
closeButton: { closeButton: {
hoverBackground: '{surface.200}', hoverBackground: '{surface.200}',
focusRing: { focusRing: {
@ -112,7 +112,7 @@ export default {
borderColor: '{surface.950}', borderColor: '{surface.950}',
color: '{surface.50}', color: '{surface.50}',
detailColor: '{surface.0}', detailColor: '{surface.0}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', shadow: '{overlay.popover.shadow}',
closeButton: { closeButton: {
hoverBackground: '{surface.800}', hoverBackground: '{surface.800}',
focusRing: { focusRing: {
@ -129,7 +129,7 @@ export default {
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)', borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
color: '{blue.500}', color: '{blue.500}',
detailColor: '{surface.0}', detailColor: '{surface.0}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', shadow: '{overlay.popover.shadow}',
closeButton: { closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)', hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: { focusRing: {
@ -143,7 +143,7 @@ export default {
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)', borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
color: '{green.500}', color: '{green.500}',
detailColor: '{surface.0}', detailColor: '{surface.0}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', shadow: '{overlay.popover.shadow}',
closeButton: { closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)', hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: { focusRing: {
@ -157,7 +157,7 @@ export default {
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)', borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
color: '{yellow.500}', color: '{yellow.500}',
detailColor: '{surface.0}', detailColor: '{surface.0}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', shadow: '{overlay.popover.shadow}',
closeButton: { closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)', hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: { focusRing: {
@ -171,7 +171,7 @@ export default {
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)', borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
color: '{red.500}', color: '{red.500}',
detailColor: '{surface.0}', detailColor: '{surface.0}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', shadow: '{overlay.popover.shadow}',
closeButton: { closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)', hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: { focusRing: {
@ -185,7 +185,7 @@ export default {
borderColor: '{surface.700}', borderColor: '{surface.700}',
color: '{surface.300}', color: '{surface.300}',
detailColor: '{surface.0}', detailColor: '{surface.0}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', shadow: '{overlay.popover.shadow}',
closeButton: { closeButton: {
hoverBackground: '{surface.700}', hoverBackground: '{surface.700}',
focusRing: { focusRing: {
@ -199,7 +199,7 @@ export default {
borderColor: '{surface.100}', borderColor: '{surface.100}',
color: '{surface.950}', color: '{surface.950}',
detailColor: '{surface.950}', detailColor: '{surface.950}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', shadow: '{overlay.popover.shadow}',
closeButton: { closeButton: {
hoverBackground: '{surface.100}', hoverBackground: '{surface.100}',
focusRing: { focusRing: {