From 5d63b84050ade29c0b8b339c41356d73e0d0c9f1 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 27 Mar 2024 13:59:21 +0300 Subject: [PATCH] Cleanup and fixes to theming --- components/lib/orderlist/OrderList.vue | 2 -- components/lib/picklist/PickList.vue | 2 -- .../lib/themes/primeone/base/megamenu/index.js | 1 + components/lib/themes/primeone/base/tabview/index.js | 12 ++++++------ .../themes/primeone/presets/aura/tabview/index.js | 5 ++--- .../lib/themes/primeone/presets/aura/tag/index.js | 10 +++++----- 6 files changed, 14 insertions(+), 18 deletions(-) diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue index 158635d52..c63dfe706 100755 --- a/components/lib/orderlist/OrderList.vue +++ b/components/lib/orderlist/OrderList.vue @@ -269,12 +269,10 @@ export default { } .p-orderlist[${this.attributeSelector}] .p-orderlist-controls { - padding: var(--content-padding); flex-direction: row; } .p-orderlist[${this.attributeSelector}] .p-orderlist-controls .p-button { - margin-right: var(--inline-spacing); margin-bottom: 0; } diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue index 200604b3f..b0b61e1a1 100755 --- a/components/lib/picklist/PickList.vue +++ b/components/lib/picklist/PickList.vue @@ -571,12 +571,10 @@ export default { } .p-picklist[${this.attributeSelector}] .p-picklist-buttons { - padding: var(--content-padding); flex-direction: row; } .p-picklist[${this.attributeSelector}] .p-picklist-buttons .p-button { - margin-right: var(--inline-spacing); margin-bottom: 0; } diff --git a/components/lib/themes/primeone/base/megamenu/index.js b/components/lib/themes/primeone/base/megamenu/index.js index 871fd5c92..9e8d83500 100644 --- a/components/lib/themes/primeone/base/megamenu/index.js +++ b/components/lib/themes/primeone/base/megamenu/index.js @@ -61,6 +61,7 @@ export default { .p-megamenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-submenu-icon { color: ${dt('megamenu.item.icon.focus.color')}; +} .p-megamenu .p-menuitem-active > .p-menuitem-content { color: ${dt('megamenu.item.focus.color')}; diff --git a/components/lib/themes/primeone/base/tabview/index.js b/components/lib/themes/primeone/base/tabview/index.js index a8f933e63..e42b235de 100644 --- a/components/lib/themes/primeone/base/tabview/index.js +++ b/components/lib/themes/primeone/base/tabview/index.js @@ -75,13 +75,13 @@ export default { display: flex; align-items: center; justify-content: center; - background: ${dt('tabview.navigatior.icon.background')}; - color: ${dt('tabview.navigatior.icon.color')}; + background: ${dt('tabview.navigator.icon.background')}; + color: ${dt('tabview.navigator.icon.color')}; width: 2.5rem; border-radius: 0; outline-color: transparent; transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - box-shadow: ${dt('tabview.navigatior.icon.box.shadow')}; + box-shadow: ${dt('tabview.navigator.icon.box.shadow')}; } .p-tabview-nav-btn:focus-visible { @@ -90,7 +90,7 @@ export default { } .p-tabview-nav-btn:hover { - color: ${dt('tabview.navigatior.icon.hover.color')}; + color: ${dt('tabview.navigator.icon.hover.color')}; } .p-tabview-nav-prev { @@ -106,8 +106,8 @@ export default { } .p-tabview-panels { - background: ${dt('tabview.navigatior.content.background')}; - color: ${dt('tabview.navigatior.content.color')}; + background: ${dt('tabview.navigator.content.background')}; + color: ${dt('tabview.navigator.content.color')}; padding: 0.875rem 1.125rem 1.125rem 1.125rem; } diff --git a/components/lib/themes/primeone/presets/aura/tabview/index.js b/components/lib/themes/primeone/presets/aura/tabview/index.js index 080246ed7..fd5331153 100644 --- a/components/lib/themes/primeone/presets/aura/tabview/index.js +++ b/components/lib/themes/primeone/presets/aura/tabview/index.js @@ -21,8 +21,7 @@ export default { content: { background: '{surface.0}', color: '{surface.700}' - }, - + } }, dark: { nav: { @@ -40,7 +39,7 @@ export default { background: '{surface.900}', color: '{surface.400}', hoverColor: '{surface.0}', - boxShadow: '0px 0px 10px 50px color-mix(in srgb, var(--p-surface-900), transparent 50%)' + boxShadow: '0px 0px 10px 50px color-mix(in srgb, {surface.900}, transparent 50%)' }, content: { background: '{surface.900}', diff --git a/components/lib/themes/primeone/presets/aura/tag/index.js b/components/lib/themes/primeone/presets/aura/tag/index.js index 780a2921e..77d23852b 100644 --- a/components/lib/themes/primeone/presets/aura/tag/index.js +++ b/components/lib/themes/primeone/presets/aura/tag/index.js @@ -32,7 +32,7 @@ export default { }, dark: { primary: { - background: 'color-mix(in srgb, var(--p-primary-500), transparent 84%)', + background: 'color-mix(in srgb, {primary.500}, transparent 84%)', color: '{primary.300}' }, secondary: { @@ -40,19 +40,19 @@ export default { color: '{surface.300}' }, success: { - background: 'color-mix(in srgb, var(--p-green-500), transparent 84%)', + background: 'color-mix(in srgb, {green.500}, transparent 84%)', color: '{green.300}' }, info: { - background: 'color-mix(in srgb, var(--p-sky-500), transparent 84%)', + background: 'color-mix(in srgb, {sky.500}, transparent 84%)', color: '{sky.300}' }, warn: { - background: 'color-mix(in srgb, var(--p-orange-500), transparent 84%)', + background: 'color-mix(in srgb, {orange.500}, transparent 84%)', color: '{orange.300}' }, danger: { - background: 'color-mix(in srgb, var(--p-red-500), transparent 84%)', + background: 'color-mix(in srgb, {red.500}, transparent 84%)', color: '{red.300}' }, contrast: {