From 262985b286ced28563cd90be918d045c6a49e768 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Wed, 18 Dec 2024 13:51:34 +0000
Subject: [PATCH] Add missing padding and margin utility classes

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../canon/src/components/Box/Box.stories.tsx  |  99 ++++++--------
 packages/canon/src/components/Box/Docs.mdx    |   5 +-
 .../canon/src/components/Box/docs/padding.tsx | 107 ---------------
 .../canon/src/components/Box/sprinkles.css.ts |   4 +-
 packages/canon/src/css/utilities/2xl.css      | 128 ++++++++++++++++++
 packages/canon/src/css/utilities/lg.css       | 128 ++++++++++++++++++
 packages/canon/src/css/utilities/md.css       | 128 ++++++++++++++++++
 packages/canon/src/css/utilities/sm.css       | 128 ++++++++++++++++++
 packages/canon/src/css/utilities/xl.css       | 128 ++++++++++++++++++
 packages/canon/src/css/utilities/xs.css       | 128 ++++++++++++++++++
 10 files changed, 813 insertions(+), 170 deletions(-)
 delete mode 100644 packages/canon/src/components/Box/docs/padding.tsx

diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx
index 817c85f775..94255145e8 100644
--- a/packages/canon/src/components/Box/Box.stories.tsx
+++ b/packages/canon/src/components/Box/Box.stories.tsx
@@ -205,66 +205,49 @@ export const AlignItems: Story = {
   ),
 };
 
