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

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

@@ -0,0 +1,249 @@
+{
+  "toggle": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".app-checkbox"
+        },
+        "states": {
+          "hover": {
+            "selector": {
+              "web": ".app-toggle label > input[type='checkbox']:hover"
+            }
+          },
+          "focus": {
+            "selector": {
+              "web": ".app-toggle label > input[type='checkbox']:focus"
+            }
+          },
+          "active": {
+            "selector": {
+              "web": ".app-toggle label > input[type='checkbox']:active"
+            }
+          },
+          "checked": {
+            "selector": {
+              "web": ".app-toggle label:has(>input[type='checkbox']:checked)"
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "width": {
+        "value": "52px",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls how wide toggle switches appear (on/off switches that users can flip to enable or disable features). This determines the horizontal size of the toggle switch track.<br>CSS variable: --wm-toggle-width"
+        }
+      },
+      "height": {
+        "value": "32px",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls how tall toggle switches appear (on/off switches that users can flip to enable or disable features). This determines the vertical size of the toggle switch track.<br>CSS variable: --wm-toggle-height"
+        }
+      },
+      "background": {
+        "@": {
+          "value": "{color.surface.container.highest.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of toggle switches (the track that the toggle handle slides along). This is the main background color of the toggle switch in its default/off state.<br>CSS variable: --wm-toggle-background"
+          }
+        }
+      },
+      "border": {
+        "width": {
+          "value": "2px",
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the thickness of the border around toggle switches. This creates the outline that defines the toggle switch shape and makes it visible to users.<br>CSS variable: --wm-toggle-border-width"
+          }
+        },
+        "color": {
+          "value": "{color.outline.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of the border around toggle switches. This determines the color of the outline that defines the toggle switch shape in its default/off state.<br>CSS variable: --wm-toggle-border-color"
+          }
+        },
+        "style": {
+          "value": "{border.style.base.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Controls the style of the border around toggle switches. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots, 'none' removes the border.<br>CSS variable: --wm-toggle-border-style"
+          }
+        }
+      },
+      "radius": {
+        "value": "{radius.pill.value}",
+        "type": "radius",
+        "attributes": {
+          "subtype": "radius",
+          "description": "Controls the corner rounding of toggle switches. When set to 'pill', the toggle appears with fully rounded ends, creating a pill-shaped appearance.<br>CSS variable: --wm-toggle-radius"
+        }
+      },
+      "state": {
+        "layer": {
+          "size": {
+            "value": "40px",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the size of the invisible clickable area around toggle switches (the state layer). This area is larger than the visible toggle, making it easier for users to click and interact with the toggle.<br>CSS variable: --wm-toggle-state-layer-size"
+            }
+          },
+          "color": {
+            "@": {
+              "value": "{color.outline.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the color of the state layer that appears when users hover, focus, or interact with toggle switches. This creates visual feedback to show that the toggle is interactive and responsive to user actions.<br>CSS variable: --wm-toggle-state-layer-color"
+              }
+            }
+          },
+          "opacity": {
+            "@": {
+              "value": "0",
+              "type": "radius",
+              "attributes": {
+                "subtype": "opacity",
+                "description": "Controls the transparency of the state layer that appears during user interactions (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-toggle-state-layer-opacity"
+              }
+            }
+          }
+        }
+      },
+      "handle": {
+        "size": {
+          "@": {
+            "value": "16px",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the size of toggle handles (the circular element that slides along the toggle track). This determines how large the draggable part of the toggle appears.<br>CSS variable: --wm-toggle-handle-size"
+            }
+          }
+        },
+        "color": {
+          "@": {
+            "value": "{color.outline.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of toggle handles (the circular element that slides along the toggle track). This determines what color the draggable part of the toggle appears in.<br>CSS variable: --wm-toggle-handle-color"
+            }
+          }
+        }
+      },
+      "states": {
+        "hover": {
+          "state": {
+            "layer": {
+              "opacity": {
+                "hover": {
+                  "value": "{opacity.hover.value}",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "opacity"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "focus": {
+          "state": {
+            "layer": {
+              "opacity": {
+                "focus": {
+                  "value": "{opacity.focus.value}",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "opacity"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "active": {
+          "state": {
+            "layer": {
+              "opacity": {
+                "active": {
+                  "value": "{opacity.active.value}",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "opacity"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "checked": {
+          "handle": {
+            "size": {
+              "@": {
+                "value": "16px",
+                "type": "space",
+                "attributes": {
+                  "subtype": "space"
+                }
+              }
+            },
+            "color": {
+              "@": {
+                "value": "{color.on-secondary.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              }
+            }
+          },
+          "background": {
+            "@": {
+              "value": "{color.secondary.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            }
+          },
+          "border": {
+            "color": {
+              "value": "{color.secondary.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            }
+          },
+          "state": {
+            "layer": {
+              "color": {
+                "@": {
+                  "value": "{color.secondary.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| margin | Outer margin around the tree.<br>CSS variable: --wm-tree-margin |
+| padding | Inner padding of the tree root.<br>CSS variable: --wm-tree-padding |
+| font-family | Font stack for tree labels.<br>CSS variable: --wm-tree-font-family |
+| node.color | Default (resting) text color for tree node labels.<br>CSS variable: --wm-tree-node-color |
+| node.background | Default (resting) label background for tree nodes.<br>CSS variable: --wm-tree-node-background |
+| node.radius | Border radius for tree node links and icon controls in the default state.<br>CSS variable: --wm-tree-node-radius |
+| node.padding | Inner padding of the tree root.<br>CSS variable: --wm-tree-node-padding |
+| node.margin | Outer margin of each tree node.<br>CSS variable: --wm-tree-node-margin |
+| node.height | ZTree: height of the tree node. <br>CSS variable: --wm-tree-node-height |
+| node.width | ZTree: width of the tree node. <br>CSS variable: --wm-tree-node-width |
+| node.label.font-size | ZTree: <code>.app-tree li a</code> <code>font-size</code>.<br>CSS variable: --wm-tree-node-label-font-size |
+| node.label.font-weight | 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-tree-node-label-font-weight |
+| node.label.text-align | Sets the text alignment of labels (text elements that describe or identify other content). This determines how the label text appears in relation to the surrounding content.<br>CSS variable: --wm-tree-node-label-text-align |
+| node.label.letter-spacing | 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-tree-node-label-letter-spacing |
+| node.label.text-decoration | Sets the text decoration of labels (text elements that describe or identify other content). This determines what decoration the label text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-tree-node-label-text-decoration |
+| node.child-indent | Nested list indent.<br>CSS variable: --wm-tree-node-child-indent |
+| node.icon.size | ZTree: size of the tree node icon. <br>CSS variable: --wm-tree-node-icon-size |
+| node.icon.align-items | ZTree: align-items of the tree node icon. <br>CSS variable: --wm-tree-node-icon-align-items |
+| node.icon.color | Default (resting) expand/collapse icon color.<br>CSS variable: --wm-tree-node-icon-color |

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

@@ -0,0 +1,265 @@
+{
+  "tree": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".app-tree:not(.app-tree-custom)"
+        },
+        "states": {
+          "hover": {
+            "selector": {
+              "web": " li a:has(:hover)"
+            }
+          },
+          "selected": {
+            "selector": {
+              "web": " li[treenode].selected>a, li[treenode].selected>span, li[treenode].selected>span::before, li[treenode].selected .curSelectedNode .node_name"
+            }
+          }
+        }
+      },
+      "appearances": {
+       
+      }
+    },
+    "mapping": {
+      "margin": {
+        "value": "{space.0.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Outer margin around the tree.<br>CSS variable: --wm-tree-margin"
+        }
+      },
+      "padding": {
+        "value": "{space.0.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Inner padding of the tree root.<br>CSS variable: --wm-tree-padding"
+        }
+      },
+      "font-family": {
+        "value": "{font.family.brand.value}",
+        "type": "font",
+        "attributes": {
+          "subtype": "font-family",
+          "description": "Font stack for tree labels.<br>CSS variable: --wm-tree-font-family"
+        }
+      },
+      "node": {
+        "color": {
+          "value": "{color.primary.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Default (resting) text color for tree node labels.<br>CSS variable: --wm-tree-node-color"
+          }
+        },
+        "background": {
+          "value": "{color.transparent.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Default (resting) label background for tree nodes.<br>CSS variable: --wm-tree-node-background"
+          }
+        },
+        "radius": {
+          "value": "0px",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Border radius for tree node links and icon controls in the default state.<br>CSS variable: --wm-tree-node-radius"
+          }
+        },
+        "padding": {
+          "value": "{space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Inner padding of the tree root.<br>CSS variable: --wm-tree-node-padding"
+          }
+        },
+        "margin": {
+          "value": "{space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Outer margin of each tree node.<br>CSS variable: --wm-tree-node-margin"
+          }
+        },
+        "height": {
+          "value": "30px",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "ZTree: height of the tree node. <br>CSS variable: --wm-tree-node-height"
+          }
+        },
+        "width": {
+          "value": "auto",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "ZTree: width of the tree node. <br>CSS variable: --wm-tree-node-width"
+          }
+        },
+        "label": {
+          "font-size": {
+            "value": "{body.medium.font-size.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "ZTree: <code>.app-tree li a</code> <code>font-size</code>.<br>CSS variable: --wm-tree-node-label-font-size"
+            }
+          },
+          "font-weight": {
+            "value": "inherit",
+            "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-tree-node-label-font-weight"
+            }
+          },
+          "text-align": {
+            "value": "start",
+            "type": "text",
+            "attributes": {
+              "subtype": "text-align",
+              "description": "Sets the text alignment of labels (text elements that describe or identify other content). This determines how the label text appears in relation to the surrounding content.<br>CSS variable: --wm-tree-node-label-text-align"
+            }
+          },
+          "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-tree-node-label-letter-spacing"
+            }
+          },
+          "text-decoration": {
+            "value": "none",
+            "type": "text",
+            "attributes": {
+              "subtype": "text-decoration",
+              "description": "Sets the text decoration of labels (text elements that describe or identify other content). This determines what decoration the label text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-tree-node-label-text-decoration"
+            }
+          }
+        },
+        "child-indent": {
+          "value": "0 0 0 20px",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Nested list indent.<br>CSS variable: --wm-tree-node-child-indent"
+          }
+        },
+        "icon": {
+          "size": {
+            "value": "14px",
+            "type": "space",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "ZTree: size of the tree node icon. <br>CSS variable: --wm-tree-node-icon-size"
+            }
+          },
+          "align-items": {
+            "value": "center",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-family",
+              "description": "ZTree: align-items of the tree node icon. <br>CSS variable: --wm-tree-node-icon-align-items"
+            }
+          },
+          "color": {
+            "value": "{color.primary.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Default (resting) expand/collapse icon color.<br>CSS variable: --wm-tree-node-icon-color"
+            }
+          }
+        }
+      },
+      "states": {
+        "hover": {
+          "node": {
+            "color": {
+              "value": "{color.secondary.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Label text color when hovering a tree link.<br>CSS variable: --wm-tree-node-color"
+              }
+            },
+            "background": {
+              "value": "{color.transparent.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Label background when hovering a tree link.<br>CSS variable: --wm-tree-node-background"
+              }
+            },
+            "icon": {
+              "color": {
+                "value": "{color.secondary.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Icon color when hovering expand/collapse controls (sibling link).<br>CSS variable: --wm-tree-node-icon-color"
+                }
+              }
+            },
+            "radius": {
+              "value": "{radius.xs.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "radius",
+                "description": "Border radius for the tree node link on hover.<br>CSS variable: --wm-tree-node-radius"
+              }
+            }
+          }
+        },
+        "selected": {
+          "node": {
+            "color": {
+              "value": "{color.white.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Label text color for a selected tree node.<br>CSS variable: --wm-tree-node-color"
+              }
+            },
+            "background": {
+              "value": "{color.primary.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Label background for a selected tree node.<br>CSS variable: --wm-tree-node-background"
+              }
+            },
+            "icon": {
+              "color": {
+                "value": "{color.white.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Expand/collapse icon color for a selected tree node.<br>CSS variable: --wm-tree-node-icon-color"
+                }
+              }
+            },
+            "radius": {
+              "value": "{radius.xs.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "radius",
+                "description": "Border radius for the selected tree node link.<br>CSS variable: --wm-tree-node-radius"
+              }
+            }
+          }
+        }
+      }
+    },
+    "appearances": { }
+  }
+}

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

@@ -0,0 +1,10 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| width | Controls how wide video players appear on the page. This determines the horizontal size of the video player window that users interact with to play video content.<br>CSS variable: --wm-video-width |
+| height | Controls how tall video players appear on the page. This determines the vertical size of the video player window that users interact with to play video content.<br>CSS variable: --wm-video-height |

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

@@ -0,0 +1,23 @@
+{
+  "video": {
+    "mapping": {
+      "width": {
+        "value": "300px",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls how wide video players appear on the page. This determines the horizontal size of the video player window that users interact with to play video content.<br>CSS variable: --wm-video-width"
+        }
+      },
+      "height": {
+        "value": "150px",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls how tall video players appear on the page. This determines the vertical size of the video player window that users interact with to play video content.<br>CSS variable: --wm-video-height"
+        }
+      }
+    },
+    "appearances": {}
+  }
+}

package/src/tokens/web/components/wizard/Readme.md

@@ -0,0 +1,41 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Wizard Variants
+
+This component supports the following appearances and variants. To apply them, use the corresponding class(es) on your widget.
+
+---
+
+## Appearance: Dottedstepper
+
+**Appearance Class:** `wizard-dottedstepper`
+
+---
+
+## Appearance: Dottedstepper-textinline
+
+**Appearance Class:** `wizard-dottedstepper-text-inline`
+
+---
+
+## Appearance: Classic
+
+**Appearance Class:** `wizard-classic`
+
+---
+
+## Appearance: Vertical
+
+**Appearance Class:** `wizard-vertical`
+
+---
+
+## Appearance: Tabstepper
+
+**Appearance Class:** `wizard-tabstepper`
+
+**Variants:**
+
+| Variant Name | Class |
+|--------------|-------|
+| Vertical | `wizard-tabstepper wizard-vertical` |