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

package/src/tokens/mobile/components/modal-dialog/modal-dialog.json

@@ -32,14 +32,6 @@
           "description": "Controls the minimum width of modal dialogs. This ensures the dialog is always wide enough to be visible and properly displayed. Acceptable units: px.<br>CSS variable: --wm-modal-min-width"
         }
       },
-      "max-height": {
-        "value": "793px",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the maximum height of modal dialogs. This prevents the dialog from becoming too tall and ensures it fits within the viewport. Acceptable units: px.<br>CSS variable: --wm-modal-max-height"
-        }
-      },
       "background": {
         "value": "{color.surface.container.high.@.value}",
         "type": "color",
@@ -67,7 +59,7 @@
         },
         "border": {
           "width": {
-            "value": "{border.width.base.value}",
+            "value": "{border.width.0.value}",
             "type": "space",
             "attributes": {
               "subtype": "border-width",
@@ -92,14 +84,6 @@
           }
         },
         "close-btn": {
-          "margin": {
-            "value": "0",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the outer margin (spacing) around the modal dialog close button. This creates spacing around the close button. Acceptable units: px.<br>CSS variable: --wm-modal-header-close-btn-margin"
-            }
-          },
           "border-width": {
             "value": "0",
             "type": "space",
@@ -108,6 +92,22 @@
               "description": "Controls the thickness of the border around the modal dialog close button. When set to 0, no border is visible. Acceptable units: px.<br>CSS variable: --wm-modal-header-close-btn-border-width"
             }
           },
+          "border-style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": " "
+            }
+          },
+          "border-color": {
+            "value": "#cccccc",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": " "
+            }
+          },
           "font-size": {
             "value": "14px",
             "type": "font",
@@ -123,20 +123,28 @@
               "subtype": "color",
               "description": "Sets the color of the close button icon in modal dialog headers. This determines what color the close icon appears in.<br>CSS variable: --wm-modal-header-close-btn-color"
             }
+          },
+          "background": {
+            "value": "{color.transparent.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": " "
+            }
+          }
+        },
+        "background": {
+          "value": "{color.surface.container.high.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": " "
           }
         }
       },
       "title": {
-        "gap": {
-          "value": "{space.1.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the spacing between modal dialog title elements (the gap between the title text and adjacent elements like icons). This creates breathing room around the title. Acceptable units: px.<br>CSS variable: --wm-modal-title-gap"
-          }
-        },
         "font-size": {
-          "value": "{h3.font-size.value}",
+          "value": "{h4.font-size.value}",
           "type": "font",
           "attributes": {
             "subtype": "font-size",
@@ -174,6 +182,14 @@
             "subtype": "letter-spacing",
             "description": "Controls the horizontal spacing between individual letters in modal dialog title text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-modal-title-letter-spacing"
           }
+        },
+        "color": {
+          "value": "#000000",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": " "
+          }
         }
       },
       "body": {
@@ -194,32 +210,6 @@
             "subtype": "space",
             "description": "Controls the internal spacing inside modal dialog footers (the bottom section that contains action buttons). This creates breathing room around the footer content. Acceptable units: px.<br>CSS variable: --wm-modal-footer-padding"
           }
-        },
-        "gap": {
-          "value": "{space.3.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the spacing between footer buttons in modal dialogs (the gap between action buttons in the footer). This creates breathing room between buttons. Acceptable units: px.<br>CSS variable: --wm-modal-footer-gap"
-          }
-        },
-        "btn": {
-          "padding-vertical": {
-            "value": "{space.3.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the vertical padding (top and bottom spacing) inside footer buttons in modal dialogs. This creates breathing room above and below the button text. Acceptable units: px.<br>CSS variable: --wm-modal-footer-btn-padding-vertical"
-            }
-          },
-          "padding-horizontal": {
-            "value": "{space.6.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the horizontal padding (left and right spacing) inside footer buttons in modal dialogs. This creates breathing room on the left and right sides of the button text. Acceptable units: px.<br>CSS variable: --wm-modal-footer-btn-padding-horizontal"
-            }
-          }
         }
       },
       "icon": {
@@ -231,12 +221,84 @@
             "description": "Controls the size of modal dialog icons (icons that appear in the dialog to indicate the dialog type or provide visual context). This affects how large the icons appear.<br>CSS variable: --wm-modal-icon-font-size"
           }
         },
