chroma-sass 1.0.1 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c2805923b354ea2912ee2510ae926166569821f7
-  data.tar.gz: 94bfffb798c22174513e3c47c562b4f566f02d98
+  metadata.gz: 08934be719ffef8dc01d76d3a5bb966b95686c88
+  data.tar.gz: a37acb0fd37e206f7c6a9c3cccfca648c4f871e9
 SHA512:
-  metadata.gz: 7d842b907fd6adc6b5957f92f1d3d67da70d47d11667e4f19aae34960466789e441a84c2d609bda42aadd347f090f00b63d3256039bfd8c6fa11d24fe51d1d09
-  data.tar.gz: 0c973e1dbeaff8632a37f7aabd5756af2f272a44e7fb68105f1371755428c958485579a3496877f5a0e464ac6bb776f7af0285bd986842015b7ba7fd53651cc9
+  metadata.gz: 69979ae8a1894ea04556d159d24e10f96dd9df4886e915722d0b931710c0bcec8121dc21d446199413c2ac796ed6aaa399c0257f3374c9d30f5e70619cd5f314
+  data.tar.gz: d093b5ca09e38354aef42f6e535ddb215a652127d9f062ed0a1be0e9a59222cee7180221973d17353bf4e2a2f17f92dd0041a59d73ae4870c18a5ed3b5b5278f

data/README.md

@@ -10,15 +10,19 @@ Full documentation is available at [http://johnalbin.github.io/chroma/](http://j
 @import "chroma";
 
 // Define the default color scheme.
-$chroma: define-default-color-scheme('Descriptive color names for use in "functional" color names below.');
+$chroma: define-default-color-scheme('Branding color names for use by "functional" color names below.');
 
 // Add colors to the default color scheme.
 $chroma: add-colors((
   white:       #fff,
-  grey-medium: #706e6c,
   black:       #000,
   blue:        #0e71b8,
   red:         #c00,
+
+  // Define a primary highlight color that has the value of our "blue" color.
+  // Note: if blue was specified without quotes, Chroma would interpret that as
+  // the color keyword blue and not a reference to the "blue" color name.
+  primary:     'blue',
 ));
 
 // Create a "functional" color scheme that inherits from the default color scheme.
@@ -26,19 +30,20 @@ $chroma: define-color-scheme('functional', 'Colors used by functional parts of t
 
 // Add colors to the functional color scheme.
 $chroma: add-colors('functional', (
-  // Define a primary highlight color.
-  primary:     'blue',
-
   // Have the "text" color use the hex value given to the "black" color. Even
   // though the "functional" color scheme doesn't define "black", it inherits
   // from the "default" color scheme where "black" is defined.
   text:        'black',
 
-  // Colors can inherit from colors named earlier in the call to add-colors().
-  heading:     'text',
+  // You can use quoted or unquoted strings to reference other color names.
+  // Note: color keywords are not considered strings unless they are quoted.
+  heading:     text,
 
   // Have the link color use the primary color.
-  link:        'primary',
+  link:        primary,
+  link-focus:  (link lighten 20%), // Set the link-focus color to the "link"
+                                   // color passed through the color
+                                   // function: lighten([color], 20%)
 ));
 
 // Create an "alternate" color scheme that inherits from the "functional" color scheme.
@@ -58,13 +63,26 @@ $chroma-active-scheme: 'functional';
     // Outputs #000.
     color: color(heading);
   }
+
   a {
     // Outputs #0e71b8.
     color: color(link);
 
+    &:focus,
+    &:hover {
+      // Outputs #3ca5f0, which is lighten(#0e71b8, 20%).
+      color: color(link-focus);
+    }
+
     .alternate-color-section & {
       // Outputs #c00.
       color: color(alternate, link);
+
+      &:focus,
+      &:hover {
+        // Outputs #ff3333, which is lighten(#c00, 20%).
+        color: color(alternate, link-focus);
+      }
     }
   }
 }
@@ -77,10 +95,7 @@ Chroma can be installed either as a Ruby Gem, as a Bower component, or as a NPM
 ## REQUIREMENTS
 
 * Sass 3.4.0 or later
-
-Note: libsass 3.2.5 or earlier does not work with chroma-sass due to a bug in
-libsass. ☹ libsass 3.3.0 should fix the bug, but it has not been tested. See
-https://github.com/JohnAlbin/chroma/issues/10
+* Or LibSass 3.2.5 or later.
 
 ## LICENSE
 

data/chroma-sass.gemspec

@@ -9,8 +9,8 @@ Gem::Specification.new do |spec|
   spec.homepage     = 'http://github.com/JohnAlbin/chroma'
   spec.rubyforge_project =
 
