feat(studio): award-tier visual polish

Brightness-aware elevation tokens (FaiElevation low/medium) applied
to cards, sheets and the sidebar active item; gentle hover-lift on
Store + Doc cards; a longer, eased sidebar expand using the
under-used FaiMotion.slow; and a branded empty state carrying the
F∆I delta mark with warmer spacing. Subtle, Linear/Raycast-style —
both light and dark themes tuned.

Signed-off-by: flemming-it <stefan.a.flemming@googlemail.com>
This commit is contained in:
flemming-it 2026-06-11 23:52:31 +02:00
parent 5313266cc4
commit f0a944dce7
4 changed files with 261 additions and 146 deletions

View file

@ -61,6 +61,50 @@ class FaiRadius {
static const md = 10.0;
}
/// Elevation tokens. Subtle, Linear/Raycast-style depth never
/// heavy drop-shadows. Two resting levels plus a hover bump.
/// Brightness-aware: dark themes lean on deeper, lower-alpha
/// shadows (they read as ambient occlusion against near-black
/// surfaces); light themes use softer, slightly larger spreads.
class FaiElevation {
FaiElevation._();
/// Resting elevation for cards and sheets. Just enough to lift
/// a surface off the canvas without announcing itself.
static List<BoxShadow> low(Brightness b) => b == Brightness.dark
? const [
BoxShadow(
color: Color(0x33000000),
blurRadius: 6,
offset: Offset(0, 2),
),
]
: const [
BoxShadow(
color: Color(0x14000000),
blurRadius: 8,
offset: Offset(0, 2),
),
];
/// Raised elevation for hover-lifted cards and floating sheets.
static List<BoxShadow> medium(Brightness b) => b == Brightness.dark
? const [
BoxShadow(
color: Color(0x4D000000),
blurRadius: 16,
offset: Offset(0, 6),
),
]
: const [
BoxShadow(
color: Color(0x1F000000),
blurRadius: 20,
offset: Offset(0, 8),
),
];
}
/// Animation durations. Keep them under 300ms for power-user feel.
class FaiMotion {
FaiMotion._();