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:
parent
5313266cc4
commit
f0a944dce7
4 changed files with 261 additions and 146 deletions
|
|
@ -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._();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue