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

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

@@ -0,0 +1,166 @@
+{
+  "picture": {
+    "meta": {
+      "appearances": {
+        "default": {
+          "mapping": {
+            "selector": {
+              "mobile": ".app-picture"
+            }
+          },
+          "variantGroups": {
+            "shape": {
+              "rounded": {
+                "selector": {
+                  "mobile": ".rounded-image.app-picture"
+                }
+              },
+              "circle": {
+                "selector": {
+                  "mobile": ".circle-image.app-picture"
+                }
+              }
+            }
+          }
+        },
+        "thumbnail": {
+          "mapping": {
+            "selector": {
+              "mobile": ".thumbnail-image.app-picture"
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "radius": {
+        "value": "{radius.none.value}",
+        "type": "radius",
+        "attributes": {
+          "subtype": "radius",
+          "description": "Controls the corner rounding of pictures (image elements). This makes the pictures appear with rounded corners for a softer appearance.<br>CSS variable: --wm-picture-radius"
+        }
+      },
+      "padding": {
+        "value": "{space.0.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the padding (all sides) inside pictures. This creates breathing room around the image content. Acceptable units: px.<br>CSS variable: --wm-picture-padding"
+        }
+      },
+      "border": {
+        "color": {
+          "value": "{color.border.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of the border around pictures. This determines the color of the outline that defines the picture container.<br>CSS variable: --wm-picture-border-color"
+          }
+        },
+        "style": {
+          "value": "{border.style.base.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Controls the style of the border around pictures. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-picture-border-style"
+          }
+        },
+        "width": {
+          "value": "{border.width.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the thickness of the border around pictures. When set to 0, no border is visible. Acceptable units: px.<br>CSS variable: --wm-picture-border-width"
+          }
+        }
+      },
+      "background": {
+        "value": "{color.transparent.@.value}",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Sets the background color of pictures (image elements). When transparent, only the image is visible. When filled with a color, the picture appears with a colored background.<br>CSS variable: --wm-picture-background"
+        }
+      }
+    },
+    "appearances": {
+      "default": {
+        "mapping": {
+          "radius": {
+            "value": "{radius.none.value}",
+            "type": "radius"
+          },
+          "padding": {
+            "value": "{space.0.value}",
+            "type": "space"
+          },
+          "border": {
+            "color": {
+              "value": "{color.border.@.value}",
+              "type": "color"
+            },
+            "style": {
+              "value": "{border.style.base.value}",
+              "type": "radius"
+            },
+            "width": {
+              "value": "{border.width.0.value}",
+              "type": "space"
+            }
+          },
+          "background": {
+            "value": "{color.transparent.@.value}",
+            "type": "color"
+          }
+        },
+        "variantGroups": {
+          "shape": {
+            "rounded": {
+                "radius": {
+                  "value": "{radius.xs.value}",
+                  "type": "radius"
+                }
+            },
+            "circle": {
+                "radius": {
+                  "value": "{radius.circle.value}",
+                  "type": "radius"
+                }
+            }
+          }
+        }
+      },
+      "thumbnail": {
+        "mapping": {
+          "radius": {
+            "value": "{radius.xs.value}",
+            "type": "radius"
+          },
+          "padding": {
+            "value": "{space.1.value}",
+            "type": "space"
+          },
+          "border": {
+            "color": {
+              "value": "{color.border.@.value}",
+              "type": "color"
+            },
+            "style": {
+              "value": "{border.style.base.value}",
+              "type": "radius"
+            },
+            "width": {
+              "value": "{border.width.base.value}",
+              "type": "space"
+            }
+          },
+          "background": {
+            "value": "{color.surface.container.low.@.value}",
+            "type": "color"
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,387 @@
+{
+  "popover": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-popover"
+        }
+      }
+    },
+    "mapping": {
+      "left": {
+        "value": "{space.1.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the left position offset of popovers (the distance from the left edge of the viewport or parent container). This determines how far from the left the popover appears. Acceptable units: px.<br>CSS variable: --wm-popover-left"
+        }
+      },
+      "bottom": {
+        "value": "{space.1.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the bottom position offset of popovers (the distance from the bottom edge of the viewport or parent container). This determines how far from the bottom the popover appears. Acceptable units: px.<br>CSS variable: --wm-popover-bottom"
+        }
+      },
+      "width": {
+        "value": "100%",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the width of popovers. When set to 100%, the popover takes up the full width of its container. Acceptable units: %, px.<br>CSS variable: --wm-popover-width"
+        }
+      },
+      "min-height": {
+        "value": "240px",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the minimum height of popover components (small overlay windows that appear when users hover or click on elements). This ensures the popover is always tall enough to be visible and properly displayed.<br>CSS variable: --wm-popover-min-height"
+        }
+      },
+      "padding": {
+        "value": "{space.0.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the padding inside popovers (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-popover-padding"
+        }
+      },
+      "background-color": {
+        "value": "{color.on-primary.@.value}",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Sets the background color of popover components (small overlay windows that appear when users hover or click on elements). This is the main background color that appears behind the popover content.<br>CSS variable: --wm-popover-background-color"
+        }
+      },
+      "shadow": {
+        "value": "{elevation.shadow.none.value}",
+        "type": "radius",
+        "attributes": {
+          "subtype": "elevation",
+          "description": "Controls the drop shadow effect around popover components (small overlay windows that appear when users hover or click on elements). This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-shadow"
+        }
+      },
+      "border": {
+        "radius": {
+          "value": "{radius.none.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the corner rounding of popovers (top-left, top-right, bottom-right, bottom-left).<br>CSS variable: --wm-popover-border-radius"
+          }
+        },
+        "width": {
+          "value": "{border.width.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the thickness of the border around popover. This determines how thick the outline appears around the popover. Acceptable units: px.<br>CSS variable: --wm-popover-border-width"
+          }
+        },
+        "style": {
+          "value": "{border.style.base.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Controls the style of the border around popover. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-popover-border-style"
+          }
+        },
+        "color": {
+          "value": "{color.transparent.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of the border around popover. This determines the color of the outline that defines the popover.<br>CSS variable: --wm-popover-border-color"
+          }
+        }
+      },
+      "header": {
+        "padding": {
+          "value": "{space.3.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the internal spacing inside popover headers (top, right, bottom, left).<br>CSS variable: --wm-popover-header-padding"
+          }
+        },
+        "color": {
+          "value": "{color.on-surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of popover headers (the top section of popover windows that contains the title). This determines what color the header text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-header-color"
+          }
+        },
+        "font-family": {
+          "value": "{h5.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Sets the typeface (font style) for popover headers (the top section of popover windows that contains the title). This determines whether the header text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-header-font-family"
+          }
+        },
+        "font-weight": {
+          "value": "{h5.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold the popover headers appear (the top section of popover windows that contains the title). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-header-font-weight"
+          }
+        },
+        "font-size": {
+          "value": "{h5.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls how large the popover headers appear (the top section of popover windows that contains the title). This affects the size of the header text that users see in the popover.<br>CSS variable: --wm-popover-header-font-size"
+          }
+        },
+        "line-height": {
+          "value": "{h5.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when popover headers wrap to multiple lines. This ensures proper spacing for the header text displayed in the popover.<br>CSS variable: --wm-popover-header-line-height"
+          }
+        },
+        "letter-spacing": {
+          "value": "{h5.letter-spacing.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "letter-spacing",
+            "description": "Controls the horizontal spacing between individual characters in popover headers. This can help make the header text more readable and properly spaced.<br>CSS variable: --wm-popover-header-letter-spacing"
+          }
+        },
+        "background-color": {
+          "value": "{color.on-surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of popover header. This determines what color the title background appears in.<br>CSS variable: --wm-popover-header-background-color"
+          }
+        }
+      },
+      "link": {
+        "color": {
+          "value": "{color.secondary.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of popover caption. This determines what color the link text appears in.<br>CSS variable: --wm-popover-link-color"
+          }
+        },
+        "background": {
+          "color": {
+            "value": "transparent",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of the popover text. When transparent, only the popover text is visible. When filled with a color, the text appears with a colored background.<br>CSS variable: --wm-popover-link-background-color"
+            }
+          }
+        },
+        "border": {
+          "width": {
+            "value": "{border.width.0.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around popover. This determines how thick the outline appears around the popover. Acceptable units: px.<br>CSS variable: --wm-popover-link-border-width"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the style of the border around popover. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-popover-link-border-style"
+            }
+          },
+          "color": {
+            "value": "{color.secondary.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border around popover. This determines the color of the outline that defines the popover.<br>CSS variable: --wm-popover-link-border-color"
+            }
+          },
+          "radius": {
+            "value": "{radius.none.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of link popover components. This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-link-radius"
+            }
+          }
+        },
+        "padding": {
+          "value": "{space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding inside popover link wrapper (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-popover-link-padding"
+          }
+        },
+        "font-size": {
+          "value": "{body.medium.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the size of the text in popover caption. This affects how large the link text appears.<br>CSS variable: --wm-popover-link-font-size"
+          }
+        },
+        "font-family": {
+          "value": "{body.medium.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Sets the typeface (font style) for popover caption text.<br>CSS variable: --wm-popover-link-font-family"
+          }
+        },
+        "text-decoration": {
+          "value": "none",
+          "type": "font",
+          "attributes": {
+            "subtype": "text-decoration",
+            "description": "Controls the text decoration (underline, overline, line-through) for popover caption. 'none' removes all decorations, 'underline' adds an underline, 'overline' adds a line above, and 'line-through' adds a line through the text.<br>CSS variable: --wm-popover-link-text-decoration"
+          }
+        },
+        "font-weight": {
+          "value": "{body.medium.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold the popover caption text appears.<br>CSS variable: --wm-popover-link-font-weight"
+          }
+        },
+        "line-height": {
+          "value": "{body.medium.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when popover caption text wraps to multiple lines.<br>CSS variable: --wm-popover-link-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 popover caption text.<br>CSS variable: --wm-popover-link-letter-spacing"
+          }
+        },
+        "icon": {
+          "size": {
+            "value": "{icon.size.@.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "Controls the size of icons in popover links.<br>CSS variable: --wm-popover-link-icon-size"
+            }
+          },
+          "color": {
+            "@": {
+              "value": "{color.secondary.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the color of icons in popover links.<br>CSS variable: --wm-popover-link-icon-color"
+              }
+            }
+          }
+        },
+        "height": {
+          "value": "auto",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the height of popovers link wrapper. When set to 100%, the popover takes up the full height of its container. Acceptable units: %, px.<br>CSS variable: --wm-popover-link-height"
+          }
+        },
+        "width": {
+          "value": "auto",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the width of popovers link wrapper. When set to 100%, the popover takes up the full width of its container. Acceptable units: %, px.<br>CSS variable: --wm-popover-link-width"
+          }
+        },
+        "min-height": {
+          "value": "auto",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the minimum height of popover components. This ensures the popover is always tall enough to be visible and properly displayed.<br>CSS variable: --wm-popover-link-min-height"
+          }
+        }
+      },
+      "content": {
+        "border": {
+          "width": {
+            "value": "{border.width.0.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around popover content. This determines how thick the outline appears around the popover. Acceptable units: px.<br>CSS variable: --wm-popover-content-border-width"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the style of the border around popover content. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-popover-content-border-style"
+            }
+          },
+          "color": {
+            "value": "{color.transparent.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border around popover content. This determines the color of the outline that defines the popover.<br>CSS variable: --wm-popover-content-border-color"
+            }
+          },
+          "radius": {
+            "value": "{radius.none.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of link popover content. This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-content-border-radius"
+            }
+          }
+        },
+        "background-color": {
+          "value": "{color.transparent.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of popover content (small overlay windows that appear when users hover or click on elements). This is the main background color that appears behind the popover content.<br>CSS variable: --wm-popover-content-background-color"
+          }
+        },
+        "shadow": {
+          "value": "{elevation.shadow.none.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "elevation",
+            "description": "Controls the drop shadow effect around popover content (small overlay windows that appear when users hover or click on elements). This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-content-shadow"
+          }
+        }
+      },
+      "modal": {
+        "content": {
+          "shadow": {
+            "value": "{elevation.shadow.none.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "elevation",
+              "description": "Controls the drop shadow effect around popover modal content (small overlay windows that appear when users hover or click on elements). This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-modal-content-shadow"
+            }
+          }
+        }
+      }
+    }
+  }
+}