-export const Nested: Story = {
-  render: () => (
-    <Box padding="lg" background="background">
-      <Box padding="md" background="background">
-        Header
-      </Box>
-      <Box
-        display="flex"
-        padding="md"
-        background="background"
-        justifyContent="space-between"
-      >
-        <Box padding="xs" background="background">
-          Sidebar
-        </Box>
-        <Box padding="xs" background="background">
-          Main Content
-        </Box>
-      </Box>
-      <Box padding="md" background="background">
-        Footer
-      </Box>
-    </Box>
-  ),
+const stylePaddingBox = {
+  background: 'rgb(196, 202, 251)',
+  color: 'white',
+  borderRadius: '4px',
 };
 
-export const Alignment: Story = {
-  render: () => (
-    <Box
-      display="flex"
-      padding="lg"
-      background="background"
-      justifyContent="center"
-      alignItems="center"
-      style={{ height: '200px' }}
-    >
-      <Box padding="md" background="background">
-        Centered Content
-      </Box>
-    </Box>
-  ),
-};
-
-// Example showing different spacing combinations
-export const Spacing: Story = {
-  render: () => (
-    <Box display="flex" flexDirection="column" gap="md">
-      <Box padding="xs" background="background">
-        Small Padding
-      </Box>
-      <Box padding="md" background="background">
-        Medium Padding
-      </Box>
-      <Box padding="lg" background="background">
-        Large Padding
-      </Box>
-      <Box paddingX="lg" paddingY="xs" background="background">
-        Mixed Padding
-      </Box>
-    </Box>
+export const Padding: Story = {
+  args: {
+    style: {
+      background: '#1f47ff',
+      color: 'white',
+      borderRadius: '4px',
+      padding: '12px 12px',
+    },
+  },
+  render: args => (
+    <Stack align="center" gap="md">
+      <Inline alignY="center" gap="md">
+        <Box padding="md" style={stylePaddingBox}>
+          <Box {...args}>Padding</Box>
+        </Box>
+        <Box paddingX="md" style={stylePaddingBox}>
+          <Box {...args}>Padding X</Box>
+        </Box>
+        <Box paddingY="md" style={stylePaddingBox}>
+          <Box {...args}>Padding Y</Box>
+        </Box>
+      </Inline>
+      <Inline alignY="center" gap="md">
+        <Box paddingTop="md" style={stylePaddingBox}>
+          <Box {...args}>Padding Top</Box>
+        </Box>
+        <Box paddingRight="md" style={stylePaddingBox}>
+          <Box {...args}>Padding Right</Box>
+        </Box>
+        <Box paddingBottom="md" style={stylePaddingBox}>
+          <Box {...args}>Padding Bottom</Box>
+        </Box>
+        <Box paddingLeft="md" style={stylePaddingBox}>
+          <Box {...args}>Padding Left</Box>
+        </Box>
+      </Inline>
+    </Stack>
   ),
 };
 
diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx
index af9cd9be76..9bca7d6b7e 100644
--- a/packages/canon/src/components/Box/Docs.mdx
+++ b/packages/canon/src/components/Box/Docs.mdx
@@ -1,7 +1,6 @@
-import { Meta, Unstyled, Source } from '@storybook/blocks';
+import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks';
 import * as BoxStories from './Box.stories';
 import { Title, Text } from '../../../docs/components';
-import { Padding } from './docs/padding';
 import { PropsTable, getProps } from '../../../docs/components';
 import { boxProperties } from './sprinkles.css';
 import { spacingProperties } from '../../layout/sprinkles.css';
@@ -54,7 +53,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
   avoid collapsing margins but both are available.
 </Text>
 
-<Padding />
+<Canvas of={BoxStories.Padding} />
 
 <PropsTable data={getProps(spacingProperties.styles)} />
 
diff --git a/packages/canon/src/components/Box/docs/padding.tsx b/packages/canon/src/components/Box/docs/padding.tsx
deleted file mode 100644
index 86a7c801a2..0000000000
--- a/packages/canon/src/components/Box/docs/padding.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * Copyright 2024 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 React from 'react';
-import { Inline } from '../../Inline';
-import { Box } from '../Box';
-
-const FakeBox = ({ children }: { children: string }) => (
-  <Box
-    paddingX="md"
-    paddingY="sm"
-    borderRadius="small"
-    style={{ background: '#1f47ff', color: 'white' }}
-  >
-    {children}
-  </Box>
-);
-
-export const Padding = () => {
-  return (
-    <Box
-      display="flex"
-      justifyContent="center"
-      flexDirection="column"
-      alignItems="center"
-      borderRadius="small"
-      marginBottom="md"
-      gap="xl"
-      paddingY="xl"
-      style={{ border: '1px solid #e7e7e7' }}
-    >
-      <Inline align="center" alignY="center" gap="xl">
-        <Box
-          alignItems="center"
-          borderRadius="small"
-          padding="md"
-          style={{ background: '#c4cafb', color: 'white' }}
-        >
-          <FakeBox>padding</FakeBox>
-        </Box>
-        <Box
-          alignItems="center"
-          borderRadius="small"
-          paddingX="md"
-          style={{ background: '#c4cafb', color: 'white' }}
-        >
-          <FakeBox>paddingX</FakeBox>
-        </Box>
-        <Box
-          alignItems="center"
-          borderRadius="small"
-          paddingY="md"
-          style={{ background: '#c4cafb', color: 'white' }}
-        >
-          <FakeBox>paddingY</FakeBox>
-        </Box>
-      </Inline>
-      <Inline align="center" alignY="center" gap="xl">
-        <Box
-          alignItems="center"
-          borderRadius="small"
-          paddingTop="md"
-          style={{ background: '#c4cafb', color: 'white' }}
-        >
-          <FakeBox>paddingTop</FakeBox>
-        </Box>
-        <Box
-          alignItems="center"
-          borderRadius="small"
-          paddingBottom="md"
-          style={{ background: '#c4cafb', color: 'white' }}
-        >
-          <FakeBox>paddingBottom</FakeBox>
-        </Box>
-        <Box
-          alignItems="center"
-          borderRadius="small"
-          paddingLeft="md"
-          style={{ background: '#c4cafb', color: 'white' }}
-        >
-          <FakeBox>paddingLeft</FakeBox>
-        </Box>
-        <Box
-          alignItems="center"
-          borderRadius="small"
-          paddingRight="md"
-          style={{ background: '#c4cafb', color: 'white' }}
-        >
-          <FakeBox>paddingRight</FakeBox>
-        </Box>
-      </Inline>
-    </Box>
-  );
-};
diff --git a/packages/canon/src/components/Box/sprinkles.css.ts b/packages/canon/src/components/Box/sprinkles.css.ts
index fa6ab55d23..36be9a64ba 100644
--- a/packages/canon/src/components/Box/sprinkles.css.ts
+++ b/packages/canon/src/components/Box/sprinkles.css.ts
@@ -32,7 +32,7 @@ export const boxProperties = defineProperties({
     //   'space-around',
     //   'space-between',
     // ],
-    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
+    // alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
     borderRadius: {
       none: 0,
       small: '4px',
@@ -49,7 +49,7 @@ export const boxProperties = defineProperties({
       thin: '1px solid var(--canon-outline)',
       error: '1px solid var(--canon-error)',
     },
-    display: ['none', 'flex', 'block', 'inline'],
+    // display: ['none', 'flex', 'block', 'inline'],
     flexWrap: ['wrap', 'nowrap'],
   },
 });
diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css
index 2c317c3a5c..84217cfa9a 100644
--- a/packages/canon/src/css/utilities/2xl.css
+++ b/packages/canon/src/css/utilities/2xl.css
@@ -471,5 +471,133 @@
     .cu-2xl-gap-2xl {
       gap: var(--canon-spacing-2xl);
     }
+
+    .cu-2xl-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-2xl-pt-2xs {
+      padding-top: var(--canon-spacing-2xs);
+    }
+
+    .cu-2xl-pt-xs {
+      padding-top: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-pt-sm {
+      padding-top: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-pt-md {
+      padding-top: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-pt-lg {
+      padding-top: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-pt-xl {
+      padding-top: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-pt-2xl {
+      padding-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-pb-none {
+      padding-bottom: 0;
+    }
+
+    .cu-2xl-pb-2xs {
+      padding-bottom: var(--canon-spacing-2xs);
+    }
+
+    .cu-2xl-pb-xs {
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-pb-sm {
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-pb-md {
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-pb-lg {
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-pb-xl {
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-pb-2xl {
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-2xl-mt-2xs {
+      margin-top: var(--canon-spacing-2xs);
+    }
+
+    .cu-2xl-mt-xs {
+      margin-top: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-mt-sm {
+      margin-top: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-mt-md {
+      margin-top: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-mt-lg {
+      margin-top: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-mt-xl {
+      margin-top: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-mt-2xl {
+      margin-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-2xl-mb-2xs {
+      margin-bottom: var(--canon-spacing-2xs);
+    }
+
+    .cu-2xl-mb-xs {
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-mb-sm {
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-mb-md {
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-mb-lg {
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-mb-xl {
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-mb-2xl {
+      margin-bottom: var(--canon-spacing-2xl);
+    }
   }
 }
diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css
index c0e5984e7c..3c2a150365 100644
--- a/packages/canon/src/css/utilities/lg.css
+++ b/packages/canon/src/css/utilities/lg.css
@@ -471,5 +471,133 @@
     .cu-lg-gap-2xl {
       gap: var(--canon-spacing-2xl);
     }
+
+    .cu-lg-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-lg-pt-2xs {
+      padding-top: var(--canon-spacing-2xs);
+    }
+
+    .cu-lg-pt-xs {
+      padding-top: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-pt-sm {
+      padding-top: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-pt-md {
+      padding-top: var(--canon-spacing-md);
+    }
+
+    .cu-lg-pt-lg {
+      padding-top: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-pt-xl {
+      padding-top: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-pt-2xl {
+      padding-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-pb-none {
+      padding-bottom: 0;
+    }
+
+    .cu-lg-pb-2xs {
+      padding-bottom: var(--canon-spacing-2xs);
+    }
+
+    .cu-lg-pb-xs {
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-pb-sm {
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-pb-md {
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-lg-pb-lg {
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-pb-xl {
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-pb-2xl {
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-lg-mt-2xs {
+      margin-top: var(--canon-spacing-2xs);
+    }
+
+    .cu-lg-mt-xs {
+      margin-top: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-mt-sm {
+      margin-top: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-mt-md {
+      margin-top: var(--canon-spacing-md);
+    }
+
+    .cu-lg-mt-lg {
+      margin-top: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-mt-xl {
+      margin-top: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-mt-2xl {
+      margin-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-lg-mb-2xs {
+      margin-bottom: var(--canon-spacing-2xs);
+    }
+
+    .cu-lg-mb-xs {
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-mb-sm {
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-mb-md {
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-lg-mb-lg {
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-mb-xl {
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-mb-2xl {
+      margin-bottom: var(--canon-spacing-2xl);
+    }
   }
 }
diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css
index 574bec2709..40812b1cf3 100644
--- a/packages/canon/src/css/utilities/md.css
+++ b/packages/canon/src/css/utilities/md.css
@@ -471,5 +471,133 @@
     .cu-md-gap-2xl {
       gap: var(--canon-spacing-2xl);
     }
+
+    .cu-md-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-md-pt-2xs {
+      padding-top: var(--canon-spacing-2xs);
+    }
+
+    .cu-md-pt-xs {
+      padding-top: var(--canon-spacing-xs);
+    }
+
+    .cu-md-pt-sm {
+      padding-top: var(--canon-spacing-sm);
+    }
+
+    .cu-md-pt-md {
+      padding-top: var(--canon-spacing-md);
+    }
+
+    .cu-md-pt-lg {
+      padding-top: var(--canon-spacing-lg);
+    }
+
+    .cu-md-pt-xl {
+      padding-top: var(--canon-spacing-xl);
+    }
+
+    .cu-md-pt-2xl {
+      padding-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-pb-none {
+      padding-bottom: 0;
+    }
+
+    .cu-md-pb-2xs {
+      padding-bottom: var(--canon-spacing-2xs);
+    }
+
+    .cu-md-pb-xs {
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-md-pb-sm {
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-md-pb-md {
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-md-pb-lg {
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-md-pb-xl {
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-md-pb-2xl {
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-md-mt-2xs {
+      margin-top: var(--canon-spacing-2xs);
+    }
+
+    .cu-md-mt-xs {
+      margin-top: var(--canon-spacing-xs);
+    }
+
+    .cu-md-mt-sm {
+      margin-top: var(--canon-spacing-sm);
+    }
+
+    .cu-md-mt-md {
+      margin-top: var(--canon-spacing-md);
+    }
+
+    .cu-md-mt-lg {
+      margin-top: var(--canon-spacing-lg);
+    }
+
+    .cu-md-mt-xl {
+      margin-top: var(--canon-spacing-xl);
+    }
+
+    .cu-md-mt-2xl {
+      margin-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-md-mb-2xs {
+      margin-bottom: var(--canon-spacing-2xs);
+    }
+
+    .cu-md-mb-xs {
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-md-mb-sm {
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-md-mb-md {
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-md-mb-lg {
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-md-mb-xl {
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-md-mb-2xl {
+      margin-bottom: var(--canon-spacing-2xl);
+    }
   }
 }
diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css
index 4bf90f7e78..f2623bfae8 100644
--- a/packages/canon/src/css/utilities/sm.css
+++ b/packages/canon/src/css/utilities/sm.css
@@ -471,5 +471,133 @@
     .cu-sm-gap-2xl {
       gap: var(--canon-spacing-2xl);
     }
+
+    .cu-sm-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-sm-pt-2xs {
+      padding-top: var(--canon-spacing-2xs);
+    }
+
+    .cu-sm-pt-xs {
+      padding-top: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-pt-sm {
+      padding-top: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-pt-md {
+      padding-top: var(--canon-spacing-md);
+    }
+
+    .cu-sm-pt-lg {
+      padding-top: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-pt-xl {
+      padding-top: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-pt-2xl {
+      padding-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-pb-none {
+      padding-bottom: 0;
+    }
+
+    .cu-sm-pb-2xs {
+      padding-bottom: var(--canon-spacing-2xs);
+    }
+
+    .cu-sm-pb-xs {
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-pb-sm {
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-pb-md {
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-sm-pb-lg {
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-pb-xl {
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-pb-2xl {
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-sm-mt-2xs {
+      margin-top: var(--canon-spacing-2xs);
+    }
+
+    .cu-sm-mt-xs {
+      margin-top: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-mt-sm {
+      margin-top: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-mt-md {
+      margin-top: var(--canon-spacing-md);
+    }
+
+    .cu-sm-mt-lg {
+      margin-top: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-mt-xl {
+      margin-top: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-mt-2xl {
+      margin-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-sm-mb-2xs {
+      margin-bottom: var(--canon-spacing-2xs);
+    }
+
+    .cu-sm-mb-xs {
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-mb-sm {
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-mb-md {
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-sm-mb-lg {
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-mb-xl {
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-mb-2xl {
+      margin-bottom: var(--canon-spacing-2xl);
+    }
   }
 }
diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css
index 4a08ff8220..709820eb73 100644
--- a/packages/canon/src/css/utilities/xl.css
+++ b/packages/canon/src/css/utilities/xl.css
@@ -471,5 +471,133 @@
     .cu-xl-gap-2xl {
       gap: var(--canon-spacing-2xl);
     }
+
+    .cu-xl-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-xl-pt-2xs {
+      padding-top: var(--canon-spacing-2xs);
+    }
+
+    .cu-xl-pt-xs {
+      padding-top: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-pt-sm {
+      padding-top: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-pt-md {
+      padding-top: var(--canon-spacing-md);
+    }
+
+    .cu-xl-pt-lg {
+      padding-top: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-pt-xl {
+      padding-top: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-pt-2xl {
+      padding-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-pb-none {
+      padding-bottom: 0;
+    }
+
+    .cu-xl-pb-2xs {
+      padding-bottom: var(--canon-spacing-2xs);
+    }
+
+    .cu-xl-pb-xs {
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-pb-sm {
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-pb-md {
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-xl-pb-lg {
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-pb-xl {
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-pb-2xl {
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-xl-mt-2xs {
+      margin-top: var(--canon-spacing-2xs);
+    }
+
+    .cu-xl-mt-xs {
+      margin-top: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-mt-sm {
+      margin-top: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-mt-md {
+      margin-top: var(--canon-spacing-md);
+    }
+
+    .cu-xl-mt-lg {
+      margin-top: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-mt-xl {
+      margin-top: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-mt-2xl {
+      margin-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-xl-mb-2xs {
+      margin-bottom: var(--canon-spacing-2xs);
+    }
+
+    .cu-xl-mb-xs {
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-mb-sm {
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-mb-md {
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-xl-mb-lg {
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-mb-xl {
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-mb-2xl {
+      margin-bottom: var(--canon-spacing-2xl);
+    }
   }
 }
diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css
index d3ab71459c..fd65d47de2 100644
--- a/packages/canon/src/css/utilities/xs.css
+++ b/packages/canon/src/css/utilities/xs.css
@@ -470,4 +470,132 @@
   .cu-gap-2xl {
     gap: var(--canon-spacing-2xl);
   }
+
+  .cu-pt-none {
+    padding-top: 0;
+  }
+
+  .cu-pt-2xs {
+    padding-top: var(--canon-spacing-2xs);
+  }
+
+  .cu-pt-xs {
+    padding-top: var(--canon-spacing-xs);
+  }
+
+  .cu-pt-sm {
+    padding-top: var(--canon-spacing-sm);
+  }
+
+  .cu-pt-md {
+    padding-top: var(--canon-spacing-md);
+  }
+
+  .cu-pt-lg {
+    padding-top: var(--canon-spacing-lg);
+  }
+
+  .cu-pt-xl {
+    padding-top: var(--canon-spacing-xl);
+  }
+
+  .cu-pt-2xl {
+    padding-top: var(--canon-spacing-2xl);
+  }
+
+  .cu-pb-none {
+    padding-bottom: 0;
+  }
+
+  .cu-pb-2xs {
+    padding-bottom: var(--canon-spacing-2xs);
+  }
+
+  .cu-pb-xs {
+    padding-bottom: var(--canon-spacing-xs);
+  }
+
+  .cu-pb-sm {
+    padding-bottom: var(--canon-spacing-sm);
+  }
+
+  .cu-pb-md {
+    padding-bottom: var(--canon-spacing-md);
+  }
+
+  .cu-pb-lg {
+    padding-bottom: var(--canon-spacing-lg);
+  }
+
+  .cu-pb-xl {
+    padding-bottom: var(--canon-spacing-xl);
+  }
+
+  .cu-pb-2xl {
+    padding-bottom: var(--canon-spacing-2xl);
+  }
+
+  .cu-mt-none {
+    margin-top: 0;
+  }
+
+  .cu-mt-2xs {
+    margin-top: var(--canon-spacing-2xs);
+  }
+
+  .cu-mt-xs {
+    margin-top: var(--canon-spacing-xs);
+  }
+
+  .cu-mt-sm {
+    margin-top: var(--canon-spacing-sm);
+  }
+
+  .cu-mt-md {
+    margin-top: var(--canon-spacing-md);
+  }
+
+  .cu-mt-lg {
+    margin-top: var(--canon-spacing-lg);
+  }
+
+  .cu-mt-xl {
+    margin-top: var(--canon-spacing-xl);
+  }
+
+  .cu-mt-2xl {
+    margin-top: var(--canon-spacing-2xl);
+  }
+
+  .cu-mb-none {
+    margin-bottom: 0;
+  }
+
+  .cu-mb-2xs {
+    margin-bottom: var(--canon-spacing-2xs);
+  }
+
+  .cu-mb-xs {
+    margin-bottom: var(--canon-spacing-xs);
+  }
+
+  .cu-mb-sm {
+    margin-bottom: var(--canon-spacing-sm);
+  }
+
+  .cu-mb-md {
+    margin-bottom: var(--canon-spacing-md);
+  }
+
+  .cu-mb-lg {
+    margin-bottom: var(--canon-spacing-lg);
+  }
+
+  .cu-mb-xl {
+    margin-bottom: var(--canon-spacing-xl);
+  }
+
+  .cu-mb-2xl {
+    margin-bottom: var(--canon-spacing-2xl);
+  }
 }