feat(ui): warm-minimalism redesign — design tokens + 6 primitives + animated ∆

Replaces the Material-default look with a deliberate visual
language. Single accent (sky-cyan), Inter + JetBrains Mono via
google_fonts, dense rows over puffy cards, micro-interactions
under 250ms. Dark-first, light reaches parity.

New foundation under lib/theme/:
- tokens.dart   FaiColors / FaiSpace / FaiRadius / FaiMotion
- theme.dart    ColorScheme + typography + component themes for
                light and dark, plus FaiTheme.mono helper for
                technical strings (IDs, paths, capability refs).

Six primitives under lib/widgets/:
- FaiCard            flat card, optional accent stripe (top or
                     left). No shadows.
- FaiPill            small inline label with five tones
                     (neutral / accent / success / warning /
                     danger), optional mono and leading icon.
- FaiStatusDot       breathing dot, used as a "live" indicator.
- FaiDataRow         Linear-style dense row for the audit
                     stream — hover-elevation, mono leading,
                     coloured leading stripe.
- FaiEmptyState      gracious icon + title + hint + action,
                     replaces "(no data)" everywhere.
- FaiDeltaMark       the ∆ signature element. Three modes —
                     idle (still), live (gentle pulse), busy
                     (slow rotation). Drawn from primitives,
                     not a font glyph. Lives in the sidebar
                     header so the brand is always visible.

Page-level changes:
- main.dart        custom 220px sidebar replaces the Material
                   NavigationRail. ∆ on top, hub-connection
                   pill below it, hover-animated destinations,
                   page transitions are 200ms slide+fade.
- modules.dart     FaiCard rows with capability pills.
- audit.dart       FaiDataRow stream, segmented filter chips,
                   live status bar with hash-chain badge.
- approvals.dart   FaiCard with accent-top stripe, structured
                   action footer, toast on approve/reject,
                   themed reject-reason dialog.

google_fonts added as dep. flutter analyze clean. flutter test
2/2. flutter build macos --debug succeeds.

Bumps fai_studio 0.2.0 -> 0.3.0.

Signed-off-by: flemming-it <stefan.a.flemming@googlemail.com>
This commit is contained in:
flemming-it 2026-05-05 21:49:37 +02:00
parent 127c497f73
commit c94504247f
23 changed files with 1951 additions and 468 deletions

90
lib/widgets/fai_pill.dart Normal file
View file

@ -0,0 +1,90 @@
// FaiPill small inline label. Used for capabilities, versions,
// permission scopes, status text. Replaces ad-hoc Container chips.
import 'package:flutter/material.dart';
import '../theme/theme.dart';
import '../theme/tokens.dart';
enum FaiPillTone {
neutral,
accent,
success,
warning,
danger,
}
class FaiPill extends StatelessWidget {
final String label;
final FaiPillTone tone;
final IconData? icon;
final bool monospace;
const FaiPill({
super.key,
required this.label,
this.tone = FaiPillTone.neutral,
this.icon,
this.monospace = false,
});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final (bg, fg) = _colors(theme.colorScheme);
final textStyle = monospace
? FaiTheme.mono(size: 11, weight: FontWeight.w500, color: fg)
: theme.textTheme.labelSmall?.copyWith(color: fg);
return Container(
padding: const EdgeInsets.symmetric(
horizontal: FaiSpace.sm,
vertical: 3,
),
decoration: BoxDecoration(
color: bg,
borderRadius: BorderRadius.circular(FaiRadius.sm),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (icon != null) ...[
Icon(icon, size: 11, color: fg),
const SizedBox(width: 4),
],
Text(label, style: textStyle),
],
),
);
}
(Color, Color) _colors(ColorScheme scheme) {
switch (tone) {
case FaiPillTone.neutral:
return (scheme.surfaceContainerHighest, scheme.onSurfaceVariant);
case FaiPillTone.accent:
return (
scheme.primary.withValues(alpha: 0.15),
scheme.primary,
);
case FaiPillTone.success:
return (
FaiColors.success.withValues(alpha: 0.15),
scheme.brightness == Brightness.dark
? FaiColors.success
: const Color(0xFF15803D),
);
case FaiPillTone.warning:
return (
FaiColors.warning.withValues(alpha: 0.15),
scheme.brightness == Brightness.dark
? FaiColors.warning
: const Color(0xFFB45309),
);
case FaiPillTone.danger:
return (
scheme.errorContainer,
scheme.onErrorContainer,
);
}
}
}