npm - @wavemaker/foundation-css - Versions diffs - 11.14.1-rc.6311 → 11.14.2-1.6423 - Mend

@wavemaker/foundation-css 11.14.1-rc.6311 → 11.14.2-1.6423

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (397) hide show

package/src/tokens/mobile/components/tabbar/tabbar.json CHANGED Viewed

@@ -8,7 +8,7 @@
                 "states": {
                     "active": {
                         "selector": {
-                            "mobile": "-active"
+                            "mobile": "-active-item, .app-tabbar-active-icon, .app-tabbar-active-label "
                         }
                     }
                 }
@@ -17,49 +17,89 @@
         "mapping": {
             "height": {
                 "value": "80px",
-                "type": "space"
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the height of tabbar components (navigation bars with tabs at the bottom of the screen). This determines the vertical size of the tabbar. Acceptable units: px.<br>CSS variable: --wm-tabbar-height"
+                }
             },
             "box-shadow": {
                 "value": "{elevation.shadow.1.value}",
-                "type": "radius"
+                "type": "radius",
+                "attributes": {
+                    "subtype": "elevation",
+                    "description": "Controls the box shadow (elevation) of tabbar components. This determines the shadow depth and visual elevation of the tabbar above the content.<br>CSS variable: --wm-tabbar-box-shadow"
+                }
             },
             "menu": {
                 "background": {
                     "value": "{color.surface.@.value}",
-                    "type": "color"
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the background color of tabbar menus (the container that holds tab items). This determines what color the background of the tabbar menu appears in.<br>CSS variable: --wm-tabbar-menu-background"
+                    }
                 },
                 "height": {
                     "value": "100%",
-                    "type": "space"
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the height of tabbar menus. This determines the vertical size of the menu container. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-menu-height"
+                    }
                 }
             },
             "more-menu": {
                 "width": {
                     "value": "100%",
-                    "type": "space"
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the width of tabbar more menus (overflow menus that appear when there are too many tabs). This determines how wide the more menu appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-more-menu-width"
+                    }
                 },
                 "background": {
                     "value": "{color.surface.@.value}",
-                    "type": "color"
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the background color of tabbar more menus. This determines what color the background of the more menu appears in.<br>CSS variable: --wm-tabbar-more-menu-background"
+                    }
                 },
                 "box-shadow": {
                     "value": "{elevation.shadow.1.value}",
-                    "type": "radius"
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "elevation",
+                        "description": "Controls the box shadow (elevation) of tabbar more menus. This determines the shadow depth and visual elevation of the more menu above the content.<br>CSS variable: --wm-tabbar-more-menu-box-shadow"
+                    }
                 }
             },
             "more-menu-row": {
                 "width": {
                     "value": "100%",
-                    "type": "space"
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the width of tabbar more menu rows (individual rows in the more menu). This determines how wide each row appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-more-menu-row-width"
+                    }
                 },
                 "padding": {
                     "top": {
                         "value": "{space.1.value}",
-                        "type": "space"
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Controls the top padding (vertical spacing) of tabbar more menu rows. This creates breathing room at the top of each row. Acceptable units: px.<br>CSS variable: --wm-tabbar-more-menu-row-padding-top"
+                        }
                     },
                     "bottom": {
                         "value": "{space.1.value}",
-                        "type": "space"
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Controls the bottom padding (vertical spacing) of tabbar more menu rows. This creates breathing room at the bottom of each row. Acceptable units: px.<br>CSS variable: --wm-tabbar-more-menu-row-padding-bottom"
+                        }
                     }
                 }
             },
