fix(kit): draw AuthFrame's band marks from the band's own pair

.changeset/band-marks-read-from-band.md

@@ -0,0 +1,27 @@
+---
+"seamless-templates": patch
+---
+
+fix(kit): draw AuthFrame's band marks from the band's own pair, not the accent
+
+The bullet marks beside the pitch on the sign-in screen were `bg-accent`, on the
+band. The accent is picked to sit on a surface, so on the band it is whatever it
+happens to be, and a kit that chooses a deep accent loses the marks completely.
+
+This is not only true of a deep accent. Measured against the palette this repo
+ships, the marks are already at 2.69:1 in light and 1.97:1 in dark, because the
+default accent is a sky blue and the default band is a blue. They are
+`aria-hidden`, so no accessibility check ever failed on them; they were simply
+close to invisible, and in only one theme at a time, which is how it survived
+review.
+
+`bg-on-band` is the pair the kit keeps for exactly this. It is 5.75:1 and 4.21:1
+against the same two bands, and it follows the band wherever a kit takes it,
+including the styles where the band is a window onto the backdrop rather than a
+panel of colour. `PrimaryButton`'s `onBand` variant already reads from it and
+already explains why; the marks now do the same and carry the rule.
+
+The rest of the sweep came back clean. Only `Screen` and `AuthFrame` render
+inside `band-fill`, everything `Screen` puts there (`PageHeader`, `StatRow`)
+already takes `onBand` and reads from the band pair, and `StatRow`'s lead panel
+brings its own fill and ink together so it is self-consistent wherever it lands.

shared/react-app/components/kit/AuthFrame.tsx

@@ -33,9 +33,13 @@ export default function AuthFrame({
             <ul className="mt-12 space-y-3">
               {points.map((point) => (
                 <li key={point} className="flex items-start gap-3">
+                  {/* Anything drawn on the band reads from the band's own pair,
+                      the same one PrimaryButton's onBand variant uses. The accent
+                      is picked for a surface, so a kit that chooses a deep one
+                      loses these marks against the band entirely. */}
                   <span
                     aria-hidden
-                    className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-accent"
+                    className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-on-band"
                   />
                   <span className="text-sm text-band-ink-muted">{point}</span>
                 </li>

templates/web/react-oauth/src/components/kit/AuthFrame.tsx

@@ -33,9 +33,13 @@ export default function AuthFrame({
             <ul className="mt-12 space-y-3">
               {points.map((point) => (
                 <li key={point} className="flex items-start gap-3">
+                  {/* Anything drawn on the band reads from the band's own pair,
+                      the same one PrimaryButton's onBand variant uses. The accent
+                      is picked for a surface, so a kit that chooses a deep one
+                      loses these marks against the band entirely. */}
                   <span
                     aria-hidden
-                    className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-accent"
+                    className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-on-band"
                   />
                   <span className="text-sm text-band-ink-muted">{point}</span>
                 </li>

templates/web/react-vite/src/components/kit/AuthFrame.tsx

@@ -33,9 +33,13 @@ export default function AuthFrame({
             <ul className="mt-12 space-y-3">
               {points.map((point) => (
                 <li key={point} className="flex items-start gap-3">
+                  {/* Anything drawn on the band reads from the band's own pair,
+                      the same one PrimaryButton's onBand variant uses. The accent
+                      is picked for a surface, so a kit that chooses a deep one
+                      loses these marks against the band entirely. */}
                   <span
                     aria-hidden
-                    className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-accent"
+                    className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-on-band"
                   />
                   <span className="text-sm text-band-ink-muted">{point}</span>
                 </li>