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

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

@@ -0,0 +1,368 @@
+{
+    "navbar": {
+        "meta": {
+            "mapping": {
+                "selector": {
+                    "mobile": ".app-appnavbar"
+                }
+            }
+        },
+        "mapping": {
+            "height": {
+                "value": "80px",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the height of navigation bars (top bars that contain navigation elements, icons, and content). This determines how tall the navbar appears. Acceptable units: px.<br>CSS variable: --wm-navbar-height"
+                }
+            },
+            "background-color": {
+                "value": "{color.surface.@.value}",
+                "type": "color",
+                "attributes": {
+                    "subtype": "color",
+                    "description": "Sets the background color of navigation bars (top bars that contain navigation elements, icons, and content). This is the main background color that appears behind the navbar content.<br>CSS variable: --wm-navbar-background-color"
+                }
+            },
+            "padding": {
+                "value": "{space.3.value}",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the padding inside navigation bars (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-navbar-padding"
+                }
+            },
+            "left-icon": {
+                "color": {
+                    "value": "{color.on-surface.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the color of left icons in navigation bars (icons that appear on the left side of the navbar). This determines what color the left icons appear in.<br>CSS variable: --wm-navbar-left-icon-color"
+                    }
+                },
+                "size": {
+                    "value": "{icon.size.@.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "icon-size",
+                        "description": "Controls the size of left icons in navigation bars. This affects how large the left icons appear. Acceptable units: px.<br>CSS variable: --wm-navbar-left-icon-size"
+                    }
+                }
+            },
+            "back-icon": {
+                "color": {
+                    "value": "{color.on-surface.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the color of back icons in navigation bars (icons that navigate back to the previous screen). This determines what color the back icons appear in.<br>CSS variable: --wm-navbar-back-icon-color"
+                    }
+                },
+                "size": {
+                    "value": "{icon.size.@.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "icon-size",
+                        "description": "Controls the size of back icons in navigation bars. This affects how large the back icons appear. Acceptable units: px.<br>CSS variable: --wm-navbar-back-icon-size"
+                    }
+                }
+            },
+            "menu-icon": {
+                "color": {
+                    "value": "{color.on-surface.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the color of menu icons in navigation bars (icons that open navigation menus). This determines what color the menu icons appear in.<br>CSS variable: --wm-navbar-menu-icon-color"
+                    }
+                },
+                "size": {
+                    "value": "{icon.size.@.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "icon-size",
+                        "description": "Controls the size of menu icons in navigation bars. This affects how large the menu icons appear. Acceptable units: px.<br>CSS variable: --wm-navbar-menu-icon-size"
+                    }
+                }
+            },
+            "popover-icon": {
+                "color": {
+                    "value": "{color.on-surface.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the color of popover icons in navigation bars (icons that open popover menus). This determines what color the popover icons appear in.<br>CSS variable: --wm-navbar-popover-icon-color"
+                    }
+                },
+                "size": {
+                    "value": "{icon.size.@.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "icon-size",
+                        "description": "Controls the size of popover icons in navigation bars. This affects how large the popover icons appear. Acceptable units: px.<br>CSS variable: --wm-navbar-popover-icon-size"
+                    }
+                }
+            },
+            "image": {
+                "width": {
+                    "value": "32px",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the width of images in navigation bars (logos or images that appear in the navbar). This determines how wide the navbar images appear. Acceptable units: px.<br>CSS variable: --wm-navbar-image-width"
+                    }
+                },
+                "height": {
+                    "value": "32px",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the height of images in navigation bars (logos or images that appear in the navbar). This determines how tall the navbar images appear. Acceptable units: px.<br>CSS variable: --wm-navbar-image-height"
+                    }
+                }
+            },
+            "content": {
+                "color": {
+                    "value": "{color.on-surface.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the text color of navigation bar content (the main text that appears in the navbar). This determines what color the navbar content text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-navbar-content-color"
+                    }
+                },
+                "font": {
+                    "size": {
+                        "value": "{body.large.font-size.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-size",
+                            "description": "Controls the size of navigation bar content text. This affects how large the navbar content text appears.<br>CSS variable: --wm-navbar-content-font-size"
+                        }
+                    },
+                    "family": {
+                        "value": "{body.large.font-family.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-family",
+                            "description": "Sets the typeface (font style) for navigation bar content text. This determines whether the navbar content text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-navbar-content-font-family"
+                        }
+                    },
+                    "weight": {
+                        "value": "{body.large.font-weight.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-weight",
+                            "description": "Controls how thick or bold navigation bar content text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-navbar-content-font-weight"
+                        }
+                    }
+                }
+            },
+            "badge": {
+                "background-color": {
+                    "value": "{color.inverse.on-surface.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the background color of badges in navigation bars (small indicators that appear on navbar elements). When transparent, only the badge text is visible. When filled with a color, the badge appears with a colored background.<br>CSS variable: --wm-navbar-badge-background-color"
+                    }
+                },
+                "color": {
+                    "value": "{color.on-surface.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the text color of badges in navigation bars. This determines what color the badge text appears in, typically matching the primary theme color.<br>CSS variable: --wm-navbar-badge-color"
+                    }
+                },
+                "height": {
+                    "value": "{space.6.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the height of badges in navigation bars. This determines how tall the badge appears. Acceptable units: px.<br>CSS variable: --wm-navbar-badge-height"
+                    }
+                },
+                "width": {
+                    "value": "{space.6.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the width of badges in navigation bars. This determines how wide the badge appears. Acceptable units: px.<br>CSS variable: --wm-navbar-badge-width"
+                    }
+                },
+                "font": {
+                    "size": {
+                    "value": "{p.font-size.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-size",
+                            "description": "Controls the font size of badge text in navigation bars. This affects how large the badge text appears.<br>CSS variable: --wm-navbar-badge-font-size"
+                        }
+                    }
+                },
+                "line-height": {
+                        "value": "{body.large.line-height}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "line-height",
+                            "description": "Controls the line height of badge text in navigation bars. This affects the vertical spacing of badge text.<br>CSS variable: --wm-navbar-badge-line-height"
+                        }
+                },
+                "border": {
+                    "radius": {
+                        "value": "{radius.md.value}",
+                        "type": "radius",
+                        "attributes": {
+                            "subtype": "radius",
+                            "description": "Controls the border radius. IMPORTANT: border.radius value should always be half of the height & width. This determines how rounded the badge corners appear. Acceptable units: px.<br>CSS variable: --wm-navbar-badge-border-radius"
+                        }
+                    }
+                },
+                "margin-left": {
+                    "value": "4px",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the left margin (horizontal spacing) of badges in navigation bars. This creates spacing to the left of badges, separating them from adjacent content. Acceptable units: px.<br>CSS variable: --wm-navbar-badge-margin-left"
+                    }
+                }
+            },
+            "anchor": {
+                "padding": {
+                    "value": "0px",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the padding inside navigation bar anchor elements (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-navbar-anchor-padding"
+                    }
+                },
+                "text": {
+                    "color": {
+                        "value": "{color.on-surface.@.value}",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the text color of navigation bar anchor text (clickable link text in the navbar). This determines what color the anchor text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-navbar-anchor-text-color"
+                        }
+                    },
+                    "font": {
+                        "size": {
+                            "value": "{body.large.font-size.value}",
+                            "type": "font",
+                            "attributes": {
+                                "subtype": "font-size",
+                                "description": "Controls the size of navigation bar anchor text. This affects how large the anchor text appears.<br>CSS variable: --wm-navbar-anchor-text-font-size"
+                            }
+                        },
+                        "family": {
+                            "value": "{body.large.font-family.value}",
+                            "type": "font",
+                            "attributes": {
+                                "subtype": "font-family",
+                                "description": "Sets the typeface (font style) for navigation bar anchor text. This determines whether the anchor text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-navbar-anchor-text-font-family"
+                            }
+                        },
+                        "weight": {
+                            "value": "{body.large.font-weight.value}",
+                            "type": "font",
+                            "attributes": {
+                                "subtype": "font-weight",
+                                "description": "Controls how thick or bold navigation bar anchor text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-navbar-anchor-text-font-weight"
+                            }
+                        }
+                    }
+                },
+                "icon": {
+                    "color": {
+                        "value": "{color.on-surface.@.value}",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the color of icons in navigation bar anchor elements. This determines what color the anchor icons appear in.<br>CSS variable: --wm-navbar-anchor-icon-color"
+                        }
+                    },
+                    "size": {
+                        "value": "{icon.size.@.value}",
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "icon-size",
+                            "description": "Controls the size of icons in navigation bar anchor elements. This affects how large the anchor icons appear. Acceptable units: px.<br>CSS variable: --wm-navbar-anchor-icon-size"
+                        }
+                    }
+                }
+            },
+            "button": {
+                "color": {
+                    "value": "{color.on-surface.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the text color of buttons in navigation bars. This determines what color the button text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-navbar-button-color"
+                    }
+                },
+                "font": {
+                    "size": {
+                        "value": "{body.large.font-size.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-size",
+                            "description": "Controls the size of button text in navigation bars. This affects how large the button text appears.<br>CSS variable: --wm-navbar-button-font-size"
+                        }
+                    },
+                    "family": {
+                        "value": "{body.large.font-family.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-family",
+                            "description": "Sets the typeface (font style) for button text in navigation bars. This determines whether the button text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-navbar-button-font-family"
+                        }
+                    },
+                    "weight": {
+                        "value": "{body.large.font-weight.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-weight",
+                            "description": "Controls how thick or bold button text in navigation bars appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-navbar-button-font-weight"
+                        }
+                    }
+                }
+            },
+            "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": {
+                    "value": "{border.width.0.value}",
+                    "type": "border",
+                    "attributes": {
+                        "subtype": "border-width",
+                        "description": "Controls the border width of navigation bars (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-navbar-border-width"
+                    }
+                }
+            }
+
+        }
+    }
+}