@wavemaker/foundation-css 11.14.3-rc.6401 → 11.15.0-2.247

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

@@ -170,12 +170,32 @@
             "description": "Controls the horizontal spacing between individual letters in panel heading text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-panel-heading-letter-spacing"
           }
         },
-        "color": {
-          "value": "{color.on-surface.@.value}",
-          "type": "color",
-          "attributes": {
-            "subtype": "color",
-            "description": "Sets the text color of panel headings (the title text that appears at the top of panels). This determines what color the heading text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-panel-heading-color"
+        "icon": {
+          "size": {
+            "value": "{icon.size.md.value}",
+            "type": "icon",
+            "attributes": {
+              "subtype": "size",
+              "description": "Controls the size of icons that appear in panel headings (the icon that appears next to the heading text). This determines what size the heading icon appears in.<br>CSS variable: --wm-panel-heading-icon-size"
+            }
+          },
+          "color": {
+            "value": "{color.on-surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of icons that appear in panel headings (the icon that appears next to the heading text). This determines what color the heading icon appears in.<br>CSS variable: --wm-panel-heading-icon-color"
+            }
+          }
+        },
+        "text": {
+          "color": {
+            "value": "{color.on-surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the text color of panel headings (the title text that appears at the top of panels). This determines what color the heading text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-panel-heading-text-color"
+            }
           }
         },
         "background": {
@@ -237,16 +257,6 @@
           }
         }
       },
-      "actions": {
-        "gap": {
-          "value": "{space.2.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the spacing between action buttons in panels (the gap between action buttons in the panel). This creates breathing room between buttons. Acceptable units: px.<br>CSS variable: --wm-panel-actions-gap"
-          }
-        }
-      },
       "content": {
         "padding": {
           "value": "{space.4.value}",
@@ -256,50 +266,6 @@
             "description": "Controls the internal spacing inside panel content sections (the main content area of the panel). This creates breathing room around the panel content. Acceptable units: px.<br>CSS variable: --wm-panel-content-padding"
           }
         }
-      },
-      "footer": {
-        "background": {
-          "value": "{color.surface.@.value}",
-          "type": "color",
-          "attributes": {
-            "subtype": "color",
-            "description": "Controls the background color of the panel footer.<br>CSS variable: --wm-panel-footer-background"
-          }
-        },
-        "padding": {
-          "value": "{space.4.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the internal spacing inside panel footers (the bottom section that contains action buttons or additional content). This creates breathing room around the footer content. Acceptable units: px.<br>CSS variable: --wm-panel-footer-padding"
-          }
-        },
-        "border": {
-          "color": {
-            "value": "{color.outline.variant.value}",
-            "type": "color",
-            "attributes": {
-              "subtype": "color",
-              "description": "Sets the color of the border at the top of panel footers. This determines the color of the separator line between the footer and the panel content.<br>CSS variable: --wm-panel-footer-border-color"
-            }
-          },
-          "width": {
-            "value": "{border.width.base.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "border-width",
-              "description": "Controls the thickness of the border at the top of panel footers. This determines how thick the separator line appears between the footer and the panel content. Acceptable units: px.<br>CSS variable: --wm-panel-footer-border-width"
-            }
-          },
-          "style": {
-            "value": "{border.style.base.value}",
-            "type": "radius",
-            "attributes": {
-              "subtype": "border-style",
-              "description": "Controls the style of the border at the top of panel footers. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-panel-footer-border-style"
-            }
-          }
-        }
       }
     },
     "appearances": {
@@ -312,9 +278,17 @@
                   "value": "{color.surface.container.@.value}",
                   "type": "color"
                 },
-                "color": {
-                  "value": "{color.on-surface.@.value}",
-                  "type": "color"
+                "icon": {
+                  "color": {
+                    "value": "{color.on-surface.@.value}",
+                    "type": "color"
+                  }
+                },
+                "text": {
+                  "color": {
+                    "value": "{color.on-surface.@.value}",
+                    "type": "color"
+                  }
                 }
               },
               "description": {
@@ -330,9 +304,17 @@
                   "value": "{color.primary.container.@.value}",
                   "type": "color"
                 },
-                "color": {
-                  "value": "{color.primary.@.value}",
-                  "type": "color"
+                "icon": {
+                  "color": {
+                    "value": "{color.primary.@.value}",
+                    "type": "color"
+                  }
+                },
+                "text": {
+                  "color": {
+                    "value": "{color.primary.@.value}",
+                    "type": "color"
+                  }
                 }
               },
               "description": {
@@ -348,9 +330,17 @@
                   "value": "{color.secondary.container.@.value}",
                   "type": "color"
                 },
