wix-style-processor - npm Package Compare versions

Comparing version 3.1.13 to 3.1.14

dist/es/src/defaultPlugins.d.ts

@@ -15,2 +15,3 @@ export declare const defaultPlugins: {
     calculate: (operator: any, ...args: any[]) => any;
+    smartContrast: (baseColor: any, contrastColorSuggestion: any) => any;
 };

dist/es/src/defaultPlugins.js

@@ -27,2 +27,9 @@ var __assign = (this && this.__assign) || function () {
 var hexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+var getNormalizedContrast = function (color1, color2) {
+    var contrast = color1.contrast(color2);
+    if (contrast < 1) {
+        contrast = 1 / contrast;
+    }
+    return contrast;
+};
 export var defaultPlugins = {
@@ -129,3 +136,20 @@ join: function (color1, strength1, color2, strength2) {
     },
+    smartContrast: function (baseColor, contrastColorSuggestion) {
+        var color = new Color(baseColor);
+        var contrastColor = new Color(contrastColorSuggestion);
+        var baseLuminosity = color.luminosity();
+        var originalContrastLuminosity = contrastColor.luminosity();
+        var ratio = baseLuminosity / originalContrastLuminosity;
+        var direction = ratio < 1 ? 1 : -1;
+        var contrast = getNormalizedContrast(color, contrastColor);
+        while (contrast < 4.5) {
+            contrastColor = contrastColor.lightness(contrastColor.lightness() + direction);
+            if (['rgb(255, 255, 255)', 'rgb(0, 0, 0)'].indexOf(contrastColor.rgb().string()) > -1) { // break if white or black
+                break;
+            }
+            contrast = getNormalizedContrast(color, contrastColor);
+        }
+        return contrastColor.rgb().string();
+    }
 };
 //# sourceMappingURL=defaultPlugins.js.map

dist/src/defaultPlugins.d.ts

@@ -15,2 +15,3 @@ export declare const defaultPlugins: {
     calculate: (operator: any, ...args: any[]) => any;
+    smartContrast: (baseColor: any, contrastColorSuggestion: any) => any;
 };

dist/src/defaultPlugins.js

@@ -29,2 +29,9 @@ "use strict";
 var hexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+var getNormalizedContrast = function (color1, color2) {
+    var contrast = color1.contrast(color2);
+    if (contrast < 1) {
+        contrast = 1 / contrast;
+    }
+    return contrast;
+};
 exports.defaultPlugins = {
@@ -131,3 +138,20 @@ join: function (color1, strength1, color2, strength2) {
     },
+    smartContrast: function (baseColor, contrastColorSuggestion) {
+        var color = new Color(baseColor);
+        var contrastColor = new Color(contrastColorSuggestion);
+        var baseLuminosity = color.luminosity();
+        var originalContrastLuminosity = contrastColor.luminosity();
+        var ratio = baseLuminosity / originalContrastLuminosity;
+        var direction = ratio < 1 ? 1 : -1;
+        var contrast = getNormalizedContrast(color, contrastColor);
+        while (contrast < 4.5) {
+            contrastColor = contrastColor.lightness(contrastColor.lightness() + direction);
+            if (['rgb(255, 255, 255)', 'rgb(0, 0, 0)'].indexOf(contrastColor.rgb().string()) > -1) { // break if white or black
+                break;
+            }
+            contrast = getNormalizedContrast(color, contrastColor);
+        }
+        return contrastColor.rgb().string();
+    }
 };
 //# sourceMappingURL=defaultPlugins.js.map

package.json

@@ -1,65 +0,1 @@
-{
-  "private": false,
-  "name": "wix-style-processor",
-  "description": "An alternative Wix Styles TPA processor",
-  "version": "3.1.13",
-  "author": {
-    "name": "Eran Shabi",
-    "email": "[e-mail]",
-    "url": ""
-  },
-  "main": "dist/src/index.js",
-  "module": "dist/es/src/index.js",
-  "types": "dist/src/index.d.ts",
-  "files": [
-    "dist/es",
-    "dist/src",
-    "README.md"
-  ],
-  "scripts": {
-    "start": "yoshi start --entry-point=./test/mock/start-fake-server.js",
-    "build": ":",
-    "pretest": "yoshi lint && yoshi build",
-    "test:unit": "yoshi test --mocha",
-    "test:e2e": "yoshi test --protractor",
-    "test": "npm run test:unit && npm run test:e2e",
-    "release": "yoshi release"
-  },
-  "dependencies": {
-    "color": "^1.0.3",
-    "parse-css-font": "^3.0.2",
-    "stylis": "^3.5.1"
-  },
-  "devDependencies": {
-    "@types/chai": "^4.1.4",
-    "@types/chai-as-promised": "^7.1.0",
-    "@types/mocha": "^5.2.4",
-    "@types/node": "^8.0.0",
-    "chai": "^4.1.2",
-    "express": "^4.16.3",
-    "express-session": "^1.15.6",
-    "jsdom": "^11.11.0",
-    "jsdom-global": "^3.0.2",
-    "mocha": "^5.2.0",
-    "protractor": "^5.3.2",
-    "sinon": "^6.1.0",
-    "ts-node": "^7.0.0",
-    "typescript": "3.6.4",
-    "velocity": "^0.7.2",
-    "yoshi": "^3.0.0",
-    "yoshi-style-dependencies": "^3.0.0"
-  },
-  "yoshi": {
-    "entry": {
-      "app": "../test/test-setup/app.ts",
-      "style-processor": "./index.ts"
-    },
-    "separateCss": false
-  },
-  "eslintConfig": {
-    "extends": "wix/esnext"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  }
-}
+{"private":false,"name":"wix-style-processor","description":"An alternative Wix Styles TPA processor","version":"3.1.14","author":{"name":"Eran Shabi","email":"[e-mail]","url":""},"main":"dist/src/index.js","module":"dist/es/src/index.js","types":"dist/src/index.d.ts","files":["dist/es","dist/src","README.md"],"scripts":{"start":"yoshi start --entry-point=./test/mock/start-fake-server.js","build":":","pretest":"yoshi lint && yoshi build","test:unit":"yoshi test --mocha","test:e2e":"yoshi test --protractor","test":"npm run test:unit && npm run test:e2e","release":"yoshi release"},"dependencies":{"color":"^1.0.3","parse-css-font":"^3.0.2","stylis":"^3.5.1"},"devDependencies":{"@types/chai":"^4.1.4","@types/chai-as-promised":"^7.1.0","@types/mocha":"^5.2.4","@types/node":"^8.0.0","chai":"^4.1.2","express":"^4.16.3","express-session":"^1.15.6","jsdom":"^11.11.0","jsdom-global":"^3.0.2","mocha":"^5.2.0","protractor":"^5.3.2","sinon":"^6.1.0","ts-node":"^7.0.0","typescript":"3.6.4","velocity":"^0.7.2","yoshi":"^3.0.0","yoshi-style-dependencies":"^3.0.0"},"yoshi":{"entry":{"app":"../test/test-setup/app.ts","style-processor":"./index.ts"},"separateCss":false},"eslintConfig":{"extends":"wix/esnext"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"gitHead":"171f8c806446140c103d092b41cc8cbabac0d094"}

README.md

@@ -30,2 +30,3 @@ # wix-style-processor
     width: "calculate(+, 2px, 4%, 3em)";                                    /* will return the native calc function for the given operator and numbers a work around for https://github.com/thysultan/stylis.js/issues/116 */
+    background-color: "smartContrast(color(--base-color), color(--contrast-color))"; /* given a base color and a suggested contrast color, returns the given contrast color if it's A11Y compliant or a lightened/darkened color that will comply */
 }
@@ -32,0 +33,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

433247

increased by1.16%

Lines of code

6764

increased by0.74%

Number of lines in readme file

151

increased by0.67%

No dependency changes