components / blog
blog site topbar
BlogSiteTopbar binds the shared topbar to the blog app context and optionally mounts the live clock. It keeps the editorial app on the same global navigation contract as the rest of the system.
| field | value |
| group | blog |
| import | @arieare/ds-blog/BlogSiteTopbar.astro |
| source | packages/ds-blog/src/BlogSiteTopbar.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 / --border-color | @arieare/ds-blog/tokens.css | Sets the blog reading surface and divider color. The centered reading width now comes from the shared shell-layout tokens. |
--primary-ink / --secondary-ink | @arieare/ds-blog/tokens.css | Provides the blog package's primary and secondary ink aliases. |
--blog-surface-rule-hover | @arieare/ds-blog/tokens.css | Hover rule color used by list-item and navigator accents. |
props
| prop | type | default | description |
showClock | boolean | true | Toggles the live clock script and visible clock slot. |