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

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

@@ -0,0 +1,15 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| bar.width | Controls how wide scrollbars appear (the vertical scrollbar on the right side of content areas). This determines the thickness of the scrollbar track and thumb.<br>CSS variable: --wm-scroll-bar-width |
+| bar.height | Controls how tall scrollbars appear (the horizontal scrollbar at the bottom of content areas). This determines the thickness of the scrollbar track and thumb.<br>CSS variable: --wm-scroll-bar-height |
+| bar.track.bg | Sets the background color of scrollbar tracks (the channel that the scrollbar thumb moves along). This is the background area of the scrollbar.<br>CSS variable: --wm-scroll-bar-track-bg |
+| bar.track.radius | Controls the corner rounding of scrollbar tracks (the channel that the scrollbar thumb moves along). This makes the scrollbar track appear with rounded corners.<br>CSS variable: --wm-scroll-bar-track-radius |
+| bar.thumb.bg | Sets the background color of scrollbar thumbs (the draggable part of the scrollbar that users click and drag to scroll). This is the interactive element of the scrollbar.<br>CSS variable: --wm-scroll-bar-thumb-bg |
+| bar.thumb.radius | Controls the corner rounding of scrollbar thumbs (the draggable part of the scrollbar). This makes the scrollbar thumb appear with rounded corners.<br>CSS variable: --wm-scroll-bar-thumb-radius |
+| bar.thumb.hover | Sets the background color of scrollbar thumbs when users hover over them (the draggable part of the scrollbar). This provides visual feedback when users interact with the scrollbar.<br>CSS variable: --wm-scroll-bar-thumb-hover |

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

