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

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

@@ -0,0 +1,129 @@
+{
+    "anchor": {
+        "meta": {
+            "mapping": {
+                "selector": {
+                    "web": ".app-anchor",
+                    "mobile": ".app-anchor"
+                }
+            }
+        },
+        "mapping": {
+            "color": {
+                "@": {
+                    "value": "{color.primary.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the text color of anchor links (clickable text elements that navigate to other pages or sections). This determines what color the anchor text appears in.<br>CSS variable: --wm-anchor-color"
+                    }
+                }
+            },
+            "font-size": {
+                "value": "{body.medium.font-size.value}",
+                "type": "font",
+                "attributes": {
+                    "subtype": "font-size",
+                    "description": "Controls the size of the text in anchor links. This affects how large the anchor text appears.<br>CSS variable: --wm-anchor-font-size"
+                }
+            },
+            "font-family": {
+                "value": "{body.medium.font-family.value}",
+                "type": "font",
+                "attributes": {
+                    "subtype": "font-family",
+                    "description": "Sets the typeface (font style) for anchor link text. This determines whether the anchor text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-anchor-font-family"
+                }
+            },
+            "font-weight": {
+                "value": "{body.medium.font-weight.value}",
+                "type": "font",
+                "attributes": {
+                    "subtype": "font-weight",
+                    "description": "Controls how thick or bold the anchor link text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-anchor-font-weight"
+                }
+            },
+            "line-height": {
+                "value": "{body.medium.line-height.value}",
+                "type": "font",
+                "attributes": {
+                    "subtype": "line-height",
+                    "description": "Controls the vertical spacing between lines when anchor link text wraps to multiple lines. This ensures proper spacing for the anchor text.<br>CSS variable: --wm-anchor-line-height"
+                }
+            },
+            "letter-spacing": {
+                "value": "{body.medium.letter-spacing.value}",
+                "type": "font",
+                "attributes": {
+                    "subtype": "letter-spacing",
+                    "description": "Controls the horizontal spacing between individual characters in anchor link text. This can help make the anchor text more readable and properly spaced.<br>CSS variable: --wm-anchor-letter-spacing"
+                }
+            },
+            "text-transform": {
+                "value": "none",
+                "type": "radius",
+                "attributes": {
+                    "subtype": "text-transform",
+                    "description": "Controls text transformation for anchor link text. 'none' keeps the original case, 'uppercase' makes all text uppercase, 'lowercase' makes all text lowercase, and 'capitalize' capitalizes the first letter of each word.<br>CSS variable: --wm-anchor-text-transform"
+                }
+            },
+            "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"
+                        }
+                    }
+                },
+                "padding": {
+                    "value": "{space.0.value} {space.2.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the padding (top/bottom, left/right) inside anchor link text. This creates space around the text, making the anchor text more comfortable to read and click. Acceptable units: px.<br>CSS variable: --wm-anchor-text-padding"
+                    }
+                }
+            },
+            "gap": {
+                "value": "{space.1.value}",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Sets spacing between icon and text content in anchor links. This creates visual separation between the icon and the anchor text.<br>CSS variable: --wm-anchor-gap"
+                }
+            },
+            "icon": {
+                "size": {
+                    "value": "{icon.size.@.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "icon-size",
+                        "description": "Controls the size of icons in anchor links. This affects how large the icon appears next to the anchor text.<br>CSS variable: --wm-anchor-icon-size"
+                    }
+                }
+            },
+            "image": {
+                "size": {
+                    "value": "{icon.size.@.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "icon-size",
+                        "description": "Controls the size of images in anchor links. This affects how large the image appears next to the anchor text.<br>CSS variable: --wm-anchor-image-size"
+                    }
+                },
+                "radius": {
+                    "value": "{radius.circle.value}",
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "radius",
+                        "description": "Controls the border radius of images in anchor links. This makes the image appear with rounded corners.<br>CSS variable: --wm-anchor-image-radius"
+                    }
+                }
+            }
+        },
+        "appearances": {}
+    }
+}

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

@@ -0,0 +1,15 @@
+{
+    "audio": {
+        "mapping": {
+            "width": {
+                "value": "300px",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the width of the audio component. This determines how wide the audio player appears on the screen.<br>CSS variable: --wm-audio-width"
+                }
+            }
+        },
+        "appearances": {}
+    }
+}

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

