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
parent
127c497f73
commit
c94504247f
23 changed files with 1951 additions and 468 deletions
236
lib/theme/theme.dart
Normal file
236
lib/theme/theme.dart
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
// Theme assembly. ColorScheme + typography + component themes.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
|
||||
import 'tokens.dart';
|
||||
|
||||
class FaiTheme {
|
||||
FaiTheme._();
|
||||
|
||||
/// Inter for UI, JetBrains Mono for technical strings (IDs,
|
||||
/// paths, capability refs). Both via google_fonts so they
|
||||
/// bundle on first run; for production we'd ship them as
|
||||
/// app assets.
|
||||
static TextTheme _textTheme(Brightness b) {
|
||||
final base = b == Brightness.dark
|
||||
? Typography.whiteCupertino
|
||||
: Typography.blackCupertino;
|
||||
return GoogleFonts.interTextTheme(base).copyWith(
|
||||
displaySmall: GoogleFonts.inter(
|
||||
fontSize: 28,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -0.4,
|
||||
),
|
||||
headlineSmall: GoogleFonts.inter(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -0.2,
|
||||
),
|
||||
titleMedium: GoogleFonts.inter(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0,
|
||||
),
|
||||
titleSmall: GoogleFonts.inter(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
bodyLarge: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w400,
|
||||
height: 1.45,
|
||||
),
|
||||
bodyMedium: GoogleFonts.inter(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w400,
|
||||
height: 1.4,
|
||||
),
|
||||
bodySmall: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w400,
|
||||
height: 1.4,
|
||||
),
|
||||
labelMedium: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
labelSmall: GoogleFonts.inter(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w500,
|
||||
letterSpacing: 0.2,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// JetBrains Mono for monospaced technical content. Used by
|
||||
/// FaiMono helper.
|
||||
static TextStyle mono({
|
||||
double size = 12,
|
||||
FontWeight weight = FontWeight.w400,
|
||||
Color? color,
|
||||
}) =>
|
||||
GoogleFonts.jetBrainsMono(
|
||||
fontSize: size,
|
||||
fontWeight: weight,
|
||||
color: color,
|
||||
height: 1.4,
|
||||
);
|
||||
|
||||
static ThemeData dark() {
|
||||
final scheme = ColorScheme(
|
||||
brightness: Brightness.dark,
|
||||
primary: FaiColors.accent,
|
||||
onPrimary: FaiColors.black,
|
||||
primaryContainer: FaiColors.accentMuted,
|
||||
onPrimaryContainer: FaiColors.textStrong,
|
||||
secondary: FaiColors.accentDeep,
|
||||
onSecondary: FaiColors.black,
|
||||
secondaryContainer: FaiColors.surfaceHigh,
|
||||
onSecondaryContainer: FaiColors.text,
|
||||
tertiary: FaiColors.accent,
|
||||
onTertiary: FaiColors.black,
|
||||
tertiaryContainer: FaiColors.surfaceHigh,
|
||||
onTertiaryContainer: FaiColors.text,
|
||||
error: FaiColors.danger,
|
||||
onError: FaiColors.textStrong,
|
||||
errorContainer: const Color(0xFF3F1518),
|
||||
onErrorContainer: const Color(0xFFFCA5A5),
|
||||
surface: FaiColors.black,
|
||||
onSurface: FaiColors.text,
|
||||
onSurfaceVariant: FaiColors.muted,
|
||||
outline: FaiColors.border,
|
||||
outlineVariant: FaiColors.border,
|
||||
surfaceContainerLowest: FaiColors.black,
|
||||
surfaceContainerLow: FaiColors.surface,
|
||||
surfaceContainer: FaiColors.surface,
|
||||
surfaceContainerHigh: FaiColors.surfaceHigh,
|
||||
surfaceContainerHighest: FaiColors.surfaceHigh,
|
||||
);
|
||||
return _build(scheme);
|
||||
}
|
||||
|
||||
static ThemeData light() {
|
||||
final scheme = ColorScheme(
|
||||
brightness: Brightness.light,
|
||||
primary: FaiColors.accentDeep,
|
||||
onPrimary: FaiColors.lightSurface,
|
||||
primaryContainer: const Color(0xFFE0F2FE),
|
||||
onPrimaryContainer: FaiColors.accentMuted,
|
||||
secondary: FaiColors.accentMuted,
|
||||
onSecondary: FaiColors.lightSurface,
|
||||
secondaryContainer: FaiColors.lightSurfaceHigh,
|
||||
onSecondaryContainer: FaiColors.lightText,
|
||||
tertiary: FaiColors.accentDeep,
|
||||
onTertiary: FaiColors.lightSurface,
|
||||
tertiaryContainer: const Color(0xFFE0F2FE),
|
||||
onTertiaryContainer: FaiColors.accentMuted,
|
||||
error: FaiColors.danger,
|
||||
onError: FaiColors.lightSurface,
|
||||
errorContainer: const Color(0xFFFEE2E2),
|
||||
onErrorContainer: const Color(0xFF7F1D1D),
|
||||
surface: FaiColors.lightCanvas,
|
||||
onSurface: FaiColors.lightText,
|
||||
onSurfaceVariant: FaiColors.lightMuted,
|
||||
outline: FaiColors.lightBorder,
|
||||
outlineVariant: FaiColors.lightBorder,
|
||||
surfaceContainerLowest: FaiColors.lightCanvas,
|
||||
surfaceContainerLow: FaiColors.lightSurface,
|
||||
surfaceContainer: FaiColors.lightSurface,
|
||||
surfaceContainerHigh: FaiColors.lightSurfaceHigh,
|
||||
surfaceContainerHighest: FaiColors.lightSurfaceHigh,
|
||||
);
|
||||
return _build(scheme);
|
||||
}
|
||||
|
||||
static ThemeData _build(ColorScheme scheme) {
|
||||
final textTheme = _textTheme(scheme.brightness);
|
||||
return ThemeData(
|
||||
useMaterial3: true,
|
||||
colorScheme: scheme,
|
||||
scaffoldBackgroundColor: scheme.surface,
|
||||
textTheme: textTheme,
|
||||
primaryTextTheme: textTheme,
|
||||
appBarTheme: AppBarTheme(
|
||||
backgroundColor: scheme.surface,
|
||||
foregroundColor: scheme.onSurface,
|
||||
elevation: 0,
|
||||
scrolledUnderElevation: 0,
|
||||
centerTitle: false,
|
||||
titleTextStyle: textTheme.headlineSmall,
|
||||
toolbarHeight: 64,
|
||||
),
|
||||
cardTheme: CardThemeData(
|
||||
color: scheme.surfaceContainer,
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(FaiRadius.md),
|
||||
side: BorderSide(color: scheme.outlineVariant),
|
||||
),
|
||||
margin: EdgeInsets.zero,
|
||||
),
|
||||
filledButtonTheme: FilledButtonThemeData(
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: scheme.primary,
|
||||
foregroundColor: scheme.onPrimary,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(FaiRadius.sm),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: FaiSpace.lg,
|
||||
vertical: FaiSpace.md,
|
||||
),
|
||||
textStyle: textTheme.labelMedium,
|
||||
animationDuration: FaiMotion.fast,
|
||||
),
|
||||
),
|
||||
outlinedButtonTheme: OutlinedButtonThemeData(
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: scheme.onSurface,
|
||||
side: BorderSide(color: scheme.outline),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(FaiRadius.sm),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: FaiSpace.lg,
|
||||
vertical: FaiSpace.md,
|
||||
),
|
||||
textStyle: textTheme.labelMedium,
|
||||
animationDuration: FaiMotion.fast,
|
||||
),
|
||||
),
|
||||
iconButtonTheme: IconButtonThemeData(
|
||||
style: IconButton.styleFrom(
|
||||
foregroundColor: scheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
navigationRailTheme: NavigationRailThemeData(
|
||||
backgroundColor: scheme.surfaceContainerLow,
|
||||
indicatorColor: scheme.primaryContainer,
|
||||
selectedIconTheme: IconThemeData(color: scheme.primary, size: 22),
|
||||
unselectedIconTheme:
|
||||
IconThemeData(color: scheme.onSurfaceVariant, size: 22),
|
||||
selectedLabelTextStyle:
|
||||
textTheme.labelMedium?.copyWith(color: scheme.primary),
|
||||
unselectedLabelTextStyle: textTheme.labelMedium
|
||||
?.copyWith(color: scheme.onSurfaceVariant),
|
||||
useIndicator: true,
|
||||
),
|
||||
dividerColor: scheme.outlineVariant,
|
||||
dividerTheme: DividerThemeData(
|
||||
color: scheme.outlineVariant,
|
||||
thickness: 1,
|
||||
space: 1,
|
||||
),
|
||||
snackBarTheme: SnackBarThemeData(
|
||||
backgroundColor: scheme.surfaceContainerHigh,
|
||||
contentTextStyle:
|
||||
textTheme.bodyMedium?.copyWith(color: scheme.onSurface),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(FaiRadius.sm),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
71
lib/theme/tokens.dart
Normal file
71
lib/theme/tokens.dart
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
// Design tokens for F∆I Studio.
|
||||
//
|
||||
// One file, semantic names, no magic numbers in the rest of the
|
||||
// codebase. Both light and dark modes derive from these tokens.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// Colour palette. Single strong accent (F∆I Cyan) plus neutral
|
||||
/// greys. Status colours stay restrained — no candy palette.
|
||||
class FaiColors {
|
||||
FaiColors._();
|
||||
|
||||
// Brand accent. Slightly cooler / more saturated than the
|
||||
// initial #1E3A8A — this reads more as "deep tech, alive"
|
||||
// than the previous corporate navy.
|
||||
static const accent = Color(0xFF38BDF8); // sky-400 / cyan
|
||||
static const accentDeep = Color(0xFF0EA5E9); // sky-500
|
||||
static const accentMuted = Color(0xFF0369A1); // sky-700
|
||||
|
||||
// Semantic status. Used sparingly: tones, not flat fills.
|
||||
static const success = Color(0xFF22C55E); // green-500
|
||||
static const warning = Color(0xFFF59E0B); // amber-500
|
||||
static const danger = Color(0xFFEF4444); // red-500
|
||||
|
||||
// Neutral scale. Dark-mode first.
|
||||
static const black = Color(0xFF09090B); // canvas
|
||||
static const surface = Color(0xFF18181B); // cards
|
||||
static const surfaceHigh = Color(0xFF27272A); // elevated
|
||||
static const border = Color(0xFF3F3F46); // 1px outlines
|
||||
static const muted = Color(0xFF71717A); // de-emphasised text
|
||||
static const text = Color(0xFFE4E4E7); // body
|
||||
static const textStrong = Color(0xFFFAFAFA); // headings
|
||||
|
||||
// Light-mode neutrals. Calmer than pure white.
|
||||
static const lightCanvas = Color(0xFFFAFAFA);
|
||||
static const lightSurface = Color(0xFFFFFFFF);
|
||||
static const lightSurfaceHigh = Color(0xFFF4F4F5);
|
||||
static const lightBorder = Color(0xFFE4E4E7);
|
||||
static const lightMuted = Color(0xFF71717A);
|
||||
static const lightText = Color(0xFF18181B);
|
||||
static const lightTextStrong = Color(0xFF09090B);
|
||||
}
|
||||
|
||||
/// Spacing scale. Stick to multiples of 4. Keep the vocabulary
|
||||
/// small — six steps cover everything.
|
||||
class FaiSpace {
|
||||
FaiSpace._();
|
||||
static const xs = 4.0;
|
||||
static const sm = 8.0;
|
||||
static const md = 12.0;
|
||||
static const lg = 16.0;
|
||||
static const xl = 24.0;
|
||||
static const xxl = 32.0;
|
||||
static const xxxl = 48.0;
|
||||
}
|
||||
|
||||
/// Border radii. Two sizes only.
|
||||
class FaiRadius {
|
||||
FaiRadius._();
|
||||
static const sm = 6.0;
|
||||
static const md = 10.0;
|
||||
}
|
||||
|
||||
/// Animation durations. Keep them under 300ms for power-user feel.
|
||||
class FaiMotion {
|
||||
FaiMotion._();
|
||||
static const fast = Duration(milliseconds: 120);
|
||||
static const base = Duration(milliseconds: 200);
|
||||
static const slow = Duration(milliseconds: 320);
|
||||
static const easing = Curves.easeOutCubic;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue