$scale-to-weight: (
  50: 80%,
  100: 60%,
  200: 40%,
  300: 20%,
  400: 10%,
  500: 0%,
  600: 15%,
  700: 25%,
  800: 45%,
  900: 60%
);

@function get-color($color, $value) {
  $final-color: $color;

  @if map-has-key($scale-to-weight, $value) {
    @if $value > 500 {
      $final-color: mix(black, $color, map-get($scale-to-weight, $value));
    } @else if $value < 500 {
      $final-color: mix(white, $color, map-get($scale-to-weight, $value));
    }
  } @else {
    @error 'scale value #{$value} is not defined. Check $scale-to-weight map';
  }

  @return $final-color;
}

@function palette($color, $value: 500) {
  $final-color: black;

  @if map-has-key($palette-base, $color) {
    $final-color: get-color(map-get($palette-base, $color), $value);
  } @else {
    @error 'unknown color #{$color}. Check colors in $palette-base';
  }

  @return $final-color;
}

@function font-color($color) {
  @return map-get($color-font, $color);
}

$palette-base: (
  base: #101010,
  highlight: #33ffff,
  lowlight: #747474,
  white: #ffffff,
  success: #6daa48,
  alert: #fc915f,
  error: #e52e3d,
  feedback: #1f82b5
);

$color-font: (
  light: palette(white),
  highlight: palette(highlight),
  lowlight: palette(lowlight, 200),
  regular: palette(lowlight),
  grey: palette(base, 200),
  dark: palette(base),
  disabled: palette(lowlight, 300)
);

$bg-color: palette(base, 600);
$bg-color-dark: palette(base, 900);
$bg-color-lighter: palette(base, 400);
$bg-box: palette(base);
$bg-highlighted: palette(base, 300);
$bg-form: palette(base, 600);

$bg-component-default: palette(base, 900);
$bg-component-active: palette(lowlight, 900);
$bg-component-hover: palette(lowlight, 700);
$bg-component-pressed: palette(lowlight, 700);
$bg-component-selected: palette(lowlight, 800);
$bg-component-inactive: palette(base, 800);

// Design System - Colors - Shapes
$bg-shape-default: palette(base, 400);
$bg-shape-active: palette(base, 400);
$bg-shape-hover: palette(highlight);
$bg-shape-pressed: palette(highlight);
$bg-shape-selected: palette(highlight, 900);
$bg-shape-inactive: palette(base);

// Design System - Atoms - Tabs
$bg-tab-default: palette(lowlight);
$bg-tab-hover: palette(lowlight, 300);

$color-primary: palette(highlight);
$color-ok: palette(success);
$color-warn: palette(alert);
$color-error: palette(error);
$color-other: palette(lowlight);
$color-black: black;

$color-status-up: $color-ok;
$color-status-down: $color-other;
$color-status-changing: palette(feedback);
$color-status-loading: $color-primary;

$color-dashboard: (
  guide-line: palette(base, 300),
  primary: palette(highlight),
  primary-dark: palette(highlight, 800),
  primary-darker: palette(highlight, 900),
  primary-light: palette(highlight, 400),
  tooltip: palette(base, 700)
);

$color-shield: white;
$opacity-shield: 0.1;