From 02104cea25f113d5926598f4f704da60b3d50f58 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 13 Mar 2024 11:36:59 +0300
Subject: [PATCH] Migrated buttons

---
 .../lib/themes/primeone/base/button/index.js  | 392 ++++++++--------
 .../themes/primeone/base/speeddial/index.js   |  10 +-
 .../primeone/presets/aura/button/index.js     | 440 +++++++++---------
 .../primeone/presets/aura/speeddial/index.js  |  15 +-
 4 files changed, 432 insertions(+), 425 deletions(-)

diff --git a/components/lib/themes/primeone/base/button/index.js b/components/lib/themes/primeone/base/button/index.js
index 34db4b26d..0a55de860 100644
--- a/components/lib/themes/primeone/base/button/index.js
+++ b/components/lib/themes/primeone/base/button/index.js
@@ -8,9 +8,9 @@ export default {
     justify-content: center;
     overflow: hidden;
     position: relative;
-    color: var(--p-button-primary-text-color);
-    background: var(--p-button-primary-background);
-    border: 1px solid var(--p-button-primary-border-color);
+    color: ${dt('button.primary.color')};
+    background: ${dt('button.primary.background')};
+    border: 1px solid ${dt('button.primary.border.color')};
     padding: 0.5rem 1rem;
     font-size: 1rem;
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
@@ -104,19 +104,19 @@ export default {
 }
 
 .p-button:not(:disabled):hover {
-    background: var(--p-button-primary-background-hover);
-    border: 1px solid var(--p-button-primary-border-color-hover);
-    color: var(--p-button-primary-text-color-hover);
+    background: ${dt('button.primary.hover.background')};
+    border: 1px solid ${dt('button.primary.hover.border.color')};
+    color: ${dt('button.primary.hover.color')};
 }
 
 .p-button:not(:disabled):active {
-    background: var(--p-button-primary-background-active);
-    border: 1px solid var(--p-button-primary-border-color-active);
-    color: var(--p-button-primary-text-color-active);
+    background: ${dt('button.primary.active.background')};
+    border: 1px solid ${dt('button.primary.active.border.color')};
+    color: ${dt('button.primary.active.color')};
 }
 
 .p-button:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} var(--p-button-primary-background);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')};
     outline-offset: ${dt('focus.ring.offset')};
 }
 
