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

package/src/tokens/mobile/global/font/font.json

@@ -0,0 +1,377 @@
+{
+  "font": {
+    "weight": {
+      "100": { "value": 100, "attributes": { "subtype": "font-weight" } },
+      "200": { "value": 200, "attributes": { "subtype": "font-weight" } },
+      "300": { "value": 300, "attributes": { "subtype": "font-weight" } },
+      "400": { "value": 400, "attributes": { "subtype": "font-weight" } },
+      "500": { "value": 500, "attributes": { "subtype": "font-weight" } },
+      "600": { "value": 600, "attributes": { "subtype": "font-weight" } },
+      "700": { "value": 700, "attributes": { "subtype": "font-weight" } },
+      "800": { "value": 800, "attributes": { "subtype": "font-weight" } },
+      "900": { "value": 900, "attributes": { "subtype": "font-weight" } }
+    },
+    "family": {
+      "brand": {
+        "value": "Roboto",
+        "attributes": { "subtype": "font-family" }
+      },
+      "plain": {
+        "value": "Roboto",
+        "attributes": { "subtype": "font-family" }
+      },
+      "backup": { "value": "Arial", "attributes": { "subtype": "font-family" } }
+    }
+  },
+  "body": {
+    "large": {
+      "font-family": {
+        "value": "{font.family.brand.value}",
+        "attributes": { "subtype": "font-family" }
+      },
+      "font-weight": {
+        "value": "{font.weight.400.value}",
+        "attributes": { "subtype": "font-weight" }
+      },
+      "font-size": {
+        "value": "16px",
+        "attributes": { "subtype": "font-size" }
+      },
+      "line-height": {
+        "value": "24px",
+        "attributes": { "subtype": "line-height" }
+      },
+      "letter-spacing": {
+        "value": "0.5px",
+        "attributes": { "subtype": "letter-spacing" }
+      }
+    },
+    "medium": {
+      "font-family": {
+        "value": "{font.family.brand.value}",
+        "attributes": { "subtype": "font-family" }
+      },
+      "font-weight": {
+        "value": "{font.weight.400.value}",
+        "attributes": { "subtype": "font-weight" }
+      },
+      "font-size": {
+        "value": "14px",
+        "attributes": { "subtype": "font-size" }
+      },
+      "line-height": {
+        "value": "20px",
+        "attributes": { "subtype": "line-height" }
+      },
+      "letter-spacing": {
+        "value": "0.25px",
+        "attributes": { "subtype": "letter-spacing" }
+      }
+    },
+    "small": {
+      "font-family": {
+        "value": "{font.family.brand.value}",
+        "attributes": { "subtype": "font-family" }
+      },
+      "font-weight": {
+        "value": "{font.weight.400.value}",
+        "attributes": { "subtype": "font-weight" }
+      },
+      "font-size": {
+        "value": "12px",
+        "attributes": { "subtype": "font-size" }
+      },
+      "line-height": {
+        "value": "16px",
+        "attributes": { "subtype": "line-height" }
+      },
+      "letter-spacing": {
+        "value": "0.4px",
+        "attributes": { "subtype": "letter-spacing" }
+      }
+    }
+  },
+  "h1": {
+    "font-family": {
+      "value": "{font.family.brand.value}",
+      "attributes": { "subtype": "font-family" }
+    },
+    "font-weight": {
+      "value": "{font.weight.400.value}",
+      "attributes": { "subtype": "font-weight" }
+    },
+    "font-size": { "value": "32px", "attributes": { "subtype": "font-size" } },
+    "line-height": {
+      "value": "40px",
+      "attributes": { "subtype": "line-height" }
+    },
+    "letter-spacing": {
+      "value": "0px",
+      "attributes": { "subtype": "letter-spacing" }
+    }
+  },
+  "h2": {
+    "font-family": {
+      "value": "{font.family.brand.value}",
+      "attributes": { "subtype": "font-family" }
+    },
+    "font-weight": {
+      "value": "{font.weight.400.value}",
+      "attributes": { "subtype": "font-weight" }
+    },
+    "font-size": { "value": "28px", "attributes": { "subtype": "font-size" } },
+    "line-height": {
+      "value": "36px",
+      "attributes": { "subtype": "line-height" }
+    },
+    "letter-spacing": {
+      "value": "0px",
+      "attributes": { "subtype": "letter-spacing" }
+    }
+  },
+  "h3": {
+    "font-family": {
+      "value": "{font.family.brand.value}",
+      "attributes": { "subtype": "font-family" }
+    },
+    "font-weight": {
+      "value": "{font.weight.400.value}",
+      "attributes": { "subtype": "font-weight" }
+    },
+    "font-size": { "value": "24px", "attributes": { "subtype": "font-size" } },
+    "line-height": {
+      "value": "32px",
+      "attributes": { "subtype": "line-height" }
+    },
+    "letter-spacing": {
+      "value": "0px",
+      "attributes": { "subtype": "letter-spacing" }
+    }
+  },
+  "h4": {
+    "font-family": {
+      "value": "{font.family.brand.value}",
+      "attributes": { "subtype": "font-family" }
+    },
+    "font-weight": {
+      "value": "{font.weight.400.value}",
+      "attributes": { "subtype": "font-weight" }
+    },
+    "font-size": { "value": "22px", "attributes": { "subtype": "font-size" } },
+    "line-height": {
+      "value": "28px",
+      "attributes": { "subtype": "line-height" }
+    },
+    "letter-spacing": {
+      "value": "0px",
+      "attributes": { "subtype": "letter-spacing" }
+    }
+  },
+  "h5": {
+    "font-family": {
+      "value": "{font.family.brand.value}",
+      "attributes": { "subtype": "font-family" }
+    },
+    "font-weight": {
+      "value": "{font.weight.500.value}",
+      "attributes": { "subtype": "font-weight" }
+    },
+    "font-size": { "value": "16px", "attributes": { "subtype": "font-size" } },
+    "line-height": {
+      "value": "24px",
+      "attributes": { "subtype": "line-height" }
+    },
+    "letter-spacing": {
+      "value": "0.15px",
+      "attributes": { "subtype": "letter-spacing" }
+    }
+  },
+  "h6": {
+    "font-family": {
+      "value": "{font.family.brand.value}",
+      "attributes": { "subtype": "font-family" }
+    },
+    "font-weight": {
+      "value": "{font.weight.500.value}",
+      "attributes": { "subtype": "font-weight" }
+    },
+    "font-size": { "value": "14px", "attributes": { "subtype": "font-size" } },
+    "line-height": {
+      "value": "20px",
+      "attributes": { "subtype": "line-height" }
+    },
+    "letter-spacing": {
+      "value": "0.1px",
+      "attributes": { "subtype": "letter-spacing" }
+    }
+  },
+  "p": {
+    "font-family": {
+      "value": "{font.family.brand.value}",
+      "attributes": {
+        "subtype": "font-family"
+      }
+    },
+    "font-weight": {
+      "value": "{font.weight.500.value}",
+      "attributes": {
+        "subtype": "font-weight"
+      }
+    },
+    "font-size": {
+      "value": "12px",
+      "attributes": {
+        "subtype": "font-size"
+      }
+    },
+    "line-height": {
+      "value": "18px",
+      "attributes": {
+        "subtype": "line-height"
+      }
+    },
+    "letter-spacing": {
+      "value": "0.1px",
+      "attributes": {
+        "subtype": "letter-spacing"
+      }
+    }
+  },
+  "label": {
+    "large": {
+      "font-family": {
+        "value": "{font.family.brand.value}",
+        "attributes": { "subtype": "font-family" }
+      },
+      "font-weight": {
+        "value": "{font.weight.500.value}",
+        "attributes": { "subtype": "font-weight" }
+      },
+      "font-size": {
+        "value": "14px",
+        "attributes": { "subtype": "font-size" }
+      },
+      "line-height": {
+        "value": "20px",
+        "attributes": { "subtype": "line-height" }
+      },
+      "letter-spacing": {
+        "value": "0.1px",
+        "attributes": { "subtype": "letter-spacing" }
+      }
+    },
+    "medium": {
+      "font-family": {
+        "value": "{font.family.brand.value}",
+        "attributes": { "subtype": "font-family" }
+      },
+      "font-weight": {
+        "value": "{font.weight.500.value}",
+        "attributes": { "subtype": "font-weight" }
+      },
+      "font-size": {
+        "value": "12px",
+        "attributes": { "subtype": "font-size" }
+      },
+      "line-height": {
+        "value": "16px",
+        "attributes": { "subtype": "line-height" }
+      },
+      "letter-spacing": {
+        "value": "0.5px",
+        "attributes": { "subtype": "letter-spacing" }
+      }
+    },
+    "small": {
+      "font-family": {
+        "value": "{font.family.brand.value}",
+        "attributes": { "subtype": "font-family" }
+      },
+      "font-weight": {
+        "value": "{font.weight.500.value}",
+        "attributes": { "subtype": "font-weight" }
+      },
+      "font-size": {
+        "value": "11px",
+        "attributes": { "subtype": "font-size" }
+      },
+      "line-height": {
+        "value": "16px",
+        "attributes": { "subtype": "line-height" }
+      },
+      "letter-spacing": {
+        "value": "0.5px",
+        "attributes": { "subtype": "letter-spacing" }
+      }
+    }
+  },
+  "display": {
+    "large": {
+      "font-family": {
+        "value": "{font.family.brand.value}",
+        "attributes": { "subtype": "font-family" }
+      },
+      "font-weight": {
+        "value": "{font.weight.400.value}",
+        "attributes": { "subtype": "font-weight" }
+      },
+      "font-size": {
+        "value": "57px",
+        "attributes": { "subtype": "font-size" }
+      },
+      "line-height": {
+        "value": "64px",
+        "attributes": { "subtype": "line-height" }
+      },
+      "letter-spacing": {
+        "value": "-0.25px",
+        "attributes": { "subtype": "letter-spacing" }
+      }
+    },
+    "medium": {
+      "font-family": {
+        "value": "{font.family.brand.value}",
+        "attributes": { "subtype": "font-family" }
+      },
+      "font-weight": {
+        "value": "{font.weight.400.value}",
+        "attributes": { "subtype": "font-weight" }
+      },
+      "font-size": {
+        "value": "45px",
+        "attributes": { "subtype": "font-size" }
+      },
+      "line-height": {
+        "value": "52px",
+        "attributes": { "subtype": "line-height" }
+      },
+      "letter-spacing": {
+        "value": "0px",
+        "attributes": { "subtype": "letter-spacing" }
+      }
+    },
+    "small": {
+      "font-family": {
+        "value": "{font.family.brand.value}",
+        "attributes": { "subtype": "font-family" }
+      },
+      "font-weight": {
+        "value": "{font.weight.400.value}",
+        "attributes": { "subtype": "font-weight" }
+      },
+      "font-size": {
+        "value": "36px",
+        "attributes": { "subtype": "font-size" }
+      },
+      "line-height": {
+        "value": "44px",
+        "attributes": { "subtype": "line-height" }
+      },
+      "letter-spacing": {
+        "value": "0px",
+        "attributes": { "subtype": "letter-spacing" }
+      }
+    }
+  }
+}
+

