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

New tokens for Password component

pull/5701/head
Cagatay Civici 2024-05-08 14:42:10 +03:00
parent 77e5480d8b
commit 15269647f4
5 changed files with 47 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/lib/password/style/PasswordStyle.js
View File

@ -11,17 +11,16 @@ const theme = ({ dt }) => `
} }
.p-password-meter { .p-password-meter {
height: 10px; height: ${dt('password.meter.height')};
margin-bottom: 0.75rem;
background: ${dt('password.meter.border.color')}; background: ${dt('password.meter.border.color')};
border-radius: ${dt('border.radius.md')}; border-radius: ${dt('password.meter.border.radius')};
} }
.p-password-meter-label { .p-password-meter-label {
height: 100%; height: 100%;
width: 0; width: 0;
transition: width 1s ease-in-out; transition: width 1s ease-in-out;
border-radius: ${dt('border.radius.md')}; border-radius: ${dt('password.meter.border.radius')};
} }
.p-password-meter-weak { .p-password-meter-weak {
@ -46,26 +45,29 @@ const theme = ({ dt }) => `
} }
.p-password-overlay { .p-password-overlay {
padding: 0.75rem; padding: ${dt('password.overlay.padding')};
background: ${dt('password.overlay.background')}; background: ${dt('password.overlay.background')};
color: ${dt('password.overlay.color')}; color: ${dt('password.overlay.color')};
border: 1px solid ${dt('password.overlay.border.color')}; border: 1px solid ${dt('password.overlay.border.color')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); box-shadow: ${dt('password.overlay.shadow')};
border-radius: ${dt('border.radius.md')}; border-radius: ${dt('password.overlay.border.radius')};
display: flex;
flex-direction: column;
gap: ${dt('password.overlay.gap')}
} }
.p-password-toggle-mask-icon { .p-password-toggle-mask-icon {
right: 0.75rem; right: ${dt('form.field.padding.x')};
color: ${dt('password.icon.color')}; color: ${dt('password.icon.color')};
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -0.5rem; margin-top: calc(-1 * calc(${dt('icon.size')} / 2));
width: 1rem; width: ${dt('icon.size')};
height: 1rem; height: ${dt('icon.size')};
} }
.p-password:has(.p-password-toggle-mask-icon) .p-password-input { .p-password:has(.p-password-toggle-mask-icon) .p-password-input {
padding-right: 2.5rem; padding-right: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
} }
`; `;

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

@ -170,7 +170,13 @@ export default {
}, },
overlay: { overlay: {
select: { select: {
borderRadius: '{border.radius.md}' borderRadius: '{border.radius.md}',
shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
},
popover: {
borderRadius: '{border.radius.md}',
padding: '0.75rem',
shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
} }
}, },
colorScheme: { colorScheme: {
@ -343,8 +349,7 @@ export default {
select: { select: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.700}', borderColor: '{surface.700}',
color: '{text.color}', color: '{text.color}'
shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
}, },
popover: { popover: {
background: '{surface.900}', background: '{surface.900}',

10
components/lib/themes/aura/password/index.js
View File

@ -1,6 +1,8 @@
export default { export default {
meter: { meter: {
borderColor: '{content.border.color}' borderColor: '{content.border.color}',
borderRadius: '{border.radius.md}',
height: '.75rem'
}, },
icon: { icon: {
color: '{form.field.icon.color}' color: '{form.field.icon.color}'
@ -8,7 +10,11 @@ export default {
overlay: { overlay: {
background: '{overlay.popover.background}', background: '{overlay.popover.background}',
borderColor: '{overlay.popover.border.color}', borderColor: '{overlay.popover.border.color}',
color: '{overlay.popover.color}' borderRadius: '{overlay.popover.border.radius}',
color: '{overlay.popover.color}',
padding: '{overlay.popover.padding}',
shadow: '{overlay.popover.shadow}',
gap: '0.5rem'
}, },
colorScheme: { colorScheme: {
light: { light: {

14
components/lib/themes/lara/index.js
View File

@ -169,7 +169,13 @@ export default {
}, },
overlay: { overlay: {
select: { select: {
borderRadius: '{border.radius.sm}' borderRadius: '{border.radius.sm}',
shadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
},
popover: {
borderRadius: '{border.radius.sm}',
padding: '1rem',
shadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
} }
}, },
colorScheme: { colorScheme: {
@ -239,8 +245,7 @@ export default {
select: { select: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
color: '{text.color}', color: '{text.color}'
shadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
}, },
popover: { popover: {
background: '{surface.0}', background: '{surface.0}',
@ -348,8 +353,7 @@ export default {
select: { select: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.700}', borderColor: '{surface.700}',
color: '{text.color}', color: '{text.color}'
shadow: 'rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px'
}, },
popover: { popover: {
background: '{surface.900}', background: '{surface.900}',

10
components/lib/themes/lara/password/index.js
View File

@ -1,6 +1,8 @@
export default { export default {
meter: { meter: {
borderColor: '{content.border.color}' borderColor: '{content.border.color}',
borderRadius: '{border.radius.sm}',
height: '.75rem'
}, },
icon: { icon: {
color: '{form.field.icon.color}' color: '{form.field.icon.color}'
@ -8,7 +10,11 @@ export default {
overlay: { overlay: {
background: '{overlay.popover.background}', background: '{overlay.popover.background}',
borderColor: '{overlay.popover.border.color}', borderColor: '{overlay.popover.border.color}',
color: '{overlay.popover.color}' borderRadius: '{overlay.popover.border.radius}',
color: '{overlay.popover.color}',
padding: '{overlay.popover.padding}',
shadow: '{overlay.popover.shadow}',
gap: '0.75rem'
}, },
colorScheme: { colorScheme: {
light: { light: {