From 31e56ea73a65f68bd136fd783aa5f76275b68be9 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 12 Mar 2024 11:19:23 +0300
Subject: [PATCH] Initiated refactor of token convention and use of dt

---
 .../themes/primeone/base/accordion/index.js   | 24 +++++-----
 .../primeone/base/autocomplete/index.js       | 10 ++---
 .../lib/themes/primeone/base/avatar/index.js  |  4 +-
 .../lib/themes/primeone/base/badge/index.js   |  2 +-
 .../lib/themes/primeone/base/blockui/index.js |  4 +-
 .../themes/primeone/base/breadcrumb/index.js  | 12 ++---
 .../lib/themes/primeone/base/button/index.js  | 10 ++---
 .../themes/primeone/base/calendar/index.js    | 36 +++++++--------
 .../lib/themes/primeone/base/card/index.js    |  8 ++--
 .../themes/primeone/base/carousel/index.js    | 16 +++----
 .../primeone/base/cascadeselect/index.js      | 10 ++---
 .../themes/primeone/base/checkbox/index.js    | 10 ++---
 .../lib/themes/primeone/base/chip/index.js    |  8 ++--
 .../lib/themes/primeone/base/chips/index.js   |  6 +--
 .../themes/primeone/base/colorpicker/index.js | 12 ++---
 .../primeone/base/confirmdialog/index.js      |  2 +-
 .../primeone/base/confirmpopup/index.js       |  4 +-
 .../themes/primeone/base/contextmenu/index.js |  8 ++--
 .../themes/primeone/base/datatable/index.js   | 32 +++++++-------
 .../themes/primeone/base/dataview/index.js    |  2 +-
 .../lib/themes/primeone/base/dialog/index.js  |  8 ++--
 .../lib/themes/primeone/base/divider/index.js | 10 ++---
 .../lib/themes/primeone/base/dock/index.js    |  6 +--
 .../themes/primeone/base/dropdown/index.js    | 14 +++---
 .../lib/themes/primeone/base/editor/index.js  | 16 +++----
 .../themes/primeone/base/fieldset/index.js    | 30 ++++++-------
 .../themes/primeone/base/fileupload/index.js  | 12 ++---
 .../themes/primeone/base/floatlabel/index.js  |  4 +-
 .../themes/primeone/base/galleria/index.js    | 28 ++++++------
 components/lib/themes/primeone/base/global.js |  6 +--
 .../themes/primeone/base/iconfield/index.js   |  2 +-
 .../lib/themes/primeone/base/image/index.js   | 10 ++---
 .../primeone/base/inlinemessage/index.js      |  4 +-
 .../lib/themes/primeone/base/inplace/index.js | 10 ++---
 .../themes/primeone/base/inputgroup/index.js  |  2 +-
 .../themes/primeone/base/inputotp/index.js    |  2 +-
 .../themes/primeone/base/inputswitch/index.js | 10 ++---
 .../themes/primeone/base/inputtext/index.js   |  6 +--
 .../lib/themes/primeone/base/knob/index.js    | 10 ++---
 .../lib/themes/primeone/base/listbox/index.js |  8 ++--
 .../themes/primeone/base/megamenu/index.js    | 14 +++---
 .../lib/themes/primeone/base/menu/index.js    |  6 +--
 .../lib/themes/primeone/base/menubar/index.js | 14 +++---
 .../lib/themes/primeone/base/message/index.js | 10 ++---
 .../themes/primeone/base/metergroup/index.js  | 20 ++++-----
 .../themes/primeone/base/multiselect/index.js | 14 +++---
 .../themes/primeone/base/orderlist/index.js   | 14 +++---
 .../primeone/base/organizationchart/index.js  | 18 ++++----
 .../primeone/base/overlaypanel/index.js       | 10 ++---
 .../themes/primeone/base/paginator/index.js   |  6 +--
 .../lib/themes/primeone/base/panel/index.js   |  6 +--
 .../themes/primeone/base/panelmenu/index.js   |  8 ++--
 .../themes/primeone/base/password/index.js    |  8 ++--
 .../themes/primeone/base/picklist/index.js    | 12 ++---
 .../themes/primeone/base/progressbar/index.js |  4 +-
 .../primeone/base/progressspinner/index.js    |  2 +-
 .../themes/primeone/base/radiobutton/index.js | 10 ++---
 .../lib/themes/primeone/base/rating/index.js  |  8 ++--
 .../themes/primeone/base/scrollpanel/index.js | 12 ++---
 .../themes/primeone/base/scrolltop/index.js   |  4 +-
 .../primeone/base/selectbutton/index.js       | 16 +++----
 .../lib/themes/primeone/base/sidebar/index.js |  8 ++--
 .../themes/primeone/base/skeleton/index.js    |  4 +-
 .../lib/themes/primeone/base/slider/index.js  | 10 ++---
 .../themes/primeone/base/speeddial/index.js   | 14 +++---
 .../themes/primeone/base/splitbutton/index.js |  4 +-
 .../themes/primeone/base/splitter/index.js    | 20 ++++-----
 .../lib/themes/primeone/base/stepper/index.js | 44 +++++++++----------
 .../lib/themes/primeone/base/steps/index.js   | 10 ++---
 .../lib/themes/primeone/base/tabmenu/index.js | 10 ++---
 .../lib/themes/primeone/base/tabview/index.js | 42 +++++++++---------
 .../lib/themes/primeone/base/tag/index.js     |  2 +-
 .../themes/primeone/base/terminal/index.js    |  4 +-
 .../themes/primeone/base/textarea/index.js    |  6 +--
 .../themes/primeone/base/tieredmenu/index.js  |  8 ++--
 .../themes/primeone/base/timeline/index.js    |  2 +-
 .../lib/themes/primeone/base/toast/index.js   | 12 ++---
 .../primeone/base/togglebutton/index.js       | 18 ++++----
 .../lib/themes/primeone/base/toolbar/index.js | 10 ++---
 .../lib/themes/primeone/base/tooltip/index.js |  2 +-
 .../lib/themes/primeone/base/tree/index.js    | 14 +++---
 .../themes/primeone/base/treeselect/index.js  | 12 ++---
 .../themes/primeone/base/treetable/index.js   | 14 +++---
 .../primeone/presets/aura/accordion/index.js  | 16 +++----
 .../primeone/presets/aura/card/index.js       |  8 ++--
 .../primeone/presets/aura/divider/index.js    |  4 +-
 .../primeone/presets/aura/fieldset/index.js   | 20 ++++-----
 .../primeone/presets/aura/panel/index.js      | 12 ++---
 .../primeone/presets/aura/splitter/index.js   |  4 +-
 .../primeone/presets/aura/stepper/index.js    | 28 ++++++------
 .../primeone/presets/aura/tabview/index.js    | 23 ++++++----
 .../primeone/presets/aura/toolbar/index.js    |  4 +-
 92 files changed, 516 insertions(+), 507 deletions(-)

diff --git a/components/lib/themes/primeone/base/accordion/index.js b/components/lib/themes/primeone/base/accordion/index.js
index 6105b07e2..5910f18a4 100644
--- a/components/lib/themes/primeone/base/accordion/index.js
+++ b/components/lib/themes/primeone/base/accordion/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-accordion-header-link {
     cursor: pointer;
     display: flex;
@@ -9,11 +9,11 @@ export default {
     user-select: none;
     text-decoration: none;
     padding: 1.125rem 1.125rem 1.125rem 1.125rem;
-    color: var(--p-accordion-header-text-color);
-    background: var(--p-accordion-header-background);
+    color: ${dt('accordion.header.color')};
+    background: ${dt('accordion.header.background')};
     font-weight: 600;
-    border-radius: var(--p-rounded-base);
-    transition: color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    border-radius: ${dt('rounded.base')};
+    transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
 }
 
@@ -22,14 +22,16 @@ export default {
 }
 
 .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: -2px;
 }
+
 .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
-    color: var(--p-accordion-header-text-color-hover);
+    color: ${dt('accordion.header.hover.color')}
 }
+
 .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
