codelation_ui 1.0.0

data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_font-source-declaration.scss

@@ -0,0 +1,43 @@
+// Used for creating the source string for fonts using @font-face
+// Reference: http://goo.gl/Ru1bKP
+
+@function font-url-prefixer($asset-pipeline) {
+  @if $asset-pipeline == true {
+    @return font-url;
+  } @else {
+    @return url;
+  }
+}
+
+@function font-source-declaration(
+  $font-family,
+  $file-path,
+  $asset-pipeline,
+  $file-formats,
+  $font-url) {
+
+  $src: ();
+
+  $formats-map: (
+    eot:   "#{$file-path}.eot?#iefix" format("embedded-opentype"),
+    woff2: "#{$file-path}.woff2" format("woff2"),
+    woff:  "#{$file-path}.woff" format("woff"),
+    ttf:   "#{$file-path}.ttf" format("truetype"),
+    svg:   "#{$file-path}.svg##{$font-family}" format("svg")
+  );
+
+  @each $key, $values in $formats-map {
+    @if contains($file-formats, $key) {
+      $file-path: nth($values, 1);
+      $font-format: nth($values, 2);
+
+      @if $asset-pipeline == true {
+        $src: append($src, font-url($file-path) $font-format, comma);
+      } @else {
+        $src: append($src, url($file-path) $font-format, comma);
+      }
+    }
+  }
+
+  @return $src;
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_gradient-positions-parser.scss

@@ -0,0 +1,13 @@
+@function _gradient-positions-parser($gradient-type, $gradient-positions) {
+  @if $gradient-positions
+  and ($gradient-type == linear)
+  and (type-of($gradient-positions) != color) {
+    $gradient-positions: _linear-positions-parser($gradient-positions);
+  }
+  @else if $gradient-positions
+  and ($gradient-type == radial)
+  and (type-of($gradient-positions) != color) {
+    $gradient-positions: _radial-positions-parser($gradient-positions);
+  }
+  @return $gradient-positions;
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_linear-angle-parser.scss

@@ -0,0 +1,25 @@
+// Private function for linear-gradient-parser
+@function _linear-angle-parser($image, $first-val, $prefix, $suffix) {
+  $offset: null;
+  $unit-short:  str-slice($first-val, str-length($first-val) - 2, str-length($first-val));
+  $unit-long:   str-slice($first-val, str-length($first-val) - 3, str-length($first-val));
+
+  @if ($unit-long == "grad") or
+      ($unit-long == "turn") {
+    $offset: if($unit-long == "grad", -100grad * 3, -0.75turn);
+  }
+
+  @else if ($unit-short == "deg") or
+           ($unit-short == "rad") {
+    $offset: if($unit-short == "deg", -90 * 3, 1.6rad);
+  }
+
+  @if $offset {
+    $num: _str-to-num($first-val);
+
+    @return (
+      webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix,
+      spec-image: $image
+    );
+  }
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_linear-gradient-parser.scss

@@ -0,0 +1,41 @@
+@function _linear-gradient-parser($image) {
+  $image: unquote($image);
+  $gradients: ();
+  $start: str-index($image, "(");
+  $end: str-index($image, ",");
+  $first-val: str-slice($image, $start + 1, $end - 1);
+
+  $prefix: str-slice($image, 1, $start);
+  $suffix: str-slice($image, $end, str-length($image));
+
+  $has-multiple-vals: str-index($first-val, " ");
+  $has-single-position: unquote(_position-flipper($first-val) + "");
+  $has-angle: is-number(str-slice($first-val, 1, 1));
+
+  @if $has-multiple-vals {
+    $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals);
+  }
+
+  @else if $has-single-position != "" {
+    $pos: unquote($has-single-position + "");
+
+    $gradients: (
+      webkit-image: -webkit- + $image,
+      spec-image: $prefix + "to " + $pos + $suffix
+    );
+  }
+
+  @else if $has-angle {
+    // Rotate degree for webkit
+    $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix);
+  }
+
+  @else {
+    $gradients: (
+      webkit-image: -webkit- + $image,
+      spec-image: $image
+    );
+  }
+
+  @return $gradients;
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_linear-positions-parser.scss

@@ -0,0 +1,61 @@
+@function _linear-positions-parser($pos) {
+  $type: type-of(nth($pos, 1));
+  $spec: null;
+  $degree: null;
+  $side: null;
+  $corner: null;
+  $length: length($pos);
+  // Parse Side and corner positions
+  @if ($length > 1) {
+    @if nth($pos, 1) == "to" { // Newer syntax
+      $side: nth($pos, 2);
+
+      @if $length == 2 { // eg. to top
+        // Swap for backwards compatibility
+        $degree: _position-flipper(nth($pos, 2));
+      }
+      @else if $length == 3 { // eg. to top left
+        $corner: nth($pos, 3);
+      }
+    }
+    @else if $length == 2 { // Older syntax ("top left")
+      $side: _position-flipper(nth($pos, 1));
+      $corner: _position-flipper(nth($pos, 2));
+    }
+
+    @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    $spec: to $side $corner;
+  }
+  @else if $length == 1 {
+    // Swap for backwards compatibility
+    @if $type == string {
+      $degree: $pos;
+      $spec: to _position-flipper($pos);
+    }
+    @else {
+      $degree: -270 - $pos; //rotate the gradient opposite from spec
+      $spec: $pos;
+    }
+  }
+  $degree: unquote($degree + ",");
+  $spec:   unquote($spec + ",");
+  @return $degree $spec;
+}
+
+@function _position-flipper($pos) {
+  @return if($pos == left, right, null)
+         if($pos == right, left, null)
+         if($pos == top, bottom, null)
+         if($pos == bottom, top, null);
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_linear-side-corner-parser.scss

@@ -0,0 +1,31 @@
+// Private function for linear-gradient-parser
+@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) {
+  $val-1: str-slice($first-val, 1, $has-multiple-vals - 1);
+  $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val));
+  $val-3: null;
+  $has-val-3: str-index($val-2, " ");
+
+  @if $has-val-3 {
+    $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2));
+    $val-2: str-slice($val-2, 1, $has-val-3 - 1);
+  }
+
+  $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3);
+  $pos: unquote($pos + "");
+
+  // Use old spec for webkit
+  @if $val-1 == "to" {
+    @return (
+      webkit-image: -webkit- + $prefix + $pos + $suffix,
+      spec-image: $image
+    );
+  }
+
+  // Bring the code up to spec
+  @else {
+    @return (
+      webkit-image: -webkit- + $image,
+      spec-image: $prefix + "to " + $pos + $suffix
+    );
+  }
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_radial-arg-parser.scss

