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

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

@@ -0,0 +1,100 @@
+{
+  "badge": {
+    "meta": {},
+    "mapping": {
+      "background": {
+        "value": "{color.error.@.value}",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "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": {
+        "value": "{color.on-error.@.value}",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "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": {
+        "value": "20px",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "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": {
+          "value": "~\"calc({space.2.value} * 0.75)\"",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "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": {
+          "value": "{space.1.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "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": {
+        "value": "{radius.lg.value}",
+        "type": "radius",
+        "attributes": {
+          "subtype": "radius",
+          "description": "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": {
+        "value": "{body.small.font-family.value}",
+        "type": "font",
+        "attributes": {
+          "subtype": "font-family",
+          "description": "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": {
+        "value": "{body.small.font-size.value}",
+        "type": "font",
+        "attributes": {
+          "subtype": "font-size",
+          "description": "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": {
+        "value": "{font.weight.700.value}",
+        "type": "font",
+        "attributes": {
+          "subtype": "font-weight",
+          "description": "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": {
+        "value": "1",
+        "type": "font",
+        "attributes": {
+          "subtype": "line-height",
+          "description": "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": {
+        "value": "{body.small.letter-spacing.value}",
+        "type": "font",
+        "attributes": {
+          "subtype": "letter-spacing",
+          "description": "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"
+        }
+      }
+    },
+    "appearances": {}
+  }
+}

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

@@ -0,0 +1,23 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Breadcrumb Variants
+
+This component supports the following appearances and variants. To apply them, use the corresponding class(es) on your widget.
+
+---
+
+## Appearance: Classic
+
+**Appearance Class:** `app-breadcrumb classic`
+
+---
+
+## Appearance: Attribute-based
+
+**Appearance Class:** `app-breadcrumb attribute-based`
+
+---
+
+## Appearance: Path-based
+
+**Appearance Class:** `app-breadcrumb path-based`

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

@@ -0,0 +1,21 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| gap | Controls the vertical spacing between breadcrumb navigation rows when they wrap to multiple lines. This creates breathing room between different lines of navigation links.<br>CSS variable: --wm-breadcrumb-gap |
+| item.gap | Controls the horizontal spacing between elements within each breadcrumb navigation item (like between icons and text, or between text and separators).<br>CSS variable: --wm-breadcrumb-item-gap |
+| item.font-size | Controls how large the text appears in breadcrumb navigation links (like 'Home', 'Products', 'Category'). This affects the size of the clickable navigation text.<br>CSS variable: --wm-breadcrumb-item-font-size |
+| item.font-family | Sets the typeface (font style) for breadcrumb navigation links. This determines whether the navigation text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-breadcrumb-item-font-family |
+| item.font-weight | Controls how thick or bold the breadcrumb navigation text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-breadcrumb-item-font-weight |
+| item.line-height | Controls the vertical spacing between lines when breadcrumb navigation text wraps to multiple lines. Higher values create more space between lines for better readability.<br>CSS variable: --wm-breadcrumb-item-line-height |
+| item.text-transform | Controls text transformation for breadcrumb items. Acceptable values: none, uppercase, lowercase, capitalize.<br>CSS variable: --wm-breadcrumb-item-text-transform |
+| item.color | Sets the text color of breadcrumb items.<br>CSS variable: --wm-breadcrumb-item-color |
+| item.text.decoration | Controls text decoration for breadcrumb items. Acceptable values: none, underline, overline, line-through.<br>CSS variable: --wm-breadcrumb-item-text-decoration |
+| item.separator.color | Sets the color of breadcrumb separators.<br>CSS variable: --wm-breadcrumb-item-separator-color |
+| item.separator.size | Controls the size of breadcrumb separators.<br>CSS variable: --wm-breadcrumb-item-separator-size |
+| item.icon.color | Sets the color of breadcrumb item icons.<br>CSS variable: --wm-breadcrumb-item-icon-color |
+| item.icon.size | Controls the size of breadcrumb item icons.<br>CSS variable: --wm-breadcrumb-item-icon-size |

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

@@ -0,0 +1,392 @@
+{
+  "breadcrumb": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".app-breadcrumb"
+        },
+        "states": {
+          "hover": {
+            "selector": {
+              "web": ":is(a):hover,:is(i):hover"
+            }
+          },
+          "active": {
+            "selector": {
+              "web": ":has(:active)"
+            }
+          },
+          "on-active": {
+            "selector": {
+              "web": " li.active"
+            }
+          },
+          "focus": {
+            "selector": {
+              "web": ":has(:focus)"
+            }
+          }
+        }
+      },
+      "appearances": {
+        "classic": {
+          "mapping": {
+            "selector": {
+              "web": ".app-breadcrumb.classic"
+            }
+          }
+        },
+        "attribute-based": {
+          "mapping": {
+            "selector": {
+              "web": ".app-breadcrumb.attribute-based"
+            }
+          }
+        },
+        "path-based": {
+          "mapping": {
+            "selector": {
+              "web": ".app-breadcrumb.path-based"
+            },
+            "states": {
+              "active": {
+                "selector": {
+                  "web": " li.active"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "icon": {
+        "font-family": {
+          "value": "wavicon",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family"
+          }
+        },
+        "content": {
+          "value": "'/\\00a0'",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family"
+          }
+        }
+      },
+      "gap": {
+        "value": "{space.1.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the vertical spacing between breadcrumb navigation rows when they wrap to multiple lines. This creates breathing room between different lines of navigation links.<br>CSS variable: --wm-breadcrumb-gap"
+        }
+      },
+      "item": {
+        "gap": {
+          "value": "{space.1.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the horizontal spacing between elements within each breadcrumb navigation item (like between icons and text, or between text and separators).<br>CSS variable: --wm-breadcrumb-item-gap"
+          }
+        },
+        "padding": {
+          "value": "{space.9.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space"
+          }
+        },
+        "font-size": {
+          "value": "{body.large.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls how large the text appears in breadcrumb navigation links (like 'Home', 'Products', 'Category'). This affects the size of the clickable navigation text.<br>CSS variable: --wm-breadcrumb-item-font-size"
+          }
+        },
+        "font-family": {
+          "value": "{body.large.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Sets the typeface (font style) for breadcrumb navigation links. This determines whether the navigation text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-breadcrumb-item-font-family"
+          }
+        },
+        "font-weight": {
+          "value": "{body.large.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold the breadcrumb navigation text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-breadcrumb-item-font-weight"
+          }
+        },
+        "line-height": {
+          "value": "{body.large.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when breadcrumb navigation text wraps to multiple lines. Higher values create more space between lines for better readability.<br>CSS variable: --wm-breadcrumb-item-line-height"
+          }
+        },
+        "letter-spacing": {
+          "value": "{body.large.letter-spacing.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "letter-spacing"
+          }
+        },
+        "text-transform": {
+          "value": "none",
+          "type": "radius",
+          "attributes": {
+            "subtype": "text-transform",
+            "description": "Controls text transformation for breadcrumb items. Acceptable values: none, uppercase, lowercase, capitalize.<br>CSS variable: --wm-breadcrumb-item-text-transform"
+          }
+        },
+        "color": {
+          "value": "{color.primary.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of breadcrumb items.<br>CSS variable: --wm-breadcrumb-item-color"
+          }
+        },
+        "text": {
+          "decoration": {
+            "value": "none",
+            "type": "radius",
+            "attributes": {
+              "subtype": "text-decoration",
+              "description": "Controls text decoration for breadcrumb items. Acceptable values: none, underline, overline, line-through.<br>CSS variable: --wm-breadcrumb-item-text-decoration"
+            }
+          }
+        },
+        "separator": {
+          "color": {
+            "value": "{color.outline.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of breadcrumb separators.<br>CSS variable: --wm-breadcrumb-item-separator-color"
+            }
+          },
+          "size": {
+            "value": "{icon.size.sm.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "Controls the size of breadcrumb separators.<br>CSS variable: --wm-breadcrumb-item-separator-size"
+            }
+          }
+        },
+        "icon": {
+          "color": {
+            "value": "{color.on-background.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of breadcrumb item icons.<br>CSS variable: --wm-breadcrumb-item-icon-color"
+            }
+          },
+          "size": {
+            "value": "{icon.size.sm.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "Controls the size of breadcrumb item icons.<br>CSS variable: --wm-breadcrumb-item-icon-size"
+            }
+          }
+        }
+      },
+      "states": {
+        "hover": {
+          "item": {
+            "text": {
+              "decoration": {
+                "value": "underline",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "text-decoration"
+                }
+              }
+            },
+            "color": {
+              "value": "~\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.hover.value})\"",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            }
+          }
+        },
+        "active": {
+          "item": {
+            "text": {
+              "decoration": {
+                "value": "none",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "text-decoration"
+                }
+              }
+            },
+            "color": {
+              "value": "~\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.active.value})\"",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            }
+          }
+        },
+        "on-active": {
+          "item": {
+            "text": {
+              "decoration": {
+                "value": "none",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "text-decoration"
+                }
+              }
+            },
+            "color": {
+              "value": "~\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.active.value})\"",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            }
+          }
+        },
+        "focus": {
+          "item": {
+            "text": {
+              "decoration": {
+                "value": "none",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "text-decoration"
+                }
+              },
+              "color": {
+                "value": "~\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.focus.value})\"",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "appearances": {
+      "classic": {
+        "mapping": {
+          "icon": {
+            "font-family": {
+              "value": "wavicon",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-family"
+              }
+            },
+            "content": {
+              "value": "'/\\00a0'",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-family"
+              }
+            }
+          }
+        }
+      },
+      "attribute-based": {
+        "mapping": {
+          "icon": {
+            "font-family": {
+              "value": "wavicon",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-family"
+              }
+            },
+            "content": {
+              "value": "\"\\f1d2\"",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-family"
+              }
+            }
+          }
+        }
+      },
+      "path-based": {
+        "mapping": {
+          "height": {
+            "value": "46px",
+            "type": "space",
+            "attributes": {
+              "subtype": "space"
+            }
+          },
+          "background": {
+            "value": "{color.background.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color"
+            }
+          },
+          "box-shadow": {
+            "value": "7px 0 14px rgba(0, 0, 0, .07)",
+            "type": "shadow",
+            "attributes": {
+              "subtype": "elevation"
+            }
+          },
+          "icon": {
+            "font-family": {
+              "value": "FontAwesome",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-family"
+              }
+            },
+            "content": {
+              "value": "\"\\f101\"",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-family"
+              }
+            }
+          },
+          "states": {
+            "active": {
+              "background": {
+                "value": "{color.info.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              },
+              "item": {
+                "color": {
+                  "value": "{color.on-info.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Btn 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 | `btn-filled btn-default` |
+| Primary | `btn-filled btn-primary` |
+| Secondary | `btn-filled btn-secondary` |
+| Tertiary | `btn-filled btn-tertiary` |
+
+---
+
+## Appearance: Outlined
+
+**Appearance Class:** `btn-outlined`
+
+**Variants:**
+
+| Variant Name | Class |
+|--------------|-------|
+| Default | `btn-outlined btn-default` |
+| Primary | `btn-outlined btn-primary` |
+| Secondary | `btn-outlined btn-secondary` |
+| Tertiary | `btn-outlined btn-tertiary` |
+
+---
+
+## Appearance: Text
+
+**Appearance Class:** `btn-text`
+
+**Variants:**
+
+| Variant Name | Class |
+|--------------|-------|
+| Default | `btn-text btn-default` |
+| Primary | `btn-text btn-primary` |
+| Secondary | `btn-text btn-secondary` |
+| Tertiary | `btn-text btn-tertiary` |
+
+---
+
+## Appearance: Transparent
+
+**Appearance Class:** `btn-transparent`

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

@@ -0,0 +1,29 @@
+<!-- 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 buttons (clickable elements that users interact with to perform actions). This is the main background color that appears behind the button text and icons.<br>CSS variable: --wm-btn-background |
+| color | Sets the text color of buttons (clickable elements that users interact with to perform actions). This determines what color the button text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-btn-color |
+| font-size | Controls how large the button text appears (the text content within clickable buttons). This affects the size of the button text that users see and interact with.<br>CSS variable: --wm-btn-font-size |
+| font-family | Sets the typeface (font style) for button text (the text content within clickable buttons). This determines whether the button text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-btn-font-family |
+| font-weight | Controls how thick or bold the button text appears (the text content within clickable buttons). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-btn-font-weight |
+| line-height | Controls the vertical spacing between lines when button text wraps to multiple lines. This ensures proper spacing for the button text displayed in the button.<br>CSS variable: --wm-btn-line-height |
+| letter-spacing | Controls the horizontal spacing between individual characters in button text (the text content within clickable buttons). This can help make the button text more readable and properly spaced.<br>CSS variable: --wm-btn-letter-spacing |
+| text-transform | Controls text transformation for button text (the text content within clickable buttons). '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-btn-text-transform |
+| border.color | Sets the border color.<br>CSS variable: --wm-btn-border-color |
+| border.width | Controls the border thickness.<br>CSS variable: --wm-btn-border-width |
+| border.style | Sets the border style. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.<br>CSS variable: --wm-btn-border-style |
+| cursor | Controls the mouse cursor appearance when hovering over buttons. 'pointer' shows a hand cursor indicating the button is clickable, 'default' shows an arrow cursor, and 'not-allowed' shows a blocked cursor for disabled buttons. This provides visual feedback to users about button interactivity.<br>CSS variable: --wm-btn-cursor |
+| radius | Controls the border radius for rounded corners.<br>CSS variable: --wm-btn-radius |
+| padding | Sets internal spacing between content and border.<br>CSS variable: --wm-btn-padding |
+| min-width | Sets the minimum width.<br>CSS variable: --wm-btn-min-width |
+| min-height | Controls the height.<br>CSS variable: --wm-btn-min-height |
+| gap | Sets spacing between icon and text content.<br>CSS variable: --wm-btn-gap |
+| shadow.@ | Controls the drop shadow effect.<br>CSS variable: --wm-btn-shadow |
+| icon-size | Controls the size of icons.<br>CSS variable: --wm-btn-icon-size |
+| state.layer.color | Sets the color of the state layer (an invisible overlay that provides visual feedback during user interactions like hover, focus, and active states). This color appears when users interact with the button to show it's responsive.<br>CSS variable: --wm-btn-state-layer-color |
+| state.layer.opacity | Controls the transparency of the state layer (the invisible overlay that provides visual feedback during user interactions). When set to 0, the state layer is invisible. Higher values (0-1) make the interaction feedback more visible when users hover, focus, or click the button.<br>CSS variable: --wm-btn-state-layer-opacity |