From 16332c13c19349d67caaef256ecd272b482899be Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sat, 4 May 2024 15:23:26 +0300 Subject: [PATCH] Refactored message component tokens --- components/lib/message/style/MessageStyle.js | 12 ++--- components/lib/themes/aura/message/index.js | 48 +++++++++++++++----- components/lib/themes/aura/toast/index.js | 48 +++++++++++++++----- components/lib/toast/style/ToastStyle.js | 12 ++--- 4 files changed, 84 insertions(+), 36 deletions(-) diff --git a/components/lib/message/style/MessageStyle.js b/components/lib/message/style/MessageStyle.js index 5d2719d17..f53eea87c 100644 --- a/components/lib/message/style/MessageStyle.js +++ b/components/lib/message/style/MessageStyle.js @@ -55,7 +55,7 @@ const theme = ({ dt }) => ` } .p-message-info .p-message-close-button:hover { - background: ${dt('message.info.close.hover.background')}; + background: ${dt('message.info.close.button.hover.background')}; } .p-message-success { @@ -70,7 +70,7 @@ const theme = ({ dt }) => ` } .p-message-success .p-message-close-button:hover { - background: ${dt('message.success.close.hover.background')}; + background: ${dt('message.success.close.button.hover.background')}; } .p-message-warn { @@ -85,7 +85,7 @@ const theme = ({ dt }) => ` } .p-message-warn .p-message-close-button:hover { - background: ${dt('message.warn.close.hover.background')}; + background: ${dt('message.warn.close.button.hover.background')}; } .p-message-error { @@ -100,7 +100,7 @@ const theme = ({ dt }) => ` } .p-message-error .p-message-close-button:hover { - background: ${dt('message.error.close.hover.background')}; + background: ${dt('message.error.close.button.hover.background')}; } .p-message-secondary { @@ -115,7 +115,7 @@ const theme = ({ dt }) => ` } .p-message-secondary .p-message-close-button:hover { - background: ${dt('message.secondary.close.hover.background')}; + background: ${dt('message.secondary.close.button.hover.background')}; } .p-message-contrast { @@ -130,7 +130,7 @@ const theme = ({ dt }) => ` } .p-message-contrast .p-message-close-button:hover { - background: ${dt('message.contrast.close.hover.background')}; + background: ${dt('message.contrast.close.button.hover.background')}; } .p-message-text { diff --git a/components/lib/themes/aura/message/index.js b/components/lib/themes/aura/message/index.js index 935883d83..410fa31af 100644 --- a/components/lib/themes/aura/message/index.js +++ b/components/lib/themes/aura/message/index.js @@ -6,42 +6,54 @@ export default { borderColor: '{blue.200}', color: '{blue.600}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', - closeHoverBackground: '{blue.100}' + closeButton: { + hoverBackground: '{blue.100}' + } }, success: { background: 'color-mix(in srgb, {green.50}, transparent 5%)', borderColor: '{green.200}', color: '{green.600}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', - closeHoverBackground: '{green.100}' + closeButton: { + hoverBackground: '{green.100}' + } }, warn: { background: 'color-mix(in srgb,{yellow.50}, transparent 5%)', borderColor: '{yellow.200}', color: '{yellow.600}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', - closeHoverBackground: '{yellow.100}' + closeButton: { + hoverBackground: '{yellow.100}' + } }, error: { background: 'color-mix(in srgb, {red.50}, transparent 5%)', borderColor: '{red.200}', color: '{red.600}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', - closeHoverBackground: '{red.100}' + closeButton: { + hoverBackground: '{red.100}' + } }, secondary: { background: '{surface.100}', borderColor: '{surface.200}', color: '{surface.600}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', - closeHoverBackground: '{surface.200}' + closeButton: { + hoverBackground: '{surface.200}' + } }, contrast: { background: '{surface.900}', borderColor: '{surface.950}', color: '{surface.50}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', - closeHoverBackground: '{surface.800}' + closeButton: { + hoverBackground: '{surface.800}' + } } }, dark: { @@ -50,42 +62,54 @@ export default { borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)', color: '{blue.500}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', - closeHoverBackground: 'rgba(255, 255, 255, 0.05)' + closeButton: { + hoverBackground: 'rgba(255, 255, 255, 0.05)' + } }, success: { background: 'color-mix(in srgb, {green.500}, transparent 84%)', borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)', color: '{green.500}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', - closeHoverBackground: 'rgba(255, 255, 255, 0.05)' + closeButton: { + hoverBackground: 'rgba(255, 255, 255, 0.05)' + } }, warn: { background: 'color-mix(in srgb, {yellow.500}, transparent 84%)', borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)', color: '{yellow.500}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', - closeHoverBackground: 'rgba(255, 255, 255, 0.05)' + closeButton: { + hoverBackground: 'rgba(255, 255, 255, 0.05)' + } }, error: { background: 'color-mix(in srgb, {red.500}, transparent 84%)', borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)', color: '{red.500}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', - closeHoverBackground: 'rgba(255, 255, 255, 0.05)' + closeButton: { + hoverBackground: 'rgba(255, 255, 255, 0.05)' + } }, secondary: { background: '{surface.800}', borderColor: '{surface.700}', color: '{surface.300}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', - closeHoverBackground: '{surface.700}' + closeButton: { + hoverBackground: '{surface.700}' + } }, contrast: { background: '{surface.0}', borderColor: '{surface.100}', color: '{surface.950}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', - closeHoverBackground: '{surface.100}' + closeButton: { + hoverBackground: '{surface.100}' + } } } } diff --git a/components/lib/themes/aura/toast/index.js b/components/lib/themes/aura/toast/index.js index 7218e7f45..24d048684 100644 --- a/components/lib/themes/aura/toast/index.js +++ b/components/lib/themes/aura/toast/index.js @@ -8,7 +8,9 @@ export default { color: '{blue.600}', detailColor: '{surface.700}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', - closeHoverBackground: '{blue.100}' + closeButton: { + hoverBackground: '{blue.100}' + } }, success: { background: 'color-mix(in srgb, {green.50}, transparent 5%)', @@ -16,7 +18,9 @@ export default { color: '{green.600}', detailColor: '{surface.700}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', - closeHoverBackground: '{green.100}' + closeButton: { + hoverBackground: '{green.100}' + } }, warn: { background: 'color-mix(in srgb,{yellow.50}, transparent 5%)', @@ -24,7 +28,9 @@ export default { color: '{yellow.600}', detailColor: '{surface.700}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', - closeHoverBackground: '{yellow.100}' + closeButton: { + hoverBackground: '{yellow.100}' + } }, error: { background: 'color-mix(in srgb, {red.50}, transparent 5%)', @@ -32,7 +38,9 @@ export default { color: '{red.600}', detailColor: '{surface.700}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', - closeHoverBackground: '{red.100}' + closeButton: { + hoverBackground: '{red.100}' + } }, secondary: { background: '{surface.100}', @@ -40,7 +48,9 @@ export default { color: '{surface.600}', detailColor: '{surface.700}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', - closeHoverBackground: '{surface.200}' + closeButton: { + hoverBackground: '{surface.200}' + } }, contrast: { background: '{surface.900}', @@ -48,7 +58,9 @@ export default { color: '{surface.50}', detailColor: '{surface.0}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', - closeHoverBackground: '{surface.800}' + closeButton: { + hoverBackground: '{surface.800}' + } } }, dark: { @@ -59,7 +71,9 @@ export default { color: '{blue.500}', detailColor: '{surface.0}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', - closeHoverBackground: 'rgba(255, 255, 255, 0.05)' + closeButton: { + hoverBackground: 'rgba(255, 255, 255, 0.05)' + } }, success: { background: 'color-mix(in srgb, {green.500}, transparent 84%)', @@ -67,7 +81,9 @@ export default { color: '{green.500}', detailColor: '{surface.0}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', - closeHoverBackground: 'rgba(255, 255, 255, 0.05)' + closeButton: { + hoverBackground: 'rgba(255, 255, 255, 0.05)' + } }, warn: { background: 'color-mix(in srgb, {yellow.500}, transparent 84%)', @@ -75,7 +91,9 @@ export default { color: '{yellow.500}', detailColor: '{surface.0}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', - closeHoverBackground: 'rgba(255, 255, 255, 0.05)' + closeButton: { + hoverBackground: 'rgba(255, 255, 255, 0.05)' + } }, error: { background: 'color-mix(in srgb, {red.500}, transparent 84%)', @@ -83,7 +101,9 @@ export default { color: '{red.500}', detailColor: '{surface.0}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', - closeHoverBackground: 'rgba(255, 255, 255, 0.05)' + closeButton: { + hoverBackground: 'rgba(255, 255, 255, 0.05)' + } }, secondary: { background: '{surface.800}', @@ -91,7 +111,9 @@ export default { color: '{surface.300}', detailColor: '{surface.0}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', - closeHoverBackground: '{surface.700}' + closeButton: { + hoverBackground: '{surface.700}' + } }, contrast: { background: '{surface.0}', @@ -99,7 +121,9 @@ export default { color: '{surface.950}', detailColor: '{surface.950}', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', - closeHoverBackground: '{surface.100}' + closeButton: { + hoverBackground: '{surface.100}' + } } } } diff --git a/components/lib/toast/style/ToastStyle.js b/components/lib/toast/style/ToastStyle.js index 581bb2465..9536d653a 100644 --- a/components/lib/toast/style/ToastStyle.js +++ b/components/lib/toast/style/ToastStyle.js @@ -82,7 +82,7 @@ const theme = ({ dt }) => ` } .p-toast-message-info .p-toast-close-button:hover { - background: ${dt('toast.info.close.hover.background')}; + background: ${dt('toast.info.close.button.hover.background')}; } .p-toast-message-success { @@ -101,7 +101,7 @@ const theme = ({ dt }) => ` } .p-toast-message-success .p-toast-close-button:hover { - background: ${dt('toast.success.close.hover.background')}; + background: ${dt('toast.success.close.button.hover.background')}; } .p-toast-message-warn { @@ -120,7 +120,7 @@ const theme = ({ dt }) => ` } .p-toast-message-warn .p-toast-close-button:hover { - background: ${dt('toast.warn.close.hover.background')}; + background: ${dt('toast.warn.close.button.hover.background')}; } .p-toast-message-error { @@ -139,7 +139,7 @@ const theme = ({ dt }) => ` } .p-toast-message-error .p-toast-close-button:hover { - background: ${dt('toast.error.close.hover.background')}; + background: ${dt('toast.error.close.button.hover.background')}; } .p-toast-message-secondary { @@ -158,7 +158,7 @@ const theme = ({ dt }) => ` } .p-toast-message-secondary .p-toast-close-button:hover { - background: ${dt('toast.secondary.close.hover.background')}; + background: ${dt('toast.secondary.close.button.hover.background')}; } .p-toast-message-contrast { @@ -177,7 +177,7 @@ const theme = ({ dt }) => ` } .p-toast-message-contrast .p-toast-close-button:hover { - background: ${dt('toast.contrast.close.hover.background')}; + background: ${dt('toast.contrast.close.button.hover.background')}; } .p-toast-top-center {