chroma-sass - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

bower.json

 {
   "name": "chroma",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "homepage": "https://github.com/JohnAlbin/chroma",
@@ -21,4 +21,4 @@ "authors": [
     "sache.json",
-    "tests"
+    "test"
   ]
 }

docs/homepage.md

@@ -5,2 +5,8 @@ # About Chroma
 
+The code for Chroma is available on GitHub: https://github.com/JohnAlbin/chroma
+
+## VERSION
+
+These docs are for Chroma 1.1.0.
+
 ## USAGE
@@ -14,3 +20,3 @@
 // 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.');
 
@@ -20,6 +26,10 @@ // Add colors to the default color scheme.
   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',
 ));
@@ -32,5 +42,2 @@
 $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
@@ -41,7 +48,11 @@ // though the "functional" color scheme doesn't define "black", it inherits
 
-  // 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%)
 ));
@@ -66,2 +77,3 @@
   }
+
   a {
@@ -71,5 +83,17 @@ // Outputs #0e71b8.
 
+    &: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);
+      }
     }
@@ -82,4 +106,8 @@ }
 
-Chroma is distributed as a Ruby Gem. On your computer, simply run:
+Chroma can be installed either as a Ruby Gem, as a Bower component, or as a NPM module.
 
+## Ruby Sass Installation
+
+On your computer, simply run:
+
 ```sh
@@ -106,1 +134,41 @@ gem install chroma-sass
 ```
+
+## Bower installation
+
+On your computer, simply run:
+
+```sh
+bower install chroma --save-dev
+```
+
+You can then start using Chroma in your Sass files. Just add this line to one of your .sass or .scss files and start creating!
+
+```scss
+@import "../path/to/bower_components/chroma/sass/chroma";
+```
+
+Alternatively, you can add the `bower_components/chroma/sass` path to your Sass tool's import paths and then use the simpler:
+
+```scss
+@import "chroma";
+```
+
+## NPM installation
+
+On your computer, simply run:
+
+```sh
+npm install chroma-sass --save-dev
+```
+
+You can then start using Chroma in your Sass files. Just add this line to one of your .sass or .scss files and start creating!
+
+```scss
+@import "../path/to/node_modules/chroma-sass/sass/chroma";
+```
+
+Alternatively, you can add the `node_modules/chroma-sass/sass` path to your Sass tool's import paths and then use the simpler:
+
+```scss
+@import "chroma";
+```

