@khanacademy/wonder-blocks-color - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

dist/es/index.js

@@ -1,3 +0,35 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
 
+  return obj;
+}
+
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys = Object.keys(source);
+
+    if (typeof Object.getOwnPropertySymbols === 'function') {
+      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+
+    ownKeys.forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    });
+  }
+
+  return target;
+}
+
 /**
@@ -7,3 +39,2 @@ * A color manipulation library useful for dynamically
  */
-
 const color6Regexp = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;
@@ -16,79 +47,82 @@ const color3Regexp = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i;
 const parse = color => {
-    if (typeof color !== "string") {
-        throw new Error(`Failed to parse color: ${color}`);
-    }
+  if (typeof color !== "string") {
+    throw new Error(`Failed to parse color: ${color}`);
+  }
 
-    const color3Match = color.match(color3Regexp);
-    if (color3Match) {
-        return {
-            r: parseInt(`${color3Match[1]}${color3Match[1]}`, 16),
-            g: parseInt(`${color3Match[2]}${color3Match[2]}`, 16),
-            b: parseInt(`${color3Match[3]}${color3Match[3]}`, 16),
-            a: 1
-        };
-    }
+  const color3Match = color.match(color3Regexp);
 
-    const color6Match = color.match(color6Regexp);
-    if (color6Match) {
-        return {
-            r: parseInt(color6Match[1], 16),
-            g: parseInt(color6Match[2], 16),
-            b: parseInt(color6Match[3], 16),
-            a: 1
-        };
-    }
+  if (color3Match) {
+    return {
+      r: parseInt(`${color3Match[1]}${color3Match[1]}`, 16),
+      g: parseInt(`${color3Match[2]}${color3Match[2]}`, 16),
+      b: parseInt(`${color3Match[3]}${color3Match[3]}`, 16),
+      a: 1
+    };
+  }
 
-    const rgbaMatch = color.match(rgbaRegexp);
-    if (rgbaMatch) {
-        return {
-            r: parseFloat(rgbaMatch[1]),
-            g: parseFloat(rgbaMatch[2]),
-            b: parseFloat(rgbaMatch[3]),
-            a: rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1
-        };
-    }
+  const color6Match = color.match(color6Regexp);
 
-    throw new Error(`Failed to parse color: ${color}`);
-};
+  if (color6Match) {
+    return {
+      r: parseInt(color6Match[1], 16),
+      g: parseInt(color6Match[2], 16),
+      b: parseInt(color6Match[3], 16),
+      a: 1
+    };
+  }
 
-// Stringify the color in an `rgba()` or `#abcdef` format.
+  const rgbaMatch = color.match(rgbaRegexp);
+
+  if (rgbaMatch) {
+    return {
+      r: parseFloat(rgbaMatch[1]),
+      g: parseFloat(rgbaMatch[2]),
+      b: parseFloat(rgbaMatch[3]),
+      a: rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1
+    };
+  }
+
+  throw new Error(`Failed to parse color: ${color}`);
+}; // Stringify the color in an `rgba()` or `#abcdef` format.
+
+
 const format = color => {
-    const r = Math.round(color.r);
-    const g = Math.round(color.g);
-    const b = Math.round(color.b);
+  const r = Math.round(color.r);
+  const g = Math.round(color.g);
+  const b = Math.round(color.b);
 
-    if (color.a === 1) {
-        const _s = c => {
-            const asString = c.toString(16);
-            return asString.length === 1 ? asString + asString : asString;
-        };
-        return `#${_s(r)}${_s(g)}${_s(b)}`;
-    } else {
-        return `rgba(${r},${g},${b},${color.a.toFixed(2)})`;
-    }
-};
+  if (color.a === 1) {
+    const _s = c => {
+      const asString = c.toString(16);
+      return asString.length === 1 ? asString + asString : asString;
+    };
 
-// Adjust the alpha value of a color.
+    return `#${_s(r)}${_s(g)}${_s(b)}`;
+  } else {
+    return `rgba(${r},${g},${b},${color.a.toFixed(2)})`;
+  }
+}; // Adjust the alpha value of a color.
+
+
 const fade = (color, percentage) => {
-    if (percentage < 0 || percentage > 1) {
-        throw new Error("Percentage must be between 0 and 1");
-    }
-    const components = parse(color);
-    return format(_extends({}, components, {
-        a: components.a * percentage
-    }));
-};
+  if (percentage < 0 || percentage > 1) {
+    throw new Error("Percentage must be between 0 and 1");
+  }
 
