@wavemaker/foundation-css 11.15.1-rc.6451 → 11.15.2-rc.249

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

@@ -8,6 +8,14 @@
             }
         },
         "mapping": {
+            "width": {
+                "value": "100%",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the width of the bottom sheet. This determines how wide the bottom sheet appears on the screen. Acceptable units: px, %.<br>CSS variable: --wm-bottomsheet-width"
+                }
+            },
             "backdrop": {
                 "background": {
                     "value": "rgba(0,0,0,0.1)",
@@ -36,37 +44,11 @@
                     }
                 },
                 "width":{
-                    "top": {
-                        "value": "{border.width.0.value}",
-                        "type": "border",
-                        "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-top"
-                        }
-                    },
-                    "bottom": {
-                        "value": "{border.width.0.value}",
-                        "type": "border",
-                        "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-bottom"
-                        }
-                    },
-                    "left": {
-                        "value": "{border.width.0.value}",
-                        "type": "border",
-                        "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-left"
-                        }
-                    },
-                    "right": {
-                        "value": "{border.width.0.value}",
-                        "type": "border",
-                        "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-right"
-                        }
+                    "value": "{border.width.0.value}",
+                    "type": "border",
+                    "attributes": {
+                        "subtype": "border-width",
+                        "description": "Controls the border width (all sides) of the bottom sheet component. This determines how thick the border around the bottom sheet appears. Acceptable units: px.<br>CSS variable: --wm-bottomsheet-border-width"
                     }
                 },
                 "color":{
@@ -87,21 +69,11 @@
                 }
             },
             "margin":{
-                "left":{
-                    "value": "{space.0.value}",
-                    "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",
-                    "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"
-                    }
+                "value": "{space.0.value} {space.0.value}",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the margin (top/bottom, left/right) of the bottom sheet component. This creates spacing around the bottom sheet. Acceptable units: px.<br>CSS variable: --wm-bottomsheet-margin"
                 }
             },
             "handle":{
@@ -140,21 +112,11 @@
                     }
                 },
                 "padding":{
-                    "top":{
-                        "value": "{space.4.value}",
-                        "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",
-                        "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"
-                        }
+                    "value": "{space.4.value} {space.0.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the padding (top/bottom, left/right) of the bottom sheet drag handle. This creates spacing around the drag handle area. Acceptable units: px.<br>CSS variable: --wm-bottomsheet-handle-padding"
                     }
                 },
                 "border":{
@@ -178,37 +140,11 @@
             },
             "content": {
                 "padding": {
-                    "top": {
-                        "value": "{space.0.value}",
-                        "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",
-                        "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",
-                        "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",
-                        "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"
-                        }
+                    "value": "{space.0.value} {space.5.value} {space.5.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the padding (top, left/right, bottom) of the bottom sheet content area. This creates spacing around the content. Acceptable units: px.<br>CSS variable: --wm-bottomsheet-content-padding"
                     }
                 }
             }

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

@@ -40,31 +40,6 @@
           "description": "Controls the mouse cursor appearance when hovering over buttons. 'pointer' shows a hand cursor indicating the button is clickable, 'default' shows an arrow cursor, and 'not-allowed' shows a blocked cursor for disabled buttons. This provides visual feedback to users about button interactivity.<br>CSS variable: --wm-btn-cursor"
         }
       },
