@wavemaker/foundation-css 12.0.0-next.25480 → 12.0.0-next.28533

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

@@ -29,18 +29,44 @@
       "border": {
         "style": {
           "value": "{border.style.base.value}",
-          "type": "radius",
+          "type": "border",
             "attributes": {
                 "subtype": "border-style",
                 "description": "Controls the style of the outline around container elements (boxes that hold content). 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots. The default container border styles will not change in Studio. They are dotted for user-experience reasons, so we are not going to modify them. The changes can be seen in the preview. For the outlined and elevated styles, the changes are visible both in Studio and in the preview.<br>CSS variable: --wm-container-border-style"
             }
         },
         "width": {
-          "value": "{border.width.0.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "border-width",
-            "description": "Controls the thickness of the border around container elements. When set to 0, there's no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-width"
+          "top": {
+            "value": "{border.width.0.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the top border around container elements. When set to 0, there's no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-top-width"
+            }
+          },
+          "bottom": {
+            "value": "{border.width.0.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the bottom border around container elements. When set to 0, there's no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-bottom-width"
+            }
+          },
+          "left": {
+            "value": "{border.width.0.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the left border around container elements. When set to 0, there's no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-left-width"
+            }
+          },
+          "right": {
+            "value": "{border.width.0.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the right border around container elements. When set to 0, there's no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-right-width"
+            }
           }
         },
         "color": {
@@ -130,8 +156,22 @@
               "type": "border"
             },
             "width": {
-              "value": "{border.width.0.value}",
-              "type": "space"
+              "top": {
+                "value": "{border.width.0.value}",
+                "type": "border"
+              },
+              "bottom": {
+                "value": "{border.width.0.value}",
+                "type": "border"
+              },
+              "left": {
+                "value": "{border.width.0.value}",
+                "type": "border"
+              },
+              "right": {
+                "value": "{border.width.0.value}",
+                "type": "border"
+              }
             },
             "color": {
               "value": "transparent",
@@ -141,6 +181,28 @@
               "value": "{radius.none.value}",
               "type": "radius"
             }
+          },
+          "box-shadow": {
+            "value": "{elevation.shadow.none.value}",
+            "type": "radius"
+          },
+          "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"
+            }
           }
         }
       },
@@ -152,8 +214,22 @@
               "type": "border"
             },
             "width": {
-              "value": "{border.width.base.value}",
-              "type": "border"
+              "top": {
+                "value": "{border.width.base.value}",
+                "type": "border"
+              },
+              "bottom": {
+                "value": "{border.width.base.value}",
+                "type": "border"
+              },
+              "left": {
+                "value": "{border.width.base.value}",
+                "type": "border"
+              },
+              "right": {
+                "value": "{border.width.base.value}",
+                "type": "border"
+              }
             },
             "color": {
               "value": "{color.outline.variant.value}",
@@ -163,6 +239,28 @@
               "value": "1px",
               "type": "radius"
             }
+          },
+          "box-shadow": {
+            "value": "{elevation.shadow.none.value}",
+            "type": "radius"
+          },
+          "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"
+            }
           }
         }
       },
@@ -182,13 +280,45 @@
               "type": "color"
             },
             "width": {
-              "value": "{border.width.base.value}",
-              "type": "border"
+              "top": {
+                "value": "{border.width.base.value}",
+                "type": "border"
+              },
+              "bottom": {
+                "value": "{border.width.base.value}",
+                "type": "border"
+              },
+              "left": {
+                "value": "{border.width.base.value}",
+                "type": "border"
+              },
+              "right": {
+                "value": "{border.width.base.value}",
+                "type": "border"
+              }
             },
             "radius": {
               "value": "{radius.sm.value}",
               "type": "radius"
             }
+          },
+          "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"
+            }
           }
         }
       }

package/src/tokens/mobile/components/form-controls/form-controls.json

