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

package/src/tokens/mobile/components/datetime/datetime.json

@@ -13,99 +13,179 @@
         "text": {
           "color": {
             "value": "{color.on-surface.@.value}",
-            "type": "color"
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the text color of the cancel button in the datetime picker (the button that dismisses the picker without selecting a date/time). This determines what color the cancel button text appears in.<br>CSS variable: --wm-datetime-cancel-button-text-color"
+            }
           },
           "size": {
             "value": "{body.medium.font-size.value}",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "Controls the size of the cancel button text in the datetime picker. This affects how large the cancel button text appears.<br>CSS variable: --wm-datetime-cancel-button-text-size"
+            }
           },
           "weight": {
             "value": "{body.medium.font-weight.value}",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Controls how thick or bold the cancel button text appears in the datetime picker. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-datetime-cancel-button-text-weight"
+            }
           }
         },
         "background": {
           "value": "transparent",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of the cancel button in the datetime picker. When transparent, only the button text is visible. When filled with a color, the button appears with a solid background.<br>CSS variable: --wm-datetime-cancel-button-background"
+          }
         }
       },
       "selected-button": {
         "background": {
           "value": "{color.primary.@.value}",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of the selected/confirm button in the datetime picker (the button that confirms the selected date/time). This fills the button with a color to visually indicate it's the primary action.<br>CSS variable: --wm-datetime-selected-button-background"
+          }
         },
         "text": {
           "color": {
             "value": "{color.on-primary.@.value}",
-            "type": "color"
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the text color of the selected/confirm button in the datetime picker. This ensures the button text is clearly visible against the colored background.<br>CSS variable: --wm-datetime-selected-button-text-color"
+            }
           },
           "size": {
             "value": "{body.medium.font-size.value}",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "Controls the size of the selected/confirm button text in the datetime picker. This affects how large the button text appears.<br>CSS variable: --wm-datetime-selected-button-text-size"
+            }
           },
           "weight": {
             "value": "{body.medium.font-weight.value}",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Controls how thick or bold the selected/confirm button text appears in the datetime picker. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-datetime-selected-button-text-weight"
+            }
           }
         }
       },
       "background": {
         "value": "{color.surface.container.high.@.value}",
-        "type": "color"
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Sets the background color of the datetime picker (the modal interface where users select dates and times). This is the main background color that appears behind the picker interface.<br>CSS variable: --wm-datetime-background"
+        }
       },
       "button": {
         "border": {
           "width": {
             "value": "{border.width.base.value}",
-            "type": "space"
+            "type": "space",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around datetime picker buttons. This creates the outline that defines each button shape.<br>CSS variable: --wm-datetime-button-border-width"
+            }
           },
           "style": {
             "value": "{border.style.base.value}",
-            "type": "radius"
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the style of the border around datetime picker buttons. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-datetime-button-border-style"
+            }
           },
           "radius": {
             "value": "{radius.pill.value}",
-            "type": "radius"
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of datetime picker buttons. When set to 'pill', the buttons appear with fully rounded corners, creating a pill-shaped appearance.<br>CSS variable: --wm-datetime-button-border-radius"
+            }
           },
           "color": {
             "value": "{color.on-surface.@.value}",
-            "type": "color"
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border around datetime picker buttons. This determines the color of the outline that defines each button shape.<br>CSS variable: --wm-datetime-button-border-color"
+            }
           }
         },
         "ripple": {
           "color": {
             "value": "transparent",
-            "type": "color"
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the ripple effect color that appears when users tap datetime picker buttons. This creates a visual feedback animation to indicate user interaction. When transparent, no ripple effect is visible.<br>CSS variable: --wm-datetime-button-ripple-color"
+            }
           }
         }
       },
       "text": {
         "font-size": {
           "value": "{body.medium.font-size.value}",
-          "type": "font"
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the size of the datetime picker text (the date/time values displayed in the picker). This affects how large the text appears.<br>CSS variable: --wm-datetime-text-font-size"
+          }
         },
         "font-weight": {
           "value": "{body.medium.font-weight.value}",
-          "type": "font"
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold the datetime picker text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-datetime-text-font-weight"
+          }
         },
         "color": {
           "value": "{color.on-surface.@.value}",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of the datetime picker (the date/time values displayed in the picker). This determines what color the text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-datetime-text-color"
+          }
         }
       },
       "selected": {
         "text": {
           "font-size": {
             "value": "{body.medium.font-size.value}",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "Controls the size of the selected datetime picker text (the date/time value that is currently selected). This affects how large the selected text appears.<br>CSS variable: --wm-datetime-selected-text-font-size"
+            }
           },
           "font-weight": {
             "value": "{body.medium.font-weight.value}",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Controls how thick or bold the selected datetime picker text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-datetime-selected-text-font-weight"
+            }
           },
           "color": {
             "value": "{color.on-surface.@.value}",
-            "type": "color"
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the text color of the selected datetime picker value (the date/time that is currently selected). This determines what color the selected text appears in to distinguish it from unselected values.<br>CSS variable: --wm-datetime-selected-text-color"
+            }
           }
         }
       },