-    color: var(--p-accordion-header-text-color-active);
+    color: ${dt('accordion.header.active.color')}
 }
 
 .p-accordion-toggle-icon {
@@ -42,12 +44,12 @@ export default {
 
 .p-accordion-content {
     padding: 0 1.125rem 1.125rem 1.125rem;
-    background: var(--p-accordion-content-background);
-    color: var(--p-accordion-content-text-color);
+    background: color: ${dt('accordion.content.background')}
+    color: ${dt('accordion.content.color')}
 }
 
 .p-accordion-tab {
-    border-bottom: 1px solid var(--p-accordion-content-border-color);
+    border-bottom: 1px solid ${dt('accordion.content.border.color')};
 }
 
 .p-accordion-tab:last-child {
diff --git a/components/lib/themes/primeone/base/autocomplete/index.js b/components/lib/themes/primeone/base/autocomplete/index.js
index 518569fd8..063ec8e2a 100644
--- a/components/lib/themes/primeone/base/autocomplete/index.js
+++ b/components/lib/themes/primeone/base/autocomplete/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-autocomplete {
     display: inline-flex;
 }
@@ -43,7 +43,7 @@ export default {
     background: var(--p-autocomplete-overlay-background);
     color: var(--p-autocomplete-overlay-text-color);
     border: 1px solid var(--p-autocomplete-overlay-border-color);
-    border-radius: var(--p-rounded-base);
+    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);
 }
 
@@ -64,7 +64,7 @@ export default {
     border: 0 none;
     color: var(--p-autocomplete-item-text-color);
     background: transparent;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')};
     border-radius: var(--p-rounded-sm);
 }
 
@@ -113,9 +113,9 @@ export default {
     color: var(--p-autocomplete-input-multiple-text-color);
     background: var(--p-autocomplete-input-multiple-background);
     border: 1px solid var(--p-autocomplete-input-multiple-border-color);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     width: 100%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
     box-shadow: var(--p-autocomplete-input-multiple-box-shadow);
 }
diff --git a/components/lib/themes/primeone/base/avatar/index.js b/components/lib/themes/primeone/base/avatar/index.js
index b2ab5bfc5..d443a2732 100644
--- a/components/lib/themes/primeone/base/avatar/index.js
+++ b/components/lib/themes/primeone/base/avatar/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-avatar {
     display: inline-flex;
     align-items: center;
@@ -8,7 +8,7 @@ export default {
     height: 2rem;
     font-size: 1rem;
     background: var(--p-avatar-background);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-avatar-image {
diff --git a/components/lib/themes/primeone/base/badge/index.js b/components/lib/themes/primeone/base/badge/index.js
index 9949a94ac..31002e374 100644
--- a/components/lib/themes/primeone/base/badge/index.js
+++ b/components/lib/themes/primeone/base/badge/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-badge {
     display: inline-flex;
     border-radius: 10px;
diff --git a/components/lib/themes/primeone/base/blockui/index.js b/components/lib/themes/primeone/base/blockui/index.js
index 6ef1dea46..b3b6b6481 100644
--- a/components/lib/themes/primeone/base/blockui/index.js
+++ b/components/lib/themes/primeone/base/blockui/index.js
@@ -1,7 +1,7 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-blockui {
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 .p-blockui-container {
     position: relative;
diff --git a/components/lib/themes/primeone/base/breadcrumb/index.js b/components/lib/themes/primeone/base/breadcrumb/index.js
index ef82d99d7..e61007f0e 100644
--- a/components/lib/themes/primeone/base/breadcrumb/index.js
+++ b/components/lib/themes/primeone/base/breadcrumb/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-breadcrumb {
     background: var(--p-breadcrumb-background);
     border: 0 none;
@@ -33,19 +33,19 @@ export default {
 }
 
 .p-breadcrumb .p-menuitem-link {
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
-    border-radius: var(--p-rounded-base);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    border-radius: ${dt('rounded.base')};
     outline-color: transparent;
 }
 
 .p-breadcrumb .p-menuitem-link:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-breadcrumb .p-menuitem-text {
     color: var(--p-breadcrumb-item-text-color);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     line-height: 1;
 }
 
diff --git a/components/lib/themes/primeone/base/button/index.js b/components/lib/themes/primeone/base/button/index.js
index 91fae64bb..34db4b26d 100644
--- a/components/lib/themes/primeone/base/button/index.js
+++ b/components/lib/themes/primeone/base/button/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-button {
     display: inline-flex;
     cursor: pointer;
@@ -13,8 +13,8 @@ export default {
     border: 1px solid var(--p-button-primary-border-color);
     padding: 0.5rem 1rem;
     font-size: 1rem;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
-    border-radius: var(--p-rounded-base);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    border-radius: ${dt('rounded.base')};
     outline-color: transparent;
 }
 
@@ -116,8 +116,8 @@ export default {
 }
 
 .p-button:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-button-primary-background);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} var(--p-button-primary-background);
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-button .p-badge {
diff --git a/components/lib/themes/primeone/base/calendar/index.js b/components/lib/themes/primeone/base/calendar/index.js
index 2f30b511d..7955e2656 100644
--- a/components/lib/themes/primeone/base/calendar/index.js
+++ b/components/lib/themes/primeone/base/calendar/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-calendar {
     display: inline-flex;
     max-width: 100%;
@@ -42,7 +42,7 @@ export default {
     background: var(--p-calendar-background);
     color: var(--p-calendar-text-color);
     border: 1px solid var(--p-calendar-border-color);
-    border-radius: var(--p-rounded-base);
+    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);
 }
 
@@ -82,7 +82,7 @@ export default {
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     outline-color: transparent;
 }
 
@@ -94,15 +94,15 @@ export default {
 
 .p-datepicker-prev:focus-visible,
 .p-datepicker-next:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-datepicker-year,
 .p-datepicker-month {
     font-weight: 500;
     padding: 0.25rem;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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-datepicker-month {
@@ -179,7 +179,7 @@ export default {
     width: 2rem;
     height: 2rem;
     border-radius: 50%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     border: 1px solid transparent;
     outline-color: transparent;
     color: var(--p-calendar-date-text-color);
@@ -191,8 +191,8 @@ export default {
 }
 
 .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus-visible {
-    outline: 1px solid var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: 1px solid ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-datepicker table td > span.p-highlight {
@@ -223,8 +223,8 @@ export default {
     overflow: hidden;
     position: relative;
     padding: 0.25rem;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
-    border-radius: var(--p-rounded-base);
+    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')};
+    border-radius: ${dt('rounded.base')};
     outline-color: transparent;
     color: var(--p-calendar-month-text-color);
 }
@@ -240,7 +240,7 @@ export default {
 }
 
 .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus-visible {
-    outline: var(--p-focus-ring-width) solid var(--p-focus-ring-color);
+    outline: ${dt('focus.ring.width')} solid ${dt('focus.ring.color')};
     outline-offset: 0;
 }
 
@@ -258,8 +258,8 @@ export default {
     overflow: hidden;
     position: relative;
     padding: 0.25rem;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
-    border-radius: var(--p-rounded-base);
+    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')};
+    border-radius: ${dt('rounded.base')};
     outline-color: transparent;
     color: var(--p-calendar-year-text-color);
 }
@@ -275,7 +275,7 @@ export default {
 }
 
 .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus-visible {
-    outline: var(--p-focus-ring-width) solid var(--p-focus-ring-color);
+    outline: ${dt('focus.ring.width')} solid ${dt('focus.ring.color')};
     outline-offset: 0;
 }
 
@@ -326,7 +326,7 @@ export default {
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     outline-color: transparent;
 }
 
@@ -336,8 +336,8 @@ export default {
 }
 
 .p-timepicker button:focus-visible {
-    outline: 1px solid var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: 1px solid ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-timepicker button:last-child {
diff --git a/components/lib/themes/primeone/base/card/index.js b/components/lib/themes/primeone/base/card/index.js
index c3d806a7e..be58402d8 100644
--- a/components/lib/themes/primeone/base/card/index.js
+++ b/components/lib/themes/primeone/base/card/index.js
@@ -1,8 +1,8 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-card {
-    background: var(--p-card-background);
-    color: var(--p-card-text-color);
+    background: ${dt('card.background')};
+    color: ${dt('card.color')};
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
     border-radius: 12px;
     display: flex;
@@ -29,7 +29,7 @@ export default {
 
 .p-card-subtitle {
     font-weight: 400;
-    color: var(--p-card-subtitle-text-color);
+    color: ${dt('card.subtitle.color')};
 }
 `
 };
diff --git a/components/lib/themes/primeone/base/carousel/index.js b/components/lib/themes/primeone/base/carousel/index.js
index bd3f599a3..fd92ab792 100644
--- a/components/lib/themes/primeone/base/carousel/index.js
+++ b/components/lib/themes/primeone/base/carousel/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-carousel {
     display: flex;
     flex-direction: column;
@@ -42,7 +42,7 @@ export default {
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration),outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')},outline-color ${dt('transition.duration')};
     outline-color: transparent;
     margin: 0.5rem;
 }
@@ -55,8 +55,8 @@ export default {
 
 .p-carousel-prev:focus-visible,
 .p-carousel-next:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-carousel-indicators {
@@ -76,14 +76,14 @@ export default {
     width: 2rem;
     height: 0.5rem;
     border: 0 none;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-carousel-indicator button:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-carousel-indicator button:hover {
diff --git a/components/lib/themes/primeone/base/cascadeselect/index.js b/components/lib/themes/primeone/base/cascadeselect/index.js
index ad2562f2c..efcf88382 100644
--- a/components/lib/themes/primeone/base/cascadeselect/index.js
+++ b/components/lib/themes/primeone/base/cascadeselect/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-cascadeselect {
     display: inline-flex;
     cursor: pointer;
@@ -7,8 +7,8 @@ export default {
     user-select: none;
     background: var(--p-cascadeselect-background);
     border: 1px solid var(--p-cascadeselect-border-color);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
-    border-radius: var(--p-rounded-base);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    border-radius: ${dt('rounded.base')};
     outline-color: transparent;
     box-shadow: var(--p-cascadeselect-box-shadow);
 }
@@ -47,8 +47,8 @@ export default {
     background: transparent;
     color: var(--p-cascadeselect-toggle-color);
     width: 2.5rem;
-    border-top-right-radius: var(--p-rounded-base);
-    border-bottom-right-radius: var(--p-rounded-base);
+    border-top-right-radius: ${dt('rounded.base')};
+    border-bottom-right-radius: ${dt('rounded.base')};
 }
 
 .p-cascadeselect-label {
diff --git a/components/lib/themes/primeone/base/checkbox/index.js b/components/lib/themes/primeone/base/checkbox/index.js
index c84156cf0..a9e95d0b7 100644
--- a/components/lib/themes/primeone/base/checkbox/index.js
+++ b/components/lib/themes/primeone/base/checkbox/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -35,13 +35,13 @@ export default {
     background:  var(--p-checkbox-background);
     width: var(--p-checkbox-width);
     height: var(--p-checkbox-height);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     outline-color: transparent;
     box-shadow: var(--p-checkbox-box-shadow);
 }
 
 .p-checkbox-icon {
-    transition-duration: var(--p-transition-duration);
+    transition-duration: ${dt('transition.duration')};
     color: var(--p-checkbox-icon-color);
     font-size: var(--p-checkbox-icon-size);
     width: var(--p-checkbox-icon-size);
@@ -71,8 +71,8 @@ export default {
 }
 
 .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-checkbox.p-invalid > .p-checkbox-box {
diff --git a/components/lib/themes/primeone/base/chip/index.js b/components/lib/themes/primeone/base/chip/index.js
index dd5ea39f1..618dff2fe 100644
--- a/components/lib/themes/primeone/base/chip/index.js
+++ b/components/lib/themes/primeone/base/chip/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-chip {
     display: inline-flex;
     align-items: center;
@@ -27,7 +27,7 @@ export default {
     cursor: pointer;
     margin-left: 0.375rem;
     border-radius: 6px;
-    transition: outline-color var(--p-transition-duration);
+    transition: outline-color ${dt('transition.duration')};
     outline-color: transparent;
 }
 
@@ -40,8 +40,8 @@ export default {
 }
 
 .p-chip-remove-icon:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    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/chips/index.js b/components/lib/themes/primeone/base/chips/index.js
index 076c7cf22..90e9f45a8 100644
--- a/components/lib/themes/primeone/base/chips/index.js
+++ b/components/lib/themes/primeone/base/chips/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-chips {
     display: inline-flex;
 }
@@ -18,9 +18,9 @@ export default {
     color: var(--p-chips-text-color);
     background: var(--p-chips-background);
     border: 1px solid var(--p-chips-border-color);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     width: 100%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
     box-shadow: var(--p-chips-box-shadow);
 }
diff --git a/components/lib/themes/primeone/base/colorpicker/index.js b/components/lib/themes/primeone/base/colorpicker/index.js
index c6369c41f..7f1b711ae 100644
--- a/components/lib/themes/primeone/base/colorpicker/index.js
+++ b/components/lib/themes/primeone/base/colorpicker/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-colorpicker-color {
     background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
 }
@@ -20,20 +20,20 @@ export default {
     height: 1.5rem;
     padding: 0;
     border: 0 none;
-    border-radius: var(--p-rounded-base);
-    transition: outline-color var(--p-transition-duration);
+    border-radius: ${dt('rounded.base')};
+    transition: outline-color ${dt('transition.duration')};
     outline-color: transparent;
 }
 
 .p-colorpicker-preview:enabled:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-colorpicker > .p-colorpicker-panel {
     background: var(--p-colorpicker-panel-background);
     border: 1px solid var(--p-colorpicker-panel-border-color);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-colorpicker-panel .p-colorpicker-color-handle,
diff --git a/components/lib/themes/primeone/base/confirmdialog/index.js b/components/lib/themes/primeone/base/confirmdialog/index.js
index e0affec91..db99bd1f6 100644
--- a/components/lib/themes/primeone/base/confirmdialog/index.js
+++ b/components/lib/themes/primeone/base/confirmdialog/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-confirm-dialog .p-dialog-content {
     display: flex;
     align-items: center;
diff --git a/components/lib/themes/primeone/base/confirmpopup/index.js b/components/lib/themes/primeone/base/confirmpopup/index.js
index 771fa73d2..a7cd4877f 100644
--- a/components/lib/themes/primeone/base/confirmpopup/index.js
+++ b/components/lib/themes/primeone/base/confirmpopup/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-confirm-popup {
     position: absolute;
     margin-top: 10px;
@@ -8,7 +8,7 @@ export default {
     background: var(--p-confirmpopup-background);
     color: var(--p-confirmpopup-text-color);
     border: 1px solid var(--p-confirmpopup-border-color);
-    border-radius: var(--p-rounded-base);
+    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);
 }
 
diff --git a/components/lib/themes/primeone/base/contextmenu/index.js b/components/lib/themes/primeone/base/contextmenu/index.js
index 3fd7b19e5..11d9e4b1a 100644
--- a/components/lib/themes/primeone/base/contextmenu/index.js
+++ b/components/lib/themes/primeone/base/contextmenu/index.js
@@ -1,11 +1,11 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-contextmenu {
     padding: 0.25rem 0.25rem;
     background: var(--p-contextmenu-background);
     color: var(--p-contextmenu-text-color);
     border: 1px solid var(--p-contextmenu-border-color);
-    border-radius: var(--p-rounded-base);
+    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;
 }
@@ -28,7 +28,7 @@ export default {
     background: var(--p-contextmenu-background);
     color: var(--p-contextmenu-text-color);
     border: 1px solid var(--p-contextmenu-border-color);
-    border-radius: var(--p-rounded-base);
+    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);
 }
 
@@ -61,7 +61,7 @@ export default {
 }
 
 .p-contextmenu .p-menuitem-content {
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
     border-radius: var(--p-rounded-sm);
     color: var(--p-contextmenu-item-text-color);
 }
diff --git a/components/lib/themes/primeone/base/datatable/index.js b/components/lib/themes/primeone/base/datatable/index.js
index e18e76ff4..9ef5b0a60 100644
--- a/components/lib/themes/primeone/base/datatable/index.js
+++ b/components/lib/themes/primeone/base/datatable/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-datatable {
     position: relative;
 }
@@ -24,7 +24,7 @@ export default {
 .p-datatable .p-sortable-column .p-sortable-column-icon {
     color: var(--p-datatable-sort-icon-color);
     margin-left: 0.5rem;
-    transition: color var(--p-transition-duration);
+    transition: color ${dt('transition.duration')};
 }
 
 .p-datatable .p-sortable-column .p-sortable-column-badge {
@@ -53,7 +53,7 @@ export default {
 }
 
 .p-datatable .p-sortable-column:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: -1px;
 }
 
@@ -178,7 +178,7 @@ export default {
     color: var(--p-datatable-row-action-color);
     border: 0 none;
     border-radius: 50%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     outline-color: transparent;
 }
 
@@ -194,7 +194,7 @@ export default {
 .p-datatable .p-row-editor-init:focus-visible,
 .p-datatable .p-row-editor-save:focus-visible,
 .p-datatable .p-row-editor-cancel:focus-visible {
-    outline: 1px solid var(--p-focus-ring-color);
+    outline: 1px solid ${dt('focus.ring.color')};
     outline-offset: 2px;
 }
 
@@ -255,7 +255,7 @@ export default {
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     outline-color: transparent;
 }
 
@@ -277,8 +277,8 @@ export default {
 }
 
 .p-column-filter-menu-button:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-column-filter-clear-button {
@@ -295,7 +295,7 @@ export default {
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     outline-color: transparent;
 }
 
@@ -305,8 +305,8 @@ export default {
 }
 
 .p-column-filter-clear-button:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-column-filter-menu {
@@ -349,7 +349,7 @@ export default {
     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);
-    border-radius: var(--p-rounded-base);
+    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;
     padding: 0.75rem;
@@ -434,14 +434,14 @@ export default {
     border-width: 0 0 1px 0;
     color: var(--p-datatable-header-cell-text-color);
     font-weight: 600;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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 {
@@ -470,12 +470,12 @@ export default {
 }
 
 .p-datatable-tbody > tr:focus-visible {
-    outline: 1px solid var(--p-focus-ring-color);
+    outline: 1px solid ${dt('focus.ring.color')};
     outline-offset: -1px;
 }
 
 .p-datatable-tbody > tr.p-highlight-contextmenu {
-    outline: 1px solid var(--p-focus-ring-color);
+    outline: 1px solid ${dt('focus.ring.color')};
     outline-offset: -1px;
 }
 
diff --git a/components/lib/themes/primeone/base/dataview/index.js b/components/lib/themes/primeone/base/dataview/index.js
index 92cd0e065..d50b2a84e 100644
--- a/components/lib/themes/primeone/base/dataview/index.js
+++ b/components/lib/themes/primeone/base/dataview/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-dataview .p-paginator-top {
     border-width: 0 0 1px 0;
     border-radius: 0;
diff --git a/components/lib/themes/primeone/base/dialog/index.js b/components/lib/themes/primeone/base/dialog/index.js
index d1c1d2c5c..d890f2893 100644
--- a/components/lib/themes/primeone/base/dialog/index.js
+++ b/components/lib/themes/primeone/base/dialog/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-dialog {
     max-height: 90%;
     transform: scale(1);
@@ -54,7 +54,7 @@ export default {
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
 }
 
@@ -64,8 +64,8 @@ export default {
 }
 
 .p-dialog-header-icon:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-dialog-enter-active {
diff --git a/components/lib/themes/primeone/base/divider/index.js b/components/lib/themes/primeone/base/divider/index.js
index 85a216535..0ffb92e68 100644
--- a/components/lib/themes/primeone/base/divider/index.js
+++ b/components/lib/themes/primeone/base/divider/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-divider-horizontal {
     display: flex;
     width: 100%;
@@ -16,7 +16,7 @@ export default {
     left: 0;
     width: 100%;
     content: "";
-    border-top: 1px solid var(--p-divider-border-color);
+    border-top: 1px solid ${dt('divider.border.color')};
 }
 
 .p-divider-horizontal .p-divider-content {
@@ -40,7 +40,7 @@ export default {
     left: 50%;
     height: 100%;
     content: "";
-    border-left: 1px solid var(--p-divider-border-color);
+    border-left: 1px solid ${dt('divider.border.color')};
 }
 
 .p-divider.p-divider-vertical .p-divider-content {
@@ -49,8 +49,8 @@ export default {
 
 .p-divider-content {
     z-index: 1;
-    background: var(--p-divider-content-background);
-    color: var(--p-divider-content-text-color);
+    background: ${dt('divider.content.background')};
+    color: ${dt('divider.content.color')};
 }
 
 .p-divider-solid.p-divider-horizontal:before {
diff --git a/components/lib/themes/primeone/base/dock/index.js b/components/lib/themes/primeone/base/dock/index.js
index 17aad7625..35e83db8d 100644
--- a/components/lib/themes/primeone/base/dock/index.js
+++ b/components/lib/themes/primeone/base/dock/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-dock {
     position: absolute;
     z-index: 1;
@@ -36,8 +36,8 @@ export default {
 }
 
 p-dock-item.p-focus {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-dock-link {
diff --git a/components/lib/themes/primeone/base/dropdown/index.js b/components/lib/themes/primeone/base/dropdown/index.js
index 25f54ba71..fe6f23abb 100644
--- a/components/lib/themes/primeone/base/dropdown/index.js
+++ b/components/lib/themes/primeone/base/dropdown/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-dropdown {
     display: inline-flex;
     cursor: pointer;
@@ -7,8 +7,8 @@ export default {
     user-select: none;
     background: var(--p-dropdown-background);
     border: 1px solid var(--p-dropdown-border-color);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
-    border-radius: var(--p-rounded-base);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    border-radius: ${dt('rounded.base')};
     outline-color: transparent;
     box-shadow: var(--p-dropdown-box-shadow);
 }
@@ -55,8 +55,8 @@ export default {
     background: transparent;
     color: var(--p-dropdown-toggle-color);
     width: 2.5rem;
-    border-top-right-radius: var(--p-rounded-base);
-    border-bottom-right-radius: var(--p-rounded-base);
+    border-top-right-radius: ${dt('rounded.base')};
+    border-bottom-right-radius: ${dt('rounded.base')};
 }
 
 .p-dropdown-label {
@@ -106,7 +106,7 @@ input.p-dropdown-label {
     background: var(--p-dropdown-overlay-background);
     color: var(--p-dropdown-overlay-text-color);
     border: 1px solid var(--p-dropdown-overlay-border-color);
-    border-radius: var(--p-rounded-base);
+    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);
 }
 
@@ -166,7 +166,7 @@ input.p-dropdown-label {
     border: 0 none;
     color: var(--p-dropdown-item-text-color);
     background: transparent;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     border-radius: var(--p-rounded-sm);
 }
 
diff --git a/components/lib/themes/primeone/base/editor/index.js b/components/lib/themes/primeone/base/editor/index.js
index ddf3ecacc..45e8a379e 100644
--- a/components/lib/themes/primeone/base/editor/index.js
+++ b/components/lib/themes/primeone/base/editor/index.js
@@ -1,9 +1,9 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-editor-container .p-editor-toolbar {
     background: var(--p-editor-toolbar-background);
-    border-top-right-radius: var(--p-rounded-base);
-    border-top-left-radius: var(--p-rounded-base);
+    border-top-right-radius: ${dt('rounded.base')};
+    border-top-left-radius: ${dt('rounded.base')};
 }
 
 .p-editor-container .p-editor-toolbar.ql-snow {
@@ -51,7 +51,7 @@ export default {
     background: var(--p-editor-overlay-background);
     border: 1px solid var(--p-editor-overlay-border-color);
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     padding: 0.25rem 0.25rem;
 }
 
@@ -69,8 +69,8 @@ export default {
 }
 
 .p-editor-container .p-editor-content {
-    border-bottom-right-radius: var(--p-rounded-base);
-    border-bottom-left-radius: var(--p-rounded-base);
+    border-bottom-right-radius: ${dt('rounded.base')};
+    border-bottom-left-radius: ${dt('rounded.base')};
 }
 
 .p-editor-container .p-editor-content.ql-snow {
@@ -80,8 +80,8 @@ export default {
 .p-editor-container .p-editor-content .ql-editor {
     background: var(--p-editor-content-background);
     color: var(--p-editor-content-text-color);
-    border-bottom-right-radius: var(--p-rounded-base);
-    border-bottom-left-radius: var(--p-rounded-base);
+    border-bottom-right-radius: ${dt('rounded.base')};
+    border-bottom-left-radius: ${dt('rounded.base')};
 }
 
 .p-editor-container .ql-snow.ql-toolbar button:hover,
diff --git a/components/lib/themes/primeone/base/fieldset/index.js b/components/lib/themes/primeone/base/fieldset/index.js
index c9e3ae451..97906d892 100644
--- a/components/lib/themes/primeone/base/fieldset/index.js
+++ b/components/lib/themes/primeone/base/fieldset/index.js
@@ -1,10 +1,10 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-fieldset {
-    border: 1px solid var(--p-fieldset-border-color);
-    background: var(--p-fieldset-background);
-    color: var(--p-fieldset-text-color);
-    border-radius: var(--p-rounded-base);
+    background: ${dt('fieldset.background')};
+    border: 1px solid ${dt('fieldset.border.color')};
+    border-radius: ${dt('rounded.base')};
+    color: ${dt('fieldset.color')};
     padding: 0 1.125rem 1.125rem 1.125rem;
     margin: 0;
 }
@@ -32,29 +32,29 @@ export default {
     align-items: center;
     justify-content: center;
     padding: 0.5rem 0.75rem;
-    color: var(--p-legend-text-color);
-    border-radius: var(--p-rounded-base);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    color: ${dt('fieldset.legend.color')};
+    border-radius: ${dt('rounded.base')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
 }
 
 .p-fieldset-toggleable > .p-fieldset-legend > a:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-fieldset-toggleable > .p-fieldset-legend > a:hover {
-    color: var(--p-fieldset-legend-text-color-hover);
-    background: var(--p-fieldset-legend-background-hover);
+    color: ${dt('fieldset.legend.hover.color')};
+    background: ${dt('fieldset.legend.hover.background')};
 }
 
 .p-fieldset-toggler {
-    color: var(--p-fieldset-toggle-icon-color);
-    transition: color var(--p-transition-duration);
+    color: ${dt('fieldset.toggle.icon.color')};
+    transition: color ${dt('transition.duration')};
 }
 
 .p-fieldset-toggleable > .p-fieldset-legend > a:hover > .p-fieldset-toggler {
-    color: var(--p-fieldset-toggle-icon-color-hover);
+    color: ${dt('fieldset.toggle.icon.hover.color')};
 }
 
 .p-fieldset .p-fieldset-content {
diff --git a/components/lib/themes/primeone/base/fileupload/index.js b/components/lib/themes/primeone/base/fileupload/index.js
index 94bf1bfa7..c19efb0a4 100644
--- a/components/lib/themes/primeone/base/fileupload/index.js
+++ b/components/lib/themes/primeone/base/fileupload/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-fileupload-choose {
     position: relative;
     overflow: hidden;
@@ -21,8 +21,8 @@ export default {
     border: 1px solid var(--p-fileupload-header-border-color);
     color: var(--p-fileupload-header-text-color);
     border-bottom: 0 none;
-    border-top-right-radius: var(--p-rounded-base);
-    border-top-left-radius: var(--p-rounded-base);
+    border-top-right-radius: ${dt('rounded.base')};
+    border-top-left-radius: ${dt('rounded.base')};
     gap: 0.5rem;
 }
 
@@ -32,8 +32,8 @@ export default {
     padding: 0 1.125rem 1.125rem 1.125rem;
     border: 1px solid var(--p-fileupload-content-border-color);
     color: var(--p-fileupload-content-text-color);
-    border-bottom-right-radius: var(--p-rounded-base);
-    border-bottom-left-radius: var(--p-rounded-base);
+    border-bottom-right-radius: ${dt('rounded.base')};
+    border-bottom-left-radius: ${dt('rounded.base')};
     border-top: 0 none;
 }
 
@@ -51,7 +51,7 @@ export default {
     align-items: center;
     padding: 1rem;
     border: 1px solid var(--p-fileupload-file-border-color);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     gap: 0.5rem;
     margin-bottom: 0.5rem;
 }
diff --git a/components/lib/themes/primeone/base/floatlabel/index.js b/components/lib/themes/primeone/base/floatlabel/index.js
index 91f6019fb..3f7e11971 100644
--- a/components/lib/themes/primeone/base/floatlabel/index.js
+++ b/components/lib/themes/primeone/base/floatlabel/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-float-label {
     display: block;
     position: relative;
@@ -15,7 +15,7 @@ export default {
     line-height: 1;
     left: 0.75rem;
     color: var(--p-float-label-text-color);
-    transition-duration: var(--p-transition-duration);
+    transition-duration: ${dt('transition.duration')};
 }
 
 .p-float-label:has(textarea) label {
diff --git a/components/lib/themes/primeone/base/galleria/index.js b/components/lib/themes/primeone/base/galleria/index.js
index 5158552cc..a06fe24e7 100644
--- a/components/lib/themes/primeone/base/galleria/index.js
+++ b/components/lib/themes/primeone/base/galleria/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-galleria-content {
     display: flex;
     flex-direction: column;
@@ -29,7 +29,7 @@ export default {
     color: var(--p-galleria-navigator-color);
     width: 3rem;
     height: 3rem;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     border-radius: 50%;
     margin: 0 0.5rem;
 }
@@ -64,7 +64,7 @@ export default {
 .p-galleria-item-nav-onhover .p-galleria-item-nav {
     pointer-events: none;
     opacity: 0;
-    transition: opacity var(--p-transition-duration) ease-in-out;
+    transition: opacity ${dt('transition.duration')} ease-in-out;
 }
 
 .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
@@ -107,7 +107,7 @@ export default {
     color: var(--p-galleria-thumbnail-navigator-color);
     width: 2rem;
     height: 2rem;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
     border-radius: 50%;
 }
@@ -120,8 +120,8 @@ export default {
 
 .p-galleria-thumbnail-prev:focus-visible,
 .p-galleria-thumbnail-next:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-galleria-thumbnail-prev span,
@@ -161,8 +161,8 @@ export default {
 }
 
 .p-galleria-thumbnail-item-content:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-galleria-thumbnail-item:hover {
@@ -220,7 +220,7 @@ export default {
     background-color: var(--p-galleria-indicator-background);
     width: 1rem;
     height: 1rem;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
     border-radius: 50%;
 }
@@ -230,8 +230,8 @@ export default {
 }
 
 .p-galleria-indicator > button:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-galleria-indicator.p-highlight > button {
@@ -330,7 +330,7 @@ export default {
     height: 3rem;
     border-radius: 50%;
     outline-color: transparent;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
 }
 
 .p-galleria-close-icon {
@@ -345,8 +345,8 @@ export default {
 }
 
 .p-galleria-close:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-galleria-mask .p-galleria-item-nav {
diff --git a/components/lib/themes/primeone/base/global.js b/components/lib/themes/primeone/base/global.js
index f15721bad..3578a9faa 100644
--- a/components/lib/themes/primeone/base/global.js
+++ b/components/lib/themes/primeone/base/global.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-component,
 .p-component * {
     box-sizing: border-box;
@@ -137,7 +137,7 @@ export default {
 
 .p-component-overlay {
     background-color: rgba(0, 0, 0, 0.4);
-    transition-duration: var(--p-transition-duration);
+    transition-duration: ${dt('transition.duration')};
 }
 
 .p-disabled,
@@ -170,7 +170,7 @@ export default {
     outline-color: transparent;
 }
 .p-link:focus-visible {
-    outline: 1px solid var(--p-focus-ring-color);
+    outline: 1px solid ${dt('focus.ring.color')};
     outline-offset: 2px;
     box-shadow: none;
 }
diff --git a/components/lib/themes/primeone/base/iconfield/index.js b/components/lib/themes/primeone/base/iconfield/index.js
index c25d0147b..66717019e 100644
--- a/components/lib/themes/primeone/base/iconfield/index.js
+++ b/components/lib/themes/primeone/base/iconfield/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-icon-field {
     position: relative;
 }
diff --git a/components/lib/themes/primeone/base/image/index.js b/components/lib/themes/primeone/base/image/index.js
index 1222b5816..d42f9e6ab 100644
--- a/components/lib/themes/primeone/base/image/index.js
+++ b/components/lib/themes/primeone/base/image/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-image-mask {
     display: flex;
     align-items: center;
@@ -29,7 +29,7 @@ export default {
     cursor: pointer;
     background: transparent;
     color: var(--p-image-preview-indicator-text-color);
-    transition: background-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')};
 }
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
@@ -63,7 +63,7 @@ export default {
     height: 3rem;
     border-radius: 50%;
     outline-color: transparent;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
 }
 
 .p-image-action:hover {
@@ -72,8 +72,8 @@ export default {
 }
 
 .p-image-action:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-image-action .p-icon {
diff --git a/components/lib/themes/primeone/base/inlinemessage/index.js b/components/lib/themes/primeone/base/inlinemessage/index.js
index c4133bbcb..3e95dc68d 100644
--- a/components/lib/themes/primeone/base/inlinemessage/index.js
+++ b/components/lib/themes/primeone/base/inlinemessage/index.js
@@ -1,12 +1,12 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-inline-message {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0.5rem 0.75rem;
     margin: 0;
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-inline-message-text {
diff --git a/components/lib/themes/primeone/base/inplace/index.js b/components/lib/themes/primeone/base/inplace/index.js
index cc697604c..9968641fa 100644
--- a/components/lib/themes/primeone/base/inplace/index.js
+++ b/components/lib/themes/primeone/base/inplace/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-inplace .p-inplace-display {
     display: inline;
     cursor: pointer;
@@ -20,8 +20,8 @@ export default {
 
 .p-inplace-display {
     padding: 0.5rem 0.75rem;
-    border-radius: var(--p-rounded-base);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    border-radius: ${dt('rounded.base')};
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
 }
 
@@ -31,8 +31,8 @@ export default {
 }
 
 .p-inplace-display:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    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/inputgroup/index.js b/components/lib/themes/primeone/base/inputgroup/index.js
index 56c883e68..3aaa87d7c 100644
--- a/components/lib/themes/primeone/base/inputgroup/index.js
+++ b/components/lib/themes/primeone/base/inputgroup/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/components/lib/themes/primeone/base/inputotp/index.js b/components/lib/themes/primeone/base/inputotp/index.js
index 095029994..5e26cf57b 100644
--- a/components/lib/themes/primeone/base/inputotp/index.js
+++ b/components/lib/themes/primeone/base/inputotp/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-inputotp {
     display: flex;
     align-items: center;
diff --git a/components/lib/themes/primeone/base/inputswitch/index.js b/components/lib/themes/primeone/base/inputswitch/index.js
index 15ea0dba5..c1fc97379 100644
--- a/components/lib/themes/primeone/base/inputswitch/index.js
+++ b/components/lib/themes/primeone/base/inputswitch/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-inputswitch {
     display: inline-block;
     width: 2.5rem;
@@ -31,7 +31,7 @@ export default {
     bottom: 0;
     border: 0 none;
     background: var(--p-inputswitch-background);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     border-radius: var(--p-inputswitch-border-radius);
     outline-color: transparent;
 }
@@ -46,7 +46,7 @@ export default {
     left: 0.25rem;
     margin-top: -0.5rem;
     border-radius: 50%;
-    transition: all var(--p-transition-duration);
+    transition: all ${dt('transition.duration')};
 }
 
 .p-inputswitch.p-highlight .p-inputswitch-slider {
@@ -75,8 +75,8 @@ export default {
 }
 
 .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-inputswitch.p-invalid > .p-inputswitch-slider {
diff --git a/components/lib/themes/primeone/base/inputtext/index.js b/components/lib/themes/primeone/base/inputtext/index.js
index 65a5fc355..e1bda5c27 100644
--- a/components/lib/themes/primeone/base/inputtext/index.js
+++ b/components/lib/themes/primeone/base/inputtext/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-inputtext {
     font-family: inherit;
     font-feature-settings: inherit;
@@ -8,9 +8,9 @@ export default {
     background: var(--p-inputtext-background);
     padding: 0.5rem 0.75rem;
     border: 1px solid var(--p-inputtext-border-color);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     appearance: none;
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     outline-color: transparent;
     box-shadow: var(--p-inputtext-box-shadow);
 }
diff --git a/components/lib/themes/primeone/base/knob/index.js b/components/lib/themes/primeone/base/knob/index.js
index fb26f0a43..056113f3e 100644
--- a/components/lib/themes/primeone/base/knob/index.js
+++ b/components/lib/themes/primeone/base/knob/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-knob-range {
     fill: none;
     transition: stroke 0.1s ease-in;
@@ -17,13 +17,13 @@ export default {
 }
 
 .p-knob svg {
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     outline-color: transparent;
-    transition: outline-color var(--p-transition-duration);
+    transition: outline-color ${dt('transition.duration')};
 }
 .p-knob svg:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 @keyframes p-knob-dash-frame {
diff --git a/components/lib/themes/primeone/base/listbox/index.js b/components/lib/themes/primeone/base/listbox/index.js
index cfcc2d487..c24af8327 100644
--- a/components/lib/themes/primeone/base/listbox/index.js
+++ b/components/lib/themes/primeone/base/listbox/index.js
@@ -1,11 +1,11 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-listbox {
     background: var(--p-listbox-background);
     color: var(--p-listbox-text-color);
     border: 1px solid var(--p-listbox-border-color);
-    border-radius: var(--p-rounded-base);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    border-radius: ${dt('rounded.base')};
+    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')};
     outline-color: transparent;
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
 }
@@ -68,7 +68,7 @@ export default {
     border: 0 none;
     border-radius: var(--p-rounded-sm);
     color: var(--p-listbox-item-text-color);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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-listbox-item:first-child {
diff --git a/components/lib/themes/primeone/base/megamenu/index.js b/components/lib/themes/primeone/base/megamenu/index.js
index b15c7808a..cc5e71f6e 100644
--- a/components/lib/themes/primeone/base/megamenu/index.js
+++ b/components/lib/themes/primeone/base/megamenu/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-megamenu {
     display: flex;
     position: relative;
@@ -7,7 +7,7 @@ export default {
     background: var(--p-megamenu-background);
     color: var(--p-megamenu-text-color);
     border: 1px solid var(--p-megamenu-border-color);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-megamenu-root-list {
@@ -17,7 +17,7 @@ export default {
 }
 
 .p-megamenu .p-menuitem-content {
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
     border-radius: var(--p-rounded-sm);
     color: var(--p-megamenu-item-text-color);
 }
@@ -91,7 +91,7 @@ export default {
     background: var(--p-megamenu-background);
     color: var(--p-megamenu-text-color);
     border: 1px solid var(--p-megamenu-border-color);
-    border-radius: var(--p-rounded-base);
+    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)
 }
 
@@ -211,7 +211,7 @@ export default {
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
 }
 
@@ -221,8 +221,8 @@ export default {
 }
 
 .p-megamenu-button:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-megamenu-mobile {
diff --git a/components/lib/themes/primeone/base/menu/index.js b/components/lib/themes/primeone/base/menu/index.js
index 1ee2f1173..454bb06db 100644
--- a/components/lib/themes/primeone/base/menu/index.js
+++ b/components/lib/themes/primeone/base/menu/index.js
@@ -1,11 +1,11 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-menu {
     padding: 0.25rem 0.25rem;
     background: var(--p-menu-background);
     color: var(--p-menu-text-color);
     border: 1px solid var(--p-menu-border-color);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     min-width: 12.5rem;
 }
 
@@ -44,7 +44,7 @@ export default {
 }
 
 .p-menu .p-menuitem-content {
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
     border-radius: var(--p-rounded-sm);
     color: var(--p-menu-item-text-color);
 }
diff --git a/components/lib/themes/primeone/base/menubar/index.js b/components/lib/themes/primeone/base/menubar/index.js
index 4db61d9da..1234db5b7 100644
--- a/components/lib/themes/primeone/base/menubar/index.js
+++ b/components/lib/themes/primeone/base/menubar/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-menubar {
     display: flex;
     align-items: center;
@@ -7,7 +7,7 @@ export default {
     background: var(--p-menubar-background);
     color: var(--p-menubar-text-color);
     border: 1px solid var(--p-menubar-border-color);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-menubar ul {
@@ -44,7 +44,7 @@ export default {
 }
 
 .p-menubar .p-menuitem-content {
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
     border-radius: var(--p-rounded-sm);
     color: var(--p-menubar-item-text-color);
 }
@@ -105,7 +105,7 @@ export default {
     background: var(--p-menubar-background);
     color: var(--p-menubar-text-color);
     border: 1px solid var(--p-menubar-border-color);
-    border-radius: var(--p-rounded-base);
+    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);
 }
 
@@ -150,7 +150,7 @@ export default {
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
 }
 
@@ -160,8 +160,8 @@ export default {
 }
 
 .p-menubar-button:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-menubar-mobile {
diff --git a/components/lib/themes/primeone/base/message/index.js b/components/lib/themes/primeone/base/message/index.js
index 3a783e2af..b6617d77f 100644
--- a/components/lib/themes/primeone/base/message/index.js
+++ b/components/lib/themes/primeone/base/message/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-message-wrapper {
     display: flex;
     align-items: center;
@@ -27,15 +27,15 @@ export default {
     height: 1.75rem;
     border-radius: 50%;
     background: transparent;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
     color: inherit;
 }
 
 .p-message-close:focus-visible {
-    outline-width: var(--p-focus-ring-width);
-    outline-style: var(--p-focus-ring-style);
-    outline-offset: var(--p-focus-ring-offset);
+    outline-width: ${dt('focus.ring.width')};
+    outline-style: ${dt('focus.ring.style')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-message-info {
diff --git a/components/lib/themes/primeone/base/metergroup/index.js b/components/lib/themes/primeone/base/metergroup/index.js
index e5e8f5f75..5c8477f69 100644
--- a/components/lib/themes/primeone/base/metergroup/index.js
+++ b/components/lib/themes/primeone/base/metergroup/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-metergroup {
     display: flex;
     gap: 1rem;
@@ -8,7 +8,7 @@ export default {
 .p-metergroup-meters {
     display: flex;
     background: var(--p-metergroup-meters-background);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-metergroup-meter {
@@ -56,12 +56,12 @@ export default {
 }
 
 .p-metergroup-horizontal .p-metergroup-meter:first-of-type {
-    border-top-left-radius: var(--p-rounded-base);
-    border-bottom-left-radius: var(--p-rounded-base);
+    border-top-left-radius: ${dt('rounded.base')};
+    border-bottom-left-radius: ${dt('rounded.base')};
 }
 .p-metergroup-horizontal .p-metergroup-meter:last-of-type {
-    border-top-right-radius: var(--p-rounded-base);
-    border-bottom-right-radius: var(--p-rounded-base);
+    border-top-right-radius: ${dt('rounded.base')};
+    border-bottom-right-radius: ${dt('rounded.base')};
 }
 
 .p-metergroup-vertical {
@@ -84,12 +84,12 @@ export default {
 }
 
 .p-metergroup-vertical .p-metergroup-meter:first-of-type {
-    border-top-left-radius: var(--p-rounded-base);
-    border-top-right-radius: var(--p-rounded-base);
+    border-top-left-radius: ${dt('rounded.base')};
+    border-top-right-radius: ${dt('rounded.base')};
 }
 .p-metergroup-vertical .p-metergroup-meter:last-of-type {
-    border-bottom-left-radius: var(--p-rounded-base);
-    border-bottom-right-radius: var(--p-rounded-base);
+    border-bottom-left-radius: ${dt('rounded.base')};
+    border-bottom-right-radius: ${dt('rounded.base')};
 }
 `
 };
diff --git a/components/lib/themes/primeone/base/multiselect/index.js b/components/lib/themes/primeone/base/multiselect/index.js
index 5c84589b6..19f1da768 100644
--- a/components/lib/themes/primeone/base/multiselect/index.js
+++ b/components/lib/themes/primeone/base/multiselect/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-multiselect {
     display: inline-flex;
     cursor: pointer;
@@ -7,8 +7,8 @@ export default {
     user-select: none;
     background: var(--p-multiselect-background);
     border: 1px solid var(--p-multiselect-border-color);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
-    border-radius: var(--p-rounded-base);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    border-radius: ${dt('rounded.base')};
     outline-color: transparent;
     box-shadow: var(--p-multiselect-box-shadow);
 }
@@ -47,8 +47,8 @@ export default {
     background: transparent;
     color: var(--p-multiselect-toggle-color);
     width: 2.5rem;
-    border-top-right-radius: var(--p-rounded-base);
-    border-bottom-right-radius: var(--p-rounded-base);
+    border-top-right-radius: ${dt('rounded.base')};
+    border-bottom-right-radius: ${dt('rounded.base')};
 }
 
 .p-multiselect-label-container {
@@ -112,7 +112,7 @@ export default {
     background: var(--p-multiselect-overlay-background);
     color: var(--p-multiselect-overlay-text-color);
     border: 1px solid var(--p-multiselect-overlay-border-color);
-    border-radius: var(--p-rounded-base);
+    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);
 }
 
@@ -169,7 +169,7 @@ export default {
     border: 0 none;
     color: var(--p-multiselect-item-text-color);
     background: transparent;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     border-radius: var(--p-rounded-sm);
 }
 
diff --git a/components/lib/themes/primeone/base/orderlist/index.js b/components/lib/themes/primeone/base/orderlist/index.js
index 8389f5237..2e706ec66 100644
--- a/components/lib/themes/primeone/base/orderlist/index.js
+++ b/components/lib/themes/primeone/base/orderlist/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-orderlist {
     display: flex;
     gap: 1.125rem;
@@ -16,7 +16,7 @@ export default {
     flex: 1 1 auto;
     background: var(--p-orderlist-list-background);
     border: 1px solid var(--p-orderlist-list-border-color);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-orderlist .p-orderlist-header {
@@ -43,12 +43,12 @@ export default {
     position: relative;
     padding: 0.5rem 0.75rem;
     margin: 2px 0;
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     border: 0 none;
     color: var(--p-orderlist-item-text-color);
     background: var(--p-orderlist-item-background);
     outline-color: transparent;
-    transition: transform var(--p-transition-duration), background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: transform ${dt('transition.duration')}, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
 }
 
 .p-orderlist-item:first-child {
@@ -84,7 +84,7 @@ export default {
     border: 1px solid var(--p-orderlist-control-border-color);
     color: var(--p-order-listcontrol-text-color);
     outline-color: transparent;
-    transition: opacity var(--p-transition-duration), outline-color var(--p-transition-duration), background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration);
+    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 {
@@ -100,8 +100,8 @@ export default {
 }
 
 .p-orderlist-controls .p-button:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-button-primary-background);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} var(--p-button-primary-background);
+    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 beacae492..f38b34f27 100644
--- a/components/lib/themes/primeone/base/organizationchart/index.js
+++ b/components/lib/themes/primeone/base/organizationchart/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-organizationchart-table {
     border-spacing: 0;
     border-collapse: separate;
@@ -19,8 +19,8 @@ export default {
     background: var(--p-organizationchart-node-background);
     color: var(--p-organizationchart-node-text-color);
     padding: 0.75rem 1rem;
-    border-radius: var(--p-rounded-base);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
+    border-radius: ${dt('rounded.base')};
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
 }
 
 .p-organizationchart-node-content:has(.p-node-toggler) {
@@ -56,12 +56,12 @@ export default {
     justify-content: center;
     align-items: center;
     outline-color: transparent;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
 }
 
 .p-organizationchart-node-content .p-node-toggler:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
@@ -79,7 +79,7 @@ export default {
 .p-organizationchart-line-right {
     border-radius: 0;
     border-left: 1px solid var(--p-organizationchart-connector-color);
-    border-top-left-radius: var(--p-rounded-base);
+    border-top-left-radius: ${dt('rounded.base')};
 }
 
 .p-organizationchart-line-left {
@@ -100,12 +100,12 @@ export default {
 }
 
 .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) {
-    border-top-right-radius: var(--p-rounded-base);
+    border-top-right-radius: ${dt('rounded.base')};
 }
 
 .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) {
     border-left: 1px solid var(--p-organizationchart-connector-color);
-    border-top-left-radius: var(--p-rounded-base);
+    border-top-left-radius: ${dt('rounded.base')};
 }
 `
 };
diff --git a/components/lib/themes/primeone/base/overlaypanel/index.js b/components/lib/themes/primeone/base/overlaypanel/index.js
index 90bdea1b1..81e1fda4f 100644
--- a/components/lib/themes/primeone/base/overlaypanel/index.js
+++ b/components/lib/themes/primeone/base/overlaypanel/index.js
@@ -1,11 +1,11 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-overlaypanel {
     margin-top: 10px;
     background: var(--p-overlaypanel-background);
     color: var(--p-overlaypanel-text-color);
     border: 1px solid var(--p-overlaypanel-border-color);
-    border-radius: var(--p-rounded-base);
+    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);
 }
 
@@ -29,7 +29,7 @@ export default {
     color: var(--p-overlaypanel-close-icon-color);
     border: 0 none;
     border-radius: 50%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
     position: absolute;
     top: 0.25rem;
@@ -42,8 +42,8 @@ export default {
 }
 
 .p-overlaypanel-close:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-overlaypanel-enter-from {
diff --git a/components/lib/themes/primeone/base/paginator/index.js b/components/lib/themes/primeone/base/paginator/index.js
index 8d1f2c6a6..8bbacd987 100644
--- a/components/lib/themes/primeone/base/paginator/index.js
+++ b/components/lib/themes/primeone/base/paginator/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-paginator {
     display: flex;
     align-items: center;
@@ -9,7 +9,7 @@ export default {
     color: var(--p-paginator-text-color);
     border: 0 none;
     padding: 0.5rem 1rem;
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     gap: 0.25rem;
 }
 
@@ -39,7 +39,7 @@ export default {
     color: var(--p-paginator-navigator-color);
     min-width: 2.5rem;
     height: 2.5rem;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     border-radius: 50%;
 }
 
diff --git a/components/lib/themes/primeone/base/panel/index.js b/components/lib/themes/primeone/base/panel/index.js
index 49a1d2b67..04403de78 100644
--- a/components/lib/themes/primeone/base/panel/index.js
+++ b/components/lib/themes/primeone/base/panel/index.js
@@ -4,7 +4,7 @@ export default {
     border: 1px solid ${dt('panel.border.color')};
     border-radius: ${dt('rounded.base')};
     background: ${dt('panel.background')};
-    color: ${dt('panel.text.color')};
+    color: ${dt('panel.color')};
 }
 
 .p-panel-header {
@@ -40,8 +40,8 @@ export default {
 }
 
 .p-panel-header-icon:enabled:hover {
-    color: ${dt('panel.header.icon.color.hover')};
-    background: ${dt('panel.header.icon.background.hover')};
+    color: ${dt('panel.header.icon.hover.color')};
+    background: ${dt('panel.header.icon.hover.background')};
 }
 
 .p-panel-header-icon:focus-visible {
diff --git a/components/lib/themes/primeone/base/panelmenu/index.js b/components/lib/themes/primeone/base/panelmenu/index.js
index a3f12fb48..cb9683a29 100644
--- a/components/lib/themes/primeone/base/panelmenu/index.js
+++ b/components/lib/themes/primeone/base/panelmenu/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-panelmenu {
     display: flex;
     flex-direction: column;
@@ -10,7 +10,7 @@ export default {
     background: var(--p-panelmenu-panel-background);
     border: 1px solid var(--p-panelmenu-panel-border-color);
     color: var(--p-panelmenu-panel-text-color);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     padding: 0.25rem 0.25rem;
 }
 
@@ -22,7 +22,7 @@ export default {
 .p-panelmenu-header-content {
     border: 0 none;
     color: var(--p-panelmenu-item-text-color);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     transition: background-color 0.2s, color 0.2s, outline-color 0.2s;
     outline-color: transparent;
 }
@@ -101,7 +101,7 @@ export default {
 }
 
 .p-panelmenu .p-menuitem-content {
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
     border-radius: var(--p-rounded-sm);
     color: var(--p-menu-item-text-color);
 }
diff --git a/components/lib/themes/primeone/base/password/index.js b/components/lib/themes/primeone/base/password/index.js
index a08097525..b77ed4876 100644
--- a/components/lib/themes/primeone/base/password/index.js
+++ b/components/lib/themes/primeone/base/password/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-password {
     display: inline-flex;
     position: relative;
@@ -13,14 +13,14 @@ export default {
     height: 10px;
     margin-bottom: 0.75rem;
     background: var(--p-password-meter-border-color);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-password-strength {
     height: 100%;
     width: 0;
     transition: width 1s ease-in-out;
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-password-strength.weak {
@@ -50,7 +50,7 @@ export default {
     color: var(--p-password-overlay-text-color);
     border: 1px solid var(--p-password-overlay-border-color);
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-password > svg:last-of-type,
diff --git a/components/lib/themes/primeone/base/picklist/index.js b/components/lib/themes/primeone/base/picklist/index.js
index 4eb0c9b4e..41b942876 100644
--- a/components/lib/themes/primeone/base/picklist/index.js
+++ b/components/lib/themes/primeone/base/picklist/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-picklist {
     display: flex;
     gap: 1.125rem;
@@ -43,12 +43,12 @@ export default {
     position: relative;
     padding: 0.5rem 0.75rem;
     margin: 2px 0;
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     border: 0 none;
     color: var(--p-picklist-item-text-color);
     background: var(--p-picklist-item-background);
     outline-color: transparent;
-    transition: transform var(--p-transition-duration), background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: transform ${dt('transition.duration')}, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
 }
 
 .p-picklist-item:first-child {
@@ -84,7 +84,7 @@ export default {
     border: 1px solid var(--p-picklist-control-border-color);
     color: var(--p-order-listcontrol-text-color);
     outline-color: transparent;
-    transition: opacity var(--p-transition-duration), outline-color var(--p-transition-duration), background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration);
+    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 {
@@ -100,8 +100,8 @@ export default {
 }
 
 .p-picklist-buttons .p-button:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-button-primary-background);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} var(--p-button-primary-background);
+    outline-offset: ${dt('focus.ring.offset')};
 }
 `
 };
diff --git a/components/lib/themes/primeone/base/progressbar/index.js b/components/lib/themes/primeone/base/progressbar/index.js
index ba3ea4061..9f0233a02 100644
--- a/components/lib/themes/primeone/base/progressbar/index.js
+++ b/components/lib/themes/primeone/base/progressbar/index.js
@@ -1,12 +1,12 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-progressbar {
     position: relative;
     overflow: hidden;
     border: 0 none;
     height: 1.25rem;
     background: var(--p-progressbar-background);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-progressbar-value {
diff --git a/components/lib/themes/primeone/base/progressspinner/index.js b/components/lib/themes/primeone/base/progressspinner/index.js
index a107b74ef..a4ca6abc2 100644
--- a/components/lib/themes/primeone/base/progressspinner/index.js
+++ b/components/lib/themes/primeone/base/progressspinner/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-progress-spinner {
     position: relative;
     margin: 0 auto;
diff --git a/components/lib/themes/primeone/base/radiobutton/index.js b/components/lib/themes/primeone/base/radiobutton/index.js
index 488e6f2db..441b6e825 100644
--- a/components/lib/themes/primeone/base/radiobutton/index.js
+++ b/components/lib/themes/primeone/base/radiobutton/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-radiobutton {
     position: relative;
     display: inline-flex;
@@ -35,13 +35,13 @@ export default {
     background:  var(--p-radiobutton-background);
     width: var(--p-radiobutton-width);
     height: var(--p-radiobutton-height);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     outline-color: transparent;
     box-shadow: var(--p-radiobutton-box-shadow);
 }
 
 .p-radiobutton-icon {
-    transition-duration: var(--p-transition-duration);
+    transition-duration: ${dt('transition.duration')};
     background: transparent;
     font-size: var(--p-radiobutton-icon-size);
     width: var(--p-radiobutton-icon-size);
@@ -76,8 +76,8 @@ export default {
 }
 
 .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-radiobutton.p-invalid > .p-radiobutton-box {
diff --git a/components/lib/themes/primeone/base/rating/index.js b/components/lib/themes/primeone/base/rating/index.js
index 98cd5338b..dee04c8a8 100644
--- a/components/lib/themes/primeone/base/rating/index.js
+++ b/components/lib/themes/primeone/base/rating/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-rating {
     position: relative;
     display: flex;
@@ -17,13 +17,13 @@ export default {
 }
 
 .p-rating-item.p-focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-rating-icon {
     color: var(--p-rating-icon-color);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     font-size: 1rem;
     width: 1rem;
     height: 1rem;
diff --git a/components/lib/themes/primeone/base/scrollpanel/index.js b/components/lib/themes/primeone/base/scrollpanel/index.js
index 26dae1675..349418903 100644
--- a/components/lib/themes/primeone/base/scrollpanel/index.js
+++ b/components/lib/themes/primeone/base/scrollpanel/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-scrollpanel-wrapper {
     overflow: hidden;
     width: 100%;
@@ -30,15 +30,15 @@ export default {
     cursor: pointer;
     opacity: 0;
     outline-color: transparent;
-    transition: outline-color var(--p-transition-duration);
-    background: var(--p-scrollpanel-bar-background);
+    transition: outline-color ${dt('transition.duration')};
+    background: ${dt('scrollpanel.bar.background')};
     border: 0 none;
-    transition: outline-color var(--p-transition-duration), opacity var(--p-transition-duration);
+    transition: outline-color ${dt('transition.duration')}, opacity ${dt('transition.duration')};
 }
 
 .p-scrollpanel-bar:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-scrollpanel-bar-y {
diff --git a/components/lib/themes/primeone/base/scrolltop/index.js b/components/lib/themes/primeone/base/scrolltop/index.js
index b04c3aa3e..30d663a12 100644
--- a/components/lib/themes/primeone/base/scrolltop/index.js
+++ b/components/lib/themes/primeone/base/scrolltop/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-scrolltop {
     position: fixed;
     bottom: 20px;
@@ -51,7 +51,7 @@ export default {
     height: 3rem;
     border-radius: 50%;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    transition: background var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
 }
 `
diff --git a/components/lib/themes/primeone/base/selectbutton/index.js b/components/lib/themes/primeone/base/selectbutton/index.js
index c8be85c49..db0c83903 100644
--- a/components/lib/themes/primeone/base/selectbutton/index.js
+++ b/components/lib/themes/primeone/base/selectbutton/index.js
@@ -1,14 +1,14 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-selectbutton {
     display: inline-flex;
     user-select: none;
     vertical-align: bottom;
     border: 1px solid transparent;
     background: var(--p-selectbutton-background);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     outline-color: transparent;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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-selectbutton .p-button {
@@ -16,13 +16,13 @@ export default {
     background: transparent;
     border: 0 none;
     color: var(--p-selectbutton-item-text-color);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     outline-color: transparent;
     padding: 0.5rem 1rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     gap: 0.5rem;
     position: relative;
     cursor: pointer;
@@ -31,7 +31,7 @@ export default {
 .p-selectbutton .p-button::before {
     content: "";
     background: transparent;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     position: absolute;
     left: 0.25rem;
     top: 0.25rem;
@@ -59,8 +59,8 @@ export default {
 }
 
 .p-selectbutton .p-button:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
     --p-focus-ring-offset: 0;
 }
 
diff --git a/components/lib/themes/primeone/base/sidebar/index.js b/components/lib/themes/primeone/base/sidebar/index.js
index ab1570269..bab132c00 100644
--- a/components/lib/themes/primeone/base/sidebar/index.js
+++ b/components/lib/themes/primeone/base/sidebar/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-sidebar {
     display: flex;
     flex-direction: column;
@@ -44,7 +44,7 @@ export default {
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
 }
 
@@ -54,8 +54,8 @@ export default {
 }
 
 .p-sidebar-icon:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-sidebar-full .p-sidebar {
diff --git a/components/lib/themes/primeone/base/skeleton/index.js b/components/lib/themes/primeone/base/skeleton/index.js
index 7315f0c42..508a4e99a 100644
--- a/components/lib/themes/primeone/base/skeleton/index.js
+++ b/components/lib/themes/primeone/base/skeleton/index.js
@@ -1,9 +1,9 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-skeleton {
     overflow: hidden;
     background-color: var(--p-skeleton-background);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-skeleton::after {
diff --git a/components/lib/themes/primeone/base/slider/index.js b/components/lib/themes/primeone/base/slider/index.js
index be221b0a4..ae2e85ca0 100644
--- a/components/lib/themes/primeone/base/slider/index.js
+++ b/components/lib/themes/primeone/base/slider/index.js
@@ -1,9 +1,9 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-slider {
     position: relative;
     background: var(--p-slider-track-background);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-slider-handle {
@@ -17,7 +17,7 @@ export default {
     background: var(--p-slider-handle-background);
     border: 0 none;
     border-radius: 50%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     outline-color: transparent;
 }
 
@@ -37,14 +37,14 @@ export default {
 }
 
 .p-slider-handle:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: 0;
 }
 
 .p-slider-range {
     display: block;
     background: var(--p-slider-range-background);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-slider.p-slider-horizontal {
diff --git a/components/lib/themes/primeone/base/speeddial/index.js b/components/lib/themes/primeone/base/speeddial/index.js
index f24eec92c..187cd73a5 100644
--- a/components/lib/themes/primeone/base/speeddial/index.js
+++ b/components/lib/themes/primeone/base/speeddial/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-speeddial {
     position: absolute;
     display: flex;
@@ -13,7 +13,9 @@ export default {
 }
 
 .p-speeddial-button.p-speeddial-rotate {
-    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt(
+        'transition.duration'
+    )}, outline-color ${dt('transition.duration')};
     will-change: transform;
 }
 
@@ -24,7 +26,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: top 0s linear var(--p-transition-duration);
+    transition: top 0s linear ${dt('transition.duration')};
     pointer-events: none;
     outline: 0 none;
     z-index: 2;
@@ -39,8 +41,8 @@ export default {
 }
 
 .p-speeddial-item.p-focus > .p-speeddial-action {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-speeddial-action {
@@ -55,7 +57,7 @@ export default {
     background: var(--p-speeddial-item-background);
     color: var(--p-speeddial-item-text-color);
     outline-color: transparent;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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 {
diff --git a/components/lib/themes/primeone/base/splitbutton/index.js b/components/lib/themes/primeone/base/splitbutton/index.js
index 81ca04159..43964e887 100644
--- a/components/lib/themes/primeone/base/splitbutton/index.js
+++ b/components/lib/themes/primeone/base/splitbutton/index.js
@@ -1,9 +1,9 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-splitbutton {
     display: inline-flex;
     position: relative;
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-splitbutton-defaultbutton {
diff --git a/components/lib/themes/primeone/base/splitter/index.js b/components/lib/themes/primeone/base/splitter/index.js
index 0e28cf66b..69cbf33d5 100644
--- a/components/lib/themes/primeone/base/splitter/index.js
+++ b/components/lib/themes/primeone/base/splitter/index.js
@@ -1,12 +1,12 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-splitter {
     display: flex;
     flex-wrap: nowrap;
-    border: 1px solid var(--p-splitter-border-color);
-    background: var(--p-splitter-background);
-    border-radius: var(--p-rounded-base);
-    color: var(--p-splitter-text-color);
+    border: 1px solid ${dt('splitter.border.color')};
+    background: ${dt('splitter.background')};
+    border-radius: ${dt('rounded.base')};
+    color: ${dt('splitter.color')};
 }
 
 .p-splitter-vertical {
@@ -20,19 +20,19 @@ export default {
     align-items: center;
     justify-content: center;
     z-index: 1;
-    background: var(--p-splitter-gutter-background);
+    background: ${dt('splitter.gutter.background')};
 }
 
 .p-splitter-gutter-handle {
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     background: transparent;
-    transition: outline-color var(--p-transition-duration);
+    transition: outline-color ${dt('transition.duration')};
     outline-color: transparent;
 }
 
 .p-splitter-gutter-handle:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-splitter-horizontal.p-splitter-resizing {
diff --git a/components/lib/themes/primeone/base/stepper/index.js b/components/lib/themes/primeone/base/stepper/index.js
index 8a011e736..a3ba1673e 100644
--- a/components/lib/themes/primeone/base/stepper/index.js
+++ b/components/lib/themes/primeone/base/stepper/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-stepper-nav {
     position: relative;
     display: flex;
@@ -29,15 +29,15 @@ export default {
     align-items: center;
     text-decoration: none;
     cursor: pointer;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
-    border-radius: var(--p-rounded-base);
+    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')};
+    border-radius: ${dt('rounded.base')};
     outline-color: transparent;
     background: transparent;
 }
 
 .p-stepper-header .p-stepper-action:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-stepper.p-stepper-readonly .p-stepper-header {
@@ -51,26 +51,26 @@ export default {
     text-overflow: ellipsis;
     max-width: 100%;
     margin-left: 0.5rem;
-    color: var(--p-stepper-title-text-color);
+    color: ${dt('stepper.title.color')};
     font-weight: 500;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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-stepper-number {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--p-stepper-marker-text-color);
-    border: 1px solid var(--p-stepper-marker-border-color);
+    color: ${dt('stepper.marker.color')};
+    border: 1px solid ${dt('stepper.marker.border.color')};
     border-width: 2px;
-    background: var(--p-stepper-marker-background);
+    background: ${dt('stepper.marker.background')};
     min-width: 2rem;
     height: 2rem;
     line-height: 2rem;
     font-size: 1.143rem;
     border-radius: 50%;
     box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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-stepper-header.p-highlight .p-stepper-action {
@@ -78,35 +78,35 @@ export default {
 }
 
 .p-stepper-header.p-highlight .p-stepper-number {
-    background: var(--p-stepper-marker-background-highlight);
-    color: var(--p-stepper-marker-text-color-highlight);
+    background: ${dt('stepper.marker.active.background')};
+    color: ${dt('stepper.marker.active.background')};
 }
 
 .p-stepper-header.p-highlight .p-stepper-title {
-    color: var(--p-stepper-title-text-color-highlight);
+    color: ${dt('stepper.title.active.background')};
 }
 
 .p-stepper-header:not(.p-disabled):focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
-    background: var(--p-stepper-connector-background-highlight);
+    background: ${dt('stepper.connector.active.background')};
 }
 
 .p-stepper-separator {
     flex: 1 1 0;
-    background: var(--p-stepper-connector-background);
+    background: ${dt('stepper.connector.background')};
     width: 100%;
     height: 2px;
     margin-inline-start: 1rem;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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-stepper-content {
-    background: var(--p-stepper-content-background);
-    color: var(--p-stepper-content-text-color);
+    background: ${dt('stepper.content.background')};
+    color: ${dt('stepper.content.color')};
     padding: 0.875rem 1.125rem 1.125rem 1.125rem;
 }
 
@@ -151,7 +151,7 @@ export default {
 }
 
 .p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background: var(--p-stepper-connector-background-highlight);
+    background: ${dt('stepper.connector.active.background')};
 }
 
 .p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
diff --git a/components/lib/themes/primeone/base/steps/index.js b/components/lib/themes/primeone/base/steps/index.js
index 4aa1aab6f..c396da106 100644
--- a/components/lib/themes/primeone/base/steps/index.js
+++ b/components/lib/themes/primeone/base/steps/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-steps {
     position: relative;
 }
@@ -53,14 +53,14 @@ export default {
     align-items: center;
     overflow: hidden;
     text-decoration: none;
-    transition: outline-color var(--p-transition-duration);
-    border-radius: var(--p-rounded-base);
+    transition: outline-color ${dt('transition.duration')};
+    border-radius: ${dt('rounded.base')};
     outline-color: transparent;
 }
 
 .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-steps-title {
diff --git a/components/lib/themes/primeone/base/tabmenu/index.js b/components/lib/themes/primeone/base/tabmenu/index.js
index 1b2dcbcc3..494f5d217 100644
--- a/components/lib/themes/primeone/base/tabmenu/index.js
+++ b/components/lib/themes/primeone/base/tabmenu/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-tabmenu {
     overflow-x: auto;
 }
@@ -30,15 +30,15 @@ export default {
     color: var(--p-tabmenu-header-text-color);
     padding: 1rem 1.125rem;
     font-weight: 600;
-    border-top-right-radius: var(--p-rounded-base);
-    border-top-left-radius: var(--p-rounded-base);
-    transition: color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    border-top-right-radius: ${dt('rounded.base')};
+    border-top-left-radius: ${dt('rounded.base')};
+    transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     margin: 0 0 -1px 0;
     outline-color: transparent;
 }
 
 .p-tabmenuitem .p-menuitem-link:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: -1px;
 }
 
diff --git a/components/lib/themes/primeone/base/tabview/index.js b/components/lib/themes/primeone/base/tabview/index.js
index f3a6abe04..a8f933e63 100644
--- a/components/lib/themes/primeone/base/tabview/index.js
+++ b/components/lib/themes/primeone/base/tabview/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-tabview-nav-container {
     position: relative;
 }
@@ -22,8 +22,8 @@ export default {
     padding: 0;
     list-style-type: none;
     flex: 1 1 auto;
-    background: var(--p-tabview-nav-background);
-    border: 1px solid var(--p-tabview-nav-border-color);
+    background: ${dt('tabview.nav.background')};
+    border: 1px solid ${dt('tabview.nav.border.color')};
     border-width: 0 0 1px 0;
     position: relative;
 }
@@ -38,28 +38,28 @@ export default {
     overflow: hidden;
     border-style: solid;
     border-width: 0 0 1px 0;
-    border-color: transparent transparent var(--p-tabview-header-border-color) transparent;
-    color: var(--p-tabview-header-text-color);
+    border-color: transparent transparent ${dt('tabview.header.border.color')} transparent;
+    color: ${dt('tabview.header.color')};
     padding: 1rem 1.125rem;
     font-weight: 600;
-    border-top-right-radius: var(--p-rounded-base);
-    border-top-left-radius: var(--p-rounded-base);
-    transition: color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    border-top-right-radius: ${dt('rounded.base')};
+    border-top-left-radius: ${dt('rounded.base')};
+    transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     margin: 0 0 -1px 0;
     outline-color: transparent;
 }
 
 .p-tabview-header:not(.p-disabled) .p-tabview-nav-link:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: -1px;
 }
 
 .p-tabview-header:not(.p-highlight):not(.p-disabled):hover >.p-tabview-nav-link {
-    color: var(--p-tabview-header-text-color-hover);
+    color: ${dt('tabview.header.hover.color')};
 }
 
 .p-tabview-header.p-highlight > .p-tabview-nav-link {
-    color: var(--p-primary-color);
+    color: ${dt('tabview.header.active.color')};
 }
 
 .p-tabview-title {
@@ -75,22 +75,22 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--p-tabview-navigator-icon-background);
-    color: var(--p-tabview-navigator-icon-color);
+    background: ${dt('tabview.navigatior.icon.background')};
+    color: ${dt('tabview.navigatior.icon.color')};
     width: 2.5rem;
     border-radius: 0;
     outline-color: transparent;
-    transition: color var(--p-transition-duration), outline-color var(--p-transition-duration);
-    box-shadow: var(--p-tabview-navigator-icon-box-shadow);
+    transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    box-shadow: ${dt('tabview.navigatior.icon.box.shadow')};
 }
 
 .p-tabview-nav-btn:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: -2px;
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-tabview-nav-btn:hover {
-    color: var(--p-tabview-navigator-icon-color-hover);
+    color: ${dt('tabview.navigatior.icon.hover.color')};
 }
 
 .p-tabview-nav-prev {
@@ -106,8 +106,8 @@ export default {
 }
 
 .p-tabview-panels {
-    background: var(--p-tabview-content-background);
-    color: var(--p-tabview-content-text-color);
+    background: ${dt('tabview.navigatior.content.background')};
+    color: ${dt('tabview.navigatior.content.color')};
     padding: 0.875rem 1.125rem 1.125rem 1.125rem;
 }
 
@@ -117,7 +117,7 @@ export default {
     position: absolute;
     bottom: -1px;
     height: 1px;
-    background-color: var(--p-primary-color);
+    background-color: ${dt('tabview.header.active.border.color')};
     transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
 }
 `
diff --git a/components/lib/themes/primeone/base/tag/index.js b/components/lib/themes/primeone/base/tag/index.js
index 721bd88f9..b8aac1062 100644
--- a/components/lib/themes/primeone/base/tag/index.js
+++ b/components/lib/themes/primeone/base/tag/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-tag {
     display: inline-flex;
     align-items: center;
diff --git a/components/lib/themes/primeone/base/terminal/index.js b/components/lib/themes/primeone/base/terminal/index.js
index 3bad62a7a..a09b70228 100644
--- a/components/lib/themes/primeone/base/terminal/index.js
+++ b/components/lib/themes/primeone/base/terminal/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-terminal {
     height: 18rem;
     overflow: auto;
@@ -7,7 +7,7 @@ export default {
     color: var(--p-terminal-text-color);
     border: 1px solid var(--p-terminal-border-color);
     padding: 0.5rem 0.75rem;
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-terminal-prompt-container {
diff --git a/components/lib/themes/primeone/base/textarea/index.js b/components/lib/themes/primeone/base/textarea/index.js
index a00346f19..4583f2bd5 100644
--- a/components/lib/themes/primeone/base/textarea/index.js
+++ b/components/lib/themes/primeone/base/textarea/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-inputtextarea {
     font-family: inherit;
     font-feature-settings: inherit;
@@ -8,9 +8,9 @@ export default {
     background: var(--p-textarea-background);
     padding: 0.5rem 0.75rem;
     border: 1px solid var(--p-textarea-border-color);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     appearance: none;
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     outline-color: transparent;
     box-shadow: var(--p-textarea-box-shadow);
 }
diff --git a/components/lib/themes/primeone/base/tieredmenu/index.js b/components/lib/themes/primeone/base/tieredmenu/index.js
index 310b54491..080fbbfae 100644
--- a/components/lib/themes/primeone/base/tieredmenu/index.js
+++ b/components/lib/themes/primeone/base/tieredmenu/index.js
@@ -1,11 +1,11 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-tieredmenu {
     padding: 0.25rem 0.25rem;
     background: var(--p-tieredmenu-background);
     color: var(--p-tieredmenu-text-color);
     border: 1px solid var(--p-tieredmenu-border-color);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     min-width: 12.5rem;
 }
 
@@ -27,7 +27,7 @@ export default {
     background: var(--p-tieredmenu-background);
     color: var(--p-tieredmenu-text-color);
     border: 1px solid var(--p-tieredmenu-border-color);
-    border-radius: var(--p-rounded-base);
+    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);
 }
 
@@ -60,7 +60,7 @@ export default {
 }
 
 .p-tieredmenu .p-menuitem-content {
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
     border-radius: var(--p-rounded-sm);
     color: var(--p-tieredmenu-item-text-color);
 }
diff --git a/components/lib/themes/primeone/base/timeline/index.js b/components/lib/themes/primeone/base/timeline/index.js
index 46681012f..0f9dc36a1 100644
--- a/components/lib/themes/primeone/base/timeline/index.js
+++ b/components/lib/themes/primeone/base/timeline/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-timeline {
     display: flex;
     flex-grow: 1;
diff --git a/components/lib/themes/primeone/base/toast/index.js b/components/lib/themes/primeone/base/toast/index.js
index 2040b97af..bac3156e7 100644
--- a/components/lib/themes/primeone/base/toast/index.js
+++ b/components/lib/themes/primeone/base/toast/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-toast {
     width: 25rem;
     white-space: pre-line;
@@ -9,7 +9,7 @@ export default {
 .p-toast-message {
     backdrop-filter: blur(var(--p-toast-blur));
     margin: 0 0 1rem 0;
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
 }
 
 .p-toast-message-icon {
@@ -47,7 +47,7 @@ export default {
     border-radius: 50%;
     cursor: pointer;
     background: transparent;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
     color: inherit;
     width: 1.75rem;
@@ -57,9 +57,9 @@ export default {
 }
 
 .p-toast-icon-close:focus-visible {
-    outline-width: var(--p-focus-ring-width);
-    outline-style: var(--p-focus-ring-style);
-    outline-offset: var(--p-focus-ring-offset);
+    outline-width: ${dt('focus.ring.width')};
+    outline-style: ${dt('focus.ring.style')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-toast-message-info {
diff --git a/components/lib/themes/primeone/base/togglebutton/index.js b/components/lib/themes/primeone/base/togglebutton/index.js
index a44785077..81d0b67e1 100644
--- a/components/lib/themes/primeone/base/togglebutton/index.js
+++ b/components/lib/themes/primeone/base/togglebutton/index.js
@@ -1,15 +1,15 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-togglebutton {
     display: inline-flex;
     user-select: none;
     vertical-align: bottom;
     border: 1px solid transparent;
     background: var(--p-togglebutton-background);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     outline-color: transparent;
     position: relative;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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-togglebutton-input {
@@ -26,7 +26,7 @@ export default {
     z-index: 1;
     outline: 0 none;
     border: 1px solid transparent;
-    border-radius: var(--p-rounded-base);;
+    border-radius: ${dt('rounded.base')};;
 }
 
 .p-togglebutton .p-button {
@@ -34,13 +34,13 @@ export default {
     background: transparent;
     border: 0 none;
     color: var(--p-togglebutton-item-text-color);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     outline-color: transparent;
     padding: 0.5rem 1rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     gap: 0.5rem;
     position: relative;
 }
@@ -48,7 +48,7 @@ export default {
 .p-togglebutton .p-button::before {
     content: "";
     background: transparent;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     position: absolute;
     left: 0.25rem;
     top: 0.25rem;
@@ -92,8 +92,8 @@ export default {
 }
 
 .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-togglebutton.p-invalid {
diff --git a/components/lib/themes/primeone/base/toolbar/index.js b/components/lib/themes/primeone/base/toolbar/index.js
index c21e6293a..cd29eeffb 100644
--- a/components/lib/themes/primeone/base/toolbar/index.js
+++ b/components/lib/themes/primeone/base/toolbar/index.js
@@ -1,15 +1,15 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-toolbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     padding: 0.75rem;
-    background: var(--p-toolbar-background);
-    border: 1px solid var(--p-toolbar-border-color);
-    color: var(--p-toolbar-text-color);
-    border-radius: var(--p-rounded-base);
+    background: ${dt('toolbar.background')};
+    border: 1px solid ${dt('toolbar.border.color')};
+    color: ${dt('toolbar.color')};
+    border-radius: ${dt('rounded.base')};
     gap: 0.5rem;
 }
 
diff --git a/components/lib/themes/primeone/base/tooltip/index.js b/components/lib/themes/primeone/base/tooltip/index.js
index 63df6e4bf..dbbe65d7b 100644
--- a/components/lib/themes/primeone/base/tooltip/index.js
+++ b/components/lib/themes/primeone/base/tooltip/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-tooltip {
     position: absolute;
     display: none;
diff --git a/components/lib/themes/primeone/base/tree/index.js b/components/lib/themes/primeone/base/tree/index.js
index 1f0fe516d..cd5fa0856 100644
--- a/components/lib/themes/primeone/base/tree/index.js
+++ b/components/lib/themes/primeone/base/tree/index.js
@@ -1,9 +1,9 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-tree {
     background: var(--p-tree-background);
     color: var(--p-tree-text-color);
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     border: 0 none;
     padding: 1rem;
 }
@@ -30,17 +30,17 @@ export default {
 }
 
 .p-treenode-content {
-    border-radius: var(--p-rounded-base);
+    border-radius: ${dt('rounded.base')};
     padding: 0.25rem 0.5rem;
     display: flex;
     align-items: center;
     outline-color: transparent;
     color: var(--p-tree-node-text-color);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
 }
 
 .p-treenode:focus-visible > .p-treenode-content {
-    outline: 1px solid var(--p-focus-ring-color);
+    outline: 1px solid ${dt('focus.ring.color')};
     outline-offset: -2px;
 }
 
@@ -65,7 +65,7 @@ export default {
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     outline-color: transparent;
 }
 
@@ -119,7 +119,7 @@ export default {
 .p-treenode-icon {
     margin-right: 0.5rem;
     color: var(--p-tree-node-icon-color);
-    transition: color var(--p-transition-duration);
+    transition: color ${dt('transition.duration')};
 }
 
 .p-treenode-content .p-checkbox {
diff --git a/components/lib/themes/primeone/base/treeselect/index.js b/components/lib/themes/primeone/base/treeselect/index.js
index a85075e04..d48570951 100644
--- a/components/lib/themes/primeone/base/treeselect/index.js
+++ b/components/lib/themes/primeone/base/treeselect/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-treeselect {
     display: inline-flex;
     cursor: pointer;
@@ -7,8 +7,8 @@ export default {
     user-select: none;
     background: var(--p-treeselect-background);
     border: 1px solid var(--p-treeselect-border-color);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
-    border-radius: var(--p-rounded-base);
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    border-radius: ${dt('rounded.base')};
     outline-color: transparent;
     box-shadow: var(--p-treeselect-box-shadow);
 }
@@ -47,8 +47,8 @@ export default {
     background: transparent;
     color: var(--p-treeselect-toggle-color);
     width: 2.5rem;
-    border-top-right-radius: var(--p-rounded-base);
-    border-bottom-right-radius: var(--p-rounded-base);
+    border-top-right-radius: ${dt('rounded.base')};
+    border-bottom-right-radius: ${dt('rounded.base')};
 }
 
 .p-treeselect-label-container {
@@ -112,7 +112,7 @@ export default {
     background: var(--p-treeselect-overlay-background);
     color: var(--p-treeselect-overlay-text-color);
     border: 1px solid var(--p-treeselect-overlay-border-color);
-    border-radius: var(--p-rounded-base);
+    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);
 }
 
diff --git a/components/lib/themes/primeone/base/treetable/index.js b/components/lib/themes/primeone/base/treetable/index.js
index 01df554ec..e5e5d3bf1 100644
--- a/components/lib/themes/primeone/base/treetable/index.js
+++ b/components/lib/themes/primeone/base/treetable/index.js
@@ -1,5 +1,5 @@
 export default {
-    css: `
+    css: ({ dt }) => `
 .p-treetable {
     position: relative;
 }
@@ -25,7 +25,7 @@ export default {
 .p-treetable .p-sortable-column .p-sortable-column-icon {
     color: var(--p-treetable-sort-icon-color);
     margin-left: 0.5rem;
-    transition: color var(--p-transition-duration);
+    transition: color ${dt('transition.duration')};
 }
 
 .p-treetable .p-sortable-column .p-sortable-column-badge {
@@ -54,7 +54,7 @@ export default {
 }
 
 .p-treetable .p-sortable-column:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: -1px;
 }
 
@@ -243,14 +243,14 @@ export default {
     border-width: 0 0 1px 0;
     color: var(--p-treetable-header-cell-text-color);
     font-weight: 600;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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);
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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 {
@@ -279,7 +279,7 @@ export default {
 }
 
 .p-treetable-tbody > tr:focus-visible {
-    outline: 1px solid var(--p-focus-ring-color);
+    outline: 1px solid ${dt('focus.ring.color')};
     outline-offset: -1px;
 }
 
@@ -298,7 +298,7 @@ export default {
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
+    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')};
     outline-color: transparent;
     margin-right: 0.5rem;
 }
diff --git a/components/lib/themes/primeone/presets/aura/accordion/index.js b/components/lib/themes/primeone/presets/aura/accordion/index.js
index 647c0755d..ba3e3a063 100644
--- a/components/lib/themes/primeone/presets/aura/accordion/index.js
+++ b/components/lib/themes/primeone/presets/aura/accordion/index.js
@@ -3,27 +3,27 @@ export default {
         light: {
             header: {
                 background: '{surface.0}',
-                textColor: '{surface.500}',
-                textColorHover: '{surface.700}',
-                textColorActive: '{surface.700}'
+                color: '{surface.500}',
+                hoverColor: '{surface.700}',
+                activeColor: '{surface.700}'
             },
             content: {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             }
         },
         dark: {
             header: {
                 background: '{surface.900}',
-                textColor: '{surface.400}',
-                textColorHover: '{surface.0}',
-                textColorActive: '{surface.0}'
+                color: '{surface.400}',
+                hoverColor: '{surface.0}',
+                activeColor: '{surface.0}'
             },
             content: {
                 background: '{surface.900}',
                 borderColor: '{surface.700}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             }
         }
     }
diff --git a/components/lib/themes/primeone/presets/aura/card/index.js b/components/lib/themes/primeone/presets/aura/card/index.js
index 431ddde3b..c0bcfd2d3 100644
--- a/components/lib/themes/primeone/presets/aura/card/index.js
+++ b/components/lib/themes/primeone/presets/aura/card/index.js
@@ -3,19 +3,19 @@ export default {
         light: {
             root: {
                 background: '{surface.0}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             },
             subtitle: {
-                textColor: '{surface.500}'
+                color: '{surface.500}'
             }
         },
         dark: {
             root: {
                 background: '{surface.900}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             subtitle: {
-                textColor: '{surface.400}'
+                color: '{surface.400}'
             }
         }
     }
diff --git a/components/lib/themes/primeone/presets/aura/divider/index.js b/components/lib/themes/primeone/presets/aura/divider/index.js
index b3c8e88ef..f177d9469 100644
--- a/components/lib/themes/primeone/presets/aura/divider/index.js
+++ b/components/lib/themes/primeone/presets/aura/divider/index.js
@@ -6,7 +6,7 @@ export default {
             },
             content: {
                 background: '{surface.0}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             }
         },
         dark: {
@@ -15,7 +15,7 @@ export default {
             },
             content: {
                 background: '{surface.900}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             }
         }
     }
diff --git a/components/lib/themes/primeone/presets/aura/fieldset/index.js b/components/lib/themes/primeone/presets/aura/fieldset/index.js
index 3e7537a70..0888196eb 100644
--- a/components/lib/themes/primeone/presets/aura/fieldset/index.js
+++ b/components/lib/themes/primeone/presets/aura/fieldset/index.js
@@ -4,32 +4,32 @@ export default {
             root: {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             },
             legend: {
-                backgroundHover: '{surface.100}',
-                textColor: '{surface.700}',
-                textColorHover: '{surface.800}'
+                color: '{surface.700}',
+                hoverBackground: '{surface.100}',
+                hoverColor: '{surface.800}'
             },
             toggleIcon: {
                 color: '{surface.500}',
-                colorHover: '{surface.600}'
+                hoverColor: '{surface.600}'
             }
         },
         dark: {
             root: {
                 background: '{surface.900}',
                 borderColor: '{surface.700}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             legend: {
-                backgroundHover: '{surface.800}',
-                textColor: '{surface.0}',
-                textColorHover: '{surface.0}'
+                color: '{surface.0}',
+                hoverBackground: '{surface.800}',
+                hoverColor: '{surface.0}'
             },
             toggleIcon: {
                 color: '{surface.400}',
-                colorHover: '{surface.300}'
+                hoverColor: '{surface.300}'
             }
         }
     }
diff --git a/components/lib/themes/primeone/presets/aura/panel/index.js b/components/lib/themes/primeone/presets/aura/panel/index.js
index 2eb3e7b6b..0328425ba 100644
--- a/components/lib/themes/primeone/presets/aura/panel/index.js
+++ b/components/lib/themes/primeone/presets/aura/panel/index.js
@@ -4,24 +4,24 @@ export default {
             root: {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             },
             headerIcon: {
                 color: '{surface.500}',
-                colorHover: '{surface.600}',
-                backgroundHover: '{surface.100}'
+                hoverColor: '{surface.600}',
+                hoverBackground: '{surface.100}'
             }
         },
         dark: {
             root: {
                 background: '{surface.900}',
                 borderColor: '{surface.700}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             headerIcon: {
                 color: '{surface.400}',
-                colorHover: '{surface.300}',
-                backgroundHover: '{surface.800}'
+                hoverColor: '{surface.300}',
+                hoverBackground: '{surface.800}'
             }
         }
     }
diff --git a/components/lib/themes/primeone/presets/aura/splitter/index.js b/components/lib/themes/primeone/presets/aura/splitter/index.js
index 98a2d218d..fc9dbb81a 100644
--- a/components/lib/themes/primeone/presets/aura/splitter/index.js
+++ b/components/lib/themes/primeone/presets/aura/splitter/index.js
@@ -4,7 +4,7 @@ export default {
             root: {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             },
             gutter: {
                 background: '{surface.200}'
@@ -14,7 +14,7 @@ export default {
             root: {
                 background: '{surface.900}',
                 borderColor: '{surface.700}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             gutter: {
                 background: '{surface.700}'
diff --git a/components/lib/themes/primeone/presets/aura/stepper/index.js b/components/lib/themes/primeone/presets/aura/stepper/index.js
index 7d3c0885f..8694d2b73 100644
--- a/components/lib/themes/primeone/presets/aura/stepper/index.js
+++ b/components/lib/themes/primeone/presets/aura/stepper/index.js
@@ -3,43 +3,43 @@ export default {
         light: {
             connector: {
                 background: '{surface.200}',
-                backgroundHighlight: '{primary.color}'
+                activeBackground: '{primary.color}'
             },
             title: {
-                textColor: '{surface.700}',
-                textColorHighlight: '{primary.color}'
+                color: '{surface.700}',
+                activeColor: '{primary.color}'
             },
             marker: {
                 background: '{surface.0}',
-                backgroundHighlight: '{surface.0}',
+                activeBackground: '{surface.0}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.500}',
-                textColorHighlight: '{primary.color}'
+                color: '{surface.500}',
+                activeColor: '{primary.color}'
             },
             content: {
                 background: '{surface.0}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             }
         },
         dark: {
             connector: {
                 background: '{surface.700}',
-                backgroundHighlight: '{primary.color}'
+                activeBackground: '{primary.color}'
             },
             title: {
-                textColor: '{surface.0}',
-                textColorHighlight: '{primary.color}'
+                color: '{surface.0}',
+                activeColor: '{primary.color}'
             },
             marker: {
                 background: '{surface.900}',
-                backgroundHighlight: '{surface.900}',
+                activeBackground: '{surface.900}',
                 borderColor: '{surface.700}',
-                textColor: '{surface.400}',
-                textColorHighlight: '{primary.color}'
+                color: '{surface.400}',
+                activeColor: '{primary.color}'
             },
             content: {
                 background: '{surface.900}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             }
         }
     }
diff --git a/components/lib/themes/primeone/presets/aura/tabview/index.js b/components/lib/themes/primeone/presets/aura/tabview/index.js
index c138b963f..080246ed7 100644
--- a/components/lib/themes/primeone/presets/aura/tabview/index.js
+++ b/components/lib/themes/primeone/presets/aura/tabview/index.js
@@ -7,19 +7,22 @@ export default {
             },
             header: {
                 borderColor: '{surface.200}',
-                textColor: '{surface.500}',
-                textColorHover: '{surface.700}'
+                activeBorderColor: '{primary.color}',
+                color: '{surface.500}',
+                hoverColor: '{surface.700}',
+                activeColor: '{primary.color}'
             },
             navigatorIcon: {
                 background: '{surface.0}',
                 color: '{surface.500}',
-                colorHover: '{surface.700}',
+                hoverColor: '{surface.700}',
                 boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)'
             },
             content: {
                 background: '{surface.0}',
-                textColor: '{surface.700}'
-            }
+                color: '{surface.700}'
+            },
+            
         },
         dark: {
             nav: {
@@ -28,18 +31,20 @@ export default {
             },
             header: {
                 borderColor: '{surface.700}',
-                textColor: '{surface.400}',
-                textColorHover: '{surface.0}'
+                activeBorderColor: '{primary.color}',
+                color: '{surface.400}',
+                hoverColor: '{surface.0}',
+                activeColor: '{primary.color}'
             },
             navigatorIcon: {
                 background: '{surface.900}',
                 color: '{surface.400}',
-                colorHover: '{surface.0}',
+                hoverColor: '{surface.0}',
                 boxShadow: '0px 0px 10px 50px color-mix(in srgb, var(--p-surface-900), transparent 50%)'
             },
             content: {
                 background: '{surface.900}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             }
         }
     }
diff --git a/components/lib/themes/primeone/presets/aura/toolbar/index.js b/components/lib/themes/primeone/presets/aura/toolbar/index.js
index 1022a5cc7..13e74546a 100644
--- a/components/lib/themes/primeone/presets/aura/toolbar/index.js
+++ b/components/lib/themes/primeone/presets/aura/toolbar/index.js
@@ -4,14 +4,14 @@ export default {
             root: {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
-                textColor: '{surface.700}'
+                color: '{surface.700}'
             }
         },
         dark: {
             root: {
                 background: '{surface.900}',
                 borderColor: '{surface.700}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             }
         }
     }