@@ -22,7 +22,7 @@
         },
         "mapping": {
             "opacity": {
-                "value": "1px",
+                "value": "{border.width.1.value}",
                 "type": "radius",
                 "attributes": {
                     "subtype": "opacity",
@@ -37,21 +37,71 @@
                     "description": "Controls the minimum height of form controls (input fields, text areas, select boxes, and other form elements). This ensures form fields are always tall enough to be easily clickable and readable. Acceptable units: px, em, rem.<br>CSS variable: --wm-form-controls-min-height"
                 }
             },
+            "min-width": {
+                "value": "160px",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Note: The min-width property does not affect form controls when they are placed inside a <form>. Controls the minimum width of form controls (input fields, text areas, select boxes, and other form elements). This ensures form fields are always wide enough to be easily clickable and readable. Acceptable units: px, em, rem.<br>CSS variable: --wm-form-controls-min-width"
+                }
+            },
+            "font": {
+                "size": {
+                    "value": "{body.large.font-size.value}",
+                    "type": "font",
+                    "attributes": {
+                        "subtype": "font-size",
+                        "description": "Controls how large form control text appear (the text that appear next to or above input fields). This affects the size of the text that users see.<br>CSS variable: --wm-form-controls-font-size"
+                    }
+                },
+                "weight": {
+                    "value": "{body.large.font-weight.value}",
+                    "type": "font",
+                    "attributes": {
+                        "subtype": "font-weight",
+                        "description": "Controls how thick or bold form control text appear (the text that appear next to or above input fields). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-font-weight"
+                    }
+                },
+                "family": {
+                    "value": "{body.large.font-family.value}",
+                    "type": "font",
+                    "attributes": {
+                        "subtype": "font-family",
+                        "description": "Sets the typeface (font style) for form control text (the text that appear next to or above input fields). This determines whether the text appears in Roboto, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-font-family"
+                    }
+                }
+            },
             "padding": {
-                "vertical": {
+                "top": {
                     "value": "{space.2.value}",
                     "type": "space",
                     "attributes": {
                         "subtype": "space",
-                        "description": "Controls the internal vertical spacing inside form controls (the space between the form field content and its top/bottom borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding-vertical"
+                        "description": "Controls the internal top spacing inside form controls (the space between the form field content and its top borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding-top"
                     }
                 },
-                "horizontal": {
+                "left": {
                     "value": "{space.2.value}",
                     "type": "space",
                     "attributes": {
                         "subtype": "space",
-                        "description": "Controls the internal horizontal spacing inside form controls (the space between the form field content and its left/right borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding-horizontal"
+                        "description": "Controls the internal left spacing inside form controls (the space between the form field content and its left borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding-left"
+                    }
+                },
+                "right": {
+                    "value": "{space.2.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the internal right spacing inside form controls (the space between the form field content and its right borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding-right"
+                    }
+                },
+                "bottom": {
+                    "value": "{space.2.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the internal bottom spacing inside form controls (the space between the form field content and its bottom borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding-bottom"
                     }
                 }
             },
@@ -80,12 +130,44 @@
                         "description": "Sets the visual style of borders around form controls (input fields, text areas, select boxes, and other form elements). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, 'none' removes borders completely.<br>CSS variable: --wm-form-controls-border-style"
                     }
                 },
-                "width": {
-                    "value": "{border.width.base.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "border-width",
-                        "description": "Controls the thickness of borders around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-width"
+                "top": {
+                    "width": {
+                        "value": "{border.width.1.value}",
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "border-width",
+                            "description": "Controls the thickness of top border around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the top border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-top-width"
+                        }
+                    }
+                },
+                "left": {
+                    "width": {
+                        "value": "{border.width.1.value}",
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "border-width",
+                            "description": "Controls the thickness of left border around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the left border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-left-width"
+                        }
+                    }
+                },
+                "right": {
+                    "width": {
+                        "value": "{border.width.1.value}",
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "border-width",
+                            "description": "Controls the thickness of right border around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the right border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-right-width"
+                        }
+                    }
+                },
+                "bottom": {
+                    "width": {
+                        "value": "{border.width.1.value}",
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "border-width",
+                            "description": "Controls the thickness of bottom border around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the bottom border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-bottom-width"
+                        }
                     }
                 }
             },
