From e9d9e1402777018c05247e896a930c5eb32e53f9 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Tue, 12 Mar 2024 15:07:51 +0300 Subject: [PATCH] Migrated Overlay components --- .../primeone/base/confirmpopup/index.js | 14 ++++++------- .../lib/themes/primeone/base/dialog/index.js | 14 ++++++------- .../primeone/base/overlaypanel/index.js | 20 +++++++++---------- .../lib/themes/primeone/base/sidebar/index.js | 12 +++++------ .../lib/themes/primeone/base/tooltip/index.js | 12 +++++------ .../presets/aura/confirmpopup/index.js | 4 ++-- .../primeone/presets/aura/dialog/index.js | 12 +++++------ .../presets/aura/overlaypanel/index.js | 12 +++++------ .../primeone/presets/aura/sidebar/index.js | 12 +++++------ .../primeone/presets/aura/tooltip/index.js | 4 ++-- 10 files changed, 58 insertions(+), 58 deletions(-) diff --git a/components/lib/themes/primeone/base/confirmpopup/index.js b/components/lib/themes/primeone/base/confirmpopup/index.js index a7cd4877f..d89038c0c 100644 --- a/components/lib/themes/primeone/base/confirmpopup/index.js +++ b/components/lib/themes/primeone/base/confirmpopup/index.js @@ -5,9 +5,9 @@ export default { margin-top: 10px; top: 0; left: 0; - background: var(--p-confirmpopup-background); - color: var(--p-confirmpopup-text-color); - border: 1px solid var(--p-confirmpopup-border-color); + background: ${dt('confirmpopup.background')}; + color: ${dt('confirmpopup.color')}; + border: 1px solid ${dt('confirmpopup.border.color')}; border-radius: ${dt('rounded.base')}; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } @@ -81,7 +81,7 @@ export default { margin-left: -8px; border-style: solid; border-color: transparent; - border-bottom-color: var(--p-confirmpopup-background); + border-bottom-color: ${dt('confirmpopup.background')}; } .p-confirm-popup:before { @@ -89,7 +89,7 @@ export default { margin-left: -10px; border-style: solid; border-color: transparent; - border-bottom-color: var(--p-confirmpopup-border-color); + border-bottom-color: ${dt('confirmpopup.border.color')}; } .p-confirm-popup-flipped:after, @@ -100,12 +100,12 @@ export default { .p-confirm-popup-flipped:after { border-bottom-color: transparent; - border-top-color: var(--p-confirmpopup-background); + border-top-color: ${dt('confirmpopup.background')}; } .p-confirm-popup-flipped:before { border-bottom-color: transparent; - border-top-color: var(--p-confirmpopup-border-color); + border-top-color: ${dt('confirmpopup.border.color')}; } ` }; diff --git a/components/lib/themes/primeone/base/dialog/index.js b/components/lib/themes/primeone/base/dialog/index.js index d890f2893..dc7f5fef5 100644 --- a/components/lib/themes/primeone/base/dialog/index.js +++ b/components/lib/themes/primeone/base/dialog/index.js @@ -3,11 +3,11 @@ export default { .p-dialog { max-height: 90%; transform: scale(1); - border-radius: var(--p-rounded-xl); + border-radius: ${dt('rounded.xl')}; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); - background: var(--p-dialog-background); - border: 1px solid var(--p-dialog-border-color); - color: var(--p-dialog-text-color); + background: ${dt('dialog.background')}; + border: 1px solid ${dt('dialog.border.color')}; + color: ${dt('dialog.color')}; } .p-dialog-content { @@ -50,7 +50,7 @@ export default { position: relative; width: 1.75rem; height: 1.75rem; - color: var(--p-dialog-header-icon-color); + color: ${dt('dialog.header.icon.color')}; border: 0 none; background: transparent; border-radius: 50%; @@ -59,8 +59,8 @@ export default { } .p-dialog-header-icon:enabled:hover { - background: var(--p-dialog-header-icon-background-hover); - color: var(--p-dialog-header-icon-color-hover); + background: ${dt('dialog.header.icon.hover.background')}; + color: ${dt('dialog.header.icon.hover.color')}; } .p-dialog-header-icon:focus-visible { diff --git a/components/lib/themes/primeone/base/overlaypanel/index.js b/components/lib/themes/primeone/base/overlaypanel/index.js index 81e1fda4f..34c16f47b 100644 --- a/components/lib/themes/primeone/base/overlaypanel/index.js +++ b/components/lib/themes/primeone/base/overlaypanel/index.js @@ -2,9 +2,9 @@ export default { css: ({ dt }) => ` .p-overlaypanel { margin-top: 10px; - background: var(--p-overlaypanel-background); - color: var(--p-overlaypanel-text-color); - border: 1px solid var(--p-overlaypanel-border-color); + background: ${dt('overlaypanel.background')}; + color: ${dt('overlaypanel.color')}; + border: 1px solid ${dt('overlaypanel.border.color')}; border-radius: ${dt('rounded.base')}; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } @@ -26,7 +26,7 @@ export default { width: 1.75rem; height: 1.75rem; background: transparent; - color: var(--p-overlaypanel-close-icon-color); + color: ${dt('overlaypanel.close.icon.color')}; border: 0 none; border-radius: 50%; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; @@ -37,8 +37,8 @@ export default { } .p-overlaypanel-close:enabled:hover { - background: var(--p-overlaypanel-close-icon-background-hover); - color: var(--p-overlaypanel-close-icon-color-hover); + background: ${dt('overlaypanel.close.icon.hover.background')}; + color: ${dt('overlaypanel.close.icon.hover.color')}; } .p-overlaypanel-close:focus-visible { @@ -79,7 +79,7 @@ export default { margin-left: -8px; border-style: solid; border-color: transparent; - border-bottom-color: var(--p-overlaypanel-background); + border-bottom-color: ${dt('overlaypanel.background')}; } .p-overlaypanel:before { @@ -87,7 +87,7 @@ export default { margin-left: -10px; border-style: solid; border-color: transparent; - border-bottom-color: var(--p-overlaypanel-border-color); + border-bottom-color: ${dt('overlaypanel.border.color')}; } .p-overlaypanel-flipped:after, @@ -98,12 +98,12 @@ export default { .p-overlaypanel.p-overlaypanel-flipped:after { border-bottom-color: transparent; - border-top-color: var(--p-overlaypanel-background); + border-top-color: ${dt('overlaypanel.background')}; } .p-overlaypanel.p-overlaypanel-flipped:before { border-bottom-color: transparent; - border-top-color: var(--p-overlaypanel-border-color); + border-top-color: ${dt('overlaypanel.border.color')}; } ` }; diff --git a/components/lib/themes/primeone/base/sidebar/index.js b/components/lib/themes/primeone/base/sidebar/index.js index bab132c00..30bc20c2b 100644 --- a/components/lib/themes/primeone/base/sidebar/index.js +++ b/components/lib/themes/primeone/base/sidebar/index.js @@ -7,9 +7,9 @@ export default { transform: translate3d(0px, 0px, 0px); position: relative; transition: transform 0.3s; - background: var(--p-sidebar-background); - color: var(--p-sidebar-text-color); - border: 0 solid var(--p-sidebar-border-color); + background: ${dt('sidebar.background')}; + color: ${dt('sidebar.color')}; + border: 1px solid ${dt('sidebar.border.color')}; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } @@ -40,7 +40,7 @@ export default { position: relative; width: 1.75rem; height: 1.75rem; - color: var(--p-sidebar-header-icon-color); + color: ${dt('sidebar.header.icon.color')}; border: 0 none; background: transparent; border-radius: 50%; @@ -49,8 +49,8 @@ export default { } .p-sidebar-icon:enabled:hover { - background: var(--p-sidebar-header-icon-background-hover); - color: var(--p-sidebar-header-icon-color-hover); + background: ${dt('sidebar.header.icon.hover.background')}; + color: ${dt('sidebar.header.icon.hover.color')}; } .p-sidebar-icon:focus-visible { diff --git a/components/lib/themes/primeone/base/tooltip/index.js b/components/lib/themes/primeone/base/tooltip/index.js index dbbe65d7b..6f790ba1d 100644 --- a/components/lib/themes/primeone/base/tooltip/index.js +++ b/components/lib/themes/primeone/base/tooltip/index.js @@ -19,8 +19,8 @@ export default { .p-tooltip-text { white-space: pre-line; word-break: break-word; - background: var(--p-tooltip-background); - color: var(--p-tooltip-text-color); + background: ${dt('tooltip.background')}; + color: ${dt('tooltip.color')}; padding: 0.5rem 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); border-radius: 6px; @@ -38,20 +38,20 @@ export default { .p-tooltip-right .p-tooltip-arrow { margin-top: -0.25rem; border-width: 0.25em 0.25em 0.25em 0; - border-right-color: var(--p-tooltip-background); + border-right-color: ${dt('tooltip.background')}; } .p-tooltip-left .p-tooltip-arrow { margin-top: -0.25rem; border-width: 0.25em 0 0.25em 0.25rem; - border-left-color: var(--p-tooltip-background); + border-left-color: ${dt('tooltip.background')}; } .p-tooltip-top .p-tooltip-arrow { margin-left: -0.25rem; border-width: 0.25em 0.25em 0; - border-top-color: var(--p-tooltip-background); - border-bottom-color: var(--p-tooltip-background); + border-top-color: ${dt('tooltip.background')}; + border-bottom-color: ${dt('tooltip.background')}; } .p-tooltip-bottom .p-tooltip-arrow { diff --git a/components/lib/themes/primeone/presets/aura/confirmpopup/index.js b/components/lib/themes/primeone/presets/aura/confirmpopup/index.js index 1022a5cc7..13e74546a 100644 --- a/components/lib/themes/primeone/presets/aura/confirmpopup/index.js +++ b/components/lib/themes/primeone/presets/aura/confirmpopup/index.js @@ -4,14 +4,14 @@ export default { root: { background: '{surface.0}', borderColor: '{surface.200}', - textColor: '{surface.700}' + color: '{surface.700}' } }, dark: { root: { background: '{surface.900}', borderColor: '{surface.700}', - textColor: '{surface.0}' + color: '{surface.0}' } } } diff --git a/components/lib/themes/primeone/presets/aura/dialog/index.js b/components/lib/themes/primeone/presets/aura/dialog/index.js index 2eb3e7b6b..0328425ba 100644 --- a/components/lib/themes/primeone/presets/aura/dialog/index.js +++ b/components/lib/themes/primeone/presets/aura/dialog/index.js @@ -4,24 +4,24 @@ export default { root: { background: '{surface.0}', borderColor: '{surface.200}', - textColor: '{surface.700}' + color: '{surface.700}' }, headerIcon: { color: '{surface.500}', - colorHover: '{surface.600}', - backgroundHover: '{surface.100}' + hoverColor: '{surface.600}', + hoverBackground: '{surface.100}' } }, dark: { root: { background: '{surface.900}', borderColor: '{surface.700}', - textColor: '{surface.0}' + color: '{surface.0}' }, headerIcon: { color: '{surface.400}', - colorHover: '{surface.300}', - backgroundHover: '{surface.800}' + hoverColor: '{surface.300}', + hoverBackground: '{surface.800}' } } } diff --git a/components/lib/themes/primeone/presets/aura/overlaypanel/index.js b/components/lib/themes/primeone/presets/aura/overlaypanel/index.js index 6408951c7..e0b3ec189 100644 --- a/components/lib/themes/primeone/presets/aura/overlaypanel/index.js +++ b/components/lib/themes/primeone/presets/aura/overlaypanel/index.js @@ -4,24 +4,24 @@ export default { root: { background: '{surface.0}', borderColor: '{surface.200}', - textColor: '{surface.700}' + color: '{surface.700}' }, closeIcon: { color: '{surface.500}', - colorHover: '{surface.600}', - backgroundHover: '{surface.100}' + hoverColor: '{surface.600}', + hoverBackground: '{surface.100}' } }, dark: { root: { background: '{surface.900}', borderColor: '{surface.700}', - textColor: '{surface.0}' + color: '{surface.0}' }, closeIcon: { color: '{surface.400}', - colorHover: '{surface.300}', - backgroundHover: '{surface.800}' + hoverColor: '{surface.300}', + hoverBackground: '{surface.800}' } } } diff --git a/components/lib/themes/primeone/presets/aura/sidebar/index.js b/components/lib/themes/primeone/presets/aura/sidebar/index.js index 2eb3e7b6b..0328425ba 100644 --- a/components/lib/themes/primeone/presets/aura/sidebar/index.js +++ b/components/lib/themes/primeone/presets/aura/sidebar/index.js @@ -4,24 +4,24 @@ export default { root: { background: '{surface.0}', borderColor: '{surface.200}', - textColor: '{surface.700}' + color: '{surface.700}' }, headerIcon: { color: '{surface.500}', - colorHover: '{surface.600}', - backgroundHover: '{surface.100}' + hoverColor: '{surface.600}', + hoverBackground: '{surface.100}' } }, dark: { root: { background: '{surface.900}', borderColor: '{surface.700}', - textColor: '{surface.0}' + color: '{surface.0}' }, headerIcon: { color: '{surface.400}', - colorHover: '{surface.300}', - backgroundHover: '{surface.800}' + hoverColor: '{surface.300}', + hoverBackground: '{surface.800}' } } } diff --git a/components/lib/themes/primeone/presets/aura/tooltip/index.js b/components/lib/themes/primeone/presets/aura/tooltip/index.js index af58c1afe..95dd5cc6e 100644 --- a/components/lib/themes/primeone/presets/aura/tooltip/index.js +++ b/components/lib/themes/primeone/presets/aura/tooltip/index.js @@ -3,13 +3,13 @@ export default { light: { root: { background: '{surface.700}', - textColor: '{surface.0}' + color: '{surface.0}' } }, dark: { root: { background: '{surface.700}', - textColor: '{surface.0}' + color: '{surface.0}' } } }