v5: shift-color() not working correctly with dark default link color?

If I want a dark color as my default link color (e.g. #111111), I would want its hover state to lighten the color instead of darkening it. It would appear that v5 accounts for this in its variables file, using the shift-color() function.

$link-color: $primary !default;
$link-decoration: underline !default;
$link-shade-percentage: 20% !default;
$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
$link-hover-decoration: null !default;

According to shift-color()’s comment , it should “Shade the color if the weight is positive, else tint it”. This sounds perfect and is exactly what I hope for. But if I pass a negative percentage like -20% to $link-shade-percentage in hopes of tinting it, I get a Sass compilation error: $weight: Expected -20% to be within 0% and 100%.

This aligns with that Sass says, that mix() only accepts 0% - 100% weight, but I don’t know. Am I doing this wrong? Thanks for your work getting v5 out!

[DaleyKD]

When I try to set $link-shade-percentage: -20%; in hopes of lightening my link hover color, node-sass gives me:

ERROR in ./styles/app.scss (./styles/app.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./styles/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: argument `$weight` of `mix($color-1, $color-2, $weight: 50%)` must be between -0 and 100
        on line 212 of node_modules/bootstrap/scss/_functions.scss, in function `mix`
        from line 212 of node_modules/bootstrap/scss/_functions.scss, in function `shade-color`
        from line 8 of node_modules/bootstrap/scss/helpers/_colored-links.scss, in function `if`
        from line 8 of node_modules/bootstrap/scss/helpers/_colored-links.scss
        from line 2 of node_modules/bootstrap/scss/_helpers.scss
        from line 49 of node_modules/bootstrap/scss/bootstrap.scss
        from line 19 of styles/app.scss
>>   @return mix(black, $color, $weight);

   ----------^

SassError: SassError: argument `$weight` of `mix($color-1, $color-2, $weight: 50%)` must be between -0 and 100
        on line 212 of node_modules/bootstrap/scss/_functions.scss, in function `mix`
        from line 212 of node_modules/bootstrap/scss/_functions.scss, in function `shade-color`
        from line 8 of node_modules/bootstrap/scss/helpers/_colored-links.scss, in function `if`
        from line 8 of node_modules/bootstrap/scss/helpers/_colored-links.scss
        from line 2 of node_modules/bootstrap/scss/_helpers.scss
        from line 49 of node_modules/bootstrap/scss/bootstrap.scss
        from line 19 of styles/app.scss
>>   @return mix(black, $color, $weight);

   ----------^

    at Object.callback (C:\src\ClientApp\node_modules\sass-loader\dist\index.js:54:16)
    at Object.done [as callback] (C:\src\ClientApp\node_modules\neo-async\async.js:8069:18)
    at options.error (C:\src\ClientApp\node_modules\node-sass\lib\index.js:293:32)
 @ ./styles/app.scss

Just figured I’d add my $0.02.

[ffoodd]

Indeed, the goal is the same but the approach diverges. The variable is not the bug, but there’s something to clarify and improve for sure.