From b94d91e6771d6e9ab9ff1b18753b2fd4cdebf9b2 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Thu, 28 Mar 2024 14:26:59 +0000
Subject: [PATCH] Theming API: Refactor on internal CSS variables

---
 components/lib/base/style/BaseStyle.js        |  4 ++--
 components/lib/confirmpopup/ConfirmPopup.vue  |  3 ++-
 components/lib/knob/BaseKnob.vue              |  7 +++---
 components/lib/knob/Knob.d.ts                 |  6 ++---
 components/lib/overlaypanel/OverlayPanel.vue  |  3 ++-
 components/lib/speeddial/SpeedDial.vue        | 17 +++++++-------
 components/lib/themes/helpers/dt.js           | 22 ++++++++++++++++---
 .../primeone/base/confirmpopup/index.js       |  2 +-
 .../primeone/base/overlaypanel/index.js       |  2 +-
 components/lib/utils/DomHandler.js            | 10 +++++----
 10 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js
index dc16cc185..d267eef41 100644
--- a/components/lib/base/style/BaseStyle.js
+++ b/components/lib/base/style/BaseStyle.js
@@ -1,4 +1,4 @@
-import Theme from 'primevue/themes';
+import Theme, { $dt } from 'primevue/themes';
 import { useStyle } from 'primevue/usestyle';
 import { ObjectUtils } from 'primevue/utils';
 
@@ -21,7 +21,7 @@ const css = `
 
 .p-overflow-hidden {
     overflow: hidden;
-    padding-right: var(--scrollbar-width);
+    padding-right: ${$dt('scrollbar.width')};
 }
 `;
 
diff --git a/components/lib/confirmpopup/ConfirmPopup.vue b/components/lib/confirmpopup/ConfirmPopup.vue
index d39eb3cb4..bae6f89eb 100644
--- a/components/lib/confirmpopup/ConfirmPopup.vue
+++ b/components/lib/confirmpopup/ConfirmPopup.vue
@@ -63,6 +63,7 @@ import ConfirmationEventBus from 'primevue/confirmationeventbus';
 import FocusTrap from 'primevue/focustrap';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
+import { $dtp } from 'primevue/themes';
 import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue/utils';
 import BaseConfirmPopup from './BaseConfirmPopup.vue';
 
@@ -203,7 +204,7 @@ export default {
                 arrowLeft = targetOffset.left - containerOffset.left;
             }
 
