Generated by SassMeister.com.

input.scss

// Colour - General
$color-white: #fff;
$color-black: #000;

// Colour - Primary
$color-plantation: #294638; // Regular
$color-como: #44745e; // Accent
$color-nebula: #dae3df; // light

// Colour - Secondary
$color-mona-list: #ff9d94; // Regular
$color-your-pint: #ffc4bf; // Accent
$color-chablis: #fff6f6; // Light

// Colour - Functional
$color-tall-poppy: #b43d2a; // Error
$color-fuel-yellow: #f3a733; // Warning
$color-tradewind: #4aaea3; // Success
$color-cornflower-blue: #6f9ff0; // Info

// Colour - Greyscales & Copy colours
$color-cod-gray: #1e1e1e; // Headings
$color-bright-gray: #323949; // Body copy
$color-comet: #505a6e; // Excerpt and Label
$color-french-gray: #b6bbc5; // Placeholder and Input outline
$color-athens-gray: #f1f2f4; // Disabled background
$color-oxford-blue: #3e475b;
$color-shuttle-gray: #5a6478;
$color-raven: #6d778b;
$color-gray-chateaua: #99a0ae;
$color-mischka: #d3d6dc;
$color-porcelain: #f7f8f9;

$color-gray-800: $color-oxford-blue;
$color-gray-700: $color-comet;
$color-gray-600: $color-shuttle-gray;
$color-gray-500: $color-raven;
$color-gray-400: $color-gray-chateaua;
$color-gray-300: $color-french-gray;
$color-gray-200: $color-mischka;
$color-gray-100: $color-athens-gray;
$color-gray-50: $color-porcelain;

// Colour - Backgrounds
$color-gray-nurse: #f3f5f2;
$color-spring-wood: #f5f1ec;
$color-gallery: #f0f0f0;
$color-fair-pink: #ffebea;

// Theme
$color-primary: $color-plantation;
$color-primary-accent: $color-como;
$color-primary-light: $color-nebula;

$color-secondary: $color-mona-list;
$color-secondary-accent: $color-your-pint;
$color-secondary-light: $color-chablis;

$color-error: $color-tall-poppy;
$color-warning: $color-fuel-yellow;
$color-success: $color-tradewind;
$color-info: $color-cornflower-blue;

$grays: (
  "50": $color-gray-50,
  "100": $color-gray-100,
  "200": $color-gray-200,
  "300": $color-gray-300,
  "400": $color-gray-400,
  "500": $color-gray-500,
  "600": $color-gray-600,
  "700": $color-gray-700,
  "800": $color-gray-800,
) !default;

$thene-colors: (
    primary: $color-primary,
    primary-accent: $color-primary-accent,
    primary-light: $color-primary-light,
    secondary: $color-secondary,
    secondary-accent: $color-secondary-accent,
    secondary-light: $color-secondary-light,
    error: $color-error,
    warning: $color-warning,
    success: $color-success,
    info: $color-info,
) !default;

@function theme-colour($key: "primary") {
  @return map-get($thene-colors, $key);
}

@each $color, $value in $thene-colors {
    :export{
        $color: $value;
    }
}

.test {
    color: theme-colour('secondary');
}

output.css

.test {
  color: #ff9d94;
}

settings.json

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