@wavemaker/foundation-css 11.14.1-rc.6311 → 11.14.2-1.6423

package/src/tokens/web/components/wizard/wizard.json

@@ -75,7 +75,8 @@
         "value": "{panel.mapping.background.@.value}",
         "type": "color",
         "attributes": {
-          "subtype": "color"
+          "subtype": "color",
+          "description": "Sets the background color of wizard components (multi-step forms that guide users through a process like account setup, checkout, or configuration). This is the main background color that appears behind the entire wizard container.<br>CSS variable: --wm-wizard-background"
         }
       },
       "border": {
@@ -83,28 +84,32 @@
           "value": "{color.transparent.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the color of borders around wizard components (multi-step forms that guide users through a process). 'transparent' removes the border color, or you can specify a specific color value.<br>CSS variable: --wm-wizard-border-color"
           }
         },
         "style": {
           "value": "{border.style.none.value}",
           "type": "radius",
           "attributes": {
-            "subtype": "border-style"
+            "subtype": "border-style",
+            "description": "Sets the visual style of borders around wizard components (multi-step forms). 'none' removes borders completely, 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line.<br>CSS variable: --wm-wizard-border-style"
           }
         },
         "width": {
           "value": "{border.width.0.value}",
           "type": "radius",
           "attributes": {
-            "subtype": "border-width"
+            "subtype": "border-width",
+            "description": "Controls the thickness of borders around wizard components (multi-step forms that guide users through a process). This determines how thick the border lines appear around the wizard container.<br>CSS variable: --wm-wizard-border-width"
           }
         },
         "radius": {
           "value": "{panel.mapping.border.radius.value}",
           "type": "radius",
           "attributes": {
-            "subtype": "radius"
+            "subtype": "radius",
+            "description": "Controls the corner rounding of wizard components (multi-step forms that guide users through a process). This makes the wizard container corners slightly rounded for a softer appearance.<br>CSS variable: --wm-wizard-border-radius"
           }
         }
       },
@@ -112,14 +117,16 @@
         "value": "{panel.mapping.shadow.value}",
         "type": "radius",
         "attributes": {
-          "subtype": "elevation"
+          "subtype": "elevation",
+          "description": "Controls the drop shadow effect around wizard components (multi-step forms that guide users through a process). This creates a subtle shadow that makes the wizard appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-wizard-shadow"
         }
       },
       "padding": {
         "value": "{space.1.value}",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls the internal spacing inside wizard components (the space between the wizard content and its borders). This creates breathing room around the entire wizard container.<br>CSS variable: --wm-wizard-padding"
         }
       },
       "heading": {
@@ -127,7 +134,8 @@
           "value": "{color.surface.bright.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the background color of wizard headings (the top section that contains the step navigation and progress indicators). This creates a distinct background color for the wizard header area.<br>CSS variable: --wm-wizard-heading-background"
           }
         },
         "border": {
@@ -135,28 +143,32 @@
             "value": "{border.width.0.value}",
             "type": "space",
             "attributes": {
-              "subtype": "border-width"
+              "subtype": "border-width",
+              "description": "Controls the thickness of borders around wizard headings (the top section that contains the step navigation). This determines how thick the border lines appear around the wizard header area.<br>CSS variable: --wm-wizard-heading-border-width"
             }
           },
           "style": {
             "value": "{border.style.none.value}",
             "type": "radius",
             "attributes": {
-              "subtype": "border-style"
+              "subtype": "border-style",
+              "description": "Sets the visual style of borders around wizard headings (the top section that contains the step navigation). 'none' removes borders completely, 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line.<br>CSS variable: --wm-wizard-heading-border-style"
             }
           },
           "color": {
             "value": "{color.transparent.value}",
             "type": "color",
             "attributes": {
-              "subtype": "color"
+              "subtype": "color",
+              "description": "Sets the color of borders around wizard headings (the top section that contains the step navigation). 'transparent' removes the border color, or you can specify a specific color value.<br>CSS variable: --wm-wizard-heading-border-color"
             }
           },
           "radius": {
             "value": "{panel.mapping.border.radius.value} {panel.mapping.border.radius.value} {panel.mapping.border.radius.value} {panel.mapping.border.radius.value}",
             "type": "radius",
             "attributes": {
-              "subtype": "radius"
+              "subtype": "radius",
+              "description": "Controls the corner rounding of wizard headings (the top section that contains the step navigation). This makes the wizard header corners slightly rounded for a softer appearance.<br>CSS variable: --wm-wizard-heading-border-radius"
             }
           }
         },