-  spec.version      = '1.0.1'
-  spec.date         = '2015-09-09'
+  spec.version      = '1.1.0'
+  spec.date         = '2015-09-23'
   spec.licenses     = ['GPL-2']
 
   spec.authors      = ['John Albin Wilkins']

data/sass/chroma/_functions.scss

@@ -40,23 +40,35 @@ $chroma: _chroma-init();
 //
 // Style guide: functions.is-dangerous-color-keyword
 @function is-dangerous-color-keyword($name) {
+  // First, double-check if this is a keyword in a string.
+  @if _is-keyword-string($name) {
+    @return false;
+  }
+
   @if type-of($name) == 'color' {
-    // Convert the color to a string.
-    $name: inspect($name);
+    $lookup: '';
+    @if _is-old-libsass() {
+      // Forcibly convert a color keyword into a string with a "salt".
+      $lookup: "keyword:#{$name}";
+    }
+    @else {
+      // Convert the color to a string.
+      $lookup: inspect($name);
+    }
     // Check if Sass will convert the color into a hex value that we can't
     // convert back to a keyword.
-    @if map-has-key($_chroma-dangerous-keywords, $name) {
+    @if map-has-key($_chroma-dangerous-keywords, $lookup) {
       @if $chroma-die-on-dangerous-keyword {
-        @error "Sass will convert #{$name} into a hexidecimal value when it uses the \"compressed\" output style and Chroma will not be able to determine if the original name was #{map-get($_chroma-dangerous-keywords, $name)}. To prevent this error, quote the keyword like this: '#{$name}'.";
+        @error "Sass will convert #{$name} into a hexidecimal value when it uses the \"compressed\" output style and Chroma will not be able to determine if the original name was #{map-get($_chroma-dangerous-keywords, $lookup)}. To prevent this error, quote the keyword like this: '#{$name}'.";
       }
       @else {
-        @return map-get($_chroma-dangerous-keywords, $name);
+        @return map-get($_chroma-dangerous-keywords, $lookup);
       }
     }
     // Check if Sass _has_ converted the color into a hex value that we can't
     // convert back to a keyword.
-    @else if map-has-key($_chroma-dangerous-converted-keywords, $name) {
-      @error "Sass has converted a #{$_chroma-spelling} keyword into the hexidecimal value, #{$name}, and Chroma was not be able to determine if the original name was #{map-get($_chroma-dangerous-converted-keywords, $name)}. To prevent this error, use quotes around the keyword.";
+    @else if map-has-key($_chroma-dangerous-converted-keywords, $lookup) {
+      @error "Sass has converted a #{$_chroma-spelling} keyword into the hexidecimal value, #{$name}, and Chroma was not be able to determine if the original name was #{map-get($_chroma-dangerous-converted-keywords, $lookup)}. To prevent this error, use quotes around the keyword.";
     }
   }
   @return false;
@@ -71,6 +83,11 @@ $chroma: _chroma-init();
 //
 // Style guide: functions.is-color-keyword
 @function is-color-keyword($name) {
+  // First, double-check if this is a keyword in a string.
+  @if _is-keyword-string($name) {
+    @return false;
+  }
+
   // If a real Sass color is given, it is in danger of being converted to a
   // hexadecimal value before we can read the name. And some hex values map to
   // more than one keyword (e.g. gray and grey), so the original name would be
@@ -81,11 +98,19 @@ $chroma: _chroma-init();
   // $name so we can convert it to a string.
   $is-dangerous: is-dangerous-color-keyword($name);
 
-  // Convert the color to a string.
   @if type-of($name) == 'color' {
-    $name: inspect($name);
+    $lookup: '';
+
+    @if _is-old-libsass() {
+      // Forcibly convert a color keyword into a string with a "salt".
+      $lookup: "keyword:#{$name}";
+    }
+    @else {
+      // Convert the color to a string.
+      $lookup: inspect($name);
+    }
 
-    @return if(map-has-key($_chroma-css4-color-keywords, $name), map-get($_chroma-css4-color-keywords, $name), false);
+    @return if(map-has-key($_chroma-css4-color-keywords, $lookup), map-get($_chroma-css4-color-keywords, $lookup), false);
   }
 
   @return false;
@@ -153,13 +178,34 @@ $chroma: _chroma-init();
     // and its parent schemes. But one or more of the parent colors may be
     // defined (overridden) in $scheme too, so we need to check the full
     // reference chain.
+    $chain: ();
     $ref: map-get($color, 'reference');
+    @if $ref and map-get($color, 'function') {
+      $chain: append($chain, $color);
+    }
     @while $ref {
       $actual-scheme: chroma-has-color($ref, $scheme);
       $color: map-get(map-get($chroma, 'names'), "#{$actual-scheme}::#{$ref}");
       $ref: map-get($color, 'reference');
+      // Save any color that has a function unless it is the final color in the
+      // reference chain.
+      @if $ref and map-get($color, 'function') {
+        $chain: append($chain, $color);
+      }
     }
-    @return map-get($color, 'value');
+    // Find the value for the last non-reference in the chain.
+    $value: map-get($color, 'value');
+    // If the reference chain contains functions, we need to recalculate all
+    // the values back up the chain.
+    @if length($chain) > 0 {
+      @for $i from length($chain) through 1 {
+        $function: map-get(nth($chain, $i), 'function');
+        $parameters: map-get(nth($chain, $i), 'parameters');
+        $parameters: set-nth($parameters, 1, $value);
+        $value: call($function, $parameters...);
+      }
+    }
+    @return $value;
   }
 }
 
@@ -271,19 +317,22 @@ $chroma: _chroma-init();
 //
 // Usage:
 // ```scss
-// $my-colors: add-colors('admiral', (
-//  nav:             'link',
-//  nav-visited:     color(link-visited),
-//  nav-focus:       color(link-focus),
+// $chroma: add-colors('admiral', (
+//  link:        #0000cc,
+//  nav:         link, // Sets this color to the same value as the "link" color.
+//  nav-visited: (nav darken 20%), // Takes the "nav" color and passes it
+//                                 // through darken([color], 20%)
+//  nav-focus:   (nav lighten 10%),
 // ));
 // ```
 //
 // If you wish to add colors to the active scheme, you can just use:
 // ```scss
-// $my-colors: add-colors((
-//  nav:             'link',
-//  nav-visited:     color(link-visited),
-//  nav-focus:       color(link-focus),
+// $chroma: add-colors((
+//  link:        #0000cc,
+//  nav:         link,
+//  nav-visited: (link darken 20%),
+//  nav-focus:   (link lighten 10%),
 // ));
 // ```
 //
@@ -307,28 +356,56 @@ $chroma: _chroma-init();
     // Cast the color name to a string to ensure color keywords do not cause
     // problems as map keys.
     $color-name: chroma-to-string($color-name);
+    $color-function: false;
+    $color-parameters: ();
+    // If the "value" is a list, its a value plus a function.
+    @if type-of($color-value) == 'list' {
+      $color-function: nth($color-value, 2);
+      @if not function_exists($color-function) {
+        @error 'The function "#{$color-function}" was not found when adding the #{$_chroma-spelling} "#{$color-name}".';
+      }
+      // Include the color value in the list of function parameters.
+      @for $i from 1 through length($color-value) {
+        @if $i != 2 {
+          $color-parameters: append($color-parameters, nth($color-value, $i));
+        }
+      }
+      $color-value: nth($color-value, 1);
+    }
     // If the value given is a color, just add it.
-    @if type_of($color-value) == 'color' {
+    @if type-of($color-value) == 'color' and not (_is-old-libsass() and _is-keyword-string($color-value)) {
+      @if $color-function {
+        $color-value: call($color-function, $color-parameters...);
+      }
       $chroma: _chroma-add-name($scheme, $color-name,
         $value          : $color-value,
         $reference      : false,
-        $referenced_by  : ()
+        $referenced_by  : (),
+        $function       : $color-function,
+        $parameters     : $color-parameters
       ) !global;
     }
     // If the value given is a reference to another color...
-    @else if type_of($color-value) == 'string' {
+    @else if type-of($color-value) == 'string' or (_is-old-libsass() and _is-keyword-string($color-value)) {
       $ref: $color-value;
       // Find the referenced color.
       $scheme-of-reference: chroma-has-color($ref, $scheme);
       @if not $scheme-of-reference {
-        @error 'The #{$_chroma-spelling} "#{$ref}" was not found.';
+        @error 'The #{$_chroma-spelling} "#{$ref}" was not found when adding the #{$_chroma-spelling} "#{$color-name}".';
       }
       $referenced-color: map-get(map-get($chroma, 'names'), "#{$scheme-of-reference}::#{$ref}");
       // Add the new color.
+      $new-value: map-get($referenced-color, 'value');
+      @if $color-function {
+        $color-parameters: set-nth($color-parameters, 1, $new-value);
+        $new-value: call($color-function, $color-parameters...);
+      }
       $chroma: _chroma-add-name($scheme, $color-name,
-        $value         : map-get($referenced-color, 'value'),
+        $value         : $new-value,
         $reference     : $ref,
-        $referenced_by : ()
+        $referenced_by : (),
+        $function      : $color-function,
+        $parameters    : $color-parameters
       ) !global;
       // Document the new color in all the referenced_by lists.
       @while $ref {
@@ -338,7 +415,9 @@ $chroma: _chroma-init();
           $referenced_by : append(
             map-get($referenced-color, 'referenced_by'),
             $color-name
-          )
+          ),
+          $function      : map-get($referenced-color, 'function'),
+          $parameters    : map-get($referenced-color, 'parameters')
         ) !global;
         $ref: map-get($referenced-color, 'reference');
         @if $ref {

data/sass/chroma/_internals.scss

@@ -52,13 +52,15 @@
 // variable.
 //
 // Style guide: internals._chroma-add-name
-@function _chroma-add-name($scheme, $name, $value: false, $reference: false, $referenced_by: ()) {
+@function _chroma-add-name($scheme, $name, $value: false, $reference: false, $referenced_by: (), $function: false, $parameters: ()) {
   $names: map-merge(
     map-get($chroma, 'names'),
     ("#{$scheme}::#{$name}": (
       value         : $value,
       reference     : $reference,
       referenced_by : $referenced_by,
+      function      : $function,
+      parameters    : $parameters,
     ))
   );
 
@@ -91,3 +93,39 @@
     @return $chroma;
   }
 }
+
+// is-old-libsass()
+//
+// libsass before 3.3.0 is funky, making it very hard for Chroma to do its job.
+//
+// - `inspect([color])` returns the original value instead of returning the
+//   string equivalent, so you can't cast a color to a string.
+// - `type-of('[color keyword]')` thinks that these strings are colors.
+// - `map-has-key()` works properly, thankfully. So:
+//   - `map-has-key((white: ''), white)` correctly returns `true`
+//   - `map-has-key(('white': ''), 'white')` correctly returns `true`
+//   - `map-has-key((white: ''), 'white')` correctly returns `false`
+//   - `map-has-key(('white': ''), white)` correctly returns `false`
+//   This means we can cobble together a replacement for `type-of()`. And a
+//   partial replacement for `inspect()` that works for everything except
+//   dangerous color keywords.
+//
+// @TODO: Remove when LibSass 3.2.5 support is dropped.
+//
+// Style guide: internals._is-old-libsass
+@function _is-old-libsass() {
+  @return if(type-of('white') == 'color', true, false);
+}
+
+// _is-keyword-string($name)
+//
+// Normally, `type-of()` can be used to tell if a given value is a string. But
+// LibSass versions before 3.3.0 think that color keywords in strings are still
+// colors and not strings. This function works, regardless of LibSass bugs.
+//
+// @TODO: Remove when LibSass 3.2.5 support is dropped.
+//
+// Style guide: internals._is-keyword-string
+@function _is-keyword-string($name) {
+  @return if(map-has-key($_chroma-css4-color-keywords-in-strings, $name), true, false);
+}

data/sass/chroma/_variables.scss

@@ -419,3 +419,34 @@ $_chroma-css4-color-keywords: (
   'yellowgreen': 'yellowgreen',
   '#9acd32': 'yellowgreen',
 );
+
+// libsass before 3.3.0 can't turn color keywords into strings of the same name,
+// so we have to compare map keys using keywords plus a "salt" string.
+//
+// @TODO: Remove when LibSass 3.2.5 support is dropped.
+
+$_chroma-css4-color-keywords-in-strings: ();
+@if type-of('white') == 'color' {
+  // Convert the dangerous color keyword list.
+  $_new-list: ();
+  @each $name, $string in $_chroma-dangerous-keywords {
+    $_new-list: map-merge($_new-list, ("keyword:#{$name}": $string));
+  }
+  $_chroma-dangerous-keywords: $_new-list !global;
+
+  // Convert the dangerous converted color keyword list.
+  $_new-list: ();
+  @each $name, $string in $_chroma-dangerous-converted-keywords {
+    $_new-list: map-merge($_new-list, ("keyword:#{$name}": $string));
+  }
+  $_chroma-dangerous-converted-keywords: $_new-list !global;
+
+  // Convert the css4 color keyword list, but keep a copy around to check for
+  // color keywords in strings.
+  $_chroma-css4-color-keywords-in-strings: $_chroma-css4-color-keywords !global;
+  $_new-list: ();
+  @each $name, $string in $_chroma-css4-color-keywords {
+    $_new-list: map-merge($_new-list, ("keyword:#{$name}": $string));
+  }
+  $_chroma-css4-color-keywords: $_new-list !global;
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: chroma-sass
 version: !ruby/object:Gem::Version
-  version: 1.0.1
+  version: 1.1.0
 platform: ruby
 authors:
 - John Albin Wilkins
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-09-09 00:00:00.000000000 Z
+date: 2015-09-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -61,7 +61,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project: 1.0.1
+rubyforge_project: 1.1.0
 rubygems_version: 2.4.8
 signing_key: 
 specification_version: 4