-// Mix a color into a background color, using the alpha channel of the base
+  const components = parse(color);
+  return format(_objectSpread({}, components, {
+    a: components.a * percentage
+  }));
+}; // Mix a color into a background color, using the alpha channel of the base
 // color to determine the linear blend.
+
 const mix = (color, background) => {
-    const colorObj = parse(color);
-    const bgObj = parse(background);
-
-    return format({
-        r: colorObj.r * colorObj.a + bgObj.r * (1 - colorObj.a),
-        g: colorObj.g * colorObj.a + bgObj.g * (1 - colorObj.a),
-        b: colorObj.b * colorObj.a + bgObj.b * (1 - colorObj.a),
-        a: bgObj.a
-    });
+  const colorObj = parse(color);
+  const bgObj = parse(background);
+  return format({
+    r: colorObj.r * colorObj.a + bgObj.r * (1 - colorObj.a),
+    g: colorObj.g * colorObj.a + bgObj.g * (1 - colorObj.a),
+    b: colorObj.b * colorObj.a + bgObj.b * (1 - colorObj.a),
+    a: bgObj.a
+  });
 };
@@ -98,34 +132,29 @@
 const white = "#ffffff";
-
 const Color = {
-    // Product
-    blue: "#1865f2",
-    purple: "#9059ff",
-    green: "#00a60e",
-    gold: "#ffb100",
-    red: "#d92916",
-
-    // Neutral
-    offBlack,
-    offBlack64: fade(offBlack, 0.64),
-    offBlack50: fade(offBlack, 0.5),
-    offBlack32: fade(offBlack, 0.32),
-    offBlack16: fade(offBlack, 0.16),
-    offBlack8: fade(offBlack, 0.08),
-
-    offWhite: "#f7f8fa",
-    white,
-    white64: fade(white, 0.64),
-    white50: fade(white, 0.5),
-
-    // Brand
-    darkBlue: "#0a2a66",
-    teal: "#14bf96",
-    lightBlue: "#37c5fd",
-    pink: "#fa50ae"
+  // Product
+  blue: "#1865f2",
+  purple: "#9059ff",
+  green: "#00a60e",
+  gold: "#ffb100",
+  red: "#d92916",
+  // Neutral
+  offBlack,
+  offBlack64: fade(offBlack, 0.64),
+  offBlack50: fade(offBlack, 0.5),
+  offBlack32: fade(offBlack, 0.32),
+  offBlack16: fade(offBlack, 0.16),
+  offBlack8: fade(offBlack, 0.08),
+  offWhite: "#f7f8fa",
+  white,
+  white64: fade(white, 0.64),
+  white50: fade(white, 0.5),
+  // Brand
+  darkBlue: "#0a2a66",
+  teal: "#14bf96",
+  lightBlue: "#37c5fd",
+  pink: "#fa50ae"
 };
-
 const SemanticColor = {
-    controlDefault: Color.blue,
-    controlDestructive: Color.red
+  controlDefault: Color.blue,
+  controlDestructive: Color.red
 };
@@ -132,0 +161,0 @@

dist/index.js

@@ -85,3 +85,3 @@ module.exports =
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 1);
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
 /******/ })
@@ -91,13 +91,12 @@ /************************************************************************/
 /* 0 */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
+__webpack_require__.r(__webpack_exports__);
 
+// CONCATENATED MODULE: ./packages/wonder-blocks-color/util/utils.js
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 /**
@@ -107,146 +106,129 @@ * A color manipulation library useful for dynamically
  */
+const color6Regexp = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;
+const color3Regexp = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i;
+const rgbaRegexp = /^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\s*\)$/i;
 
-var color6Regexp = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;
-var color3Regexp = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i;
-var rgbaRegexp = /^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\s*\)$/i;
-
 // Parse a color in #abcdef, rgb(...), or rgba(...) form into an object
 // with r,g,b,a keys.
