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

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

@@ -0,0 +1,229 @@
+{
+  "select": {
+    "meta": {
+      "selector": {
+        "mobile": ".app-select"
+      },
+      "states": {
+        "active": {
+          "selector": {
+            "mobile": "-active-item"
+          }
+        }
+      }
+    },
+    "mapping": {
+      "arrow-button": {
+        "padding": {
+          "value": "{space.1.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding of arrow button This creates breathing room on the arrow button. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-padding"
+          }
+        },
+        "background-color": {
+          "value": "{color.outline.variant.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of select arrow button This determines what background color the select arrow button appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-select-arrow-button--background-color"
+          }
+        },
+        "icon": {
+          "color": {
+            "value": "{color.on-background.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-icon-color"
+            }
+          },
+      "height": {
+        "value": "24px",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the height.<br>CSS variable: --wm-selec-icon-height"
+        }
+       },
+        "padding": {
+          "value": "{space.1.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding of arrow button icon This creates breathing room on the arrow button. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-icon-padding"
+          }
+        },
+        "border": {
+          "radius": {
+            "value": "{radius.none.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-arrow-button-icon-border-radius"
+            }
+          },
+          "width": {
+            "value": "{border.width.0.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-icon-border-width"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the style of the border around select modal content. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-select-arrow-button-icon-border-style"
+            }
+          },
+          "color": {
+            "value": "{color.outline.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-arrow-button-icon-border-color"
+            }
+          }
+        },
+          "font-size": {
+            "value": "{body.large.font-size.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-icon-font-size"
+            }
+          }
+        },
+        "border": {
+          "radius": {
+            "value": "{radius.none.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-modal-content-border-radius"
+            }
+          },
+          "width": {
+            "value": "{border.width.0.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-modal-content-border-width"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the style of the border around select modal content. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-select-modal-content-border-style"
+            }
+          },
+          "color": {
+            "value": "{color.outline.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-modal-content-border-color"
+            }
+          }
+        }
+      },
+      "modal-content": {
+        "background-color": {
+          "value": "{color.outline.variant.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of select modal content.This determines what background color the select modal content appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-select-modal-content-background-color"
+          }
+        },
+        "border": {
+          "radius": {
+            "value": "{radius.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-modal-content-border-radius"
+            }
+          },
+          "width": {
+            "value": "{border.width.0.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-modal-content-border-width"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the style of the border around select modal content. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-select-modal-content-border-style"
+            }
+          },
+          "color": {
+            "value": "{color.outline.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-modal-content-border-color"
+            }
+          }
+        }
+      },
+      "modal-text": {
+        "font-size": {
+          "value": "{body.large.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "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-label-font-size"
+          }
+        },
+        "font-family": {
+          "value": "{body.medium.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "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-label-font-family"
+          }
+        },
+        "color": {
+          "value": "{color.on-surface.variant.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "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-label-color"
+          }
+        }
+      },
+      "check": {
+        "icon": {
+          "color": {
+            "value": "{color.on-background.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-icon-color"
+            }
+          },
+          "font-size": {
+            "value": "{icon.size.md.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-icon-font-size"
+            }
+          }
+        }
+      }
+    },
+    "appearance": {}
+  }
+}

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