@@ -164,7 +176,8 @@
           "value": "{space.7.value} {space.0.value} {space.7.value}  {space.7.value}",
           "type": "space",
           "attributes": {
-            "subtype": "space"
+            "subtype": "space",
+            "description": "Controls the internal spacing inside wizard headings (the space between the wizard header content and its borders). This creates breathing room around the step navigation and progress indicators.<br>CSS variable: --wm-wizard-heading-padding"
           }
         }
       },
@@ -173,7 +186,8 @@
           "value": "50vh",
           "type": "space",
           "attributes": {
-            "subtype": "space"
+            "subtype": "space",
+            "description": "Controls the minimum height of wizard body content (the main area where users fill out forms and see step content). This ensures the wizard body is always tall enough to display content properly. Acceptable units: px, em, rem, vh.<br>CSS variable: --wm-wizard-body-min-height"
           }
         }
       },
@@ -182,14 +196,16 @@
           "value": "inline-flex",
           "type": "radius",
           "attributes": {
-            "subtype": "radius"
+            "subtype": "radius",
+            "description": "Controls how wizard steps are displayed (individual steps in the wizard navigation like 'Step 1', 'Step 2', 'Step 3'). 'inline-flex' arranges steps in a horizontal line with flexible spacing, 'flex' allows more control over layout, 'block' stacks them vertically.<br>CSS variable: --wm-wizard-step-display"
           }
         },
         "gap": {
           "value": "{space.2.value}",
           "type": "space",
           "attributes": {
-            "subtype": "space"
+            "subtype": "space",
+            "description": "Controls the spacing between wizard step elements (the space between step indicators, titles, and descriptions within each step). This creates visual separation between different parts of each step.<br>CSS variable: --wm-wizard-step-gap"
           }
         },
         "title": {
@@ -197,14 +213,16 @@
             "value": "{color.on-surface.@.value}",
             "type": "color",
             "attributes": {
-              "subtype": "color"
+              "subtype": "color",
+              "description": "Sets the text color of wizard step titles (the main text labels for each step like 'Personal Information', 'Payment Details', 'Confirmation'). This determines what color the step title text appears in.<br>CSS variable: --wm-wizard-step-title-color"
             }
           },
           "background": {
             "value": "{color.transparent.value}",
             "type": "color",
             "attributes": {
-              "subtype": "color"
+              "subtype": "color",
+              "description": "Sets the background color of wizard step titles (the main text labels for each step). 'transparent' removes the background color, or you can specify a specific color value to create a colored background behind the step titles.<br>CSS variable: --wm-wizard-step-title-background"
             }
           },
           "font": {
@@ -212,21 +230,24 @@
               "value": "{label.large.font-family.value}",
               "type": "font",
               "attributes": {
-                "subtype": "font-family"
+                "subtype": "font-family",
+                "description": "Sets the typeface (font style) for wizard step titles (the main text labels for each step like 'Personal Information', 'Payment Details', 'Confirmation'). This determines whether the step title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-title-font-family"
               }
             },
             "weight": {
               "value": "{font.weight.400.value}",
               "type": "font",
               "attributes": {
-                "subtype": "font-weight"
+                "subtype": "font-weight",
+                "description": "Controls how thick or bold wizard step titles appear (the main text labels for each step). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-title-font-weight"
               }
             },
             "size": {
               "value": "{label.large.font-size.value}",
               "type": "font",
               "attributes": {
-                "subtype": "font-size"
+                "subtype": "font-size",
+                "description": "Controls how large wizard step titles appear (the main text labels for each step like 'Personal Information', 'Payment Details', 'Confirmation'). This affects the size of the text that users see for each step.<br>CSS variable: --wm-wizard-step-title-font-size"
               }
             }
           },
