fix(layout): introduce the prototype's 3-tier horizontal padding scale

The prototype runs three horizontal padding tiers (t4): 20px for
section titles/eyebrows (lines 153, 254, 299, 511), 16px for cards
(lines 327, 512, 610), 12px for background-less list rows (lines 174,
226, 301). The build had collapsed all three into a single
PluriLayout.horizontal = 16, used everywhere regardless of context.

Add PluriLayout.titleHorizontal (20) and PluriLayout.rowHorizontal
(12) alongside the existing `horizontal` (16, unchanged -- it already
covers the card tier). horizontal keeps every one of its ~30 existing
call sites unchanged.

Committed ahead of S2 (item 6 in this pass) because that item's
PluriRootHeader edit reuses titleHorizontal/rowHorizontal for the
header's own padding, matching the prototype's own header spec exactly
(e.g. Alarmas padding:0 12px 0 20px) -- a real dependency, not just
numbering.

S5, Tier 1 visual-fidelity pass (audit id 2521).
This commit is contained in:
2026-07-29 21:28:48 +02:00
parent e0164f68b5
commit 7ebe0b77a4
2 changed files with 44 additions and 0 deletions
+15
View File
@@ -5,7 +5,16 @@ import 'mini_reproductor.dart';
import 'pluri_bottom_navigation.dart';
abstract final class PluriLayout {
// S5 (Tier 1 visual fidelity): the prototype (`t4`) runs a 3-tier
// horizontal padding scale — 20px for section titles/eyebrows (lines
// 153, 254, 299, 511), 16px for cards (lines 327, 512, 610), 12px for
// background-less list rows (lines 174, 226, 301). [horizontal] IS the
// card tier — its value and every existing call site stay unchanged;
// [titleHorizontal] and [rowHorizontal] are new.
static const double titleHorizontal = 20;
static const double horizontal = 16;
static const double rowHorizontal = 12;
static const double sectionGap = 12;
static const double panelGap = 12;
static const double compactGap = 8;
@@ -36,6 +45,12 @@ abstract final class PluriLayout {
horizontal: horizontal,
);
/// S5: the title/eyebrow tier's own content padding — e.g. a section
/// heading living directly on the page background, outside any card.
static const EdgeInsets titleContentPadding = EdgeInsets.symmetric(
horizontal: titleHorizontal,
);
static const EdgeInsets sheetPadding = EdgeInsets.all(18);
}
+29
View File
@@ -0,0 +1,29 @@
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:pluriwave/widgets/pluri_layout.dart';
/// S5 (Tier 1 visual fidelity): the prototype runs a 3-tier horizontal
/// padding scale (`t4`) — 20px for section titles/eyebrows (lines 153, 254,
/// 299, 511), 16px for cards (lines 327, 512, 610), 12px for
/// background-less list rows (lines 174, 226, 301). The build had
/// collapsed all three into a single `PluriLayout.horizontal = 16`.
void main() {
test('titleHorizontal is 20 — the prototype\'s title/eyebrow tier', () {
expect(PluriLayout.titleHorizontal, 20);
});
test('horizontal (the card tier) stays 16 — unchanged', () {
expect(PluriLayout.horizontal, 16);
});
test('rowHorizontal is 12 — the prototype\'s background-less row tier', () {
expect(PluriLayout.rowHorizontal, 12);
});
test('titleContentPadding is symmetric horizontal titleHorizontal', () {
expect(
PluriLayout.titleContentPadding,
const EdgeInsets.symmetric(horizontal: PluriLayout.titleHorizontal),
);
});
}