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

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

@@ -0,0 +1,23 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Container 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-container-default`
+
+---
+
+## Appearance: Outlined
+
+**Appearance Class:** `app-outlined-container`
+
+---
+
+## Appearance: Elevated
+
+**Appearance Class:** `app-elevated-container`

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

@@ -0,0 +1,13 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| border.color | Sets the color of the outline around container elements (boxes that hold content). This creates a colored border around the container to define its boundaries.<br>CSS variable: --wm-container-border-color |
+| border.width | Controls the thickness of the outline around container elements. When set to 0, there's no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-width |
+| border.style | Controls the style of the outline around container elements. 'none' removes the border, 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-container-border-style |
+| border.radius | Controls the corner rounding of container elements. When set to 'none', containers have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-container-border-radius |
+| shadow | Controls the drop shadow effect around container elements. This creates a subtle shadow that makes the container appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-container-shadow |

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

@@ -0,0 +1,207 @@
+{
+  "container": {
+    "meta": {
+      "appearances": {
+        "default": {
+          "mapping": {
+            "selector": {
+              "web": ".app-container-default"
+            }
+          }
+        },
+        "outlined": {
+          "mapping": {
+            "selector": {
+              "web": ".app-outlined-container",
+              "mobile": ".app-outlined-container"
+            }
+          }
+        },
+        "elevated": {
+          "mapping": {
+            "selector": {
+              "web": ".app-elevated-container",
+              "mobile": ".app-elevated-container"
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "background": {
+        "value": "{color.transparent.value}",
+        "type": "color",
+        "attributes": {
+          "subtype": "color"
+        }
+      },
+      "border": {
+        "color": {
+          "value": "{color.border.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of the outline around container elements (boxes that hold content). This creates a colored border around the container to define its boundaries.<br>CSS variable: --wm-container-border-color"
+          }
+        },
+        "width": {
+          "value": "{space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the thickness of the outline around container elements. When set to 0, there's no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-container-border-width"
+          }
+        },
+        "style": {
+          "value": "{border.style.none.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Controls the style of the outline around container elements. 'none' removes the border, 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-container-border-style"
+          }
+        },
+        "radius": {
+          "value": "{radius.none.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the corner rounding of container elements. When set to 'none', containers have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-container-border-radius"
+          }
+        }
+      },
+      "shadow": {
+        "value": "{elevation.shadow.none.value}",
+        "type": "radius",
+        "attributes": {
+          "subtype": "elevation",
+          "description": "Controls the drop shadow effect around container elements. This creates a subtle shadow that makes the container appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-container-shadow"
+        }
+      }
+    },
+    "appearances": {
+      "default": {
+        "mapping": {
+          "border": {
+            "color": {
+              "value": "{color.border.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            },
+            "width": {
+              "value": "{space.0.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "border-width"
+              }
+            },
+            "style": {
+              "value": "{border.style.none.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "border-style"
+              }
+            },
+            "radius": {
+              "value": "{radius.none.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "radius"
+              }
+            }
+          },
+          "shadow": {
+            "value": "{elevation.shadow.none.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "elevation"
+            }
+          }
+        }
+      },
+      "outlined": {
+        "mapping": {
+          "border": {
+            "color": {
+              "value": "{color.outline.variant.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            },
+            "width": {
+              "value": "{border.width.base.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "border-width"
+              }
+            },
+            "style": {
+              "value": "{border.style.base.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "border-style"
+              }
+            },
+            "radius": {
+              "value": "{radius.none.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "radius"
+              }
+            }
+          },
+          "shadow": {
+            "value": "{elevation.shadow.none.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "elevation"
+            }
+          }
+        }
+      },
+      "elevated": {
+        "mapping": {
+          "border": {
+            "color": {
+              "value": "{color.border.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            },
+            "width": {
+              "value": "{space.0.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "border-width"
+              }
+            },
+            "style": {
+              "value": "{border.style.none.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "border-style"
+              }
+            },
+            "radius": {
+              "value": "{radius.sm.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "radius"
+              }
+            }
+          },
+          "shadow": {
+            "value": "{elevation.shadow.1.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "elevation"
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| inputgroup-addon.width | Controls how wide the currency symbol appears in currency input fields (like the '$' symbol that appears inside the input box). This determines the space reserved for the currency symbol.<br>CSS variable: --wm-currency-inputgroup-addon-width |
+| inputgroup-addon.font-family | Sets the typeface (font style) for currency symbols in input fields. This determines whether the currency symbol appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-currency-inputgroup-addon-font-family |
+| inputgroup-addon.font-size | Controls how large the currency symbol appears in input fields. This affects the size of the '$', '€', or other currency symbols that users see inside the input box.<br>CSS variable: --wm-currency-inputgroup-addon-font-size |
+| inputgroup-addon.font-weight | Controls how thick or bold the currency symbol appears in input fields. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-currency-inputgroup-addon-font-weight |
+| inputgroup-addon.line-height | Controls the vertical spacing around currency symbols in input fields. This ensures the symbol is properly centered within the input field.<br>CSS variable: --wm-currency-inputgroup-addon-line-height |
+| inputgroup-addon.letter-spacing | Controls the horizontal spacing around currency symbols in input fields. This can help make the symbol more readable and properly spaced.<br>CSS variable: --wm-currency-inputgroup-addon-letter-spacing |

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

@@ -0,0 +1,59 @@
+{
+  "currency": {
+    "meta": {
+      "mapping": {}
+    },
+    "mapping": {
+      "inputgroup-addon": {
+        "width": {
+          "value": "40px",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls how wide the currency symbol appears in currency input fields (like the '$' symbol that appears inside the input box). This determines the space reserved for the currency symbol.<br>CSS variable: --wm-currency-inputgroup-addon-width"
+          }
+        },
+        "font-family": {
+          "value": "{form.mapping.control.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Sets the typeface (font style) for currency symbols in input fields. This determines whether the currency symbol appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-currency-inputgroup-addon-font-family"
+          }
+        },
+        "font-size": {
+          "value": "{form.mapping.control.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls how large the currency symbol appears in input fields. This affects the size of the '$', '€', or other currency symbols that users see inside the input box.<br>CSS variable: --wm-currency-inputgroup-addon-font-size"
+          }
+        },
+        "font-weight": {
+          "value": "{form.mapping.control.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold the currency symbol appears in input fields. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-currency-inputgroup-addon-font-weight"
+          }
+        },
+        "line-height": {
+          "value": "{form.mapping.control.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing around currency symbols in input fields. This ensures the symbol is properly centered within the input field.<br>CSS variable: --wm-currency-inputgroup-addon-line-height"
+          }
+        },
+        "letter-spacing": {
+          "value": "{form.mapping.control.letter-spacing.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "letter-spacing",
+            "description": "Controls the horizontal spacing around currency symbols in input fields. This can help make the symbol more readable and properly spaced.<br>CSS variable: --wm-currency-inputgroup-addon-letter-spacing"
+          }
+        }
+      }
+    }
+  }
+}

package/src/tokens/web/components/data-table/Readme.md

@@ -0,0 +1,29 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Data-table Variants
+
+This component supports the following appearances and variants. To apply them, use the corresponding class(es) on your widget.
+
+---
+
+## Appearance: Default
+
+**Appearance Class:** ` `
+
+---
+
+## Appearance: Condensed
+
+**Appearance Class:** `table-condensed`
+
+---
+
+## Appearance: Striped-even
+
+**Appearance Class:** `striped-even`
+
+---
+
+## Appearance: Striped-odd
+
+**Appearance Class:** `striped-odd`

package/src/tokens/web/components/data-table/Token.Readme.md

@@ -0,0 +1,54 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| border.collapse | Controls how borders between data table cells are displayed. 'collapse' makes adjacent cell borders merge into a single line, 'separate' keeps borders separate with gaps, 'unset' uses the default browser behavior.<br>CSS variable: --wm-data-table-border-collapse |
+| border.spacing | Controls the space between data table cells when borders are separate. This creates gaps between table cells for better visual separation.<br>CSS variable: --wm-data-table-border-spacing |
+| overlay.background | Sets the background color of the loading overlay that appears over data tables while data is being loaded or processed. This creates a semi-transparent layer that covers the table content during loading states.<br>CSS variable: --wm-data-table-overlay-background |
+| overlay.color | Sets the text color of loading messages and indicators that appear in the data table overlay. 'inherit' uses the same color as the parent element, or you can specify a specific color value.<br>CSS variable: --wm-data-table-overlay-color |
+| overlay.opacity | Controls the transparency of the loading overlay that appears over data tables. Values range from 0% (completely transparent) to 100% (completely opaque). 90% creates a semi-transparent overlay that dims the table content while still showing the loading indicator.<br>CSS variable: --wm-data-table-overlay-opacity |
+| padding | Controls the internal spacing inside data table containers (the space between the table content and its borders). This creates breathing room around the entire table area.<br>CSS variable: --wm-data-table-padding |
+| header.row.color | Sets the text color of data table header rows (the top row that contains column titles like 'Name', 'Date', 'Status'). This determines what color the column header text appears in.<br>CSS variable: --wm-data-table-header-row-color |
+| header.row.background | Sets the background color of data table header rows (the top row that contains column titles). This creates a distinct background color for the header to separate it from the data rows below.<br>CSS variable: --wm-data-table-header-row-background |
+| header.row.font-size | Controls how large the text appears in data table header rows (the top row that contains column titles like 'Name', 'Date', 'Status'). This affects the size of the text that users see in the column headers.<br>CSS variable: --wm-data-table-header-row-font-size |
+| header.row.font-weight | Controls how thick or bold the text appears in data table header rows (the top row that contains column titles). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-data-table-header-row-font-weight |
+| header.row.font-family | Sets the typeface (font style) for data table header rows (the top row that contains column titles like 'Name', 'Date', 'Status'). This determines whether the header text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-data-table-header-row-font-family |
+| header.row.line-height | Controls the vertical spacing between lines when data table header row text wraps to multiple lines. This ensures proper spacing for the header text displayed in the table.<br>CSS variable: --wm-data-table-header-row-line-height |
+| header.row.letterspacing | Controls the horizontal spacing between individual characters in data table header rows (the top row that contains column titles). This can help make the header text more readable and properly spaced.<br>CSS variable: --wm-data-table-header-row-letter-spacing |
+| header.cell.padding | Controls the internal spacing inside data table header cells (the space between the column title text and the cell borders). This creates breathing room around the header text.<br>CSS variable: --wm-data-table-header-cell-padding |
+| header.cell.border.width | Controls the thickness of borders around data table header cells. The format is 'top right bottom left' - this setting creates a bottom border only to separate headers from data rows.<br>CSS variable: --wm-data-table-header-cell-border-width |
+| header.cell.border.style | Sets the visual style of borders around data table header cells. 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, 'none' removes borders completely.<br>CSS variable: --wm-data-table-header-cell-border-style |
+| header.cell.border.color | Sets the color of borders around data table header cells. This determines what color the lines separating the header from the data rows appear in.<br>CSS variable: --wm-data-table-header-cell-border-color |
+| header.cell.text-overflow | Controls how long text in data table header cells is displayed when it doesn't fit. 'ellipsis' shows '...' at the end of long text, 'clip' cuts off the text abruptly, 'string' shows a custom string.<br>CSS variable: --wm-data-table-header-cell-text-overflow |
+| header.cell.overflow | Controls how content that exceeds the header cell boundaries is handled. 'hidden' hides overflowing content, 'visible' shows it outside the cell, 'scroll' adds scrollbars, 'auto' adds scrollbars only when needed.<br>CSS variable: --wm-data-table-header-cell-overflow |
+| header.cell.position | Sets the positioning method for data table header cells. 'relative' positions cells relative to their normal position, 'absolute' positions them relative to the table, 'sticky' makes them stick when scrolling.<br>CSS variable: --wm-data-table-header-cell-position |
+| header.cell.display | Controls how data table header cells are displayed. 'ruby' is a special display type for table cells, 'table-cell' is the standard table cell display, 'block' makes them behave like block elements.<br>CSS variable: --wm-data-table-header-cell-display |
+| header.cell.white-space | Controls how whitespace and line breaks are handled in data table header cells. 'normal' wraps text normally, 'nowrap' prevents text wrapping, 'pre' preserves all whitespace and line breaks.<br>CSS variable: --wm-data-table-header-cell-white-space |
+| header.cell.word-break | Controls how long words are broken and wrapped in data table header cells. 'auto-phrase' automatically breaks words at appropriate points to prevent overflow, 'break-all' breaks words at any character, 'break-word' breaks words only when necessary.<br>CSS variable: --wm-data-table-header-cell-word-break |
+| body.row.background-odd | Sets the background color of odd-numbered data table rows (1st, 3rd, 5th rows, etc.). This creates alternating row colors to improve readability by making it easier to follow data across columns.<br>CSS variable: --wm-data-table-body-row-background-odd |
+| body.row.background-even | Sets the background color of even-numbered data table rows (2nd, 4th, 6th rows, etc.). This creates alternating row colors to improve readability by making it easier to follow data across columns.<br>CSS variable: --wm-data-table-body-row-background-even |
+| body.row.color | Sets the text color of data table body rows (the rows that contain the actual data, not the header). This determines what color the data text appears in.<br>CSS variable: --wm-data-table-body-row-color |
+| body.row.font-size | Controls how large the text appears in data table body rows (the rows that contain the actual data, not the header). This affects the size of the text that users see in the data cells.<br>CSS variable: --wm-data-table-body-row-font-size |
+| body.row.font-weight | Controls how thick or bold the text appears in data table body rows (the rows that contain the actual data, not the header). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-data-table-body-row-font-weight |
+| body.row.font-family | Sets the typeface (font style) for data table body rows (the rows that contain the actual data, not the header). This determines whether the data text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-data-table-body-row-font-family |
+| body.row.line-height | Controls the vertical spacing between lines when data table body row text wraps to multiple lines. This ensures proper spacing for the data text displayed in the table cells.<br>CSS variable: --wm-data-table-body-row-line-height |
+| body.row.letter-spacing | Controls the horizontal spacing between individual characters in data table body rows (the rows that contain the actual data, not the header). This can help make the data text more readable and properly spaced.<br>CSS variable: --wm-data-table-body-row-letter-spacing |
+| body.cell.padding | Controls the internal spacing inside data table body cells (the space between the data content and the cell borders). This creates breathing room around the data text.<br>CSS variable: --wm-data-table-body-cell-padding |
+| body.cell.border.width | Controls the thickness of borders around data table body cells. The format is 'top right bottom left' - this setting creates a bottom border only to separate rows.<br>CSS variable: --wm-data-table-body-cell-border-width |
+| body.cell.border.style | Sets the visual style of borders around data table body cells. 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, 'none' removes borders completely.<br>CSS variable: --wm-data-table-body-cell-border-style |
+| body.cell.border.color | Sets the color of borders around data table body cells. This determines what color the lines separating the data rows appear in.<br>CSS variable: --wm-data-table-body-cell-border-color |
+| body.cell.border.radius | Controls the corner rounding of data table body cells. This makes the cell corners slightly rounded for a softer appearance.<br>CSS variable: --wm-data-table-body-cell-border-radius |
+| body.cell.text-overflow | Controls how long text in data table body cells is displayed when it doesn't fit. 'ellipsis' shows '...' at the end of long text, 'clip' cuts off the text abruptly, 'string' shows a custom string.<br>CSS variable: --wm-data-table-body-cell-text-overflow |
+| body.cell.overflow | Controls how content that exceeds the data table body cell boundaries is handled. 'hidden' hides overflowing content, 'visible' shows it outside the cell, 'scroll' adds scrollbars, 'auto' adds scrollbars only when needed.<br>CSS variable: --wm-data-table-body-cell-overflow |
+| body.cell.vertical-align | Controls how content is vertically positioned within data table body cells. 'middle' centers content vertically, 'top' aligns to the top, 'bottom' aligns to the bottom, 'baseline' aligns to the text baseline.<br>CSS variable: --wm-data-table-body-cell-vertical-align |
+| body.action.display | Controls how action buttons in data table rows are displayed. 'inline-flex' arranges buttons in a horizontal line with flexible spacing, 'block' stacks them vertically, 'none' hides them completely.<br>CSS variable: --wm-data-table-body-action-display |
+| body.action.padding | Controls the internal spacing inside action buttons in data table rows (the space between the button content and its borders). This creates breathing room around the button icons and text.<br>CSS variable: --wm-data-table-body-action-padding |
+| body.action.margin | Controls the external spacing around action buttons in data table rows (the space between the button and other elements). This creates separation between buttons and other table content.<br>CSS variable: --wm-data-table-body-action-margin |
+| body.action.icon-size | Controls how large the icons appear in action buttons within data table rows. This affects the size of edit, delete, and other action icons that users can click.<br>CSS variable: --wm-data-table-body-action-icon-size |
+| sort.icon.size | Controls how large the sort icons appear in data table headers (the up/down arrow symbols that indicate sortable columns). This affects the size of the arrows users see when columns can be sorted.<br>CSS variable: --wm-data-table-sort-icon-size |
+| sort.icon.color | Sets the color of sort icons in data table headers (the up/down arrow symbols that indicate sortable columns). This determines what color the sort arrows appear in.<br>CSS variable: --wm-data-table-sort-icon-color |
+| layout | Controls how data table columns are sized and arranged. 'fixed' makes columns maintain consistent widths, 'auto' lets columns size themselves based on content. Fixed layout provides more predictable table appearance.<br>CSS variable: --wm-data-table-layout |