diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css
index a7cde3e2f6..29f3197b2d 100644
--- a/packages/ui/css/styles.css
+++ b/packages/ui/css/styles.css
@@ -5455,7 +5455,7 @@
 
   @media (width >= 640px) {
     .xs\:bui-ml {
-      margin-left: var(--pl-xs);
+      margin-left: var(--ml-xs);
     }
 
     .xs\:bui-ml-0\.5 {
@@ -5525,7 +5525,7 @@
 
   @media (width >= 768px) {
     .sm\:bui-ml {
-      margin-left: var(--pl-sm);
+      margin-left: var(--ml-sm);
     }
 
     .sm\:bui-ml-0\.5 {
@@ -5595,7 +5595,7 @@
 
   @media (width >= 1024px) {
     .md\:bui-ml {
-      margin-left: var(--pl-md);
+      margin-left: var(--ml-md);
     }
 
     .md\:bui-ml-0\.5 {
@@ -5665,7 +5665,7 @@
 
   @media (width >= 1280px) {
     .lg\:bui-ml {
-      margin-left: var(--pl-lg);
+      margin-left: var(--ml-lg);
     }
 
     .lg\:bui-ml-0\.5 {
@@ -5735,7 +5735,7 @@
 
   @media (width >= 1536px) {
     .xl\:bui-ml {
-      margin-left: var(--pl-xl);
+      margin-left: var(--ml-xl);
     }
 
     .xl\:bui-ml-0\.5 {
@@ -5873,7 +5873,7 @@
 
   @media (width >= 640px) {
     .xs\:bui-mr {
-      margin-right: var(--pr-xs);
+      margin-right: var(--mr-xs);
     }
 
     .xs\:bui-mr-0\.5 {
@@ -5943,7 +5943,7 @@
 
   @media (width >= 768px) {
     .sm\:bui-mr {
-      margin-right: var(--pr-sm);
+      margin-right: var(--mr-sm);
     }
 
     .sm\:bui-mr-0\.5 {
@@ -6013,7 +6013,7 @@
 
   @media (width >= 1024px) {
     .md\:bui-mr {
-      margin-right: var(--pr-md);
+      margin-right: var(--mr-md);
     }
 
     .md\:bui-mr-0\.5 {
@@ -6083,7 +6083,7 @@
 
   @media (width >= 1280px) {
     .lg\:bui-mr {
-      margin-right: var(--pr-lg);
+      margin-right: var(--mr-lg);
     }
 
     .lg\:bui-mr-0\.5 {
@@ -6153,7 +6153,7 @@
 
   @media (width >= 1536px) {
     .xl\:bui-mr {
-      margin-right: var(--pr-xl);
+      margin-right: var(--mr-xl);
     }
 
     .xl\:bui-mr-0\.5 {
@@ -6291,7 +6291,7 @@
 
   @media (width >= 640px) {
     .xs\:bui-mt {
-      margin-top: var(--pt-xs);
+      margin-top: var(--mt-xs);
     }
 
     .xs\:bui-mt-0\.5 {
@@ -6361,7 +6361,7 @@
 
   @media (width >= 768px) {
     .sm\:bui-mt {
-      margin-top: var(--pt-sm);
+      margin-top: var(--mt-sm);
     }
 
     .sm\:bui-mt-0\.5 {
@@ -6431,7 +6431,7 @@
 
   @media (width >= 1024px) {
     .md\:bui-mt {
-      margin-top: var(--pt-md);
+      margin-top: var(--mt-md);
     }
 
     .md\:bui-mt-0\.5 {
@@ -6501,7 +6501,7 @@
 
   @media (width >= 1280px) {
     .lg\:bui-mt {
-      margin-top: var(--pt-lg);
+      margin-top: var(--mt-lg);
     }
 
     .lg\:bui-mt-0\.5 {
@@ -6571,7 +6571,7 @@
 
   @media (width >= 1536px) {
     .xl\:bui-mt {
-      margin-top: var(--pt-xl);
+      margin-top: var(--mt-xl);
     }
 
     .xl\:bui-mt-0\.5 {
@@ -6709,7 +6709,7 @@
 
   @media (width >= 640px) {
     .xs\:bui-mb {
-      margin-bottom: var(--pb-xs);
+      margin-bottom: var(--mb-xs);
     }
 
     .xs\:bui-mb-0\.5 {
@@ -6779,7 +6779,7 @@
 
   @media (width >= 768px) {
     .sm\:bui-mb {
-      margin-bottom: var(--pb-sm);
+      margin-bottom: var(--mb-sm);
     }
 
     .sm\:bui-mb-0\.5 {
@@ -6849,7 +6849,7 @@
 
   @media (width >= 1024px) {
     .md\:bui-mb {
-      margin-bottom: var(--pb-md);
+      margin-bottom: var(--mb-md);
     }
 
     .md\:bui-mb-0\.5 {
@@ -6919,7 +6919,7 @@
 
   @media (width >= 1280px) {
     .lg\:bui-mb {
-      margin-bottom: var(--pb-lg);
+      margin-bottom: var(--mb-lg);
     }
 
     .lg\:bui-mb-0\.5 {
@@ -6989,7 +6989,7 @@
 
   @media (width >= 1536px) {
     .xl\:bui-mb {
-      margin-bottom: var(--pb-xl);
+      margin-bottom: var(--mb-xl);
     }
 
     .xl\:bui-mb-0\.5 {
@@ -7144,8 +7144,8 @@
 
   @media (width >= 640px) {
     .xs\:bui-my {
-      margin-top: var(--py-xs);
-      margin-bottom: var(--py-xs);
+      margin-top: var(--my-xs);
+      margin-bottom: var(--my-xs);
     }
 
     .xs\:bui-my-0\.5 {
@@ -7231,8 +7231,8 @@
 
   @media (width >= 768px) {
     .sm\:bui-my {
-      margin-top: var(--py-sm);
-      margin-bottom: var(--py-sm);
+      margin-top: var(--my-sm);
+      margin-bottom: var(--my-sm);
     }
 
     .sm\:bui-my-0\.5 {
@@ -7318,8 +7318,8 @@
 
   @media (width >= 1024px) {
     .md\:bui-my {
-      margin-top: var(--py-md);
-      margin-bottom: var(--py-md);
+      margin-top: var(--my-md);
+      margin-bottom: var(--my-md);
     }
 
     .md\:bui-my-0\.5 {
@@ -7405,8 +7405,8 @@
 
   @media (width >= 1280px) {
     .lg\:bui-my {
-      margin-top: var(--py-lg);
-      margin-bottom: var(--py-lg);
+      margin-top: var(--my-lg);
+      margin-bottom: var(--my-lg);
     }
 
     .lg\:bui-my-0\.5 {
@@ -7492,8 +7492,8 @@
 
   @media (width >= 1536px) {
     .xl\:bui-my {
-      margin-top: var(--py-xl);
-      margin-bottom: var(--py-xl);
+      margin-top: var(--my-xl);
+      margin-bottom: var(--my-xl);
     }
 
     .xl\:bui-my-0\.5 {
@@ -7664,8 +7664,8 @@
 
   @media (width >= 640px) {
     .xs\:bui-mx {
-      margin-left: var(--px-xs);
-      margin-right: var(--px-xs);
+      margin-left: var(--mx-xs);
+      margin-right: var(--mx-xs);
     }
 
     .xs\:bui-mx-0\.5 {
@@ -7751,8 +7751,8 @@
 
   @media (width >= 768px) {
     .sm\:bui-mx {
-      margin-left: var(--px-sm);
-      margin-right: var(--px-sm);
+      margin-left: var(--mx-sm);
+      margin-right: var(--mx-sm);
     }
 
     .sm\:bui-mx-0\.5 {
@@ -7838,8 +7838,8 @@
 
   @media (width >= 1024px) {
     .md\:bui-mx {
-      margin-left: var(--px-md);
-      margin-right: var(--px-md);
+      margin-left: var(--mx-md);
+      margin-right: var(--mx-md);
     }
 
     .md\:bui-mx-0\.5 {
@@ -7925,8 +7925,8 @@
 
   @media (width >= 1280px) {
     .lg\:bui-mx {
-      margin-left: var(--px-lg);
-      margin-right: var(--px-lg);
+      margin-left: var(--mx-lg);
+      margin-right: var(--mx-lg);
     }
 
     .lg\:bui-mx-0\.5 {
@@ -8012,8 +8012,8 @@
 
   @media (width >= 1536px) {
     .xl\:bui-mx {
-      margin-left: var(--px-xl);
-      margin-right: var(--px-xl);
+      margin-left: var(--mx-xl);
+      margin-right: var(--mx-xl);
     }
 
     .xl\:bui-mx-0\.5 {