diff --git a/components/lib/themes/primeone/base/datatable/index.js b/components/lib/themes/primeone/base/datatable/index.js
index 9ef5b0a60..e2667a8df 100644
--- a/components/lib/themes/primeone/base/datatable/index.js
+++ b/components/lib/themes/primeone/base/datatable/index.js
@@ -22,7 +22,7 @@ export default {
 }
 
 .p-datatable .p-sortable-column .p-sortable-column-icon {
-    color: var(--p-datatable-sort-icon-color);
+    color: ${dt('datatable.sort.icon.color')};
     margin-left: 0.5rem;
     transition: color ${dt('transition.duration')};
 }
@@ -39,17 +39,17 @@ export default {
 }
 
 .p-datatable .p-sortable-column:not(.p-highlight):hover {
-    background: var(--p-datatable-header-cell-background-hover);
-    color: var(--p-datatable-header-cell-text-color-hover);
+    background: ${dt('datatable.header.cell.hover.background')};
+    color: ${dt('datatable.header.cell.hover.color')};
 }
 
 .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-    color: var(--p-datatable-sort-icon-color-hover);
+    color: ${dt('datatable.sort.icon.hover.color')};
 }
 
 .p-datatable .p-sortable-column.p-highlight {
-    background: var(--p-highlight-background);
-    color: var(--p-highlight-text-color);
+    background: ${dt('highlight.background')};
+    color: ${dt('highlight.color')};
 }
 
 .p-datatable .p-sortable-column:focus-visible {
@@ -58,7 +58,7 @@ export default {
 }
 
 .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
-    color: var(--p-highlight-text-color);
+    color: ${dt('highlight.color')};
 }
 
 .p-datatable-hoverable-rows .p-selectable-row {
@@ -95,12 +95,12 @@ export default {
 
 .p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
 .p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead {
-    background: var(--p-datatable-header-cell-background);
+    background: ${dt('datatable.header.cell.background')};
 }
 
 .p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot,
 .p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
-    background: var(--p-datatable-footer-cell-background);
+    background: ${dt('datatable.footer.cell.background')};
 }
 
 .p-datatable-flex-scrollable {
@@ -161,7 +161,7 @@ export default {
     position: absolute;
     z-index: 10;
     display: none;
-    background: var(--p-datatable-resizer-color);
+    background: ${dt('datatable.resizer.color')};
 }
 
 .p-datatable .p-row-toggler,
@@ -175,7 +175,7 @@ export default {
     position: relative;
     width: 1.75rem;
     height: 1.75rem;
-    color: var(--p-datatable-row-action-color);
+    color: ${dt('datatable.row.action.color')};
     border: 0 none;
     border-radius: 50%;
     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')};
@@ -186,8 +186,8 @@ export default {
 .p-datatable .p-row-editor-init:enabled:hover,
 .p-datatable .p-row-editor-save:enabled:hover,
 .p-datatable .p-row-editor-cancel:enabled:hover {
-    color: var(--p-datatable-row-action-color-hover);
-    background: var(--p-datatable-row-action-background-hover);
+    color: ${dt('datatable.row.action.hover.color')};
+    background: ${dt('datatable.row.action.hover.background')};
 }
 
 .p-datatable .p-row-toggler:focus-visible,
@@ -206,7 +206,7 @@ export default {
 .p-datatable-tbody > tr.p-highlight .p-row-editor-init:hover,
 .p-datatable-tbody > tr.p-highlight .p-row-editor-save:hover,
 .p-datatable-tbody > tr.p-highlight .p-row-editor-cancel:hover {
-    background: var(--p-datatable-row-action-background-hover-highlight);
+    background: ${dt('datatable.row.action.highlight.hover.background')};
     color: inherit;
 }
 
@@ -251,7 +251,7 @@ export default {
     position: relative;
     width: 1.75rem;
     height: 1.75rem;
-    color: var(--p-datatable-filter-menu-button-text-color);
+    color: ${dt('datatable.fiter.menu.button.color')};
     border: 0 none;
     background: transparent;
     border-radius: 50%;
@@ -260,20 +260,20 @@ export default {
 }
 
 .p-column-filter-menu-button:hover {
-    background: var(--p-datatable-filter-menu-button-background-hover);
-    color: var(--p-datatable-filter-menu-button-text-color-hover);
+    background: ${dt('datatable.fiter.menu.button.hover.background')};
+    color: ${dt('datatable.fiter.menu.button.hover.color')};
 }
 
 .p-column-filter-menu-button.p-column-filter-menu-button-open,
 .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
-    background: var(--p-datatable-filter-menu-button-background-open);
-    color: var(--p-datatable-filter-menu-button-text-color-open);
+    background: ${dt('datatable.fiter.menu.button.open.background')};
+    color: ${dt('datatable.fiter.menu.button.open.color')};
 }
 
 .p-column-filter-menu-button.p-column-filter-menu-button-active,
 .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
-    background: var(--p-datatable-filter-menu-button-background-active);
-    color: var(--p-datatable-filter-menu-button-text-color-active);
+    background: ${dt('datatable.fiter.menu.button.active.background')};
+    color: ${dt('datatable.fiter.menu.button.active.color')};
 }
 
 .p-column-filter-menu-button:focus-visible {
@@ -291,7 +291,7 @@ export default {
     position: relative;
     width: 1.75rem;
     height: 1.75rem;
-    color: var(--p-datatable-filter-clear-button-text-color);
+    color: ${dt('datatable.fiter.clear.button.color')};
     border: 0 none;
     background: transparent;
     border-radius: 50%;
@@ -300,8 +300,8 @@ export default {
 }
 
 .p-column-filter-clear-button:hover {
-    background: var(--p-datatable-filter-clear-button-background-hover);
-    color: var(--p-datatable-filter-clear-button-text-color-hover);
+    background: ${dt('datatable.fiter.clear.button.hover.background')};
+    color: ${dt('datatable.fiter.clear.button.hover.color')};
 }
 
 .p-column-filter-clear-button:focus-visible {
@@ -326,7 +326,7 @@ export default {
 
 .p-column-filter-constraint {
     padding: 0;
-    border-bottom: 1px solid var(--p-datatable-filter-constraint-border-color);
+    border-bottom: 1px solid ${dt('datatable.fiter.contstraint.border.color')};
 }
 
 .p-column-filter-constraint:last-child {
@@ -346,9 +346,9 @@ export default {
 }
 
 .p-column-filter-overlay-menu {
-    background: var(--p-datatable-filter-overlay-background);
-    color: var(--p-datatable-filter-overlay-text-color);
-    border: 1px solid var(--p-datatable-filter-overlay-border-color);
+    background: ${dt('datatable.fiter.overlay.background')};
+    color: ${dt('datatable.fiter.overlay.color')};
+    border: 1px solid ${dt('datatable.fiter.overlay.border.color')};
     border-radius: ${dt('rounded.base')};
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
     min-width: 12.5rem;
@@ -409,18 +409,18 @@ export default {
 }
 
 .p-datatable-header {
-    background: var(--p-datatable-header-background);
-    color: var(--p-datatable-header-text-color);
-    border: 1px solid var(--p-datatable-header-border-color);
+    background: ${dt('datatable.header.background')};
+    color: ${dt('datatable.header.color')};
+    border: 1px solid ${dt('datatable.header.border.color')};
     border-width: 0 0 1px 0;
     padding: 0.75rem 1rem;
     font-weight: 600;
 }
 
 .p-datatable-footer {
-    background: var(--p-datatable-header-background);
-    color: var(--p-datatable-header-text-color);
-    border: 1px solid var(--p-datatable-header-border-color);
+    background: ${dt('datatable.footer.background')};
+    color: ${dt('datatable.footer.color')};
+    border: 1px solid ${dt('datatable.footer.border.color')};
     border-width: 0 0 1px 0;
     padding: 0.75rem 1rem;
     font-weight: 600;
@@ -429,44 +429,44 @@ export default {
 .p-datatable-thead > tr > th {
     text-align: left;
     padding: 0.75rem 1rem;
-    background: var(--p-datatable-header-cell-background);
-    border: 1px solid var(--p-datatable-header-cell-border-color);
+    background: ${dt('datatable.header.cell.background')};
+    border: 1px solid ${dt('datatable.header.cell.border.color')};
     border-width: 0 0 1px 0;
-    color: var(--p-datatable-header-cell-text-color);
+    color: ${dt('datatable.header.cell.color')};
     font-weight: 600;
     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-datatable-tbody > tr {
     outline-color: transparent;
-    background: var(--p-datatable-row-background);
-    color: var(--p-datatable-row-text-color);
+    background: ${dt('datatable.row.background')};
+    color: ${dt('datatable.row.color')};
     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-datatable-tbody > tr > td {
     text-align: left;
-    border: 1px solid var(--p-datatable-body-cell-border-color);
+    border: 1px solid ${dt('datatable.body.cell.border.color')};
     border-width: 0 0 1px 0;
     padding: 0.75rem 1rem;
 }
 
 .p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
-    background: var(--p-datatable-row-background-hover);
-    color: var(--p-datatable-row-text-color-hover);
+    background: ${dt('datatable.row.hover.background')};
+    color: ${dt('datatable.row.hover.color')};
 }
 
 .p-datatable-tbody > tr.p-highlight {
-    background: var(--p-highlight-background);
-    color: var(--p-highlight-text-color);
+    background: ${dt('highlight.background')};
+    color: ${dt('highlight.color')};
 }
 
 .p-datatable-tbody > tr:has(+ .p-highlight) > td {
-    border-bottom-color: var(--p-datatable-body-cell-border-color-selected);
+    border-bottom-color: ${dt('datatable.body.cell.selected.border.color')};
 }
 
 .p-datatable-tbody > tr.p-highlight > td {
-    border-bottom-color: var(--p-datatable-body-cell-border-color-selected);
+    border-bottom-color: ${dt('datatable.body.cell.selected.border.color')};
 }
 
 .p-datatable-tbody > tr:focus-visible {
@@ -482,19 +482,19 @@ export default {
 .p-datatable-tfoot > tr > td {
     text-align: left;
     padding: 0.75rem 1rem;
-    border: 1px solid var(--p-datatable-footer-cell-border-color);
+    border: 1px solid ${dt('datatable.footer.cell.border.color')};
     border-width: 0 0 1px 0;
     font-weight: 600;
-    color: var(--p-datatable-footer-cell-text-color);
-    background: var(--p-datatable-footer-cell-background);
+    color: ${dt('datatable.footer.cell.color')};
+    background: ${dt('datatable.footer.cell.background')};
 }
 
 .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-    box-shadow: inset 0 2px 0 0 var(--p-datatable-drop-point-color);
+    box-shadow: inset 0 2px 0 0 ${dt('datatable.drop.point.color')};
 }
 
 .p-datatable-tbody>tr.p-datatable-dragpoint-bottom > td {
-    box-shadow: inset 0 -2px 0 0 var(--p-datatable-drop-point-color);
+    box-shadow: inset 0 -2px 0 0 ${dt('datatable.drop.point.color')};
 }
 
 .p-datatable-loading-icon {
@@ -576,12 +576,12 @@ export default {
 }
 
 .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
-    background: var(--p-datatable-row-background-striped);
+    background: ${dt('datatable.row.striped.background')});
 }
 
 .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
-    background: var(--p-highlight-background);
-    color: var(--p-highlight-text-color);
+    background: ${dt('highlight.background')});
+    color: ${dt('highlight.color')});
 }
 
 .p-datatable.p-datatable-sm .p-datatable-header {
diff --git a/components/lib/themes/primeone/base/dataview/index.js b/components/lib/themes/primeone/base/dataview/index.js
index d50b2a84e..38669b774 100644
--- a/components/lib/themes/primeone/base/dataview/index.js
+++ b/components/lib/themes/primeone/base/dataview/index.js
@@ -11,25 +11,25 @@ export default {
 }
 
 .p-dataview-header {
-    background: var(--p-dataview-header-background);
-    color: var(--p-dataview-header-text-color);
-    border: 1px solid var(--p-dataview-header-border-color);
+    background: ${dt('dataview.header.background')};
+    color: ${dt('dataview.header.color')};
+    border: 1px solid ${dt('dataview.header.border.color')};
     border-width: 0 0 1px 0;
     padding: 0.75rem 1rem;
     font-weight: 600;
 }
 
 .p-dataview-content {
-    background: var(--p-dataview-content-background);
-    color: var(--p-dataview-content-text-color);
+    background: ${dt('dataview.content.background')};
+    color: ${dt('dataview.content.color')};
     border: 0 none;
     padding: 0;
 }
 
 .p-dataview-footer {
-    background: var(--p-dataview-footer-background);
-    color: var(--p-dataview-footer-text-color);
-    border: 1px solid var(--p-dataview-footer-border-color);
+    background: ${dt('dataview.footer.background')};
+    color: ${dt('dataview.footer.color')};
+    border: 1px solid ${dt('dataview.footer.border.color')};
     border-width: 0 0 1px 0;
     padding: 0.75rem 1rem;
     font-weight: 600;
diff --git a/components/lib/themes/primeone/base/orderlist/index.js b/components/lib/themes/primeone/base/orderlist/index.js
index 2e706ec66..27e11b4dc 100644
--- a/components/lib/themes/primeone/base/orderlist/index.js
+++ b/components/lib/themes/primeone/base/orderlist/index.js
@@ -14,13 +14,13 @@ export default {
 
 .p-orderlist-list-container {
     flex: 1 1 auto;
-    background: var(--p-orderlist-list-background);
-    border: 1px solid var(--p-orderlist-list-border-color);
+    background: ${dt('orderlist.list.background')};
+    border: 1px solid ${dt('orderlist.list.border.color')};
     border-radius: ${dt('rounded.base')};
 }
 
 .p-orderlist .p-orderlist-header {
-    color: var(--p-orderlist-header-text-color);
+    color: ${dt('orderlist.header.color')};
     border: 0 none;
     padding: 0.75rem 1rem 0.5rem 1rem;
     font-weight: 600;
@@ -45,8 +45,8 @@ export default {
     margin: 2px 0;
     border-radius: ${dt('rounded.base')};
     border: 0 none;
-    color: var(--p-orderlist-item-text-color);
-    background: var(--p-orderlist-item-background);
+    color: ${dt('orderlist.item.color')};
+    background: ${dt('orderlist.item.background')};
     outline-color: transparent;
     transition: transform ${dt('transition.duration')}, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
 }
@@ -60,47 +60,47 @@ export default {
 }
 
 .p-orderlist-item:not(.p-highlight):hover {
-    color: var(--p-orderlist-item-text-color-focus);
-    background: var(--p-orderlist-item-background-focus);
+    color: ${dt('orderlist.item.focus.color')};
+    background: ${dt('orderlist.item.focus.background')};
 }
 
 .p-orderlist-item.p-focus {
-    color: var(--p-orderlist-item-text-color-focus);
-    background: var(--p-orderlist-item-background-focus);
+    color: ${dt('orderlist.item.focus.color')};
+    background: ${dt('orderlist.item.focus.background')};
 }
 
 .p-orderlist-item.p-highlight {
-    background: var(--p-highlight-background);
-    color: var(--p-highlight-text-color);
+    color: ${dt('highlight.color')};
+    background: ${dt('highlight.background')};
 }
 
 .p-orderlist-item.p-highlight.p-focus {
-    background: var(--p-highlight-background-focus);
-    color: var(--p-highlight-text-color-focus);
+    color: ${dt('highlight.focus.color')};
+    background: ${dt('highlight.focus.background')};
 }
 
 .p-orderlist-controls .p-button {
-    background: var(--p-orderlist-control-background);
-    border: 1px solid var(--p-orderlist-control-border-color);
-    color: var(--p-order-listcontrol-text-color);
+    background: ${dt('orderlist.control.background')};
+    border: 1px solid ${dt('orderlist.control.border.color')};
+    color: ${dt('orderlist.control.color')};
     outline-color: transparent;
     transition: opacity ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')};
 }
 
 .p-orderlist-controls .p-button:not(:disabled):hover {
-    background: var(--p-orderlist-control-background-hover);
-    border: 1px solid var(--p-orderlist-control-border-color-hover);
-    color: var(--p-order-listcontrol-text-color-hover);
+    background: ${dt('orderlist.control.hover.background')};
+    border: 1px solid ${dt('orderlist.control.hover.border.color')};
+    color: ${dt('orderlist.control.hover.color')};
 }
 
 .p-orderlist-controls .p-button:not(:disabled):active {
-    background: var(--p-orderlist-control-background-active);
-    border: 1px solid var(--p-orderlist-control-border-color-active);
-    color: var(--p-order-listcontrol-text-color-active);
+    background: ${dt('orderlist.control.active.background')};
+    border: 1px solid ${dt('orderlist.control.active.border.color')};
+    color: ${dt('orderlist.control.hover.active')};
 }
 
 .p-orderlist-controls .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('focus.ring.color')};
     outline-offset: ${dt('focus.ring.offset')};
 }
 `
diff --git a/components/lib/themes/primeone/base/organizationchart/index.js b/components/lib/themes/primeone/base/organizationchart/index.js
index f38b34f27..86b06db9b 100644
--- a/components/lib/themes/primeone/base/organizationchart/index.js
+++ b/components/lib/themes/primeone/base/organizationchart/index.js
@@ -15,9 +15,9 @@ export default {
 .p-organizationchart-node-content {
     display: inline-block;
     position: relative;
-    border: 1px solid var(--p-organizationchart-node-border-color);
-    background: var(--p-organizationchart-node-background);
-    color: var(--p-organizationchart-node-text-color);
+    border: 1px solid ${dt('organizationchart.node.border.color')};
+    background: ${dt('organizationchart.node.background')};
+    color: ${dt('organizationchart.node.color')};
     padding: 0.75rem 1rem;
     border-radius: ${dt('rounded.base')};
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
@@ -28,13 +28,13 @@ export default {
 }
 
 .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-    background: var(--p-organizationchart-node-background-hover);
-    color: var(--p-organizationchart-node-text-color-hover);
+    background: ${dt('organizationchart.node.hover.background')};
+    color: ${dt('organizationchart.node.hover.color')};
 }
 
 .p-organizationchart-node-content.p-highlight {
-    background: var(--p-highlight-background);
-    color: var(--p-highlight-text-color);
+    background: ${dt('highlight.background')};
+    color: ${dt('highlight.color')};
 }
 
 .p-organizationchart-node-content .p-node-toggler {
@@ -48,10 +48,10 @@ export default {
     width: 1.5rem;
     height: 1.5rem;
     text-decoration: none;
-    background: var(--p-organizationchart-toggle-icon-background);
-    color: var(--p-organizationchart-toggle-icon-color);
+    background: ${dt('organizationchart.toggle.icon.background')};
+    color: ${dt('organizationchart.toggle.icon.color')};
     border-radius: 50%;
-    border: 1px solid var(--p-organizationchart-toggle-icon-border-color);
+    border: 1px solid ${dt('organizationchart.toggle.icon.border.color')};
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -73,22 +73,22 @@ export default {
     margin: 0 auto;
     height: 20px;
     width: 1px;
-    background: var(--p-organizationchart-connector-color);
+    background: ${dt('organizationchart.connector.color')};
 }
 
 .p-organizationchart-line-right {
     border-radius: 0;
-    border-left: 1px solid var(--p-organizationchart-connector-color);
+    border-left: 1px solid ${dt('organizationchart.connector.color')};
     border-top-left-radius: ${dt('rounded.base')};
 }
 
 .p-organizationchart-line-left {
     border-radius: 0;
-    border-right: 1px solid var(--p-organizationchart-connector-color);
+    border-right: 1px solid ${dt('organizationchart.connector.color')};
 }
 
 .p-organizationchart-line-top {
-    border-top: 1px solid var(--p-organizationchart-connector-color);
+    border-top: 1px solid ${dt('organizationchart.connector.color')};
 }
 
 .p-organizationchart-selectable-node {
@@ -104,7 +104,7 @@ export default {
 }
 
 .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) {
-    border-left: 1px solid var(--p-organizationchart-connector-color);
+    border-left: 1px solid ${dt('organizationchart.connector.color')};
     border-top-left-radius: ${dt('rounded.base')};
 }
 `
diff --git a/components/lib/themes/primeone/base/paginator/index.js b/components/lib/themes/primeone/base/paginator/index.js
index 8bbacd987..6b64969c4 100644
--- a/components/lib/themes/primeone/base/paginator/index.js
+++ b/components/lib/themes/primeone/base/paginator/index.js
@@ -5,8 +5,8 @@ export default {
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
-    background: var(--p-paginator-background);
-    color: var(--p-paginator-text-color);
+    background: ${dt('paginator.background')};
+    color: ${dt('paginator.color')};
     border: 0 none;
     padding: 0.5rem 1rem;
     border-radius: ${dt('rounded.base')};
@@ -36,7 +36,7 @@ export default {
     position: relative;
     background: transparent;
     border: 0 none;
-    color: var(--p-paginator-navigator-color);
+    color: ${dt('paginator.navigator.color')};
     min-width: 2.5rem;
     height: 2.5rem;
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
@@ -48,12 +48,12 @@ export default {
 .p-paginator-prev:not(.p-disabled):hover,
 .p-paginator-next:not(.p-disabled):hover,
 .p-paginator-last:not(.p-disabled):hover {
-    background: var(--p-paginator-navigator-background-hover);
-    color: var(--p-paginator-navigator-color-hover);
+    background: ${dt('paginator.navigator.hover.background')};
+    color: ${dt('paginator.navigator.hover.color')};
 }
 
 .p-paginator-current {
-    color: var(--p-paginator-current-page-report-text-color);
+    color: ${dt('paginator.current.page.report.color')};
 }
 
 .p-paginator-pages {
@@ -63,8 +63,8 @@ export default {
 }
 
 .p-paginator-page.p-highlight {
-    background: var(--p-highlight-background);
-    color: var(--p-highlight-text-color);
+    background: ${dt('highlight.background')};
+    color: ${dt('highlight.color')};
 }
 
 .p-paginator-page-input .p-inputtext {
diff --git a/components/lib/themes/primeone/base/picklist/index.js b/components/lib/themes/primeone/base/picklist/index.js
index 41b942876..23ac0fcda 100644
--- a/components/lib/themes/primeone/base/picklist/index.js
+++ b/components/lib/themes/primeone/base/picklist/index.js
@@ -14,13 +14,13 @@ export default {
 
 .p-picklist-list-wrapper {
     flex: 1 1 50%;
-    background: var(--p-picklist-list-background);
-    border: 1px solid var(--p-picklist-list-border-color);
-    border-radius: var(--p-picklist-base);
+    background: ${dt('picklist.list.background')};
+    border: 1px solid ${dt('picklist.list.border.color')};
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-picklist .p-picklist-header {
-    color: var(--p-picklist-header-text-color);
+    color: ${dt('picklist.header.color')};
     border: 0 none;
     padding: 0.75rem 1rem 0.5rem 1rem;
     font-weight: 600;
@@ -45,8 +45,8 @@ export default {
     margin: 2px 0;
     border-radius: ${dt('rounded.base')};
     border: 0 none;
-    color: var(--p-picklist-item-text-color);
-    background: var(--p-picklist-item-background);
+    color: ${dt('picklist.item.color')};
+    background: ${dt('picklist.item.background')};
     outline-color: transparent;
     transition: transform ${dt('transition.duration')}, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
 }
@@ -60,47 +60,47 @@ export default {
 }
 
 .p-picklist-item:not(.p-highlight):hover {
-    color: var(--p-picklist-item-text-color-focus);
-    background: var(--p-picklist-item-background-focus);
+    color: ${dt('picklist.item.focus.color')};
+    background: ${dt('picklist.item.focus.background')};
 }
 
 .p-picklist-item.p-focus {
-    color: var(--p-picklist-item-text-color-focus);
-    background: var(--p-picklist-item-background-focus);
+    color: ${dt('picklist.item.focus.color')};
+    background: ${dt('picklist.item.focus.background')};
 }
 
 .p-picklist-item.p-highlight {
-    background: var(--p-highlight-background);
-    color: var(--p-highlight-text-color);
+    color: ${dt('highlight.color')};
+    background: ${dt('highlight.background')};
 }
 
 .p-picklist-item.p-highlight.p-focus {
-    background: var(--p-highlight-background-focus);
-    color: var(--p-highlight-text-color-focus);
+    color: ${dt('highlight.focus.color')};
+    background: ${dt('highlight.focus.background')};
 }
 
 .p-picklist-buttons .p-button {
-    background: var(--p-picklist-control-background);
-    border: 1px solid var(--p-picklist-control-border-color);
-    color: var(--p-order-listcontrol-text-color);
+    background: ${dt('picklist.control.background')};
+    border: 1px solid ${dt('picklist.control.border.color')};
+    color: ${dt('picklist.control.color')};
     outline-color: transparent;
     transition: opacity ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')};
 }
 
 .p-picklist-buttons .p-button:not(:disabled):hover {
-    background: var(--p-picklist-control-background-hover);
-    border: 1px solid var(--p-picklist-control-border-color-hover);
-    color: var(--p-order-listcontrol-text-color-hover);
+    background: ${dt('picklist.control.hover.background')};
+    border: 1px solid ${dt('picklist.control.hover.border.color')};
+    color: ${dt('picklist.control.hover.color')};
 }
 
 .p-picklist-buttons .p-button:not(:disabled):active {
-    background: var(--p-picklist-control-background-active);
-    border: 1px solid var(--p-picklist-control-border-color-active);
-    color: var(--p-order-listcontrol-text-color-active);
+    background: ${dt('picklist.control.active.background')};
+    border: 1px solid ${dt('picklist.control.active.border.color')};
+    color: ${dt('picklist.control.active.color')};
 }
 
 .p-picklist-buttons .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('focus.ring.color')};
     outline-offset: ${dt('focus.ring.offset')};
 }
 `
diff --git a/components/lib/themes/primeone/base/timeline/index.js b/components/lib/themes/primeone/base/timeline/index.js
index 0f9dc36a1..4bfa9acc6 100644
--- a/components/lib/themes/primeone/base/timeline/index.js
+++ b/components/lib/themes/primeone/base/timeline/index.js
@@ -88,11 +88,11 @@ export default {
     justify-content: center;
     position: relative;
     align-self: baseline;
-    border: 2px solid var(--p-timeline-marker-border-color);
+    border: 2px solid ${dt('timeline.marker.border.color')};
     border-radius: 50%;
     width: 1.125rem;
     height: 1.125rem;
-    background-color: var(--p-timeline-marker-background);
+    background-color: ${dt('timeline.marker.background')};
 }
 
 .p-timeline-event-marker::before {
@@ -100,7 +100,7 @@ export default {
     border-radius: 50%;
     width: 0.375rem;
     height: 0.375rem;
-    background-color: var(--p-timeline-marker-content-color);
+    background: ${dt('timeline.marker.content.color')};
 }
 
 .p-timeline-event-marker::after {
@@ -114,7 +114,7 @@ export default {
 
 .p-timeline-event-connector {
     flex-grow: 1;
-    background-color: var(--p-timeline-connector-color);
+    background-color: ${dt('timeline.connector.color')};
 }
 
 .p-timeline-horizontal {
diff --git a/components/lib/themes/primeone/base/tree/index.js b/components/lib/themes/primeone/base/tree/index.js
index cd5fa0856..84aa55542 100644
--- a/components/lib/themes/primeone/base/tree/index.js
+++ b/components/lib/themes/primeone/base/tree/index.js
@@ -1,8 +1,8 @@
 export default {
     css: ({ dt }) => `
 .p-tree {
-    background: var(--p-tree-background);
-    color: var(--p-tree-text-color);
+    background: ${dt('tree.background')};
+    color: ${dt('tree.color')};
     border-radius: ${dt('rounded.base')};
     border: 0 none;
     padding: 1rem;
@@ -35,7 +35,7 @@ export default {
     display: flex;
     align-items: center;
     outline-color: transparent;
-    color: var(--p-tree-node-text-color);
+    color: ${dt('tree.node.color')};
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
 }
 
@@ -45,8 +45,8 @@ export default {
 }
 
 .p-treenode-content.p-highlight {
-    background: var(--p-highlight-background);
-    color: var(--p-highlight-text-color);
+    background: ${dt('highlight.background')};
+    color: ${dt('highlight.color')};
 }
 
 .p-tree-toggler {
@@ -61,7 +61,7 @@ export default {
     margin-right: 0.5rem;
     width: 1.75rem;
     height: 1.75rem;
-    color: var(--p-tree-toggle-color);
+    color: ${dt('tree.toggle.color')};
     border: 0 none;
     background: transparent;
     border-radius: 50%;
@@ -70,8 +70,8 @@ export default {
 }
 
 .p-tree-toggler:enabled:hover {
-    background: var(--p-tree-toggle-background-hover);
-    color: var(--p-tree-toggle-color-hover);
+    background: ${dt('tree.toggle.hover.background')};
+    color: ${dt('tree.toggle.hover.color')};
 }
 
 .p-treenode-content.p-highlight .p-tree-toggler,
@@ -80,20 +80,20 @@ export default {
 }
 
 .p-treenode-content.p-highlight .p-tree-toggler:hover {
-    background: var(--p-tree-toggle-background-hover-highlight);
+    background: ${dt('tree.toggle.highlight.hover.background')};
 }
 
 .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
-    background: var(--p-tree-node-background-hover);
-    color: var(--p-tree-node-text-color-hover);
+    background: ${dt('tree.node.hover.background')};
+    color: ${dt('tree.node.hover.color')};
 }
 
 .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover .p-tree-toggler {
-    color: var(--p-tree-toggle-color-hover);
+    color: ${dt('tree.toggle.hover.color')};
 }
 
 .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover .p-treenode-icon {
-    color: var(--p-tree-node-icon-color-hover);
+    color: ${dt('tree.icon.hover.color')};
 }
 
 .p-treenode-children {
@@ -118,7 +118,7 @@ export default {
 
 .p-treenode-icon {
     margin-right: 0.5rem;
-    color: var(--p-tree-node-icon-color);
+    color: ${dt('tree.icon.color')};
     transition: color ${dt('transition.duration')};
 }
 
@@ -127,7 +127,7 @@ export default {
 }
 
 .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
-    color: var(--p-tree-indeterminate-color);
+    color: ${dt('tree.indeterminate.color')};
 }
 
 .p-tree-filter {
diff --git a/components/lib/themes/primeone/base/treetable/index.js b/components/lib/themes/primeone/base/treetable/index.js
index e5e5d3bf1..3a36129be 100644
--- a/components/lib/themes/primeone/base/treetable/index.js
+++ b/components/lib/themes/primeone/base/treetable/index.js
@@ -23,7 +23,7 @@ export default {
 }
 
 .p-treetable .p-sortable-column .p-sortable-column-icon {
-    color: var(--p-treetable-sort-icon-color);
+    color: ${dt('treetable.sort.icon.color')};
     margin-left: 0.5rem;
     transition: color ${dt('transition.duration')};
 }
@@ -40,17 +40,17 @@ export default {
 }
 
 .p-treetable .p-sortable-column:not(.p-highlight):hover {
-    background: var(--p-treetable-header-cell-background-hover);
-    color: var(--p-treetable-header-cell-text-color-hover);
+    background: ${dt('treetable.header.cell.hover.background')};
+    color: ${dt('treetable.header.cell.hover.color')};
 }
 
 .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-    color: var(--p-treetable-sort-icon-color-hover);
+    color: ${dt('treetable.sort.icon.hover.color')};
 }
 
 .p-treetable .p-sortable-column.p-highlight {
-    background: var(--p-highlight-background);
-    color: var(--p-highlight-text-color);
+    background: ${dt('highlight.background')};
+    color: ${dt('highlight.color')};
 }
 
 .p-treetable .p-sortable-column:focus-visible {
@@ -59,7 +59,7 @@ export default {
 }
 
 .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
-    color: var(--p-highlight-text-color);
+    color: ${dt('highlight.color')};
 }
 
 .p-treetable-responsive-scroll > .p-treetable-wrapper {
@@ -112,7 +112,7 @@ export default {
     position: absolute;
     z-index: 10;
     display: none;
-    background: var(--p-treetable-resizer-color);
+    background: ${dt('treetable.resizer.color')};
 }
 
 .p-treetable .p-treetable-loading-overlay {
@@ -200,11 +200,11 @@ export default {
 }
 
 .p-treetable .p-treetable-scrollable-header {
-    background: var(--p-treetable-header-background);
+    background: ${dt('treetable.header.background')};
 }
 
 .p-treetable .p-treetable-scrollable-footer {
-    background: var(--p-treetable-footer-background);
+    background: ${dt('treetable.footer.background')};
 }
 
 .p-treetable .p-paginator-top {
@@ -218,18 +218,18 @@ export default {
 }
 
 .p-treetable-header {
-    background: var(--p-treetable-header-background);
-    color: var(--p-treetable-header-text-color);
-    border: 1px solid var(--p-treetable-header-border-color);
+    background: ${dt('treetable.header.background')};
+    color: ${dt('treetable.header.color')};
+    border: 1px solid ${dt('treetable.header.border.color')};
     border-width: 0 0 1px 0;
     padding: 0.75rem 1rem;
     font-weight: 600;
 }
 
 .p-treetable-footer {
-    background: var(--p-treetable-header-background);
-    color: var(--p-treetable-header-text-color);
-    border: 1px solid var(--p-treetable-header-border-color);
+    background: ${dt('treetable.footer.background')};
+    color: ${dt('treetable.footer.color')};
+    border: 1px solid ${dt('treetable.footer.border.color')};
     border-width: 0 0 1px 0;
     padding: 0.75rem 1rem;
     font-weight: 600;
@@ -238,44 +238,44 @@ export default {
 .p-treetable-thead > tr > th {
     text-align: left;
     padding: 0.75rem 1rem;
-    background: var(--p-treetable-header-cell-background);
-    border: 1px solid var(--p-treetable-header-cell-border-color);
+    background: ${dt('treetable.header.cell.background')};
+    border: 1px solid ${dt('treetable.header.cell.border.color')};
     border-width: 0 0 1px 0;
-    color: var(--p-treetable-header-cell-text-color);
+    color: ${dt('treetable.header.cell.color')});
     font-weight: 600;
     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-treetable-tbody > tr {
     outline-color: transparent;
-    background: var(--p-treetable-row-background);
-    color: var(--p-treetable-row-text-color);
+    background: ${dt('treetable.row.background')};
+    color: ${dt('treetable.row.color')};
     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-treetable-tbody > tr > td {
     text-align: left;
-    border: 1px solid var(--p-treetable-body-cell-border-color);
+    border: 1px solid ${dt('treetable.body.cell.border.color')};
     border-width: 0 0 1px 0;
     padding: 0.75rem 1rem;
 }
 
 .p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
-    background: var(--p-treetable-row-background-hover);
-    color: var(--p-treetable-row-text-color-hover);
+    background: ${dt('treetable.row.hover.background')};
+    color: ${dt('treetable.row.hover.color')};
 }
 
 .p-treetable-tbody > tr.p-highlight {
-    background: var(--p-highlight-background);
-    color: var(--p-highlight-text-color);
+    background: ${dt('highlight.background')};
+    color: ${dt('highlight.color')};
 }
 
 .p-treetable-tbody > tr:has(+ .p-highlight) > td {
-    border-bottom-color: var(--p-treetable-body-cell-border-color-selected);
+    border-bottom-color: ${dt('treetable.body.cell.selected.border.color')});
 }
 
 .p-treetable-tbody > tr.p-highlight > td {
-    border-bottom-color: var(--p-treetable-body-cell-border-color-selected);
+    border-bottom-color: ${dt('treetable.body.cell.selected.border.color')});
 }
 
 .p-treetable-tbody > tr:focus-visible {
@@ -294,7 +294,7 @@ export default {
     position: relative;
     width: 1.75rem;
     height: 1.75rem;
-    color: var(--p-treetable-toggle-color);
+    color: ${dt('treetable.toggle.color')};
     border: 0 none;
     background: transparent;
     border-radius: 50%;
@@ -313,16 +313,16 @@ export default {
 }
 
 .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon {
-    color: var(--p-treetable-indeterminate-color);
+    color: ${dt('treetable.indeterminate.color')};
 }
 
 .p-treetable-toggler:enabled:hover {
-    background: var(--p-treetable-toggle-background-hover);
-    color: var(--p-treetable-toggle-color-hover);
+    background: ${dt('treetable.toggle.hover.background')};
+    color: ${dt('treetable.toggle.hover.color')};
 }
 
 .p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
-    color: var(--p-treetable-toggle-color-hover);
+    color: ${dt('treetable.toggle.hover.color')};
     background: transparent;
 }
 
@@ -331,18 +331,18 @@ export default {
 }
 
 .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
-    background: var(--p-treetable-toggle-background-hover-highlight);
+    background: ${dt('treetable.toggle.highlight.hover.background')};
     color: inherit;
 }
 
 .p-treetable-tfoot > tr > td {
     text-align: left;
     padding: 0.75rem 1rem;
-    border: 1px solid var(--p-treetable-footer-cell-border-color);
+    border: 1px solid ${dt('treetable.footer.cell.border.color')};
     border-width: 0 0 1px 0;
     font-weight: 600;
-    color: var(--p-treetable-footer-cell-text-color);
-    background: var(--p-treetable-footer-cell-background);
+    color: ${dt('treetable.footer.cell.color')};
+    background: ${dt('treetable.footer.cell.background')};
 }
 
 .p-treetable .p-treetable-loading-icon {
diff --git a/components/lib/themes/primeone/presets/aura/datatable/index.js b/components/lib/themes/primeone/presets/aura/datatable/index.js
index 77fe45709..3f8be9157 100644
--- a/components/lib/themes/primeone/presets/aura/datatable/index.js
+++ b/components/lib/themes/primeone/presets/aura/datatable/index.js
@@ -4,69 +4,69 @@ export default {
             header: {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             },
             headerCell: {
                 background: '{surface.0}',
-                backgroundHover: '{surface.100}',
+                hoverBackground: '{surface.100}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.700}',
-                textColorHover: '{surface.800}'
+                color: '{surface.700}',
+                hoverColor: '{surface.800}'
             },
             row: {
                 background: '{surface.0}',
-                backgroundStriped: '{surface.50}',
-                backgroundHover: '{surface.100}',
-                textColor: '{surface.700}',
-                textColorHover: '{surface.800}'
+                stripedBackground: '{surface.50}',
+                hoverBackground: '{surface.100}',
+                color: '{surface.700}',
+                hoverColor: '{surface.800}'
             },
             bodyCell: {
                 borderColor: '{surface.200}',
-                borderColorSelected: '{primary.100}'
+                selectedBorderColor: '{primary.100}'
             },
             footerCell: {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             },
             footer: {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             },
             dropPointColor: '{primary.color}',
             resizerColor: '{primary.color}',
             sortIcon: {
                 color: '{surface.500}',
-                colorHover: '{surface.600}'
+                hoverColor: '{surface.600}'
             },
             rowAction: {
-                backgroundHover: '{surface.100}',
-                backgroundHoverHighlight: '{surface.0}',
+                hoverBackground: '{surface.100}',
+                highlightHoverBackground: '{surface.0}',
                 color: '{surface.500}',
-                colorHover: '{surface.500}'
+                hoverColor: '{surface.500}'
             },
             filter: {
                 menuButton: {
-                    backgroundHover: '{surface.100}',
-                    backgroundOpen: '{surface.100}',
-                    backgroundActive: '{highlight.background}',
-                    textColor: '{surface.500}',
-                    textColorOpen: '{surface.500}',
-                    textColorHover: '{surface.600}',
-                    textColorActive: '{highlight.textColor}'
+                    hoverBackground: '{surface.100}',
+                    openBackground: '{surface.100}',
+                    activeBackground: '{highlight.background}',
+                    color: '{surface.500}',
+                    openColor: '{surface.500}',
+                    hoverColor: '{surface.600}',
+                    colorActive: '{highlight.color}'
                 },
                 clearButton: {
-                    backgroundHover: '{surface.100}',
-                    textColor: '{surface.500}',
-                    textColorHover: '{surface.600}'
+                    hoverBackground: '{surface.100}',
+                    color: '{surface.500}',
+                    hoverColor: '{surface.600}'
                 },
                 overlay: {
                     background: '{surface.0}',
                     borderColor: '{surface.200}',
-                    textColor: '{surface.700}'
+                    color: '{surface.700}'
                 },
-                contraint: {
+                constraint: {
                     borderColor: '{surface.200}'
                 }
             }
@@ -75,69 +75,69 @@ export default {
             header: {
                 background: '{surface.900}',
                 borderColor: '{surface.800}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             headerCell: {
                 background: '{surface.900}',
-                backgroundHover: '{surface.800}',
+                hoverBackground: '{surface.800}',
                 borderColor: '{surface.800}',
-                textColor: '{surface.0}',
-                textColorHover: '{surface.0}'
+                color: '{surface.0}',
+                hoverColor: '{surface.0}'
             },
             row: {
                 background: '{surface.900}',
-                backgroundStriped: '{surface.950}',
-                backgroundHover: '{surface.800}',
-                textColor: '{surface.0}',
-                textColorHover: '{surface.0}'
+                stripedBackground: '{surface.950}',
+                hoverBackground: '{surface.800}',
+                color: '{surface.0}',
+                hoverColor: '{surface.0}'
             },
             bodyCell: {
                 borderColor: '{surface.800}',
-                borderColorSelected: '{primary.900}'
+                selectedBorderColor: '{primary.900}'
             },
             footerCell: {
                 background: '{surface.900}',
                 borderColor: '{surface.800}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             footer: {
                 background: '{surface.900}',
                 borderColor: '{surface.800}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             dropPointColor: '{primary.color}',
             resizerColor: '{primary.color}',
             sortIcon: {
                 color: '{surface.400}',
-                colorHover: '{surface.300}'
+                hoverColor: '{surface.300}'
             },
             rowAction: {
-                backgroundHover: '{surface.800}',
-                backgroundHoverHighlight: '{surface.900}',
+                hoverBackground: '{surface.800}',
+                highlightHoverBackground: '{surface.900}',
                 color: '{surface.400}',
-                colorHover: '{surface.300}'
+                hoverColor: '{surface.300}'
             },
             filter: {
                 menuButton: {
-                    backgroundHover: '{surface.800}',
-                    backgroundOpen: '{surface.800}',
-                    backgroundActive: '{highlight.background}',
-                    textColor: '{surface.400}',
-                    textColorOpen: '{surface.300}',
-                    textColorHover: '{surface.300}',
-                    textColorActive: '{highlight.textColor}'
+                    hoverBackground: '{surface.800}',
+                    openBackground: '{surface.800}',
+                    activeBackground: '{highlight.background}',
+                    color: '{surface.400}',
+                    openColor: '{surface.300}',
+                    hoverColor: '{surface.300}',
+                    colorActive: '{highlight.color}'
                 },
                 clearButton: {
-                    backgroundHover: '{surface.800}',
-                    textColor: '{surface.400}',
-                    textColorHover: '{surface.300}'
+                    hoverBackground: '{surface.800}',
+                    color: '{surface.400}',
+                    hoverColor: '{surface.300}'
                 },
                 overlay: {
                     background: '{surface.900}',
                     borderColor: '{surface.700}',
-                    textColor: '{surface.0}'
+                    color: '{surface.0}'
                 },
-                contraint: {
+                constraint: {
                     borderColor: '{surface.700}'
                 }
             }
diff --git a/components/lib/themes/primeone/presets/aura/dataview/index.js b/components/lib/themes/primeone/presets/aura/dataview/index.js
index 74dcee98f..7cd90ed20 100644
--- a/components/lib/themes/primeone/presets/aura/dataview/index.js
+++ b/components/lib/themes/primeone/presets/aura/dataview/index.js
@@ -4,32 +4,32 @@ export default {
             header: {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             },
             content: {
                 background: '{surface.0}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             },
             footer: {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             }
         },
         dark: {
             header: {
                 background: '{surface.900}',
                 borderColor: '{surface.700}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             content: {
                 background: '{surface.900}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             footer: {
                 background: '{surface.900}',
                 borderColor: '{surface.700}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             }
         }
     }
diff --git a/components/lib/themes/primeone/presets/aura/orderlist/index.js b/components/lib/themes/primeone/presets/aura/orderlist/index.js
index 5a5079036..e643a1126 100644
--- a/components/lib/themes/primeone/presets/aura/orderlist/index.js
+++ b/components/lib/themes/primeone/presets/aura/orderlist/index.js
@@ -6,26 +6,24 @@ export default {
                 borderColor: '{surface.200}'
             },
             header: {
-                textColor: '{surface.500}'
+                color: '{surface.500}'
             },
             item: {
                 background: 'transparent',
-                backgroundHover: '{surface.100}',
-                backgroundFocus: '{surface.100}',
-                textColor: '{surface.700}',
-                textColorHover: '{surface.800}',
-                textColorFocus: '{surface.800}'
+                focusBackground: '{surface.100}',
+                color: '{surface.700}',
+                focusColor: '{surface.800}'
             },
             control: {
                 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}'
             }
         },
         dark: {
@@ -34,26 +32,23 @@ export default {
                 borderColor: '{surface.700}'
             },
             header: {
-                textColor: '{surface.400}'
+                color: '{surface.400}'
             },
             item: {
                 background: 'transparent',
-                backgroundHover: '{surface.800}',
-                backgroundFocus: '{surface.800}',
-                textColor: '{surface.0}',
-                textColorHover: '{surface.0}',
-                textColorFocus: '{surface.0}'
+                focusBackground: '{surface.800}',
+                color: '{surface.0}',
+                focusColor: '{surface.0}'
             },
             control: {
                 background: '{surface.800}',
-                backgroundHover: '{surface.700}',
-                backgroundActive: '{surface.600}',
+                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}'
             }
         }
     }
diff --git a/components/lib/themes/primeone/presets/aura/organizationchart/index.js b/components/lib/themes/primeone/presets/aura/organizationchart/index.js
index 5bb4d2b49..945f8e6d6 100644
--- a/components/lib/themes/primeone/presets/aura/organizationchart/index.js
+++ b/components/lib/themes/primeone/presets/aura/organizationchart/index.js
@@ -3,10 +3,10 @@ export default {
         light: {
             node: {
                 background: '{surface.0}',
-                backgroundHover: '{surface.100}',
+                hoverBackground: '{surface.100}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.700}',
-                textColorHover: '{surface.800}'
+                color: '{surface.700}',
+                hoverColor: '{surface.800}'
             },
             toggleIcon: {
                 background: '{surface.0}',
@@ -17,6 +17,22 @@ export default {
                 color: '{surface.200}'
             }
         },
-        dark: {}
+        dark: {
+            node: {
+                background: '{surface.900}',
+                hoverBackground: '{surface.800}',
+                borderColor: '{surface.700}',
+                color: '{surface.0}',
+                hoverColor: '{surface.0}'
+            },
+            toggleIcon: {
+                background: '{surface.800}',
+                borderColor: '{surface.700}',
+                color: '{surface.400}'
+            },
+            connector: {
+                color: '{surface.700}'
+            }
+        }
     }
 };
diff --git a/components/lib/themes/primeone/presets/aura/paginator/index.js b/components/lib/themes/primeone/presets/aura/paginator/index.js
index e55232a3c..55a4c761e 100644
--- a/components/lib/themes/primeone/presets/aura/paginator/index.js
+++ b/components/lib/themes/primeone/presets/aura/paginator/index.js
@@ -3,29 +3,29 @@ export default {
         light: {
             root: {
                 background: '{surface.0}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             },
             navigator: {
-                backgroundHover: '{surface.100}',
+                hoverBackground: '{surface.100}',
                 color: '{surface.500}',
-                colorHover: '{surface.600}'
+                hoverColor: '{surface.600}'
             },
             currentPageReport: {
-                textColor: '{surface.500}'
+                color: '{surface.500}'
             }
         },
         dark: {
             root: {
                 background: '{surface.900}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             navigator: {
-                backgroundHover: '{surface.800}',
+                hoverBackground: '{surface.800}',
                 color: '{surface.400}',
-                colorHover: '{surface.300}'
+                hoverColor: '{surface.300}'
             },
             currentPageReport: {
-                textColor: '{surface.400}'
+                color: '{surface.400}'
             }
         }
     }
diff --git a/components/lib/themes/primeone/presets/aura/picklist/index.js b/components/lib/themes/primeone/presets/aura/picklist/index.js
index 5a5079036..e2ab5f5fb 100644
--- a/components/lib/themes/primeone/presets/aura/picklist/index.js
+++ b/components/lib/themes/primeone/presets/aura/picklist/index.js
@@ -6,26 +6,24 @@ export default {
                 borderColor: '{surface.200}'
             },
             header: {
-                textColor: '{surface.500}'
+                color: '{surface.500}'
             },
             item: {
                 background: 'transparent',
-                backgroundHover: '{surface.100}',
-                backgroundFocus: '{surface.100}',
-                textColor: '{surface.700}',
-                textColorHover: '{surface.800}',
-                textColorFocus: '{surface.800}'
+                focusBackground: '{surface.100}',
+                color: '{surface.700}',
+                focusColor: '{surface.800}'
             },
             control: {
                 background: '{surface.100}',
-                backgroundHover: '{surface.200}',
+                hoverBackground: '{surface.200}',
                 backgroundActive: '{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}'
             }
         },
         dark: {
@@ -34,26 +32,24 @@ export default {
                 borderColor: '{surface.700}'
             },
             header: {
-                textColor: '{surface.400}'
+                color: '{surface.400}'
             },
             item: {
                 background: 'transparent',
-                backgroundHover: '{surface.800}',
-                backgroundFocus: '{surface.800}',
-                textColor: '{surface.0}',
-                textColorHover: '{surface.0}',
-                textColorFocus: '{surface.0}'
+                focusBackground: '{surface.800}',
+                color: '{surface.0}',
+                focusColor: '{surface.0}'
             },
             control: {
                 background: '{surface.800}',
-                backgroundHover: '{surface.700}',
+                hoverBackground: '{surface.700}',
                 backgroundActive: '{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}'
             }
         }
     }
diff --git a/components/lib/themes/primeone/presets/aura/tree/index.js b/components/lib/themes/primeone/presets/aura/tree/index.js
index 096ddcc1c..2157bf54d 100644
--- a/components/lib/themes/primeone/presets/aura/tree/index.js
+++ b/components/lib/themes/primeone/presets/aura/tree/index.js
@@ -3,22 +3,22 @@ export default {
         light: {
             root: {
                 background: '{surface.0}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             },
             node: {
-                backgroundHover: '{surface.100}',
-                textColor: '{surface.700}',
-                textColorHover: '{surface.800}'
+                hoverBackground: '{surface.100}',
+                color: '{surface.700}',
+                hoverColor: '{surface.800}'
             },
             nodeIcon: {
                 color: '{surface.500}',
-                colorHover: '{surface.600}'
+                hoverColor: '{surface.600}'
             },
             toggle: {
-                backgroundHover: '{surface.100}',
-                backgroundHoverHighlight: '{surface.0}',
+                hoverBackground: '{surface.100}',
+                highlightHoverBackground: '{surface.0}',
                 color: '{surface.500}',
-                colorHover: '{surface.600}'
+                hoverColor: '{surface.600}'
             },
             indeterminate: {
                 color: '{surface.500}'
@@ -27,22 +27,22 @@ export default {
         dark: {
             root: {
                 background: '{surface.900}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             node: {
-                backgroundHover: '{surface.800}',
-                textColor: '{surface.0}',
-                textColorHover: '{surface.0}'
+                hoverBackground: '{surface.800}',
+                color: '{surface.0}',
+                hoverColor: '{surface.0}'
             },
             nodeIcon: {
                 color: '{surface.400}',
-                colorHover: '{surface.300}'
+                hoverColor: '{surface.300}'
             },
             toggle: {
-                backgroundHover: '{surface.800}',
-                backgroundHoverHighlight: '{surface.900}',
+                hoverBackground: '{surface.800}',
+                highlightHoverBackground: '{surface.900}',
                 color: '{surface.400}',
-                colorHover: '{surface.300}'
+                hoverColor: '{surface.300}'
             },
             indeterminate: {
                 color: '{surface.400}'
diff --git a/components/lib/themes/primeone/presets/aura/treetable/index.js b/components/lib/themes/primeone/presets/aura/treetable/index.js
index d76fd376d..c020aadb1 100644
--- a/components/lib/themes/primeone/presets/aura/treetable/index.js
+++ b/components/lib/themes/primeone/presets/aura/treetable/index.js
@@ -4,46 +4,46 @@ export default {
             header: {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             },
             headerCell: {
                 background: '{surface.0}',
-                backgroundHover: '{surface.100}',
+                hoverBackground: '{surface.100}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.700}',
-                textColorHover: '{surface.800}'
+                color: '{surface.700}',
+                hoverColor: '{surface.800}'
             },
             row: {
                 background: '{surface.0}',
-                backgroundStriped: '{surface.50}',
-                backgroundHover: '{surface.100}',
-                textColor: '{surface.700}',
-                textColorHover: '{surface.800}'
+                stripedBackground: '{surface.50}',
+                hoverBackground: '{surface.100}',
+                color: '{surface.700}',
+                hoverColor: '{surface.800}'
             },
             bodyCell: {
                 borderColor: '{surface.200}',
-                borderColorSelected: '{primary.100}'
+                selectedBorderColor: '{primary.100}'
             },
             footerCell: {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             },
             footer: {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             },
             resizerColor: '{primary.color}',
             sortIcon: {
                 color: '{surface.500}',
-                colorHover: '{surface.600}'
+                hoverColor: '{surface.600}'
             },
             toggle: {
-                backgroundHover: '{surface.100}',
-                backgroundHoverHighlight: '{surface.0}',
+                hoverBackground: '{surface.100}',
+                highlightHoverBackground: '{surface.0}',
                 color: '{surface.500}',
-                colorHover: '{surface.600}'
+                hoverColor: '{surface.600}'
             },
             indeterminate: {
                 color: '{surface.500}'
@@ -53,46 +53,46 @@ export default {
             header: {
                 background: '{surface.900}',
                 borderColor: '{surface.800}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             headerCell: {
                 background: '{surface.900}',
-                backgroundHover: '{surface.800}',
+                hoverBackground: '{surface.800}',
                 borderColor: '{surface.800}',
-                textColor: '{surface.0}',
-                textColorHover: '{surface.0}'
+                color: '{surface.0}',
+                hoverColor: '{surface.0}'
             },
             row: {
                 background: '{surface.900}',
-                backgroundStriped: '{surface.950}',
-                backgroundHover: '{surface.800}',
-                textColor: '{surface.0}',
-                textColorHover: '{surface.0}'
+                stripedBackground: '{surface.950}',
+                hoverBackground: '{surface.800}',
+                color: '{surface.0}',
+                hoverColor: '{surface.0}'
             },
             bodyCell: {
                 borderColor: '{surface.800}',
-                borderColorSelected: '{primary.900}'
+                selectedBorderColor: '{primary.900}'
             },
             footerCell: {
                 background: '{surface.900}',
                 borderColor: '{surface.800}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             footer: {
                 background: '{surface.900}',
                 borderColor: '{surface.800}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             resizerColor: '{primary.color}',
             sortIcon: {
                 color: '{surface.400}',
-                colorHover: '{surface.300}'
+                hoverColor: '{surface.300}'
             },
             toggle: {
-                backgroundHover: '{surface.800}',
-                backgroundHoverHighlight: '{surface.900}',
+                hoverBackground: '{surface.800}',
+                highlightHoverBackground: '{surface.900}',
                 color: '{surface.400}',
-                colorHover: '{surface.300}'
+                hoverColor: '{surface.300}'
             },
             indeterminate: {
                 color: '{surface.400}'