-                "color": {
-                  "value": "{color.secondary.@.value}",
-                  "type": "color"
+                "icon": {
+                  "color": {
+                    "value": "{color.secondary.@.value}",
+                    "type": "color"
+                  }
+                },
+                "text": {
+                  "color": {
+                    "value": "{color.secondary.@.value}",
+                    "type": "color"
+                  }
                 }
               },
               "description": {
@@ -366,9 +356,17 @@
                   "value": "{color.tertiary.container.@.value}",
                   "type": "color"
                 },
-                "color": {
-                  "value": "{color.tertiary.@.value}",
-                  "type": "color"
+                "icon": {
+                  "color": {
+                    "value": "{color.tertiary.@.value}",
+                    "type": "color"
+                  }
+                },
+                "text": {
+                  "color": {
+                    "value": "{color.tertiary.@.value}",
+                    "type": "color"
+                  }
                 }
               },
               "description": {
@@ -384,9 +382,17 @@
                   "value": "{color.success.container.@.value}",
                   "type": "color"
                 },
-                "color": {
-                  "value": "{color.success.@.value}",
-                  "type": "color"
+                "icon": {
+                  "color": {
+                    "value": "{color.success.@.value}",
+                    "type": "color"
+                  }
+                },
+                "text": {
+                  "color": {
+                    "value": "{color.success.@.value}",
+                    "type": "color"
+                  }
                 }
               },
               "description": {
@@ -402,9 +408,17 @@
                   "value": "{color.info.container.@.value}",
                   "type": "color"
                 },
-                "color": {
-                  "value": "{color.info.@.value}",
-                  "type": "color"
+                "icon": {
+                  "color": {
+                    "value": "{color.info.@.value}",
+                    "type": "color"
+                  }
+                },
+                "text": {
+                  "color": {
+                    "value": "{color.info.@.value}",
+                    "type": "color"
+                  }
                 }
               },
               "description": {
@@ -420,9 +434,17 @@
                   "value": "{color.warning.container.@.value}",
                   "type": "color"
                 },
-                "color": {
-                  "value": "{color.warning.@.value}",
-                  "type": "color"
+                "icon": {
+                  "color": {
+                    "value": "{color.warning.@.value}",
+                    "type": "color"
+                  }
+                },
+                "text": {
+                  "color": {
+                    "value": "{color.warning.@.value}",
+                    "type": "color"
+                  }
                 }
               },
               "description": {
@@ -438,9 +460,17 @@
                   "value": "{color.error.container.@.value}",
                   "type": "color"
                 },
-                "color": {
-                  "value": "{color.error.@.value}",
-                  "type": "color"
+                "icon": {
+                  "color": {
+                    "value": "{color.error.@.value}",
+                    "type": "color"
+                  }
+                },
+                "text": {
+                  "color": {
+                    "value": "{color.error.@.value}",
+                    "type": "color"
+                  }
                 }
               },
               "description": {

package/src/tokens/mobile/components/panel-footer/panel-footer.json

@@ -0,0 +1,116 @@
+{
+    "panel-footer": {
+        "meta": {
+            "mapping": {
+                "selector": {
+                    "mobile_comment": ".app-panel-footer"
+                }
+            }
+        },
+        "mapping": {
+            "background": {
+                "value": "{color.surface.@.value}",
+                "type": "color",
+                "attributes": {
+                    "subtype": "color",
+                    "description": "Controls the background color of the panel footer.<br>CSS variable: --wm-panel-footer-background"
+                }
+            },
+            "margin": {
+                "top": {
+                    "value": "{space.2.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the external spacing around panel footers (the bottom section that contains action buttons or additional content). This creates breathing room around the footer content. Acceptable units: px.<br>CSS variable: --wm-panel-footer-margin-top"
+                    }
+                },
+                "bottom": {
+                    "value": "{space.0.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the external spacing around panel footers (the bottom section that contains action buttons or additional content). This creates breathing room around the footer content. Acceptable units: px.<br>CSS variable: --wm-panel-footer-margin-bottom"
+                    }
+                },
+                "left": {
+                    "value": "{space.0.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the external spacing around panel footers (the bottom section that contains action buttons or additional content). This creates breathing room around the footer content. Acceptable units: px.<br>CSS variable: --wm-panel-footer-margin-left"
+                    }
+                },
+                "right": {
+                    "value": "{space.0.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the external spacing around panel footers (the bottom section that contains action buttons or additional content). This creates breathing room around the footer content. Acceptable units: px.<br>CSS variable: --wm-panel-footer-margin-right"
+                    }
+                }
+            },
+            "padding": {
+                "inline": {
+                    "value": "{space.4.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the internal spacing inside panel footers (the bottom section that contains action buttons or additional content). This creates breathing room around the footer content. Acceptable units: px.<br>CSS variable: --wm-panel-footer-padding-inline"
+                    }
+                },
+                "block": {
+                    "value": "{space.4.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the internal spacing inside panel footers (the bottom section that contains action buttons or additional content). This creates breathing room around the footer content. Acceptable units: px.<br>CSS variable: --wm-panel-footer-padding-block"
+                    }
+                }
+            },
+            "border": {
+                "color": {
+                    "value": "{color.outline.variant.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the color of the border at the top of panel footers. This determines the color of the separator line between the footer and the panel content.<br>CSS variable: --wm-panel-footer-border-color"
+                    }
+                },
+                "width": {
+                    "value": "{border.width.base.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "border-width",
+                        "description": "Controls the thickness of the border at the top of panel footers. This determines how thick the separator line appears between the footer and the panel content. Acceptable units: px.<br>CSS variable: --wm-panel-footer-border-width"
+                    }
+                },
+                "style": {
+                    "value": "{border.style.base.value}",
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "border-style",
+                        "description": "Controls the style of the border at the top of panel footers. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-panel-footer-border-style"
+                    }
+                },
+                "radius": {
+                    "value": "6px",
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "border-radius",
+                        "description": "Controls the radius of the border at the top of panel footers. This determines the roundness of the separator line between the footer and the panel content.<br>CSS variable: --wm-panel-footer-border-radius"
+                    }
+                }
+            },
+            "min-height": {
+                "value": "64px",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the minimum height of panel footers (the bottom section that contains action buttons or additional content). This determines the height of the footer. Acceptable units: px.<br>CSS variable: --wm-panel-footer-min-height"
+                }
+            }
+        },
+        "appearances": {}
+    }
+}

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

