diff --git a/docs/design-system.md b/docs/design-system.md index ec6bbf56..42daad27 100644 --- a/docs/design-system.md +++ b/docs/design-system.md @@ -229,6 +229,19 @@ We continue to expose aliases such as `.profile-switcher` and nested variations - Modal templates across the app now mount `.bv-modal`, `.bv-modal-backdrop`, and `.bv-modal__panel` primitives directly. Controllers such as `ProfileModalController` and the upload modal orchestrator were updated to expect these primitives, so any new modal should follow the same structure for consistent accessibility and animation hooks. - The compatibility shim keeps the `.profile-switcher` selector family alive temporarily so third-party embeds and cached HTML fragments continue to render while operators redeploy updated templates. Keep the aliases until the April 2025 removal window above, then delete the shim and update any last callers to the new `.card`/`.btn-ghost` structure. +## Beacon client migration + +The torrent beacon now shares the Tailwind bundle used across bitvid. The standalone `torrent/beacon.html` drops Skeleton/FoA CDNs in favour of `css/tailwind.generated.css`, adopts the `.card`, `.btn`, `.btn-ghost`, and `.input` primitives, and relies on `.bv-stack` for spacing inside Angular partials. Inline SVG icons replace FontAwesome so controls stay lightweight while inheriting tokenised focus and hover states. + +Angular templates under `torrent/views/` should follow the refreshed structure: + +- Wrap primary sections in `.card` and layer Tailwind utilities for layout (`grid`, `gap-xl`, `overflow-auto`). +- Use `.input`, `.select`, `.btn`, and `.btn-ghost` (with `data-variant="critical"` for destructive actions) instead of legacy `.u-full-width`, `.button`, or `.button-danger` classes. +- Prefer token-backed utilities for spacing and typography (`px-6`, `py-6`, `text-muted`) over ad-hoc CSS. +- Reuse the `.spinner-overlay` markup for async states so overlays stay consistent with the new palette. + +When adding new torrent affordances, mirror the existing markup: inline 24×24 SVG strokes at 2px, `.focus-ring` on interactive anchors, and `.bv-stack` for vertical rhythm. This keeps the beacon aligned with the design system without reintroducing the deprecated Skeleton grid. + ## When to Mix Utilities Use the primitives for foundation and lean on Tailwind utilities for: diff --git a/torrent/app.js b/torrent/app.js index 69c17928..bc401fac 100644 --- a/torrent/app.js +++ b/torrent/app.js @@ -36,7 +36,7 @@ const app = angular.module("BTorrent", [ const styleEl = document.createElement("style"); styleEl.textContent = ` .ui-grid-row { - border-bottom: 1px solid var(--color-border-subtle, #d1d5db); + border-bottom: 1px solid var(--color-border-subtle); } `; document.head.appendChild(styleEl); diff --git a/torrent/beacon.html b/torrent/beacon.html index fee6b9f7..46f09913 100644 --- a/torrent/beacon.html +++ b/torrent/beacon.html @@ -21,37 +21,34 @@ - + + - - - - +
-
-
- - - -
+
+
@@ -60,8 +57,29 @@
- + + +
+ Client stats: ↓ {{ client.downloadSpeed | pbytes }}/s · ↑ {{ + client.uploadSpeed | pbytes }}/s · Ratio: {{ client.ratio | number:2 }}
-