package/src/tokens/mobile/global/gap/gap.json

@@ -0,0 +1,60 @@
+{
+  "gap": {
+    "base": {
+      "value": "4px",
+      "attributes": { "subtype": "space" }
+    },
+    "0": {
+      "value": "{gap.base.value}",
+      "attributes": { "multiple": "0", "subtype": "space" }
+    },
+    "1": {
+      "value": "{gap.base.value}",
+      "attributes": { "multiple": "1", "subtype": "space" }
+    },
+    "2": {
+      "value": "{gap.base.value}",
+      "attributes": { "multiple": "2", "subtype": "space" }
+    },
+    "3": {
+      "value": "{gap.base.value}",
+      "attributes": { "multiple": "3", "subtype": "space" }
+    },
+    "4": {
+      "value": "{gap.base.value}",
+      "attributes": { "multiple": "4", "subtype": "space" }
+    },
+    "5": {
+      "value": "{gap.base.value}",
+      "attributes": { "multiple": "5", "subtype": "space" }
+    },
+    "6": {
+      "value": "{gap.base.value}",
+      "attributes": { "multiple": "6", "subtype": "space" }
+    },
+    "7": {
+      "value": "{gap.base.value}",
+      "attributes": { "multiple": "7", "subtype": "space" }
+    },
+    "8": {
+      "value": "{gap.base.value}",
+      "attributes": { "multiple": "8", "subtype": "space" }
+    },
+    "9": {
+      "value": "{gap.base.value}",
+      "attributes": { "multiple": "9", "subtype": "space" }
+    },
+    "10": {
+      "value": "{gap.base.value}",
+      "attributes": { "multiple": "10", "subtype": "space" }
+    },
+    "11": {
+      "value": "{gap.base.value}",
+      "attributes": { "multiple": "11", "subtype": "space" }
+    },
+    "12": {
+      "value": "{gap.base.value}",
+      "attributes": { "multiple": "12", "subtype": "space" }
+    }
+  }
+}

package/src/tokens/mobile/global/icon/icon.json

@@ -0,0 +1,15 @@
+{
+  "icon": {
+    "size": {
+      "@": { "value": "24px", "attributes": { "subtype": "icon-size" } },
+      "xs": { "value": "12px", "attributes": { "subtype": "icon-size" } },
+      "sm": { "value": "18px", "attributes": { "subtype": "icon-size" } },
+      "md": { "value": "24px", "attributes": { "subtype": "icon-size" } },
+      "lg": { "value": "30px", "attributes": { "subtype": "icon-size" } },
+      "2x": { "value": "36px", "attributes": { "subtype": "icon-size" } },
+      "3x": { "value": "42px", "attributes": { "subtype": "icon-size" } },
+      "4x": { "value": "48px", "attributes": { "subtype": "icon-size" } },
+      "5x": { "value": "54px", "attributes": { "subtype": "icon-size" } }
+    }
+  }
+}

package/src/tokens/mobile/global/margin/margin.json

@@ -0,0 +1,60 @@
+{
+  "margin": {
+    "base": {
+      "value": "4px",
+      "attributes": { "subtype": "space" }
+    },
+    "0": {
+      "value": "{margin.base.value}",
+      "attributes": { "multiple": "0", "subtype": "space" }
+    },
+    "1": {
+      "value": "{margin.base.value}",
+      "attributes": { "multiple": "1", "subtype": "space" }
+    },
+    "2": {
+      "value": "{margin.base.value}",
+      "attributes": { "multiple": "2", "subtype": "space" }
+    },
+    "3": {
+      "value": "{margin.base.value}",
+      "attributes": { "multiple": "3", "subtype": "space" }
+    },
+    "4": {
+      "value": "{margin.base.value}",
+      "attributes": { "multiple": "4", "subtype": "space" }
+    },
+    "5": {
+      "value": "{margin.base.value}",
+      "attributes": { "multiple": "5", "subtype": "space" }
+    },
+    "6": {
+      "value": "{margin.base.value}",
+      "attributes": { "multiple": "6", "subtype": "space" }
+    },
+    "7": {
+      "value": "{margin.base.value}",
+      "attributes": { "multiple": "7", "subtype": "space" }
+    },
+    "8": {
+      "value": "{margin.base.value}",
+      "attributes": { "multiple": "8", "subtype": "space" }
+    },
+    "9": {
+      "value": "{margin.base.value}",
+      "attributes": { "multiple": "9", "subtype": "space" }
+    },
+    "10": {
+      "value": "{margin.base.value}",
+      "attributes": { "multiple": "10", "subtype": "space" }
+    },
+    "11": {
+      "value": "{margin.base.value}",
+      "attributes": { "multiple": "11", "subtype": "space" }
+    },
+    "12": {
+      "value": "{margin.base.value}",
+      "attributes": { "multiple": "12", "subtype": "space" }
+    }
+  }
+}

package/src/tokens/mobile/global/opacity/opacity.json

@@ -0,0 +1,6 @@
+{
+  "opacity": {
+    "focus": { "value": "12%", "attributes": { "subtype": "opacity" } },
+    "active": { "value": "100%", "attributes": { "subtype": "opacity" } }
+  }
+}

package/src/tokens/mobile/global/radius/radius.json

@@ -0,0 +1,15 @@
+{
+  "radius": {
+    "base": { "value": "2px", "attributes": { "subtype": "radius" } },
+    "none": { "value": "0px", "attributes": { "subtype": "radius" } },
+    "xxs": { "value": "2px", "attributes": { "subtype": "radius" } },
+    "xs": { "value": "4px", "attributes": { "subtype": "radius" } },
+    "sm": { "value": "8px", "attributes": { "subtype": "radius" } },
+    "md": { "value": "12px", "attributes": { "subtype": "radius" } },
+    "lg": { "value": "16px", "attributes": { "subtype": "radius" } },
+    "xl": { "value": "28px", "attributes": { "subtype": "radius" } },
+    "xxl": { "value": "32px", "attributes": { "subtype": "radius" } },
+    "pill": { "value": "1000px", "attributes": { "subtype": "radius" } },
+    "circle": { "value": "1000px", "attributes": { "subtype": "radius" } }
+  }
+}

