Generated by SassMeister.com.

input.scss

// Define the base colors
$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%)
);

// Map to store color shades
$colors-map: ();

// Generate color shades using color percentages
@each $color, $value in $colors {
  $color-shades: ();

  @for $i from 1 through 9 {
    $percentage: if(map-has-key($color-percentages, $color), nth(map-get($color-percentages, $color), $i), $i * 10%);
    $shade: mix($white, $value, $percentage);
    $color-shades: map-merge($color-shades, ($color + '-' + ($i * 100): $shade));
  }

  $colors-map: map-merge($colors-map, ($color: $color-shades));
}


// Map to store neutral shades
$neutral-map: ();

// Generate neutral shades between white and black
@for $i from 1 through 9 {
  $shade: $i * 100;
  $percentage: $i * 10%;
  $color: mix($white, $black, $percentage);
  $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);

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

// Make a selection of colors
$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-shades: map-get($colors-map, $color);
  $value: map-get($color-shades, $color + '-' + $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 shade from the decision-map to an element
@mixin apply-decision-shade($color, $shade, $property: color) {
  $color-map: map-get($decision-map, $color);
  $value: map-get($color-map, $shade);

  #{$property}: $value;
}


.thing {
  @include apply-color-shade(red, 400);
  @include apply-neutral-shade(800);
  @include apply-decision-shade(primary, 300, border-color);
}

// All colors
:root {
  @each $color, $shades in $colors-map {
    @each $shade, $value in $shades {
      --#{$shade}: #{$value};
    }
  }
}

// Neutrals
:root {
  @each $shade, $value in $neutral-map {
    --neutral--#{$shade}: #{$value};
  }
}

// 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};
      }
    }
  }
}

// Create utility classes for text color
@each $color, $shades in $decision-map {
  @each $shade, $value in $shades {
    .text-#{$color}--#{$shade} {
      color: #{$value};
    }
  }
}

// Create utility classes for background color
@each $color, $shades in $decision-map {
  @each $shade, $value in $shades {
    .background-#{$color}--#{$shade} {
      background-color: #{$value};
    }
  }
}

// Create utility classes for border color
@each $color, $shades in $decision-map {
  @each $shade, $value in $shades {
    .border-#{$color}--#{$shade} {
      border-color: #{$value};
    }
  }
}

output.css

.thing {
  color: #ff6666;
  color: #cccccc;
}

:root {
  --red-100: #ff1a1a;
  --red-200: #ff3333;
  --red-300: #ff4d4d;
  --red-400: #ff6666;
  --red-500: #ff8080;
  --red-600: #ff9999;
  --red-700: #ffb3b3;
  --red-800: #ffcccc;
  --red-900: #ffe6e6;
  --blue-100: #1aff1a;
  --blue-200: #33ff33;
  --blue-300: #4dff4d;
  --blue-400: #66ff66;
  --blue-500: #80ff80;
  --blue-600: #99ff99;
  --blue-700: #b3ffb3;
  --blue-800: #ccffcc;
  --blue-900: #e6ffe6;
  --green-100: #33ffff;
  --green-200: #4dffff;
  --green-300: #66ffff;
  --green-400: #80ffff;
  --green-500: #99ffff;
  --green-600: #b3ffff;
  --green-700: #ccffff;
  --green-800: #e6ffff;
  --green-900: white;
  --yellow-100: #ffff1a;
  --yellow-200: #ffff33;
  --yellow-300: #ffff4d;
  --yellow-400: #ffff66;
  --yellow-500: #ffff80;
  --yellow-600: #ffff99;
  --yellow-700: #ffffb3;
  --yellow-800: #ffffcc;
  --yellow-900: #ffffe6;
  --purple-100: #ff1aff;
  --purple-200: #ff33ff;
  --purple-300: #ff4dff;
  --purple-400: #ff66ff;
  --purple-500: #ff80ff;
  --purple-600: #ff99ff;
  --purple-700: #ffb3ff;
  --purple-800: #ffccff;
  --purple-900: #ffe6ff;
  --pink-100: #ff1a8d;
  --pink-200: #ff3399;
  --pink-300: #ff4da6;
  --pink-400: #ff66b3;
  --pink-500: #ff80c0;
  --pink-600: #ff99cc;
  --pink-700: #ffb3d9;
  --pink-800: #ffcce6;
  --pink-900: #ffe6f2;
  --orange-100: #ff8d1a;
  --orange-200: #ff9933;
  --orange-300: #ffa64d;
  --orange-400: #ffb366;
  --orange-500: #ffc080;
  --orange-600: #ffcc99;
  --orange-700: #ffd9b3;
  --orange-800: #ffe6cc;
  --orange-900: #fff2e6;
}

:root {
  --neutral--100: #1a1a1a;
  --neutral--200: #333333;
  --neutral--300: #4d4d4d;
  --neutral--400: #666666;
  --neutral--500: gray;
  --neutral--600: #999999;
  --neutral--700: #b3b3b3;
  --neutral--800: #cccccc;
  --neutral--900: #e6e6e6;
}

:root {
  --primary--200: ;
  --primary--300: ;
  --primary--400: ;
  --primary--600: ;
  --primary--800: ;
  --secondary--blue-100: #1aff1a;
  --secondary--blue-200: #33ff33;
  --secondary--blue-300: #4dff4d;
  --secondary--blue-400: #66ff66;
  --secondary--blue-500: #80ff80;
  --secondary--blue-600: #99ff99;
  --secondary--blue-700: #b3ffb3;
  --secondary--blue-800: #ccffcc;
  --secondary--blue-900: #e6ffe6;
  --tertiary--green-100: #33ffff;
  --tertiary--green-200: #4dffff;
  --tertiary--green-300: #66ffff;
  --tertiary--green-400: #80ffff;
  --tertiary--green-500: #99ffff;
  --tertiary--green-600: #b3ffff;
  --tertiary--green-700: #ccffff;
  --tertiary--green-800: #e6ffff;
  --tertiary--green-900: white;
}

