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

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

@@ -11,87 +11,155 @@
             "min": {
                 "height": {
                     "value": "30px",
-                    "type": "space"
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the minimum height of the barcode scanner component. This determines the minimum vertical space the component occupies.<br>CSS variable: --wm-barcodescanner-min-height"
+                    }
                 },
                 "width": {
                     "value": "{space.10.value}",
-                    "type": "space"
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the minimum width of the barcode scanner component. This determines the minimum horizontal space the component occupies.<br>CSS variable: --wm-barcodescanner-min-width"
+                    }
                 }
             },
             "text": {
                 "color": {
                     "value": "{color.scrim.@.value}",
-                    "type": "color"
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the text color of the barcode scanner component. This determines what color the text appears in.<br>CSS variable: --wm-barcodescanner-text-color"
+                    }
                 },
                 "font": {
                     "size": {
                         "value": "{body.medium.font-size.value}",
-                        "type": "space"
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-size",
+                            "description": "Controls the size of the text in the barcode scanner component. This affects how large the text appears.<br>CSS variable: --wm-barcodescanner-text-font-size"
+                        }
                     }
                 },
                 "padding": {
                     "left": {
                         "value": "{space.0.value}",
-                        "type": "space"
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Sets the left padding of the text in the barcode scanner component. This creates spacing to the left of the text.<br>CSS variable: --wm-barcodescanner-text-padding-left"
+                        }
                     }
                 }
             },
             "icon": {
                 "color": {
                     "value": "{color.scrim.@.value}",
-                    "type": "color"
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the color of the icon in the barcode scanner component. This determines what color the icon appears in.<br>CSS variable: --wm-barcodescanner-icon-color"
+                    }
                 },
                 "font": {
                     "size": {
                         "value": "{space.5.value}",
-                        "type": "space"
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "icon-size",
+                            "description": "Controls the size of the icon in the barcode scanner component. This affects how large the icon appears.<br>CSS variable: --wm-barcodescanner-icon-font-size"
+                        }
                     }
                 }
             },
             "background": {
                 "value": "{color.primary.@.value}",
-                "type": "color"
+                "type": "color",
+                "attributes": {
+                    "subtype": "color",
+                    "description": "Sets the background color of the barcode scanner component. This is the main background color that appears behind all content.<br>CSS variable: --wm-barcodescanner-background"
+                }
             },
             "padding": {
                 "top": {
                     "value": "10px",
-                    "type": "space"
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Sets the top padding of the barcode scanner component. This creates spacing at the top of the component.<br>CSS variable: --wm-barcodescanner-padding-top"
+                    }
                 },
                 "left": {
                     "value": "{space.2.value}",
-                    "type": "space"
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Sets the left padding of the barcode scanner component. This creates spacing on the left side of the component.<br>CSS variable: --wm-barcodescanner-padding-left"
+                    }
                 },
                 "bottom": {
                     "value": "{space.2.value}",
-                    "type": "space"
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Sets the bottom padding of the barcode scanner component. This creates spacing at the bottom of the component.<br>CSS variable: --wm-barcodescanner-padding-bottom"
+                    }
                 },
                 "right": {
                     "value": "{space.2.value}",
-                    "type": "space"
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Sets the right padding of the barcode scanner component. This creates spacing on the right side of the component.<br>CSS variable: --wm-barcodescanner-padding-right"
+                    }
                 }
             },
             "border": {
                 "width": {
                     "value": "{border.width.base.value}",
-                    "type": "border"
+                    "type": "border",
+                    "attributes": {
+                        "subtype": "border-width",
+                        "description": "Controls the border thickness of the barcode scanner component. This determines how thick the border around the component appears.<br>CSS variable: --wm-barcodescanner-border-width"
+                    }
                 },
                 "style": {
                     "value": "{border.style.solid.value}",
-                    "type": "border"
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "border-style",
+                        "description": "Sets the border style of the barcode scanner component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-barcodescanner-border-style"
+                    }
                 },
                 "color": {
                     "value": "{color.scrim.@.value}",
-                    "type": "color"
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the border color of the barcode scanner component. This determines what color the border around the component appears in.<br>CSS variable: --wm-barcodescanner-border-color"
+                    }
                 },
                 "radius": {
                     "value": "{space.5.value}",
-                    "type": "space"
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "radius",
+                        "description": "Controls the border radius for rounded corners of the barcode scanner component. This makes the component appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-barcodescanner-border-radius"
+                    }
                 }
             },
             "ripple": {
                 "color": {
                     "value": "transparent",
-                    "type": "color"
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the ripple effect color for the barcode scanner component. This determines what color appears when the component is interacted with.<br>CSS variable: --wm-barcodescanner-ripple-color"
+                    }
                 }
             }
         },

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