@@ -5,7 +5,6 @@
         "default": {
           "mapping": {
             "selector": {
-              "web": ".app-picture",
               "mobile": ".app-picture"
             }
           },
@@ -13,13 +12,11 @@
             "shape": {
               "rounded": {
                 "selector": {
-                  "web": ".img-rounded",
                   "mobile": ".rounded-image.app-picture"
                 }
               },
               "circle": {
                 "selector": {
-                  "web": ".img-circle",
                   "mobile": ".circle-image.app-picture"
                 }
               }
@@ -29,7 +26,6 @@
         "thumbnail": {
           "mapping": {
             "selector": {
-              "web": ".img-thumbnail",
               "mobile": ".thumbnail-image.app-picture"
             }
           }
@@ -106,7 +102,7 @@
         }
       },
       "background": {
-        "value": "transparent",
+        "value": "{color.transparent.@.value}",
         "type": "color",
         "attributes": {
           "subtype": "color",
@@ -154,7 +150,7 @@
             }
           },
           "background": {
-            "value": "transparent",
+            "value": "{color.transparent.@.value}",
             "type": "color"
           }
         },

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

@@ -8,14 +8,6 @@
       }
     },
     "mapping": {
-      "position": {
-        "value": "absolute",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the positioning method of popovers (overlay menus that appear above other content). When set to 'absolute', the popover is positioned relative to its nearest positioned ancestor.<br>CSS variable: --wm-popover-position"
-        }
-      },
       "left": {
         "value": "{space.1.value}",
         "type": "space",
@@ -48,14 +40,6 @@
           "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"
         }
       },
-      "elevation": {
-        "value": "{elevation.shadow.none.value}",
-        "type": "radius",
-        "attributes": {
-          "subtype": "elevation",
-          "description": "Controls the drop shadow effect around popovers. 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-elevation"
-        }
-      },
       "padding-top": {
         "value": "{space.0.value}",
         "type": "space",
@@ -227,13 +211,89 @@
         }
       },
       "link": {
-        "text": {
+        "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 text color of popover caption. This determines what color the link text appears in.<br>CSS variable: --wm-popover-link-text-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": {
+          "top": {
+            "value": "{space.2.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the top padding (vertical spacing) inside popovers. This creates breathing room above the popover wrapper. Acceptable units: px.<br>CSS variable: --wm-popover-link-padding-top"
+            }
+          },
+          "left": {
+            "value": "{space.2.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the left padding (horizontal spacing) inside popovers. This creates breathing room on the left side of the popover wrapper. Acceptable units: px.<br>CSS variable: --wm-popover-link-padding-left"
+            }
+          },
+          "right": {
+            "value": "{space.2.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the right padding (horizontal spacing) inside popovers. This creates breathing room on the right side of the popover wrapper. Acceptable units: px.<br>CSS variable: --wm-popover-link-padding-right"
+            }
+          },
+          "bottom": {
+            "value": "{space.2.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the bottom padding (vertical spacing) inside popovers. This creates breathing room below the popover wrapper. Acceptable units: px.<br>CSS variable: --wm-popover-link-padding-bottom"
             }
           }
         },
@@ -296,6 +356,30 @@
               }
             }
           }
+        },
+        "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"
+          }
         }
       }
     }