-var parse = function parse(color) {
-    if (typeof color !== "string") {
-        throw new Error("Failed to parse color: " + color);
-    }
+const parse = color => {
+  if (typeof color !== "string") {
+    throw new Error(`Failed to parse color: ${color}`);
+  }
 
-    var color3Match = color.match(color3Regexp);
-    if (color3Match) {
-        return {
-            r: parseInt("" + color3Match[1] + color3Match[1], 16),
-            g: parseInt("" + color3Match[2] + color3Match[2], 16),
-            b: parseInt("" + color3Match[3] + color3Match[3], 16),
-            a: 1
-        };
-    }
+  const color3Match = color.match(color3Regexp);
 
-    var color6Match = color.match(color6Regexp);
-    if (color6Match) {
-        return {
-            r: parseInt(color6Match[1], 16),
-            g: parseInt(color6Match[2], 16),
-            b: parseInt(color6Match[3], 16),
-            a: 1
-        };
-    }
+  if (color3Match) {
+    return {
+      r: parseInt(`${color3Match[1]}${color3Match[1]}`, 16),
+      g: parseInt(`${color3Match[2]}${color3Match[2]}`, 16),
+      b: parseInt(`${color3Match[3]}${color3Match[3]}`, 16),
+      a: 1
+    };
+  }
 
-    var rgbaMatch = color.match(rgbaRegexp);
-    if (rgbaMatch) {
-        return {
-            r: parseFloat(rgbaMatch[1]),
-            g: parseFloat(rgbaMatch[2]),
-            b: parseFloat(rgbaMatch[3]),
-            a: rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1
-        };
-    }
+  const color6Match = color.match(color6Regexp);
 
-    throw new Error("Failed to parse color: " + color);
-};
+  if (color6Match) {
+    return {
+      r: parseInt(color6Match[1], 16),
+      g: parseInt(color6Match[2], 16),
+      b: parseInt(color6Match[3], 16),
+      a: 1
+    };
+  }
 
-// Stringify the color in an `rgba()` or `#abcdef` format.
-var format = function format(color) {
-    var r = Math.round(color.r);
-    var g = Math.round(color.g);
-    var b = Math.round(color.b);
+  const rgbaMatch = color.match(rgbaRegexp);
 
-    if (color.a === 1) {
-        var _s = function _s(c) {
-            var asString = c.toString(16);
-            return asString.length === 1 ? asString + asString : asString;
-        };
-        return "#" + _s(r) + _s(g) + _s(b);
-    } else {
-        return "rgba(" + r + "," + g + "," + b + "," + color.a.toFixed(2) + ")";
-    }
-};
+  if (rgbaMatch) {
+    return {
+      r: parseFloat(rgbaMatch[1]),
+      g: parseFloat(rgbaMatch[2]),
+      b: parseFloat(rgbaMatch[3]),
+      a: rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1
+    };
+  }
 
-// Adjust the alpha value of a color.
-var fade = exports.fade = function fade(color, percentage) {
-    if (percentage < 0 || percentage > 1) {
-        throw new Error("Percentage must be between 0 and 1");
-    }
-    var components = parse(color);
-    return format(_extends({}, components, {
-        a: components.a * percentage
-    }));
-};
+  throw new Error(`Failed to parse color: ${color}`);
+}; // Stringify the color in an `rgba()` or `#abcdef` format.
 