@@ -234,14 +255,16 @@
             "value": "{label.large.line-height.value}",
             "type": "font",
             "attributes": {
-              "subtype": "line-height"
+              "subtype": "line-height",
+              "description": "Controls the vertical spacing between lines when wizard step titles wrap to multiple lines. This ensures proper spacing for the step title text displayed in the wizard navigation.<br>CSS variable: --wm-wizard-step-title-line-height"
             }
           },
           "letter-spacing": {
             "value": "{label.large.letter-spacing.value}",
             "type": "font",
             "attributes": {
-              "subtype": "letter-spacing"
+              "subtype": "letter-spacing",
+              "description": "Controls the horizontal spacing between individual characters in wizard step titles (the main text labels for each step). This can help make the step title text more readable and properly spaced.<br>CSS variable: --wm-wizard-step-title-letter-spacing"
             }
           }
         },
@@ -250,7 +273,8 @@
             "value": "{color.on-surface.variant.@.value}",
             "type": "color",
             "attributes": {
-              "subtype": "color"
+              "subtype": "color",
+              "description": "Sets the text color of wizard step descriptions (the smaller text that provides additional details about each step like 'Enter your personal details' or 'Review your information'). This determines what color the step description text appears in.<br>CSS variable: --wm-wizard-step-description-color"
             }
           },
           "font": {
@@ -258,21 +282,24 @@
               "value": "{label.medium.font-family.value}",
               "type": "font",
               "attributes": {
-                "subtype": "font-family"
+                "subtype": "font-family",
+                "description": "Sets the font family of wizard step descriptions.<br>CSS variable: --wm-wizard-step-description-font-family"
               }
             },
             "weight": {
               "value": "{font.weight.500.value}",
               "type": "font",
               "attributes": {
-                "subtype": "font-weight"
+                "subtype": "font-weight",
+                "description": "Controls the font weight of wizard step descriptions. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-wizard-step-description-font-weight"
               }
             },
             "size": {
               "value": "{label.medium.font-size.value}",
               "type": "font",
               "attributes": {
-                "subtype": "font-size"
+                "subtype": "font-size",
+                "description": "Controls the font size of wizard step descriptions.<br>CSS variable: --wm-wizard-step-description-font-size"
               }
             }
           },
@@ -280,14 +307,16 @@
             "value": "{label.medium.line-height.value}",
             "type": "font",
             "attributes": {
-              "subtype": "line-height"
+              "subtype": "line-height",
+              "description": "Controls the line height of wizard step descriptions.<br>CSS variable: --wm-wizard-step-description-line-height"
             }
           },
           "letter-spacing": {
             "value": "{label.medium.letter-spacing.value}",
             "type": "font",
             "attributes": {
-              "subtype": "letter-spacing"
+              "subtype": "letter-spacing",
+              "description": "Controls spacing between characters in wizard step descriptions.<br>CSS variable: --wm-wizard-step-description-letter-spacing"
             }
           }
         },
