components / main
main site topbar
MainSiteTopbar preconfigures the shared site topbar for the main app context and optional live clock. It keeps main pages aligned with the global chrome without re-authoring nav markup.
| field | value |
| group | main |
| import | @arieare/ds-main/MainSiteTopbar.astro |
| source | packages/ds-main/src/MainSiteTopbar.astro |
component tokens
| token | source | description |
--topbar-h / --topbar-text-size | @arieare/ds/tokens.css | Controls topbar height and shared navigation type size. |
--topbar-bg / --topbar-bg-blur / --topbar-line | @arieare/ds/tokens.css | Defines topbar surface treatment in standard and backdrop-filter paths. |
--topbar-link-ink / --topbar-link-ink-hover / --topbar-link-ink-active | @arieare/ds/tokens.css | Styles idle, hover, and current-page link states. |
--page-bg / --primary-ink / --secondary-ink | @arieare/ds-main/tokens.css | Main-app surface and ink aliases layered over the shared DS foundation. |
--link-ink / --wall-postit-* | @arieare/ds-main/tokens.css | Accent link color and tactile note-surface tokens unique to the main package. |
--aa-ui-bottom-tray-* | @arieare/ds-main/tokens.css | Bottom-tray surface, border, and backdrop tokens used by utility chrome. |
props
| prop | type | default | description |
showClock | boolean | true | Toggles the live clock script injection and visible clock slot. |