-
-
Notifications
You must be signed in to change notification settings - Fork 101
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
Improve css-variables support in sass files #52
Comments
@DanielRuf would such change make sense? |
@materializecss/members |
I think this might be overkill to introduce new shades for every usage of color functions, but I agree that this might be a good solution. I feel like this is somehow automatically feasible as long as we keep only 5 lightening and 5 darkening shades for every color. |
I’m not sure how helpful I can be with regards to colours as my preference would be to remove them altogether! No project needs access to so many colours. I actually strip out all but the base colours in my projects, and even that is bloated. In truth? We receive briefs that will choose colours outside of the ones provided my materialize, and so for some they will always be redundant. As for removing colour functions from style, I don’t know about the knock on effects but I think I’m in favour! |
@doughballs I just made a suggestion on #54 about removing colors 😉 |
Haha great minds! |
Thanks for the quick response: I run a regex match for color functions in scss folder, and these are results:
May be as a quick solution (because #54 will take some time, especially due to potential regression issues), we can refactor only these colors? |
…ariables) + adjusted hover/focus to better reflect latest material design
Hi @doughballs @Pierstoval I created a PR (#55). If you would have time for review and discussion, it would be awesome |
Co-authored-by: Alex Rock <pierstoval@gmail.com>
…riable + renamed variables for clearer name
…ariables) + adjusted hover/focus to better reflect latest material design
Co-authored-by: Alex Rock <pierstoval@gmail.com>
…riable + renamed variables for clearer name
…ariables) + adjusted hover/focus to better reflect latest material design
Co-authored-by: Alex Rock <pierstoval@gmail.com>
…tyles (moved to variables) + adjusted hover/focus to better reflect latest material design
…from non-variable file
fixed in #213 |
Hi, I'd like to propose a small sass code change (which I could implement myself if you agree), please find the rationale and suggestion below.
Use case description
I'm trying to use css variables for dynamic theme switching. To make it possible, I'd like to override materialize sass variables, e.g.:
These are my custom variables and they are taking precedence over materializecss variables. This works perfectly fine for me.
The problem
However, I cannot use
color(var(--secondary-color))
, because I'd like--secondary-color
to be kept as it is, without preprocessing. I.e. in the output css I'd like to have smth like:But without
color(...)
, there is a problem with other variables and styles, since color functions are not working:This
lighten
function fails, since it expects a color as inputFor variables, this is not a problem, since I can easily override them
However, for css styles, I wasn't able to find a way, how to make it compilable.
Suggestion
What do you think about avoiding color functions in style files and to move all of them into variables?
For the example above, with the progress bar, it would look like:
I quickly checked the code, and usually there 1-2 color functions in sass files, so this shouldn't be a big change.
What do you think?
The text was updated successfully, but these errors were encountered: