@wavemaker-ai/foundation-css 1.0.0-rc.647469

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

@@ -0,0 +1,618 @@
+{
+  "label": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-label"
+        }
+      },
+      "appearances": {
+        "default": {
+          "mapping": {
+            "selector": {
+              "mobile": ".app-label"
+            }
+          },
+          "variantGroups": {
+            "size": {
+              "h1": {
+                "selector": {
+                  "mobile": ".h1"
+                }
+              },
+              "h2": {
+                "selector": {
+                  "mobile": ".h2"
+                }
+              },
+              "h3": {
+                "selector": {
+                  "mobile": ".h3"
+                }
+              },
+              "h4": {
+                "selector": {
+                  "mobile": ".h4"
+                }
+              },
+              "h5": {
+                "selector": {
+                  "mobile": ".h5"
+                }
+              },
+              "h6": {
+                "selector": {
+                  "mobile": ".h6"
+                }
+              },
+              "p": {
+                "selector": {
+                  "mobile": ".p"
+                }
+              },
+              "media-heading": {
+                "selector": {
+                  "mobile": ".media-heading"
+                }
+              }
+            }
+          }
+        },
+        "text": {
+          "mapping": {
+            "selector": {
+              "mobile": ".text"
+            }
+          },
+          "variantGroups": {
+            "status": {
+              "primary": {
+                "selector": {
+                  "mobile": ".text-primary"
+                }
+              },
+              "secondary": {
+                "selector": {
+                  "mobile": ".text-secondary"
+                }
+              },
+              "success": {
+                "selector": {
+                  "mobile": ".text-success"
+                }
+              },
+              "warning": {
+                "selector": {
+                  "mobile": ".text-warning"
+                }
+              },
+              "danger": {
+                "selector": {
+                  "mobile": ".text-danger"
+                }
+              },
+              "info": {
+                "selector": {
+                  "mobile": ".text-info"
+                }
+              },
+              "muted": {
+                "selector": {
+                  "mobile": ".text-muted"
+                }
+              }
+            }
+          }
+        },
+        "label": {
+          "mapping": {
+            "selector": {
+              "mobile": ".label"
+            }
+          },
+          "variantGroups": {
+            "status": {
+              "primary": {
+                "selector": {
+                  "mobile": ".label-primary"
+                }
+              },
+              "secondary": {
+                "selector": {
+                  "mobile": ".label-secondary"
+                }
+              },
+              "success": {
+                "selector": {
+                  "mobile": ".label-success"
+                }
+              },
+              "warning": {
+                "selector": {
+                  "mobile": ".label-warning"
+                }
+              },
+              "danger": {
+                "selector": {
+                  "mobile": ".label-danger"
+                }
+              },
+              "info": {
+                "selector": {
+                  "mobile": ".label-info"
+                }
+              },
+              "muted": {
+                "selector": {
+                  "mobile": ".label-muted"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "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"
+        }
+      },
+      "line-height": {
+        "value": "{body.medium.line-height.value}",
+        "type": "font",
+        "attributes": {
+          "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"
+        }
+      },
+      "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"
+          }
+        }
+      },
+      "padding": {
+        "value": "{space.0.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls padding inside label containers (space between label edges and content). Use shorthand (e.g. vertical horizontal or top right bottom left) like web label tokens.<br>CSS variable: --wm-label-padding"
+        }
+      },
+      "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"
+        }
+      },
+      "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"
+        }
+      },
+      "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"
+        }
+      },
+      "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"
+          }
+        }
+      },
+      "text": {
+        "decoration": {
+          "value": "none",
+          "type": "radius",
+          "attributes": {
+            "subtype": "text-decoration",
+            "description": "Controls the text decoration (underline, overline, line-through) for anchor links. 'none' removes all decorations, 'underline' adds an underline, 'overline' adds a line above, and 'line-through' adds a line through the text.<br>CSS variable: --wm-anchor-text-decoration"
+          }
+        }
+      }
+    },
+    "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}",
+                "type": "font"
+              },
+              "font-weight": {
+                "value": "{h1.font-weight.value}",
+                "type": "font"
+              },
+              "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": {
+              "font-size": {
+                "value": "{h2.font-size.value}",
+                "type": "font"
+              },
+              "font-weight": {
+                "value": "{h2.font-weight.value}",
+                "type": "font"
+              },
+              "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": {
+              "font-size": {
+                "value": "{h3.font-size.value}",
+                "type": "font"
+              },
+              "font-weight": {
+                "value": "{h3.font-weight.value}",
+                "type": "font"
+              },
+              "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": {
+              "font-size": {
+                "value": "{h4.font-size.value}",
+                "type": "font"
+              },
+              "font-weight": {
+                "value": "{h4.font-weight.value}",
+                "type": "font"
+              },
+              "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": {
+              "font-size": {
+                "value": "{h5.font-size.value}",
+                "type": "font"
+              },
+              "font-weight": {
+                "value": "{h5.font-weight.value}",
+                "type": "font"
+              },
+              "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": {
+              "font-size": {
+                "value": "{h6.font-size.value}",
+                "type": "font"
+              },
+              "font-weight": {
+                "value": "{h6.font-weight.value}",
+                "type": "font"
+              },
+              "font-family": {
+                "value": "{h6.font-family.value}",
+                "type": "font"
+              },
+              "line-height": {
+                "value": "{h6.line-height.value}",
+                "type": "font"
+              },
+              "letter-spacing": {
+                "value": "{h6.letter-spacing.value}",
+                "type": "font"
+              }
+            },
+            "media-heading": {
+              "font-size": {
+                "value": "{body.large.font-size.value}",
+                "type": "font"
+              }
+            }
+          }
+        }
+      },
+      "text": {
+        "variantGroups": {
+          "status": {
+            "primary": {
+              "color": {
+                "value": "{color.primary.@.value}",
+                "type": "color"
+              }
+            },
+            "secondary": {
+              "color": {
+                "value": "{color.secondary.@.value}",
+                "type": "color"
+              }
+            },
+            "tertiary": {
+              "color": {
+                "value": "{color.tertiary.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              }
+            },
+            "success": {
+              "color": {
+                "value": "{color.success.@.value}",
+                "type": "color"
+              }
+            },
+            "warning": {
+              "color": {
+                "value": "{color.warning.@.value}",
+                "type": "color"
+              }
+            },
+            "danger": {
+              "color": {
+                "value": "{color.error.@.value}",
+                "type": "color"
+              }
+            },
+            "info": {
+              "color": {
+                "value": "{color.info.@.value}",
+                "type": "color"
+              }
+            },
+            "muted": {
+              "color": {
+                "value": "{color.on-surface.variant.@.value}",
+                "type": "color"
+              }
+            }
+          }
+        }
+      },
+      "label": {
+        "mapping": {
+          "padding": {
+            "value": "{space.4.value} {space.8.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Padding inside label-badge appearance (vertical horizontal: top/bottom and left/right). Mirrors web label single-padding pattern.<br>CSS variable: --wm-label-padding"
+            }
+          },
+          "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"
+            }
+          },
+          "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"
+              }
+            }
+          }
+        },
+        "variantGroups": {
+          "status": {
+            "primary": {
+              "background-color": {
+                "value": "{color.primary.@.value}",
+                "type": "color"
+              },
+              "color": {
+                "value": "{color.on-primary.@.value}",
+                "type": "color"
+              }
+            },
+            "secondary": {
+              "background-color": {
+                "value": "{color.secondary.@.value}",
+                "type": "color"
+              },
+              "color": {
+                "value": "{color.on-secondary.@.value}",
+                "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}",
+                "type": "color"
+              },
+              "color": {
+                "value": "{color.on-success.@.value}",
+                "type": "color"
+              }
+            },
+            "warning": {
+              "background-color": {
+                "value": "{color.warning.@.value}",
+                "type": "color"
+              },
+              "color": {
+                "value": "{color.on-warning.@.value}",
+                "type": "color"
+              }
+            },
+            "danger": {
+              "background-color": {
+                "value": "{color.error.@.value}",
+                "type": "color"
+              },
+              "color": {
+                "value": "{color.on-error.@.value}",
+                "type": "color"
+              }
+            },
+            "info": {
+              "background-color": {
+                "value": "{color.info.@.value}",
+                "type": "color"
+              },
+              "color": {
+                "value": "{color.on-info.@.value}",
+                "type": "color"
+              }
+            },
+            "muted": {
+              "background-color": {
+                "value": "{color.on-surface.variant.@.value}",
+                "type": "color"
+              },
+              "color": {
+                "value": "{color.surface.variant.@.value}",
+                "type": "color"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+{
+  "list": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-list"
+        }
+      }
+    },
+    "mapping": {
+      "background": {
+        "color": {
+          "value": "transparent",
+          "type": "color",
+          "attributes": {
+            "subtype": "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"
+          }
+        }
+      },
+      "padding": {
+        "value": "{space.0.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the padding (all sides) inside the list container. This creates breathing room around the list content. Acceptable units: px.<br>CSS variable: --wm-list-padding"
+        }
+      },
+      "border": {
+        "style": {
+          "value": "{border.style.base.value}",
+          "type": "radius",
+          "attributes": {
+            "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"
+          }
+        },
+        "width": {
+          "value": "{border.width.0.value}",
+          "type": "space",
+          "attributes": {
+            "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": "transparent",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "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"
+          }
+        },
+        "radius": {
+          "value": "{radius.none.value}",
+          "type": "radius",
+          "attributes": {
+            "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"
+          }
+        }
+      }
+    },
+    "appearances": {}
+  }
+}