From fad76f6a68327f179e2e696ff05381f9c5f664e6 Mon Sep 17 00:00:00 2001
From: Gavyn McKenzie <gavyn@etch.co>
Date: Fri, 9 Feb 2024 07:33:12 +0000
Subject: [PATCH 1/3] feat: fluid spacing

---
 components/composition/Spacing/Spacing.css    | 24 +++++++++++++++++++
 .../composition/Spacing/Spacing.stories.ts    |  2 +-
 styles/tokens/spacing.css                     |  4 ++++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/components/composition/Spacing/Spacing.css b/components/composition/Spacing/Spacing.css
index 4ee53d8..636e877 100644
--- a/components/composition/Spacing/Spacing.css
+++ b/components/composition/Spacing/Spacing.css
@@ -20,6 +20,18 @@
   margin-top: var(--diamond-spacing-xl);
 }
 
+.diamond-spacing-top-fluid {
+  margin-top: var(--diamond-spacing-fluid);
+}
+
+.diamond-spacing-top-fluid-sm {
+  margin-top: var(--diamond-spacing-fluid-sm);
+}
+
+.diamond-spacing-top-fluid-lg {
+  margin-top: var(--diamond-spacing-fluid-lg);
+}
+
 /* bottom */
 
 .diamond-spacing-bottom-xs {
@@ -41,3 +53,15 @@
 .diamond-spacing-bottom-xl {
   margin-bottom: var(--diamond-spacing-xl);
 }
+
+.diamond-spacing-bottom-fluid {
+  margin-bottom: var(--diamond-spacing-fluid);
+}
+
+.diamond-spacing-bottom-fluid-sm {
+  margin-bottom: var(--diamond-spacing-fluid-sm);
+}
+
+.diamond-spacing-bottom-fluid-lg {
+  margin-bottom: var(--diamond-spacing-fluid-lg);
+}
diff --git a/components/composition/Spacing/Spacing.stories.ts b/components/composition/Spacing/Spacing.stories.ts
index b99d5f0..9259f9f 100644
--- a/components/composition/Spacing/Spacing.stories.ts
+++ b/components/composition/Spacing/Spacing.stories.ts
@@ -20,7 +20,7 @@ export default {
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl', 'fluid', 'fluid-sm', 'fluid-lg'],
     },
   },
 };
diff --git a/styles/tokens/spacing.css b/styles/tokens/spacing.css
index a873e11..a741de6 100644
--- a/styles/tokens/spacing.css
+++ b/styles/tokens/spacing.css
@@ -6,4 +6,8 @@
   --diamond-spacing-sm: calc(var(--diamond-spacing) / 2);
   --diamond-spacing-lg: calc(var(--diamond-spacing) * 2);
   --diamond-spacing-xl: calc(var(--diamond-spacing) * 4);
+
+  --diamond-spacing-fluid: clamp(1rem, 5vw, 4rem);
+  --diamond-spacing-fluid-sm: clamp(1rem, 5vw, 3rem);
+  --diamond-spacing-fluid-lg: clamp(1rem, 5vw, 5rem);
 }

From fe6f6a484cfd0325060ee3caa39cd3b79c401108 Mon Sep 17 00:00:00 2001
From: Gavyn McKenzie <gavyn@etch.co>
Date: Fri, 9 Feb 2024 07:50:12 +0000
Subject: [PATCH 2/3] fix: radius card overflow

---
 components/canvas/Card/Card.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/canvas/Card/Card.css b/components/canvas/Card/Card.css