@@ -67,83 +107,147 @@
                 "min": {
                     "height": {
                         "value": "{space.8.value}",
-                        "type": "space"
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Controls the minimum height of tabbar items (individual tabs in the tabbar). This determines the minimum vertical size of tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-min-height"
+                        }
                     },
                     "width": {
                         "value": "{spacer.7.value}",
-                        "type": "spacer"
+                        "type": "spacer",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Controls the minimum width of tabbar items. This determines the minimum horizontal size of tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-min-width"
+                        }
                     }
                 },
                 "margin": {
                     "bottom": {
                         "value": "{space.4.value}",
-                        "type": "space"
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Controls the bottom margin (vertical spacing) of tabbar items. This creates spacing below tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-margin-bottom"
+                        }
                     }
                 },
                 "border": {
                     "radius": {
                         "value": "0px",
-                        "type": "radius"
+                        "type": "radius",
+                        "attributes": {
+                            "subtype": "radius",
+                            "description": "Controls the border radius (rounded corners) of tabbar items. This determines how rounded the corners of tab items appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-border-radius"
+                        }
                     }
                 },
                 "background": {
                     "color": {
                         "value": "transparent",
-                        "type": "color"
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the background color of tabbar items. This determines what color the background of tab items appears in.<br>CSS variable: --wm-tabbar-item-background-color"
+                        }
                     }
                 },
                 "opacity": {
                     "value": "1",
-                    "type": "space"
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "opacity",
+                        "description": "Controls the transparency of tabbar items. When set to 1, items are fully opaque. Lower values make items more transparent, higher values make them more opaque.<br>CSS variable: --wm-tabbar-item-opacity"
+                    }
                 }
             },
             "icon": {
                 "size": {
                     "value": "{space.6.value}",
-                    "type": "space"
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "icon-size",
+                        "description": "Controls the size of tabbar icons (icons that appear in tab items). This affects how large the icons appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-size"
+                    }
                 },
                 "color": {
                     "value": "{color.on-surface.variant.@.value}",
-                    "type": "color"
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the color of tabbar icons. This determines what color the icons appear in.<br>CSS variable: --wm-tabbar-icon-color"
+                    }
                 },
                 "padding": {
                     "right": {
                         "value": "{space.0.value}",
-                        "type": "space"
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Controls the right padding (horizontal spacing) of tabbar icons. This creates breathing room on the right side of icons. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-padding-right"
+                        }
                     },
                     "bottom": {
                         "value": "{space.0.value}",
-                        "type": "space"
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Controls the bottom padding (vertical spacing) of tabbar icons. This creates breathing room at the bottom of icons. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-padding-bottom"
+                        }
                     }
                 },
                 "border-bottom-color": {
                     "value": "{color.primary.@.value}",
-                    "type": "color"
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the bottom border color of tabbar icons. This determines what color the bottom border of icons appears in, typically matching the primary theme color.<br>CSS variable: --wm-tabbar-icon-border-bottom-color"
+                    }
                 }
             },
             "text": {
                 "font": {
                     "size": {
                         "value": "{label.medium.font-size.value}",
-                        "type": "font"
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-size",
+                            "description": "Controls the font size of tabbar text (labels that appear in tab items). This affects how large the text appears. Acceptable units: px.<br>CSS variable: --wm-tabbar-text-font-size"
+                        }
                     },
                     "family": {
                         "value": "{label.large.font-family.value}",
-                        "type": "font"
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-family",
+                            "description": "Sets the font family of tabbar text. This determines which font is used for the text in tab items.<br>CSS variable: --wm-tabbar-text-font-family"
+                        }
                     },
                     "weight": {
                         "value": "{font.weight.400.value}",
-                        "type": "font"
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-weight",
+                            "description": "Controls the font weight (boldness) of tabbar text. This affects how bold the text appears in tab items.<br>CSS variable: --wm-tabbar-text-font-weight"
+                        }
                     }
                 },
                 "color": {
                     "value": "{color.on-surface.variant.@.value}",
-                    "type": "color"
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the text color of tabbar labels. This determines what color the text in tab items appears in.<br>CSS variable: --wm-tabbar-text-color"
+                    }
                 },
                 "margin": {
                     "top": {
                         "value": "{space.rule.value}",
-                        "type": "space"
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Controls the top margin (vertical spacing) of tabbar text. This creates spacing above the text. Acceptable units: px.<br>CSS variable: --wm-tabbar-text-margin-top"
+                        }
                     }
                 }
             },
