SCSS Color Shades Generator: Dynamic CSS Variable Creation for Theming

color-shades-generator.scss

// Import the Sass math module for division and other mathematical operations
@use "sass:math";

// Function to generate a series of color shades from a base color
@function generate-shades($base-color) {
    // Initialize an empty map to store the shades
    $shades: ();
    // Define the scale for the shades
    $scale: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950);
    
    // Iterate over each value in the scale to generate shades
    @each $value in $scale {
        // Determine if the shade should be lighter or darker than the base color
        $is-lighter: $value < 500;
        // Calculate the percentage to mix with white or black
        $percentage: if($is-lighter, 1 - math.div($value, 1000), math.div($value - 500, 500));
        // Choose white for lighter shades, black for darker
        $mix-color: if($is-lighter, #ffffff, #000000);
        // Generate the shade by mixing the base color with white or black
        $shade: mix($mix-color, $base-color, $percentage * 100%);
        // Add the generated shade to the map
        $shades: map-merge(
            $shades,
            (
                $value: $shade
            )
        );
    }
    // Return the map of generated shades
    @return $shades;
}

// Mixin to create CSS variables for the color shades
@mixin generate-color-vars($base-name, $base-color) {
    // Generate shades using the base color
    $shades: generate-shades($base-color);
    // Define CSS variables within the :root selector for global access
    :root {
        // Iterate over each shade to create a CSS variable
        @each $shade, $color in $shades {
            // The variable name includes the base name and the shade value
            --#{$base-name}-#{$shade}: #{$color};
        }
    }
}