@@ -0,0 +1,122 @@
+{
+  "badge": {
+    "background": {
+      "value": "{color.surface.variant.@.value}",
+      "type": "color"
+    },
+    "color": {
+      "value": "{color.on-surface.@.value}",
+      "type": "color"
+    },
+    "min-height": {
+      "value": "20px",
+      "type": "space"
+    },
+    "inline": {
+      "padding": {
+        "value": "6px",
+        "type": "space"
+      }
+    },
+    "block": {
+      "padding": {
+        "value": "{space.1.value}",
+        "type": "space"
+      }
+    },
+    "radius": {
+      "value": "{radius.lg.value}",
+      "type": "radius"
+    },
+    "font-family": {
+      "value": "{body.small.font-family.value}",
+      "type": "font"
+    },
+    "font-size": {
+      "value": "{body.small.font-size.value}",
+      "type": "font"
+    },
+    "font-weight": {
+      "value": "{font.weight.700.value}",
+      "type": "font"
+    },
+    "line-height": {
+      "value": "1",
+      "type": "font"
+    },
+    "letter-spacing": {
+      "value": "{body.small.letter-spacing.value}",
+      "type": "font"
+    },
+    "primary": {
+      "@": {
+        "value": "{color.primary.@.value}",
+        "type": "color"
+      },
+      "background": {
+        "value": "{color.primary.container.@.value}",
+        "type": "color"
+      }
+    },
+    "info": {
+      "@": {
+        "value": "{color.info.@.value}",
+        "type": "color"
+      },
+      "background": {
+        "value": "{color.info.container.@.value}",
+        "type": "color"
+      }
+    },
+    "success": {
+      "@": {
+        "value": "{color.success.@.value}",
+        "type": "color"
+      },
+      "background": {
+        "value": "{color.success.container.@.value}",
+        "type": "color"
+      }
+    },
+    "warning": {
+      "@": {
+        "value": "{color.warning.@.value}",
+        "type": "color"
+      },
+      "background": {
+        "value": "{color.warning.container.@.value}",
+        "type": "color"
+      }
+    },
+    "error": {
+      "@": {
+        "value": "{color.error.@.value}",
+        "type": "color"
+      },
+      "background": {
+        "value": "{color.error.container.@.value}",
+        "type": "color"
+      }
+    },
+    "secondary": {
+      "@": {
+        "value": "{color.secondary.@.value}",
+        "type": "color"
+      },
+      "background": {
+        "value": "{color.secondary.container.@.value}",
+        "type": "color"
+      }
+    },
+    "tertiary": {
+      "@": {
+        "value": "{color.tertiary.@.value}",
+        "type": "color"
+      },
+      "background": {
+        "value": "{color.tertiary.container.@.value}",
+        "type": "color"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,140 @@
+{
+    "barcodescanner": {
+        "meta": {
+            "mapping": {
+                "selector": {
+                    "mobile": ".app-barcodescanner"
+                }
+            }
+        },
+        "mapping": {
+            "min": {
+                "height": {
+                    "value": "30px",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the minimum height of the barcode scanner component. This determines the minimum vertical space the component occupies.<br>CSS variable: --wm-barcodescanner-min-height"
+                    }
+                },
+                "width": {
+                    "value": "{space.10.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the minimum width of the barcode scanner component. This determines the minimum horizontal space the component occupies.<br>CSS variable: --wm-barcodescanner-min-width"
+                    }
+                }
+            },
+            "text": {
+                "color": {
+                    "value": "{color.scrim.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the text color of the barcode scanner component. This determines what color the text appears in.<br>CSS variable: --wm-barcodescanner-text-color"
+                    }
+                },
+                "font": {
+                    "size": {
+                        "value": "{body.medium.font-size.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-size",
+                            "description": "Controls the size of the text in the barcode scanner component. This affects how large the text appears.<br>CSS variable: --wm-barcodescanner-text-font-size"
+                        }
+                    }
+                },
+                "padding": {
+                    "value": "{space.0.value} {space.0.value} {space.0.value} {space.0.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the padding (top, right, bottom, left) of the text in the barcode scanner component. This creates spacing around the text. Acceptable units: px.<br>CSS variable: --wm-barcodescanner-text-padding"
+                    }
+                }
+            },
+            "icon": {
+                "color": {
+                    "value": "{color.scrim.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the color of the icon in the barcode scanner component. This determines what color the icon appears in.<br>CSS variable: --wm-barcodescanner-icon-color"
+                    }
+                },
+                "font": {
+                    "size": {
+                        "value": "{space.5.value}",
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "icon-size",
+                            "description": "Controls the size of the icon in the barcode scanner component. This affects how large the icon appears.<br>CSS variable: --wm-barcodescanner-icon-font-size"
+                        }
+                    }
+                }
+            },
+            "background": {
+                "value": "{color.primary.@.value}",
+                "type": "color",
+                "attributes": {
+                    "subtype": "color",
+                    "description": "Sets the background color of the barcode scanner component. This is the main background color that appears behind all content.<br>CSS variable: --wm-barcodescanner-background"
+                }
+            },
+            "padding": {
+                "value": "10px {space.2.value} {space.2.value} {space.2.value}",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the padding (top, right, bottom, left) of the barcode scanner component. This creates spacing around the component content. Acceptable units: px.<br>CSS variable: --wm-barcodescanner-padding"
+                }
+            },
+            "border": {
+                "width": {
+                    "value": "{border.width.base.value}",
+                    "type": "border",
+                    "attributes": {
+                        "subtype": "border-width",
+                        "description": "Controls the border thickness of the barcode scanner component. This determines how thick the border around the component appears.<br>CSS variable: --wm-barcodescanner-border-width"
+                    }
+                },
+                "style": {
+                    "value": "{border.style.solid.value}",
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "border-style",
+                        "description": "Sets the border style of the barcode scanner component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-barcodescanner-border-style"
+                    }
+                },
+                "color": {
+                    "value": "{color.scrim.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the border color of the barcode scanner component. This determines what color the border around the component appears in.<br>CSS variable: --wm-barcodescanner-border-color"
+                    }
+                },
+                "radius": {
+                    "value": "{space.5.value}",
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "radius",
+                        "description": "Controls the border radius for rounded corners of the barcode scanner component. This makes the component appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-barcodescanner-border-radius"
+                    }
+                }
+            },
+            "ripple": {
+                "color": {
+                    "value": "transparent",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the ripple effect color for the barcode scanner component. This determines what color appears when the component is interacted with.<br>CSS variable: --wm-barcodescanner-ripple-color"
+                    }
+                }
+            }
+        },
+        "appearances": {}
+    }
+}

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