index 2d996c0..d4a9be5 100644
--- a/components/canvas/Card/Card.css
+++ b/components/canvas/Card/Card.css
@@ -16,6 +16,7 @@ diamond-card {
 
   &[radius] {
     border-radius: var(--diamond-radius);
+    overflow: hidden;
   }
 
   &[padding='xs'] {

From e61da02723f50092c960bf3c840b3b91ea073a5c Mon Sep 17 00:00:00 2001
From: Gavyn McKenzie <gavyn@etch.co>
Date: Fri, 9 Feb 2024 11:03:11 +0000
Subject: [PATCH 3/3] feat: add fluid padding to section and card

---
 components/canvas/Card/Card.css              | 12 ++++++++++++
 components/canvas/Card/Card.stories.ts       | 12 +++++++++++-
 components/canvas/Card/Card.ts               | 11 ++++++++++-
 components/canvas/Section/Section.css        | 12 ++++++++++++
 components/canvas/Section/Section.stories.ts | 12 +++++++++++-
 components/canvas/Section/Section.ts         | 11 ++++++++++-
 6 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/components/canvas/Card/Card.css b/components/canvas/Card/Card.css
index d4a9be5..f51e51d 100644
--- a/components/canvas/Card/Card.css
+++ b/components/canvas/Card/Card.css
@@ -35,6 +35,18 @@ diamond-card {
     padding: var(--diamond-spacing-xl);
   }
 
+  &[padding='fluid-sm'] {
+    padding: var(--diamond-spacing-fluid-sm);
+  }
+
+  &[padding='fluid'] {
+    padding: var(--diamond-spacing-fluid);
+  }
+
+  &[padding='fluid-lg'] {
+    padding: var(--diamond-spacing-fluid-lg);
+  }
+
   &[padding='none'] {
     padding: 0;
   }
diff --git a/components/canvas/Card/Card.stories.ts b/components/canvas/Card/Card.stories.ts
index 5e10580..d30e45c 100644
--- a/components/canvas/Card/Card.stories.ts
+++ b/components/canvas/Card/Card.stories.ts
@@ -18,7 +18,17 @@ export default {
       control: {
         type: 'select',
       },
-      options: ['xs', 'sm', 'md', 'lg', 'xl', 'none'],
+      options: [
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'xl',
+        'fluid-sm',
+        'fluid',
+        'fluid-lg',
+        'none',
+      ],
     },
   },
 };
diff --git a/components/canvas/Card/Card.ts b/components/canvas/Card/Card.ts
index 2bb9908..aa7e90e 100644
--- a/components/canvas/Card/Card.ts
+++ b/components/canvas/Card/Card.ts
@@ -5,7 +5,16 @@ export interface CardAttributes {
   shadow?: boolean;
   muted?: boolean;
   radius?: boolean;
-  padding?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  padding?:
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | 'fluid-sm'
+    | 'fluid'
+    | 'fluid-lg'
+    | 'none';
 }
 
 declare global {
diff --git a/components/canvas/Section/Section.css b/components/canvas/Section/Section.css
index 811d034..ce94c46 100644
--- a/components/canvas/Section/Section.css
+++ b/components/canvas/Section/Section.css
@@ -20,6 +20,18 @@ diamond-section {
     padding-block: var(--diamond-spacing-xl);
   }
 
+  &[padding='fluid-sm'] {
+    padding: var(--diamond-spacing-fluid-sm);
+  }
+
+  &[padding='fluid'] {
+    padding: var(--diamond-spacing-fluid);
+  }
+
+  &[padding='fluid-lg'] {
+    padding: var(--diamond-spacing-fluid-lg);
+  }
+
   &[padding='none'] {
     padding-block: 0;
   }
diff --git a/components/canvas/Section/Section.stories.ts b/components/canvas/Section/Section.stories.ts
index b6939ce..bf9ea91 100644
--- a/components/canvas/Section/Section.stories.ts
+++ b/components/canvas/Section/Section.stories.ts
@@ -20,7 +20,17 @@ export default {
       control: {
         type: 'select',
       },
-      options: ['xs', 'sm', 'md', 'lg', 'xl', 'none'],
+      options: [
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'xl',
+        'fluid-sm',
+        'fluid',
+        'fluid-lg',
+        'none',
+      ],
     },
   },
 };
diff --git a/components/canvas/Section/Section.ts b/components/canvas/Section/Section.ts
index c3f30c7..b3ddce3 100644
--- a/components/canvas/Section/Section.ts
+++ b/components/canvas/Section/Section.ts
@@ -1,7 +1,16 @@
 import { JSXCustomElement } from '../../../types/jsx-custom-element';
 
 export interface SectionAttributes {
-  padding?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  padding?:
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | 'fluid-sm'
+    | 'fluid'
+    | 'fluid-lg'
+    | 'none';
 }
 
 declare global {