btcpayserver-design icon indicating copy to clipboard operation
btcpayserver-design copied to clipboard

Add translucent badge option

Open dennisreimann opened this issue 1 year ago • 3 comments

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

  • Text: Color Variant 700
  • Background: Full background with an opacity of 50%

grafik

dennisreimann avatar Feb 07 '24 11:02 dennisreimann

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:

  • [ ] Full background should have an opacity of 25%

  • [ ] Primary text color should be our 500 variant

  • [ ] Success text color should be our 500 variant

  • [ ] Danger text color should be our 500 variant

  • [ ] Warning text color should be our 600 variant

  • [ ] Secondary text color should be our 800 variant

  • [ ] Info text color should be our 500 variant

  • [ ] Dark text color should be our pure "white"

  • [ ] Dark background color should be our 500 variant

I think about covers it.

dstrukt avatar Apr 24 '24 20:04 dstrukt

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

dstrukt avatar Apr 25 '24 03:04 dstrukt

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

dennisreimann avatar Apr 26 '24 07:04 dennisreimann