-// Mix a color into a background color, using the alpha channel of the base
-// color to determine the linear blend.
-var mix = exports.mix = function mix(color, background) {
-    var colorObj = parse(color);
-    var bgObj = parse(background);
 
-    return format({
-        r: colorObj.r * colorObj.a + bgObj.r * (1 - colorObj.a),
-        g: colorObj.g * colorObj.a + bgObj.g * (1 - colorObj.a),
-        b: colorObj.b * colorObj.a + bgObj.b * (1 - colorObj.a),
-        a: bgObj.a
-    });
-};
+const format = color => {
+  const r = Math.round(color.r);
+  const g = Math.round(color.g);
+  const b = Math.round(color.b);
 
-/***/ }),
-/* 1 */
-/***/ (function(module, exports, __webpack_require__) {
+  if (color.a === 1) {
+    const _s = c => {
+      const asString = c.toString(16);
+      return asString.length === 1 ? asString + asString : asString;
+    };
 
-"use strict";
+    return `#${_s(r)}${_s(g)}${_s(b)}`;
+  } else {
+    return `rgba(${r},${g},${b},${color.a.toFixed(2)})`;
+  }
+}; // Adjust the alpha value of a color.
 
 
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-exports.fade = exports.mix = exports.SemanticColor = exports.default = undefined;
+const fade = (color, percentage) => {
+  if (percentage < 0 || percentage > 1) {
+    throw new Error("Percentage must be between 0 and 1");
+  }
 
-var _utils = __webpack_require__(0);
+  const components = parse(color);
+  return format(_objectSpread({}, components, {
+    a: components.a * percentage
+  }));
+}; // Mix a color into a background color, using the alpha channel of the base
+// color to determine the linear blend.
 
-var offBlack = "#21242c";
-
-var white = "#ffffff";
-
-var Color = {
-    // Product
-    blue: "#1865f2",
-    purple: "#9059ff",
-    green: "#00a60e",
-    gold: "#ffb100",
-    red: "#d92916",
-
-    // Neutral
-    offBlack: offBlack,
-    offBlack64: (0, _utils.fade)(offBlack, 0.64),
-    offBlack50: (0, _utils.fade)(offBlack, 0.5),
-    offBlack32: (0, _utils.fade)(offBlack, 0.32),
-    offBlack16: (0, _utils.fade)(offBlack, 0.16),
-    offBlack8: (0, _utils.fade)(offBlack, 0.08),
-
-    offWhite: "#f7f8fa",
-    white: white,
-    white64: (0, _utils.fade)(white, 0.64),
-    white50: (0, _utils.fade)(white, 0.5),
-
-    // Brand
-    darkBlue: "#0a2a66",
-    teal: "#14bf96",
-    lightBlue: "#37c5fd",
-    pink: "#fa50ae"
+const mix = (color, background) => {
+  const colorObj = parse(color);
+  const bgObj = parse(background);
+  return format({
+    r: colorObj.r * colorObj.a + bgObj.r * (1 - colorObj.a),
+    g: colorObj.g * colorObj.a + bgObj.g * (1 - colorObj.a),
+    b: colorObj.b * colorObj.a + bgObj.b * (1 - colorObj.a),
+    a: bgObj.a
+  });
 };
+// CONCATENATED MODULE: ./packages/wonder-blocks-color/index.js
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Color; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SemanticColor", function() { return SemanticColor; });
+/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "mix", function() { return mix; });
+/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "fade", function() { return fade; });
 
-var SemanticColor = {
-    controlDefault: Color.blue,
-    controlDestructive: Color.red
+const offBlack = "#21242c";
+const white = "#ffffff";
+const Color = {
+  // Product
+  blue: "#1865f2",
+  purple: "#9059ff",
+  green: "#00a60e",
+  gold: "#ffb100",
+  red: "#d92916",
+  // Neutral
+  offBlack,
+  offBlack64: fade(offBlack, 0.64),
+  offBlack50: fade(offBlack, 0.5),
+  offBlack32: fade(offBlack, 0.32),
+  offBlack16: fade(offBlack, 0.16),
+  offBlack8: fade(offBlack, 0.08),
+  offWhite: "#f7f8fa",
+  white,
+  white64: fade(white, 0.64),
+  white50: fade(white, 0.5),
+  // Brand
+  darkBlue: "#0a2a66",
+  teal: "#14bf96",
+  lightBlue: "#37c5fd",
+  pink: "#fa50ae"
 };
+const SemanticColor = {
+  controlDefault: Color.blue,
+  controlDestructive: Color.red
+};
 
-exports.default = Color;
-exports.SemanticColor = SemanticColor;
-exports.mix = _utils.mix;
-exports.fade = _utils.fade;
 
 /***/ })
 /******/ ]);

index.test.js

@@ -12,8 +12,8 @@ // @flow
         expect(Object.keys(result)).toEqual([
+            "mix",
+            "fade",
             "default",
             "SemanticColor",
-            "mix",
-            "fade",
         ]);
     });
 });

package.json

 {
   "name": "@khanacademy/wonder-blocks-color",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "design": "v2",
@@ -16,4 +16,4 @@ "publishConfig": {
   "devDependencies": {
-    "@khanacademy/wonder-blocks-core": "^1.2.2",
-    "@khanacademy/wonder-blocks-typography": "^1.0.9"
+    "@khanacademy/wonder-blocks-core": "^1.2.3",
+    "@khanacademy/wonder-blocks-typography": "^1.0.10"
   },
@@ -20,0 +20,0 @@ "author": "",

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

Improved metrics

Total package byte prevSize

125587

increased by0.4%

Lines of code

954

increased by1.49%

No dependency changes