package.eyeglass.json

 {
   "name": "chroma-sass",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.1",
   "homepage": "https://github.com/JohnAlbin/chroma",
@@ -18,3 +18,3 @@ "author": "John Albin Wilkins <[e-mail]> (http://john.albin.net/)",
   "directories": {
-    "test": "tests"
+    "test": "test"
   },
@@ -24,9 +24,15 @@ "dependencies": {
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "chai": "^3.2.0",
+    "kss": "kss-node/kss-node",
+    "mocha": "^2.2.5",
+    "sassy-test": "^1.0.0"
+  },
   "scripts": {
-    "test": "cd tests; bundle exec rake"
+    "test": "mocha",
+    "docs": "kss-node --source sass --source docs --destination gh-pages --homepage homepage.md --title 'Chroma for Sass'"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/JohnAlbin/chroma.git"
+    "url": "git://github.com/JohnAlbin/chroma.git"
   },
@@ -33,0 +39,0 @@ "bugs": {

package.json

 {
   "name": "chroma-sass",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "homepage": "https://github.com/JohnAlbin/chroma",
@@ -13,10 +13,13 @@ "author": "John Albin Wilkins <[e-mail]> (http://john.albin.net/)",
   "directories": {
-    "test": "tests"
+    "test": "test"
   },
   "dependencies": {},
   "devDependencies": {
-    "kss": "kss-node/kss-node"
+    "chai": "^3.2.0",
+    "kss": "kss-node/kss-node",
+    "mocha": "^2.2.5",
+    "sassy-test": "^1.0.1"
   },
   "scripts": {
-    "test": "cd tests; bundle exec rake",
+    "test": "mocha",
     "docs": "kss-node --source sass --source docs --destination gh-pages --homepage homepage.md --title 'Chroma for Sass'"
@@ -26,3 +29,3 @@ },
     "type": "git",
-    "url": "git+https://github.com/JohnAlbin/chroma.git"
+    "url": "git://github.com/JohnAlbin/chroma.git"
   },
@@ -29,0 +32,0 @@ "bugs": {

README.md

@@ -7,3 +7,3 @@ # About Chroma
 
-~~Betters docs are coming, but~~ Better docs are now available at http://johnalbin.github.io/chroma/ and here's some quick documentation in the form of example code.
+Full documentation is available at [http://johnalbin.github.io/chroma/](http://johnalbin.github.io/chroma/). But here are some quick examples to give you an idea of what Chroma can do.
 
@@ -14,3 +14,3 @@ ```scss
 // 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.');
 
@@ -20,6 +20,10 @@ // Add colors to the default color scheme.
   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',
 ));
@@ -32,5 +36,2 @@
 $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
@@ -41,7 +42,11 @@ // though the "functional" color scheme doesn't define "black", it inherits
 
-  // 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%)
 ));
@@ -66,2 +71,3 @@
   }
+
   a {
@@ -71,5 +77,17 @@ // Outputs #0e71b8.
 
+    &: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);
+      }
     }
@@ -82,34 +100,9 @@ }
 
-Chroma is distributed as a Ruby Gem. On your computer, simply run:
+Chroma can be installed either as a Ruby Gem, as a Bower component, or as a NPM module. See [Chroma’s online documentation](http://johnalbin.github.io/chroma/) for more information.
 
-```sh
-gem install chroma-sass
-```
-
-If you are using Bundler (and you should!) then you can add it to an existing project by editing the project's Gemfile and adding this line:
-
-```ruby
-gem 'chroma-sass',  '~> 1.0.0'
-```
-
-If you are using Compass, edit your project's config.rb and add this line:
-
-```ruby
-require 'chroma'
-```
-
-You can then start using Chroma in your Sass files. Just add this line to one of your .sass or .scss files and start creating!
-
-```scss
-@import "chroma";
-```
-
 ## REQUIREMENTS
 
 * Sass 3.4.0 or later
+* Or LibSass 3.2.5 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
-
 ## LICENSE
@@ -116,0 +109,0 @@

test/test_functions.js

 'use strict';
 
-var should = require('chai').should(),
-  helper = require('./testHelper');
+describe('@import "chroma/functions";', function() {
+  before(function(done) {
+    sassyTest.configurePaths({
+      // Path to this suite's fixtures.
+      fixtures: path.join(__dirname, 'fixtures/functions')
+    });
+    done();
+  });
 
-describe('@import "chroma/functions";', function() {
+  describe('@function is-dangerous-color-keyword()', function() {
+    it('should recognize dangerous color keywords', function(done) {
+      sassyTest.renderFixture('is-dangerous-color-keyword/keyword', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should throw an error on dangerous color keywords', function(done) {
+      sassyTest.renderFixture('is-dangerous-color-keyword/die-on-dangerous', {}, function(error, result, expectedOutput) {
+        error.should.exist;
+        error.message.should.equal("Sass will convert lightslategray into a hexidecimal value when it uses the \\\"compressed\\\" output style and Chroma will not be able to determine if the original name was lightslategray or lightslategrey. To prevent this error, quote the keyword like this: 'lightslategray'.");
+        done();
+      });
+    });
+
+    it('should recognize compressed color keywords', function(done) {
+      var options = {outputStyle: 'compressed'};
+      sassyTest.renderFixture('is-dangerous-color-keyword/compressed-output', options, function(error, result, expectedOutput) {
+        error.should.exist;
+        error.message.should.equal('Sass has converted a color keyword into the hexidecimal value, #789, and Chroma was not be able to determine if the original name was lightslategray or lightslategrey. To prevent this error, use quotes around the keyword.');
+        done();
+      });
+    });
+  });
+
+  describe('@function is-color-keyword()', function() {
+    it('should recognize color keywords', function(done) {
+      sassyTest.renderFixture('is-color-keyword/keyword', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should convert compressed color keywords into strings', function(done) {
+      sassyTest.renderFixture('is-color-keyword/compressed-output', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+  });
+
+  describe('@function chroma-to-string()', function() {
+    it('should convert color keywords to strings', function(done) {
+      sassyTest.renderFixture('chroma-to-string', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+  });
+
+  describe('@function color()', function() {
+    it('should accept a variable number of parameters', function(done) {
+      sassyTest.renderFixture('color/variable-parameters', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should error if the color scheme does not exist', function(done) {
+      sassyTest.renderFixture('color/error-no-scheme', {}, function(error, result, expectedOutput) {
+        error.should.exist;
+        error.message.should.equal('The color scheme "404" was not found.');
+        done();
+      });
+    });
+
+    it('should error if the color does not exist', function(done) {
+      sassyTest.renderFixture('color/error-no-color', {}, function(error, result, expectedOutput) {
+        error.should.exist;
+        error.message.should.equal('The color "Earhart" was not found.');
+        done();
+      });
+    });
+
+    it('should find a color in the specified color scheme', function(done) {
+      sassyTest.renderFixture('color/active-scheme', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should find a color in a parent color scheme', function(done) {
+      sassyTest.renderFixture('color/parent-scheme', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should find a color that references another color', function(done) {
+      sassyTest.renderFixture('color/ref-color', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should find a color that references another scheme’s color', function(done) {
+      sassyTest.renderFixture('color/ref-color-scheme', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should find a color that references another scheme’s color that is overridden', function(done) {
+      sassyTest.renderFixture('color/ref-color-scheme-overridden', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should find a color that references another scheme’s color that is overridden and has a function', function(done) {
+      sassyTest.renderFixture('color/ref-color-scheme-overridden-function', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+  });
+
+  describe('@function define-color-scheme()', function() {
+    it('should add a new color scheme to Chroma', function(done) {
+      sassyTest.renderFixture('define-color-scheme/new', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should error if the parent scheme does not exist', function(done) {
+      sassyTest.renderFixture('define-color-scheme/error', {}, function(error, result, expectedOutput) {
+        error.should.exist;
+        error.message.should.equal('Cannot set the parent of scheme to "child" because the color scheme "child" was not found.');
+        done();
+      });
+    });
+  });
+
+  describe('@function define-default-color-scheme()', function() {
+    it('should update the default color scheme’s description', function(done) {
+      sassyTest.renderFixture('define-default-color-scheme/description', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should update the default color scheme’s name', function(done) {
+      sassyTest.renderFixture('define-default-color-scheme/name', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+  });
+
   describe('@function add-colors()', function() {
+    it('should accept a variable number of parameters', function(done) {
+      sassyTest.renderFixture('add-colors/arguments', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should error if the color scheme does not exist', function(done) {
+      sassyTest.renderFixture('add-colors/error-scheme', {}, function(error, result, expectedOutput) {
+        error.should.exist;
+        error.message.should.equal('The color scheme "child" was not found.');
+        done();
+      });
+    });
+
+    it('should error if the color reference does not exist', function(done) {
+      sassyTest.renderFixture('add-colors/error-ref', {}, function(error, result, expectedOutput) {
+        error.should.exist;
+        error.message.should.equal('The color "bermuda" was not found when adding the color "blue".');
+        done();
+      });
+    });
+
+    it('should error if the color value is not a color or a string', function(done) {
+      sassyTest.renderFixture('add-colors/error-value', {}, function(error, result, expectedOutput) {
+        error.should.exist;
+        error.message.should.equal('Unexpected value, "0.5", given for color "green".');
+        done();
+      });
+    });
+
     it('should add color names that are color keywords', function(done) {
-      helper.sassRenderFixture('functions/add-colors/color-keyword', {}, function(err, result, expectedOutput) {
-        should.not.exist(err);
+      sassyTest.renderFixture('add-colors/color-keyword', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
         done();
@@ -16,8 +203,69 @@ });
     it('should add color names that are quoted color keywords', function(done) {
-      helper.sassRenderFixture('functions/add-colors/quoted-color-keyword', {}, function(err, result, expectedOutput) {
-        should.not.exist(err);
+      sassyTest.renderFixture('add-colors/quoted-color-keyword', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
         done();
       });
     });
+
+    it('should add color names that have simple color values', function(done) {
+      sassyTest.renderFixture('add-colors/simple-value', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should add color names that are references to other colors', function(done) {
+      sassyTest.renderFixture('add-colors/color-ref', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should add the color name to the "referenced by" list for each referenced color', function(done) {
+      sassyTest.renderFixture('add-colors/referenced-by', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should add color names that have function variations', function(done) {
+      sassyTest.renderFixture('add-colors/function', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should add color names that have function variations and are references', function(done) {
+      sassyTest.renderFixture('add-colors/function-ref', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should error if the color function does not exist', function(done) {
+      sassyTest.renderFixture('add-colors/error-function', {}, function(error, result, expectedOutput) {
+        error.should.exist;
+        error.message.should.equal('The function "nonexistant-function" was not found when adding the color "green".');
+        done();
+      });
+    });
   });
+
+  describe('@function define-skin()', function() {
+    it('should add a skin to Chroma', function(done) {
+      sassyTest.renderFixture('define-skin', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+  });
+
+  describe('@function define-skins()', function() {
+    it('should add a list of skins to Chroma', function(done) {
+      sassyTest.renderFixture('define-skins', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+  });
 });

test/test_internals.js

 'use strict';
 
-var should = require('chai').should(),
-  helper = require('./testHelper');
+describe('@import "chroma/internals";', function() {
+  before(function(done) {
+    sassyTest.configurePaths({
+      // Path to this suite's fixtures.
+      fixtures: path.join(__dirname, 'fixtures/internals')
+    });
+    done();
+  });
 
-describe('@import "chroma/internals";', function() {
   describe('@function chroma-has-scheme()', function() {
     it('should determine if a scheme exists or not', function(done) {
-      helper.sassRenderFixture('internals/chroma-has-scheme', {}, function(err, result, expectedOutput) {
-        should.not.exist(err);
+      sassyTest.renderFixture('chroma-has-scheme', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
         done();
@@ -18,4 +23,4 @@ });
     it('should list all schemes', function(done) {
-      helper.sassRenderFixture('internals/chroma-schemes', {}, function(err, result, expectedOutput) {
-        should.not.exist(err);
+      sassyTest.renderFixture('chroma-schemes', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
         done();
@@ -25,2 +30,82 @@ });
   });
+
+  describe('@function chroma-has-color()', function() {
+    it('should find a color in the default scheme', function(done) {
+      sassyTest.renderFixture('chroma-has-color/default-scheme', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should find a color in the active scheme', function(done) {
+      sassyTest.renderFixture('chroma-has-color/active-scheme', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should find a color in a child color scheme', function(done) {
+      sassyTest.renderFixture('chroma-has-color/child-scheme', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should find a color in a parent color scheme', function(done) {
+      sassyTest.renderFixture('chroma-has-color/parent-scheme', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+  });
+
+  describe('@function _chroma-add-name()', function() {
+    it('should add a color', function(done) {
+      sassyTest.renderFixture('_chroma-add-name', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+  });
+
+  describe('@function _chroma-init()', function() {
+    it('should be called with @import "chroma";', function(done) {
+      sassyTest.renderFixture('_chroma-init/auto', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should initialize $chroma', function(done) {
+      sassyTest.renderFixture('_chroma-init/init', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+
+    it('should not re-initialize $chroma when called repeatedly', function(done) {
+      sassyTest.renderFixture('_chroma-init/re-init', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+  });
+
+  describe('@function _is-old-libsass()', function() {
+    it('should return "true" when rendered with LibSass before 3.3.0', function(done) {
+      sassyTest.renderFixture('_is-old-libsass', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+  });
+
+  describe('@function _is-keyword-string()', function() {
+    it('should detect a color keyword in a string', function(done) {
+      sassyTest.renderFixture('_is-keyword-string', {}, function(error, result, expectedOutput) {
+        should.not.exist(error);
+        done();
+      });
+    });
+  });
 });

No alert changes

Improved metrics

Total package byte prevSize

457997

increased by15.57%

Number of package files

213

increased by232.81%

Lines of code

4248

increased by22.28%

Worsened metrics

Dev dependency count

4

increased by300%

Number of lines in readme file

105

decreased by-6.25%

No dependency changes