From 0b5d122a10b01438bd014038665597b97f0cb807 Mon Sep 17 00:00:00 2001
From: ryunsong-contentful <ryun.song@contentful.com>
Date: Fri, 15 Dec 2023 15:20:41 -0700
Subject: [PATCH] feat: resolve design tokens for row and column gap

---
 packages/experience-builder-sdk/src/hooks/useBreakpoints.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/experience-builder-sdk/src/hooks/useBreakpoints.ts b/packages/experience-builder-sdk/src/hooks/useBreakpoints.ts
index e6ef51578..365a05571 100644
--- a/packages/experience-builder-sdk/src/hooks/useBreakpoints.ts
+++ b/packages/experience-builder-sdk/src/hooks/useBreakpoints.ts
@@ -28,7 +28,7 @@ const toCSSMediaQuery = ({ query }: Breakpoint): string | undefined => {
   return undefined;
 };
 
-const availableDesignTokenVariables = new Set(['cfPadding', 'cfMargin']);
+const availableDesignTokenVariables = new Set(['cfPadding', 'cfMargin', 'cfGap']);
 
 // Remove this helper when upgrading to TypeScript 5.0 - https://github.com/microsoft/TypeScript/issues/48829
 const findLast = <T>(
@@ -60,7 +60,7 @@ export const getValueForBreakpoint = (
     for (let index = activeBreakpointIndex; index >= 0; index--) {
       const breakpointId = breakpoints[index].id;
       if (availableDesignTokenVariables.has(variableName)) {
-        if (variableName === 'cfMargin' || variableName === 'cfPadding')
+        if (variableName === 'cfMargin' || variableName === 'cfPadding' || variableName === 'cfGap')
           return getDesignTokenRegistrationForSpacing(valuesByBreakpoint[breakpointId]);
       }
       if (valuesByBreakpoint[breakpointId]) {