johannesjo / angular-material-css-vars

Little library to use css variables with @angular/material
https://johannesjo.github.io/angular-material-css-vars/
MIT License
194 stars 32 forks source link

fix default variables format #137

Closed vpetrusevici closed 1 year ago

vpetrusevici commented 1 year ago

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

vpetrusevici commented 1 year ago

Hi, @json-derulo @johannesjo Should I create a separate issue for this or it's enough?

json-derulo commented 1 year ago

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.

vpetrusevici commented 1 year ago

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.

vpetrusevici commented 1 year ago

If you try my fix you won't see the difference in demo either until you disable the service.

vpetrusevici commented 1 year ago

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

json-derulo commented 1 year ago

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.