btcpayserver-design
btcpayserver-design copied to clipboard
Add translucent badge option
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%
Assuming we don't switch any of these colors depending on the mode...
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.
Alternatively, if we go with the 200 variant background-color, full opacity. I don't like it as much, but this could work.
A)
Playing around with colors a bit more...
B)
and full circle...with the full colors...for reference
Updated it and removed the Light/Dark/Secondary variants.