@@ -153,38 +257,62 @@
                         "border": {
                             "radius": {
                                 "value": "50px",
-                                "type": "radius"
+                                "type": "radius",
+                                "attributes": {
+                                    "subtype": "radius",
+                                    "description": "Controls the border radius (rounded corners) of active tabbar items. This determines how rounded the corners of active tab items appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-border-radius (active state)"
+                                }
                             }
                         },
                         "background": {
                             "color": {
                                 "value": "{color.primary.container.@.value}",
-                                "type": "color"
+                                "type": "color",
+                                "attributes": {
+                                    "subtype": "color",
+                                    "description": "Sets the background color of active tabbar items (tabs that are currently selected). This determines what color the background appears in for active items, typically matching the primary container theme color.<br>CSS variable: --wm-tabbar-item-background-color (active state)"
+                                }
                             }
                         },
                         "margin": {
                             "bottom": {
                                 "value": "-2",
-                                "type": "space"
+                                "type": "space",
+                                "attributes": {
+                                    "subtype": "space",
+                                    "description": "Controls the bottom margin (vertical spacing) of active tabbar items. This creates spacing below active tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-margin-bottom (active state)"
+                                }
                             }
                         }
                     },
                     "icon": {
                         "color": {
                             "value": "{color.primary.@.value}",
-                            "type": "color"
+                            "type": "color",
+                            "attributes": {
+                                "subtype": "color",
+                                "description": "Sets the color of active tabbar icons. This determines what color the icons appear in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabbar-icon-color (active state)"
+                            }
                         }
                     },
                     "text": {
                         "font": {
                             "weight": {
                                 "value": "{font.weight.700.value}",
-                                "type": "font"
+                                "type": "font",
+                                "attributes": {
+                                    "subtype": "font-weight",
+                                    "description": "Controls the font weight (boldness) of active tabbar text. This affects how bold the text appears in active tab items.<br>CSS variable: --wm-tabbar-text-font-weight (active state)"
+                                }
                             }
                         },
                         "color": {
                             "value": "{color.on-surface.variant.@.value}",
-                            "type": "color"
+                            "type": "color",
+                            "attributes": {
+                                "subtype": "color",
+                                "description": "Sets the text color of active tabbar labels. This determines what color the text appears in for active tabs.<br>CSS variable: --wm-tabbar-text-color (active state)"
+                            }
                         }
                     }
                 }

package/src/tokens/mobile/components/tabs/tabs.json CHANGED Viewed

@@ -9,7 +9,7 @@
         "states": {
           "active": {
             "selector": {
-              "mobile": "-active"
+              "mobile": "-active-item, .app-tabheader-active-item-text, .app-tabheader-active-item-icon, .app-tabheader-active-indicator"
             }
           }
         }
@@ -17,48 +17,88 @@
     },
     "mapping": {
       "background": {
-        "value": "{color.primary.container.@.value}",
-        "type": "color"
+        "value": "{color.surface.@.value}",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Sets the background color of tabs components (navigation interfaces that allow users to switch between different content sections). This is the main background color that appears behind the tab navigation and content.<br>CSS variable: --wm-tabs-background"
+        }
       },
       "border": {
         "radius": {
           "value": "{radius.sm.value}",
-          "type": "radius"
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the border radius (rounded corners) of tabs components. This determines how rounded the corners of the tabs container appear. Acceptable units: px.<br>CSS variable: --wm-tabs-border-radius"
+          }
         },
         "style": {
           "value": "{border.style.base.value}",
-          "type": "radius"
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Controls the style of the border around tabs components. 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line.<br>CSS variable: --wm-tabs-border-style"
+          }
         },
         "color": {
           "value": "transparent",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the border color of tabs components. This determines what color the border around the tabs container appears in.<br>CSS variable: --wm-tabs-border-color"
+          }
         },
         "width": {
           "value": "{border.width.1.value}",
-          "type": "radius"
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the thickness of the border around tabs components. This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-border-width"
+          }
         }
       },
       "heading": {
         "background": {
           "value": "{color.surface.@.value}",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of tabs headings (the header section that contains tab labels). This determines what color the background of the heading appears in.<br>CSS variable: --wm-tabs-heading-background"
+          }
         },
         "border": {
           "radius": {
             "value": "{radius.sm.value}",
-            "type": "radius"
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the border radius (rounded corners) of tabs headings. This determines how rounded the corners of the heading appear. Acceptable units: px.<br>CSS variable: --wm-tabs-heading-border-radius"
+            }
           },
           "style": {
             "value": "{border.style.base.value}",
-            "type": "radius"
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the style of the border around tabs headings (the section containing the tab labels). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, and 'none' removes the border.<br>CSS variable: --wm-tabs-heading-border-style"
+            }
           },
           "color": {
-            "value": "{color.primary.container.@.value}",
-            "type": "color"
+            "value": "{color.surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the border color of tabs headings. This determines what color the border around the heading appears in.<br>CSS variable: --wm-tabs-heading-border-color"
+            }
           },
           "width": {
             "value": "{border.width.1.value}",
-            "type": "radius"
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around tabs headings (the section containing the tab labels). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-heading-border-width"
+            }
           }
         }
       },
