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

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

@@ -0,0 +1,257 @@
+{
+  "progress-circle": {
+    "meta": {
+      "appearances": {
+        "filled": {
+          "mapping": {
+            "selector": {
+              "web": ".app-progress.circle"
+            }
+          },
+          "variantGroups": {
+            "status": {
+              "default": {
+                "selector": {
+                  "web": ".progress-circle-default"
+                }
+              },
+              "success": {
+                "selector": {
+                  "web": ".progress-circle-success"
+                }
+              },
+              "info": {
+                "selector": {
+                  "web": ".progress-circle-info"
+                }
+              },
+              "warning": {
+                "selector": {
+                  "web": ".progress-circle-warning"
+                }
+              },
+              "danger": {
+                "selector": {
+                  "web": ".progress-circle-danger"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "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"
+          }
+        }
+      },
+      "label": {
+        "color": {
+          "value": "{color.primary.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of circular progress indicator labels (the percentage or text that appears in the center of the circle). This should contrast well with the progress circle colors for readability.<br>CSS variable: --wm-progress-circle-label-color"
+          }
+        },
+        "font-size": {
+          "value": "{h4.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls how large the label text appears.<br>CSS variable: --wm-progress-circle-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-progress-circle-label-font-family"
+          }
+        },
+        "font-weight": {
+          "value": "{body.medium.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold the 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-progress-circle-label-font-weight"
+          }
+        },
+        "line-height": {
+          "value": "{body.medium.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when label text wraps to multiple lines.<br>CSS variable: --wm-progress-circle-label-line-height"
+          }
+        },
+        "letter-spacing": {
+          "value": "{body.medium.letter-spacing.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "letter-spacing",
+            "description": "Controls the horizontal spacing between individual characters in label text.<br>CSS variable: --wm-progress-circle-label-letter-spacing"
+          }
+        }
+      }
+    },
+    "appearances": {
+      "filled": {
+        "variantGroups": {
+          "status": {
+            "default": {
+              "stroke": {
+                "inactive": {
+                  "value": "{color.primary.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "active": {
+                  "value": "{color.primary.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "label": {
+                "color": {
+                  "value": "{color.primary.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            },
+            "success": {
+              "stroke": {
+                "inactive": {
+                  "value": "{color.success.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "active": {
+                  "value": "{color.success.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "label": {
+                "color": {
+                  "value": "{color.success.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            },
+            "info": {
+              "stroke": {
+                "inactive": {
+                  "value": "{color.info.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "active": {
+                  "value": "{color.info.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "label": {
+                "color": {
+                  "value": "{color.info.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            },
+            "warning": {
+              "stroke": {
+                "inactive": {
+                  "value": "{color.warning.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "active": {
+                  "value": "{color.warning.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "label": {
+                "color": {
+                  "value": "{color.warning.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            },
+            "danger": {
+              "stroke": {
+                "inactive": {
+                  "value": "{color.error.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "active": {
+                  "value": "{color.error.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "label": {
+                "color": {
+                  "value": "{color.error.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/tokens/web/components/radioset/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 |
+|-------|------------|
+| gap | 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 | 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 |
+| label.font-family | 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 |
+| label.font-weight | Controls how thick or bold the 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 |
+| label.line-height | 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 |
+| label.letter-spacing | 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 |
+| label.color.@ | 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 | 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 | 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 |
+| border.width | 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 |
+| border.color | 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 |
+| state.layer.size | Controls the size of the invisible clickable area around radio buttons (the state layer). This area is larger than the visible radio button, making it easier for users to click and interact with the radio button.<br>CSS variable: --wm-radiobutton-state-layer-size |
+| state.layer.color | Sets the color of the state layer that appears when users hover, focus, or interact with radio buttons. This creates visual feedback to show that the radio button is interactive and responsive to user actions.<br>CSS variable: --wm-radiobutton-state-layer-color |
+| state.layer.opacity | Controls the transparency of the state layer that appears during user interactions (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-radiobutton-state-layer-opacity |
+| set.item.column.gap | 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 |
+| set.item.row.gap | 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 |

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

@@ -0,0 +1,259 @@
+{
+  "radiobutton": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".app-radioset"
+        },
+        "states": {
+          "hover": {
+            "selector": {
+              "web": " .app-radio:has(label > input[type='radio']:hover)"
+            }
+          },
+          "focus": {
+            "selector": {
+              "web": " .app-radio:has(abel > input[type='radio']:focus)"
+            }
+          },
+          "active": {
+            "selector": {
+              "web": " .app-radio:has(label > input[type='radio']:active)"
+            }
+          },
+          "checked": {
+            "selector": {
+              "web": " .app-radio:has(label > input[type='radio']:checked)"
+            }
+          }
+        }
+      },
+      "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 the 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": "10px",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "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"
+          }
+        }
+      },
+      "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"
+          }
+        }
+      },
+      "state": {
+        "layer": {
+          "size": {
+            "value": "40px",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the size of the invisible clickable area around radio buttons (the state layer). This area is larger than the visible radio button, making it easier for users to click and interact with the radio button.<br>CSS variable: --wm-radiobutton-state-layer-size"
+            }
+          },
+          "color": {
+            "value": "{color.on-surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the state layer that appears when users hover, focus, or interact with radio buttons. This creates visual feedback to show that the radio button is interactive and responsive to user actions.<br>CSS variable: --wm-radiobutton-state-layer-color"
+            }
+          },
+          "opacity": {
+            "value": "0",
+            "type": "radius",
+            "attributes": {
+              "subtype": "opacity",
+              "description": "Controls the transparency of the state layer that appears during user interactions (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-radiobutton-state-layer-opacity"
+            }
+          }
+        }
+      },
+      "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"
+                }
+              }
+            }
+          },
+          "state": {
+            "layer": {
+              "color": {
+                "value": "{color.secondary.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              }
+            }
+          },
+          "border": {
+            "color": {
+              "value": "{color.secondary.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            }
+          }
+        },
+        "hover": {
+          "state": {
+            "layer": {
+              "opacity": {
+                "value": "{opacity.hover.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "opacity"
+                }
+              }
+            }
+          }
+        },
+        "focus": {
+          "state": {
+            "layer": {
+              "opacity": {
+                "value": "{opacity.focus.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "opacity"
+                }
+              }
+            }
+          }
+        },
+        "active": {
+          "state": {
+            "layer": {
+              "opacity": {
+                "value": "{opacity.active.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "opacity"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "appearances": {}
+  }
+}

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

@@ -0,0 +1,14 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| gap | 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-gap |
+| cursor | Controls the mouse cursor style when hovering over rating components. 'pointer' shows a hand cursor indicating the rating is clickable, 'default' shows an arrow cursor, and 'not-allowed' shows a blocked cursor for disabled ratings.<br>CSS variable: --wm-rating-cursor |
+| icon.gap | Controls the spacing between individual rating icons (the stars in a star rating system). This creates visual separation between each star so users can easily distinguish between them.<br>CSS variable: --wm-rating-icon-gap |
+| icon.color | 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 |
+| icon.opacity | Controls the transparency of rating icons (the stars in a star rating system). Lower values make the stars more transparent, higher values make them more opaque.<br>CSS variable: --wm-rating-icon-opacity |
+| icon.size | 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 |

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

@@ -0,0 +1,116 @@
+{
+  "rating": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".app-ratings"
+        },
+        "states": {
+          "active": {
+            "selector": {
+              "web": " label:hover, label:hover ~ label, label.active"
+            }
+          },
+          "disabled": {
+            "selector": {
+              "web": " .ratings-wrapper .rating-style.disabled, .ratings-wrapper .rating-style.disabled .label"
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "gap": {
+        "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-gap"
+        }
+      },
+      "cursor": {
+        "value": "pointer",
+        "type": "radius",
+        "attributes": {
+          "subtype": "cursor",
+          "description": "Controls the mouse cursor style when hovering over rating components. 'pointer' shows a hand cursor indicating the rating is clickable, 'default' shows an arrow cursor, and 'not-allowed' shows a blocked cursor for disabled ratings.<br>CSS variable: --wm-rating-cursor"
+        }
+      },
+      "icon": {
+        "gap": {
+          "value": "{space.1.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the spacing between individual rating icons (the stars in a star rating system). This creates visual separation between each star so users can easily distinguish between them.<br>CSS variable: --wm-rating-icon-gap"
+          }
+        },
+        "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"
+          }
+        },
+        "opacity": {
+          "value": "0.38",
+          "type": "radius",
+          "attributes": {
+            "subtype": "opacity",
+            "description": "Controls the transparency of rating icons (the stars in a star rating system). Lower values make the stars more transparent, higher values make them more opaque.<br>CSS variable: --wm-rating-icon-opacity"
+          }
+        },
+        "size": {
+          "value": "{icon.size.@.value}",
+          "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"
+          }
+        }
+      },
+      "states": {
+        "active": {
+          "icon": {
+            "opacity": {
+              "value": "1",
+              "type": "radius",
+              "attributes": {
+                "subtype": "opacity",
+                "description": "Controls the transparency of active rating icons (the stars that are selected or hovered over). When set to 1, the stars are fully opaque and clearly visible.<br>CSS variable: --wm-rating-active-icon-opacity"
+              }
+            },
+            "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-active-icon-color"
+              }
+            }
+          }
+        },
+        "disabled": {
+          "cursor": {
+            "value": "default",
+            "type": "radius",
+            "attributes": {
+              "subtype": "cursor",
+              "description": "Controls the mouse cursor style for disabled rating components. 'default' shows an arrow cursor indicating the rating cannot be clicked, 'not-allowed' shows a blocked cursor.<br>CSS variable: --wm-rating-disabled-cursor"
+            }
+          },
+          "opacity": {
+            "value": "1",
+            "type": "radius",
+            "attributes": {
+              "subtype": "opacity",
+              "description": "Controls the transparency of disabled rating components. When set to 1, the rating appears fully opaque but non-interactive.<br>CSS variable: --wm-rating-disabled-opacity"
+            }
+          }
+        }
+      }
+    },
+    "appearances": {}
+  }
+}