@@ -11,74 +11,134 @@
             "backdrop": {
                 "background": {
                     "value": "rgba(0,0,0,0.1)",
-                    "type": "color"
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the background color of the bottom sheet backdrop. This is the semi-transparent overlay that appears behind the bottom sheet when it is open.<br>CSS variable: --wm-bottomsheet-backdrop-background"
+                    }
                 }
             },
             "background": {
                 "value": "{color.surface.bright.@.value}",
-                "type": "color"
+                "type": "color",
+                "attributes": {
+                    "subtype": "color",
+                    "description": "Sets the background color of the bottom sheet component. This is the main background color that appears behind all bottom sheet content.<br>CSS variable: --wm-bottomsheet-background"
+                }
             },
             "border": {
                 "radius":{
                     "value": "{radius.lg.value}",
-                    "type": "radius"
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "radius",
+                        "description": "Controls the border radius for rounded corners of the bottom sheet component. This makes the bottom sheet appear with rounded corners at the top.<br>CSS variable: --wm-bottomsheet-border-radius"
+                    }
                 },
                 "width":{
                     "value": "1",
-                    "type": "radius"
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "border-width",
+                        "description": "Controls the border thickness of the bottom sheet component. This determines how thick the border around the bottom sheet appears.<br>CSS variable: --wm-bottomsheet-border-width"
+                    }
                 },
                 "color":{
                     "value": "transparent",
-                    "type": "color"
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the border color of the bottom sheet component. This determines what color the border around the bottom sheet appears in.<br>CSS variable: --wm-bottomsheet-border-color"
+                    }
                 }
             },
             "margin":{
                 "left":{
                     "value": "{space.0.value}",
-                    "type": "space"
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the left margin of the bottom sheet component. This creates spacing on the left side of the bottom sheet.<br>CSS variable: --wm-bottomsheet-margin-left"
+                    }
                 },
                 "right":{
                     "value": "{space.0.value}",
-                    "type": "space"
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the right margin of the bottom sheet component. This creates spacing on the right side of the bottom sheet.<br>CSS variable: --wm-bottomsheet-margin-right"
+                    }
                 }
             },
             "handle":{
                 "background":{
                     "value": "{color.surface.bright.@.value}",
-                    "type": "color"
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the background color of the bottom sheet drag handle. This is the background color that appears behind the drag handle area.<br>CSS variable: --wm-bottomsheet-handle-background"
+                    }
                 },
                 "icon": {
                     "width": {
                         "value": "{space.9.value}",
-                        "type": "space"
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Controls the width of the drag handle icon in the bottom sheet. This determines how wide the drag handle icon appears.<br>CSS variable: --wm-bottomsheet-handle-icon-width"
+                        }
                     },
                     "height": {
                         "value": "{space.1.value}",
-                        "type": "space"
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Controls the height of the drag handle icon in the bottom sheet. This determines how tall the drag handle icon appears.<br>CSS variable: --wm-bottomsheet-handle-icon-height"
+                        }
                     },
                     "background": {
                         "value": "{color.outline.@.value}",
-                        "type": "color"
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the background color of the drag handle icon in the bottom sheet. This determines what color the drag handle icon appears in.<br>CSS variable: --wm-bottomsheet-handle-icon-background"
+                        }
                     }
                 },
                 "padding":{
                     "top":{
                         "value": "{space.4.value}",
-                        "type": "space"
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Sets the top padding of the bottom sheet drag handle. This creates spacing at the top of the drag handle area.<br>CSS variable: --wm-bottomsheet-handle-padding-top"
+                        }
                     },
                     "bottom":{
                         "value": "{space.4.value}",
-                        "type": "space"
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Sets the bottom padding of the bottom sheet drag handle. This creates spacing at the bottom of the drag handle area.<br>CSS variable: --wm-bottomsheet-handle-padding-bottom"
+                        }
                     }
                 },
                 "border":{
                     "width":{
                         "value": "1",
-                        "type": "radius"
+                        "type": "radius",
+                        "attributes": {
+                            "subtype": "border-width",
+                            "description": "Controls the border thickness of the bottom sheet drag handle. This determines how thick the border around the drag handle appears.<br>CSS variable: --wm-bottomsheet-handle-border-width"
+                        }
                     },
                     "color":{
                         "value": "transparent",
-                        "type": "color"
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the border color of the bottom sheet drag handle. This determines what color the border around the drag handle appears in.<br>CSS variable: --wm-bottomsheet-handle-border-color"
+                        }
                     }
                 }
             },
@@ -86,19 +146,35 @@
                 "padding": {
                     "top": {
                         "value": "{space.0.value}",
-                        "type": "space"
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Sets the top padding of the bottom sheet content area. This creates spacing at the top of the content.<br>CSS variable: --wm-bottomsheet-content-padding-top"
+                        }
                     },
                     "bottom": {
                         "value": "{space.5.value}",
-                        "type": "space"
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Sets the bottom padding of the bottom sheet content area. This creates spacing at the bottom of the content.<br>CSS variable: --wm-bottomsheet-content-padding-bottom"
+                        }
                     },
                     "left": {
                         "value": "{space.5.value}",
-                        "type": "space"
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Sets the left padding of the bottom sheet content area. This creates spacing on the left side of the content.<br>CSS variable: --wm-bottomsheet-content-padding-left"
+                        }
                     },
                     "right": {
                         "value": "{space.5.value}",
-                        "type": "space"
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Sets the right padding of the bottom sheet content area. This creates spacing on the right side of the content.<br>CSS variable: --wm-bottomsheet-content-padding-right"
+                        }
                     }
                 }
             }