@@ -0,0 +1,111 @@
+{
+    "slider": {
+        "meta": {
+            "mapping": {
+                "selector": {
+                    "mobile": ".app-slider"
+                }
+            }
+        },
+        "mapping": {
+            "track": {
+                "height": {
+                    "value": "{space.4.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "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"
+                    }
+                },
+                "margin-vertical": {
+                    "value": "{space.4.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the vertical margin (top and bottom spacing) of slider tracks. This creates spacing above and below the track. Acceptable units: px.<br>CSS variable: --wm-slider-track-margin-vertical"
+                    }
+                },
+                "border-radius": {
+                    "value": "{radius.lg.value}",
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "radius",
+                        "description": "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"
+                    }
+                }
+            },
+            "min-track": {
+                "background": {
+                    "value": "{color.surface.tint.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the background color of slider minimum tracks (the portion of the track from the start to the current value). This determines what color the minimum track appears in.<br>CSS variable: --wm-slider-min-track-background"
+                    }
+                }
+            },
+            "max-track": {
+                "background": {
+                    "value": "{color.primary.container.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the background color of slider maximum tracks (the portion of the track from the current value to the end). This determines what color the maximum track appears in, typically matching the primary container theme color.<br>CSS variable: --wm-slider-max-track-background"
+                    }
+                }
+            },
+            "thumb": {
+                "background": {
+                    "value": "{color.surface.tint.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the background color of slider thumbs (the draggable handle that users interact with to set values). This determines what color the thumb appears in.<br>CSS variable: --wm-slider-thumb-background"
+                    }
+                },
+                "height": {
+                    "value": "{space.8.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the height of slider thumbs. This determines the vertical size of the thumb. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-height"
+                    }
+                },
+                "width": {
+                    "value": "{space.1.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the width of slider thumbs. This determines the horizontal size of the thumb. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-width"
+                    }
+                },
+                "border-radius": {
+                    "value": "{radius.xs.value}",
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "radius",
+                        "description": "Controls the border radius (rounded corners) of slider thumbs. This determines how rounded the corners of the thumb appear. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-border-radius"
+                    }
+                }
+            },
+            "tooltip": {
+                "background": {
+                    "value": "#000",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the background color of slider tooltips (popup labels that show the current value when hovering or dragging). This determines what color the background of the tooltip appears in.<br>CSS variable: --wm-slider-tooltip-background"
+                    }
+                },
+                "color": {
+                    "value": "{color.white.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the text color of slider tooltips. This determines what color the text in the tooltip appears in, typically white for contrast against dark backgrounds.<br>CSS variable: --wm-slider-tooltip-color"
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,92 @@
+{
+  "spinner": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-spinner"
+        }
+      }
+    },
+    "mapping": {
+      "background": {
+        "value": "transparent",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Sets the background color of loading spinners (the overlay that appears behind the spinner animation). This creates a backdrop that dims the content while loading.<br>CSS variable: --wm-spinner-background"
+        }
+      },
+      "width": {
+        "value": "100%",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the width of spinner components. This determines how wide the spinner appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-spinner-width"
+        }
+      },
+      "text": {
+        "color": {
+          "value": "{color.scrim.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of loading data messages (the text that appears with the spinner to explain what's loading). This determines the color of the loading message text.<br>CSS variable: --wm-spinner-text-color"
+          }
+        },
+        "font-size": {
+          "value": "{body.large.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the font size of loading data messages (the text that appears with the spinner to explain what's loading). This affects how large the loading message text appears.<br>CSS variable: --wm-spinner-text-font-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 loading data messages. This creates breathing room around the loading message text. Acceptable units: px.<br>CSS variable: --wm-spinner-text-padding"
+          }
+        }
+      },
+      "icon": {
+        "size": {
+          "value": "{icon.size.@.value}",
+          "type": "icon",
+          "attributes": {
+            "subtype": "icon-size",
+            "description": "Controls the size of loading spinner icons (animated indicators that show content is loading). This affects how large the spinner icons appear.<br>CSS variable: --wm-spinner-icon-size"
+          }
+        },
+        "color": {
+          "value": "{color.scrim.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of loading spinner icons (animated indicators that show content is loading). This determines what color the spinner icons appear in.<br>CSS variable: --wm-spinner-icon-color"
+          }
+        }
+      },
+      "lottie": {
+        "width": {
+          "value": "150px",
+          "type": "font",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the width of spinner Lottie animations (animated graphics used as loading indicators). This determines how wide the Lottie animation appears.<br>CSS variable: --wm-spinner-lottie-width"
+          }
+        },
+        "height": {
+          "value": "150px",
+          "type": "font",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the height of spinner Lottie animations (animated graphics used as loading indicators). This determines how tall the Lottie animation appears.<br>CSS variable: --wm-spinner-lottie-height"
+          }
+        }
+      }
+    },
+    "appearances": {}
+  }
+}

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