@@ -175,76 +257,140 @@
             },
             "states": {
                 "focused": {
-                        "border": {
-                            "color": {
-                                "value": "{color.primary.@.value}",
-                                "type": "color",
+                    "border": {
+                        "color": {
+                            "value": "{color.primary.@.value}",
+                            "type": "color",
+                            "attributes": {
+                                "subtype": "color",
+                                "description": "Sets the color of borders around form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines what color the border appears in when the field is active and ready for input.<br>CSS variable: --wm-form-controls-border-color (focused state)"
+                            }
+                        },
+                        "top": {
+                            "width": {
+                                "value": "{border.width.1.value}",
+                                "type": "space",
                                 "attributes": {
-                                    "subtype": "color",
-                                    "description": "Sets the color of borders around form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines what color the border appears in when the field is active and ready for input.<br>CSS variable: --wm-form-controls-border-color (focused state)"
+                                    "subtype": "border-width",
+                                    "description": "Controls the thickness of top border around form controls when they are in the focused state (input fields, text areas, select boxes, and other form elements). This determines how thick the top border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-top-width (focused state)"
                                 }
-                            },
+                            }
+                        },
+                        "left": {
                             "width": {
-                                "value": "{border.width.base.value}",
+                                "value": "{border.width.1.value}",
                                 "type": "space",
                                 "attributes": {
                                     "subtype": "border-width",
-                                    "description": "Controls the thickness of borders around form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines how thick the border lines appear when the field is active.<br>CSS variable: --wm-form-controls-border-width (focused state)"
+                                    "description": "Controls the thickness of left border around form controls when they are in the focused state (input fields, text areas, select boxes, and other form elements). This determines how thick the left border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-left-width (focused state)"
                                 }
                             }
                         },
-                        "background": {
-                            "value": "{color.outline.variant.value}",
-                            "type": "color",
-                            "attributes": {
-                                "subtype": "color",
-                                "description": "Sets the background color of form controls when they are in the focused state (when the user clicks or tabs into the form field). This is the background color that appears when the field is active and ready for input.<br>CSS variable: --wm-form-controls-background (focused state)"
+                        "right": {
+                            "width": {
+                                "value": "{border.width.1.value}",
+                                "type": "space",
+                                "attributes": {
+                                    "subtype": "border-width",
+                                    "description": "Controls the thickness of right border around form controls when they are in the focused state (input fields, text areas, select boxes, and other form elements). This determines how thick the right border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-right-width (focused state)"
+                                }
                             }
                         },
+                        "bottom": {
+                            "width": {
+                                "value": "{border.width.1.value}",
+                                "type": "space",
+                                "attributes": {
+                                    "subtype": "border-width",
+                                    "description": "Controls the thickness of bottom border around form controls when they are in the focused state (input fields, text areas, select boxes, and other form elements). This determines how thick the bottom border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-bottom-width (focused state)"
+                                }
+                            }
+                        }
+                    },
+                    "background": {
+                        "value": "{color.outline.variant.value}",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the background color of form controls when they are in the focused state (when the user clicks or tabs into the form field). This is the background color that appears when the field is active and ready for input.<br>CSS variable: --wm-form-controls-background (focused state)"
+                        }
+                    },
+                    "color": {
+                        "value": "{color.black.@.value}",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the text color of form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines what color the text that users type appears in when the field is active.<br>CSS variable: --wm-form-controls-color (focused state)"
+                        }
+                    }
+                },
+                "disabled": {
+                    "border": {
                         "color": {
-                            "value": "{color.black.@.value}",
+                            "value": "{color.shadow.@.value}",
                             "type": "color",
                             "attributes": {
                                 "subtype": "color",
-                                "description": "Sets the text color of form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines what color the text that users type appears in when the field is active.<br>CSS variable: --wm-form-controls-color (focused state)"
+                                "description": "Sets the color of borders around form controls when they are in the disabled state (when the form field is not interactive and users cannot enter data). This determines what color the border appears in when the field is disabled.<br>CSS variable: --wm-form-controls-border-color (disabled state)"
                             }
-                        }
-                },
-                "disabled": {
-                        "border": {
-                            "color": {
-                                "value": "{color.shadow.@.value}",
-                                "type": "color",
+                        },
+                        "top": {
+                            "width": {
+                                "value": "{border.width.1.value}",
+                                "type": "space",
                                 "attributes": {
-                                    "subtype": "color",
-                                    "description": "Sets the color of borders around form controls when they are in the disabled state (when the form field is not interactive and users cannot enter data). This determines what color the border appears in when the field is disabled.<br>CSS variable: --wm-form-controls-border-color (disabled state)"
+                                    "subtype": "border-width",
+                                    "description": "Controls the thickness of top border around form controls when they are in the disabled state (input fields, text areas, select boxes, and other form elements). This determines how thick the top border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-top-width (disabled state)"
                                 }
-                            },
+                            }
+                        },
+                        "left": {
                             "width": {
-                                "value": "{border.width.base.value}",
+                                "value": "{border.width.1.value}",
                                 "type": "space",
                                 "attributes": {
                                     "subtype": "border-width",
-                                    "description": "Controls the thickness of borders around form controls when they are in the disabled state (when the form field is not interactive). This determines how thick the border lines appear when the field is disabled.<br>CSS variable: --wm-form-controls-border-width (disabled state)"
+                                    "description": "Controls the thickness of left border around form controls when they are in the disabled state (input fields, text areas, select boxes, and other form elements). This determines how thick the left border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-left-width (disabled state)"
                                 }
                             }
                         },
-                        "background": {
-                            "value": "{color.surface.dim.@.value}",
-                            "type": "color",
-                            "attributes": {
-                                "subtype": "color",
-                                "description": "Sets the background color of form controls when they are in the disabled state (when the form field is not interactive and users cannot enter data). This is the background color that appears when the field is disabled.<br>CSS variable: --wm-form-controls-background (disabled state)"
+                        "right": {
+                            "width": {
+                                "value": "{border.width.1.value}",
+                                "type": "space",
+                                "attributes": {
+                                    "subtype": "border-width",
+                                    "description": "Controls the thickness of right border around form controls when they are in the disabled state (input fields, text areas, select boxes, and other form elements). This determines how thick the right border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-right-width (disabled state)"
+                                }
                             }
                         },
-                        "color": {
-                            "value": "{color.scrim.@.value}",
-                            "type": "color",
-                            "attributes": {
-                                "subtype": "color",
-                                "description": "Sets the text color of form controls when they are in the disabled state (when the form field is not interactive). This determines what color the text appears in when the field is disabled.<br>CSS variable: --wm-form-controls-color (disabled state)"
+                        "bottom": {
+                            "width": {
+                                "value": "{border.width.1.value}",
+                                "type": "space",
+                                "attributes": {
+                                    "subtype": "border-width",
+                                    "description": "Controls the thickness of bottom border around form controls when they are in the disabled state (input fields, text areas, select boxes, and other form elements). This determines how thick the bottom border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-bottom-width (disabled state)"
+                                }
                             }
-                        },
+                        }
+                    },
+                    "background": {
+                        "value": "{color.surface.dim.@.value}",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the background color of form controls when they are in the disabled state (when the form field is not interactive and users cannot enter data). This is the background color that appears when the field is disabled.<br>CSS variable: --wm-form-controls-background (disabled state)"
+                        }
+                    },
+                    "color": {
+                        "value": "{color.scrim.@.value}",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the text color of form controls when they are in the disabled state (when the form field is not interactive). This determines what color the text appears in when the field is disabled.<br>CSS variable: --wm-form-controls-color (disabled state)"
+                        }
+                    },
                     "opacity": {
                         "value": "0.67",
                         "type": "radius",
@@ -256,8 +402,6 @@
                 }
             }
         },
-        "appearances": {
-            
-        }
+        "appearances": {}
     }
 }