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

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

@@ -0,0 +1,321 @@
+{
+  "accordion": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".app-accordion.panel"
+        }
+      },
+      "appearances": {
+        "default": {
+          "mapping": {
+            "selector": {
+              "web": ".app-accordion.panel"
+            }
+          },
+          "variantGroups": {
+            "status": {
+              "default": {
+                "selector": {
+                  "web": ".panel-default"
+                }
+              },
+              "primary": {
+                "selector": {
+                  "web": ".panel-primary"
+                }
+              },
+              "secondary": {
+                "selector": {
+                  "web": ".panel-secondary"
+                }
+              },
+              "tertiary": {
+                "selector": {
+                  "web": ".panel-tertiary"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "group": {
+        "gap": {
+          "value": "{space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the vertical spacing between multiple accordion panels when they are stacked together in a group. This creates visual separation between each expandable section.<br>CSS variable: --wm-accordion-group-gap"
+          }
+        }
+      },
+      "background": {
+        "@": {
+          "value": "{color.surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of the entire accordion panel container. This is the main background color that appears behind all accordion content.<br>CSS variable: --wm-accordion-background"
+          }
+        }
+      },
+      "border": {
+        "radius": {
+          "value": "{radius.xs.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the corner rounding of the accordion panel container. This makes the accordion appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-accordion-border-radius"
+          }
+        },
+        "width": {},
+        "color": {}
+      },
+      "shadow": {
+        "value": "{elevation.shadow.1.value}",
+        "type": "radius",
+        "attributes": {
+          "subtype": "elevation",
+          "description": "Controls the drop shadow effect around the accordion panel. This creates a subtle elevation effect that makes the accordion appear to float above the background.<br>CSS variable: --wm-accordion-shadow"
+        }
+      },
+      "heading": {
+        "gap": {
+          "value": "{space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the horizontal spacing between elements within the accordion header (the clickable area). This includes spacing between the main title, description text, and any action buttons or icons.<br>CSS variable: --wm-accordion-heading-gap"
+          }
+        },
+        "padding": {
+          "block": {
+            "value": "{space.4.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the top and bottom padding (vertical spacing) inside the accordion header area. This creates breathing room above and below the heading content.<br>CSS variable: --wm-accordion-heading-padding-block"
+            }
+          },
+          "inline": {
+            "value": "{space.4.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the left and right padding (horizontal spacing) inside the accordion header area. This creates breathing room on the sides of the heading content.<br>CSS variable: --wm-accordion-heading-padding-inline"
+            }
+          }
+        },
+        "font-family": {
+          "value": "{h4.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Sets the font family (typeface) for the main title text in the accordion header. This is the primary text that users click to expand/collapse the accordion.<br>CSS variable: --wm-accordion-heading-font-family"
+          }
+        },
+        "font-size": {
+          "value": "{h4.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the size of the main title text in the accordion header. Larger values make the heading more prominent and easier to read.<br>CSS variable: --wm-accordion-heading-font-size"
+          }
+        },
+        "font-weight": {
+          "value": "{h4.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls the thickness/boldness of the main title text in the accordion header. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-accordion-heading-font-weight"
+          }
+        },
+        "line-height": {
+          "value": "{h4.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines of text in the accordion header title. Higher values create more space between lines.<br>CSS variable: --wm-accordion-heading-line-height"
+          }
+        },
+        "letter-spacing": {
+          "value": "{h4.letter-spacing.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "letter-spacing",
+            "description": "Controls the horizontal spacing between individual characters in the accordion header title. Positive values spread letters apart, negative values bring them closer.<br>CSS variable: --wm-accordion-heading-letter-spacing"
+          }
+        },
+        "color": {
+          "value": "{color.on-surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of the main title in the accordion header. This is the color of the clickable heading text.<br>CSS variable: --wm-accordion-heading-color"
+          }
+        },
+        "background": {
+          "value": "{color.surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of the accordion header area (the clickable section). This appears behind the title, description, and action elements.<br>CSS variable: --wm-accordion-heading-background"
+          }
+        }
+      },
+      "description": {
+        "font-family": {
+          "value": "{body.medium.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Sets the font family (typeface) for the subtitle/description text that appears under the main accordion heading. This is optional explanatory text that provides more context about the accordion section.<br>CSS variable: --wm-accordion-description-font-family"
+          }
+        },
+        "font-size": {
+          "value": "{body.medium.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the size of the subtitle/description text under the accordion heading. This text is typically smaller than the main heading to create a visual hierarchy.<br>CSS variable: --wm-accordion-description-font-size"
+          }
+        },
+        "font-weight": {
+          "value": "{body.medium.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls the thickness/boldness of the subtitle/description text under the accordion heading. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-accordion-description-font-weight"
+          }
+        },
+        "line-height": {
+          "value": "{body.medium.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines of text in the accordion description/subtitle. Higher values create more space between lines for better readability.<br>CSS variable: --wm-accordion-description-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 the accordion description/subtitle text. Positive values spread letters apart, negative values bring them closer.<br>CSS variable: --wm-accordion-description-letter-spacing"
+          }
+        },
+        "color": {
+          "value": "{color.on-surface.variant.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of the subtitle/description text under the accordion heading. This is typically a muted color to distinguish it from the main heading.<br>CSS variable: --wm-accordion-description-color"
+          }
+        }
+      },
+      "actions": {
+        "gap": {
+          "value": "{space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the horizontal spacing between action elements (buttons, badges, icons) within the accordion header. These are interactive elements like 'Edit', 'Delete', status badges, or expand/collapse icons that appear alongside the heading text.<br>CSS variable: --wm-accordion-actions-gap"
+          }
+        }
+      },
+      "content": {
+        "padding": {
+          "value": "{space.4.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the internal spacing (padding) around the expandable content area of the accordion. This is the space between the content border and the actual content (text, images, forms, etc.) that appears when the accordion is expanded.<br>CSS variable: --wm-accordion-content-padding"
+          }
+        }
+      }
+    },
+    "appearances": {
+      "default": {
+        "mapping": {},
+        "variantGroups": {
+          "status": {
+            "default": {
+              "heading": {
+                "background": {
+                  "value": "{color.surface.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "color": {
+                  "value": "{color.on-surface.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            },
+            "primary": {
+              "heading": {
+                "background": {
+                  "value": "{color.primary.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "color": {
+                  "value": "{color.primary.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            },
+            "secondary": {
+              "heading": {
+                "background": {
+                  "value": "{color.secondary.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "color": {
+                  "value": "{color.secondary.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            },
+            "tertiary": {
+              "heading": {
+                "background": {
+                  "value": "{color.tertiary.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "color": {
+                  "value": "{color.tertiary.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| color.@ | Sets the color of clickable links (anchor elements) that users can click to navigate to other pages or sections. This is typically a blue color to indicate the text is a link.<br>CSS variable: --wm-anchor-color |
+| font-size | Controls how large the text appears in clickable links. Larger values make the link text more prominent and easier to read, while smaller values make it more subtle.<br>CSS variable: --wm-anchor-font-size |
+| font-family | Sets the typeface (font style) for clickable links. This determines whether the link text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-anchor-font-family |
+| font-weight | Controls how thick or bold the 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 | Controls the vertical spacing between lines when link text wraps to multiple lines. Higher values create more space between lines for better readability.<br>CSS variable: --wm-anchor-line-height |
+| letter-spacing | Controls the horizontal spacing between individual letters in link text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-anchor-letter-spacing |
+| text-transform | Controls how the link text appears in terms of capitalization. 'none' keeps original case, 'uppercase' makes all letters big, 'lowercase' makes all letters small, 'capitalize' makes first letter of each word big.<br>CSS variable: --wm-anchor-text-transform |
+| text.decoration.@ | Controls whether link text has underlines or other decorative lines. 'none' removes underlines, 'underline' adds a line under the text, 'line-through' adds a line through the middle of the text.<br>CSS variable: --wm-anchor-text-decoration |
+| gap | Controls the spacing between icons and text in links. This creates visual separation between any icons (like arrows or symbols) and the link text.<br>CSS variable: --wm-anchor-gap |
+| icon.size | Controls how large icons appear in links (like arrow icons or symbol icons). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-anchor-icon-size |
+| image.size | Controls how large images appear in links (like profile pictures or thumbnails). This determines the width and height of any images used within link elements.<br>CSS variable: --wm-anchor-image-size |
+| image.radius | Controls the corner rounding of images in links. When set to 'circle', images appear as perfect circles. Other values create rounded rectangles with different amounts of rounding.<br>CSS variable: --wm-anchor-image-radius |

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

@@ -0,0 +1,189 @@
+{
+  "anchor": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".app-anchor",
+          "mobile": ".app-anchor"
+        }
+      }
+    },
+    "mapping": {
+      "color": {
+        "@": {
+          "value": "{color.primary.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of clickable links (anchor elements) that users can click to navigate to other pages or sections. This is typically a blue color to indicate the text is a link.<br>CSS variable: --wm-anchor-color"
+          }
+        }
+      },
+      "font-size": {
+        "value": "{body.medium.font-size.value}",
+        "type": "font",
+        "attributes": {
+          "subtype": "font-size",
+          "description": "Controls how large the text appears in clickable links. Larger values make the link text more prominent and easier to read, while smaller values make it more subtle.<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 clickable links. This determines whether the link 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 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 link text wraps to multiple lines. Higher values create more space between lines for better readability.<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 letters in link text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-anchor-letter-spacing"
+        }
+      },
+      "text-transform": {
+        "value": "none",
+        "type": "radius",
+        "attributes": {
+          "subtype": "text-transform",
+          "description": "Controls how the link text appears in terms of capitalization. 'none' keeps original case, 'uppercase' makes all letters big, 'lowercase' makes all letters small, 'capitalize' makes first letter of each word big.<br>CSS variable: --wm-anchor-text-transform"
+        }
+      },
+      "text": {
+        "decoration": {
+          "@": {
+            "value": "none",
+            "type": "radius",
+            "attributes": {
+              "subtype": "text-decoration",
+              "description": "Controls whether link text has underlines or other decorative lines. 'none' removes underlines, 'underline' adds a line under the text, 'line-through' adds a line through the middle of the text.<br>CSS variable: --wm-anchor-text-decoration"
+            }
+          }
+        }
+      },
+      "gap": {
+        "value": "{space.1.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the spacing between icons and text in links. This creates visual separation between any icons (like arrows or symbols) and the link text.<br>CSS variable: --wm-anchor-gap"
+        }
+      },
+      "icon": {
+        "size": {
+          "value": "{icon.size.@.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "icon-size",
+            "description": "Controls how large icons appear in links (like arrow icons or symbol icons). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-anchor-icon-size"
+          }
+        }
+      },
+      "image": {
+        "size": {
+          "value": "{icon.size.@.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "icon-size",
+            "description": "Controls how large images appear in links (like profile pictures or thumbnails). This determines the width and height of any images used within link elements.<br>CSS variable: --wm-anchor-image-size"
+          }
+        },
+        "radius": {
+          "value": "{radius.circle.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the corner rounding of images in links. When set to 'circle', images appear as perfect circles. Other values create rounded rectangles with different amounts of rounding.<br>CSS variable: --wm-anchor-image-radius"
+          }
+        }
+      },
+      "states": {
+        "hover": {
+          "color": {
+            "@": {
+              "value": "~\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.hover.value})\"",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            }
+          },
+          "text": {
+            "decoration": {
+              "@": {
+                "value": "none",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "text-decoration"
+                }
+              }
+            }
+          }
+        },
+        "focus": {
+          "color": {
+            "@": {
+              "value": "~\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.focus.value})\"",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            }
+          },
+          "text": {
+            "decoration": {
+              "@": {
+                "value": "none",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "text-decoration"
+                }
+              }
+            }
+          }
+        },
+        "active": {
+          "color": {
+            "@": {
+              "value": "~\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.active.value})\"",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            }
+          },
+          "text": {
+            "decoration": {
+              "@": {
+                "value": "none",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "text-decoration"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "appearances": {}
+  }
+}

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

@@ -0,0 +1,9 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| width | Controls how wide the audio player appears on the page. This determines the size of the audio controls (play button, progress bar, volume, etc.) that users interact with to play audio files.<br>CSS variable: --wm-audio-width |

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

@@ -0,0 +1,15 @@
+{
+  "audio": {
+    "mapping": {
+      "width": {
+        "value": "300px",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls how wide the audio player appears on the page. This determines the size of the audio controls (play button, progress bar, volume, etc.) that users interact with to play audio files.<br>CSS variable: --wm-audio-width"
+        }
+      }
+    },
+    "appearances": {}
+  }
+}

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

@@ -0,0 +1,19 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| background | Sets the background color of notification badges (small circular or pill-shaped elements that show numbers or status indicators). This is typically a bright color like red to grab attention.<br>CSS variable: --wm-badge-background |
+| color | Sets the text color of notification badges (the color of the numbers or text inside the badge). This should contrast well with the background color for readability.<br>CSS variable: --wm-badge-color |
+| min-height | Controls the minimum height of notification badges to ensure they're always tall enough to be visible and clickable, even when they contain small numbers or text.<br>CSS variable: --wm-badge-min-height |
+| inline.padding | Controls the left and right spacing inside notification badges (the horizontal padding). This creates breathing room around the badge content.<br>CSS variable: --wm-badge-inline-padding |
+| block.padding | Controls the top and bottom spacing inside notification badges (the vertical padding). This creates breathing room above and below the badge content.<br>CSS variable: --wm-badge-block-padding |
+| radius | Controls the corner rounding of notification badges. Larger values make badges more pill-shaped, smaller values make them more rectangular.<br>CSS variable: --wm-badge-radius |
+| font-family | Sets the typeface (font style) for notification badge text. This determines whether the badge numbers/text appear in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-badge-font-family |
+| font-size | Controls how large the text appears in notification badges. Since badges are small, this is typically a small font size to fit the compact space.<br>CSS variable: --wm-badge-font-size |
+| font-weight | Controls how thick or bold the badge text appears. Higher values (like 700) make the text thicker and more prominent, which helps badge numbers stand out.<br>CSS variable: --wm-badge-font-weight |
+| line-height | Controls the vertical spacing between lines in badge text. A value of 1 keeps lines close together, which is ideal for small badge content.<br>CSS variable: --wm-badge-line-height |
+| letter-spacing | Controls the horizontal spacing between individual letters in badge text. This can help make small badge text more readable.<br>CSS variable: --wm-badge-letter-spacing |