From 8d5de3afb2d267201813a272703398a665eb2666 Mon Sep 17 00:00:00 2001 From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com> Date: Tue, 14 Oct 2025 12:57:07 -0400 Subject: [PATCH] Refine logo theming selectors --- README.md | 4 ++++ assets/svg/bitvid-logo-dark-mode.svg | 6 +++--- assets/svg/bitvid-logo-light-mode.svg | 6 +++--- bitvid_logo/bitvid-01.svg | 6 +++--- bitvid_logo/bitvid-02.svg | 6 +++--- bitvid_logo/bitvid-03.svg | 6 +++--- bitvid_logo/bitvid-04.svg | 6 +++--- bitvid_logo/bitvid-05.svg | 2 +- bitvid_logo/bitvid-06.svg | 2 +- bitvid_logo/bitvid-07.svg | 2 +- bitvid_logo/bitvid-08.svg | 16 +++++++++------- bitvid_logo/bitvid-09.svg | 16 +++++++++------- bitvid_logo/bitvid-10.svg | 16 +++++++++------- bitvid_logo/bitvid-11.svg | 4 ++-- bitvid_logo/bitvid-12.svg | 4 ++-- bitvid_logo/bitvid-13.svg | 4 ++-- bitvid_logo/bitvid-14.svg | 4 ++-- bitvid_logo/bitvid-15.svg | 4 ++-- bitvid_logo/bitvid-16.svg | 4 ++-- components/disclaimer.html | 5 ++--- css/tailwind.generated.css | 2 +- css/tailwind.source.css | 15 +++++++++++++++ docs/design-system.md | 2 ++ index.html | 5 ++--- tailwind.config.cjs | 1 + torrent/beacon.html | 5 ++--- 26 files changed, 89 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index 7d8d9b52..9b7a3f64 100644 --- a/README.md +++ b/README.md @@ -125,6 +125,10 @@ artifacts. `currentColor`, `[data-variant="inverse"]` swaps in the inverse palette, and `data-accent="current"` makes the accent follow the surrounding text when needed. +- Inside the SVG, target elements with `.bv-logo__wordmark`, + `.bv-logo__accent`, and `.bv-logo__background` so fills inherit the custom + properties seeded by `.bv-logo`. Group paths with `` wrappers where + possible to avoid repeating classes on every primitive. - Use Tailwind text utilities (such as `text-text-strong` or `text-text`) on the wrapper to resolve to token-backed colors. Avoid hard-coded hex colors in the SVG; customize the logo via the provided classes when deployments need a diff --git a/assets/svg/bitvid-logo-dark-mode.svg b/assets/svg/bitvid-logo-dark-mode.svg index 45b67504..866c56d1 100644 --- a/assets/svg/bitvid-logo-dark-mode.svg +++ b/assets/svg/bitvid-logo-dark-mode.svg @@ -1,5 +1,5 @@ - - + + @@ -10,7 +10,7 @@ - + diff --git a/assets/svg/bitvid-logo-light-mode.svg b/assets/svg/bitvid-logo-light-mode.svg index 492ff914..866c56d1 100644 --- a/assets/svg/bitvid-logo-light-mode.svg +++ b/assets/svg/bitvid-logo-light-mode.svg @@ -1,5 +1,5 @@ - - + + @@ -10,7 +10,7 @@ - + diff --git a/bitvid_logo/bitvid-01.svg b/bitvid_logo/bitvid-01.svg index 11292425..866c56d1 100644 --- a/bitvid_logo/bitvid-01.svg +++ b/bitvid_logo/bitvid-01.svg @@ -1,5 +1,5 @@ - - + + @@ -10,7 +10,7 @@ - + diff --git a/bitvid_logo/bitvid-02.svg b/bitvid_logo/bitvid-02.svg index 530b643a..866c56d1 100644 --- a/bitvid_logo/bitvid-02.svg +++ b/bitvid_logo/bitvid-02.svg @@ -1,5 +1,5 @@ - - + + @@ -10,7 +10,7 @@ - + diff --git a/bitvid_logo/bitvid-03.svg b/bitvid_logo/bitvid-03.svg index 492ff914..866c56d1 100644 --- a/bitvid_logo/bitvid-03.svg +++ b/bitvid_logo/bitvid-03.svg @@ -1,5 +1,5 @@ - - + + @@ -10,7 +10,7 @@ - + diff --git a/bitvid_logo/bitvid-04.svg b/bitvid_logo/bitvid-04.svg index 45b67504..866c56d1 100644 --- a/bitvid_logo/bitvid-04.svg +++ b/bitvid_logo/bitvid-04.svg @@ -1,5 +1,5 @@ - - + + @@ -10,7 +10,7 @@ - + diff --git a/bitvid_logo/bitvid-05.svg b/bitvid_logo/bitvid-05.svg index cda3f674..4a397f87 100644 --- a/bitvid_logo/bitvid-05.svg +++ b/bitvid_logo/bitvid-05.svg @@ -1,5 +1,5 @@ - + diff --git a/bitvid_logo/bitvid-06.svg b/bitvid_logo/bitvid-06.svg index e97b30e8..4a397f87 100644 --- a/bitvid_logo/bitvid-06.svg +++ b/bitvid_logo/bitvid-06.svg @@ -1,5 +1,5 @@ - + diff --git a/bitvid_logo/bitvid-07.svg b/bitvid_logo/bitvid-07.svg index 74159d6e..4a397f87 100644 --- a/bitvid_logo/bitvid-07.svg +++ b/bitvid_logo/bitvid-07.svg @@ -1,5 +1,5 @@ - + diff --git a/bitvid_logo/bitvid-08.svg b/bitvid_logo/bitvid-08.svg index e360e413..db3d2c43 100644 --- a/bitvid_logo/bitvid-08.svg +++ b/bitvid_logo/bitvid-08.svg @@ -1,8 +1,10 @@ - - - - - - - + + + + + + + + + diff --git a/bitvid_logo/bitvid-09.svg b/bitvid_logo/bitvid-09.svg index 20f1a9f2..db3d2c43 100644 --- a/bitvid_logo/bitvid-09.svg +++ b/bitvid_logo/bitvid-09.svg @@ -1,8 +1,10 @@ - - - - - - - + + + + + + + + + diff --git a/bitvid_logo/bitvid-10.svg b/bitvid_logo/bitvid-10.svg index ae7d211c..db3d2c43 100644 --- a/bitvid_logo/bitvid-10.svg +++ b/bitvid_logo/bitvid-10.svg @@ -1,8 +1,10 @@ - - - - - - - + + + + + + + + + diff --git a/bitvid_logo/bitvid-11.svg b/bitvid_logo/bitvid-11.svg index 34104318..9bd17951 100644 --- a/bitvid_logo/bitvid-11.svg +++ b/bitvid_logo/bitvid-11.svg @@ -1,6 +1,6 @@ - - + + diff --git a/bitvid_logo/bitvid-12.svg b/bitvid_logo/bitvid-12.svg index bdb1e528..9bd17951 100644 --- a/bitvid_logo/bitvid-12.svg +++ b/bitvid_logo/bitvid-12.svg @@ -1,6 +1,6 @@ - - + + diff --git a/bitvid_logo/bitvid-13.svg b/bitvid_logo/bitvid-13.svg index 6fecb9f1..0f5cb6b0 100644 --- a/bitvid_logo/bitvid-13.svg +++ b/bitvid_logo/bitvid-13.svg @@ -1,6 +1,6 @@ - - + + diff --git a/bitvid_logo/bitvid-14.svg b/bitvid_logo/bitvid-14.svg index 824c7330..0f5cb6b0 100644 --- a/bitvid_logo/bitvid-14.svg +++ b/bitvid_logo/bitvid-14.svg @@ -1,6 +1,6 @@ - - + + diff --git a/bitvid_logo/bitvid-15.svg b/bitvid_logo/bitvid-15.svg index 31a4eb3b..0f5cb6b0 100644 --- a/bitvid_logo/bitvid-15.svg +++ b/bitvid_logo/bitvid-15.svg @@ -1,6 +1,6 @@ - - + + diff --git a/bitvid_logo/bitvid-16.svg b/bitvid_logo/bitvid-16.svg index 1f65e5fc..9bd17951 100644 --- a/bitvid_logo/bitvid-16.svg +++ b/bitvid_logo/bitvid-16.svg @@ -1,6 +1,6 @@ - - + + diff --git a/components/disclaimer.html b/components/disclaimer.html index f797340f..b64d2fd2 100644 --- a/components/disclaimer.html +++ b/components/disclaimer.html @@ -25,11 +25,10 @@ ` or inline logo wrappers to standardize sizing (`h-24`, `w-auto`, `max-w-none`) without reintroducing element selectors. Compose additional utilities (`h-16`, responsive overrides) when a view needs alternate scale. +Logo glyphs now rely on dedicated selectors inside the SVG: apply `.bv-logo__accent` to the nine-block mark, `.bv-logo__wordmark` to the lettering, and `.bv-logo__background` to any surrounding tile. These hooks read from the CSS custom properties that `.bv-logo` seeds, so themes can flip palettes purely through attributes (`data-variant`, `data-wordmark`, etc.) without reintroducing inline `fill` or `color` overrides. + ### Popovers Use `.popover` as the relative anchor for floating content. Nest `.popover__panel` for the floating surface—it’s positioned with the shared helper, inherits the shared focus ring, and animates with opacity/scale tokens. Toggle `[data-state="open"]` on the panel to switch between the collapsed (`opacity-0 scale-95`) and expanded (`opacity-100 scale-100`) states. diff --git a/index.html b/index.html index 31d84ddb..2c87a923 100644 --- a/index.html +++ b/index.html @@ -125,11 +125,10 @@