From 9f1798049026df0fcc02d8ed2398a87a20c641ca Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 14 Jan 2025 12:07:31 +0000
Subject: [PATCH] Update spacing tokens

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../HeadlessBanners/styles.module.css         |   6 +-
 .../src/components/Tabs/styles.module.css     |   4 +-
 .../src/components/Toolbar/nav.module.css     |   2 +-
 .../src/components/Toolbar/styles.module.css  |   2 +-
 packages/canon/src/css/core.css               |  64 +++++---
 packages/canon/src/css/utilities/2xl.css      | 152 +++++++++---------
 packages/canon/src/css/utilities/lg.css       | 152 +++++++++---------
 packages/canon/src/css/utilities/md.css       | 152 +++++++++---------
 packages/canon/src/css/utilities/sm.css       | 152 +++++++++---------
 packages/canon/src/css/utilities/xl.css       | 152 +++++++++---------
 packages/canon/src/css/utilities/xs.css       | 152 +++++++++---------
 11 files changed, 505 insertions(+), 485 deletions(-)

diff --git a/canon-docs/src/components/HeadlessBanners/styles.module.css b/canon-docs/src/components/HeadlessBanners/styles.module.css
index 0561406433..6993f51943 100644
--- a/canon-docs/src/components/HeadlessBanners/styles.module.css
+++ b/canon-docs/src/components/HeadlessBanners/styles.module.css
@@ -1,11 +1,11 @@
 .container {
   display: flex;
   background-color: var(--canon-surface-1);
-  padding: var(--canon-space-5);
+  padding: var(--canon-space-6);
   border-radius: var(--canon-border-radius-xs);
   border: 1px solid var(--canon-border-base);
-  margin-bottom: var(--canon-space-5);
-  gap: var(--canon-space-5);
+  margin-bottom: var(--canon-space-6);
+  gap: var(--canon-space-6);
   transition: background-color 0.2s ease-in-out;
 }
 
diff --git a/canon-docs/src/components/Tabs/styles.module.css b/canon-docs/src/components/Tabs/styles.module.css
index abc9f0325c..c331316353 100644
--- a/canon-docs/src/components/Tabs/styles.module.css
+++ b/canon-docs/src/components/Tabs/styles.module.css
@@ -4,10 +4,10 @@
 
 .list {
   display: flex;
-  gap: var(--canon-space-5);
+  gap: var(--canon-space-6);
   border-bottom: 1px solid var(--canon-border-base);
   position: relative;
-  margin-bottom: var(--canon-space-5);
+  margin-bottom: var(--canon-space-6);
 }
 
 .tab {
diff --git a/canon-docs/src/components/Toolbar/nav.module.css b/canon-docs/src/components/Toolbar/nav.module.css
index 9b90f047d3..c16ed3d02a 100644
--- a/canon-docs/src/components/Toolbar/nav.module.css
+++ b/canon-docs/src/components/Toolbar/nav.module.css
@@ -20,7 +20,7 @@
   display: flex;
   position: relative;
   z-index: 0;
-  gap: var(--canon-spacing-lg);
+  gap: var(--canon-space-8);
 }
 
 .tab {
diff --git a/canon-docs/src/components/Toolbar/styles.module.css b/canon-docs/src/components/Toolbar/styles.module.css
index dd3798ad08..ff3376cfc1 100644
--- a/canon-docs/src/components/Toolbar/styles.module.css
+++ b/canon-docs/src/components/Toolbar/styles.module.css
@@ -10,7 +10,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 var(--canon-space-5);
+  padding: 0 var(--canon-space-6);
   transition: background-color 0.2s ease-in-out;
 }
 
diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css
index b5ecc60f41..05e449a174 100644
--- a/packages/canon/src/css/core.css
+++ b/packages/canon/src/css/core.css
@@ -45,17 +45,27 @@
   --canon-font-size-display: 5.75rem; /* 92px */
 
   /* Spacing */
-  --canon-space-0_5: 0.125rem; /* 2px */
-  --canon-space-1: 0.25rem; /* 4px */
-  --canon-space-1_5: 0.375rem; /* 6px */
-  --canon-space-2: 0.5rem; /* 8px */
-  --canon-space-3: 0.75rem; /* 12px */
-  --canon-space-4: 1rem; /* 16px */
-  --canon-space-5: 1.5rem; /* 24px */
-  --canon-space-6: 2rem; /* 32px */
-  --canon-space-7: 2.5rem; /* 40px */
-  --canon-space-8: 3rem; /* 48px */
-  --canon-space-9: 3.5rem; /* 56px */
+
+  /* This is the spacing multiplier */
+  --canon-space-unit: 0.25rem; /* 4px */
+
+  /* These are the spacing scale */
+  --canon-space-0_5: calc(var(--canon-space-unit) * 0.5); /* 2px */
+  --canon-space-1: var(--canon-space-unit); /* 4px */
+  --canon-space-1_5: calc(var(--canon-space-unit) * 1.5); /* 6px */
+  --canon-space-2: calc(var(--canon-space-unit) * 2); /* 8px */
+  --canon-space-3: calc(var(--canon-space-unit) * 3); /* 12px */
+  --canon-space-4: calc(var(--canon-space-unit) * 4); /* 16px */
+  --canon-space-5: calc(var(--canon-space-unit) * 5); /* 20px */
+  --canon-space-6: calc(var(--canon-space-unit) * 6); /* 24px */
+  --canon-space-7: calc(var(--canon-space-unit) * 7); /* 28px */
+  --canon-space-8: calc(var(--canon-space-unit) * 8); /* 32px */
+  --canon-space-9: calc(var(--canon-space-unit) * 9); /* 36px */
+  --canon-space-10: calc(var(--canon-space-unit) * 10); /* 40px */
+  --canon-space-11: calc(var(--canon-space-unit) * 11); /* 44px */
+  --canon-space-12: calc(var(--canon-space-unit) * 12); /* 48px */
+  --canon-space-13: calc(var(--canon-space-unit) * 13); /* 52px */
+  --canon-space-14: calc(var(--canon-space-unit) * 14); /* 56px */
 
   /* Border radius */
   --canon-border-radius-2xs: 0.125rem; /* 2px */
@@ -119,17 +129,27 @@
   --canon-font-size-display: 5.75rem; /* 92px */
 
   /* Spacing */
-  --canon-space-0_5: 0.125rem; /* 2px */
-  --canon-space-1: 0.25rem; /* 4px */
-  --canon-space-1_5: 0.375rem; /* 6px */
-  --canon-space-2: 0.5rem; /* 8px */
-  --canon-space-3: 0.75rem; /* 12px */
-  --canon-space-4: 1rem; /* 16px */
-  --canon-space-5: 1.5rem; /* 24px */
-  --canon-space-6: 2rem; /* 32px */
-  --canon-space-7: 2.5rem; /* 40px */
-  --canon-space-8: 3rem; /* 48px */
-  --canon-space-9: 3.5rem; /* 56px */
+
+  /* This is the spacing multiplier */
+  --canon-space-unit: 0.25rem; /* 4px */
+
+  /* These are the spacing scale */
+  --canon-space-0_5: calc(var(--canon-space-unit) * 0.5); /* 2px */
+  --canon-space-1: var(--canon-space-unit); /* 4px */
+  --canon-space-1_5: calc(var(--canon-space-unit) * 1.5); /* 6px */
+  --canon-space-2: calc(var(--canon-space-unit) * 2); /* 8px */
+  --canon-space-3: calc(var(--canon-space-unit) * 3); /* 12px */
+  --canon-space-4: calc(var(--canon-space-unit) * 4); /* 16px */
+  --canon-space-5: calc(var(--canon-space-unit) * 5); /* 20px */
+  --canon-space-6: calc(var(--canon-space-unit) * 6); /* 24px */
+  --canon-space-7: calc(var(--canon-space-unit) * 7); /* 28px */
+  --canon-space-8: calc(var(--canon-space-unit) * 8); /* 32px */
+  --canon-space-9: calc(var(--canon-space-unit) * 9); /* 36px */
+  --canon-space-10: calc(var(--canon-space-unit) * 10); /* 40px */
+  --canon-space-11: calc(var(--canon-space-unit) * 11); /* 44px */
+  --canon-space-12: calc(var(--canon-space-unit) * 12); /* 48px */
+  --canon-space-13: calc(var(--canon-space-unit) * 13); /* 52px */
+  --canon-space-14: calc(var(--canon-space-unit) * 14); /* 56px */
 
   /* Border radius */
   --canon-border-radius-2xs: 0.125rem; /* 2px */
diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css
index 0194ad38e9..bbf51c3af6 100644
--- a/packages/canon/src/css/utilities/2xl.css
+++ b/packages/canon/src/css/utilities/2xl.css
@@ -238,15 +238,15 @@
     }
 
     .cu-2xl-gap-2xl {
-      gap: var(--canon-space-8);
+      gap: var(--canon-space-12);
     }
 
     .cu-2xl-gap-lg {
-      gap: var(--canon-space-6);
+      gap: var(--canon-space-8);
     }
 
     .cu-2xl-gap-md {
-      gap: var(--canon-space-5);
+      gap: var(--canon-space-6);
     }
 
     .cu-2xl-gap-none {
@@ -258,7 +258,7 @@
     }
 
     .cu-2xl-gap-xl {
-      gap: var(--canon-space-7);
+      gap: var(--canon-space-10);
     }
 
     .cu-2xl-gap-xs {
@@ -374,7 +374,7 @@
     }
 
     .cu-2xl-m-2xl {
-      margin: var(--canon-space-8);
+      margin: var(--canon-space-12);
     }
 
     .cu-2xl-m-2xs {
@@ -382,11 +382,11 @@
     }
 
     .cu-2xl-m-lg {
-      margin: var(--canon-space-6);
+      margin: var(--canon-space-8);
     }
 
     .cu-2xl-m-md {
-      margin: var(--canon-space-5);
+      margin: var(--canon-space-6);
     }
 
     .cu-2xl-m-none {
@@ -398,7 +398,7 @@
     }
 
     .cu-2xl-m-xl {
-      margin: var(--canon-space-7);
+      margin: var(--canon-space-10);
     }
 
     .cu-2xl-m-xs {
@@ -406,7 +406,7 @@
     }
 
     .cu-2xl-mb-2xl {
-      margin-bottom: var(--canon-space-8);
+      margin-bottom: var(--canon-space-12);
     }
 
     .cu-2xl-mb-2xs {
@@ -414,11 +414,11 @@
     }
 
     .cu-2xl-mb-lg {
-      margin-bottom: var(--canon-space-6);
+      margin-bottom: var(--canon-space-8);
     }
 
     .cu-2xl-mb-md {
-      margin-bottom: var(--canon-space-5);
+      margin-bottom: var(--canon-space-6);
     }
 
     .cu-2xl-mb-none {
@@ -430,7 +430,7 @@
     }
 
     .cu-2xl-mb-xl {
-      margin-bottom: var(--canon-space-7);
+      margin-bottom: var(--canon-space-10);
     }
 
     .cu-2xl-mb-xs {
@@ -438,7 +438,7 @@
     }
 
     .cu-2xl-ml-2xl {
-      margin-left: var(--canon-space-8);
+      margin-left: var(--canon-space-12);
     }
 
     .cu-2xl-ml-2xs {
@@ -446,11 +446,11 @@
     }
 
     .cu-2xl-ml-lg {
-      margin-left: var(--canon-space-6);
+      margin-left: var(--canon-space-8);
     }
 
     .cu-2xl-ml-md {
-      margin-left: var(--canon-space-5);
+      margin-left: var(--canon-space-6);
     }
 
     .cu-2xl-ml-none {
@@ -462,7 +462,7 @@
     }
 
     .cu-2xl-ml-xl {
-      margin-left: var(--canon-space-7);
+      margin-left: var(--canon-space-10);
     }
 
     .cu-2xl-ml-xs {
@@ -470,7 +470,7 @@
     }
 
     .cu-2xl-mr-2xl {
-      margin-right: var(--canon-space-8);
+      margin-right: var(--canon-space-12);
     }
 
     .cu-2xl-mr-2xs {
@@ -478,11 +478,11 @@
     }
 
     .cu-2xl-mr-lg {
-      margin-right: var(--canon-space-6);
+      margin-right: var(--canon-space-8);
     }
 
     .cu-2xl-mr-md {
-      margin-right: var(--canon-space-5);
+      margin-right: var(--canon-space-6);
     }
 
     .cu-2xl-mr-none {
@@ -494,7 +494,7 @@
     }
 
     .cu-2xl-mr-xl {
-      margin-right: var(--canon-space-7);
+      margin-right: var(--canon-space-10);
     }
 
     .cu-2xl-mr-xs {
@@ -502,7 +502,7 @@
     }
 
     .cu-2xl-mt-2xl {
-      margin-top: var(--canon-space-8);
+      margin-top: var(--canon-space-12);
     }
 
     .cu-2xl-mt-2xs {
@@ -510,11 +510,11 @@
     }
 
     .cu-2xl-mt-lg {
-      margin-top: var(--canon-space-6);
+      margin-top: var(--canon-space-8);
     }
 
     .cu-2xl-mt-md {
-      margin-top: var(--canon-space-5);
+      margin-top: var(--canon-space-6);
     }
 
     .cu-2xl-mt-none {
@@ -526,7 +526,7 @@
     }
 
     .cu-2xl-mt-xl {
-      margin-top: var(--canon-space-7);
+      margin-top: var(--canon-space-10);
     }
 
     .cu-2xl-mt-xs {
@@ -534,8 +534,8 @@
     }
 
     .cu-2xl-mx-2xl {
-      margin-left: var(--canon-space-8);
-      margin-right: var(--canon-space-8);
+      margin-left: var(--canon-space-12);
+      margin-right: var(--canon-space-12);
     }
 
     .cu-2xl-mx-2xs {
@@ -544,13 +544,13 @@
     }
 
     .cu-2xl-mx-lg {
-      margin-left: var(--canon-space-6);
-      margin-right: var(--canon-space-6);
+      margin-left: var(--canon-space-8);
+      margin-right: var(--canon-space-8);
     }
 
     .cu-2xl-mx-md {
-      margin-left: var(--canon-space-5);
-      margin-right: var(--canon-space-5);
+      margin-left: var(--canon-space-6);
+      margin-right: var(--canon-space-6);
     }
 
     .cu-2xl-mx-none {
@@ -564,8 +564,8 @@
     }
 
     .cu-2xl-mx-xl {
-      margin-left: var(--canon-space-7);
-      margin-right: var(--canon-space-7);
+      margin-left: var(--canon-space-10);
+      margin-right: var(--canon-space-10);
     }
 
     .cu-2xl-mx-xs {
@@ -574,8 +574,8 @@
     }
 
     .cu-2xl-my-2xl {
-      margin-top: var(--canon-space-8);
-      margin-bottom: var(--canon-space-8);
+      margin-top: var(--canon-space-12);
+      margin-bottom: var(--canon-space-12);
     }
 
     .cu-2xl-my-2xs {
@@ -584,13 +584,13 @@
     }
 
     .cu-2xl-my-lg {
-      margin-top: var(--canon-space-6);
-      margin-bottom: var(--canon-space-6);
+      margin-top: var(--canon-space-8);
+      margin-bottom: var(--canon-space-8);
     }
 
     .cu-2xl-my-md {
-      margin-top: var(--canon-space-5);
-      margin-bottom: var(--canon-space-5);
+      margin-top: var(--canon-space-6);
+      margin-bottom: var(--canon-space-6);
     }
 
     .cu-2xl-my-none {
@@ -604,8 +604,8 @@
     }
 
     .cu-2xl-my-xl {
-      margin-top: var(--canon-space-7);
-      margin-bottom: var(--canon-space-7);
+      margin-top: var(--canon-space-10);
+      margin-bottom: var(--canon-space-10);
     }
 
     .cu-2xl-my-xs {
@@ -614,7 +614,7 @@
     }
 
     .cu-2xl-p-2xl {
-      padding: var(--canon-space-8);
+      padding: var(--canon-space-12);
     }
 
     .cu-2xl-p-2xs {
@@ -622,11 +622,11 @@
     }
 
     .cu-2xl-p-lg {
-      padding: var(--canon-space-6);
+      padding: var(--canon-space-8);
     }
 
     .cu-2xl-p-md {
-      padding: var(--canon-space-5);
+      padding: var(--canon-space-6);
     }
 
     .cu-2xl-p-none {
@@ -638,7 +638,7 @@
     }
 
     .cu-2xl-p-xl {
-      padding: var(--canon-space-7);
+      padding: var(--canon-space-10);
     }
 
     .cu-2xl-p-xs {
@@ -646,7 +646,7 @@
     }
 
     .cu-2xl-pb-2xl {
-      padding-bottom: var(--canon-space-8);
+      padding-bottom: var(--canon-space-12);
     }
 
     .cu-2xl-pb-2xs {
@@ -654,11 +654,11 @@
     }
 
     .cu-2xl-pb-lg {
-      padding-bottom: var(--canon-space-6);
+      padding-bottom: var(--canon-space-8);
     }
 
     .cu-2xl-pb-md {
-      padding-bottom: var(--canon-space-5);
+      padding-bottom: var(--canon-space-6);
     }
 
     .cu-2xl-pb-none {
@@ -670,7 +670,7 @@
     }
 
     .cu-2xl-pb-xl {
-      padding-bottom: var(--canon-space-7);
+      padding-bottom: var(--canon-space-10);
     }
 
     .cu-2xl-pb-xs {
@@ -678,7 +678,7 @@
     }
 
     .cu-2xl-pl-2xl {
-      padding-left: var(--canon-space-8);
+      padding-left: var(--canon-space-12);
     }
 
     .cu-2xl-pl-2xs {
@@ -686,11 +686,11 @@
     }
 
     .cu-2xl-pl-lg {
-      padding-left: var(--canon-space-6);
+      padding-left: var(--canon-space-8);
     }
 
     .cu-2xl-pl-md {
-      padding-left: var(--canon-space-5);
+      padding-left: var(--canon-space-6);
     }
 
     .cu-2xl-pl-none {
@@ -702,7 +702,7 @@
     }
 
     .cu-2xl-pl-xl {
-      padding-left: var(--canon-space-7);
+      padding-left: var(--canon-space-10);
     }
 
     .cu-2xl-pl-xs {
@@ -710,7 +710,7 @@
     }
 
     .cu-2xl-pr-2xl {
-      padding-right: var(--canon-space-8);
+      padding-right: var(--canon-space-12);
     }
 
     .cu-2xl-pr-2xs {
@@ -718,11 +718,11 @@
     }
 
     .cu-2xl-pr-lg {
-      padding-right: var(--canon-space-6);
+      padding-right: var(--canon-space-8);
     }
 
     .cu-2xl-pr-md {
-      padding-right: var(--canon-space-5);
+      padding-right: var(--canon-space-6);
     }
 
     .cu-2xl-pr-none {
@@ -734,7 +734,7 @@
     }
 
     .cu-2xl-pr-xl {
-      padding-right: var(--canon-space-7);
+      padding-right: var(--canon-space-10);
     }
 
     .cu-2xl-pr-xs {
@@ -742,7 +742,7 @@
     }
 
     .cu-2xl-pt-2xl {
-      padding-top: var(--canon-space-8);
+      padding-top: var(--canon-space-12);
     }
 
     .cu-2xl-pt-2xs {
@@ -750,11 +750,11 @@
     }
 
     .cu-2xl-pt-lg {
-      padding-top: var(--canon-space-6);
+      padding-top: var(--canon-space-8);
     }
 
     .cu-2xl-pt-md {
-      padding-top: var(--canon-space-5);
+      padding-top: var(--canon-space-6);
     }
 
     .cu-2xl-pt-none {
@@ -766,7 +766,7 @@
     }
 
     .cu-2xl-pt-xl {
-      padding-top: var(--canon-space-7);
+      padding-top: var(--canon-space-10);
     }
 
     .cu-2xl-pt-xs {
@@ -774,8 +774,8 @@
     }
 
     .cu-2xl-px-2xl {
-      padding-left: var(--canon-space-8);
-      padding-right: var(--canon-space-8);
+      padding-left: var(--canon-space-12);
+      padding-right: var(--canon-space-12);
     }
 
     .cu-2xl-px-2xs {
@@ -784,13 +784,13 @@
     }
 
     .cu-2xl-px-lg {
-      padding-left: var(--canon-space-6);
-      padding-right: var(--canon-space-6);
+      padding-left: var(--canon-space-8);
+      padding-right: var(--canon-space-8);
     }
 
     .cu-2xl-px-md {
-      padding-left: var(--canon-space-5);
-      padding-right: var(--canon-space-5);
+      padding-left: var(--canon-space-6);
+      padding-right: var(--canon-space-6);
     }
 
     .cu-2xl-px-none {
@@ -804,8 +804,8 @@
     }
 
     .cu-2xl-px-xl {
-      padding-left: var(--canon-space-7);
-      padding-right: var(--canon-space-7);
+      padding-left: var(--canon-space-10);
+      padding-right: var(--canon-space-10);
     }
 
     .cu-2xl-px-xs {
@@ -814,8 +814,8 @@
     }
 
     .cu-2xl-py-2xl {
-      padding-top: var(--canon-space-8);
-      padding-bottom: var(--canon-space-8);
+      padding-top: var(--canon-space-12);
+      padding-bottom: var(--canon-space-12);
     }
 
     .cu-2xl-py-2xs {
@@ -824,13 +824,13 @@
     }
 
     .cu-2xl-py-lg {
-      padding-top: var(--canon-space-6);
-      padding-bottom: var(--canon-space-6);
+      padding-top: var(--canon-space-8);
+      padding-bottom: var(--canon-space-8);
     }
 
     .cu-2xl-py-md {
-      padding-top: var(--canon-space-5);
-      padding-bottom: var(--canon-space-5);
+      padding-top: var(--canon-space-6);
+      padding-bottom: var(--canon-space-6);
     }
 
     .cu-2xl-py-none {
@@ -844,8 +844,8 @@
     }
 
     .cu-2xl-py-xl {
-      padding-top: var(--canon-space-7);
-      padding-bottom: var(--canon-space-7);
+      padding-top: var(--canon-space-10);
+      padding-bottom: var(--canon-space-10);
     }
 
     .cu-2xl-py-xs {
diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css
index 8abf92c2bb..e2bb93a355 100644
--- a/packages/canon/src/css/utilities/lg.css
+++ b/packages/canon/src/css/utilities/lg.css
@@ -238,15 +238,15 @@
     }
 
     .cu-lg-gap-2xl {
-      gap: var(--canon-space-8);
+      gap: var(--canon-space-12);
     }
 
     .cu-lg-gap-lg {
-      gap: var(--canon-space-6);
+      gap: var(--canon-space-8);
     }
 
     .cu-lg-gap-md {
-      gap: var(--canon-space-5);
+      gap: var(--canon-space-6);
     }
 
     .cu-lg-gap-none {
@@ -258,7 +258,7 @@
     }
 
     .cu-lg-gap-xl {
-      gap: var(--canon-space-7);
+      gap: var(--canon-space-10);
     }
 
     .cu-lg-gap-xs {
@@ -374,7 +374,7 @@
     }
 
     .cu-lg-m-2xl {
-      margin: var(--canon-space-8);
+      margin: var(--canon-space-12);
     }
 
     .cu-lg-m-2xs {
@@ -382,11 +382,11 @@
     }
 
     .cu-lg-m-lg {
-      margin: var(--canon-space-6);
+      margin: var(--canon-space-8);
     }
 
     .cu-lg-m-md {
-      margin: var(--canon-space-5);
+      margin: var(--canon-space-6);
     }
 
     .cu-lg-m-none {
@@ -398,7 +398,7 @@
     }
 
     .cu-lg-m-xl {
-      margin: var(--canon-space-7);
+      margin: var(--canon-space-10);
     }
 
     .cu-lg-m-xs {
@@ -406,7 +406,7 @@
     }
 
     .cu-lg-mb-2xl {
-      margin-bottom: var(--canon-space-8);
+      margin-bottom: var(--canon-space-12);
     }
 
     .cu-lg-mb-2xs {
@@ -414,11 +414,11 @@
     }
 
     .cu-lg-mb-lg {
-      margin-bottom: var(--canon-space-6);
+      margin-bottom: var(--canon-space-8);
     }
 
     .cu-lg-mb-md {
-      margin-bottom: var(--canon-space-5);
+      margin-bottom: var(--canon-space-6);
     }
 
     .cu-lg-mb-none {
@@ -430,7 +430,7 @@
     }
 
     .cu-lg-mb-xl {
-      margin-bottom: var(--canon-space-7);
+      margin-bottom: var(--canon-space-10);
     }
 
     .cu-lg-mb-xs {
@@ -438,7 +438,7 @@
     }
 
     .cu-lg-ml-2xl {
-      margin-left: var(--canon-space-8);
+      margin-left: var(--canon-space-12);
     }
 
     .cu-lg-ml-2xs {
@@ -446,11 +446,11 @@
     }
 
     .cu-lg-ml-lg {
-      margin-left: var(--canon-space-6);
+      margin-left: var(--canon-space-8);
     }
 
     .cu-lg-ml-md {
-      margin-left: var(--canon-space-5);
+      margin-left: var(--canon-space-6);
     }
 
     .cu-lg-ml-none {
@@ -462,7 +462,7 @@
     }
 
     .cu-lg-ml-xl {
-      margin-left: var(--canon-space-7);
+      margin-left: var(--canon-space-10);
     }
 
     .cu-lg-ml-xs {
@@ -470,7 +470,7 @@
     }
 
     .cu-lg-mr-2xl {
-      margin-right: var(--canon-space-8);
+      margin-right: var(--canon-space-12);
     }
 
     .cu-lg-mr-2xs {
@@ -478,11 +478,11 @@
     }
 
     .cu-lg-mr-lg {
-      margin-right: var(--canon-space-6);
+      margin-right: var(--canon-space-8);
     }
 
     .cu-lg-mr-md {
-      margin-right: var(--canon-space-5);
+      margin-right: var(--canon-space-6);
     }
 
     .cu-lg-mr-none {
@@ -494,7 +494,7 @@
     }
 
     .cu-lg-mr-xl {
-      margin-right: var(--canon-space-7);
+      margin-right: var(--canon-space-10);
     }
 
     .cu-lg-mr-xs {
@@ -502,7 +502,7 @@
     }
 
     .cu-lg-mt-2xl {
-      margin-top: var(--canon-space-8);
+      margin-top: var(--canon-space-12);
     }
 
     .cu-lg-mt-2xs {
@@ -510,11 +510,11 @@
     }
 
     .cu-lg-mt-lg {
-      margin-top: var(--canon-space-6);
+      margin-top: var(--canon-space-8);
     }
 
     .cu-lg-mt-md {
-      margin-top: var(--canon-space-5);
+      margin-top: var(--canon-space-6);
     }
 
     .cu-lg-mt-none {
@@ -526,7 +526,7 @@
     }
 
     .cu-lg-mt-xl {
-      margin-top: var(--canon-space-7);
+      margin-top: var(--canon-space-10);
     }
 
     .cu-lg-mt-xs {
@@ -534,8 +534,8 @@
     }
 
     .cu-lg-mx-2xl {
-      margin-left: var(--canon-space-8);
-      margin-right: var(--canon-space-8);
+      margin-left: var(--canon-space-12);
+      margin-right: var(--canon-space-12);
     }
 
     .cu-lg-mx-2xs {
@@ -544,13 +544,13 @@
     }
 
     .cu-lg-mx-lg {
-      margin-left: var(--canon-space-6);
-      margin-right: var(--canon-space-6);
+      margin-left: var(--canon-space-8);
+      margin-right: var(--canon-space-8);
     }
 
     .cu-lg-mx-md {
-      margin-left: var(--canon-space-5);
-      margin-right: var(--canon-space-5);
+      margin-left: var(--canon-space-6);
+      margin-right: var(--canon-space-6);
     }
 
     .cu-lg-mx-none {
@@ -564,8 +564,8 @@
     }
 
     .cu-lg-mx-xl {
-      margin-left: var(--canon-space-7);
-      margin-right: var(--canon-space-7);
+      margin-left: var(--canon-space-10);
+      margin-right: var(--canon-space-10);
     }
 
     .cu-lg-mx-xs {
@@ -574,8 +574,8 @@
     }
 
     .cu-lg-my-2xl {
-      margin-top: var(--canon-space-8);
-      margin-bottom: var(--canon-space-8);
+      margin-top: var(--canon-space-12);
+      margin-bottom: var(--canon-space-12);
     }
 
     .cu-lg-my-2xs {
@@ -584,13 +584,13 @@
     }
 
     .cu-lg-my-lg {
-      margin-top: var(--canon-space-6);
-      margin-bottom: var(--canon-space-6);
+      margin-top: var(--canon-space-8);
+      margin-bottom: var(--canon-space-8);
     }
 
     .cu-lg-my-md {
-      margin-top: var(--canon-space-5);
-      margin-bottom: var(--canon-space-5);
+      margin-top: var(--canon-space-6);
+      margin-bottom: var(--canon-space-6);
     }
 
     .cu-lg-my-none {
@@ -604,8 +604,8 @@
     }
 
     .cu-lg-my-xl {
-      margin-top: var(--canon-space-7);
-      margin-bottom: var(--canon-space-7);
+      margin-top: var(--canon-space-10);
+      margin-bottom: var(--canon-space-10);
     }
 
     .cu-lg-my-xs {
@@ -614,7 +614,7 @@
     }
 
     .cu-lg-p-2xl {
-      padding: var(--canon-space-8);
+      padding: var(--canon-space-12);
     }
 
     .cu-lg-p-2xs {
@@ -622,11 +622,11 @@
     }
 
     .cu-lg-p-lg {
-      padding: var(--canon-space-6);
+      padding: var(--canon-space-8);
     }
 
     .cu-lg-p-md {
-      padding: var(--canon-space-5);
+      padding: var(--canon-space-6);
     }
 
     .cu-lg-p-none {
@@ -638,7 +638,7 @@
     }
 
     .cu-lg-p-xl {
-      padding: var(--canon-space-7);
+      padding: var(--canon-space-10);
     }
 
     .cu-lg-p-xs {
@@ -646,7 +646,7 @@
     }
 
     .cu-lg-pb-2xl {
-      padding-bottom: var(--canon-space-8);
+      padding-bottom: var(--canon-space-12);
     }
 
     .cu-lg-pb-2xs {
@@ -654,11 +654,11 @@
     }
 
     .cu-lg-pb-lg {
-      padding-bottom: var(--canon-space-6);
+      padding-bottom: var(--canon-space-8);
     }
 
     .cu-lg-pb-md {
-      padding-bottom: var(--canon-space-5);
+      padding-bottom: var(--canon-space-6);
     }
 
     .cu-lg-pb-none {
@@ -670,7 +670,7 @@
     }
 
     .cu-lg-pb-xl {
-      padding-bottom: var(--canon-space-7);
+      padding-bottom: var(--canon-space-10);
     }
 
     .cu-lg-pb-xs {
@@ -678,7 +678,7 @@
     }
 
     .cu-lg-pl-2xl {
-      padding-left: var(--canon-space-8);
+      padding-left: var(--canon-space-12);
     }
 
     .cu-lg-pl-2xs {
@@ -686,11 +686,11 @@
     }
 
     .cu-lg-pl-lg {
-      padding-left: var(--canon-space-6);
+      padding-left: var(--canon-space-8);
     }
 
     .cu-lg-pl-md {
-      padding-left: var(--canon-space-5);
+      padding-left: var(--canon-space-6);
     }
 
     .cu-lg-pl-none {
@@ -702,7 +702,7 @@
     }
 
     .cu-lg-pl-xl {
-      padding-left: var(--canon-space-7);
+      padding-left: var(--canon-space-10);
     }
 
     .cu-lg-pl-xs {
@@ -710,7 +710,7 @@
     }
 
     .cu-lg-pr-2xl {
-      padding-right: var(--canon-space-8);
+      padding-right: var(--canon-space-12);
     }
 
     .cu-lg-pr-2xs {
@@ -718,11 +718,11 @@
     }
 
     .cu-lg-pr-lg {
-      padding-right: var(--canon-space-6);
+      padding-right: var(--canon-space-8);
     }
 
     .cu-lg-pr-md {
-      padding-right: var(--canon-space-5);
+      padding-right: var(--canon-space-6);
     }
 
     .cu-lg-pr-none {
@@ -734,7 +734,7 @@
     }
 
     .cu-lg-pr-xl {
-      padding-right: var(--canon-space-7);
+      padding-right: var(--canon-space-10);
     }
 
     .cu-lg-pr-xs {
@@ -742,7 +742,7 @@
     }
 
     .cu-lg-pt-2xl {
-      padding-top: var(--canon-space-8);
+      padding-top: var(--canon-space-12);
     }
 
     .cu-lg-pt-2xs {
@@ -750,11 +750,11 @@
     }
 
     .cu-lg-pt-lg {
-      padding-top: var(--canon-space-6);
+      padding-top: var(--canon-space-8);
     }
 
     .cu-lg-pt-md {
-      padding-top: var(--canon-space-5);
+      padding-top: var(--canon-space-6);
     }
 
     .cu-lg-pt-none {
@@ -766,7 +766,7 @@
     }
 
     .cu-lg-pt-xl {
-      padding-top: var(--canon-space-7);
+      padding-top: var(--canon-space-10);
     }
 
     .cu-lg-pt-xs {
@@ -774,8 +774,8 @@
     }
 
     .cu-lg-px-2xl {
-      padding-left: var(--canon-space-8);
-      padding-right: var(--canon-space-8);
+      padding-left: var(--canon-space-12);
+      padding-right: var(--canon-space-12);
     }
 
     .cu-lg-px-2xs {
@@ -784,13 +784,13 @@
     }
 
     .cu-lg-px-lg {
-      padding-left: var(--canon-space-6);
-      padding-right: var(--canon-space-6);
+      padding-left: var(--canon-space-8);
+      padding-right: var(--canon-space-8);
     }
 
     .cu-lg-px-md {
-      padding-left: var(--canon-space-5);
-      padding-right: var(--canon-space-5);
+      padding-left: var(--canon-space-6);
+      padding-right: var(--canon-space-6);
     }
 
     .cu-lg-px-none {
@@ -804,8 +804,8 @@
     }
 
     .cu-lg-px-xl {
-      padding-left: var(--canon-space-7);
-      padding-right: var(--canon-space-7);
+      padding-left: var(--canon-space-10);
+      padding-right: var(--canon-space-10);
     }
 
     .cu-lg-px-xs {
@@ -814,8 +814,8 @@
     }
 
     .cu-lg-py-2xl {
-      padding-top: var(--canon-space-8);
-      padding-bottom: var(--canon-space-8);
+      padding-top: var(--canon-space-12);
+      padding-bottom: var(--canon-space-12);
     }
 
     .cu-lg-py-2xs {
@@ -824,13 +824,13 @@
     }
 
     .cu-lg-py-lg {
-      padding-top: var(--canon-space-6);
-      padding-bottom: var(--canon-space-6);
+      padding-top: var(--canon-space-8);
+      padding-bottom: var(--canon-space-8);
     }
 
     .cu-lg-py-md {
-      padding-top: var(--canon-space-5);
-      padding-bottom: var(--canon-space-5);
+      padding-top: var(--canon-space-6);
+      padding-bottom: var(--canon-space-6);
     }
 
     .cu-lg-py-none {
@@ -844,8 +844,8 @@
     }
 
     .cu-lg-py-xl {
-      padding-top: var(--canon-space-7);
-      padding-bottom: var(--canon-space-7);
+      padding-top: var(--canon-space-10);
+      padding-bottom: var(--canon-space-10);
     }
 
     .cu-lg-py-xs {
diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css
index c8b7af3dff..19842e2eab 100644
--- a/packages/canon/src/css/utilities/md.css
+++ b/packages/canon/src/css/utilities/md.css
@@ -238,15 +238,15 @@
     }
 
     .cu-md-gap-2xl {
-      gap: var(--canon-space-8);
+      gap: var(--canon-space-12);
     }
 
     .cu-md-gap-lg {
-      gap: var(--canon-space-6);
+      gap: var(--canon-space-8);
     }
 
     .cu-md-gap-md {
-      gap: var(--canon-space-5);
+      gap: var(--canon-space-6);
     }
 
     .cu-md-gap-none {
@@ -258,7 +258,7 @@
     }
 
     .cu-md-gap-xl {
-      gap: var(--canon-space-7);
+      gap: var(--canon-space-10);
     }
 
     .cu-md-gap-xs {
@@ -374,7 +374,7 @@
     }
 
     .cu-md-m-2xl {
-      margin: var(--canon-space-8);
+      margin: var(--canon-space-12);
     }
 
     .cu-md-m-2xs {
@@ -382,11 +382,11 @@
     }
 
     .cu-md-m-lg {
-      margin: var(--canon-space-6);
+      margin: var(--canon-space-8);
     }
 
     .cu-md-m-md {
-      margin: var(--canon-space-5);
+      margin: var(--canon-space-6);
     }
 
     .cu-md-m-none {
@@ -398,7 +398,7 @@
     }
 
     .cu-md-m-xl {
-      margin: var(--canon-space-7);
+      margin: var(--canon-space-10);
     }
 
     .cu-md-m-xs {
@@ -406,7 +406,7 @@
     }
 
     .cu-md-mb-2xl {
-      margin-bottom: var(--canon-space-8);
+      margin-bottom: var(--canon-space-12);
     }
 
     .cu-md-mb-2xs {
@@ -414,11 +414,11 @@
     }
 
     .cu-md-mb-lg {
-      margin-bottom: var(--canon-space-6);
+      margin-bottom: var(--canon-space-8);
     }
 
     .cu-md-mb-md {
-      margin-bottom: var(--canon-space-5);
+      margin-bottom: var(--canon-space-6);
     }
 
     .cu-md-mb-none {
@@ -430,7 +430,7 @@
     }
 
     .cu-md-mb-xl {
-      margin-bottom: var(--canon-space-7);
+      margin-bottom: var(--canon-space-10);
     }
 
     .cu-md-mb-xs {
@@ -438,7 +438,7 @@
     }
 
     .cu-md-ml-2xl {
-      margin-left: var(--canon-space-8);
+      margin-left: var(--canon-space-12);
     }
 
     .cu-md-ml-2xs {
@@ -446,11 +446,11 @@
     }
 
     .cu-md-ml-lg {
-      margin-left: var(--canon-space-6);
+      margin-left: var(--canon-space-8);
     }
 
     .cu-md-ml-md {
-      margin-left: var(--canon-space-5);
+      margin-left: var(--canon-space-6);
     }
 
     .cu-md-ml-none {
@@ -462,7 +462,7 @@
     }
 
     .cu-md-ml-xl {
-      margin-left: var(--canon-space-7);
+      margin-left: var(--canon-space-10);
     }
 
     .cu-md-ml-xs {
@@ -470,7 +470,7 @@
     }
 
     .cu-md-mr-2xl {
-      margin-right: var(--canon-space-8);
+      margin-right: var(--canon-space-12);
     }
 
     .cu-md-mr-2xs {
@@ -478,11 +478,11 @@
     }
 
     .cu-md-mr-lg {
-      margin-right: var(--canon-space-6);
+      margin-right: var(--canon-space-8);
     }
 
     .cu-md-mr-md {
-      margin-right: var(--canon-space-5);
+      margin-right: var(--canon-space-6);
     }
 
     .cu-md-mr-none {
@@ -494,7 +494,7 @@
     }
 
     .cu-md-mr-xl {
-      margin-right: var(--canon-space-7);
+      margin-right: var(--canon-space-10);
     }
 
     .cu-md-mr-xs {
@@ -502,7 +502,7 @@
     }
 
     .cu-md-mt-2xl {
-      margin-top: var(--canon-space-8);
+      margin-top: var(--canon-space-12);
     }
 
     .cu-md-mt-2xs {
@@ -510,11 +510,11 @@
     }
 
     .cu-md-mt-lg {
-      margin-top: var(--canon-space-6);
+      margin-top: var(--canon-space-8);
     }
 
     .cu-md-mt-md {
-      margin-top: var(--canon-space-5);
+      margin-top: var(--canon-space-6);
     }
 
     .cu-md-mt-none {
@@ -526,7 +526,7 @@
     }
 
     .cu-md-mt-xl {
-      margin-top: var(--canon-space-7);
+      margin-top: var(--canon-space-10);
     }
 
     .cu-md-mt-xs {
@@ -534,8 +534,8 @@
     }
 
     .cu-md-mx-2xl {
-      margin-left: var(--canon-space-8);
-      margin-right: var(--canon-space-8);
+      margin-left: var(--canon-space-12);
+      margin-right: var(--canon-space-12);
     }
 
     .cu-md-mx-2xs {
@@ -544,13 +544,13 @@
     }
 
     .cu-md-mx-lg {
-      margin-left: var(--canon-space-6);
-      margin-right: var(--canon-space-6);
+      margin-left: var(--canon-space-8);
+      margin-right: var(--canon-space-8);
     }
 
     .cu-md-mx-md {
-      margin-left: var(--canon-space-5);
-      margin-right: var(--canon-space-5);
+      margin-left: var(--canon-space-6);
+      margin-right: var(--canon-space-6);
     }
 
     .cu-md-mx-none {
@@ -564,8 +564,8 @@
     }
 
     .cu-md-mx-xl {
-      margin-left: var(--canon-space-7);
-      margin-right: var(--canon-space-7);
+      margin-left: var(--canon-space-10);
+      margin-right: var(--canon-space-10);
     }
 
     .cu-md-mx-xs {
@@ -574,8 +574,8 @@
     }
 
     .cu-md-my-2xl {
-      margin-top: var(--canon-space-8);
-      margin-bottom: var(--canon-space-8);
+      margin-top: var(--canon-space-12);
+      margin-bottom: var(--canon-space-12);
     }
 
     .cu-md-my-2xs {
@@ -584,13 +584,13 @@
     }
 
     .cu-md-my-lg {
-      margin-top: var(--canon-space-6);
-      margin-bottom: var(--canon-space-6);
+      margin-top: var(--canon-space-8);
+      margin-bottom: var(--canon-space-8);
     }
 
     .cu-md-my-md {
-      margin-top: var(--canon-space-5);
-      margin-bottom: var(--canon-space-5);
+      margin-top: var(--canon-space-6);
+      margin-bottom: var(--canon-space-6);
     }
 
     .cu-md-my-none {
@@ -604,8 +604,8 @@
     }
 
     .cu-md-my-xl {
-      margin-top: var(--canon-space-7);
-      margin-bottom: var(--canon-space-7);
+      margin-top: var(--canon-space-10);
+      margin-bottom: var(--canon-space-10);
     }
 
     .cu-md-my-xs {
@@ -614,7 +614,7 @@
     }
 
     .cu-md-p-2xl {
-      padding: var(--canon-space-8);
+      padding: var(--canon-space-12);
     }
 
     .cu-md-p-2xs {
@@ -622,11 +622,11 @@
     }
 
     .cu-md-p-lg {
-      padding: var(--canon-space-6);
+      padding: var(--canon-space-8);
     }
 
     .cu-md-p-md {
-      padding: var(--canon-space-5);
+      padding: var(--canon-space-6);
     }
 
     .cu-md-p-none {
@@ -638,7 +638,7 @@
     }
 
     .cu-md-p-xl {
-      padding: var(--canon-space-7);
+      padding: var(--canon-space-10);
     }
 
     .cu-md-p-xs {
@@ -646,7 +646,7 @@
     }
 
     .cu-md-pb-2xl {
-      padding-bottom: var(--canon-space-8);
+      padding-bottom: var(--canon-space-12);
     }
 
     .cu-md-pb-2xs {
@@ -654,11 +654,11 @@
     }
 
     .cu-md-pb-lg {
-      padding-bottom: var(--canon-space-6);
+      padding-bottom: var(--canon-space-8);
     }
 
     .cu-md-pb-md {
-      padding-bottom: var(--canon-space-5);
+      padding-bottom: var(--canon-space-6);
     }
 
     .cu-md-pb-none {
@@ -670,7 +670,7 @@
     }
 
     .cu-md-pb-xl {
-      padding-bottom: var(--canon-space-7);
+      padding-bottom: var(--canon-space-10);
     }
 
     .cu-md-pb-xs {
@@ -678,7 +678,7 @@
     }
 
     .cu-md-pl-2xl {
-      padding-left: var(--canon-space-8);
+      padding-left: var(--canon-space-12);
     }
 
     .cu-md-pl-2xs {
@@ -686,11 +686,11 @@
     }
 
     .cu-md-pl-lg {
-      padding-left: var(--canon-space-6);
+      padding-left: var(--canon-space-8);
     }
 
     .cu-md-pl-md {
-      padding-left: var(--canon-space-5);
+      padding-left: var(--canon-space-6);
     }
 
     .cu-md-pl-none {
@@ -702,7 +702,7 @@
     }
 
     .cu-md-pl-xl {
-      padding-left: var(--canon-space-7);
+      padding-left: var(--canon-space-10);
     }
 
     .cu-md-pl-xs {
@@ -710,7 +710,7 @@
     }
 
     .cu-md-pr-2xl {
-      padding-right: var(--canon-space-8);
+      padding-right: var(--canon-space-12);
     }
 
     .cu-md-pr-2xs {
@@ -718,11 +718,11 @@
     }
 
     .cu-md-pr-lg {
-      padding-right: var(--canon-space-6);
+      padding-right: var(--canon-space-8);
     }
 
     .cu-md-pr-md {
-      padding-right: var(--canon-space-5);
+      padding-right: var(--canon-space-6);
     }
 
     .cu-md-pr-none {
@@ -734,7 +734,7 @@
     }
 
     .cu-md-pr-xl {
-      padding-right: var(--canon-space-7);
+      padding-right: var(--canon-space-10);
     }
 
     .cu-md-pr-xs {
@@ -742,7 +742,7 @@
     }
 
     .cu-md-pt-2xl {
-      padding-top: var(--canon-space-8);
+      padding-top: var(--canon-space-12);
     }
 
     .cu-md-pt-2xs {
@@ -750,11 +750,11 @@
     }
 
     .cu-md-pt-lg {
-      padding-top: var(--canon-space-6);
+      padding-top: var(--canon-space-8);
     }
 
     .cu-md-pt-md {
-      padding-top: var(--canon-space-5);
+      padding-top: var(--canon-space-6);
     }
 
     .cu-md-pt-none {
@@ -766,7 +766,7 @@
     }
 
     .cu-md-pt-xl {
-      padding-top: var(--canon-space-7);
+      padding-top: var(--canon-space-10);
     }
 
     .cu-md-pt-xs {
@@ -774,8 +774,8 @@
     }
 
     .cu-md-px-2xl {
-      padding-left: var(--canon-space-8);
-      padding-right: var(--canon-space-8);
+      padding-left: var(--canon-space-12);
+      padding-right: var(--canon-space-12);
     }
 
     .cu-md-px-2xs {
@@ -784,13 +784,13 @@
     }
 
     .cu-md-px-lg {
-      padding-left: var(--canon-space-6);
-      padding-right: var(--canon-space-6);
+      padding-left: var(--canon-space-8);
+      padding-right: var(--canon-space-8);
     }
 
     .cu-md-px-md {
-      padding-left: var(--canon-space-5);
-      padding-right: var(--canon-space-5);
+      padding-left: var(--canon-space-6);
+      padding-right: var(--canon-space-6);
     }
 
     .cu-md-px-none {
@@ -804,8 +804,8 @@
     }
 
     .cu-md-px-xl {
-      padding-left: var(--canon-space-7);
-      padding-right: var(--canon-space-7);
+      padding-left: var(--canon-space-10);
+      padding-right: var(--canon-space-10);
     }
 
     .cu-md-px-xs {
@@ -814,8 +814,8 @@
     }
 
     .cu-md-py-2xl {
-      padding-top: var(--canon-space-8);
-      padding-bottom: var(--canon-space-8);
+      padding-top: var(--canon-space-12);
+      padding-bottom: var(--canon-space-12);
     }
 
     .cu-md-py-2xs {
@@ -824,13 +824,13 @@
     }
 
     .cu-md-py-lg {
-      padding-top: var(--canon-space-6);
-      padding-bottom: var(--canon-space-6);
+      padding-top: var(--canon-space-8);
+      padding-bottom: var(--canon-space-8);
     }
 
     .cu-md-py-md {
-      padding-top: var(--canon-space-5);
-      padding-bottom: var(--canon-space-5);
+      padding-top: var(--canon-space-6);
+      padding-bottom: var(--canon-space-6);
     }
 
     .cu-md-py-none {
@@ -844,8 +844,8 @@
     }
 
     .cu-md-py-xl {
-      padding-top: var(--canon-space-7);
-      padding-bottom: var(--canon-space-7);
+      padding-top: var(--canon-space-10);
+      padding-bottom: var(--canon-space-10);
     }
 
     .cu-md-py-xs {
diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css
index 67f3174be8..7a4e9a0cc7 100644
--- a/packages/canon/src/css/utilities/sm.css
+++ b/packages/canon/src/css/utilities/sm.css
@@ -238,15 +238,15 @@
     }
 
     .cu-sm-gap-2xl {
-      gap: var(--canon-space-8);
+      gap: var(--canon-space-12);
     }
 
     .cu-sm-gap-lg {
-      gap: var(--canon-space-6);
+      gap: var(--canon-space-8);
     }
 
     .cu-sm-gap-md {
-      gap: var(--canon-space-5);
+      gap: var(--canon-space-6);
     }
 
     .cu-sm-gap-none {
@@ -258,7 +258,7 @@
     }
 
     .cu-sm-gap-xl {
-      gap: var(--canon-space-7);
+      gap: var(--canon-space-10);
     }
 
     .cu-sm-gap-xs {
@@ -374,7 +374,7 @@
     }
 
     .cu-sm-m-2xl {
-      margin: var(--canon-space-8);
+      margin: var(--canon-space-12);
     }
 
     .cu-sm-m-2xs {
@@ -382,11 +382,11 @@
     }
 
     .cu-sm-m-lg {
-      margin: var(--canon-space-6);
+      margin: var(--canon-space-8);
     }
 
     .cu-sm-m-md {
-      margin: var(--canon-space-5);
+      margin: var(--canon-space-6);
     }
 
     .cu-sm-m-none {
@@ -398,7 +398,7 @@
     }
 
     .cu-sm-m-xl {
-      margin: var(--canon-space-7);
+      margin: var(--canon-space-10);
     }
 
     .cu-sm-m-xs {
@@ -406,7 +406,7 @@
     }
 
     .cu-sm-mb-2xl {
-      margin-bottom: var(--canon-space-8);
+      margin-bottom: var(--canon-space-12);
     }
 
     .cu-sm-mb-2xs {
@@ -414,11 +414,11 @@
     }
 
     .cu-sm-mb-lg {
-      margin-bottom: var(--canon-space-6);
+      margin-bottom: var(--canon-space-8);
     }
 
     .cu-sm-mb-md {
-      margin-bottom: var(--canon-space-5);
+      margin-bottom: var(--canon-space-6);
     }
 
     .cu-sm-mb-none {
@@ -430,7 +430,7 @@
     }
 
     .cu-sm-mb-xl {
-      margin-bottom: var(--canon-space-7);
+      margin-bottom: var(--canon-space-10);
     }
 
     .cu-sm-mb-xs {
@@ -438,7 +438,7 @@
     }
 
     .cu-sm-ml-2xl {
-      margin-left: var(--canon-space-8);
+      margin-left: var(--canon-space-12);
     }
 
     .cu-sm-ml-2xs {
@@ -446,11 +446,11 @@
     }
 
     .cu-sm-ml-lg {
-      margin-left: var(--canon-space-6);
+      margin-left: var(--canon-space-8);
     }
 
     .cu-sm-ml-md {
-      margin-left: var(--canon-space-5);
+      margin-left: var(--canon-space-6);
     }
 
     .cu-sm-ml-none {
@@ -462,7 +462,7 @@
     }
 
     .cu-sm-ml-xl {
-      margin-left: var(--canon-space-7);
+      margin-left: var(--canon-space-10);
     }
 
     .cu-sm-ml-xs {
@@ -470,7 +470,7 @@
     }
 
     .cu-sm-mr-2xl {
-      margin-right: var(--canon-space-8);
+      margin-right: var(--canon-space-12);
     }
 
     .cu-sm-mr-2xs {
@@ -478,11 +478,11 @@
     }
 
     .cu-sm-mr-lg {
-      margin-right: var(--canon-space-6);
+      margin-right: var(--canon-space-8);
     }
 
     .cu-sm-mr-md {
-      margin-right: var(--canon-space-5);
+      margin-right: var(--canon-space-6);
     }
 
     .cu-sm-mr-none {
@@ -494,7 +494,7 @@
     }
 
     .cu-sm-mr-xl {
-      margin-right: var(--canon-space-7);
+      margin-right: var(--canon-space-10);
     }
 
     .cu-sm-mr-xs {
@@ -502,7 +502,7 @@
     }
 
     .cu-sm-mt-2xl {
-      margin-top: var(--canon-space-8);
+      margin-top: var(--canon-space-12);
     }
 
     .cu-sm-mt-2xs {
@@ -510,11 +510,11 @@
     }
 
     .cu-sm-mt-lg {
-      margin-top: var(--canon-space-6);
+      margin-top: var(--canon-space-8);
     }
 
     .cu-sm-mt-md {
-      margin-top: var(--canon-space-5);
+      margin-top: var(--canon-space-6);
     }
 
     .cu-sm-mt-none {
@@ -526,7 +526,7 @@
     }
 
     .cu-sm-mt-xl {
-      margin-top: var(--canon-space-7);
+      margin-top: var(--canon-space-10);
     }
 
     .cu-sm-mt-xs {
@@ -534,8 +534,8 @@
     }
 
     .cu-sm-mx-2xl {
-      margin-left: var(--canon-space-8);
-      margin-right: var(--canon-space-8);
+      margin-left: var(--canon-space-12);
+      margin-right: var(--canon-space-12);
     }
 
     .cu-sm-mx-2xs {
@@ -544,13 +544,13 @@
     }
 
     .cu-sm-mx-lg {
-      margin-left: var(--canon-space-6);
-      margin-right: var(--canon-space-6);
+      margin-left: var(--canon-space-8);
+      margin-right: var(--canon-space-8);
     }
 
     .cu-sm-mx-md {
-      margin-left: var(--canon-space-5);
-      margin-right: var(--canon-space-5);
+      margin-left: var(--canon-space-6);
+      margin-right: var(--canon-space-6);
     }
 
     .cu-sm-mx-none {
@@ -564,8 +564,8 @@
     }
 
     .cu-sm-mx-xl {
-      margin-left: var(--canon-space-7);
-      margin-right: var(--canon-space-7);
+      margin-left: var(--canon-space-10);
+      margin-right: var(--canon-space-10);
     }
 
     .cu-sm-mx-xs {
@@ -574,8 +574,8 @@
     }
 
     .cu-sm-my-2xl {
-      margin-top: var(--canon-space-8);
-      margin-bottom: var(--canon-space-8);
+      margin-top: var(--canon-space-12);
+      margin-bottom: var(--canon-space-12);
     }
 
     .cu-sm-my-2xs {
@@ -584,13 +584,13 @@
     }
 
     .cu-sm-my-lg {
-      margin-top: var(--canon-space-6);
-      margin-bottom: var(--canon-space-6);
+      margin-top: var(--canon-space-8);
+      margin-bottom: var(--canon-space-8);
     }
 
     .cu-sm-my-md {
-      margin-top: var(--canon-space-5);
-      margin-bottom: var(--canon-space-5);
+      margin-top: var(--canon-space-6);
+      margin-bottom: var(--canon-space-6);
     }
 
     .cu-sm-my-none {
@@ -604,8 +604,8 @@
     }
 
     .cu-sm-my-xl {
-      margin-top: var(--canon-space-7);
-      margin-bottom: var(--canon-space-7);
+      margin-top: var(--canon-space-10);
+      margin-bottom: var(--canon-space-10);
     }
 
     .cu-sm-my-xs {
@@ -614,7 +614,7 @@
     }
 
     .cu-sm-p-2xl {
-      padding: var(--canon-space-8);
+      padding: var(--canon-space-12);
     }
 
     .cu-sm-p-2xs {
@@ -622,11 +622,11 @@
     }
 
     .cu-sm-p-lg {
-      padding: var(--canon-space-6);
+      padding: var(--canon-space-8);
     }
 
     .cu-sm-p-md {
-      padding: var(--canon-space-5);
+      padding: var(--canon-space-6);
     }
 
     .cu-sm-p-none {
@@ -638,7 +638,7 @@
     }
 
     .cu-sm-p-xl {
-      padding: var(--canon-space-7);
+      padding: var(--canon-space-10);
     }
 
     .cu-sm-p-xs {
@@ -646,7 +646,7 @@
     }
 
     .cu-sm-pb-2xl {
-      padding-bottom: var(--canon-space-8);
+      padding-bottom: var(--canon-space-12);
     }
 
     .cu-sm-pb-2xs {
@@ -654,11 +654,11 @@
     }
 
     .cu-sm-pb-lg {
-      padding-bottom: var(--canon-space-6);
+      padding-bottom: var(--canon-space-8);
     }
 
     .cu-sm-pb-md {
-      padding-bottom: var(--canon-space-5);
+      padding-bottom: var(--canon-space-6);
     }
 
     .cu-sm-pb-none {
@@ -670,7 +670,7 @@
     }
 
     .cu-sm-pb-xl {
-      padding-bottom: var(--canon-space-7);
+      padding-bottom: var(--canon-space-10);
     }
 
     .cu-sm-pb-xs {
@@ -678,7 +678,7 @@
     }
 
     .cu-sm-pl-2xl {
-      padding-left: var(--canon-space-8);
+      padding-left: var(--canon-space-12);
     }
 
     .cu-sm-pl-2xs {
@@ -686,11 +686,11 @@
     }
 
     .cu-sm-pl-lg {
-      padding-left: var(--canon-space-6);
+      padding-left: var(--canon-space-8);
     }
 
     .cu-sm-pl-md {
-      padding-left: var(--canon-space-5);
+      padding-left: var(--canon-space-6);
     }
 
     .cu-sm-pl-none {
@@ -702,7 +702,7 @@
     }
 
     .cu-sm-pl-xl {
-      padding-left: var(--canon-space-7);
+      padding-left: var(--canon-space-10);
     }
 
     .cu-sm-pl-xs {
@@ -710,7 +710,7 @@
     }
 
     .cu-sm-pr-2xl {
-      padding-right: var(--canon-space-8);
+      padding-right: var(--canon-space-12);
     }
 
     .cu-sm-pr-2xs {
@@ -718,11 +718,11 @@
     }
 
     .cu-sm-pr-lg {
-      padding-right: var(--canon-space-6);
+      padding-right: var(--canon-space-8);
     }
 
     .cu-sm-pr-md {
-      padding-right: var(--canon-space-5);
+      padding-right: var(--canon-space-6);
     }
 
     .cu-sm-pr-none {
@@ -734,7 +734,7 @@
     }
 
     .cu-sm-pr-xl {
-      padding-right: var(--canon-space-7);
+      padding-right: var(--canon-space-10);
     }
 
     .cu-sm-pr-xs {
@@ -742,7 +742,7 @@
     }
 
     .cu-sm-pt-2xl {
-      padding-top: var(--canon-space-8);
+      padding-top: var(--canon-space-12);
     }
 
     .cu-sm-pt-2xs {
@@ -750,11 +750,11 @@
     }
 
     .cu-sm-pt-lg {
-      padding-top: var(--canon-space-6);
+      padding-top: var(--canon-space-8);
     }
 
     .cu-sm-pt-md {
-      padding-top: var(--canon-space-5);
+      padding-top: var(--canon-space-6);
     }
 
     .cu-sm-pt-none {
@@ -766,7 +766,7 @@
     }
 
     .cu-sm-pt-xl {
-      padding-top: var(--canon-space-7);
+      padding-top: var(--canon-space-10);
     }
 
     .cu-sm-pt-xs {
@@ -774,8 +774,8 @@
     }
 
     .cu-sm-px-2xl {
-      padding-left: var(--canon-space-8);
-      padding-right: var(--canon-space-8);
+      padding-left: var(--canon-space-12);
+      padding-right: var(--canon-space-12);
     }
 
     .cu-sm-px-2xs {
@@ -784,13 +784,13 @@
     }
 
     .cu-sm-px-lg {
-      padding-left: var(--canon-space-6);
-      padding-right: var(--canon-space-6);
+      padding-left: var(--canon-space-8);
+      padding-right: var(--canon-space-8);
     }
 
     .cu-sm-px-md {
-      padding-left: var(--canon-space-5);
-      padding-right: var(--canon-space-5);
+      padding-left: var(--canon-space-6);
+      padding-right: var(--canon-space-6);
     }
 
     .cu-sm-px-none {
@@ -804,8 +804,8 @@
     }
 
     .cu-sm-px-xl {
-      padding-left: var(--canon-space-7);
-      padding-right: var(--canon-space-7);
+      padding-left: var(--canon-space-10);
+      padding-right: var(--canon-space-10);
     }
 
     .cu-sm-px-xs {
@@ -814,8 +814,8 @@
     }
 
     .cu-sm-py-2xl {
-      padding-top: var(--canon-space-8);
-      padding-bottom: var(--canon-space-8);
+      padding-top: var(--canon-space-12);
+      padding-bottom: var(--canon-space-12);
     }
 
     .cu-sm-py-2xs {
@@ -824,13 +824,13 @@
     }
 
     .cu-sm-py-lg {
-      padding-top: var(--canon-space-6);
-      padding-bottom: var(--canon-space-6);
+      padding-top: var(--canon-space-8);
+      padding-bottom: var(--canon-space-8);
     }
 
     .cu-sm-py-md {
-      padding-top: var(--canon-space-5);
-      padding-bottom: var(--canon-space-5);
+      padding-top: var(--canon-space-6);
+      padding-bottom: var(--canon-space-6);
     }
 
     .cu-sm-py-none {
@@ -844,8 +844,8 @@
     }
 
     .cu-sm-py-xl {
-      padding-top: var(--canon-space-7);
-      padding-bottom: var(--canon-space-7);
+      padding-top: var(--canon-space-10);
+      padding-bottom: var(--canon-space-10);
     }
 
     .cu-sm-py-xs {
diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css
index d52de47e19..b4d0b3b3d3 100644
--- a/packages/canon/src/css/utilities/xl.css
+++ b/packages/canon/src/css/utilities/xl.css
@@ -238,15 +238,15 @@
     }
 
     .cu-xl-gap-2xl {
-      gap: var(--canon-space-8);
+      gap: var(--canon-space-12);
     }
 
     .cu-xl-gap-lg {
-      gap: var(--canon-space-6);
+      gap: var(--canon-space-8);
     }
 
     .cu-xl-gap-md {
-      gap: var(--canon-space-5);
+      gap: var(--canon-space-6);
     }
 
     .cu-xl-gap-none {
@@ -258,7 +258,7 @@
     }
 
     .cu-xl-gap-xl {
-      gap: var(--canon-space-7);
+      gap: var(--canon-space-10);
     }
 
     .cu-xl-gap-xs {
@@ -374,7 +374,7 @@
     }
 
     .cu-xl-m-2xl {
-      margin: var(--canon-space-8);
+      margin: var(--canon-space-12);
     }
 
     .cu-xl-m-2xs {
@@ -382,11 +382,11 @@
     }
 
     .cu-xl-m-lg {
-      margin: var(--canon-space-6);
+      margin: var(--canon-space-8);
     }
 
     .cu-xl-m-md {
-      margin: var(--canon-space-5);
+      margin: var(--canon-space-6);
     }
 
     .cu-xl-m-none {
@@ -398,7 +398,7 @@
     }
 
     .cu-xl-m-xl {
-      margin: var(--canon-space-7);
+      margin: var(--canon-space-10);
     }
 
     .cu-xl-m-xs {
@@ -406,7 +406,7 @@
     }
 
     .cu-xl-mb-2xl {
-      margin-bottom: var(--canon-space-8);
+      margin-bottom: var(--canon-space-12);
     }
 
     .cu-xl-mb-2xs {
@@ -414,11 +414,11 @@
     }
 
     .cu-xl-mb-lg {
-      margin-bottom: var(--canon-space-6);
+      margin-bottom: var(--canon-space-8);
     }
 
     .cu-xl-mb-md {
-      margin-bottom: var(--canon-space-5);
+      margin-bottom: var(--canon-space-6);
     }
 
     .cu-xl-mb-none {
@@ -430,7 +430,7 @@
     }
 
     .cu-xl-mb-xl {
-      margin-bottom: var(--canon-space-7);
+      margin-bottom: var(--canon-space-10);
     }
 
     .cu-xl-mb-xs {
@@ -438,7 +438,7 @@
     }
 
     .cu-xl-ml-2xl {
-      margin-left: var(--canon-space-8);
+      margin-left: var(--canon-space-12);
     }
 
     .cu-xl-ml-2xs {
@@ -446,11 +446,11 @@
     }
 
     .cu-xl-ml-lg {
-      margin-left: var(--canon-space-6);
+      margin-left: var(--canon-space-8);
     }
 
     .cu-xl-ml-md {
-      margin-left: var(--canon-space-5);
+      margin-left: var(--canon-space-6);
     }
 
     .cu-xl-ml-none {
@@ -462,7 +462,7 @@
     }
 
     .cu-xl-ml-xl {
-      margin-left: var(--canon-space-7);
+      margin-left: var(--canon-space-10);
     }
 
     .cu-xl-ml-xs {
@@ -470,7 +470,7 @@
     }
 
     .cu-xl-mr-2xl {
-      margin-right: var(--canon-space-8);
+      margin-right: var(--canon-space-12);
     }
 
     .cu-xl-mr-2xs {
@@ -478,11 +478,11 @@
     }
 
     .cu-xl-mr-lg {
-      margin-right: var(--canon-space-6);
+      margin-right: var(--canon-space-8);
     }
 
     .cu-xl-mr-md {
-      margin-right: var(--canon-space-5);
+      margin-right: var(--canon-space-6);
     }
 
     .cu-xl-mr-none {
@@ -494,7 +494,7 @@
     }
 
     .cu-xl-mr-xl {
-      margin-right: var(--canon-space-7);
+      margin-right: var(--canon-space-10);
     }
 
     .cu-xl-mr-xs {
@@ -502,7 +502,7 @@
     }
 
     .cu-xl-mt-2xl {
-      margin-top: var(--canon-space-8);
+      margin-top: var(--canon-space-12);
     }
 
     .cu-xl-mt-2xs {
@@ -510,11 +510,11 @@
     }
 
     .cu-xl-mt-lg {
-      margin-top: var(--canon-space-6);
+      margin-top: var(--canon-space-8);
     }
 
     .cu-xl-mt-md {
-      margin-top: var(--canon-space-5);
+      margin-top: var(--canon-space-6);
     }
 
     .cu-xl-mt-none {
@@ -526,7 +526,7 @@
     }
 
     .cu-xl-mt-xl {
-      margin-top: var(--canon-space-7);
+      margin-top: var(--canon-space-10);
     }
 
     .cu-xl-mt-xs {
@@ -534,8 +534,8 @@
     }
 
     .cu-xl-mx-2xl {
-      margin-left: var(--canon-space-8);
-      margin-right: var(--canon-space-8);
+      margin-left: var(--canon-space-12);
+      margin-right: var(--canon-space-12);
     }
 
     .cu-xl-mx-2xs {
@@ -544,13 +544,13 @@
     }
 
     .cu-xl-mx-lg {
-      margin-left: var(--canon-space-6);
-      margin-right: var(--canon-space-6);
+      margin-left: var(--canon-space-8);
+      margin-right: var(--canon-space-8);
     }
 
     .cu-xl-mx-md {
-      margin-left: var(--canon-space-5);
-      margin-right: var(--canon-space-5);
+      margin-left: var(--canon-space-6);
+      margin-right: var(--canon-space-6);
     }
 
     .cu-xl-mx-none {
@@ -564,8 +564,8 @@
     }
 
     .cu-xl-mx-xl {
-      margin-left: var(--canon-space-7);
-      margin-right: var(--canon-space-7);
+      margin-left: var(--canon-space-10);
+      margin-right: var(--canon-space-10);
     }
 
     .cu-xl-mx-xs {
@@ -574,8 +574,8 @@
     }
 
     .cu-xl-my-2xl {
-      margin-top: var(--canon-space-8);
-      margin-bottom: var(--canon-space-8);
+      margin-top: var(--canon-space-12);
+      margin-bottom: var(--canon-space-12);
     }
 
     .cu-xl-my-2xs {
@@ -584,13 +584,13 @@
     }
 
     .cu-xl-my-lg {
-      margin-top: var(--canon-space-6);
-      margin-bottom: var(--canon-space-6);
+      margin-top: var(--canon-space-8);
+      margin-bottom: var(--canon-space-8);
     }
 
     .cu-xl-my-md {
-      margin-top: var(--canon-space-5);
-      margin-bottom: var(--canon-space-5);
+      margin-top: var(--canon-space-6);
+      margin-bottom: var(--canon-space-6);
     }
 
     .cu-xl-my-none {
@@ -604,8 +604,8 @@
     }
 
     .cu-xl-my-xl {
-      margin-top: var(--canon-space-7);
-      margin-bottom: var(--canon-space-7);
+      margin-top: var(--canon-space-10);
+      margin-bottom: var(--canon-space-10);
     }
 
     .cu-xl-my-xs {
@@ -614,7 +614,7 @@
     }
 
     .cu-xl-p-2xl {
-      padding: var(--canon-space-8);
+      padding: var(--canon-space-12);
     }
 
     .cu-xl-p-2xs {
@@ -622,11 +622,11 @@
     }
 
     .cu-xl-p-lg {
-      padding: var(--canon-space-6);
+      padding: var(--canon-space-8);
     }
 
     .cu-xl-p-md {
-      padding: var(--canon-space-5);
+      padding: var(--canon-space-6);
     }
 
     .cu-xl-p-none {
@@ -638,7 +638,7 @@
     }
 
     .cu-xl-p-xl {
-      padding: var(--canon-space-7);
+      padding: var(--canon-space-10);
     }
 
     .cu-xl-p-xs {
@@ -646,7 +646,7 @@
     }
 
     .cu-xl-pb-2xl {
-      padding-bottom: var(--canon-space-8);
+      padding-bottom: var(--canon-space-12);
     }
 
     .cu-xl-pb-2xs {
@@ -654,11 +654,11 @@
     }
 
     .cu-xl-pb-lg {
-      padding-bottom: var(--canon-space-6);
+      padding-bottom: var(--canon-space-8);
     }
 
     .cu-xl-pb-md {
-      padding-bottom: var(--canon-space-5);
+      padding-bottom: var(--canon-space-6);
     }
 
     .cu-xl-pb-none {
@@ -670,7 +670,7 @@
     }
 
     .cu-xl-pb-xl {
-      padding-bottom: var(--canon-space-7);
+      padding-bottom: var(--canon-space-10);
     }
 
     .cu-xl-pb-xs {
@@ -678,7 +678,7 @@
     }
 
     .cu-xl-pl-2xl {
-      padding-left: var(--canon-space-8);
+      padding-left: var(--canon-space-12);
     }
 
     .cu-xl-pl-2xs {
@@ -686,11 +686,11 @@
     }
 
     .cu-xl-pl-lg {
-      padding-left: var(--canon-space-6);
+      padding-left: var(--canon-space-8);
     }
 
     .cu-xl-pl-md {
-      padding-left: var(--canon-space-5);
+      padding-left: var(--canon-space-6);
     }
 
     .cu-xl-pl-none {
@@ -702,7 +702,7 @@
     }
 
     .cu-xl-pl-xl {
-      padding-left: var(--canon-space-7);
+      padding-left: var(--canon-space-10);
     }
 
     .cu-xl-pl-xs {
@@ -710,7 +710,7 @@
     }
 
     .cu-xl-pr-2xl {
-      padding-right: var(--canon-space-8);
+      padding-right: var(--canon-space-12);
     }
 
     .cu-xl-pr-2xs {
@@ -718,11 +718,11 @@
     }
 
     .cu-xl-pr-lg {
-      padding-right: var(--canon-space-6);
+      padding-right: var(--canon-space-8);
     }
 
     .cu-xl-pr-md {
-      padding-right: var(--canon-space-5);
+      padding-right: var(--canon-space-6);
     }
 
     .cu-xl-pr-none {
@@ -734,7 +734,7 @@
     }
 
     .cu-xl-pr-xl {
-      padding-right: var(--canon-space-7);
+      padding-right: var(--canon-space-10);
     }
 
     .cu-xl-pr-xs {
@@ -742,7 +742,7 @@
     }
 
     .cu-xl-pt-2xl {
-      padding-top: var(--canon-space-8);
+      padding-top: var(--canon-space-12);
     }
 
     .cu-xl-pt-2xs {
@@ -750,11 +750,11 @@
     }
 
     .cu-xl-pt-lg {
-      padding-top: var(--canon-space-6);
+      padding-top: var(--canon-space-8);
     }
 
     .cu-xl-pt-md {
-      padding-top: var(--canon-space-5);
+      padding-top: var(--canon-space-6);
     }
 
     .cu-xl-pt-none {
@@ -766,7 +766,7 @@
     }
 
     .cu-xl-pt-xl {
-      padding-top: var(--canon-space-7);
+      padding-top: var(--canon-space-10);
     }
 
     .cu-xl-pt-xs {
@@ -774,8 +774,8 @@
     }
 
     .cu-xl-px-2xl {
-      padding-left: var(--canon-space-8);
-      padding-right: var(--canon-space-8);
+      padding-left: var(--canon-space-12);
+      padding-right: var(--canon-space-12);
     }
 
     .cu-xl-px-2xs {
@@ -784,13 +784,13 @@
     }
 
     .cu-xl-px-lg {
-      padding-left: var(--canon-space-6);
-      padding-right: var(--canon-space-6);
+      padding-left: var(--canon-space-8);
+      padding-right: var(--canon-space-8);
     }
 
     .cu-xl-px-md {
-      padding-left: var(--canon-space-5);
-      padding-right: var(--canon-space-5);
+      padding-left: var(--canon-space-6);
+      padding-right: var(--canon-space-6);
     }
 
     .cu-xl-px-none {
@@ -804,8 +804,8 @@
     }
 
     .cu-xl-px-xl {
-      padding-left: var(--canon-space-7);
-      padding-right: var(--canon-space-7);
+      padding-left: var(--canon-space-10);
+      padding-right: var(--canon-space-10);
     }
 
     .cu-xl-px-xs {
@@ -814,8 +814,8 @@
     }
 
     .cu-xl-py-2xl {
-      padding-top: var(--canon-space-8);
-      padding-bottom: var(--canon-space-8);
+      padding-top: var(--canon-space-12);
+      padding-bottom: var(--canon-space-12);
     }
 
     .cu-xl-py-2xs {
@@ -824,13 +824,13 @@
     }
 
     .cu-xl-py-lg {
-      padding-top: var(--canon-space-6);
-      padding-bottom: var(--canon-space-6);
+      padding-top: var(--canon-space-8);
+      padding-bottom: var(--canon-space-8);
     }
 
     .cu-xl-py-md {
-      padding-top: var(--canon-space-5);
-      padding-bottom: var(--canon-space-5);
+      padding-top: var(--canon-space-6);
+      padding-bottom: var(--canon-space-6);
     }
 
     .cu-xl-py-none {
@@ -844,8 +844,8 @@
     }
 
     .cu-xl-py-xl {
-      padding-top: var(--canon-space-7);
-      padding-bottom: var(--canon-space-7);
+      padding-top: var(--canon-space-10);
+      padding-bottom: var(--canon-space-10);
     }
 
     .cu-xl-py-xs {
diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css
index 798cb9f5f7..37a56a54c4 100644
--- a/packages/canon/src/css/utilities/xs.css
+++ b/packages/canon/src/css/utilities/xs.css
@@ -237,15 +237,15 @@
   }
 
   .cu-gap-2xl {
-    gap: var(--canon-space-8);
+    gap: var(--canon-space-12);
   }
 
   .cu-gap-lg {
-    gap: var(--canon-space-6);
+    gap: var(--canon-space-8);
   }
 
   .cu-gap-md {
-    gap: var(--canon-space-5);
+    gap: var(--canon-space-6);
   }
 
   .cu-gap-none {
@@ -257,7 +257,7 @@
   }
 
   .cu-gap-xl {
-    gap: var(--canon-space-7);
+    gap: var(--canon-space-10);
   }
 
   .cu-gap-xs {
@@ -373,7 +373,7 @@
   }
 
   .cu-m-2xl {
-    margin: var(--canon-space-8);
+    margin: var(--canon-space-12);
   }
 
   .cu-m-2xs {
@@ -381,11 +381,11 @@
   }
 
   .cu-m-lg {
-    margin: var(--canon-space-6);
+    margin: var(--canon-space-8);
   }
 
   .cu-m-md {
-    margin: var(--canon-space-5);
+    margin: var(--canon-space-6);
   }
 
   .cu-m-none {
@@ -397,7 +397,7 @@
   }
 
   .cu-m-xl {
-    margin: var(--canon-space-7);
+    margin: var(--canon-space-10);
   }
 
   .cu-m-xs {
@@ -405,7 +405,7 @@
   }
 
   .cu-mb-2xl {
-    margin-bottom: var(--canon-space-8);
+    margin-bottom: var(--canon-space-12);
   }
 
   .cu-mb-2xs {
@@ -413,11 +413,11 @@
   }
 
   .cu-mb-lg {
-    margin-bottom: var(--canon-space-6);
+    margin-bottom: var(--canon-space-8);
   }
 
   .cu-mb-md {
-    margin-bottom: var(--canon-space-5);
+    margin-bottom: var(--canon-space-6);
   }
 
   .cu-mb-none {
@@ -429,7 +429,7 @@
   }
 
   .cu-mb-xl {
-    margin-bottom: var(--canon-space-7);
+    margin-bottom: var(--canon-space-10);
   }
 
   .cu-mb-xs {
@@ -437,7 +437,7 @@
   }
 
   .cu-ml-2xl {
-    margin-left: var(--canon-space-8);
+    margin-left: var(--canon-space-12);
   }
 
   .cu-ml-2xs {
@@ -445,11 +445,11 @@
   }
 
   .cu-ml-lg {
-    margin-left: var(--canon-space-6);
+    margin-left: var(--canon-space-8);
   }
 
   .cu-ml-md {
-    margin-left: var(--canon-space-5);
+    margin-left: var(--canon-space-6);
   }
 
   .cu-ml-none {
@@ -461,7 +461,7 @@
   }
 
   .cu-ml-xl {
-    margin-left: var(--canon-space-7);
+    margin-left: var(--canon-space-10);
   }
 
   .cu-ml-xs {
@@ -469,7 +469,7 @@
   }
 
   .cu-mr-2xl {
-    margin-right: var(--canon-space-8);
+    margin-right: var(--canon-space-12);
   }
 
   .cu-mr-2xs {
@@ -477,11 +477,11 @@
   }
 
   .cu-mr-lg {
-    margin-right: var(--canon-space-6);
+    margin-right: var(--canon-space-8);
   }
 
   .cu-mr-md {
-    margin-right: var(--canon-space-5);
+    margin-right: var(--canon-space-6);
   }
 
   .cu-mr-none {
@@ -493,7 +493,7 @@
   }
 
   .cu-mr-xl {
-    margin-right: var(--canon-space-7);
+    margin-right: var(--canon-space-10);
   }
 
   .cu-mr-xs {
@@ -501,7 +501,7 @@
   }
 
   .cu-mt-2xl {
-    margin-top: var(--canon-space-8);
+    margin-top: var(--canon-space-12);
   }
 
   .cu-mt-2xs {
@@ -509,11 +509,11 @@
   }
 
   .cu-mt-lg {
-    margin-top: var(--canon-space-6);
+    margin-top: var(--canon-space-8);
   }
 
   .cu-mt-md {
-    margin-top: var(--canon-space-5);
+    margin-top: var(--canon-space-6);
   }
 
   .cu-mt-none {
@@ -525,7 +525,7 @@
   }
 
   .cu-mt-xl {
-    margin-top: var(--canon-space-7);
+    margin-top: var(--canon-space-10);
   }
 
   .cu-mt-xs {
@@ -533,8 +533,8 @@
   }
 
   .cu-mx-2xl {
-    margin-left: var(--canon-space-8);
-    margin-right: var(--canon-space-8);
+    margin-left: var(--canon-space-12);
+    margin-right: var(--canon-space-12);
   }
 
   .cu-mx-2xs {
@@ -543,13 +543,13 @@
   }
 
   .cu-mx-lg {
-    margin-left: var(--canon-space-6);
-    margin-right: var(--canon-space-6);
+    margin-left: var(--canon-space-8);
+    margin-right: var(--canon-space-8);
   }
 
   .cu-mx-md {
-    margin-left: var(--canon-space-5);
-    margin-right: var(--canon-space-5);
+    margin-left: var(--canon-space-6);
+    margin-right: var(--canon-space-6);
   }
 
   .cu-mx-none {
@@ -563,8 +563,8 @@
   }
 
   .cu-mx-xl {
-    margin-left: var(--canon-space-7);
-    margin-right: var(--canon-space-7);
+    margin-left: var(--canon-space-10);
+    margin-right: var(--canon-space-10);
   }
 
   .cu-mx-xs {
@@ -573,8 +573,8 @@
   }
 
   .cu-my-2xl {
-    margin-top: var(--canon-space-8);
-    margin-bottom: var(--canon-space-8);
+    margin-top: var(--canon-space-12);
+    margin-bottom: var(--canon-space-12);
   }
 
   .cu-my-2xs {
@@ -583,13 +583,13 @@
   }
 
   .cu-my-lg {
-    margin-top: var(--canon-space-6);
-    margin-bottom: var(--canon-space-6);
+    margin-top: var(--canon-space-8);
+    margin-bottom: var(--canon-space-8);
   }
 
   .cu-my-md {
-    margin-top: var(--canon-space-5);
-    margin-bottom: var(--canon-space-5);
+    margin-top: var(--canon-space-6);
+    margin-bottom: var(--canon-space-6);
   }
 
   .cu-my-none {
@@ -603,8 +603,8 @@
   }
 
   .cu-my-xl {
-    margin-top: var(--canon-space-7);
-    margin-bottom: var(--canon-space-7);
+    margin-top: var(--canon-space-10);
+    margin-bottom: var(--canon-space-10);
   }
 
   .cu-my-xs {
@@ -613,7 +613,7 @@
   }
 
   .cu-p-2xl {
-    padding: var(--canon-space-8);
+    padding: var(--canon-space-12);
   }
 
   .cu-p-2xs {
@@ -621,11 +621,11 @@
   }
 
   .cu-p-lg {
-    padding: var(--canon-space-6);
+    padding: var(--canon-space-8);
   }
 
   .cu-p-md {
-    padding: var(--canon-space-5);
+    padding: var(--canon-space-6);
   }
 
   .cu-p-none {
@@ -637,7 +637,7 @@
   }
 
   .cu-p-xl {
-    padding: var(--canon-space-7);
+    padding: var(--canon-space-10);
   }
 
   .cu-p-xs {
@@ -645,7 +645,7 @@
   }
 
   .cu-pb-2xl {
-    padding-bottom: var(--canon-space-8);
+    padding-bottom: var(--canon-space-12);
   }
 
   .cu-pb-2xs {
@@ -653,11 +653,11 @@
   }
 
   .cu-pb-lg {
-    padding-bottom: var(--canon-space-6);
+    padding-bottom: var(--canon-space-8);
   }
 
   .cu-pb-md {
-    padding-bottom: var(--canon-space-5);
+    padding-bottom: var(--canon-space-6);
   }
 
   .cu-pb-none {
@@ -669,7 +669,7 @@
   }
 
   .cu-pb-xl {
-    padding-bottom: var(--canon-space-7);
+    padding-bottom: var(--canon-space-10);
   }
 
   .cu-pb-xs {
@@ -677,7 +677,7 @@
   }
 
   .cu-pl-2xl {
-    padding-left: var(--canon-space-8);
+    padding-left: var(--canon-space-12);
   }
 
   .cu-pl-2xs {
@@ -685,11 +685,11 @@
   }
 
   .cu-pl-lg {
-    padding-left: var(--canon-space-6);
+    padding-left: var(--canon-space-8);
   }
 
   .cu-pl-md {
-    padding-left: var(--canon-space-5);
+    padding-left: var(--canon-space-6);
   }
 
   .cu-pl-none {
@@ -701,7 +701,7 @@
   }
 
   .cu-pl-xl {
-    padding-left: var(--canon-space-7);
+    padding-left: var(--canon-space-10);
   }
 
   .cu-pl-xs {
@@ -709,7 +709,7 @@
   }
 
   .cu-pr-2xl {
-    padding-right: var(--canon-space-8);
+    padding-right: var(--canon-space-12);
   }
 
   .cu-pr-2xs {
@@ -717,11 +717,11 @@
   }
 
   .cu-pr-lg {
-    padding-right: var(--canon-space-6);
+    padding-right: var(--canon-space-8);
   }
 
   .cu-pr-md {
-    padding-right: var(--canon-space-5);
+    padding-right: var(--canon-space-6);
   }
 
   .cu-pr-none {
@@ -733,7 +733,7 @@
   }
 
   .cu-pr-xl {
-    padding-right: var(--canon-space-7);
+    padding-right: var(--canon-space-10);
   }
 
   .cu-pr-xs {
@@ -741,7 +741,7 @@
   }
 
   .cu-pt-2xl {
-    padding-top: var(--canon-space-8);
+    padding-top: var(--canon-space-12);
   }
 
   .cu-pt-2xs {
@@ -749,11 +749,11 @@
   }
 
   .cu-pt-lg {
-    padding-top: var(--canon-space-6);
+    padding-top: var(--canon-space-8);
   }
 
   .cu-pt-md {
-    padding-top: var(--canon-space-5);
+    padding-top: var(--canon-space-6);
   }
 
   .cu-pt-none {
@@ -765,7 +765,7 @@
   }
 
   .cu-pt-xl {
-    padding-top: var(--canon-space-7);
+    padding-top: var(--canon-space-10);
   }
 
   .cu-pt-xs {
@@ -773,8 +773,8 @@
   }
 
   .cu-px-2xl {
-    padding-left: var(--canon-space-8);
-    padding-right: var(--canon-space-8);
+    padding-left: var(--canon-space-12);
+    padding-right: var(--canon-space-12);
   }
 
   .cu-px-2xs {
@@ -783,13 +783,13 @@
   }
 
   .cu-px-lg {
-    padding-left: var(--canon-space-6);
-    padding-right: var(--canon-space-6);
+    padding-left: var(--canon-space-8);
+    padding-right: var(--canon-space-8);
   }
 
   .cu-px-md {
-    padding-left: var(--canon-space-5);
-    padding-right: var(--canon-space-5);
+    padding-left: var(--canon-space-6);
+    padding-right: var(--canon-space-6);
   }
 
   .cu-px-none {
@@ -803,8 +803,8 @@
   }
 
   .cu-px-xl {
-    padding-left: var(--canon-space-7);
-    padding-right: var(--canon-space-7);
+    padding-left: var(--canon-space-10);
+    padding-right: var(--canon-space-10);
   }
 
   .cu-px-xs {
@@ -813,8 +813,8 @@
   }
 
   .cu-py-2xl {
-    padding-top: var(--canon-space-8);
-    padding-bottom: var(--canon-space-8);
+    padding-top: var(--canon-space-12);
+    padding-bottom: var(--canon-space-12);
   }
 
   .cu-py-2xs {
@@ -823,13 +823,13 @@
   }
 
   .cu-py-lg {
-    padding-top: var(--canon-space-6);
-    padding-bottom: var(--canon-space-6);
+    padding-top: var(--canon-space-8);
+    padding-bottom: var(--canon-space-8);
   }
 
   .cu-py-md {
-    padding-top: var(--canon-space-5);
-    padding-bottom: var(--canon-space-5);
+    padding-top: var(--canon-space-6);
+    padding-bottom: var(--canon-space-6);
   }
 
   .cu-py-none {
@@ -843,8 +843,8 @@
   }
 
   .cu-py-xl {
-    padding-top: var(--canon-space-7);
-    padding-bottom: var(--canon-space-7);
+    padding-top: var(--canon-space-10);
+    padding-bottom: var(--canon-space-10);
   }
 
   .cu-py-xs {