Files
pluriwave/lib/tema/pluriwave_tokens.dart
FreeTLab 5a5f1655a9 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).
2026-07-29 20:23:55 +02:00

173 lines
6.2 KiB
Dart

import 'dart:ui' show lerpDouble;
import 'package:flutter/material.dart';
@immutable
class PluriWaveTokens extends ThemeExtension<PluriWaveTokens> {
const PluriWaveTokens({
required this.deepViolet,
required this.electricMagenta,
required this.warmCoral,
required this.glassSurface,
required this.glassBorder,
required this.glowColor,
required this.listSurface,
required this.liveGreen,
required this.offlineAccent,
required this.balloonSurface,
required this.radiusSm,
required this.radiusMd,
required this.radiusLg,
required this.spacingXs,
required this.spacingSm,
required this.spacingMd,
required this.spacingLg,
});
final Color deepViolet;
final Color electricMagenta;
final Color warmCoral;
final Color glassSurface;
final Color glassBorder;
final Color glowColor;
/// Redesign additions (Design ADR-1). Row/card surface for the flat lists
/// introduced by the redesign (Favoritos, Buscar results). De-literalised
/// from `pluriwave_theme.dart`'s previous `surfaceContainerLow` literal —
/// same value, now named — so rendered output stays byte-identical.
final Color listSurface;
/// "EN DIRECTO" indicator and the Escuchar hero's waveform colour.
/// De-literalised from `pluriwave_theme.dart`'s previous `secondary`
/// literal — same value, now named.
final Color liveGreen;
/// Offline/reconnect banner accent (WU16). Value from the proposal's WU1
/// scope line (`#E8879A`) — no prior literal in `pluriwave_theme.dart` to
/// promote, but the hex value itself is not this file's discretion.
final Color offlineAccent;
/// Solid capsule fill for the "barra globo" bottom navigation (Design turn
/// t4, option 4a — the balloon and the flat bar share this colour so their
/// union reads as a single inflated shape). No prior literal to promote —
/// new brand-system near-black distinct from [deepViolet].
final Color balloonSurface;
final double radiusSm;
/// S4 (Tier 1 visual fidelity): the prototype's dominant CARD radius —
/// `t4` lines 512, 613, 715, 133 (Ajustes group, storage card, welcome
/// CTA, tray tiles). Was 22, a systematic +4px drift versus every card
/// that defaults to this token (`PluriGlassSurface.borderRadius`).
final double radiusMd;
final double radiusLg;
final double spacingXs;
final double spacingSm;
final double spacingMd;
final double spacingLg;
/// Brand accent (S5-R8). Same hue as [electricMagenta]; exposed as a
/// static const so const contexts (e.g. AudioServiceConfig) can use it.
static const Color brand = Color(0xFF21D4D9);
/// Secondary palette used by gradients and decorative orbs (S5-R1).
/// These are token DEFINITIONS — the only place raw literals may live.
static const Color brightCyan = Color(0xFF20E6FF);
static const Color auroraTeal = Color(0xFF0E4A4F);
static const Color skyBlue = Color(0xFF60A5FA);
static const dark = PluriWaveTokens(
deepViolet: Color(0xFF07121A),
electricMagenta: brand,
warmCoral: Color(0xFFF4B860),
glassSurface: Color(0x1FFFFFFF),
glassBorder: Color(0x33FFFFFF),
glowColor: Color(0x6621D4D9),
listSurface: Color(0xFF102532),
liveGreen: Color(0xFF7EE4C2),
offlineAccent: Color(0xFFE8879A),
balloonSurface: Color(0xFF0A1B24),
radiusSm: 14,
radiusMd: 18,
radiusLg: 30,
spacingXs: 4,
spacingSm: 8,
spacingMd: 16,
spacingLg: 24,
);
@override
PluriWaveTokens copyWith({
Color? deepViolet,
Color? electricMagenta,
Color? warmCoral,
Color? glassSurface,
Color? glassBorder,
Color? glowColor,
Color? listSurface,
Color? liveGreen,
Color? offlineAccent,
Color? balloonSurface,
double? radiusSm,
double? radiusMd,
double? radiusLg,
double? spacingXs,
double? spacingSm,
double? spacingMd,
double? spacingLg,
}) {
return PluriWaveTokens(
deepViolet: deepViolet ?? this.deepViolet,
electricMagenta: electricMagenta ?? this.electricMagenta,
warmCoral: warmCoral ?? this.warmCoral,
glassSurface: glassSurface ?? this.glassSurface,
glassBorder: glassBorder ?? this.glassBorder,
glowColor: glowColor ?? this.glowColor,
listSurface: listSurface ?? this.listSurface,
liveGreen: liveGreen ?? this.liveGreen,
offlineAccent: offlineAccent ?? this.offlineAccent,
balloonSurface: balloonSurface ?? this.balloonSurface,
radiusSm: radiusSm ?? this.radiusSm,
radiusMd: radiusMd ?? this.radiusMd,
radiusLg: radiusLg ?? this.radiusLg,
spacingXs: spacingXs ?? this.spacingXs,
spacingSm: spacingSm ?? this.spacingSm,
spacingMd: spacingMd ?? this.spacingMd,
spacingLg: spacingLg ?? this.spacingLg,
);
}
@override
PluriWaveTokens lerp(
covariant ThemeExtension<PluriWaveTokens>? other,
double t,
) {
if (other is! PluriWaveTokens) return this;
return PluriWaveTokens(
deepViolet: Color.lerp(deepViolet, other.deepViolet, t) ?? deepViolet,
electricMagenta:
Color.lerp(electricMagenta, other.electricMagenta, t) ??
electricMagenta,
warmCoral: Color.lerp(warmCoral, other.warmCoral, t) ?? warmCoral,
glassSurface:
Color.lerp(glassSurface, other.glassSurface, t) ?? glassSurface,
glassBorder: Color.lerp(glassBorder, other.glassBorder, t) ?? glassBorder,
glowColor: Color.lerp(glowColor, other.glowColor, t) ?? glowColor,
listSurface: Color.lerp(listSurface, other.listSurface, t) ?? listSurface,
liveGreen: Color.lerp(liveGreen, other.liveGreen, t) ?? liveGreen,
offlineAccent:
Color.lerp(offlineAccent, other.offlineAccent, t) ?? offlineAccent,
balloonSurface:
Color.lerp(balloonSurface, other.balloonSurface, t) ?? balloonSurface,
radiusSm: lerpDouble(radiusSm, other.radiusSm, t) ?? radiusSm,
radiusMd: lerpDouble(radiusMd, other.radiusMd, t) ?? radiusMd,
radiusLg: lerpDouble(radiusLg, other.radiusLg, t) ?? radiusLg,
spacingXs: lerpDouble(spacingXs, other.spacingXs, t) ?? spacingXs,
spacingSm: lerpDouble(spacingSm, other.spacingSm, t) ?? spacingSm,
spacingMd: lerpDouble(spacingMd, other.spacingMd, t) ?? spacingMd,
spacingLg: lerpDouble(spacingLg, other.spacingLg, t) ?? spacingLg,
);
}
}