package/src/tokens/mobile/global/space/space.json

@@ -0,0 +1,18 @@
+{
+  "space": {
+    "rule": { "value": "4px", "attributes": { "subtype": "space" } },
+    "0": { "value": "0px", "attributes": { "subtype": "space" } },
+    "1": { "value": "4px", "attributes": { "subtype": "space" } },
+    "2": { "value": "8px", "attributes": { "subtype": "space" } },
+    "3": { "value": "12px", "attributes": { "subtype": "space" } },
+    "4": { "value": "16px", "attributes": { "subtype": "space" } },
+    "5": { "value": "20px", "attributes": { "subtype": "space" } },
+    "6": { "value": "24px", "attributes": { "subtype": "space" } },
+    "7": { "value": "28px", "attributes": { "subtype": "space" } },
+    "8": { "value": "32px", "attributes": { "subtype": "space" } },
+    "9": { "value": "36px", "attributes": { "subtype": "space" } },
+    "10": { "value": "40px", "attributes": { "subtype": "space" } },
+    "11": { "value": "44px", "attributes": { "subtype": "space" } },
+    "12": { "value": "48px", "attributes": { "subtype": "space" } }
+  }
+}

package/src/tokens/mobile/global/spacer/spacer.json

@@ -0,0 +1,15 @@
+{
+  "spacer": {
+    "@": { "value": "16px", "attributes": { "subtype": "space" } },
+    "0": { "value": "0px", "attributes": { "subtype": "space" } },
+    "1": { "value": "4px", "attributes": { "subtype": "space" } },
+    "2": { "value": "8px", "attributes": { "subtype": "space" } },
+    "3": { "value": "16px", "attributes": { "subtype": "space" } },
+    "4": { "value": "25.6px", "attributes": { "subtype": "space" } },
+    "5": { "value": "40px", "attributes": { "subtype": "space" } },
+    "6": { "value": "56px", "attributes": { "subtype": "space" } },
+    "7": { "value": "64px", "attributes": { "subtype": "space" } },
+    "8": { "value": "128px", "attributes": { "subtype": "space" } },
+    "9": { "value": "176px", "attributes": { "subtype": "space" } }
+  }
+}

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

@@ -0,0 +1,18 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Accordion Variants
+
+This component supports the following appearances and variants. To apply them, use the corresponding class(es) on your widget.
+
+---
+
+## Appearance: Default
+
+**Variants:**
+
+| Variant Name | Class |
+|--------------|-------|
+| Default | `app-accordion panel panel-default` |
+| Primary | `app-accordion panel panel-primary` |
+| Secondary | `app-accordion panel panel-secondary` |
+| Tertiary | `app-accordion panel panel-tertiary` |

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

@@ -0,0 +1,30 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| group.gap | 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.@ | 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 | 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 |
+| shadow | 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 | 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 |
+| heading.padding.block | 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 |
+| heading.padding.inline | 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 |
+| heading.font-family | 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 |
+| heading.font-size | 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 |
+| heading.font-weight | 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 |
+| heading.line-height | 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 |
+| heading.letter-spacing | 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 |
+| heading.color | 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 |
+| heading.background | 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 | 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 |
+| description.font-size | 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 |
+| description.font-weight | 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 |
+| description.line-height | 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 |
+| description.letter-spacing | 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 |
+| description.color | 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 | 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 | 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 |