[Design bug] Should all cards have a dropshadow?

[bdougie]

Curious if this is an oversight or intentional @pixelsbyeryc. While looking at @chadstewart's PR preview I saw the Dropshadow on the Select Tables but not on the HighlightCard.

Card with echart

Card with SelectTable

HighlightCard

[chadstewart]

I was probably an oversight on my end. When I initially implemented the card, I used css that had a drop shadow. I'll remove it in the PR I'm working on now.

[eryc-cc]

We might have drop shadows if it makes sense... The latest mockup I did for the Opinionated Filters #58 has them. But the other versions don't.

Since we're still figuring out the looks and styles, I'd remove them all for now, and then we can implement it later.

Below you can see a comparison 👇

[chadstewart]

Not gonna lie, I'm definitely a +1 for the drop shadows. Gives the components depth which is nice.

[eryc-cc]

It's all about how we use colors across the page... If it's white on white, it doesn't look good. It looks cluttered, or old. A great example is this page. It's mostly white, so they're using borders to separate, and it looks clean.

If we have a white background for the components, and a gray background for the page, it looks nice — which is what I did there trying out the new version

[chadstewart]

Definitely agree with that. Interesting question though, how will we implement dark mode? Wouldn't the inverse be true with black on black pages?

[eryc-cc]

On dark mode, we'll use shades of gray to make the data look closer to the screen. Shadows won't bee too apparent, but it'll look right. 🤞

Something else we can think about is implementing some oranges, or gradients to make it look more modern and shiny, like the designs for the Onboarding Flow. See #68.

With Radix Colors, we have color steps (slate-1, slate-2) for both light and dark mode. I'd love to use those, so we don't have to style components individually for both scenarios. Radix Colors takes care of that. See: #56

When you switch from light to dark, the steps stay the same: background is slate-01? It will continue to be slate-01. We can try to change the CSS variables for this effect to take place. ✨ I wrote about this in #56

[chadstewart]

I'll need to read up a bit on how to implement dark mode cause I personally haven't done it before. Open Sauced has dark mode implemented and I think there's articles on that specific implementation so I'll start there.

[chadstewart]

Closed by way of #81