Add variable for button border-radius

[komarovalexander]

Hi Team, thanks for your work, like it.

can I ask you to add a css variable for button border-radius

I have fixed button and I don't need it to have opacity, to solve that I think to add an placeholder with my background color under it, but as you can see radius can be different, so would be usefull to have it as separate variable and just reuse in my code

Thanks!

[mainsmirnov]

Hi, thank you for your issue. I think it's wrong way to customize single component. I would recommend pass custom class to your Button, you can also make proxy component

[komarovalexander]

@mainsmirnov I would prefer to use --tgui-- variables to make button background-color change by theme change and not override theme and library colors. The issue is that button bezeled (which uses --tgui--accent_text_color as a background color) has background-color opacity - but I don't need opacity when it is fixed. here you can see alpha of the background-color of 'bezeled' button:

the same issue with disabled button, it has opacity 0.35 itself that makes button opacity issue is even worse

maybe ideally it is better not to make opacity on buttons and its backgrounds to avoid that, but it is how TelegramUI buttons work now. And in that case not transparent placeholder under the button is the solution to get rid from opacity under the fixed button

[komarovalexander]

here is an example of the issue, content is visible under the button because of opacity:

[komarovalexander]

and this is example what is expected:

but border radius of buttons is different based on platform, would be good to get it without any dom manipulations, css variable would be good solution

[komarovalexander]

Although using color-mix is also a solution to get rid from placeholder, color-mix(in srgb, var(--tgui--accent_text_color) 10%, var(--tgui--bg_color)) but it did not fix disabled opacity issues (like disabled opacity and so on), and developer need to customize a lot of styles for each state. So placeholder looks the best solution still