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

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

@@ -0,0 +1,464 @@
+{
+  "toast": {
+    "meta": {
+      "appearances": {
+        "filled": {
+          "mapping": {
+            "selector": {
+              "web": ".toast-container .toast"
+            }
+          },
+          "variantGroups": {
+            "status": {
+              "default": {
+                "selector": {
+                  "web": " "
+                }
+              },
+              "success": {
+                "selector": {
+                  "web": ".toast-success "
+                }
+              },
+              "info": {
+                "selector": {
+                  "web": ".toast-info "
+                }
+              },
+              "warning": {
+                "selector": {
+                  "web": ".toast-warning "
+                }
+              },
+              "error": {
+                "selector": {
+                  "web": ".toast-error "
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "container": {
+        "background": {
+          "value": "{color.info.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of toast notifications (pop-up messages that appear temporarily to inform users about actions or status). This is the main background color that appears behind the toast content.<br>CSS variable: --wm-toast-container-background"
+          }
+        },
+        "color": {
+          "value": "{color.on-info.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of toast notifications (pop-up messages that appear temporarily to inform users). This should contrast well with the background for readability.<br>CSS variable: --wm-toast-container-color"
+          }
+        },
+        "width": {
+          "value": "344px",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls how wide toast notifications appear (pop-up messages that appear temporarily to inform users). This determines the horizontal size of the toast message box.<br>CSS variable: --wm-toast-container-width"
+          }
+        },
+        "shadow": {
+          "value": "{elevation.shadow.3.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "elevation",
+            "description": "Controls the drop shadow effect around toast notifications (pop-up messages that appear temporarily). This creates a subtle shadow that makes the toast appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-toast-container-shadow"
+          }
+        },
+        "border": {
+          "radius": {
+            "value": "{radius.xs.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of toast notifications (pop-up messages that appear temporarily). This makes the toast appear with slightly rounded corners for a softer appearance.<br>CSS variable: --wm-toast-container-border-radius"
+            }
+          },
+          "width": {
+            "value": "{border.width.base.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around toast notifications (pop-up messages that appear temporarily). This creates the outline that defines the toast shape and makes it visible to users.<br>CSS variable: --wm-toast-container-border-width"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the style of the border around toast notifications. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots, 'none' removes the border.<br>CSS variable: --wm-toast-container-border-style"
+            }
+          },
+          "color": {
+            "value": "{color.info.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border around toast notifications (pop-up messages that appear temporarily). This determines the color of the outline that defines the toast shape.<br>CSS variable: --wm-toast-container-border-color"
+            }
+          }
+        },
+        "padding": {
+          "block": {
+            "value": "{space.4.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the vertical padding inside toast notifications (the space between the toast content and the top/bottom borders). This creates breathing room around the toast content vertically.<br>CSS variable: --wm-toast-container-padding-block"
+            }
+          },
+          "inline": {
+            "value": "{space.3.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the horizontal padding inside toast notifications (the space between the toast content and the left/right borders). This creates breathing room around the toast content horizontally.<br>CSS variable: --wm-toast-container-padding-inline"
+            }
+          }
+        },
+        "gap": {
+          "value": "{space.1.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the spacing between different elements within toast notifications (like the space between the title and message text). This creates visual separation between toast content elements.<br>CSS variable: --wm-toast-container-gap"
+          }
+        }
+      },
+      "title": {
+        "font-family": {
+          "value": "{label.large.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Sets the typeface (font style) for toast notification titles (the main heading text in pop-up messages). This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-toast-title-font-family"
+          }
+        },
+        "font-weight": {
+          "value": "{label.large.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold the toast notification titles appear (the main heading text in pop-up messages). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-toast-title-font-weight"
+          }
+        },
+        "font-size": {
+          "value": "{label.large.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls how large the toast notification titles appear (the main heading text in pop-up messages). This affects the size of the title text that users see in the toast.<br>CSS variable: --wm-toast-title-font-size"
+          }
+        },
+        "line-height": {
+          "value": "{label.large.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when toast notification titles wrap to multiple lines. This ensures proper spacing for the title text displayed in the toast.<br>CSS variable: --wm-toast-title-line-height"
+          }
+        },
+        "letter-spacing": {
+          "value": "{label.large.letter-spacing.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "letter-spacing",
+            "description": "Controls the horizontal spacing between individual characters in toast notification titles. This can help make the title text more readable and properly spaced.<br>CSS variable: --wm-toast-title-letter-spacing"
+          }
+        }
+      },
+      "message": {
+        "font-family": {
+          "value": "{label.large.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Sets the typeface (font style) for toast notification messages (the descriptive text in pop-up messages). This determines whether the message text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-toast-message-font-family"
+          }
+        },
+        "font-weight": {
+          "value": "{label.large.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold the toast notification messages appear (the descriptive text in pop-up messages). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-toast-message-font-weight"
+          }
+        },
+        "font-size": {
+          "value": "{label.large.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls how large the toast notification messages appear (the descriptive text in pop-up messages). This affects the size of the message text that users see in the toast.<br>CSS variable: --wm-toast-message-font-size"
+          }
+        },
+        "line-height": {
+          "value": "{label.large.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when toast notification messages wrap to multiple lines. This ensures proper spacing for the message text displayed in the toast.<br>CSS variable: --wm-toast-message-line-height"
+          }
+        },
+        "letter-spacing": {
+          "value": "{label.large.letter-spacing.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "letter-spacing",
+            "description": "Controls the horizontal spacing between individual characters in toast notification messages. This can help make the message text more readable and properly spaced.<br>CSS variable: --wm-toast-message-letter-spacing"
+          }
+        }
+      },
+      "icon": {
+        "@": {
+          "value": "\"\\f2ff\"",
+          "type": "radius",
+          "attributes": {
+            "subtype": "icon-size",
+            "description": "Sets the icon content for toast notifications (the symbol that appears in pop-up messages to indicate the type of notification). This determines which icon symbol is displayed in the toast.<br>CSS variable: --wm-toast-icon"
+          }
+        },
+        "size": {
+          "value": "{icon.size.md.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "icon-size",
+            "description": "Controls how large the toast notification icons appear (the symbols that appear in pop-up messages). This affects the size of the icon symbols that users see in the toast.<br>CSS variable: --wm-toast-icon-size"
+          }
+        }
+      },
+      "position": {
+        "top": {
+          "value": "{space.3.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the distance from the top of the screen where toast notifications appear (pop-up messages that appear temporarily). This determines how far down from the top edge the toast will be positioned.<br>CSS variable: --wm-toast-position-top"
+          }
+        },
+        "left": {
+          "value": "{space.3.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the distance from the left edge of the screen where toast notifications appear (pop-up messages that appear temporarily). This determines how far from the left edge the toast will be positioned.<br>CSS variable: --wm-toast-position-left"
+          }
+        },
+        "right": {
+          "value": "{space.3.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the distance from the right edge of the screen where toast notifications appear (pop-up messages that appear temporarily). This determines how far from the right edge the toast will be positioned.<br>CSS variable: --wm-toast-position-right"
+          }
+        },
+        "bottom": {
+          "value": "{space.3.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the distance from the bottom of the screen where toast notifications appear (pop-up messages that appear temporarily). This determines how far up from the bottom edge the toast will be positioned.<br>CSS variable: --wm-toast-position-bottom"
+          }
+        }
+      }
+    },
+    "appearances": {
+      "filled": {
+        "variantGroups": {
+          "status": {
+            "default": {
+              "container": {
+                "background": {
+                  "value": "{color.info.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "color": {
+                  "value": "{color.on-info.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "border": {
+                  "color": {
+                    "value": "{color.info.@.value}",
+                    "type": "color",
+                    "attributes": {
+                      "subtype": "color"
+                    }
+                  }
+                }
+              },
+              "icon": {
+                "@": {
+                  "value": "\"\\f1cf\"",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "icon-size"
+                  }
+                }
+              }
+            },
+            "success": {
+              "container": {
+                "background": {
+                  "value": "{color.success.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "color": {
+                  "value": "{color.on-success.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "border": {
+                  "color": {
+                    "value": "{color.success.@.value}",
+                    "type": "color",
+                    "attributes": {
+                      "subtype": "color"
+                    }
+                  }
+                }
+              },
+              "icon": {
+                "@": {
+                  "value": "\"\\f1cf\"",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "icon-size"
+                  }
+                }
+              }
+            },
+            "info": {
+              "container": {
+                "background": {
+                  "value": "{color.info.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "color": {
+                  "value": "{color.on-info.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "border": {
+                  "color": {
+                    "value": "{color.info.@.value}",
+                    "type": "color",
+                    "attributes": {
+                      "subtype": "color"
+                    }
+                  }
+                }
+              },
+              "icon": {
+                "@": {
+                  "value": "\"\\f2ff\"",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "icon-size"
+                  }
+                }
+              }
+            },
+            "warning": {
+              "container": {
+                "background": {
+                  "value": "{color.warning.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "color": {
+                  "value": "{color.on-warning.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "border": {
+                  "color": {
+                    "value": "{color.warning.@.value}",
+                    "type": "color",
+                    "attributes": {
+                      "subtype": "color"
+                    }
+                  }
+                }
+              },
+              "icon": {
+                "@": {
+                  "value": "\"\\f24c\"",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "icon-size"
+                  }
+                }
+              }
+            },
+            "error": {
+              "container": {
+                "background": {
+                  "value": "{color.error.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "color": {
+                  "value": "{color.on-error.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "border": {
+                  "color": {
+                    "value": "{color.error.@.value}",
+                    "type": "color",
+                    "attributes": {
+                      "subtype": "color"
+                    }
+                  }
+                }
+              },
+              "icon": {
+                "@": {
+                  "value": "\"\\f24d\"",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "icon-size"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| width | Controls how wide toggle switches appear (on/off switches that users can flip to enable or disable features). This determines the horizontal size of the toggle switch track.<br>CSS variable: --wm-toggle-width |
+| height | Controls how tall toggle switches appear (on/off switches that users can flip to enable or disable features). This determines the vertical size of the toggle switch track.<br>CSS variable: --wm-toggle-height |
+| background.@ | Sets the background color of toggle switches (the track that the toggle handle slides along). This is the main background color of the toggle switch in its default/off state.<br>CSS variable: --wm-toggle-background |
+| border.width | Controls the thickness of the border around toggle switches. This creates the outline that defines the toggle switch shape and makes it visible to users.<br>CSS variable: --wm-toggle-border-width |
+| border.color | Sets the color of the border around toggle switches. This determines the color of the outline that defines the toggle switch shape in its default/off state.<br>CSS variable: --wm-toggle-border-color |
+| border.style | Controls the style of the border around toggle switches. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots, 'none' removes the border.<br>CSS variable: --wm-toggle-border-style |
+| radius | Controls the corner rounding of toggle switches. When set to 'pill', the toggle appears with fully rounded ends, creating a pill-shaped appearance.<br>CSS variable: --wm-toggle-radius |
+| state.layer.size | Controls the size of the invisible clickable area around toggle switches (the state layer). This area is larger than the visible toggle, making it easier for users to click and interact with the toggle.<br>CSS variable: --wm-toggle-state-layer-size |
+| state.layer.color.@ | Sets the color of the state layer that appears when users hover, focus, or interact with toggle switches. This creates visual feedback to show that the toggle is interactive and responsive to user actions.<br>CSS variable: --wm-toggle-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-toggle-state-layer-opacity |
+| handle.size.@ | Controls the size of toggle handles (the circular element that slides along the toggle track). This determines how large the draggable part of the toggle appears.<br>CSS variable: --wm-toggle-handle-size |
+| handle.color.@ | Sets the color of toggle handles (the circular element that slides along the toggle track). This determines what color the draggable part of the toggle appears in.<br>CSS variable: --wm-toggle-handle-color |