Jump to main content

Functions

Vanilla has several global functions used across multiple components or utilities, which can be also be used when building custom components.

URL-friendly color

This function is used to inject Vanilla color variables into inline vector graphics by converting all # with the HTML encoded %23.

@function vf-url-friendly-color($color) {
  @if type-of($color) != 'color' {
    @warn '#{$color} is not a color.';
    @return $color;
  } @else {
    @return '%23' + str-slice('#{$color}', 2, -1);
  }
}

Determine text color

This function tests the value of the background's colour and returns light or dark text accordingly.

@function vf-determine-text-color($background-color) {
  @if (lightness($background-color) > 50) {
    @return $color-dark;
  } @else {
    @return $color-x-light;
  }
}

Power function

This function raises a given number to a given power.

@function pow($number, $exponent) {
  $value: 1;

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

  @return $value;
}

Highlight bar

This function adds a 3px thick, coloured bar to one side of a component (for example in Notification, Navigation and Tab components). The $over-border argument determines whether the bar sits on top of a component with borders.

@mixin vf-highlight-bar($bg-color: $color-mid-dark, $position: top, $over-border: false) {
  position: relative;

  &::before {
    #{$position}: 0;
    background-color: $bg-color;
    content: '';
    position: absolute;
  }

  @if $position == top or $position == bottom {
    &::before {
      height: $bar-thickness;
      width: auto;

      @if $over-border == true {
        left: -1px;
        right: -1px;
        z-index: 1;
      } @else {
        left: 0;
        right: 0;
      }
    }
  } @else if $position == left or $position == right {
    &::before {
      height: auto;
      width: $bar-thickness;

      @if $over-border == true {
        bottom: -1px;
        top: -1px;
        z-index: 1;
      } @else {
        bottom: 0;
        top: 0;
      }
    }
  }
}