bourbon 5.0.0.beta.5 → 5.0.0.beta.6

data/core/bourbon/library/_hide-visually.scss

@@ -54,7 +54,7 @@
     padding: 0;
     position: absolute;
     width: 1px;
-  } @elseif $toggle == "unhide" {
+  } @else if $toggle == "unhide" {
     clip: auto;
     clip-path: none;
     height: auto;

data/core/bourbon/library/_margin.scss

@@ -7,15 +7,24 @@
 ///   List of margin values, defined as CSS shorthand.
 ///
 /// @example scss
-///   .element {
-///     @include margin(null 10px 3em 20vh);
+///   .element-one {
+///     @include margin(null auto);
+///   }
+///
+///   .element-two {
+///     @include margin(10px 3em 20vh null);
 ///   }
 ///
 /// @example css
-///   .element {
-///     margin-bottom: 3em;
-///     margin-left: 20vh;
-///     margin-right: 10px;
+///   .element-one {
+///     margin-left: auto;
+///     margin-right: auto;
+///   }
+///
+///   .element-two {
+///     margin-bottom: 20vh;
+///     margin-right: 3em;
+///     margin-top: 10px;
 ///   }
 ///
 /// @require {mixin} _directional-property

data/core/bourbon/library/_modular-scale.scss

@@ -57,12 +57,12 @@
 ///     font-size: 1.728em;
 ///   }
 ///
-/// @require {function} _bourbon-get-setting
+/// @require {function} _retrieve-bourbon-setting
 
 @function modular-scale(
     $increment,
-    $value: _bourbon-get-setting("modular-scale-base"),
-    $ratio: _bourbon-get-setting("modular-scale-ratio")
+    $value: _retrieve-bourbon-setting("modular-scale-base"),
+    $ratio: _retrieve-bourbon-setting("modular-scale-ratio")
   ) {
 
   $v1: nth($value, 1);

data/core/bourbon/library/_padding.scss

@@ -7,15 +7,24 @@
 ///   List of padding values, defined as CSS shorthand.
 ///
 /// @example scss
-///   .element {
-///     @include padding(12vh null 10px 5%);
+///   .element-one {
+///     @include padding(null 1rem);
+///   }
+///
+///   .element-two {
+///     @include padding(10vh null 10px 5%);
 ///   }
 ///
 /// @example css
-///   .element {
+///   .element-one {
+///     padding-left: 1rem;
+///     padding-right: 1rem;
+///   }
+///
+///   .element-two {
 ///     padding-bottom: 10px;
 ///     padding-left: 5%;
-///     padding-top: 12vh;
+///     padding-top: 10vh;
 ///   }
 ///
 /// @require {mixin} _directional-property

data/core/bourbon/library/_prefixer.scss

@@ -13,7 +13,7 @@
 ///
 /// @example scss
 ///   .element {
-///     @include prefixer(appearance, none, webkit moz);
+///     @include prefixer(appearance, none, ("webkit", "moz"));
 ///   }
 ///
 /// @example css

data/core/bourbon/library/_shade.scss

@@ -24,5 +24,10 @@
     $percent
   ) {
 
-  @return mix(#000, $color, $percent);
+  @if not _is-color($color) {
+    @error "`#{$color}` is not a valid color for the `$color` argument in " +
+           "the `shade` mixin.";
+  } @else {
+    @return mix(#000, $color, $percent);
+  }
 }

data/core/bourbon/library/_size.scss

@@ -36,14 +36,14 @@
   @if _is-size($height) {
     height: $height;
   } @else {
-    @error "`#{$height}` is not a valid length for the `$height` parameter " +
+    @error "`#{$height}` is not a valid length for the `$height` argument " +
            "in the `size` mixin.";
   }
 
   @if _is-size($width) {
     width: $width;
   } @else {
-    @error "`#{$width}` is not a valid length for the `$width` parameter " +
+    @error "`#{$width}` is not a valid length for the `$width` argument " +
            "in the `size` mixin.";
   }
 }

data/core/bourbon/library/_text-inputs.scss

@@ -1,13 +1,19 @@
 @charset "UTF-8";
 
-/// Generates variables for all text-based inputs. Please note that you must use
-/// interpolation on the variable: `#{$all-text-inputs}`.
-///
+////
 /// @type list
 ///
+/// @require {function} _assign-inputs
+///
+/// @require {variable} $_text-inputs-list
+////
+
+/// A list of all _text-based_ HTML inputs. Please note that you must
+/// interpolate the variable (`#{}`) to use it as a selector.
+///
 /// @example scss
 ///   #{$all-text-inputs} {
-///     border: 1px solid #f00;
+///     border: 1px solid #ccc;
 ///   }
 ///
 /// @example css
@@ -27,13 +33,49 @@
 ///   [type='week'],
 ///   input:not([type]),
 ///   textarea {
-///     border: 1px solid #f00;
+///     border: 1px solid #ccc;
 ///   }
+
+$all-text-inputs: _assign-inputs($_text-inputs-list);
+
+/// A list of all _text-based_ HTML inputs with the `:active` pseudo-class
+/// applied. Please note that you must interpolate the variable (`#{}`) to use
+/// it as a selector.
 ///
 /// @example scss
-///   #{$all-text-inputs-focus},
-///   #{$all-text-inputs-hover} {
-///     border: 1px solid #0f0;
+///   #{$all-text-inputs-active} {
+///     border: 1px solid #aaa;
+///   }
+///
+/// @example css
+///   [type='color']:active,
+///   [type='date']:active,
+///   [type='datetime']:active,
+///   [type='datetime-local']:active,
+///   [type='email']:active,
+///   [type='month']:active,
+///   [type='number']:active,
+///   [type='password']:active,
+///   [type='search']:active,
+///   [type='tel']:active,
+///   [type='text']:active,
+///   [type='time']:active,
+///   [type='url']:active,
+///   [type='week']:active,
+///   input:not([type]):active,
+///   textarea:active {
+///     border: 1px solid #aaa;
+///   }
+
+$all-text-inputs-active: _assign-inputs($_text-inputs-list, active);
+
+/// A list of all _text-based_ HTML inputs with the `:focus` pseudo-class
+/// applied. Please note that you must interpolate the variable (`#{}`) to use
+/// it as a selector.
+///
+/// @example scss
+///   #{$all-text-inputs-focus} {
+///     border: 1px solid #1565c0;
 ///   }
 ///
 /// @example css
@@ -52,7 +94,22 @@
 ///   [type='url']:focus,
 ///   [type='week']:focus,
 ///   input:not([type]):focus,
-///   textarea:focus,
+///   textarea:focus {
+///     border: 1px solid #1565c0;
+///   }
+
+$all-text-inputs-focus: _assign-inputs($_text-inputs-list, focus);
+
+/// A list of all _text-based_ HTML inputs with the `:hover` pseudo-class
+/// applied. Please note that you must interpolate the variable (`#{}`) to use
+/// it as a selector.
+///
+/// @example scss
+///   #{$all-text-inputs-hover} {
+///     border: 1px solid #aaa;
+///   }
+///
+/// @example css
 ///   [type='color']:hover,
 ///   [type='date']:hover,
 ///   [type='datetime']:hover,
@@ -69,57 +126,38 @@
 ///   [type='week']:hover,
 ///   input:not([type]):hover,
 ///   textarea:hover {
-///     border: 1px solid #0f0;
+///     border: 1px solid #aaa;
 ///   }
+
+$all-text-inputs-hover: _assign-inputs($_text-inputs-list, hover);
+
+/// A list of all _text-based_ HTML inputs with the `:invalid` pseudo-class
+/// applied. Please note that you must interpolate the variable (`#{}`) to use
+/// it as a selector.
 ///
 /// @example scss
-///   #{$all-text-inputs-active} {
+///   #{$all-text-inputs-invalid} {
 ///     border: 1px solid #00f;
 ///   }
 ///
 /// @example css
-///   [type='color']:active,
-///   [type='date']:active,
-///   [type='datetime']:active,
-///   [type='datetime-local']:active,
-///   [type='email']:active,
-///   [type='month']:active,
-///   [type='number']:active,
-///   [type='password']:active,
-///   [type='search']:active,
-///   [type='tel']:active,
-///   [type='text']:active,
-///   [type='time']:active,
-///   [type='url']:active,
-///   [type='week']:active,
-///   input:not([type]):active,
-///   textarea:active {
+///   [type='color']:invalid,
+///   [type='date']:invalid,
+///   [type='datetime']:invalid,
+///   [type='datetime-local']:invalid,
+///   [type='email']:invalid,
+///   [type='month']:invalid,
+///   [type='number']:invalid,
+///   [type='password']:invalid,
+///   [type='search']:invalid,
+///   [type='tel']:invalid,
+///   [type='text']:invalid,
+///   [type='time']:invalid,
+///   [type='url']:invalid,
+///   [type='week']:invalid,
+///   input:not([type]):invalid,
+///   textarea:invalid {
 ///     border: 1px solid #00f;
 ///   }
-///
-/// @require {function} _assign-inputs
-
-$text-inputs-list: (
-  "[type='color']",
-  "[type='date']",
-  "[type='datetime']",
-  "[type='datetime-local']",
-  "[type='email']",
-  "[type='month']",
-  "[type='number']",
-  "[type='password']",
-  "[type='search']",
-  "[type='tel']",
-  "[type='text']",
-  "[type='time']",
-  "[type='url']",
-  "[type='week']",
-  "input:not([type])",
-  "textarea",
-);
 
-$all-text-inputs:         _assign-inputs($text-inputs-list);
-$all-text-inputs-active:  _assign-inputs($text-inputs-list, active);
-$all-text-inputs-focus:   _assign-inputs($text-inputs-list, focus);
-$all-text-inputs-hover:   _assign-inputs($text-inputs-list, hover);
-$all-text-inputs-invalid: _assign-inputs($text-inputs-list, invalid);
+$all-text-inputs-invalid: _assign-inputs($_text-inputs-list, invalid);

data/core/bourbon/library/_tint.scss

@@ -24,5 +24,10 @@
     $percent
   ) {
 
-  @return mix(#fff, $color, $percent);
+  @if not _is-color($color) {
+    @error "`#{$color}` is not a valid color for the `$color` argument in " +
+           "the `tint` mixin.";
+  } @else {
+    @return mix(#fff, $color, $percent);
+  }
 }

data/core/bourbon/library/_triangle.scss

@@ -45,6 +45,9 @@
     ) {
     @error "Direction must be `up`, `up-right`, `right`, `down-right`, " +
            "`down`, `down-left`, `left` or `up-left`.";
+  } @else if not _is-color($color) {
+    @error "`#{$color}` is not a valid color for the `$color` argument in " +
+           "the `triangle` mixin.";
   } @else {
     border-style: solid;
     height: 0;

data/core/bourbon/library/_value-prefixer.scss

@@ -0,0 +1,38 @@
+@charset "UTF-8";
+
+/// Generates vendor prefixes for values.
+///
+/// @argument {string} $property
+///   Property to use.
+///
+/// @argument {string} $value
+///   Value to prefix.
+///
+/// @argument {list} $prefixes
+///   Vendor prefixes to output.
+///
+/// @example scss
+///   .element {
+///     @include value-prefixer(cursor, grab, ("webkit", "moz"));
+///   }
+///
+/// @example css
+///   .element {
+///     cursor: -webkit-grab;
+///     cursor: -moz-grab;
+///     cursor: grab;
+///   }
+///
+/// @author Matthew Tobiasz
+
+@mixin value-prefixer(
+    $property,
+    $value,
+    $prefixes: ()
+  ) {
+
+  @each $prefix in $prefixes {
+    #{$property}: #{"-" + $prefix + "-" + $value};
+  }
+  #{$property}: $value;
+}

data/core/bourbon/settings/_settings.scss

@@ -34,8 +34,18 @@ $_bourbon-defaults: (
   "rails-asset-pipeline": false,
 );
 
-/// User overrides of Bourbon configuration settings
+/// User overrides of Bourbon configuration settings.
 ///
 /// @type map
+///
+/// @example scss
+///   $bourbon: (
+///     "contrast-switch-dark-color": #000,
+///     "contrast-switch-light-color": #fff,
+///     "global-font-file-formats": ("ttf", "woff2", "woff"),
+///     "modular-scale-base": 1em,
+///     "modular-scale-ratio": $major-third,
+///     "rails-asset-pipeline": false,
+///   );
 
 $bourbon: () !default;

data/core/bourbon/utilities/{_bourbon-get-setting.scss → _retrieve-bourbon-setting.scss}

@@ -7,10 +7,10 @@
 /// @return {boolean | color | list | number | string}
 ///
 /// @example scss
-///   _bourbon-get-setting(rails-asset-pipeline)
+///   _retrieve-bourbon-setting(rails-asset-pipeline)
 ///
 /// @access private
 
-@function _bourbon-get-setting($setting) {
+@function _retrieve-bourbon-setting($setting) {
   @return map-get(map-merge($_bourbon-defaults, $bourbon), $setting);
 }

data/core/bourbon/validators/_is-color.scss

@@ -0,0 +1,13 @@
+@charset "UTF-8";
+
+/// Checks for a valid CSS color.
+///
+/// @argument {string} $color
+///
+/// @return {boolean}
+///
+/// @access private
+
+@function _is-color($color) {
+  @return (type-of($color) == color) or ($color == "currentColor");
+}

data/lib/bourbon/version.rb

@@ -1,3 +1,3 @@
 module Bourbon
-  VERSION = "5.0.0.beta.5"
+  VERSION = "5.0.0.beta.6"
 end

data/package.json

@@ -29,5 +29,5 @@
   "scripts": {
     "test": "bundle exec rake"
   },
-  "version": "5.0.0-beta.5"
+  "version": "5.0.0-beta.6"
 }

data/spec/bourbon/library/prefixer_spec.rb

@@ -0,0 +1,34 @@
+require "spec_helper"
+
+describe "prefixer" do
+  before(:all) do
+    ParserSupport.parse_file("library/prefixer")
+  end
+
+  context "called with no prefixes" do
+    it "outputs the spec" do
+      rule = "appearance: none;"
+
+      expect(".prefix").to have_ruleset(rule)
+    end
+  end
+
+  context "called with one prefix" do
+    it "applies the prefix to the property" do
+      rule = "-webkit-appearance: none; " +
+             "appearance: none;"
+
+      expect(".prefix--webkit").to have_ruleset(rule)
+    end
+  end
+
+  context "called with multiple prefixes" do
+    it "applies the prefixes to the property" do
+      rule = "-moz-appearance: none; " +
+             "-ms-appearance: none; " +
+             "appearance: none;"
+
+      expect(".prefix--moz-ms").to have_ruleset(rule)
+    end
+  end
+end