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

package/package.json

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

package/src/components/atoms/dropdown/Dropdown.js

@@ -16,12 +16,11 @@ import {
   GREY_CHATEAU,
   MINESHAFT_GREY,
   STORM_GREY,
-  TRANSPARENT,
   WHITE
 } from "../../../constants/colors";
 import { fallbackValues } from "./Dropdown.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { addOpacity } from "../../../util/colorUtils";
+import { darken } from "../../../util/colorUtils";
 
 const IconWrapper = styled.div`
   position: absolute;
@@ -58,11 +57,10 @@ const DropdownContentWrapper = styled.div`
 
 const DropdownItemWrapper = styled.li`
   text-align: start;
-  background: ${({ selected, themeValues }) =>
-    selected ? themeValues.selectedColor : WHITE};
   border-width: 2px;
   border-style: solid;
-  border-color: transparent;
+  border-color: ${({ selected, themeValues }) =>
+    selected ? themeValues.selectedColor : WHITE};
   box-shadow: none;
   box-sizing: border-box;
   width: 100%;
@@ -70,35 +68,34 @@ const DropdownItemWrapper = styled.li`
   cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
 
   &:hover {
-    background: ${({ selected, disabled, themeValues }) =>
+    border-color: ${({ disabled, selected, themeValues }) =>
       selected
-        ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0)
+        ? darken(themeValues.selectedColor, 0.2)
         : disabled
         ? WHITE
         : themeValues.hoverColor};
     > * {
       background: ${({ selected, disabled, themeValues }) =>
         selected
-          ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0)
+          ? darken(themeValues.selectedColor, 0.2)
           : disabled
           ? WHITE
           : themeValues.hoverColor};
-      border-color: ${({ selected, themeValues }) =>
+      border-color: ${({ selected, disabled, themeValues }) =>
         selected
-          ? TRANSPARENT
+          ? darken(themeValues.selectedColor, 0.2)
+          : disabled
+          ? WHITE
           : themeValues.hoverColor};
     }
   }
   &:focus {
     outline: none;
-    background: ${({ selected, themeValues }) =>
-      selected ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0) : ""};
-    border-color: ${({ selected, themeValues }) =>
-      selected ? TRANSPARENT : themeValues.selectedColor};
+    border-color: ${({ themeValues }) => themeValues.selectedColor};
     > * {
       background: ${({ selected, disabled, themeValues }) =>
         selected
-          ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0)
+          ? darken(themeValues.selectedColor, 0.2)
           : disabled
           ? WHITE
           : themeValues.hoverColor};

package/src/util/colorUtils.js

@@ -1,13 +1,4 @@
-/* 
-
-A utility function that can generate box-shadow values for components
-Takes a string representing an rgb color value and returns an object
-with values for standard, inset, and overlay shadows.
-
-The objects for standard and inset shadows contain versions approiate
-for base, hover, and active interaction states.
-
-*/
+import { TRANSPARENT } from "../constants/colors";
 
 /* 
   Function to convert string representing rgb color to rgba value with provided opacity
@@ -28,6 +19,16 @@ const rgbToRgba = (rgbValue = "", opacity = "") => {
   )}, ${opacity}${rgbValue.slice(-1)}`;
 };
 
+/*
+
+A utility function that can generate box-shadow values for components
+Takes a string representing an rgb color value and returns an object
+with values for standard, inset, and overlay shadows.
+
+The objects for standard and inset shadows contain versions approiate
+for base, hover, and active interaction states.
+
+*/
 export const generateShadows = (baseColorRGB = "rgb(41, 42, 51)") => {
   const colorTen = rgbToRgba(baseColorRGB, "0.1") || "rgba(41, 42, 51, 0.1)";
   const colorTwenty = rgbToRgba(baseColorRGB, "0.2") || "rgba(41, 42, 51, 0.2)";
@@ -59,8 +60,53 @@ export const generateShadows = (baseColorRGB = "rgb(41, 42, 51)") => {
   };
 };
 
-export const addOpacity = (color, opacity, r, g, b) => {
-  const rgba = `rgba(${r}, ${g}, ${b}, ${opacity})`;
+/* 
+  Function to convert a string representing hex color to rgb color  
+    hexToRbg("#00ff00") => [0, 255, 0]
+*/
+const hexToRbg = hexColor => {
+  const hexArr = hexColor.replace("#", "");
+  const red = parseInt(hexArr.slice(0, 2), 16);
+  const green = parseInt(hexArr.slice(2, 4), 16);
+  const blue = parseInt(hexArr.slice(4, 6), 16);
+
+  return [red, green, blue];
+};
+
+/*
+  Function to calculate a new hex color given an original
+  hex color, a hex background color, and an opacity number
+  between 0 and 1 to apply to the background.
 
-  return `linear-gradient(0deg, ${rgba}, ${rgba}), linear-gradient(0deg, ${color}, ${color});`;
+  For example, to add a 20% black opacity (20% darker) to a green color
+  ("#00ff00"):
+  addOpacityToHex("00ff00", "#000000", .2) => "rgb(0, 204, 0)"
+*/
+const addOpacityToHex = (hexColor, background, opacity) => {
+  if (hexColor == TRANSPARENT) {
+    return hexColor;
+  }
+
+  const color = hexToRbg(hexColor);
+  const backgroundRbg = hexToRbg(background);
+  const newColor = color.map((colorElem, index) =>
+    Math.floor(opacity * backgroundRbg[index] + (1 - opacity) * colorElem)
+  );
+
+  return `rgb(${newColor[0]}, ${newColor[1]}, ${newColor[2]})`;
 };
+
+/*
+  Functions to lighten or darken a hex color by a certain percent. Under the hood,
+  it merges together a black or white opacity color with the original.
+
+  Lighten a color by 50%
+  lighten("#505050", .5) => "rgb(167, 167, 167)"
+
+  Darken a color by 50%
+  darken("#505050", .5) => "rgb(40, 40, 40)"
+*/
+export const lighten = (hexColor, opacity) =>
+  addOpacityToHex(hexColor, "#ffffff", opacity);
+export const darken = (hexColor, opacity) =>
+  addOpacityToHex(hexColor, "#000000", opacity);