fixed designs and flow
This commit is contained in:
@@ -1,8 +1,13 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
|
||||
/// KROW brand palette: 286CP blue carries every surface and action, 106CP
|
||||
/// yellow marks money and anything waiting on you, 621CP sage is the canvas.
|
||||
/// yellow marks money and anything waiting on you, and the canvas is white.
|
||||
///
|
||||
/// 621CP sage is still here, but it is a tint now rather than the ground: it
|
||||
/// fills the quiet inset blocks that would otherwise vanish against a white
|
||||
/// card.
|
||||
abstract final class KrowPalette {
|
||||
static const blue = Color(0xFF3752A8);
|
||||
static const blueDeep = Color(0xFF22366F);
|
||||
@@ -13,6 +18,18 @@ abstract final class KrowPalette {
|
||||
static const ink = Color(0xFF26353E);
|
||||
static const line = Color(0xFFCFDDD3);
|
||||
static const mute = Color(0xFF65727A);
|
||||
|
||||
/// Inert surfaces: a disabled button, an un-dragged swipe track.
|
||||
///
|
||||
/// Cool grey rather than the green-grey these used to be. That tint made
|
||||
/// sense while sage was the canvas and a disabled control was a slightly
|
||||
/// darker patch of the page; against white it reads as a colour someone
|
||||
/// chose, which is the last thing an inert control should look like.
|
||||
static const disabled = Color(0xFFDFE3E6);
|
||||
|
||||
/// The outline on an unselected control — an empty radio, an OTP box.
|
||||
/// Heavier than [line], which is only ever a hairline between rows.
|
||||
static const edge = Color(0xFFC8D0D6);
|
||||
}
|
||||
|
||||
ThemeData buildKrowTheme() {
|
||||
@@ -36,9 +53,9 @@ ThemeData buildKrowTheme() {
|
||||
useMaterial3: true,
|
||||
colorScheme: scheme,
|
||||
textTheme: text,
|
||||
scaffoldBackgroundColor: KrowPalette.sage,
|
||||
scaffoldBackgroundColor: Colors.white,
|
||||
appBarTheme: AppBarTheme(
|
||||
backgroundColor: KrowPalette.sage,
|
||||
backgroundColor: Colors.white,
|
||||
surfaceTintColor: Colors.transparent,
|
||||
foregroundColor: KrowPalette.ink,
|
||||
elevation: 0,
|
||||
@@ -58,6 +75,14 @@ ThemeData buildKrowTheme() {
|
||||
side: const BorderSide(color: KrowPalette.line),
|
||||
),
|
||||
),
|
||||
// Most detail screens use a plain AppBar, whose back button would
|
||||
// otherwise draw Material's own glyph — a full arrow on Android and web,
|
||||
// a chevron on iOS. Naming it here keeps every back button in the app the
|
||||
// same shape as the ones built by hand with HeaderIconButton.
|
||||
actionIconTheme: ActionIconThemeData(
|
||||
backButtonIconBuilder: (context) =>
|
||||
const Icon(LucideIcons.chevronLeft, size: 20),
|
||||
),
|
||||
dividerTheme: const DividerThemeData(
|
||||
color: KrowPalette.line,
|
||||
thickness: 1,
|
||||
@@ -68,7 +93,7 @@ ThemeData buildKrowTheme() {
|
||||
minimumSize: const Size.fromHeight(52),
|
||||
backgroundColor: KrowPalette.blue,
|
||||
foregroundColor: Colors.white,
|
||||
disabledBackgroundColor: const Color(0xFFD5E2D9),
|
||||
disabledBackgroundColor: KrowPalette.disabled,
|
||||
disabledForegroundColor: const Color(0xFF949FA5),
|
||||
textStyle: GoogleFonts.poppins(
|
||||
fontSize: 15,
|
||||
|
||||
Reference in New Issue
Block a user