zap-desktop/app/styles/variables.scss

:root {
  --white: #fff;
  --black: #000;
  --gray: #959595;
  --lightningOrange: #fd9800;
  --superGreen: #39e673;
  --superRed: #e63939;
  --primaryColor: #242633;
  --secondaryColor: #373947;
  --tertiaryColor: #313340;
  --primaryText: #fff;
  --highlight: #353745;
  --gradient: linear-gradient(270deg, #868b9f 0%, #333c5e 100%);
}

.light {
  --white: #fff;
  --black: #000;
  --gray: #959595;
  --lightningOrange: #fd9800;
  --superGreen: #39e673;
  --superRed: #e63939;
  --primaryColor: #fff;
  --secondaryColor: #ebebeb;
  --tertiaryColor: #f3f3f3;
  --primaryText: #000;
  --highlight: #f2f2f2;
  --gradient: linear-gradient(270deg, #fd9800 0%, #ffbd59 100%);
}

$z-layers: (
  // Layer 1
  "form": (
    "container": 10,
    "pay": 10,
    "request": 10
  ),
  "contact-form": (
    "modal": 10,
  ),
  "connect-form": (
    "modal": 10,
  ),
  "settings-form": (
    "modal": 10
  ),
  "network-filters": (
    "open": 10,
  ),
  // Layer 2
  "loading-bolt":  (
    "container": 20,
  ),
  // Layer 3
  "global-error": (
    "container": 30,
  ),
  // Layer 4
  "tooltip": (
    "after": 40,
    "before": 40
  )
);

// Functions for pulling z-index values from $z-layers map
@function z($layer...) {
  @if not map-has-nested-keys($z-layers, $layer) {
    @warn "No layer found for `#{$layer}` in $z-layers map. Property omitted.";
  }

  @return map-deep-get($z-layers, $layer);
}

@function map-has-nested-keys($map, $keys) {
  @each $key in $keys {
    @if not map-has-key($map, $key) {
      @return false;
    }
    $map: map-get($map, $key);
  }

  @return true;
}

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

  @return $map;
}