Description
Before submitting...
- I have searched for duplicate or closed issues.
- I have read the CONTRIBUTING document and my issue is following the guidelines.
- I have read the template completely before filling it in.
Context
Links appear to use the default browser color of blue rather than the $link-color color of blue defined in _variables.scss as
$link-color: colorFunc("light-blue", "darken-1") !default;
Current Behavior
It looks like colorFunc isn't being evaluated correctly and is being passed through as is. Meaning, rather than being an actual valid color value, e.g. #039be5, the color for links is being defined as the literal string colorFunc("light-blue", "darken-1"). The browser gives a warning that the color for a elements is invalid and instead uses the default blue. This also appears to affect the $success-color variable as well.
Expected behavior
Links should use the color of blue defined by colorFunc("light-blue", "darken-1") and no warnings should be generated.
Possible Solutions or Causes
I think it might be necessary to change the @use for _color-variables.scss to
@use "./_color-variables" as colorVars;
and then change $link-color to
$link-color: colorVars.colorFunc("light-blue", "darken-1") !default;
I'm not entirely sure if that'll fix it though.
Steps to reproduce
You can view the problem at this Codepen link: https://codepen.io/seaneshbaugh/pen/myJPBwq. Inspect the link and then look at the color. It'll show colorVars.colorFunc("light-blue", "darken-1") instead of a hex value and you will see a warning next to the property.
I was somewhat surprised I was able to reproduce the issue on Codepen. I had hoped it was an issue with my local SASS setup. But this appears to be an issue even with the distributed CSS found at https://cdn.jsdelivr.net/npm/@materializecss/materialize/dist/css/materialize.min.css.
Your Environment
- Version used: 2.2.2
- Browser Name and version: Firefox 139.0.1
- Operating System and version (desktop or mobile): Windows 10
- Additional information you want to tell us: