From 5211f604bbd8b8e8f847b954c1dcc649c80899f3 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Wed, 18 Dec 2024 17:45:06 +0000
Subject: [PATCH] Adding missing props

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../canon/src/components/Box/Box.stories.tsx  |  72 ++++++++++++
 packages/canon/src/components/Box/Docs.mdx    | 104 ++++++++++++++++--
 .../canon/src/components/Box/sprinkles.css.ts |  14 +--
 packages/canon/src/css/core.css               |  24 ++--
 packages/canon/src/css/utilities/2xl.css      |  61 ++++++++++
 packages/canon/src/css/utilities/lg.css       |  61 ++++++++++
 packages/canon/src/css/utilities/md.css       |  61 ++++++++++
 packages/canon/src/css/utilities/sm.css       |  61 ++++++++++
 packages/canon/src/css/utilities/xl.css       |  61 ++++++++++
 packages/canon/src/css/utilities/xs.css       |  61 ++++++++++
 packages/canon/src/types.ts                   |  40 ++++---
 packages/canon/src/utils/getClassNames.ts     |  17 ++-
 12 files changed, 592 insertions(+), 45 deletions(-)

diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx
index 37e87484e3..9ffa1d5a66 100644
--- a/packages/canon/src/components/Box/Box.stories.tsx
+++ b/packages/canon/src/components/Box/Box.stories.tsx
@@ -343,3 +343,75 @@ export const FlexWrap: Story = {
     </Stack>
   ),
 };
