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

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

@@ -0,0 +1,84 @@
+{
+  "list-template": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-list-template"
+        }
+      }
+    },
+    "mapping": {
+      "background": {
+        "color": {
+          "value": "{color.surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of each list row. This is the main background color for list item content.<br>CSS variable: --wm-list-template-background-color"
+          }
+        }
+      },
+      "padding": {
+        "value": "{space.1.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the padding inside each list row. Acceptable units: px.<br>CSS variable: --wm-list-template-padding"
+        }
+      },
+      "border": {
+        "radius": {
+          "value": "{radius.sm.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the corner rounding of each list row.<br>CSS variable: --wm-list-template-border-radius"
+          }
+        },
+        "color": {
+          "value": "transparent",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the border color of each list row.<br>CSS variable: --wm-list-template-border-color"
+          }
+        },
+        "width": {
+          "value": "{border.width.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the border thickness of each list row.<br>CSS variable: --wm-list-template-border-width"
+          }
+        },
+        "style": {
+          "value": "{border.style.base.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Controls the border style of each list row.<br>CSS variable: --wm-list-template-border-style"
+          }
+        }
+      },
+      "min-height": {
+        "value": "56",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Minimum height of each list row.<br>CSS variable: --wm-list-template-min-height"
+        }
+      },
+      "box-shadow": {
+        "value": "{elevation.shadow.none.value}",
+        "type": "radius",
+        "attributes": {
+          "subtype": "boxShadow",
+          "description": "Controls the shadow of each list row.<br>CSS variable: --wm-list-template-box-shadow"
+        }
+      }
+    },
+    "appearances": {
+    
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+{
+    "login": {
+        "meta": {
+            "mapping": {
+                "selector": {
+                    "mobile": ".app-login"
+                }
+            }
+        },
+        "mapping": {
+            "error": {
+                "text": {
+                    "color": {
+                        "value": "{color.on-error.@.value}",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the text color of login error messages (messages that appear when login fails or validation errors occur). This determines what color the error message text appears in, typically a contrasting color to ensure visibility against the error background.<br>CSS variable: --wm-login-error-text-color"
+                        }
+                    }
+                },
+                "background": {
+                    "color": {
+                        "value": "{color.error.@.value}",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the background color of login error messages (messages that appear when login fails or validation errors occur). This is the main background color that appears behind the error message text.<br>CSS variable: --wm-login-error-background-color"
+                        }
+                    }
+                },
+                "border": {
+                    "color": {
+                        "value": "{color.error.@.value}",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the color of the border around login error messages. This determines the color of the outline that defines the error message container.<br>CSS variable: --wm-login-error-border-color"
+                        }
+                    },
+                    "radius": {
+                        "value": "{radius.sm.value}",
+                        "type": "radius",
+                        "attributes": {
+                            "subtype": "radius",
+                            "description": "Controls the corner rounding of login error messages. This makes the error messages appear with rounded corners for a softer appearance.<br>CSS variable: --wm-login-error-border-radius"
+                        }
+                    }
+                }
+            },
+            "form": {
+                "padding": {
+                    "value": "{space.9.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the padding (all sides) inside the login form container. This creates breathing room around the form content. Acceptable units: px.<br>CSS variable: --wm-login-form-padding"
+                    }
+                }
+            }
+
+        },
+        "appearances": {}
+    }
+}

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

@@ -0,0 +1,52 @@
+{
+  "lottie": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-lottie"
+        }
+      }
+    },
+    "mapping": {
+      "background": {
+        "color": {
+          "value": "{color.transparent.@.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": {
+        "value": "{space.0.value} {space.2.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the padding around the lottie. First value is for top/bottom, second value is for left/right.<br>CSS variables: --wm-lottie-padding-top, --wm-lottie-padding-right, --wm-lottie-padding-bottom, --wm-lottie-padding-left"
+        }
+      },
+      "content": {
+        "height": {
+          "value": "{spacer.7.value}",
+          "type": "space"
+        },
+        "width": {
+          "value": "100%",
+          "type": "space"
+        },
+        "background": {
+          "color": {
+            "value": "{color.transparent.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color for the content of 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-content-background-color"
+            }
+          }
+        }
+      }
+    },
+    "appearances": {}
+  }
+}

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

