Closed vpetrusevici closed 1 year ago
Hi, @json-derulo @johannesjo Should I create a separate issue for this or it's enough?
Thanks for opening this up. Could you please provide a bit more details on how you are using the library and what exactly is not working currently in your project? In the demo application I see no issues. I am asking so we can hopefully prevent such issues in future.
Yep. In demo application you can't see issues because angular service overrides variables to correct format. If you disable service and will use only default scss values it will not work because of different values format. In service it will be like rgb(222,222,111), but in scss only 222,222,111.
I noticed it because i didn't use service to override warn colors, so after update these colors have invalid format in material components. like color: var(--warn-pallete-500) where --warn-pallete-500 has format without "rgb()" just numbers.
If you try my fix you won't see the difference in demo either until you disable the service.
Also you have values like --palette-primary-contrast-A700-rgb: rgba(var(--light-primary-text)) but it already was rgba in $light-primary-text: rgba(255, 255, 255, 1) --light-primary-text: $light-primary-text
Thanks for clarification. Definitely it's a bug introduced with v5 that needs to be fixed. I will have a closer look to your changes later today.
Description
Hi! I noticed huge difference between formats in ts service and default scss variables. You use rgb format like "rgb(222, 222, 222)" for vars without suffix (-rgb or -no-rgb) in service, but format like "222, 222, 222" in scss default variant. I spent some time to figured out why primary and accent works well, but warn not in my project, and this is the reason.
Issues Resolved
scss vars and angular service have the same values formats now. (Changed on scss side)
As workarond for now, we can provide own values, but it's better to have correct values by default :)
Check List