Files
tasq/lib/theme/app_surfaces.dart
T
redz1029 57377b1b21 UI: Cyber/IT design overhaul with semantic status tokens (Material 3)
Re-theme TasQ with a refined enterprise "Cyber/IT" identity on Material 3.
Functionality is unchanged — only color/shape tokens and a few state widgets.

Foundation:
- Hand-tuned light + dark ColorSchemes (deep-slate surfaces, azure/teal/violet
  accents), tightened 12-16dp shape language, flat hairline-outlined cards.
- New AppStatusColors theme extension (success/warning/danger/info/neutral,
  per-brightness) replacing scattered raw Colors.green/orange/red/grey so status
  color is consistent and legible in dark mode.
- New TechChip mono primitive; StatusPill.kind; M3Card hairline variants;
  tightened AppSurfaces radii.

Per-screen:
- Tokenized status colors + radii across dashboard, tickets, tasks, IT service
  requests, attendance, whereabouts, network map, reports charts, auth, and
  shared/admin screens. Added _ticketStatusKind/_taskStatusKind/_isrStatusKind
  mappers so status carries meaning consistently.
- Fixed white pie-slice borders for dark mode; dropped ad-hoc dialog radius
  overrides in favor of the theme default. Categorical palettes (leave-type
  icons, team color picker, distribution charts) intentionally preserved.

Verified: flutter analyze lib clean; flutter build web green; visual QA in
light and dark (dashboard, tickets, attendance).

Co-Authored-By: claude-flow <ruv@ruv.net>
2026-09-26 15:13:47 +08:00

93 lines
2.9 KiB
Dart
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import 'package:flutter/material.dart';
/// Cyber/IT surface tokens.
///
/// Cards use **tonal elevation** (color tints) plus a hairline outline instead
/// of drop-shadows. The shape language is tightened to a precise 12–16 dp
/// technical feel: standard cards 12 dp, compact items 10 dp, large containers
/// 16 dp, dialogs/sheets 20 dp, and chips/badges 8 dp.
@immutable
class AppSurfaces extends ThemeExtension<AppSurfaces> {
const AppSurfaces({
required this.cardRadius,
required this.compactCardRadius,
required this.containerRadius,
required this.dialogRadius,
required this.chipRadius,
});
/// Standard card radius – 12 dp (cyber/IT medium shape).
final double cardRadius;
/// Compact card radius for dense list tiles – 10 dp.
final double compactCardRadius;
/// Large container radius – 16 dp.
final double containerRadius;
/// Dialog / bottom-sheet radius – 20 dp.
final double dialogRadius;
/// Chip / badge radius – 8 dp.
final double chipRadius;
// convenience shapes
RoundedRectangleBorder get standardShape =>
RoundedRectangleBorder(borderRadius: BorderRadius.circular(cardRadius));
RoundedRectangleBorder get compactShape => RoundedRectangleBorder(
borderRadius: BorderRadius.circular(compactCardRadius),
);
RoundedRectangleBorder get containerShape => RoundedRectangleBorder(
borderRadius: BorderRadius.circular(containerRadius),
);
RoundedRectangleBorder get dialogShape =>
RoundedRectangleBorder(borderRadius: BorderRadius.circular(dialogRadius));
static AppSurfaces of(BuildContext context) {
final ext = Theme.of(context).extension<AppSurfaces>();
return ext ??
const AppSurfaces(
cardRadius: 12,
compactCardRadius: 10,
containerRadius: 16,
dialogRadius: 20,
chipRadius: 8,
);
}
@override
AppSurfaces copyWith({
double? cardRadius,
double? compactCardRadius,
double? containerRadius,
double? dialogRadius,
double? chipRadius,
}) {
return AppSurfaces(
cardRadius: cardRadius ?? this.cardRadius,
compactCardRadius: compactCardRadius ?? this.compactCardRadius,
containerRadius: containerRadius ?? this.containerRadius,
dialogRadius: dialogRadius ?? this.dialogRadius,
chipRadius: chipRadius ?? this.chipRadius,
);
}
@override
AppSurfaces lerp(ThemeExtension<AppSurfaces>? other, double t) {
if (other is! AppSurfaces) return this;
return AppSurfaces(
cardRadius: _lerpDouble(cardRadius, other.cardRadius, t),
compactCardRadius: _lerpDouble(
compactCardRadius,
other.compactCardRadius,
t,
),
containerRadius: _lerpDouble(containerRadius, other.containerRadius, t),
dialogRadius: _lerpDouble(dialogRadius, other.dialogRadius, t),
chipRadius: _lerpDouble(chipRadius, other.chipRadius, t),
);
}
}
double _lerpDouble(double a, double b, double t) => a + (b - a) * t;