@@ -113,16 +193,28 @@
         "font": {
           "size": {
             "value": "20px",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "Controls the size of the datetime picker header text (the title that appears at the top of the picker interface). This affects how large the header text appears.<br>CSS variable: --wm-datetime-header-text-font-size"
+            }
           },
           "weight": {
             "value": "{font.weight.700.value}",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Controls how thick or bold the datetime picker header text appears. When set to 700, the header text appears bold to emphasize the picker title.<br>CSS variable: --wm-datetime-header-text-font-weight"
+            }
           }
         },
         "color": {
           "value": "{color.on-surface.@.value}",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of the datetime picker header (the title that appears at the top of the picker interface). This determines what color the header text appears in.<br>CSS variable: --wm-datetime-header-text-color"
+          }
         }
       }
     },

package/src/tokens/mobile/components/dropdown-menu/dropdown-menu.json

@@ -4,123 +4,258 @@
       "menu": {
         "background": {
           "value": "transparent",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of dropdown menus (lists of options that appear when users click on a button or link). This is the main background color that appears behind the dropdown menu items.<br>CSS variable: --wm-dropdown-menu-background"
+          }
         },
         "padding": {
           "left": {
             "type": "space",
-            "value": "{space.0.value}"
+            "value": "{space.0.value}",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the left padding (horizontal spacing) inside dropdown menu containers. This creates breathing room on the left side of the dropdown menu content. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-padding-left"
+            }
           },
           "right": {
             "type": "space",
-            "value": "{space.0.value}"
+            "value": "{space.0.value}",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the right padding (horizontal spacing) inside dropdown menu containers. This creates breathing room on the right side of the dropdown menu content. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-padding-right"
+            }
           },
           "top": {
             "type": "space",
-            "value": "{space.2.value}"
+            "value": "{space.2.value}",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the top padding (vertical spacing) inside dropdown menu containers. This creates breathing room above the dropdown menu content. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-padding-top"
+            }
           },
           "bottom": {
             "type": "space",
-            "value": "{space.2.value}"
+            "value": "{space.2.value}",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the bottom padding (vertical spacing) inside dropdown menu containers. This creates breathing room below the dropdown menu content. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-padding-bottom"
+            }
           }
         },
         "color": {
           "type": "color",
-          "value": "{color.on-surface.variant.@.value}"
+          "value": "{color.on-surface.variant.@.value}",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of dropdown menu triggers (the button or link that opens the dropdown). This determines what color the trigger text appears in.<br>CSS variable: --wm-dropdown-menu-color"
+          }
         },
         "text": {
           "decoration": {
             "type": "radius",
-            "value": "none"
+            "value": "none",
+            "attributes": {
+              "subtype": "text-decoration",
+              "description": "Controls the text decoration of dropdown menu triggers (underline, overline, line-through, or none). When set to 'none', no decoration is applied to the trigger text.<br>CSS variable: --wm-dropdown-menu-text-decoration"
+            }
           },
           "font-weight": {
             "type": "font",
-            "value": "{font.weight.700.value}"
+            "value": "{font.weight.700.value}",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Controls how thick or bold the dropdown menu trigger text appears. When set to 700, the trigger text appears bold to emphasize the dropdown button.<br>CSS variable: --wm-dropdown-menu-text-font-weight"
+            }
           },
           "padding": {
             "left": {
               "type": "space",
-              "value": "{space.2.value}"
+              "value": "{space.2.value}",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the left padding (horizontal spacing) of dropdown menu trigger text. This creates spacing on the left side of the trigger text. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-text-padding-left"
+              }
             },
             "right": {
               "type": "space",
-              "value": "{space.3.value}"
+              "value": "{space.3.value}",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the right padding (horizontal spacing) of dropdown menu trigger text. This creates spacing on the right side of the trigger text. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-text-padding-right"
+              }
             }
           }
         },
         "content": {
           "width": {
             "value": "220px",
-            "type": "space"
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls how wide dropdown menu content appears (the container that holds the dropdown menu items). This determines the horizontal size of the dropdown menu container.<br>CSS variable: --wm-dropdown-menu-content-width"
+            }
           },
           "border": {
             "radius": {
               "value": "{radius.xs.value}",
-              "type": "radius"
+              "type": "radius",
+              "attributes": {
+                "subtype": "radius",
+                "description": "Controls the corner rounding of dropdown menu content. This makes the dropdown appear with slightly rounded corners for a softer appearance.<br>CSS variable: --wm-dropdown-menu-content-border-radius"
+              }
             }
           },
           "background": {
             "value": "#fff",
-            "type": "color"
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of dropdown menu content (the container that holds the dropdown menu items). This is the main background color that appears behind the menu items.<br>CSS variable: --wm-dropdown-menu-content-background"
+            }
           }
         },
         "caret": {
+          "color": {
+            "value": "{color.on-surface.variant.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of dropdown menu caret icons (the small arrow symbols that indicate dropdown menus). This determines what color the arrow symbols appear in.<br>CSS variable: --wm-dropdown-menu-caret-color"
+            }
+          },
           "size": {
             "value": "{icon.size.sm.value}",
-            "type": "space"
+            "type": "space",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "Controls how large dropdown menu caret icons appear (the small arrow symbols that indicate dropdown menus). This affects the size of the arrow symbols that users see in dropdown buttons.<br>CSS variable: --wm-dropdown-menu-caret-size"
+            }
           }
         },
         "icon": {
           "size": {
             "value": "{icon.size.md.value}",
-            "type": "space"
+            "type": "space",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "Controls how large dropdown menu icons appear (icons that appear alongside menu items). This affects the size of the icons that users see in the dropdown menu.<br>CSS variable: --wm-dropdown-menu-icon-size"
+            }
           }
         },
         "item": {
           "font-family": {
             "value": "{body.large.font-family.value}",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-family",
+              "description": "Sets the typeface (font style) for dropdown menu items (individual options in the dropdown list). This determines whether the menu item text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-dropdown-menu-item-font-family"
+            }
           },
           "font-size": {
             "value": "{body.large.font-size.value}",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "Controls how large the dropdown menu items appear (individual options in the dropdown list). This affects the size of the text that users see in each menu option.<br>CSS variable: --wm-dropdown-menu-item-font-size"
+            }
           },
           "font-weight": {
             "value": "{body.large.font-weight.value}",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Controls how thick or bold the dropdown menu items appear (individual options in the dropdown list). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-dropdown-menu-item-font-weight"
+            }
           },
           "line-height": {
             "value": "{body.large.line-height.value}",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "line-height",
+              "description": "Controls the vertical spacing between lines when dropdown menu item text wraps to multiple lines. This ensures proper spacing for the menu item text displayed in the dropdown.<br>CSS variable: --wm-dropdown-menu-item-line-height"
+            }
           },
           "color": {
             "value": "{color.on-surface.@.value}",
-            "type": "color"
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the text color of dropdown menu items (individual options in the dropdown list). This determines what color the menu item text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-dropdown-menu-item-color"
+            }
           },
           "border": {
             "style": {
               "type": "radius",
-              "value": "{border.style.solid.value}"
+              "value": "{border.style.solid.value}",
+              "attributes": {
+                "subtype": "border-style",
+                "description": "Controls the style of the border around dropdown menu items. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-dropdown-menu-item-border-style"
+              }
             }
           },
           "padding": {
             "bottom": {
               "value": "{space.3.value}",
-              "type": "space"
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the bottom padding (vertical spacing) inside dropdown menu items. This creates breathing room below each menu option. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding-bottom"
+              }
             },
             "left": {
               "value": "{space.4.value}",
-              "type": "space"
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the left padding (horizontal spacing) inside dropdown menu items. This creates breathing room on the left side of each menu option. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding-left"
+              }
             },
             "right": {
               "value": "{space.4.value}",
-              "type": "space"
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the right padding (horizontal spacing) inside dropdown menu items. This creates breathing room on the right side of each menu option. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding-right"
+              }
             },
             "top": {
               "value": "{space.3.value}",
-              "type": "space"
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the top padding (vertical spacing) inside dropdown menu items. This creates breathing room above each menu option. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding-top"
+              }
+            }
+          }
+        },
+        "border":{
+          "radius":{
+            "value": "{radius.none.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of dropdown menus (lists of options that appear when users click on a button or link). When set to 'none', dropdowns have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-dropdown-menu-border-radius"
+            }
+          },
+          "width":{
+            "value": "0",
+            "type": "space",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around dropdown menus. When set to 0, there's no visible border. Higher values create thicker borders around the dropdown.<br>CSS variable: --wm-dropdown-menu-border-width"
+            }
+          },
+          "color":{
+            "value": "{color.on-surface.variant.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border around dropdown menus. This determines the color of the outline that defines the dropdown menu shape.<br>CSS variable: --wm-dropdown-menu-border-color"
             }
           }
