@bcc-code/design-tokens 3.0.6 → 3.0.7

package/build/bcc/tailwind-light.css

@@ -529,6 +529,10 @@
   background-color: --value(--color-background-*);
 }
 
+@utility bg-elevation-* {
+  background-color: --value(--color-elevation-*);
+}
+
 @utility border-* {
   border-color: --value(--color-border-*);
 }
@@ -537,98 +541,1206 @@
   color: --value(--color-icon-*);
 }
 
-@utility p-* {
-  padding: --value(--spacing-*);
+@utility p-0 {
+  padding: var(--spacing-0);
+}
+
+@utility px-0 {
+  padding-inline: var(--spacing-0);
+}
+
+@utility py-0 {
+  padding-block: var(--spacing-0);
+}
+
+@utility pt-0 {
+  padding-top: var(--spacing-0);
+}
+
+@utility pr-0 {
+  padding-right: var(--spacing-0);
+}
+
+@utility pb-0 {
+  padding-bottom: var(--spacing-0);
+}
+
+@utility pl-0 {
+  padding-left: var(--spacing-0);
+}
+
+@utility p-25 {
+  padding: var(--spacing-25);
+}
+
+@utility px-25 {
+  padding-inline: var(--spacing-25);
+}
+
+@utility py-25 {
+  padding-block: var(--spacing-25);
+}
+
+@utility pt-25 {
+  padding-top: var(--spacing-25);
+}
+
+@utility pr-25 {
+  padding-right: var(--spacing-25);
+}
+
+@utility pb-25 {
+  padding-bottom: var(--spacing-25);
+}
+
+@utility pl-25 {
+  padding-left: var(--spacing-25);
+}
+
+@utility p-50 {
+  padding: var(--spacing-50);
+}
+
+@utility px-50 {
+  padding-inline: var(--spacing-50);
+}
+
+@utility py-50 {
+  padding-block: var(--spacing-50);
+}
+
+@utility pt-50 {
+  padding-top: var(--spacing-50);
+}
+
+@utility pr-50 {
+  padding-right: var(--spacing-50);
+}
+
+@utility pb-50 {
+  padding-bottom: var(--spacing-50);
+}
+
+@utility pl-50 {
+  padding-left: var(--spacing-50);
+}
+
+@utility p-75 {
+  padding: var(--spacing-75);
+}
+
+@utility px-75 {
+  padding-inline: var(--spacing-75);
+}
+
+@utility py-75 {
+  padding-block: var(--spacing-75);
+}
+
+@utility pt-75 {
+  padding-top: var(--spacing-75);
+}
+
+@utility pr-75 {
+  padding-right: var(--spacing-75);
+}
+
+@utility pb-75 {
+  padding-bottom: var(--spacing-75);
+}
+
+@utility pl-75 {
+  padding-left: var(--spacing-75);
+}
+
+@utility p-100 {
+  padding: var(--spacing-100);
+}
+
+@utility px-100 {
+  padding-inline: var(--spacing-100);
+}
+
+@utility py-100 {
+  padding-block: var(--spacing-100);
+}
+
+@utility pt-100 {
+  padding-top: var(--spacing-100);
+}
+
+@utility pr-100 {
+  padding-right: var(--spacing-100);
+}
+
+@utility pb-100 {
+  padding-bottom: var(--spacing-100);
+}
+
+@utility pl-100 {
+  padding-left: var(--spacing-100);
+}
+
+@utility p-150 {
+  padding: var(--spacing-150);
+}
+
+@utility px-150 {
+  padding-inline: var(--spacing-150);
+}
+
+@utility py-150 {
+  padding-block: var(--spacing-150);
+}
+
+@utility pt-150 {
+  padding-top: var(--spacing-150);
+}
+
+@utility pr-150 {
+  padding-right: var(--spacing-150);
+}
+
+@utility pb-150 {
+  padding-bottom: var(--spacing-150);
+}
+
+@utility pl-150 {
+  padding-left: var(--spacing-150);
+}
+
+@utility p-200 {
+  padding: var(--spacing-200);
+}
+
+@utility px-200 {
+  padding-inline: var(--spacing-200);
+}
+
+@utility py-200 {
+  padding-block: var(--spacing-200);
+}
+
+@utility pt-200 {
+  padding-top: var(--spacing-200);
+}
+
+@utility pr-200 {
+  padding-right: var(--spacing-200);
+}
+
+@utility pb-200 {
+  padding-bottom: var(--spacing-200);
+}
+
+@utility pl-200 {
+  padding-left: var(--spacing-200);
+}
+
+@utility p-250 {
+  padding: var(--spacing-250);
+}
+
+@utility px-250 {
+  padding-inline: var(--spacing-250);
+}
+
+@utility py-250 {
+  padding-block: var(--spacing-250);
+}
+
+@utility pt-250 {
+  padding-top: var(--spacing-250);
+}
+
+@utility pr-250 {
+  padding-right: var(--spacing-250);
+}
+
+@utility pb-250 {
+  padding-bottom: var(--spacing-250);
+}
+
+@utility pl-250 {
+  padding-left: var(--spacing-250);
+}
+
+@utility p-300 {
+  padding: var(--spacing-300);
+}
+
+@utility px-300 {
+  padding-inline: var(--spacing-300);
+}
+
+@utility py-300 {
+  padding-block: var(--spacing-300);
+}
+
+@utility pt-300 {
+  padding-top: var(--spacing-300);
+}
+
+@utility pr-300 {
+  padding-right: var(--spacing-300);
+}
+
+@utility pb-300 {
+  padding-bottom: var(--spacing-300);
+}
+
+@utility pl-300 {
+  padding-left: var(--spacing-300);
+}
+
+@utility p-400 {
+  padding: var(--spacing-400);
+}
+
+@utility px-400 {
+  padding-inline: var(--spacing-400);
+}
+
+@utility py-400 {
+  padding-block: var(--spacing-400);
+}
+
+@utility pt-400 {
+  padding-top: var(--spacing-400);
+}
+
+@utility pr-400 {
+  padding-right: var(--spacing-400);
+}
+
+@utility pb-400 {
+  padding-bottom: var(--spacing-400);
+}
+
+@utility pl-400 {
+  padding-left: var(--spacing-400);
+}
+
+@utility p-500 {
+  padding: var(--spacing-500);
+}
+
+@utility px-500 {
+  padding-inline: var(--spacing-500);
+}
+
+@utility py-500 {
+  padding-block: var(--spacing-500);
+}
+
+@utility pt-500 {
+  padding-top: var(--spacing-500);
+}
+
+@utility pr-500 {
+  padding-right: var(--spacing-500);
+}
+
+@utility pb-500 {
+  padding-bottom: var(--spacing-500);
+}
+
+@utility pl-500 {
+  padding-left: var(--spacing-500);
+}
+
+@utility p-600 {
+  padding: var(--spacing-600);
+}
+
+@utility px-600 {
+  padding-inline: var(--spacing-600);
+}
+
+@utility py-600 {
+  padding-block: var(--spacing-600);
+}
+
+@utility pt-600 {
+  padding-top: var(--spacing-600);
+}
+
+@utility pr-600 {
+  padding-right: var(--spacing-600);
+}
+
+@utility pb-600 {
+  padding-bottom: var(--spacing-600);
+}
+
+@utility pl-600 {
+  padding-left: var(--spacing-600);
+}
+
+@utility p-800 {
+  padding: var(--spacing-800);
+}
+
+@utility px-800 {
+  padding-inline: var(--spacing-800);
+}
+
+@utility py-800 {
+  padding-block: var(--spacing-800);
+}
+
+@utility pt-800 {
+  padding-top: var(--spacing-800);
+}
+
+@utility pr-800 {
+  padding-right: var(--spacing-800);
+}
+
+@utility pb-800 {
+  padding-bottom: var(--spacing-800);
+}
+
+@utility pl-800 {
+  padding-left: var(--spacing-800);
+}
+
+@utility p-1000 {
+  padding: var(--spacing-1000);
+}
+
+@utility px-1000 {
+  padding-inline: var(--spacing-1000);
+}
+
+@utility py-1000 {
+  padding-block: var(--spacing-1000);
+}
+
+@utility pt-1000 {
+  padding-top: var(--spacing-1000);
+}
+
+@utility pr-1000 {
+  padding-right: var(--spacing-1000);
+}
+
+@utility pb-1000 {
+  padding-bottom: var(--spacing-1000);
+}
+
+@utility pl-1000 {
+  padding-left: var(--spacing-1000);
+}
+
+@utility m-0 {
+  margin: var(--spacing-0);
+}
+
+@utility mx-0 {
+  margin-inline: var(--spacing-0);
+}
+
+@utility my-0 {
+  margin-block: var(--spacing-0);
+}
+
+@utility mt-0 {
+  margin-top: var(--spacing-0);
+}
+
+@utility mr-0 {
+  margin-right: var(--spacing-0);
+}
+
+@utility mb-0 {
+  margin-bottom: var(--spacing-0);
+}
+
+@utility ml-0 {
+  margin-left: var(--spacing-0);
+}
+
+@utility m-25 {
+  margin: var(--spacing-25);
+}
+
+@utility mx-25 {
+  margin-inline: var(--spacing-25);
+}
+
+@utility my-25 {
+  margin-block: var(--spacing-25);
+}
+
+@utility mt-25 {
+  margin-top: var(--spacing-25);
+}
+
+@utility mr-25 {
+  margin-right: var(--spacing-25);
+}
+
+@utility mb-25 {
+  margin-bottom: var(--spacing-25);
+}
+
+@utility ml-25 {
+  margin-left: var(--spacing-25);
+}
+
+@utility m-50 {
+  margin: var(--spacing-50);
+}
+
+@utility mx-50 {
+  margin-inline: var(--spacing-50);
+}
+
+@utility my-50 {
+  margin-block: var(--spacing-50);
+}
+
+@utility mt-50 {
+  margin-top: var(--spacing-50);
+}
+
+@utility mr-50 {
+  margin-right: var(--spacing-50);
+}
+
+@utility mb-50 {
+  margin-bottom: var(--spacing-50);
+}
+
+@utility ml-50 {
+  margin-left: var(--spacing-50);
+}
+
+@utility m-75 {
+  margin: var(--spacing-75);
+}
+
+@utility mx-75 {
+  margin-inline: var(--spacing-75);
+}
+
+@utility my-75 {
+  margin-block: var(--spacing-75);
+}
+
+@utility mt-75 {
+  margin-top: var(--spacing-75);
+}
+
+@utility mr-75 {
+  margin-right: var(--spacing-75);
+}
+
+@utility mb-75 {
+  margin-bottom: var(--spacing-75);
+}
+
+@utility ml-75 {
+  margin-left: var(--spacing-75);
+}
+
+@utility m-100 {
+  margin: var(--spacing-100);
+}
+
+@utility mx-100 {
+  margin-inline: var(--spacing-100);
+}
+
+@utility my-100 {
+  margin-block: var(--spacing-100);
+}
+
+@utility mt-100 {
+  margin-top: var(--spacing-100);
+}
+
+@utility mr-100 {
+  margin-right: var(--spacing-100);
+}
+
+@utility mb-100 {
+  margin-bottom: var(--spacing-100);
+}
+
+@utility ml-100 {
+  margin-left: var(--spacing-100);
+}
+
+@utility m-150 {
+  margin: var(--spacing-150);
+}
+
+@utility mx-150 {
+  margin-inline: var(--spacing-150);
+}
+
+@utility my-150 {
+  margin-block: var(--spacing-150);
+}
+
+@utility mt-150 {
+  margin-top: var(--spacing-150);
+}
+
+@utility mr-150 {
+  margin-right: var(--spacing-150);
+}
+
+@utility mb-150 {
+  margin-bottom: var(--spacing-150);
+}
+
+@utility ml-150 {
+  margin-left: var(--spacing-150);
+}
+
+@utility m-200 {
+  margin: var(--spacing-200);
+}
+
+@utility mx-200 {
+  margin-inline: var(--spacing-200);
+}
+
+@utility my-200 {
+  margin-block: var(--spacing-200);
+}
+
+@utility mt-200 {
+  margin-top: var(--spacing-200);
+}
+
+@utility mr-200 {
+  margin-right: var(--spacing-200);
+}
+
+@utility mb-200 {
+  margin-bottom: var(--spacing-200);
+}
+
+@utility ml-200 {
+  margin-left: var(--spacing-200);
+}
+
+@utility m-250 {
+  margin: var(--spacing-250);
+}
+
+@utility mx-250 {
+  margin-inline: var(--spacing-250);
+}
+
+@utility my-250 {
+  margin-block: var(--spacing-250);
+}
+
+@utility mt-250 {
+  margin-top: var(--spacing-250);
+}
+
+@utility mr-250 {
+  margin-right: var(--spacing-250);
+}
+
+@utility mb-250 {
+  margin-bottom: var(--spacing-250);
+}
+
+@utility ml-250 {
+  margin-left: var(--spacing-250);
+}
+
+@utility m-300 {
+  margin: var(--spacing-300);
+}
+
+@utility mx-300 {
+  margin-inline: var(--spacing-300);
+}
+
+@utility my-300 {
+  margin-block: var(--spacing-300);
+}
+
+@utility mt-300 {
+  margin-top: var(--spacing-300);
+}
+
+@utility mr-300 {
+  margin-right: var(--spacing-300);
+}
+
+@utility mb-300 {
+  margin-bottom: var(--spacing-300);
+}
+
+@utility ml-300 {
+  margin-left: var(--spacing-300);
+}
+
+@utility m-400 {
+  margin: var(--spacing-400);
+}
+
+@utility mx-400 {
+  margin-inline: var(--spacing-400);
+}
+
+@utility my-400 {
+  margin-block: var(--spacing-400);
+}
+
+@utility mt-400 {
+  margin-top: var(--spacing-400);
+}
+
+@utility mr-400 {
+  margin-right: var(--spacing-400);
+}
+
+@utility mb-400 {
+  margin-bottom: var(--spacing-400);
+}
+
+@utility ml-400 {
+  margin-left: var(--spacing-400);
+}
+
+@utility m-500 {
+  margin: var(--spacing-500);
+}
+
+@utility mx-500 {
+  margin-inline: var(--spacing-500);
+}
+
+@utility my-500 {
+  margin-block: var(--spacing-500);
+}
+
+@utility mt-500 {
+  margin-top: var(--spacing-500);
+}
+
+@utility mr-500 {
+  margin-right: var(--spacing-500);
+}
+
+@utility mb-500 {
+  margin-bottom: var(--spacing-500);
+}
+
+@utility ml-500 {
+  margin-left: var(--spacing-500);
+}
+
+@utility m-600 {
+  margin: var(--spacing-600);
+}
+
+@utility mx-600 {
+  margin-inline: var(--spacing-600);
+}
+
+@utility my-600 {
+  margin-block: var(--spacing-600);
+}
+
+@utility mt-600 {
+  margin-top: var(--spacing-600);
+}
+
+@utility mr-600 {
+  margin-right: var(--spacing-600);
+}
+
+@utility mb-600 {
+  margin-bottom: var(--spacing-600);
+}
+
+@utility ml-600 {
+  margin-left: var(--spacing-600);
+}
+
+@utility m-800 {
+  margin: var(--spacing-800);
+}
+
+@utility mx-800 {
+  margin-inline: var(--spacing-800);
+}
+
+@utility my-800 {
+  margin-block: var(--spacing-800);
+}
+
+@utility mt-800 {
+  margin-top: var(--spacing-800);
+}
+
+@utility mr-800 {
+  margin-right: var(--spacing-800);
+}
+
+@utility mb-800 {
+  margin-bottom: var(--spacing-800);
+}
+
+@utility ml-800 {
+  margin-left: var(--spacing-800);
+}
+
+@utility m-1000 {
+  margin: var(--spacing-1000);
+}
+
+@utility mx-1000 {
+  margin-inline: var(--spacing-1000);
+}
+
+@utility my-1000 {
+  margin-block: var(--spacing-1000);
+}
+
+@utility mt-1000 {
+  margin-top: var(--spacing-1000);
+}
+
+@utility mr-1000 {
+  margin-right: var(--spacing-1000);
+}
+
+@utility mb-1000 {
+  margin-bottom: var(--spacing-1000);
+}
+
+@utility ml-1000 {
+  margin-left: var(--spacing-1000);
+}
+
+@utility gap-0 {
+  gap: var(--spacing-0);
+}
+
+@utility gap-x-0 {
+  column-gap: var(--spacing-0);
+}
+
+@utility gap-y-0 {
+  row-gap: var(--spacing-0);
+}
+
+@utility gap-25 {
+  gap: var(--spacing-25);
+}
+
+@utility gap-x-25 {
+  column-gap: var(--spacing-25);
+}
+
+@utility gap-y-25 {
+  row-gap: var(--spacing-25);
+}
+
+@utility gap-50 {
+  gap: var(--spacing-50);
+}
+
+@utility gap-x-50 {
+  column-gap: var(--spacing-50);
+}
+
+@utility gap-y-50 {
+  row-gap: var(--spacing-50);
+}
+
+@utility gap-75 {
+  gap: var(--spacing-75);
+}
+
+@utility gap-x-75 {
+  column-gap: var(--spacing-75);
+}
+
+@utility gap-y-75 {
+  row-gap: var(--spacing-75);
+}
+
+@utility gap-100 {
+  gap: var(--spacing-100);
+}
+
+@utility gap-x-100 {
+  column-gap: var(--spacing-100);
+}
+
+@utility gap-y-100 {
+  row-gap: var(--spacing-100);
+}
+
+@utility gap-150 {
+  gap: var(--spacing-150);
+}
+
+@utility gap-x-150 {
+  column-gap: var(--spacing-150);
+}
+
+@utility gap-y-150 {
+  row-gap: var(--spacing-150);
+}
+
+@utility gap-200 {
+  gap: var(--spacing-200);
+}
+
+@utility gap-x-200 {
+  column-gap: var(--spacing-200);
+}
+
+@utility gap-y-200 {
+  row-gap: var(--spacing-200);
+}
+
+@utility gap-250 {
+  gap: var(--spacing-250);
+}
+
+@utility gap-x-250 {
+  column-gap: var(--spacing-250);
+}
+
+@utility gap-y-250 {
+  row-gap: var(--spacing-250);
+}
+
+@utility gap-300 {
+  gap: var(--spacing-300);
+}
+
+@utility gap-x-300 {
+  column-gap: var(--spacing-300);
+}
+
+@utility gap-y-300 {
+  row-gap: var(--spacing-300);
+}
+
+@utility gap-400 {
+  gap: var(--spacing-400);
+}
+
+@utility gap-x-400 {
+  column-gap: var(--spacing-400);
+}
+
+@utility gap-y-400 {
+  row-gap: var(--spacing-400);
+}
+
+@utility gap-500 {
+  gap: var(--spacing-500);
+}
+
+@utility gap-x-500 {
+  column-gap: var(--spacing-500);
+}
+
+@utility gap-y-500 {
+  row-gap: var(--spacing-500);
+}
+
+@utility gap-600 {
+  gap: var(--spacing-600);
+}
+
+@utility gap-x-600 {
+  column-gap: var(--spacing-600);
+}
+
+@utility gap-y-600 {
+  row-gap: var(--spacing-600);
+}
+
+@utility gap-800 {
+  gap: var(--spacing-800);
+}
+
+@utility gap-x-800 {
+  column-gap: var(--spacing-800);
+}
+
+@utility gap-y-800 {
+  row-gap: var(--spacing-800);
+}
+
+@utility gap-1000 {
+  gap: var(--spacing-1000);
+}
+
+@utility gap-x-1000 {
+  column-gap: var(--spacing-1000);
+}
+
+@utility gap-y-1000 {
+  row-gap: var(--spacing-1000);
+}
+
+@utility -m-25 {
+  margin: var(--spacing-negative-25);
+}
+
+@utility -mx-25 {
+  margin-inline: var(--spacing-negative-25);
+}
+
+@utility -my-25 {
+  margin-block: var(--spacing-negative-25);
+}
+
+@utility -mt-25 {
+  margin-top: var(--spacing-negative-25);
+}
+
+@utility -mr-25 {
+  margin-right: var(--spacing-negative-25);
+}
+
+@utility -mb-25 {
+  margin-bottom: var(--spacing-negative-25);
+}
+
+@utility -ml-25 {
+  margin-left: var(--spacing-negative-25);
+}
+
+@utility -m-50 {
+  margin: var(--spacing-negative-50);
+}
+
+@utility -mx-50 {
+  margin-inline: var(--spacing-negative-50);
+}
+
+@utility -my-50 {
+  margin-block: var(--spacing-negative-50);
+}
+
+@utility -mt-50 {
+  margin-top: var(--spacing-negative-50);
+}
+
+@utility -mr-50 {
+  margin-right: var(--spacing-negative-50);
+}
+
+@utility -mb-50 {
+  margin-bottom: var(--spacing-negative-50);
+}
+
+@utility -ml-50 {
+  margin-left: var(--spacing-negative-50);
+}
+
+@utility -m-75 {
+  margin: var(--spacing-negative-75);
+}
+
+@utility -mx-75 {
+  margin-inline: var(--spacing-negative-75);
+}
+
+@utility -my-75 {
+  margin-block: var(--spacing-negative-75);
+}
+
+@utility -mt-75 {
+  margin-top: var(--spacing-negative-75);
+}
+
+@utility -mr-75 {
+  margin-right: var(--spacing-negative-75);
+}
+
+@utility -mb-75 {
+  margin-bottom: var(--spacing-negative-75);
+}
+
+@utility -ml-75 {
+  margin-left: var(--spacing-negative-75);
+}
+
+@utility -m-100 {
+  margin: var(--spacing-negative-100);
+}
+
+@utility -mx-100 {
+  margin-inline: var(--spacing-negative-100);
+}
+
+@utility -my-100 {
+  margin-block: var(--spacing-negative-100);
+}
+
+@utility -mt-100 {
+  margin-top: var(--spacing-negative-100);
+}
+
+@utility -mr-100 {
+  margin-right: var(--spacing-negative-100);
+}
+
+@utility -mb-100 {
+  margin-bottom: var(--spacing-negative-100);
+}
+
+@utility -ml-100 {
+  margin-left: var(--spacing-negative-100);
+}
+
+@utility -m-150 {
+  margin: var(--spacing-negative-150);
+}
+
+@utility -mx-150 {
+  margin-inline: var(--spacing-negative-150);
+}
+
+@utility -my-150 {
+  margin-block: var(--spacing-negative-150);
+}
+
+@utility -mt-150 {
+  margin-top: var(--spacing-negative-150);
+}
+
+@utility -mr-150 {
+  margin-right: var(--spacing-negative-150);
+}
+
+@utility -mb-150 {
+  margin-bottom: var(--spacing-negative-150);
+}
+
+@utility -ml-150 {
+  margin-left: var(--spacing-negative-150);
+}
+
+@utility -m-200 {
+  margin: var(--spacing-negative-200);
+}
+
+@utility -mx-200 {
+  margin-inline: var(--spacing-negative-200);
+}
+
+@utility -my-200 {
+  margin-block: var(--spacing-negative-200);
+}
+
+@utility -mt-200 {
+  margin-top: var(--spacing-negative-200);
+}
+
+@utility -mr-200 {
+  margin-right: var(--spacing-negative-200);
 }
 
-@utility px-* {
-  padding-inline: --value(--spacing-*);
+@utility -mb-200 {
+  margin-bottom: var(--spacing-negative-200);
 }
 
-@utility py-* {
-  padding-block: --value(--spacing-*);
+@utility -ml-200 {
+  margin-left: var(--spacing-negative-200);
 }
 
-@utility pt-* {
-  padding-top: --value(--spacing-*);
+@utility -m-250 {
+  margin: var(--spacing-negative-250);
 }
 
-@utility pr-* {
-  padding-right: --value(--spacing-*);
+@utility -mx-250 {
+  margin-inline: var(--spacing-negative-250);
 }
 
-@utility pb-* {
-  padding-bottom: --value(--spacing-*);
+@utility -my-250 {
+  margin-block: var(--spacing-negative-250);
 }
 
-@utility pl-* {
-  padding-left: --value(--spacing-*);
+@utility -mt-250 {
+  margin-top: var(--spacing-negative-250);
 }
 
-@utility m-* {
-  margin: --value(--spacing-*);
+@utility -mr-250 {
+  margin-right: var(--spacing-negative-250);
 }
 
-@utility mx-* {
-  margin-inline: --value(--spacing-*);
+@utility -mb-250 {
+  margin-bottom: var(--spacing-negative-250);
 }
 
-@utility my-* {
-  margin-block: --value(--spacing-*);
+@utility -ml-250 {
+  margin-left: var(--spacing-negative-250);
 }
 
-@utility mt-* {
-  margin-top: --value(--spacing-*);
+@utility -m-300 {
+  margin: var(--spacing-negative-300);
 }
 
-@utility mr-* {
-  margin-right: --value(--spacing-*);
+@utility -mx-300 {
+  margin-inline: var(--spacing-negative-300);
 }
 
-@utility mb-* {
-  margin-bottom: --value(--spacing-*);
+@utility -my-300 {
+  margin-block: var(--spacing-negative-300);
 }
 
-@utility ml-* {
-  margin-left: --value(--spacing-*);
+@utility -mt-300 {
+  margin-top: var(--spacing-negative-300);
 }
 
-@utility gap-* {
-  gap: --value(--spacing-*);
+@utility -mr-300 {
+  margin-right: var(--spacing-negative-300);
 }
 
-@utility gap-x-* {
-  column-gap: --value(--spacing-*);
+@utility -mb-300 {
+  margin-bottom: var(--spacing-negative-300);
 }
 
-@utility gap-y-* {
-  row-gap: --value(--spacing-*);
+@utility -ml-300 {
+  margin-left: var(--spacing-negative-300);
 }
 
-@utility -m-* {
-  margin: --value(--spacing-negative-*);
+@utility -m-400 {
+  margin: var(--spacing-negative-400);
 }
 
-@utility -mx-* {
-  margin-inline: --value(--spacing-negative-*);
+@utility -mx-400 {
+  margin-inline: var(--spacing-negative-400);
 }
 
-@utility -my-* {
-  margin-block: --value(--spacing-negative-*);
+@utility -my-400 {
+  margin-block: var(--spacing-negative-400);
 }
 
-@utility -mt-* {
-  margin-top: --value(--spacing-negative-*);
+@utility -mt-400 {
+  margin-top: var(--spacing-negative-400);
 }
 
-@utility -mr-* {
-  margin-right: --value(--spacing-negative-*);
+@utility -mr-400 {
+  margin-right: var(--spacing-negative-400);
 }
 
-@utility -mb-* {
-  margin-bottom: --value(--spacing-negative-*);
+@utility -mb-400 {
+  margin-bottom: var(--spacing-negative-400);
 }
 
-@utility -ml-* {
-  margin-left: --value(--spacing-negative-*);
+@utility -ml-400 {
+  margin-left: var(--spacing-negative-400);
 }