[Bug]: Invalid property for $link-color

[seaneshbaugh]

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:

[gselderslaghs]

@seaneshbaugh thanks for submitting this bug

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;

Sounds good, would you be able to create a pull-request with the proposed changes? Check out the Contribution documentation on how to contribute to the project