From 15269647f4fee36b1129ea8de777446aea634517 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 8 May 2024 14:42:10 +0300 Subject: [PATCH] New tokens for Password component --- .../lib/password/style/PasswordStyle.js | 26 ++++++++++--------- components/lib/themes/aura/index.js | 11 +++++--- components/lib/themes/aura/password/index.js | 10 +++++-- components/lib/themes/lara/index.js | 14 ++++++---- components/lib/themes/lara/password/index.js | 10 +++++-- 5 files changed, 47 insertions(+), 24 deletions(-) diff --git a/components/lib/password/style/PasswordStyle.js b/components/lib/password/style/PasswordStyle.js index 3860fcc6b..b6f6e1f9e 100644 --- a/components/lib/password/style/PasswordStyle.js +++ b/components/lib/password/style/PasswordStyle.js @@ -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')}); } `; diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js index 61783ef4a..e480440c9 100644 --- a/components/lib/themes/aura/index.js +++ b/components/lib/themes/aura/index.js @@ -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}', diff --git a/components/lib/themes/aura/password/index.js b/components/lib/themes/aura/password/index.js index 05bb83661..05db841ff 100644 --- a/components/lib/themes/aura/password/index.js +++ b/components/lib/themes/aura/password/index.js @@ -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: { diff --git a/components/lib/themes/lara/index.js b/components/lib/themes/lara/index.js index dbf99b38b..e5f120c95 100644 --- a/components/lib/themes/lara/index.js +++ b/components/lib/themes/lara/index.js @@ -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}', diff --git a/components/lib/themes/lara/password/index.js b/components/lib/themes/lara/password/index.js index 05bb83661..54cb6c73c 100644 --- a/components/lib/themes/lara/password/index.js +++ b/components/lib/themes/lara/password/index.js @@ -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: {