From 8091240360a393c0c03bc10ac2dae72131133e64 Mon Sep 17 00:00:00 2001
From: Danny Kim <dannyk3941@gmail.com>
Date: Wed, 30 Aug 2023 15:52:38 -0400
Subject: [PATCH 01/10] feat: initial utilities doc

---
 .../vanilla/src/sass/utilities/_spacing.scss  |  2 +-
 .../vanilla/src/stories/Utilities.stories.mdx | 42 +++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 packages/vanilla/src/stories/Utilities.stories.mdx

diff --git a/packages/vanilla/src/sass/utilities/_spacing.scss b/packages/vanilla/src/sass/utilities/_spacing.scss
index 0095fb7e..7bee7610 100644
--- a/packages/vanilla/src/sass/utilities/_spacing.scss
+++ b/packages/vanilla/src/sass/utilities/_spacing.scss
@@ -17,7 +17,7 @@ $spacing: (
 
 @each $name, $space in $spacing {
   .cbp-margin-#{$name} {
-    margin-left: #{$space} !important;
+    margin: #{$space} !important;
   }
 
   .cbp-margin-top-#{$name} {
diff --git a/packages/vanilla/src/stories/Utilities.stories.mdx b/packages/vanilla/src/stories/Utilities.stories.mdx
new file mode 100644
index 00000000..542f5628
--- /dev/null
+++ b/packages/vanilla/src/stories/Utilities.stories.mdx
@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Foundations/Utilities" />
+
+# Utilities
+
+Utility classes refer to small, reusable CSS classes that are designed to provide specific styling or functionality to HTML elements.
+
+## Spacing
+
+### Margin
+
+<div style={{ display: "flex", gap: "1rem" }}>
+  <table>
+    <thead>
+      <tr>
+        <th>Utility Class</th>
+        <th>CSS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>.cbp-margin-0</td>
+        <td>`margin: 0 !important`</td>
+      </tr>
+    </tbody>
+  </table>
+  <table>
+    <thead>
+      <tr>
+        <th>Utility Class</th>
+        <th>CSS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>.cbp-margin-0</td>
+        <td>`margin: 0 !important`</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
\ No newline at end of file

From f79dfd685be2bd370504205b7df3e54e281a4208 Mon Sep 17 00:00:00 2001
From: Danny Kim <dannyk3941@gmail.com>
Date: Tue, 5 Sep 2023 10:36:40 -0400
Subject: [PATCH 02/10] chore: deleted _z-index.scss utlities file

---
 packages/vanilla/src/sass/utilities/_z-index.scss | 8 --------
 1 file changed, 8 deletions(-)
 delete mode 100644 packages/vanilla/src/sass/utilities/_z-index.scss

diff --git a/packages/vanilla/src/sass/utilities/_z-index.scss b/packages/vanilla/src/sass/utilities/_z-index.scss
deleted file mode 100644
index be157f82..00000000
--- a/packages/vanilla/src/sass/utilities/_z-index.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
-  TODO: delete?
-*/
-
-$z: (
-  "application-header": 9997,
-  "backdrop": 9998
-)
\ No newline at end of file

From 3b83515dfd2562816c0d69a5d10acad5c3c2b150 Mon Sep 17 00:00:00 2001
From: Danny Kim <dannyk3941@gmail.com>
Date: Tue, 5 Sep 2023 14:31:50 -0400
Subject: [PATCH 03/10] chore: reorder spacing utlities docs

---
 .../vanilla/src/stories/Utilities.stories.mdx | 42 --------
 .../src/stories/utilities/doc.stories.mdx     |  7 ++
 .../src/stories/utilities/spacing.stories.mdx | 98 +++++++++++++++++++
 3 files changed, 105 insertions(+), 42 deletions(-)
 delete mode 100644 packages/vanilla/src/stories/Utilities.stories.mdx
 create mode 100644 packages/vanilla/src/stories/utilities/doc.stories.mdx
 create mode 100644 packages/vanilla/src/stories/utilities/spacing.stories.mdx

diff --git a/packages/vanilla/src/stories/Utilities.stories.mdx b/packages/vanilla/src/stories/Utilities.stories.mdx
deleted file mode 100644
index 542f5628..00000000
--- a/packages/vanilla/src/stories/Utilities.stories.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Foundations/Utilities" />
-
-# Utilities
-
-Utility classes refer to small, reusable CSS classes that are designed to provide specific styling or functionality to HTML elements.
-
-## Spacing
-
-### Margin
-
-<div style={{ display: "flex", gap: "1rem" }}>
-  <table>
-    <thead>
-      <tr>
-        <th>Utility Class</th>
-        <th>CSS</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>.cbp-margin-0</td>
-        <td>`margin: 0 !important`</td>
-      </tr>
-    </tbody>
-  </table>
-  <table>
-    <thead>
-      <tr>
-        <th>Utility Class</th>
-        <th>CSS</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>.cbp-margin-0</td>
-        <td>`margin: 0 !important`</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
\ No newline at end of file
diff --git a/packages/vanilla/src/stories/utilities/doc.stories.mdx b/packages/vanilla/src/stories/utilities/doc.stories.mdx
new file mode 100644
index 00000000..e656e36c
--- /dev/null
+++ b/packages/vanilla/src/stories/utilities/doc.stories.mdx
@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Utilities/Doc" />
+
+# Utilities
+
+Utility classes refer to small, reusable CSS classes that are designed to provide specific styling or functionality to HTML elements.
diff --git a/packages/vanilla/src/stories/utilities/spacing.stories.mdx b/packages/vanilla/src/stories/utilities/spacing.stories.mdx
new file mode 100644
index 00000000..129e0a8d
--- /dev/null
+++ b/packages/vanilla/src/stories/utilities/spacing.stories.mdx
@@ -0,0 +1,98 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Utilities/Spacing" />
+
+# Spacing
+
+Spacing utility classes are CSS classes that are used to manage and control the spacing (margins and padding) of elements.
+They provide a convenient way to apply consistent and predefined spacing values to various elements.
+
+## Margin
+
+<div style={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: "4rem" }}>
+  <section>
+    <h3>Margin Top</h3>
+    <table style={{ width: "100%" }}>
+      <thead>
+        <tr>
+          <th>Utility Class</th>
+          <th>CSS</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>.cbp-margin-top-0</td>
+          <td>`margin-top: 0 !important`</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+  <section>
+    <h3>Margin Bottom</h3>
+    <table style={{ width: "100%" }}>
+      <thead>
+        <tr>
+          <th>Utility Class</th>
+          <th>CSS</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>.cbp-margin-bottom-0</td>
+          <td>`margin-bottom: 0 !important`</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+  <section>
+    <h3>Margin Left</h3>
+    <table style={{ width: "100%" }}>
+      <thead>
+        <tr>
+          <th>Utility Class</th>
+          <th>CSS</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>.cbp-margin-left-0</td>
+          <td>`margin-left: 0 !important`</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+  <section>
+    <h3>Margin Right</h3>
+    <table style={{ width: "100%" }}>
+      <thead>
+        <tr>
+          <th>Utility Class</th>
+          <th>CSS</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>.cbp-margin-right-0</td>
+          <td>`margin-right: 0 !important`</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+  <section>
+    <h3>Margin</h3>
+    <table style={{ width: "100%" }}>
+      <thead>
+        <tr>
+          <th>Utility Class</th>
+          <th>CSS</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>.cbp-margin-0</td>
+          <td>`margin: 0 !important`</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+</div>
\ No newline at end of file

From 17917bfbcfbe26c9aa59ee75795e093f5783e747 Mon Sep 17 00:00:00 2001
From: Danny Kim <dannyk3941@gmail.com>
Date: Mon, 11 Sep 2023 11:30:51 -0400
Subject: [PATCH 04/10] chore: remove /demo from scss folder

