From 46fb23b6594c8ff4ca93cc37c9018a3cd66480bc Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Thu, 9 May 2024 14:41:08 +0300 Subject: [PATCH] Updated dialog and drawer tokens --- components/lib/dialog/style/DialogStyle.js | 18 ++++++++--------- components/lib/themes/aura/dialog/index.js | 23 +++++++++++++++++++--- components/lib/themes/aura/drawer/index.js | 2 +- components/lib/themes/aura/index.js | 6 +++--- components/lib/themes/lara/dialog/index.js | 23 +++++++++++++++++++--- components/lib/themes/lara/drawer/index.js | 2 +- components/lib/themes/lara/index.js | 4 ++-- 7 files changed, 56 insertions(+), 22 deletions(-) diff --git a/components/lib/dialog/style/DialogStyle.js b/components/lib/dialog/style/DialogStyle.js index 07663a17e..75f3a8ea8 100644 --- a/components/lib/dialog/style/DialogStyle.js +++ b/components/lib/dialog/style/DialogStyle.js @@ -4,8 +4,8 @@ const theme = ({ dt }) => ` .p-dialog { max-height: 90%; transform: scale(1); - border-radius: ${dt('border.radius.xl')}; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border-radius: ${dt('dialog.border.radius')}; + box-shadow: ${dt('dialog.shadow')}; background: ${dt('dialog.background')}; border: 1px solid ${dt('dialog.border.color')}; color: ${dt('dialog.color')}; @@ -13,7 +13,7 @@ const theme = ({ dt }) => ` .p-dialog-content { overflow-y: auto; - padding: 0 1.5rem 1.5rem 1.5rem; + padding: ${dt('dialog.content.padding')}; } .p-dialog-header { @@ -21,26 +21,26 @@ const theme = ({ dt }) => ` align-items: center; justify-content: space-between; flex-shrink: 0; - padding: 1.5rem; + padding: ${dt('dialog.header.padding')}; } .p-dialog-title { - font-weight: 600; - font-size: 1.25rem; + font-weight: ${dt('dialog.title.font.weight')}; + font-size: ${dt('dialog.title.font.size')}; } .p-dialog-footer { flex-shrink: 0; - padding: 0 1.5rem 1.5rem 1.5rem; + padding: ${dt('dialog.footer.padding')}; display: flex; justify-content: flex-end; - gap: 0.5rem; + gap: ${dt('dialog.footer.gap')}; } .p-dialog-header-actions { display: flex; align-items: center; - gap: 0.5rem; + gap: ${dt('dialog.header.gap')}; } .p-dialog-enter-active { transition: all 150ms cubic-bezier(0, 0, 0.2, 1); diff --git a/components/lib/themes/aura/dialog/index.js b/components/lib/themes/aura/dialog/index.js index f6ad4d3ea..235086e72 100644 --- a/components/lib/themes/aura/dialog/index.js +++ b/components/lib/themes/aura/dialog/index.js @@ -1,7 +1,24 @@ export default { root: { - background: '{content.background}', - borderColor: '{content.border.color}', - color: '{content.color}' + background: '{overlay.modal.background}', + borderColor: '{overlay.modal.border.color}', + color: '{overlay.modal.color}', + borderRadius: '{overlay.modal.border.radius}', + shadow: '{overlay.modal.shadow}' + }, + header: { + padding: '{overlay.modal.padding}', + gap: '0.5rem' + }, + title: { + fontSize: '1.25rem', + fontWeight: '600' + }, + content: { + padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}' + }, + footer: { + padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}', + gap: '0.5rem' } }; diff --git a/components/lib/themes/aura/drawer/index.js b/components/lib/themes/aura/drawer/index.js index 6a1b1f440..c1b874642 100644 --- a/components/lib/themes/aura/drawer/index.js +++ b/components/lib/themes/aura/drawer/index.js @@ -10,7 +10,7 @@ export default { padding: '{overlay.modal.padding}' }, title: { - fontSize: '1.25rem', + fontSize: '1.5rem', fontWeight: '600' }, content: { diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js index 6003d1261..025f35bd1 100644 --- a/components/lib/themes/aura/index.js +++ b/components/lib/themes/aura/index.js @@ -182,8 +182,8 @@ export default { shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)' }, modal: { - borderRadius: '{border.radius.sm}', - padding: '1.125rem', + borderRadius: '{border.radius.xl}', + padding: '1.25rem', shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)' } }, @@ -251,7 +251,7 @@ export default { select: { background: '{surface.0}', borderColor: '{surface.200}', - color: '{text.color}', + color: '{text.color}' }, popover: { background: '{surface.0}', diff --git a/components/lib/themes/lara/dialog/index.js b/components/lib/themes/lara/dialog/index.js index f6ad4d3ea..235086e72 100644 --- a/components/lib/themes/lara/dialog/index.js +++ b/components/lib/themes/lara/dialog/index.js @@ -1,7 +1,24 @@ export default { root: { - background: '{content.background}', - borderColor: '{content.border.color}', - color: '{content.color}' + background: '{overlay.modal.background}', + borderColor: '{overlay.modal.border.color}', + color: '{overlay.modal.color}', + borderRadius: '{overlay.modal.border.radius}', + shadow: '{overlay.modal.shadow}' + }, + header: { + padding: '{overlay.modal.padding}', + gap: '0.5rem' + }, + title: { + fontSize: '1.25rem', + fontWeight: '600' + }, + content: { + padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}' + }, + footer: { + padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}', + gap: '0.5rem' } }; diff --git a/components/lib/themes/lara/drawer/index.js b/components/lib/themes/lara/drawer/index.js index 6a1b1f440..c1b874642 100644 --- a/components/lib/themes/lara/drawer/index.js +++ b/components/lib/themes/lara/drawer/index.js @@ -10,7 +10,7 @@ export default { padding: '{overlay.modal.padding}' }, title: { - fontSize: '1.25rem', + fontSize: '1.5rem', fontWeight: '600' }, content: { diff --git a/components/lib/themes/lara/index.js b/components/lib/themes/lara/index.js index d1147a016..77ccdf59a 100644 --- a/components/lib/themes/lara/index.js +++ b/components/lib/themes/lara/index.js @@ -181,8 +181,8 @@ export default { shadow: '0 1px 3px rgba(0, 0, 0, 0.3)' }, modal: { - borderRadius: '{border.radius.sm}', - padding: '1.25rem', + borderRadius: '{border.radius.lg}', + padding: '1.5rem', shadow: '0 1px 3px rgba(0, 0, 0, 0.3)' } },