@bcc-code/design-tokens 4.0.0 → 5.0.0

package/build/bcc/css/tailwind-light.css

@@ -164,7 +164,6 @@
   --spacing-600: 3rem; /** 48px */
   --spacing-800: 4rem; /** 64px */
   --spacing-1000: 5rem; /** 80px */
-  --spacing: 0.5rem;
   --spacing-negative-25: -0.125rem; /** -2px */
   --spacing-negative-50: -0.25rem; /** -4px */
   --spacing-negative-75: -0.375rem; /** -6px */
@@ -559,1206 +558,1206 @@
   color: --value(--color-icon-*);
 }
 
-@utility p-0 {
+@utility p-spacing-0 {
   padding: var(--spacing-0);
 }
 
-@utility px-0 {
+@utility px-spacing-0 {
   padding-inline: var(--spacing-0);
 }
 
-@utility py-0 {
+@utility py-spacing-0 {
   padding-block: var(--spacing-0);
 }
 
-@utility pt-0 {
+@utility pt-spacing-0 {
   padding-top: var(--spacing-0);
 }
 
-@utility pr-0 {
+@utility pr-spacing-0 {
   padding-right: var(--spacing-0);
 }
 
-@utility pb-0 {
+@utility pb-spacing-0 {
   padding-bottom: var(--spacing-0);
 }
 
-@utility pl-0 {
+@utility pl-spacing-0 {
   padding-left: var(--spacing-0);
 }
 
-@utility m-0 {
+@utility m-spacing-0 {
   margin: var(--spacing-0);
 }
 
-@utility mx-0 {
+@utility mx-spacing-0 {
   margin-inline: var(--spacing-0);
 }
 
-@utility my-0 {
+@utility my-spacing-0 {
   margin-block: var(--spacing-0);
 }
 
-@utility mt-0 {
+@utility mt-spacing-0 {
   margin-top: var(--spacing-0);
 }
 
-@utility mr-0 {
+@utility mr-spacing-0 {
   margin-right: var(--spacing-0);
 }
 
-@utility mb-0 {
+@utility mb-spacing-0 {
   margin-bottom: var(--spacing-0);
 }
 
-@utility ml-0 {
+@utility ml-spacing-0 {
   margin-left: var(--spacing-0);
 }
 
-@utility gap-0 {
+@utility gap-spacing-0 {
   gap: var(--spacing-0);
 }
 
-@utility gap-x-0 {
+@utility gap-x-spacing-0 {
   column-gap: var(--spacing-0);
 }
 
-@utility gap-y-0 {
+@utility gap-y-spacing-0 {
   row-gap: var(--spacing-0);
 }
 
-@utility p-25 {
+@utility p-spacing-25 {
   padding: var(--spacing-25);
 }
 
-@utility px-25 {
+@utility px-spacing-25 {
   padding-inline: var(--spacing-25);
 }
 
-@utility py-25 {
+@utility py-spacing-25 {
   padding-block: var(--spacing-25);
 }
 
-@utility pt-25 {
+@utility pt-spacing-25 {
   padding-top: var(--spacing-25);
 }
 
-@utility pr-25 {
+@utility pr-spacing-25 {
   padding-right: var(--spacing-25);
 }
 
-@utility pb-25 {
+@utility pb-spacing-25 {
   padding-bottom: var(--spacing-25);
 }
 
-@utility pl-25 {
+@utility pl-spacing-25 {
   padding-left: var(--spacing-25);
 }
 
-@utility m-25 {
+@utility m-spacing-25 {
   margin: var(--spacing-25);
 }
 
-@utility mx-25 {
+@utility mx-spacing-25 {
   margin-inline: var(--spacing-25);
 }
 
-@utility my-25 {
+@utility my-spacing-25 {
   margin-block: var(--spacing-25);
 }
 
-@utility mt-25 {
+@utility mt-spacing-25 {
   margin-top: var(--spacing-25);
 }
 
-@utility mr-25 {
+@utility mr-spacing-25 {
   margin-right: var(--spacing-25);
 }
 
-@utility mb-25 {
+@utility mb-spacing-25 {
   margin-bottom: var(--spacing-25);
 }
 
-@utility ml-25 {
+@utility ml-spacing-25 {
   margin-left: var(--spacing-25);
 }
 
-@utility gap-25 {
+@utility gap-spacing-25 {
   gap: var(--spacing-25);
 }
 
-@utility gap-x-25 {
+@utility gap-x-spacing-25 {
   column-gap: var(--spacing-25);
 }
 
-@utility gap-y-25 {
+@utility gap-y-spacing-25 {
   row-gap: var(--spacing-25);
 }
 
-@utility p-50 {
+@utility p-spacing-50 {
   padding: var(--spacing-50);
 }
 
-@utility px-50 {
+@utility px-spacing-50 {
   padding-inline: var(--spacing-50);
 }
 
-@utility py-50 {
+@utility py-spacing-50 {
   padding-block: var(--spacing-50);
 }
 
-@utility pt-50 {
+@utility pt-spacing-50 {
   padding-top: var(--spacing-50);
 }
 
-@utility pr-50 {
+@utility pr-spacing-50 {
   padding-right: var(--spacing-50);
 }
 
-@utility pb-50 {
+@utility pb-spacing-50 {
   padding-bottom: var(--spacing-50);
 }
 
-@utility pl-50 {
+@utility pl-spacing-50 {
   padding-left: var(--spacing-50);
 }
 
-@utility m-50 {
+@utility m-spacing-50 {
   margin: var(--spacing-50);
 }
 
-@utility mx-50 {
+@utility mx-spacing-50 {
   margin-inline: var(--spacing-50);
 }
 
-@utility my-50 {
+@utility my-spacing-50 {
   margin-block: var(--spacing-50);
 }
 
-@utility mt-50 {
+@utility mt-spacing-50 {
   margin-top: var(--spacing-50);
 }
 
-@utility mr-50 {
+@utility mr-spacing-50 {
   margin-right: var(--spacing-50);
 }
 
-@utility mb-50 {
+@utility mb-spacing-50 {
   margin-bottom: var(--spacing-50);
 }
 
-@utility ml-50 {
+@utility ml-spacing-50 {
   margin-left: var(--spacing-50);
 }
 
-@utility gap-50 {
+@utility gap-spacing-50 {
   gap: var(--spacing-50);
 }
 
-@utility gap-x-50 {
+@utility gap-x-spacing-50 {
   column-gap: var(--spacing-50);
 }
 
-@utility gap-y-50 {
+@utility gap-y-spacing-50 {
   row-gap: var(--spacing-50);
 }
 
-@utility p-75 {
+@utility p-spacing-75 {
   padding: var(--spacing-75);
 }
 
-@utility px-75 {
+@utility px-spacing-75 {
   padding-inline: var(--spacing-75);
 }
 
-@utility py-75 {
+@utility py-spacing-75 {
   padding-block: var(--spacing-75);
 }
 
-@utility pt-75 {
+@utility pt-spacing-75 {
   padding-top: var(--spacing-75);
 }
 
-@utility pr-75 {
+@utility pr-spacing-75 {
   padding-right: var(--spacing-75);
 }
 
-@utility pb-75 {
+@utility pb-spacing-75 {
   padding-bottom: var(--spacing-75);
 }
 
-@utility pl-75 {
+@utility pl-spacing-75 {
   padding-left: var(--spacing-75);
 }
 
-@utility m-75 {
+@utility m-spacing-75 {
   margin: var(--spacing-75);
 }
 
-@utility mx-75 {
+@utility mx-spacing-75 {
   margin-inline: var(--spacing-75);
 }
 
-@utility my-75 {
+@utility my-spacing-75 {
   margin-block: var(--spacing-75);
 }
 
-@utility mt-75 {
+@utility mt-spacing-75 {
   margin-top: var(--spacing-75);
 }
 
-@utility mr-75 {
+@utility mr-spacing-75 {
   margin-right: var(--spacing-75);
 }
 
-@utility mb-75 {
+@utility mb-spacing-75 {
   margin-bottom: var(--spacing-75);
 }
 
-@utility ml-75 {
+@utility ml-spacing-75 {
   margin-left: var(--spacing-75);
 }
 
-@utility gap-75 {
+@utility gap-spacing-75 {
   gap: var(--spacing-75);
 }
 
-@utility gap-x-75 {
+@utility gap-x-spacing-75 {
   column-gap: var(--spacing-75);
 }
 
-@utility gap-y-75 {
+@utility gap-y-spacing-75 {
   row-gap: var(--spacing-75);
 }
 
-@utility p-100 {
+@utility p-spacing-100 {
   padding: var(--spacing-100);
 }
 
-@utility px-100 {
+@utility px-spacing-100 {
   padding-inline: var(--spacing-100);
 }
 
-@utility py-100 {
+@utility py-spacing-100 {
   padding-block: var(--spacing-100);
 }
 
-@utility pt-100 {
+@utility pt-spacing-100 {
   padding-top: var(--spacing-100);
 }
 
-@utility pr-100 {
+@utility pr-spacing-100 {
   padding-right: var(--spacing-100);
 }
 
-@utility pb-100 {
+@utility pb-spacing-100 {
   padding-bottom: var(--spacing-100);
 }
 
-@utility pl-100 {
+@utility pl-spacing-100 {
   padding-left: var(--spacing-100);
 }
 
-@utility m-100 {
+@utility m-spacing-100 {
   margin: var(--spacing-100);
 }
 
-@utility mx-100 {
+@utility mx-spacing-100 {
   margin-inline: var(--spacing-100);
 }
 
-@utility my-100 {
+@utility my-spacing-100 {
   margin-block: var(--spacing-100);
 }
 
-@utility mt-100 {
+@utility mt-spacing-100 {
   margin-top: var(--spacing-100);
 }
 
-@utility mr-100 {
+@utility mr-spacing-100 {
   margin-right: var(--spacing-100);
 }
 
-@utility mb-100 {
+@utility mb-spacing-100 {
   margin-bottom: var(--spacing-100);
 }
 
-@utility ml-100 {
+@utility ml-spacing-100 {
   margin-left: var(--spacing-100);
 }
 
-@utility gap-100 {
+@utility gap-spacing-100 {
   gap: var(--spacing-100);
 }
 
-@utility gap-x-100 {
+@utility gap-x-spacing-100 {
   column-gap: var(--spacing-100);
 }
 
-@utility gap-y-100 {
+@utility gap-y-spacing-100 {
   row-gap: var(--spacing-100);
 }
 
-@utility p-150 {
+@utility p-spacing-150 {
   padding: var(--spacing-150);
 }
 
-@utility px-150 {
+@utility px-spacing-150 {
   padding-inline: var(--spacing-150);
 }
 
-@utility py-150 {
+@utility py-spacing-150 {
   padding-block: var(--spacing-150);
 }
 
-@utility pt-150 {
+@utility pt-spacing-150 {
   padding-top: var(--spacing-150);
 }
 
-@utility pr-150 {
+@utility pr-spacing-150 {
   padding-right: var(--spacing-150);
 }
 
-@utility pb-150 {
+@utility pb-spacing-150 {
   padding-bottom: var(--spacing-150);
 }
 
-@utility pl-150 {
+@utility pl-spacing-150 {
   padding-left: var(--spacing-150);
 }
 
-@utility m-150 {
+@utility m-spacing-150 {
   margin: var(--spacing-150);
 }
 
-@utility mx-150 {
+@utility mx-spacing-150 {
   margin-inline: var(--spacing-150);
 }
 
-@utility my-150 {
+@utility my-spacing-150 {
   margin-block: var(--spacing-150);
 }
 
-@utility mt-150 {
+@utility mt-spacing-150 {
   margin-top: var(--spacing-150);
 }
 
-@utility mr-150 {
+@utility mr-spacing-150 {
   margin-right: var(--spacing-150);
 }
 
-@utility mb-150 {
+@utility mb-spacing-150 {
   margin-bottom: var(--spacing-150);
 }
 
-@utility ml-150 {
+@utility ml-spacing-150 {
   margin-left: var(--spacing-150);
 }
 
-@utility gap-150 {
+@utility gap-spacing-150 {
   gap: var(--spacing-150);
 }
 
-@utility gap-x-150 {
+@utility gap-x-spacing-150 {
   column-gap: var(--spacing-150);
 }
 
-@utility gap-y-150 {
+@utility gap-y-spacing-150 {
   row-gap: var(--spacing-150);
 }
 
-@utility p-200 {
+@utility p-spacing-200 {
   padding: var(--spacing-200);
 }
 
-@utility px-200 {
+@utility px-spacing-200 {
   padding-inline: var(--spacing-200);
 }
 
-@utility py-200 {
+@utility py-spacing-200 {
   padding-block: var(--spacing-200);
 }
 
-@utility pt-200 {
+@utility pt-spacing-200 {
   padding-top: var(--spacing-200);
 }
 
-@utility pr-200 {
+@utility pr-spacing-200 {
   padding-right: var(--spacing-200);
 }
 
-@utility pb-200 {
+@utility pb-spacing-200 {
   padding-bottom: var(--spacing-200);
 }
 
-@utility pl-200 {
+@utility pl-spacing-200 {
   padding-left: var(--spacing-200);
 }
 
-@utility m-200 {
+@utility m-spacing-200 {
   margin: var(--spacing-200);
 }
 
-@utility mx-200 {
+@utility mx-spacing-200 {
   margin-inline: var(--spacing-200);
 }
 
-@utility my-200 {
+@utility my-spacing-200 {
   margin-block: var(--spacing-200);
 }
 
-@utility mt-200 {
+@utility mt-spacing-200 {
   margin-top: var(--spacing-200);
 }
 
-@utility mr-200 {
+@utility mr-spacing-200 {
   margin-right: var(--spacing-200);
 }
 
-@utility mb-200 {
+@utility mb-spacing-200 {
   margin-bottom: var(--spacing-200);
 }
 
-@utility ml-200 {
+@utility ml-spacing-200 {
   margin-left: var(--spacing-200);
 }
 
-@utility gap-200 {
+@utility gap-spacing-200 {
   gap: var(--spacing-200);
 }
 
-@utility gap-x-200 {
+@utility gap-x-spacing-200 {
   column-gap: var(--spacing-200);
 }
 
-@utility gap-y-200 {
+@utility gap-y-spacing-200 {
   row-gap: var(--spacing-200);
 }
 
-@utility p-250 {
+@utility p-spacing-250 {
   padding: var(--spacing-250);
 }
 
-@utility px-250 {
+@utility px-spacing-250 {
   padding-inline: var(--spacing-250);
 }
 
-@utility py-250 {
+@utility py-spacing-250 {
   padding-block: var(--spacing-250);
 }
 
-@utility pt-250 {
+@utility pt-spacing-250 {
   padding-top: var(--spacing-250);
 }
 
-@utility pr-250 {
+@utility pr-spacing-250 {
   padding-right: var(--spacing-250);
 }
 
-@utility pb-250 {
+@utility pb-spacing-250 {
   padding-bottom: var(--spacing-250);
 }
 
-@utility pl-250 {
+@utility pl-spacing-250 {
   padding-left: var(--spacing-250);
 }
 
-@utility m-250 {
+@utility m-spacing-250 {
   margin: var(--spacing-250);
 }
 
-@utility mx-250 {
+@utility mx-spacing-250 {
   margin-inline: var(--spacing-250);
 }
 
-@utility my-250 {
+@utility my-spacing-250 {
   margin-block: var(--spacing-250);
 }
 
-@utility mt-250 {
+@utility mt-spacing-250 {
   margin-top: var(--spacing-250);
 }
 
-@utility mr-250 {
+@utility mr-spacing-250 {
   margin-right: var(--spacing-250);
 }
 
-@utility mb-250 {
+@utility mb-spacing-250 {
   margin-bottom: var(--spacing-250);
 }
 
-@utility ml-250 {
+@utility ml-spacing-250 {
   margin-left: var(--spacing-250);
 }
 
-@utility gap-250 {
+@utility gap-spacing-250 {
   gap: var(--spacing-250);
 }
 
-@utility gap-x-250 {
+@utility gap-x-spacing-250 {
   column-gap: var(--spacing-250);
 }
 
-@utility gap-y-250 {
+@utility gap-y-spacing-250 {
   row-gap: var(--spacing-250);
 }
 
-@utility p-300 {
+@utility p-spacing-300 {
   padding: var(--spacing-300);
 }
 
-@utility px-300 {
+@utility px-spacing-300 {
   padding-inline: var(--spacing-300);
 }
 
-@utility py-300 {
+@utility py-spacing-300 {
   padding-block: var(--spacing-300);
 }
 
-@utility pt-300 {
+@utility pt-spacing-300 {
   padding-top: var(--spacing-300);
 }
 
-@utility pr-300 {
+@utility pr-spacing-300 {
   padding-right: var(--spacing-300);
 }
 
-@utility pb-300 {
+@utility pb-spacing-300 {
   padding-bottom: var(--spacing-300);
 }
 
-@utility pl-300 {
+@utility pl-spacing-300 {
   padding-left: var(--spacing-300);
 }
 
-@utility m-300 {
+@utility m-spacing-300 {
   margin: var(--spacing-300);
 }
 
-@utility mx-300 {
+@utility mx-spacing-300 {
   margin-inline: var(--spacing-300);
 }
 
-@utility my-300 {
+@utility my-spacing-300 {
   margin-block: var(--spacing-300);
 }
 
-@utility mt-300 {
+@utility mt-spacing-300 {
   margin-top: var(--spacing-300);
 }
 
-@utility mr-300 {
+@utility mr-spacing-300 {
   margin-right: var(--spacing-300);
 }
 
-@utility mb-300 {
+@utility mb-spacing-300 {
   margin-bottom: var(--spacing-300);
 }
 
-@utility ml-300 {
+@utility ml-spacing-300 {
   margin-left: var(--spacing-300);
 }
 
-@utility gap-300 {
+@utility gap-spacing-300 {
   gap: var(--spacing-300);
 }
 
-@utility gap-x-300 {
+@utility gap-x-spacing-300 {
   column-gap: var(--spacing-300);
 }
 
-@utility gap-y-300 {
+@utility gap-y-spacing-300 {
   row-gap: var(--spacing-300);
 }
 
-@utility p-400 {
+@utility p-spacing-400 {
   padding: var(--spacing-400);
 }
 
-@utility px-400 {
+@utility px-spacing-400 {
   padding-inline: var(--spacing-400);
 }
 
-@utility py-400 {
+@utility py-spacing-400 {
   padding-block: var(--spacing-400);
 }
 
-@utility pt-400 {
+@utility pt-spacing-400 {
   padding-top: var(--spacing-400);
 }
 
-@utility pr-400 {
+@utility pr-spacing-400 {
   padding-right: var(--spacing-400);
 }
 
-@utility pb-400 {
+@utility pb-spacing-400 {
   padding-bottom: var(--spacing-400);
 }
 
-@utility pl-400 {
+@utility pl-spacing-400 {
   padding-left: var(--spacing-400);
 }
 
-@utility m-400 {
+@utility m-spacing-400 {
   margin: var(--spacing-400);
 }
 
-@utility mx-400 {
+@utility mx-spacing-400 {
   margin-inline: var(--spacing-400);
 }
 
-@utility my-400 {
+@utility my-spacing-400 {
   margin-block: var(--spacing-400);
 }
 
-@utility mt-400 {
+@utility mt-spacing-400 {
   margin-top: var(--spacing-400);
 }
 
-@utility mr-400 {
+@utility mr-spacing-400 {
   margin-right: var(--spacing-400);
 }
 
-@utility mb-400 {
+@utility mb-spacing-400 {
   margin-bottom: var(--spacing-400);
 }
 
-@utility ml-400 {
+@utility ml-spacing-400 {
   margin-left: var(--spacing-400);
 }
 
-@utility gap-400 {
+@utility gap-spacing-400 {
   gap: var(--spacing-400);
 }
 
-@utility gap-x-400 {
+@utility gap-x-spacing-400 {
   column-gap: var(--spacing-400);
 }
 
-@utility gap-y-400 {
+@utility gap-y-spacing-400 {
   row-gap: var(--spacing-400);
 }
 
-@utility p-500 {
+@utility p-spacing-500 {
   padding: var(--spacing-500);
 }
 
-@utility px-500 {
+@utility px-spacing-500 {
   padding-inline: var(--spacing-500);
 }
 
-@utility py-500 {
+@utility py-spacing-500 {
   padding-block: var(--spacing-500);
 }
 
-@utility pt-500 {
+@utility pt-spacing-500 {
   padding-top: var(--spacing-500);
 }
 
-@utility pr-500 {
+@utility pr-spacing-500 {
   padding-right: var(--spacing-500);
 }
 
-@utility pb-500 {
+@utility pb-spacing-500 {
   padding-bottom: var(--spacing-500);
 }
 
-@utility pl-500 {
+@utility pl-spacing-500 {
   padding-left: var(--spacing-500);
 }
 
-@utility m-500 {
+@utility m-spacing-500 {
   margin: var(--spacing-500);
 }
 
-@utility mx-500 {
+@utility mx-spacing-500 {
   margin-inline: var(--spacing-500);
 }
 
-@utility my-500 {
+@utility my-spacing-500 {
   margin-block: var(--spacing-500);
 }
 
-@utility mt-500 {
+@utility mt-spacing-500 {
   margin-top: var(--spacing-500);
 }
 
-@utility mr-500 {
+@utility mr-spacing-500 {
   margin-right: var(--spacing-500);
 }
 
-@utility mb-500 {
+@utility mb-spacing-500 {
   margin-bottom: var(--spacing-500);
 }
 
-@utility ml-500 {
+@utility ml-spacing-500 {
   margin-left: var(--spacing-500);
 }
 
-@utility gap-500 {
+@utility gap-spacing-500 {
   gap: var(--spacing-500);
 }
 
-@utility gap-x-500 {
+@utility gap-x-spacing-500 {
   column-gap: var(--spacing-500);
 }
 
-@utility gap-y-500 {
+@utility gap-y-spacing-500 {
   row-gap: var(--spacing-500);
 }
 
-@utility p-600 {
+@utility p-spacing-600 {
   padding: var(--spacing-600);
 }
 
-@utility px-600 {
+@utility px-spacing-600 {
   padding-inline: var(--spacing-600);
 }
 
-@utility py-600 {
+@utility py-spacing-600 {
   padding-block: var(--spacing-600);
 }
 
-@utility pt-600 {
+@utility pt-spacing-600 {
   padding-top: var(--spacing-600);
 }
 
-@utility pr-600 {
+@utility pr-spacing-600 {
   padding-right: var(--spacing-600);
 }
 
-@utility pb-600 {
+@utility pb-spacing-600 {
   padding-bottom: var(--spacing-600);
 }
 
-@utility pl-600 {
+@utility pl-spacing-600 {
   padding-left: var(--spacing-600);
 }
 
-@utility m-600 {
+@utility m-spacing-600 {
   margin: var(--spacing-600);
 }
 
-@utility mx-600 {
+@utility mx-spacing-600 {
   margin-inline: var(--spacing-600);
 }
 
-@utility my-600 {
+@utility my-spacing-600 {
   margin-block: var(--spacing-600);
 }
 
-@utility mt-600 {
+@utility mt-spacing-600 {
   margin-top: var(--spacing-600);
 }
 
-@utility mr-600 {
+@utility mr-spacing-600 {
   margin-right: var(--spacing-600);
 }
 
-@utility mb-600 {
+@utility mb-spacing-600 {
   margin-bottom: var(--spacing-600);
 }
 
-@utility ml-600 {
+@utility ml-spacing-600 {
   margin-left: var(--spacing-600);
 }
 
-@utility gap-600 {
+@utility gap-spacing-600 {
   gap: var(--spacing-600);
 }
 
-@utility gap-x-600 {
+@utility gap-x-spacing-600 {
   column-gap: var(--spacing-600);
 }
 
-@utility gap-y-600 {
+@utility gap-y-spacing-600 {
   row-gap: var(--spacing-600);
 }
 
-@utility p-800 {
+@utility p-spacing-800 {
   padding: var(--spacing-800);
 }
 
-@utility px-800 {
+@utility px-spacing-800 {
   padding-inline: var(--spacing-800);
 }
 
-@utility py-800 {
+@utility py-spacing-800 {
   padding-block: var(--spacing-800);
 }
 
-@utility pt-800 {
+@utility pt-spacing-800 {
   padding-top: var(--spacing-800);
 }
 
-@utility pr-800 {
+@utility pr-spacing-800 {
   padding-right: var(--spacing-800);
 }
 
-@utility pb-800 {
+@utility pb-spacing-800 {
   padding-bottom: var(--spacing-800);
 }
 
-@utility pl-800 {
+@utility pl-spacing-800 {
   padding-left: var(--spacing-800);
 }
 
-@utility m-800 {
+@utility m-spacing-800 {
   margin: var(--spacing-800);
 }
 
-@utility mx-800 {
+@utility mx-spacing-800 {
   margin-inline: var(--spacing-800);
 }
 
-@utility my-800 {
+@utility my-spacing-800 {
   margin-block: var(--spacing-800);
 }
 
-@utility mt-800 {
+@utility mt-spacing-800 {
   margin-top: var(--spacing-800);
 }
 
-@utility mr-800 {
+@utility mr-spacing-800 {
   margin-right: var(--spacing-800);
 }
 
-@utility mb-800 {
+@utility mb-spacing-800 {
   margin-bottom: var(--spacing-800);
 }
 
-@utility ml-800 {
+@utility ml-spacing-800 {
   margin-left: var(--spacing-800);
 }
 
-@utility gap-800 {
+@utility gap-spacing-800 {
   gap: var(--spacing-800);
 }
 
-@utility gap-x-800 {
+@utility gap-x-spacing-800 {
   column-gap: var(--spacing-800);
 }
 
-@utility gap-y-800 {
+@utility gap-y-spacing-800 {
   row-gap: var(--spacing-800);
 }
 
-@utility p-1000 {
+@utility p-spacing-1000 {
   padding: var(--spacing-1000);
 }
 
-@utility px-1000 {
+@utility px-spacing-1000 {
   padding-inline: var(--spacing-1000);
 }
 
-@utility py-1000 {
+@utility py-spacing-1000 {
   padding-block: var(--spacing-1000);
 }
 
-@utility pt-1000 {
+@utility pt-spacing-1000 {
   padding-top: var(--spacing-1000);
 }
 
-@utility pr-1000 {
+@utility pr-spacing-1000 {
   padding-right: var(--spacing-1000);
 }
 
-@utility pb-1000 {
+@utility pb-spacing-1000 {
   padding-bottom: var(--spacing-1000);
 }
 
-@utility pl-1000 {
+@utility pl-spacing-1000 {
   padding-left: var(--spacing-1000);
 }
 
-@utility m-1000 {
+@utility m-spacing-1000 {
   margin: var(--spacing-1000);
 }
 
-@utility mx-1000 {
+@utility mx-spacing-1000 {
   margin-inline: var(--spacing-1000);
 }
 
-@utility my-1000 {
+@utility my-spacing-1000 {
   margin-block: var(--spacing-1000);
 }
 
-@utility mt-1000 {
+@utility mt-spacing-1000 {
   margin-top: var(--spacing-1000);
 }
 
-@utility mr-1000 {
+@utility mr-spacing-1000 {
   margin-right: var(--spacing-1000);
 }
 
-@utility mb-1000 {
+@utility mb-spacing-1000 {
   margin-bottom: var(--spacing-1000);
 }
 
-@utility ml-1000 {
+@utility ml-spacing-1000 {
   margin-left: var(--spacing-1000);
 }
 
-@utility gap-1000 {
+@utility gap-spacing-1000 {
   gap: var(--spacing-1000);
 }
 
-@utility gap-x-1000 {
+@utility gap-x-spacing-1000 {
   column-gap: var(--spacing-1000);
 }
 
-@utility gap-y-1000 {
+@utility gap-y-spacing-1000 {
   row-gap: var(--spacing-1000);
 }
 
-@utility -m-25 {
+@utility -m-spacing-25 {
   margin: var(--spacing-negative-25);
 }
 
-@utility -mx-25 {
+@utility -mx-spacing-25 {
   margin-inline: var(--spacing-negative-25);
 }
 
-@utility -my-25 {
+@utility -my-spacing-25 {
   margin-block: var(--spacing-negative-25);
 }
 
-@utility -mt-25 {
+@utility -mt-spacing-25 {
   margin-top: var(--spacing-negative-25);
 }
 
-@utility -mr-25 {
+@utility -mr-spacing-25 {
   margin-right: var(--spacing-negative-25);
 }
 
-@utility -mb-25 {
+@utility -mb-spacing-25 {
   margin-bottom: var(--spacing-negative-25);
 }
 
-@utility -ml-25 {
+@utility -ml-spacing-25 {
   margin-left: var(--spacing-negative-25);
 }
 
-@utility -m-50 {
+@utility -m-spacing-50 {
   margin: var(--spacing-negative-50);
 }
 
-@utility -mx-50 {
+@utility -mx-spacing-50 {
   margin-inline: var(--spacing-negative-50);
 }
 
-@utility -my-50 {
+@utility -my-spacing-50 {
   margin-block: var(--spacing-negative-50);
 }
 
-@utility -mt-50 {
+@utility -mt-spacing-50 {
   margin-top: var(--spacing-negative-50);
 }
 
-@utility -mr-50 {
+@utility -mr-spacing-50 {
   margin-right: var(--spacing-negative-50);
 }
 
-@utility -mb-50 {
+@utility -mb-spacing-50 {
   margin-bottom: var(--spacing-negative-50);
 }
 
-@utility -ml-50 {
+@utility -ml-spacing-50 {
   margin-left: var(--spacing-negative-50);
 }
 
-@utility -m-75 {
+@utility -m-spacing-75 {
   margin: var(--spacing-negative-75);
 }
 
-@utility -mx-75 {
+@utility -mx-spacing-75 {
   margin-inline: var(--spacing-negative-75);
 }
 
-@utility -my-75 {
+@utility -my-spacing-75 {
   margin-block: var(--spacing-negative-75);
 }
 
-@utility -mt-75 {
+@utility -mt-spacing-75 {
   margin-top: var(--spacing-negative-75);
 }
 
-@utility -mr-75 {
+@utility -mr-spacing-75 {
   margin-right: var(--spacing-negative-75);
 }
 
-@utility -mb-75 {
+@utility -mb-spacing-75 {
   margin-bottom: var(--spacing-negative-75);
 }
 
-@utility -ml-75 {
+@utility -ml-spacing-75 {
   margin-left: var(--spacing-negative-75);
 }
 
-@utility -m-100 {
+@utility -m-spacing-100 {
   margin: var(--spacing-negative-100);
 }
 
-@utility -mx-100 {
+@utility -mx-spacing-100 {
   margin-inline: var(--spacing-negative-100);
 }
 
-@utility -my-100 {
+@utility -my-spacing-100 {
   margin-block: var(--spacing-negative-100);
 }
 
-@utility -mt-100 {
+@utility -mt-spacing-100 {
   margin-top: var(--spacing-negative-100);
 }
 
-@utility -mr-100 {
+@utility -mr-spacing-100 {
   margin-right: var(--spacing-negative-100);
 }
 
-@utility -mb-100 {
+@utility -mb-spacing-100 {
   margin-bottom: var(--spacing-negative-100);
 }
 
-@utility -ml-100 {
+@utility -ml-spacing-100 {
   margin-left: var(--spacing-negative-100);
 }
 
-@utility -m-150 {
+@utility -m-spacing-150 {
   margin: var(--spacing-negative-150);
 }
 
-@utility -mx-150 {
+@utility -mx-spacing-150 {
   margin-inline: var(--spacing-negative-150);
 }
 
-@utility -my-150 {
+@utility -my-spacing-150 {
   margin-block: var(--spacing-negative-150);
 }
 
-@utility -mt-150 {
+@utility -mt-spacing-150 {
   margin-top: var(--spacing-negative-150);
 }
 
-@utility -mr-150 {
+@utility -mr-spacing-150 {
   margin-right: var(--spacing-negative-150);
 }
 
-@utility -mb-150 {
+@utility -mb-spacing-150 {
   margin-bottom: var(--spacing-negative-150);
 }
 
-@utility -ml-150 {
+@utility -ml-spacing-150 {
   margin-left: var(--spacing-negative-150);
 }
 
-@utility -m-200 {
+@utility -m-spacing-200 {
   margin: var(--spacing-negative-200);
 }
 
-@utility -mx-200 {
+@utility -mx-spacing-200 {
   margin-inline: var(--spacing-negative-200);
 }
 
-@utility -my-200 {
+@utility -my-spacing-200 {
   margin-block: var(--spacing-negative-200);
 }
 
-@utility -mt-200 {
+@utility -mt-spacing-200 {
   margin-top: var(--spacing-negative-200);
 }
 
-@utility -mr-200 {
+@utility -mr-spacing-200 {
   margin-right: var(--spacing-negative-200);
 }
 
-@utility -mb-200 {
+@utility -mb-spacing-200 {
   margin-bottom: var(--spacing-negative-200);
 }
 
-@utility -ml-200 {
+@utility -ml-spacing-200 {
   margin-left: var(--spacing-negative-200);
 }
 
-@utility -m-250 {
+@utility -m-spacing-250 {
   margin: var(--spacing-negative-250);
 }
 
-@utility -mx-250 {
+@utility -mx-spacing-250 {
   margin-inline: var(--spacing-negative-250);
 }
 
-@utility -my-250 {
+@utility -my-spacing-250 {
   margin-block: var(--spacing-negative-250);
 }
 
-@utility -mt-250 {
+@utility -mt-spacing-250 {
   margin-top: var(--spacing-negative-250);
 }
 
-@utility -mr-250 {
+@utility -mr-spacing-250 {
   margin-right: var(--spacing-negative-250);
 }
 
-@utility -mb-250 {
+@utility -mb-spacing-250 {
   margin-bottom: var(--spacing-negative-250);
 }
 
-@utility -ml-250 {
+@utility -ml-spacing-250 {
   margin-left: var(--spacing-negative-250);
 }
 
-@utility -m-300 {
+@utility -m-spacing-300 {
   margin: var(--spacing-negative-300);
 }
 
-@utility -mx-300 {
+@utility -mx-spacing-300 {
   margin-inline: var(--spacing-negative-300);
 }
 
-@utility -my-300 {
+@utility -my-spacing-300 {
   margin-block: var(--spacing-negative-300);
 }
 
-@utility -mt-300 {
+@utility -mt-spacing-300 {
   margin-top: var(--spacing-negative-300);
 }
 
-@utility -mr-300 {
+@utility -mr-spacing-300 {
   margin-right: var(--spacing-negative-300);
 }
 
-@utility -mb-300 {
+@utility -mb-spacing-300 {
   margin-bottom: var(--spacing-negative-300);
 }
 
-@utility -ml-300 {
+@utility -ml-spacing-300 {
   margin-left: var(--spacing-negative-300);
 }
 
-@utility -m-400 {
+@utility -m-spacing-400 {
   margin: var(--spacing-negative-400);
 }
 
-@utility -mx-400 {
+@utility -mx-spacing-400 {
   margin-inline: var(--spacing-negative-400);
 }
 
-@utility -my-400 {
+@utility -my-spacing-400 {
   margin-block: var(--spacing-negative-400);
 }
 
-@utility -mt-400 {
+@utility -mt-spacing-400 {
   margin-top: var(--spacing-negative-400);
 }
 
-@utility -mr-400 {
+@utility -mr-spacing-400 {
   margin-right: var(--spacing-negative-400);
 }
 
-@utility -mb-400 {
+@utility -mb-spacing-400 {
   margin-bottom: var(--spacing-negative-400);
 }
 
-@utility -ml-400 {
+@utility -ml-spacing-400 {
   margin-left: var(--spacing-negative-400);
 }