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

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

@@ -161,12 +161,54 @@
           "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"
         }
       },
-      "margin": {
-        "value": "{space.0.value}",
-        "type": "space",
+      "line-height": {
+        "value": "{body.medium.line-height.value}",
+        "type": "font",
         "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"
+          "subtype": "line-height",
+          "description": "Controls the vertical spacing between lines when label text wraps to multiple lines. Higher values create more space between lines for better readability.<br>CSS variable: --wm-label-line-height"
+        }
+      },
+      "letter-spacing": {
+        "value": "{body.medium.letter-spacing.value}",
+        "type": "font",
+        "attributes": {
+          "subtype": "letter-spacing",
+          "description": "Controls the horizontal spacing between individual letters in label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-label-letter-spacing"
+        }
+      },
+      "margin": {
+        "left": {
+          "value": "{space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the left margin (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-margin-left"
+          }
+        },
+        "right": {
+          "value": "{space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the right margin (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-margin-right"
+          }
+        },
+        "top": {
+          "value": "{space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the top margin (vertical spacing) inside label badges (colored label containers). This creates breathing room above the label content. Acceptable units: px.<br>CSS variable: --wm-label-margin-top"
+          }
+        },
+        "bottom": {
+          "value": "{space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the bottom margin (vertical spacing) inside label badges (colored label containers). This creates breathing room below the label content. Acceptable units: px.<br>CSS variable: --wm-label-margin-bottom"
+          }
         }
       },
       "asterisk": {
@@ -180,11 +222,37 @@
         }
       },
       "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"
+        "left": {
+          "value": "{space.0.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"
+          }
+        },
+        "right": {
+          "value": "{space.0.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"
+          }
+        },
+        "top": {
+          "value": "{space.0.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"
+          }
+        },
+        "bottom": {
+          "value": "{space.0.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"
+          }
         }
       },
       "font-size": {
@@ -210,12 +278,76 @@
           "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"
         }
+      },
+      "background-color": {
+        "value": "none",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Sets the background color of labels (text elements that describe or identify other content). This determines what background color the label appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-label-background-color"
+        }
+      },
+      "border": {
+        "radius": {
+          "value": "{border.width.0.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the corner rounding of label (alert boxes that display notifications, warnings, or information). This makes the label appear with rounded corners for a softer appearance.<br>CSS variable: --wm-label-border-radius"
+          }
+        },
+        "width": {
+          "value": "{border.width.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the thickness of the border around label. This determines how thick the outline appears around the label. Acceptable units: px.<br>CSS variable: --wm-label-border-width"
+          }
+        },
+        "style": {
+          "value": "{border.style.base.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Controls the style of the border around label. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-label-border-style"
+          }
+        },
+        "color": {
+          "value": "{color.primary.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of the border around label. This determines the color of the outline that defines the label.<br>CSS variable: --wm-label-border-color"
+          }
+        }
       }
     },
     "appearances": {
       "default": {
         "variantGroups": {
           "size": {
+            "p": {
+              "font-size": {
+                "value": "{p.font-size.value}",
+                "type": "font"
+              },
+              "font-weight": {
+                "value": "{p.font-weight.value}",
+                "type": "font"
+              },
+              "font-family": {
+                "value": "{p.font-family.value}",
+                "type": "font"
+              },
+              "line-height": {
+                "value": "{p.line-height.value}",
+                "type": "font"
+              },
+              "letter-spacing": {
+                "value": "{p.letter-spacing.value}",
+                "type": "font"
+              }
+            },
             "h1": {
               "font-size": {
                 "value": "{h1.font-size.value}",
@@ -228,6 +360,14 @@
               "font-family": {
                 "value": "{h1.font-family.value}",
                 "type": "font"
+              },
+              "line-height": {
+                "value": "{h1.line-height.value}",
+                "type": "font"
+              },
+              "letter-spacing": {
+                "value": "{h1.letter-spacing.value}",
+                "type": "font"
               }
             },
             "h2": {
@@ -242,6 +382,14 @@
               "font-family": {
                 "value": "{h2.font-family.value}",
                 "type": "font"
+              },
+              "line-height": {
+                "value": "{h2.line-height.value}",
+                "type": "font"
+              },
+              "letter-spacing": {
+                "value": "{h2.letter-spacing.value}",
+                "type": "font"
               }
             },
             "h3": {
@@ -256,6 +404,14 @@
               "font-family": {
                 "value": "{h3.font-family.value}",
                 "type": "font"
+              },
+              "line-height": {
+                "value": "{h3.line-height.value}",
+                "type": "font"
+              },
+              "letter-spacing": {
+                "value": "{h3.letter-spacing.value}",
+                "type": "font"
               }
             },
             "h4": {
@@ -270,6 +426,14 @@
               "font-family": {
                 "value": "{h4.font-family.value}",
                 "type": "font"
+              },
+              "line-height": {
+                "value": "{h4.line-height.value}",
+                "type": "font"
+              },
+              "letter-spacing": {
+                "value": "{h4.letter-spacing.value}",
+                "type": "font"
               }
             },
             "h5": {
@@ -284,6 +448,14 @@
               "font-family": {
                 "value": "{h5.font-family.value}",
                 "type": "font"
+              },
+              "line-height": {
+                "value": "{h5.line-height.value}",
+                "type": "font"
+              },
+              "letter-spacing": {
+                "value": "{h5.letter-spacing.value}",
+                "type": "font"
               }
             },
             "h6": {
@@ -298,11 +470,13 @@
               "font-family": {
                 "value": "{h6.font-family.value}",
                 "type": "font"
-              }
-            },
-            "p": {
-              "font-size": {
-                "value": "{body.small.font-size.value}",
+              },
+              "line-height": {
+                "value": "{h6.line-height.value}",
+                "type": "font"
+              },
+              "letter-spacing": {
+                "value": "{h6.letter-spacing.value}",
                 "type": "font"
               }
             },
@@ -330,6 +504,15 @@
                 "type": "color"
               }
             },
+            "tertiary": {
+              "color": {
+                "value": "{color.tertiary.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              }
+            },
             "success": {
               "color": {
                 "value": "{color.success.@.value}",
@@ -407,12 +590,14 @@
               "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"
             }
           },
-          "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"
+          "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"
+              }
             }
           }
         },