@@ -0,0 +1,154 @@
+{
+    "bottomsheet": {
+        "meta": {
+            "mapping": {
+                "selector": {
+                    "mobile": ".app-bottomsheet"
+                }
+            }
+        },
+        "mapping": {
+            "width": {
+                "value": "100%",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the width of the bottom sheet. This determines how wide the bottom sheet appears on the screen. Acceptable units: px, %.<br>CSS variable: --wm-bottomsheet-width"
+                }
+            },
+            "backdrop": {
+                "background": {
+                    "value": "rgba(0,0,0,0.1)",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the background color of the bottom sheet backdrop. This is the semi-transparent overlay that appears behind the bottom sheet when it is open.<br>CSS variable: --wm-bottomsheet-backdrop-background"
+                    }
+                }
+            },
+            "background": {
+                "value": "{color.surface.bright.@.value}",
+                "type": "color",
+                "attributes": {
+                    "subtype": "color",
+                    "description": "Sets the background color of the bottom sheet component. This is the main background color that appears behind all bottom sheet content.<br>CSS variable: --wm-bottomsheet-background"
+                }
+            },
+            "border": {
+                "radius":{
+                    "value": "{radius.lg.value}",
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "radius",
+                        "description": "Controls the border radius for rounded corners of the bottom sheet component. This makes the bottom sheet appear with rounded corners at the top.<br>CSS variable: --wm-bottomsheet-border-radius"
+                    }
+                },
+                "width":{
+                    "value": "{border.width.0.value}",
+                    "type": "border",
+                    "attributes": {
+                        "subtype": "border-width",
+                        "description": "Controls the border width (all sides) of the bottom sheet component. This determines how thick the border around the bottom sheet appears. Acceptable units: px.<br>CSS variable: --wm-bottomsheet-border-width"
+                    }
+                },
+                "color":{
+                    "value": "transparent",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the border color of the bottom sheet component. This determines what color the border around the bottom sheet appears in.<br>CSS variable: --wm-bottomsheet-border-color"
+                    }
+                },
+                "style":{
+                    "value": "{border.style.base.value}",
+                    "type": "border",
+                    "attributes": {
+                        "subtype": "border-style",
+                        "description": "Sets the border style of the bottom sheet component. This determines what style the border around the bottom sheet appears in.<br>CSS variable: --wm-bottomsheet-border-style"
+                    }
+                }
+            },
+            "margin":{
+                "value": "{space.0.value} {space.0.value}",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the margin (top/bottom, left/right) of the bottom sheet component. This creates spacing around the bottom sheet. Acceptable units: px.<br>CSS variable: --wm-bottomsheet-margin"
+                }
+            },
+            "handle":{
+                "background":{
+                    "value": "{color.surface.bright.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the background color of the bottom sheet drag handle. This is the background color that appears behind the drag handle area.<br>CSS variable: --wm-bottomsheet-handle-background"
+                    }
+                },
+                "icon": {
+                    "width": {
+                        "value": "{space.9.value}",
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Controls the width of the drag handle icon in the bottom sheet. This determines how wide the drag handle icon appears.<br>CSS variable: --wm-bottomsheet-handle-icon-width"
+                        }
+                    },
+                    "height": {
+                        "value": "{space.1.value}",
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Controls the height of the drag handle icon in the bottom sheet. This determines how tall the drag handle icon appears.<br>CSS variable: --wm-bottomsheet-handle-icon-height"
+                        }
+                    },
+                    "background": {
+                        "value": "{color.outline.@.value}",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the background color of the drag handle icon in the bottom sheet. This determines what color the drag handle icon appears in.<br>CSS variable: --wm-bottomsheet-handle-icon-background"
+                        }
+                    }
+                },
+                "padding":{
+                    "value": "{space.4.value} {space.0.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the padding (top/bottom, left/right) of the bottom sheet drag handle. This creates spacing around the drag handle area. Acceptable units: px.<br>CSS variable: --wm-bottomsheet-handle-padding"
+                    }
+                },
+                "border":{
+                    "width":{
+                        "value": "1",
+                        "type": "radius",
+                        "attributes": {
+                            "subtype": "border-width",
+                            "description": "Controls the border thickness of the bottom sheet drag handle. This determines how thick the border around the drag handle appears.<br>CSS variable: --wm-bottomsheet-handle-border-width"
+                        }
+                    },
+                    "color":{
+                        "value": "transparent",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the border color of the bottom sheet drag handle. This determines what color the border around the drag handle appears in.<br>CSS variable: --wm-bottomsheet-handle-border-color"
+                        }
+                    }
+                }
+            },
+            "content": {
+                "padding": {
+                    "value": "{space.0.value} {space.5.value} {space.5.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the padding (top, left/right, bottom) of the bottom sheet content area. This creates spacing around the content. Acceptable units: px.<br>CSS variable: --wm-bottomsheet-content-padding"
+                    }
+                }
+            }
+
+        }
+    }
+}

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

@@ -0,0 +1,86 @@
+{
+    "breadcrumb": {
+        "gap": {
+            "value": "{space.1.value}",
+            "type": "space"
+        },
+        "item": {
+            "gap": {
+                "@": {
+                    "value": "{space.1.value}",
+                    "type": "space"
+                }
+            },
+            "font-size": {
+                "value": "{body.large.font-size.value}",
+                "type": "font"
+            },
+            "font-family": {
+                "value": "{body.large.font-family.value}",
+                "type": "font"
+            },
+            "font-weight": {
+                "value": "{body.large.font-weight.value}",
+                "type": "font"
+            },
+            "line-height": {
+                "value": "{body.large.line-height.value}",
+                "type": "font"
+            },
+            "letter-spacing": {
+                "value": "{body.large.letter-spacing.value}",
+                "type": "font"
+            },
+            "text-transform": {
+                "value": "none",
+                "type": "radius"
+            },
+            "text": {
+                "decoration": {
+                    "@": {
+                        "value": "none",
+                        "type": "radius"
+                    },
+                    "hover": {
+                        "value": "underline",
+                        "type": "radius"
+                    },
+                    "focus": {
+                        "value": "underline",
+                        "type": "radius"
+                    },
+                    "active": {
+                        "value": "none",
+                        "type": "radius"
+                    }
+                }
+            },
+            "color": {
+                "@": {
+                    "value": "{color.primary.@.value}",
+                    "type": "color"
+                }
+            },
+            "icon": {
+                "color": {
+                    "value": "{color.on-background.@.value}",
+                    "type": "color"
+                },
+                "size": {
+                    "value": "{icon.size.sm.value}",
+                    "type": "space"
+                }
+            },
+            "separator": {
+                "color": {
+                    "value": "{color.outline.@.value}",
+                    "type": "color"
+                },
+                "size": {
+                    "value": "{icon.size.sm.value}",
+                    "type": "space"
+                }
+            }
+        }
+    }
+}