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

package/src/tokens/web/components/picture/picture.json

@@ -0,0 +1,233 @@
+{
+  "picture": {
+    "meta": {
+      "appearances": {
+        "default": {
+          "mapping": {
+            "selector": {
+              "web": ".app-picture",
+              "mobile": ".app-picture"
+            }
+          },
+          "variantGroups": {
+            "shape": {
+              "default": {
+                "selector": {
+                  "web": " "
+                }
+              },
+              "rounded": {
+                "selector": {
+                  "web": ".img-rounded",
+                  "mobile": ".img-rounded"
+                }
+              },
+              "circle": {
+                "selector": {
+                  "web": ".img-circle",
+                  "mobile": ".img-circle"
+                }
+              }
+            }
+          }
+        },
+        "thumbnail": {
+          "mapping": {
+            "selector": {
+              "web": ".app-picture.img-thumbnail",
+              "mobile": ".app-picture.img-thumbnail"
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "width": {
+        "value": "auto",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls how wide images appear on the page. 'auto' lets the image size itself naturally, while specific values (px, %, em, rem, vw) set a fixed width.<br>CSS variable: --wm-picture-width"
+        }
+      },
+      "height": {
+        "value": "auto",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls how tall images appear on the page. 'auto' lets the image size itself naturally, while specific values (px, %, em, rem, vh) set a fixed height.<br>CSS variable: --wm-picture-height"
+        }
+      },
+      "radius": {
+        "value": "{radius.none.value}",
+        "type": "radius",
+        "attributes": {
+          "subtype": "radius",
+          "description": "Controls the corner rounding of images. When set to 'none', images have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-picture-radius"
+        }
+      },
+      "padding": {
+        "value": "{space.0.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the internal spacing around images (the space between the image and its border). This creates breathing room around the image content.<br>CSS variable: --wm-picture-padding"
+        }
+      },
+      "border": {
+        "color": {
+          "value": "{color.border.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of the outline around images. This creates a colored border around the image to define its boundaries.<br>CSS variable: --wm-picture-border-color"
+          }
+        },
+        "style": {
+          "value": "{border.style.none.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Controls the style of the outline around images. 'none' removes the border, 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-picture-border-style"
+          }
+        },
+        "width": {
+          "value": "{border.width.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the thickness of the outline around images. When set to 0, there's no visible border. Higher values create thicker borders around the image.<br>CSS variable: --wm-picture-border-width"
+          }
+        }
+      },
+      "background": {
+        "value": "{color.transparent.value}",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Sets the background color of images (the area behind the image). When set to 'transparent', images have no background color, making them transparent.<br>CSS variable: --wm-picture-background"
+        }
+      }
+    },
+    "appearances": {
+      "default": {
+        "mapping": {
+          "radius": {
+            "value": "{radius.none.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius"
+            }
+          },
+          "padding": {
+            "value": "{space.0.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space"
+            }
+          },
+          "border": {
+            "color": {
+              "value": "{color.border.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            },
+            "style": {
+              "value": "{border.style.none.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "border-style"
+              }
+            },
+            "width": {
+              "value": "{border.width.0.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "border-width"
+              }
+            }
+          },
+          "background": {
+            "value": "{color.transparent.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color"
+            }
+          }
+        },
+        "variantGroups": {
+          "shape": {
+            "rounded": {
+              "radius": {
+                "value": "{radius.xs.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "radius"
+                }
+              }
+            },
+            "circle": {
+              "radius": {
+                "value": "{radius.circle.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "radius"
+                }
+              }
+            }
+          }
+        }
+      },
+      "thumbnail": {
+        "mapping": {
+          "radius": {
+            "value": "{radius.xs.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius"
+            }
+          },
+          "padding": {
+            "value": "{space.1.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space"
+            }
+          },
+          "border": {
+            "color": {
+              "value": "{color.border.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            },
+            "style": {
+              "value": "{border.style.base.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "border-style"
+              }
+            },
+            "width": {
+              "value": "{border.width.base.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "border-width"
+              }
+            }
+          },
+          "background": {
+            "value": "{color.surface.container.low.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color"
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/tokens/web/components/popover/Token.Readme.md

@@ -0,0 +1,34 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| z-index | Controls the stacking order of popover components (small overlay windows that appear when users hover or click on elements). Higher values make the popover appear above other elements, ensuring it's visible on top of all other content.<br>CSS variable: --wm-popover-z-index |
+| gap | Controls the spacing between popover components and their trigger elements (the elements that cause the popover to appear). This creates visual separation between the popover and the element that triggered it.<br>CSS variable: --wm-popover-gap |
+| margin | Controls the margin around popover components (small overlay windows that appear when users hover or click on elements). This creates space between the popover and the edges of the screen or other elements.<br>CSS variable: --wm-popover-margin |
+| padding | Controls the internal spacing inside popover components (small overlay windows that appear when users hover or click on elements). This creates breathing room around the popover content.<br>CSS variable: --wm-popover-padding |
+| background | Sets the background color of popover components (small overlay windows that appear when users hover or click on elements). This is the main background color that appears behind the popover content.<br>CSS variable: --wm-popover-background |
+| color | Sets the text color of popover components (small overlay windows that appear when users hover or click on elements). This determines what color the popover text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-color |
+| shadow | Controls the drop shadow effect around popover components (small overlay windows that appear when users hover or click on elements). This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-shadow |
+| radius | Controls the corner rounding of popover components (small overlay windows that appear when users hover or click on elements). This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-radius |
+| border.color | Sets the border color.<br>CSS variable: --wm-popover-border-color |
+| border.width | Controls the border thickness.<br>CSS variable: --wm-popover-border-width |
+| border.style | Sets the border style. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.<br>CSS variable: --wm-popover-border-style |
+| header.padding | Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding |
+| header.color | Sets the text color of popover headers (the top section of popover windows that contains the title). This determines what color the header text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-header-color |
+| header.font-family | Sets the typeface (font style) for popover headers (the top section of popover windows that contains the title). This determines whether the header text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-header-font-family |
+| header.font-weight | Controls how thick or bold the popover headers appear (the top section of popover windows that contains the title). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-header-font-weight |
+| header.font-size | Controls how large the popover headers appear (the top section of popover windows that contains the title). This affects the size of the header text that users see in the popover.<br>CSS variable: --wm-popover-header-font-size |
+| header.line-height | Controls the vertical spacing between lines when popover headers wrap to multiple lines. This ensures proper spacing for the header text displayed in the popover.<br>CSS variable: --wm-popover-header-line-height |
+| header.letter-spacing | Controls the horizontal spacing between individual characters in popover headers. This can help make the header text more readable and properly spaced.<br>CSS variable: --wm-popover-header-letter-spacing |
+| body.padding | Controls the internal spacing inside popover body content (the main content area of popover windows). This creates breathing room around the popover content.<br>CSS variable: --wm-popover-body-padding |
+| body.font-family | Sets the typeface (font style) for popover body content (the main content area of popover windows). This determines whether the body text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-body-font-family |
+| body.font-size | Controls how large the popover body content appears (the main content area of popover windows). This affects the size of the body text that users see in the popover.<br>CSS variable: --wm-popover-body-font-size |
+| body.font-weight | Controls how thick or bold the popover body content appears (the main content area of popover windows). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-body-font-weight |
+| body.line-height | Controls the vertical spacing between lines when popover body content wraps to multiple lines. This ensures proper spacing for the body text displayed in the popover.<br>CSS variable: --wm-popover-body-line-height |
+| body.letter-spacing | Controls the horizontal spacing between individual characters in popover body content. This can help make the body text more readable and properly spaced.<br>CSS variable: --wm-popover-body-letter-spacing |
+| arrow.background | Sets the background color of popover arrows (the small triangular indicators that point from the popover to its trigger element). This creates the visual connection between the popover and the element that triggered it.<br>CSS variable: --wm-popover-arrow-background |
+| arrow.size | Controls how large popover arrows appear (the small triangular indicators that point from the popover to its trigger element). This affects the size of the arrow that connects the popover to the triggering element.<br>CSS variable: --wm-popover-arrow-size |

package/src/tokens/web/components/popover/popover.json

@@ -0,0 +1,222 @@
+{
+  "popover": {
+    "mapping": {
+      "z-index": {
+        "value": "1060",
+        "type": "radius",
+        "attributes": {
+          "subtype": "radius",
+          "description": "Controls the stacking order of popover components (small overlay windows that appear when users hover or click on elements). Higher values make the popover appear above other elements, ensuring it's visible on top of all other content.<br>CSS variable: --wm-popover-z-index"
+        }
+      },
+      "gap": {
+        "value": "~\"calc({space.1.value} * 2.5)\"",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the spacing between popover components and their trigger elements (the elements that cause the popover to appear). This creates visual separation between the popover and the element that triggered it.<br>CSS variable: --wm-popover-gap"
+        }
+      },
+      "margin": {
+        "value": "{space.1.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the margin around popover components (small overlay windows that appear when users hover or click on elements). This creates space between the popover and the edges of the screen or other elements.<br>CSS variable: --wm-popover-margin"
+        }
+      },
+      "padding": {
+        "value": "{space.0.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the internal spacing inside popover components (small overlay windows that appear when users hover or click on elements). This creates breathing room around the popover content.<br>CSS variable: --wm-popover-padding"
+        }
+      },
+      "background": {
+        "value": "{color.surface.container.@.value}",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Sets the background color of popover components (small overlay windows that appear when users hover or click on elements). This is the main background color that appears behind the popover content.<br>CSS variable: --wm-popover-background"
+        }
+      },
+      "color": {
+        "value": "{color.on-surface.@.value}",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Sets the text color of popover components (small overlay windows that appear when users hover or click on elements). This determines what color the popover text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-color"
+        }
+      },
+      "shadow": {
+        "value": "{elevation.shadow.1.value}",
+        "type": "radius",
+        "attributes": {
+          "subtype": "elevation",
+          "description": "Controls the drop shadow effect around popover components (small overlay windows that appear when users hover or click on elements). This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-shadow"
+        }
+      },
+      "radius": {
+        "value": "{radius.sm.value}",
+        "type": "radius",
+        "attributes": {
+          "subtype": "radius",
+          "description": "Controls the corner rounding of popover components (small overlay windows that appear when users hover or click on elements). This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-radius"
+        }
+      },
+      "border": {
+        "color": {
+          "value": "{color.transparent.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the border color.<br>CSS variable: --wm-popover-border-color"
+          }
+        },
+        "width": {
+          "value": "{border.width.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the border thickness.<br>CSS variable: --wm-popover-border-width"
+          }
+        },
+        "style": {
+          "value": "none",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Sets the border style. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.<br>CSS variable: --wm-popover-border-style"
+          }
+        }
+      },
+      "header": {
+        "padding": {
+          "value": "{space.4.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding"
+          }
+        },
+        "color": {
+          "value": "{color.on-surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of popover headers (the top section of popover windows that contains the title). This determines what color the header text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-header-color"
+          }
+        },
+        "font-family": {
+          "value": "{h4.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Sets the typeface (font style) for popover headers (the top section of popover windows that contains the title). This determines whether the header text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-header-font-family"
+          }
+        },
+        "font-weight": {
+          "value": "{h4.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold the popover headers appear (the top section of popover windows that contains the title). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-header-font-weight"
+          }
+        },
+        "font-size": {
+          "value": "{h4.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls how large the popover headers appear (the top section of popover windows that contains the title). This affects the size of the header text that users see in the popover.<br>CSS variable: --wm-popover-header-font-size"
+          }
+        },
+        "line-height": {
+          "value": "{h4.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when popover headers wrap to multiple lines. This ensures proper spacing for the header text displayed in the popover.<br>CSS variable: --wm-popover-header-line-height"
+          }
+        },
+        "letter-spacing": {
+          "value": "{h4.letter-spacing.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "letter-spacing",
+            "description": "Controls the horizontal spacing between individual characters in popover headers. This can help make the header text more readable and properly spaced.<br>CSS variable: --wm-popover-header-letter-spacing"
+          }
+        }
+      },
+      "body": {
+        "padding": {
+          "value": "{space.4.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the internal spacing inside popover body content (the main content area of popover windows). This creates breathing room around the popover content.<br>CSS variable: --wm-popover-body-padding"
+          }
+        },
+        "font-family": {
+          "value": "{body.medium.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Sets the typeface (font style) for popover body content (the main content area of popover windows). This determines whether the body text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-body-font-family"
+          }
+        },
+        "font-size": {
+          "value": "{body.medium.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls how large the popover body content appears (the main content area of popover windows). This affects the size of the body text that users see in the popover.<br>CSS variable: --wm-popover-body-font-size"
+          }
+        },
+        "font-weight": {
+          "value": "{body.medium.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold the popover body content appears (the main content area of popover windows). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-body-font-weight"
+          }
+        },
+        "line-height": {
+          "value": "{body.medium.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when popover body content wraps to multiple lines. This ensures proper spacing for the body text displayed in the popover.<br>CSS variable: --wm-popover-body-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 popover body content. This can help make the body text more readable and properly spaced.<br>CSS variable: --wm-popover-body-letter-spacing"
+          }
+        }
+      },
+      "arrow": {
+        "background": {
+          "value": "{color.surface.container.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of popover arrows (the small triangular indicators that point from the popover to its trigger element). This creates the visual connection between the popover and the element that triggered it.<br>CSS variable: --wm-popover-arrow-background"
+          }
+        },
+        "size": {
+          "value": "{space.3.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls how large popover arrows appear (the small triangular indicators that point from the popover to its trigger element). This affects the size of the arrow that connects the popover to the triggering element.<br>CSS variable: --wm-popover-arrow-size"
+          }
+        }
+      }
+    }
+  }
+}

