fix(surfaces): make list/card surfaces opaque by default, fix card radius

The prototype states an explicit system rule (t4 line 40): "opaque list
surface #102532, glass only in the chrome and in the active card."
PluriGlassSurface backs nearly every card/row in the app, but always
rendered translucent + blurred (glassSurface, blur 18) — the listSurface
token (#102532) existed since WU1 but was only ever used at reduced
alpha, never opaquely.

Add a `glass` flag to PluriGlassSurface, defaulting to false: an opaque
listSurface fill with no BackdropFilter. Chrome (MiniReproductor) and
the active/now-playing card (Escuchar's hero, when a station is
playing) opt into the old translucent look via `glass: true` — every
other of the ~26 call sites needs no change and now renders opaquely.

Also fix the card radius: the prototype's dominant card radius is 18
(t4 lines 512, 613, 715, 133); radiusMd was 22, a systematic +4px drift
across every card that defaults to it. Retune TarjetaEmisora's own
radius ternary so its compact (row) variant uses the dominant row
radius, 14, instead of inheriting the card radius.

S3+S4, Tier 1 visual-fidelity pass (audit id 2521).
This commit is contained in:
2026-07-29 20:23:55 +02:00
parent 78a7415dd8
commit 5a5f1655a9
9 changed files with 218 additions and 22 deletions
+3
View File
@@ -72,6 +72,9 @@ class _MiniReproductorState extends State<MiniReproductor> {
t.spacingSm,
),
child: PluriGlassSurface(
// S3 (Tier 1 visual fidelity): chrome — one of the system rule's
// two named exceptions to the opaque list-surface default.
glass: true,
padding: EdgeInsets.symmetric(
horizontal: t.spacingSm,
vertical: t.spacingXs,
+42 -16
View File
@@ -4,6 +4,15 @@ import 'package:flutter/material.dart';
import '../tema/pluriwave_theme.dart';
/// S3+S4 (Tier 1 visual fidelity): the prototype's own system rule (`t4`
/// line 40, verbatim) — "Superficie de lista opaca #102532, cristal solo en
/// el cromo y en la tarjeta activa" ("Opaque list surface #102532, glass
/// only in the chrome and in the active card"). This primitive backs nearly
/// every card/row in the app, so [glass] defaults to `false`: an OPAQUE
/// [PluriWaveTokens.listSurface] fill, no blur. Pass `glass: true` for the
/// rule's two named exceptions — chrome (e.g. `MiniReproductor`) and the
/// active/now-playing card (Escuchar's `_EscucharHero`) — to keep the
/// original translucent, blurred look there.
class PluriGlassSurface extends StatelessWidget {
const PluriGlassSurface({
super.key,
@@ -12,6 +21,7 @@ class PluriGlassSurface extends StatelessWidget {
this.borderRadius,
this.blurSigma = 18,
this.glowColor,
this.glass = false,
});
final Widget child;
@@ -20,31 +30,47 @@ class PluriGlassSurface extends StatelessWidget {
final double blurSigma;
final Color? glowColor;
/// See class doc — `false` (opaque `listSurface`) is the system default.
final bool glass;
@override
Widget build(BuildContext context) {
final t = context.pluriTokens;
final radius = borderRadius ?? BorderRadius.circular(t.radiusMd);
final decoratedChild = DecoratedBox(
decoration: BoxDecoration(
color: glass ? t.glassSurface : t.listSurface,
borderRadius: radius,
border: Border.all(
color: glass ? t.glassBorder : Colors.white.withValues(alpha: 0.07),
),
boxShadow:
glass
? [
BoxShadow(
color: glowColor ?? t.glowColor.withValues(alpha: 0.12),
blurRadius: 30,
spreadRadius: -14,
offset: const Offset(0, 18),
),
]
: null,
),
child: Padding(padding: padding, child: child),
);
if (!glass) {
return RepaintBoundary(
child: ClipRRect(borderRadius: radius, child: decoratedChild),
);
}
return RepaintBoundary(
child: ClipRRect(
borderRadius: radius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: blurSigma, sigmaY: blurSigma),
child: DecoratedBox(
decoration: BoxDecoration(
color: t.glassSurface,
borderRadius: radius,
border: Border.all(color: t.glassBorder),
boxShadow: [
BoxShadow(
color: glowColor ?? t.glowColor.withValues(alpha: 0.12),
blurRadius: 30,
spreadRadius: -14,
offset: const Offset(0, 18),
),
],
),
child: Padding(padding: padding, child: child),
),
child: decoratedChild,
),
),
);
+4 -1
View File
@@ -65,8 +65,11 @@ class _TarjetaEmisoraState extends State<TarjetaEmisora> {
label: l10n.stationSemanticLabel(stationName),
child: PluriGlassSurface(
padding: EdgeInsets.zero,
// S4 (Tier 1 visual fidelity): compact (esCompacta) is a flat-list
// ROW — prototype dominant row radius 14 (t4 lines 175, 227, 302).
// The full grid card keeps the dominant CARD radius, 18.
borderRadius: BorderRadius.circular(
widget.esCompacta ? t.radiusMd : t.radiusLg,
widget.esCompacta ? t.radiusSm : t.radiusMd,
),
child: Material(
color: Colors.transparent,