@@ -0,0 +1,336 @@
+{
+  "message": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-message"
+        }
+      },
+      "appearances": {
+        "filled": {
+          "variantGroups": {
+            "status": {
+              "success": {
+                "selector": {
+                  "mobile": ".alert-success"
+                }
+              },
+              "info": {
+                "selector": {
+                  "mobile": ".alert-info"
+                }
+              },
+              "warning": {
+                "selector": {
+                  "mobile": ".alert-warning"
+                }
+              },
+              "error": {
+                "selector": {
+                  "mobile": ".alert-error"
+                }
+              },
+              "loading": {
+                "selector": {
+                  "mobile": ".alert-loading"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "container": {
+        "border": {
+          "radius": {
+            "value": "6px",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of message containers (alert boxes that display notifications, warnings, or information). This makes the message containers appear with rounded corners for a softer appearance.<br>CSS variable: --wm-message-container-border-radius"
+            }
+          },
+          "width": {
+            "value": "{border.width.base.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around message containers. This determines how thick the outline appears around the message container. Acceptable units: px.<br>CSS variable: --wm-message-container-border-width"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the style of the border around message containers. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-message-container-border-style"
+            }
+          },
+          "color": {
+            "value": "{color.primary.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border around message containers. This determines the color of the outline that defines the message container.<br>CSS variable: --wm-message-container-border-color"
+            }
+          }
+        },
+        "background": {
+          "value": "{color.primary.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of message containers (alert boxes that display notifications, warnings, or information). This is the main background color that appears behind the message content.<br>CSS variable: --wm-message-container-background"
+          }
+        },
+        "padding": {
+          "value": "{space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the top padding (vertical spacing) inside message containers. This creates breathing room above the message content. Acceptable units: px.<br>CSS variable: --wm-message-container-padding-top"
+          }
+        }
+      },
+      "text-wrapper": {
+        "padding": {
+          "value": "{space.0.value} {space.0.value} {space.0.value} {space.4.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top, right, bottom, left) inside the message text wrapper (the container that holds the message text). This creates breathing room around the text content. Acceptable units: px.<br>CSS variable: --wm-message-text-wrapper-padding"
+          }
+        }
+      },
+     "color": {
+        "value": "{color.on-primary.@.value}",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Sets the text color of message content (the main text that appears in message containers). This determines what color the message text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-message-color"
+        }
+      },
+      "title": {
+        "font": {
+          "size": {
+            "value": "{body.medium.font-size.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "Controls the size of message title text (the heading text that appears at the top of message containers). This affects how large the title text appears.<br>CSS variable: --wm-message-title-font-size"
+            }
+          },
+          "weight": {
+            "value": "{font.weight.700.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Controls how thick or bold message title text appears. When set to 700, the title text appears bold to emphasize the message heading.<br>CSS variable: --wm-message-title-font-weight"
+            }
+          }
+        },
+        "padding": {
+          "value": "{space.0.value} {space.0.value} {space.1.value} {space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top, right, bottom, left) below message titles. This creates spacing between the title and the message text content. Acceptable units: px.<br>CSS variable: --wm-message-title-padding"
+          }
+        },
+        "color": {
+          "value": "{color.on-primary.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of message content (the main text that appears in message containers). This determines what color the message text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-message-color"
+          }
+        }
+      },
+      "text": {
+        "size": {
+          "value": "{body.large.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the size of message text (the main content text that appears in message containers). This affects how large the message text appears.<br>CSS variable: --wm-message-text-size"
+          }
+        },
+        "color": {
+          "value": "{color.on-primary.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of message content (the main text that appears in message containers). This determines what color the message text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-message-color"
+          }
+        }
+      },
+      "icon": {
+        "size": {
+          "value": "20px",
+          "type": "font",
+          "attributes": {
+            "subtype": "icon-size",
+            "description": "Controls the size of message icons (icons that appear alongside message content to indicate the message type). This affects how large the icons appear. Acceptable units: px.<br>CSS variable: --wm-message-icon-size"
+          }
+        }
+      },
+      "close-btn": {
+        "padding": {
+          "value": "{space.0.value} {space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top/bottom, left/right) inside the message close button. This creates breathing room around the close button. Acceptable units: px.<br>CSS variable: --wm-message-close-btn-padding"
+          }
+        },
+        "border": {
+          "radius": {
+            "value": "6px",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of the message close button. This makes the close button appear with rounded corners for a softer appearance.<br>CSS variable: --wm-message-close-btn-border-radius"
+            }
+          },
+          "color": {
+            "value": "transparent",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border around the message close button. When transparent, no border is visible. When filled with a color, the close button has a visible outline.<br>CSS variable: --wm-message-close-btn-border-color"
+            }
+          }
+        },
+        "icon": {
+          "size": {
+            "value": "{body.large.font-size.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "Controls the size of the close button icon (the X or close symbol that appears in the message close button). This affects how large the close icon appears.<br>CSS variable: --wm-message-close-btn-icon-size"
+            }
+          }
+        },
+        "background": {
+          "color": {
+            "value": "transparent",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of the message close button. When transparent, only the close icon is visible. When filled with a color, the close button appears with a colored background.<br>CSS variable: --wm-message-close-btn-background-color"
+            }
+          }
+        },
+        "ripple":{
+          "color":{
+            "value": "transparent",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the ripple effect that appears when the message close button is pressed or tapped. When transparent, no ripple effect is visible. When filled with a color, a ripple animation appears on interaction.<br>CSS variable: --wm-message-close-btn-ripple-color"
+            }
+          }
+        }
+      }
+    },
+    "appearances": {
+      "filled": {
+        "variantGroups": {
+          "status": {
+            "success": {
+              "container": {
+                "background": {
+                  "value": "{color.success.@.value}",
+                  "type": "color"
+                },
+                "border": {
+                  "color": {
+                    "value": "{color.success.@.value}",
+                    "type": "color"
+                  }
+                }
+              },
+              "color": {
+                "value": "{color.on-success.@.value}",
+                "type": "color"
+              }
+            },
+            "info": {
+              "container": {
+                "background": {
+                  "value": "{color.info.@.value}",
+                  "type": "color"
+                },
+                "border": {
+                  "color": {
+                    "value": "{color.info.@.value}",
+                    "type": "color"
+                  }
+                }
+              },
+              "color": {
+                "value": "{color.on-info.@.value}",
+                "type": "color"
+              }
+            },
+            "warning": {
+              "container": {
+                "background": {
+                  "value": "{color.warning.@.value}",
+                  "type": "color"
+                },
+                "border": {
+                  "color": {
+                    "value": "{color.warning.@.value}",
+                    "type": "color"
+                  }
+                }
+              },
+              "color": {
+                "value": "{color.on-warning.@.value}",
+                "type": "color"
+              }
+            },
+            "error": {
+              "container": {
+                "background": {
+                  "value": "{color.error.@.value}",
+                  "type": "color"
+                },
+                "border": {
+                  "color": {
+                    "value": "{color.error.@.value}",
+                    "type": "color"
+                  }
+                }
+              },
+              "color": {
+                "value": "{color.on-error.@.value}",
+                "type": "color"
+              }
+            },
+            "loading": {
+              "container": {
+                "background": {
+                  "value": "{color.primary.@.value}",
+                  "type": "color"
+                },
+                "border": {
+                  "color": {
+                    "value": "{color.primary.@.value}",
+                    "type": "color"
+                  }
+                }
+              },
+              "color": {
+                "value": "{color.on-primary.@.value}",
+                "type": "color"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}