@@ -125,8 +125,8 @@ export default {
     min-width: 1rem;
     height: 1rem;
     line-height: 1rem;
-    background: var(--p-button-primary-text-color);
-    color: var(--p-button-primary-background);
+    background: ${dt('button.primary.color')};
+    color: ${dt('button.primary.background')};
 }
 
 .p-button-raised {
@@ -139,467 +139,467 @@ export default {
 
 /* Default Severities */
 .p-button-secondary {
-    background: var(--p-button-secondary-background);
-    border: 1px solid var(--p-button-secondary-border-color);
-    color: var(--p-button-secondary-text-color);
+    background: ${dt('button.secondary.background')};
+    border: 1px solid ${dt('button.secondary.border.color')};
+    color: ${dt('button.secondary.color')};
 }
 
 .p-button-secondary:not(:disabled):hover {
-    background: var(--p-button-secondary-background-hover);
-    border: 1px solid var(--p-button-secondary-border-color-hover);
-    color: var(--p-button-secondary-text-color-hover);
+    background: ${dt('button.secondary.hover.background')};
+    border: 1px solid ${dt('button.secondary.hover.border.color')};
+    color: ${dt('button.secondary.hover.color')};
 }
 
 .p-button-secondary:not(:disabled):active {
-    background: var(--p-button-secondary-background-active);
-    border: 1px solid var(--p-button-secondary-border-color-active);
-    color: var(--p-button-secondary-text-color-active);
+    background: ${dt('button.secondary.active.background')};
+    border: 1px solid ${dt('button.secondary.active.border.color')};
+    color: ${dt('button.secondary.active.color')};
 }
 
 .p-button-success {
-    background: var(--p-button-success-background);
-    border: 1px solid var(--p-button-success-border-color);
-    color: var(--p-button-success-text-color);
+    background: ${dt('button.success.background')};
+    border: 1px solid ${dt('button.success.border.color')};
+    color: ${dt('button.success.color')};
 }
 
 .p-button-success:not(:disabled):hover {
-    background: var(--p-button-success-background-hover);
-    border: 1px solid var(--p-button-success-border-color-hover);
-    color: var(--p-button-success-text-color-hover);
+    background: ${dt('button.success.hover.background')};
+    border: 1px solid ${dt('button.success.hover.border.color')};
+    color: ${dt('button.success.hover.color')};
 }
 
 .p-button-success:not(:disabled):active {
-    background: var(--p-button-success-background-active);
-    border: 1px solid var(--p-button-success-border-color-active);
-    color: var(--p-button-success-text-color-active);
+    background: ${dt('button.success.active.background')};
+    border: 1px solid ${dt('button.success.active.border.color')};
+    color: ${dt('button.success.active.color')};
 }
 
 .p-button-success:focus-visible {
-    outline-color: var(--p-button-success-background);
+    outline-color: ${dt('button.success.background')};
 }
 
 .p-button-info {
-    background: var(--p-button-info-background);
-    border: 1px solid var(--p-button-info-border-color);
-    color: var(--p-button-info-text-color);
+    background: ${dt('button.info.background')};
+    border: 1px solid ${dt('button.info.border.color')};
+    color: ${dt('button.info.color')};
 }
 
 .p-button-info:not(:disabled):hover {
-    background: var(--p-button-info-background-hover);
-    border: 1px solid var(--p-button-info-border-color-hover);
-    color: var(--p-button-info-text-color-hover);
+    background: ${dt('button.info.hover.background')};
+    border: 1px solid ${dt('button.info.hover.border.color')};
+    color: ${dt('button.info.hover.color')};
 }
 
 .p-button-info:not(:disabled):active {
-    background: var(--p-button-info-background-active);
-    border: 1px solid var(--p-button-info-border-color-active);
-    color: var(--p-button-info-text-color-active);
+    background: ${dt('button.info.active.background')};
+    border: 1px solid ${dt('button.info.active.border.color')};
+    color: ${dt('button.info.active.color')};
 }
 
 .p-button-info:focus-visible {
-    outline-color: var(--p-button-info-background);
+    outline-color: ${dt('button.info.background')};
 }
 
 .p-button-warning {
-    background: var(--p-button-warn-background);
-    border: 1px solid var(--p-button-warn-border-color);
-    color: var(--p-button-warn-text-color);
+    background: ${dt('button.warn.background')};
+    border: 1px solid ${dt('button.warn.border.color')};
+    color: ${dt('button.warn.color')};
 }
 
 .p-button-warning:not(:disabled):hover {
-    background: var(--p-button-warn-background-hover);
-    border: 1px solid var(--p-button-warn-border-color-hover);
-    color: var(--p-button-warn-text-color-hover);
+    background: ${dt('button.warn.hover.background')};
+    border: 1px solid ${dt('button.warn.hover.border.color')};
+    color: ${dt('button.warn.hover.color')};
 }
 
 .p-button-warning:not(:disabled):active {
-    background: var(--p-button-warn-background-active);
-    border: 1px solid var(--p-button-warn-border-color-active);
-    color: var(--p-button-warn-text-color-active);
+    background: ${dt('button.warn.active.background')};
+    border: 1px solid ${dt('button.warn.active.border.color')};
+    color: ${dt('button.warn.active.color')};
 }
 
 .p-button-warning:focus-visible {
-    outline-color: var(--p-button-warn-background);
+    background: ${dt('button.warn.background')};
 }
 
 .p-button-help {
-    background: var(--p-button-help-background);
-    border: 1px solid var(--p-button-help-border-color);
-    color: var(--p-button-help-text-color);
+    background: ${dt('button.help.background')};
+    border: 1px solid ${dt('button.help.border.color')};
+    color: ${dt('button.help.color')};
 }
 
 .p-button-help:not(:disabled):hover {
-    background: var(--p-button-help-background-hover);
-    border: 1px solid var(--p-button-help-border-color-hover);
-    color: var(--p-button-help-text-color-hover);
+    background: ${dt('button.help.hover.background')};
+    border: 1px solid ${dt('button.help.hover.border.color')};
+    color: ${dt('button.help.hover.color')};
 }
 
 .p-button-help:not(:disabled):active {
-    background: var(--p-button-help-background-active);
-    border: 1px solid var(--p-button-help-border-color-active);
-    color: var(--p-button-help-text-color-active);
+    background: ${dt('button.help.active.background')};
+    border: 1px solid ${dt('button.help.active.border.color')};
+    color: ${dt('button.help.active.color')};
 }
 
 .p-button-help:focus-visible {
-    outline-color: var(--p-button-help-background);
+    outline-color: ${dt('button.help.background')};
 }
 
 .p-button-danger {
-    background: var(--p-button-danger-background);
-    border: 1px solid var(--p-button-danger-border-color);
-    color: var(--p-button-danger-text-color);
+    background: ${dt('button.danger.background')};
+    border: 1px solid ${dt('button.danger.border.color')};
+    color: ${dt('button.danger.color')};
 }
 
 .p-button-danger:not(:disabled):hover {
-    background: var(--p-button-danger-background-hover);
-    border: 1px solid var(--p-button-danger-border-color-hover);
-    color: var(--p-button-danger-text-color-hover);
+    background: ${dt('button.danger.hover.background')};
+    border: 1px solid ${dt('button.danger.hover.border.color')};
+    color: ${dt('button.danger.hover.color')};
 }
 
 .p-button-danger:not(:disabled):active {
-    background: var(--p-button-danger-background-active);
-    border: 1px solid var(--p-button-danger-border-color-active);
-    color: var(--p-button-danger-text-color-active);
+    background: ${dt('button.danger.active.background')};
+    border: 1px solid ${dt('button.danger.active.border.color')};
+    color: ${dt('button.danger.active.color')};
 }
 
 .p-button-danger:focus-visible {
-    outline-color: var(--p-button-danger-background);
+    background: ${dt('button.danger.background')};
 }
 
 .p-button-contrast {
-    background: var(--p-button-contrast-background);
-    border: 1px solid var(--p-button-contrast-border-color);
-    color: var(--p-button-contrast-text-color);
+    background: ${dt('button.contrast.background')};
+    border: 1px solid ${dt('button.contrast.border.color')};
+    color: ${dt('button.contrast.color')};
 }
 
 .p-button-contrast:not(:disabled):hover {
-    background: var(--p-button-contrast-background-hover);
-    border: 1px solid var(--p-button-contrast-border-color-hover);
-    color: var(--p-button-contrast-text-color-hover);
+    background: ${dt('button.contrast.hover.background')};
+    border: 1px solid ${dt('button.contrast.hover.border.color')};
+    color: ${dt('button.contrast.hover.color')};
 }
 
 .p-button-contrast:not(:disabled):active {
-    background: var(--p-button-contrast-background-active);
-    border: 1px solid var(--p-button-contrast-border-color-active);
-    color: var(--p-button-contrast-text-color-active);
+    background: ${dt('button.contrast.active.background')};
+    border: 1px solid ${dt('button.contrast.active.border.color')};
+    color: ${dt('button.contrast.active.color')};
 }
 
 .p-button-contrast:focus-visible {
-    outline-color: var(--p-button-contrast-background);
+    outline-color: ${dt('button.contrast.background')};
 }
 
 
 /* Outlined Buttons */
 .p-button-outlined {
     background: transparent;
-    border-color: var(--p-button-outlined-primary-border-color);
-    color: var(--p-button-outlined-primary-text-color);
+    border-color: ${dt('button.outlined.primary.border.color')};
+    color: ${dt('button.outlined.primary.color')};
 }
 
 .p-button-outlined:not(:disabled):hover {
-    background: var(--p-button-outlined-primary-background-hover);
-    border-color: var(--p-button-outlined-primary-border-color);
-    color: var(--p-button-outlined-primary-text-color);
+    background: ${dt('button.outlined.primary.hover.background')};
+    border-color: ${dt('button.outlined.primary.border.color')};
+    color: ${dt('button.outlined.primary.color')};
 }
 
 .p-button-outlined:not(:disabled):active {
-    background: var(--p-button-outlined-primary-background-active);
-    border-color: var(--p-button-outlined-primary-border-color);
-    color: var(--p-button-outlined-primary-text-color);
+    background: ${dt('button.outlined.primary.active.background')};
+    border-color: ${dt('button.outlined.primary.border.color')};
+    color: ${dt('button.outlined.primary.color')};
 }
 
 .p-button-outlined.p-button-secondary {
-    border-color: var(--p-button-outlined-secondary-border-color);
-    color: var(--p-button-outlined-secondary-text-color);
+    border-color: ${dt('button.outlined.secondary.border.color')};
+    color: ${dt('button.outlined.secondary.color')};
 }
 
 .p-button-outlined.p-button-secondary:not(:disabled):hover {
-    background: var(--p-button-outlined-secondary-background-hover);
-    border-color: var(--p-button-outlined-secondary-border-color);
-    color: var(--p-button-outlined-secondary-text-color);
+    background: ${dt('button.outlined.secondary.hover.background')};
+    border-color: ${dt('button.outlined.secondary.border.color')};
+    color: ${dt('button.outlined.secondary.color')};
 }
 
 .p-button-outlined.p-button-secondary:not(:disabled):active {
-    background: var(--p-button-outlined-secondary-background-active);
-    border-color: var(--p-button-outlined-secondary-border-color);
-    color: var(--p-button-outlined-secondary-text-color);
+    background: ${dt('button.outlined.secondary.active.background')};
+    border-color: ${dt('button.outlined.secondary.border.color')};
+    color: ${dt('button.outlined.secondary.color')};
 }
 
 .p-button-outlined.p-button-success {
-    border-color: var(--p-button-outlined-success-border-color);
-    color: var(--p-button-outlined-success-text-color);
+    border-color: ${dt('button.outlined.success.border.color')};
+    color: ${dt('button.outlined.success.color')};
 }
 
 .p-button-outlined.p-button-success:not(:disabled):hover {
-    background: var(--p-button-outlined-success-background-hover);
-    border-color: var(--p-button-outlined-success-border-color);
-    color: var(--p-button-outlined-success-text-color);
+    background: ${dt('button.outlined.success.hover.background')};
+    border-color: ${dt('button.outlined.success.border.color')};
+    color: ${dt('button.outlined.success.color')};
 }
 
 .p-button-outlined.p-button-success:not(:disabled):active {
-    background: var(--p-button-outlined-success-background-active);
-    border-color: var(--p-button-outlined-success-border-color);
-    color: var(--p-button-outlined-success-text-color);
+    background: ${dt('button.outlined.success.active.background')};
+    border-color: ${dt('button.outlined.success.border.color')};
+    color: ${dt('button.outlined.success.color')};
 }
 
 .p-button-outlined.p-button-info {
-    border-color: var(--p-button-outlined-info-border-color);
-    color: var(--p-button-outlined-info-text-color);
+    border-color: ${dt('button.outlined.info.border.color')};
+    color: ${dt('button.outlined.info.color')};
 }
 
 .p-button-outlined.p-button-info:not(:disabled):hover {
-    background: var(--p-button-outlined-info-background-hover);
-    border-color: var(--p-button-outlined-info-border-color);
-    color: var(--p-button-outlined-info-text-color);
+    background: ${dt('button.outlined.info.hover.background')};
+    border-color: ${dt('button.outlined.info.border.color')};
+    color: ${dt('button.outlined.info.color')};
 }
 
 .p-button-outlined.p-button-info:not(:disabled):active {
-    background: var(--p-button-outlined-info-background-active);
-    border-color: var(--p-button-outlined-info-border-color);
-    color: var(--p-button-outlined-info-text-color);
+    background: ${dt('button.outlined.info.active.background')};
+    border-color: ${dt('button.outlined.info.border.color')};
+    color: ${dt('button.outlined.info.color')};
 }
 
 .p-button-outlined.p-button-warning {
-    border-color: var(--p-button-outlined-warn-border-color);
-    color: var(--p-button-outlined-warn-text-color);
+    border-color: ${dt('button.outlined.warn.border.color')};
+    color: ${dt('button.outlined.warn.color')};
 }
 
 .p-button-outlined.p-button-warning:not(:disabled):hover {
-    background: var(--p-button-outlined-warn-background-hover);
-    border-color: var(--p-button-outlined-warn-border-color);
-    color: var(--p-button-outlined-warn-text-color);
+    background: ${dt('button.outlined.warn.hover.background')};
+    border-color: ${dt('button.outlined.warn.border.color')};
+    color: ${dt('button.outlined.warn.color')};
 }
 
 .p-button-outlined.p-button-warning:not(:disabled):active {
-    background: var(--p-button-outlined-warn-background-active);
-    border-color: var(--p-button-outlined-warn-border-color);
-    color: var(--p-button-outlined-warn-text-color);
+    background: ${dt('button.outlined.warn.active.background')};
+    border-color: ${dt('button.outlined.warn.border.color')};
+    color: ${dt('button.outlined.warn.color')};
 }
 
 .p-button-outlined.p-button-help {
-    border-color: var(--p-button-outlined-help-border-color);
-    color: var(--p-button-outlined-help-text-color);
+    border-color: ${dt('button.outlined.help.border.color')};
+    color: ${dt('button.outlined.help.color')};
 }
 
 .p-button-outlined.p-button-help:not(:disabled):hover {
-    background: var(--p-button-outlined-help-background-hover);
-    border-color: var(--p-button-outlined-help-border-color);
-    color: var(--p-button-outlined-help-text-color);
+    background: ${dt('button.outlined.help.hover.background')};
+    border-color: ${dt('button.outlined.help.border.color')};
+    color: ${dt('button.outlined.help.color')};
 }
 
 .p-button-outlined.p-button-help:not(:disabled):active {
-    background: var(--p-button-outlined-help-background-active);
-    border-color: var(--p-button-outlined-help-border-color);
-    color: var(--p-button-outlined-help-text-color);
+    background: ${dt('button.outlined.help.active.background')};
+    border-color: ${dt('button.outlined.help.border.color')};
+    color: ${dt('button.outlined.help.color')};
 }
 
 .p-button-outlined.p-button-danger {
-    border-color: var(--p-button-outlined-danger-border-color);
-    color: var(--p-button-outlined-danger-text-color);
+    border-color: ${dt('button.outlined.danger.border.color')};
+    color: ${dt('button.outlined.danger.color')};
 }
 
 .p-button-outlined.p-button-danger:not(:disabled):hover {
-    background: var(--p-button-outlined-danger-background-hover);
-    border-color: var(--p-button-outlined-danger-border-color);
-    color: var(--p-button-outlined-danger-text-color);
+    background: ${dt('button.outlined.danger.hover.background')};
+    border-color: ${dt('button.outlined.danger.border.color')};
+    color: ${dt('button.outlined.danger.color')};
 }
 
 .p-button-outlined.p-button-danger:not(:disabled):active {
-    background: var(--p-button-outlined-danger-background-active);
-    border-color: var(--p-button-outlined-danger-border-color);
-    color: var(--p-button-outlined-danger-text-color);
+    background: ${dt('button.outlined.danger.active.background')};
+    border-color: ${dt('button.outlined.danger.border.color')};
+    color: ${dt('button.outlined.danger.color')};
 }
 
 .p-button-outlined.p-button-contrast {
-    border-color: var(--p-button-outlined-contrast-border-color);
-    color: var(--p-button-outlined-contrast-text-color);
+    border-color: ${dt('button.outlined.contrast.border.color')};
+    color: ${dt('button.outlined.contrast.color')};
 }
 
 .p-button-outlined.p-button-contrast:not(:disabled):hover {
-    background: var(--p-button-outlined-contrast-background-hover);
-    border-color: var(--p-button-outlined-contrast-border-color);
-    color: var(--p-button-outlined-contrast-text-color);
+    background: ${dt('button.outlined.contrast.hover.background')};
+    border-color: ${dt('button.outlined.contrast.border.color')};
+    color: ${dt('button.outlined.contrast.color')};
 }
 
 .p-button-outlined.p-button-contrast:not(:disabled):active {
-    background: var(--p-button-outlined-contrast-background-active);
-    border-color: var(--p-button-outlined-contrast-border-color);
-    color: var(--p-button-outlined-contrast-text-color);
+    background: ${dt('button.outlined.contrast.active.background')};
+    border-color: ${dt('button.outlined.contrast.border.color')};
+    color: ${dt('button.outlined.contrast.color')};
 }
 
 .p-button-outlined.p-button-plain {
-    border-color: var(--p-button-outlined-plain-border-color);
-    color: var(--p-button-outlined-plain-text-color);
+    border-color: ${dt('button.outlined.plain.border.color')};
+    color: ${dt('button.outlined.plain.color')};
 }
 
 .p-button-outlined.p-button-plain:not(:disabled):hover {
-    background: var(--p-button-outlined-plain-background-hover);
-    border-color: var(--p-button-outlined-plain-border-color);
-    color: var(--p-button-outlined-plain-text-color);
+    background: ${dt('button.outlined.plain.hover.background')};
+    border-color: ${dt('button.outlined.plain.border.color')};
+    color: ${dt('button.outlined.plain.color')};
 }
 
 .p-button-outlined.p-button-plain:not(:disabled):active {
-    background: var(--p-button-outlined-plain-background-active);
-    border-color: var(--p-button-outlined-plain-border-color);
-    color: var(--p-button-outlined-plain-text-color);
+    background: ${dt('button.outlined.plain.active.background')};
+    border-color: ${dt('button.outlined.plain.border.color')};
+    color: ${dt('button.outlined.plain.color')};
 }
 
 /* Text Button */
 .p-button-text {
     background: transparent;
     border-color: transparent;
-    color: var(--p-button-text-primary-text-color);
+    color: ${dt('button.text.primary.color')};
 }
 
 .p-button-text:not(:disabled):hover {
-    background: var(--p-button-text-primary-background-hover);
+    background: ${dt('button.text.primary.hover.background')};
     border-color: transparent;
-    color: var(--p-button-text-primary-text-color);
+    color: ${dt('button.text.primary.color')};
 }
 
 .p-button-text:not(:disabled):active {
-    background: var(--p-button-text-primary-background-active);
+    background: ${dt('button.text.primary.active.background')};
     border-color: transparent;
-    color: var(--p-button-text-primary-text-color);
+    color: ${dt('button.text.primary.color')};
 }
 
 .p-button-text.p-button-secondary {
     background: transparent;
     border-color: transparent;
-    color: var(--p-button-text-secondary-text-color);
+    color: ${dt('button.text.secondary.color')};
 }
 
 .p-button-text.p-button-secondary:not(:disabled):hover {
-    background: var(--p-button-text-secondary-background-hover);
+    background: ${dt('button.text.secondary.hover.background')};
     border-color: transparent;
-    color: var(--p-button-text-secondary-text-color);
+    color: ${dt('button.text.secondary.color')};
 }
 
 .p-button-text.p-button-secondary:not(:disabled):active {
-    background: var(--p-button-text-secondary-background-active);
+    background: ${dt('button.text.secondary.active.background')};
     border-color: transparent;
-    color: var(--p-button-text-secondary-text-color);
+    color: ${dt('button.text.secondary.color')};
 }
 
 .p-button-text.p-button-success {
     background: transparent;
     border-color: transparent;
-    color: var(--p-button-text-success-text-color);
+    color: ${dt('button.text.success.color')};
 }
 
 .p-button-text.p-button-success:not(:disabled):hover {
-    background: var(--p-button-text-success-background-hover);
+    background: ${dt('button.text.success.hover.background')};
     border-color: transparent;
-    color: var(--p-button-text-success-text-color);
+    color: ${dt('button.text.success.color')};
 }
 
 .p-button-text.p-button-success:not(:disabled):active {
-    background: var(--p-button-text-success-background-active);
+    background: ${dt('button.text.success.active.background')};
     border-color: transparent;
-    color: var(--p-button-text-success-text-color);
+    color: ${dt('button.text.success.color')};
 }
 
 .p-button-text.p-button-info {
     background: transparent;
     border-color: transparent;
-    color: var(--p-button-text-info-text-color);
+    color: ${dt('button.text.info.color')};
 }
 
 .p-button-text.p-button-info:not(:disabled):hover {
-    background: var(--p-button-text-info-background-hover);
+    background: ${dt('button.text.info.hover.background')};
     border-color: transparent;
-    color: var(--p-button-text-info-text-color);
+    color: ${dt('button.text.info.color')};
 }
 
 .p-button-text.p-button-info:not(:disabled):active {
-    background: var(--p-button-text-info-background-active);
+    background: ${dt('button.text.info.active.background')};
     border-color: transparent;
-    color: var(--p-button-text-info-text-color);
+    color: ${dt('button.text.info.color')};
 }
 
 .p-button-text.p-button-warning {
     background: transparent;
     border-color: transparent;
-    color: var(--p-button-text-warn-text-color);
+    color: ${dt('button.text.warn.color')};
 }
 
 .p-button-text.p-button-warning:not(:disabled):hover {
-    background: var(--p-button-text-warn-background-hover);
+    background: ${dt('button.text.warn.hover.background')};
     border-color: transparent;
-    color: var(--p-button-text-warn-text-color);
+    color: ${dt('button.text.warn.color')};
 }
 
 .p-button-text.p-button-warning:not(:disabled):active {
-    background: var(--p-button-text-warn-background-active);
+    background: ${dt('button.text.warn.active.background')};
     border-color: transparent;
-    color: var(--p-button-text-warn-text-color);
+    color: ${dt('button.text.warn.color')};
 }
 
 .p-button-text.p-button-help {
     background: transparent;
     border-color: transparent;
-    color: var(--p-button-text-help-text-color);
+    color: ${dt('button.text.help.color')};
 }
 
 .p-button-text.p-button-help:not(:disabled):hover {
-    background: var(--p-button-text-help-background-hover);
+    background: ${dt('button.text.help.hover.background')};
     border-color: transparent;
-    color: var(--p-button-text-help-text-color);
+    color: ${dt('button.text.help.color')};
 }
 
 .p-button-text.p-button-help:not(:disabled):active {
-    background: var(--p-button-text-help-background-active);
+    background: ${dt('button.text.help.active.background')};
     border-color: transparent;
-    color: var(--p-button-text-help-text-color);
+    color: ${dt('button.text.help.color')};
 }
 
 .p-button-text.p-button-danger {
     background: transparent;
     border-color: transparent;
-    color: var(--p-button-text-danger-text-color);
+    color: ${dt('button.text.danger.color')};
 }
 
 .p-button-text.p-button-danger:not(:disabled):hover {
-    background: var(--p-button-text-danger-background-hover);
+    background: ${dt('button.text.danger.hover.background')};
     border-color: transparent;
-    color: var(--p-button-text-danger-text-color);
+    color: ${dt('button.text.danger.color')};
 }
 
 .p-button-text.p-button-danger:not(:disabled):active {
-    background: var(--p-button-text-danger-background-active);
+    background: ${dt('button.text.danger.active.background')};
     border-color: transparent;
-    color: var(--p-button-text-danger-text-color);
+    color: ${dt('button.text.danger.color')};
 }
 
 .p-button-text.p-button-plain {
     background: transparent;
     border-color: transparent;
-    color: var(--p-button-text-plain-text-color);
+    color: ${dt('button.text.plain.color')};
 }
 
 .p-button-text.p-button-plain:not(:disabled):hover {
-    background: var(--p-button-text-plain-background-hover);
+    background: ${dt('button.text.plain.hover.background')};
     border-color: transparent;
-    color: var(--p-button-text-plain-text-color);
+    color: ${dt('button.text.plain.color')};
 }
 
 .p-button-text.p-button-plain:not(:disabled):active {
-    background: var(--p-button-text-plain-background-active);
+    background: ${dt('button.text.plain.active.background')};
     border-color: transparent;
-    color: var(--p-button-text-plain-text-color);
+    color: ${dt('button.text.plain.color')};
 }
 
 /* Link Button */
 .p-button-link {
     background: transparent;
     border-color: transparent;
-    color: var(--p-button-link-text-color);
+    color: ${dt('button.link.color')};
 }
 
 .p-button-link:not(:disabled):hover {
     background: transparent;
     border-color: transparent;
-    color: var(--p-button-link-text-color-hover);
+    color: ${dt('button.link.hover.color')};
 }
 
 .p-button-link:not(:disabled):hover .p-button-label {
@@ -609,7 +609,7 @@ export default {
 .p-button-link:not(:disabled):active {
     background: transparent;
     border-color: transparent;
-    color: var(--p-button-link-text-color-active);
+    color: ${dt('button.link.active.color')};
 }
 
 .p-buttonset .p-button {
diff --git a/components/lib/themes/primeone/base/speeddial/index.js b/components/lib/themes/primeone/base/speeddial/index.js
index 187cd73a5..d3be6bd34 100644
--- a/components/lib/themes/primeone/base/speeddial/index.js
+++ b/components/lib/themes/primeone/base/speeddial/index.js
@@ -54,15 +54,15 @@ export default {
     overflow: hidden;
     width: 2.5rem;
     height: 2.5rem;
-    background: var(--p-speeddial-item-background);
-    color: var(--p-speeddial-item-text-color);
+    background: ${dt('speeddial.item.background')};
+    color: ${dt('speeddial.item.color')};
     outline-color: transparent;
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
 }
 
 .p-speeddial-action:hover {
-    background: var(--p-speeddial-item-background-hover);
-    color: var(--p-speeddial-item-text-color-hover);
+    background: ${dt('speeddial.item.hover.background')};
+    color: ${dt('speeddial.item.hover.color')};
 }
 
 .p-speeddial-circle .p-speeddial-item,
@@ -78,7 +78,7 @@ export default {
     width: 100%;
     height: 100%;
     opacity: 0;
-    background-color: var(--p-mask-background);
+    background-color: ${dt('mask.background')};
     border-radius: 6px;
     transition: opacity 150ms;
 }
diff --git a/components/lib/themes/primeone/presets/aura/button/index.js b/components/lib/themes/primeone/presets/aura/button/index.js
index d40994f3e..64d6976a6 100644
--- a/components/lib/themes/primeone/presets/aura/button/index.js
+++ b/components/lib/themes/primeone/presets/aura/button/index.js
@@ -4,390 +4,390 @@ export default {
             root: {
                 primary: {
                     background: '{primary.color}',
-                    backgroundHover: '{primary.hoverColor}',
-                    backgroundActive: '{primary.activeColor}',
+                    hoverBackground: '{primary.hoverColor}',
+                    activeBackground: '{primary.activeColor}',
                     borderColor: '{primary.color}',
-                    borderColorHover: '{primary.hoverColor}',
-                    borderColorActive: '{primary.activeColor}',
-                    textColor: '{primary.inverseColor}',
-                    textColorHover: '{primary.inverseColor}',
-                    textColorActive: '{primary.inverseColor}'
+                    hoverBorderColor: '{primary.hoverColor}',
+                    activeBorderColor: '{primary.activeColor}',
+                    color: '{primary.inverseColor}',
+                    hoverColor: '{primary.inverseColor}',
+                    activeColor: '{primary.inverseColor}'
                 },
                 secondary: {
                     background: '{surface.100}',
-                    backgroundHover: '{surface.200}',
-                    backgroundActive: '{surface.300}',
+                    hoverBackground: '{surface.200}',
+                    activeBackground: '{surface.300}',
                     borderColor: '{surface.100}',
-                    borderColorHover: '{surface.200}',
-                    borderColorActive: '{surface.300}',
-                    textColor: '{surface.600}',
-                    textColorHover: '{surface.700}',
-                    textColorActive: '{surface.800}'
+                    hoverBorderColor: '{surface.200}',
+                    activeBorderColor: '{surface.300}',
+                    color: '{surface.600}',
+                    hoverColor: '{surface.700}',
+                    activeColor: '{surface.800}'
                 },
                 info: {
                     background: '{sky.500}',
-                    backgroundHover: '{sky.600}',
-                    backgroundActive: '{sky.700}',
+                    hoverBackground: '{sky.600}',
+                    activeBackground: '{sky.700}',
                     borderColor: '{sky.500}',
-                    borderColorHover: '{sky.600}',
-                    borderColorActive: '{sky.700}',
-                    textColor: '#ffffff',
-                    textColorHover: '#ffffff',
-                    textColorActive: '#ffffff'
+                    hoverBorderColor: '{sky.600}',
+                    activeBorderColor: '{sky.700}',
+                    color: '#ffffff',
+                    hoverColor: '#ffffff',
+                    activeColor: '#ffffff'
                 },
                 success: {
                     background: '{green.500}',
-                    backgroundHover: '{green.600}',
-                    backgroundActive: '{green.700}',
+                    hoverBackground: '{green.600}',
+                    activeBackground: '{green.700}',
                     borderColor: '{green.500}',
-                    borderColorHover: '{green.600}',
-                    borderColorActive: '{green.700}',
-                    textColor: '#ffffff',
-                    textColorHover: '#ffffff',
-                    textColorActive: '#ffffff'
+                    hoverBorderColor: '{green.600}',
+                    activeBorderColor: '{green.700}',
+                    color: '#ffffff',
+                    hoverColor: '#ffffff',
+                    activeColor: '#ffffff'
                 },
                 warn: {
                     background: '{orange.500}',
-                    backgroundHover: '{orange.600}',
-                    backgroundActive: '{orange.700}',
+                    hoverBackground: '{orange.600}',
+                    activeBackground: '{orange.700}',
                     borderColor: '{orange.500}',
-                    borderColorHover: '{orange.600}',
-                    borderColorActive: '{orange.700}',
-                    textColor: '#ffffff',
-                    textColorHover: '#ffffff',
-                    textColorActive: '#ffffff'
+                    hoverBorderColor: '{orange.600}',
+                    activeBorderColor: '{orange.700}',
+                    color: '#ffffff',
+                    hoverColor: '#ffffff',
+                    activeColor: '#ffffff'
                 },
                 help: {
                     background: '{purple.500}',
-                    backgroundHover: '{purple.600}',
-                    backgroundActive: '{purple.700}',
+                    hoverBackground: '{purple.600}',
+                    activeBackground: '{purple.700}',
                     borderColor: '{purple.500}',
-                    borderColorHover: '{purple.600}',
-                    borderColorActive: '{purple.700}',
-                    textColor: '#ffffff',
-                    textColorHover: '#ffffff',
-                    textColorActive: '#ffffff'
+                    hoverBorderColor: '{purple.600}',
+                    activeBorderColor: '{purple.700}',
+                    color: '#ffffff',
+                    hoverColor: '#ffffff',
+                    activeColor: '#ffffff'
                 },
                 danger: {
                     background: '{red.500}',
-                    backgroundHover: '{red.600}',
-                    backgroundActive: '{red.700}',
+                    hoverBackground: '{red.600}',
+                    activeBackground: '{red.700}',
                     borderColor: '{red.500}',
-                    borderColorHover: '{red.600}',
-                    borderColorActive: '{red.700}',
-                    textColor: '#ffffff',
-                    textColorHover: '#ffffff',
-                    textColorActive: '#ffffff'
+                    hoverBorderColor: '{red.600}',
+                    activeBorderColor: '{red.700}',
+                    color: '#ffffff',
+                    hoverColor: '#ffffff',
+                    activeColor: '#ffffff'
                 },
                 contrast: {
                     background: '{surface.950}',
-                    backgroundHover: '{surface.900}',
-                    backgroundActive: '{surface.800}',
+                    hoverBackground: '{surface.900}',
+                    activeBackground: '{surface.800}',
                     borderColor: '{surface.950}',
-                    borderColorHover: '{surface.900}',
-                    borderColorActive: '{surface.800}',
-                    textColor: '{surface.0}',
-                    textColorHover: '{surface.0}',
-                    textColorActive: '{surface.0}'
+                    hoverBorderColor: '{surface.900}',
+                    activeBorderColor: '{surface.800}',
+                    color: '{surface.0}',
+                    hoverColor: '{surface.0}',
+                    activeColor: '{surface.0}'
                 }
             },
             outlined: {
                 primary: {
-                    backgroundHover: '{primary.50}',
-                    backgroundActive: '{primary.100}',
+                    hoverBackground: '{primary.50}',
+                    activeBackground: '{primary.100}',
                     borderColor: '{primary.200}',
-                    textColor: '{primary.color}'
+                    color: '{primary.color}'
                 },
                 secondary: {
-                    backgroundHover: '{surface.50}',
-                    backgroundActive: '{surface.100}',
+                    hoverBackground: '{surface.50}',
+                    activeBackground: '{surface.100}',
                     borderColor: '{surface.200}',
-                    textColor: '{surface.500}'
+                    color: '{surface.500}'
                 },
                 success: {
-                    backgroundHover: '{green.50}',
-                    backgroundActive: '{green.100}',
+                    hoverBackground: '{green.50}',
+                    activeBackground: '{green.100}',
                     borderColor: '{green.200}',
-                    textColor: '{green.500}'
+                    color: '{green.500}'
                 },
                 info: {
-                    backgroundHover: '{sky.50}',
-                    backgroundActive: '{sky.100}',
+                    hoverBackground: '{sky.50}',
+                    activeBackground: '{sky.100}',
                     borderColor: '{sky.200}',
-                    textColor: '{sky.500}'
+                    color: '{sky.500}'
                 },
                 warn: {
-                    backgroundHover: '{orange.50}',
-                    backgroundActive: '{orange.100}',
+                    hoverBackground: '{orange.50}',
+                    activeBackground: '{orange.100}',
                     borderColor: '{orange.200}',
-                    textColor: '{orange.500}'
+                    color: '{orange.500}'
                 },
                 help: {
-                    backgroundHover: '{purple.50}',
-                    backgroundActive: '{purple.100}',
+                    hoverBackground: '{purple.50}',
+                    activeBackground: '{purple.100}',
                     borderColor: '{purple.200}',
-                    textColor: '{purple.500}'
+                    color: '{purple.500}'
                 },
                 danger: {
-                    backgroundHover: '{red.50}',
-                    backgroundActive: '{red.100}',
+                    hoverBackground: '{red.50}',
+                    activeBackground: '{red.100}',
                     borderColor: '{red.200}',
-                    textColor: '{red.500}'
+                    color: '{red.500}'
                 },
                 contrast: {
-                    backgroundHover: '{surface.50}',
-                    backgroundActive: '{surface.100}',
+                    hoverBackground: '{surface.50}',
+                    activeBackground: '{surface.100}',
                     borderColor: '{surface.700}',
-                    textColor: '{surface.950}'
+                    color: '{surface.950}'
                 },
                 plain: {
-                    backgroundHover: '{surface.50}',
-                    backgroundActive: '{surface.100}',
+                    hoverBackground: '{surface.50}',
+                    activeBackground: '{surface.100}',
                     borderColor: '{surface.200}',
-                    textColor: '{surface.700}'
+                    color: '{surface.700}'
                 }
             },
             text: {
                 primary: {
-                    backgroundHover: '{primary.50}',
-                    backgroundActive: '{primary.100}',
-                    textColor: '{primary.color}'
+                    hoverBackground: '{primary.50}',
+                    activeBackground: '{primary.100}',
+                    color: '{primary.color}'
                 },
                 secondary: {
-                    backgroundHover: '{surface.50}',
-                    backgroundActive: '{surface.100}',
-                    textColor: '{surface.500}'
+                    hoverBackground: '{surface.50}',
+                    activeBackground: '{surface.100}',
+                    color: '{surface.500}'
                 },
                 success: {
-                    backgroundHover: '{green.50}',
-                    backgroundActive: '{green.100}',
-                    textColor: '{green.500}'
+                    hoverBackground: '{green.50}',
+                    activeBackground: '{green.100}',
+                    color: '{green.500}'
                 },
                 info: {
-                    backgroundHover: '{sky.50}',
-                    backgroundActive: '{sky.100}',
-                    textColor: '{sky.500}'
+                    hoverBackground: '{sky.50}',
+                    activeBackground: '{sky.100}',
+                    color: '{sky.500}'
                 },
                 warn: {
-                    backgroundHover: '{orange.50}',
-                    backgroundActive: '{orange.100}',
-                    textColor: '{orange.500}'
+                    hoverBackground: '{orange.50}',
+                    activeBackground: '{orange.100}',
+                    color: '{orange.500}'
                 },
                 help: {
-                    backgroundHover: '{purple.50}',
-                    backgroundActive: '{purple.100}',
-                    textColor: '{purple.600}'
+                    hoverBackground: '{purple.50}',
+                    activeBackground: '{purple.100}',
+                    color: '{purple.600}'
                 },
                 danger: {
-                    backgroundHover: '{red.50}',
-                    backgroundActive: '{red.100}',
-                    textColor: '{red.500}'
+                    hoverBackground: '{red.50}',
+                    activeBackground: '{red.100}',
+                    color: '{red.500}'
                 },
                 plain: {
-                    backgroundHover: '{surface.50}',
-                    backgroundActive: '{surface.100}',
-                    textColor: '{surface.700}'
+                    hoverBackground: '{surface.50}',
+                    activeBackground: '{surface.100}',
+                    color: '{surface.700}'
                 }
             },
             link: {
-                textColor: '{primary.color}',
-                textColorHover: '{primary.color}',
-                textColorActive: '{primary.color}'
+                color: '{primary.color}',
+                hoverColor: '{primary.color}',
+                activeColor: '{primary.color}'
             }
         },
         dark: {
             root: {
                 primary: {
                     background: '{primary.color}',
-                    backgroundHover: '{primary.hoverColor}',
-                    backgroundActive: '{primary.activeColor}',
+                    hoverBackground: '{primary.hoverColor}',
+                    activeBackground: '{primary.activeColor}',
                     borderColor: '{primary.color}',
-                    borderColorHover: '{primary.hoverColor}',
-                    borderColorActive: '{primary.activeColor}',
-                    textColor: '{primary.inverseColor}',
-                    textColorHover: '{primary.inverseColor}',
-                    textColorActive: '{primary.inverseColor}'
+                    hoverBorderColor: '{primary.hoverColor}',
+                    activeBorderColor: '{primary.activeColor}',
+                    color: '{primary.inverseColor}',
+                    hoverColor: '{primary.inverseColor}',
+                    activeColor: '{primary.inverseColor}'
                 },
                 secondary: {
                     background: '{surface.800}',
-                    backgroundHover: '{surface.700}',
-                    backgroundActive: '{surface.600}',
+                    hoverBackground: '{surface.700}',
+                    activeBackground: '{surface.600}',
                     borderColor: '{surface.800}',
-                    borderColorHover: '{surface.700}',
-                    borderColorActive: '{surface.600}',
-                    textColor: '{surface.300}',
-                    textColorHover: '{surface.200}',
-                    textColorActive: '{surface.100}'
+                    hoverBorderColor: '{surface.700}',
+                    activeBorderColor: '{surface.600}',
+                    color: '{surface.300}',
+                    hoverColor: '{surface.200}',
+                    activeColor: '{surface.100}'
                 },
                 info: {
                     background: '{sky.400}',
-                    backgroundHover: '{sky.300}',
-                    backgroundActive: '{sky.200}',
+                    hoverBackground: '{sky.300}',
+                    activeBackground: '{sky.200}',
                     borderColor: '{sky.400}',
-                    borderColorHover: '{sky.300}',
-                    borderColorActive: '{sky.200}',
-                    textColor: '{sky.950}',
-                    textColorHover: '{sky.950}',
-                    textColorActive: '{sky.950}'
+                    hoverBorderColor: '{sky.300}',
+                    activeBorderColor: '{sky.200}',
+                    color: '{sky.950}',
+                    hoverColor: '{sky.950}',
+                    activeColor: '{sky.950}'
                 },
                 success: {
                     background: '{green.400}',
-                    backgroundHover: '{green.300}',
-                    backgroundActive: '{green.200}',
+                    hoverBackground: '{green.300}',
+                    activeBackground: '{green.200}',
                     borderColor: '{green.400}',
-                    borderColorHover: '{green.300}',
-                    borderColorActive: '{green.200}',
-                    textColor: '{green.950}',
-                    textColorHover: '{green.950}',
-                    textColorActive: '{green.950}'
+                    hoverBorderColor: '{green.300}',
+                    activeBorderColor: '{green.200}',
+                    color: '{green.950}',
+                    hoverColor: '{green.950}',
+                    activeColor: '{green.950}'
                 },
                 warn: {
                     background: '{orange.400}',
-                    backgroundHover: '{orange.300}',
-                    backgroundActive: '{orange.200}',
+                    hoverBackground: '{orange.300}',
+                    activeBackground: '{orange.200}',
                     borderColor: '{orange.400}',
-                    borderColorHover: '{orange.300}',
-                    borderColorActive: '{orange.200}',
-                    textColor: '{orange.950}',
-                    textColorHover: '{orange.950}',
-                    textColorActive: '{orange.950}'
+                    hoverBorderColor: '{orange.300}',
+                    activeBorderColor: '{orange.200}',
+                    color: '{orange.950}',
+                    hoverColor: '{orange.950}',
+                    activeColor: '{orange.950}'
                 },
                 help: {
                     background: '{purple.400}',
-                    backgroundHover: '{purple.300}',
-                    backgroundActive: '{purple.200}',
+                    hoverBackground: '{purple.300}',
+                    activeBackground: '{purple.200}',
                     borderColor: '{purple.400}',
-                    borderColorHover: '{purple.300}',
-                    borderColorActive: '{purple.200}',
-                    textColor: '{purple.950}',
-                    textColorHover: '{purple.950}',
-                    textColorActive: '{purple.950}'
+                    hoverBorderColor: '{purple.300}',
+                    activeBorderColor: '{purple.200}',
+                    color: '{purple.950}',
+                    hoverColor: '{purple.950}',
+                    activeColor: '{purple.950}'
                 },
                 danger: {
                     background: '{red.400}',
-                    backgroundHover: '{red.300}',
-                    backgroundActive: '{red.200}',
+                    hoverBackground: '{red.300}',
+                    activeBackground: '{red.200}',
                     borderColor: '{red.400}',
-                    borderColorHover: '{red.300}',
-                    borderColorActive: '{red.200}',
-                    textColor: '{red.950}',
-                    textColorHover: '{red.950}',
-                    textColorActive: '{red.950}'
+                    hoverBorderColor: '{red.300}',
+                    activeBorderColor: '{red.200}',
+                    color: '{red.950}',
+                    hoverColor: '{red.950}',
+                    activeColor: '{red.950}'
                 },
                 contrast: {
                     background: '{surface.0}',
-                    backgroundHover: '{surface.100}',
-                    backgroundActive: '{surface.200}',
+                    hoverBackground: '{surface.100}',
+                    activeBackground: '{surface.200}',
                     borderColor: '{surface.0}',
-                    borderColorHover: '{surface.100}',
-                    borderColorActive: '{surface.200}',
-                    textColor: '{surface.950}',
-                    textColorHover: '{surface.950}',
-                    textColorActive: '{surface.950}'
+                    hoverBorderColor: '{surface.100}',
+                    activeBorderColor: '{surface.200}',
+                    color: '{surface.950}',
+                    hoverColor: '{surface.950}',
+                    activeColor: '{surface.950}'
                 }
             },
             outlined: {
                 primary: {
-                    backgroundHover: 'color-mix(in srgb, {primary.color}, transparent 96%)',
-                    backgroundActive: 'color-mix(in srgb, {primary.color}, transparent 84%)',
+                    hoverBackground: 'color-mix(in srgb, {primary.color}, transparent 96%)',
+                    activeBackground: 'color-mix(in srgb, {primary.color}, transparent 84%)',
                     borderColor: '{primary.900}',
-                    textColor: '{primary.color}'
+                    color: '{primary.color}'
                 },
                 secondary: {
-                    backgroundHover: 'rgba(255,255,255,0.04)',
-                    backgroundActive: 'rgba(255,255,255,0.16)',
+                    hoverBackground: 'rgba(255,255,255,0.04)',
+                    activeBackground: 'rgba(255,255,255,0.16)',
                     borderColor: '{surface.700}',
-                    textColor: '{surface.400}'
+                    color: '{surface.400}'
                 },
                 success: {
-                    backgroundHover: 'color-mix(in srgb, {green.400}, transparent 96%)',
-                    backgroundActive: 'color-mix(in srgb, {green.400}, transparent 84%)',
+                    hoverBackground: 'color-mix(in srgb, {green.400}, transparent 96%)',
+                    activeBackground: 'color-mix(in srgb, {green.400}, transparent 84%)',
                     borderColor: '{green.900}',
-                    textColor: '{green.400}'
+                    color: '{green.400}'
                 },
                 info: {
-                    backgroundHover: 'color-mix(in srgb, {sky.400}, transparent 96%)',
-                    backgroundActive: 'color-mix(in srgb, {sky.400}, transparent 84%)',
+                    hoverBackground: 'color-mix(in srgb, {sky.400}, transparent 96%)',
+                    activeBackground: 'color-mix(in srgb, {sky.400}, transparent 84%)',
                     borderColor: '{sky.900}',
-                    textColor: '{sky.400}'
+                    color: '{sky.400}'
                 },
                 warn: {
-                    backgroundHover: 'color-mix(in srgb, {orange.400}, transparent 96%)',
-                    backgroundActive: 'color-mix(in srgb, {orange.400}, transparent 84%)',
+                    hoverBackground: 'color-mix(in srgb, {orange.400}, transparent 96%)',
+                    activeBackground: 'color-mix(in srgb, {orange.400}, transparent 84%)',
                     borderColor: '{orange.900}',
-                    textColor: '{orange.400}'
+                    color: '{orange.400}'
                 },
                 help: {
-                    backgroundHover: 'color-mix(in srgb, {help.400}, transparent 96%)',
-                    backgroundActive: 'color-mix(in srgb, {help.400}, transparent 84%)',
+                    hoverBackground: 'color-mix(in srgb, {help.400}, transparent 96%)',
+                    activeBackground: 'color-mix(in srgb, {help.400}, transparent 84%)',
                     borderColor: '{purple.900}',
-                    textColor: '{purple.400}'
+                    color: '{purple.400}'
                 },
                 danger: {
-                    backgroundHover: 'color-mix(in srgb, {danger.400}, transparent 96%)',
-                    backgroundActive: 'color-mix(in srgb, {danger.400}, transparent 84%)',
+                    hoverBackground: 'color-mix(in srgb, {danger.400}, transparent 96%)',
+                    activeBackground: 'color-mix(in srgb, {danger.400}, transparent 84%)',
                     borderColor: '{red.900}',
-                    textColor: '{red.400}'
+                    color: '{red.400}'
                 },
                 contrast: {
-                    backgroundHover: '{surface.800}',
-                    backgroundActive: '{surface.700}',
+                    hoverBackground: '{surface.800}',
+                    activeBackground: '{surface.700}',
                     borderColor: '{surface.500}',
-                    textColor: '{surface.0}'
+                    color: '{surface.0}'
                 },
                 plain: {
-                    backgroundHover: '{surface.800}',
-                    backgroundActive: '{surface.700}',
+                    hoverBackground: '{surface.800}',
+                    activeBackground: '{surface.700}',
                     borderColor: '{surface.600}',
-                    textColor: '{surface.0}'
+                    color: '{surface.0}'
                 }
             },
             text: {
                 primary: {
-                    backgroundHover: 'color-mix(in srgb, {primary.color}, transparent 96%)',
-                    backgroundActive: 'color-mix(in srgb, {primary.color}, transparent 84%)',
-                    textColor: '{primary.color}'
+                    hoverBackground: 'color-mix(in srgb, {primary.color}, transparent 96%)',
+                    activeBackground: 'color-mix(in srgb, {primary.color}, transparent 84%)',
+                    color: '{primary.color}'
                 },
                 secondary: {
-                    backgroundHover: '{surface.800}',
-                    backgroundActive: '{surface.700}',
-                    textColor: '{surface.400}'
+                    hoverBackground: '{surface.800}',
+                    activeBackground: '{surface.700}',
+                    color: '{surface.400}'
                 },
                 success: {
-                    backgroundHover: 'color-mix(in srgb, {green.400}, transparent 96%)',
-                    backgroundActive: 'color-mix(in srgb, {green.400}, transparent 84%)',
-                    textColor: '{green.400}'
+                    hoverBackground: 'color-mix(in srgb, {green.400}, transparent 96%)',
+                    activeBackground: 'color-mix(in srgb, {green.400}, transparent 84%)',
+                    color: '{green.400}'
                 },
                 info: {
-                    backgroundHover: 'color-mix(in srgb, {sky.400}, transparent 96%)',
-                    backgroundActive: 'color-mix(in srgb, {sky.400}, transparent 84%)',
-                    textColor: '{sky.400}'
+                    hoverBackground: 'color-mix(in srgb, {sky.400}, transparent 96%)',
+                    activeBackground: 'color-mix(in srgb, {sky.400}, transparent 84%)',
+                    color: '{sky.400}'
                 },
                 warn: {
-                    backgroundHover: 'color-mix(in srgb, {orange.400}, transparent 96%)',
-                    backgroundActive: 'color-mix(in srgb, {orange.400}, transparent 84%)',
-                    textColor: '{orange.400}'
+                    hoverBackground: 'color-mix(in srgb, {orange.400}, transparent 96%)',
+                    activeBackground: 'color-mix(in srgb, {orange.400}, transparent 84%)',
+                    color: '{orange.400}'
                 },
                 help: {
-                    backgroundHover: 'color-mix(in srgb, {purple.400}, transparent 96%)',
-                    backgroundActive: 'color-mix(in srgb, {purple.400}, transparent 84%)',
-                    textColor: '{purple.400}'
+                    hoverBackground: 'color-mix(in srgb, {purple.400}, transparent 96%)',
+                    activeBackground: 'color-mix(in srgb, {purple.400}, transparent 84%)',
+                    color: '{purple.400}'
                 },
                 danger: {
-                    backgroundHover: 'color-mix(in srgb, {red.400}, transparent 96%)',
-                    backgroundActive: 'color-mix(in srgb, {red.400}, transparent 84%)',
-                    textColor: '{red.400}'
+                    hoverBackground: 'color-mix(in srgb, {red.400}, transparent 96%)',
+                    activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
+                    color: '{red.400}'
                 },
                 plain: {
-                    backgroundHover: '{surface.800}',
-                    backgroundActive: '{surface.700}',
-                    textColor: '{surface.0}'
+                    hoverBackground: '{surface.800}',
+                    activeBackground: '{surface.700}',
+                    color: '{surface.0}'
                 }
             },
             link: {
-                textColor: '{primary.color}',
-                textColorHover: '{primary.color}',
-                textColorActive: '{primary.color}'
+                color: '{primary.color}',
+                hoverColor: '{primary.color}',
+                activeColor: '{primary.color}'
             }
         }
     }
diff --git a/components/lib/themes/primeone/presets/aura/speeddial/index.js b/components/lib/themes/primeone/presets/aura/speeddial/index.js
index 5ed51a2d9..72dcece5c 100644
--- a/components/lib/themes/primeone/presets/aura/speeddial/index.js
+++ b/components/lib/themes/primeone/presets/aura/speeddial/index.js
@@ -3,11 +3,18 @@ export default {
         light: {
             item: {
                 background: '{surface.100}',
-                backgroundHover: '{surface.200}',
-                textColor: '{surface.600}',
-                textColorHover: '{surface.700}'
+                hoverBackground: '{surface.200}',
+                color: '{surface.600}',
+                hoverColor: '{surface.700}'
             }
         },
-        dark: {}
+        dark: {
+            item: {
+                background: '{surface.800}',
+                hoverBackground: '{surface.700}',
+                color: '{surface.300}',
+                hoverColor: '{surface.200}'
+            }
+        }
     }
 };