@@ -0,0 +1,66 @@
+{
+  "scroll": {
+    "bar": {
+      "width": {
+        "value": "6px",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls how wide scrollbars appear (the vertical scrollbar on the right side of content areas). This determines the thickness of the scrollbar track and thumb.<br>CSS variable: --wm-scroll-bar-width"
+        }
+      },
+      "height": {
+        "value": "6px",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls how tall scrollbars appear (the horizontal scrollbar at the bottom of content areas). This determines the thickness of the scrollbar track and thumb.<br>CSS variable: --wm-scroll-bar-height"
+        }
+      },
+      "track": {
+        "bg": {
+          "value": "{color.surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of scrollbar tracks (the channel that the scrollbar thumb moves along). This is the background area of the scrollbar.<br>CSS variable: --wm-scroll-bar-track-bg"
+          }
+        },
+        "radius": {
+          "value": "6px",
+          "type": "space",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the corner rounding of scrollbar tracks (the channel that the scrollbar thumb moves along). This makes the scrollbar track appear with rounded corners.<br>CSS variable: --wm-scroll-bar-track-radius"
+          }
+        }
+      },
+      "thumb": {
+        "bg": {
+          "value": "{color.surface.container.high.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of scrollbar thumbs (the draggable part of the scrollbar that users click and drag to scroll). This is the interactive element of the scrollbar.<br>CSS variable: --wm-scroll-bar-thumb-bg"
+          }
+        },
+        "radius": {
+          "value": "6px",
+          "type": "space",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the corner rounding of scrollbar thumbs (the draggable part of the scrollbar). This makes the scrollbar thumb appear with rounded corners.<br>CSS variable: --wm-scroll-bar-thumb-radius"
+          }
+        },
+        "hover": {
+          "value": "{color.surface.container.highest.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of scrollbar thumbs when users hover over them (the draggable part of the scrollbar). This provides visual feedback when users interact with the scrollbar.<br>CSS variable: --wm-scroll-bar-thumb-hover"
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| full.screen.background | Sets the background color of the full-screen search overlay.<br>CSS variable: --wm-search-full-screen-background |
+| back.btn.margin | Controls external spacing around the back button.<br>CSS variable: --wm-search-back-btn-margin |
+| dropdown.menu.background | Sets the background color of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-background |
+| dropdown.menu.border.radius | Controls the border radius of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-border-radius |
+| dropdown.menu.box.shadow | Controls the drop shadow effect of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-box-shadow |
+| dropdown.menu.height | Controls the maximum height of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-height |
+| dropdown.menu.margin | Controls external spacing around the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-margin |
+| dropdown.menu.z.index | Controls the z-index stacking order of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-z-index |
+| dropdown.menu.item.height | Controls the height of dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-height |
+| dropdown.menu.item.font.family | Sets the font family for dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-font-family |
+| dropdown.menu.item.font.size | Controls the size of dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-font-size |
+| dropdown.menu.item.font.weight | Controls the weight of dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-font-weight |
+| dropdown.menu.item.line-height | Sets the line height for dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-line-height |
+| dropdown.menu.item.color | Sets the text color of dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-color |
+| dropdown.menu.item.gap | Controls spacing between elements within dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-gap |
+| dropdown.menu.item.padding | Sets internal spacing within dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-padding |
+| dropdown.menu.item.state.layer.color | Sets the color of the state layer overlay for dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-state-layer-color |
+| dropdown.menu.item.img.radius | Controls the border radius of images in dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-img-radius |
+| dropdown.menu.group.item.color | Sets the text color of dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-color |
+| dropdown.menu.group.item.background | Sets the background color of dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-background |
+| dropdown.menu.group.item.gap | Controls spacing between elements within dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-gap |
+| dropdown.menu.group.item.padding | Sets internal spacing within dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-padding |
+| dropdown.menu.group.item.header.font-family | Sets the font family for dropdown menu group item headers.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-font-family |
+| dropdown.menu.group.item.header.font-size | Controls the size of dropdown menu group item header text.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-font-size |
+| dropdown.menu.group.item.header.font-weight | Controls the weight of dropdown menu group item header text.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-font-weight |
+| dropdown.menu.group.item.header.line-height | Sets the line height for dropdown menu group item header text.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-line-height |
+| dropdown.state.layer.opacity | Controls the opacity of the state layer overlay for dropdown items.<br>CSS variable: --wm-search-dropdown-state-layer-opacity |
+| status.background | Sets the background color of the status message area.<br>CSS variable: --wm-search-status-background |
+| status.padding | Sets internal spacing within the status message area.<br>CSS variable: --wm-search-status-padding |
+| btn.position.left | Controls the left positioning of search buttons.<br>CSS variable: --wm-search-btn-position-left |
+| btn.position.right | Controls the right positioning of search buttons.<br>CSS variable: --wm-search-btn-position-right |

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

@@ -0,0 +1,390 @@
+{
+  "search": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".app-search"
+        },
+        "states": {
+          "matched": {
+            "selector": {
+              "web": " li > a strong"
+            }
+          },
+          "hover": {
+            "selector": {
+              "web": " li > a:hover:before"
+            }
+          },
+          "active": {
+            "selector": {
+              "web": " li > a:active:before"
+            }
+          },
+          "focus": {
+            "selector": {
+              "web": " li > a:focus:before"
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "full": {
+        "screen": {
+          "background": {
+            "value": "{color.surface.container.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of the full-screen search overlay.<br>CSS variable: --wm-search-full-screen-background"
+            }
+          }
+        }
+      },
+      "back": {
+        "btn": {
+          "margin": {
+            "value": "{space.0.value} {space.1.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls external spacing around the back button.<br>CSS variable: --wm-search-back-btn-margin"
+            }
+          }
+        }
+      },
+      "dropdown": {
+        "menu": {
+          "background": {
+            "value": "{color.surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-background"
+            }
+          },
+          "border": {
+            "radius": {
+              "value": "{radius.xs.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "radius",
+                "description": "Controls the border radius of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-border-radius"
+              }
+            }
+          },
+          "box": {
+            "shadow": {
+              "value": "{elevation.shadow.2.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "elevation",
+                "description": "Controls the drop shadow effect of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-box-shadow"
+              }
+            }
+          },
+          "height": {
+            "value": "~\"calc({search.mapping.dropdown.menu.item.height.value} * 6.5)\"",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the maximum height of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-height"
+            }
+          },
+          "margin": {
+            "value": "{space.1.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls external spacing around the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-margin"
+            }
+          },
+          "z": {
+            "index": {
+              "value": "1060",
+              "type": "radius",
+              "attributes": {
+                "subtype": "elevation",
+                "description": "Controls the z-index stacking order of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-z-index"
+              }
+            }
+          },
+          "item": {
+            "height": {
+              "value": "40px",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the height of dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-height"
+              }
+            },
+            "font": {
+              "family": {
+                "value": "{body.large.font-family.value}",
+                "type": "font",
+                "attributes": {
+                  "subtype": "font-family",
+                  "description": "Sets the font family for dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-font-family"
+                }
+              },
+              "size": {
+                "value": "{body.large.font-size.value}",
+                "type": "font",
+                "attributes": {
+                  "subtype": "font-size",
+                  "description": "Controls the size of dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-font-size"
+                }
+              },
+              "weight": {
+                "value": "{body.large.font-weight.value}",
+                "type": "font",
+                "attributes": {
+                  "subtype": "font-weight",
+                  "description": "Controls the weight of dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-font-weight"
+                }
+              }
+            },
+            "line-height": {
+              "value": "{body.large.line-height.value}",
+              "type": "font",
+              "attributes": {
+                "subtype": "line-height",
+                "description": "Sets the line height for dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-line-height"
+              }
+            },
+            "color": {
+              "value": "{color.on-surface.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the text color of dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-color"
+              }
+            },
+            "gap": {
+              "value": "{space.2.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls spacing between elements within dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-gap"
+              }
+            },
+            "padding": {
+              "value": "{space.2.value} {space.4.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Sets internal spacing within dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-padding"
+              }
+            },
+            "state": {
+              "layer": {
+                "color": {
+                  "value": "{color.on-surface.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color",
+                    "description": "Sets the color of the state layer overlay for dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-state-layer-color"
+                  }
+                }
+              }
+            },
+            "img": {
+              "radius": {
+                "value": "{radius.circle.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "radius",
+                  "description": "Controls the border radius of images in dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-img-radius"
+                }
+              }
+            }
+          },
+          "group": {
+            "item": {
+              "color": {
+                "value": "{color.on-surface.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the text color of dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-color"
+                }
+              },
+              "background": {
+                "value": "{color.surface.container.low.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the background color of dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-background"
+                }
+              },
+              "gap": {
+                "value": "{space.2.value}",
+                "type": "space",
+                "attributes": {
+                  "subtype": "space",
+                  "description": "Controls spacing between elements within dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-gap"
+                }
+              },
+              "padding": {
+                "value": "{space.2.value} {space.4.value}",
+                "type": "space",
+                "attributes": {
+                  "subtype": "space",
+                  "description": "Sets internal spacing within dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-padding"
+                }
+              },
+              "header": {
+                "font-family": {
+                  "value": "{h4.font-family.value}",
+                  "type": "font",
+                  "attributes": {
+                    "subtype": "font-family",
+                    "description": "Sets the font family for dropdown menu group item headers.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-font-family"
+                  }
+                },
+                "font-size": {
+                  "value": "{h4.font-size.value}",
+                  "type": "font",
+                  "attributes": {
+                    "subtype": "font-size",
+                    "description": "Controls the size of dropdown menu group item header text.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-font-size"
+                  }
+                },
+                "font-weight": {
+                  "value": "{h4.font-weight.value}",
+                  "type": "font",
+                  "attributes": {
+                    "subtype": "font-weight",
+                    "description": "Controls the weight of dropdown menu group item header text.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-font-weight"
+                  }
+                },
+                "line-height": {
+                  "value": "{h4.line-height.value}",
+                  "type": "font",
+                  "attributes": {
+                    "subtype": "line-height",
+                    "description": "Sets the line height for dropdown menu group item header text.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-line-height"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "state": {
+          "layer": {
+            "opacity": {
+              "value": "0",
+              "type": "radius",
+              "attributes": {
+                "subtype": "opacity",
+                "description": "Controls the opacity of the state layer overlay for dropdown items.<br>CSS variable: --wm-search-dropdown-state-layer-opacity"
+              }
+            }
+          }
+        }
+      },
+      "status": {
+        "background": {
+          "value": "{color.surface.dim.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of the status message area.<br>CSS variable: --wm-search-status-background"
+          }
+        },
+        "padding": {
+          "value": "{space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Sets internal spacing within the status message area.<br>CSS variable: --wm-search-status-padding"
+          }
+        }
+      },
+      "btn": {
+        "position": {
+          "left": {
+            "value": "{space.1.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the left positioning of search buttons.<br>CSS variable: --wm-search-btn-position-left"
+            }
+          },
+          "right": {
+            "value": "auto",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the right positioning of search buttons.<br>CSS variable: --wm-search-btn-position-right"
+            }
+          }
+        }
+      },
+      "states": {
+        "matched": {
+          "dropdown": {
+            "menu": {
+              "item": {
+                "color": {
+                  "value": "{color.secondary.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "hover": {
+          "dropdown": {
+            "state": {
+              "layer": {
+                "opacity": {
+                  "value": "{opacity.hover.value}",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "opacity"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "focus": {
+          "dropdown": {
+            "state": {
+              "layer": {
+                "opacity": {
+                  "value": "{opacity.focus.value}",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "opacity"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "active": {
+          "dropdown": {
+            "state": {
+              "layer": {
+                "opacity": {
+                  "value": "{opacity.active.value}",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "opacity"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "appearance": {}
+  }
+}

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

@@ -0,0 +1,24 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| height | Controls the height of slider tracks (the horizontal bar that represents the slider range). This determines the vertical size of the track. Acceptable units: px.<br>CSS variable: --wm-slider-track-height |
+| border-radius | Controls the border radius (rounded corners) of slider tracks. This determines how rounded the corners of the track appear. Acceptable units: px.<br>CSS variable: --wm-slider-track-border-radius |
+| track.filled.background | Sets the background color of slider filled tracks (the portion of the track from the start to the current value). This determines what color the filled track appears in.<br>CSS variable: --wm-slider-track-filled-background |
+| track.unfilled.background | Sets the background color of slider unfilled tracks (the portion of the track from the current value to the end). This determines what color the unfilled track appears in, typically matching the primary container theme color.<br>CSS variable: --wm-slider-track-unfilled-background |
+| handle.background | Sets the background color of slider handle (the draggable handle that users interact with to set values). This determines what color the handle appears in.<br>CSS variable: --wm-slider-handle-background |
+| handle.height | Controls the height of slider handles. This determines the vertical size of the handle. Acceptable units: px.<br>CSS variable: --wm-slider-handle-height |
+| handle.width | Controls the width of slider handles. This determines the horizontal size of the handle. Acceptable units: px.<br>CSS variable: --wm-slider-handle-width |
+| handle.border-radius | Controls the border radius (rounded corners) of slider handles. This determines how rounded the corners of the handle appear. Acceptable units: px.<br>CSS variable: --wm-slider-handle-border-radius |
+| handle.gap | Controls the visual spacing between slider handles and the filled/unfilled track segments. Acceptable units: px.<br>CSS variable: --wm-slider-handle-gap |
+| range.label.color | Sets the text color of labels (text elements that describe or identify other content). This determines what color the label text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-slider-range-label-color |
+| range.label.padding | Controls the internal spacing inside labels (the space between the label text and its border). This creates breathing room around the label content.<br>CSS variable: --wm-slider-range-label-padding |
+| range.label.font-size | Controls how large label text appears (text that describes or identifies other content). Larger values make labels more prominent, smaller values make them more subtle.<br>CSS variable: --wm-slider-range-label-font-size |
+| range.label.font-weight | Controls how thick or bold label text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-slider-range-label-font-weight |
+| range.label.font-family | Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-slider-range-label-font-family |
+| range.label.background-color | Sets the background color of labels (the area behind the label text). When set to 'none', labels have no background color, making them transparent.<br>CSS variable: --wm-slider-range-label-background-color |
+| range.label.gap | Controls the visual spacing between slider and the label segments. Acceptable units: px.<br>CSS variable: --wm-slider-range-label-gap |