Signals back on the accent tint, their icon or initials in orange (#268)

A solid orange tile was too loud. Each Signal's tile is the folder's
accent tint again, and its icon or initials are drawn in the orange of
the Signals icon's point: #ff6a1a in dark. In light it is the light
palette's needle, #c43e00, since signals.svg's #ff5500 on the tint is
about 2:1, too faint for initials (about 3.4:1 instead).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/signals.md

@@ -20,7 +20,7 @@ their Signals that has not heard about the item yet.
   the set the page's own icons come from: 2,883 icons, solid, regular and brands, searched by name
   and Font Awesome's search terms ("ai" finds the robot). Without one, a Signal shows its initials.
   **Auto** asks Jev to choose (#263), and a Signal made without an icon gets Jev's pick by
-  itself, a moment after it is made. Every Signal's tile is solid in the orange of the folder icon's point.
+  itself, a moment after it is made. Every Signal's tile is in the accent tint the folder had, its icon or initials in the orange of the folder icon's point.
 - **Each Signal's row** says "12 items · 3 unread", as a feed's row counts its own.
 - **The folder's page** lists the Signals, as an OPML's page lists its feeds, with the + for a new one.
 - **A Signal's page** is an ordinary item list: All, Unread, Downloaded and Pinned, search and sort.

web/app.css

@@ -781,10 +781,11 @@ body.scan-this .fhead [data-a=scan] .i,body.scan-any .fhead [data-a=scanall] .i,
 .art>.tile{width:100%;height:100%;display:block}
 #pdead .tile{width:26px;height:26px;border-radius:6px}
 .art.ini{background:color-mix(in srgb,var(--tint) 24%,var(--bg));color:var(--tint)}
-/* A Signal: solid on the orange of the Signals icon's point (signals.svg, signals-dark.svg) in
+/* A Signal: the folder's accent tint, its icon or initials in the orange of the Signals icon's
-   every theme, as the icon is, with the icon or initials in the logo's navy. */
+   point (signals-dark.svg). In light, the light palette's needle (--accent2 there): signals.svg's
-.art.ini.sig{background:#ff6a1a;color:#0c2238}
+   #FF5500 on the tint is about 2:1, too faint for initials. */
-:root[data-mode="light"] .art.ini.sig{background:#ff5500}
+.art.ini.sig{background:color-mix(in srgb,var(--accent) 24%,var(--bg));color:#ff6a1a}
+:root[data-mode="light"] .art.ini.sig{color:#c43e00}
 /* A folder: its first four shows' art, as iTunes built a playlist's from its albums. */
 .art.mosaic{grid-template:1fr 1fr/1fr 1fr;place-items:stretch}
 .art.mosaic img{width:100%;height:100%;min-height:0;object-fit:cover;display:block}

web/src/signals.ts

@@ -34,9 +34,9 @@ function feedRow(id: string, cls: string, html: string, open: ()=>void){
 /// takes nothing else either).
 const ICON_ID=/^(solid|regular|brands)\/[a-z0-9-]{1,64}$/;
 const iconHTML=(icon: string)=>`<span class="ficon" style="--icon:url('/icons/${icon}.svg')"></span>`;
-/// Every Signal on the orange of the folder icon's point (.art.sig), icon or initials: tinted by a
+/// Every Signal in the folder's accent tint, its icon or initials in the orange of the folder icon's
-/// hash of its name, as a feed without art is, one came out a colour of its own for no reason
+/// point (.art.sig): tinted by a hash of its name, as a feed without art is, one came out a colour
-/// anyone could see (#262).
+/// of its own for no reason anyone could see (#262).
 function signalTile(sg: {name: string, icon: string|null}){
   const inner=sg.icon&&ICON_ID.test(sg.icon) ? iconHTML(sg.icon) : esc(initials(sg.name));
   return `<div class="art ini sig">${inner}</div>`;