+        "color": {
+          "value": "#000000",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": " "
+          }
+        }
+      },
+      "description": {
+        "font-size": {
+          "value": "{body.medium.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": " "
+          }
+        },
+        "font-family": {
+          "value": "{h5.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": " "
+          }
+        },
         "font-weight": {
-          "value": "{h4.font-weight.value}",
+          "value": "{body.small.font-weight.value}",
           "type": "font",
           "attributes": {
             "subtype": "font-weight",
-            "description": "Controls how thick or bold modal dialog icons appear. This affects the visual weight of the icons.<br>CSS variable: --wm-modal-icon-font-weight"
+            "description": "Controls how thick or bold modal dialog title text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-modal-title-font-weight"
+          }
+        },
+        "color": {
+          "value": "#000000",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": " "
+          }
+        }
+      },
+      "btn": {
+        "ok": {
+          "background": {
+            "value": "{color.secondary.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": " "
+            }
+          },
+          "color": {
+            "value": "{color.on-secondary.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": " "
+            }
+          }
+        },
+        "cancel": {
+          "background": {
+            "value": "{color.on-secondary.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": " "
+            }
+          },
+          "color": {
+            "value": "{color.on-secondary.container.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": " "
+            }
           }
         }
       }

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

@@ -1,103 +1,58 @@
 {
   "nav": {
-    "item": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-navbar"
+        }
+      }
+    },
+    "mapping": {
       "background": {
-        "value": "#ffffff",
+        "value": "{color.surface.container.lowest.@.value}",
         "type": "color",
         "attributes": {
           "subtype": "color",
-          "description": "Sets the background color of navigation items (individual menu items in navigation menus). This is the main background color that appears behind each navigation item.<br>CSS variable: --wm-nav-item-background"
+          "description": "Sets the background color of navigation (the main panel that contains navigation items). This is the main background color that appears behind the navigation items.<br>CSS variable: --wm-nav-background"
         }
       },
-      "min": {
-        "height": {
-          "value": "44px",
-          "type": "space",
+      "left-panel": {
+        "background": {
+        "value": "{color.surface.container.lowest.@.value}",
+          "type": "color",
           "attributes": {
-            "subtype": "space",
-            "description": "Controls the minimum height of navigation items (individual menu items in navigation menus). This ensures each navigation item is always tall enough to be visible and properly displayed. Acceptable units: px.<br>CSS variable: --wm-nav-item-min-height"
+            "subtype": "color",
+            "description": "Sets the background color of the left panel in navigation. This is the background color for the navigation panel area.<br>CSS variable: --wm-nav-left-panel-background"
           }
         }
       },
-      "font-size": {
-        "value": "{label.large.font-size.value}",
-        "type": "font",
-        "attributes": {
-          "subtype": "font-size",
-          "description": "Controls the size of navigation item text (the text that appears in each navigation menu item). This affects how large the navigation text appears.<br>CSS variable: --wm-nav-item-font-size"
-        }
-      },
-      "font-family": {
-        "value": "{label.large.font-family.value}",
-        "type": "font",
-        "attributes": {
-          "subtype": "font-family",
-          "description": "Sets the typeface (font style) for navigation item text. This determines whether the navigation text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-nav-item-font-family"
-        }
-      },
-      "font-weight": {
-        "value": "{label.large.font-weight.value}",
-        "type": "font",
-        "attributes": {
-          "subtype": "font-weight",
-          "description": "Controls how thick or bold navigation item text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-nav-item-font-weight"
-        }
-      },
-      "line-height": {
-        "value": "{label.large.line-height.value}",
-        "type": "font",
-        "attributes": {
-          "subtype": "line-height",
-          "description": "Controls the vertical spacing between lines when navigation item text wraps to multiple lines. This ensures proper spacing for the navigation text.<br>CSS variable: --wm-nav-item-line-height"
-        }
-      },
-      "letter-spacing": {
-        "value": "{label.large.letter-spacing.value}",
-        "type": "font",
-        "attributes": {
-          "subtype": "letter-spacing",
-          "description": "Controls the horizontal spacing between individual letters in navigation item text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-nav-item-letter-spacing"
-        }
-      },
-      "color": {
-        "value": "#151420",
-        "type": "color",
-        "attributes": {
-          "subtype": "color",
-          "description": "Sets the text color of navigation items (individual menu items in navigation menus). This determines what color the navigation text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-color"
-        }
-      },
-      "padding": {
-        "left": {
-          "type": "space",
-          "value": "{space.3.value}",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the left padding (horizontal spacing) inside navigation items. This creates breathing room on the left side of the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-left"
-          }
-        },
-        "right": {
-          "type": "space",
-          "value": "{space.3.value}",
+      "partial": {
+        "background": {
+          "value": "{color.transparent.@.value}",
+          "type": "color",
           "attributes": {
-            "subtype": "space",
-            "description": "Controls the right padding (horizontal spacing) inside navigation items. This creates breathing room on the right side of the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-right"
+            "subtype": "color",
+            "description": "Sets the background color of the partial area in navigation. This is the background color for the partial area.<br>CSS variable: --wm-nav-partial-background"
           }
-        },
-        "top": {
-          "type": "space",
-          "value": "{space.3.value}",
+        }
+      },
+      "partial-container": {
+        "background": {
+          "value": "transparent",
+          "type": "color",
           "attributes": {
-            "subtype": "space",
-            "description": "Controls the top padding (vertical spacing) inside navigation items. This creates breathing room above the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-top"
+            "subtype": "color",
+            "description": "Sets the background color of the partial container in navigation. This is the background color for the partial container.<br>CSS variable: --wm-nav-partial-container-background"
           }
-        },
-        "bottom": {
-          "type": "space",
-          "value": "{space.3.value}",
+        }
+      },
+      "navbar": {
+        "background": {
+          "value": "{color.surface.container.lowest.@.value}",
+          "type": "color",
           "attributes": {
-            "subtype": "space",
-            "description": "Controls the bottom padding (vertical spacing) inside navigation items. This creates breathing room below the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-bottom"
+            "subtype": "color",
+            "description": "Sets the background color of the navbar in navigation. This is the background color for the navbar.<br>CSS variable: --wm-nav-navbar-background"
           }
         }
       }

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

@@ -335,7 +335,68 @@
                         }
                     }
                 }
+            },
+            "border": {
+                "color": {
+                    "value": "{color.surface.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the border color of navigation bars. This determines what color the border appears in.<br>CSS variable: --wm-navbar-border-color"
+                    }
+                },
+                "style": {
+                    "value": "{border.style.base.value}",
+                    "type": "border",
+                    "attributes": {
+                        "subtype": "border-style",
+                        "description": "Controls the style of the border of navigation bars. This determines whether the border appears as solid, dashed, or dotted.<br>CSS variable: --wm-navbar-border-style"
+                    }
+                },
+                "radius": {
+                    "value": "0px",
+                    "type": "border",
+                    "attributes": {
+                        "subtype": "border-radius",
+                        "description": "Controls the radius of the border of navigation bars. This determines how rounded the border appears. Acceptable units: px.<br>CSS variable: --wm-navbar-border-radius"
+                    }
+                },
+                "width": {
+                    "top": {
+                        "value": "{border.width.0.value}",
+                        "type": "border",
+                        "attributes": {
+                            "subtype": "border-width",
+                            "description": "Controls the top border width of navigation bars. This determines how thick the top border appears. Acceptable units: px.<br>CSS variable: --wm-navbar-border-width-top"
+                        }
+                    },
+                    "bottom": {
+                        "value": "{border.width.0.value}",
+                        "type": "border",
+                        "attributes": {
+                            "subtype": "border-width",
+                            "description": "Controls the bottom border width of navigation bars. This determines how thick the bottom border appears. Acceptable units: px.<br>CSS variable: --wm-navbar-border-width-bottom"
+                        }
+                    },
+                    "left": {
+                        "value": "{border.width.0.value}",
+                        "type": "border",
+                        "attributes": {
+                            "subtype": "border-width",
+                            "description": "Controls the left border width of navigation bars. This determines how thick the left border appears. Acceptable units: px.<br>CSS variable: --wm-navbar-border-width-left"
+                        }
+                    },
+                    "right": {
+                        "value": "{border.width.0.value}",
+                        "type": "border",
+                        "attributes": {
+                            "subtype": "border-width",
+                            "description": "Controls the right border width of navigation bars. This determines how thick the right border appears. Acceptable units: px.<br>CSS variable: --wm-navbar-border-width-right"
+                        }
+                    }
+                }
             }
+
         }
     }
 }