SASS/SCSS - Error: $color: currentColor is not a color

Question

I have some issue when I want to generate Colors it show me an error messages contain

"Error: $color: currentColor is not a color."??

I dont know where this color coming from maybe the function that convert hex to rgb??

My Full Code :

// Function to Convert Hex Color to RGB Color

@function hexToRGB($hex) {
  @return red($hex), green($hex), blue($hex);
}

// Color Variables

$transparent:    transparent        !default;
$current:        currentColor       !default;
$white:          #fff               !default;

// Color Map

$shades: () !default;
$shades: map-merge(
    (
        "transparent":    $transparent,
        // The problem is Here it said :
        // currentColor is not a color.
        // Why??
        "current":        $current,
        "white":          $white,
    ),
    $shades
);

// Global Color Map

$colors: () !default;
$colors: map-merge(
    (
        "shades":    $shades,
    ),
    $colors
);

@each $name, $value in $colors {
    @each $shade, $color in $value {
        .color-#{$shade} {
            --color-example1: rgba(#{hexToRGB($color)}, 0);
        }
    }
}

The Result that I want to get after compiling to CSS :

.color-transparent {
  --color-example1: rgba(0, 0, 0, 0);
}

.color-current {
  --color-example1: rgba(255, 255, 255, 0);
}

.color-white {
  --color-example1: rgba(255, 255, 255, 0);
}

Answer 1

(Thanks to user theking2 for enlightening me regarding currentColor.)

I imagine this is related to this closed SCSS bug ticket in which they were wondering why they couldn't use currentColor in a sass rgba. This comment from one of the contributors explains why this is not possible:

This will not be possible in Sass, because currentColor is a variable calculated by the browser at run-time. As a pre-processor, Sass cannot know the value of currentColor, and can't adjust it using color functions. Your solution is the best I can think of at this point, besides using JS to do the calculations live in the browser and override your style sheet.

When browsers implement the CSS Color Module Level 5 built-in color functions, that should also make it possible in plain CSS.

My guess is that this limitation is what prevents you from storing in a sass logical construct like a map. You might be able to achieve what you are attempting using a CSS variable to store currentColor and putting that CSS variable in a SCSS variable, but I don't have a high degree of confidence on that.

I don't know for certain that this is the issue, but it seems likely to me. Hopefully others in the SO community can verify or refute this with greater confidence.