fix(sidebar): home tile uses brand lavender, not neutral grey
Translucent white over the cool-dark sidebar reads as muddy grey; that's the same root cause as the earlier #1d1d1b warm-grey complaint. Any unsaturated tint loses against the dark sidebar bg. Switching the home tile to accent-lavender (RGB 196,181,253 — the endpoint of the mark's gradient) breaks the grey because saturation defeats the grey-on-grey muddiness. Lavender also (a) complements the gradient mark sitting on top, (b) parallels Discord's brand- coloured home button pattern, and (c) gives the sidebar a clear semantic colour hierarchy: action = mint, home = lavender (brand), spaces = user-defined. Three states escalate by alpha (0.08 / 0.16 / 0.28) so corner-morph and fill-brightness both signal interaction.
This commit is contained in:
@@ -79,17 +79,20 @@ function SidebarItem({ id, name, icon, avatarColor, active, onClick, onContextMe
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (type === 'dm') {
|
if (type === 'dm') {
|
||||||
// Home tile uses a translucent white surface so the squircle→square
|
// Home tile uses brand-tinted lavender (the endpoint of the mark's
|
||||||
// corner-radius transition has something visible to morph. The bare
|
// gradient — see assets/brand/mark.svg) so the bg is on-brand and
|
||||||
// mark in logo.png is centred with internal padding (transparent
|
// visibly NOT grey against the cool-dark sidebar (any neutral tint
|
||||||
// outside ~75% scale), so without a button background there is no
|
// reads as muddy grey-on-dark; only saturation breaks the grey).
|
||||||
// visible hover/active feedback at all.
|
// Discord's home button uses brand blurple the same way; ours uses
|
||||||
|
// accent-lavender. The bare mark in logo.png sits at 75% scale on
|
||||||
|
// transparent so the lavender tile is the visible frame, escalating
|
||||||
|
// at rest → hover → active for clear interaction feedback.
|
||||||
return {
|
return {
|
||||||
background: active
|
background: active
|
||||||
? 'rgba(255, 255, 255, 0.10)'
|
? 'rgba(196, 181, 253, 0.28)'
|
||||||
: isHovered
|
: isHovered
|
||||||
? 'rgba(255, 255, 255, 0.07)'
|
? 'rgba(196, 181, 253, 0.16)'
|
||||||
: 'rgba(255, 255, 255, 0.04)',
|
: 'rgba(196, 181, 253, 0.08)',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user