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

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

@@ -0,0 +1,439 @@
+{
+  "progress-bar": {
+    "meta": {
+      "appearances": {
+        "filled": {
+          "mapping": {
+            "selector": {
+              "web": ".app-progress"
+            }
+          },
+          "variantGroups": {
+            "status": {
+              "default": {
+                "selector": {
+                  "web": ".progress-bar-default"
+                }
+              },
+              "success": {
+                "selector": {
+                  "web": ".progress-bar-success"
+                }
+              },
+              "info": {
+                "selector": {
+                  "web": ".progress-bar-info"
+                }
+              },
+              "warning": {
+                "selector": {
+                  "web": ".progress-bar-warning"
+                }
+              },
+              "danger": {
+                "selector": {
+                  "web": ".progress-bar-danger"
+                }
+              }
+            }
+          }
+        },
+        "striped": {
+          "mapping": {
+            "selector": {
+              "web": ".app-progress.progress-bar-striped"
+            }
+          },
+          "variantGroups": {
+            "status": {
+              "default": {
+                "selector": {
+                  "web": ".progress-bar-default"
+                }
+              },
+              "success": {
+                "selector": {
+                  "web": ".progress-bar-success"
+                }
+              },
+              "info": {
+                "selector": {
+                  "web": ".progress-bar-info"
+                }
+              },
+              "warning": {
+                "selector": {
+                  "web": ".progress-bar-warning"
+                }
+              },
+              "danger": {
+                "selector": {
+                  "web": ".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"
+        }
+      },
+      "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"
+        }
+      },
+      "margin": {
+        "value": "{space.2.value} {space.0.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the outer spacing around progress bars (the space between the progress bar and surrounding elements). This creates breathing room around the loading indicator.<br>CSS variable: --wm-progress-bar-margin"
+        }
+      },
+      "transition": {
+        "time": {
+          "value": "0.5s",
+          "type": "radius",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls how long progress bar animations take to complete (the smooth movement of the progress indicator). Shorter values make animations faster, longer values make them slower.<br>CSS variable: --wm-progress-bar-transition-time"
+          }
+        }
+      },
+      "stroke": {
+        "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-stroke-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-stroke-active"
+          }
+        }
+      },
+      "label": {
+        "color": {
+          "value": "{color.on-primary.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of progress bar labels (the percentage or text that appears on the progress bar). This should contrast well with the progress bar colors for readability.<br>CSS variable: --wm-progress-bar-label-color"
+          }
+        }
+      }
+    },
+    "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.on-primary.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            },
+            "success": {
+              "stroke": {
+                "active": {
+                  "value": "{color.success.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "inactive": {
+                  "value": "{color.success.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "label": {
+                "color": {
+                  "value": "{color.on-success.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            },
+            "info": {
+              "stroke": {
+                "active": {
+                  "value": "{color.info.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "inactive": {
+                  "value": "{color.info.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "label": {
+                "color": {
+                  "value": "{color.on-info.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            },
+            "warning": {
+              "stroke": {
+                "active": {
+                  "value": "{color.warning.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "inactive": {
+                  "value": "{color.warning.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "label": {
+                "color": {
+                  "value": "{color.on-warning.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            },
+            "danger": {
+              "stroke": {
+                "active": {
+                  "value": "{color.error.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "inactive": {
+                  "value": "{color.error.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "label": {
+                "color": {
+                  "value": "{color.on-error.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            }
+          }
+        }
+      },
+      "striped": {
+        "mapping": {
+          "stripped": {
+            "size": {
+              "value": "{space.10.value} {space.10.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space"
+              }
+            }
+          }
+        },
+        "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.on-primary.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            },
+            "success": {
+              "stroke": {
+                "active": {
+                  "value": "{color.success.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "inactive": {
+                  "value": "{color.success.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "label": {
+                "color": {
+                  "value": "{color.on-success.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            },
+            "info": {
+              "stroke": {
+                "active": {
+                  "value": "{color.info.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "inactive": {
+                  "value": "{color.info.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "label": {
+                "color": {
+                  "value": "{color.on-info.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            },
+            "warning": {
+              "stroke": {
+                "active": {
+                  "value": "{color.warning.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "inactive": {
+                  "value": "{color.warning.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "label": {
+                "color": {
+                  "value": "{color.on-warning.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            },
+            "danger": {
+              "stroke": {
+                "active": {
+                  "value": "{color.error.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "inactive": {
+                  "value": "{color.error.container.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "label": {
+                "color": {
+                  "value": "{color.on-error.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/tokens/web/components/progress-circle/Readme.md

@@ -0,0 +1,19 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Progress-circle Variants
+
+This component supports the following appearances and variants. To apply them, use the corresponding class(es) on your widget.
+
+---
+
+## Appearance: Filled
+
+**Variants:**
+
+| Variant Name | Class |
+|--------------|-------|
+| Default | `app-progress circle progress-circle-default` |
+| Success | `app-progress circle progress-circle-success` |
+| Info | `app-progress circle progress-circle-info` |
+| Warning | `app-progress circle progress-circle-warning` |
+| Danger | `app-progress circle progress-circle-danger` |

package/src/tokens/web/components/progress-circle/Token.Readme.md

@@ -0,0 +1,16 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| stroke.inactive | 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 |
+| stroke.active | 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 | 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 |
+| label.font-size | Controls how large the label text appears.<br>CSS variable: --wm-progress-circle-label-font-size |
+| label.font-family | Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-progress-circle-label-font-family |
+| label.font-weight | 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 |
+| label.line-height | Controls the vertical spacing between lines when label text wraps to multiple lines.<br>CSS variable: --wm-progress-circle-label-line-height |
+| label.letter-spacing | Controls the horizontal spacing between individual characters in label text.<br>CSS variable: --wm-progress-circle-label-letter-spacing |