Generated by SassMeister.com.

input.scss

// Define the colors palette
$colors: (
  red: #ff0000,
  blue: #00ff00,
  green: #00ffff,
  yellow: #ffff00,
  purple: #ff00ff,
  pink: #ff0080,
  orange: #ff8000
);

// Define white and black colors
$white: #ffffff;
$black: #000000;

// Define color percentages for shades
$color-percentages: (
  red: (10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%),
  green: (20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100%)
);

// Initialize an empty map for color shades
$colors-map: ();

// Iterate over each color and generate shades
@each $color, $value in $colors {
  $color-shades: (); // Initialize an empty map for shades of the current color

  // Generate shades for the current color
  @for $i from 1 through 9 {
    // Calculate the percentage based on color-percentages or default to incremental percentage
    $percentage: if(map-has-key($color-percentages, $color), nth(map-get($color-percentages, $color), $i), $i * 10%);

    // Mix the color with white based on the percentage
    $shade: mix($white, $value, $percentage);

    // Add the shade to the color-shades map
    $color-shades: map-merge($color-shades, (#{$i}00: $shade));
  }

  // Add the color-shades map to the colors-map
  $colors-map: map-merge($colors-map, ($color: $color-shades));
}

// Initialize an empty map for neutral shades
$neutral-map: ();

// Generate neutral shades
@for $i from 1 through 9 {
  $shade: $i * 100; // Calculate the shade value
  $percentage: $i * 10%; // Calculate the percentage

  // Mix white and black based on the percentage to generate the neutral shade
  $color: mix($white, $black, $percentage);

  // Add the neutral shade to the neutral-map
  $neutral-map: map-merge($neutral-map, ($shade: $color));
}

// Define your use cases
$primary: map-get($colors-map, red);
$secondary: map-get($colors-map, blue);
$tertiary: map-get($colors-map, green);

// Create a map of colors for your use case
$decision-map: (
  primary: $primary,
  secondary: $secondary,
  tertiary: $tertiary
);

// Select desired color and shades
$desired-color: "primary"; // Specify the desired color here
$desired-shades: (200, 300, 400, 600, 800);
$selected-color-map: map-get($decision-map, $desired-color); // Select the desired color map using map-get

// Mixin to apply a specific color shade to an element
@mixin apply-color-shade($color, $shade, $property: color) {
  $color-map: map-get($colors-map, $color);
  $value: map-get($color-map, '#{$shade}');

  #{$property}: $value;
}

// Mixin to apply a specific neutral shade to an element
@mixin apply-neutral-shade($shade, $property: color) {
  $value: map-get($neutral-map, $shade);

  #{$property}: $value;
}

// Mixin to apply a specific color shade from the decision-map to an element
@mixin decision($color, $shade, $property: color) {
  $color-map: map-get($decision-map, $color);
  $value: map-get($color-map, '#{$shade}');

  #{$property}: $value;
}




.thing {
  @include decision(primary, 200);
  @include apply-color-shade(red, 100);
  @include apply-neutral-shade(100);
}



// $desired-only: true;
// $desired-and-all: true;
// $generate-neutrals: true;
// $generate-all-custom-properties: true;
// $generate-text-value: true;
// $generate-text-css: true;
// $generate-background-values: true;
// $generate-border-values: true;

@if global-variable-exists(generate-all-custom-properties) {
  // all colours 
  :root {
    @each $color, $shades in $colors-map {
      @each $shade, $value in $shades {
        --#{$color}--#{$shade}: #{$value};
      }
    }
  }
}


@if global-variable-exists(generate-neutrals) {
  // neutrals
  :root {
    @each $shade, $value in $neutral-map {
      --neutral--#{$shade}: #{$value};
    }
  }
}


@if global-variable-exists(desired-and-all) {
  // print the selection and everything else    
  :root {
    @each $color, $shades in $decision-map {
      // Print tertiary and secondary colors in full
      @if $color != $desired-color {
        @each $shade, $value in $shades {
          --#{$color}--#{$shade}: #{$value};
        }
      }

      // Print desired shades for the desired color
      @if $color == $desired-color and $desired-shades {
        @each $shade in $desired-shades {
          $shade-str: unquote('#{$shade}'); // Convert the shade to a string
          $value: map-get($selected-color-map, $shade-str);
          --#{$desired-color}--#{$shade-str}: #{$value};
        }
      }
    }
  }
}


@if global-variable-exists(desired-only) {
  :root {
    @each $shade in $desired-shades {
      $shade-str: unquote('#{$shade}'); // Convert the shade to a string
      $value: map-get($selected-color-map, $shade-str);
      --#{$desired-color}--#{$shade-str}: #{$value};
    }    
  }
}


@if global-variable-exists(generate-text-values) {
  @each $color, $shades in $decision-map {
    @each $shade, $value in $shades {
      .text-#{$color}--#{$shade} {
        color: #{$value};
      }
    }
  }
}


@if global-variable-exists(generate-text-css) {
  @each $color, $shades in $decision-map {
    @each $shade, $value in $shades {
      .text-#{$color}--#{$shade} {
        color: --#{$color}--#{$shade};
      }
    } 
  }
}


@if global-variable-exists(generate-background-values) {
  @each $color, $shades in $decision-map {
    @each $shade, $value in $shades {
      .background-#{$color}--#{$shade} {
        background-color: #{$value};
      }
    }
  }
}


@if global-variable-exists(generate-border-values) {
  @each $color, $shades in $decision-map {
    @each $shade, $value in $shades {
      .border-#{$color}--#{$shade} {
        border-color: #{$value};
      }
    }
  }
}

output.css

.thing {
  color: #ff3333;
  color: #ff1a1a;
  color: #1a1a1a;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}