-            this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
+            this.container.style.setProperty($dtp('overlay.arrow.left').name, `${arrowLeft}px`);
 
             if (containerOffset.top < targetOffset.top) {
                 this.container.setAttribute('data-p-confirm-popup-flipped', 'true');
diff --git a/components/lib/knob/BaseKnob.vue b/components/lib/knob/BaseKnob.vue
index 8abe5490f..ea3c095e4 100644
--- a/components/lib/knob/BaseKnob.vue
+++ b/components/lib/knob/BaseKnob.vue
@@ -1,6 +1,7 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
 import KnobStyle from 'primevue/knob/style';
+import { $dt } from 'primevue/themes';
 
 export default {
     name: 'BaseKnob',
@@ -36,15 +37,15 @@ export default {
         },
         valueColor: {
             type: String,
-            default: 'var(--primary-color, Black)'
+            default: $dt('primary.color', 'Black')
         },
         rangeColor: {
             type: String,
-            default: 'var(--surface-border, LightGray)'
+            default: $dt('surface.border', 'LightGray')
         },
         textColor: {
             type: String,
-            default: 'var(--text-color-secondary, Black)'
+            default: $dt('text.color.secondary', 'Black')
         },
         strokeWidth: {
             type: Number,
diff --git a/components/lib/knob/Knob.d.ts b/components/lib/knob/Knob.d.ts
index e99f5b6f0..084f25c30 100644
--- a/components/lib/knob/Knob.d.ts
+++ b/components/lib/knob/Knob.d.ts
@@ -151,17 +151,17 @@ export interface KnobProps {
     max?: number | undefined;
     /**
      * Background of the value.
-     * @defaultValue var(--primary-color, Black)
+     * @defaultValue var(--<prefix>primary-color, Black)
      */
     valueColor?: string | undefined;
     /**
      * Background color of the range.
-     * @defaultValue var(--surface-border, LightGray)
+     * @defaultValue var(--<prefix>surface-border, LightGray)
      */
     rangeColor?: string | undefined;
     /**
      * Color of the value text.
-     * @defaultValue var(--text-color-secondary, Black)
+     * @defaultValue var(--<prefix>text-color-secondary, Black)
      */
     textColor?: string | undefined;
     /**
diff --git a/components/lib/overlaypanel/OverlayPanel.vue b/components/lib/overlaypanel/OverlayPanel.vue
index 666557feb..6b4560552 100755
--- a/components/lib/overlaypanel/OverlayPanel.vue
+++ b/components/lib/overlaypanel/OverlayPanel.vue
@@ -18,6 +18,7 @@ import FocusTrap from 'primevue/focustrap';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
+import { $dtp } from 'primevue/themes';
 import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
 import BaseOverlayPanel from './BaseOverlayPanel.vue';
 
@@ -154,7 +155,7 @@ export default {
                 arrowLeft = targetOffset.left - containerOffset.left;
             }
 
-            this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
+            this.container.style.setProperty($dtp('overlay.arrow.left').name, `${arrowLeft}px`);
 
             if (containerOffset.top < targetOffset.top) {
                 this.container.setAttribute('data-p-overlaypanel-flipped', 'true');
diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue
index d32d3ca8c..56af25988 100644
--- a/components/lib/speeddial/SpeedDial.vue
+++ b/components/lib/speeddial/SpeedDial.vue
@@ -57,6 +57,7 @@
 import Button from 'primevue/button';
 import PlusIcon from 'primevue/icons/plus';
 import Ripple from 'primevue/ripple';
+import { $dt, $dtp } from 'primevue/themes';
 import Tooltip from 'primevue/tooltip';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 import BaseSpeedDial from './BaseSpeedDial.vue';
@@ -97,8 +98,8 @@ export default {
                 const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
                 const hDiff = Math.abs(button.offsetHeight - firstItem.offsetHeight);
 
-                this.list.style.setProperty('--item-diff-x', `${wDiff / 2}px`);
-                this.list.style.setProperty('--item-diff-y', `${hDiff / 2}px`);
+                this.list.style.setProperty($dtp('item.diff.x').name, `${wDiff / 2}px`);
+                this.list.style.setProperty($dtp('item.diff.y').name, `${hDiff / 2}px`);
             }
         }
 
@@ -365,14 +366,14 @@ export default {
                     const step = (2 * Math.PI) / length;
 
                     return {
-                        left: `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`,
-                        top: `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`
+                        left: `calc(${radius * Math.cos(step * index)}px + ${$dt('item.diff.x', '0px')})`,
+                        top: `calc(${radius * Math.sin(step * index)}px + ${$dt('item.diff.y', '0px')})`
                     };
                 } else if (type === 'semi-circle') {
                     const direction = this.direction;
                     const step = Math.PI / (length - 1);
-                    const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
-                    const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
+                    const x = `calc(${radius * Math.cos(step * index)}px + ${$dt('item.diff.x', '0px')})`;
+                    const y = `calc(${radius * Math.sin(step * index)}px + ${$dt('item.diff.y', '0px')})`;
 
                     if (direction === 'up') {
                         return { left: x, bottom: y };
@@ -386,8 +387,8 @@ export default {
                 } else if (type === 'quarter-circle') {
                     const direction = this.direction;
                     const step = Math.PI / (2 * (length - 1));
-                    const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
-                    const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
+                    const x = `calc(${radius * Math.cos(step * index)}px + ${$dt('item.diff.x', '0px')})`;
+                    const y = `calc(${radius * Math.sin(step * index)}px + ${$dt('item.diff.y', '0px')})`;
 
                     if (direction === 'up-left') {
                         return { right: x, bottom: y };
diff --git a/components/lib/themes/helpers/dt.js b/components/lib/themes/helpers/dt.js
index 172314854..92c861cfe 100644
--- a/components/lib/themes/helpers/dt.js
+++ b/components/lib/themes/helpers/dt.js
@@ -1,12 +1,14 @@
 import Theme, { SharedUtils } from 'primevue/themes';
 
-export const $dt = (tokenPath, type) => {
+const types = ['value', 'variable'];
+
+export const $dt = (tokenPath, param1, param2) => {
     const config = Theme.getPConfig();
 
-    return dt(config?.theme, tokenPath, undefined, type);
+    return types.includes(param1) ? dt(config?.theme, tokenPath, undefined, param2) : dt(config?.theme, tokenPath, param1, param2);
 };
 
-export const dt = (theme = {}, tokenPath, fallback, type) => {
+export const dt = (theme = {}, tokenPath, fallback, type = 'variable') => {
     if (tokenPath) {
         const VARIABLE = Theme.defaults.variable;
         const { prefix, transform } = theme?.options || {};
@@ -19,3 +21,17 @@ export const dt = (theme = {}, tokenPath, fallback, type) => {
 
     return '';
 };
+
+export const $dtp = (tokenPath) => {
+    const config = Theme.getPConfig();
+
+    const variable = dt(config?.theme, tokenPath, undefined, 'variable');
+    const name = variable.match(/--[\w-]+/g)?.[0];
+    const value = dt(config?.theme, tokenPath, undefined, 'value');
+
+    return {
+        variable,
+        name,
+        value
+    };
+};
diff --git a/components/lib/themes/primeone/base/confirmpopup/index.js b/components/lib/themes/primeone/base/confirmpopup/index.js
index d89038c0c..2c8586aad 100644
--- a/components/lib/themes/primeone/base/confirmpopup/index.js
+++ b/components/lib/themes/primeone/base/confirmpopup/index.js
@@ -68,7 +68,7 @@ export default {
 .p-confirm-popup:after,
 .p-confirm-popup:before {
     bottom: 100%;
-    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
+    left: ${dt('{overlay.arrow.left} + 1.25rem', 0)};
     content: " ";
     height: 0;
     width: 0;
diff --git a/components/lib/themes/primeone/base/overlaypanel/index.js b/components/lib/themes/primeone/base/overlaypanel/index.js
index 34c16f47b..13fc37640 100644
--- a/components/lib/themes/primeone/base/overlaypanel/index.js
+++ b/components/lib/themes/primeone/base/overlaypanel/index.js
@@ -66,7 +66,7 @@ export default {
 .p-overlaypanel:after,
 .p-overlaypanel:before {
     bottom: 100%;
-    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
+    left: ${dt('{overlay.arrow.left} + 1.25rem', 0)};
     content: " ";
     height: 0;
     width: 0;
diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
index 98aeb7f33..deba01f78 100755
--- a/components/lib/utils/DomHandler.js
+++ b/components/lib/utils/DomHandler.js
@@ -1,3 +1,5 @@
+import { $dt, $dtp } from 'primevue/themes';
+
 export default {
     innerWidth(el) {
         if (el) {
@@ -326,7 +328,7 @@ export default {
             element.style.top = top + 'px';
             element.style.left = left + 'px';
             element.style.transformOrigin = origin;
-            gutter && (element.style.marginTop = origin === 'bottom' ? 'calc(var(--p-anchor-gutter) * -1)' : 'calc(var(--p-anchor-gutter))');
+            gutter && (element.style.marginTop = origin === 'bottom' ? $dt('{anchor.gutter} * -1') : $dt('anchor.gutter'));
         }
     },
 
@@ -365,7 +367,7 @@ export default {
             element.style.top = top + 'px';
             element.style.left = left + 'px';
             element.style.transformOrigin = origin;
-            gutter && (element.style.marginTop = origin === 'bottom' ? 'calc(var(--p-anchor-gutter) * -1)' : 'calc(var(--p-anchor-gutter))');
+            gutter && (element.style.marginTop = origin === 'bottom' ? $dt('{anchor.gutter} * -1') : $dt('anchor.gutter'));
         }
     },
 
@@ -849,12 +851,12 @@ export default {
     },
 
     blockBodyScroll(className = 'p-overflow-hidden') {
-        document.body.style.setProperty('--scrollbar-width', this.calculateBodyScrollbarWidth() + 'px');
+        document.body.style.setProperty($dtp('scrollbar.width').name, this.calculateBodyScrollbarWidth() + 'px');
         this.addClass(document.body, className);
     },
 
     unblockBodyScroll(className = 'p-overflow-hidden') {
-        document.body.style.removeProperty('--scrollbar-width');
+        document.body.style.removeProperty($dtp('scrollbar.width').name);
         this.removeClass(document.body, className);
     }
 };