@wavemaker/foundation-css 11.14.2-rc.6311 → 11.14.4-rc.647538

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

@@ -0,0 +1,217 @@
+{
+  "form-default": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-form"
+        }
+      },
+      "appearances": {
+        "default": {
+          "mapping": {
+            "selector": {
+              "mobile": ".form-default"
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "background": {
+        "value": "{color.outline.variant.value}",
+        "type": "color"
+      },
+      "padding": {
+        "value": "{space.3.value}",
+        "type": "space"
+      },
+      "margin": {
+        "value": "{space.2.value}",
+        "type": "space"
+      },
+      "border": {
+        "radius": {
+          "value": "{radius.sm.value}",
+          "type": "radius"
+        },
+        "width": {
+          "value": "{border.width.base.value}",
+          "type": "space"
+        },
+        "style": {
+          "value": "{border.style.base.value}",
+          "type": "style"
+        },
+        "color": {
+          "@": {
+            "value": "{color.transparent.@.value}",
+            "type": "color"
+          }
+        }
+      },
+      "header": {
+        "padding": {
+          "vertical": {
+            "value": "{space.2.value}",
+            "type": "space"
+          },
+          "horizontal": {
+            "value": "{space.2.value}",
+            "type": "space"
+          }
+        },
+        "border": {
+          "color": {
+            "value": "{color.transparent.@.value}",
+            "type": "color"
+          },
+          "radius": {
+            "value": "{radius.sm.value}",
+            "type": "radius"
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "style"
+          },
+          "width": {
+            "value": "{border.width.base.value}",
+            "type": "space"
+          }
+        },
+        "title": {
+          "color": {
+            "value": "{color.on-surface.@.value}",
+            "type": "color"
+          },
+          "font": {
+            "size": {
+              "value": "{h4.font-size.value}",
+              "type": "font"
+            },
+            "weight": {
+              "value": "{font.weight.700.value}",
+              "type": "font"
+            },
+            "family": {
+              "value": "{font.family.brand.value}",
+              "type": "font"
+            }
+          },
+          "margin": {
+            "vertical": {
+              "value": "{space.1.value}",
+              "type": "space"
+            },
+            "horizontal": {
+              "value": "{space.1.value}",
+              "type": "space"
+            }
+          }
+        },
+        "sub-title": {
+          "color": {
+            "value": "{color.on-surface.variant.@.value}",
+            "type": "color"
+          },
+          "font": {
+            "size": {
+              "value": "{h6.font-size.value}",
+              "type": "font"
+            },
+            "weight": {
+              "value": "{font.weight.500.value}",
+              "type": "font"
+            },
+            "family": {
+              "value": "{font.family.brand.value}",
+              "type": "font"
+            }
+          },
+          "margin": {
+            "vertical": {
+              "value": "{space.1.value}",
+              "type": "space"
+            },
+            "horizontal": {
+              "value": "{space.1.value}",
+              "type": "space"
+            }
+          }
+        },
+        "background": {
+          "value": "{color.transparent.@.value}",
+          "type": "color"
+        }
+      },
+      "body": {
+        "background": {
+          "value": "{color.transparent.@.value}",
+          "type": "color"
+        },
+        "padding": {
+          "vertical": {
+            "value": "{space.1.value}",
+            "type": "space"
+          },
+          "horizontal": {
+            "value": "{space.1.value}",
+            "type": "space"
+          }
+        },
+        "border": {
+          "color": {
+            "value": "{color.transparent.@.value}",
+            "type": "color"
+          },
+          "radius": {
+            "value": "{radius.sm.value}",
+            "type": "radius"
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "style"
+          },
+          "width": {
+            "value": "{border.width.base.value}",
+            "type": "space"
+          }
+        }
+      },
+      "footer": {
+        "background": {
+          "value": "{color.transparent.@.value}",
+          "type": "color"
+        },
+        "border": {
+          "color": {
+            "value": "{color.transparent.@.value}",
+            "type": "color"
+          },
+          "radius": {
+            "value": "{radius.sm.value}",
+            "type": "radius"
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius"
+          },
+          "width": {
+            "value": "{border.width.base.value}",
+            "type": "space"
+          }
+        },
+        "padding": {
+          "vertical": {
+            "value": "{space.1.value}",
+            "type": "space"
+          },
+          "horizontal": {
+            "value": "{space.1.value}",
+            "type": "space"
+          }
+        }
+      }
+    },
+    "appearances": {}
+  }
+}

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

@@ -0,0 +1,153 @@
+{
+    "form-input": {
+        "meta": {
+            "mapping": {
+                "selector": {
+                    "mobile": ".app-input"
+                },
+                "states": {
+                    "focused": {
+                        "selector": {
+                            "mobile": "-focused"
+                        }
+                    },
+                    "disabled": {
+                        "selector": {
+                            "mobile": "-disabled"
+                        }
+                    }
+                },
+                "appearances": {}
+            }
+        },
+        "mapping": {
+            "opacity": {
+                "value": "1",
+                "type": "radius"
+            },
+            "min-height": {
+                "value": "48px",
+                "type": "space"
+            },
+            "padding": {
+                "vertical": {
+                    "value": "{space.2.value}",
+                    "type": "space"
+                },
+                "horizontal": {
+                    "value": "{space.2.value}",
+                    "type": "space"
+                }
+            },
+            "border": {
+                "color": {
+                    "value": "{color.outline.@.value}",
+                    "type": "color"
+                },
+                "radius": {
+                    "value": "{radius.sm.value}",
+                    "type": "radius"
+                },
+                "style": {
+                    "value": "{border.style.base.value}",
+                    "type": "style"
+                },
+                "width": {
+                    "value": "{border.width.base.value}",
+                    "type": "space"
+                }
+            },
+            "placeholder": {
+                "color": {
+                    "value": "{color.on-surface.@.value}",
+                    "type": "color"
+                }
+            },
+            "background": {
+                "value": "{color.outline.variant.value}",
+                "type": "color"
+            },
+            "label": {
+                "color": {
+                    "value": "{color.on-surface.@.value}",
+                    "type": "color"
+                },
+                "background": {
+                    "value": "{color.transparent.@.value}",
+                    "type": "color"
+                },
+                "font": {
+                    "size": {
+                        "value": "{label.large.font-size.value}",
+                        "type": "font"
+                    },
+                    "weight": {
+                        "value": "{label.large.font-weight.value}",
+                        "type": "font"
+                    },
+                    "family": {
+                        "value": "{label.large.font-family.value}",
+                        "type": "font"
+                    }
+                },
+                "margin": {
+                    "vertical": {
+                        "value": "{space.1.value}",
+                        "type": "space"
+                    },
+                    "horizontal": {
+                        "value": "{space.1.value}",
+                        "type": "space"
+                    }
+                }
+            },
+            "states": {
+                "focused": {
+                        "border": {
+                            "color": {
+                                "value": "{color.primary.@.value}",
+                                "type": "color"
+                            },
+                            "width": {
+                                "value": "{border.width.base.value}",
+                                "type": "space"
+                            }
+                        },
+                        "background": {
+                            "value": "{color.on-primary.@.value}",
+                            "type": "color"
+                        },
+                        "color": {
+                            "value": "{color.on-primary.@.value}",
+                            "type": "color"
+                        }
+                },
+                "disabled": {
+                        "border": {
+                            "color": {
+                                "value": "{color.shadow.@.value}",
+                                "type": "color"
+                            },
+                            "width": {
+                                "value": "{border.width.base.value}",
+                                "type": "space"
+                            }
+                        },
+                        "background": {
+                            "value": "{color.surface.dim.@.value}",
+                            "type": "color"
+                        },
+                        "color": {
+                            "value": "{color.scrim.@.value}",
+                            "type": "color"
+                    },
+                    "opacity": {
+                        "value": "0.67",
+                        "type": "radius"
+                    }
+                }
+            }
+        },
+        "appearances": {}
+    }
+}

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

@@ -61,51 +61,27 @@
     "mapping": {
       "color": {
         "value": "{color.on-background.@.value}",
-        "type": "color",
-        "attributes": {
-          "subtype": "color",
-          "description": "Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-icon-color"
-        }
+        "type": "color"
       },
       "font-size": {
         "value": "{icon.size.@.value}",
-        "type": "font",
-        "attributes": {
-          "subtype": "icon-size",
-          "description": "Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-icon-font-size"
-        }
+        "type": "font"
       },
       "min-width": {
         "value": "{icon.size.@.value}",
-        "type": "space",
-        "attributes": {
-          "subtype": "icon-size",
-          "description": "Controls the minimum width of icon symbols to ensure they're always wide enough to be visible and clickable, even when they contain small symbols.<br>CSS variable: --wm-icon-min-width"
-        }
+        "type": "space"
       },
       "width": {
         "value": "{icon.size.@.value}",
-        "type": "space",
-        "attributes": {
-          "subtype": "icon-size",
-          "description": "Controls how wide icon symbols appear (like arrows, hearts, settings, etc.). This determines the horizontal space each icon takes up.<br>CSS variable: --wm-icon-width"
-        }
+        "type": "space"
       },
       "height": {
         "value": "{icon.size.@.value}",
-        "type": "space",
-        "attributes": {
-          "subtype": "icon-size",
-          "description": "Controls how tall icon symbols appear (like arrows, hearts, settings, etc.). This determines the vertical space each icon takes up.<br>CSS variable: --wm-icon-height"
-        }
+        "type": "space"
       },
       "gap": {
         "value": "{space.1.value}",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the spacing between icons and adjacent elements (like text or other icons). This creates visual separation so icons don't appear crowded together.<br>CSS variable: --wm-icon-gap"
-        }
+        "type": "space"
       }
     },
     "appearances": {

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

@@ -155,61 +155,33 @@
     "mapping": {
       "color": {
         "value": "{color.on-surface.@.value}",
-        "type": "color",
-        "attributes": {
-          "subtype": "color",
-          "description": "Sets the text color of labels (text elements that describe or identify other content). This determines what color the label text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-label-color"
-        }
+        "type": "color"
       },
       "margin": {
         "value": "{space.0.value}",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the outer spacing around labels (the space between the label and surrounding elements). This creates breathing room around label text.<br>CSS variable: --wm-label-margin"
-        }
+        "type": "space"
       },
       "asterisk": {
         "color": {
           "value": "{color.error.@.value}",
-          "type": "color",
-          "attributes": {
-            "subtype": "color",
-            "description": "Sets the color of the asterisk symbol (*) that appears in required field labels. This determines what color the asterisk appears in, typically red to indicate required fields.<br>CSS variable: --wm-label-asterisk-color"
-          }
+          "type": "color"
         }
       },
       "padding": {
         "value": "{space.0.value}",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the internal spacing inside labels (the space between the label text and its border). This creates breathing room around the label content.<br>CSS variable: --wm-label-padding"
-        }
+        "type": "space"
       },
       "font-size": {
         "value": "{body.large.font-size.value}",
-        "type": "font",
-        "attributes": {
-          "subtype": "font-size",
-          "description": "Controls how large label text appears (text that describes or identifies other content). Larger values make labels more prominent, smaller values make them more subtle.<br>CSS variable: --wm-label-font-size"
-        }
+        "type": "font"
       },
       "font-weight": {
         "value": "{body.medium.font-weight.value}",
-        "type": "font",
-        "attributes": {
-          "subtype": "font-weight",
-          "description": "Controls how thick or bold label text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-label-font-weight"
-        }
+        "type": "font"
       },
       "font-family": {
         "value": "{body.medium.font-family.value}",
-        "type": "font",
-        "attributes": {
-          "subtype": "font-family",
-          "description": "Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-label-font-family"
-        }
+        "type": "font"
       }
     },
     "appearances": {
@@ -368,52 +340,28 @@
           "padding": {
             "left": {
               "value": "{space.8.value}",
-              "type": "space",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls the left padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the left side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-left"
-              }
+              "type": "space"
             },
             "right": {
               "value": "{space.8.value}",
-              "type": "space",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls the right padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the right side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-right"
-              }
+              "type": "space"
             },
             "top": {
               "value": "{space.4.value}",
-              "type": "space",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls the top padding (vertical spacing) inside label badges (colored label containers). This creates breathing room above the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-top"
-              }
+              "type": "space"
             },
             "bottom": {
               "value": "{space.4.value}",
-              "type": "space",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls the bottom padding (vertical spacing) inside label badges (colored label containers). This creates breathing room below the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-bottom"
-              }
+              "type": "space"
             }
           },
           "font-weight": {
             "value": "{font.weight.700.value}",
-            "type": "font",
-            "attributes": {
-              "subtype": "font-weight",
-              "description": "Controls how thick or bold label badge text appears. When set to 700, the label text appears bold to emphasize the label badge.<br>CSS variable: --wm-label-font-weight"
-            }
+            "type": "font"
           },
           "border-radius": {
             "value": "6px",
-            "type": "radius",
-            "attributes": {
-              "subtype": "radius",
-              "description": "Controls the corner rounding of label badges (colored label containers). This makes the label badges appear with rounded corners for a softer appearance.<br>CSS variable: --wm-label-border-radius"
-            }
+            "type": "border"
           }
         },
         "variantGroups": {

package/src/tokens/mobile/components/left-nav/left-nav.json

@@ -3,38 +3,22 @@
         "mapping": {
             "min-height": {
                 "type": "space",
-                "value": "100%",
-                "attributes": {
-                    "subtype": "space",
-                    "description": "Controls the minimum height of the left navigation panel (the side panel that slides in from the left). When set to 100%, the panel takes up the full height of the viewport. Acceptable units: %, px.<br>CSS variable: --wm-left-panel-min-height"
-                }
+                "value": "100%"
             },
             "background": {
                 "type": "color",
-                "value": "#ffffff",
-                "attributes": {
-                    "subtype": "color",
-                    "description": "Sets the background color of the left navigation panel (the side panel that slides in from the left). This is the main background color that appears behind the navigation content.<br>CSS variable: --wm-left-panel-background"
-                }
+                "value": "#ffffff"
             },
             "elevation": {
                 "type": "radius",
-                "value": "{elevation.shadow.1.value}",
-                "attributes": {
-                    "subtype": "elevation",
-                    "description": "Controls the drop shadow effect around the left navigation panel. This creates a subtle shadow that makes the panel appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-left-panel-elevation"
-                }
+                "value": "{elevation.shadow.1.value}"
             },
             "border": {
                 "top": {
                     "right": {
                         "radius": {
                             "type": "radius",
-                            "value": "{radius.lg.value}",
-                            "attributes": {
-                                "subtype": "radius",
-                                "description": "Controls the corner rounding of the top-right corner of the left navigation panel. This makes the panel appear with rounded corners on the top-right for a softer appearance.<br>CSS variable: --wm-left-panel-border-top-right-radius"
-                            }
+                            "value": "{radius.lg.value}"
                         }
                     }
                 },
@@ -42,22 +26,14 @@
                     "right": {
                         "radius": {
                             "type": "radius",
-                            "value": "{radius.lg.value}",
-                            "attributes": {
-                                "subtype": "radius",
-                                "description": "Controls the corner rounding of the bottom-right corner of the left navigation panel. This makes the panel appear with rounded corners on the bottom-right for a softer appearance.<br>CSS variable: --wm-left-panel-border-bottom-right-radius"
-                            }
+                            "value": "{radius.lg.value}"
                         }
                     }
                 }
             },
             "max-width": {
                 "type": "space",
-                "value": "360px",
-                "attributes": {
-                    "subtype": "space",
-                    "description": "Controls the maximum width of the left navigation panel (the side panel that slides in from the left). This determines how wide the panel can be when it's open. Acceptable units: px.<br>CSS variable: --wm-left-panel-max-width"
-                }
+                "value": "360px"
             }
         }
     }