.text-primary--red-100 {
  color: #ff1a1a;
}

.text-primary--red-200 {
  color: #ff3333;
}

.text-primary--red-300 {
  color: #ff4d4d;
}

.text-primary--red-400 {
  color: #ff6666;
}

.text-primary--red-500 {
  color: #ff8080;
}

.text-primary--red-600 {
  color: #ff9999;
}

.text-primary--red-700 {
  color: #ffb3b3;
}

.text-primary--red-800 {
  color: #ffcccc;
}

.text-primary--red-900 {
  color: #ffe6e6;
}

.text-secondary--blue-100 {
  color: #1aff1a;
}

.text-secondary--blue-200 {
  color: #33ff33;
}

.text-secondary--blue-300 {
  color: #4dff4d;
}

.text-secondary--blue-400 {
  color: #66ff66;
}

.text-secondary--blue-500 {
  color: #80ff80;
}

.text-secondary--blue-600 {
  color: #99ff99;
}

.text-secondary--blue-700 {
  color: #b3ffb3;
}

.text-secondary--blue-800 {
  color: #ccffcc;
}

.text-secondary--blue-900 {
  color: #e6ffe6;
}

.text-tertiary--green-100 {
  color: #33ffff;
}

.text-tertiary--green-200 {
  color: #4dffff;
}

.text-tertiary--green-300 {
  color: #66ffff;
}

.text-tertiary--green-400 {
  color: #80ffff;
}

.text-tertiary--green-500 {
  color: #99ffff;
}

.text-tertiary--green-600 {
  color: #b3ffff;
}

.text-tertiary--green-700 {
  color: #ccffff;
}

.text-tertiary--green-800 {
  color: #e6ffff;
}

.text-tertiary--green-900 {
  color: white;
}

.background-primary--red-100 {
  background-color: #ff1a1a;
}

.background-primary--red-200 {
  background-color: #ff3333;
}

.background-primary--red-300 {
  background-color: #ff4d4d;
}

.background-primary--red-400 {
  background-color: #ff6666;
}

.background-primary--red-500 {
  background-color: #ff8080;
}

.background-primary--red-600 {
  background-color: #ff9999;
}

.background-primary--red-700 {
  background-color: #ffb3b3;
}

.background-primary--red-800 {
  background-color: #ffcccc;
}

.background-primary--red-900 {
  background-color: #ffe6e6;
}

.background-secondary--blue-100 {
  background-color: #1aff1a;
}

.background-secondary--blue-200 {
  background-color: #33ff33;
}

.background-secondary--blue-300 {
  background-color: #4dff4d;
}

.background-secondary--blue-400 {
  background-color: #66ff66;
}

.background-secondary--blue-500 {
  background-color: #80ff80;
}

.background-secondary--blue-600 {
  background-color: #99ff99;
}

.background-secondary--blue-700 {
  background-color: #b3ffb3;
}

.background-secondary--blue-800 {
  background-color: #ccffcc;
}

.background-secondary--blue-900 {
  background-color: #e6ffe6;
}

.background-tertiary--green-100 {
  background-color: #33ffff;
}

.background-tertiary--green-200 {
  background-color: #4dffff;
}

.background-tertiary--green-300 {
  background-color: #66ffff;
}

.background-tertiary--green-400 {
  background-color: #80ffff;
}

.background-tertiary--green-500 {
  background-color: #99ffff;
}

.background-tertiary--green-600 {
  background-color: #b3ffff;
}

.background-tertiary--green-700 {
  background-color: #ccffff;
}

.background-tertiary--green-800 {
  background-color: #e6ffff;
}

.background-tertiary--green-900 {
  background-color: white;
}

.border-primary--red-100 {
  border-color: #ff1a1a;
}

.border-primary--red-200 {
  border-color: #ff3333;
}

.border-primary--red-300 {
  border-color: #ff4d4d;
}

.border-primary--red-400 {
  border-color: #ff6666;
}

.border-primary--red-500 {
  border-color: #ff8080;
}

.border-primary--red-600 {
  border-color: #ff9999;
}

.border-primary--red-700 {
  border-color: #ffb3b3;
}

.border-primary--red-800 {
  border-color: #ffcccc;
}

.border-primary--red-900 {
  border-color: #ffe6e6;
}

.border-secondary--blue-100 {
  border-color: #1aff1a;
}

.border-secondary--blue-200 {
  border-color: #33ff33;
}

.border-secondary--blue-300 {
  border-color: #4dff4d;
}

.border-secondary--blue-400 {
  border-color: #66ff66;
}

.border-secondary--blue-500 {
  border-color: #80ff80;
}

.border-secondary--blue-600 {
  border-color: #99ff99;
}

.border-secondary--blue-700 {
  border-color: #b3ffb3;
}

.border-secondary--blue-800 {
  border-color: #ccffcc;
}

.border-secondary--blue-900 {
  border-color: #e6ffe6;
}

.border-tertiary--green-100 {
  border-color: #33ffff;
}

.border-tertiary--green-200 {
  border-color: #4dffff;
}

.border-tertiary--green-300 {
  border-color: #66ffff;
}

.border-tertiary--green-400 {
  border-color: #80ffff;
}

.border-tertiary--green-500 {
  border-color: #99ffff;
}

.border-tertiary--green-600 {
  border-color: #b3ffff;
}

.border-tertiary--green-700 {
  border-color: #ccffff;
}

.border-tertiary--green-800 {
  border-color: #e6ffff;
}

.border-tertiary--green-900 {
  border-color: white;
}

settings.json

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