hugo-toha/assets/styles/mixins.scss

@function get-color($mode, $key) {
  @if map-has-key($themes, $mode) {
    $theme: map-get($themes, $mode);
    @if map-has-key($theme, $key) {
      @return map-get($theme, $key);
    }
  }
  @return red; // default color for debugging purpose
}

@function get-light-color($key) {
  @return get-color('light', $key);
}

@function get-dark-color($key) {
  @return get-color('dark', $key);
}

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin section-title-adjustment() {
  h1 > span {
    margin-top: -55px; /* Size of fixed header */
    padding-bottom: 55px;
    display: block;
  }
}

@mixin brand-background() {
  @each $brand, $color in $brand-colors {
    .bg-#{$brand} {
      background-color: $color;
    }
  }
}

@mixin transition() {
  transition: all $transition-type $transition-duration;
}

@mixin selection-color($theme: 'light') {
  background: get-light-color('accent-color');
  color: get-light-color('text-over-accent-color');
  @if $theme == 'dark' {
    background: get-dark-color('accent-color');
    color: get-dark-color('text-over-accent-color');
  }
}

@function get-alert-bg-color($type, $mode) {
  $colors: map-get($alerts, $type);
  @if $mode == 'light' {
    @return map-get($colors, 'bg-color');
  } @else {
    @return map-get($colors, 'text-color');
  }
  @return red;
}

@function get-alert-text-color($type, $mode) {
  $colors: map-get($alerts, $type);
  @if $mode == 'light' {
    @return map-get($colors, 'text-color');
  } @else {
    @return map-get($colors, 'bg-color');
  }
  @return red;
}