@thecb/components 9.1.7-beta.5 → 9.1.7-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.1.7-beta.5",
+  "version": "9.1.7-beta.6",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/util/colorUtils.js

@@ -73,6 +73,15 @@ const hexToRbg = hexColor => {
   return [red, green, blue];
 };
 
+const rbgToHex = rbgColor => {
+  hexCodes = rbgColor.map(c => {
+    const hex = c.toString(16).toUpperCase();
+    return hex.length == 1 ? "0" + hex : hex;
+  });
+
+  return "#" + hexCodes.join("");
+};
+
 /*
   Function to calculate a new hex color given an original
   hex color, a hex background color, and an opacity number
@@ -80,7 +89,7 @@ const hexToRbg = hexColor => {
 
   For example, to add a 20% black opacity (20% darker) to a green color
   ("#00ff00"):
-  addOpacityToHex("00ff00", "#000000", .2) => "rgb(0, 204, 0)"
+  addOpacityToHex("00ff00", "#000000", .2) => "#00CC00"
 */
 const addOpacityToHex = (hexColor, background, opacity) => {
   if (hexColor == TRANSPARENT) {
@@ -93,7 +102,7 @@ const addOpacityToHex = (hexColor, background, opacity) => {
     Math.floor(opacity * backgroundRbg[index] + (1 - opacity) * colorElem)
   );
 
-  return `rgb(${newColor[0]}, ${newColor[1]}, ${newColor[2]})`;
+  return rbgToHex(newColor);
 };
 
 /*
@@ -101,10 +110,10 @@ const addOpacityToHex = (hexColor, background, opacity) => {
   it merges together a black or white opacity color with the original.
 
   Lighten a color by 50%
-  lighten("#505050", .5) => "rgb(167, 167, 167)"
+  lighten("#505050", .5) => "#A7A7A7"
 
   Darken a color by 50%
-  darken("#505050", .5) => "rgb(40, 40, 40)"
+  darken("#505050", .5) => "#282828"
 */
 export const lighten = (hexColor, opacity) =>
   addOpacityToHex(hexColor, "#ffffff", opacity);