@function mergeColorMaps($bulma-colors, $custom-colors) {
  // we return at least bulma hardcoded colors
  $merged-colors: $bulma-colors;

  // we want a map as input
  @if type-of($custom-colors) == 'map' {
    @each $name, $components in $custom-colors {
      // color name should be a string and colors pair a list with at least one element
      @if type-of($name) ==
        'string' and
        (type-of($components) == 'list' or type-of($components) == 'color') and
        length($components) >=
        1
      {
        $color-base: null;

        // the param can either be a single color
        // or a list of 2 colors
        @if type-of($components) == 'color' {
          $color-base: $components;
        } @else if type-of($components) == 'list' {
          $color-base: nth($components, 1);
        }

        $color-invert: null;

        // is an inverted color provided in the list
        @if length($components) > 1 {
          $color-invert: nth($components, 2);
        }

        // we only want a color as base color
        @if type-of($color-base) == 'color' {
          // if inverted color is not provided or is not a color we compute it
          @if type-of($color-invert) != 'color' {
            $color-invert: findColorInvert($color-base);
          }

          // we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name)
          $merged-colors: map_merge(
            $merged-colors,
            (
              $name: (
                $color-base,
                $color-invert
              )
            )
          );
        }
      }
    }
  }

  @return $merged-colors;
}

@function powerNumber($number, $exp) {
  $value: 1;

  @if $exp > 0 {
    @for $i from 1 through $exp {
      $value: $value * $number;
    }
  } @else if $exp < 0 {
    @for $i from 1 through -$exp {
      $value: $value / $number;
    }
  }

  @return $value;
}

@function colorLuminance($color) {
  $color-rgb: (
    'red': red($color),
    'green': green($color),
    'blue': blue($color)
  );

  @each $name, $value in $color-rgb {
    $adjusted: 0;
    $value: $value / 255;

    @if $value < 0.03928 {
      $value: $value / 12.92;
    } @else {
      $value: ($value + 0.055) / 1.055;
      $value: powerNumber($value, 2);
    }

    $color-rgb: map-merge(
      $color-rgb,
      (
        $name: $value
      )
    );
  }

  @return map-get($color-rgb, 'red') * 0.2126 + map-get($color-rgb, 'green') * 0.7152 + map-get($color-rgb, 'blue') *
    0.0722;
}