@@ -0,0 +1,69 @@
+@function _radial-arg-parser($g1, $g2, $pos, $shape-size) {
+  @each $value in $g1, $g2 {
+    $first-val: nth($value, 1);
+    $pos-type:  type-of($first-val);
+    $spec-at-index: null;
+
+    // Determine if spec was passed to mixin
+    @if type-of($value) == list {
+      $spec-at-index: if(index($value, at), index($value, at), false);
+    }
+    @if $spec-at-index {
+      @if $spec-at-index > 1 {
+        @for $i from 1 through ($spec-at-index - 1) {
+          $shape-size: $shape-size nth($value, $i);
+        }
+        @for $i from ($spec-at-index + 1) through length($value) {
+          $pos: $pos nth($value, $i);
+        }
+      }
+      @else if $spec-at-index == 1 {
+        @for $i from ($spec-at-index + 1) through length($value) {
+          $pos: $pos nth($value, $i);
+        }
+      }
+      $g1: null;
+    }
+
+    // If not spec calculate correct values
+    @else {
+      @if ($pos-type != color) or ($first-val != "transparent") {
+        @if ($pos-type == number)
+        or ($first-val == "center")
+        or ($first-val == "top")
+        or ($first-val == "right")
+        or ($first-val == "bottom")
+        or ($first-val == "left") {
+
+          $pos: $value;
+
+          @if $pos == $g1 {
+            $g1: null;
+          }
+        }
+
+        @else if
+           ($first-val == "ellipse")
+        or ($first-val == "circle")
+        or ($first-val == "closest-side")
+        or ($first-val == "closest-corner")
+        or ($first-val == "farthest-side")
+        or ($first-val == "farthest-corner")
+        or ($first-val == "contain")
+        or ($first-val == "cover") {
+
+          $shape-size: $value;
+
+          @if $value == $g1 {
+            $g1: null;
+          }
+
+          @else if $value == $g2 {
+            $g2: null;
+          }
+        }
+      }
+    }
+  }
+  @return $g1, $g2, $pos, $shape-size;
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_radial-gradient-parser.scss

@@ -0,0 +1,50 @@
+@function _radial-gradient-parser($image) {
+  $image: unquote($image);
+  $gradients: ();
+  $start: str-index($image, "(");
+  $end: str-index($image, ",");
+  $first-val: str-slice($image, $start + 1, $end - 1);
+
+  $prefix: str-slice($image, 1, $start);
+  $suffix: str-slice($image, $end, str-length($image));
+
+  $is-spec-syntax: str-index($first-val, "at");
+
+  @if $is-spec-syntax and $is-spec-syntax > 1 {
+    $keyword: str-slice($first-val, 1, $is-spec-syntax - 2);
+    $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
+    $pos: append($pos, $keyword, comma);
+
+    $gradients: (
+      webkit-image: -webkit- + $prefix + $pos + $suffix,
+      spec-image: $image
+    );
+  }
+
+  @else if $is-spec-syntax == 1 {
+    $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
+
+    $gradients: (
+      webkit-image: -webkit- + $prefix + $pos + $suffix,
+      spec-image: $image
+    );
+  }
+
+  @else if str-index($image, "cover") or str-index($image, "contain") {
+    @warn "Radial-gradient needs to be updated to conform to latest spec.";
+
+    $gradients: (
+      webkit-image: null,
+      spec-image: $image
+    );
+  }
+
+  @else {
+    $gradients: (
+      webkit-image: -webkit- + $image,
+      spec-image: $image
+    );
+  }
+
+  @return $gradients;
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_radial-positions-parser.scss

@@ -0,0 +1,18 @@
+@function _radial-positions-parser($gradient-pos) {
+  $shape-size: nth($gradient-pos, 1);
+  $pos:        nth($gradient-pos, 2);
+  $shape-size-spec: _shape-size-stripper($shape-size);
+
+  $pre-spec: unquote(if($pos, "#{$pos}, ", null))
+             unquote(if($shape-size, "#{$shape-size},", null));
+  $pos-spec: if($pos, "at #{$pos}", null);
+
+  $spec: "#{$shape-size-spec} #{$pos-spec}";
+
+  // Add comma
+  @if ($spec != "  ") {
+    $spec: "#{$spec},";
+  }
+
+  @return $pre-spec $spec;
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_render-gradients.scss

@@ -0,0 +1,26 @@
+// User for linear and radial gradients within background-image or border-image properties
+
+@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
+  $pre-spec: null;
+  $spec: null;
+  $vendor-gradients: null;
+  @if $gradient-type == linear {
+    @if $gradient-positions {
+      $pre-spec: nth($gradient-positions, 1);
+      $spec:     nth($gradient-positions, 2);
+    }
+  }
+  @else if $gradient-type == radial {
+    $pre-spec: nth($gradient-positions, 1);
+    $spec:     nth($gradient-positions, 2);
+  }
+
+  @if $vendor {
+    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
+  }
+  @else if $vendor == false {
+    $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
+    $vendor-gradients: unquote($vendor-gradients);
+  }
+  @return $vendor-gradients;
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_shape-size-stripper.scss

@@ -0,0 +1,10 @@
+@function _shape-size-stripper($shape-size) {
+  $shape-size-spec: null;
+  @each $value in $shape-size {
+    @if ($value == "cover") or ($value == "contain") {
+      $value: null;
+    }
+    $shape-size-spec: "#{$shape-size-spec} #{$value}";
+  }
+  @return $shape-size-spec;
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_str-to-num.scss

@@ -0,0 +1,50 @@
+//************************************************************************//
+// Helper function for linear/radial-gradient-parsers.
+// Source: http://sassmeister.com/gist/9647408
+//************************************************************************//
+@function _str-to-num($string) {
+  // Matrices
+  $strings: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
+  $numbers:  0   1   2   3   4   5   6   7   8   9;
+
+  // Result
+  $result: 0;
+  $divider: 0;
+  $minus: false;
+
+  // Looping through all characters
+  @for $i from 1 through str-length($string) {
+    $character: str-slice($string, $i, $i);
+    $index: index($strings, $character);
+
+    @if $character == "-" {
+      $minus: true;
+    }
+
+    @else if $character == "." {
+      $divider: 1;
+    }
+
+    @else {
+      @if not $index {
+        $result: if($minus, $result * -1, $result);
+        @return _convert-units($result, str-slice($string, $i));
+      }
+
+      $number: nth($numbers, $index);
+
+      @if $divider == 0 {
+        $result: $result * 10;
+      }
+
+      @else {
+        // Move the decimal dot to the left
+        $divider: $divider * 10;
+        $number: $number / $divider;
+      }
+
+      $result: $result + $number;
+    }
+  }
+  @return if($minus, $result * -1, $result);
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/settings/_asset-pipeline.scss

@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+/// A global setting to enable or disable the `$asset-pipeline` variable for all functions that accept it.
+///
+/// @type Bool
+
+$asset-pipeline: false !default;

data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/settings/_prefixer.scss

@@ -0,0 +1,9 @@
+@charset "UTF-8";
+
+/// Global variables to enable or disable vendor prefixes
+
+$prefix-for-webkit:    true !default;
+$prefix-for-mozilla:   true !default;
+$prefix-for-microsoft: true !default;
+$prefix-for-opera:     true !default;
+$prefix-for-spec:      true !default;

data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/settings/_px-to-em.scss

@@ -0,0 +1 @@
+$em-base: 16px !default;

data/app/assets/stylesheets/codelation_ui/_base_resources/functions/color.scss

@@ -0,0 +1,162 @@
+// Google's material design colors
+// @see https://www.google.com/design/spec/style/color.html
+$amber: #ffc107;
+$black: #000;
+$blue: #2196f3;
+$blue-grey: #607d8b;
+$brown: #795548;
+$cyan: #00bcd4;
+$deep-orange: #ff5722;
+$deep-purple: #673ab7;
+$green: #4caf50;
+$grey: #9e9e9e;
+$indigo: #3f51b5;
+$light-blue: #03a9f4;
+$light-green: #8bc34a;
+$lime: #cddc39;
+$orange: #ff9800;
+$pink: #e91e63;
+$purple: #9c27b0;
+$red: #f44336;
+$teal: #009688;
+$white: #fff;
+$yellow: #ffeb3b;
+
+$amber-colors: #fff8e1, #ffecb3, #ffe082, #ffd54f, #ffca28, #ffc107, #ffb300, #ffa000, #ff8f00, #ff6f00, #ffe57f, #ffd740, #ffc400, #ffab00;
+$blue-colors: #e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1, #82b1ff, #448aff, #2979ff, #2962ff;
+$blue-grey-colors: #eceff1, #cfd8dc, #b0bec5, #90a4ae, #78909c, #607d8b, #546e7a, #455a64, #37474f, #263238;
+$brown-colors: #efebe9, #d7ccc8, #bcaaa4, #a1887f, #8d6e63, #795548, #6d4c41, #5d4037, #4e342e, #3e2723;
+$cyan-colors: #e0f7fa, #b2ebf2, #80deea, #4dd0e1, #26c6da, #00bcd4, #00acc1, #0097a7, #00838f, #006064, #84ffff, #18ffff, #00e5ff, #00b8d4;
+$deep-orange-colors: #fbe9e7, #ffccbc, #ffab91, #ff8a65, #ff7043, #ff5722, #f4511e, #e64a19, #d84315, #bf360c, #ff9e80, #ff6e40, #ff3d00, #dd2c00;
+$deep-purple-colors: #ede7f6, #d1c4e9, #b39ddb, #9575cd, #7e57c2, #673ab7, #5e35b1, #512da8, #4527a0, #311b92, #b388ff, #7c4dff, #651fff, #6200ea;
+$green-colors: #e8f5e9, #c8e6c9, #a5d6a7, #81c784, #66bb6a, #4caf50, #43a047, #388e3c, #2e7d32, #1b5e20, #b9f6ca, #69f0ae, #00e676, #00c853;
+$grey-colors: #fafafa, #f5f5f5, #eeeeee, #e0e0e0, #bdbdbd, #9e9e9e, #757575, #616161, #424242, #212121;
+$indigo-colors: #e8eaf6, #c5cae9, #9fa8da, #7986cb, #5c6bc0, #3f51b5, #3949ab, #303f9f, #283593, #1a237e, #8c9eff, #536dfe, #3d5afe, #304ffe;
+$light-blue-colors: #e1f5fe, #b3e5fc, #81d4fa, #4fc3f7, #29b6f6, #03a9f4, #039be5, #0288d1, #0277bd, #01579b, #80d8ff, #40c4ff, #00b0ff, #0091ea;
+$light-green-colors: #f1f8e9, #dcedc8, #c5e1a5, #aed581, #9ccc65, #8bc34a, #7cb342, #689f38, #558b2f, #33691e, #ccff90, #b2ff59, #76ff03, #64dd17;
+$lime-colors: #f9fbe7, #f0f4c3, #e6ee9c, #dce775, #d4e157, #cddc39, #c0ca33, #afb42b, #9e9d24, #827717, #f4ff81, #eeff41, #c6ff00, #aeea00;
+$orange-colors: #fff3e0, #ffe0b2, #ffcc80, #ffb74d, #ffa726, #ff9800, #fb8c00, #f57c00, #ef6c00, #e65100, #ffd180, #ffab40, #ff9100, #ff6d00;
+$pink-colors: #fce4ec, #f8bbd0, #f48fb1, #f06292, #ec407a, #e91e63, #d81b60, #c2185b, #ad1457, #880e4f, #ff80ab, #ff4081, #f50057, #c51162;
+$purple-colors: #f3e5f5, #e1bee7, #ce93d8, #ba68c8, #ab47bc, #9c27b0, #8e24aa, #7b1fa2, #6a1b9a, #4a148c, #ea80fc, #e040fb, #d500f9, #aa00ff;
+$red-colors: #ffebee, #ffcdd2, #ef9a9a, #e57373, #ef5350, #f44336, #e53935, #d32f2f, #c62828, #b71c1c, #ff8a80, #ff5252, #ff1744, #d50000;
+$teal-colors: #e0f2f1, #b2dfdb, #80cbc4, #4db6ac, #26a69a, #009688, #00897b, #00796b, #00695c, #004d40, #a7ffeb, #64ffda, #1de9b6, #00bfa5;
+$yellow-colors: #fffde7, #fff9c4, #fff59d, #fff176, #ffee58, #ffeb3b, #fdd835, #fbc02d, #f9a825, #f57f17, #ffff8d, #ffff00, #ffea00, #ffd600;
+
+@function color($color, $number: 500) {
+  $colors: "custom";
+  $index: 6;
+  
+  @if $color == $amber {
+    $colors: $amber-colors;
+  } @else if $color == $black {
+    @return $black;
+  } @else if $color == $blue {
+    $colors: $blue-colors;
+  } @else if $color == $blue-grey {
+    $colors: $blue-grey-colors;
+  } @else if $color == $brown {
+    $colors: $brown-colors;
+  } @else if $color == $cyan {
+    $colors: $cyan-colors;
+  } @else if $color == $deep-orange {
+    $colors: $deep-orange-colors;
+  } @else if $color == $deep-purple {
+    $colors: $deep-purple-colors;
+  } @else if $color == $green {
+    $colors: $green-colors;
+  } @else if $color == $grey {
+    $colors: $grey-colors;
+  } @else if $color == $indigo {
+    $colors: $indigo-colors;
+  } @else if $color == $light-blue {
+    $colors: $light-blue-colors;
+  } @else if $color == $light-green {
+    $colors: $light-green-colors;
+  } @else if $color == $green {
+    $colors: $green-colors;
+  } @else if $color == $lime {
+    $colors: $lime-colors;
+  } @else if $color == $orange {
+    $colors: $orange-colors;
+  } @else if $color == $pink {
+    $colors: $pink-colors;
+  } @else if $color == $purple {
+    $colors: $purple-colors;
+  } @else if $color == $red {
+    $colors: $red-colors;
+  } @else if $color == $teal {
+    $colors: $teal-colors;
+  } @else if $color == $white {
+    @return $white;
+  } @else if $color == $yellow {
+    $colors: $yellow-colors;
+  }
+
+  // A non-Material Design color was given, so we'll do our best to return a
+  // similar shade of that color. Will not handle the A100-A700 numbers.
+  @if $colors == "custom" {
+    @if $number == 50 {
+      @return desaturate(lighten($color, 38%), 25%);
+    } @else if $number == 100 {
+      @return desaturate(lighten($color, 28%), 16%);
+    } @else if $number == 200 {
+      @return desaturate(lighten($color, 22%), 10%);
+    } @else if $number == 300 {
+      @return desaturate(lighten($color, 15%), 8%);
+    } @else if $number == 400 {
+      @return desaturate(lighten($color, 8%), 2%);
+    } @else if $number == 500 {
+      @return $color;
+    } @else if $number == 600 {
+      @return desaturate(darken($color, 5%), 10%);
+    } @else if $number == 700 {
+      @return desaturate(darken($color, 10%), 18%);
+    } @else if $number == 800 {
+      @return desaturate(darken($color, 16%), 16%);
+    } @else if $number == 900 {
+      @return saturate(darken($color, 35%), 20%);
+    } @else {
+      @error "Only Google Material Design colors can be used with A100-A700. Given: #{$color} #{$number}";
+    }
+  }
+
+  // Google Material Design colors will return the exact color defined by Google.
+  @if $number == 50 {
+    $index: 1;
+  } @else if $number == 100 {
+    $index: 2;
+  } @else if $number == 200 {
+    $index: 3;
+  } @else if $number == 300 {
+    $index: 4;
+  } @else if $number == 400 {
+    $index: 5;
+  } @else if $number == 500 {
+    $index: 6;
+  } @else if $number == 600 {
+    $index: 7;
+  } @else if $number == 700 {
+    $index: 8;
+  } @else if $number == 800 {
+    $index: 9;
+  } @else if $number == 900 {
+    $index: 10;
+  } @else {
+    // A100-A700 colors are available for most Google Material Design colors with a few exceptions.
+    @if $color != $blue-grey and $color != $brown and $color != $grey {
+      @if $number == A100 {
+        $index: 11;
+      } @else if $number == A200 {
+        $index: 12;
+      } @else if $number == A400 {
+        $index: 13;
+      } @else if $number == A700 {
+        $index: 14;
+      }
+    } @else {
+      @error "$blue-grey, $brown, and $grey do not have A100-A700 colors. Given: #{$number}";
+    }
+  }
+
+  @return nth($colors, $index);
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/functions/text_color.scss

@@ -0,0 +1,41 @@
+// Get the text color to go on top of Google's material design colors
+// @see https://www.google.com/design/spec/style/color.html
+@function text-color($color) {
+  $text-color: $white;
+
+  @if $color == $amber {
+    $text-color: $black;
+  } @else if $color == $black {
+    $text-color: $white;
+  } @else if $color == $cyan {
+    $text-color: $black;
+  } @else if $color == $deep-orange {
+    $text-color: $white;
+  } @else if $color == $green {
+    $text-color: $black;
+  } @else if $color == $grey {
+    $text-color: $black;
+  } @else if $color == $light-blue {
+    $text-color: $black;
+  } @else if $color == $light-green {
+    $text-color: $black;
+  } @else if $color == $green {
+    $text-color: $black;
+  } @else if $color == $lime {
+    $text-color: $black;
+  } @else if $color == $orange {
+    $text-color: $black;
+  } @else if $color == $white {
+    $text-color: $black;
+  } @else if $color == $yellow {
+    $text-color: $black;
+  } @else {
+    @if lightness($color) < 50% {
+      $text-color: $white;
+    } @else {
+      $text-color: $black;
+    }
+  }
+
+  @return $text-color;
+}