Add the triangle mixin back

- Remove the `inset-up`,  `inset-right`, `inset-down`, and `inset-left`
- Remove the ability to pass in a foreground-color and background-color and
  instead only have one color argument
- Add argument defaults
- Add documentation
- Simplify the Sass
- Provide helpful errors for input on the $direction argument

core/_bourbon.scss

@@ -44,4 +44,5 @@
 @import "bourbon/library/strip-unit";
 @import "bourbon/library/text-inputs";
 @import "bourbon/library/tint";
+@import "bourbon/library/triangle";
 @import "bourbon/library/word-wrap";

core/bourbon/library/_triangle.scss

@@ -0,0 +1,79 @@
+@charset "UTF-8";
+
+/// Generates a triangle pointing in a specified direction.
+///
+/// @argument {string} $direction [up]
+///   The direction the triangle should point. Accepts `up`, `up-right`,
+///   `right`, `down-right`, `down`, `down-left`, `left` or `up-left`.
+///
+/// @argument {color} $color [currentColor]
+///   Color of the triangle.
+///
+/// @argument {number (with unit)} $width [1rem]
+///   Width of the triangle.
+///
+/// @argument {number (with unit)} $height [($width / 2)]
+///   Height of the triangle.
+///
+/// @example scss
+///   .element {
+///     &::before {
+///       @include triangle(up, #b25c9c, 2rem);
+///       content: "";
+///     }
+///   }
+///
+/// @example css
+///   .element::before {
+///     border-style: solid;
+///     height: 0;
+///     width: 0;
+///     border-color: transparent transparent #b25c9c transparent;
+///     border-width: 0 1rem 1rem;
+///     content: "";
+///   }
+
+@mixin triangle(
+    $direction: up,
+    $color: currentColor,
+    $width: 1rem,
+    $height: ($width / 2)
+  ) {
+  @if not index(
+      "up" "up-right" "right" "down-right" "down" "down-left" "left" "up-left",
+      $direction
+    ) {
+    @error "Direction must be `up`, `up-right`, `right`, `down-right`, " +
+           "`down`, `down-left`, `left` or `up-left`.";
+  } @else {
+    border-style: solid;
+    height: 0;
+    width: 0;
+
+    @if $direction == "up" {
+      border-color: transparent transparent $color;
+      border-width: 0 ($width / 2) $height;
+    } @else if $direction == "up-right" {
+      border-color: transparent $color transparent transparent;
+      border-width: 0 $width $width 0;
+    } @else if $direction == "right" {
+      border-color: transparent transparent transparent $color;
+      border-width: ($height / 2) 0 ($height / 2) $width;
+    } @else if $direction == "down-right" {
+      border-color: transparent transparent $color;
+      border-width: 0 0 $width $width;
+    } @else if $direction == "down" {
+      border-color: $color transparent transparent;
+      border-width: $height ($width / 2) 0;
+    } @else if $direction == "down-left" {
+      border-color: transparent transparent transparent $color;
+      border-width: $width 0 0 $width;
+    } @else if $direction == "left" {
+      border-color: transparent $color transparent transparent;
+      border-width: ($height / 2) $width ($height / 2) 0;
+    } @else if $direction == "up-left" {
+      border-color: $color transparent transparent;
+      border-width: $width $width 0 0;
+    }
+  }
+}

spec/bourbon/library/triangle_spec.rb

@@ -0,0 +1,31 @@
+require "spec_helper"
+
+describe "triangle" do
+  before(:all) do
+    ParserSupport.parse_file("library/triangle")
+  end
+
+  context "called with defaults" do
+    it "outputs the properties" do
+      ruleset = "border-style: solid; " +
+                "height: 0; " +
+                "width: 0; " +
+                "border-color: transparent transparent currentColor; " +
+                "border-width: 0 0.5rem 0.5rem;"
+
+      expect(".triangle").to have_ruleset(ruleset)
+    end
+  end
+
+  context "called with arguments" do
+    it "outputs the properties" do
+      ruleset = "border-style: solid; " +
+                "height: 0; " +
+                "width: 0; " +
+                "border-color: #b25c9c transparent transparent; " +
+                "border-width: 20px 15px 0;"
+
+      expect(".triangle--with-arguments").to have_ruleset(ruleset)
+    end
+  end
+end

spec/fixtures/library/triangle.scss

@@ -0,0 +1,9 @@
+@import "setup";
+
+.triangle {
+  @include triangle;
+}
+
+.triangle--with-arguments {
+  @include triangle(down, #b25c9c, 30px, 20px);
+}