+
+export const BorderRadius: Story = {
+  args: {
+    style: {
+      background: '#1f47ff',
+      color: 'white',
+      padding: '4px 8px',
+      width: '64px',
+      height: '64px',
+    },
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  render: args => (
+    <Inline align="center">
+      <Box borderRadius="2xs" {...args}>
+        <span>2xs</span>
+      </Box>
+      <Box borderRadius="xs" {...args}>
+        <span>xs</span>
+      </Box>
+      <Box borderRadius="sm" {...args}>
+        <span>sm</span>
+      </Box>
+      <Box borderRadius="md" {...args}>
+        <span>md</span>
+      </Box>
+      <Box borderRadius="xl" {...args}>
+        <span>xl</span>
+      </Box>
+      <Box borderRadius="2xl" {...args}>
+        <span>2xl</span>
+      </Box>
+    </Inline>
+  ),
+};
+
+export const Border: Story = {
+  args: {
+    style: {
+      background: 'var(--canon-surface-1)',
+      color: 'var(--canon-text-primary)',
+      padding: '4px 8px',
+      width: '80px',
+      height: '32px',
+    },
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 'xs',
+  },
+  render: args => (
+    <Inline align="center">
+      <Box border="base" {...args}>
+        Base
+      </Box>
+      <Box border="error" {...args}>
+        Error
+      </Box>
+      <Box border="warning" {...args}>
+        Warning
+      </Box>
+      <Box border="selected" {...args}>
+        Selected
+      </Box>
+      <Box border="none" {...args}>
+        None
+      </Box>
+    </Inline>
+  ),
+};
diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx
index 9bca7d6b7e..bc350da323 100644
--- a/packages/canon/src/components/Box/Docs.mdx
+++ b/packages/canon/src/components/Box/Docs.mdx
@@ -1,9 +1,7 @@
 import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks';
 import * as BoxStories from './Box.stories';
 import { Title, Text } from '../../../docs/components';
-import { PropsTable, getProps } from '../../../docs/components';
-import { boxProperties } from './sprinkles.css';
-import { spacingProperties } from '../../layout/sprinkles.css';
+import { PropsTable } from '../../../docs/components';
 
 <Meta of={BoxStories} />
 
@@ -31,18 +29,49 @@ import { spacingProperties } from '../../layout/sprinkles.css';
 
 <PropsTable
   data={{
-    ...getProps(boxProperties.styles),
+    alignItems: {
+      type: ['stretch', 'start', 'center', 'end'],
+      responsive: true,
+    },
+    border: {
+      type: ['none', 'base', 'error', 'warning', 'selected'],
+      responsive: true,
+    },
+    borderRadius: {
+      type: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+      responsive: true,
+    },
     children: {
       type: 'ReactNode',
-      required: false,
+      responsive: false,
     },
     className: {
       type: 'string',
-      required: false,
+      responsive: false,
+    },
+    display: {
+      type: ['none', 'flex', 'block', 'inline'],
+      responsive: true,
+    },
+    flexDirection: {
+      type: ['row', 'column'],
+      responsive: true,
+    },
+    flexWrap: {
+      type: ['wrap', 'nowrap', 'wrap-reverse'],
+      responsive: true,
+    },
+    gap: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    justifyContent: {
+      type: ['stretch', 'start', 'center', 'end', 'around', 'between'],
+      responsive: true,
     },
     style: {
       type: 'CSSProperties',
-      required: false,
+      responsive: false,
     },
   }}
 />
@@ -55,7 +84,66 @@ import { spacingProperties } from '../../layout/sprinkles.css';
 
 <Canvas of={BoxStories.Padding} />
 
-<PropsTable data={getProps(spacingProperties.styles)} />
+<PropsTable
+  data={{
+    margin: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    marginBottom: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    marginLeft: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    marginRight: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    marginTop: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    marginX: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    marginY: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    padding: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    paddingBottom: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    paddingLeft: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    paddingRight: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    paddingTop: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    paddingX: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    paddingY: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+  }}
+/>
 
 <Title type="h2">Examples</Title>
 <Text>Here are some examples of how you can use the Box component.</Text>
diff --git a/packages/canon/src/components/Box/sprinkles.css.ts b/packages/canon/src/components/Box/sprinkles.css.ts
index 36be9a64ba..0613c84b9c 100644
--- a/packages/canon/src/components/Box/sprinkles.css.ts
+++ b/packages/canon/src/components/Box/sprinkles.css.ts
@@ -33,12 +33,12 @@ export const boxProperties = defineProperties({
     //   'space-between',
     // ],
     // alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
-    borderRadius: {
-      none: 0,
-      small: '4px',
-      medium: '8px',
-      full: '9999px',
-    },
+    // borderRadius: {
+    //   none: 0,
+    //   small: '4px',
+    //   medium: '8px',
+    //   full: '9999px',
+    // },
     boxShadow: {
       small: 'var(--canon-box-shadow-small)',
       medium: 'var(--canon-box-shadow-medium)',
@@ -50,7 +50,7 @@ export const boxProperties = defineProperties({
       error: '1px solid var(--canon-error)',
     },
     // display: ['none', 'flex', 'block', 'inline'],
-    flexWrap: ['wrap', 'nowrap'],
+    // flexWrap: ['wrap', 'nowrap'],
   },
 });
 
diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css
index c624ffbc9a..9f8dcfff19 100644
--- a/packages/canon/src/css/core.css
+++ b/packages/canon/src/css/core.css
@@ -27,10 +27,11 @@
   --canon-surface-2: #f4f4f4;
   --canon-surface-3: #f1f1f1;
 
-  /* Outlines */
-  --canon-outline: rgba(0, 0, 0, 0.1);
-  --canon-outline-hover: rgba(0, 0, 0, 0.2);
-  --canon-outline-focus: #000;
+  /* Borders */
+  --canon-border-base: rgba(0, 0, 0, 0.1);
+  --canon-border-warning: #e36d05;
+  --canon-border-error: #e22b2b;
+  --canon-border-selected: #1db954;
 
   /* States - Add more states */
   --canon-error: #f50000;
@@ -41,9 +42,9 @@
   --canon-text-secondary: #646464;
 
   /* Box shadows */
-  --canon-box-shadow-small: 0 0 0 1px rgba(0, 0, 0, 0.05);
-  --canon-box-shadow-medium: 0 0 0 1px rgba(0, 0, 0, 0.1);
-  --canon-box-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.2);
+  /* --canon-box-shadow-small: 0 0 0 1px rgba(0, 0, 0, 0.05); */
+  /* --canon-box-shadow-medium: 0 0 0 1px rgba(0, 0, 0, 0.1); */
+  /* --canon-box-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.2); */
 
   /* Font families */
   --canon-font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
@@ -102,10 +103,11 @@
   --canon-surface-1: #121212;
   --canon-surface-2: #1a1a1a;
 
-  /* Outlines */
-  --canon-outline: rgba(255, 255, 255, 0.2);
-  --canon-outline-hover: rgba(255, 255, 255, 0.4);
-  --canon-outline-focus: #fff;
+  /* Borders */
+  --canon-border-base: rgba(255, 255, 255, 0.2);
+  --canon-border-warning: #f50000;
+  --canon-border-error: #f87503;
+  --canon-border-selected: #25d262;
 
   /* States - Add more states */
   --canon-error: #f50000;
diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css
index bad3f7a152..91013ab78e 100644
--- a/packages/canon/src/css/utilities/2xl.css
+++ b/packages/canon/src/css/utilities/2xl.css
@@ -20,6 +20,35 @@
       display: block;
     }
 
