epam / UUI

React-based components and accelerators library built by EPAM Systems.
https://uui.epam.com/
MIT License
162 stars 62 forks source link

[Button]: Align white buttons according to design. Add white buttons to all themes #2174

Closed DzmitryTrubchyk closed 1 month ago

DzmitryTrubchyk commented 2 months ago

Find design here

image

Loveship Light, Promo, Electric:

image

"button-white": { "button-bg-color": { "value": "{core.neutral.neutral-0}", "type": "color" }, "button-bg-color-hover": { "value": "{core.neutral.neutral-10}", "type": "color" }, "button-bg-color-active": { "value": "{core.neutral.neutral-30}", "type": "color" }, "button-bg-color-halftone": { "value": "rgba({core.neutral.neutral-0}, 15%)", "type": "color" }, "button-bg-color-halftone-hover": { "value": "rgba({core.neutral.neutral-0}, 22%)", "type": "color" }, "button-bg-color-halftone-active": { "value": "rgba({core.neutral.neutral-0}, 29%)", "type": "color" }, "button-border-color": { "value": "{core.neutral.neutral-0}", "type": "color" }, "button-border-color-hover": { "value": "{core.neutral.neutral-0}", "type": "color" }, "button-border-color-active": { "value": "{core.neutral.neutral-0}", "type": "color" }, "button-bg-color-disabled": { "value": "rgba({core.neutral.neutral-0}, 10%)", "type": "color" }, "button-border-color-disabled": { "value": "rgba({core.neutral.neutral-0}, 30%)", "type": "color" }, "button-caption-color": { "value": "{core.neutral.neutral-70}", "type": "color" }, "button-caption-halftone-color": { "value": "{core.neutral.neutral-0}", "type": "color" }, "button-caption-color-disabled": { "value": "rgba({core.neutral.neutral-0}, 40%)", "type": "color" } }

Loveship Dark:

image

"button-white": { "button-bg-color": { "value": "{core.neutral.neutral-0}", "type": "color" }, "button-bg-color-hover": { "value": "{core.neutral.neutral-10}", "type": "color" }, "button-bg-color-active": { "value": "{core.neutral.neutral-20}", "type": "color" }, "button-bg-color-halftone": { "value": "rgba({core.neutral.neutral-0}, 15%)", "type": "color" }, "button-bg-color-halftone-hover": { "value": "rgba({core.neutral.neutral-0}, 22%)", "type": "color" }, "button-bg-color-halftone-active": { "value": "rgba({core.neutral.neutral-0}, 29%)", "type": "color" }, "button-border-color": { "value": "{core.neutral.neutral-0}", "type": "color" }, "button-border-color-hover": { "value": "{core.neutral.neutral-0}", "type": "color" }, "button-border-color-active": { "value": "{core.neutral.neutral-0}", "type": "color" }, "button-bg-color-disabled": { "value": "rgba({core.neutral.neutral-0}, 10%)", "type": "color" }, "button-border-color-disabled": { "value": "rgba({core.neutral.neutral-0}, 30%)", "type": "color" }, "button-caption-color": { "value": "{core.neutral.neutral-70}", "type": "color" }, "button-caption-halftone-color": { "value": "{core.neutral.neutral-0}", "type": "color" }, "button-caption-color-disabled": { "value": "rgba({core.neutral.neutral-0}, 40%)", "type": "color" } },

NatalliaAlieva commented 1 month ago

Released in 5.8.0 ver.