docs: sidebar badge on the landing previews is readable in the dark theme, primary background with its contrast text like in the app AdminForth/2005

Author: ivictbor

documentation/static/landing-previews/branding.html

@@ -15,7 +15,7 @@
   .side .nav.is-on .i { color: #FFFFFF; }
   .side .nav-sep { background: rgba(255, 255, 255, .14); }
   .side .nav-head { color: rgba(255, 255, 255, .5); }
-  .side .count { background: #38BDF8; color: #0B1430; }
+  .side .nav .count { background: #38BDF8; color: #0B1430; }
   .acts { display: flex; gap: 2px; color: var(--muted); }
   .at td.act { padding-top: 8px; padding-bottom: 8px; }
   .at tr.is-sel td { background: var(--accent-soft); }

documentation/static/landing-previews/previews.css

@@ -134,6 +134,8 @@ button { font: inherit; }
 .kbd { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; line-height: 1; }
 .btn-primary .kbd { background: transparent; border-color: rgba(127, 127, 127, .35); color: inherit; opacity: .7; }
 .count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--accent); color: #FFFFFF; }
+/* primary with its contrast color, like lightPrimary / darkPrimary and their *Contrast tokens */
+:root.dark .count { background: var(--accent-fg); color: var(--bg); }
 .btn-primary .count { background: var(--on-ink); color: var(--ink); }
 
 /* links */
@@ -197,6 +199,7 @@ button { font: inherit; }
 .nav.is-on { background: var(--surface-3); color: var(--text); font-weight: 500; }
 .nav.is-on .i { color: var(--text); }
 .nav .trail { margin-left: auto; color: var(--faint); }
+.nav .count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; font-weight: 500; }
 .nav-head { padding: 14px 10px 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
 .nav-sep { height: 1px; background: var(--border); margin: 8px 10px; }
 

documentation/static/landing-previews/previews.js

@@ -26,7 +26,7 @@ for (const side of document.querySelectorAll('.side')) {
     if (item.heading) {
       return `<div class="nav-sep"></div>${rail ? '' : `<div class="nav-head">${item.heading}</div>`}`;
     }
-    const text = rail ? '' : `${item.label}${item.badge ? `<span class="count trail">${item.badge}</span>` : ''}`;
+    const text = rail ? '' : `${item.label}${item.badge ? `<span class="count">${item.badge}</span>` : ''}`;
     return `<span class="nav${item.label === side.dataset.active ? ' is-on' : ''}">${icon(item.icon)}${text}</span>`;
   });
   const logo = `<svg><use href="brands.svg#${side.dataset.logo ?? 'adminforth'}"/></svg>`;