package/src/tokens/web/components/progress-bar/Readme.md

@@ -0,0 +1,35 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Progress-bar Variants
+
+This component supports the following appearances and variants. To apply them, use the corresponding class(es) on your widget.
+
+---
+
+## Appearance: Filled
+
+**Variants:**
+
+| Variant Name | Class |
+|--------------|-------|
+| Default | `app-progress progress-bar-default` |
+| Success | `app-progress progress-bar-success` |
+| Info | `app-progress progress-bar-info` |
+| Warning | `app-progress progress-bar-warning` |
+| Danger | `app-progress progress-bar-danger` |
+
+---
+
+## Appearance: Striped
+
+**Appearance Class:** `app-progress progress-bar-striped`
+
+**Variants:**
+
+| Variant Name | Class |
+|--------------|-------|
+| Default | `app-progress progress-bar-striped progress-bar-default` |
+| Success | `app-progress progress-bar-striped progress-bar-success` |
+| Info | `app-progress progress-bar-striped progress-bar-info` |
+| Warning | `app-progress progress-bar-striped progress-bar-warning` |
+| Danger | `app-progress progress-bar-striped progress-bar-danger` |

package/src/tokens/web/components/progress-bar/Token.Readme.md

@@ -0,0 +1,15 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| height | Controls how tall progress bars appear (loading indicators that show completion percentage). This determines the vertical size of the progress bar track.<br>CSS variable: --wm-progress-bar-height |
+| radius | Controls the corner rounding of progress bars (loading indicators). This makes the progress bars appear with rounded corners instead of sharp edges for a softer appearance.<br>CSS variable: --wm-progress-bar-radius |
+| margin | Controls the outer spacing around progress bars (the space between the progress bar and surrounding elements). This creates breathing room around the loading indicator.<br>CSS variable: --wm-progress-bar-margin |
+| transition.time | Controls how long progress bar animations take to complete (the smooth movement of the progress indicator). Shorter values make animations faster, longer values make them slower.<br>CSS variable: --wm-progress-bar-transition-time |
+| stroke.inactive | Sets the background color of progress bars (the empty/unfilled portion of the loading indicator). This is the color of the track that shows the remaining progress.<br>CSS variable: --wm-progress-bar-stroke-inactive |
+| stroke.active | Sets the fill color of progress bars (the filled portion of the loading indicator). This is the color that shows the completed progress.<br>CSS variable: --wm-progress-bar-stroke-active |
+| label.color | Sets the text color of progress bar labels (the percentage or text that appears on the progress bar). This should contrast well with the progress bar colors for readability.<br>CSS variable: --wm-progress-bar-label-color |