Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add variable for button border-radius #79

Open
komarovalexander opened this issue Nov 1, 2024 · 5 comments
Open

Add variable for button border-radius #79

komarovalexander opened this issue Nov 1, 2024 · 5 comments

Comments

@komarovalexander
Copy link

komarovalexander commented Nov 1, 2024

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
Copy link
Collaborator

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
Copy link
Author

komarovalexander commented Nov 1, 2024

@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:
Screenshot 2024-11-01 at 17 03 38

the same issue with disabled button, it has opacity 0.35 itself that makes button opacity issue is even worse
Screenshot 2024-11-01 at 17 06 08

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
Copy link
Author

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

@komarovalexander
Copy link
Author

komarovalexander commented Nov 1, 2024

and this is example what is expected:
image

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
Copy link
Author

komarovalexander commented Nov 1, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants