c94504247f
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>
90 lines
2.3 KiB
Dart
90 lines
2.3 KiB
Dart
// 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,
|
|
);
|
|
}
|
|
}
|
|
}
|