@@ -0,0 +1,213 @@
+{
+  "switch": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-switch"
+        },
+        "states": {
+          "selected": {
+            "selector": {
+              "mobile": "-btn-selected, .app-switch-btn-selected-text"
+            }
+          },
+          "disabled": {
+            "selector": {
+              "mobile": "-disabled"
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "button": {
+        "background": {
+          "color": {
+            "value": "{color.surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of switch buttons. When set to 'none', the buttons have no background color, making them transparent.<br>CSS variable: --wm-switch-button-background-color"
+            }
+          }
+        },
+        "font": {
+          "size": {
+            "value": "{label.large.font-size.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "Controls the font size of switch button text. This affects how large the text appears on switch buttons. Acceptable units: px.<br>CSS variable: --wm-switch-button-font-size"
+            }
+          },
+          "family": {
+            "value": "{font.family.brand.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-family",
+              "description": "Sets the font family of switch button text. This determines which font is used for the text on switch buttons.<br>CSS variable: --wm-switch-button-font-family"
+            }
+          },
+          "weight": {
+            "value": "{font.weight.500.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Controls the font weight (boldness) of switch button text. This affects how bold the text appears on switch buttons.<br>CSS variable: --wm-switch-button-font-weight"
+            }
+          }
+        },
+        "text": {
+          "transform": {
+            "value": "capitalize",
+            "type": "font",
+            "attributes": {
+              "subtype": "text-transform",
+              "description": "Controls text transformation for switch button text (the text content within clickable buttons). 'none' keeps the original case, 'uppercase' makes all text uppercase, 'lowercase' makes all text lowercase, and 'capitalize' capitalizes the first letter of each word.<br>CSS variable: --wm-switch-button-text-transform"
+            }
+          }
+        },
+        "height": {
+          "value": "{space.10.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls how tall switch buttons appear (segmented control buttons that allow users to toggle between different options). This determines the vertical size of each switch button.<br>CSS variable: --wm-switch-button-height"
+          }
+        },
+        "color": {
+          "value": "{color.outline.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of switch buttons (the color of text content within the buttons). This should contrast well with the background for readability.<br>CSS variable: --wm-switch-button-color"
+          }
+        },
+        "border": {
+          "color": {
+            "value": "{color.outline.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border around switch buttons. This determines the color of the outline that defines the button shape in its default/unselected state.<br>CSS variable: --wm-switch-button-border-color"
+            }
+          },
+          "width": {
+            "value": "1px",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around switch buttons. This creates the outline that defines the button shape and makes it visible to users.<br>CSS variable: --wm-switch-button-border-width"
+            }
+          },
+          "radius": {
+            "value": "{radius.lg.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of switch buttons. When set to a large radius value, the buttons appear with rounded corners, creating a softer, more modern appearance.<br>CSS variable: --wm-switch-button-border-radius"
+            }
+          }
+        },
+        "padding": {
+          "value": "{space.0.value} {space.4.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding (top/bottom, left/right) inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons. Acceptable units: px.<br>CSS variable: --wm-switch-button-padding"
+          }
+        },
+        "ripple": {
+          "color": {
+            "value": "rgba(255, 255, 255, 0.08)",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the ripple effect that appears when users interact with switch buttons. This creates visual feedback to show that the button is interactive and responsive to user actions, typically appearing as a subtle overlay when the button is pressed.<br>CSS variable: --wm-switch-button-ripple-color"
+            }
+          }
+        }
+      },
+      "states": {
+        "selected": {
+          "button": {
+            "background": {
+              "color": {
+                "value": "{color.secondary.fixed.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the background color of selected switch buttons. When a button is selected, it uses this background color to visually distinguish it from unselected buttons, typically using a secondary container color to indicate the active state.<br>CSS variable: --wm-switch-button-background-color (selected state)"
+                }
+              }
+            },
+            "color": {
+              "value": "{color.on-secondary.container.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the text color of selected switch buttons. This ensures the text remains readable against the selected button's background, typically using a color that contrasts well with the secondary container background.<br>CSS variable: --wm-switch-button-color (selected state)"
+              }
+            },
+            "border": {
+              "color": {
+                "value": "{color.outline.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the border color of selected switch buttons. This maintains the border outline even when the button is selected, helping to maintain visual consistency with the overall switch component design.<br>CSS variable: --wm-switch-button-border-color (selected state)"
+                }
+              }
+            },
+            "font": {
+              "size": {
+                "value": "{label.large.font-size.value}",
+                "type": "font",
+                "attributes": {
+                  "subtype": "font-size",
+                  "description": "Controls the font size of switch button text. This affects how large the text appears on switch buttons. Acceptable units: px.<br>CSS variable: --wm-switch-button-font-size"
+                }
+              },
+              "family": {
+                "value": "{font.family.brand.value}",
+                "type": "font",
+                "attributes": {
+                  "subtype": "font-family",
+                  "description": "Sets the font family of switch button text. This determines which font is used for the text on switch buttons.<br>CSS variable: --wm-switch-button-font-family"
+                }
+              },
+              "weight": {
+                "value": "{font.weight.500.value}",
+                "type": "font",
+                "attributes": {
+                  "subtype": "font-weight",
+                  "description": "Controls the font weight (boldness) of switch button text. This affects how bold the text appears on switch buttons.<br>CSS variable: --wm-switch-button-font-weight"
+                }
+              }
+            },
+            "text": {
+              "transform": {
+                "value": "capitalize",
+                "type": "font",
+                "attributes": {
+                  "subtype": "text-transform",
+                  "description": "Controls text transformation for switch button text (the text content within clickable buttons). 'none' keeps the original case, 'uppercase' makes all text uppercase, 'lowercase' makes all text lowercase, and 'capitalize' capitalizes the first letter of each word.<br>CSS variable: --wm-switch-button-text-transform"
+                }
+              }
+            }
+          }
+        },
+        "disabled": {
+          "opacity": {
+            "value": "0.6",
+            "type": "radius",
+            "attributes": {
+              "subtype": "opacity",
+              "description": "Controls the transparency of disabled switch buttons. When set to 0.6, disabled switches appear faded to indicate they are not interactive. Lower values make them more transparent, higher values make them more opaque.<br>CSS variable: --wm-switch-opacity"
+            }
+          }
+        }
+      }
+    }
+  }
+}