@contentful/experiences-visual-editor-react 1.6.0 → 1.7.0-dev-20240604T1720-355786e.0

package/dist/index.js

@@ -911,13 +911,31 @@ const optionalBuiltInStyles = {
 };
 
 let designTokensRegistry = {};
+// This function is used to ensure that the composite values are valid since composite values are optional.
+// Therefore only border and in the future text related design tokens are/will be checked in this funciton.
+// Ensuring values for simple key-value design tokens are not neccessary since they are required via typescript.
+const ensureValidCompositeValues = (designTokenDefinition) => {
+    // TODO: add validation logic when text related design tokens are added
+    // Border validation
+    if (designTokenDefinition.border) {
+        for (const borderKey in designTokenDefinition.border) {
+            const borderValue = designTokenDefinition.border[borderKey];
+            designTokenDefinition.border[borderKey] = {
+                width: borderValue.width || '1px',
+                style: borderValue.style || 'solid',
+                color: borderValue.color || '#000000',
+            };
+        }
+    }
+    return designTokenDefinition;
+};
 /**
  * Register design tokens styling
  * @param designTokenDefinition - {[key:string]: Record<string, string>}
  * @returns void
  */
 const defineDesignTokens = (designTokenDefinition) => {
-    Object.assign(designTokensRegistry, designTokenDefinition);
+    Object.assign(designTokensRegistry, ensureValidCompositeValues(designTokenDefinition));
 };
 const templateStringRegex = /\${(.+?)}/g;
 const getDesignTokenRegistration = (breakpointValue, variableName) => {