+
         }
       }
     }

package/src/tokens/mobile/components/fileupload/fileupload.json

@@ -12,60 +12,108 @@
       "border": {
         "color": {
           "value": "{color.black.@.value}",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the border color of file upload area (the container where users can drag and drop or select files). This determines the color of the outline that defines the file upload area.<br>CSS variable: --wm-fileupload-border-color"
+          }
         },
         "width": {
           "value": "{border.width.base.value}",
-          "type": "space"
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the border width of file upload area. This creates the outline that defines the file upload area shape.<br>CSS variable: --wm-fileupload-border-width"
+          }
         },
         "style": {
           "value": "{border.style.solid.value}",
-          "type": "border"
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Controls the border style of file upload area. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-fileupload-border-style"
+          }
         },
         "radius": {
           "value": "{radius.xxl.value}",
-          "type": "radius"
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the border radius of file upload area. This makes the file upload area appear with rounded corners for a softer appearance.<br>CSS variable: --wm-fileupload-border-radius"
+          }
         }
       },
       "background": {
         "value": "{color.surface.container.low.@.value}",
-        "type": "color"
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Sets the background color of file upload area (the container where users can drag and drop or select files). This is the main background color that appears behind the file upload interface.<br>CSS variable: --wm-fileupload-background"
+        }
       },
       "text": {
         "font": {
           "size": {
             "value": "{body.large.font-size.value}",
-            "type": "text"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "Controls the font size of file upload text (the text that appears in the file upload area, such as 'Choose file' or 'Drag and drop files here'). This affects how large the text appears.<br>CSS variable: --wm-fileupload-text-font-size"
+            }
           },
           "weight": {
             "value": "{font.weight.400.value}",
-            "type": "text"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Controls the font weight of file upload text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-fileupload-text-font-weight"
+            }
           }
         },
         "align": {
           "value": "center",
-          "type": "text"
+          "type": "text",
+          "attributes": {
+            "subtype": "text-align",
+            "description": "Controls the text alignment of file upload text. Acceptable values: left, center, right, justify.<br>CSS variable: --wm-fileupload-text-align"
+          }
         },
         "color": {
           "value": "{color.primary.@.value}",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of file upload area (the text that appears in the file upload interface). This determines what color the text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-fileupload-text-color"
+          }
         }
       },
       "icon": {
         "font": {
           "size": {
             "value": "{body.large.font-size.value}",
-            "type": "text"
+            "type": "font",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "Controls the size of file upload icons (icons that appear in the file upload area, such as upload or file icons). This affects how large the icons appear.<br>CSS variable: --wm-fileupload-icon-font-size"
+            }
           }
         },
         "color": {
           "value": "{color.primary.@.value}",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of file upload icons (icons that appear in the file upload area). This determines what color the icons appear in, typically matching the primary theme color for visual consistency.<br>CSS variable: --wm-fileupload-icon-color"
+          }
         }
       },
       "ripple-color": {
         "value": "transparent",
-        "type": "color"
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Sets the ripple effect color that appears when users interact with the file upload area (tap or click). This creates a visual feedback animation to indicate user interaction. When transparent, no ripple effect is visible.<br>CSS variable: --wm-fileupload-ripple-color"
+        }
       }
     },
     "appearances": {}