components / play
play site topbar
PlaySiteTopbar is the play package's package-level wrapper around the shared topbar shell. It keeps the arcade portal aligned with the global DS nav while inheriting play-specific token color from the theme wrapper.
| field | value |
| group | play |
| import | @arieare/ds-play/PlaySiteTopbar.astro |
| source | packages/ds-play/src/PlaySiteTopbar.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. |
--bg / --bg-panel / --line | @arieare/ds-play/tokens.css | Defines the play portal background, panel surface, and divider line color. |
--accent / --accent-2 | @arieare/ds-play/tokens.css | Primary and secondary arcade accent colors. |
--font-pixel / --px-* | @arieare/ds-play/tokens.css | Bitmap font and pixel-art palette tokens used by play surfaces. |
props
| prop | type | default | description |
showClock | boolean | true | Toggles the live clock script and visible clock slot. |