@@ -296,14 +325,16 @@
             "value": "33px",
             "type": "space",
             "attributes": {
-              "subtype": "space"
+              "subtype": "space",
+              "description": "Controls how large wizard step indicators appear (the circular or numbered indicators that show progress like '1', '2', '3' or checkmark icons). This affects the size of the progress indicators that users see for each step. Acceptable units: px, em, rem.<br>CSS variable: --wm-wizard-step-indicator-size"
             }
           },
           "background": {
             "value": "{color.transparent.value}",
             "type": "color",
             "attributes": {
-              "subtype": "color"
+              "subtype": "color",
+              "description": "Sets the background color of wizard step indicators (the circular or numbered indicators that show progress). 'transparent' removes the background color, or you can specify a specific color value to create a colored background behind the indicators.<br>CSS variable: --wm-wizard-step-indicator-background"
             }
           },
           "border": {
@@ -311,28 +342,32 @@
               "value": "{border.width.2.value}",
               "type": "space",
               "attributes": {
-                "subtype": "border-width"
+                "subtype": "border-width",
+                "description": "Controls the thickness of borders around wizard step indicators (the circular or numbered indicators that show progress). This determines how thick the border lines appear around the step indicators.<br>CSS variable: --wm-wizard-step-indicator-border-width"
               }
             },
             "style": {
               "value": "{border.style.base.value}",
               "type": "radius",
               "attributes": {
-                "subtype": "border-style"
+                "subtype": "border-style",
+                "description": "Sets the visual style of borders around wizard step indicators (the circular or numbered indicators that show progress). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, 'none' removes borders completely.<br>CSS variable: --wm-wizard-step-indicator-border-style"
               }
             },
             "color": {
               "value": "{color.outline.@.value}",
               "type": "color",
               "attributes": {
-                "subtype": "color"
+                "subtype": "color",
+                "description": "Sets the color of borders around wizard step indicators (the circular or numbered indicators that show progress). This determines what color the border lines appear in that outline the step indicators.<br>CSS variable: --wm-wizard-step-indicator-border-color"
               }
             },
             "radius": {
               "value": "{radius.circle.value}",
               "type": "radius",
               "attributes": {
-                "subtype": "radius"
+                "subtype": "radius",
+                "description": "Controls the corner rounding of wizard step indicators (the circular or numbered indicators that show progress). This makes the step indicators perfectly circular for a clean, modern appearance.<br>CSS variable: --wm-wizard-step-indicator-border-radius"
               }
             }
           }
@@ -342,7 +377,8 @@
             "value": "{wizard.mapping.step.title.color}",
             "type": "color",
             "attributes": {
-              "subtype": "color"
+              "subtype": "color",
+              "description": "Sets the text color of wizard step count numbers (the numbers that appear inside step indicators like '1', '2', '3'). This determines what color the step numbers appear in.<br>CSS variable: --wm-wizard-step-count-color"
             }
           },
           "font": {
@@ -350,21 +386,24 @@
               "value": "{wizard.mapping.step.title.font.family.value}",
               "type": "font",
               "attributes": {
-                "subtype": "font-family"
+                "subtype": "font-family",
+                "description": "Sets the font family of wizard step count numbers.<br>CSS variable: --wm-wizard-step-count-font-family"
               }
             },
             "size": {
               "value": "{wizard.mapping.step.title.font.size.value}",
               "type": "font",
               "attributes": {
-                "subtype": "font-size"
+                "subtype": "font-size",
+                "description": "Controls the font size of wizard step count numbers.<br>CSS variable: --wm-wizard-step-count-font-size"
               }
             },
             "weight": {
               "value": "{wizard.mapping.step.title.font.weight.value}",
               "type": "font",
               "attributes": {
-                "subtype": "font-weight"
+                "subtype": "font-weight",
+                "description": "Controls the font weight of wizard step count numbers. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-wizard-step-count-font-weight"
               }
             }
           },
@@ -372,7 +411,8 @@
             "value": "{wizard.mapping.step.title.line-height.value}",
             "type": "font",
             "attributes": {
-              "subtype": "line-height"
+              "subtype": "line-height",
+              "description": "Controls the line height of wizard step count numbers.<br>CSS variable: --wm-wizard-step-count-line-height"
             }
           }
         },
