feat: adds design token resultion for cfGap, cfWidth, cfHeight, and c…

…fBackgroundColor

packages/experience-builder-sdk/src/core/designTokenRegistry.ts

@@ -17,14 +17,15 @@ export const defineDesignTokens = (designTokenDefinition: DesignTokensDefinition
   });
 };
 
-export const getDesignTokenRegistrationForSpacing = (breakpointValue: string) => {
+export const getDesignTokenRegistration = (breakpointValue: string) => {
   let resolvedValue = '';
   const values = breakpointValue.split(' ');
   values.forEach((value) => {
     let tokenValue = value;
-    if (isTemplateStringFormat(value)) tokenValue = resolveSpacingDesignToken(value);
+    if (isTemplateStringFormat(value)) tokenValue = resolveSimpleDesignToken(value);
     resolvedValue += `${tokenValue} `;
   });
+
   return resolvedValue;
 };
 
@@ -33,7 +34,7 @@ const isTemplateStringFormat = (str: string) => {
   return templateStringRegex.test(str);
 };
 
-const resolveSpacingDesignToken = (templateString: string) => {
+const resolveSimpleDesignToken = (templateString: string) => {
   const nonTemplateValue = templateString.replace(templateStringRegex, '$1');
   const designKeys = nonTemplateValue.split('.');
   const spacingValues = designTokensRegistry[designKeys[0]] as DesignTokensDefinition;

packages/experience-builder-sdk/src/hooks/useBreakpoints.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Breakpoint, CompositionVariableValueType } from '../types';
-import { getDesignTokenRegistrationForSpacing } from '../core/designTokenRegistry';
+import { getDesignTokenRegistration } from '../core/designTokenRegistry';
 
 export const MEDIA_QUERY_REGEXP = /(<|>)(\d{1,})(px|cm|mm|in|pt|pc)$/;
 
@@ -28,7 +28,14 @@ const toCSSMediaQuery = ({ query }: Breakpoint): string | undefined => {
   return undefined;
 };
 
-const availableDesignTokenVariables = new Set(['cfPadding', 'cfMargin', 'cfGap']);
+const availableDesignTokenVariables = new Set([
+  'cfPadding',
+  'cfMargin',
+  'cfGap',
+  'cfWidth',
+  'cfHeight',
+  'cfBackgroundColor',
+]);
 
 // Remove this helper when upgrading to TypeScript 5.0 - https://github.com/microsoft/TypeScript/issues/48829
 const findLast = <T>(
@@ -59,9 +66,15 @@ export const getValueForBreakpoint = (
     // Assume that the values are sorted by media query to apply the cascading CSS logic
     for (let index = activeBreakpointIndex; index >= 0; index--) {
       const breakpointId = breakpoints[index].id;
-      if (availableDesignTokenVariables.has(variableName)) {
-        if (variableName === 'cfMargin' || variableName === 'cfPadding' || variableName === 'cfGap')
-          return getDesignTokenRegistrationForSpacing(valuesByBreakpoint[breakpointId]);
+      if (
+        variableName === 'cfMargin' ||
+        variableName === 'cfPadding' ||
+        variableName === 'cfGap' ||
+        variableName === 'cfWidth' ||
+        variableName === 'cfHeight' ||
+        variableName === 'cfBackgroundColor'
+      ) {
+        return getDesignTokenRegistration(valuesByBreakpoint[breakpointId]);
       }
       if (valuesByBreakpoint[breakpointId]) {
         // If the value is defined, we use it and stop the breakpoints cascade