components / work
work site topbar
WorkSiteTopbar binds the shared global topbar to the work app context and optional clock behavior. It keeps case-study pages aligned with the rest of the multi-app shell.
| field | value |
| group | work |
| import | @arieare/ds-work/WorkSiteTopbar.astro |
| source | packages/ds-work/src/WorkSiteTopbar.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-work/tokens.css | Work-app page surface and primary/secondary ink aliases. |
--font-display / --font-body | @arieare/ds-work/tokens.css | Paper Mono-led display and reading stacks used across work surfaces. |
--outline / --dot-grid | @arieare/ds-work/tokens.css | Editorial outline and background texture tokens unique to the work package. |
props
| prop | type | default | description |
showClock | boolean | true | Toggles the live clock script and visible clock slot. |