Generated by SassMeister.com.

input.scss

$is-target-ide: true;
$app-mode: if($is-target-ide, ide, default);

$base-colors: (
    glyph-gray: (
        light: pink,
        dark: purple 
    ),
    glyph-gray-secondary: (
        light: rgb(110, 110, 115),
        dark: rgb(134, 134, 139) 
    ),
);
$component-colors: ();

// fetch a color from provided map. This handles color variant automatically.
@function -get-color-from($map, $args...){
    $color-map: map-deep-get($map, $args);
    
    @if(type-of($color-map) != map) {
        @return $color-map;
    }
    
    // if it is in `ide` mode, get that, fallback to default if not available, fallback to value if also not avail.
    $color: map-get-default($color-map, $app-mode, map-get-default($color-map, default, $color-map));
    
    // if its still a map, get the `light` variant. We cant know color preference.
    @if(type-of($color) == map) {
        @return map-get($color, light);
    }
    
    // if its not a map, then we are ready to return
    @return $color
}

@function get-color($args...){
    // try to get the color from the base colors
    $baseColor: -get-color-from($base-colors, $args...);
    // try to get the color from the component colors
    $componentColor: -get-color-from($component-colors, $args...);
    // return whichever is available
    @return if($baseColor, $baseColor, $componentColor);
}

@function map-deep-get($map, $keys, $default: null) {
  $value: $map;

  // Loop through every key except the last one, keeping track of each
  // corresponding value in the map
  @for $i from 1 to length($keys) {
    $key: nth($keys, $i);
    // make sure $value is a map, so we dont error out
    @if(type-of($value) != map) {
        $value: ();
    }
    $value: map-get-default($value, $key, ());
  }

  // Return the value for the last key or a default value
  @return map-get-default($value, nth($keys, -1), $default);
}

@function map-get-default($map, $key, $default) {
  @return if(map-has-key($map, $key), map-get($map, $key), $default);
}

// set a color for a property. Automatically resolves light/dark/ide colors.
@mixin set-color-for($property-name, $color, $color-var: null) {
    // fetch the color from the components
    $palette: map-deep-get($component-colors, $color);
    
    // if its a map, set the colors
    @if type-of($palette) == map {
        @include -set-color-per-mode($property-name, $palette, $color-var);
    } @else {
        // otherwise just set the fetched color
        #{$property-name}: $palette;
    }
}

@function -if-color-var($color-var, $color-fallback) {
  @return if($color-var, var($color-var, $color-fallback), $color-fallback);
}

@mixin -set-color-per-mode($property-name, $palette, $color-var: null) {
  // get the default color
  $default-color: map-get-default($palette, default, ());
  // set default variants
  $default-color-light: $default-color;
  $default-color-dark: null;
  
  // get IDE color
  $ide-color: map-get-default($palette, ide, null);
  // set IDE variants
  $ide-color-light: $ide-color;
  $ide-color-dark: null;
  
  // if its a map, extract the light/dark variants
  @if(type-of($default-color) == map){
    $default-color-light: map-get-default($default-color, light, null);
    $default-color-dark: map-get-default($default-color, dark, null);
  }
  
  // if its a map, get the light/dark variants
  @if(type-of($ide-color) == map){
    $ide-color-light: map-get-default($ide-color, light, null);
    $ide-color-dark: map-get-default($ide-color, dark, null);
  }

  // set the light and dark colors to apply for the property
  $color: -if-color-var($color-var, $default-color-light);
  $color-dark: -if-color-var($color-var, $default-color-dark);

  // overwrite the colors, for IDE mode
  @if $is-target-ide == true {
    $color: -if-color-var($color-var, if($ide-color-light, $ide-color-light, $default-color-light));

    @if ($ide-color-dark) {
      $color-dark: $ide-color-dark;
    }
  }
  
  // apply the colors to the property
  #{$property-name}: $color;
  
  @media (prefers-color-scheme: dark) {
    #{$property-name}: -if-color-var($color-var, $color-dark);
  }
}

$component-colors: (
    links-item-border: (
      default: -get-color-from($base-colors, glyph-gray),
      ide: links-item-border-ide
    ),
    link-item-bg: (
      default: (
        light: link-item-bg-default-light,
        dark: link-item-bg-default-dark,
      ),
      ide: (
        light: link-item-bg-ide-light,
        dark: link-item-bg-ide-dark
      )
    ),
    nested: (
        deeply: (
            link-item-bg: (
              default: (
                light: link-item-bg-default-light,
                dark: link-item-bg-default-dark,
              ),
              ide: (
                light: link-item-bg-ide-light,
                dark: get-color(glyph-gray, dark)
              )
            )
        )
    )
);

.thing {
    // color-only: get-color(links-item-border);
    // color-only-with-deep-map: get-color(link-item-bg);
    // color-mode: get-color(link-item-bg, default);
    // color-mode-ide: get-color(link-item-bg, ide);
    // color-mode-variant: get-color(link-item-bg, default, light);
    // invalid-color: get-color(link-item-b, default, light);
    @include set-color-for(color, (link-item-bg));
    @include set-color-for(background-color, (links-item-border));
    @include set-color-for(border-color, (nested, deeply, link-item-bg));
}

output.css

.thing {
  color: link-item-bg-ide-light;
  background-color: links-item-border-ide;
  border-color: link-item-bg-ide-light;
}
@media (prefers-color-scheme: dark) {
  .thing {
    color: link-item-bg-ide-dark;
  }
}
@media (prefers-color-scheme: dark) {
  .thing {
    border-color: purple;
  }
}

settings.json

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