@@ -438,6 +623,19 @@
                 "type": "color"
               }
             },
+            "tertiary": {
+              "background-color": {
+                "value": "{color.tertiary.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              },
+              "color": {
+                "value": "{color.on-tertiary.@.value}",
+                "type": "color"
+              }
+            },
             "success": {
               "background-color": {
                 "value": "{color.success.@.value}",

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

@@ -8,175 +8,85 @@
       }
     },
     "mapping": {
-      "heading": {
-        "padding": {
-          "value": "{space.2.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing inside list headings (section titles at the top of lists). This creates breathing room around the heading content. Acceptable units: px.<br>CSS variable: --wm-list-heading-padding"
-          }
-        },
-        "margin-bottom": {
-          "value": "6px",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the bottom margin (vertical spacing) of list headings (section titles at the top of lists). This creates spacing below the heading, separating it from the list items. Acceptable units: px.<br>CSS variable: --wm-list-heading-margin-bottom"
-          }
-        },
-        "background-color": {
+      "background": {
+        "color": {
           "value": "transparent",
           "type": "color",
           "attributes": {
             "subtype": "color",
-            "description": "Sets the background color of list headings (section titles at the top of lists). When transparent, only the heading text is visible. When filled with a color, the heading appears with a colored background.<br>CSS variable: --wm-list-heading-background-color"
+            "description": "Sets the background color of list (boxes that hold content). This is the main background color that appears behind all list content.<br>CSS variable: --wm-list-background-color"
           }
         }
       },
-      "title": {
-        "line-height": {
-          "value": "{body.large.line-height.value}",
-          "type": "font",
-          "attributes": {
-            "subtype": "line-height",
-            "description": "Controls the vertical spacing between lines when list title text wraps to multiple lines. This ensures proper spacing for the title text displayed in list items.<br>CSS variable: --wm-list-title-line-height"
-          }
-        },
-        "font-size": {
-          "value": "{body.large.font-size.value}",
-          "type": "font",
+      "padding": {
+        "top": {
+          "value": "{space.0.value}",
+          "type": "space",
           "attributes": {
-            "subtype": "font-size",
-            "description": "Controls the size of list title text (the primary text that appears in each list item). This affects how large the title text appears.<br>CSS variable: --wm-list-title-font-size"
+            "subtype": "space",
+            "description": "Controls the top padding (vertical spacing) inside list. This creates breathing room above the list container. Acceptable units: px.<br>CSS variable: --wm-list-padding-top"
           }
         },
-        "color": {
-          "value": "{color.on-surface.@.value}",
-          "type": "color",
+        "bottom": {
+          "value": "{space.0.value}",
+          "type": "space",
           "attributes": {
-            "subtype": "color",
-            "description": "Sets the text color of list titles (the primary text that appears in each list item). This determines what color the title text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-list-title-color"
+            "subtype": "space",
+            "description": "Controls the bottom padding (vertical spacing) inside list. This creates breathing room below the list container. Acceptable units: px.<br>CSS variable: --wm-list-padding-bottom"
           }
         },
-        "font-family": {
-          "value": "{font.family.plain.value}",
-          "type": "font",
+        "left": {
+          "value": "{space.0.value}",
+          "type": "space",
           "attributes": {
-            "subtype": "font-family",
-            "description": "Sets the typeface (font style) for list title text (the primary text that appears in each list item). This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-list-title-font-family"
+            "subtype": "space",
+            "description": "Controls the left padding (horizontal spacing) inside list. This creates breathing room on the left side of the list container. Acceptable units: px.<br>CSS variable: --wm-list-padding-left"
           }
         },
-        "font-weight": {
-          "value": "{body.large.font-weight.value}",
-          "type": "font",
+        "right": {
+          "value": "{space.0.value}",
+          "type": "space",
           "attributes": {
-            "subtype": "font-weight",
-            "description": "Controls how thick or bold list title text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-list-title-font-weight"
+            "subtype": "space",
+            "description": "Controls the right padding (horizontal spacing) inside list. This creates breathing room on the right side of the list container. Acceptable units: px.<br>CSS variable: --wm-list-padding-right"
           }
         }
       },
-      "sub-heading": {
-        "font-size": {
-          "value": "{body.medium.font-size.value}",
-          "type": "font",
+      "border": {
+        "style": {
+          "value": "{border.style.base.value}",
+          "type": "radius",
           "attributes": {
-            "subtype": "font-size",
-            "description": "Controls the size of list sub-heading text (secondary text that appears below the title in each list item). This affects how large the sub-heading text appears.<br>CSS variable: --wm-list-sub-heading-font-size"
+            "subtype": "border-style",
+            "description": "Controls the style of the outline around list container 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-list-border-style"
           }
         },
-        "line-height": {
-          "value": "{body.medium.line-height.value}",
-          "type": "font",
+        "width": {
+          "value": "{border.width.0.value}",
+          "type": "space",
           "attributes": {
-            "subtype": "line-height",
-            "description": "Controls the vertical spacing between lines when list sub-heading text wraps to multiple lines. This ensures proper spacing for the sub-heading text displayed in list items.<br>CSS variable: --wm-list-sub-heading-line-height"
+            "subtype": "border-width",
+            "description": "Controls the thickness of the border around list. When set to 0, there's no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-list-border-width"
           }
         },
         "color": {
-          "value": "{color.on-surface.@.value}",
+          "value": "transparent",
           "type": "color",
           "attributes": {
             "subtype": "color",
-            "description": "Sets the text color of list sub-headings (secondary text that appears below the title in each list item). This determines what color the sub-heading text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-list-sub-heading-color"
-          }
-        },
-        "font-family": {
-          "value": "{font.family.plain.value}",
-          "type": "font",
-          "attributes": {
-            "subtype": "font-family",
-            "description": "Sets the typeface (font style) for list sub-heading text (secondary text that appears below the title in each list item). This determines whether the sub-heading text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-list-sub-heading-font-family"
+            "description": "Sets the color of the border around list. This creates a colored border around the list to define its boundaries.<br>CSS variable: --wm-list-border-color"
           }
         },
-        "font-weight": {
-          "value": "{body.medium.font-weight.value}",
-          "type": "font",
+        "radius": {
+          "value": "{radius.none.value}",
+          "type": "radius",
           "attributes": {
-            "subtype": "font-weight",
-            "description": "Controls how thick or bold list sub-heading text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-list-sub-heading-font-weight"
+            "subtype": "radius",
+            "description": "Controls the corner rounding of the list. When set to 'none', containers have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-list-border-radius"
           }
         }
-      },
-      "item": {
-        "border": {
-          "radius": {
-            "value": "6px",
-            "type": "radius",
-            "attributes": {
-              "subtype": "radius",
-              "description": "Controls the corner rounding of list items (individual entries in a list). This makes the list items appear with rounded corners for a softer appearance.<br>CSS variable: --wm-list-item-border-radius"
-            }
-          }
-        },
-        "padding": {
-          "value": "{space.1.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing inside list items (the space between the list item content and its borders). This creates breathing room around each list item content.<br>CSS variable: --wm-list-item-padding"
-          }
-        },
-        "min-height": {
-          "value": "56px",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the minimum height of list items (individual entries in a list that users can interact with). This ensures each list item is always tall enough to be visible and properly displayed. Acceptable units: px, em, rem.<br>CSS variable: --wm-list-item-min-height"
-          }
-        },
-        "header": {
-          "background-color": {
-            "value": "{color.surface.container.lowest.@.value}",
-            "type": "color",
-            "attributes": {
-              "subtype": "color",
-              "description": "Sets the background color of list item headers (section titles that group related list items). This is the main background color that appears behind the header text.<br>CSS variable: --wm-list-item-header-background-color"
-            }
-          }
-        }
-      },
-      "select": {
-        "icon": {
-          "font-size": {
-            "value": "{body.medium.font-size.value}",
-            "type": "font",
-            "attributes": {
-              "subtype": "icon-size",
-              "description": "Controls the size of selection icons in lists (checkmarks or other icons that indicate selected list items). This affects how large the selection icons appear.<br>CSS variable: --wm-list-select-icon-font-size"
-            }
-          },
-          "color": {
-            "value": "{color.primary.@.value}",
-            "type": "color",
-            "attributes": {
-              "subtype": "color",
-              "description": "Sets the color of selection icons in lists (checkmarks or other icons that indicate selected list items). This determines what color the selection icons appear in, typically matching the primary theme color.<br>CSS variable: --wm-list-select-icon-color"
-            }
-          }
-        }
-      },
-      "appearances": {}
-    }
+      }
+    },
+    "appearances": {}
   }
 }

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

@@ -1,21 +1,54 @@
 {
   "lottie": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-lottie"
+        }
+      }
+    },
     "mapping": {
-      "content": {
-        "height": {
-          "value": "{spacer.7.value}",
+      "background": {
+        "color": {
+          "value": "{color.white.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of the lottie. When transparent, only the lottie is visible. When filled with a color, the lottie appears with a colored background.<br>CSS variable: --wm-lottie-background-color"
+          }
+        }
+      },
+      "padding": {
+        "top": {
+          "value": "{space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the top padding (vertical spacing) inside lottie. This creates breathing room above the lottie. Acceptable units: px.<br>CSS variable: --wm-lottie-padding-top"
+          }
+        },
+        "bottom": {
+          "value": "{space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the bottom padding (vertical spacing) inside lottie. This creates breathing room below the lottie. Acceptable units: px.<br>CSS variable: --wm-lottie-padding-bottom"
+          }
+        },
+        "left": {
+          "value": "{space.2.value}",
           "type": "space",
           "attributes": {
             "subtype": "space",
-            "description": "Controls the height of lottie animation content (animated graphics and illustrations). This determines how tall the lottie animation appears. Acceptable units: px.<br>CSS variable: --wm-lottie-content-height"
+            "description": "Controls the left padding (horizontal spacing) inside lottie. This creates breathing room on the left side of the lottie. Acceptable units: px.<br>CSS variable: --wm-lottie-padding-left"
           }
         },
-        "width": {
-          "value": "100%",
+        "right": {
+          "value": "{space.2.value}",
           "type": "space",
           "attributes": {
             "subtype": "space",
-            "description": "Controls the width of lottie animation content (animated graphics and illustrations). When set to 100%, the animation takes up the full width of its container. Acceptable units: %, px.<br>CSS variable: --wm-lottie-content-width"
+            "description": "Controls the right padding (horizontal spacing) inside lottie. This creates breathing room on the right side of the lottie. Acceptable units: px.<br>CSS variable: --wm-lottie-padding-right"
           }
         }
       }