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


@function gray($key: "300") {
  @return map-get($grays, $key);
}


// Expose for Javascript see https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript
:export{
    @each $color, $value in $thene-colors {
        color-#{$color}: $value;
    }
    
    @each $color, $value in $grays {
        --gray-#{$color}: #{$value};
    }
}

// Expose as css custom variables
::root {
    @each $color, $value in $thene-colors {
        --color-#{$color}: #{$value};
    }
    
    @each $color, $value in $grays {
        --gray-#{$color}: #{$value};
    }
}

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

output.css

:export {
  color-primary: #294638;
  color-primary-accent: #44745e;
  color-primary-light: #dae3df;
  color-secondary: #ff9d94;
  color-secondary-accent: #ffc4bf;
  color-secondary-light: #fff6f6;
  color-error: #b43d2a;
  color-warning: #f3a733;
  color-success: #4aaea3;
  color-info: #6f9ff0;
  --gray-50: #f7f8f9;
  --gray-100: #f1f2f4;
  --gray-200: #d3d6dc;
  --gray-300: #b6bbc5;
  --gray-400: #99a0ae;
  --gray-500: #6d778b;
  --gray-600: #5a6478;
  --gray-700: #505a6e;
  --gray-800: #3e475b;
}

::root {
  --color-primary: #294638;
  --color-primary-accent: #44745e;
  --color-primary-light: #dae3df;
  --color-secondary: #ff9d94;
  --color-secondary-accent: #ffc4bf;
  --color-secondary-light: #fff6f6;
  --color-error: #b43d2a;
  --color-warning: #f3a733;
  --color-success: #4aaea3;
  --color-info: #6f9ff0;
  --gray-50: #f7f8f9;
  --gray-100: #f1f2f4;
  --gray-200: #d3d6dc;
  --gray-300: #b6bbc5;
  --gray-400: #99a0ae;
  --gray-500: #6d778b;
  --gray-600: #5a6478;
  --gray-700: #505a6e;
  --gray-800: #3e475b;
}

.test {
  color: #ff9d94;
  background-color: #d3d6dc;
}

settings.json

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