btcpayserver / btcpayserver-design

BTCPay Server Design System
https://design.btcpayserver.org/
23 stars 10 forks source link

Add translucent badge option #64

Closed dennisreimann closed 2 months ago

dennisreimann commented 7 months ago

In addition to the standard badges (first row), this adds a translucent version with background opacity (second row):

grafik

dstrukt commented 4 months ago

Assuming we don't switch any of these colors depending on the mode...

Screen Shot 2024-04-24 at 12 57 26 PM

Which makes me wonder if we should kill the Light/Dark/Secondary variants, but if we did this, it begs the question if the the more translucent variations aren't suitable, and i'll need to do a 100% opacity of the lighter value .. might explore this quickly.

Changes:

I think about covers it.

dstrukt commented 4 months ago

Alternatively, if we go with the 200 variant background-color, full opacity. I don't like it as much, but this could work. A)

Screen Shot 2024-04-24 at 8 58 06 PM

Playing around with colors a bit more... B)

Screen Shot 2024-04-24 at 9 04 57 PM

and full circle...with the full colors...for reference

Screen Shot 2024-04-24 at 9 11 10 PM
dennisreimann commented 4 months ago

Updated it and removed the Light/Dark/Secondary variants.