+    .cu-2xl-border-base {
+      border-color: var(--canon-border-base);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-2xl-border-error {
+      border-color: var(--canon-border-error);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-2xl-border-none {
+      border-color: transparent;
+      border-width: 0;
+    }
+
+    .cu-2xl-border-selected {
+      border-color: var(--canon-border-selected);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-2xl-border-warning {
+      border-color: var(--canon-border-warning);
+      border-width: 1px;
+      border-style: solid;
+    }
+
     .cu-2xl-flex {
       display: flex;
     }
@@ -548,6 +577,38 @@
       padding-bottom: var(--canon-spacing-xs);
     }
 
+    .cu-2xl-rounded-2xl {
+      border-radius: var(--canon-border-radius-2xl);
+    }
+
+    .cu-2xl-rounded-2xs {
+      border-radius: var(--canon-border-radius-2xs);
+    }
+
+    .cu-2xl-rounded-lg {
+      border-radius: var(--canon-border-radius-lg);
+    }
+
+    .cu-2xl-rounded-md {
+      border-radius: var(--canon-border-radius-md);
+    }
+
+    .cu-2xl-rounded-none {
+      border-radius: 0;
+    }
+
+    .cu-2xl-rounded-sm {
+      border-radius: var(--canon-border-radius-sm);
+    }
+
+    .cu-2xl-rounded-xl {
+      border-radius: var(--canon-border-radius-xl);
+    }
+
+    .cu-2xl-rounded-xs {
+      border-radius: var(--canon-border-radius-xs);
+    }
+
     .cu-2xl-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css
index 40bca233ef..673c55885e 100644
--- a/packages/canon/src/css/utilities/lg.css
+++ b/packages/canon/src/css/utilities/lg.css
@@ -20,6 +20,35 @@
       display: block;
     }
 
+    .cu-lg-border-base {
+      border-color: var(--canon-border-base);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-lg-border-error {
+      border-color: var(--canon-border-error);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-lg-border-none {
+      border-color: transparent;
+      border-width: 0;
+    }
+
+    .cu-lg-border-selected {
+      border-color: var(--canon-border-selected);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-lg-border-warning {
+      border-color: var(--canon-border-warning);
+      border-width: 1px;
+      border-style: solid;
+    }
+
     .cu-lg-flex {
       display: flex;
     }
@@ -548,6 +577,38 @@
       padding-bottom: var(--canon-spacing-xs);
     }
 
+    .cu-lg-rounded-2xl {
+      border-radius: var(--canon-border-radius-2xl);
+    }
+
+    .cu-lg-rounded-2xs {
+      border-radius: var(--canon-border-radius-2xs);
+    }
+
+    .cu-lg-rounded-lg {
+      border-radius: var(--canon-border-radius-lg);
+    }
+
+    .cu-lg-rounded-md {
+      border-radius: var(--canon-border-radius-md);
+    }
+
+    .cu-lg-rounded-none {
+      border-radius: 0;
+    }
+
+    .cu-lg-rounded-sm {
+      border-radius: var(--canon-border-radius-sm);
+    }
+
+    .cu-lg-rounded-xl {
+      border-radius: var(--canon-border-radius-xl);
+    }
+
+    .cu-lg-rounded-xs {
+      border-radius: var(--canon-border-radius-xs);
+    }
+
     .cu-lg-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css
index f499061167..4772943947 100644
--- a/packages/canon/src/css/utilities/md.css
+++ b/packages/canon/src/css/utilities/md.css
@@ -20,6 +20,35 @@
       display: block;
     }
 
+    .cu-md-border-base {
+      border-color: var(--canon-border-base);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-md-border-error {
+      border-color: var(--canon-border-error);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-md-border-none {
+      border-color: transparent;
+      border-width: 0;
+    }
+
+    .cu-md-border-selected {
+      border-color: var(--canon-border-selected);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-md-border-warning {
+      border-color: var(--canon-border-warning);
+      border-width: 1px;
+      border-style: solid;
+    }
+
     .cu-md-flex {
       display: flex;
     }
@@ -548,6 +577,38 @@
       padding-bottom: var(--canon-spacing-xs);
     }
 
+    .cu-md-rounded-2xl {
+      border-radius: var(--canon-border-radius-2xl);
+    }
+
+    .cu-md-rounded-2xs {
+      border-radius: var(--canon-border-radius-2xs);
+    }
+
+    .cu-md-rounded-lg {
+      border-radius: var(--canon-border-radius-lg);
+    }
+
+    .cu-md-rounded-md {
+      border-radius: var(--canon-border-radius-md);
+    }
+
+    .cu-md-rounded-none {
+      border-radius: 0;
+    }
+
+    .cu-md-rounded-sm {
+      border-radius: var(--canon-border-radius-sm);
+    }
+
+    .cu-md-rounded-xl {
+      border-radius: var(--canon-border-radius-xl);
+    }
+
+    .cu-md-rounded-xs {
+      border-radius: var(--canon-border-radius-xs);
+    }
+
     .cu-md-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css
index 9a13babe35..d3ffc68b44 100644
--- a/packages/canon/src/css/utilities/sm.css
+++ b/packages/canon/src/css/utilities/sm.css
@@ -20,6 +20,35 @@
       display: block;
     }
 
+    .cu-sm-border-base {
+      border-color: var(--canon-border-base);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-sm-border-error {
+      border-color: var(--canon-border-error);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-sm-border-none {
+      border-color: transparent;
+      border-width: 0;
+    }
+
+    .cu-sm-border-selected {
+      border-color: var(--canon-border-selected);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-sm-border-warning {
+      border-color: var(--canon-border-warning);
+      border-width: 1px;
+      border-style: solid;
+    }
+
     .cu-sm-flex {
       display: flex;
     }
@@ -548,6 +577,38 @@
       padding-bottom: var(--canon-spacing-xs);
     }
 
+    .cu-sm-rounded-2xl {
+      border-radius: var(--canon-border-radius-2xl);
+    }
+
+    .cu-sm-rounded-2xs {
+      border-radius: var(--canon-border-radius-2xs);
+    }
+
+    .cu-sm-rounded-lg {
+      border-radius: var(--canon-border-radius-lg);
+    }
+
+    .cu-sm-rounded-md {
+      border-radius: var(--canon-border-radius-md);
+    }
+
+    .cu-sm-rounded-none {
+      border-radius: 0;
+    }
+
+    .cu-sm-rounded-sm {
+      border-radius: var(--canon-border-radius-sm);
+    }
+
+    .cu-sm-rounded-xl {
+      border-radius: var(--canon-border-radius-xl);
+    }
+
+    .cu-sm-rounded-xs {
+      border-radius: var(--canon-border-radius-xs);
+    }
+
     .cu-sm-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css
index 74e69959a3..0ac56c7de1 100644
--- a/packages/canon/src/css/utilities/xl.css
+++ b/packages/canon/src/css/utilities/xl.css
@@ -20,6 +20,35 @@
       display: block;
     }
 
+    .cu-xl-border-base {
+      border-color: var(--canon-border-base);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-xl-border-error {
+      border-color: var(--canon-border-error);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-xl-border-none {
+      border-color: transparent;
+      border-width: 0;
+    }
+
+    .cu-xl-border-selected {
+      border-color: var(--canon-border-selected);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-xl-border-warning {
+      border-color: var(--canon-border-warning);
+      border-width: 1px;
+      border-style: solid;
+    }
+
     .cu-xl-flex {
       display: flex;
     }
@@ -548,6 +577,38 @@
       padding-bottom: var(--canon-spacing-xs);
     }
 
+    .cu-xl-rounded-2xl {
+      border-radius: var(--canon-border-radius-2xl);
+    }
+
+    .cu-xl-rounded-2xs {
+      border-radius: var(--canon-border-radius-2xs);
+    }
+
+    .cu-xl-rounded-lg {
+      border-radius: var(--canon-border-radius-lg);
+    }
+
+    .cu-xl-rounded-md {
+      border-radius: var(--canon-border-radius-md);
+    }
+
+    .cu-xl-rounded-none {
+      border-radius: 0;
+    }
+
+    .cu-xl-rounded-sm {
+      border-radius: var(--canon-border-radius-sm);
+    }
+
+    .cu-xl-rounded-xl {
+      border-radius: var(--canon-border-radius-xl);
+    }
+
+    .cu-xl-rounded-xs {
+      border-radius: var(--canon-border-radius-xs);
+    }
+
     .cu-xl-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css
index 3cea2b279d..7276e59c46 100644
--- a/packages/canon/src/css/utilities/xs.css
+++ b/packages/canon/src/css/utilities/xs.css
@@ -19,6 +19,35 @@
     display: block;
   }
 
+  .cu-border-base {
+    border-color: var(--canon-border-base);
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  .cu-border-error {
+    border-color: var(--canon-border-error);
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  .cu-border-none {
+    border-color: transparent;
+    border-width: 0;
+  }
+
+  .cu-border-selected {
+    border-color: var(--canon-border-selected);
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  .cu-border-warning {
+    border-color: var(--canon-border-warning);
+    border-width: 1px;
+    border-style: solid;
+  }
+
   .cu-flex {
     display: flex;
   }
@@ -547,6 +576,38 @@
     padding-bottom: var(--canon-spacing-xs);
   }
 
+  .cu-rounded-2xl {
+    border-radius: var(--canon-border-radius-2xl);
+  }
+
+  .cu-rounded-2xs {
+    border-radius: var(--canon-border-radius-2xs);
+  }
+
+  .cu-rounded-lg {
+    border-radius: var(--canon-border-radius-lg);
+  }
+
+  .cu-rounded-md {
+    border-radius: var(--canon-border-radius-md);
+  }
+
+  .cu-rounded-none {
+    border-radius: 0;
+  }
+
+  .cu-rounded-sm {
+    border-radius: var(--canon-border-radius-sm);
+  }
+
+  .cu-rounded-xl {
+    border-radius: var(--canon-border-radius-xl);
+  }
+
+  .cu-rounded-xs {
+    border-radius: var(--canon-border-radius-xs);
+  }
+
   .cu-wrap-reverse {
     flex-wrap: wrap-reverse;
   }
diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts
index 6ba8e455cd..1f2ce8c02b 100644
--- a/packages/canon/src/types.ts
+++ b/packages/canon/src/types.ts
@@ -42,33 +42,41 @@ export type JustifyContent =
 export type AlignItems = 'stretch' | 'start' | 'center' | 'end';
 
 /** @public */
-export type BorderRadius = 'none' | 'small' | 'medium' | 'full';
+export type BorderRadius =
+  | 'none'
+  | '2xs'
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl';
 
 /** @public */
-export type BoxShadow = 'small' | 'medium' | 'large';
+export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected';
 
 /** @public */
 export interface UtilityProps {
+  alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
+  border?: Border | Partial<Record<Breakpoint, Border>>;
+  borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
   display?: Display | Partial<Record<Breakpoint, Display>>;
   flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
   flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
+  gap?: Space | Partial<Record<Breakpoint, Space>>;
   justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
-  alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
-  borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
-  boxShadow?: BoxShadow | Partial<Record<Breakpoint, BoxShadow>>;
-  padding?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingX?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingY?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
   margin?: Space | Partial<Record<Breakpoint, Space>>;
-  marginX?: Space | Partial<Record<Breakpoint, Space>>;
-  marginY?: Space | Partial<Record<Breakpoint, Space>>;
+  marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
   marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
   marginRight?: Space | Partial<Record<Breakpoint, Space>>;
   marginTop?: Space | Partial<Record<Breakpoint, Space>>;
-  marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
-  gap?: Space | Partial<Record<Breakpoint, Space>>;
+  marginX?: Space | Partial<Record<Breakpoint, Space>>;
+  marginY?: Space | Partial<Record<Breakpoint, Space>>;
+  padding?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingX?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingY?: Space | Partial<Record<Breakpoint, Space>>;
 }
diff --git a/packages/canon/src/utils/getClassNames.ts b/packages/canon/src/utils/getClassNames.ts
index d026f3d453..9beb63d24e 100644
--- a/packages/canon/src/utils/getClassNames.ts
+++ b/packages/canon/src/utils/getClassNames.ts
@@ -58,9 +58,20 @@ const valueMap: Record<string, Record<string, string>> = {
   },
   borderRadius: {
     none: 'rounded-none',
-    small: 'rounded-sm',
-    medium: 'rounded-md',
-    full: 'rounded-full',
+    '2xs': 'rounded-2xs',
+    xs: 'rounded-xs',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    '2xl': 'rounded-2xl',
+  },
+  border: {
+    none: 'border-none',
+    base: 'border-base',
+    error: 'border-error',
+    warning: 'border-warning',
+    selected: 'border-selected',
   },
   padding: spaceMap('p'),
   paddingX: spaceMap('px'),