facebookincubator / infima

A UI framework that provides websites with the minimal CSS and JS needed to get started with building a modern responsive beautiful website
https://infima.dev
MIT License
413 stars 55 forks source link

Redesign shadows #187

Open slorber opened 3 years ago

slorber commented 3 years ago

The Infima shadows are not very convenient to use currently.

The lw shadow is not very visible, and the difference between --lw and --md is huge:

image

In practice, Docusaurus almost only use --lw, so it seems safe to re-adjust other shadows

Good resource on shadow design:

slorber commented 3 years ago

We also need a way to highlight surfaces (like cards) on dark mode, as dark shadows are not very visible.

Using a scale anim does not always look good, but using a lighter background is quite common.

image

See also Material design dark mode guidelines: https://material.io/design/color/dark-theme.html#properties

slorber commented 2 years ago

Tips from Steve Schoger (Tailwind) on how to make visible shadows in dark mode: https://twitter.com/steveschoger/status/1499780803550658567