---
 packages/vanilla/src/sass/demo/_index.scss | 44 ----------------------
 1 file changed, 44 deletions(-)
 delete mode 100644 packages/vanilla/src/sass/demo/_index.scss

diff --git a/packages/vanilla/src/sass/demo/_index.scss b/packages/vanilla/src/sass/demo/_index.scss
deleted file mode 100644
index a9fc5f57..00000000
--- a/packages/vanilla/src/sass/demo/_index.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-@use '../base/colors' as *;
-
-.demo-container {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  margin-top: 4rem;
-  margin-bottom: 6rem;
-}
-
-.sandbox {
-  width: 100%;
-}
-
-.sandbox__demo-container {
-  display: flex;
-}
-
-.sandbox__demo {
-  align-items: center;
-  border: 2px solid $cbp-base-neutral-dark;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
-  display: flex;
-  justify-content: center;
-  min-height: 24rem;
-  padding: 4rem 2rem;
-  width: 100%;
-}
-
-.sandbox__modifiers {
-  border: 2px solid $cbp-base-neutral-dark;
-  border-left: 0;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-  width: 239px;
-
-  & > h2 {
-    background: $cbp-base-neutral-lighter;
-    font-size: 1rem;
-    margin: 0;
-    padding: 1rem;
-  }
-}
\ No newline at end of file

From 6bcf99329e857486f1dda32a524e718c64731c33 Mon Sep 17 00:00:00 2001
From: Danny Kim <dannyk3941@gmail.com>
Date: Mon, 11 Sep 2023 14:10:54 -0400
Subject: [PATCH 05/10] chore: add margin utilities class table as docs

---
 .../src/stories/utilities/spacing.stories.mdx | 192 +++++++++++++++++-
 1 file changed, 186 insertions(+), 6 deletions(-)

diff --git a/packages/vanilla/src/stories/utilities/spacing.stories.mdx b/packages/vanilla/src/stories/utilities/spacing.stories.mdx
index 129e0a8d..1a8e814e 100644
--- a/packages/vanilla/src/stories/utilities/spacing.stories.mdx
+++ b/packages/vanilla/src/stories/utilities/spacing.stories.mdx
@@ -9,10 +9,10 @@ They provide a convenient way to apply consistent and predefined spacing values
 
 ## Margin
 
-<div style={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: "4rem" }}>
+<div>
   <section>
     <h3>Margin Top</h3>
-    <table style={{ width: "100%" }}>
+    <table>
       <thead>
         <tr>
           <th>Utility Class</th>
@@ -24,12 +24,48 @@ They provide a convenient way to apply consistent and predefined spacing values
           <td>.cbp-margin-top-0</td>
           <td>`margin-top: 0 !important`</td>
         </tr>
+        <tr>
+          <td>.cbp-margin-top-1x</td>
+          <td>`margin-top: var(--cbp-space-1x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-top-2x</td>
+          <td>`margin-top: var(--cbp-space-2x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-top-3x</td>
+          <td>`margin-top: var(--cbp-space-3x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-top-4x</td>
+          <td>`margin-top: var(--cbp-space-4x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-top-5x</td>
+          <td>`margin-top: var(--cbp-space-5x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-top-6x</td>
+          <td>`margin-top: var(--cbp-space-6x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-top-8x</td>
+          <td>`margin-top: var(--cbp-space-8x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-top-12x</td>
+          <td>`margin-top: var(--cbp-space-12x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-top-18x</td>
+          <td>`margin-top: var(--cbp-space-18x) !important;`</td>
+        </tr>
       </tbody>
     </table>
   </section>
   <section>
     <h3>Margin Bottom</h3>
-    <table style={{ width: "100%" }}>
+    <table>
       <thead>
         <tr>
           <th>Utility Class</th>
@@ -41,12 +77,48 @@ They provide a convenient way to apply consistent and predefined spacing values
           <td>.cbp-margin-bottom-0</td>
           <td>`margin-bottom: 0 !important`</td>
         </tr>
+        <tr>
+          <td>.cbp-margin-bottom-1x</td>
+          <td>`margin-bottom: var(--cbp-space-1x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-bottom-2x</td>
+          <td>`margin-bottom: var(--cbp-space-2x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-bottom-3x</td>
+          <td>`margin-bottom: var(--cbp-space-3x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-bottom-4x</td>
+          <td>`margin-bottom: var(--cbp-space-4x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-bottom-5x</td>
+          <td>`margin-bottom: var(--cbp-space-5x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-bottom-6x</td>
+          <td>`margin-bottom: var(--cbp-space-6x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-bottom-8x</td>
+          <td>`margin-bottom: var(--cbp-space-8x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-bottom-12x</td>
+          <td>`margin-bottom: var(--cbp-space-12x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-bottom-18x</td>
+          <td>`margin-bottom: var(--cbp-space-18x) !important;`</td>
+        </tr>
       </tbody>
     </table>
   </section>
   <section>
     <h3>Margin Left</h3>
-    <table style={{ width: "100%" }}>
+    <table>
       <thead>
         <tr>
           <th>Utility Class</th>
@@ -58,12 +130,48 @@ They provide a convenient way to apply consistent and predefined spacing values
           <td>.cbp-margin-left-0</td>
           <td>`margin-left: 0 !important`</td>
         </tr>
+        <tr>
+          <td>.cbp-margin-left-1x</td>
+          <td>`margin-left: var(--cbp-space-1x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-left-2x</td>
+          <td>`margin-left: var(--cbp-space-2x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-left-3x</td>
+          <td>`margin-left: var(--cbp-space-3x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-left-4x</td>
+          <td>`margin-left: var(--cbp-space-4x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-left-5x</td>
+          <td>`margin-left: var(--cbp-space-5x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-left-6x</td>
+          <td>`margin-left: var(--cbp-space-6x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-left-8x</td>
+          <td>`margin-left: var(--cbp-space-8x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-left-12x</td>
+          <td>`margin-left: var(--cbp-space-12x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-left-18x</td>
+          <td>`margin-left: var(--cbp-space-18x) !important;`</td>
+        </tr>
       </tbody>
     </table>
   </section>
   <section>
     <h3>Margin Right</h3>
-    <table style={{ width: "100%" }}>
+    <table>
       <thead>
         <tr>
           <th>Utility Class</th>
@@ -75,12 +183,48 @@ They provide a convenient way to apply consistent and predefined spacing values
           <td>.cbp-margin-right-0</td>
           <td>`margin-right: 0 !important`</td>
         </tr>
+        <tr>
+          <td>.cbp-margin-right-1x</td>
+          <td>`margin-right: var(--cbp-space-1x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-right-2x</td>
+          <td>`margin-right: var(--cbp-space-2x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-right-3x</td>
+          <td>`margin-right: var(--cbp-space-3x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-right-4x</td>
+          <td>`margin-right: var(--cbp-space-4x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-right-5x</td>
+          <td>`margin-right: var(--cbp-space-5x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-right-6x</td>
+          <td>`margin-right: var(--cbp-space-6x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-right-8x</td>
+          <td>`margin-right: var(--cbp-space-8x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-right-12x</td>
+          <td>`margin-right: var(--cbp-space-12x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-right-18x</td>
+          <td>`margin-right: var(--cbp-space-18x) !important;`</td>
+        </tr>
       </tbody>
     </table>
   </section>
   <section>
     <h3>Margin</h3>
-    <table style={{ width: "100%" }}>
+    <table>
       <thead>
         <tr>
           <th>Utility Class</th>
@@ -92,6 +236,42 @@ They provide a convenient way to apply consistent and predefined spacing values
           <td>.cbp-margin-0</td>
           <td>`margin: 0 !important`</td>
         </tr>
+        <tr>
+          <td>.cbp-margin-1x</td>
+          <td>`margin: var(--cbp-space-1x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-2x</td>
+          <td>`margin: var(--cbp-space-2x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-3x</td>
+          <td>`margin: var(--cbp-space-3x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-4x</td>
+          <td>`margin: var(--cbp-space-4x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-5x</td>
+          <td>`margin: var(--cbp-space-5x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-6x</td>
+          <td>`margin: var(--cbp-space-6x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-8x</td>
+          <td>`margin: var(--cbp-space-8x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-12x</td>
+          <td>`margin: var(--cbp-space-12x) !important;`</td>
+        </tr>
+        <tr>
+          <td>.cbp-margin-18x</td>
+          <td>`margin: var(--cbp-space-18x) !important;`</td>
+        </tr>
       </tbody>
     </table>
   </section>

From 1e33f623f58fcc695aa2bb82fbe39ca4378c3421 Mon Sep 17 00:00:00 2001
From: Danny Kim <dannyk3941@gmail.com>
Date: Mon, 11 Sep 2023 14:13:43 -0400
Subject: [PATCH 06/10] chore: delete utilities doc.mdx

---
 packages/vanilla/src/stories/utilities/doc.stories.mdx | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 packages/vanilla/src/stories/utilities/doc.stories.mdx

diff --git a/packages/vanilla/src/stories/utilities/doc.stories.mdx b/packages/vanilla/src/stories/utilities/doc.stories.mdx
deleted file mode 100644
index e656e36c..00000000
--- a/packages/vanilla/src/stories/utilities/doc.stories.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Utilities/Doc" />
-
-# Utilities
-
-Utility classes refer to small, reusable CSS classes that are designed to provide specific styling or functionality to HTML elements.

From 1e35f6e4400b02de872365932dd47aa7f46cd450 Mon Sep 17 00:00:00 2001
From: Danny Kim <dannyk3941@gmail.com>
Date: Mon, 11 Sep 2023 15:20:18 -0400
Subject: [PATCH 07/10] chore: add missing margin utility classes

---
 .../vanilla/src/sass/utilities/_spacing.scss  |   9 +
 .../src/stories/utilities/spacing.stories.mdx | 320 +++++++++++++++---
 2 files changed, 279 insertions(+), 50 deletions(-)

diff --git a/packages/vanilla/src/sass/utilities/_spacing.scss b/packages/vanilla/src/sass/utilities/_spacing.scss
index 7bee7610..6ce829a3 100644
--- a/packages/vanilla/src/sass/utilities/_spacing.scss
+++ b/packages/vanilla/src/sass/utilities/_spacing.scss
@@ -4,14 +4,23 @@
 
 $spacing: (
   16x: var(--cbp-space-16x),
+  15x: var(--cbp-space-15x),
+  14x: var(--cbp-space-14x),
+  13x: var(--cbp-space-13x),
   12x: var(--cbp-space-12x),
+  11x: var(--cbp-space-11x),
+  10x: var(--cbp-space-10x),
+  9x: var(--cbp-space-9x),
   8x: var(--cbp-space-8x),
+  7x: var(--cbp-space-7x),
   6x: var(--cbp-space-6x),
   5x: var(--cbp-space-5x),
   4x: var(--cbp-space-4x),
   3x: var(--cbp-space-3x),
   2x: var(--cbp-space-2x),
   1x: var(--cbp-space-1x),
+  half-x: var(--cbp-space-half-x),
+  1px: 1px,
   0: 0
 );
 
diff --git a/packages/vanilla/src/stories/utilities/spacing.stories.mdx b/packages/vanilla/src/stories/utilities/spacing.stories.mdx
index 1a8e814e..40ed6e0b 100644
--- a/packages/vanilla/src/stories/utilities/spacing.stories.mdx
+++ b/packages/vanilla/src/stories/utilities/spacing.stories.mdx
@@ -21,43 +21,87 @@ They provide a convenient way to apply consistent and predefined spacing values
       </thead>
       <tbody>
         <tr>
-          <td>.cbp-margin-top-0</td>
+          <td>cbp-margin-top-0</td>
           <td>`margin-top: 0 !important`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-top-1x</td>
+          <td>cbp-margin-top-1px</td>
+          <td>`margin-top: 1px !important`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-top-half-x</td>
+          <td>`margin-top: var(--cbp-space-half-x) !important`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-top-1x</td>
           <td>`margin-top: var(--cbp-space-1x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-top-2x</td>
+          <td>cbp-margin-top-2x</td>
           <td>`margin-top: var(--cbp-space-2x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-top-3x</td>
+          <td>cbp-margin-top-3x</td>
           <td>`margin-top: var(--cbp-space-3x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-top-4x</td>
+          <td>cbp-margin-top-4x</td>
           <td>`margin-top: var(--cbp-space-4x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-top-5x</td>
+          <td>cbp-margin-top-5x</td>
           <td>`margin-top: var(--cbp-space-5x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-top-6x</td>
+          <td>cbp-margin-top-6x</td>
           <td>`margin-top: var(--cbp-space-6x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-top-8x</td>
+          <td>cbp-margin-top-7x</td>
+          <td>`margin-top: var(--cbp-space-7x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-top-8x</td>
           <td>`margin-top: var(--cbp-space-8x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-top-12x</td>
+          <td>cbp-margin-top-9x</td>
+          <td>`margin-top: var(--cbp-space-9x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-top-10x</td>
+          <td>`margin-top: var(--cbp-space-10x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-top-11x</td>
+          <td>`margin-top: var(--cbp-space-11x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-top-12x</td>
           <td>`margin-top: var(--cbp-space-12x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-top-18x</td>
+          <td>cbp-margin-top-13x</td>
+          <td>`margin-top: var(--cbp-space-13x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-top-14x</td>
+          <td>`margin-top: var(--cbp-space-14x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-top-15x</td>
+          <td>`margin-top: var(--cbp-space-15x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-top-16x</td>
+          <td>`margin-top: var(--cbp-space-16x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-top-17x</td>
+          <td>`margin-top: var(--cbp-space-17x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-top-18x</td>
           <td>`margin-top: var(--cbp-space-18x) !important;`</td>
         </tr>
       </tbody>
@@ -74,43 +118,87 @@ They provide a convenient way to apply consistent and predefined spacing values
       </thead>
       <tbody>
         <tr>
-          <td>.cbp-margin-bottom-0</td>
+          <td>cbp-margin-bottom-0</td>
           <td>`margin-bottom: 0 !important`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-bottom-1x</td>
+          <td>cbp-margin-bottom-1px</td>
+          <td>`margin-bottom: 1px !important`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-bottom-half-x</td>
+          <td>`margin-bottom: var(--cbp-space-half-x) !important`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-bottom-1x</td>
           <td>`margin-bottom: var(--cbp-space-1x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-bottom-2x</td>
+          <td>cbp-margin-bottom-2x</td>
           <td>`margin-bottom: var(--cbp-space-2x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-bottom-3x</td>
+          <td>cbp-margin-bottom-3x</td>
           <td>`margin-bottom: var(--cbp-space-3x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-bottom-4x</td>
+          <td>cbp-margin-bottom-4x</td>
           <td>`margin-bottom: var(--cbp-space-4x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-bottom-5x</td>
+          <td>cbp-margin-bottom-5x</td>
           <td>`margin-bottom: var(--cbp-space-5x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-bottom-6x</td>
+          <td>cbp-margin-bottom-6x</td>
           <td>`margin-bottom: var(--cbp-space-6x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-bottom-8x</td>
+          <td>cbp-margin-bottom-7x</td>
+          <td>`margin-bottom: var(--cbp-space-7x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-bottom-8x</td>
           <td>`margin-bottom: var(--cbp-space-8x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-bottom-12x</td>
+          <td>cbp-margin-bottom-9x</td>
+          <td>`margin-bottom: var(--cbp-space-9x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-bottom-10x</td>
+          <td>`margin-bottom: var(--cbp-space-10x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-bottom-11x</td>
+          <td>`margin-bottom: var(--cbp-space-11x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-bottom-12x</td>
           <td>`margin-bottom: var(--cbp-space-12x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-bottom-18x</td>
+          <td>cbp-margin-bottom-13x</td>
+          <td>`margin-bottom: var(--cbp-space-13x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-bottom-14x</td>
+          <td>`margin-bottom: var(--cbp-space-14x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-bottom-15x</td>
+          <td>`margin-bottom: var(--cbp-space-15x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-bottom-16x</td>
+          <td>`margin-bottom: var(--cbp-space-16x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-bottom-17x</td>
+          <td>`margin-bottom: var(--cbp-space-17x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-bottom-18x</td>
           <td>`margin-bottom: var(--cbp-space-18x) !important;`</td>
         </tr>
       </tbody>
@@ -127,43 +215,87 @@ They provide a convenient way to apply consistent and predefined spacing values
       </thead>
       <tbody>
         <tr>
-          <td>.cbp-margin-left-0</td>
+          <td>cbp-margin-left-0</td>
           <td>`margin-left: 0 !important`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-left-1x</td>
+          <td>cbp-margin-left-1px</td>
+          <td>`margin-left: 1px !important`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-left-half-x</td>
+          <td>`margin-left: var(--cbp-space-half-x) !important`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-left-1x</td>
           <td>`margin-left: var(--cbp-space-1x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-left-2x</td>
+          <td>cbp-margin-left-2x</td>
           <td>`margin-left: var(--cbp-space-2x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-left-3x</td>
+          <td>cbp-margin-left-3x</td>
           <td>`margin-left: var(--cbp-space-3x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-left-4x</td>
+          <td>cbp-margin-left-4x</td>
           <td>`margin-left: var(--cbp-space-4x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-left-5x</td>
+          <td>cbp-margin-left-5x</td>
           <td>`margin-left: var(--cbp-space-5x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-left-6x</td>
+          <td>cbp-margin-left-6x</td>
           <td>`margin-left: var(--cbp-space-6x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-left-8x</td>
+          <td>cbp-margin-left-7x</td>
+          <td>`margin-left: var(--cbp-space-7x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-left-8x</td>
           <td>`margin-left: var(--cbp-space-8x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-left-12x</td>
+          <td>cbp-margin-left-9x</td>
+          <td>`margin-left: var(--cbp-space-9x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-left-10x</td>
+          <td>`margin-left: var(--cbp-space-10x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-left-11x</td>
+          <td>`margin-left: var(--cbp-space-11x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-left-12x</td>
           <td>`margin-left: var(--cbp-space-12x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-left-18x</td>
+          <td>cbp-margin-left-13x</td>
+          <td>`margin-left: var(--cbp-space-13x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-left-14x</td>
+          <td>`margin-left: var(--cbp-space-14x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-left-15x</td>
+          <td>`margin-left: var(--cbp-space-15x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-left-16x</td>
+          <td>`margin-left: var(--cbp-space-16x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-left-17x</td>
+          <td>`margin-left: var(--cbp-space-17x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-left-18x</td>
           <td>`margin-left: var(--cbp-space-18x) !important;`</td>
         </tr>
       </tbody>
@@ -180,43 +312,87 @@ They provide a convenient way to apply consistent and predefined spacing values
       </thead>
       <tbody>
         <tr>
-          <td>.cbp-margin-right-0</td>
+          <td>cbp-margin-right-0</td>
           <td>`margin-right: 0 !important`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-right-1x</td>
+          <td>cbp-margin-right-1px</td>
+          <td>`margin-right: 1px !important`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-right-half-x</td>
+          <td>`margin-right: var(--cbp-space-half-x) !important`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-right-1x</td>
           <td>`margin-right: var(--cbp-space-1x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-right-2x</td>
+          <td>cbp-margin-right-2x</td>
           <td>`margin-right: var(--cbp-space-2x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-right-3x</td>
+          <td>cbp-margin-right-3x</td>
           <td>`margin-right: var(--cbp-space-3x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-right-4x</td>
+          <td>cbp-margin-right-4x</td>
           <td>`margin-right: var(--cbp-space-4x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-right-5x</td>
+          <td>cbp-margin-right-5x</td>
           <td>`margin-right: var(--cbp-space-5x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-right-6x</td>
+          <td>cbp-margin-right-6x</td>
           <td>`margin-right: var(--cbp-space-6x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-right-8x</td>
+          <td>cbp-margin-right-7x</td>
+          <td>`margin-right: var(--cbp-space-7x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-right-8x</td>
           <td>`margin-right: var(--cbp-space-8x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-right-12x</td>
+          <td>cbp-margin-right-9x</td>
+          <td>`margin-right: var(--cbp-space-9x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-right-10x</td>
+          <td>`margin-right: var(--cbp-space-10x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-right-11x</td>
+          <td>`margin-right: var(--cbp-space-11x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-right-12x</td>
           <td>`margin-right: var(--cbp-space-12x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-right-18x</td>
+          <td>cbp-margin-right-13x</td>
+          <td>`margin-top: var(--cbp-space-13x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-right-14x</td>
+          <td>`margin-right: var(--cbp-space-14x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-right-15x</td>
+          <td>`margin-right: var(--cbp-space-15x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-right-16x</td>
+          <td>`margin-right: var(--cbp-space-16x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-right-17x</td>
+          <td>`margin-right: var(--cbp-space-17x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-right-18x</td>
           <td>`margin-right: var(--cbp-space-18x) !important;`</td>
         </tr>
       </tbody>
@@ -233,43 +409,87 @@ They provide a convenient way to apply consistent and predefined spacing values
       </thead>
       <tbody>
         <tr>
-          <td>.cbp-margin-0</td>
+          <td>cbp-margin-0</td>
           <td>`margin: 0 !important`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-1x</td>
+          <td>cbp-margin-1px</td>
+          <td>`margin: 1px !important`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-half-x</td>
+          <td>`margin: var(--cbp-space-half-x) !important`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-1x</td>
           <td>`margin: var(--cbp-space-1x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-2x</td>
+          <td>cbp-margin-2x</td>
           <td>`margin: var(--cbp-space-2x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-3x</td>
+          <td>cbp-margin-3x</td>
           <td>`margin: var(--cbp-space-3x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-4x</td>
+          <td>cbp-margin-4x</td>
           <td>`margin: var(--cbp-space-4x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-5x</td>
+          <td>cbp-margin-5x</td>
           <td>`margin: var(--cbp-space-5x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-6x</td>
+          <td>cbp-margin-6x</td>
           <td>`margin: var(--cbp-space-6x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-8x</td>
+          <td>cbp-margin-7x</td>
+          <td>`margin: var(--cbp-space-7x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-8x</td>
           <td>`margin: var(--cbp-space-8x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-12x</td>
+          <td>cbp-margin-9x</td>
+          <td>`margin: var(--cbp-space-9x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-10x</td>
+          <td>`margin: var(--cbp-space-10x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-11x</td>
+          <td>`margin: var(--cbp-space-11x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-12x</td>
           <td>`margin: var(--cbp-space-12x) !important;`</td>
         </tr>
         <tr>
-          <td>.cbp-margin-18x</td>
+          <td>cbp-margin-13x</td>
+          <td>`margin: var(--cbp-space-13x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-14x</td>
+          <td>`margin: var(--cbp-space-14x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-15x</td>
+          <td>`margin: var(--cbp-space-15x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-16x</td>
+          <td>`margin: var(--cbp-space-16x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-17x</td>
+          <td>`margin: var(--cbp-space-17x) !important;`</td>
+        </tr>
+        <tr>
+          <td>cbp-margin-18x</td>
           <td>`margin: var(--cbp-space-18x) !important;`</td>
         </tr>
       </tbody>

From f1a33fff16b7ac5b2e8f089c5a760773b48f59fb Mon Sep 17 00:00:00 2001
From: Danny Kim <dannyk3941@gmail.com>
Date: Tue, 12 Sep 2023 13:13:02 -0400
Subject: [PATCH 08/10] fix: removed important's from margin/padding utility
 classes

---
 .../vanilla/src/sass/utilities/_spacing.scss  |  20 +-
 .../src/stories/utilities/spacing.stories.mdx | 430 ++++++++++++------
 2 files changed, 305 insertions(+), 145 deletions(-)

diff --git a/packages/vanilla/src/sass/utilities/_spacing.scss b/packages/vanilla/src/sass/utilities/_spacing.scss
index 6ce829a3..05b1eab9 100644
--- a/packages/vanilla/src/sass/utilities/_spacing.scss
+++ b/packages/vanilla/src/sass/utilities/_spacing.scss
@@ -26,44 +26,44 @@ $spacing: (
 
 @each $name, $space in $spacing {
   .cbp-margin-#{$name} {
-    margin: #{$space} !important;
+    margin: #{$space};
   }
 
   .cbp-margin-top-#{$name} {
-    margin-top: #{$space} !important;;
+    margin-top: #{$space};
   }
 
   .cbp-margin-bottom-#{$name} {
-    margin-bottom: #{$space} !important;;
+    margin-bottom: #{$space};
   }
 
   .cbp-margin-right-#{$name} {
-    margin-right: #{$space} !important;;
+    margin-right: #{$space};
   }
 
   .cbp-margin-left-#{$name} {
-    margin-left: #{$space} !important;;
+    margin-left: #{$space};
   }
 }
 
 @each $name, $space in $spacing {
   .cbp-padding-#{$name} {
-    padding: #{$space} !important;;
+    padding: #{$space};
   }
 
   .cbp-padding-top-#{$name} {
-    padding-top: #{$space} !important;;
+    padding-top: #{$space};
   }
 
   .cbp-padding-bottom-#{$name} {
-    padding-bottom: #{$space} !important;;
+    padding-bottom: #{$space};
   }
 
   .cbp-padding-right-#{$name} {
-    padding-right: #{$space} !important;;
+    padding-right: #{$space};
   }
 
   .cbp-padding-left-#{$name} {
-    padding-left: #{$space} !important;;
+    padding-left: #{$space};
   }
 }
diff --git a/packages/vanilla/src/stories/utilities/spacing.stories.mdx b/packages/vanilla/src/stories/utilities/spacing.stories.mdx
index 40ed6e0b..624af64e 100644
--- a/packages/vanilla/src/stories/utilities/spacing.stories.mdx
+++ b/packages/vanilla/src/stories/utilities/spacing.stories.mdx
@@ -17,92 +17,124 @@ They provide a convenient way to apply consistent and predefined spacing values
         <tr>
           <th>Utility Class</th>
           <th>CSS</th>
+          <th>Value (rem)</th>
+          <th>Pixel Translation (px)</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>cbp-margin-top-0</td>
-          <td>`margin-top: 0 !important`</td>
+          <td>`margin-top: 0`</td>
+          <td>`0`</td>
+          <td>`0`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-1px</td>
-          <td>`margin-top: 1px !important`</td>
+          <td>`margin-top: 1px`</td>
+          <td>`1px`</td>
+          <td>`1px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-half-x</td>
-          <td>`margin-top: var(--cbp-space-half-x) !important`</td>
+          <td>`margin-top: var(--cbp-space-half-x)`</td>
+          <td>`0.125rem`</td>
+          <td>`0.5px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-1x</td>
-          <td>`margin-top: var(--cbp-space-1x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-1x);`</td>
+          <td>`0.25rem`</td>
+          <td>`4px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-2x</td>
-          <td>`margin-top: var(--cbp-space-2x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-2x);`</td>
+          <td>`0.5rem`</td>
+          <td>`8px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-3x</td>
-          <td>`margin-top: var(--cbp-space-3x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-3x);`</td>
+          <td>`0.75rem`</td>
+          <td>`12px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-4x</td>
-          <td>`margin-top: var(--cbp-space-4x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-4x);`</td>
+          <td>`1rem`</td>
+          <td>`16px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-5x</td>
-          <td>`margin-top: var(--cbp-space-5x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-5x);`</td>
+          <td>`1.25rem`</td>
+          <td>`20px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-6x</td>
-          <td>`margin-top: var(--cbp-space-6x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-6x);`</td>
+          <td>`1.5rem`</td>
+          <td>`24px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-7x</td>
-          <td>`margin-top: var(--cbp-space-7x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-7x);`</td>
+          <td>`1.75rem`</td>
+          <td>`28px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-8x</td>
-          <td>`margin-top: var(--cbp-space-8x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-8x);`</td>
+          <td>`2rem`</td>
+          <td>`32px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-9x</td>
-          <td>`margin-top: var(--cbp-space-9x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-9x);`</td>
+          <td>`2.25rem`</td>
+          <td>`36px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-10x</td>
-          <td>`margin-top: var(--cbp-space-10x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-10x);`</td>
+          <td>`2.5rem`</td>
+          <td>`40px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-11x</td>
-          <td>`margin-top: var(--cbp-space-11x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-11x);`</td>
+          <td>`2.75rem`</td>
+          <td>`44px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-12x</td>
-          <td>`margin-top: var(--cbp-space-12x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-12x);`</td>
+          <td>`3rem`</td>
+          <td>`48px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-13x</td>
-          <td>`margin-top: var(--cbp-space-13x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-13x);`</td>
+          <td>`3.25rem`</td>
+          <td>`52px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-14x</td>
-          <td>`margin-top: var(--cbp-space-14x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-14x);`</td>
+          <td>`3.5rem`</td>
+          <td>`56px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-15x</td>
-          <td>`margin-top: var(--cbp-space-15x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-15x);`</td>
+          <td>`3.75rem`</td>
+          <td>`60px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-16x</td>
-          <td>`margin-top: var(--cbp-space-16x) !important;`</td>
-        </tr>
-        <tr>
-          <td>cbp-margin-top-17x</td>
-          <td>`margin-top: var(--cbp-space-17x) !important;`</td>
-        </tr>
-        <tr>
-          <td>cbp-margin-top-18x</td>
-          <td>`margin-top: var(--cbp-space-18x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-16x);`</td>
+          <td>`4rem`</td>
+          <td>`64px`</td>
         </tr>
       </tbody>
     </table>
@@ -114,92 +146,124 @@ They provide a convenient way to apply consistent and predefined spacing values
         <tr>
           <th>Utility Class</th>
           <th>CSS</th>
+          <th>Value (rem)</th>
+          <th>Pixel Translation (px)</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>cbp-margin-bottom-0</td>
-          <td>`margin-bottom: 0 !important`</td>
+          <td>`margin-bottom: 0`</td>
+          <td>`0`</td>
+          <td>`0`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-1px</td>
-          <td>`margin-bottom: 1px !important`</td>
+          <td>`margin-bottom: 1px`</td>
+          <td>`1px`</td>
+          <td>`1px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-half-x</td>
-          <td>`margin-bottom: var(--cbp-space-half-x) !important`</td>
+          <td>`margin-bottom: var(--cbp-space-half-x)`</td>
+          <td>`0.125rem`</td>
+          <td>`0.5px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-1x</td>
-          <td>`margin-bottom: var(--cbp-space-1x) !important;`</td>
+          <td>`margin-bottom: var(--cbp-space-1x);`</td>
+          <td>`0.25rem`</td>
+          <td>`4px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-2x</td>
-          <td>`margin-bottom: var(--cbp-space-2x) !important;`</td>
+          <td>`margin-bottom: var(--cbp-space-2x);`</td>
+          <td>`0.5rem`</td>
+          <td>`8px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-3x</td>
-          <td>`margin-bottom: var(--cbp-space-3x) !important;`</td>
+          <td>`margin-bottom: var(--cbp-space-3x);`</td>
+          <td>`0.75rem`</td>
+          <td>`12px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-4x</td>
-          <td>`margin-bottom: var(--cbp-space-4x) !important;`</td>
+          <td>`margin-bottom: var(--cbp-space-4x);`</td>
+          <td>`1rem`</td>
+          <td>`16px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-5x</td>
-          <td>`margin-bottom: var(--cbp-space-5x) !important;`</td>
+          <td>`margin-bottom: var(--cbp-space-5x);`</td>
+          <td>`1.25rem`</td>
+          <td>`20px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-6x</td>
-          <td>`margin-bottom: var(--cbp-space-6x) !important;`</td>
+          <td>`margin-bottom: var(--cbp-space-6x);`</td>
+          <td>`1.5rem`</td>
+          <td>`24px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-7x</td>
-          <td>`margin-bottom: var(--cbp-space-7x) !important;`</td>
+          <td>`margin-bottom: var(--cbp-space-7x);`</td>
+          <td>`1.75rem`</td>
+          <td>`28px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-8x</td>
-          <td>`margin-bottom: var(--cbp-space-8x) !important;`</td>
+          <td>`margin-bottom: var(--cbp-space-8x);`</td>
+          <td>`2rem`</td>
+          <td>`32px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-9x</td>
-          <td>`margin-bottom: var(--cbp-space-9x) !important;`</td>
+          <td>`margin-bottom: var(--cbp-space-9x);`</td>
+          <td>`2.25rem`</td>
+          <td>`36px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-10x</td>
-          <td>`margin-bottom: var(--cbp-space-10x) !important;`</td>
+          <td>`margin-bottom: var(--cbp-space-10x);`</td>
+          <td>`2.5rem`</td>
+          <td>`40px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-11x</td>
-          <td>`margin-bottom: var(--cbp-space-11x) !important;`</td>
+          <td>`margin-bottom: var(--cbp-space-11x);`</td>
+          <td>`2.75rem`</td>
+          <td>`44px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-12x</td>
-          <td>`margin-bottom: var(--cbp-space-12x) !important;`</td>
+          <td>`margin-bottom: var(--cbp-space-12x);`</td>
+          <td>`3rem`</td>
+          <td>`48px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-13x</td>
-          <td>`margin-bottom: var(--cbp-space-13x) !important;`</td>
+          <td>`margin-bottom: var(--cbp-space-13x);`</td>
+          <td>`3.25rem`</td>
+          <td>`52px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-14x</td>
-          <td>`margin-bottom: var(--cbp-space-14x) !important;`</td>
+          <td>`margin-bottom: var(--cbp-space-14x);`</td>
+          <td>`3.5rem`</td>
+          <td>`56px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-15x</td>
-          <td>`margin-bottom: var(--cbp-space-15x) !important;`</td>
+          <td>`margin-bottom: var(--cbp-space-15x);`</td>
+          <td>`3.75rem`</td>
+          <td>`60px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-16x</td>
-          <td>`margin-bottom: var(--cbp-space-16x) !important;`</td>
-        </tr>
-        <tr>
-          <td>cbp-margin-bottom-17x</td>
-          <td>`margin-bottom: var(--cbp-space-17x) !important;`</td>
-        </tr>
-        <tr>
-          <td>cbp-margin-bottom-18x</td>
-          <td>`margin-bottom: var(--cbp-space-18x) !important;`</td>
+          <td>`margin-bottom: var(--cbp-space-16x);`</td>
+          <td>`4rem`</td>
+          <td>`64px`</td>
         </tr>
       </tbody>
     </table>
@@ -211,92 +275,124 @@ They provide a convenient way to apply consistent and predefined spacing values
         <tr>
           <th>Utility Class</th>
           <th>CSS</th>
+          <th>Value (rem)</th>
+          <th>Pixel Translation (px)</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>cbp-margin-left-0</td>
-          <td>`margin-left: 0 !important`</td>
+          <td>`margin-left: 0`</td>
+          <td>`0`</td>
+          <td>`0`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-1px</td>
-          <td>`margin-left: 1px !important`</td>
+          <td>`margin-left: 1px`</td>
+          <td>`1px`</td>
+          <td>`1px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-half-x</td>
-          <td>`margin-left: var(--cbp-space-half-x) !important`</td>
+          <td>`margin-left: var(--cbp-space-half-x)`</td>
+          <td>`0.125rem`</td>
+          <td>`0.5px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-1x</td>
-          <td>`margin-left: var(--cbp-space-1x) !important;`</td>
+          <td>`margin-left: var(--cbp-space-1x);`</td>
+          <td>`0.25rem`</td>
+          <td>`4px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-2x</td>
-          <td>`margin-left: var(--cbp-space-2x) !important;`</td>
+          <td>`margin-left: var(--cbp-space-2x);`</td>
+          <td>`0.5rem`</td>
+          <td>`8px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-3x</td>
-          <td>`margin-left: var(--cbp-space-3x) !important;`</td>
+          <td>`margin-left: var(--cbp-space-3x);`</td>
+          <td>`0.75rem`</td>
+          <td>`12px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-4x</td>
-          <td>`margin-left: var(--cbp-space-4x) !important;`</td>
+          <td>`margin-left: var(--cbp-space-4x);`</td>
+          <td>`1rem`</td>
+          <td>`16px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-5x</td>
-          <td>`margin-left: var(--cbp-space-5x) !important;`</td>
+          <td>`margin-left: var(--cbp-space-5x);`</td>
+          <td>`1.25rem`</td>
+          <td>`20px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-6x</td>
-          <td>`margin-left: var(--cbp-space-6x) !important;`</td>
+          <td>`margin-left: var(--cbp-space-6x);`</td>
+          <td>`1.5rem`</td>
+          <td>`24px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-7x</td>
-          <td>`margin-left: var(--cbp-space-7x) !important;`</td>
+          <td>`margin-left: var(--cbp-space-7x);`</td>
+          <td>`1.75rem`</td>
+          <td>`28px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-8x</td>
-          <td>`margin-left: var(--cbp-space-8x) !important;`</td>
+          <td>`margin-left: var(--cbp-space-8x);`</td>
+          <td>`2rem`</td>
+          <td>`32px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-9x</td>
-          <td>`margin-left: var(--cbp-space-9x) !important;`</td>
+          <td>`margin-left: var(--cbp-space-9x);`</td>
+          <td>`2.25rem`</td>
+          <td>`36px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-10x</td>
-          <td>`margin-left: var(--cbp-space-10x) !important;`</td>
+          <td>`margin-left: var(--cbp-space-10x);`</td>
+          <td>`2.5rem`</td>
+          <td>`40px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-11x</td>
-          <td>`margin-left: var(--cbp-space-11x) !important;`</td>
+          <td>`margin-left: var(--cbp-space-11x);`</td>
+          <td>`2.75rem`</td>
+          <td>`44px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-12x</td>
-          <td>`margin-left: var(--cbp-space-12x) !important;`</td>
+          <td>`margin-left: var(--cbp-space-12x);`</td>
+          <td>`3rem`</td>
+          <td>`48px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-13x</td>
-          <td>`margin-left: var(--cbp-space-13x) !important;`</td>
+          <td>`margin-left: var(--cbp-space-13x);`</td>
+          <td>`3.25rem`</td>
+          <td>`52px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-14x</td>
-          <td>`margin-left: var(--cbp-space-14x) !important;`</td>
+          <td>`margin-left: var(--cbp-space-14x);`</td>
+          <td>`3.5rem`</td>
+          <td>`56px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-15x</td>
-          <td>`margin-left: var(--cbp-space-15x) !important;`</td>
+          <td>`margin-left: var(--cbp-space-15x);`</td>
+          <td>`3.75rem`</td>
+          <td>`60px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-16x</td>
-          <td>`margin-left: var(--cbp-space-16x) !important;`</td>
-        </tr>
-        <tr>
-          <td>cbp-margin-left-17x</td>
-          <td>`margin-left: var(--cbp-space-17x) !important;`</td>
-        </tr>
-        <tr>
-          <td>cbp-margin-left-18x</td>
-          <td>`margin-left: var(--cbp-space-18x) !important;`</td>
+          <td>`margin-left: var(--cbp-space-16x);`</td>
+          <td>`4rem`</td>
+          <td>`64px`</td>
         </tr>
       </tbody>
     </table>
@@ -308,92 +404,124 @@ They provide a convenient way to apply consistent and predefined spacing values
         <tr>
           <th>Utility Class</th>
           <th>CSS</th>
+          <th>Value (rem)</th>
+          <th>Pixel Translation (px)</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>cbp-margin-right-0</td>
-          <td>`margin-right: 0 !important`</td>
+          <td>`margin-right: 0`</td>
+          <td>`0`</td>
+          <td>`0`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-1px</td>
-          <td>`margin-right: 1px !important`</td>
+          <td>`margin-right: 1px`</td>
+          <td>`1px`</td>
+          <td>`1px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-half-x</td>
-          <td>`margin-right: var(--cbp-space-half-x) !important`</td>
+          <td>`margin-right: var(--cbp-space-half-x)`</td>
+          <td>`0.125rem`</td>
+          <td>`0.5px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-1x</td>
-          <td>`margin-right: var(--cbp-space-1x) !important;`</td>
+          <td>`margin-right: var(--cbp-space-1x);`</td>
+          <td>`0.25rem`</td>
+          <td>`4px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-2x</td>
-          <td>`margin-right: var(--cbp-space-2x) !important;`</td>
+          <td>`margin-right: var(--cbp-space-2x);`</td>
+          <td>`0.5rem`</td>
+          <td>`8px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-3x</td>
-          <td>`margin-right: var(--cbp-space-3x) !important;`</td>
+          <td>`margin-right: var(--cbp-space-3x);`</td>
+          <td>`0.75rem`</td>
+          <td>`12px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-4x</td>
-          <td>`margin-right: var(--cbp-space-4x) !important;`</td>
+          <td>`margin-right: var(--cbp-space-4x);`</td>
+          <td>`1rem`</td>
+          <td>`16px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-5x</td>
-          <td>`margin-right: var(--cbp-space-5x) !important;`</td>
+          <td>`margin-right: var(--cbp-space-5x);`</td>
+          <td>`1.25rem`</td>
+          <td>`20px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-6x</td>
-          <td>`margin-right: var(--cbp-space-6x) !important;`</td>
+          <td>`margin-right: var(--cbp-space-6x);`</td>
+          <td>`1.5rem`</td>
+          <td>`24px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-7x</td>
-          <td>`margin-right: var(--cbp-space-7x) !important;`</td>
+          <td>`margin-right: var(--cbp-space-7x);`</td>
+          <td>`1.75rem`</td>
+          <td>`28px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-8x</td>
-          <td>`margin-right: var(--cbp-space-8x) !important;`</td>
+          <td>`margin-right: var(--cbp-space-8x);`</td>
+          <td>`2rem`</td>
+          <td>`32px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-9x</td>
-          <td>`margin-right: var(--cbp-space-9x) !important;`</td>
+          <td>`margin-right: var(--cbp-space-9x);`</td>
+          <td>`2.25rem`</td>
+          <td>`36px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-10x</td>
-          <td>`margin-right: var(--cbp-space-10x) !important;`</td>
+          <td>`margin-right: var(--cbp-space-10x);`</td>
+          <td>`2.5rem`</td>
+          <td>`40px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-11x</td>
-          <td>`margin-right: var(--cbp-space-11x) !important;`</td>
+          <td>`margin-right: var(--cbp-space-11x);`</td>
+          <td>`2.75rem`</td>
+          <td>`44px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-12x</td>
-          <td>`margin-right: var(--cbp-space-12x) !important;`</td>
+          <td>`margin-right: var(--cbp-space-12x);`</td>
+          <td>`3rem`</td>
+          <td>`48px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-13x</td>
-          <td>`margin-top: var(--cbp-space-13x) !important;`</td>
+          <td>`margin-top: var(--cbp-space-13x);`</td>
+          <td>`3.25rem`</td>
+          <td>`52px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-14x</td>
-          <td>`margin-right: var(--cbp-space-14x) !important;`</td>
+          <td>`margin-right: var(--cbp-space-14x);`</td>
+          <td>`3.5rem`</td>
+          <td>`56px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-15x</td>
-          <td>`margin-right: var(--cbp-space-15x) !important;`</td>
+          <td>`margin-right: var(--cbp-space-15x);`</td>
+          <td>`3.75rem`</td>
+          <td>`60px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-16x</td>
-          <td>`margin-right: var(--cbp-space-16x) !important;`</td>
-        </tr>
-        <tr>
-          <td>cbp-margin-right-17x</td>
-          <td>`margin-right: var(--cbp-space-17x) !important;`</td>
-        </tr>
-        <tr>
-          <td>cbp-margin-right-18x</td>
-          <td>`margin-right: var(--cbp-space-18x) !important;`</td>
+          <td>`margin-right: var(--cbp-space-16x);`</td>
+          <td>`4rem`</td>
+          <td>`64px`</td>
         </tr>
       </tbody>
     </table>
@@ -405,92 +533,124 @@ They provide a convenient way to apply consistent and predefined spacing values
         <tr>
           <th>Utility Class</th>
           <th>CSS</th>
+          <th>Value (rem)</th>
+          <th>Pixel Translation (px)</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>cbp-margin-0</td>
-          <td>`margin: 0 !important`</td>
+          <td>`margin: 0`</td>
+          <td>`0`</td>
+          <td>`0`</td>
         </tr>
         <tr>
           <td>cbp-margin-1px</td>
-          <td>`margin: 1px !important`</td>
+          <td>`margin: 1px`</td>
+          <td>`1px`</td>
+          <td>`1px`</td>
         </tr>
         <tr>
           <td>cbp-margin-half-x</td>
-          <td>`margin: var(--cbp-space-half-x) !important`</td>
+          <td>`margin: var(--cbp-space-half-x)`</td>
+          <td>`0.125rem`</td>
+          <td>`0.5px`</td>
         </tr>
         <tr>
           <td>cbp-margin-1x</td>
-          <td>`margin: var(--cbp-space-1x) !important;`</td>
+          <td>`margin: var(--cbp-space-1x);`</td>
+          <td>`0.25rem`</td>
+          <td>`4px`</td>
         </tr>
         <tr>
           <td>cbp-margin-2x</td>
-          <td>`margin: var(--cbp-space-2x) !important;`</td>
+          <td>`margin: var(--cbp-space-2x);`</td>
+          <td>`0.5rem`</td>
+          <td>`8px`</td>
         </tr>
         <tr>
           <td>cbp-margin-3x</td>
-          <td>`margin: var(--cbp-space-3x) !important;`</td>
+          <td>`margin: var(--cbp-space-3x);`</td>
+          <td>`0.75rem`</td>
+          <td>`12px`</td>
         </tr>
         <tr>
           <td>cbp-margin-4x</td>
-          <td>`margin: var(--cbp-space-4x) !important;`</td>
+          <td>`margin: var(--cbp-space-4x);`</td>
+          <td>`1rem`</td>
+          <td>`16px`</td>
         </tr>
         <tr>
           <td>cbp-margin-5x</td>
-          <td>`margin: var(--cbp-space-5x) !important;`</td>
+          <td>`margin: var(--cbp-space-5x);`</td>
+          <td>`1.25rem`</td>
+          <td>`20px`</td>
         </tr>
         <tr>
           <td>cbp-margin-6x</td>
-          <td>`margin: var(--cbp-space-6x) !important;`</td>
+          <td>`margin: var(--cbp-space-6x);`</td>
+          <td>`1.5rem`</td>
+          <td>`24px`</td>
         </tr>
         <tr>
           <td>cbp-margin-7x</td>
-          <td>`margin: var(--cbp-space-7x) !important;`</td>
+          <td>`margin: var(--cbp-space-7x);`</td>
+          <td>`1.75rem`</td>
+          <td>`28px`</td>
         </tr>
         <tr>
           <td>cbp-margin-8x</td>
-          <td>`margin: var(--cbp-space-8x) !important;`</td>
+          <td>`margin: var(--cbp-space-8x);`</td>
+          <td>`2rem`</td>
+          <td>`32px`</td>
         </tr>
         <tr>
           <td>cbp-margin-9x</td>
-          <td>`margin: var(--cbp-space-9x) !important;`</td>
+          <td>`margin: var(--cbp-space-9x);`</td>
+          <td>`2.25rem`</td>
+          <td>`36px`</td>
         </tr>
         <tr>
           <td>cbp-margin-10x</td>
-          <td>`margin: var(--cbp-space-10x) !important;`</td>
+          <td>`margin: var(--cbp-space-10x);`</td>
+          <td>`2.5rem`</td>
+          <td>`40px`</td>
         </tr>
         <tr>
           <td>cbp-margin-11x</td>
-          <td>`margin: var(--cbp-space-11x) !important;`</td>
+          <td>`margin: var(--cbp-space-11x);`</td>
+          <td>`2.75rem`</td>
+          <td>`44px`</td>
         </tr>
         <tr>
           <td>cbp-margin-12x</td>
-          <td>`margin: var(--cbp-space-12x) !important;`</td>
+          <td>`margin: var(--cbp-space-12x);`</td>
+          <td>`3rem`</td>
+          <td>`48px`</td>
         </tr>
         <tr>
           <td>cbp-margin-13x</td>
-          <td>`margin: var(--cbp-space-13x) !important;`</td>
+          <td>`margin: var(--cbp-space-13x);`</td>
+          <td>`3.25rem`</td>
+          <td>`52px`</td>
         </tr>
         <tr>
           <td>cbp-margin-14x</td>
-          <td>`margin: var(--cbp-space-14x) !important;`</td>
+          <td>`margin: var(--cbp-space-14x);`</td>
+          <td>`3.5rem`</td>
+          <td>`56px`</td>
         </tr>
         <tr>
           <td>cbp-margin-15x</td>
-          <td>`margin: var(--cbp-space-15x) !important;`</td>
+          <td>`margin: var(--cbp-space-15x);`</td>
+          <td>`3.75rem`</td>
+          <td>`60px`</td>
         </tr>
         <tr>
           <td>cbp-margin-16x</td>
-          <td>`margin: var(--cbp-space-16x) !important;`</td>
-        </tr>
-        <tr>
-          <td>cbp-margin-17x</td>
-          <td>`margin: var(--cbp-space-17x) !important;`</td>
-        </tr>
-        <tr>
-          <td>cbp-margin-18x</td>
-          <td>`margin: var(--cbp-space-18x) !important;`</td>
+          <td>`margin: var(--cbp-space-16x);`</td>
+          <td>`4rem`</td>
+          <td>`64px`</td>
         </tr>
       </tbody>
     </table>

From a4f79dfdd17c69867dcfd79a4de58b3d0fc2d2c4 Mon Sep 17 00:00:00 2001
From: Danny Kim <dannyk3941@gmail.com>
Date: Tue, 12 Sep 2023 13:59:24 -0400
Subject: [PATCH 09/10] chore: replace margin-top in correct table

---
 packages/vanilla/src/stories/utilities/spacing.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vanilla/src/stories/utilities/spacing.stories.mdx b/packages/vanilla/src/stories/utilities/spacing.stories.mdx
index 624af64e..483a3150 100644
--- a/packages/vanilla/src/stories/utilities/spacing.stories.mdx
+++ b/packages/vanilla/src/stories/utilities/spacing.stories.mdx
@@ -501,7 +501,7 @@ They provide a convenient way to apply consistent and predefined spacing values
         </tr>
         <tr>
           <td>cbp-margin-right-13x</td>
-          <td>`margin-top: var(--cbp-space-13x);`</td>
+          <td>`margin-right: var(--cbp-space-13x);`</td>
           <td>`3.25rem`</td>
           <td>`52px`</td>
         </tr>

From 63bfd6e6684de8ba08d701b3eadc9a8ebb6307da Mon Sep 17 00:00:00 2001
From: Danny Kim <dannyk3941@gmail.com>
Date: Tue, 12 Sep 2023 14:41:29 -0400
Subject: [PATCH 10/10] fix: px value for half-x

---
 .../vanilla/src/stories/utilities/spacing.stories.mdx  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/vanilla/src/stories/utilities/spacing.stories.mdx b/packages/vanilla/src/stories/utilities/spacing.stories.mdx
index 483a3150..639fa4cd 100644
--- a/packages/vanilla/src/stories/utilities/spacing.stories.mdx
+++ b/packages/vanilla/src/stories/utilities/spacing.stories.mdx
@@ -38,7 +38,7 @@ They provide a convenient way to apply consistent and predefined spacing values
           <td>cbp-margin-top-half-x</td>
           <td>`margin-top: var(--cbp-space-half-x)`</td>
           <td>`0.125rem`</td>
-          <td>`0.5px`</td>
+          <td>`2px`</td>
         </tr>
         <tr>
           <td>cbp-margin-top-1x</td>
@@ -167,7 +167,7 @@ They provide a convenient way to apply consistent and predefined spacing values
           <td>cbp-margin-bottom-half-x</td>
           <td>`margin-bottom: var(--cbp-space-half-x)`</td>
           <td>`0.125rem`</td>
-          <td>`0.5px`</td>
+          <td>`2px`</td>
         </tr>
         <tr>
           <td>cbp-margin-bottom-1x</td>
@@ -296,7 +296,7 @@ They provide a convenient way to apply consistent and predefined spacing values
           <td>cbp-margin-left-half-x</td>
           <td>`margin-left: var(--cbp-space-half-x)`</td>
           <td>`0.125rem`</td>
-          <td>`0.5px`</td>
+          <td>`2px`</td>
         </tr>
         <tr>
           <td>cbp-margin-left-1x</td>
@@ -425,7 +425,7 @@ They provide a convenient way to apply consistent and predefined spacing values
           <td>cbp-margin-right-half-x</td>
           <td>`margin-right: var(--cbp-space-half-x)`</td>
           <td>`0.125rem`</td>
-          <td>`0.5px`</td>
+          <td>`2px`</td>
         </tr>
         <tr>
           <td>cbp-margin-right-1x</td>
@@ -554,7 +554,7 @@ They provide a convenient way to apply consistent and predefined spacing values
           <td>cbp-margin-half-x</td>
           <td>`margin: var(--cbp-space-half-x)`</td>
           <td>`0.125rem`</td>
-          <td>`0.5px`</td>
+          <td>`2px`</td>
         </tr>
         <tr>
           <td>cbp-margin-1x</td>