From 829c7d95c34b81148ecd7b9ac97f1d8ab6463589 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 15:59:11 +0000
Subject: [PATCH] Revert spacing prop

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../canon/src/components/Box/Box.stories.tsx  |  31 +-
 packages/canon/src/components/Box/Box.tsx     |  17 +-
 .../canon/src/components/Container/types.ts   |  12 +-
 packages/canon/src/css/utilities.css          |  18 -
 packages/canon/src/css/utilities/2xl.css      | 480 ++++++++++++++++
 packages/canon/src/css/utilities/lg.css       | 480 ++++++++++++++++
 packages/canon/src/css/utilities/m.css        | 422 --------------
 packages/canon/src/css/utilities/mb.css       | 422 --------------
 packages/canon/src/css/utilities/md.css       | 480 ++++++++++++++++
 packages/canon/src/css/utilities/ml.css       | 422 --------------
 packages/canon/src/css/utilities/mr.css       | 422 --------------
 packages/canon/src/css/utilities/mt.css       | 422 --------------
 packages/canon/src/css/utilities/mx.css       | 524 ------------------
 packages/canon/src/css/utilities/my.css       | 524 ------------------
 packages/canon/src/css/utilities/p.css        | 422 --------------
 packages/canon/src/css/utilities/pb.css       | 422 --------------
 packages/canon/src/css/utilities/pl.css       | 422 --------------
 packages/canon/src/css/utilities/pr.css       | 422 --------------
 packages/canon/src/css/utilities/pt.css       | 422 --------------
 packages/canon/src/css/utilities/px.css       | 524 ------------------
 packages/canon/src/css/utilities/py.css       | 524 ------------------
 packages/canon/src/css/utilities/sm.css       | 480 ++++++++++++++++
 packages/canon/src/css/utilities/xl.css       | 480 ++++++++++++++++
 packages/canon/src/css/utilities/xs.css       | 480 ++++++++++++++++
 packages/canon/src/props/margin.ts            | 168 ------
 packages/canon/src/props/padding.ts           | 169 ------
 packages/canon/src/props/prop-def.ts          | 107 ----
 packages/canon/src/props/spacing.ts           |  41 --
 packages/canon/src/utils/extractProps.ts      |  71 ---
 29 files changed, 2911 insertions(+), 6919 deletions(-)
 delete mode 100644 packages/canon/src/css/utilities/m.css
 delete mode 100644 packages/canon/src/css/utilities/mb.css
 delete mode 100644 packages/canon/src/css/utilities/ml.css
 delete mode 100644 packages/canon/src/css/utilities/mr.css
 delete mode 100644 packages/canon/src/css/utilities/mt.css
 delete mode 100644 packages/canon/src/css/utilities/mx.css
 delete mode 100644 packages/canon/src/css/utilities/my.css
 delete mode 100644 packages/canon/src/css/utilities/p.css
 delete mode 100644 packages/canon/src/css/utilities/pb.css
 delete mode 100644 packages/canon/src/css/utilities/pl.css
 delete mode 100644 packages/canon/src/css/utilities/pr.css
 delete mode 100644 packages/canon/src/css/utilities/pt.css
 delete mode 100644 packages/canon/src/css/utilities/px.css
 delete mode 100644 packages/canon/src/css/utilities/py.css
 delete mode 100644 packages/canon/src/props/margin.ts
 delete mode 100644 packages/canon/src/props/padding.ts
 delete mode 100644 packages/canon/src/props/prop-def.ts
 delete mode 100644 packages/canon/src/props/spacing.ts
 delete mode 100644 packages/canon/src/utils/extractProps.ts

diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx
index 5958e2a739..52dd7bc782 100644
--- a/packages/canon/src/components/Box/Box.stories.tsx
+++ b/packages/canon/src/components/Box/Box.stories.tsx
@@ -23,6 +23,9 @@ import { Inline } from '../Inline';
 const meta = {
   title: 'Components/Box',
   component: Box,
+  parameters: {
+    layout: 'centered',
+  },
   argTypes: {
     as: {
       control: { type: 'select' },
@@ -213,27 +216,27 @@ export const Padding: Story = {
   render: args => (
     <Stack align="center" gap="md">
       <Inline alignY="center" gap="md">
-        <Box p="3" style={styleInsideBox}>
+        <Box padding="md" style={styleInsideBox}>
           <Box {...args}>Padding</Box>
         </Box>
-        <Box px="3" style={styleInsideBox}>
+        <Box paddingX="md" style={styleInsideBox}>
           <Box {...args}>Padding X</Box>
         </Box>
-        <Box py="3" style={styleInsideBox}>
+        <Box paddingY="md" style={styleInsideBox}>
           <Box {...args}>Padding Y</Box>
         </Box>
       </Inline>
       <Inline alignY="center" gap="md">
-        <Box pt="3" style={styleInsideBox}>
+        <Box paddingTop="md" style={styleInsideBox}>
           <Box {...args}>Padding Top</Box>
         </Box>
-        <Box pr="3" style={styleInsideBox}>
+        <Box paddingRight="md" style={styleInsideBox}>
           <Box {...args}>Padding Right</Box>
         </Box>
-        <Box pb="3" style={styleInsideBox}>
+        <Box paddingBottom="md" style={styleInsideBox}>
           <Box {...args}>Padding Bottom</Box>
         </Box>
-        <Box pl="3" style={styleInsideBox}>
+        <Box paddingLeft="md" style={styleInsideBox}>
           <Box {...args}>Padding Left</Box>
         </Box>
       </Inline>
@@ -254,39 +257,39 @@ export const Margin: Story = {
     <Stack align="center" gap="md">
       <Inline alignY="center" gap="md">
         <Box style={styleInsideBox}>
-          <Box m="3" {...args}>
+          <Box margin="md" {...args}>
             Margin
           </Box>
         </Box>
         <Box style={styleInsideBox}>
-          <Box mx="3" {...args}>
+          <Box marginX="md" {...args}>
             Margin X
           </Box>
         </Box>
         <Box style={styleInsideBox}>
-          <Box my="3" {...args}>
+          <Box marginY="md" {...args}>
             Margin Y
           </Box>
         </Box>
       </Inline>
       <Inline alignY="center" gap="md">
         <Box style={styleInsideBox}>
-          <Box mt="3" {...args}>
+          <Box marginTop="md" {...args}>
             Margin Top
           </Box>
         </Box>
         <Box style={styleInsideBox}>
-          <Box mr="3" {...args}>
+          <Box marginRight="md" {...args}>
             Margin Right
           </Box>
         </Box>
         <Box style={styleInsideBox}>
-          <Box mb="3" {...args}>
+          <Box marginBottom="md" {...args}>
             Margin Bottom
           </Box>
         </Box>
         <Box style={styleInsideBox}>
-          <Box ml="3" {...args}>
+          <Box marginLeft="md" {...args}>
             Margin Left
           </Box>
         </Box>
diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx
index 04dc4648ce..6b673abddd 100644
--- a/packages/canon/src/components/Box/Box.tsx
+++ b/packages/canon/src/components/Box/Box.tsx
@@ -16,24 +16,23 @@
 
 import { createElement, forwardRef } from 'react';
 import { BoxProps } from './types';
+import { getClassNames } from '../../utils/getClassNames';
 import clsx from 'clsx';
-import { extractProps } from '../../utils/extractProps';
-import { spacingPropDefs } from '../../props/spacing';
 
 /** @public */
 export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
-  const { as = 'div', children } = props;
+  const { as = 'div', className, style, children, ...restProps } = props;
 
-  // Extract utility class names and styles
-  const propDefs = { ...spacingPropDefs };
-  const { className, style } = extractProps(props, propDefs);
+  // Generate utility class names
+  const utilityClassNames = getClassNames(restProps);
+
+  // Combine the base class name, the sprinkles class name, and any additional class names
+  const classNames = clsx('canon-Box', utilityClassNames, className);
 
   return createElement(as, {
     ref,
-    className: clsx('canon-Box', className),
+    className: classNames,
     style,
     children,
   });
 });
-
-Box.displayName = 'Box';
diff --git a/packages/canon/src/components/Container/types.ts b/packages/canon/src/components/Container/types.ts
index 41de725b32..f9a71ecfa1 100644
--- a/packages/canon/src/components/Container/types.ts
+++ b/packages/canon/src/components/Container/types.ts
@@ -19,11 +19,11 @@ import { SpaceProps } from '../../types';
 export interface ContainerProps {
   children?: React.ReactNode;
   className?: string;
-  my?: SpaceProps['my'];
-  mb?: SpaceProps['mb'];
-  mt?: SpaceProps['mt'];
-  py?: SpaceProps['py'];
-  pb?: SpaceProps['pb'];
-  pt?: SpaceProps['pt'];
+  marginY?: SpaceProps['marginY'];
+  marginBottom?: SpaceProps['marginBottom'];
+  marginTop?: SpaceProps['marginTop'];
+  paddingY?: SpaceProps['paddingY'];
+  paddingBottom?: SpaceProps['paddingBottom'];
+  paddingTop?: SpaceProps['paddingTop'];
   style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/css/utilities.css b/packages/canon/src/css/utilities.css
index b935a95ae0..ad4a8d03b4 100644
--- a/packages/canon/src/css/utilities.css
+++ b/packages/canon/src/css/utilities.css
@@ -31,21 +31,3 @@
 
 /* Min 1536px */
 @import './utilities/2xl.css';
-
-/* Padding */
-@import './utilities/p.css';
-@import './utilities/pl.css';
-@import './utilities/pr.css';
-@import './utilities/pt.css';
-@import './utilities/pb.css';
-@import './utilities/py.css';
-@import './utilities/px.css';
-
-/* Margin */
-@import './utilities/m.css';
-@import './utilities/ml.css';
-@import './utilities/mr.css';
-@import './utilities/mt.css';
-@import './utilities/mb.css';
-@import './utilities/my.css';
-@import './utilities/mx.css';
diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css
index 78bc0a6f8d..0252fefaf7 100644
--- a/packages/canon/src/css/utilities/2xl.css
+++ b/packages/canon/src/css/utilities/2xl.css
@@ -373,6 +373,486 @@
       justify-content: stretch;
     }
 
+    .cu-2xl-m-2xl {
+      margin: var(--canon-space-12);
+    }
+
+    .cu-2xl-m-2xs {
+      margin: var(--canon-space-2);
+    }
+
+    .cu-2xl-m-lg {
+      margin: var(--canon-space-8);
+    }
+
+    .cu-2xl-m-md {
+      margin: var(--canon-space-6);
+    }
+
+    .cu-2xl-m-none {
+      margin: 0;
+    }
+
+    .cu-2xl-m-sm {
+      margin: var(--canon-space-4);
+    }
+
+    .cu-2xl-m-xl {
+      margin: var(--canon-space-10);
+    }
+
+    .cu-2xl-m-xs {
+      margin: var(--canon-space-3);
+    }
+
+    .cu-2xl-mb-2xl {
+      margin-bottom: var(--canon-space-12);
+    }
+
+    .cu-2xl-mb-2xs {
+      margin-bottom: var(--canon-space-2);
+    }
+
+    .cu-2xl-mb-lg {
+      margin-bottom: var(--canon-space-8);
+    }
+
+    .cu-2xl-mb-md {
+      margin-bottom: var(--canon-space-6);
+    }
+
+    .cu-2xl-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-2xl-mb-sm {
+      margin-bottom: var(--canon-space-4);
+    }
+
+    .cu-2xl-mb-xl {
+      margin-bottom: var(--canon-space-10);
+    }
+
+    .cu-2xl-mb-xs {
+      margin-bottom: var(--canon-space-3);
+    }
+
+    .cu-2xl-ml-2xl {
+      margin-left: var(--canon-space-12);
+    }
+
+    .cu-2xl-ml-2xs {
+      margin-left: var(--canon-space-2);
+    }
+
+    .cu-2xl-ml-lg {
+      margin-left: var(--canon-space-8);
+    }
+
+    .cu-2xl-ml-md {
+      margin-left: var(--canon-space-6);
+    }
+
+    .cu-2xl-ml-none {
+      margin-left: 0;
+    }
+
+    .cu-2xl-ml-sm {
+      margin-left: var(--canon-space-4);
+    }
+
+    .cu-2xl-ml-xl {
+      margin-left: var(--canon-space-10);
+    }
+
+    .cu-2xl-ml-xs {
+      margin-left: var(--canon-space-3);
+    }
+
+    .cu-2xl-mr-2xl {
+      margin-right: var(--canon-space-12);
+    }
+
+    .cu-2xl-mr-2xs {
+      margin-right: var(--canon-space-2);
+    }
+
+    .cu-2xl-mr-lg {
+      margin-right: var(--canon-space-8);
+    }
+
+    .cu-2xl-mr-md {
+      margin-right: var(--canon-space-6);
+    }
+
+    .cu-2xl-mr-none {
+      margin-right: 0;
+    }
+
+    .cu-2xl-mr-sm {
+      margin-right: var(--canon-space-4);
+    }
+
+    .cu-2xl-mr-xl {
+      margin-right: var(--canon-space-10);
+    }
+
+    .cu-2xl-mr-xs {
+      margin-right: var(--canon-space-3);
+    }
+
+    .cu-2xl-mt-2xl {
+      margin-top: var(--canon-space-12);
+    }
+
+    .cu-2xl-mt-2xs {
+      margin-top: var(--canon-space-2);
+    }
+
+    .cu-2xl-mt-lg {
+      margin-top: var(--canon-space-8);
+    }
+
+    .cu-2xl-mt-md {
+      margin-top: var(--canon-space-6);
+    }
+
+    .cu-2xl-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-2xl-mt-sm {
+      margin-top: var(--canon-space-4);
+    }
+
+    .cu-2xl-mt-xl {
+      margin-top: var(--canon-space-10);
+    }
+
+    .cu-2xl-mt-xs {
+      margin-top: var(--canon-space-3);
+    }
+
+    .cu-2xl-mx-2xl {
+      margin-left: var(--canon-space-12);
+      margin-right: var(--canon-space-12);
+    }
+
+    .cu-2xl-mx-2xs {
+      margin-left: var(--canon-space-2);
+      margin-right: var(--canon-space-2);
+    }
+
+    .cu-2xl-mx-lg {
+      margin-left: var(--canon-space-8);
+      margin-right: var(--canon-space-8);
+    }
+
+    .cu-2xl-mx-md {
+      margin-left: var(--canon-space-6);
+      margin-right: var(--canon-space-6);
+    }
+
+    .cu-2xl-mx-none {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .cu-2xl-mx-sm {
+      margin-left: var(--canon-space-4);
+      margin-right: var(--canon-space-4);
+    }
+
+    .cu-2xl-mx-xl {
+      margin-left: var(--canon-space-10);
+      margin-right: var(--canon-space-10);
+    }
+
+    .cu-2xl-mx-xs {
+      margin-left: var(--canon-space-3);
+      margin-right: var(--canon-space-3);
+    }
+
+    .cu-2xl-my-2xl {
+      margin-top: var(--canon-space-12);
+      margin-bottom: var(--canon-space-12);
+    }
+
+    .cu-2xl-my-2xs {
+      margin-top: var(--canon-space-2);
+      margin-bottom: var(--canon-space-2);
+    }
+
+    .cu-2xl-my-lg {
+      margin-top: var(--canon-space-8);
+      margin-bottom: var(--canon-space-8);
+    }
+
+    .cu-2xl-my-md {
+      margin-top: var(--canon-space-6);
+      margin-bottom: var(--canon-space-6);
+    }
+
+    .cu-2xl-my-none {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .cu-2xl-my-sm {
+      margin-top: var(--canon-space-4);
+      margin-bottom: var(--canon-space-4);
+    }
+
+    .cu-2xl-my-xl {
+      margin-top: var(--canon-space-10);
+      margin-bottom: var(--canon-space-10);
+    }
+
+    .cu-2xl-my-xs {
+      margin-top: var(--canon-space-3);
+      margin-bottom: var(--canon-space-3);
+    }
+
+    .cu-2xl-p-2xl {
+      padding: var(--canon-space-12);
+    }
+
+    .cu-2xl-p-2xs {
+      padding: var(--canon-space-2);
+    }
+
+    .cu-2xl-p-lg {
+      padding: var(--canon-space-8);
+    }
+
+    .cu-2xl-p-md {
+      padding: var(--canon-space-6);
+    }
+
+    .cu-2xl-p-none {
+      padding: 0;
+    }
+
+    .cu-2xl-p-sm {
+      padding: var(--canon-space-4);
+    }
+
+    .cu-2xl-p-xl {
+      padding: var(--canon-space-10);
+    }
+
+    .cu-2xl-p-xs {
+      padding: var(--canon-space-3);
+    }
+
+    .cu-2xl-pb-2xl {
+      padding-bottom: var(--canon-space-12);
+    }
+
+    .cu-2xl-pb-2xs {
+      padding-bottom: var(--canon-space-2);
+    }
+
+    .cu-2xl-pb-lg {
+      padding-bottom: var(--canon-space-8);
+    }
+
+    .cu-2xl-pb-md {
+      padding-bottom: var(--canon-space-6);
+    }
+
+    .cu-2xl-pb-none {
+      padding-bottom: 0;
+    }
+
+    .cu-2xl-pb-sm {
+      padding-bottom: var(--canon-space-4);
+    }
+
+    .cu-2xl-pb-xl {
+      padding-bottom: var(--canon-space-10);
+    }
+
+    .cu-2xl-pb-xs {
+      padding-bottom: var(--canon-space-3);
+    }
+
+    .cu-2xl-pl-2xl {
+      padding-left: var(--canon-space-12);
+    }
+
+    .cu-2xl-pl-2xs {
+      padding-left: var(--canon-space-2);
+    }
+
+    .cu-2xl-pl-lg {
+      padding-left: var(--canon-space-8);
+    }
+
+    .cu-2xl-pl-md {
+      padding-left: var(--canon-space-6);
+    }
+
+    .cu-2xl-pl-none {
+      padding-left: 0;
+    }
+
+    .cu-2xl-pl-sm {
+      padding-left: var(--canon-space-4);
+    }
+
+    .cu-2xl-pl-xl {
+      padding-left: var(--canon-space-10);
+    }
+
+    .cu-2xl-pl-xs {
+      padding-left: var(--canon-space-3);
+    }
+
+    .cu-2xl-pr-2xl {
+      padding-right: var(--canon-space-12);
+    }
+
+    .cu-2xl-pr-2xs {
+      padding-right: var(--canon-space-2);
+    }
+
+    .cu-2xl-pr-lg {
+      padding-right: var(--canon-space-8);
+    }
+
+    .cu-2xl-pr-md {
+      padding-right: var(--canon-space-6);
+    }
+
+    .cu-2xl-pr-none {
+      padding-right: 0;
+    }
+
+    .cu-2xl-pr-sm {
+      padding-right: var(--canon-space-4);
+    }
+
+    .cu-2xl-pr-xl {
+      padding-right: var(--canon-space-10);
+    }
+
+    .cu-2xl-pr-xs {
+      padding-right: var(--canon-space-3);
+    }
+
+    .cu-2xl-pt-2xl {
+      padding-top: var(--canon-space-12);
+    }
+
+    .cu-2xl-pt-2xs {
+      padding-top: var(--canon-space-2);
+    }
+
+    .cu-2xl-pt-lg {
+      padding-top: var(--canon-space-8);
+    }
+
+    .cu-2xl-pt-md {
+      padding-top: var(--canon-space-6);
+    }
+
+    .cu-2xl-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-2xl-pt-sm {
+      padding-top: var(--canon-space-4);
+    }
+
+    .cu-2xl-pt-xl {
+      padding-top: var(--canon-space-10);
+    }
+
+    .cu-2xl-pt-xs {
+      padding-top: var(--canon-space-3);
+    }
+
+    .cu-2xl-px-2xl {
+      padding-left: var(--canon-space-12);
+      padding-right: var(--canon-space-12);
+    }
+
+    .cu-2xl-px-2xs {
+      padding-left: var(--canon-space-2);
+      padding-right: var(--canon-space-2);
+    }
+
+    .cu-2xl-px-lg {
+      padding-left: var(--canon-space-8);
+      padding-right: var(--canon-space-8);
+    }
+
+    .cu-2xl-px-md {
+      padding-left: var(--canon-space-6);
+      padding-right: var(--canon-space-6);
+    }
+
+    .cu-2xl-px-none {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .cu-2xl-px-sm {
+      padding-left: var(--canon-space-4);
+      padding-right: var(--canon-space-4);
+    }
+
+    .cu-2xl-px-xl {
+      padding-left: var(--canon-space-10);
+      padding-right: var(--canon-space-10);
+    }
+
+    .cu-2xl-px-xs {
+      padding-left: var(--canon-space-3);
+      padding-right: var(--canon-space-3);
+    }
+
+    .cu-2xl-py-2xl {
+      padding-top: var(--canon-space-12);
+      padding-bottom: var(--canon-space-12);
+    }
+
+    .cu-2xl-py-2xs {
+      padding-top: var(--canon-space-2);
+      padding-bottom: var(--canon-space-2);
+    }
+
+    .cu-2xl-py-lg {
+      padding-top: var(--canon-space-8);
+      padding-bottom: var(--canon-space-8);
+    }
+
+    .cu-2xl-py-md {
+      padding-top: var(--canon-space-6);
+      padding-bottom: var(--canon-space-6);
+    }
+
+    .cu-2xl-py-none {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .cu-2xl-py-sm {
+      padding-top: var(--canon-space-4);
+      padding-bottom: var(--canon-space-4);
+    }
+
+    .cu-2xl-py-xl {
+      padding-top: var(--canon-space-10);
+      padding-bottom: var(--canon-space-10);
+    }
+
+    .cu-2xl-py-xs {
+      padding-top: var(--canon-space-3);
+      padding-bottom: var(--canon-space-3);
+    }
+
     .cu-2xl-rounded-2xl {
       border-radius: var(--canon-radius-full);
     }
diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css
index 297aff1d98..a69dae1df3 100644
--- a/packages/canon/src/css/utilities/lg.css
+++ b/packages/canon/src/css/utilities/lg.css
@@ -373,6 +373,486 @@
       justify-content: stretch;
     }
 
+    .cu-lg-m-2xl {
+      margin: var(--canon-space-12);
+    }
+
+    .cu-lg-m-2xs {
+      margin: var(--canon-space-2);
+    }
+
+    .cu-lg-m-lg {
+      margin: var(--canon-space-8);
+    }
+
+    .cu-lg-m-md {
+      margin: var(--canon-space-6);
+    }
+
+    .cu-lg-m-none {
+      margin: 0;
+    }
+
+    .cu-lg-m-sm {
+      margin: var(--canon-space-4);
+    }
+
+    .cu-lg-m-xl {
+      margin: var(--canon-space-10);
+    }
+
+    .cu-lg-m-xs {
+      margin: var(--canon-space-3);
+    }
+
+    .cu-lg-mb-2xl {
+      margin-bottom: var(--canon-space-12);
+    }
+
+    .cu-lg-mb-2xs {
+      margin-bottom: var(--canon-space-2);
+    }
+
+    .cu-lg-mb-lg {
+      margin-bottom: var(--canon-space-8);
+    }
+
+    .cu-lg-mb-md {
+      margin-bottom: var(--canon-space-6);
+    }
+
+    .cu-lg-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-lg-mb-sm {
+      margin-bottom: var(--canon-space-4);
+    }
+
+    .cu-lg-mb-xl {
+      margin-bottom: var(--canon-space-10);
+    }
+
+    .cu-lg-mb-xs {
+      margin-bottom: var(--canon-space-3);
+    }
+
+    .cu-lg-ml-2xl {
+      margin-left: var(--canon-space-12);
+    }
+
+    .cu-lg-ml-2xs {
+      margin-left: var(--canon-space-2);
+    }
+
+    .cu-lg-ml-lg {
+      margin-left: var(--canon-space-8);
+    }
+
+    .cu-lg-ml-md {
+      margin-left: var(--canon-space-6);
+    }
+
+    .cu-lg-ml-none {
+      margin-left: 0;
+    }
+
+    .cu-lg-ml-sm {
+      margin-left: var(--canon-space-4);
+    }
+
+    .cu-lg-ml-xl {
+      margin-left: var(--canon-space-10);
+    }
+
+    .cu-lg-ml-xs {
+      margin-left: var(--canon-space-3);
+    }
+
+    .cu-lg-mr-2xl {
+      margin-right: var(--canon-space-12);
+    }
+
+    .cu-lg-mr-2xs {
+      margin-right: var(--canon-space-2);
+    }
+
+    .cu-lg-mr-lg {
+      margin-right: var(--canon-space-8);
+    }
+
+    .cu-lg-mr-md {
+      margin-right: var(--canon-space-6);
+    }
+
+    .cu-lg-mr-none {
+      margin-right: 0;
+    }
+
+    .cu-lg-mr-sm {
+      margin-right: var(--canon-space-4);
+    }
+
+    .cu-lg-mr-xl {
+      margin-right: var(--canon-space-10);
+    }
+
+    .cu-lg-mr-xs {
+      margin-right: var(--canon-space-3);
+    }
+
+    .cu-lg-mt-2xl {
+      margin-top: var(--canon-space-12);
+    }
+
+    .cu-lg-mt-2xs {
+      margin-top: var(--canon-space-2);
+    }
+
+    .cu-lg-mt-lg {
+      margin-top: var(--canon-space-8);
+    }
+
+    .cu-lg-mt-md {
+      margin-top: var(--canon-space-6);
+    }
+
+    .cu-lg-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-lg-mt-sm {
+      margin-top: var(--canon-space-4);
+    }
+
+    .cu-lg-mt-xl {
+      margin-top: var(--canon-space-10);
+    }
+
+    .cu-lg-mt-xs {
+      margin-top: var(--canon-space-3);
+    }
+
+    .cu-lg-mx-2xl {
+      margin-left: var(--canon-space-12);
+      margin-right: var(--canon-space-12);
+    }
+
+    .cu-lg-mx-2xs {
+      margin-left: var(--canon-space-2);
+      margin-right: var(--canon-space-2);
+    }
+
+    .cu-lg-mx-lg {
+      margin-left: var(--canon-space-8);
+      margin-right: var(--canon-space-8);
+    }
+
+    .cu-lg-mx-md {
+      margin-left: var(--canon-space-6);
+      margin-right: var(--canon-space-6);
+    }
+
+    .cu-lg-mx-none {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .cu-lg-mx-sm {
+      margin-left: var(--canon-space-4);
+      margin-right: var(--canon-space-4);
+    }
+
+    .cu-lg-mx-xl {
+      margin-left: var(--canon-space-10);
+      margin-right: var(--canon-space-10);
+    }
+
+    .cu-lg-mx-xs {
+      margin-left: var(--canon-space-3);
+      margin-right: var(--canon-space-3);
+    }
+
+    .cu-lg-my-2xl {
+      margin-top: var(--canon-space-12);
+      margin-bottom: var(--canon-space-12);
+    }
+
+    .cu-lg-my-2xs {
+      margin-top: var(--canon-space-2);
+      margin-bottom: var(--canon-space-2);
+    }
+
+    .cu-lg-my-lg {
+      margin-top: var(--canon-space-8);
+      margin-bottom: var(--canon-space-8);
+    }
+
+    .cu-lg-my-md {
+      margin-top: var(--canon-space-6);
+      margin-bottom: var(--canon-space-6);
+    }
+
+    .cu-lg-my-none {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .cu-lg-my-sm {
+      margin-top: var(--canon-space-4);
+      margin-bottom: var(--canon-space-4);
+    }
+
+    .cu-lg-my-xl {
+      margin-top: var(--canon-space-10);
+      margin-bottom: var(--canon-space-10);
+    }
+
+    .cu-lg-my-xs {
+      margin-top: var(--canon-space-3);
+      margin-bottom: var(--canon-space-3);
+    }
+
+    .cu-lg-p-2xl {
+      padding: var(--canon-space-12);
+    }
+
+    .cu-lg-p-2xs {
+      padding: var(--canon-space-2);
+    }
+
+    .cu-lg-p-lg {
+      padding: var(--canon-space-8);
+    }
+
+    .cu-lg-p-md {
+      padding: var(--canon-space-6);
+    }
+
+    .cu-lg-p-none {
+      padding: 0;
+    }
+
+    .cu-lg-p-sm {
+      padding: var(--canon-space-4);
+    }
+
+    .cu-lg-p-xl {
+      padding: var(--canon-space-10);
+    }
+
+    .cu-lg-p-xs {
+      padding: var(--canon-space-3);
+    }
+
+    .cu-lg-pb-2xl {
+      padding-bottom: var(--canon-space-12);
+    }
+
+    .cu-lg-pb-2xs {
+      padding-bottom: var(--canon-space-2);
+    }
+
+    .cu-lg-pb-lg {
+      padding-bottom: var(--canon-space-8);
+    }
+
+    .cu-lg-pb-md {
+      padding-bottom: var(--canon-space-6);
+    }
+
+    .cu-lg-pb-none {
+      padding-bottom: 0;
+    }
+
+    .cu-lg-pb-sm {
+      padding-bottom: var(--canon-space-4);
+    }
+
+    .cu-lg-pb-xl {
+      padding-bottom: var(--canon-space-10);
+    }
+
+    .cu-lg-pb-xs {
+      padding-bottom: var(--canon-space-3);
+    }
+
+    .cu-lg-pl-2xl {
+      padding-left: var(--canon-space-12);
+    }
+
+    .cu-lg-pl-2xs {
+      padding-left: var(--canon-space-2);
+    }
+
+    .cu-lg-pl-lg {
+      padding-left: var(--canon-space-8);
+    }
+
+    .cu-lg-pl-md {
+      padding-left: var(--canon-space-6);
+    }
+
+    .cu-lg-pl-none {
+      padding-left: 0;
+    }
+
+    .cu-lg-pl-sm {
+      padding-left: var(--canon-space-4);
+    }
+
+    .cu-lg-pl-xl {
+      padding-left: var(--canon-space-10);
+    }
+
+    .cu-lg-pl-xs {
+      padding-left: var(--canon-space-3);
+    }
+
+    .cu-lg-pr-2xl {
+      padding-right: var(--canon-space-12);
+    }
+
+    .cu-lg-pr-2xs {
+      padding-right: var(--canon-space-2);
+    }
+
+    .cu-lg-pr-lg {
+      padding-right: var(--canon-space-8);
+    }
+
+    .cu-lg-pr-md {
+      padding-right: var(--canon-space-6);
+    }
+
+    .cu-lg-pr-none {
+      padding-right: 0;
+    }
+
+    .cu-lg-pr-sm {
+      padding-right: var(--canon-space-4);
+    }
+
+    .cu-lg-pr-xl {
+      padding-right: var(--canon-space-10);
+    }
+
+    .cu-lg-pr-xs {
+      padding-right: var(--canon-space-3);
+    }
+
+    .cu-lg-pt-2xl {
+      padding-top: var(--canon-space-12);
+    }
+
+    .cu-lg-pt-2xs {
+      padding-top: var(--canon-space-2);
+    }
+
+    .cu-lg-pt-lg {
+      padding-top: var(--canon-space-8);
+    }
+
+    .cu-lg-pt-md {
+      padding-top: var(--canon-space-6);
+    }
+
+    .cu-lg-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-lg-pt-sm {
+      padding-top: var(--canon-space-4);
+    }
+
+    .cu-lg-pt-xl {
+      padding-top: var(--canon-space-10);
+    }
+
+    .cu-lg-pt-xs {
+      padding-top: var(--canon-space-3);
+    }
+
+    .cu-lg-px-2xl {
+      padding-left: var(--canon-space-12);
+      padding-right: var(--canon-space-12);
+    }
+
+    .cu-lg-px-2xs {
+      padding-left: var(--canon-space-2);
+      padding-right: var(--canon-space-2);
+    }
+
+    .cu-lg-px-lg {
+      padding-left: var(--canon-space-8);
+      padding-right: var(--canon-space-8);
+    }
+
+    .cu-lg-px-md {
+      padding-left: var(--canon-space-6);
+      padding-right: var(--canon-space-6);
+    }
+
+    .cu-lg-px-none {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .cu-lg-px-sm {
+      padding-left: var(--canon-space-4);
+      padding-right: var(--canon-space-4);
+    }
+
+    .cu-lg-px-xl {
+      padding-left: var(--canon-space-10);
+      padding-right: var(--canon-space-10);
+    }
+
+    .cu-lg-px-xs {
+      padding-left: var(--canon-space-3);
+      padding-right: var(--canon-space-3);
+    }
+
+    .cu-lg-py-2xl {
+      padding-top: var(--canon-space-12);
+      padding-bottom: var(--canon-space-12);
+    }
+
+    .cu-lg-py-2xs {
+      padding-top: var(--canon-space-2);
+      padding-bottom: var(--canon-space-2);
+    }
+
+    .cu-lg-py-lg {
+      padding-top: var(--canon-space-8);
+      padding-bottom: var(--canon-space-8);
+    }
+
+    .cu-lg-py-md {
+      padding-top: var(--canon-space-6);
+      padding-bottom: var(--canon-space-6);
+    }
+
+    .cu-lg-py-none {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .cu-lg-py-sm {
+      padding-top: var(--canon-space-4);
+      padding-bottom: var(--canon-space-4);
+    }
+
+    .cu-lg-py-xl {
+      padding-top: var(--canon-space-10);
+      padding-bottom: var(--canon-space-10);
+    }
+
+    .cu-lg-py-xs {
+      padding-top: var(--canon-space-3);
+      padding-bottom: var(--canon-space-3);
+    }
+
     .cu-lg-rounded-2xl {
       border-radius: var(--canon-radius-full);
     }
diff --git a/packages/canon/src/css/utilities/m.css b/packages/canon/src/css/utilities/m.css
deleted file mode 100644
index 00a30cc8b1..0000000000
--- a/packages/canon/src/css/utilities/m.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.cu-m {
-  margin: var(--p);
-}
-
-.cu-m-0\.5 {
-  margin: var(--canon-space-0_5);
-}
-
-.cu-m-1 {
-  margin: var(--canon-space-1);
-}
-
-.cu-m-1\.5 {
-  margin: var(--canon-space-1_5);
-}
-
-.cu-m-2 {
-  margin: var(--canon-space-2);
-}
-
-.cu-m-3 {
-  margin: var(--canon-space-3);
-}
-
-.cu-m-4 {
-  margin: var(--canon-space-4);
-}
-
-.cu-m-5 {
-  margin: var(--canon-space-5);
-}
-
-.cu-m-6 {
-  margin: var(--canon-space-6);
-}
-
-.cu-m-7 {
-  margin: var(--canon-space-7);
-}
-
-.cu-m-8 {
-  margin: var(--canon-space-8);
-}
-
-.cu-m-9 {
-  margin: var(--canon-space-9);
-}
-
-.cu-m-10 {
-  margin: var(--canon-space-10);
-}
-
-.cu-m-11 {
-  margin: var(--canon-space-11);
-}
-
-.cu-m-12 {
-  margin: var(--canon-space-12);
-}
-
-.cu-m-13 {
-  margin: var(--canon-space-13);
-}
-
-.cu-m-14 {
-  margin: var(--canon-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
-  .xs\:cu-m {
-    margin: var(--p-xs);
-  }
-
-  .xs\:cu-m-0\.5 {
-    margin: var(--canon-space-0_5);
-  }
-
-  .xs\:cu-m-1 {
-    margin: var(--canon-space-1);
-  }
-
-  .xs\:cu-m-1\.5 {
-    margin: var(--canon-space-1_5);
-  }
-
-  .xs\:cu-m-2 {
-    margin: var(--canon-space-2);
-  }
-
-  .xs\:cu-m-3 {
-    margin: var(--canon-space-3);
-  }
-
-  .xs\:cu-m-4 {
-    margin: var(--canon-space-4);
-  }
-
-  .xs\:cu-m-5 {
-    margin: var(--canon-space-5);
-  }
-
-  .xs\:cu-m-6 {
-    margin: var(--canon-space-6);
-  }
-
-  .xs\:cu-m-7 {
-    margin: var(--canon-space-7);
-  }
-
-  .xs\:cu-m-8 {
-    margin: var(--canon-space-8);
-  }
-
-  .xs\:cu-m-9 {
-    margin: var(--canon-space-9);
-  }
-
-  .xs\:cu-m-10 {
-    margin: var(--canon-space-10);
-  }
-
-  .xs\:cu-m-11 {
-    margin: var(--canon-space-11);
-  }
-
-  .xs\:cu-m-12 {
-    margin: var(--canon-space-12);
-  }
-
-  .xs\:cu-m-13 {
-    margin: var(--canon-space-13);
-  }
-
-  .xs\:cu-m-14 {
-    margin: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint sm */
-@media (min-width: 768px) {
-  .sm\:cu-m {
-    margin: var(--p-sm);
-  }
-
-  .sm\:cu-m-0\.5 {
-    margin: var(--canon-space-0_5);
-  }
-
-  .sm\:cu-m-1 {
-    margin: var(--canon-space-1);
-  }
-
-  .sm\:cu-m-1\.5 {
-    margin: var(--canon-space-1_5);
-  }
-
-  .sm\:cu-m-2 {
-    margin: var(--canon-space-2);
-  }
-
-  .sm\:cu-m-3 {
-    margin: var(--canon-space-3);
-  }
-
-  .sm\:cu-m-4 {
-    margin: var(--canon-space-4);
-  }
-
-  .sm\:cu-m-5 {
-    margin: var(--canon-space-5);
-  }
-
-  .sm\:cu-m-6 {
-    margin: var(--canon-space-6);
-  }
-
-  .sm\:cu-m-7 {
-    margin: var(--canon-space-7);
-  }
-
-  .sm\:cu-m-8 {
-    margin: var(--canon-space-8);
-  }
-
-  .sm\:cu-m-9 {
-    margin: var(--canon-space-9);
-  }
-
-  .sm\:cu-m-10 {
-    margin: var(--canon-space-10);
-  }
-
-  .sm\:cu-m-11 {
-    margin: var(--canon-space-11);
-  }
-
-  .sm\:cu-m-12 {
-    margin: var(--canon-space-12);
-  }
-
-  .sm\:cu-m-13 {
-    margin: var(--canon-space-13);
-  }
-
-  .sm\:cu-m-14 {
-    margin: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
-  .md\:cu-m {
-    margin: var(--p-md);
-  }
-
-  .md\:cu-m-0\.5 {
-    margin: var(--canon-space-0_5);
-  }
-
-  .md\:cu-m-1 {
-    margin: var(--canon-space-1);
-  }
-
-  .md\:cu-m-1\.5 {
-    margin: var(--canon-space-1_5);
-  }
-
-  .md\:cu-m-2 {
-    margin: var(--canon-space-2);
-  }
-
-  .md\:cu-m-3 {
-    margin: var(--canon-space-3);
-  }
-
-  .md\:cu-m-4 {
-    margin: var(--canon-space-4);
-  }
-
-  .md\:cu-m-5 {
-    margin: var(--canon-space-5);
-  }
-
-  .md\:cu-m-6 {
-    margin: var(--canon-space-6);
-  }
-
-  .md\:cu-m-7 {
-    margin: var(--canon-space-7);
-  }
-
-  .md\:cu-m-8 {
-    margin: var(--canon-space-8);
-  }
-
-  .md\:cu-m-9 {
-    margin: var(--canon-space-9);
-  }
-
-  .md\:cu-m-10 {
-    margin: var(--canon-space-10);
-  }
-
-  .md\:cu-m-11 {
-    margin: var(--canon-space-11);
-  }
-
-  .md\:cu-m-12 {
-    margin: var(--canon-space-12);
-  }
-
-  .md\:cu-m-13 {
-    margin: var(--canon-space-13);
-  }
-
-  .md\:cu-m-14 {
-    margin: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
-  .lg\:cu-m {
-    margin: var(--p-lg);
-  }
-
-  .lg\:cu-m-0\.5 {
-    margin: var(--canon-space-0_5);
-  }
-
-  .lg\:cu-m-1 {
-    margin: var(--canon-space-1);
-  }
-
-  .lg\:cu-m-1\.5 {
-    margin: var(--canon-space-1_5);
-  }
-
-  .lg\:cu-m-2 {
-    margin: var(--canon-space-2);
-  }
-
-  .lg\:cu-m-3 {
-    margin: var(--canon-space-3);
-  }
-
-  .lg\:cu-m-4 {
-    margin: var(--canon-space-4);
-  }
-
-  .lg\:cu-m-5 {
-    margin: var(--canon-space-5);
-  }
-
-  .lg\:cu-m-6 {
-    margin: var(--canon-space-6);
-  }
-
-  .lg\:cu-m-7 {
-    margin: var(--canon-space-7);
-  }
-
-  .lg\:cu-m-8 {
-    margin: var(--canon-space-8);
-  }
-
-  .lg\:cu-m-9 {
-    margin: var(--canon-space-9);
-  }
-
-  .lg\:cu-m-10 {
-    margin: var(--canon-space-10);
-  }
-
-  .lg\:cu-m-11 {
-    margin: var(--canon-space-11);
-  }
-
-  .lg\:cu-m-12 {
-    margin: var(--canon-space-12);
-  }
-
-  .lg\:cu-m-13 {
-    margin: var(--canon-space-13);
-  }
-
-  .lg\:cu-m-14 {
-    margin: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
-  .xl\:cu-m {
-    margin: var(--p-xl);
-  }
-
-  .xl\:cu-m-0\.5 {
-    margin: var(--canon-space-0_5);
-  }
-
-  .xl\:cu-m-1 {
-    margin: var(--canon-space-1);
-  }
-
-  .xl\:cu-m-1\.5 {
-    margin: var(--canon-space-1_5);
-  }
-
-  .xl\:cu-m-2 {
-    margin: var(--canon-space-2);
-  }
-
-  .xl\:cu-m-3 {
-    margin: var(--canon-space-3);
-  }
-
-  .xl\:cu-m-4 {
-    margin: var(--canon-space-4);
-  }
-
-  .xl\:cu-m-5 {
-    margin: var(--canon-space-5);
-  }
-
-  .xl\:cu-m-6 {
-    margin: var(--canon-space-6);
-  }
-
-  .xl\:cu-m-7 {
-    margin: var(--canon-space-7);
-  }
-
-  .xl\:cu-m-8 {
-    margin: var(--canon-space-8);
-  }
-
-  .xl\:cu-m-9 {
-    margin: var(--canon-space-9);
-  }
-
-  .xl\:cu-m-10 {
-    margin: var(--canon-space-10);
-  }
-
-  .xl\:cu-m-11 {
-    margin: var(--canon-space-11);
-  }
-
-  .xl\:cu-m-12 {
-    margin: var(--canon-space-12);
-  }
-
-  .xl\:cu-m-13 {
-    margin: var(--canon-space-13);
-  }
-
-  .xl\:cu-m-14 {
-    margin: var(--canon-space-14);
-  }
-}
diff --git a/packages/canon/src/css/utilities/mb.css b/packages/canon/src/css/utilities/mb.css
deleted file mode 100644
index 4fbf8d614f..0000000000
--- a/packages/canon/src/css/utilities/mb.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.cu-mb {
-  margin-bottom: var(--pb);
-}
-
-.cu-mb-0\.5 {
-  margin-bottom: var(--canon-space-0_5);
-}
-
-.cu-mb-1 {
-  margin-bottom: var(--canon-space-1);
-}
-
-.cu-mb-1\.5 {
-  margin-bottom: var(--canon-space-1_5);
-}
-
-.cu-mb-2 {
-  margin-bottom: var(--canon-space-2);
-}
-
-.cu-mb-3 {
-  margin-bottom: var(--canon-space-3);
-}
-
-.cu-mb-4 {
-  margin-bottom: var(--canon-space-4);
-}
-
-.cu-mb-5 {
-  margin-bottom: var(--canon-space-5);
-}
-
-.cu-mb-6 {
-  margin-bottom: var(--canon-space-6);
-}
-
-.cu-mb-7 {
-  margin-bottom: var(--canon-space-7);
-}
-
-.cu-mb-8 {
-  margin-bottom: var(--canon-space-8);
-}
-
-.cu-mb-9 {
-  margin-bottom: var(--canon-space-9);
-}
-
-.cu-mb-10 {
-  margin-bottom: var(--canon-space-10);
-}
-
-.cu-mb-11 {
-  margin-bottom: var(--canon-space-11);
-}
-
-.cu-mb-12 {
-  margin-bottom: var(--canon-space-12);
-}
-
-.cu-mb-13 {
-  margin-bottom: var(--canon-space-13);
-}
-
-.cu-mb-14 {
-  margin-bottom: var(--canon-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
-  .xs\:cu-mb {
-    margin-bottom: var(--pb-xs);
-  }
-
-  .xs\:cu-mb-0\.5 {
-    margin-bottom: var(--canon-space-0_5);
-  }
-
-  .xs\:cu-mb-1 {
-    margin-bottom: var(--canon-space-1);
-  }
-
-  .xs\:cu-mb-1\.5 {
-    margin-bottom: var(--canon-space-1_5);
-  }
-
-  .xs\:cu-mb-2 {
-    margin-bottom: var(--canon-space-2);
-  }
-
-  .xs\:cu-mb-3 {
-    margin-bottom: var(--canon-space-3);
-  }
-
-  .xs\:cu-mb-4 {
-    margin-bottom: var(--canon-space-4);
-  }
-
-  .xs\:cu-mb-5 {
-    margin-bottom: var(--canon-space-5);
-  }
-
-  .xs\:cu-mb-6 {
-    margin-bottom: var(--canon-space-6);
-  }
-
-  .xs\:cu-mb-7 {
-    margin-bottom: var(--canon-space-7);
-  }
-
-  .xs\:cu-mb-8 {
-    margin-bottom: var(--canon-space-8);
-  }
-
-  .xs\:cu-mb-9 {
-    margin-bottom: var(--canon-space-9);
-  }
-
-  .xs\:cu-mb-10 {
-    margin-bottom: var(--canon-space-10);
-  }
-
-  .xs\:cu-mb-11 {
-    margin-bottom: var(--canon-space-11);
-  }
-
-  .xs\:cu-mb-12 {
-    margin-bottom: var(--canon-space-12);
-  }
-
-  .xs\:cu-mb-13 {
-    margin-bottom: var(--canon-space-13);
-  }
-
-  .xs\:cu-mb-14 {
-    margin-bottom: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint sm */
-@media (min-width: 768px) {
-  .sm\:cu-mb {
-    margin-bottom: var(--pb-sm);
-  }
-
-  .sm\:cu-mb-0\.5 {
-    margin-bottom: var(--canon-space-0_5);
-  }
-
-  .sm\:cu-mb-1 {
-    margin-bottom: var(--canon-space-1);
-  }
-
-  .sm\:cu-mb-1\.5 {
-    margin-bottom: var(--canon-space-1_5);
-  }
-
-  .sm\:cu-mb-2 {
-    margin-bottom: var(--canon-space-2);
-  }
-
-  .sm\:cu-mb-3 {
-    margin-bottom: var(--canon-space-3);
-  }
-
-  .sm\:cu-mb-4 {
-    margin-bottom: var(--canon-space-4);
-  }
-
-  .sm\:cu-mb-5 {
-    margin-bottom: var(--canon-space-5);
-  }
-
-  .sm\:cu-mb-6 {
-    margin-bottom: var(--canon-space-6);
-  }
-
-  .sm\:cu-mb-7 {
-    margin-bottom: var(--canon-space-7);
-  }
-
-  .sm\:cu-mb-8 {
-    margin-bottom: var(--canon-space-8);
-  }
-
-  .sm\:cu-mb-9 {
-    margin-bottom: var(--canon-space-9);
-  }
-
-  .sm\:cu-mb-10 {
-    margin-bottom: var(--canon-space-10);
-  }
-
-  .sm\:cu-mb-11 {
-    margin-bottom: var(--canon-space-11);
-  }
-
-  .sm\:cu-mb-12 {
-    margin-bottom: var(--canon-space-12);
-  }
-
-  .sm\:cu-mb-13 {
-    margin-bottom: var(--canon-space-13);
-  }
-
-  .sm\:cu-mb-14 {
-    margin-bottom: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
-  .md\:cu-mb {
-    margin-bottom: var(--pb-md);
-  }
-
-  .md\:cu-mb-0\.5 {
-    margin-bottom: var(--canon-space-0_5);
-  }
-
-  .md\:cu-mb-1 {
-    margin-bottom: var(--canon-space-1);
-  }
-
-  .md\:cu-mb-1\.5 {
-    margin-bottom: var(--canon-space-1_5);
-  }
-
-  .md\:cu-mb-2 {
-    margin-bottom: var(--canon-space-2);
-  }
-
-  .md\:cu-mb-3 {
-    margin-bottom: var(--canon-space-3);
-  }
-
-  .md\:cu-mb-4 {
-    margin-bottom: var(--canon-space-4);
-  }
-
-  .md\:cu-mb-5 {
-    margin-bottom: var(--canon-space-5);
-  }
-
-  .md\:cu-mb-6 {
-    margin-bottom: var(--canon-space-6);
-  }
-
-  .md\:cu-mb-7 {
-    margin-bottom: var(--canon-space-7);
-  }
-
-  .md\:cu-mb-8 {
-    margin-bottom: var(--canon-space-8);
-  }
-
-  .md\:cu-mb-9 {
-    margin-bottom: var(--canon-space-9);
-  }
-
-  .md\:cu-mb-10 {
-    margin-bottom: var(--canon-space-10);
-  }
-
-  .md\:cu-mb-11 {
-    margin-bottom: var(--canon-space-11);
-  }
-
-  .md\:cu-mb-12 {
-    margin-bottom: var(--canon-space-12);
-  }
-
-  .md\:cu-mb-13 {
-    margin-bottom: var(--canon-space-13);
-  }
-
-  .md\:cu-mb-14 {
-    margin-bottom: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
-  .lg\:cu-mb {
-    margin-bottom: var(--pb-lg);
-  }
-
-  .lg\:cu-mb-0\.5 {
-    margin-bottom: var(--canon-space-0_5);
-  }
-
-  .lg\:cu-mb-1 {
-    margin-bottom: var(--canon-space-1);
-  }
-
-  .lg\:cu-mb-1\.5 {
-    margin-bottom: var(--canon-space-1_5);
-  }
-
-  .lg\:cu-mb-2 {
-    margin-bottom: var(--canon-space-2);
-  }
-
-  .lg\:cu-mb-3 {
-    margin-bottom: var(--canon-space-3);
-  }
-
-  .lg\:cu-mb-4 {
-    margin-bottom: var(--canon-space-4);
-  }
-
-  .lg\:cu-mb-5 {
-    margin-bottom: var(--canon-space-5);
-  }
-
-  .lg\:cu-mb-6 {
-    margin-bottom: var(--canon-space-6);
-  }
-
-  .lg\:cu-mb-7 {
-    margin-bottom: var(--canon-space-7);
-  }
-
-  .lg\:cu-mb-8 {
-    margin-bottom: var(--canon-space-8);
-  }
-
-  .lg\:cu-mb-9 {
-    margin-bottom: var(--canon-space-9);
-  }
-
-  .lg\:cu-mb-10 {
-    margin-bottom: var(--canon-space-10);
-  }
-
-  .lg\:cu-mb-11 {
-    margin-bottom: var(--canon-space-11);
-  }
-
-  .lg\:cu-mb-12 {
-    margin-bottom: var(--canon-space-12);
-  }
-
-  .lg\:cu-mb-13 {
-    margin-bottom: var(--canon-space-13);
-  }
-
-  .lg\:cu-mb-14 {
-    margin-bottom: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
-  .xl\:cu-mb {
-    margin-bottom: var(--pb-xl);
-  }
-
-  .xl\:cu-mb-0\.5 {
-    margin-bottom: var(--canon-space-0_5);
-  }
-
-  .xl\:cu-mb-1 {
-    margin-bottom: var(--canon-space-1);
-  }
-
-  .xl\:cu-mb-1\.5 {
-    margin-bottom: var(--canon-space-1_5);
-  }
-
-  .xl\:cu-mb-2 {
-    margin-bottom: var(--canon-space-2);
-  }
-
-  .xl\:cu-mb-3 {
-    margin-bottom: var(--canon-space-3);
-  }
-
-  .xl\:cu-mb-4 {
-    margin-bottom: var(--canon-space-4);
-  }
-
-  .xl\:cu-mb-5 {
-    margin-bottom: var(--canon-space-5);
-  }
-
-  .xl\:cu-mb-6 {
-    margin-bottom: var(--canon-space-6);
-  }
-
-  .xl\:cu-mb-7 {
-    margin-bottom: var(--canon-space-7);
-  }
-
-  .xl\:cu-mb-8 {
-    margin-bottom: var(--canon-space-8);
-  }
-
-  .xl\:cu-mb-9 {
-    margin-bottom: var(--canon-space-9);
-  }
-
-  .xl\:cu-mb-10 {
-    margin-bottom: var(--canon-space-10);
-  }
-
-  .xl\:cu-mb-11 {
-    margin-bottom: var(--canon-space-11);
-  }
-
-  .xl\:cu-mb-12 {
-    margin-bottom: var(--canon-space-12);
-  }
-
-  .xl\:cu-mb-13 {
-    margin-bottom: var(--canon-space-13);
-  }
-
-  .xl\:cu-mb-14 {
-    margin-bottom: var(--canon-space-14);
-  }
-}
diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css
index 981530f0e3..2230865466 100644
--- a/packages/canon/src/css/utilities/md.css
+++ b/packages/canon/src/css/utilities/md.css
@@ -373,6 +373,486 @@
       justify-content: stretch;
     }
 
+    .cu-md-m-2xl {
+      margin: var(--canon-space-12);
+    }
+
+    .cu-md-m-2xs {
+      margin: var(--canon-space-2);
+    }
+
+    .cu-md-m-lg {
+      margin: var(--canon-space-8);
+    }
+
+    .cu-md-m-md {
+      margin: var(--canon-space-6);
+    }
+
+    .cu-md-m-none {
+      margin: 0;
+    }
+
+    .cu-md-m-sm {
+      margin: var(--canon-space-4);
+    }
+
+    .cu-md-m-xl {
+      margin: var(--canon-space-10);
+    }
+
+    .cu-md-m-xs {
+      margin: var(--canon-space-3);
+    }
+
+    .cu-md-mb-2xl {
+      margin-bottom: var(--canon-space-12);
+    }
+
+    .cu-md-mb-2xs {
+      margin-bottom: var(--canon-space-2);
+    }
+
+    .cu-md-mb-lg {
+      margin-bottom: var(--canon-space-8);
+    }
+
+    .cu-md-mb-md {
+      margin-bottom: var(--canon-space-6);
+    }
+
+    .cu-md-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-md-mb-sm {
+      margin-bottom: var(--canon-space-4);
+    }
+
+    .cu-md-mb-xl {
+      margin-bottom: var(--canon-space-10);
+    }
+
+    .cu-md-mb-xs {
+      margin-bottom: var(--canon-space-3);
+    }
+
+    .cu-md-ml-2xl {
+      margin-left: var(--canon-space-12);
+    }
+
+    .cu-md-ml-2xs {
+      margin-left: var(--canon-space-2);
+    }
+
+    .cu-md-ml-lg {
+      margin-left: var(--canon-space-8);
+    }
+
+    .cu-md-ml-md {
+      margin-left: var(--canon-space-6);
+    }
+
+    .cu-md-ml-none {
+      margin-left: 0;
+    }
+
+    .cu-md-ml-sm {
+      margin-left: var(--canon-space-4);
+    }
+
+    .cu-md-ml-xl {
+      margin-left: var(--canon-space-10);
+    }
+
+    .cu-md-ml-xs {
+      margin-left: var(--canon-space-3);
+    }
+
+    .cu-md-mr-2xl {
+      margin-right: var(--canon-space-12);
+    }
+
+    .cu-md-mr-2xs {
+      margin-right: var(--canon-space-2);
+    }
+
+    .cu-md-mr-lg {
+      margin-right: var(--canon-space-8);
+    }
+
+    .cu-md-mr-md {
+      margin-right: var(--canon-space-6);
+    }
+
+    .cu-md-mr-none {
+      margin-right: 0;
+    }
+
+    .cu-md-mr-sm {
+      margin-right: var(--canon-space-4);
+    }
+
+    .cu-md-mr-xl {
+      margin-right: var(--canon-space-10);
+    }
+
+    .cu-md-mr-xs {
+      margin-right: var(--canon-space-3);
+    }
+
+    .cu-md-mt-2xl {
+      margin-top: var(--canon-space-12);
+    }
+
+    .cu-md-mt-2xs {
+      margin-top: var(--canon-space-2);
+    }
+
+    .cu-md-mt-lg {
+      margin-top: var(--canon-space-8);
+    }
+
+    .cu-md-mt-md {
+      margin-top: var(--canon-space-6);
+    }
+
+    .cu-md-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-md-mt-sm {
+      margin-top: var(--canon-space-4);
+    }
+
+    .cu-md-mt-xl {
+      margin-top: var(--canon-space-10);
+    }
+
+    .cu-md-mt-xs {
+      margin-top: var(--canon-space-3);
+    }
+
+    .cu-md-mx-2xl {
+      margin-left: var(--canon-space-12);
+      margin-right: var(--canon-space-12);
+    }
+
+    .cu-md-mx-2xs {
+      margin-left: var(--canon-space-2);
+      margin-right: var(--canon-space-2);
+    }
+
+    .cu-md-mx-lg {
+      margin-left: var(--canon-space-8);
+      margin-right: var(--canon-space-8);
+    }
+
+    .cu-md-mx-md {
+      margin-left: var(--canon-space-6);
+      margin-right: var(--canon-space-6);
+    }
+
+    .cu-md-mx-none {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .cu-md-mx-sm {
+      margin-left: var(--canon-space-4);
+      margin-right: var(--canon-space-4);
+    }
+
+    .cu-md-mx-xl {
+      margin-left: var(--canon-space-10);
+      margin-right: var(--canon-space-10);
+    }
+
+    .cu-md-mx-xs {
+      margin-left: var(--canon-space-3);
+      margin-right: var(--canon-space-3);
+    }
+
+    .cu-md-my-2xl {
+      margin-top: var(--canon-space-12);
+      margin-bottom: var(--canon-space-12);
+    }
+
+    .cu-md-my-2xs {
+      margin-top: var(--canon-space-2);
+      margin-bottom: var(--canon-space-2);
+    }
+
+    .cu-md-my-lg {
+      margin-top: var(--canon-space-8);
+      margin-bottom: var(--canon-space-8);
+    }
+
+    .cu-md-my-md {
+      margin-top: var(--canon-space-6);
+      margin-bottom: var(--canon-space-6);
+    }
+
+    .cu-md-my-none {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .cu-md-my-sm {
+      margin-top: var(--canon-space-4);
+      margin-bottom: var(--canon-space-4);
+    }
+
+    .cu-md-my-xl {
+      margin-top: var(--canon-space-10);
+      margin-bottom: var(--canon-space-10);
+    }
+
+    .cu-md-my-xs {
+      margin-top: var(--canon-space-3);
+      margin-bottom: var(--canon-space-3);
+    }
+
+    .cu-md-p-2xl {
+      padding: var(--canon-space-12);
+    }
+
+    .cu-md-p-2xs {
+      padding: var(--canon-space-2);
+    }
+
+    .cu-md-p-lg {
+      padding: var(--canon-space-8);
+    }
+
+    .cu-md-p-md {
+      padding: var(--canon-space-6);
+    }
+
+    .cu-md-p-none {
+      padding: 0;
+    }
+
+    .cu-md-p-sm {
+      padding: var(--canon-space-4);
+    }
+
+    .cu-md-p-xl {
+      padding: var(--canon-space-10);
+    }
+
+    .cu-md-p-xs {
+      padding: var(--canon-space-3);
+    }
+
+    .cu-md-pb-2xl {
+      padding-bottom: var(--canon-space-12);
+    }
+
+    .cu-md-pb-2xs {
+      padding-bottom: var(--canon-space-2);
+    }
+
+    .cu-md-pb-lg {
+      padding-bottom: var(--canon-space-8);
+    }
+
+    .cu-md-pb-md {
+      padding-bottom: var(--canon-space-6);
+    }
+
+    .cu-md-pb-none {
+      padding-bottom: 0;
+    }
+
+    .cu-md-pb-sm {
+      padding-bottom: var(--canon-space-4);
+    }
+
+    .cu-md-pb-xl {
+      padding-bottom: var(--canon-space-10);
+    }
+
+    .cu-md-pb-xs {
+      padding-bottom: var(--canon-space-3);
+    }
+
+    .cu-md-pl-2xl {
+      padding-left: var(--canon-space-12);
+    }
+
+    .cu-md-pl-2xs {
+      padding-left: var(--canon-space-2);
+    }
+
+    .cu-md-pl-lg {
+      padding-left: var(--canon-space-8);
+    }
+
+    .cu-md-pl-md {
+      padding-left: var(--canon-space-6);
+    }
+
+    .cu-md-pl-none {
+      padding-left: 0;
+    }
+
+    .cu-md-pl-sm {
+      padding-left: var(--canon-space-4);
+    }
+
+    .cu-md-pl-xl {
+      padding-left: var(--canon-space-10);
+    }
+
+    .cu-md-pl-xs {
+      padding-left: var(--canon-space-3);
+    }
+
+    .cu-md-pr-2xl {
+      padding-right: var(--canon-space-12);
+    }
+
+    .cu-md-pr-2xs {
+      padding-right: var(--canon-space-2);
+    }
+
+    .cu-md-pr-lg {
+      padding-right: var(--canon-space-8);
+    }
+
+    .cu-md-pr-md {
+      padding-right: var(--canon-space-6);
+    }
+
+    .cu-md-pr-none {
+      padding-right: 0;
+    }
+
+    .cu-md-pr-sm {
+      padding-right: var(--canon-space-4);
+    }
+
+    .cu-md-pr-xl {
+      padding-right: var(--canon-space-10);
+    }
+
+    .cu-md-pr-xs {
+      padding-right: var(--canon-space-3);
+    }
+
+    .cu-md-pt-2xl {
+      padding-top: var(--canon-space-12);
+    }
+
+    .cu-md-pt-2xs {
+      padding-top: var(--canon-space-2);
+    }
+
+    .cu-md-pt-lg {
+      padding-top: var(--canon-space-8);
+    }
+
+    .cu-md-pt-md {
+      padding-top: var(--canon-space-6);
+    }
+
+    .cu-md-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-md-pt-sm {
+      padding-top: var(--canon-space-4);
+    }
+
+    .cu-md-pt-xl {
+      padding-top: var(--canon-space-10);
+    }
+
+    .cu-md-pt-xs {
+      padding-top: var(--canon-space-3);
+    }
+
+    .cu-md-px-2xl {
+      padding-left: var(--canon-space-12);
+      padding-right: var(--canon-space-12);
+    }
+
+    .cu-md-px-2xs {
+      padding-left: var(--canon-space-2);
+      padding-right: var(--canon-space-2);
+    }
+
+    .cu-md-px-lg {
+      padding-left: var(--canon-space-8);
+      padding-right: var(--canon-space-8);
+    }
+
+    .cu-md-px-md {
+      padding-left: var(--canon-space-6);
+      padding-right: var(--canon-space-6);
+    }
+
+    .cu-md-px-none {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .cu-md-px-sm {
+      padding-left: var(--canon-space-4);
+      padding-right: var(--canon-space-4);
+    }
+
+    .cu-md-px-xl {
+      padding-left: var(--canon-space-10);
+      padding-right: var(--canon-space-10);
+    }
+
+    .cu-md-px-xs {
+      padding-left: var(--canon-space-3);
+      padding-right: var(--canon-space-3);
+    }
+
+    .cu-md-py-2xl {
+      padding-top: var(--canon-space-12);
+      padding-bottom: var(--canon-space-12);
+    }
+
+    .cu-md-py-2xs {
+      padding-top: var(--canon-space-2);
+      padding-bottom: var(--canon-space-2);
+    }
+
+    .cu-md-py-lg {
+      padding-top: var(--canon-space-8);
+      padding-bottom: var(--canon-space-8);
+    }
+
+    .cu-md-py-md {
+      padding-top: var(--canon-space-6);
+      padding-bottom: var(--canon-space-6);
+    }
+
+    .cu-md-py-none {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .cu-md-py-sm {
+      padding-top: var(--canon-space-4);
+      padding-bottom: var(--canon-space-4);
+    }
+
+    .cu-md-py-xl {
+      padding-top: var(--canon-space-10);
+      padding-bottom: var(--canon-space-10);
+    }
+
+    .cu-md-py-xs {
+      padding-top: var(--canon-space-3);
+      padding-bottom: var(--canon-space-3);
+    }
+
     .cu-md-rounded-2xl {
       border-radius: var(--canon-radius-full);
     }
diff --git a/packages/canon/src/css/utilities/ml.css b/packages/canon/src/css/utilities/ml.css
deleted file mode 100644
index 887c464df1..0000000000
--- a/packages/canon/src/css/utilities/ml.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.cu-ml {
-  margin-left: var(--pl);
-}
-
-.cu-ml-0\.5 {
-  margin-left: var(--canon-space-0_5);
-}
-
-.cu-ml-1 {
-  margin-left: var(--canon-space-1);
-}
-
-.cu-ml-1\.5 {
-  margin-left: var(--canon-space-1_5);
-}
-
-.cu-ml-2 {
-  margin-left: var(--canon-space-2);
-}
-
-.cu-ml-3 {
-  margin-left: var(--canon-space-3);
-}
-
-.cu-ml-4 {
-  margin-left: var(--canon-space-4);
-}
-
-.cu-ml-5 {
-  margin-left: var(--canon-space-5);
-}
-
-.cu-ml-6 {
-  margin-left: var(--canon-space-6);
-}
-
-.cu-ml-7 {
-  margin-left: var(--canon-space-7);
-}
-
-.cu-ml-8 {
-  margin-left: var(--canon-space-8);
-}
-
-.cu-ml-9 {
-  margin-left: var(--canon-space-9);
-}
-
-.cu-ml-10 {
-  margin-left: var(--canon-space-10);
-}
-
-.cu-ml-11 {
-  margin-left: var(--canon-space-11);
-}
-
-.cu-ml-12 {
-  margin-left: var(--canon-space-12);
-}
-
-.cu-ml-13 {
-  margin-left: var(--canon-space-13);
-}
-
-.cu-ml-14 {
-  margin-left: var(--canon-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
-  .xs\:cu-ml {
-    margin-left: var(--pl-xs);
-  }
-
-  .xs\:cu-ml-0\.5 {
-    margin-left: var(--canon-space-0_5);
-  }
-
-  .xs\:cu-ml-1 {
-    margin-left: var(--canon-space-1);
-  }
-
-  .xs\:cu-ml-1\.5 {
-    margin-left: var(--canon-space-1_5);
-  }
-
-  .xs\:cu-ml-2 {
-    margin-left: var(--canon-space-2);
-  }
-
-  .xs\:cu-ml-3 {
-    margin-left: var(--canon-space-3);
-  }
-
-  .xs\:cu-ml-4 {
-    margin-left: var(--canon-space-4);
-  }
-
-  .xs\:cu-ml-5 {
-    margin-left: var(--canon-space-5);
-  }
-
-  .xs\:cu-ml-6 {
-    margin-left: var(--canon-space-6);
-  }
-
-  .xs\:cu-ml-7 {
-    margin-left: var(--canon-space-7);
-  }
-
-  .xs\:cu-ml-8 {
-    margin-left: var(--canon-space-8);
-  }
-
-  .xs\:cu-ml-9 {
-    margin-left: var(--canon-space-9);
-  }
-
-  .xs\:cu-ml-10 {
-    margin-left: var(--canon-space-10);
-  }
-
-  .xs\:cu-ml-11 {
-    margin-left: var(--canon-space-11);
-  }
-
-  .xs\:cu-ml-12 {
-    margin-left: var(--canon-space-12);
-  }
-
-  .xs\:cu-ml-13 {
-    margin-left: var(--canon-space-13);
-  }
-
-  .xs\:cu-ml-14 {
-    margin-left: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint sm */
-@media (min-width: 768px) {
-  .sm\:cu-ml {
-    margin-left: var(--pl-sm);
-  }
-
-  .sm\:cu-ml-0\.5 {
-    margin-left: var(--canon-space-0_5);
-  }
-
-  .sm\:cu-ml-1 {
-    margin-left: var(--canon-space-1);
-  }
-
-  .sm\:cu-ml-1\.5 {
-    margin-left: var(--canon-space-1_5);
-  }
-
-  .sm\:cu-ml-2 {
-    margin-left: var(--canon-space-2);
-  }
-
-  .sm\:cu-ml-3 {
-    margin-left: var(--canon-space-3);
-  }
-
-  .sm\:cu-ml-4 {
-    margin-left: var(--canon-space-4);
-  }
-
-  .sm\:cu-ml-5 {
-    margin-left: var(--canon-space-5);
-  }
-
-  .sm\:cu-ml-6 {
-    margin-left: var(--canon-space-6);
-  }
-
-  .sm\:cu-ml-7 {
-    margin-left: var(--canon-space-7);
-  }
-
-  .sm\:cu-ml-8 {
-    margin-left: var(--canon-space-8);
-  }
-
-  .sm\:cu-ml-9 {
-    margin-left: var(--canon-space-9);
-  }
-
-  .sm\:cu-ml-10 {
-    margin-left: var(--canon-space-10);
-  }
-
-  .sm\:cu-ml-11 {
-    margin-left: var(--canon-space-11);
-  }
-
-  .sm\:cu-ml-12 {
-    margin-left: var(--canon-space-12);
-  }
-
-  .sm\:cu-ml-13 {
-    margin-left: var(--canon-space-13);
-  }
-
-  .sm\:cu-ml-14 {
-    margin-left: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
-  .md\:cu-ml {
-    margin-left: var(--pl-md);
-  }
-
-  .md\:cu-ml-0\.5 {
-    margin-left: var(--canon-space-0_5);
-  }
-
-  .md\:cu-ml-1 {
-    margin-left: var(--canon-space-1);
-  }
-
-  .md\:cu-ml-1\.5 {
-    margin-left: var(--canon-space-1_5);
-  }
-
-  .md\:cu-ml-2 {
-    margin-left: var(--canon-space-2);
-  }
-
-  .md\:cu-ml-3 {
-    margin-left: var(--canon-space-3);
-  }
-
-  .md\:cu-ml-4 {
-    margin-left: var(--canon-space-4);
-  }
-
-  .md\:cu-ml-5 {
-    margin-left: var(--canon-space-5);
-  }
-
-  .md\:cu-ml-6 {
-    margin-left: var(--canon-space-6);
-  }
-
-  .md\:cu-ml-7 {
-    margin-left: var(--canon-space-7);
-  }
-
-  .md\:cu-ml-8 {
-    margin-left: var(--canon-space-8);
-  }
-
-  .md\:cu-ml-9 {
-    margin-left: var(--canon-space-9);
-  }
-
-  .md\:cu-ml-10 {
-    margin-left: var(--canon-space-10);
-  }
-
-  .md\:cu-ml-11 {
-    margin-left: var(--canon-space-11);
-  }
-
-  .md\:cu-ml-12 {
-    margin-left: var(--canon-space-12);
-  }
-
-  .md\:cu-ml-13 {
-    margin-left: var(--canon-space-13);
-  }
-
-  .md\:cu-ml-14 {
-    margin-left: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
-  .lg\:cu-ml {
-    margin-left: var(--pl-lg);
-  }
-
-  .lg\:cu-ml-0\.5 {
-    margin-left: var(--canon-space-0_5);
-  }
-
-  .lg\:cu-ml-1 {
-    margin-left: var(--canon-space-1);
-  }
-
-  .lg\:cu-ml-1\.5 {
-    margin-left: var(--canon-space-1_5);
-  }
-
-  .lg\:cu-ml-2 {
-    margin-left: var(--canon-space-2);
-  }
-
-  .lg\:cu-ml-3 {
-    margin-left: var(--canon-space-3);
-  }
-
-  .lg\:cu-ml-4 {
-    margin-left: var(--canon-space-4);
-  }
-
-  .lg\:cu-ml-5 {
-    margin-left: var(--canon-space-5);
-  }
-
-  .lg\:cu-ml-6 {
-    margin-left: var(--canon-space-6);
-  }
-
-  .lg\:cu-ml-7 {
-    margin-left: var(--canon-space-7);
-  }
-
-  .lg\:cu-ml-8 {
-    margin-left: var(--canon-space-8);
-  }
-
-  .lg\:cu-ml-9 {
-    margin-left: var(--canon-space-9);
-  }
-
-  .lg\:cu-ml-10 {
-    margin-left: var(--canon-space-10);
-  }
-
-  .lg\:cu-ml-11 {
-    margin-left: var(--canon-space-11);
-  }
-
-  .lg\:cu-ml-12 {
-    margin-left: var(--canon-space-12);
-  }
-
-  .lg\:cu-ml-13 {
-    margin-left: var(--canon-space-13);
-  }
-
-  .lg\:cu-ml-14 {
-    margin-left: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
-  .xl\:cu-ml {
-    margin-left: var(--pl-xl);
-  }
-
-  .xl\:cu-ml-0\.5 {
-    margin-left: var(--canon-space-0_5);
-  }
-
-  .xl\:cu-ml-1 {
-    margin-left: var(--canon-space-1);
-  }
-
-  .xl\:cu-ml-1\.5 {
-    margin-left: var(--canon-space-1_5);
-  }
-
-  .xl\:cu-ml-2 {
-    margin-left: var(--canon-space-2);
-  }
-
-  .xl\:cu-ml-3 {
-    margin-left: var(--canon-space-3);
-  }
-
-  .xl\:cu-ml-4 {
-    margin-left: var(--canon-space-4);
-  }
-
-  .xl\:cu-ml-5 {
-    margin-left: var(--canon-space-5);
-  }
-
-  .xl\:cu-ml-6 {
-    margin-left: var(--canon-space-6);
-  }
-
-  .xl\:cu-ml-7 {
-    margin-left: var(--canon-space-7);
-  }
-
-  .xl\:cu-ml-8 {
-    margin-left: var(--canon-space-8);
-  }
-
-  .xl\:cu-ml-9 {
-    margin-left: var(--canon-space-9);
-  }
-
-  .xl\:cu-ml-10 {
-    margin-left: var(--canon-space-10);
-  }
-
-  .xl\:cu-ml-11 {
-    margin-left: var(--canon-space-11);
-  }
-
-  .xl\:cu-ml-12 {
-    margin-left: var(--canon-space-12);
-  }
-
-  .xl\:cu-ml-13 {
-    margin-left: var(--canon-space-13);
-  }
-
-  .xl\:cu-ml-14 {
-    margin-left: var(--canon-space-14);
-  }
-}
diff --git a/packages/canon/src/css/utilities/mr.css b/packages/canon/src/css/utilities/mr.css
deleted file mode 100644
index a2c0f8668b..0000000000
--- a/packages/canon/src/css/utilities/mr.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.cu-mr {
-  margin-right: var(--pr);
-}
-
-.cu-mr-0\.5 {
-  margin-right: var(--canon-space-0_5);
-}
-
-.cu-mr-1 {
-  margin-right: var(--canon-space-1);
-}
-
-.cu-mr-1\.5 {
-  margin-right: var(--canon-space-1_5);
-}
-
-.cu-mr-2 {
-  margin-right: var(--canon-space-2);
-}
-
-.cu-mr-3 {
-  margin-right: var(--canon-space-3);
-}
-
-.cu-mr-4 {
-  margin-right: var(--canon-space-4);
-}
-
-.cu-mr-5 {
-  margin-right: var(--canon-space-5);
-}
-
-.cu-mr-6 {
-  margin-right: var(--canon-space-6);
-}
-
-.cu-mr-7 {
-  margin-right: var(--canon-space-7);
-}
-
-.cu-mr-8 {
-  margin-right: var(--canon-space-8);
-}
-
-.cu-mr-9 {
-  margin-right: var(--canon-space-9);
-}
-
-.cu-mr-10 {
-  margin-right: var(--canon-space-10);
-}
-
-.cu-mr-11 {
-  margin-right: var(--canon-space-11);
-}
-
-.cu-mr-12 {
-  margin-right: var(--canon-space-12);
-}
-
-.cu-mr-13 {
-  margin-right: var(--canon-space-13);
-}
-
-.cu-mr-14 {
-  margin-right: var(--canon-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
-  .xs\:cu-mr {
-    margin-right: var(--pr-xs);
-  }
-
-  .xs\:cu-mr-0\.5 {
-    margin-right: var(--canon-space-0_5);
-  }
-
-  .xs\:cu-mr-1 {
-    margin-right: var(--canon-space-1);
-  }
-
-  .xs\:cu-mr-1\.5 {
-    margin-right: var(--canon-space-1_5);
-  }
-
-  .xs\:cu-mr-2 {
-    margin-right: var(--canon-space-2);
-  }
-
-  .xs\:cu-mr-3 {
-    margin-right: var(--canon-space-3);
-  }
-
-  .xs\:cu-mr-4 {
-    margin-right: var(--canon-space-4);
-  }
-
-  .xs\:cu-mr-5 {
-    margin-right: var(--canon-space-5);
-  }
-
-  .xs\:cu-mr-6 {
-    margin-right: var(--canon-space-6);
-  }
-
-  .xs\:cu-mr-7 {
-    margin-right: var(--canon-space-7);
-  }
-
-  .xs\:cu-mr-8 {
-    margin-right: var(--canon-space-8);
-  }
-
-  .xs\:cu-mr-9 {
-    margin-right: var(--canon-space-9);
-  }
-
-  .xs\:cu-mr-10 {
-    margin-right: var(--canon-space-10);
-  }
-
-  .xs\:cu-mr-11 {
-    margin-right: var(--canon-space-11);
-  }
-
-  .xs\:cu-mr-12 {
-    margin-right: var(--canon-space-12);
-  }
-
-  .xs\:cu-mr-13 {
-    margin-right: var(--canon-space-13);
-  }
-
-  .xs\:cu-mr-14 {
-    margin-right: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint sm */
-@media (min-width: 768px) {
-  .sm\:cu-mr {
-    margin-right: var(--pr-sm);
-  }
-
-  .sm\:cu-mr-0\.5 {
-    margin-right: var(--canon-space-0_5);
-  }
-
-  .sm\:cu-mr-1 {
-    margin-right: var(--canon-space-1);
-  }
-
-  .sm\:cu-mr-1\.5 {
-    margin-right: var(--canon-space-1_5);
-  }
-
-  .sm\:cu-mr-2 {
-    margin-right: var(--canon-space-2);
-  }
-
-  .sm\:cu-mr-3 {
-    margin-right: var(--canon-space-3);
-  }
-
-  .sm\:cu-mr-4 {
-    margin-right: var(--canon-space-4);
-  }
-
-  .sm\:cu-mr-5 {
-    margin-right: var(--canon-space-5);
-  }
-
-  .sm\:cu-mr-6 {
-    margin-right: var(--canon-space-6);
-  }
-
-  .sm\:cu-mr-7 {
-    margin-right: var(--canon-space-7);
-  }
-
-  .sm\:cu-mr-8 {
-    margin-right: var(--canon-space-8);
-  }
-
-  .sm\:cu-mr-9 {
-    margin-right: var(--canon-space-9);
-  }
-
-  .sm\:cu-mr-10 {
-    margin-right: var(--canon-space-10);
-  }
-
-  .sm\:cu-mr-11 {
-    margin-right: var(--canon-space-11);
-  }
-
-  .sm\:cu-mr-12 {
-    margin-right: var(--canon-space-12);
-  }
-
-  .sm\:cu-mr-13 {
-    margin-right: var(--canon-space-13);
-  }
-
-  .sm\:cu-mr-14 {
-    margin-right: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
-  .md\:cu-mr {
-    margin-right: var(--pr-md);
-  }
-
-  .md\:cu-mr-0\.5 {
-    margin-right: var(--canon-space-0_5);
-  }
-
-  .md\:cu-mr-1 {
-    margin-right: var(--canon-space-1);
-  }
-
-  .md\:cu-mr-1\.5 {
-    margin-right: var(--canon-space-1_5);
-  }
-
-  .md\:cu-mr-2 {
-    margin-right: var(--canon-space-2);
-  }
-
-  .md\:cu-mr-3 {
-    margin-right: var(--canon-space-3);
-  }
-
-  .md\:cu-mr-4 {
-    margin-right: var(--canon-space-4);
-  }
-
-  .md\:cu-mr-5 {
-    margin-right: var(--canon-space-5);
-  }
-
-  .md\:cu-mr-6 {
-    margin-right: var(--canon-space-6);
-  }
-
-  .md\:cu-mr-7 {
-    margin-right: var(--canon-space-7);
-  }
-
-  .md\:cu-mr-8 {
-    margin-right: var(--canon-space-8);
-  }
-
-  .md\:cu-mr-9 {
-    margin-right: var(--canon-space-9);
-  }
-
-  .md\:cu-mr-10 {
-    margin-right: var(--canon-space-10);
-  }
-
-  .md\:cu-mr-11 {
-    margin-right: var(--canon-space-11);
-  }
-
-  .md\:cu-mr-12 {
-    margin-right: var(--canon-space-12);
-  }
-
-  .md\:cu-mr-13 {
-    margin-right: var(--canon-space-13);
-  }
-
-  .md\:cu-mr-14 {
-    margin-right: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
-  .lg\:cu-mr {
-    margin-right: var(--pr-lg);
-  }
-
-  .lg\:cu-mr-0\.5 {
-    margin-right: var(--canon-space-0_5);
-  }
-
-  .lg\:cu-mr-1 {
-    margin-right: var(--canon-space-1);
-  }
-
-  .lg\:cu-mr-1\.5 {
-    margin-right: var(--canon-space-1_5);
-  }
-
-  .lg\:cu-mr-2 {
-    margin-right: var(--canon-space-2);
-  }
-
-  .lg\:cu-mr-3 {
-    margin-right: var(--canon-space-3);
-  }
-
-  .lg\:cu-mr-4 {
-    margin-right: var(--canon-space-4);
-  }
-
-  .lg\:cu-mr-5 {
-    margin-right: var(--canon-space-5);
-  }
-
-  .lg\:cu-mr-6 {
-    margin-right: var(--canon-space-6);
-  }
-
-  .lg\:cu-mr-7 {
-    margin-right: var(--canon-space-7);
-  }
-
-  .lg\:cu-mr-8 {
-    margin-right: var(--canon-space-8);
-  }
-
-  .lg\:cu-mr-9 {
-    margin-right: var(--canon-space-9);
-  }
-
-  .lg\:cu-mr-10 {
-    margin-right: var(--canon-space-10);
-  }
-
-  .lg\:cu-mr-11 {
-    margin-right: var(--canon-space-11);
-  }
-
-  .lg\:cu-mr-12 {
-    margin-right: var(--canon-space-12);
-  }
-
-  .lg\:cu-mr-13 {
-    margin-right: var(--canon-space-13);
-  }
-
-  .lg\:cu-mr-14 {
-    margin-right: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
-  .xl\:cu-mr {
-    margin-right: var(--pr-xl);
-  }
-
-  .xl\:cu-mr-0\.5 {
-    margin-right: var(--canon-space-0_5);
-  }
-
-  .xl\:cu-mr-1 {
-    margin-right: var(--canon-space-1);
-  }
-
-  .xl\:cu-mr-1\.5 {
-    margin-right: var(--canon-space-1_5);
-  }
-
-  .xl\:cu-mr-2 {
-    margin-right: var(--canon-space-2);
-  }
-
-  .xl\:cu-mr-3 {
-    margin-right: var(--canon-space-3);
-  }
-
-  .xl\:cu-mr-4 {
-    margin-right: var(--canon-space-4);
-  }
-
-  .xl\:cu-mr-5 {
-    margin-right: var(--canon-space-5);
-  }
-
-  .xl\:cu-mr-6 {
-    margin-right: var(--canon-space-6);
-  }
-
-  .xl\:cu-mr-7 {
-    margin-right: var(--canon-space-7);
-  }
-
-  .xl\:cu-mr-8 {
-    margin-right: var(--canon-space-8);
-  }
-
-  .xl\:cu-mr-9 {
-    margin-right: var(--canon-space-9);
-  }
-
-  .xl\:cu-mr-10 {
-    margin-right: var(--canon-space-10);
-  }
-
-  .xl\:cu-mr-11 {
-    margin-right: var(--canon-space-11);
-  }
-
-  .xl\:cu-mr-12 {
-    margin-right: var(--canon-space-12);
-  }
-
-  .xl\:cu-mr-13 {
-    margin-right: var(--canon-space-13);
-  }
-
-  .xl\:cu-mr-14 {
-    margin-right: var(--canon-space-14);
-  }
-}
diff --git a/packages/canon/src/css/utilities/mt.css b/packages/canon/src/css/utilities/mt.css
deleted file mode 100644
index b74525b142..0000000000
--- a/packages/canon/src/css/utilities/mt.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.cu-mt {
-  margin-top: var(--pt);
-}
-
-.cu-mt-0\.5 {
-  margin-top: var(--canon-space-0_5);
-}
-
-.cu-mt-1 {
-  margin-top: var(--canon-space-1);
-}
-
-.cu-mt-1\.5 {
-  margin-top: var(--canon-space-1_5);
-}
-
-.cu-mt-2 {
-  margin-top: var(--canon-space-2);
-}
-
-.cu-mt-3 {
-  margin-top: var(--canon-space-3);
-}
-
-.cu-mt-4 {
-  margin-top: var(--canon-space-4);
-}
-
-.cu-mt-5 {
-  margin-top: var(--canon-space-5);
-}
-
-.cu-mt-6 {
-  margin-top: var(--canon-space-6);
-}
-
-.cu-mt-7 {
-  margin-top: var(--canon-space-7);
-}
-
-.cu-mt-8 {
-  margin-top: var(--canon-space-8);
-}
-
-.cu-mt-9 {
-  margin-top: var(--canon-space-9);
-}
-
-.cu-mt-10 {
-  margin-top: var(--canon-space-10);
-}
-
-.cu-mt-11 {
-  margin-top: var(--canon-space-11);
-}
-
-.cu-mt-12 {
-  margin-top: var(--canon-space-12);
-}
-
-.cu-mt-13 {
-  margin-top: var(--canon-space-13);
-}
-
-.cu-mt-14 {
-  margin-top: var(--canon-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
-  .xs\:cu-mt {
-    margin-top: var(--pt-xs);
-  }
-
-  .xs\:cu-mt-0\.5 {
-    margin-top: var(--canon-space-0_5);
-  }
-
-  .xs\:cu-mt-1 {
-    margin-top: var(--canon-space-1);
-  }
-
-  .xs\:cu-mt-1\.5 {
-    margin-top: var(--canon-space-1_5);
-  }
-
-  .xs\:cu-mt-2 {
-    margin-top: var(--canon-space-2);
-  }
-
-  .xs\:cu-mt-3 {
-    margin-top: var(--canon-space-3);
-  }
-
-  .xs\:cu-mt-4 {
-    margin-top: var(--canon-space-4);
-  }
-
-  .xs\:cu-mt-5 {
-    margin-top: var(--canon-space-5);
-  }
-
-  .xs\:cu-mt-6 {
-    margin-top: var(--canon-space-6);
-  }
-
-  .xs\:cu-mt-7 {
-    margin-top: var(--canon-space-7);
-  }
-
-  .xs\:cu-mt-8 {
-    margin-top: var(--canon-space-8);
-  }
-
-  .xs\:cu-mt-9 {
-    margin-top: var(--canon-space-9);
-  }
-
-  .xs\:cu-mt-10 {
-    margin-top: var(--canon-space-10);
-  }
-
-  .xs\:cu-mt-11 {
-    margin-top: var(--canon-space-11);
-  }
-
-  .xs\:cu-mt-12 {
-    margin-top: var(--canon-space-12);
-  }
-
-  .xs\:cu-mt-13 {
-    margin-top: var(--canon-space-13);
-  }
-
-  .xs\:cu-mt-14 {
-    margin-top: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint sm */
-@media (min-width: 768px) {
-  .sm\:cu-mt {
-    margin-top: var(--pt-sm);
-  }
-
-  .sm\:cu-mt-0\.5 {
-    margin-top: var(--canon-space-0_5);
-  }
-
-  .sm\:cu-mt-1 {
-    margin-top: var(--canon-space-1);
-  }
-
-  .sm\:cu-mt-1\.5 {
-    margin-top: var(--canon-space-1_5);
-  }
-
-  .sm\:cu-mt-2 {
-    margin-top: var(--canon-space-2);
-  }
-
-  .sm\:cu-mt-3 {
-    margin-top: var(--canon-space-3);
-  }
-
-  .sm\:cu-mt-4 {
-    margin-top: var(--canon-space-4);
-  }
-
-  .sm\:cu-mt-5 {
-    margin-top: var(--canon-space-5);
-  }
-
-  .sm\:cu-mt-6 {
-    margin-top: var(--canon-space-6);
-  }
-
-  .sm\:cu-mt-7 {
-    margin-top: var(--canon-space-7);
-  }
-
-  .sm\:cu-mt-8 {
-    margin-top: var(--canon-space-8);
-  }
-
-  .sm\:cu-mt-9 {
-    margin-top: var(--canon-space-9);
-  }
-
-  .sm\:cu-mt-10 {
-    margin-top: var(--canon-space-10);
-  }
-
-  .sm\:cu-mt-11 {
-    margin-top: var(--canon-space-11);
-  }
-
-  .sm\:cu-mt-12 {
-    margin-top: var(--canon-space-12);
-  }
-
-  .sm\:cu-mt-13 {
-    margin-top: var(--canon-space-13);
-  }
-
-  .sm\:cu-mt-14 {
-    margin-top: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
-  .md\:cu-mt {
-    margin-top: var(--pt-md);
-  }
-
-  .md\:cu-mt-0\.5 {
-    margin-top: var(--canon-space-0_5);
-  }
-
-  .md\:cu-mt-1 {
-    margin-top: var(--canon-space-1);
-  }
-
-  .md\:cu-mt-1\.5 {
-    margin-top: var(--canon-space-1_5);
-  }
-
-  .md\:cu-mt-2 {
-    margin-top: var(--canon-space-2);
-  }
-
-  .md\:cu-mt-3 {
-    margin-top: var(--canon-space-3);
-  }
-
-  .md\:cu-mt-4 {
-    margin-top: var(--canon-space-4);
-  }
-
-  .md\:cu-mt-5 {
-    margin-top: var(--canon-space-5);
-  }
-
-  .md\:cu-mt-6 {
-    margin-top: var(--canon-space-6);
-  }
-
-  .md\:cu-mt-7 {
-    margin-top: var(--canon-space-7);
-  }
-
-  .md\:cu-mt-8 {
-    margin-top: var(--canon-space-8);
-  }
-
-  .md\:cu-mt-9 {
-    margin-top: var(--canon-space-9);
-  }
-
-  .md\:cu-mt-10 {
-    margin-top: var(--canon-space-10);
-  }
-
-  .md\:cu-mt-11 {
-    margin-top: var(--canon-space-11);
-  }
-
-  .md\:cu-mt-12 {
-    margin-top: var(--canon-space-12);
-  }
-
-  .md\:cu-mt-13 {
-    margin-top: var(--canon-space-13);
-  }
-
-  .md\:cu-mt-14 {
-    margin-top: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
-  .lg\:cu-mt {
-    margin-top: var(--pt-lg);
-  }
-
-  .lg\:cu-mt-0\.5 {
-    margin-top: var(--canon-space-0_5);
-  }
-
-  .lg\:cu-mt-1 {
-    margin-top: var(--canon-space-1);
-  }
-
-  .lg\:cu-mt-1\.5 {
-    margin-top: var(--canon-space-1_5);
-  }
-
-  .lg\:cu-mt-2 {
-    margin-top: var(--canon-space-2);
-  }
-
-  .lg\:cu-mt-3 {
-    margin-top: var(--canon-space-3);
-  }
-
-  .lg\:cu-mt-4 {
-    margin-top: var(--canon-space-4);
-  }
-
-  .lg\:cu-mt-5 {
-    margin-top: var(--canon-space-5);
-  }
-
-  .lg\:cu-mt-6 {
-    margin-top: var(--canon-space-6);
-  }
-
-  .lg\:cu-mt-7 {
-    margin-top: var(--canon-space-7);
-  }
-
-  .lg\:cu-mt-8 {
-    margin-top: var(--canon-space-8);
-  }
-
-  .lg\:cu-mt-9 {
-    margin-top: var(--canon-space-9);
-  }
-
-  .lg\:cu-mt-10 {
-    margin-top: var(--canon-space-10);
-  }
-
-  .lg\:cu-mt-11 {
-    margin-top: var(--canon-space-11);
-  }
-
-  .lg\:cu-mt-12 {
-    margin-top: var(--canon-space-12);
-  }
-
-  .lg\:cu-mt-13 {
-    margin-top: var(--canon-space-13);
-  }
-
-  .lg\:cu-mt-14 {
-    margin-top: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
-  .xl\:cu-mt {
-    margin-top: var(--pt-xl);
-  }
-
-  .xl\:cu-mt-0\.5 {
-    margin-top: var(--canon-space-0_5);
-  }
-
-  .xl\:cu-mt-1 {
-    margin-top: var(--canon-space-1);
-  }
-
-  .xl\:cu-mt-1\.5 {
-    margin-top: var(--canon-space-1_5);
-  }
-
-  .xl\:cu-mt-2 {
-    margin-top: var(--canon-space-2);
-  }
-
-  .xl\:cu-mt-3 {
-    margin-top: var(--canon-space-3);
-  }
-
-  .xl\:cu-mt-4 {
-    margin-top: var(--canon-space-4);
-  }
-
-  .xl\:cu-mt-5 {
-    margin-top: var(--canon-space-5);
-  }
-
-  .xl\:cu-mt-6 {
-    margin-top: var(--canon-space-6);
-  }
-
-  .xl\:cu-mt-7 {
-    margin-top: var(--canon-space-7);
-  }
-
-  .xl\:cu-mt-8 {
-    margin-top: var(--canon-space-8);
-  }
-
-  .xl\:cu-mt-9 {
-    margin-top: var(--canon-space-9);
-  }
-
-  .xl\:cu-mt-10 {
-    margin-top: var(--canon-space-10);
-  }
-
-  .xl\:cu-mt-11 {
-    margin-top: var(--canon-space-11);
-  }
-
-  .xl\:cu-mt-12 {
-    margin-top: var(--canon-space-12);
-  }
-
-  .xl\:cu-mt-13 {
-    margin-top: var(--canon-space-13);
-  }
-
-  .xl\:cu-mt-14 {
-    margin-top: var(--canon-space-14);
-  }
-}
diff --git a/packages/canon/src/css/utilities/mx.css b/packages/canon/src/css/utilities/mx.css
deleted file mode 100644
index 6ebbc57367..0000000000
--- a/packages/canon/src/css/utilities/mx.css
+++ /dev/null
@@ -1,524 +0,0 @@
-.cu-mx {
-  margin-left: var(--px);
-  margin-right: var(--px);
-}
-
-.cu-mx-0\.5 {
-  margin-left: var(--canon-space-0_5);
-  margin-right: var(--canon-space-0_5);
-}
-
-.cu-mx-1 {
-  margin-left: var(--canon-space-1);
-  margin-right: var(--canon-space-1);
-}
-
-.cu-mx-1\.5 {
-  margin-left: var(--canon-space-1_5);
-  margin-right: var(--canon-space-1_5);
-}
-
-.cu-mx-2 {
-  margin-left: var(--canon-space-2);
-  margin-right: var(--canon-space-2);
-}
-
-.cu-mx-3 {
-  margin-left: var(--canon-space-3);
-  margin-right: var(--canon-space-3);
-}
-
-.cu-mx-4 {
-  margin-left: var(--canon-space-4);
-  margin-right: var(--canon-space-4);
-}
-
-.cu-mx-5 {
-  margin-left: var(--canon-space-5);
-  margin-right: var(--canon-space-5);
-}
-
-.cu-mx-6 {
-  margin-left: var(--canon-space-6);
-  margin-right: var(--canon-space-6);
-}
-
-.cu-mx-7 {
-  margin-left: var(--canon-space-7);
-  margin-right: var(--canon-space-7);
-}
-
-.cu-mx-8 {
-  margin-left: var(--canon-space-8);
-  margin-right: var(--canon-space-8);
-}
-
-.cu-mx-9 {
-  margin-left: var(--canon-space-9);
-  margin-right: var(--canon-space-9);
-}
-
-.cu-mx-10 {
-  margin-left: var(--canon-space-10);
-  margin-right: var(--canon-space-10);
-}
-
-.cu-mx-11 {
-  margin-left: var(--canon-space-11);
-  margin-right: var(--canon-space-11);
-}
-
-.cu-mx-12 {
-  margin-left: var(--canon-space-12);
-  margin-right: var(--canon-space-12);
-}
-
-.cu-mx-13 {
-  margin-left: var(--canon-space-13);
-  margin-right: var(--canon-space-13);
-}
-
-.cu-mx-14 {
-  margin-left: var(--canon-space-14);
-  margin-right: var(--canon-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
-  .xs\:cu-mx {
-    margin-left: var(--px-xs);
-    margin-right: var(--px-xs);
-  }
-
-  .xs\:cu-mx-0\.5 {
-    margin-left: var(--canon-space-0_5);
-    margin-right: var(--canon-space-0_5);
-  }
-
-  .xs\:cu-mx-1 {
-    margin-left: var(--canon-space-1);
-    margin-right: var(--canon-space-1);
-  }
-
-  .xs\:cu-mx-1\.5 {
-    margin-left: var(--canon-space-1_5);
-    margin-right: var(--canon-space-1_5);
-  }
-
-  .xs\:cu-mx-2 {
-    margin-left: var(--canon-space-2);
-    margin-right: var(--canon-space-2);
-  }
-
-  .xs\:cu-mx-3 {
-    margin-left: var(--canon-space-3);
-    margin-right: var(--canon-space-3);
-  }
-
-  .xs\:cu-mx-4 {
-    margin-left: var(--canon-space-4);
-    margin-right: var(--canon-space-4);
-  }
-
-  .xs\:cu-mx-5 {
-    margin-left: var(--canon-space-5);
-    margin-right: var(--canon-space-5);
-  }
-
-  .xs\:cu-mx-6 {
-    margin-left: var(--canon-space-6);
-    margin-right: var(--canon-space-6);
-  }
-
-  .xs\:cu-mx-7 {
-    margin-left: var(--canon-space-7);
-    margin-right: var(--canon-space-7);
-  }
-
-  .xs\:cu-mx-8 {
-    margin-left: var(--canon-space-8);
-    margin-right: var(--canon-space-8);
-  }
-
-  .xs\:cu-mx-9 {
-    margin-left: var(--canon-space-9);
-    margin-right: var(--canon-space-9);
-  }
-
-  .xs\:cu-mx-10 {
-    margin-left: var(--canon-space-10);
-    margin-right: var(--canon-space-10);
-  }
-
-  .xs\:cu-mx-11 {
-    margin-left: var(--canon-space-11);
-    margin-right: var(--canon-space-11);
-  }
-
-  .xs\:cu-mx-12 {
-    margin-left: var(--canon-space-12);
-    margin-right: var(--canon-space-12);
-  }
-
-  .xs\:cu-mx-13 {
-    margin-left: var(--canon-space-13);
-    margin-right: var(--canon-space-13);
-  }
-
-  .xs\:cu-mx-14 {
-    margin-left: var(--canon-space-14);
-    margin-right: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint sm */
-@media (min-width: 768px) {
-  .sm\:cu-mx {
-    margin-left: var(--px-sm);
-    margin-right: var(--px-sm);
-  }
-
-  .sm\:cu-mx-0\.5 {
-    margin-left: var(--canon-space-0_5);
-    margin-right: var(--canon-space-0_5);
-  }
-
-  .sm\:cu-mx-1 {
-    margin-left: var(--canon-space-1);
-    margin-right: var(--canon-space-1);
-  }
-
-  .sm\:cu-mx-1\.5 {
-    margin-left: var(--canon-space-1_5);
-    margin-right: var(--canon-space-1_5);
-  }
-
-  .sm\:cu-mx-2 {
-    margin-left: var(--canon-space-2);
-    margin-right: var(--canon-space-2);
-  }
-
-  .sm\:cu-mx-3 {
-    margin-left: var(--canon-space-3);
-    margin-right: var(--canon-space-3);
-  }
-
-  .sm\:cu-mx-4 {
-    margin-left: var(--canon-space-4);
-    margin-right: var(--canon-space-4);
-  }
-
-  .sm\:cu-mx-5 {
-    margin-left: var(--canon-space-5);
-    margin-right: var(--canon-space-5);
-  }
-
-  .sm\:cu-mx-6 {
-    margin-left: var(--canon-space-6);
-    margin-right: var(--canon-space-6);
-  }
-
-  .sm\:cu-mx-7 {
-    margin-left: var(--canon-space-7);
-    margin-right: var(--canon-space-7);
-  }
-
-  .sm\:cu-mx-8 {
-    margin-left: var(--canon-space-8);
-    margin-right: var(--canon-space-8);
-  }
-
-  .sm\:cu-mx-9 {
-    margin-left: var(--canon-space-9);
-    margin-right: var(--canon-space-9);
-  }
-
-  .sm\:cu-mx-10 {
-    margin-left: var(--canon-space-10);
-    margin-right: var(--canon-space-10);
-  }
-
-  .sm\:cu-mx-11 {
-    margin-left: var(--canon-space-11);
-    margin-right: var(--canon-space-11);
-  }
-
-  .sm\:cu-mx-12 {
-    margin-left: var(--canon-space-12);
-    margin-right: var(--canon-space-12);
-  }
-
-  .sm\:cu-mx-13 {
-    margin-left: var(--canon-space-13);
-    margin-right: var(--canon-space-13);
-  }
-
-  .sm\:cu-mx-14 {
-    margin-left: var(--canon-space-14);
-    margin-right: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
-  .md\:cu-mx {
-    margin-left: var(--px-md);
-    margin-right: var(--px-md);
-  }
-
-  .md\:cu-mx-0\.5 {
-    margin-left: var(--canon-space-0_5);
-    margin-right: var(--canon-space-0_5);
-  }
-
-  .md\:cu-mx-1 {
-    margin-left: var(--canon-space-1);
-    margin-right: var(--canon-space-1);
-  }
-
-  .md\:cu-mx-1\.5 {
-    margin-left: var(--canon-space-1_5);
-    margin-right: var(--canon-space-1_5);
-  }
-
-  .md\:cu-mx-2 {
-    margin-left: var(--canon-space-2);
-    margin-right: var(--canon-space-2);
-  }
-
-  .md\:cu-mx-3 {
-    margin-left: var(--canon-space-3);
-    margin-right: var(--canon-space-3);
-  }
-
-  .md\:cu-mx-4 {
-    margin-left: var(--canon-space-4);
-    margin-right: var(--canon-space-4);
-  }
-
-  .md\:cu-mx-5 {
-    margin-left: var(--canon-space-5);
-    margin-right: var(--canon-space-5);
-  }
-
-  .md\:cu-mx-6 {
-    margin-left: var(--canon-space-6);
-    margin-right: var(--canon-space-6);
-  }
-
-  .md\:cu-mx-7 {
-    margin-left: var(--canon-space-7);
-    margin-right: var(--canon-space-7);
-  }
-
-  .md\:cu-mx-8 {
-    margin-left: var(--canon-space-8);
-    margin-right: var(--canon-space-8);
-  }
-
-  .md\:cu-mx-9 {
-    margin-left: var(--canon-space-9);
-    margin-right: var(--canon-space-9);
-  }
-
-  .md\:cu-mx-10 {
-    margin-left: var(--canon-space-10);
-    margin-right: var(--canon-space-10);
-  }
-
-  .md\:cu-mx-11 {
-    margin-left: var(--canon-space-11);
-    margin-right: var(--canon-space-11);
-  }
-
-  .md\:cu-mx-12 {
-    margin-left: var(--canon-space-12);
-    margin-right: var(--canon-space-12);
-  }
-
-  .md\:cu-mx-13 {
-    margin-left: var(--canon-space-13);
-    margin-right: var(--canon-space-13);
-  }
-
-  .md\:cu-mx-14 {
-    margin-left: var(--canon-space-14);
-    margin-right: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
-  .lg\:cu-mx {
-    margin-left: var(--px-lg);
-    margin-right: var(--px-lg);
-  }
-
-  .lg\:cu-mx-0\.5 {
-    margin-left: var(--canon-space-0_5);
-    margin-right: var(--canon-space-0_5);
-  }
-
-  .lg\:cu-mx-1 {
-    margin-left: var(--canon-space-1);
-    margin-right: var(--canon-space-1);
-  }
-
-  .lg\:cu-mx-1\.5 {
-    margin-left: var(--canon-space-1_5);
-    margin-right: var(--canon-space-1_5);
-  }
-
-  .lg\:cu-mx-2 {
-    margin-left: var(--canon-space-2);
-    margin-right: var(--canon-space-2);
-  }
-
-  .lg\:cu-mx-3 {
-    margin-left: var(--canon-space-3);
-    margin-right: var(--canon-space-3);
-  }
-
-  .lg\:cu-mx-4 {
-    margin-left: var(--canon-space-4);
-    margin-right: var(--canon-space-4);
-  }
-
-  .lg\:cu-mx-5 {
-    margin-left: var(--canon-space-5);
-    margin-right: var(--canon-space-5);
-  }
-
-  .lg\:cu-mx-6 {
-    margin-left: var(--canon-space-6);
-    margin-right: var(--canon-space-6);
-  }
-
-  .lg\:cu-mx-7 {
-    margin-left: var(--canon-space-7);
-    margin-right: var(--canon-space-7);
-  }
-
-  .lg\:cu-mx-8 {
-    margin-left: var(--canon-space-8);
-    margin-right: var(--canon-space-8);
-  }
-
-  .lg\:cu-mx-9 {
-    margin-left: var(--canon-space-9);
-    margin-right: var(--canon-space-9);
-  }
-
-  .lg\:cu-mx-10 {
-    margin-left: var(--canon-space-10);
-    margin-right: var(--canon-space-10);
-  }
-
-  .lg\:cu-mx-11 {
-    margin-left: var(--canon-space-11);
-    margin-right: var(--canon-space-11);
-  }
-
-  .lg\:cu-mx-12 {
-    margin-left: var(--canon-space-12);
-    margin-right: var(--canon-space-12);
-  }
-
-  .lg\:cu-mx-13 {
-    margin-left: var(--canon-space-13);
-    margin-right: var(--canon-space-13);
-  }
-
-  .lg\:cu-mx-14 {
-    margin-left: var(--canon-space-14);
-    margin-right: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
-  .xl\:cu-mx {
-    margin-left: var(--px-xl);
-    margin-right: var(--px-xl);
-  }
-
-  .xl\:cu-mx-0\.5 {
-    margin-left: var(--canon-space-0_5);
-    margin-right: var(--canon-space-0_5);
-  }
-
-  .xl\:cu-mx-1 {
-    margin-left: var(--canon-space-1);
-    margin-right: var(--canon-space-1);
-  }
-
-  .xl\:cu-mx-1\.5 {
-    margin-left: var(--canon-space-1_5);
-    margin-right: var(--canon-space-1_5);
-  }
-
-  .xl\:cu-mx-2 {
-    margin-left: var(--canon-space-2);
-    margin-right: var(--canon-space-2);
-  }
-
-  .xl\:cu-mx-3 {
-    margin-left: var(--canon-space-3);
-    margin-right: var(--canon-space-3);
-  }
-
-  .xl\:cu-mx-4 {
-    margin-left: var(--canon-space-4);
-    margin-right: var(--canon-space-4);
-  }
-
-  .xl\:cu-mx-5 {
-    margin-left: var(--canon-space-5);
-    margin-right: var(--canon-space-5);
-  }
-
-  .xl\:cu-mx-6 {
-    margin-left: var(--canon-space-6);
-    margin-right: var(--canon-space-6);
-  }
-
-  .xl\:cu-mx-7 {
-    margin-left: var(--canon-space-7);
-    margin-right: var(--canon-space-7);
-  }
-
-  .xl\:cu-mx-8 {
-    margin-left: var(--canon-space-8);
-    margin-right: var(--canon-space-8);
-  }
-
-  .xl\:cu-mx-9 {
-    margin-left: var(--canon-space-9);
-    margin-right: var(--canon-space-9);
-  }
-
-  .xl\:cu-mx-10 {
-    margin-left: var(--canon-space-10);
-    margin-right: var(--canon-space-10);
-  }
-
-  .xl\:cu-mx-11 {
-    margin-left: var(--canon-space-11);
-    margin-right: var(--canon-space-11);
-  }
-
-  .xl\:cu-mx-12 {
-    margin-left: var(--canon-space-12);
-    margin-right: var(--canon-space-12);
-  }
-
-  .xl\:cu-mx-13 {
-    margin-left: var(--canon-space-13);
-    margin-right: var(--canon-space-13);
-  }
-
-  .xl\:cu-mx-14 {
-    margin-left: var(--canon-space-14);
-    margin-right: var(--canon-space-14);
-  }
-}
diff --git a/packages/canon/src/css/utilities/my.css b/packages/canon/src/css/utilities/my.css
deleted file mode 100644
index feb4a6f5bd..0000000000
--- a/packages/canon/src/css/utilities/my.css
+++ /dev/null
@@ -1,524 +0,0 @@
-.cu-my {
-  margin-top: var(--py);
-  margin-bottom: var(--py);
-}
-
-.cu-my-0\.5 {
-  margin-top: var(--canon-space-0_5);
-  margin-bottom: var(--canon-space-0_5);
-}
-
-.cu-my-1 {
-  margin-top: var(--canon-space-1);
-  margin-bottom: var(--canon-space-1);
-}
-
-.cu-my-1\.5 {
-  margin-top: var(--canon-space-1_5);
-  margin-bottom: var(--canon-space-1_5);
-}
-
-.cu-my-2 {
-  margin-top: var(--canon-space-2);
-  margin-bottom: var(--canon-space-2);
-}
-
-.cu-my-3 {
-  margin-top: var(--canon-space-3);
-  margin-bottom: var(--canon-space-3);
-}
-
-.cu-my-4 {
-  margin-top: var(--canon-space-4);
-  margin-bottom: var(--canon-space-4);
-}
-
-.cu-my-5 {
-  margin-top: var(--canon-space-5);
-  margin-bottom: var(--canon-space-5);
-}
-
-.cu-my-6 {
-  margin-top: var(--canon-space-6);
-  margin-bottom: var(--canon-space-6);
-}
-
-.cu-my-7 {
-  margin-top: var(--canon-space-7);
-  margin-bottom: var(--canon-space-7);
-}
-
-.cu-my-8 {
-  margin-top: var(--canon-space-8);
-  margin-bottom: var(--canon-space-8);
-}
-
-.cu-my-9 {
-  margin-top: var(--canon-space-9);
-  margin-bottom: var(--canon-space-9);
-}
-
-.cu-my-10 {
-  margin-top: var(--canon-space-10);
-  margin-bottom: var(--canon-space-10);
-}
-
-.cu-my-11 {
-  margin-top: var(--canon-space-11);
-  margin-bottom: var(--canon-space-11);
-}
-
-.cu-my-12 {
-  margin-top: var(--canon-space-12);
-  margin-bottom: var(--canon-space-12);
-}
-
-.cu-my-13 {
-  margin-top: var(--canon-space-13);
-  margin-bottom: var(--canon-space-13);
-}
-
-.cu-my-14 {
-  margin-top: var(--canon-space-14);
-  margin-bottom: var(--canon-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
-  .xs\:cu-my {
-    margin-top: var(--py-xs);
-    margin-bottom: var(--py-xs);
-  }
-
-  .xs\:cu-my-0\.5 {
-    margin-top: var(--canon-space-0_5);
-    margin-bottom: var(--canon-space-0_5);
-  }
-
-  .xs\:cu-my-1 {
-    margin-top: var(--canon-space-1);
-    margin-bottom: var(--canon-space-1);
-  }
-
-  .xs\:cu-my-1\.5 {
-    margin-top: var(--canon-space-1_5);
-    margin-bottom: var(--canon-space-1_5);
-  }
-
-  .xs\:cu-my-2 {
-    margin-top: var(--canon-space-2);
-    margin-bottom: var(--canon-space-2);
-  }
-
-  .xs\:cu-my-3 {
-    margin-top: var(--canon-space-3);
-    margin-bottom: var(--canon-space-3);
-  }
-
-  .xs\:cu-my-4 {
-    margin-top: var(--canon-space-4);
-    margin-bottom: var(--canon-space-4);
-  }
-
-  .xs\:cu-my-5 {
-    margin-top: var(--canon-space-5);
-    margin-bottom: var(--canon-space-5);
-  }
-
-  .xs\:cu-my-6 {
-    margin-top: var(--canon-space-6);
-    margin-bottom: var(--canon-space-6);
-  }
-
-  .xs\:cu-my-7 {
-    margin-top: var(--canon-space-7);
-    margin-bottom: var(--canon-space-7);
-  }
-
-  .xs\:cu-my-8 {
-    margin-top: var(--canon-space-8);
-    margin-bottom: var(--canon-space-8);
-  }
-
-  .xs\:cu-my-9 {
-    margin-top: var(--canon-space-9);
-    margin-bottom: var(--canon-space-9);
-  }
-
-  .xs\:cu-my-10 {
-    margin-top: var(--canon-space-10);
-    margin-bottom: var(--canon-space-10);
-  }
-
-  .xs\:cu-my-11 {
-    margin-top: var(--canon-space-11);
-    margin-bottom: var(--canon-space-11);
-  }
-
-  .xs\:cu-my-12 {
-    margin-top: var(--canon-space-12);
-    margin-bottom: var(--canon-space-12);
-  }
-
-  .xs\:cu-my-13 {
-    margin-top: var(--canon-space-13);
-    margin-bottom: var(--canon-space-13);
-  }
-
-  .xs\:cu-my-14 {
-    margin-top: var(--canon-space-14);
-    margin-bottom: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint sm */
-@media (min-width: 768px) {
-  .sm\:cu-my {
-    margin-top: var(--py-sm);
-    margin-bottom: var(--py-sm);
-  }
-
-  .sm\:cu-my-0\.5 {
-    margin-top: var(--canon-space-0_5);
-    margin-bottom: var(--canon-space-0_5);
-  }
-
-  .sm\:cu-my-1 {
-    margin-top: var(--canon-space-1);
-    margin-bottom: var(--canon-space-1);
-  }
-
-  .sm\:cu-my-1\.5 {
-    margin-top: var(--canon-space-1_5);
-    margin-bottom: var(--canon-space-1_5);
-  }
-
-  .sm\:cu-my-2 {
-    margin-top: var(--canon-space-2);
-    margin-bottom: var(--canon-space-2);
-  }
-
-  .sm\:cu-my-3 {
-    margin-top: var(--canon-space-3);
-    margin-bottom: var(--canon-space-3);
-  }
-
-  .sm\:cu-my-4 {
-    margin-top: var(--canon-space-4);
-    margin-bottom: var(--canon-space-4);
-  }
-
-  .sm\:cu-my-5 {
-    margin-top: var(--canon-space-5);
-    margin-bottom: var(--canon-space-5);
-  }
-
-  .sm\:cu-my-6 {
-    margin-top: var(--canon-space-6);
-    margin-bottom: var(--canon-space-6);
-  }
-
-  .sm\:cu-my-7 {
-    margin-top: var(--canon-space-7);
-    margin-bottom: var(--canon-space-7);
-  }
-
-  .sm\:cu-my-8 {
-    margin-top: var(--canon-space-8);
-    margin-bottom: var(--canon-space-8);
-  }
-
-  .sm\:cu-my-9 {
-    margin-top: var(--canon-space-9);
-    margin-bottom: var(--canon-space-9);
-  }
-
-  .sm\:cu-my-10 {
-    margin-top: var(--canon-space-10);
-    margin-bottom: var(--canon-space-10);
-  }
-
-  .sm\:cu-my-11 {
-    margin-top: var(--canon-space-11);
-    margin-bottom: var(--canon-space-11);
-  }
-
-  .sm\:cu-my-12 {
-    margin-top: var(--canon-space-12);
-    margin-bottom: var(--canon-space-12);
-  }
-
-  .sm\:cu-my-13 {
-    margin-top: var(--canon-space-13);
-    margin-bottom: var(--canon-space-13);
-  }
-
-  .sm\:cu-my-14 {
-    margin-top: var(--canon-space-14);
-    margin-bottom: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
-  .md\:cu-my {
-    margin-top: var(--py-md);
-    margin-bottom: var(--py-md);
-  }
-
-  .md\:cu-my-0\.5 {
-    margin-top: var(--canon-space-0_5);
-    margin-bottom: var(--canon-space-0_5);
-  }
-
-  .md\:cu-my-1 {
-    margin-top: var(--canon-space-1);
-    margin-bottom: var(--canon-space-1);
-  }
-
-  .md\:cu-my-1\.5 {
-    margin-top: var(--canon-space-1_5);
-    margin-bottom: var(--canon-space-1_5);
-  }
-
-  .md\:cu-my-2 {
-    margin-top: var(--canon-space-2);
-    margin-bottom: var(--canon-space-2);
-  }
-
-  .md\:cu-my-3 {
-    margin-top: var(--canon-space-3);
-    margin-bottom: var(--canon-space-3);
-  }
-
-  .md\:cu-my-4 {
-    margin-top: var(--canon-space-4);
-    margin-bottom: var(--canon-space-4);
-  }
-
-  .md\:cu-my-5 {
-    margin-top: var(--canon-space-5);
-    margin-bottom: var(--canon-space-5);
-  }
-
-  .md\:cu-my-6 {
-    margin-top: var(--canon-space-6);
-    margin-bottom: var(--canon-space-6);
-  }
-
-  .md\:cu-my-7 {
-    margin-top: var(--canon-space-7);
-    margin-bottom: var(--canon-space-7);
-  }
-
-  .md\:cu-my-8 {
-    margin-top: var(--canon-space-8);
-    margin-bottom: var(--canon-space-8);
-  }
-
-  .md\:cu-my-9 {
-    margin-top: var(--canon-space-9);
-    margin-bottom: var(--canon-space-9);
-  }
-
-  .md\:cu-my-10 {
-    margin-top: var(--canon-space-10);
-    margin-bottom: var(--canon-space-10);
-  }
-
-  .md\:cu-my-11 {
-    margin-top: var(--canon-space-11);
-    margin-bottom: var(--canon-space-11);
-  }
-
-  .md\:cu-my-12 {
-    margin-top: var(--canon-space-12);
-    margin-bottom: var(--canon-space-12);
-  }
-
-  .md\:cu-my-13 {
-    margin-top: var(--canon-space-13);
-    margin-bottom: var(--canon-space-13);
-  }
-
-  .md\:cu-my-14 {
-    margin-top: var(--canon-space-14);
-    margin-bottom: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
-  .lg\:cu-my {
-    margin-top: var(--py-lg);
-    margin-bottom: var(--py-lg);
-  }
-
-  .lg\:cu-my-0\.5 {
-    margin-top: var(--canon-space-0_5);
-    margin-bottom: var(--canon-space-0_5);
-  }
-
-  .lg\:cu-my-1 {
-    margin-top: var(--canon-space-1);
-    margin-bottom: var(--canon-space-1);
-  }
-
-  .lg\:cu-my-1\.5 {
-    margin-top: var(--canon-space-1_5);
-    margin-bottom: var(--canon-space-1_5);
-  }
-
-  .lg\:cu-my-2 {
-    margin-top: var(--canon-space-2);
-    margin-bottom: var(--canon-space-2);
-  }
-
-  .lg\:cu-my-3 {
-    margin-top: var(--canon-space-3);
-    margin-bottom: var(--canon-space-3);
-  }
-
-  .lg\:cu-my-4 {
-    margin-top: var(--canon-space-4);
-    margin-bottom: var(--canon-space-4);
-  }
-
-  .lg\:cu-my-5 {
-    margin-top: var(--canon-space-5);
-    margin-bottom: var(--canon-space-5);
-  }
-
-  .lg\:cu-my-6 {
-    margin-top: var(--canon-space-6);
-    margin-bottom: var(--canon-space-6);
-  }
-
-  .lg\:cu-my-7 {
-    margin-top: var(--canon-space-7);
-    margin-bottom: var(--canon-space-7);
-  }
-
-  .lg\:cu-my-8 {
-    margin-top: var(--canon-space-8);
-    margin-bottom: var(--canon-space-8);
-  }
-
-  .lg\:cu-my-9 {
-    margin-top: var(--canon-space-9);
-    margin-bottom: var(--canon-space-9);
-  }
-
-  .lg\:cu-my-10 {
-    margin-top: var(--canon-space-10);
-    margin-bottom: var(--canon-space-10);
-  }
-
-  .lg\:cu-my-11 {
-    margin-top: var(--canon-space-11);
-    margin-bottom: var(--canon-space-11);
-  }
-
-  .lg\:cu-my-12 {
-    margin-top: var(--canon-space-12);
-    margin-bottom: var(--canon-space-12);
-  }
-
-  .lg\:cu-my-13 {
-    margin-top: var(--canon-space-13);
-    margin-bottom: var(--canon-space-13);
-  }
-
-  .lg\:cu-my-14 {
-    margin-top: var(--canon-space-14);
-    margin-bottom: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
-  .xl\:cu-my {
-    margin-top: var(--py-xl);
-    margin-bottom: var(--py-xl);
-  }
-
-  .xl\:cu-my-0\.5 {
-    margin-top: var(--canon-space-0_5);
-    margin-bottom: var(--canon-space-0_5);
-  }
-
-  .xl\:cu-my-1 {
-    margin-top: var(--canon-space-1);
-    margin-bottom: var(--canon-space-1);
-  }
-
-  .xl\:cu-my-1\.5 {
-    margin-top: var(--canon-space-1_5);
-    margin-bottom: var(--canon-space-1_5);
-  }
-
-  .xl\:cu-my-2 {
-    margin-top: var(--canon-space-2);
-    margin-bottom: var(--canon-space-2);
-  }
-
-  .xl\:cu-my-3 {
-    margin-top: var(--canon-space-3);
-    margin-bottom: var(--canon-space-3);
-  }
-
-  .xl\:cu-my-4 {
-    margin-top: var(--canon-space-4);
-    margin-bottom: var(--canon-space-4);
-  }
-
-  .xl\:cu-my-5 {
-    margin-top: var(--canon-space-5);
-    margin-bottom: var(--canon-space-5);
-  }
-
-  .xl\:cu-my-6 {
-    margin-top: var(--canon-space-6);
-    margin-bottom: var(--canon-space-6);
-  }
-
-  .xl\:cu-my-7 {
-    margin-top: var(--canon-space-7);
-    margin-bottom: var(--canon-space-7);
-  }
-
-  .xl\:cu-my-8 {
-    margin-top: var(--canon-space-8);
-    margin-bottom: var(--canon-space-8);
-  }
-
-  .xl\:cu-my-9 {
-    margin-top: var(--canon-space-9);
-    margin-bottom: var(--canon-space-9);
-  }
-
-  .xl\:cu-my-10 {
-    margin-top: var(--canon-space-10);
-    margin-bottom: var(--canon-space-10);
-  }
-
-  .xl\:cu-my-11 {
-    margin-top: var(--canon-space-11);
-    margin-bottom: var(--canon-space-11);
-  }
-
-  .xl\:cu-my-12 {
-    margin-top: var(--canon-space-12);
-    margin-bottom: var(--canon-space-12);
-  }
-
-  .xl\:cu-my-13 {
-    margin-top: var(--canon-space-13);
-    margin-bottom: var(--canon-space-13);
-  }
-
-  .xl\:cu-my-14 {
-    margin-top: var(--canon-space-14);
-    margin-bottom: var(--canon-space-14);
-  }
-}
diff --git a/packages/canon/src/css/utilities/p.css b/packages/canon/src/css/utilities/p.css
deleted file mode 100644
index 6540c626d2..0000000000
--- a/packages/canon/src/css/utilities/p.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.cu-p {
-  padding: var(--p);
-}
-
-.cu-p-0\.5 {
-  padding: var(--canon-space-0_5);
-}
-
-.cu-p-1 {
-  padding: var(--canon-space-1);
-}
-
-.cu-p-1\.5 {
-  padding: var(--canon-space-1_5);
-}
-
-.cu-p-2 {
-  padding: var(--canon-space-2);
-}
-
-.cu-p-3 {
-  padding: var(--canon-space-3);
-}
-
-.cu-p-4 {
-  padding: var(--canon-space-4);
-}
-
-.cu-p-5 {
-  padding: var(--canon-space-5);
-}
-
-.cu-p-6 {
-  padding: var(--canon-space-6);
-}
-
-.cu-p-7 {
-  padding: var(--canon-space-7);
-}
-
-.cu-p-8 {
-  padding: var(--canon-space-8);
-}
-
-.cu-p-9 {
-  padding: var(--canon-space-9);
-}
-
-.cu-p-10 {
-  padding: var(--canon-space-10);
-}
-
-.cu-p-11 {
-  padding: var(--canon-space-11);
-}
-
-.cu-p-12 {
-  padding: var(--canon-space-12);
-}
-
-.cu-p-13 {
-  padding: var(--canon-space-13);
-}
-
-.cu-p-14 {
-  padding: var(--canon-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
-  .xs\:cu-p {
-    padding: var(--p-xs);
-  }
-
-  .xs\:cu-p-0\.5 {
-    padding: var(--canon-space-0_5);
-  }
-
-  .xs\:cu-p-1 {
-    padding: var(--canon-space-1);
-  }
-
-  .xs\:cu-p-1\.5 {
-    padding: var(--canon-space-1_5);
-  }
-
-  .xs\:cu-p-2 {
-    padding: var(--canon-space-2);
-  }
-
-  .xs\:cu-p-3 {
-    padding: var(--canon-space-3);
-  }
-
-  .xs\:cu-p-4 {
-    padding: var(--canon-space-4);
-  }
-
-  .xs\:cu-p-5 {
-    padding: var(--canon-space-5);
-  }
-
-  .xs\:cu-p-6 {
-    padding: var(--canon-space-6);
-  }
-
-  .xs\:cu-p-7 {
-    padding: var(--canon-space-7);
-  }
-
-  .xs\:cu-p-8 {
-    padding: var(--canon-space-8);
-  }
-
-  .xs\:cu-p-9 {
-    padding: var(--canon-space-9);
-  }
-
-  .xs\:cu-p-10 {
-    padding: var(--canon-space-10);
-  }
-
-  .xs\:cu-p-11 {
-    padding: var(--canon-space-11);
-  }
-
-  .xs\:cu-p-12 {
-    padding: var(--canon-space-12);
-  }
-
-  .xs\:cu-p-13 {
-    padding: var(--canon-space-13);
-  }
-
-  .xs\:cu-p-14 {
-    padding: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint sm */
-@media (min-width: 768px) {
-  .sm\:cu-p {
-    padding: var(--p-sm);
-  }
-
-  .sm\:cu-p-0\.5 {
-    padding: var(--canon-space-0_5);
-  }
-
-  .sm\:cu-p-1 {
-    padding: var(--canon-space-1);
-  }
-
-  .sm\:cu-p-1\.5 {
-    padding: var(--canon-space-1_5);
-  }
-
-  .sm\:cu-p-2 {
-    padding: var(--canon-space-2);
-  }
-
-  .sm\:cu-p-3 {
-    padding: var(--canon-space-3);
-  }
-
-  .sm\:cu-p-4 {
-    padding: var(--canon-space-4);
-  }
-
-  .sm\:cu-p-5 {
-    padding: var(--canon-space-5);
-  }
-
-  .sm\:cu-p-6 {
-    padding: var(--canon-space-6);
-  }
-
-  .sm\:cu-p-7 {
-    padding: var(--canon-space-7);
-  }
-
-  .sm\:cu-p-8 {
-    padding: var(--canon-space-8);
-  }
-
-  .sm\:cu-p-9 {
-    padding: var(--canon-space-9);
-  }
-
-  .sm\:cu-p-10 {
-    padding: var(--canon-space-10);
-  }
-
-  .sm\:cu-p-11 {
-    padding: var(--canon-space-11);
-  }
-
-  .sm\:cu-p-12 {
-    padding: var(--canon-space-12);
-  }
-
-  .sm\:cu-p-13 {
-    padding: var(--canon-space-13);
-  }
-
-  .sm\:cu-p-14 {
-    padding: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
-  .md\:cu-p {
-    padding: var(--p-md);
-  }
-
-  .md\:cu-p-0\.5 {
-    padding: var(--canon-space-0_5);
-  }
-
-  .md\:cu-p-1 {
-    padding: var(--canon-space-1);
-  }
-
-  .md\:cu-p-1\.5 {
-    padding: var(--canon-space-1_5);
-  }
-
-  .md\:cu-p-2 {
-    padding: var(--canon-space-2);
-  }
-
-  .md\:cu-p-3 {
-    padding: var(--canon-space-3);
-  }
-
-  .md\:cu-p-4 {
-    padding: var(--canon-space-4);
-  }
-
-  .md\:cu-p-5 {
-    padding: var(--canon-space-5);
-  }
-
-  .md\:cu-p-6 {
-    padding: var(--canon-space-6);
-  }
-
-  .md\:cu-p-7 {
-    padding: var(--canon-space-7);
-  }
-
-  .md\:cu-p-8 {
-    padding: var(--canon-space-8);
-  }
-
-  .md\:cu-p-9 {
-    padding: var(--canon-space-9);
-  }
-
-  .md\:cu-p-10 {
-    padding: var(--canon-space-10);
-  }
-
-  .md\:cu-p-11 {
-    padding: var(--canon-space-11);
-  }
-
-  .md\:cu-p-12 {
-    padding: var(--canon-space-12);
-  }
-
-  .md\:cu-p-13 {
-    padding: var(--canon-space-13);
-  }
-
-  .md\:cu-p-14 {
-    padding: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
-  .lg\:cu-p {
-    padding: var(--p-lg);
-  }
-
-  .lg\:cu-p-0\.5 {
-    padding: var(--canon-space-0_5);
-  }
-
-  .lg\:cu-p-1 {
-    padding: var(--canon-space-1);
-  }
-
-  .lg\:cu-p-1\.5 {
-    padding: var(--canon-space-1_5);
-  }
-
-  .lg\:cu-p-2 {
-    padding: var(--canon-space-2);
-  }
-
-  .lg\:cu-p-3 {
-    padding: var(--canon-space-3);
-  }
-
-  .lg\:cu-p-4 {
-    padding: var(--canon-space-4);
-  }
-
-  .lg\:cu-p-5 {
-    padding: var(--canon-space-5);
-  }
-
-  .lg\:cu-p-6 {
-    padding: var(--canon-space-6);
-  }
-
-  .lg\:cu-p-7 {
-    padding: var(--canon-space-7);
-  }
-
-  .lg\:cu-p-8 {
-    padding: var(--canon-space-8);
-  }
-
-  .lg\:cu-p-9 {
-    padding: var(--canon-space-9);
-  }
-
-  .lg\:cu-p-10 {
-    padding: var(--canon-space-10);
-  }
-
-  .lg\:cu-p-11 {
-    padding: var(--canon-space-11);
-  }
-
-  .lg\:cu-p-12 {
-    padding: var(--canon-space-12);
-  }
-
-  .lg\:cu-p-13 {
-    padding: var(--canon-space-13);
-  }
-
-  .lg\:cu-p-14 {
-    padding: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
-  .xl\:cu-p {
-    padding: var(--p-xl);
-  }
-
-  .xl\:cu-p-0\.5 {
-    padding: var(--canon-space-0_5);
-  }
-
-  .xl\:cu-p-1 {
-    padding: var(--canon-space-1);
-  }
-
-  .xl\:cu-p-1\.5 {
-    padding: var(--canon-space-1_5);
-  }
-
-  .xl\:cu-p-2 {
-    padding: var(--canon-space-2);
-  }
-
-  .xl\:cu-p-3 {
-    padding: var(--canon-space-3);
-  }
-
-  .xl\:cu-p-4 {
-    padding: var(--canon-space-4);
-  }
-
-  .xl\:cu-p-5 {
-    padding: var(--canon-space-5);
-  }
-
-  .xl\:cu-p-6 {
-    padding: var(--canon-space-6);
-  }
-
-  .xl\:cu-p-7 {
-    padding: var(--canon-space-7);
-  }
-
-  .xl\:cu-p-8 {
-    padding: var(--canon-space-8);
-  }
-
-  .xl\:cu-p-9 {
-    padding: var(--canon-space-9);
-  }
-
-  .xl\:cu-p-10 {
-    padding: var(--canon-space-10);
-  }
-
-  .xl\:cu-p-11 {
-    padding: var(--canon-space-11);
-  }
-
-  .xl\:cu-p-12 {
-    padding: var(--canon-space-12);
-  }
-
-  .xl\:cu-p-13 {
-    padding: var(--canon-space-13);
-  }
-
-  .xl\:cu-p-14 {
-    padding: var(--canon-space-14);
-  }
-}
diff --git a/packages/canon/src/css/utilities/pb.css b/packages/canon/src/css/utilities/pb.css
deleted file mode 100644
index 722b744270..0000000000
--- a/packages/canon/src/css/utilities/pb.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.cu-pb {
-  padding-bottom: var(--pb);
-}
-
-.cu-pb-0\.5 {
-  padding-bottom: var(--canon-space-0_5);
-}
-
-.cu-pb-1 {
-  padding-bottom: var(--canon-space-1);
-}
-
-.cu-pb-1\.5 {
-  padding-bottom: var(--canon-space-1_5);
-}
-
-.cu-pb-2 {
-  padding-bottom: var(--canon-space-2);
-}
-
-.cu-pb-3 {
-  padding-bottom: var(--canon-space-3);
-}
-
-.cu-pb-4 {
-  padding-bottom: var(--canon-space-4);
-}
-
-.cu-pb-5 {
-  padding-bottom: var(--canon-space-5);
-}
-
-.cu-pb-6 {
-  padding-bottom: var(--canon-space-6);
-}
-
-.cu-pb-7 {
-  padding-bottom: var(--canon-space-7);
-}
-
-.cu-pb-8 {
-  padding-bottom: var(--canon-space-8);
-}
-
-.cu-pb-9 {
-  padding-bottom: var(--canon-space-9);
-}
-
-.cu-pb-10 {
-  padding-bottom: var(--canon-space-10);
-}
-
-.cu-pb-11 {
-  padding-bottom: var(--canon-space-11);
-}
-
-.cu-pb-12 {
-  padding-bottom: var(--canon-space-12);
-}
-
-.cu-pb-13 {
-  padding-bottom: var(--canon-space-13);
-}
-
-.cu-pb-14 {
-  padding-bottom: var(--canon-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
-  .xs\:cu-pb {
-    padding-bottom: var(--pb-xs);
-  }
-
-  .xs\:cu-pb-0\.5 {
-    padding-bottom: var(--canon-space-0_5);
-  }
-
-  .xs\:cu-pb-1 {
-    padding-bottom: var(--canon-space-1);
-  }
-
-  .xs\:cu-pb-1\.5 {
-    padding-bottom: var(--canon-space-1_5);
-  }
-
-  .xs\:cu-pb-2 {
-    padding-bottom: var(--canon-space-2);
-  }
-
-  .xs\:cu-pb-3 {
-    padding-bottom: var(--canon-space-3);
-  }
-
-  .xs\:cu-pb-4 {
-    padding-bottom: var(--canon-space-4);
-  }
-
-  .xs\:cu-pb-5 {
-    padding-bottom: var(--canon-space-5);
-  }
-
-  .xs\:cu-pb-6 {
-    padding-bottom: var(--canon-space-6);
-  }
-
-  .xs\:cu-pb-7 {
-    padding-bottom: var(--canon-space-7);
-  }
-
-  .xs\:cu-pb-8 {
-    padding-bottom: var(--canon-space-8);
-  }
-
-  .xs\:cu-pb-9 {
-    padding-bottom: var(--canon-space-9);
-  }
-
-  .xs\:cu-pb-10 {
-    padding-bottom: var(--canon-space-10);
-  }
-
-  .xs\:cu-pb-11 {
-    padding-bottom: var(--canon-space-11);
-  }
-
-  .xs\:cu-pb-12 {
-    padding-bottom: var(--canon-space-12);
-  }
-
-  .xs\:cu-pb-13 {
-    padding-bottom: var(--canon-space-13);
-  }
-
-  .xs\:cu-pb-14 {
-    padding-bottom: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint sm */
-@media (min-width: 768px) {
-  .sm\:cu-pb {
-    padding-bottom: var(--pb-sm);
-  }
-
-  .sm\:cu-pb-0\.5 {
-    padding-bottom: var(--canon-space-0_5);
-  }
-
-  .sm\:cu-pb-1 {
-    padding-bottom: var(--canon-space-1);
-  }
-
-  .sm\:cu-pb-1\.5 {
-    padding-bottom: var(--canon-space-1_5);
-  }
-
-  .sm\:cu-pb-2 {
-    padding-bottom: var(--canon-space-2);
-  }
-
-  .sm\:cu-pb-3 {
-    padding-bottom: var(--canon-space-3);
-  }
-
-  .sm\:cu-pb-4 {
-    padding-bottom: var(--canon-space-4);
-  }
-
-  .sm\:cu-pb-5 {
-    padding-bottom: var(--canon-space-5);
-  }
-
-  .sm\:cu-pb-6 {
-    padding-bottom: var(--canon-space-6);
-  }
-
-  .sm\:cu-pb-7 {
-    padding-bottom: var(--canon-space-7);
-  }
-
-  .sm\:cu-pb-8 {
-    padding-bottom: var(--canon-space-8);
-  }
-
-  .sm\:cu-pb-9 {
-    padding-bottom: var(--canon-space-9);
-  }
-
-  .sm\:cu-pb-10 {
-    padding-bottom: var(--canon-space-10);
-  }
-
-  .sm\:cu-pb-11 {
-    padding-bottom: var(--canon-space-11);
-  }
-
-  .sm\:cu-pb-12 {
-    padding-bottom: var(--canon-space-12);
-  }
-
-  .sm\:cu-pb-13 {
-    padding-bottom: var(--canon-space-13);
-  }
-
-  .sm\:cu-pb-14 {
-    padding-bottom: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
-  .md\:cu-pb {
-    padding-bottom: var(--pb-md);
-  }
-
-  .md\:cu-pb-0\.5 {
-    padding-bottom: var(--canon-space-0_5);
-  }
-
-  .md\:cu-pb-1 {
-    padding-bottom: var(--canon-space-1);
-  }
-
-  .md\:cu-pb-1\.5 {
-    padding-bottom: var(--canon-space-1_5);
-  }
-
-  .md\:cu-pb-2 {
-    padding-bottom: var(--canon-space-2);
-  }
-
-  .md\:cu-pb-3 {
-    padding-bottom: var(--canon-space-3);
-  }
-
-  .md\:cu-pb-4 {
-    padding-bottom: var(--canon-space-4);
-  }
-
-  .md\:cu-pb-5 {
-    padding-bottom: var(--canon-space-5);
-  }
-
-  .md\:cu-pb-6 {
-    padding-bottom: var(--canon-space-6);
-  }
-
-  .md\:cu-pb-7 {
-    padding-bottom: var(--canon-space-7);
-  }
-
-  .md\:cu-pb-8 {
-    padding-bottom: var(--canon-space-8);
-  }
-
-  .md\:cu-pb-9 {
-    padding-bottom: var(--canon-space-9);
-  }
-
-  .md\:cu-pb-10 {
-    padding-bottom: var(--canon-space-10);
-  }
-
-  .md\:cu-pb-11 {
-    padding-bottom: var(--canon-space-11);
-  }
-
-  .md\:cu-pb-12 {
-    padding-bottom: var(--canon-space-12);
-  }
-
-  .md\:cu-pb-13 {
-    padding-bottom: var(--canon-space-13);
-  }
-
-  .md\:cu-pb-14 {
-    padding-bottom: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
-  .lg\:cu-pb {
-    padding-bottom: var(--pb-lg);
-  }
-
-  .lg\:cu-pb-0\.5 {
-    padding-bottom: var(--canon-space-0_5);
-  }
-
-  .lg\:cu-pb-1 {
-    padding-bottom: var(--canon-space-1);
-  }
-
-  .lg\:cu-pb-1\.5 {
-    padding-bottom: var(--canon-space-1_5);
-  }
-
-  .lg\:cu-pb-2 {
-    padding-bottom: var(--canon-space-2);
-  }
-
-  .lg\:cu-pb-3 {
-    padding-bottom: var(--canon-space-3);
-  }
-
-  .lg\:cu-pb-4 {
-    padding-bottom: var(--canon-space-4);
-  }
-
-  .lg\:cu-pb-5 {
-    padding-bottom: var(--canon-space-5);
-  }
-
-  .lg\:cu-pb-6 {
-    padding-bottom: var(--canon-space-6);
-  }
-
-  .lg\:cu-pb-7 {
-    padding-bottom: var(--canon-space-7);
-  }
-
-  .lg\:cu-pb-8 {
-    padding-bottom: var(--canon-space-8);
-  }
-
-  .lg\:cu-pb-9 {
-    padding-bottom: var(--canon-space-9);
-  }
-
-  .lg\:cu-pb-10 {
-    padding-bottom: var(--canon-space-10);
-  }
-
-  .lg\:cu-pb-11 {
-    padding-bottom: var(--canon-space-11);
-  }
-
-  .lg\:cu-pb-12 {
-    padding-bottom: var(--canon-space-12);
-  }
-
-  .lg\:cu-pb-13 {
-    padding-bottom: var(--canon-space-13);
-  }
-
-  .lg\:cu-pb-14 {
-    padding-bottom: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
-  .xl\:cu-pb {
-    padding-bottom: var(--pb-xl);
-  }
-
-  .xl\:cu-pb-0\.5 {
-    padding-bottom: var(--canon-space-0_5);
-  }
-
-  .xl\:cu-pb-1 {
-    padding-bottom: var(--canon-space-1);
-  }
-
-  .xl\:cu-pb-1\.5 {
-    padding-bottom: var(--canon-space-1_5);
-  }
-
-  .xl\:cu-pb-2 {
-    padding-bottom: var(--canon-space-2);
-  }
-
-  .xl\:cu-pb-3 {
-    padding-bottom: var(--canon-space-3);
-  }
-
-  .xl\:cu-pb-4 {
-    padding-bottom: var(--canon-space-4);
-  }
-
-  .xl\:cu-pb-5 {
-    padding-bottom: var(--canon-space-5);
-  }
-
-  .xl\:cu-pb-6 {
-    padding-bottom: var(--canon-space-6);
-  }
-
-  .xl\:cu-pb-7 {
-    padding-bottom: var(--canon-space-7);
-  }
-
-  .xl\:cu-pb-8 {
-    padding-bottom: var(--canon-space-8);
-  }
-
-  .xl\:cu-pb-9 {
-    padding-bottom: var(--canon-space-9);
-  }
-
-  .xl\:cu-pb-10 {
-    padding-bottom: var(--canon-space-10);
-  }
-
-  .xl\:cu-pb-11 {
-    padding-bottom: var(--canon-space-11);
-  }
-
-  .xl\:cu-pb-12 {
-    padding-bottom: var(--canon-space-12);
-  }
-
-  .xl\:cu-pb-13 {
-    padding-bottom: var(--canon-space-13);
-  }
-
-  .xl\:cu-pb-14 {
-    padding-bottom: var(--canon-space-14);
-  }
-}
diff --git a/packages/canon/src/css/utilities/pl.css b/packages/canon/src/css/utilities/pl.css
deleted file mode 100644
index a9db77e279..0000000000
--- a/packages/canon/src/css/utilities/pl.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.cu-pl {
-  padding-left: var(--pl);
-}
-
-.cu-pl-0\.5 {
-  padding-left: var(--canon-space-0_5);
-}
-
-.cu-pl-1 {
-  padding-left: var(--canon-space-1);
-}
-
-.cu-pl-1\.5 {
-  padding-left: var(--canon-space-1_5);
-}
-
-.cu-pl-2 {
-  padding-left: var(--canon-space-2);
-}
-
-.cu-pl-3 {
-  padding-left: var(--canon-space-3);
-}
-
-.cu-pl-4 {
-  padding-left: var(--canon-space-4);
-}
-
-.cu-pl-5 {
-  padding-left: var(--canon-space-5);
-}
-
-.cu-pl-6 {
-  padding-left: var(--canon-space-6);
-}
-
-.cu-pl-7 {
-  padding-left: var(--canon-space-7);
-}
-
-.cu-pl-8 {
-  padding-left: var(--canon-space-8);
-}
-
-.cu-pl-9 {
-  padding-left: var(--canon-space-9);
-}
-
-.cu-pl-10 {
-  padding-left: var(--canon-space-10);
-}
-
-.cu-pl-11 {
-  padding-left: var(--canon-space-11);
-}
-
-.cu-pl-12 {
-  padding-left: var(--canon-space-12);
-}
-
-.cu-pl-13 {
-  padding-left: var(--canon-space-13);
-}
-
-.cu-pl-14 {
-  padding-left: var(--canon-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
-  .xs\:cu-pl {
-    padding-left: var(--pl-xs);
-  }
-
-  .xs\:cu-pl-0\.5 {
-    padding-left: var(--canon-space-0_5);
-  }
-
-  .xs\:cu-pl-1 {
-    padding-left: var(--canon-space-1);
-  }
-
-  .xs\:cu-pl-1\.5 {
-    padding-left: var(--canon-space-1_5);
-  }
-
-  .xs\:cu-pl-2 {
-    padding-left: var(--canon-space-2);
-  }
-
-  .xs\:cu-pl-3 {
-    padding-left: var(--canon-space-3);
-  }
-
-  .xs\:cu-pl-4 {
-    padding-left: var(--canon-space-4);
-  }
-
-  .xs\:cu-pl-5 {
-    padding-left: var(--canon-space-5);
-  }
-
-  .xs\:cu-pl-6 {
-    padding-left: var(--canon-space-6);
-  }
-
-  .xs\:cu-pl-7 {
-    padding-left: var(--canon-space-7);
-  }
-
-  .xs\:cu-pl-8 {
-    padding-left: var(--canon-space-8);
-  }
-
-  .xs\:cu-pl-9 {
-    padding-left: var(--canon-space-9);
-  }
-
-  .xs\:cu-pl-10 {
-    padding-left: var(--canon-space-10);
-  }
-
-  .xs\:cu-pl-11 {
-    padding-left: var(--canon-space-11);
-  }
-
-  .xs\:cu-pl-12 {
-    padding-left: var(--canon-space-12);
-  }
-
-  .xs\:cu-pl-13 {
-    padding-left: var(--canon-space-13);
-  }
-
-  .xs\:cu-pl-14 {
-    padding-left: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint sm */
-@media (min-width: 768px) {
-  .sm\:cu-pl {
-    padding-left: var(--pl-sm);
-  }
-
-  .sm\:cu-pl-0\.5 {
-    padding-left: var(--canon-space-0_5);
-  }
-
-  .sm\:cu-pl-1 {
-    padding-left: var(--canon-space-1);
-  }
-
-  .sm\:cu-pl-1\.5 {
-    padding-left: var(--canon-space-1_5);
-  }
-
-  .sm\:cu-pl-2 {
-    padding-left: var(--canon-space-2);
-  }
-
-  .sm\:cu-pl-3 {
-    padding-left: var(--canon-space-3);
-  }
-
-  .sm\:cu-pl-4 {
-    padding-left: var(--canon-space-4);
-  }
-
-  .sm\:cu-pl-5 {
-    padding-left: var(--canon-space-5);
-  }
-
-  .sm\:cu-pl-6 {
-    padding-left: var(--canon-space-6);
-  }
-
-  .sm\:cu-pl-7 {
-    padding-left: var(--canon-space-7);
-  }
-
-  .sm\:cu-pl-8 {
-    padding-left: var(--canon-space-8);
-  }
-
-  .sm\:cu-pl-9 {
-    padding-left: var(--canon-space-9);
-  }
-
-  .sm\:cu-pl-10 {
-    padding-left: var(--canon-space-10);
-  }
-
-  .sm\:cu-pl-11 {
-    padding-left: var(--canon-space-11);
-  }
-
-  .sm\:cu-pl-12 {
-    padding-left: var(--canon-space-12);
-  }
-
-  .sm\:cu-pl-13 {
-    padding-left: var(--canon-space-13);
-  }
-
-  .sm\:cu-pl-14 {
-    padding-left: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
-  .md\:cu-pl {
-    padding-left: var(--pl-md);
-  }
-
-  .md\:cu-pl-0\.5 {
-    padding-left: var(--canon-space-0_5);
-  }
-
-  .md\:cu-pl-1 {
-    padding-left: var(--canon-space-1);
-  }
-
-  .md\:cu-pl-1\.5 {
-    padding-left: var(--canon-space-1_5);
-  }
-
-  .md\:cu-pl-2 {
-    padding-left: var(--canon-space-2);
-  }
-
-  .md\:cu-pl-3 {
-    padding-left: var(--canon-space-3);
-  }
-
-  .md\:cu-pl-4 {
-    padding-left: var(--canon-space-4);
-  }
-
-  .md\:cu-pl-5 {
-    padding-left: var(--canon-space-5);
-  }
-
-  .md\:cu-pl-6 {
-    padding-left: var(--canon-space-6);
-  }
-
-  .md\:cu-pl-7 {
-    padding-left: var(--canon-space-7);
-  }
-
-  .md\:cu-pl-8 {
-    padding-left: var(--canon-space-8);
-  }
-
-  .md\:cu-pl-9 {
-    padding-left: var(--canon-space-9);
-  }
-
-  .md\:cu-pl-10 {
-    padding-left: var(--canon-space-10);
-  }
-
-  .md\:cu-pl-11 {
-    padding-left: var(--canon-space-11);
-  }
-
-  .md\:cu-pl-12 {
-    padding-left: var(--canon-space-12);
-  }
-
-  .md\:cu-pl-13 {
-    padding-left: var(--canon-space-13);
-  }
-
-  .md\:cu-pl-14 {
-    padding-left: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
-  .lg\:cu-pl {
-    padding-left: var(--pl-lg);
-  }
-
-  .lg\:cu-pl-0\.5 {
-    padding-left: var(--canon-space-0_5);
-  }
-
-  .lg\:cu-pl-1 {
-    padding-left: var(--canon-space-1);
-  }
-
-  .lg\:cu-pl-1\.5 {
-    padding-left: var(--canon-space-1_5);
-  }
-
-  .lg\:cu-pl-2 {
-    padding-left: var(--canon-space-2);
-  }
-
-  .lg\:cu-pl-3 {
-    padding-left: var(--canon-space-3);
-  }
-
-  .lg\:cu-pl-4 {
-    padding-left: var(--canon-space-4);
-  }
-
-  .lg\:cu-pl-5 {
-    padding-left: var(--canon-space-5);
-  }
-
-  .lg\:cu-pl-6 {
-    padding-left: var(--canon-space-6);
-  }
-
-  .lg\:cu-pl-7 {
-    padding-left: var(--canon-space-7);
-  }
-
-  .lg\:cu-pl-8 {
-    padding-left: var(--canon-space-8);
-  }
-
-  .lg\:cu-pl-9 {
-    padding-left: var(--canon-space-9);
-  }
-
-  .lg\:cu-pl-10 {
-    padding-left: var(--canon-space-10);
-  }
-
-  .lg\:cu-pl-11 {
-    padding-left: var(--canon-space-11);
-  }
-
-  .lg\:cu-pl-12 {
-    padding-left: var(--canon-space-12);
-  }
-
-  .lg\:cu-pl-13 {
-    padding-left: var(--canon-space-13);
-  }
-
-  .lg\:cu-pl-14 {
-    padding-left: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
-  .xl\:cu-pl {
-    padding-left: var(--pl-xl);
-  }
-
-  .xl\:cu-pl-0\.5 {
-    padding-left: var(--canon-space-0_5);
-  }
-
-  .xl\:cu-pl-1 {
-    padding-left: var(--canon-space-1);
-  }
-
-  .xl\:cu-pl-1\.5 {
-    padding-left: var(--canon-space-1_5);
-  }
-
-  .xl\:cu-pl-2 {
-    padding-left: var(--canon-space-2);
-  }
-
-  .xl\:cu-pl-3 {
-    padding-left: var(--canon-space-3);
-  }
-
-  .xl\:cu-pl-4 {
-    padding-left: var(--canon-space-4);
-  }
-
-  .xl\:cu-pl-5 {
-    padding-left: var(--canon-space-5);
-  }
-
-  .xl\:cu-pl-6 {
-    padding-left: var(--canon-space-6);
-  }
-
-  .xl\:cu-pl-7 {
-    padding-left: var(--canon-space-7);
-  }
-
-  .xl\:cu-pl-8 {
-    padding-left: var(--canon-space-8);
-  }
-
-  .xl\:cu-pl-9 {
-    padding-left: var(--canon-space-9);
-  }
-
-  .xl\:cu-pl-10 {
-    padding-left: var(--canon-space-10);
-  }
-
-  .xl\:cu-pl-11 {
-    padding-left: var(--canon-space-11);
-  }
-
-  .xl\:cu-pl-12 {
-    padding-left: var(--canon-space-12);
-  }
-
-  .xl\:cu-pl-13 {
-    padding-left: var(--canon-space-13);
-  }
-
-  .xl\:cu-pl-14 {
-    padding-left: var(--canon-space-14);
-  }
-}
diff --git a/packages/canon/src/css/utilities/pr.css b/packages/canon/src/css/utilities/pr.css
deleted file mode 100644
index bcbb35f192..0000000000
--- a/packages/canon/src/css/utilities/pr.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.cu-pr {
-  padding-right: var(--pr);
-}
-
-.cu-pr-0\.5 {
-  padding-right: var(--canon-space-0_5);
-}
-
-.cu-pr-1 {
-  padding-right: var(--canon-space-1);
-}
-
-.cu-pr-1\.5 {
-  padding-right: var(--canon-space-1_5);
-}
-
-.cu-pr-2 {
-  padding-right: var(--canon-space-2);
-}
-
-.cu-pr-3 {
-  padding-right: var(--canon-space-3);
-}
-
-.cu-pr-4 {
-  padding-right: var(--canon-space-4);
-}
-
-.cu-pr-5 {
-  padding-right: var(--canon-space-5);
-}
-
-.cu-pr-6 {
-  padding-right: var(--canon-space-6);
-}
-
-.cu-pr-7 {
-  padding-right: var(--canon-space-7);
-}
-
-.cu-pr-8 {
-  padding-right: var(--canon-space-8);
-}
-
-.cu-pr-9 {
-  padding-right: var(--canon-space-9);
-}
-
-.cu-pr-10 {
-  padding-right: var(--canon-space-10);
-}
-
-.cu-pr-11 {
-  padding-right: var(--canon-space-11);
-}
-
-.cu-pr-12 {
-  padding-right: var(--canon-space-12);
-}
-
-.cu-pr-13 {
-  padding-right: var(--canon-space-13);
-}
-
-.cu-pr-14 {
-  padding-right: var(--canon-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
-  .xs\:cu-pr {
-    padding-right: var(--pr-xs);
-  }
-
-  .xs\:cu-pr-0\.5 {
-    padding-right: var(--canon-space-0_5);
-  }
-
-  .xs\:cu-pr-1 {
-    padding-right: var(--canon-space-1);
-  }
-
-  .xs\:cu-pr-1\.5 {
-    padding-right: var(--canon-space-1_5);
-  }
-
-  .xs\:cu-pr-2 {
-    padding-right: var(--canon-space-2);
-  }
-
-  .xs\:cu-pr-3 {
-    padding-right: var(--canon-space-3);
-  }
-
-  .xs\:cu-pr-4 {
-    padding-right: var(--canon-space-4);
-  }
-
-  .xs\:cu-pr-5 {
-    padding-right: var(--canon-space-5);
-  }
-
-  .xs\:cu-pr-6 {
-    padding-right: var(--canon-space-6);
-  }
-
-  .xs\:cu-pr-7 {
-    padding-right: var(--canon-space-7);
-  }
-
-  .xs\:cu-pr-8 {
-    padding-right: var(--canon-space-8);
-  }
-
-  .xs\:cu-pr-9 {
-    padding-right: var(--canon-space-9);
-  }
-
-  .xs\:cu-pr-10 {
-    padding-right: var(--canon-space-10);
-  }
-
-  .xs\:cu-pr-11 {
-    padding-right: var(--canon-space-11);
-  }
-
-  .xs\:cu-pr-12 {
-    padding-right: var(--canon-space-12);
-  }
-
-  .xs\:cu-pr-13 {
-    padding-right: var(--canon-space-13);
-  }
-
-  .xs\:cu-pr-14 {
-    padding-right: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint sm */
-@media (min-width: 768px) {
-  .sm\:cu-pr {
-    padding-right: var(--pr-sm);
-  }
-
-  .sm\:cu-pr-0\.5 {
-    padding-right: var(--canon-space-0_5);
-  }
-
-  .sm\:cu-pr-1 {
-    padding-right: var(--canon-space-1);
-  }
-
-  .sm\:cu-pr-1\.5 {
-    padding-right: var(--canon-space-1_5);
-  }
-
-  .sm\:cu-pr-2 {
-    padding-right: var(--canon-space-2);
-  }
-
-  .sm\:cu-pr-3 {
-    padding-right: var(--canon-space-3);
-  }
-
-  .sm\:cu-pr-4 {
-    padding-right: var(--canon-space-4);
-  }
-
-  .sm\:cu-pr-5 {
-    padding-right: var(--canon-space-5);
-  }
-
-  .sm\:cu-pr-6 {
-    padding-right: var(--canon-space-6);
-  }
-
-  .sm\:cu-pr-7 {
-    padding-right: var(--canon-space-7);
-  }
-
-  .sm\:cu-pr-8 {
-    padding-right: var(--canon-space-8);
-  }
-
-  .sm\:cu-pr-9 {
-    padding-right: var(--canon-space-9);
-  }
-
-  .sm\:cu-pr-10 {
-    padding-right: var(--canon-space-10);
-  }
-
-  .sm\:cu-pr-11 {
-    padding-right: var(--canon-space-11);
-  }
-
-  .sm\:cu-pr-12 {
-    padding-right: var(--canon-space-12);
-  }
-
-  .sm\:cu-pr-13 {
-    padding-right: var(--canon-space-13);
-  }
-
-  .sm\:cu-pr-14 {
-    padding-right: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
-  .md\:cu-pr {
-    padding-right: var(--pr-md);
-  }
-
-  .md\:cu-pr-0\.5 {
-    padding-right: var(--canon-space-0_5);
-  }
-
-  .md\:cu-pr-1 {
-    padding-right: var(--canon-space-1);
-  }
-
-  .md\:cu-pr-1\.5 {
-    padding-right: var(--canon-space-1_5);
-  }
-
-  .md\:cu-pr-2 {
-    padding-right: var(--canon-space-2);
-  }
-
-  .md\:cu-pr-3 {
-    padding-right: var(--canon-space-3);
-  }
-
-  .md\:cu-pr-4 {
-    padding-right: var(--canon-space-4);
-  }
-
-  .md\:cu-pr-5 {
-    padding-right: var(--canon-space-5);
-  }
-
-  .md\:cu-pr-6 {
-    padding-right: var(--canon-space-6);
-  }
-
-  .md\:cu-pr-7 {
-    padding-right: var(--canon-space-7);
-  }
-
-  .md\:cu-pr-8 {
-    padding-right: var(--canon-space-8);
-  }
-
-  .md\:cu-pr-9 {
-    padding-right: var(--canon-space-9);
-  }
-
-  .md\:cu-pr-10 {
-    padding-right: var(--canon-space-10);
-  }
-
-  .md\:cu-pr-11 {
-    padding-right: var(--canon-space-11);
-  }
-
-  .md\:cu-pr-12 {
-    padding-right: var(--canon-space-12);
-  }
-
-  .md\:cu-pr-13 {
-    padding-right: var(--canon-space-13);
-  }
-
-  .md\:cu-pr-14 {
-    padding-right: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
-  .lg\:cu-pr {
-    padding-right: var(--pr-lg);
-  }
-
-  .lg\:cu-pr-0\.5 {
-    padding-right: var(--canon-space-0_5);
-  }
-
-  .lg\:cu-pr-1 {
-    padding-right: var(--canon-space-1);
-  }
-
-  .lg\:cu-pr-1\.5 {
-    padding-right: var(--canon-space-1_5);
-  }
-
-  .lg\:cu-pr-2 {
-    padding-right: var(--canon-space-2);
-  }
-
-  .lg\:cu-pr-3 {
-    padding-right: var(--canon-space-3);
-  }
-
-  .lg\:cu-pr-4 {
-    padding-right: var(--canon-space-4);
-  }
-
-  .lg\:cu-pr-5 {
-    padding-right: var(--canon-space-5);
-  }
-
-  .lg\:cu-pr-6 {
-    padding-right: var(--canon-space-6);
-  }
-
-  .lg\:cu-pr-7 {
-    padding-right: var(--canon-space-7);
-  }
-
-  .lg\:cu-pr-8 {
-    padding-right: var(--canon-space-8);
-  }
-
-  .lg\:cu-pr-9 {
-    padding-right: var(--canon-space-9);
-  }
-
-  .lg\:cu-pr-10 {
-    padding-right: var(--canon-space-10);
-  }
-
-  .lg\:cu-pr-11 {
-    padding-right: var(--canon-space-11);
-  }
-
-  .lg\:cu-pr-12 {
-    padding-right: var(--canon-space-12);
-  }
-
-  .lg\:cu-pr-13 {
-    padding-right: var(--canon-space-13);
-  }
-
-  .lg\:cu-pr-14 {
-    padding-right: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
-  .xl\:cu-pr {
-    padding-right: var(--pr-xl);
-  }
-
-  .xl\:cu-pr-0\.5 {
-    padding-right: var(--canon-space-0_5);
-  }
-
-  .xl\:cu-pr-1 {
-    padding-right: var(--canon-space-1);
-  }
-
-  .xl\:cu-pr-1\.5 {
-    padding-right: var(--canon-space-1_5);
-  }
-
-  .xl\:cu-pr-2 {
-    padding-right: var(--canon-space-2);
-  }
-
-  .xl\:cu-pr-3 {
-    padding-right: var(--canon-space-3);
-  }
-
-  .xl\:cu-pr-4 {
-    padding-right: var(--canon-space-4);
-  }
-
-  .xl\:cu-pr-5 {
-    padding-right: var(--canon-space-5);
-  }
-
-  .xl\:cu-pr-6 {
-    padding-right: var(--canon-space-6);
-  }
-
-  .xl\:cu-pr-7 {
-    padding-right: var(--canon-space-7);
-  }
-
-  .xl\:cu-pr-8 {
-    padding-right: var(--canon-space-8);
-  }
-
-  .xl\:cu-pr-9 {
-    padding-right: var(--canon-space-9);
-  }
-
-  .xl\:cu-pr-10 {
-    padding-right: var(--canon-space-10);
-  }
-
-  .xl\:cu-pr-11 {
-    padding-right: var(--canon-space-11);
-  }
-
-  .xl\:cu-pr-12 {
-    padding-right: var(--canon-space-12);
-  }
-
-  .xl\:cu-pr-13 {
-    padding-right: var(--canon-space-13);
-  }
-
-  .xl\:cu-pr-14 {
-    padding-right: var(--canon-space-14);
-  }
-}
diff --git a/packages/canon/src/css/utilities/pt.css b/packages/canon/src/css/utilities/pt.css
deleted file mode 100644
index 900f412892..0000000000
--- a/packages/canon/src/css/utilities/pt.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.cu-pt {
-  padding-top: var(--pt);
-}
-
-.cu-pt-0\.5 {
-  padding-top: var(--canon-space-0_5);
-}
-
-.cu-pt-1 {
-  padding-top: var(--canon-space-1);
-}
-
-.cu-pt-1\.5 {
-  padding-top: var(--canon-space-1_5);
-}
-
-.cu-pt-2 {
-  padding-top: var(--canon-space-2);
-}
-
-.cu-pt-3 {
-  padding-top: var(--canon-space-3);
-}
-
-.cu-pt-4 {
-  padding-top: var(--canon-space-4);
-}
-
-.cu-pt-5 {
-  padding-top: var(--canon-space-5);
-}
-
-.cu-pt-6 {
-  padding-top: var(--canon-space-6);
-}
-
-.cu-pt-7 {
-  padding-top: var(--canon-space-7);
-}
-
-.cu-pt-8 {
-  padding-top: var(--canon-space-8);
-}
-
-.cu-pt-9 {
-  padding-top: var(--canon-space-9);
-}
-
-.cu-pt-10 {
-  padding-top: var(--canon-space-10);
-}
-
-.cu-pt-11 {
-  padding-top: var(--canon-space-11);
-}
-
-.cu-pt-12 {
-  padding-top: var(--canon-space-12);
-}
-
-.cu-pt-13 {
-  padding-top: var(--canon-space-13);
-}
-
-.cu-pt-14 {
-  padding-top: var(--canon-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
-  .xs\:cu-pt {
-    padding-top: var(--pt-xs);
-  }
-
-  .xs\:cu-pt-0\.5 {
-    padding-top: var(--canon-space-0_5);
-  }
-
-  .xs\:cu-pt-1 {
-    padding-top: var(--canon-space-1);
-  }
-
-  .xs\:cu-pt-1\.5 {
-    padding-top: var(--canon-space-1_5);
-  }
-
-  .xs\:cu-pt-2 {
-    padding-top: var(--canon-space-2);
-  }
-
-  .xs\:cu-pt-3 {
-    padding-top: var(--canon-space-3);
-  }
-
-  .xs\:cu-pt-4 {
-    padding-top: var(--canon-space-4);
-  }
-
-  .xs\:cu-pt-5 {
-    padding-top: var(--canon-space-5);
-  }
-
-  .xs\:cu-pt-6 {
-    padding-top: var(--canon-space-6);
-  }
-
-  .xs\:cu-pt-7 {
-    padding-top: var(--canon-space-7);
-  }
-
-  .xs\:cu-pt-8 {
-    padding-top: var(--canon-space-8);
-  }
-
-  .xs\:cu-pt-9 {
-    padding-top: var(--canon-space-9);
-  }
-
-  .xs\:cu-pt-10 {
-    padding-top: var(--canon-space-10);
-  }
-
-  .xs\:cu-pt-11 {
-    padding-top: var(--canon-space-11);
-  }
-
-  .xs\:cu-pt-12 {
-    padding-top: var(--canon-space-12);
-  }
-
-  .xs\:cu-pt-13 {
-    padding-top: var(--canon-space-13);
-  }
-
-  .xs\:cu-pt-14 {
-    padding-top: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint sm */
-@media (min-width: 768px) {
-  .sm\:cu-pt {
-    padding-top: var(--pt-sm);
-  }
-
-  .sm\:cu-pt-0\.5 {
-    padding-top: var(--canon-space-0_5);
-  }
-
-  .sm\:cu-pt-1 {
-    padding-top: var(--canon-space-1);
-  }
-
-  .sm\:cu-pt-1\.5 {
-    padding-top: var(--canon-space-1_5);
-  }
-
-  .sm\:cu-pt-2 {
-    padding-top: var(--canon-space-2);
-  }
-
-  .sm\:cu-pt-3 {
-    padding-top: var(--canon-space-3);
-  }
-
-  .sm\:cu-pt-4 {
-    padding-top: var(--canon-space-4);
-  }
-
-  .sm\:cu-pt-5 {
-    padding-top: var(--canon-space-5);
-  }
-
-  .sm\:cu-pt-6 {
-    padding-top: var(--canon-space-6);
-  }
-
-  .sm\:cu-pt-7 {
-    padding-top: var(--canon-space-7);
-  }
-
-  .sm\:cu-pt-8 {
-    padding-top: var(--canon-space-8);
-  }
-
-  .sm\:cu-pt-9 {
-    padding-top: var(--canon-space-9);
-  }
-
-  .sm\:cu-pt-10 {
-    padding-top: var(--canon-space-10);
-  }
-
-  .sm\:cu-pt-11 {
-    padding-top: var(--canon-space-11);
-  }
-
-  .sm\:cu-pt-12 {
-    padding-top: var(--canon-space-12);
-  }
-
-  .sm\:cu-pt-13 {
-    padding-top: var(--canon-space-13);
-  }
-
-  .sm\:cu-pt-14 {
-    padding-top: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
-  .md\:cu-pt {
-    padding-top: var(--pt-md);
-  }
-
-  .md\:cu-pt-0\.5 {
-    padding-top: var(--canon-space-0_5);
-  }
-
-  .md\:cu-pt-1 {
-    padding-top: var(--canon-space-1);
-  }
-
-  .md\:cu-pt-1\.5 {
-    padding-top: var(--canon-space-1_5);
-  }
-
-  .md\:cu-pt-2 {
-    padding-top: var(--canon-space-2);
-  }
-
-  .md\:cu-pt-3 {
-    padding-top: var(--canon-space-3);
-  }
-
-  .md\:cu-pt-4 {
-    padding-top: var(--canon-space-4);
-  }
-
-  .md\:cu-pt-5 {
-    padding-top: var(--canon-space-5);
-  }
-
-  .md\:cu-pt-6 {
-    padding-top: var(--canon-space-6);
-  }
-
-  .md\:cu-pt-7 {
-    padding-top: var(--canon-space-7);
-  }
-
-  .md\:cu-pt-8 {
-    padding-top: var(--canon-space-8);
-  }
-
-  .md\:cu-pt-9 {
-    padding-top: var(--canon-space-9);
-  }
-
-  .md\:cu-pt-10 {
-    padding-top: var(--canon-space-10);
-  }
-
-  .md\:cu-pt-11 {
-    padding-top: var(--canon-space-11);
-  }
-
-  .md\:cu-pt-12 {
-    padding-top: var(--canon-space-12);
-  }
-
-  .md\:cu-pt-13 {
-    padding-top: var(--canon-space-13);
-  }
-
-  .md\:cu-pt-14 {
-    padding-top: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
-  .lg\:cu-pt {
-    padding-top: var(--pt-lg);
-  }
-
-  .lg\:cu-pt-0\.5 {
-    padding-top: var(--canon-space-0_5);
-  }
-
-  .lg\:cu-pt-1 {
-    padding-top: var(--canon-space-1);
-  }
-
-  .lg\:cu-pt-1\.5 {
-    padding-top: var(--canon-space-1_5);
-  }
-
-  .lg\:cu-pt-2 {
-    padding-top: var(--canon-space-2);
-  }
-
-  .lg\:cu-pt-3 {
-    padding-top: var(--canon-space-3);
-  }
-
-  .lg\:cu-pt-4 {
-    padding-top: var(--canon-space-4);
-  }
-
-  .lg\:cu-pt-5 {
-    padding-top: var(--canon-space-5);
-  }
-
-  .lg\:cu-pt-6 {
-    padding-top: var(--canon-space-6);
-  }
-
-  .lg\:cu-pt-7 {
-    padding-top: var(--canon-space-7);
-  }
-
-  .lg\:cu-pt-8 {
-    padding-top: var(--canon-space-8);
-  }
-
-  .lg\:cu-pt-9 {
-    padding-top: var(--canon-space-9);
-  }
-
-  .lg\:cu-pt-10 {
-    padding-top: var(--canon-space-10);
-  }
-
-  .lg\:cu-pt-11 {
-    padding-top: var(--canon-space-11);
-  }
-
-  .lg\:cu-pt-12 {
-    padding-top: var(--canon-space-12);
-  }
-
-  .lg\:cu-pt-13 {
-    padding-top: var(--canon-space-13);
-  }
-
-  .lg\:cu-pt-14 {
-    padding-top: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
-  .xl\:cu-pt {
-    padding-top: var(--pt-xl);
-  }
-
-  .xl\:cu-pt-0\.5 {
-    padding-top: var(--canon-space-0_5);
-  }
-
-  .xl\:cu-pt-1 {
-    padding-top: var(--canon-space-1);
-  }
-
-  .xl\:cu-pt-1\.5 {
-    padding-top: var(--canon-space-1_5);
-  }
-
-  .xl\:cu-pt-2 {
-    padding-top: var(--canon-space-2);
-  }
-
-  .xl\:cu-pt-3 {
-    padding-top: var(--canon-space-3);
-  }
-
-  .xl\:cu-pt-4 {
-    padding-top: var(--canon-space-4);
-  }
-
-  .xl\:cu-pt-5 {
-    padding-top: var(--canon-space-5);
-  }
-
-  .xl\:cu-pt-6 {
-    padding-top: var(--canon-space-6);
-  }
-
-  .xl\:cu-pt-7 {
-    padding-top: var(--canon-space-7);
-  }
-
-  .xl\:cu-pt-8 {
-    padding-top: var(--canon-space-8);
-  }
-
-  .xl\:cu-pt-9 {
-    padding-top: var(--canon-space-9);
-  }
-
-  .xl\:cu-pt-10 {
-    padding-top: var(--canon-space-10);
-  }
-
-  .xl\:cu-pt-11 {
-    padding-top: var(--canon-space-11);
-  }
-
-  .xl\:cu-pt-12 {
-    padding-top: var(--canon-space-12);
-  }
-
-  .xl\:cu-pt-13 {
-    padding-top: var(--canon-space-13);
-  }
-
-  .xl\:cu-pt-14 {
-    padding-top: var(--canon-space-14);
-  }
-}
diff --git a/packages/canon/src/css/utilities/px.css b/packages/canon/src/css/utilities/px.css
deleted file mode 100644
index 84fd30aaf8..0000000000
--- a/packages/canon/src/css/utilities/px.css
+++ /dev/null
@@ -1,524 +0,0 @@
-.cu-px {
-  padding-left: var(--px);
-  padding-right: var(--px);
-}
-
-.cu-px-0\.5 {
-  padding-left: var(--canon-space-0_5);
-  padding-right: var(--canon-space-0_5);
-}
-
-.cu-px-1 {
-  padding-left: var(--canon-space-1);
-  padding-right: var(--canon-space-1);
-}
-
-.cu-px-1\.5 {
-  padding-left: var(--canon-space-1_5);
-  padding-right: var(--canon-space-1_5);
-}
-
-.cu-px-2 {
-  padding-left: var(--canon-space-2);
-  padding-right: var(--canon-space-2);
-}
-
-.cu-px-3 {
-  padding-left: var(--canon-space-3);
-  padding-right: var(--canon-space-3);
-}
-
-.cu-px-4 {
-  padding-left: var(--canon-space-4);
-  padding-right: var(--canon-space-4);
-}
-
-.cu-px-5 {
-  padding-left: var(--canon-space-5);
-  padding-right: var(--canon-space-5);
-}
-
-.cu-px-6 {
-  padding-left: var(--canon-space-6);
-  padding-right: var(--canon-space-6);
-}
-
-.cu-px-7 {
-  padding-left: var(--canon-space-7);
-  padding-right: var(--canon-space-7);
-}
-
-.cu-px-8 {
-  padding-left: var(--canon-space-8);
-  padding-right: var(--canon-space-8);
-}
-
-.cu-px-9 {
-  padding-left: var(--canon-space-9);
-  padding-right: var(--canon-space-9);
-}
-
-.cu-px-10 {
-  padding-left: var(--canon-space-10);
-  padding-right: var(--canon-space-10);
-}
-
-.cu-px-11 {
-  padding-left: var(--canon-space-11);
-  padding-right: var(--canon-space-11);
-}
-
-.cu-px-12 {
-  padding-left: var(--canon-space-12);
-  padding-right: var(--canon-space-12);
-}
-
-.cu-px-13 {
-  padding-left: var(--canon-space-13);
-  padding-right: var(--canon-space-13);
-}
-
-.cu-px-14 {
-  padding-left: var(--canon-space-14);
-  padding-right: var(--canon-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
-  .xs\:cu-px {
-    padding-left: var(--px-xs);
-    padding-right: var(--px-xs);
-  }
-
-  .xs\:cu-px-0\.5 {
-    padding-left: var(--canon-space-0_5);
-    padding-right: var(--canon-space-0_5);
-  }
-
-  .xs\:cu-px-1 {
-    padding-left: var(--canon-space-1);
-    padding-right: var(--canon-space-1);
-  }
-
-  .xs\:cu-px-1\.5 {
-    padding-left: var(--canon-space-1_5);
-    padding-right: var(--canon-space-1_5);
-  }
-
-  .xs\:cu-px-2 {
-    padding-left: var(--canon-space-2);
-    padding-right: var(--canon-space-2);
-  }
-
-  .xs\:cu-px-3 {
-    padding-left: var(--canon-space-3);
-    padding-right: var(--canon-space-3);
-  }
-
-  .xs\:cu-px-4 {
-    padding-left: var(--canon-space-4);
-    padding-right: var(--canon-space-4);
-  }
-
-  .xs\:cu-px-5 {
-    padding-left: var(--canon-space-5);
-    padding-right: var(--canon-space-5);
-  }
-
-  .xs\:cu-px-6 {
-    padding-left: var(--canon-space-6);
-    padding-right: var(--canon-space-6);
-  }
-
-  .xs\:cu-px-7 {
-    padding-left: var(--canon-space-7);
-    padding-right: var(--canon-space-7);
-  }
-
-  .xs\:cu-px-8 {
-    padding-left: var(--canon-space-8);
-    padding-right: var(--canon-space-8);
-  }
-
-  .xs\:cu-px-9 {
-    padding-left: var(--canon-space-9);
-    padding-right: var(--canon-space-9);
-  }
-
-  .xs\:cu-px-10 {
-    padding-left: var(--canon-space-10);
-    padding-right: var(--canon-space-10);
-  }
-
-  .xs\:cu-px-11 {
-    padding-left: var(--canon-space-11);
-    padding-right: var(--canon-space-11);
-  }
-
-  .xs\:cu-px-12 {
-    padding-left: var(--canon-space-12);
-    padding-right: var(--canon-space-12);
-  }
-
-  .xs\:cu-px-13 {
-    padding-left: var(--canon-space-13);
-    padding-right: var(--canon-space-13);
-  }
-
-  .xs\:cu-px-14 {
-    padding-left: var(--canon-space-14);
-    padding-right: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint sm */
-@media (min-width: 768px) {
-  .sm\:cu-px {
-    padding-left: var(--px-sm);
-    padding-right: var(--px-sm);
-  }
-
-  .sm\:cu-px-0\.5 {
-    padding-left: var(--canon-space-0_5);
-    padding-right: var(--canon-space-0_5);
-  }
-
-  .sm\:cu-px-1 {
-    padding-left: var(--canon-space-1);
-    padding-right: var(--canon-space-1);
-  }
-
-  .sm\:cu-px-1\.5 {
-    padding-left: var(--canon-space-1_5);
-    padding-right: var(--canon-space-1_5);
-  }
-
-  .sm\:cu-px-2 {
-    padding-left: var(--canon-space-2);
-    padding-right: var(--canon-space-2);
-  }
-
-  .sm\:cu-px-3 {
-    padding-left: var(--canon-space-3);
-    padding-right: var(--canon-space-3);
-  }
-
-  .sm\:cu-px-4 {
-    padding-left: var(--canon-space-4);
-    padding-right: var(--canon-space-4);
-  }
-
-  .sm\:cu-px-5 {
-    padding-left: var(--canon-space-5);
-    padding-right: var(--canon-space-5);
-  }
-
-  .sm\:cu-px-6 {
-    padding-left: var(--canon-space-6);
-    padding-right: var(--canon-space-6);
-  }
-
-  .sm\:cu-px-7 {
-    padding-left: var(--canon-space-7);
-    padding-right: var(--canon-space-7);
-  }
-
-  .sm\:cu-px-8 {
-    padding-left: var(--canon-space-8);
-    padding-right: var(--canon-space-8);
-  }
-
-  .sm\:cu-px-9 {
-    padding-left: var(--canon-space-9);
-    padding-right: var(--canon-space-9);
-  }
-
-  .sm\:cu-px-10 {
-    padding-left: var(--canon-space-10);
-    padding-right: var(--canon-space-10);
-  }
-
-  .sm\:cu-px-11 {
-    padding-left: var(--canon-space-11);
-    padding-right: var(--canon-space-11);
-  }
-
-  .sm\:cu-px-12 {
-    padding-left: var(--canon-space-12);
-    padding-right: var(--canon-space-12);
-  }
-
-  .sm\:cu-px-13 {
-    padding-left: var(--canon-space-13);
-    padding-right: var(--canon-space-13);
-  }
-
-  .sm\:cu-px-14 {
-    padding-left: var(--canon-space-14);
-    padding-right: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
-  .md\:cu-px {
-    padding-left: var(--px-md);
-    padding-right: var(--px-md);
-  }
-
-  .md\:cu-px-0\.5 {
-    padding-left: var(--canon-space-0_5);
-    padding-right: var(--canon-space-0_5);
-  }
-
-  .md\:cu-px-1 {
-    padding-left: var(--canon-space-1);
-    padding-right: var(--canon-space-1);
-  }
-
-  .md\:cu-px-1\.5 {
-    padding-left: var(--canon-space-1_5);
-    padding-right: var(--canon-space-1_5);
-  }
-
-  .md\:cu-px-2 {
-    padding-left: var(--canon-space-2);
-    padding-right: var(--canon-space-2);
-  }
-
-  .md\:cu-px-3 {
-    padding-left: var(--canon-space-3);
-    padding-right: var(--canon-space-3);
-  }
-
-  .md\:cu-px-4 {
-    padding-left: var(--canon-space-4);
-    padding-right: var(--canon-space-4);
-  }
-
-  .md\:cu-px-5 {
-    padding-left: var(--canon-space-5);
-    padding-right: var(--canon-space-5);
-  }
-
-  .md\:cu-px-6 {
-    padding-left: var(--canon-space-6);
-    padding-right: var(--canon-space-6);
-  }
-
-  .md\:cu-px-7 {
-    padding-left: var(--canon-space-7);
-    padding-right: var(--canon-space-7);
-  }
-
-  .md\:cu-px-8 {
-    padding-left: var(--canon-space-8);
-    padding-right: var(--canon-space-8);
-  }
-
-  .md\:cu-px-9 {
-    padding-left: var(--canon-space-9);
-    padding-right: var(--canon-space-9);
-  }
-
-  .md\:cu-px-10 {
-    padding-left: var(--canon-space-10);
-    padding-right: var(--canon-space-10);
-  }
-
-  .md\:cu-px-11 {
-    padding-left: var(--canon-space-11);
-    padding-right: var(--canon-space-11);
-  }
-
-  .md\:cu-px-12 {
-    padding-left: var(--canon-space-12);
-    padding-right: var(--canon-space-12);
-  }
-
-  .md\:cu-px-13 {
-    padding-left: var(--canon-space-13);
-    padding-right: var(--canon-space-13);
-  }
-
-  .md\:cu-px-14 {
-    padding-left: var(--canon-space-14);
-    padding-right: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
-  .lg\:cu-px {
-    padding-left: var(--px-lg);
-    padding-right: var(--px-lg);
-  }
-
-  .lg\:cu-px-0\.5 {
-    padding-left: var(--canon-space-0_5);
-    padding-right: var(--canon-space-0_5);
-  }
-
-  .lg\:cu-px-1 {
-    padding-left: var(--canon-space-1);
-    padding-right: var(--canon-space-1);
-  }
-
-  .lg\:cu-px-1\.5 {
-    padding-left: var(--canon-space-1_5);
-    padding-right: var(--canon-space-1_5);
-  }
-
-  .lg\:cu-px-2 {
-    padding-left: var(--canon-space-2);
-    padding-right: var(--canon-space-2);
-  }
-
-  .lg\:cu-px-3 {
-    padding-left: var(--canon-space-3);
-    padding-right: var(--canon-space-3);
-  }
-
-  .lg\:cu-px-4 {
-    padding-left: var(--canon-space-4);
-    padding-right: var(--canon-space-4);
-  }
-
-  .lg\:cu-px-5 {
-    padding-left: var(--canon-space-5);
-    padding-right: var(--canon-space-5);
-  }
-
-  .lg\:cu-px-6 {
-    padding-left: var(--canon-space-6);
-    padding-right: var(--canon-space-6);
-  }
-
-  .lg\:cu-px-7 {
-    padding-left: var(--canon-space-7);
-    padding-right: var(--canon-space-7);
-  }
-
-  .lg\:cu-px-8 {
-    padding-left: var(--canon-space-8);
-    padding-right: var(--canon-space-8);
-  }
-
-  .lg\:cu-px-9 {
-    padding-left: var(--canon-space-9);
-    padding-right: var(--canon-space-9);
-  }
-
-  .lg\:cu-px-10 {
-    padding-left: var(--canon-space-10);
-    padding-right: var(--canon-space-10);
-  }
-
-  .lg\:cu-px-11 {
-    padding-left: var(--canon-space-11);
-    padding-right: var(--canon-space-11);
-  }
-
-  .lg\:cu-px-12 {
-    padding-left: var(--canon-space-12);
-    padding-right: var(--canon-space-12);
-  }
-
-  .lg\:cu-px-13 {
-    padding-left: var(--canon-space-13);
-    padding-right: var(--canon-space-13);
-  }
-
-  .lg\:cu-px-14 {
-    padding-left: var(--canon-space-14);
-    padding-right: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
-  .xl\:cu-px {
-    padding-left: var(--px-xl);
-    padding-right: var(--px-xl);
-  }
-
-  .xl\:cu-px-0\.5 {
-    padding-left: var(--canon-space-0_5);
-    padding-right: var(--canon-space-0_5);
-  }
-
-  .xl\:cu-px-1 {
-    padding-left: var(--canon-space-1);
-    padding-right: var(--canon-space-1);
-  }
-
-  .xl\:cu-px-1\.5 {
-    padding-left: var(--canon-space-1_5);
-    padding-right: var(--canon-space-1_5);
-  }
-
-  .xl\:cu-px-2 {
-    padding-left: var(--canon-space-2);
-    padding-right: var(--canon-space-2);
-  }
-
-  .xl\:cu-px-3 {
-    padding-left: var(--canon-space-3);
-    padding-right: var(--canon-space-3);
-  }
-
-  .xl\:cu-px-4 {
-    padding-left: var(--canon-space-4);
-    padding-right: var(--canon-space-4);
-  }
-
-  .xl\:cu-px-5 {
-    padding-left: var(--canon-space-5);
-    padding-right: var(--canon-space-5);
-  }
-
-  .xl\:cu-px-6 {
-    padding-left: var(--canon-space-6);
-    padding-right: var(--canon-space-6);
-  }
-
-  .xl\:cu-px-7 {
-    padding-left: var(--canon-space-7);
-    padding-right: var(--canon-space-7);
-  }
-
-  .xl\:cu-px-8 {
-    padding-left: var(--canon-space-8);
-    padding-right: var(--canon-space-8);
-  }
-
-  .xl\:cu-px-9 {
-    padding-left: var(--canon-space-9);
-    padding-right: var(--canon-space-9);
-  }
-
-  .xl\:cu-px-10 {
-    padding-left: var(--canon-space-10);
-    padding-right: var(--canon-space-10);
-  }
-
-  .xl\:cu-px-11 {
-    padding-left: var(--canon-space-11);
-    padding-right: var(--canon-space-11);
-  }
-
-  .xl\:cu-px-12 {
-    padding-left: var(--canon-space-12);
-    padding-right: var(--canon-space-12);
-  }
-
-  .xl\:cu-px-13 {
-    padding-left: var(--canon-space-13);
-    padding-right: var(--canon-space-13);
-  }
-
-  .xl\:cu-px-14 {
-    padding-left: var(--canon-space-14);
-    padding-right: var(--canon-space-14);
-  }
-}
diff --git a/packages/canon/src/css/utilities/py.css b/packages/canon/src/css/utilities/py.css
deleted file mode 100644
index 233794f888..0000000000
--- a/packages/canon/src/css/utilities/py.css
+++ /dev/null
@@ -1,524 +0,0 @@
-.cu-py {
-  padding-top: var(--py);
-  padding-bottom: var(--py);
-}
-
-.cu-py-0\.5 {
-  padding-top: var(--canon-space-0_5);
-  padding-bottom: var(--canon-space-0_5);
-}
-
-.cu-py-1 {
-  padding-top: var(--canon-space-1);
-  padding-bottom: var(--canon-space-1);
-}
-
-.cu-py-1\.5 {
-  padding-top: var(--canon-space-1_5);
-  padding-bottom: var(--canon-space-1_5);
-}
-
-.cu-py-2 {
-  padding-top: var(--canon-space-2);
-  padding-bottom: var(--canon-space-2);
-}
-
-.cu-py-3 {
-  padding-top: var(--canon-space-3);
-  padding-bottom: var(--canon-space-3);
-}
-
-.cu-py-4 {
-  padding-top: var(--canon-space-4);
-  padding-bottom: var(--canon-space-4);
-}
-
-.cu-py-5 {
-  padding-top: var(--canon-space-5);
-  padding-bottom: var(--canon-space-5);
-}
-
-.cu-py-6 {
-  padding-top: var(--canon-space-6);
-  padding-bottom: var(--canon-space-6);
-}
-
-.cu-py-7 {
-  padding-top: var(--canon-space-7);
-  padding-bottom: var(--canon-space-7);
-}
-
-.cu-py-8 {
-  padding-top: var(--canon-space-8);
-  padding-bottom: var(--canon-space-8);
-}
-
-.cu-py-9 {
-  padding-top: var(--canon-space-9);
-  padding-bottom: var(--canon-space-9);
-}
-
-.cu-py-10 {
-  padding-top: var(--canon-space-10);
-  padding-bottom: var(--canon-space-10);
-}
-
-.cu-py-11 {
-  padding-top: var(--canon-space-11);
-  padding-bottom: var(--canon-space-11);
-}
-
-.cu-py-12 {
-  padding-top: var(--canon-space-12);
-  padding-bottom: var(--canon-space-12);
-}
-
-.cu-py-13 {
-  padding-top: var(--canon-space-13);
-  padding-bottom: var(--canon-space-13);
-}
-
-.cu-py-14 {
-  padding-top: var(--canon-space-14);
-  padding-bottom: var(--canon-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
-  .xs\:cu-py {
-    padding-top: var(--py-xs);
-    padding-bottom: var(--py-xs);
-  }
-
-  .xs\:cu-py-0\.5 {
-    padding-top: var(--canon-space-0_5);
-    padding-bottom: var(--canon-space-0_5);
-  }
-
-  .xs\:cu-py-1 {
-    padding-top: var(--canon-space-1);
-    padding-bottom: var(--canon-space-1);
-  }
-
-  .xs\:cu-py-1\.5 {
-    padding-top: var(--canon-space-1_5);
-    padding-bottom: var(--canon-space-1_5);
-  }
-
-  .xs\:cu-py-2 {
-    padding-top: var(--canon-space-2);
-    padding-bottom: var(--canon-space-2);
-  }
-
-  .xs\:cu-py-3 {
-    padding-top: var(--canon-space-3);
-    padding-bottom: var(--canon-space-3);
-  }
-
-  .xs\:cu-py-4 {
-    padding-top: var(--canon-space-4);
-    padding-bottom: var(--canon-space-4);
-  }
-
-  .xs\:cu-py-5 {
-    padding-top: var(--canon-space-5);
-    padding-bottom: var(--canon-space-5);
-  }
-
-  .xs\:cu-py-6 {
-    padding-top: var(--canon-space-6);
-    padding-bottom: var(--canon-space-6);
-  }
-
-  .xs\:cu-py-7 {
-    padding-top: var(--canon-space-7);
-    padding-bottom: var(--canon-space-7);
-  }
-
-  .xs\:cu-py-8 {
-    padding-top: var(--canon-space-8);
-    padding-bottom: var(--canon-space-8);
-  }
-
-  .xs\:cu-py-9 {
-    padding-top: var(--canon-space-9);
-    padding-bottom: var(--canon-space-9);
-  }
-
-  .xs\:cu-py-10 {
-    padding-top: var(--canon-space-10);
-    padding-bottom: var(--canon-space-10);
-  }
-
-  .xs\:cu-py-11 {
-    padding-top: var(--canon-space-11);
-    padding-bottom: var(--canon-space-11);
-  }
-
-  .xs\:cu-py-12 {
-    padding-top: var(--canon-space-12);
-    padding-bottom: var(--canon-space-12);
-  }
-
-  .xs\:cu-py-13 {
-    padding-top: var(--canon-space-13);
-    padding-bottom: var(--canon-space-13);
-  }
-
-  .xs\:cu-py-14 {
-    padding-top: var(--canon-space-14);
-    padding-bottom: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint sm */
-@media (min-width: 768px) {
-  .sm\:cu-py {
-    padding-top: var(--py-sm);
-    padding-bottom: var(--py-sm);
-  }
-
-  .sm\:cu-py-0\.5 {
-    padding-top: var(--canon-space-0_5);
-    padding-bottom: var(--canon-space-0_5);
-  }
-
-  .sm\:cu-py-1 {
-    padding-top: var(--canon-space-1);
-    padding-bottom: var(--canon-space-1);
-  }
-
-  .sm\:cu-py-1\.5 {
-    padding-top: var(--canon-space-1_5);
-    padding-bottom: var(--canon-space-1_5);
-  }
-
-  .sm\:cu-py-2 {
-    padding-top: var(--canon-space-2);
-    padding-bottom: var(--canon-space-2);
-  }
-
-  .sm\:cu-py-3 {
-    padding-top: var(--canon-space-3);
-    padding-bottom: var(--canon-space-3);
-  }
-
-  .sm\:cu-py-4 {
-    padding-top: var(--canon-space-4);
-    padding-bottom: var(--canon-space-4);
-  }
-
-  .sm\:cu-py-5 {
-    padding-top: var(--canon-space-5);
-    padding-bottom: var(--canon-space-5);
-  }
-
-  .sm\:cu-py-6 {
-    padding-top: var(--canon-space-6);
-    padding-bottom: var(--canon-space-6);
-  }
-
-  .sm\:cu-py-7 {
-    padding-top: var(--canon-space-7);
-    padding-bottom: var(--canon-space-7);
-  }
-
-  .sm\:cu-py-8 {
-    padding-top: var(--canon-space-8);
-    padding-bottom: var(--canon-space-8);
-  }
-
-  .sm\:cu-py-9 {
-    padding-top: var(--canon-space-9);
-    padding-bottom: var(--canon-space-9);
-  }
-
-  .sm\:cu-py-10 {
-    padding-top: var(--canon-space-10);
-    padding-bottom: var(--canon-space-10);
-  }
-
-  .sm\:cu-py-11 {
-    padding-top: var(--canon-space-11);
-    padding-bottom: var(--canon-space-11);
-  }
-
-  .sm\:cu-py-12 {
-    padding-top: var(--canon-space-12);
-    padding-bottom: var(--canon-space-12);
-  }
-
-  .sm\:cu-py-13 {
-    padding-top: var(--canon-space-13);
-    padding-bottom: var(--canon-space-13);
-  }
-
-  .sm\:cu-py-14 {
-    padding-top: var(--canon-space-14);
-    padding-bottom: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
-  .md\:cu-py {
-    padding-top: var(--py-md);
-    padding-bottom: var(--py-md);
-  }
-
-  .md\:cu-py-0\.5 {
-    padding-top: var(--canon-space-0_5);
-    padding-bottom: var(--canon-space-0_5);
-  }
-
-  .md\:cu-py-1 {
-    padding-top: var(--canon-space-1);
-    padding-bottom: var(--canon-space-1);
-  }
-
-  .md\:cu-py-1\.5 {
-    padding-top: var(--canon-space-1_5);
-    padding-bottom: var(--canon-space-1_5);
-  }
-
-  .md\:cu-py-2 {
-    padding-top: var(--canon-space-2);
-    padding-bottom: var(--canon-space-2);
-  }
-
-  .md\:cu-py-3 {
-    padding-top: var(--canon-space-3);
-    padding-bottom: var(--canon-space-3);
-  }
-
-  .md\:cu-py-4 {
-    padding-top: var(--canon-space-4);
-    padding-bottom: var(--canon-space-4);
-  }
-
-  .md\:cu-py-5 {
-    padding-top: var(--canon-space-5);
-    padding-bottom: var(--canon-space-5);
-  }
-
-  .md\:cu-py-6 {
-    padding-top: var(--canon-space-6);
-    padding-bottom: var(--canon-space-6);
-  }
-
-  .md\:cu-py-7 {
-    padding-top: var(--canon-space-7);
-    padding-bottom: var(--canon-space-7);
-  }
-
-  .md\:cu-py-8 {
-    padding-top: var(--canon-space-8);
-    padding-bottom: var(--canon-space-8);
-  }
-
-  .md\:cu-py-9 {
-    padding-top: var(--canon-space-9);
-    padding-bottom: var(--canon-space-9);
-  }
-
-  .md\:cu-py-10 {
-    padding-top: var(--canon-space-10);
-    padding-bottom: var(--canon-space-10);
-  }
-
-  .md\:cu-py-11 {
-    padding-top: var(--canon-space-11);
-    padding-bottom: var(--canon-space-11);
-  }
-
-  .md\:cu-py-12 {
-    padding-top: var(--canon-space-12);
-    padding-bottom: var(--canon-space-12);
-  }
-
-  .md\:cu-py-13 {
-    padding-top: var(--canon-space-13);
-    padding-bottom: var(--canon-space-13);
-  }
-
-  .md\:cu-py-14 {
-    padding-top: var(--canon-space-14);
-    padding-bottom: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
-  .lg\:cu-py {
-    padding-top: var(--py-lg);
-    padding-bottom: var(--py-lg);
-  }
-
-  .lg\:cu-py-0\.5 {
-    padding-top: var(--canon-space-0_5);
-    padding-bottom: var(--canon-space-0_5);
-  }
-
-  .lg\:cu-py-1 {
-    padding-top: var(--canon-space-1);
-    padding-bottom: var(--canon-space-1);
-  }
-
-  .lg\:cu-py-1\.5 {
-    padding-top: var(--canon-space-1_5);
-    padding-bottom: var(--canon-space-1_5);
-  }
-
-  .lg\:cu-py-2 {
-    padding-top: var(--canon-space-2);
-    padding-bottom: var(--canon-space-2);
-  }
-
-  .lg\:cu-py-3 {
-    padding-top: var(--canon-space-3);
-    padding-bottom: var(--canon-space-3);
-  }
-
-  .lg\:cu-py-4 {
-    padding-top: var(--canon-space-4);
-    padding-bottom: var(--canon-space-4);
-  }
-
-  .lg\:cu-py-5 {
-    padding-top: var(--canon-space-5);
-    padding-bottom: var(--canon-space-5);
-  }
-
-  .lg\:cu-py-6 {
-    padding-top: var(--canon-space-6);
-    padding-bottom: var(--canon-space-6);
-  }
-
-  .lg\:cu-py-7 {
-    padding-top: var(--canon-space-7);
-    padding-bottom: var(--canon-space-7);
-  }
-
-  .lg\:cu-py-8 {
-    padding-top: var(--canon-space-8);
-    padding-bottom: var(--canon-space-8);
-  }
-
-  .lg\:cu-py-9 {
-    padding-top: var(--canon-space-9);
-    padding-bottom: var(--canon-space-9);
-  }
-
-  .lg\:cu-py-10 {
-    padding-top: var(--canon-space-10);
-    padding-bottom: var(--canon-space-10);
-  }
-
-  .lg\:cu-py-11 {
-    padding-top: var(--canon-space-11);
-    padding-bottom: var(--canon-space-11);
-  }
-
-  .lg\:cu-py-12 {
-    padding-top: var(--canon-space-12);
-    padding-bottom: var(--canon-space-12);
-  }
-
-  .lg\:cu-py-13 {
-    padding-top: var(--canon-space-13);
-    padding-bottom: var(--canon-space-13);
-  }
-
-  .lg\:cu-py-14 {
-    padding-top: var(--canon-space-14);
-    padding-bottom: var(--canon-space-14);
-  }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
-  .xl\:cu-py {
-    padding-top: var(--py-xl);
-    padding-bottom: var(--py-xl);
-  }
-
-  .xl\:cu-py-0\.5 {
-    padding-top: var(--canon-space-0_5);
-    padding-bottom: var(--canon-space-0_5);
-  }
-
-  .xl\:cu-py-1 {
-    padding-top: var(--canon-space-1);
-    padding-bottom: var(--canon-space-1);
-  }
-
-  .xl\:cu-py-1\.5 {
-    padding-top: var(--canon-space-1_5);
-    padding-bottom: var(--canon-space-1_5);
-  }
-
-  .xl\:cu-py-2 {
-    padding-top: var(--canon-space-2);
-    padding-bottom: var(--canon-space-2);
-  }
-
-  .xl\:cu-py-3 {
-    padding-top: var(--canon-space-3);
-    padding-bottom: var(--canon-space-3);
-  }
-
-  .xl\:cu-py-4 {
-    padding-top: var(--canon-space-4);
-    padding-bottom: var(--canon-space-4);
-  }
-
-  .xl\:cu-py-5 {
-    padding-top: var(--canon-space-5);
-    padding-bottom: var(--canon-space-5);
-  }
-
-  .xl\:cu-py-6 {
-    padding-top: var(--canon-space-6);
-    padding-bottom: var(--canon-space-6);
-  }
-
-  .xl\:cu-py-7 {
-    padding-top: var(--canon-space-7);
-    padding-bottom: var(--canon-space-7);
-  }
-
-  .xl\:cu-py-8 {
-    padding-top: var(--canon-space-8);
-    padding-bottom: var(--canon-space-8);
-  }
-
-  .xl\:cu-py-9 {
-    padding-top: var(--canon-space-9);
-    padding-bottom: var(--canon-space-9);
-  }
-
-  .xl\:cu-py-10 {
-    padding-top: var(--canon-space-10);
-    padding-bottom: var(--canon-space-10);
-  }
-
-  .xl\:cu-py-11 {
-    padding-top: var(--canon-space-11);
-    padding-bottom: var(--canon-space-11);
-  }
-
-  .xl\:cu-py-12 {
-    padding-top: var(--canon-space-12);
-    padding-bottom: var(--canon-space-12);
-  }
-
-  .xl\:cu-py-13 {
-    padding-top: var(--canon-space-13);
-    padding-bottom: var(--canon-space-13);
-  }
-
-  .xl\:cu-py-14 {
-    padding-top: var(--canon-space-14);
-    padding-bottom: var(--canon-space-14);
-  }
-}
diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css
index 856cc59440..c8fe35cb42 100644
--- a/packages/canon/src/css/utilities/sm.css
+++ b/packages/canon/src/css/utilities/sm.css
@@ -373,6 +373,486 @@
       justify-content: stretch;
     }
 
+    .cu-sm-m-2xl {
+      margin: var(--canon-space-12);
+    }
+
+    .cu-sm-m-2xs {
+      margin: var(--canon-space-2);
+    }
+
+    .cu-sm-m-lg {
+      margin: var(--canon-space-8);
+    }
+
+    .cu-sm-m-md {
+      margin: var(--canon-space-6);
+    }
+
+    .cu-sm-m-none {
+      margin: 0;
+    }
+
+    .cu-sm-m-sm {
+      margin: var(--canon-space-4);
+    }
+
+    .cu-sm-m-xl {
+      margin: var(--canon-space-10);
+    }
+
+    .cu-sm-m-xs {
+      margin: var(--canon-space-3);
+    }
+
+    .cu-sm-mb-2xl {
+      margin-bottom: var(--canon-space-12);
+    }
+
+    .cu-sm-mb-2xs {
+      margin-bottom: var(--canon-space-2);
+    }
+
+    .cu-sm-mb-lg {
+      margin-bottom: var(--canon-space-8);
+    }
+
+    .cu-sm-mb-md {
+      margin-bottom: var(--canon-space-6);
+    }
+
+    .cu-sm-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-sm-mb-sm {
+      margin-bottom: var(--canon-space-4);
+    }
+
+    .cu-sm-mb-xl {
+      margin-bottom: var(--canon-space-10);
+    }
+
+    .cu-sm-mb-xs {
+      margin-bottom: var(--canon-space-3);
+    }
+
+    .cu-sm-ml-2xl {
+      margin-left: var(--canon-space-12);
+    }
+
+    .cu-sm-ml-2xs {
+      margin-left: var(--canon-space-2);
+    }
+
+    .cu-sm-ml-lg {
+      margin-left: var(--canon-space-8);
+    }
+
+    .cu-sm-ml-md {
+      margin-left: var(--canon-space-6);
+    }
+
+    .cu-sm-ml-none {
+      margin-left: 0;
+    }
+
+    .cu-sm-ml-sm {
+      margin-left: var(--canon-space-4);
+    }
+
+    .cu-sm-ml-xl {
+      margin-left: var(--canon-space-10);
+    }
+
+    .cu-sm-ml-xs {
+      margin-left: var(--canon-space-3);
+    }
+
+    .cu-sm-mr-2xl {
+      margin-right: var(--canon-space-12);
+    }
+
+    .cu-sm-mr-2xs {
+      margin-right: var(--canon-space-2);
+    }
+
+    .cu-sm-mr-lg {
+      margin-right: var(--canon-space-8);
+    }
+
+    .cu-sm-mr-md {
+      margin-right: var(--canon-space-6);
+    }
+
+    .cu-sm-mr-none {
+      margin-right: 0;
+    }
+
+    .cu-sm-mr-sm {
+      margin-right: var(--canon-space-4);
+    }
+
+    .cu-sm-mr-xl {
+      margin-right: var(--canon-space-10);
+    }
+
+    .cu-sm-mr-xs {
+      margin-right: var(--canon-space-3);
+    }
+
+    .cu-sm-mt-2xl {
+      margin-top: var(--canon-space-12);
+    }
+
+    .cu-sm-mt-2xs {
+      margin-top: var(--canon-space-2);
+    }
+
+    .cu-sm-mt-lg {
+      margin-top: var(--canon-space-8);
+    }
+
+    .cu-sm-mt-md {
+      margin-top: var(--canon-space-6);
+    }
+
+    .cu-sm-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-sm-mt-sm {
+      margin-top: var(--canon-space-4);
+    }
+
+    .cu-sm-mt-xl {
+      margin-top: var(--canon-space-10);
+    }
+
+    .cu-sm-mt-xs {
+      margin-top: var(--canon-space-3);
+    }
+
+    .cu-sm-mx-2xl {
+      margin-left: var(--canon-space-12);
+      margin-right: var(--canon-space-12);
+    }
+
+    .cu-sm-mx-2xs {
+      margin-left: var(--canon-space-2);
+      margin-right: var(--canon-space-2);
+    }
+
+    .cu-sm-mx-lg {
+      margin-left: var(--canon-space-8);
+      margin-right: var(--canon-space-8);
+    }
+
+    .cu-sm-mx-md {
+      margin-left: var(--canon-space-6);
+      margin-right: var(--canon-space-6);
+    }
+
+    .cu-sm-mx-none {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .cu-sm-mx-sm {
+      margin-left: var(--canon-space-4);
+      margin-right: var(--canon-space-4);
+    }
+
+    .cu-sm-mx-xl {
+      margin-left: var(--canon-space-10);
+      margin-right: var(--canon-space-10);
+    }
+
+    .cu-sm-mx-xs {
+      margin-left: var(--canon-space-3);
+      margin-right: var(--canon-space-3);
+    }
+
+    .cu-sm-my-2xl {
+      margin-top: var(--canon-space-12);
+      margin-bottom: var(--canon-space-12);
+    }
+
+    .cu-sm-my-2xs {
+      margin-top: var(--canon-space-2);
+      margin-bottom: var(--canon-space-2);
+    }
+
+    .cu-sm-my-lg {
+      margin-top: var(--canon-space-8);
+      margin-bottom: var(--canon-space-8);
+    }
+
+    .cu-sm-my-md {
+      margin-top: var(--canon-space-6);
+      margin-bottom: var(--canon-space-6);
+    }
+
+    .cu-sm-my-none {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .cu-sm-my-sm {
+      margin-top: var(--canon-space-4);
+      margin-bottom: var(--canon-space-4);
+    }
+
+    .cu-sm-my-xl {
+      margin-top: var(--canon-space-10);
+      margin-bottom: var(--canon-space-10);
+    }
+
+    .cu-sm-my-xs {
+      margin-top: var(--canon-space-3);
+      margin-bottom: var(--canon-space-3);
+    }
+
+    .cu-sm-p-2xl {
+      padding: var(--canon-space-12);
+    }
+
+    .cu-sm-p-2xs {
+      padding: var(--canon-space-2);
+    }
+
+    .cu-sm-p-lg {
+      padding: var(--canon-space-8);
+    }
+
+    .cu-sm-p-md {
+      padding: var(--canon-space-6);
+    }
+
+    .cu-sm-p-none {
+      padding: 0;
+    }
+
+    .cu-sm-p-sm {
+      padding: var(--canon-space-4);
+    }
+
+    .cu-sm-p-xl {
+      padding: var(--canon-space-10);
+    }
+
+    .cu-sm-p-xs {
+      padding: var(--canon-space-3);
+    }
+
+    .cu-sm-pb-2xl {
+      padding-bottom: var(--canon-space-12);
+    }
+
+    .cu-sm-pb-2xs {
+      padding-bottom: var(--canon-space-2);
+    }
+
+    .cu-sm-pb-lg {
+      padding-bottom: var(--canon-space-8);
+    }
+
+    .cu-sm-pb-md {
+      padding-bottom: var(--canon-space-6);
+    }
+
+    .cu-sm-pb-none {
+      padding-bottom: 0;
+    }
+
+    .cu-sm-pb-sm {
+      padding-bottom: var(--canon-space-4);
+    }
+
+    .cu-sm-pb-xl {
+      padding-bottom: var(--canon-space-10);
+    }
+
+    .cu-sm-pb-xs {
+      padding-bottom: var(--canon-space-3);
+    }
+
+    .cu-sm-pl-2xl {
+      padding-left: var(--canon-space-12);
+    }
+
+    .cu-sm-pl-2xs {
+      padding-left: var(--canon-space-2);
+    }
+
+    .cu-sm-pl-lg {
+      padding-left: var(--canon-space-8);
+    }
+
+    .cu-sm-pl-md {
+      padding-left: var(--canon-space-6);
+    }
+
+    .cu-sm-pl-none {
+      padding-left: 0;
+    }
+
+    .cu-sm-pl-sm {
+      padding-left: var(--canon-space-4);
+    }
+
+    .cu-sm-pl-xl {
+      padding-left: var(--canon-space-10);
+    }
+
+    .cu-sm-pl-xs {
+      padding-left: var(--canon-space-3);
+    }
+
+    .cu-sm-pr-2xl {
+      padding-right: var(--canon-space-12);
+    }
+
+    .cu-sm-pr-2xs {
+      padding-right: var(--canon-space-2);
+    }
+
+    .cu-sm-pr-lg {
+      padding-right: var(--canon-space-8);
+    }
+
+    .cu-sm-pr-md {
+      padding-right: var(--canon-space-6);
+    }
+
+    .cu-sm-pr-none {
+      padding-right: 0;
+    }
+
+    .cu-sm-pr-sm {
+      padding-right: var(--canon-space-4);
+    }
+
+    .cu-sm-pr-xl {
+      padding-right: var(--canon-space-10);
+    }
+
+    .cu-sm-pr-xs {
+      padding-right: var(--canon-space-3);
+    }
+
+    .cu-sm-pt-2xl {
+      padding-top: var(--canon-space-12);
+    }
+
+    .cu-sm-pt-2xs {
+      padding-top: var(--canon-space-2);
+    }
+
+    .cu-sm-pt-lg {
+      padding-top: var(--canon-space-8);
+    }
+
+    .cu-sm-pt-md {
+      padding-top: var(--canon-space-6);
+    }
+
+    .cu-sm-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-sm-pt-sm {
+      padding-top: var(--canon-space-4);
+    }
+
+    .cu-sm-pt-xl {
+      padding-top: var(--canon-space-10);
+    }
+
+    .cu-sm-pt-xs {
+      padding-top: var(--canon-space-3);
+    }
+
+    .cu-sm-px-2xl {
+      padding-left: var(--canon-space-12);
+      padding-right: var(--canon-space-12);
+    }
+
+    .cu-sm-px-2xs {
+      padding-left: var(--canon-space-2);
+      padding-right: var(--canon-space-2);
+    }
+
+    .cu-sm-px-lg {
+      padding-left: var(--canon-space-8);
+      padding-right: var(--canon-space-8);
+    }
+
+    .cu-sm-px-md {
+      padding-left: var(--canon-space-6);
+      padding-right: var(--canon-space-6);
+    }
+
+    .cu-sm-px-none {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .cu-sm-px-sm {
+      padding-left: var(--canon-space-4);
+      padding-right: var(--canon-space-4);
+    }
+
+    .cu-sm-px-xl {
+      padding-left: var(--canon-space-10);
+      padding-right: var(--canon-space-10);
+    }
+
+    .cu-sm-px-xs {
+      padding-left: var(--canon-space-3);
+      padding-right: var(--canon-space-3);
+    }
+
+    .cu-sm-py-2xl {
+      padding-top: var(--canon-space-12);
+      padding-bottom: var(--canon-space-12);
+    }
+
+    .cu-sm-py-2xs {
+      padding-top: var(--canon-space-2);
+      padding-bottom: var(--canon-space-2);
+    }
+
+    .cu-sm-py-lg {
+      padding-top: var(--canon-space-8);
+      padding-bottom: var(--canon-space-8);
+    }
+
+    .cu-sm-py-md {
+      padding-top: var(--canon-space-6);
+      padding-bottom: var(--canon-space-6);
+    }
+
+    .cu-sm-py-none {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .cu-sm-py-sm {
+      padding-top: var(--canon-space-4);
+      padding-bottom: var(--canon-space-4);
+    }
+
+    .cu-sm-py-xl {
+      padding-top: var(--canon-space-10);
+      padding-bottom: var(--canon-space-10);
+    }
+
+    .cu-sm-py-xs {
+      padding-top: var(--canon-space-3);
+      padding-bottom: var(--canon-space-3);
+    }
+
     .cu-sm-rounded-2xl {
       border-radius: var(--canon-radius-full);
     }
diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css
index 10b6e44380..218bd37217 100644
--- a/packages/canon/src/css/utilities/xl.css
+++ b/packages/canon/src/css/utilities/xl.css
@@ -373,6 +373,486 @@
       justify-content: stretch;
     }
 
+    .cu-xl-m-2xl {
+      margin: var(--canon-space-12);
+    }
+
+    .cu-xl-m-2xs {
+      margin: var(--canon-space-2);
+    }
+
+    .cu-xl-m-lg {
+      margin: var(--canon-space-8);
+    }
+
+    .cu-xl-m-md {
+      margin: var(--canon-space-6);
+    }
+
+    .cu-xl-m-none {
+      margin: 0;
+    }
+
+    .cu-xl-m-sm {
+      margin: var(--canon-space-4);
+    }
+
+    .cu-xl-m-xl {
+      margin: var(--canon-space-10);
+    }
+
+    .cu-xl-m-xs {
+      margin: var(--canon-space-3);
+    }
+
+    .cu-xl-mb-2xl {
+      margin-bottom: var(--canon-space-12);
+    }
+
+    .cu-xl-mb-2xs {
+      margin-bottom: var(--canon-space-2);
+    }
+
+    .cu-xl-mb-lg {
+      margin-bottom: var(--canon-space-8);
+    }
+
+    .cu-xl-mb-md {
+      margin-bottom: var(--canon-space-6);
+    }
+
+    .cu-xl-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-xl-mb-sm {
+      margin-bottom: var(--canon-space-4);
+    }
+
+    .cu-xl-mb-xl {
+      margin-bottom: var(--canon-space-10);
+    }
+
+    .cu-xl-mb-xs {
+      margin-bottom: var(--canon-space-3);
+    }
+
+    .cu-xl-ml-2xl {
+      margin-left: var(--canon-space-12);
+    }
+
+    .cu-xl-ml-2xs {
+      margin-left: var(--canon-space-2);
+    }
+
+    .cu-xl-ml-lg {
+      margin-left: var(--canon-space-8);
+    }
+
+    .cu-xl-ml-md {
+      margin-left: var(--canon-space-6);
+    }
+
+    .cu-xl-ml-none {
+      margin-left: 0;
+    }
+
+    .cu-xl-ml-sm {
+      margin-left: var(--canon-space-4);
+    }
+
+    .cu-xl-ml-xl {
+      margin-left: var(--canon-space-10);
+    }
+
+    .cu-xl-ml-xs {
+      margin-left: var(--canon-space-3);
+    }
+
+    .cu-xl-mr-2xl {
+      margin-right: var(--canon-space-12);
+    }
+
+    .cu-xl-mr-2xs {
+      margin-right: var(--canon-space-2);
+    }
+
+    .cu-xl-mr-lg {
+      margin-right: var(--canon-space-8);
+    }
+
+    .cu-xl-mr-md {
+      margin-right: var(--canon-space-6);
+    }
+
+    .cu-xl-mr-none {
+      margin-right: 0;
+    }
+
+    .cu-xl-mr-sm {
+      margin-right: var(--canon-space-4);
+    }
+
+    .cu-xl-mr-xl {
+      margin-right: var(--canon-space-10);
+    }
+
+    .cu-xl-mr-xs {
+      margin-right: var(--canon-space-3);
+    }
+
+    .cu-xl-mt-2xl {
+      margin-top: var(--canon-space-12);
+    }
+
+    .cu-xl-mt-2xs {
+      margin-top: var(--canon-space-2);
+    }
+
+    .cu-xl-mt-lg {
+      margin-top: var(--canon-space-8);
+    }
+
+    .cu-xl-mt-md {
+      margin-top: var(--canon-space-6);
+    }
+
+    .cu-xl-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-xl-mt-sm {
+      margin-top: var(--canon-space-4);
+    }
+
+    .cu-xl-mt-xl {
+      margin-top: var(--canon-space-10);
+    }
+
+    .cu-xl-mt-xs {
+      margin-top: var(--canon-space-3);
+    }
+
+    .cu-xl-mx-2xl {
+      margin-left: var(--canon-space-12);
+      margin-right: var(--canon-space-12);
+    }
+
+    .cu-xl-mx-2xs {
+      margin-left: var(--canon-space-2);
+      margin-right: var(--canon-space-2);
+    }
+
+    .cu-xl-mx-lg {
+      margin-left: var(--canon-space-8);
+      margin-right: var(--canon-space-8);
+    }
+
+    .cu-xl-mx-md {
+      margin-left: var(--canon-space-6);
+      margin-right: var(--canon-space-6);
+    }
+
+    .cu-xl-mx-none {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .cu-xl-mx-sm {
+      margin-left: var(--canon-space-4);
+      margin-right: var(--canon-space-4);
+    }
+
+    .cu-xl-mx-xl {
+      margin-left: var(--canon-space-10);
+      margin-right: var(--canon-space-10);
+    }
+
+    .cu-xl-mx-xs {
+      margin-left: var(--canon-space-3);
+      margin-right: var(--canon-space-3);
+    }
+
+    .cu-xl-my-2xl {
+      margin-top: var(--canon-space-12);
+      margin-bottom: var(--canon-space-12);
+    }
+
+    .cu-xl-my-2xs {
+      margin-top: var(--canon-space-2);
+      margin-bottom: var(--canon-space-2);
+    }
+
+    .cu-xl-my-lg {
+      margin-top: var(--canon-space-8);
+      margin-bottom: var(--canon-space-8);
+    }
+
+    .cu-xl-my-md {
+      margin-top: var(--canon-space-6);
+      margin-bottom: var(--canon-space-6);
+    }
+
+    .cu-xl-my-none {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .cu-xl-my-sm {
+      margin-top: var(--canon-space-4);
+      margin-bottom: var(--canon-space-4);
+    }
+
+    .cu-xl-my-xl {
+      margin-top: var(--canon-space-10);
+      margin-bottom: var(--canon-space-10);
+    }
+
+    .cu-xl-my-xs {
+      margin-top: var(--canon-space-3);
+      margin-bottom: var(--canon-space-3);
+    }
+
+    .cu-xl-p-2xl {
+      padding: var(--canon-space-12);
+    }
+
+    .cu-xl-p-2xs {
+      padding: var(--canon-space-2);
+    }
+
+    .cu-xl-p-lg {
+      padding: var(--canon-space-8);
+    }
+
+    .cu-xl-p-md {
+      padding: var(--canon-space-6);
+    }
+
+    .cu-xl-p-none {
+      padding: 0;
+    }
+
+    .cu-xl-p-sm {
+      padding: var(--canon-space-4);
+    }
+
+    .cu-xl-p-xl {
+      padding: var(--canon-space-10);
+    }
+
+    .cu-xl-p-xs {
+      padding: var(--canon-space-3);
+    }
+
+    .cu-xl-pb-2xl {
+      padding-bottom: var(--canon-space-12);
+    }
+
+    .cu-xl-pb-2xs {
+      padding-bottom: var(--canon-space-2);
+    }
+
+    .cu-xl-pb-lg {
+      padding-bottom: var(--canon-space-8);
+    }
+
+    .cu-xl-pb-md {
+      padding-bottom: var(--canon-space-6);
+    }
+
+    .cu-xl-pb-none {
+      padding-bottom: 0;
+    }
+
+    .cu-xl-pb-sm {
+      padding-bottom: var(--canon-space-4);
+    }
+
+    .cu-xl-pb-xl {
+      padding-bottom: var(--canon-space-10);
+    }
+
+    .cu-xl-pb-xs {
+      padding-bottom: var(--canon-space-3);
+    }
+
+    .cu-xl-pl-2xl {
+      padding-left: var(--canon-space-12);
+    }
+
+    .cu-xl-pl-2xs {
+      padding-left: var(--canon-space-2);
+    }
+
+    .cu-xl-pl-lg {
+      padding-left: var(--canon-space-8);
+    }
+
+    .cu-xl-pl-md {
+      padding-left: var(--canon-space-6);
+    }
+
+    .cu-xl-pl-none {
+      padding-left: 0;
+    }
+
+    .cu-xl-pl-sm {
+      padding-left: var(--canon-space-4);
+    }
+
+    .cu-xl-pl-xl {
+      padding-left: var(--canon-space-10);
+    }
+
+    .cu-xl-pl-xs {
+      padding-left: var(--canon-space-3);
+    }
+
+    .cu-xl-pr-2xl {
+      padding-right: var(--canon-space-12);
+    }
+
+    .cu-xl-pr-2xs {
+      padding-right: var(--canon-space-2);
+    }
+
+    .cu-xl-pr-lg {
+      padding-right: var(--canon-space-8);
+    }
+
+    .cu-xl-pr-md {
+      padding-right: var(--canon-space-6);
+    }
+
+    .cu-xl-pr-none {
+      padding-right: 0;
+    }
+
+    .cu-xl-pr-sm {
+      padding-right: var(--canon-space-4);
+    }
+
+    .cu-xl-pr-xl {
+      padding-right: var(--canon-space-10);
+    }
+
+    .cu-xl-pr-xs {
+      padding-right: var(--canon-space-3);
+    }
+
+    .cu-xl-pt-2xl {
+      padding-top: var(--canon-space-12);
+    }
+
+    .cu-xl-pt-2xs {
+      padding-top: var(--canon-space-2);
+    }
+
+    .cu-xl-pt-lg {
+      padding-top: var(--canon-space-8);
+    }
+
+    .cu-xl-pt-md {
+      padding-top: var(--canon-space-6);
+    }
+
+    .cu-xl-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-xl-pt-sm {
+      padding-top: var(--canon-space-4);
+    }
+
+    .cu-xl-pt-xl {
+      padding-top: var(--canon-space-10);
+    }
+
+    .cu-xl-pt-xs {
+      padding-top: var(--canon-space-3);
+    }
+
+    .cu-xl-px-2xl {
+      padding-left: var(--canon-space-12);
+      padding-right: var(--canon-space-12);
+    }
+
+    .cu-xl-px-2xs {
+      padding-left: var(--canon-space-2);
+      padding-right: var(--canon-space-2);
+    }
+
+    .cu-xl-px-lg {
+      padding-left: var(--canon-space-8);
+      padding-right: var(--canon-space-8);
+    }
+
+    .cu-xl-px-md {
+      padding-left: var(--canon-space-6);
+      padding-right: var(--canon-space-6);
+    }
+
+    .cu-xl-px-none {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .cu-xl-px-sm {
+      padding-left: var(--canon-space-4);
+      padding-right: var(--canon-space-4);
+    }
+
+    .cu-xl-px-xl {
+      padding-left: var(--canon-space-10);
+      padding-right: var(--canon-space-10);
+    }
+
+    .cu-xl-px-xs {
+      padding-left: var(--canon-space-3);
+      padding-right: var(--canon-space-3);
+    }
+
+    .cu-xl-py-2xl {
+      padding-top: var(--canon-space-12);
+      padding-bottom: var(--canon-space-12);
+    }
+
+    .cu-xl-py-2xs {
+      padding-top: var(--canon-space-2);
+      padding-bottom: var(--canon-space-2);
+    }
+
+    .cu-xl-py-lg {
+      padding-top: var(--canon-space-8);
+      padding-bottom: var(--canon-space-8);
+    }
+
+    .cu-xl-py-md {
+      padding-top: var(--canon-space-6);
+      padding-bottom: var(--canon-space-6);
+    }
+
+    .cu-xl-py-none {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .cu-xl-py-sm {
+      padding-top: var(--canon-space-4);
+      padding-bottom: var(--canon-space-4);
+    }
+
+    .cu-xl-py-xl {
+      padding-top: var(--canon-space-10);
+      padding-bottom: var(--canon-space-10);
+    }
+
+    .cu-xl-py-xs {
+      padding-top: var(--canon-space-3);
+      padding-bottom: var(--canon-space-3);
+    }
+
     .cu-xl-rounded-2xl {
       border-radius: var(--canon-radius-full);
     }
diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css
index e85832fe44..fa64c1d624 100644
--- a/packages/canon/src/css/utilities/xs.css
+++ b/packages/canon/src/css/utilities/xs.css
@@ -372,6 +372,486 @@
     justify-content: stretch;
   }
 
+  .cu-m-2xl {
+    margin: var(--canon-space-12);
+  }
+
+  .cu-m-2xs {
+    margin: var(--canon-space-2);
+  }
+
+  .cu-m-lg {
+    margin: var(--canon-space-8);
+  }
+
+  .cu-m-md {
+    margin: var(--canon-space-6);
+  }
+
+  .cu-m-none {
+    margin: 0;
+  }
+
+  .cu-m-sm {
+    margin: var(--canon-space-4);
+  }
+
+  .cu-m-xl {
+    margin: var(--canon-space-10);
+  }
+
+  .cu-m-xs {
+    margin: var(--canon-space-3);
+  }
+
+  .cu-mb-2xl {
+    margin-bottom: var(--canon-space-12);
+  }
+
+  .cu-mb-2xs {
+    margin-bottom: var(--canon-space-2);
+  }
+
+  .cu-mb-lg {
+    margin-bottom: var(--canon-space-8);
+  }
+
+  .cu-mb-md {
+    margin-bottom: var(--canon-space-6);
+  }
+
+  .cu-mb-none {
+    margin-bottom: 0;
+  }
+
+  .cu-mb-sm {
+    margin-bottom: var(--canon-space-4);
+  }
+
+  .cu-mb-xl {
+    margin-bottom: var(--canon-space-10);
+  }
+
+  .cu-mb-xs {
+    margin-bottom: var(--canon-space-3);
+  }
+
+  .cu-ml-2xl {
+    margin-left: var(--canon-space-12);
+  }
+
+  .cu-ml-2xs {
+    margin-left: var(--canon-space-2);
+  }
+
+  .cu-ml-lg {
+    margin-left: var(--canon-space-8);
+  }
+
+  .cu-ml-md {
+    margin-left: var(--canon-space-6);
+  }
+
+  .cu-ml-none {
+    margin-left: 0;
+  }
+
+  .cu-ml-sm {
+    margin-left: var(--canon-space-4);
+  }
+
+  .cu-ml-xl {
+    margin-left: var(--canon-space-10);
+  }
+
+  .cu-ml-xs {
+    margin-left: var(--canon-space-3);
+  }
+
+  .cu-mr-2xl {
+    margin-right: var(--canon-space-12);
+  }
+
+  .cu-mr-2xs {
+    margin-right: var(--canon-space-2);
+  }
+
+  .cu-mr-lg {
+    margin-right: var(--canon-space-8);
+  }
+
+  .cu-mr-md {
+    margin-right: var(--canon-space-6);
+  }
+
+  .cu-mr-none {
+    margin-right: 0;
+  }
+
+  .cu-mr-sm {
+    margin-right: var(--canon-space-4);
+  }
+
+  .cu-mr-xl {
+    margin-right: var(--canon-space-10);
+  }
+
+  .cu-mr-xs {
+    margin-right: var(--canon-space-3);
+  }
+
+  .cu-mt-2xl {
+    margin-top: var(--canon-space-12);
+  }
+
+  .cu-mt-2xs {
+    margin-top: var(--canon-space-2);
+  }
+
+  .cu-mt-lg {
+    margin-top: var(--canon-space-8);
+  }
+
+  .cu-mt-md {
+    margin-top: var(--canon-space-6);
+  }
+
+  .cu-mt-none {
+    margin-top: 0;
+  }
+
+  .cu-mt-sm {
+    margin-top: var(--canon-space-4);
+  }
+
+  .cu-mt-xl {
+    margin-top: var(--canon-space-10);
+  }
+
+  .cu-mt-xs {
+    margin-top: var(--canon-space-3);
+  }
+
+  .cu-mx-2xl {
+    margin-left: var(--canon-space-12);
+    margin-right: var(--canon-space-12);
+  }
+
+  .cu-mx-2xs {
+    margin-left: var(--canon-space-2);
+    margin-right: var(--canon-space-2);
+  }
+
+  .cu-mx-lg {
+    margin-left: var(--canon-space-8);
+    margin-right: var(--canon-space-8);
+  }
+
+  .cu-mx-md {
+    margin-left: var(--canon-space-6);
+    margin-right: var(--canon-space-6);
+  }
+
+  .cu-mx-none {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .cu-mx-sm {
+    margin-left: var(--canon-space-4);
+    margin-right: var(--canon-space-4);
+  }
+
+  .cu-mx-xl {
+    margin-left: var(--canon-space-10);
+    margin-right: var(--canon-space-10);
+  }
+
+  .cu-mx-xs {
+    margin-left: var(--canon-space-3);
+    margin-right: var(--canon-space-3);
+  }
+
+  .cu-my-2xl {
+    margin-top: var(--canon-space-12);
+    margin-bottom: var(--canon-space-12);
+  }
+
+  .cu-my-2xs {
+    margin-top: var(--canon-space-2);
+    margin-bottom: var(--canon-space-2);
+  }
+
+  .cu-my-lg {
+    margin-top: var(--canon-space-8);
+    margin-bottom: var(--canon-space-8);
+  }
+
+  .cu-my-md {
+    margin-top: var(--canon-space-6);
+    margin-bottom: var(--canon-space-6);
+  }
+
+  .cu-my-none {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .cu-my-sm {
+    margin-top: var(--canon-space-4);
+    margin-bottom: var(--canon-space-4);
+  }
+
+  .cu-my-xl {
+    margin-top: var(--canon-space-10);
+    margin-bottom: var(--canon-space-10);
+  }
+
+  .cu-my-xs {
+    margin-top: var(--canon-space-3);
+    margin-bottom: var(--canon-space-3);
+  }
+
+  .cu-p-2xl {
+    padding: var(--canon-space-12);
+  }
+
+  .cu-p-2xs {
+    padding: var(--canon-space-2);
+  }
+
+  .cu-p-lg {
+    padding: var(--canon-space-8);
+  }
+
+  .cu-p-md {
+    padding: var(--canon-space-6);
+  }
+
+  .cu-p-none {
+    padding: 0;
+  }
+
+  .cu-p-sm {
+    padding: var(--canon-space-4);
+  }
+
+  .cu-p-xl {
+    padding: var(--canon-space-10);
+  }
+
+  .cu-p-xs {
+    padding: var(--canon-space-3);
+  }
+
+  .cu-pb-2xl {
+    padding-bottom: var(--canon-space-12);
+  }
+
+  .cu-pb-2xs {
+    padding-bottom: var(--canon-space-2);
+  }
+
+  .cu-pb-lg {
+    padding-bottom: var(--canon-space-8);
+  }
+
+  .cu-pb-md {
+    padding-bottom: var(--canon-space-6);
+  }
+
+  .cu-pb-none {
+    padding-bottom: 0;
+  }
+
+  .cu-pb-sm {
+    padding-bottom: var(--canon-space-4);
+  }
+
+  .cu-pb-xl {
+    padding-bottom: var(--canon-space-10);
+  }
+
+  .cu-pb-xs {
+    padding-bottom: var(--canon-space-3);
+  }
+
+  .cu-pl-2xl {
+    padding-left: var(--canon-space-12);
+  }
+
+  .cu-pl-2xs {
+    padding-left: var(--canon-space-2);
+  }
+
+  .cu-pl-lg {
+    padding-left: var(--canon-space-8);
+  }
+
+  .cu-pl-md {
+    padding-left: var(--canon-space-6);
+  }
+
+  .cu-pl-none {
+    padding-left: 0;
+  }
+
+  .cu-pl-sm {
+    padding-left: var(--canon-space-4);
+  }
+
+  .cu-pl-xl {
+    padding-left: var(--canon-space-10);
+  }
+
+  .cu-pl-xs {
+    padding-left: var(--canon-space-3);
+  }
+
+  .cu-pr-2xl {
+    padding-right: var(--canon-space-12);
+  }
+
+  .cu-pr-2xs {
+    padding-right: var(--canon-space-2);
+  }
+
+  .cu-pr-lg {
+    padding-right: var(--canon-space-8);
+  }
+
+  .cu-pr-md {
+    padding-right: var(--canon-space-6);
+  }
+
+  .cu-pr-none {
+    padding-right: 0;
+  }
+
+  .cu-pr-sm {
+    padding-right: var(--canon-space-4);
+  }
+
+  .cu-pr-xl {
+    padding-right: var(--canon-space-10);
+  }
+
+  .cu-pr-xs {
+    padding-right: var(--canon-space-3);
+  }
+
+  .cu-pt-2xl {
+    padding-top: var(--canon-space-12);
+  }
+
+  .cu-pt-2xs {
+    padding-top: var(--canon-space-2);
+  }
+
+  .cu-pt-lg {
+    padding-top: var(--canon-space-8);
+  }
+
+  .cu-pt-md {
+    padding-top: var(--canon-space-6);
+  }
+
+  .cu-pt-none {
+    padding-top: 0;
+  }
+
+  .cu-pt-sm {
+    padding-top: var(--canon-space-4);
+  }
+
+  .cu-pt-xl {
+    padding-top: var(--canon-space-10);
+  }
+
+  .cu-pt-xs {
+    padding-top: var(--canon-space-3);
+  }
+
+  .cu-px-2xl {
+    padding-left: var(--canon-space-12);
+    padding-right: var(--canon-space-12);
+  }
+
+  .cu-px-2xs {
+    padding-left: var(--canon-space-2);
+    padding-right: var(--canon-space-2);
+  }
+
+  .cu-px-lg {
+    padding-left: var(--canon-space-8);
+    padding-right: var(--canon-space-8);
+  }
+
+  .cu-px-md {
+    padding-left: var(--canon-space-6);
+    padding-right: var(--canon-space-6);
+  }
+
+  .cu-px-none {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .cu-px-sm {
+    padding-left: var(--canon-space-4);
+    padding-right: var(--canon-space-4);
+  }
+
+  .cu-px-xl {
+    padding-left: var(--canon-space-10);
+    padding-right: var(--canon-space-10);
+  }
+
+  .cu-px-xs {
+    padding-left: var(--canon-space-3);
+    padding-right: var(--canon-space-3);
+  }
+
+  .cu-py-2xl {
+    padding-top: var(--canon-space-12);
+    padding-bottom: var(--canon-space-12);
+  }
+
+  .cu-py-2xs {
+    padding-top: var(--canon-space-2);
+    padding-bottom: var(--canon-space-2);
+  }
+
+  .cu-py-lg {
+    padding-top: var(--canon-space-8);
+    padding-bottom: var(--canon-space-8);
+  }
+
+  .cu-py-md {
+    padding-top: var(--canon-space-6);
+    padding-bottom: var(--canon-space-6);
+  }
+
+  .cu-py-none {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .cu-py-sm {
+    padding-top: var(--canon-space-4);
+    padding-bottom: var(--canon-space-4);
+  }
+
+  .cu-py-xl {
+    padding-top: var(--canon-space-10);
+    padding-bottom: var(--canon-space-10);
+  }
+
+  .cu-py-xs {
+    padding-top: var(--canon-space-3);
+    padding-bottom: var(--canon-space-3);
+  }
+
   .cu-rounded-2xl {
     border-radius: var(--canon-radius-full);
   }
diff --git a/packages/canon/src/props/margin.ts b/packages/canon/src/props/margin.ts
deleted file mode 100644
index 15d8a8fc2b..0000000000
--- a/packages/canon/src/props/margin.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-/*
- * Copyright 2025 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import type { PropDef, GetPropDefTypes } from './prop-def.js';
-
-const marginPropDefs = (spacingValues: string[]) =>
-  ({
-    /**
-     * Sets the CSS **margin** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * m="4"
-     * m="100px"
-     * m={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin
-     */
-    m: {
-      type: 'enum | string',
-      values: spacingValues,
-      className: 'cu-m',
-      customProperties: ['--m'],
-      responsive: true,
-    },
-    /**
-     * Sets the CSS **margin-left** and **margin-right** properties.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * mx="4"
-     * mx="100px"
-     * mx={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
-     */
-    mx: {
-      type: 'enum | string',
-      values: spacingValues,
-      className: 'cu-mx',
-      customProperties: ['--ml', '--mr'],
-      responsive: true,
-    },
-    /**
-     * Sets the CSS **margin-top** and **margin-bottom** properties.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * my="4"
-     * my="100px"
-     * my={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
-     */
-    my: {
-      type: 'enum | string',
-      values: spacingValues,
-      className: 'cu-my',
-      customProperties: ['--mt', '--mb'],
-      responsive: true,
-    },
-    /**
-     * Sets the CSS **margin-top** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * mt="4"
-     * mt="100px"
-     * mt={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
-     */
-    mt: {
-      type: 'enum | string',
-      values: spacingValues,
-      className: 'cu-mt',
-      customProperties: ['--mt'],
-      responsive: true,
-    },
-    /**
-     * Sets the CSS **margin-right** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * mr="4"
-     * mr="100px"
-     * mr={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
-     */
-    mr: {
-      type: 'enum | string',
-      values: spacingValues,
-      className: 'cu-mr',
-      customProperties: ['--mr'],
-      responsive: true,
-    },
-    /**
-     * Sets the CSS **margin-bottom** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * mb="4"
-     * mb="100px"
-     * mb={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
-     */
-    mb: {
-      type: 'enum | string',
-      values: spacingValues,
-      className: 'cu-mb',
-      customProperties: ['--mb'],
-      responsive: true,
-    },
-    /**
-     * Sets the CSS **margin-left** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * ml="4"
-     * ml="100px"
-     * ml={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
-     */
-    ml: {
-      type: 'enum | string',
-      values: spacingValues,
-      className: 'cu-ml',
-      customProperties: ['--ml'],
-      responsive: true,
-    },
-  } satisfies {
-    m: PropDef<(typeof spacingValues)[number]>;
-    mx: PropDef<(typeof spacingValues)[number]>;
-    my: PropDef<(typeof spacingValues)[number]>;
-    mt: PropDef<(typeof spacingValues)[number]>;
-    mr: PropDef<(typeof spacingValues)[number]>;
-    mb: PropDef<(typeof spacingValues)[number]>;
-    ml: PropDef<(typeof spacingValues)[number]>;
-  });
-
-type MarginProps = GetPropDefTypes<typeof marginPropDefs>;
-
-export { marginPropDefs };
-export type { MarginProps };
diff --git a/packages/canon/src/props/padding.ts b/packages/canon/src/props/padding.ts
deleted file mode 100644
index 5c145ee6fd..0000000000
--- a/packages/canon/src/props/padding.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-/*
- * Copyright 2025 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { PropDef } from './prop-def';
-import { GetPropDefTypes } from './prop-def';
-
-const paddingPropDefs = (spacingValues: string[]) =>
-  ({
-    /**
-     * Sets the CSS **padding** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * p="4"
-     * p="100px"
-     * p={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding
-     */
-    p: {
-      type: 'enum | string',
-      className: 'cu-p',
-      customProperties: ['--p'],
-      values: spacingValues,
-      responsive: true,
-    },
-    /**
-     * Sets the CSS **padding-left** and **padding-right** properties.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * px="4"
-     * px="100px"
-     * px={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
-     */
-    px: {
-      type: 'enum | string',
-      className: 'cu-px',
-      customProperties: ['--pl', '--pr'],
-      values: spacingValues,
-      responsive: true,
-    },
-    /**
-     * Sets the CSS **padding-top** and **padding-bottom** properties.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * py="4"
-     * py="100px"
-     * py={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
-     */
-    py: {
-      type: 'enum | string',
-      className: 'cu-py',
-      customProperties: ['--pt', '--pb'],
-      values: spacingValues,
-      responsive: true,
-    },
-    /**
-     * Sets the CSS **padding-top** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * pt="4"
-     * pt="100px"
-     * pt={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
-     */
-    pt: {
-      type: 'enum | string',
-      className: 'cu-pt',
-      customProperties: ['--pt'],
-      values: spacingValues,
-      responsive: true,
-    },
-    /**
-     * Sets the CSS **padding-right** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * pr="4"
-     * pr="100px"
-     * pr={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
-     */
-    pr: {
-      type: 'enum | string',
-      className: 'cu-pr',
-      customProperties: ['--pr'],
-      values: spacingValues,
-      responsive: true,
-    },
-    /**
-     * Sets the CSS **padding-bottom** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * pb="4"
-     * pb="100px"
-     * pb={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
-     */
-    pb: {
-      type: 'enum | string',
-      className: 'cu-pb',
-      customProperties: ['--pb'],
-      values: spacingValues,
-      responsive: true,
-    },
-    /**
-     * Sets the CSS **padding-left** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * pl="4"
-     * pl="100px"
-     * pl={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
-     */
-    pl: {
-      type: 'enum | string',
-      className: 'cu-pl',
-      customProperties: ['--pl'],
-      values: spacingValues,
-      responsive: true,
-    },
-  } satisfies {
-    p: PropDef<(typeof spacingValues)[number]>;
-    px: PropDef<(typeof spacingValues)[number]>;
-    py: PropDef<(typeof spacingValues)[number]>;
-    pt: PropDef<(typeof spacingValues)[number]>;
-    pr: PropDef<(typeof spacingValues)[number]>;
-    pb: PropDef<(typeof spacingValues)[number]>;
-    pl: PropDef<(typeof spacingValues)[number]>;
-  });
-
-type PaddingProps = GetPropDefTypes<typeof paddingPropDefs>;
-
-export { paddingPropDefs };
-export type { PaddingProps };
diff --git a/packages/canon/src/props/prop-def.ts b/packages/canon/src/props/prop-def.ts
deleted file mode 100644
index b4689a13ca..0000000000
--- a/packages/canon/src/props/prop-def.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * Copyright 2025 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import type React from 'react';
-
-// Creates a union type of string literals with strings, but retains intellisense for the literals.
-// Union<string, 'foo' | 'bar'> => string | Omit<string, 'foo' | 'bar'>
-type Union<S = string, T extends string | number = string> = T | Omit<S, T>;
-
-const breakpoints = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'] as const;
-type Breakpoint = (typeof breakpoints)[number];
-type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
-
-type BooleanPropDef = {
-  type: 'boolean';
-  default?: boolean;
-  required?: boolean;
-  className?: string;
-};
-type StringPropDef = {
-  type: 'string';
-  default?: string;
-  required?: boolean;
-};
-type ReactNodePropDef = {
-  type: 'ReactNode';
-  default?: React.ReactNode;
-  required?: boolean;
-};
-type EnumPropDef<T> = {
-  type: 'enum';
-  values: readonly T[];
-  default?: T;
-  required?: boolean;
-};
-type EnumOrStringPropDef<T> = {
-  type: 'enum | string';
-  values: readonly T[];
-  default?: T | string;
-  required?: boolean;
-};
-
-type NonStylingPropDef = {
-  className?: never;
-  customProperties?: never;
-  parseValue?: never;
-};
-
-type StylingPropDef = {
-  className: string;
-  parseValue?: (value: string) => string | undefined;
-};
-
-type ArbitraryStylingPropDef = {
-  className: string;
-  customProperties: `--${string}`[];
-  parseValue?: (value: string) => string | undefined;
-};
-
-type RegularPropDef<T> =
-  | ReactNodePropDef
-  | BooleanPropDef
-  | (StringPropDef & ArbitraryStylingPropDef)
-  | (StringPropDef & NonStylingPropDef)
-  | (EnumPropDef<T> & StylingPropDef)
-  | (EnumPropDef<T> & NonStylingPropDef)
-  | (EnumOrStringPropDef<T> & ArbitraryStylingPropDef)
-  | (EnumOrStringPropDef<T> & NonStylingPropDef);
-type ResponsivePropDef<T = any> = RegularPropDef<T> & { responsive: true };
-type PropDef<T = any> = RegularPropDef<T> | ResponsivePropDef<T>;
-
-// prettier-ignore
-type GetPropDefType<Def> =
-    Def extends BooleanPropDef ? (Def extends ResponsivePropDef ? Responsive<boolean> : boolean)
-  : Def extends StringPropDef ? (Def extends ResponsivePropDef ? Responsive<string> : string)
-  : Def extends ReactNodePropDef ? (Def extends ResponsivePropDef ? Responsive<React.ReactNode> : React.ReactNode)
-  : Def extends EnumOrStringPropDef<infer Type> ?
-    Def extends ResponsivePropDef<infer Type extends string> ? Responsive<Union<string, Type>> : Type
-  : Def extends EnumPropDef<infer Type> ? (Def extends ResponsivePropDef<infer Type> ? Responsive<Type> : Type)
-  : never;
-
-type GetPropDefTypes<P> = {
-  [K in keyof P]?: GetPropDefType<P[K]>;
-};
-
-export { breakpoints };
-export type {
-  PropDef,
-  GetPropDefTypes,
-  ResponsivePropDef,
-  //
-  Breakpoint,
-  Responsive,
-  Union,
-};
diff --git a/packages/canon/src/props/spacing.ts b/packages/canon/src/props/spacing.ts
deleted file mode 100644
index 58b3a36eff..0000000000
--- a/packages/canon/src/props/spacing.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright 2025 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { paddingPropDefs } from './padding';
-import { marginPropDefs } from './margin';
-
-export const spacingValues = [
-  '0.5',
-  '1',
-  '1.5',
-  '2',
-  '3',
-  '4',
-  '5',
-  '6',
-  '7',
-  '8',
-  '9',
-  '10',
-  '11',
-  '12',
-  '13',
-  '14',
-];
-
-export const spacingPropDefs = {
-  ...paddingPropDefs(spacingValues),
-  ...marginPropDefs(spacingValues),
-};
diff --git a/packages/canon/src/utils/extractProps.ts b/packages/canon/src/utils/extractProps.ts
deleted file mode 100644
index 70e4249eed..0000000000
--- a/packages/canon/src/utils/extractProps.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * Copyright 2025 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export function extractProps(
-  props: {
-    className?: string;
-    style?: React.CSSProperties;
-    children?: React.ReactNode;
-    as?: keyof JSX.IntrinsicElements;
-    [key: string]: any;
-  },
-  propDefs: { [key: string]: any },
-) {
-  let className: string = props.className || '';
-  let style: React.CSSProperties = props.style || {};
-
-  for (const key in propDefs) {
-    if (props.hasOwnProperty(key)) {
-      const value = props[key];
-      const propDefsValues = propDefs[key].values;
-      const propDefsCustomProperties = propDefs[key].customProperties;
-      const propDefsClassName = propDefs[key].className;
-      const isResponsive = propDefs[key].responsive;
-
-      const handleValue = (val: any, prefix: string = '') => {
-        if (propDefsValues.includes(val)) {
-          className += ` ${prefix}${propDefsClassName}-${val}`;
-        } else {
-          const customPropertyKey =
-            isResponsive && prefix
-              ? `${propDefsCustomProperties}-${prefix.slice(0, -1)}`
-              : propDefsCustomProperties;
-          (style as any)[customPropertyKey] = val;
-          className += ` ${prefix}${propDefsClassName}`;
-        }
-      };
-
-      if (isResponsive && typeof value === 'object') {
-        // Handle responsive object values
-        for (const breakpoint in value) {
-          const prefix = breakpoint === 'initial' ? '' : `${breakpoint}:`;
-          handleValue(value[breakpoint], prefix);
-        }
-      } else {
-        handleValue(value);
-      }
-    }
-  }
-
-  // Ensure keys from props that are defined in propDefs are removed
-  const cleanedProps = Object.keys(props).reduce((acc, key) => {
-    if (!propDefs.hasOwnProperty(key)) {
-      acc[key] = props[key];
-    }
-    return acc;
-  }, {} as { [key: string]: any });
-
-  return { ...cleanedProps, className, style };
-}