Generated by SassMeister.com.

input.scss

// Colors Tokens

// design Documentation: https://zeroheight.com/5305a4b9d/v/latest/p/00072e-colors/b/66c1df

// Usage Example
// .foo {
//   background: color(background, neutral, strong); // category, role, prominence
//   color: color(text, success, default);
//   border: $border-width-thin solid color(border, informative, weak);
// }

@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }

  @return $map;
}


// Base
$color-base-white: #fff;
$color-base-black: #000;

// Neutral
$color-neutral-100: #f8f8f8;
$color-neutral-200: #f1f1f1;
$color-neutral-300: #e8e8e8;
$color-neutral-400: #dcdcdc;
$color-neutral-500: #bbb;
$color-neutral-600: #999;
$color-neutral-700: #707070;
$color-neutral-800: #363636;
$color-neutral-900: #101010;

// Primary
$color-primary-100: #ebf6fe;
$color-primary-200: #d3eafd;
$color-primary-300: #8ac7fa;
$color-primary-400: #59aff8;
$color-primary-500: #2898f5;
$color-primary-600: #0971c8;
$color-primary-700: #0863b0;
$color-primary-800: #075597;
$color-primary-900: #06487f;

// Success
$color-success-100: #ebf7e9;
$color-success-200: #e0f2df;
$color-success-300: #bde3bb;
$color-success-400: #88cd85;
$color-success-500: #65bf60;
$color-success-600: #49a844;
$color-success-700: #398435;
$color-success-800: #295f27;
$color-success-900: #1a3b18;

// Informative
$color-informative-100: #ebf6fe;
$color-informative-200: #d3eafd;
$color-informative-300: #8ac7fa;
$color-informative-400: #59aff8;
$color-informative-500: #2898f5;
$color-informative-600: #0971c8;
$color-informative-700: #0863b0;
$color-informative-800: #075597;
$color-informative-900: #06487f;

// Warning
$color-warning-100: #fffbe5;
$color-warning-200: #fff8cc;
$color-warning-300: #fff099;
$color-warning-400: #ffe966;
$color-warning-500: #ffe133;
$color-warning-600: #ffda00;
$color-warning-700: #ccae00;
$color-warning-800: #998300;
$color-warning-900: #665700;

// danger
$color-danger-100: #fcebeb;
$color-danger-200: #fce1e0;
$color-danger-300: #f8b3b2;
$color-danger-400: #f38583;
$color-danger-500: #ef5754;
$color-danger-600: #e21915;
$color-danger-700: #cb1613;
$color-danger-800: #b31411;
$color-danger-900: #9c110f;

// accent
$color-accent-100: #fef3e8;
$color-accent-200: #fde6cf;
$color-accent-300: #fcd9b7;
$color-accent-400: #fabf86;
$color-accent-500: #f8a555;
$color-accent-600: #f68b24;
$color-accent-700: #de7109;
$color-accent-800: #ad5807;
$color-accent-900: #7c3f05;

// Marketplace
$color-marketplace-100: #ebf7e9;
$color-marketplace-200: #e0f2df;
$color-marketplace-300: #bde3bb;
$color-marketplace-400: #88cd85;
$color-marketplace-500: #65bf60;
$color-marketplace-600: #49a844;
$color-marketplace-700: #398435;
$color-marketplace-800: #295f27;
$color-marketplace-900: #1a3b18;

// Plus
$color-plus-100: #efe9fc;
$color-plus-200: #cfbdf5;
$color-plus-300: #ae90ef;
$color-plus-400: #8e63e9;
$color-plus-500: #6e37e2;
$color-plus-600: #541dc9;
$color-plus-700: #41179c;
$color-plus-800: #2f1070;
$color-plus-900: #1c0a43;

// Favorite
$color-favorite-100: #fde5e3;
$color-favorite-200: #fabab3;
$color-favorite-300: #f78e83;
$color-favorite-400: #f46353;
$color-favorite-500: #f13723;
$color-favorite-600: #d3210e;
$color-favorite-700: #a31a0a;