@@ -382,21 +422,24 @@
               "value": "{wizard.mapping.step.title.font.family.value}",
               "type": "font",
               "attributes": {
-                "subtype": "font-family"
+                "subtype": "font-family",
+                "description": "Sets the typeface (font style) for wizard step icons (the small symbols that appear in step indicators like checkmarks, arrows, or other progress symbols). This determines whether the icons appear in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-icon-font-family"
               }
             },
             "size": {
               "value": "{wizard.mapping.step.title.font.size.value}",
               "type": "font",
               "attributes": {
-                "subtype": "font-size"
+                "subtype": "font-size",
+                "description": "Controls how large wizard step icons appear (the small symbols that appear in step indicators like checkmarks, arrows, or other progress symbols). This affects the size of the icons that users see in the step indicators.<br>CSS variable: --wm-wizard-step-icon-font-size"
               }
             },
             "weight": {
               "value": "{wizard.mapping.step.title.font.weight.value}",
               "type": "font",
               "attributes": {
-                "subtype": "font-weight"
+                "subtype": "font-weight",
+                "description": "Controls how thick or bold wizard step icons appear (the small symbols that appear in step indicators). 'normal' makes them regular weight, 'bold' makes them thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-icon-font-weight"
               }
             }
           },
@@ -404,21 +447,24 @@
             "value": "{wizard.mapping.step.title.line-height.value}",
             "type": "font",
             "attributes": {
-              "subtype": "line-height"
+              "subtype": "line-height",
+              "description": "Controls the vertical spacing between lines when wizard step icons wrap to multiple lines. This ensures proper spacing for the icons displayed in the step indicators.<br>CSS variable: --wm-wizard-step-icon-line-height"
             }
           },
           "color": {
             "value": "{wizard.mapping.step.count.color.value}",
             "type": "color",
             "attributes": {
-              "subtype": "color"
+              "subtype": "color",
+              "description": "Sets the color of wizard step icons (the small symbols that appear in step indicators like checkmarks, arrows, or other progress symbols). This determines what color the icons appear in.<br>CSS variable: --wm-wizard-step-icon-color"
             }
           },
           "size": {
             "value": "{icon.size.sm.value}",
             "type": "space",
             "attributes": {
-              "subtype": "icon-size"
+              "subtype": "icon-size",
+              "description": "Controls how large wizard step icons appear (the small symbols that appear in step indicators like checkmarks, arrows, or other progress symbols). This affects the size of the icons that users see in the step indicators.<br>CSS variable: --wm-wizard-step-icon-size"
             }
           }
         },
@@ -427,28 +473,32 @@
             "value": "100%",
             "type": "space",
             "attributes": {
-              "subtype": "space"
+              "subtype": "space",
+              "description": "Controls how tall wizard step connectors appear (the lines that connect step indicators to show the progression flow). This determines the vertical size of the connecting lines between steps. Acceptable units: px, em, rem, %.<br>CSS variable: --wm-wizard-step-connector-height"
             }
           },
           "width": {
             "value": "1px",
             "type": "space",
             "attributes": {
-              "subtype": "space"
+              "subtype": "space",
+              "description": "Controls how wide wizard step connectors appear (the lines that connect step indicators to show the progression flow). This determines the horizontal thickness of the connecting lines between steps. Acceptable units: px, em, rem.<br>CSS variable: --wm-wizard-step-connector-width"
             }
           },
           "style": {
             "value": "{border.style.solid.value}",
             "type": "radius",
             "attributes": {
-              "subtype": "border-style"
+              "subtype": "border-style",
+              "description": "Sets the visual style of wizard step connectors (the lines that connect step indicators to show the progression flow). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, 'none' removes the connectors completely.<br>CSS variable: --wm-wizard-step-connector-style"
             }
           },
           "color": {
             "value": "{color.outline.variant.value}",
             "type": "color",
             "attributes": {
-              "subtype": "color"
+              "subtype": "color",
+              "description": "Sets the color of wizard step connectors (the lines that connect step indicators to show the progression flow). This determines what color the connecting lines appear in between the step indicators.<br>CSS variable: --wm-wizard-step-connector-color"
             }
           }
         }
@@ -816,4 +866,4 @@
       }
     }
   }
-}
+}

package/src/utils/style-dictionary-utils.d.ts

