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

package/src/tokens/mobile/components/progress-bar/progress-bar.json

@@ -0,0 +1,216 @@
+{
+  "progress-bar": {
+    "meta": {
+      "appearances": {
+        "filled": {
+          "mapping":{
+            "selector": {
+              "mobile": ".app-progress-bar"
+            }
+          },
+          "variantGroups": {
+            "status": {
+              "default": {
+                "selector": {
+                  "mobile": ".progress-bar-default"
+                }
+              },
+              "success": {
+                "selector": {
+                  "mobile": ".progress-bar-success"
+                }
+              },
+              "info": {
+                "selector": {
+                  "mobile": ".progress-bar-info"
+                }
+              },
+              "warning": {
+                "selector": {
+                  "mobile": ".progress-bar-warning"
+                }
+              },
+              "danger": {
+                "selector": {
+                  "mobile": ".progress-bar-danger"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+        "height": {
+          "value": "16px",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls how tall progress bars appear (loading indicators that show completion percentage). This determines the vertical size of the progress bar track.<br>CSS variable: --wm-progress-bar-height"
+          }
+        },
+        "background": {
+          "inactive": {
+            "value": "{color.primary.container.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of progress bars (the empty/unfilled portion of the loading indicator). This is the color of the track that shows the remaining progress.<br>CSS variable: --wm-progress-bar-background-inactive"
+            }
+          },
+          "active": {
+            "value": "{color.primary.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the fill color of progress bars (the filled portion of the loading indicator). This is the color that shows the completed progress.<br>CSS variable: --wm-progress-bar-background-active"
+            }
+          }
+        },
+        "radius": {
+          "value": "{radius.lg.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the corner rounding of progress bars (loading indicators). This makes the progress bars appear with rounded corners instead of sharp edges for a softer appearance.<br>CSS variable: --wm-progress-bar-radius"
+          }
+        },
+        "tooltip": {
+          "background": {
+            "value": "{color.info.container.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of progress bar tooltips (small popup boxes that display additional information when hovering over or interacting with progress bars). This is the main background color that appears behind the tooltip content.<br>CSS variable: --wm-progress-bar-tooltip-background"
+            }
+          },
+          "padding": {
+            "horizontal": {
+              "value": "{space.2.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the horizontal padding (left and right spacing) inside progress bar tooltips. This creates breathing room on the left and right sides of the tooltip content. Acceptable units: px.<br>CSS variable: --wm-progress-bar-tooltip-padding-horizontal"
+              }
+            },
+            "vertical": {
+              "value": "{space.1.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the vertical padding (top and bottom spacing) inside progress bar tooltips. This creates breathing room above and below the tooltip content. Acceptable units: px.<br>CSS variable: --wm-progress-bar-tooltip-padding-vertical"
+              }
+            }
+          },
+          "border": {
+            "radius": {
+              "value": "{radius.xs.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "radius",
+                "description": "Controls the corner rounding of progress bar tooltips. This makes the tooltips appear with rounded corners for a softer appearance.<br>CSS variable: --wm-progress-bar-tooltip-border-radius"
+              }
+            }
+          },
+          "label": {
+            "color": {
+              "value": "{color.scrim.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the text color of progress bar tooltip labels (the text that appears inside tooltips to show progress information). This determines what color the tooltip text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-progress-bar-tooltip-label-color"
+              }
+            },
+            "size": {
+              "value": "{body.small.font-size.value}",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-size",
+                "description": "Controls the size of progress bar tooltip label text. This affects how large the tooltip text appears.<br>CSS variable: --wm-progress-bar-tooltip-label-size"
+              }
+            }
+          },
+          "triangle": {
+            "border": {
+              "bottom-color": {
+                "value": "{color.info.container.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the color of the triangle pointer in progress bar tooltips (the small arrow that points from the tooltip to the progress bar). This determines what color the triangle appears in, typically matching the tooltip background.<br>CSS variable: --wm-progress-bar-tooltip-triangle-border-bottom-color"
+                }
+              }
+            }
+          }
+        }
+    },
+    "appearances": {
+      "filled": {
+        "variantGroups": {
+          "status": {
+            "default": {
+                "background": {
+                  "active": {
+                    "value": "{color.primary.@.value}",
+                    "type": "color"
+                  },
+                  "inactive": {
+                    "value": "{color.primary.container.@.value}",
+                    "type": "color"
+                  }
+                }
+            },
+            "success": {
+                "background": {
+                  "active": {
+                    "value": "{color.success.@.value}",
+                    "type": "color"
+                  },
+                  "inactive": {
+                    "value": "{color.success.container.@.value}",
+                    "type": "color"
+                  }
+                }
+            },
+            "info": {
+                "background": {
+                  "active": {
+                    "value": "{color.info.@.value}",
+                    "type": "color"
+                  },
+                  "inactive": {
+                    "value": "{color.info.container.@.value}",
+                    "type": "color"
+                  }
+                }
+            },
+            "warning": {
+                "background": {
+                  "active": {
+                    "value": "{color.warning.@.value}",
+                    "type": "color"
+                  },
+                  "inactive": {
+                    "value": "{color.warning.container.@.value}",
+                    "type": "color"
+                  }
+                }
+            },
+            "danger": {
+                "background": {
+                  "active": {
+                    "value": "{color.error.@.value}",
+                    "type": "color"
+                  },
+                  "inactive": {
+                    "value": "{color.error.container.@.value}",
+                    "type": "color"
+                  }
+                }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/tokens/mobile/components/progress-circle/progress-circle.json

@@ -0,0 +1,176 @@
+{
+  "progress-circle": {
+    "meta": {
+      "appearances": {
+        "filled": {
+          "mapping": {
+            "selector": {
+              "mobile": ".app-progress-circle"
+            }
+          },
+          "variantGroups": {
+            "status": {
+              "default": {
+                "selector": {
+                  "mobile": ".progress-circle-default"
+                }
+              },
+              "success": {
+                "selector": {
+                  "mobile": ".progress-circle-success"
+                }
+              },
+              "info": {
+                "selector": {
+                  "mobile": ".progress-circle-info"
+                }
+              },
+              "warning": {
+                "selector": {
+                  "mobile": ".progress-circle-warning"
+                }
+              },
+              "danger": {
+                "selector": {
+                  "mobile": ".progress-circle-danger"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "sub-title": {
+        "font": {
+          "family": {
+            "value": "{font.family.brand.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-family",
+              "description": "Sets the typeface (font style) for progress circle subtitle text (secondary text that appears below the progress indicator). This determines whether the subtitle text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-progress-circle-sub-title-font-family"
+            }
+          },
+          "size": {
+            "value": "{body.small.font-size.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "Controls the size of progress circle subtitle text (secondary text that appears below the progress indicator). This affects how large the subtitle text appears.<br>CSS variable: --wm-progress-circle-sub-title-font-size"
+            }
+          }
+        },
+        "color": {
+          "value": "{color.scrim.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of progress circle subtitles (secondary text that appears below the progress indicator). This determines what color the subtitle text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-progress-circle-sub-title-color"
+          }
+        }
+      },
+      "stroke": {
+        "inactive": {
+          "value": "{color.primary.container.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of circular progress indicators (the unfilled portion of the circle that shows remaining progress). This is the color of the circle track that shows how much progress is left.<br>CSS variable: --wm-progress-circle-stroke-inactive"
+          }
+        },
+        "active": {
+          "value": "{color.primary.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the fill color of circular progress indicators (the filled portion of the circle that shows completed progress). This is the color that shows how much progress has been made.<br>CSS variable: --wm-progress-circle-stroke-active"
+          }
+        }
+      },
+      "width":{
+        "value": "150px",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the width of progress circles (circular visual indicators that show the completion status of a task or process). This determines how wide the progress circle appears. Acceptable units: px.<br>CSS variable: --wm-progress-circle-width"
+        }
+      },
+      "height":{
+        "value": "150px",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the height of progress circles (circular visual indicators that show the completion status of a task or process). This determines how tall the progress circle appears. Acceptable units: px.<br>CSS variable: --wm-progress-circle-height"
+        }
+      }
+    },
+    "appearances": {
+      "filled": {
+        "variantGroups": {
+          "status": {
+            "default": {
+              "stroke": {
+                "inactive": {
+                  "value": "{color.primary.container.@.value}",
+                  "type": "color"
+                },
+                "active": {
+                  "value": "{color.primary.@.value}",
+                  "type": "color"
+                }
+              }
+            },
+            "success": {
+              "stroke": {
+                "inactive": {
+                  "value": "{color.success.container.@.value}",
+                  "type": "color"
+                },
+                "active": {
+                  "value": "{color.success.@.value}",
+                  "type": "color"
+                }
+              }
+            },
+            "info": {
+              "stroke": {
+                "inactive": {
+                  "value": "{color.info.container.@.value}",
+                  "type": "color"
+                },
+                "active": {
+                  "value": "{color.info.@.value}",
+                  "type": "color"
+                }
+              }
+            },
+            "warning": {
+              "stroke": {
+                "inactive": {
+                  "value": "{color.warning.container.@.value}",
+                  "type": "color"
+                },
+                "active": {
+                  "value": "{color.warning.@.value}",
+                  "type": "color"
+                }
+              }
+            },
+            "danger": {
+              "stroke": {
+                "inactive": {
+                  "value": "{color.error.container.@.value}",
+                  "type": "color"
+                },
+                "active": {
+                  "value": "{color.error.@.value}",
+                  "type": "color"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,279 @@
+{
+  "radiobutton": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-radioset"
+        },
+        "states": {
+          "disabled": {
+            "selector": {
+              "mobile": "-disabled"
+            }
+          },
+          "checked": {
+            "selector": {
+              "mobile": "-checked-icon, .app-radioset-selected-label"
+            }
+          }
+        }
+      },
+      "appearances": {}
+    },
+    "mapping": {
+      "gap": {
+        "value": "{space.1.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the horizontal spacing between the radio button (the circular input element) and its label text. This creates visual separation so users can easily distinguish between the clickable radio button and its descriptive text.<br>CSS variable: --wm-radiobutton-gap"
+        }
+      },
+      "label": {
+        "font-size": {
+          "value": "{body.large.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls how large the radio button label text appears (the descriptive text that appears next to the radio button). This affects the size of the text that explains what the radio option represents.<br>CSS variable: --wm-radiobutton-label-font-size"
+          }
+        },
+        "font-family": {
+          "value": "{body.large.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Sets the typeface (font style) for radio button label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-radiobutton-label-font-family"
+          }
+        },
+        "font-weight": {
+          "value": "{body.large.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold radio button 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-radiobutton-label-font-weight"
+          }
+        },
+        "line-height": {
+          "value": "{body.large.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when radio button label text wraps to multiple lines. This is important when the label text is long and needs to wrap.<br>CSS variable: --wm-radiobutton-label-line-height"
+          }
+        },
+        "letter-spacing": {
+          "value": "{body.large.letter-spacing.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "letter-spacing",
+            "description": "Controls the horizontal spacing between individual letters in radio button label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-radiobutton-label-letter-spacing"
+          }
+        },
+        "color": {
+          "@": {
+            "value": "{color.on-surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the text color of radio button labels (the descriptive text that appears next to the radio button). This should contrast well with the background for readability.<br>CSS variable: --wm-radiobutton-label-color"
+            }
+          }
+        }
+      },
+      "size": {
+        "value": "20px",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the width and height of radio buttons (the circular input elements that users click to select options). This determines how large the actual radio button appears visually.<br>CSS variable: --wm-radiobutton-size"
+        }
+      },
+      "indicator": {
+        "size": {
+          "value": "16px",
+          "type": "space",
+          "attributes": {
+            "subtype": "icon-size",
+            "description": "Controls the size of the radio button indicator (the small dot that appears inside the radio button when it's selected). This dot is typically smaller than the radio button itself to fit nicely inside.<br>CSS variable: --wm-radiobutton-indicator-size"
+          }
+        }
+      },
+      "color": {
+        "@": {
+          "value": "transparent",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of radio button indicators. When transparent, only the border is visible. When filled with a color, the radio button appears with a colored background.<br>CSS variable: --wm-radiobutton-color"
+          }
+        }
+      },
+      "border": {
+        "width": {
+          "value": "2px",
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the thickness of the border around radio buttons (the circular input elements). This creates the outline that defines the radio button shape and makes it visible to users.<br>CSS variable: --wm-radiobutton-border-width"
+          }
+        },
+        "color": {
+          "value": "{color.on-surface.variant.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of the border around radio buttons (the circular input elements). This determines the color of the outline that defines the radio button shape in its default/unselected state.<br>CSS variable: --wm-radiobutton-border-color"
+          }
+        }
+      },
+      "title": {
+        "background": {
+          "color": {
+            "value": "transparent",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of radio button group titles (section titles that group related radio button options). When transparent, only the title text is visible. When filled with a color, the title appears with a colored background.<br>CSS variable: --wm-radiobutton-title-background-color"
+            }
+          }
+        },
+        "color": {
+          "value": "{color.on-surface.variant.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of radio button group titles (section titles that group related radio button options). This determines what color the title text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-radiobutton-title-color"
+          }
+        },
+        "font": {
+          "size": {
+            "value": "{body.large.font-size.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "Controls the size of radio button group title text. This affects how large the title text appears.<br>CSS variable: --wm-radiobutton-title-font-size"
+            }
+          },
+          "family": {
+            "value": "{body.large.font-family.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-family",
+              "description": "Sets the typeface (font style) for radio button group title text. This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-radiobutton-title-font-family"
+            }
+          }
+        },
+        "line-height": {
+          "value": "40px",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when radio button group title text wraps to multiple lines. This ensures proper spacing for the title text. Acceptable units: px.<br>CSS variable: --wm-radiobutton-title-line-height"
+          }
+        },
+        "padding": {
+          "value": "{space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding inside radio button group titles. This creates breathing room around the title text. Acceptable units: px.<br>CSS variable: --wm-radiobutton-title-padding"
+          }
+        }
+      },
+      "set": {
+        "item": {
+          "column": {
+            "gap": {
+              "value": "{space.6.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the vertical spacing between radio button options when they are arranged in columns (stacked vertically). This creates visual separation between each radio option in a vertical list.<br>CSS variable: --wm-radiobutton-set-item-column-gap"
+              }
+            }
+          },
+          "row": {
+            "gap": {
+              "value": "{space.2.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the horizontal spacing between radio button options when they are arranged in rows (side by side horizontally). This creates visual separation between each radio option in a horizontal list.<br>CSS variable: --wm-radiobutton-set-item-row-gap"
+              }
+            }
+          }
+        }
+      },
+      "states": {
+        "checked": {
+          "label": {
+            "color": {
+              "@": {
+                "value": "{color.on-surface.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the text color of checked radio button labels (the text that appears next to selected radio button options). This determines what color the label text appears in when the radio button is selected.<br>CSS variable: --wm-radiobutton-label-color (checked state)"
+                }
+              }
+            }
+          },
+          "color": {
+            "@": {
+              "value": "{color.secondary.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the background color of checked radio button indicators. This fills the selected radio button with a color to visually indicate it's been selected.<br>CSS variable: --wm-radiobutton-color (checked state)"
+              }
+            }
+          },
+          "border": {
+            "color": {
+                "value": "{color.secondary.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the color of the border around checked radio button indicators. This determines the color of the outline when the radio button is selected.<br>CSS variable: --wm-radiobutton-border-color (checked state)"
+                }
+            }
+          }
+        },
+        "disabled": {
+          "label": {
+            "color": {
+              "@": {
+                "value": "{color.on-surface.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the text color of disabled radio button labels (the text that appears next to disabled radio button options). This determines what color the label text appears in when the radio button is disabled.<br>CSS variable: --wm-radiobutton-label-color (disabled state)"
+                }
+              }
+            }
+          },
+          "border": {
+            "color": {
+              "value": "{color.on-surface.variant.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the color of the border around disabled radio button indicators. This determines the color of the outline when the radio button is disabled.<br>CSS variable: --wm-radiobutton-border-color (disabled state)"
+              }
+            }
+          },
+          "opacity": {
+            "value": "0.8",
+            "type": "radius",
+            "attributes": {
+              "subtype": "opacity",
+              "description": "Controls the transparency of disabled radio buttons. When set to 0.8, disabled radio buttons appear slightly faded to indicate they are not interactive. Lower values make them more transparent, higher values make them more opaque.<br>CSS variable: --wm-radiobutton-opacity"
+            }
+          }
+        }
+      }
+    },
+    "appearances": {}
+  }
+}