feat(grid): L3-4300 - grid update (#477)

PhillipsAuctionHouse · Jan 17, 2025 · a99f354 · a99f354
1 parent b29bca5
commit a99f354
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 8 deletions.
diff --git a/src/design/grid-tokens/_grid-tokens.scss b/src/design/grid-tokens/_grid-tokens.scss
@@ -38,20 +38,15 @@
     position: absolute;
     top: 0;
     transform: translate(-50%, 2.25rem);
-    width: calc(100% - 1rem);
+    width: calc(100% + 1.25rem);
 
     @media (min-width: 961px) {
       height: calc(100% - 1.75rem);
       transform: translate(-50%, 3rem);
     }
 
-    @media (min-width: 1401px) {
-      width: calc(100% - 3rem);
-    }
-
     @media (min-width: 1801px) {
       transform: translate(-50%, 3.55rem);
-      width: calc(100% - 11rem);
     }
   }
 

diff --git a/src/design/spacing-tokens/spacing-tokens.mdx b/src/design/spacing-tokens/spacing-tokens.mdx
@@ -96,7 +96,7 @@ import StackAlt from '../assets/stackalt.svg';
     </tr>
     <tr>
       <td>
-        <span className="token">`$spacing-xlg`</span>
+        <span className="token">`$spacing-xl`</span>
       </td>
       <td>
         <span className="property">4rem</span>
@@ -108,6 +108,34 @@ import StackAlt from '../assets/stackalt.svg';
         <span className="property">5rem</span>
       </td>
     </tr>
+    <tr>
+      <td>
+        <span className="token">`$spacing-xxl`</span>
+      </td>
+      <td>
+        <span className="property">5rem</span>
+      </td>
+      <td>
+        <span className="property">4.75rem</span>
+      </td>
+      <td>
+        <span className="property">5.25rem</span>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <span className="token">`$spacing-xxxl`</span>
+      </td>
+      <td>
+        <span className="property">6rem</span>
+      </td>
+      <td>
+        <span className="property">5.75rem</span>
+      </td>
+      <td>
+        <span className="property">6.25rem</span>
+      </td>
+    </tr>
   </tbody>
 </table>
 

diff --git a/src/scss/_utils.scss b/src/scss/_utils.scss
@@ -43,6 +43,10 @@
 @mixin gridMargins {
   margin: 0 $spacing-md;
 
+  @media (min-width: $breakpoint-md) {
+    margin: 0 $spacing-xxxl;
+  }
+
   @media (min-width: $breakpoint-lg) {
     margin: 0 $spacing-lg;
   }

diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss
@@ -323,6 +323,7 @@ $snowflake-menu-padding: 1.25rem;
   --spacing-lg: 2.75rem;
   --spacing-xl: 3.75rem;
   --spacing-xxl: 4.75rem;
+  --spacing-xxxl: 5.75rem;
 
   @media (min-width: $breakpoint-md) {
     --spacing-micro: 0.25rem;
@@ -332,6 +333,7 @@ $snowflake-menu-padding: 1.25rem;
     --spacing-lg: 3rem;
     --spacing-xl: 4rem;
     --spacing-xxl: 5rem;
+    --spacing-xxxl: 6rem;
   }
 
   @media (min-width: $breakpoint-xl) {
@@ -342,6 +344,7 @@ $snowflake-menu-padding: 1.25rem;
     --spacing-lg: 3.75rem;
     --spacing-xl: 5rem;
     --spacing-xxl: 5.25rem;
+    --spacing-xxxl: 6.25rem;
   }
 }
 
@@ -352,7 +355,8 @@ $spacing-md: var(--spacing-md);
 $spacing-lg: var(--spacing-lg);
 $spacing-xl: var(--spacing-xl);
 $spacing-xxl: var(--spacing-xl);
-$spacing-sizes: micro, xsm, sm, md, lg, xl, xxl;
+$spacing-xxxl: var(--spacing-xxxl);
+$spacing-sizes: micro, xsm, sm, md, lg, xl, xxl, xxxl;
 
 // PADDING
 $padding-micro: var(--spacing-micro);