@@ -1,4 +1,4 @@
-export function cssVarCalcMixFormatter(usesReferences: any, getReferences: any): {
+export function cssVarCalcMixFormatter(usesReferences: any, getReferences: any, fs: any): {
     name: string;
     format: ({ dictionary, options }: {
         dictionary: any;

package/src/utils/style-dictionary-utils.js

@@ -46,19 +46,38 @@ function resolveAndReplaceReferences(attribute, unfilteredTokens, usesReferences
     }
     return attribute;
 }
-const cssVarCalcMixFormatter = (usesReferences, getReferences) => ({
+const cssVarCalcMixFormatter = (usesReferences, getReferences, fs) => ({
     name: 'wm-calc-colormix-format',
     format: function ({ dictionary, options }) {
-        const { selector } = options;
+        const { selector, tokenReadmePath } = options;
+        // Prepare Markdown table only if enabled
+        const tableRows = ['| Token | Description |', '|-------|------------|'];
         // Generate CSS variable definitions
         const variables = dictionary.allTokens
             .map((token) => {
+            var _a, _b;
             // Remove `mapping` from token.name
             const cleanName = token.name.replace(/mapping-?/g, '');
             let value = getProcessedTokenValue(token, dictionary, usesReferences, getReferences);
+            // Add to table if token has a description and table generation is enabled
+            if (tokenReadmePath && ((_a = token === null || token === void 0 ? void 0 : token.attributes) === null || _a === void 0 ? void 0 : _a.description)) {
+                const pathName = token.path
+                    .slice(1) // ignore first key (btn, data-table etc.,)
+                    .filter(key => key !== 'mapping') // remove 'mapping'
+                    .join('.');
+                // Keep full description but handle <br> tags properly for table
+                let safeDescription = (_b = token === null || token === void 0 ? void 0 : token.attributes) === null || _b === void 0 ? void 0 : _b.description.replace(/\|/g, '\\|').replace(/<br\s*\/?>/gi, '<br>').trim();
+                tableRows.push(`| ${pathName} | ${safeDescription} |`);
+            }
             return `--${cleanName}: ${value};`;
         })
             .join(`\n`);
+        // Write the table if tokens has description
+        if (tokenReadmePath && tableRows.length > 2 && fs) {
+            tableRows.unshift(`<!-- AUTO-GENERATED FILE. Do not edit manually. -->`, ``, `# Token Reference Table`, ``, `This table lists all tokens for this component:`, ``);
+            fs.writeFileSync(tokenReadmePath, tableRows.join('\n'), 'utf8');
+            console.log(`Token description table generated: ${tokenReadmePath}`);
+        }
         // Return correctly formatted output based on selector
         return selector && selector.trim()
             ? `${selector} {\n${variables}\n}\n` // Wrap in selector
@@ -275,7 +294,29 @@ const generateCssBlockFromGroup = (group, dictionary, usesReferences, getReferen
         return `  ${cssVarName}: ${value};`;
     })
         .join('\n');
-    return `${selector} {\n${cssProps}\n}`;
+    if (platform === 'web') {
+        return `${selector} {\n${cssProps}\n}`;
+    }
+    else {
+        const selectors = selector.split(',').map(s => s.trim()).filter(Boolean);
+        //if there are multiple selectors extract custom variant from the first selector and apply it to subsequent selectors
+        if (selectors.length > 1) {
+            const firstSelector = selectors[0];
+            const hasCustomAppearance = /^\.[\w-]+\./.test(firstSelector);
+            if (hasCustomAppearance) {
+                // Extract base selector (e.g., ".btn-success" from ".btn-success.app-button-disabled")
+                const baseMatch = firstSelector.match(/^(\.[\w-]+)\./);
+                const baseSelector = baseMatch ? baseMatch[1] : '';
+                // Apply base selector to all subsequent selectors
+                selectors.forEach((selector, i) => {
+                    if (baseSelector && !selector.startsWith(baseSelector)) {
+                        selectors[i] = `${baseSelector}${selector}`;
+                    }
+                });
+            }
+        }
+        return `${selectors.join(',\n')} {\n${cssProps}\n}`;
+    }
 };
 /**
  * Derives a clean CSS variable suffix from the token path.