seed-color-scheme - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

index.js

@@ -5,3 +5,2 @@ var path = require('path');
 var files = pathfinder([
-  require('seed-dash'),
   path.join(__dirname, 'scss'),
@@ -8,0 +7,0 @@ ]);

package.json

 {
   "name": "seed-color-scheme",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "Color scheme system pack for Seed",
@@ -53,8 +53,8 @@ "main": "index.js",
     "node-sass": "^3.10.0",
+    "seed-barista": "0.4.0",
     "seed-bistro": "0.1.2"
   },
   "dependencies": {
-    "sass-pathfinder": "0.0.5",
-    "seed-dash": "0.0.1"
+    "sass-pathfinder": "0.0.5"
   }
 }

test/color.js

@@ -20,3 +20,3 @@ // Test :: Mixin/Function :: Color
     `);
-    var $o = output.$('.simple');
+    var $o = output.rule('.simple');
 
@@ -26,2 +26,20 @@ expect($o.prop('color')).to.equal('blue');
 
+  it('should be able to add color scheme inline with mixin', function() {
+    var output = styles(`
+      @include _color((
+        blue: green,
+      ));
+      @include _color((
+        blue: blue,
+      ));
+
+      .simple {
+        color: _color(blue);
+      }
+    `);
+    var $o = output.rule('.simple');
+
+    expect($o.prop('color')).to.equal('blue');
+  });
+
   it('should add a deep map to the color scheme', function() {
@@ -54,4 +72,4 @@ var output = styles(`
     `);
-    var $b = output.$('.deep-blue');
-    var $r = output.$('.red');
+    var $b = output.rule('.deep-blue');
+    var $r = output.rule('.red');
 
@@ -77,3 +95,3 @@ expect($b.prop('color')).to.equal('pink');
     `);
-    var $o = output.$('.simple');
+    var $o = output.rule('.simple');
 
@@ -92,4 +110,4 @@ expect($o.prop('color')).to.equal('pink');
     `);
-    var $b = output.$('.black');
-    var $w = output.$('.white');
+    var $b = output.rule('.black');
+    var $w = output.rule('.white');
 
@@ -100,2 +118,24 @@ expect($b.prop('color')).to.equal('#000');
 
+  it('should not change color if set after _color() is used', function() {
+    var output = styles(`
+      @include _color((
+        black: red,
+      ));
+      @include _color((
+        black: blue,
+      ));
+
+      .black {
+        color: _color(black);
+      }
+
+      @include _color((
+        black: yellow,
+      ));
+    `);
+    var $b = output.rule('.black');
+
+    expect($b.prop('color')).to.equal('blue');
+  });
+
   it('should be able to add multiple schemes', function() {
@@ -134,5 +174,5 @@ var output = styles(`
     `);
-    var $o = output.$('.original');
-    var $x = output.$('.override');
-    var $n = output.$('.new');
+    var $o = output.rule('.original');
+    var $x = output.rule('.override');
+    var $n = output.rule('.new');
 
@@ -181,4 +221,4 @@ expect($o.prop('color')).to.equal('green');
     `);
-    var $o = output.$('.original');
-    var $x = output.$('.override');
+    var $o = output.rule('.original');
+    var $x = output.rule('.override');
 
@@ -189,2 +229,95 @@ expect($o.prop('color')).to.equal('green');
   });
+
+  it('should be able to namespace color schemes', function() {
+    var output = styles(`
+      $color: (
+        app: (
+          blue: (
+            100: yellow,
+            200: blue,
+          ),
+        ),
+      );
+      @include _color($color);
+
+      .element {
+        color: _color(app, blue, 200);
+      }
+
+      @import "./_index";
+    `);
+    var $o = output.rule('.element');
+
+    expect($o.prop('color')).to.equal('blue');
+  });
+
+  it('should be able deep extend existing colors', function() {
+    var output = styles(`
+      $color: (
+        blue: (
+          100: yellow,
+        ),
+      );
+      @include _color($color);
+
+      .e1 {
+        color: _color(blue, 100);
+      }
+      .e2 {
+        color: _color(blue, 200);
+      }
+
+      @import "./_index";
+    `);
+    var $e1 = output.rule('.e1');
+    var $e2 = output.rule('.e2');
+
+    expect($e1.prop('color')).to.equal('yellow');
+    expect($e2.prop('color')).to.equal('#daf1ff');
+  });
+
+  it('should be able deep extend existing colors and add new colors', function() {
+    var output = styles(`
+      $color: (
+        blue: (
+          100: yellow,
+        ),
+        pink: pink,
+        fushia: (
+          ultimate: purple,
+        ),
+        red: red,
+      );
+      @include _color($color);
+
+      .e1 {
+        color: _color(blue, 100);
+      }
+      .e2 {
+        color: _color(blue, 200);
+      }
+      .e3 {
+        color: _color(pink);
+      }
+      .e4 {
+        color: _color(fushia, ultimate);
+      }
+      .e5 {
+        color: _color(red);
+      }
+
+      @import "./_index";
+    `);
+    var $e1 = output.rule('.e1');
+    var $e2 = output.rule('.e2');
+    var $e3 = output.rule('.e3');
+    var $e4 = output.rule('.e4');
+    var $e5 = output.rule('.e5');
+
+    expect($e1.prop('color')).to.equal('yellow');
+    expect($e2.prop('color')).to.equal('#daf1ff');
+    expect($e3.prop('color')).to.equal('pink');
+    expect($e4.prop('color')).to.equal('purple');
+    expect($e5.prop('color')).to.equal('red');
+  });
 });

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21578

89.07%

Dependency count

1

-50%

Number of package files

18

12.5%

Lines of code

381

102.66%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dev dependency count

4

33.33%

Dependency changes

• - Removed

  seed-dash@0.0.1

• - Removed

  seed-dash@0.0.1
  (transitive)