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

package/src/tokens/web/components/button-group/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 |
+|-------|------------|
+| radius | Controls the corner rounding of button groups (connected buttons that appear as a single unit). This makes the outer corners of the button group rounded while keeping the inner buttons connected.<br>CSS variable: --wm-button-group-radius |

package/src/tokens/web/components/button-group/button-group.json

@@ -0,0 +1,22 @@
+{
+  "button-group": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".app-button-group",
+          "mobile": ".app-button-group"
+        }
+      }
+    },
+    "mapping": {
+      "radius": {
+        "value": "{radius.sm.value}",
+        "type": "radius",
+        "attributes": {
+          "subtype": "radius",
+          "description": "Controls the corner rounding of button groups (connected buttons that appear as a single unit). This makes the outer corners of the button group rounded while keeping the inner buttons connected.<br>CSS variable: --wm-button-group-radius"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| shadow | Controls the shadow of the calendar view container.<br>CSS variable: --wm-calendar-view-shadow |
+| border.color | Sets the border color of the calendar view.<br>CSS variable: --wm-calendar-view-border-color |
+| border.style | Controls the border style of the calendar view. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-calendar-view-border-style |
+| border.width | Controls the border width of the calendar view.<br>CSS variable: --wm-calendar-view-border-width |
+| radius | Controls the border radius of the calendar view.<br>CSS variable: --wm-calendar-view-radius |
+| background | Controls the background color of the calendar view.<br>CSS variable: --wm-calendar-view-background |
+| toolbar-title.font-weight | Controls the font weight of the calendar title. <br>CSS variable: --wm-calendar-toolbar-title-font-weight |
+| toolbar-title.font-family | Controls the font family of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-font-family |
+| toolbar-title.font-size | Controls the font size of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-font-size |
+| toolbar-title.letter-spacing | Controls the letter spacing of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-letter-spacing |
+| toolbar-title.line-height | Controls the line height of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-line-height |
+| button.background | Controls the background color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-background |
+| button.color | Controls the text color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-color |
+| button.border-color | Controls the border color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-border-color |
+| button.font-weight | Controls the font weight of the button captions in the calendar toolbar.<br>CSS variable: --wm-calendar-button-font-weight |
+| button.font-family | Controls the font family of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-font-family |
+| button.font-size | Controls the font size of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-font-size |
+| button.letter-spacing | Controls the letter spacing of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-letter-spacing |
+| button.line-height | Controls the line height of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-line-height |
+| button.border-width | Controls the border width of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-width |
+| button.border-style | Controls the border style of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-style |
+| button.border-radius | Controls the border radius of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-radius |
+| button.active.background | Controls the background color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-background |
+| button.active.border-color | Controls the border color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-border-color |
+| button.active.border-width | Controls the border width of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-border-width |
+| button.active.border-style | Controls the border style of the active button in the calendar toolbar<br>CSS variable: --wm-calendar-button-active-border-style |
+| button.active.border-radius | Controls the border radius of the active button in the calendar toolbar<br>CSS variable: --wm-calendar-button-active-border-radius |
+| button.active.color | Controls the text color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-color |
+| date.padding | Controls the padding of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-padding |
+| date.font-weight | Controls the font weight of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-weight |
+| date.font-family | Controls the font family of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-family |
+| date.font-size | Controls the font size of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-size |
+| date.color | Sets the color of calendar anchor elements.<br>CSS variable: --wm-calendar-anchor-color |
+| date.today.background | Controls the background color of current day cell in the calendar.<br>CSS variable: --wm-calendar-daygrid-today-background |
+| date.today.text.color | Controls the text color of current day cell in the calendar .<br>CSS variable: --wm-calendar-daygrid-today-text-color |
+| toolbar.vertical.padding | Controls vertical padding of the calendar header.<br>CSS variable: --wm-calendar-toolbar-vertical-padding |
+| toolbar.horizontal.padding | Controls horizontal padding of the calendar header.<br>CSS variable: --wm-calendar-toolbar-horizontal-padding |
+| time.text.font-weight | Controls the font weight of calendar time text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-time-text-font-weight |
+| events.gap | Controls spacing between calendar events.<br>CSS variable: --wm-calendar-events-gap |
+| daygrid.event.radius | Controls the border radius of calendar day grid events.<br>CSS variable: --wm-calendar-daygrid-event-radius |
+| v.event.main.color | Sets the main color of calendar events.<br>CSS variable: --wm-calendar-v-event-main-color |
+| popover.radius | Controls the border radius of calendar popovers.<br>CSS variable: --wm-calendar-popover-radius |
+| popover.heading.padding | Controls padding of calendar popover headings.<br>CSS variable: --wm-calendar-popover-heading-padding |
+| popover.title.font-size | Controls the font size of calendar popover titles.<br>CSS variable: --wm-calendar-popover-title-font-size |
+| popover.title.font-weight | Controls the font weight of calendar popover titles. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-popover-title-font-weight |
+| popover.title.font-family | Sets the font family of calendar popover titles.<br>CSS variable: --wm-calendar-popover-title-font-family |
+| popover.title.line-height | Controls the line height of calendar popover titles.<br>CSS variable: --wm-calendar-popover-title-line-height |
+| event.background | Sets the background color of calendar events.<br>CSS variable: --wm-calendar-event-background |
+| event.color | Sets the text color of calendar events.<br>CSS variable: --wm-calendar-event-color |
+| event.dot.color | Sets the color of calendar event dots.<br>CSS variable: --wm-calendar-event-dot-color |
+| header.font-weight | Controls the font weight of calendar header columns text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-header-text-font-weight |
+| header.font-family | Controls the font family of calendar header columns text.<br>CSS variable: --wm-calendar-header-text-font-family |
+| header.font-size | Controls the font size of calendar header columns text.<br>CSS variable: --wm-calendar-header-text-font-size |
+| header.color | Controls the text color of calendar header columns.<br>CSS variable: --wm-calendar-header-color |
+| header.background | Controls the background color of calendar header columns.<br>CSS variable: --wm-calendar-header-background |

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

@@ -0,0 +1,501 @@
+{
+  "calendar": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".app-calendar"
+        }
+      }
+    },
+    "mapping": {
+      "shadow": {
+        "value": "{elevation.shadow.1.value}",
+        "type": "radius",
+        "attributes": {
+          "subtype": "elevation",
+          "description": "Controls the shadow of the calendar view container.<br>CSS variable: --wm-calendar-view-shadow"
+        }
+      },
+      "border": {
+        "color": {
+          "value": "{color.border.translucent.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the border color of the calendar view.<br>CSS variable: --wm-calendar-view-border-color"
+          }
+        },
+        "style": {
+          "value": "{border.style.base.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Controls the border style of the calendar view. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-calendar-view-border-style"
+          }
+        },
+        "width": {
+          "value": "{border.width.base.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the border width of the calendar view.<br>CSS variable: --wm-calendar-view-border-width"
+          }
+        }
+      },
+      "radius": {
+        "value": "{radius.md.value}",
+        "type": "radius",
+        "attributes": {
+          "subtype": "radius",
+          "description": "Controls the border radius of the calendar view.<br>CSS variable: --wm-calendar-view-radius"
+        }
+      },
+      "background": {
+        "value": "{color.transparent.value}",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Controls the background color of the calendar view.<br>CSS variable: --wm-calendar-view-background"
+        }
+      },
+      "toolbar-title": {
+        "font-weight": {
+          "value": "{font.weight.700.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls the font weight of the calendar title. <br>CSS variable: --wm-calendar-toolbar-title-font-weight"
+          }
+        },
+        "font-family": {
+          "value": "{body.medium.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Controls the font family of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-font-family"
+          }
+        },
+        "font-size": {
+          "value": "{body.medium.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the font size of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-font-size"
+          }
+        },
+        "letter-spacing": {
+          "value": "{body.medium.letter-spacing.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "letter-spacing",
+            "description": "Controls the letter spacing of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-letter-spacing"
+          }
+        },
+        "line-height": {
+          "value": "{body.medium.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the line height of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-line-height"
+          }
+        }
+      },
+      "button": {
+        "background": {
+          "value": "{color.on-surface.variant.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Controls the background color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-background"
+          }
+        },
+        "color": {
+          "value": "{color.white.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Controls the text color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-color"
+          }
+        },
+        "border-color": {
+          "value": "{color.border.translucent.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Controls the border color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-border-color"
+          }
+        },
+        "font-weight": {
+          "value": "{body.small.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls the font weight of the button captions in the calendar toolbar.<br>CSS variable: --wm-calendar-button-font-weight"
+          }
+        },
+        "font-family": {
+          "value": "{body.small.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Controls the font family of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-font-family"
+          }
+        },
+        "font-size": {
+          "value": "{body.small.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the font size of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-font-size"
+          }
+        },
+        "letter-spacing": {
+          "value": "{body.small.letter-spacing.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "letter-spacing",
+            "description": "Controls the letter spacing of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-letter-spacing"
+          }
+        },
+        "line-height": {
+          "value": "{body.small.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the line height of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-line-height"
+          }
+        },
+        "border-width": {
+          "value": "{border.width.1.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the border width of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-width"
+          }
+        },
+        "border-style": {
+          "value": "{border.style.base.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Controls the border style of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-style"
+          }
+        },
+        "border-radius": {
+          "value": "{radius.xxs.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the border radius of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-radius"
+          }
+        },
+        "active": {
+          "background": {
+            "value": "{color.on-surface.variant.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Controls the background color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-background"
+            }
+          },
+          "border-color": {
+            "value": "{color.on-surface.variant.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Controls the border color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-border-color"
+            }
+          },
+          "border-width": {
+            "value": "{border.width.1.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the border width of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-border-width"
+            }
+          },
+          "border-style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the border style of the active button in the calendar toolbar<br>CSS variable: --wm-calendar-button-active-border-style"
+            }
+          },
+          "border-radius": {
+            "value": "{radius.xxs.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the border radius of the active button in the calendar toolbar<br>CSS variable: --wm-calendar-button-active-border-radius"
+            }
+          },
+          "color": {
+            "value": "{color.white.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Controls the text color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-color"
+            }
+          }
+        }
+      },
+      "date": {
+        "padding": {
+          "value": "{space.1.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-padding"
+          }
+        },
+        "font-weight": {
+          "value": "{body.small.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls the font weight of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-weight"
+          }
+        },
+        "font-family": {
+          "value": "{body.small.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Controls the font family of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-family"
+          }
+        },
+        "font-size": {
+          "value": "{body.small.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the font size of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-size"
+          }
+        },
+        "color": {
+          "value": "{color.on-background.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of calendar anchor elements.<br>CSS variable: --wm-calendar-anchor-color"
+          }
+        },
+        "today": {
+          "background": {
+            "value": "{color.warning.container.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Controls the background color of current day cell in the calendar.<br>CSS variable: --wm-calendar-daygrid-today-background"
+            }
+          },
+          "text": {
+            "color": {
+              "value": "{color.on-background.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Controls the text color of current day cell in the calendar .<br>CSS variable: --wm-calendar-daygrid-today-text-color"
+              }
+            }
+          }
+        }
+      },
+      "toolbar": {
+        "vertical": {
+          "padding": {
+            "value": "{space.4.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls vertical padding of the calendar header.<br>CSS variable: --wm-calendar-toolbar-vertical-padding"
+            }
+          }
+        },
+        "horizontal": {
+          "padding": {
+            "value": "{space.5.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls horizontal padding of the calendar header.<br>CSS variable: --wm-calendar-toolbar-horizontal-padding"
+            }
+          }
+        }
+      },
+      "time": {
+        "text": {
+          "font-weight": {
+            "value": "{font.weight.700.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Controls the font weight of calendar time text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-time-text-font-weight"
+            }
+          }
+        }
+      },
+      "events": {
+        "gap": {
+          "value": "{space.1.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls spacing between calendar events.<br>CSS variable: --wm-calendar-events-gap"
+          }
+        }
+      },
+      "daygrid": {
+        "event": {
+          "radius": {
+            "value": "{radius.xs.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the border radius of calendar day grid events.<br>CSS variable: --wm-calendar-daygrid-event-radius"
+            }
+          }
+        }
+      },
+      "v": {
+        "event": {
+          "main": {
+            "color": {
+              "value": "{color.primary.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the main color of calendar events.<br>CSS variable: --wm-calendar-v-event-main-color"
+              }
+            }
+          }
+        }
+      },
+      "popover": {
+        "radius": {
+          "value": "{radius.sm.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the border radius of calendar popovers.<br>CSS variable: --wm-calendar-popover-radius"
+          }
+        },
+        "heading": {
+          "padding": {
+            "value": "{space.2.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls padding of calendar popover headings.<br>CSS variable: --wm-calendar-popover-heading-padding"
+            }
+          }
+        },
+        "title": {
+          "font-size": {
+            "value": "{body.medium.font-size.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "Controls the font size of calendar popover titles.<br>CSS variable: --wm-calendar-popover-title-font-size"
+            }
+          },
+          "font-weight": {
+            "value": "{font.weight.700.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Controls the font weight of calendar popover titles. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-popover-title-font-weight"
+            }
+          },
+          "font-family": {
+            "value": "{body.medium.font-family.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-family",
+              "description": "Sets the font family of calendar popover titles.<br>CSS variable: --wm-calendar-popover-title-font-family"
+            }
+          },
+          "line-height": {
+            "value": "{body.medium.line-height.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "line-height",
+              "description": "Controls the line height of calendar popover titles.<br>CSS variable: --wm-calendar-popover-title-line-height"
+            }
+          }
+        }
+      },
+      "event": {
+        "background": {
+          "value": "{color.primary.fixed.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of calendar events.<br>CSS variable: --wm-calendar-event-background"
+          }
+        },
+        "color": {
+          "value": "{color.surface.tint.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of calendar events.<br>CSS variable: --wm-calendar-event-color"
+          }
+        },
+        "dot": {
+          "color": {
+            "value": "{color.surface.tint.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of calendar event dots.<br>CSS variable: --wm-calendar-event-dot-color"
+            }
+          }
+        }
+      },
+      "header": {
+        "font-weight": {
+          "value": "{body.small.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls the font weight of calendar header columns text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-header-text-font-weight"
+          }
+        },
+        "font-family": {
+          "value": "{body.small.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Controls the font family of calendar header columns text.<br>CSS variable: --wm-calendar-header-text-font-family"
+          }
+        },
+        "font-size": {
+          "value": "{body.small.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the font size of calendar header columns text.<br>CSS variable: --wm-calendar-header-text-font-size"
+          }
+        },
+        "color": {
+          "value": "{color.on-background.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Controls the text color of calendar header columns.<br>CSS variable: --wm-calendar-header-color"
+          }
+        },
+        "background": {
+          "value": "{color.transparent.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Controls the background color of calendar header columns.<br>CSS variable: --wm-calendar-header-background"
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Card Variants
+
+This component supports the following appearances and variants. To apply them, use the corresponding class(es) on your widget.
+
+---
+
+## Appearance: Default
+
+**Appearance Class:** `app-card card-default`
+
+---
+
+## Appearance: Filled
+
+**Appearance Class:** `app-card card-filled`
+
+---
+
+## Appearance: Elevated
+
+**Appearance Class:** `app-card card-elevated`

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

@@ -0,0 +1,22 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| border.width | Controls the border width of cards.<br>CSS variable: --wm-card-border-width |
+| border.style | Controls the border style of cards. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-card-border-style |
+| border.color | Sets the border color of cards.<br>CSS variable: --wm-card-border-color |
+| border.radius | Controls the border radius of cards.<br>CSS variable: --wm-card-border-radius |
+| list.gap | Controls spacing between card list items.<br>CSS variable: --wm-card-list-gap |
+| background | Sets the background color of cards.<br>CSS variable: --wm-card-background |
+| shadow | Controls the box shadow of cards.<br>CSS variable: --wm-card-shadow |
+| state.layer.color | Sets the color of card state layers.<br>CSS variable: --wm-card-state-layer-color |
+| state.layer.opacity | Controls the opacity of card state layers.<br>CSS variable: --wm-card-state-layer-opacity |
+| body.padding | Controls padding of card body content.<br>CSS variable: --wm-card-body-padding |
+| footer.padding | Controls padding of card footer content.<br>CSS variable: --wm-card-footer-padding |
+| footer.border.width | Controls the border width of card footers.<br>CSS variable: --wm-card-footer-border-width |
+| footer.border.style | Controls the border style of card footers. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-card-footer-border-style |
+| footer.border.color | Sets the border color of card footers.<br>CSS variable: --wm-card-footer-border-color |