Merge branch 'v4' of https://github.com/primefaces/primevue into v4

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')};
 }
 `;
 

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');

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,

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;
     /**

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');

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($dtp('item.diff.x').name, `${wDiff / 2}px`);
-                this.list.style.setProperty('--item-diff-y', `${hDiff / 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))`,
+                        left: `calc(${radius * Math.cos(step * index)}px + ${$dt('item.diff.x', '0px')})`,
-                        top: `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 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 x = `calc(${radius * Math.cos(step * index)}px + ${$dt('item.diff.x', '0px')})`;
-                    const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 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 x = `calc(${radius * Math.cos(step * index)}px + ${$dt('item.diff.x', '0px')})`;
-                    const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
+                    const y = `calc(${radius * Math.sin(step * index)}px + ${$dt('item.diff.y', '0px')})`;
 
                     if (direction === 'up-left') {
                         return { right: x, bottom: y };

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
+    };
+};

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;

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;

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);
     }
 };