-      "position": {
-        "@": {
-          "value": "relative",
-          "type": "space",
-          "attributes": {
-            "description": "Controls the positioning method for buttons. 'relative' positions the button relative to its normal position, 'absolute' positions it relative to its nearest positioned ancestor, 'fixed' positions it relative to the viewport, and 'static' uses the default flow.<br>CSS variable: --wm-btn-position"
-          }
-        },
-        "bottom": {
-          "value": "none",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the distance from the bottom edge when buttons are positioned absolutely or fixed. This determines how far from the bottom the button appears. Acceptable values: px, %.<br>CSS variable: --wm-btn-position-bottom"
-          }
-        },
-        "right": {
-          "value": "none",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the distance from the right edge when buttons are positioned absolutely or fixed. This determines how far from the right the button appears. Acceptable values: px, %.<br>CSS variable: --wm-btn-position-right"
-          }
-        }
-      },
       "opacity": {
         "value": "1",
         "type": "radius",
@@ -156,38 +131,12 @@
         }
       },
       "padding": {
-        "top": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Sets internal top spacing between content and border.<br>CSS variable: --wm-btn-padding-top"
-          }
-        },
-        "bottom": {
-          "value": "{space.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Sets internal bottom spacing between content and border.<br>CSS variable: --wm-btn-padding-bottom"
-          }
-        },
-        "left": {
-          "value": "{space.6.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Sets internal left spacing between content and border.<br>CSS variable: --wm-btn-padding-left"
-          }
-        },
-        "right": {
-          "value": "{space.6.value}",
+          "value": "{space.0.value} {space.6.value}",
           "type": "space",
           "attributes": {
             "subtype": "space",
-            "description": "Sets internal right spacing between content and border.<br>CSS variable: --wm-btn-padding-right"
+            "description": "Sets internal spacing between content and border (top/bottom, left/right).<br>CSS variable: --wm-btn-padding"
           }
-        }
       },
       "min-width": {
         "value": "auto",
@@ -221,12 +170,22 @@
           "description": "Controls the drop shadow effect.<br>CSS variable: --wm-btn-shadow"
         }
       },
-      "icon-size": {
-        "value": "{icon.size.md.value}",
-        "type": "space",
-        "attributes": {
-          "subtype": "icon-size",
-          "description": "Controls the size of icons.<br>CSS variable: --wm-btn-icon-size"
+      "icon": {
+        "size": {
+          "value": "{icon.size.md.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "icon-size",
+            "description": "Controls the size of icons.<br>CSS variable: --wm-btn-icon-size"
+          }
+        },
+        "color": {
+          "value": "{color.on-surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the icon color of buttons (clickable elements that users interact with to perform actions). This determines what color the button icon appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-btn-icon-color"
+          }
         }
       },
       "ripple": {
@@ -579,22 +538,8 @@
             }
           },
           "padding": {
-            "top": {
-              "value": "{space.2.value}",
-              "type": "space"
-            },
-            "bottom": {
-              "value": "{space.2.value}",
-              "type": "space"
-            },
-            "left": {
-              "value": "{space.3.value}",
-              "type": "space"
-            },
-            "right": {
-              "value": "{space.3.value}",
-              "type": "space"
-            }
+            "value": "{space.2.value} {space.3.value}",
+            "type": "space"
           }
         },
         "variantGroups": {
@@ -669,22 +614,8 @@
             }
           },
           "padding": {
-            "top": {
-              "value": "{space.2.value}",
-              "type": "space"
-            },
-            "bottom": {
-              "value": "{space.2.value}",
-              "type": "space"
-            },
-            "left": {
-              "value": "{space.3.value}",
-              "type": "space"
-            },
-            "right": {
-              "value": "{space.3.value}",
-              "type": "space"
-            }
+            "value": "{space.2.value} {space.3.value}",
+            "type": "space"
           }
         },
         "variantGroups": {
@@ -757,22 +688,8 @@
             "type": "space"
           },
           "padding": {
-            "top": {
-              "value": "{space.0.value}",
-              "type": "space"
-            },
-            "bottom": {
-              "value": "{space.0.value}",
-              "type": "space"
-            },
-            "left": {
-              "value": "{space.0.value}",
-              "type": "space"
-            },
-            "right": {
-              "value": "{space.0.value}",
-              "type": "space"
-            }
+            "value": "{space.0.value}",
+            "type": "space"
           },
           "icon-size": {
             "value": "{icon.size.md.value}",
@@ -792,20 +709,6 @@
       },
       "fab": {
         "mapping": {
-          "position": {
-            "@": {
-              "value": "absolute",
-              "type": "space"
-            },
-            "bottom": {
-              "value": "10px",
-              "type": "space"
-            },
-            "right": {
-              "value": "10px",
-              "type": "space"
-            }
-          },
           "height": {
             "value": "56px",
             "type": "space"