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

package/src/tokens/mobile/components/rating/rating.json

@@ -0,0 +1,117 @@
+{
+  "rating": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-rating"
+        },
+        "states": {
+          "disabled": {
+            "selector": {
+              "mobile": "-disabled"
+            }
+          },
+          "active": {
+            "selector": {
+              "mobile": "-selected-icon"
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "padding": {
+        "value": "{space.2.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the spacing between rating components (star rating systems where users can rate items with 1-5 stars). This creates visual separation between different rating elements.<br>CSS variable: --wm-rating-padding"
+        }
+      },
+      "opacity":{
+            "value": "1",
+            "type": "radius",
+            "attributes": {
+              "subtype": "opacity",
+              "description": "Controls the transparency of rating components (star rating systems where users can rate items with 1-5 stars). When set to 1, the rating is fully opaque. Lower values make the rating more transparent, higher values make it more opaque.<br>CSS variable: --wm-rating-opacity"
+            }
+      },
+      "icon": {
+        "color": {
+            "value": "{color.on-surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of rating icons (the stars in a star rating system). This determines what color the stars appear in when they are not selected or active.<br>CSS variable: --wm-rating-icon-color"
+            }
+          },
+        "size": {
+          "value": "32px",
+          "type": "space",
+          "attributes": {
+            "subtype": "icon-size",
+            "description": "Controls how large rating icons appear (the stars in a star rating system). Larger values make the stars more prominent, smaller values make them more subtle.<br>CSS variable: --wm-rating-icon-size"
+          }
+        }
+      },
+      "text": {
+        "size": {
+          "value": "32px",
+          "type": "space",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls how large rating text appears (numeric or text values that appear alongside rating icons). This affects the size of the rating text that users see.<br>CSS variable: --wm-rating-text-size"
+          }
+        },
+        "padding": {
+          "value": "{space.0.value} {space.0.value} {space.0.value} {space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top, right, bottom, left) of rating text. This creates visual separation between the text and the rating icons. Acceptable units: px.<br>CSS variable: --wm-rating-text-padding"
+          }
+        },
+        "color": {
+          "value": "{color.warning.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of rating text (numeric or text values that appear alongside rating icons). This is typically a bright color like yellow or orange to match the selected rating stars.<br>CSS variable: --wm-rating-text-color"
+          }
+        }
+      },
+      "states": {
+        "disabled": {
+          "opacity": {
+            "value": "0.38",
+            "type": "radius",
+            "attributes": {
+              "subtype": "opacity",
+              "description": "Controls the transparency of disabled rating components. When set to 0.38, the rating appears faded to indicate it cannot be clicked. Lower values make it more transparent, higher values make it more opaque.<br>CSS variable: --wm-rating-opacity (disabled state)"
+            }
+          }
+        },
+        "active": {
+            "icon": {
+              "color": {
+                "value": "{color.warning.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the color of active rating icons (the stars that are selected or hovered over). This is typically a bright color like yellow or orange to indicate the selected rating.<br>CSS variable: --wm-rating-icon-color (active state)"
+                }
+              },
+              "size": {
+                "value": "32px",
+                "type": "space",
+                "attributes": {
+                  "subtype": "icon-size",
+                  "description": "Controls how large active rating icons appear (the stars that are selected or hovered over). Larger values make the stars more prominent, smaller values make them more subtle.<br>CSS variable: --wm-rating-icon-size (active state)"
+                }
+              }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+{
+  "scroll": {
+    "bar": {
+      "width": {
+        "value": "6px",
+        "type": "space"
+      },
+      "height": {
+        "value": "6px",
+        "type": "space"
+      },
+      "track": {
+        "bg": {
+          "value": "{color.surface.@.value}",
+          "type": "color"
+        },
+        "radius": {
+          "value": "6px",
+          "type": "space"
+        }
+      },
+      "thumb": {
+        "bg": {
+          "value": "{color.surface.container.high.@.value}",
+          "type": "color"
+        },
+        "radius": {
+          "value": "6px",
+          "type": "space"
+        },
+        "hover": {
+          "value": "{color.surface.container.highest.@.value}",
+          "type": "color"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,408 @@
+{
+  "search": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": "app-search"
+        }
+      }
+    },
+    "mapping": {
+      "height": {
+        "value": "{space.12.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the height of search components (input fields that allow users to search for content). This determines the vertical size of the search input field. Acceptable units: px.<br>CSS variable: --wm-search-height"
+        }
+      },
+      "border": {
+        "radius": {
+          "value": "{space.7.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the border radius (rounded corners) of search components. This determines how rounded the corners of the search input field appear. Acceptable units: px.<br>CSS variable: --wm-search-border-radius"
+          }
+        },
+        "width": {
+          "value": "{border.width.1.value}",
+          "type": "border",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the border width (thickness) of search components. This determines how thick the border around the search input field appears. Acceptable units: px.<br>CSS variable: --wm-search-border-width"
+          }
+        },
+        "color": {
+          "value": "{color.outline.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the border color of search components. This determines what color the border around the search input field appears in.<br>CSS variable: --wm-search-border-color"
+          }
+        }
+      },
+      "text": {
+        "color": {
+          "value": "{color.on-surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of search input text (the text that users type into the search field). This determines what color the search input text appears in.<br>CSS variable: --wm-search-text-color"
+          }
+        },
+        "background": {
+          "color": {
+            "value": "{color.surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of search input text fields. This determines what color the background of the search input field appears in.<br>CSS variable: --wm-search-text-background-color"
+            }
+          }
+        },
+        "font": {
+          "size": {
+            "value": "{body.medium.font-size.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "Controls the font size of search input text. This affects how large the text appears in the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-font-size"
+            }
+          },
+          "family": {
+            "value": "{body.medium.font-family.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-family",
+              "description": "Sets the font family of search input text. This determines which font is used for the text in the search input field.<br>CSS variable: --wm-search-text-font-family"
+            }
+          },
+          "weight": {
+            "value": "{body.medium.font-weight.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Controls the font weight (boldness) of search input text. This affects how bold the text appears in the search input field.<br>CSS variable: --wm-search-text-font-weight"
+            }
+          }
+        },
+        "padding": {
+          "value": "{space.2.value} {space.3.value} {space.2.value} {space.6.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top, right, bottom, left) of search input text. This creates breathing room inside the search input field. Acceptable units: px.<br>CSS variable: --wm-search-text-padding"
+          }
+        }
+      },
+      "dropdown": {
+        "width": {
+          "value": "90%",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the width of search dropdown menu (autocomplete suggestions that appear below the search input). This determines how wide the dropdown appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-search-dropdown-width"
+          }
+        },
+        "background": {
+          "color": {
+            "value": "{color.surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of search dropdown menus. This determines what color the background of the dropdown appears in.<br>CSS variable: --wm-search-dropdown-background-color"
+            }
+          }
+        },
+        "border": {
+          "radius": {
+            "value": "{radius.md.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the border radius (rounded corners) of search dropdown menus. This determines how rounded the corners of the dropdown appear. Acceptable units: px.<br>CSS variable: --wm-search-dropdown-border-radius"
+            }
+          },
+          "color": {
+            "value": "transparent",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the border color of search dropdown menus. This determines what color the border around the dropdown appears in.<br>CSS variable: --wm-search-dropdown-border-color"
+            }
+          },
+          "width": {
+            "value": "0",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the border width (thickness) of search dropdown menus. This determines how thick the border around the dropdown appears. Acceptable units: px.<br>CSS variable: --wm-search-dropdown-border-width"
+            }
+          }
+        }
+      },
+      "invalid": {
+        "color": {
+          "value": "{color.error.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the border color of invalid search input fields (when validation fails). This determines what color the border appears in when the search input is in an invalid state, typically matching the error theme color.<br>CSS variable: --wm-search-invalid-color"
+          }
+        }
+      },
+      "btn": {
+        "background": {
+          "color": {
+            "value": "{color.surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of search button (the button that triggers the search action). This determines what color the background of the search button appears in.<br>CSS variable: --wm-search-btn-background-color"
+            }
+          }
+        },
+        "icon": {
+          "color": {
+            "value": "{color.on-surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of search button icons (icons that appear on search buttons, such as search or clear icons). This determines what color the button icons appear in.<br>CSS variable: --wm-search-btn-icon-color"
+            }
+          },
+          "size": {
+            "value": "{icon.size.@.value}",
+            "type": "icon",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "Controls the size of search button icons. This affects how large the button icons appear. Acceptable units: px.<br>CSS variable: --wm-search-btn-icon-size"
+            }
+          }
+        },
+        "ripple": {
+          "color": {
+            "value": "rgba(255, 255, 255, 0.08)",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the ripple effect color of search buttons (the visual feedback when buttons are pressed). This determines what color the ripple effect appears in when the search button is clicked.<br>CSS variable: --wm-search-btn-ripple-color"
+            }
+          }
+        },
+        "padding": {
+          "value": "{space.0.value} {space.6.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top/bottom, left/right) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding"
+          }
+        },
+        "width": {
+          "value": "auto",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the width of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-width"
+          }
+        }
+      },
+      "placeholder": {
+        "text": {
+          "color": {
+            "value": "{color.outline.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of placeholder text in search input fields (hint text that appears when the field is empty). This determines what color the placeholder text appears in.<br>CSS variable: --wm-search-placeholder-color"
+            }
+          }
+        }
+      },
+      "data-complete": {
+        "background": {
+          "value": "transparent",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of data complete message (which appears after the last item or when no results are found in suggestions). This determines what color the background of data complete message appears in.<br>CSS variable: --wm-search-data-complete-background"
+          }
+        },
+        "padding": {
+          "value": "{space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (all sides) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding"
+          }
+        },
+        "text": {
+          "color": {
+            "value": "{color.outline.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the text color of search data complete message (which appears after the last item or when no results are found in suggestions). This determines what color the text in autocomplete items appears in.<br>CSS variable: --wm-search-data-complete-text-color"
+            }
+          },
+          "font": {
+            "size": {
+              "value": "{body.small.font-size.value}",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-size",
+                "description": "Controls the font size of search data complete message text (which appears after the last item or when no results are found in suggestions). This affects how large the text appears in autocomplete items. Acceptable units: px.<br>CSS variable: --wm-search-data-complete-text-font-size"
+              }
+            },
+            "family": {
+              "value": "{body.small.font-family.value}",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-family",
+                "description": "Sets the font family of search data complete message text (which appears after the last item or when no results are found in suggestions). This determines which font is used for the text in autocomplete items.<br>CSS variable: --wm-search-data-complete-text-font-family"
+              }
+            },
+            "weight": {
+              "value": "{body.small.font-weight.value}",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-weight",
+                "description": "Controls the font weight (boldness) of search data complete message text (which appears after the last item or when no results are found in suggestions). This affects how bold the text appears in autocomplete items.<br>CSS variable: --wm-search-data-complete-text-font-weight"
+              }
+            }
+          }
+        }
+      },
+      "item": {
+        "margin-bottom": {
+          "value": "{space.1.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the bottom margin (vertical spacing) of search result items (individual items in the search results list). This creates spacing between search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-margin-bottom"
+          }
+        },
+        "padding": {
+          "value": "{space.2.value} {space.4.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top/bottom, left/right) of search result items. This creates breathing room inside search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-padding"
+          }
+        },
+        "separator": {
+          "color": {
+            "value": "{color.outline.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of separators between search result items (dividers that appear between items in the search results list). This determines what color the separators appear in.<br>CSS variable: --wm-search-item-separator-color"
+            }
+          },
+          "width": {
+            "value": "0",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the width (thickness) of separators between search result items. This determines how thick the separators appear. Acceptable units: px.<br>CSS variable: --wm-search-item-separator-width"
+            }
+          }
+        },
+        "text": {
+          "color": {
+            "value": "{color.on-surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the text color of search result items. This determines what color the text in search result items appears in.<br>CSS variable: --wm-search-item-text-color"
+            }
+          },
+          "font": {
+            "size": {
+              "value": "{body.medium.font-size.value}",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-size",
+                "description": "Controls the font size of search result item text. This affects how large the text appears in search result items. Acceptable units: px.<br>CSS variable: --wm-search-item-text-font-size"
+              }
+            },
+            "family": {
+              "value": "{body.medium.font-family.value}",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-family",
+                "description": "Sets the font family of search result item text. This determines which font is used for the text in search result items.<br>CSS variable: --wm-search-item-text-font-family"
+              }
+            },
+            "weight": {
+              "value": "{body.medium.font-weight.value}",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-weight",
+                "description": "Controls the font weight (boldness) of search result item text. This affects how bold the text appears in search result items.<br>CSS variable: --wm-search-item-text-font-weight"
+              }
+            }
+          }
+        }
+      },
+      "clear-btn":{
+        "icon":{
+          "color":{
+            "value":"{color.on-surface.@.value}",
+            "type":"color",
+            "attributes":{
+              "subtype":"color",
+              "description":"Sets the color of search clear button icons. This determines what color the clear button icons appear in.<br>CSS variable: --wm-search-clear-btn-icon-color"
+            }
+          },
+          "size":{
+            "value":"{icon.size.@.value}",
+            "type":"space",
+            "attributes":{
+              "subtype":"icon-size",
+              "description":"Controls the size of search clear button icons. This affects how large the clear button icons appear. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-icon-size"
+            }
+          }
+        },
+        "padding":{
+          "value":"{space.0.value}",
+          "type":"space",
+          "attributes":{
+            "subtype":"space",
+            "description":"Controls the padding (all sides) of search clear button. This creates breathing room inside the clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding"
+          }
+        },
+        "border":{
+          "radius":{
+            "value":"{radius.sm.value}",
+            "type":"radius",
+            "attributes":{
+              "subtype":"radius",
+              "description":"Controls the border radius of search clear button. This determines the roundness of the corners of the clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-border-radius"
+            }
+          }
+        },
+        "background":{
+          "color":{
+            "value":"{color.transparent.@.value}",
+            "type":"color",
+            "attributes":{
+              "subtype":"color",
+              "description":"Sets the background color of search clear button. This determines the color of the clear button.<br>CSS variable: --wm-search-clear-btn-background-color"
+            }
+          }
+        },
+        "width":{
+          "value":"{space.9.value}",
+          "type":"space",
+          "attributes":{
+            "subtype":"space",
+            "description":"Controls the width of search clear button. This determines the width of the clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-width"
+          }
+        }
+      }
+    }
+  },
+  "appearances": {}
+}