////
/// @author Pedr Browne
/// @group decorations
////

/// A triangle shape.
///
/// @param {Number} $length
///   The length of the triangle.
///
/// @param {String} $direction
///   The direction the triangle is pointing at (top | bottom | left | right).
///
/// @param {String} $colour
///   The colour of the triangle.
///
/// @outputs
///   A triangle.
///
@mixin triangle( $length, $direction, $colour ) {
  $adjacent: opposite-side($direction);
  border: $length solid transparent;
  border-#{$adjacent}: $length solid $colour;
  border-#{$direction}: 0;
  height:0;
  width:0;
}

/// A circle shape.
///
/// @param {Number} $diameter
///   The diameter of the circle.
///
/// @param {Number} $color
///   The colour of the circle.
///
/// @outputs
///   A circle.
///
@mixin circle($diameter, $color) {
  width: $diameter;
  height: $diameter;
  background-color: $color;
  border-radius: $diameter/2;
}
////
/// @author Pedr Browne
/// @group decorations
////

/// A triangle shape.
///
/// @param {Number} $length
///   The length of the triangle.
///
/// @param {String} $direction
///   The direction the triangle is pointing at (top | bottom | left | right).
///
/// @param {Colour} $colour
///   The colour of the triangle.
///
/// @outputs
///   A triangle.
///
@mixin triangle( $length, $direction, $colour ) {
  $adjacent: opposite-side($direction);
  border: $length solid transparent;
  border-#{$adjacent}: $length solid $colour;
  border-#{$direction}: 0;
  height:0;
  width:0;
}

/// A circle shape.
///
/// @param {Number} $diameter
///   The diameter of the circle.
///
/// @param {Colour} $color
///   The colour of the circle.
///
/// @outputs
///   A circle.
///
@mixin circle($diameter, $color) {
  width: $diameter;
  height: $diameter;
  background-color: $color;
  border-radius: $diameter/2;
}
Change type to color for shape params
Docs: Change type to color for shape params
