diff --git a/components/lib/props/style/index.js b/components/lib/props/style/index.js
index f4d53842a..a006ba1d8 100644
--- a/components/lib/props/style/index.js
+++ b/components/lib/props/style/index.js
@@ -1,5 +1,18 @@
 import ObjectUtils from '../../utils/ObjectUtils';
 
+/* Custom Theme */
+const defaultStyleOptions = {
+    //spacing: 2 // 2 * value
+    //spacing: [0, 1, 3, 5, 7]
+    //spacing: (value) => value * 2
+    spacing: {
+        0: 0,
+        1: 2,
+        2: 4,
+        3: 6
+    }
+};
+
 export const getDeclaration = (property, value) => {
     return [property]
         .flat()
@@ -7,26 +20,67 @@ export const getDeclaration = (property, value) => {
         .join('');
 };
 
-const importantRegex = /.*!$/;
+const importantRegex = /!$/;
+
+const formatter = {
+    format(computedValue, value) {
+        return importantRegex.test(value) ? this.important(computedValue) : computedValue;
+    },
+    important(value) {
+        return `${value}!important`;
+    }
+};
 
 export const token = {
-    spacing: (property, options) => {
+    spacing: (property) => {
+        const transform = (key, value, options = {}) => {
+            const spacing = options.spacing; // theming and default spacing
+            let computedValue = `${value}`.replace(importantRegex, '').trim();
+
+            if (ObjectUtils.isNumber(spacing)) {
+                computedValue = ObjectUtils.isNumber(computedValue) ? +computedValue * spacing : computedValue;
+            } else if (ObjectUtils.isArray(spacing)) {
+                computedValue = ObjectUtils.isNumber(computedValue) ? spacing[+computedValue] ?? computedValue : computedValue;
+            } else if (ObjectUtils.isObject(spacing)) {
+                computedValue = ObjectUtils.isNumber(computedValue) ? spacing[+computedValue] ?? computedValue : computedValue;
+            } else if (ObjectUtils.isFunction(spacing)) {
+                computedValue = ObjectUtils.isNumber(computedValue) ? spacing(+computedValue) : computedValue;
+            }
+
+            return formatter.format(ObjectUtils.css.getVariableValue(computedValue, key), value);
+        };
+
         return {
             type: 'spacing',
             property,
-            transform(value) {
-                return importantRegex.test(value) ? value + 'important' : value;
-            },
-            toString(value, options) {
-                return getDeclaration(property, this.transform(value));
+            transform,
+            getStyleDeclaration(key, value, options) {
+                return getDeclaration(property, transform(key, value, defaultStyleOptions));
             }
         };
     },
     sizing: (property) => {
+        const transform = (key, value, options = {}) => {
+            let computedValue = `${value}`.replace(importantRegex, '').trim();
+
+            try {
+                computedValue = Function(`'use strict'; return ${computedValue}`)();
+            } catch {}
+
+            if (ObjectUtils.isNumber(computedValue)) {
+                computedValue = computedValue <= 1 && computedValue !== 0 ? `${computedValue * 100}%` : computedValue;
+            }
+
+            return formatter.format(ObjectUtils.css.getVariableValue(computedValue, key), value);
+        };
+
         return {
             type: 'sizing',
             property,
-            declaration: (value) => declaration(property, value)
+            transform,
+            getStyleDeclaration(key, value, options) {
+                return getDeclaration(property, transform(key, value, defaultStyleOptions));
+            }
         };
     },
     prop: (property) => {
@@ -47,7 +101,7 @@ export const defineDeclarations = (...args) => {
                     .reduce((acc, [key, value]) => {
                         const v = props[key];
 
-                        ObjectUtils.isNotEmpty(v) && acc.push(value.toString(v, options));
+                        ObjectUtils.isNotEmpty(v) && acc.push(value.getStyleDeclaration(key, v, options));
 
                         return acc;
                     }, [])
diff --git a/components/lib/props/style/sizing.js b/components/lib/props/style/sizing.js
index dd8e416bf..af8843a5b 100644
--- a/components/lib/props/style/sizing.js
+++ b/components/lib/props/style/sizing.js
@@ -1,4 +1,10 @@
-import { t } from '.';
+import width from './width';
+
+export default {
+    ...width
+};
+
+/*import { t } from '.';
 import ObjectUtils from '../../utils/ObjectUtils';
 
 export const WIDTH_DATA = {
@@ -46,3 +52,4 @@ export const SPACING = {
             .join('');
     }
 };
+*/
diff --git a/components/lib/props/style/width/index.js b/components/lib/props/style/width/index.js
index 56a16ee8c..6c6c6d88b 100644
--- a/components/lib/props/style/width/index.js
+++ b/components/lib/props/style/width/index.js
@@ -1,3 +1,10 @@
+import { token } from '..';
+
+export default {
+    width: token.sizing('width'),
+    w: token.sizing('width')
+};
+
 /* const { styleClass } = require('../../utils');
 const { addFixedSize } = require('../base/size');
 
diff --git a/components/lib/text/BaseText.vue b/components/lib/text/BaseText.vue
index 467f76c10..df24bbaed 100644
--- a/components/lib/text/BaseText.vue
+++ b/components/lib/text/BaseText.vue
@@ -2,9 +2,10 @@
 import BaseComponent from 'primevue/basecomponent';
 import TextStyle from 'primevue/text/style';
 import { defineDeclarations } from '../props/style';
+import SIZING from '../props/style/sizing.js';
 import SPACING from '../props/style/spacing.js';
 
-export const styleData = defineDeclarations(SPACING);
+export const styleData = defineDeclarations(SPACING, SIZING);
 
 export default {
     name: 'BaseText',
diff --git a/doc/panel/BasicDoc.vue b/doc/panel/BasicDoc.vue
index e1edf13c4..02b535493 100644
--- a/doc/panel/BasicDoc.vue
+++ b/doc/panel/BasicDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card">
         <Panel header="Header">
-            <Text px="0!" p="1px">
+            <Text px="0!" p="4" width="md:200 hover:300">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </Text>