@@ -66,91 +106,173 @@
         "heading": {
           "padding": {
             "value": "{space.2.value}",
-            "type": "space"
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the internal spacing inside tab item headings (the clickable tab labels that users click to switch between different content sections). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding"
+            }
           },
           "font": {
             "size": {
               "value": "{h6.font-size.value}",
-              "type": "font"
+              "type": "font",
+              "attributes": {
+                "subtype": "font-size",
+                "description": "Controls how large the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). This affects the size of the tab text that users see.<br>CSS variable: --wm-tabs-item-heading-font-size"
+              }
             },
             "weight": {
               "value": "{h6.font-weight.value}",
-              "type": "font"
+              "type": "font",
+              "attributes": {
+                "subtype": "font-weight",
+                "description": "Controls how thick or bold the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-tabs-item-heading-font-weight"
+              }
             }
           },
           "line-height": {
             "value": "{h6.line-height.value}",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "line-height",
+              "description": "Controls the vertical spacing between lines when tab item headings wrap to multiple lines. This ensures proper spacing for the tab text displayed in the tab headers.<br>CSS variable: --wm-tabs-item-heading-line-height"
+            }
           },
           "background": {
-            "value": "{color.primary.container.@.value}",
-            "type": "color"
+            "value": "{color.surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of tab item headings. This determines what color the background of tab headings appears in.<br>CSS variable: --wm-tabs-item-heading-background"
+            }
           },
           "text": {
             "value": "{color.outline.@.value}",
-            "type": "color"
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the text color of tab item headings (the clickable tab labels that users click to switch between different content sections). This determines what color the tab text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-tabs-item-heading-text"
+            }
           },
           "icon":{
             "value": "{color.outline.@.value}",
-            "type": "color"
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of tab item heading icons (icons that appear in tab labels). This determines what color the icons appear in, which should match or complement the tab text color for visual consistency.<br>CSS variable: --wm-tabs-item-heading-icon"
+            }
           },
           "indicator": {
             "height": {
               "value": "3px",
-              "type": "space"
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the height of tab item heading indicators. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-height"
+              }
             },
             "background": {
               "value": "{color.primary.@.value}",
-              "type": "color"
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the background color of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-background"
+              }
             }
           }
         },
         "icon": {
           "display": {
             "value": "inline-flex",
-            "type": "text"
-          },
-          "color": {
-            "value": "{color.outline.@.value}",
-            "type": "color"
+            "type": "text",
+            "attributes": {
+              "subtype": "cursor",
+              "description": "Controls the display property of tab item icons. This determines how icons are displayed in the layout.<br>CSS variable: --wm-tabs-item-heading-icon-display"
+            }
           },
           "font": {
             "size": {
               "value": "{h6.font-size.value}",
-              "type": "font"
+              "type": "font",
+              "attributes": {
+                "subtype": "icon-size",
+                "description": "Controls the font size of tab item icons. This affects how large the icons appear. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-font-size (for icons)"
+              }
             }
           },
           "height": {
             "value": "1",
-            "type": "size"
+            "type": "size",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the height of tab item icons. This determines the vertical size of the icons. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-icon-height"
+            }
           },
           "width": {
             "value": "1",
-            "type": "size"
+            "type": "size",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the width of tab item icons. This determines the horizontal size of the icons. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-icon-width"
+            }
           }
         }
       },
       "min": {
         "height": {
           "value": "240px",
-          "type": "space"
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the minimum height of tabs components. This determines the minimum vertical size of the tabs container. Acceptable units: px.<br>CSS variable: --wm-tabs-min-height"
+          }
         }
       },
       "states": {
         "active": {
           "item": {
             "heading": {
+              "indicator": {
+                "height": {
+                  "value": "3px",
+                  "type": "space",
+                  "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the height of active tab item heading indicators. This determines the vertical size of the indicator for active tabs. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-indicator-height (active state)"
+                  }
+                },
+                "background": {
+                  "value": "{color.primary.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color",
+                    "description": "Sets the background color of active tab item heading indicators. This determines what color the indicator appears in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-indicator-background (active state)"
+                  }
+                }
+              },
               "background": {
-                "value": "{color.primary.container.@.value}",
-                "type": "color"
+                "value": "{color.surface.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the background color of active tab item headings. This determines what color the background appears in for active tab headings.<br>CSS variable: --wm-tabs-item-heading-background (active state)"
+                }
               },
               "text": {
                 "value": "{color.primary.@.value}",
-                "type": "color"
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the text color of active tab item headings. This determines what color the text appears in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-text (active state)"
+                }
               },
               "icon":{
                 "value": "{color.primary.@.value}",
-                "type": "color"
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the color of active tab item heading icons. This determines what color the icons appear in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-icon (active state)"
+                }
               }
             }
           }