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 {
height: 10px;
margin-bottom: 0.75rem;
height: ${dt('password.meter.height')};
background: ${dt('password.meter.border.color')};
border-radius: ${dt('border.radius.md')};
border-radius: ${dt('password.meter.border.radius')};
}
.p-password-meter-label {
height: 100%;
width: 0;
transition: width 1s ease-in-out;
border-radius: ${dt('border.radius.md')};
border-radius: ${dt('password.meter.border.radius')};
}
.p-password-meter-weak {
@ -46,26 +45,29 @@ const theme = ({ dt }) => `
}
.p-password-overlay {
padding: 0.75rem;
padding: ${dt('password.overlay.padding')};
background: ${dt('password.overlay.background')};
color: ${dt('password.overlay.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);
border-radius: ${dt('border.radius.md')};
box-shadow: ${dt('password.overlay.shadow')};
border-radius: ${dt('password.overlay.border.radius')};
display: flex;
flex-direction: column;
gap: ${dt('password.overlay.gap')}
}
.p-password-toggle-mask-icon {
right: 0.75rem;
right: ${dt('form.field.padding.x')};
color: ${dt('password.icon.color')};
position: absolute;
top: 50%;
margin-top: -0.5rem;
width: 1rem;
height: 1rem;
margin-top: calc(-1 * calc(${dt('icon.size')} / 2));
width: ${dt('icon.size')};
height: ${dt('icon.size')};
}
.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: {
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: {
@ -343,8 +349,7 @@ export default {
select: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{text.color}',
shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
color: '{text.color}'
},
popover: {
background: '{surface.900}',

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

@ -1,6 +1,8 @@
export default {
meter: {
borderColor: '{content.border.color}'
borderColor: '{content.border.color}',
borderRadius: '{border.radius.md}',
height: '.75rem'
},
icon: {
color: '{form.field.icon.color}'
@ -8,7 +10,11 @@ export default {
overlay: {
background: '{overlay.popover.background}',
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: {
light: {

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

@ -169,7 +169,13 @@ export default {
},
overlay: {
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: {
@ -239,8 +245,7 @@ export default {
select: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{text.color}',
shadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
color: '{text.color}'
},
popover: {
background: '{surface.0}',
@ -348,8 +353,7 @@ export default {
select: {
background: '{surface.900}',
borderColor: '{surface.700}',
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'
color: '{text.color}'
},
popover: {
background: '{surface.900}',

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

@ -1,6 +1,8 @@
export default {
meter: {
borderColor: '{content.border.color}'
borderColor: '{content.border.color}',
borderRadius: '{border.radius.sm}',
height: '.75rem'
},
icon: {
color: '{form.field.icon.color}'
@ -8,7 +10,11 @@ export default {
overlay: {
background: '{overlay.popover.background}',
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: {
light: {