diff --git a/components/lib/themes/primeone/base/inlinemessage/index.js b/components/lib/themes/primeone/base/inlinemessage/index.js
index 3e95dc68d..d5e11804b 100644
--- a/components/lib/themes/primeone/base/inlinemessage/index.js
+++ b/components/lib/themes/primeone/base/inlinemessage/index.js
@@ -28,63 +28,64 @@ export default {
 }
 
 .p-inline-message-info {
-    background: var(--p-inlinemessage-info-background);
-    border: 1px solid var(--p-inlinemessage-info-border-color);
-    color: var(--p-inlinemessage-info-text-color);
-    box-shadow: var(--p-inlinemessage-info-box-shadow);
+    background: ${dt('inlinemessage.info.background')};
+    border: 1px solid ${dt('inlinemessage.info.border.color')};
+    color: ${dt('inlinemessage.info.color')};
+    box-shadow: ${dt('inlinemessage.info.box.shadow')};
 }
+
 .p-inline-message-info .p-inline-message-icon {
-    color: var(--p-inlinemessage-info-text-color);
+    color: ${dt('inlinemessage.info.color')};
 }
 
 .p-inline-message-success {
-    background: var(--p-inlinemessage-success-background);
-    border: 1px solid var(--p-inlinemessage-success-border-color);
-    color: var(--p-inlinemessage-success-text-color);
-    box-shadow: var(--p-inlinemessage-success-box-shadow);
+    background: ${dt('inlinemessage.success.background')};
+    border: 1px solid ${dt('inlinemessage.success.border.color')};
+    color: ${dt('inlinemessage.success.color')};
+    box-shadow: ${dt('inlinemessage.success.box.shadow')};
 }
 .p-inline-message-success .p-inline-message-icon {
-    color: var(--p-inlinemessage-success-text-color);
+    color: ${dt('inlinemessage.success.color')};
 }
 
 .p-inline-message-warn {
-    background: var(--p-inlinemessage-warn-background);
-    border: 1px solid var(--p-inlinemessage-warn-border-color);
-    color: var(--p-inlinemessage-warn-text-color);
-    box-shadow: var(--p-inlinemessage-warn-box-shadow);
+    background: ${dt('inlinemessage.warn.background')};
+    border: 1px solid ${dt('inlinemessage.warn.border.color')};
+    color: ${dt('inlinemessage.warn.color')};
+    box-shadow: ${dt('inlinemessage.warn.box.shadow')};
 }
 .p-inline-message-warn .p-inline-message-icon {
-    color: var(--p-inlinemessage-warn-text-color);
+    color: ${dt('inlinemessage.warn.color')};
 }
 
 .p-inline-message-error {
-    background: var(--p-inlinemessage-error-background);
-    border: 1px solid var(--p-inlinemessage-error-border-color);
-    color: var(--p-inlinemessage-error-text-color);
-    box-shadow: var(--p-inlinemessage-error-box-shadow);
+    background: ${dt('inlinemessage.error.background')};
+    border: 1px solid ${dt('inlinemessage.error.border.color')};
+    color: ${dt('inlinemessage.error.color')};
+    box-shadow: ${dt('inlinemessage.error.box.shadow')};
 }
 .p-inline-message-error .p-inline-message-icon {
-    color: var(--p-inlinemessage-error-text-color);
+    color: ${dt('inlinemessage.error.color')};
 }
 
 .p-inline-message-secondary {
-    background: var(--p-inlinemessage-secondary-background);
-    border: 1px solid var(--p-inlinemessage-secondary-border-color);
-    color: var(--p-inlinemessage-secondary-text-color);
-    box-shadow: var(--p-inlinemessage-secondary-box-shadow);
+    background: ${dt('inlinemessage.secondary.background')};
+    border: 1px solid ${dt('inlinemessage.secondary.border.color')};
+    color: ${dt('inlinemessage.secondary.color')};
+    box-shadow: ${dt('inlinemessage.secondary.box.shadow')};
 }
 .p-inline-message-secondary .p-inline-message-icon {
-    color: var(--p-inlinemessage-secondary-text-color);
+    color: ${dt('inlinemessage.secondary.color')};
 }
 
 .p-inline-message-contrast {
-    background: var(--p-inlinemessage-contrast-background);
-    border: 1px solid var(--p-inlinemessage-contrast-border-color);
-    color: var(--p-inlinemessage-contrast-text-color);
-    box-shadow: var(--p-inlinemessage-contrast-box-shadow);
+    background: ${dt('inlinemessage.contrast.background')};
+    border: 1px solid ${dt('inlinemessage.contrast.border.color')};
+    color: ${dt('inlinemessage.contrast.color')};
+    box-shadow: ${dt('inlinemessage.contrast.box.shadow')};
 }
 .p-inline-message-contrast .p-inline-message-icon {
-    color: var(--p-inlinemessage-contrast-text-color);
+    color: ${dt('inlinemessage.contrast.color')};
 }
 
 .p-inline-message-icon-only .p-inline-message-icon {
diff --git a/components/lib/themes/primeone/base/message/index.js b/components/lib/themes/primeone/base/message/index.js
index b6617d77f..3186445ed 100644
--- a/components/lib/themes/primeone/base/message/index.js
+++ b/components/lib/themes/primeone/base/message/index.js
@@ -39,93 +39,93 @@ export default {
 }
 
 .p-message-info {
-    background: var(--p-message-info-background);
-    border: 1px solid var(--p-message-info-border-color);
-    color: var(--p-message-info-text-color);
-    box-shadow: var(--p-message-info-box-shadow);
+    background: ${dt('message.info.background')};
+    border: 1px solid ${dt('message.info.border.color')};
+    color: ${dt('message.info.color')};
+    box-shadow: ${dt('message.info.box.shadow')};
 }
 
 .p-message-info .p-message-close:focus-visible {
-    outline-color: var(--p-message-info-text-color);
+    outline-color: ${dt('message.info.color')};
 }
 
 .p-message-info .p-message-close:hover {
-    background: var(--p-message-info-close-background-hover);
+    background: ${dt('message.info.close.hover.background')};
 }
 
 .p-message-success {
-    background: var(--p-message-success-background);
-    border: 1px solid var(--p-message-success-border-color);
-    color: var(--p-message-success-text-color);
-    box-shadow: var(--p-message-success-box-shadow);
+    background: ${dt('message.success.background')};
+    border: 1px solid ${dt('message.success.border.color')};
+    color: ${dt('message.success.color')};
+    box-shadow: ${dt('message.success.box.shadow')};
 }
 
 .p-message-success .p-message-close:focus-visible {
-    outline-color: var(--p-message-success-text-color);
+    outline-color: ${dt('message.success.color')};
 }
 
 .p-message-success .p-message-close:hover {
-    background: var(--p-message-success-close-background-hover);
+    background: ${dt('message.success.close.hover.background')};
 }
 
 .p-message-warn {
-    background: var(--p-message-warn-background);
-    border: 1px solid var(--p-message-warn-border-color);
-    color: var(--p-message-warn-text-color);
-    box-shadow: var(--p-message-warn-box-shadow);
+    background: ${dt('message.warn.background')};
+    border: 1px solid ${dt('message.warn.border.color')};
+    color: ${dt('message.warn.color')};
+    box-shadow: ${dt('message.warn.box.shadow')};
 }
 
 .p-message-warn .p-message-close:focus-visible {
-    outline-color: var(--p-message-warn-text-color);
+    outline-color: ${dt('message.warn.color')};
 }
 
 .p-message-warn .p-message-close:hover {
-    background: var(--p-message-warn-close-background-hover);
+    background: ${dt('message.warn.close.hover.background')};
 }
 
 .p-message-error {
-    background: var(--p-message-error-background);
-    border: 1px solid var(--p-message-error-border-color);
-    color: var(--p-message-error-text-color);
-    box-shadow: var(--p-message-error-box-shadow);
+    background: ${dt('message.error.background')};
+    border: 1px solid ${dt('message.error.border.color')};
+    color: ${dt('message.error.color')};
+    box-shadow: ${dt('message.error.box.shadow')};
 }
 
 .p-message-error .p-message-close:focus-visible {
-    outline-color: var(--p-message-error-text-color);
+    outline-color: ${dt('message.error.color')};
 }
 
 .p-message-error .p-message-close:hover {
-    background: var(--p-message-error-close-background-hover);
+    background: ${dt('message.error.close.hover.background')};
 }
 
 .p-message-secondary {
-    background: var(--p-message-secondary-background);
-    border: 1px solid var(--p-message-secondary-border-color);
-    color: var(--p-message-secondary-text-color);
-    box-shadow: var(--p-message-secondary-box-shadow);
+    background: ${dt('message.secondary.background')};
+    border: 1px solid ${dt('message.secondary.border.color')};
+    color: ${dt('message.secondary.color')};
+    box-shadow: ${dt('message.secondary.box.shadow')};
 }
 
 .p-message-secondary .p-message-close:focus-visible {
-    outline-color: var(--p-message-secondary-text-color);
+    outline-color: ${dt('message.secondary.color')};
 }
 
 .p-message-secondary .p-message-close:hover {
-    background: var(--p-message-secondary-close-background-hover);
+    background: ${dt('message.secondary.close.hover.background')};
 }
 
 .p-message-contrast {
-    background: var(--p-message-contrast-background);
-    border: 1px solid var(--p-message-contrast-border-color);
-    color: var(--p-message-contrast-text-color);
-    box-shadow: var(--p-message-contrast-box-shadow);
+    background: ${dt('message.contrast.background')};
+    border: 1px solid ${dt('message.contrast.border.color')};
+    color: ${dt('message.contrast.color')};
+    box-shadow: ${dt('message.contrast.box.shadow')};
 }
 
 .p-message-contrast .p-message-close:focus-visible {
-    outline-color: var(--p-message-contrast-text-color);
+    outline-color: ${dt('message.contrast.color')};
 }
 
 .p-message-contrast .p-message-close:hover {
-    background: var(--p-message-contrast-close-background-hover);
+    background: ${dt('message.contrast.close.hover.background')};
 }
 
 .p-message-text {
diff --git a/components/lib/themes/primeone/base/toast/index.js b/components/lib/themes/primeone/base/toast/index.js
index bac3156e7..cd8e4f28c 100644
--- a/components/lib/themes/primeone/base/toast/index.js
+++ b/components/lib/themes/primeone/base/toast/index.js
@@ -7,7 +7,7 @@ export default {
 }
 
 .p-toast-message {
-    backdrop-filter: blur(var(--p-toast-blur));
+    backdrop-filter: blur(${dt('toast.blur')});
     margin: 0 0 1rem 0;
     border-radius: ${dt('rounded.base')};
 }
@@ -63,117 +63,117 @@ export default {
 }
 
 .p-toast-message-info {
-    background: var(--p-toast-info-background);
-    border: 1px solid var(--p-toast-info-border-color);
-    color: var(--p-toast-info-text-color);
-    box-shadow: var(--p-toast-info-box-shadow);
+    background: ${dt('toast.info.background')};
+    border: 1px solid ${dt('toast.info.border.color')};
+    color: ${dt('toast.info.color')};
+    box-shadow: ${dt('toast.info.box.shadow')};
 }
 
 .p-toast-message-info .p-toast-detail {
-    color: var(--p-toast-info-detail-text-color);
+    color: ${dt('toast.info.detail.color')};
 }
 
 .p-toast-message-info .p-toast-icon-close:focus-visible {
-    outline-color: var(--p-toast-info-text-color);
+    color: ${dt('toast.info.color')};
 }
 
 .p-toast-message-info .p-toast-icon-close:hover {
-    background: var(--p-toast-info-close-background-hover);
+    background: ${dt('toast.info.close.hover.background')};
 }
 
 .p-toast-message-success {
-    background: var(--p-toast-success-background);
-    border: 1px solid var(--p-toast-success-border-color);
-    color: var(--p-toast-success-text-color);
-    box-shadow: var(--p-toast-success-box-shadow);
+    background: ${dt('toast.success.background')};
+    border: 1px solid ${dt('toast.success.border.color')};
+    color: ${dt('toast.success.color')};
+    box-shadow: ${dt('toast.success.box.shadow')};
 }
 
 .p-toast-message-success .p-toast-detail {
-    color: var(--p-toast-success-detail-text-color);
+    color: ${dt('toast.success.detail.color')};
 }
 
 .p-toast-message-success .p-toast-icon-close:focus-visible {
-    outline-color: var(--p-toast-success-text-color);
+    color: ${dt('toast.success.color')};
 }
 
 .p-toast-message-success .p-toast-icon-close:hover {
-    background: var(--p-toast-success-close-background-hover);
+    background: ${dt('toast.success.close.hover.background')};
 }
 
 .p-toast-message-warn {
-    background: var(--p-toast-warn-background);
-    border: 1px solid var(--p-toast-warn-border-color);
-    color: var(--p-toast-warn-text-color);
-    box-shadow: var(--p-toast-warn-box-shadow);
+    background: ${dt('toast.warn.background')};
+    border: 1px solid ${dt('toast.warn.border.color')};
+    color: ${dt('toast.warn.color')};
+    box-shadow: ${dt('toast.warn.box.shadow')};
 }
 
 .p-toast-message-warn .p-toast-detail {
-    color: var(--p-toast-warn-detail-text-color);
+    color: ${dt('toast.warn.detail.color')};
 }
 
 .p-toast-message-warn .p-toast-icon-close:focus-visible {
-    outline-color: var(--p-toast-warn-text-color);
+    color: ${dt('toast.warn.color')};
 }
 
 .p-toast-message-warn .p-toast-icon-close:hover {
-    background: var(--p-toast-warn-close-background-hover);
+    background: ${dt('toast.warn.close.hover.background')};
 }
 
 .p-toast-message-error {
-    background: var(--p-toast-error-background);
-    border: 1px solid var(--p-toast-error-border-color);
-    color: var(--p-toast-error-text-color);
-    box-shadow: var(--p-toast-error-box-shadow);
+    background: ${dt('toast.error.background')};
+    border: 1px solid ${dt('toast.error.border.color')};
+    color: ${dt('toast.error.color')};
+    box-shadow: ${dt('toast.error.box.shadow')};
 }
 
 .p-toast-message-error .p-toast-detail {
-    color: var(--p-toast-error-detail-text-color);
+    color: ${dt('toast.error.detail.color')};
 }
 
 .p-toast-message-error .p-toast-icon-close:focus-visible {
-    outline-color: var(--p-toast-error-text-color);
+    color: ${dt('toast.error.color')};
 }
 
 .p-toast-message-error .p-toast-icon-close:hover {
-    background: var(--p-toast-error-close-background-hover);
+    background: ${dt('toast.error.close.hover.background')};
 }
 
 .p-toast-message-secondary {
-    background: var(--p-toast-secondary-background);
-    border: 1px solid var(--p-toast-secondary-border-color);
-    color: var(--p-toast-secondary-text-color);
-    box-shadow: var(--p-toast-secondary-box-shadow);
+    background: ${dt('toast.secondary.background')};
+    border: 1px solid ${dt('toast.secondary.border.color')};
+    color: ${dt('toast.secondary.color')};
+    box-shadow: ${dt('toast.secondary.box.shadow')};
 }
 
 .p-toast-message-secondary .p-toast-detail {
-    color: var(--p-toast-secondary-detail-text-color);
+    color: ${dt('toast.secondary.detail.color')};
 }
 
 .p-toast-message-secondary .p-toast-icon-close:focus-visible {
-    outline-color: var(--p-toast-secondary-text-color);
+    color: ${dt('toast.secondary.color')};
 }
 
 .p-toast-message-secondary .p-toast-icon-close:hover {
-    background: var(--p-toast-secondary-close-background-hover);
+    background: ${dt('toast.secondary.close.hover.background')};
 }
 
 .p-toast-message-contrast {
-    background: var(--p-toast-contrast-background);
-    border: 1px solid var(--p-toast-contrast-border-color);
-    color: var(--p-toast-contrast-text-color);
-    box-shadow: var(--p-toast-contrast-box-shadow);
+    background: ${dt('toast.contrast.background')};
+    border: 1px solid ${dt('toast.contrast.border.color')};
+    color: ${dt('toast.contrast.color')};
+    box-shadow: ${dt('toast.contrast.box.shadow')};
 }
 
 .p-toast-message-contrast .p-toast-detail {
-    color: var(--p-toast-contrast-detail-text-color);
+    color: ${dt('toast.contrast.detail.color')};
 }
 
 .p-toast-message-contrast .p-toast-icon-close:focus-visible {
-    outline-color: var(--p-toast-contrast-text-color);
+    color: ${dt('toast.contrast.color')};
 }
 
 .p-toast-message-contrast .p-toast-icon-close:hover {
-    background: var(--p-toast-contrast-close-background-hover);
+    background: ${dt('toast.contrast.close.hover.background')};
 }
 
 .p-toast-top-center {
diff --git a/components/lib/themes/primeone/presets/aura/inlinemessage/index.js b/components/lib/themes/primeone/presets/aura/inlinemessage/index.js
index b3e225fc6..0ee806605 100644
--- a/components/lib/themes/primeone/presets/aura/inlinemessage/index.js
+++ b/components/lib/themes/primeone/presets/aura/inlinemessage/index.js
@@ -4,37 +4,37 @@ export default {
             info: {
                 background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
                 borderColor: '{blue.200}',
-                textColor: '{blue.600}',
+                color: '{blue.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)'
             },
             success: {
                 background: 'color-mix(in srgb, {green.50}, transparent 5%)',
                 borderColor: '{green.200}',
-                textColor: '{green.600}',
+                color: '{green.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)'
             },
             warn: {
                 background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
                 borderColor: '{yellow.200}',
-                textColor: '{yellow.600}',
+                color: '{yellow.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)'
             },
             error: {
                 background: 'color-mix(in srgb, {red.50}, transparent 5%)',
                 borderColor: '{red.200}',
-                textColor: '{red.600}',
+                color: '{red.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)'
             },
             secondary: {
                 background: '{surface.100}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.600}',
+                color: '{surface.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)'
             },
             contrast: {
                 background: '{surface.900}',
                 borderColor: '{surface.950}',
-                textColor: '{surface.50}',
+                color: '{surface.50}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)'
             }
         },
@@ -42,37 +42,37 @@ export default {
             info: {
                 background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
-                textColor: '{blue.500}',
+                color: '{blue.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)'
             },
             success: {
                 background: 'color-mix(in srgb, {green.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
-                textColor: '{green.500}',
+                color: '{green.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)'
             },
             warn: {
                 background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
-                textColor: '{yellow.500}',
+                color: '{yellow.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)'
             },
             error: {
                 background: 'color-mix(in srgb, {red.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
-                textColor: '{red.500}',
+                color: '{red.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)'
             },
             secondary: {
                 background: '{surface.800}',
                 borderColor: '{surface.700}',
-                textColor: '{surface.300}',
+                color: '{surface.300}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)'
             },
             contrast: {
                 background: '{surface.0}',
                 borderColor: '{surface.100}',
-                textColor: '{surface.950}',
+                color: '{surface.950}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)'
             }
         }
diff --git a/components/lib/themes/primeone/presets/aura/message/index.js b/components/lib/themes/primeone/presets/aura/message/index.js
index b7a404b44..935883d83 100644
--- a/components/lib/themes/primeone/presets/aura/message/index.js
+++ b/components/lib/themes/primeone/presets/aura/message/index.js
@@ -4,88 +4,88 @@ export default {
             info: {
                 background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
                 borderColor: '{blue.200}',
-                textColor: '{blue.600}',
+                color: '{blue.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
-                closeBackgroundHover: '{blue.100}'
+                closeHoverBackground: '{blue.100}'
             },
             success: {
                 background: 'color-mix(in srgb, {green.50}, transparent 5%)',
                 borderColor: '{green.200}',
-                textColor: '{green.600}',
+                color: '{green.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
-                closeBackgroundHover: '{green.100}'
+                closeHoverBackground: '{green.100}'
             },
             warn: {
                 background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
                 borderColor: '{yellow.200}',
-                textColor: '{yellow.600}',
+                color: '{yellow.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
-                closeBackgroundHover: '{yellow.100}'
+                closeHoverBackground: '{yellow.100}'
             },
             error: {
                 background: 'color-mix(in srgb, {red.50}, transparent 5%)',
                 borderColor: '{red.200}',
-                textColor: '{red.600}',
+                color: '{red.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
-                closeBackgroundHover: '{red.100}'
+                closeHoverBackground: '{red.100}'
             },
             secondary: {
                 background: '{surface.100}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.600}',
+                color: '{surface.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
-                closeBackgroundHover: '{surface.200}'
+                closeHoverBackground: '{surface.200}'
             },
             contrast: {
                 background: '{surface.900}',
                 borderColor: '{surface.950}',
-                textColor: '{surface.50}',
+                color: '{surface.50}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
-                closeBackgroundHover: '{surface.800}'
+                closeHoverBackground: '{surface.800}'
             }
         },
         dark: {
             info: {
                 background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
-                textColor: '{blue.500}',
+                color: '{blue.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
-                closeBackgroundHover: 'rgba(255, 255, 255, 0.05)'
+                closeHoverBackground: '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%)',
-                textColor: '{green.500}',
+                color: '{green.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
-                closeBackgroundHover: 'rgba(255, 255, 255, 0.05)'
+                closeHoverBackground: '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%)',
-                textColor: '{yellow.500}',
+                color: '{yellow.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
-                closeBackgroundHover: 'rgba(255, 255, 255, 0.05)'
+                closeHoverBackground: '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%)',
-                textColor: '{red.500}',
+                color: '{red.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
-                closeBackgroundHover: 'rgba(255, 255, 255, 0.05)'
+                closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
             },
             secondary: {
                 background: '{surface.800}',
                 borderColor: '{surface.700}',
-                textColor: '{surface.300}',
+                color: '{surface.300}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
-                closeBackgroundHover: '{surface.700}'
+                closeHoverBackground: '{surface.700}'
             },
             contrast: {
                 background: '{surface.0}',
                 borderColor: '{surface.100}',
-                textColor: '{surface.950}',
+                color: '{surface.950}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
-                closeBackgroundHover: '{surface.100}'
+                closeHoverBackground: '{surface.100}'
             }
         }
     }
diff --git a/components/lib/themes/primeone/presets/aura/toast/index.js b/components/lib/themes/primeone/presets/aura/toast/index.js
index 6c2d502a4..7218e7f45 100644
--- a/components/lib/themes/primeone/presets/aura/toast/index.js
+++ b/components/lib/themes/primeone/presets/aura/toast/index.js
@@ -5,50 +5,50 @@ export default {
             info: {
                 background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
                 borderColor: '{blue.200}',
-                textColor: '{blue.600}',
-                detailTextColor: '{surface.700}',
+                color: '{blue.600}',
+                detailColor: '{surface.700}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
-                closeBackgroundHover: '{blue.100}'
+                closeHoverBackground: '{blue.100}'
             },
             success: {
                 background: 'color-mix(in srgb, {green.50}, transparent 5%)',
                 borderColor: '{green.200}',
-                textColor: '{green.600}',
-                detailTextColor: '{surface.700}',
+                color: '{green.600}',
+                detailColor: '{surface.700}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
-                closeBackgroundHover: '{green.100}'
+                closeHoverBackground: '{green.100}'
             },
             warn: {
                 background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
                 borderColor: '{yellow.200}',
-                textColor: '{yellow.600}',
-                detailTextColor: '{surface.700}',
+                color: '{yellow.600}',
+                detailColor: '{surface.700}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
-                closeBackgroundHover: '{yellow.100}'
+                closeHoverBackground: '{yellow.100}'
             },
             error: {
                 background: 'color-mix(in srgb, {red.50}, transparent 5%)',
                 borderColor: '{red.200}',
-                textColor: '{red.600}',
-                detailTextColor: '{surface.700}',
+                color: '{red.600}',
+                detailColor: '{surface.700}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
-                closeBackgroundHover: '{red.100}'
+                closeHoverBackground: '{red.100}'
             },
             secondary: {
                 background: '{surface.100}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.600}',
-                detailTextColor: '{surface.700}',
+                color: '{surface.600}',
+                detailColor: '{surface.700}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
-                closeBackgroundHover: '{surface.200}'
+                closeHoverBackground: '{surface.200}'
             },
             contrast: {
                 background: '{surface.900}',
                 borderColor: '{surface.950}',
-                textColor: '{surface.50}',
-                detailTextColor: '{surface.0}',
+                color: '{surface.50}',
+                detailColor: '{surface.0}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
-                closeBackgroundHover: '{surface.800}'
+                closeHoverBackground: '{surface.800}'
             }
         },
         dark: {
@@ -56,50 +56,50 @@ export default {
             info: {
                 background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
-                textColor: '{blue.500}',
-                detailTextColor: '{surface.0}',
+                color: '{blue.500}',
+                detailColor: '{surface.0}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
-                closeBackgroundHover: 'rgba(255, 255, 255, 0.05)'
+                closeHoverBackground: '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%)',
-                textColor: '{green.500}',
-                detailTextColor: '{surface.0}',
+                color: '{green.500}',
+                detailColor: '{surface.0}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
-                closeBackgroundHover: 'rgba(255, 255, 255, 0.05)'
+                closeHoverBackground: '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%)',
-                textColor: '{yellow.500}',
-                detailTextColor: '{surface.0}',
+                color: '{yellow.500}',
+                detailColor: '{surface.0}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
-                closeBackgroundHover: 'rgba(255, 255, 255, 0.05)'
+                closeHoverBackground: '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%)',
-                textColor: '{red.500}',
-                detailTextColor: '{surface.0}',
+                color: '{red.500}',
+                detailColor: '{surface.0}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
-                closeBackgroundHover: 'rgba(255, 255, 255, 0.05)'
+                closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
             },
             secondary: {
                 background: '{surface.800}',
                 borderColor: '{surface.700}',
-                textColor: '{surface.300}',
-                detailTextColor: '{surface.0}',
+                color: '{surface.300}',
+                detailColor: '{surface.0}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
-                closeBackgroundHover: '{surface.700}'
+                closeHoverBackground: '{surface.700}'
             },
             contrast: {
                 background: '{surface.0}',
                 borderColor: '{surface.100}',
-                textColor: '{surface.950}',
-                detailTextColor: '{surface.950}',
+                color: '{surface.950}',
+                detailColor: '{surface.950}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
-                closeBackgroundHover: '{surface.100}'
+                closeHoverBackground: '{surface.100}'
             }
         }
     }