simple-colors-scss - npm Package Compare versions

Comparing version 0.0.3 to 0.4.0

package.json

 {
   "name": "simple-colors-scss",
-  "version": "0.0.3",
+  "version": "0.4.0",
   "description": "Simple color management for SCSS",
@@ -8,10 +8,10 @@ "main": "_core.scss",
     "test": "test",
-    "postinstall": "cp _colors.scss ../../"
+    "create": "cp _colors.scss ../../"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/billiebobbel23/simple-colors-scss.git"
+    "url": "git+https://github.com/billiebobbel23/simple-colors-scss-npm.git"
   },
   "keywords": [
-    "scss", "css", "color", "colour", "color management"
+    "scss", "css", "color", "colour", "color management", "design systems", "modular", "tiny"
   ],
@@ -21,5 +21,5 @@ "author": "Ralph van Barneveld",
   "bugs": {
-    "url": "https://github.com/billiebobbel23/simple-colors-scss/issues"
+    "url": "https://github.com/billiebobbel23/simple-colors-scss-npm/issues"
   },
-  "homepage": "https://github.com/billiebobbel23/simple-colors-scss#readme"
+  "homepage": "https://github.com/billiebobbel23/simple-colors-scss-npm#readme"
 }

readme.md

@@ -6,47 +6,98 @@ # simple-colors-scss
 
+![version](https://img.shields.io/npm/v/simple-colors-scss.svg)
+![size](https://img.shields.io/bundlephobia/minzip/simple-colors-scss)
 ![stats](https://david-dm.org/BillieBobbel23/simple-colors-scss/status.svg)
-![statsdev](https://david-dm.org/BillieBobbel23/ simple-colors-scss/dev-status.svg)
 
-## Installation
+## Installation:
 
-Install the package via NPM:
+Install the package using [NPM](https://www.npmjs.com/get-npm):  
+`` npm install simple-colors-scss --save``  
 
-`` npm install simple-colors-scss --save-dev ``
+## Setup:
 
-After installation an empty template, ``_colors.scss`` will be created outside of the node_modules folder.
+Create a empty theme file from the project directory:  
+``npm run create --prefix ./node_modules/simple-colors-scss``  
 
+Import the package and newly created ``_colors.scss`` into your stylesheet (before other logic):  
 
-Import the NPM package and colors.scss in your stylesheet before other logic:
 ```
-@import 'your_project/node_modules/simple-colors-scss/functions';
-@import 'your_project/colors';
+1. @import 'your_project/node_modules/simple-colors-scss/core';
+2. @import 'your_project/colors';
 ```
 
-## Usage
+## Setting colors:
 
-By default the function ``color()`` is used to get a value from it's name.  
-It's quite versatile and can contain most values like HEX, RGB, RGBA, HSL and some meta values.  
+A color scheme is a map of color codes and bindings inside ``_colors.scss``.  
 
+Add unique colors to the ``$colors`` variable:  
+*(These use [name-that-color](http://chir.ag/projects/name-that-color/#6195ED))*
+
 ```
-// These are all valid values
-'hex': #123456,
-'rgb': rgb(255,0,128),
-'rgba' rgba(255,255,255, .33),
-'none': transparent,
+  $colors: {
+    // Named colors (HEX):
+    'white': #FFF,
+    'deep-orange': #BDBDBD,
+    'alizarin-crimson': #E32636
+    
+    // but we can use other color systems:
+    'purple-rgb': rgb(255,0,128),
+    'white-rgba-33' rgba(255,255,255, .33),
+    'blue-hsl': hsl(240, 100%, 50%),
+
+    // or metavalues
+    'transparent': transparent 
+  }
+``` 
+  
+Next add custom bindings, shorthands and variations to ``$bindings`` using the [color()](#using-color()) function:
+
+  ```
+  $binding: {
+    // use shorthands
+    'orange': color('deep-orange'), 
+    'pink': color('alizarin-crimson'),
+
+    // or variations
+    'orange-light': lighten(color('deep-orange'), 30%),
+    'orange-dark': darken(color('deep-orange'), 30%),
+
+    // or theming
+    'primary': color('alizarin-crimson'),
+    'primary-text': color('white'),
+    
+    // or complex colors
+    'border-y': color('orange-dark') color('none'),
+    'gradient': linear-gradient(to left, color('deep-orange'), color('alizarin-crimson'))
+  }
+  ```
+
+## Using color():
+
+Next to ``$bindings`` the ``color()`` function is used in your regular SCSS to fetch colors:
+
 ```
+background-image: color("blue-hsl");
+``` 
 
-## Customisation
+Check out [simple-colors-scss-helpers](https://github.com/billiebobbel23/simple-color-scss-helpers) for mixins
 
-Within ``_colors.scss`` apply your primary colors in the ``$colors`` variable.  
-Next add bindings and variations using the color() function.
+```
+@import "your/project/node_modules/simple-colors-scss";
+@include bg('blue-hsl'); // will produce the same
+```
 
-**Basic example:**
+
+
+If the value is either indefined or unknow it will fail gracefully.
+
+// @debug "Unknown color: `#{$key}` found, value could not be set";
 ```
-$colors: {
-  'deep-orange': #BDBDBD
-}
-$binding: {
-  'sidebar': color('gray'),
-  'sidebar-text': darken(color('gray'), 60%)
-}
+
+## Use it:
+
+Now you can do things like:
 ```
+color: color('white');
+background-color(color('orange-dark'));
+border: 1px solid color('border-y');
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4002

increased by61.63%

Number of lines in readme file

103

increased by98.08%

Number of high supply chain risk alerts

0

decreased by-100%

No dependency changes