// Color mixin
@function color($category, $role, $prominence, $dark: false) {
  $color: (
    "background": (
      "base": (
        "default": $color-base-white
      ),
      "neutral": (
        "default": $color-neutral-100,
        "strong": $color-neutral-200,
        "stronger": $color-neutral-300,
        "strongest": $color-neutral-800
      ),
      "success": (
        "weak": $color-success-100,
        "default": $color-success-700
      ),
      "informative": (
        "weak": $color-informative-100,
        "default": $color-informative-600
      ),
      "warning": (
        "weak": $color-warning-100,
        "default": $color-warning-600,
        "strong": $color-warning-900
      ),
      "danger": (
        "weak": $color-danger-100,
        "default": $color-danger-600
      ),
      "accent": (
        "weak": $color-accent-100,
        "default": $color-accent-600
      ),
      "marketplace": (
        "weak": $color-marketplace-200,
        "default": $color-marketplace-700
      ),
      "plus": (
        "weak": $color-plus-100,
        "default": $color-plus-600
      ),
      "favorite": (
        "default": $color-favorite-400
      )
    ),
    "border": (
      "base": (
        "default": $color-base-white
      ),
      "neutral": (
        "default": $color-neutral-300,
        "strong": $color-neutral-500
      ),
      "primary": (
        "default": $color-primary-600
      ),
      "success": (
        "weak": $color-success-300,
        "default": $color-success-700
      ),
      "informative": (
        "weak": $color-informative-300,
        "default": $color-informative-600
      ),
      "warning": (
        "default": $color-warning-600,
        "strong": $color-warning-700
      ),
      "danger": (
        "weak": $color-danger-300,
        "default": $color-danger-600
      ),
      "accent": (
        "default": $color-accent-600
      ),
      "plus": (
        "default": $color-plus-600
      )
    ),
    "text": (
      "base": (
        "default": $color-base-white
      ),
      "neutral": (
        "weak": $color-neutral-700,
        "default": $color-neutral-800,
        "strong": $color-neutral-900
      ),
      "primary": (
        "default": $color-primary-600,
        "strong": $color-primary-700
      ),
      "success": (
        "default": $color-success-700,
        "strong": $color-success-800
      ),
      "warning": (
        "default": $color-warning-900
      ),
      "danger": (
        "default": $color-danger-600,
        "strong": $color-danger-800
      ),
      "accent": (
        "default": $color-accent-600,
        "strong": $color-accent-900
      ),
      "marketplace": (
        "default": $color-marketplace-700,
        "strong": $color-marketplace-800
      ),
      "plus": (
        "default": $color-plus-600,
        "strong": $color-plus-800
      )
    ),
    "icon": (
      "base": (
        "default": $color-base-white
      ),
      "neutral": (
        "weak": $color-neutral-500,
        "default": $color-neutral-700,
        "strong": $color-neutral-800
      ),
      "success": (
        "default": $color-success-700
      ),
      "informative": (
        "default": $color-informative-600
      ),
      "warning": (
        "default": $color-warning-800
      ),
      "danger": (
        "default": $color-danger-600
      ),
      "accent": (
        "default": $color-accent-600
      ),
      "marketplace": (
        "default": $color-marketplace-700,
        "strong": $color-marketplace-800
      ),
      "plus": (
        "default": $color-plus-600,
        "strong": $color-plus-800
      ),
      "favorite": (
        "default": $color-favorite-400
      )
    ),
    "divider": (
      "neutral": (
        "weak": $color-neutral-300,
        "default": $color-neutral-400,
        "strong": $color-neutral-500
      )
    )
  );
  
  $color-dark: (
    "background": (
      "base": (
        "default": $color-base-white
      ),
      "neutral": (
        "default": $color-neutral-100,
        "strong": red,
        "stronger": $color-neutral-300,
        "strongest": $color-neutral-800
      ),
      "success": (
        "weak": $color-success-100,
        "default": $color-success-700
      ),
      "informative": (
        "weak": $color-informative-100,
        "default": $color-informative-600
      ),
      "warning": (
        "weak": $color-warning-100,
        "default": $color-warning-600,
        "strong": $color-warning-900
      ),
      "danger": (
        "weak": $color-danger-100,
        "default": $color-danger-600
      ),
      "accent": (
        "weak": $color-accent-100,
        "default": $color-accent-600
      ),
      "marketplace": (
        "weak": $color-marketplace-200,
        "default": $color-marketplace-700
      ),
      "plus": (
        "weak": $color-plus-100,
        "default": $color-plus-600
      ),
      "favorite": (
        "default": $color-favorite-400
      )
    ),
    "border": (
      "base": (
        "default": $color-base-white
      ),
      "neutral": (
        "default": $color-neutral-300,
        "strong": $color-neutral-500
      ),
      "primary": (
        "default": $color-primary-600
      ),
      "success": (
        "weak": $color-success-300,
        "default": $color-success-700
      ),
      "informative": (
        "weak": $color-informative-300,
        "default": $color-informative-600
      ),
      "warning": (
        "default": $color-warning-600,
        "strong": $color-warning-700
      ),
      "danger": (
        "weak": $color-danger-300,
        "default": $color-danger-600
      ),
      "accent": (
        "default": $color-accent-600
      ),
      "plus": (
        "default": $color-plus-600
      )
    ),
    "text": (
      "base": (
        "default": $color-base-white
      ),
      "neutral": (
        "weak": $color-neutral-700,
        "default": $color-neutral-800,
        "strong": $color-neutral-900
      ),
      "primary": (
        "default": $color-primary-600,
        "strong": $color-primary-700
      ),
      "success": (
        "default": $color-success-700,
        "strong": $color-success-800
      ),
      "warning": (
        "default": $color-warning-900
      ),
      "danger": (
        "default": $color-danger-600,
        "strong": $color-danger-800
      ),
      "accent": (
        "default": $color-accent-600,
        "strong": $color-accent-900
      ),
      "marketplace": (
        "default": $color-marketplace-700,
        "strong": $color-marketplace-800
      ),
      "plus": (
        "default": $color-plus-600,
        "strong": $color-plus-800
      )
    ),
    "icon": (
      "base": (
        "default": $color-base-white
      ),
      "neutral": (
        "weak": $color-neutral-500,
        "default": $color-neutral-700,
        "strong": $color-neutral-800
      ),
      "success": (
        "default": $color-success-700
      ),
      "informative": (
        "default": $color-informative-600
      ),
      "warning": (
        "default": $color-warning-800
      ),
      "danger": (
        "default": $color-danger-600
      ),
      "accent": (
        "default": $color-accent-600
      ),
      "marketplace": (
        "default": $color-marketplace-700,
        "strong": $color-marketplace-800
      ),
      "plus": (
        "default": $color-plus-600,
        "strong": $color-plus-800
      ),
      "favorite": (
        "default": $color-favorite-400
      )
    ),
    "divider": (
      "neutral": (
        "weak": $color-neutral-300,
        "default": $color-neutral-400,
        "strong": $color-neutral-500
      )
    )
  );

  @if $dark {
     @return map-deep-get($color-dark, $category, $role, $prominence);
  }

  @return map-deep-get($color, $category, $role, $prominence);
}


html {
  background: color(background, neutral, strong);
}

@media (prefers-color-scheme: dark) {

  html {
    background: color(background, neutral, strong, true);
  }
}

output.css

html {
  background: #f1f1f1;
}

@media (prefers-color-scheme: dark) {
  html {
    background: red;
  }
}

settings.json

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