@function findColorInvert($color) {
  @if colorLuminance($color) > 0.55 {
    @return rgba(#000, 0.7);
  } @else {
    @return #fff;
  }
}

// Colors

$black: hsl(0, 0%, 4%) !default;
$black-bis: hsl(0, 0%, 7%) !default;
$black-ter: hsl(0, 0%, 14%) !default;

$grey-darker: hsl(0, 0%, 21%) !default;
$grey-dark: hsl(0, 0%, 29%) !default;
$grey: hsl(0, 0%, 48%) !default;
$grey-light: hsl(0, 0%, 71%) !default;
$grey-lighter: hsl(0, 0%, 86%) !default;

$white-ter: hsl(0, 0%, 96%) !default;
$white-bis: hsl(0, 0%, 98%) !default;
$white: hsl(0, 0%, 100%) !default;

$orange: hsl(14, 100%, 53%) !default;
$yellow: hsl(48, 100%, 67%) !default;
$green: hsl(141, 71%, 48%) !default;
$turquoise: hsl(171, 100%, 41%) !default;
$cyan: hsl(204, 86%, 53%) !default;
$blue: hsl(217, 71%, 53%) !default;
$purple: hsl(271, 100%, 71%) !default;
$red: hsl(348, 100%, 61%) !default;

// Typography

$family-sans-serif: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
  'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default;
$family-monospace: monospace !default;
$render-mode: optimizeLegibility !default;

$size-1: 3rem !default;
$size-2: 2.5rem !default;
$size-3: 2rem !default;
$size-4: 1.5rem !default;
$size-5: 1.25rem !default;
$size-6: 1rem !default;
$size-7: 0.75rem !default;

$weight-normal: 400 !default;
$weight-semibold: 500 !default;
$weight-bold: 700 !default;

// Responsiveness

// The container horizontal gap, which acts as the offset for breakpoints
$gap: 64px !default;

// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$tablet: 769px !default;

// 960px container + 4rem
$desktop: 960px + 2 * $gap !default;

// 1152px container + 4rem
$widescreen: 1152px + 2 * $gap !default;
$widescreen-enabled: true !default;

// 1344px container + 4rem
$fullhd: 1344px + 2 * $gap !default;
$fullhd-enabled: true !default;

// Miscellaneous

$easing: ease-out !default;
$radius-small: 2px !default;
$radius: 4px !default;
$radius-large: 6px !default;
$radius-rounded: 290486px !default;
$speed: 86ms !default;

// Flags

$variable-columns: true !default;

$primary: $turquoise !default;

$info: $cyan !default;
$success: $green !default;
$warning: $yellow !default;
$danger: $red !default;

$light: $white-ter !default;
$dark: $grey-darker !default;

// Invert colors

$orange-invert: findColorInvert($orange) !default;
$yellow-invert: findColorInvert($yellow) !default;
$green-invert: findColorInvert($green) !default;
$turquoise-invert: findColorInvert($turquoise) !default;
$cyan-invert: findColorInvert($cyan) !default;
$blue-invert: findColorInvert($blue) !default;
$purple-invert: findColorInvert($purple) !default;
$red-invert: findColorInvert($red) !default;

$primary-invert: $turquoise-invert !default;
$info-invert: $cyan-invert !default;
$success-invert: $green-invert !default;
$warning-invert: $yellow-invert !default;
$danger-invert: $red-invert !default;
$light-invert: $dark !default;
$dark-invert: $light !default;

// General colors

$background: $white-ter !default;

$border: $grey-lighter !default;
$border-hover: $grey-light !default;

// Text colors

$text: $grey-dark !default;
$text-invert: findColorInvert($text) !default;
$text-light: $grey !default;
$text-strong: $grey-darker !default;

// Code colors

$code: $red !default;
$code-background: $background !default;

$pre: $text !default;
$pre-background: $background !default;

// Link colors

$link: $blue !default;
$link-invert: $blue-invert !default;
$link-visited: $purple !default;

$link-hover: $grey-darker !default;
$link-hover-border: $grey-light !default;

$link-focus: $grey-darker !default;
$link-focus-border: $blue !default;

$link-active: $grey-darker !default;
$link-active-border: $grey-dark !default;

// Typography

$family-primary: $family-sans-serif !default;
$family-code: $family-monospace !default;

$size-small: $size-7 !default;
$size-normal: $size-6 !default;
$size-medium: $size-5 !default;
$size-large: $size-4 !default;

// Lists and maps
$custom-colors: null !default;
$custom-shades: null !default;

$colors: mergeColorMaps(
  (
    'white': (
      $white,
      $black
    ),
    'black': (
      $black,
      $white
    ),
    'light': (
      $light,
      $light-invert
    ),
    'dark': (
      $dark,
      $dark-invert
    ),
    'primary': (
      $primary,
      $primary-invert
    ),
    'link': (
      $link,
      $link-invert
    ),
    'info': (
      $info,
      $info-invert
    ),
    'success': (
      $success,
      $success-invert
    ),
    'warning': (
      $warning,
      $warning-invert
    ),
    'danger': (
      $danger,
      $danger-invert
    )
  ),
  $custom-colors
) !default;
$shades: mergeColorMaps(
  (
    'black-bis': $black-bis,
    'black-ter': $black-ter,
    'grey-darker': $grey-darker,
    'grey-dark': $grey-dark,
    'grey': $grey,
    'grey-light': $grey-light,
    'grey-lighter': $grey-lighter,
    'white-ter': $white-ter,
    'white-bis': $white-bis
  ),
  $custom-shades
) !default;

$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;