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

package/dist/index.esm.js

@@ -5011,6 +5011,7 @@ var INFO_BLUE = "#E4F4FD";
 var CORNFLOWER_BLUE = "#EBEFFB";
 var HOVER_LIGHT_BLUE = "#EFFAFF";
 var MATISSE_BLUE = "#15749D";
+var MATISSE_BLUE_DARK = "#105C7D";
 var ROYAL_BLUE = "#3181E3";
 var ROYAL_BLUE_VIVID = "#3B5BDB";
 var ASTRAL_BLUE = "#3176AA";
@@ -5145,6 +5146,7 @@ var colors = /*#__PURE__*/Object.freeze({
   BOSTON_BLUE: BOSTON_BLUE,
   HOVER_LIGHT_BLUE: HOVER_LIGHT_BLUE,
   MATISSE_BLUE: MATISSE_BLUE,
+  MATISSE_BLUE_DARK: MATISSE_BLUE_DARK,
   ROYAL_BLUE: ROYAL_BLUE,
   ROYAL_BLUE_VIVID: ROYAL_BLUE_VIVID,
   ASTRAL_BLUE: ASTRAL_BLUE,
@@ -18678,12 +18680,22 @@ var fallbackValues$4 = {
   link: link
 };
 
+/* 
+
+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.
+
+*/
+
 /* 
   Function to convert string representing rgb color to rgba value with provided opacity
   ("rgb(41, 42, 51)", "0.1") => "rgba(41, 42, 51, 0.1)"
 
 */
-
 var rgbToRgba = function rgbToRgba() {
   var rgbValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
   var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
@@ -18694,17 +18706,6 @@ var rgbToRgba = function rgbToRgba() {
 
   return "".concat(rgbValue.slice(0, 3), "a").concat(rgbValue.slice(3, -1), ", ").concat(opacity).concat(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.
-
-*/
-
 
 var generateShadows = function generateShadows() {
   var baseColorRGB = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgb(41, 42, 51)";
@@ -18732,52 +18733,6 @@ var generateShadows = function generateShadows() {
     overlay: overlay
   };
 };
-/* 
-  Function to convert a string representing hex color to rgb color  
-    hexToRbg("#00ff00") => [0, 255, 0]
-*/
-
-var hexToRbg = function hexToRbg(hexColor) {
-  var hexArr = hexColor.replace("#", "");
-  var red = parseInt(hexArr.slice(0, 2), 16);
-  var green = parseInt(hexArr.slice(2, 4), 16);
-  var blue = parseInt(hexArr.slice(4, 6), 16);
-  return [red, green, blue];
-};
-
-var rbgToHex = function rbgToHex(rbgColor) {
-  hexCodes = rbgColor.map(function (c) {
-    var 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
-  between 0 and 1 to apply to the background.
-
-  For example, to add a 20% black opacity (20% darker) to a green color
-  ("#00ff00"):
-  addOpacityToHex("00ff00", "#000000", .2) => "#00CC00"
-*/
-
-
-var addOpacityToHex = function addOpacityToHex(hexColor, background, opacity) {
-  if (hexColor == TRANSPARENT) {
-    return hexColor;
-  }
-
-  var color = hexToRbg(hexColor);
-  var backgroundRbg = hexToRbg(background);
-  var newColor = color.map(function (colorElem, index) {
-    return Math.floor(opacity * backgroundRbg[index] + (1 - opacity) * colorElem);
-  });
-  return rbgToHex(newColor);
-};
-var darken = function darken(hexColor, opacity) {
-  return addOpacityToHex(hexColor, "#000000", opacity);
-};
 
 var Alert = function Alert(_ref) {
   var _generateShadows, _generateShadows$inse;
@@ -23780,9 +23735,11 @@ exportTypedArrayMethod$1('at', function at(index) {
 
 var selectedColor = "".concat(MATISSE_BLUE);
 var hoverColor$3 = "".concat(HOVER_LIGHT_BLUE);
+var focusColor = "".concat(MATISSE_BLUE_DARK);
 var fallbackValues$f = {
   selectedColor: selectedColor,
-  hoverColor: hoverColor$3
+  hoverColor: hoverColor$3,
+  focusColor: focusColor
 };
 
 var IconWrapper = styled.div.withConfig({
@@ -23816,17 +23773,17 @@ var DropdownItemWrapper = styled.li.withConfig({
   var disabled = _ref6.disabled,
       selected = _ref6.selected,
       themeValues = _ref6.themeValues;
-  return selected ? darken(themeValues.selectedColor, 0.2) : disabled ? WHITE : themeValues.hoverColor;
+  return selected ? themeValues.focusColor : disabled ? WHITE : themeValues.hoverColor;
 }, function (_ref7) {
   var selected = _ref7.selected,
       disabled = _ref7.disabled,
       themeValues = _ref7.themeValues;
-  return selected ? darken(themeValues.selectedColor, 0.2) : disabled ? WHITE : themeValues.hoverColor;
+  return selected ? themeValues.focusColor : disabled ? WHITE : themeValues.hoverColor;
 }, function (_ref8) {
   var selected = _ref8.selected,
       disabled = _ref8.disabled,
       themeValues = _ref8.themeValues;
-  return selected ? darken(themeValues.selectedColor, 0.2) : disabled ? WHITE : themeValues.hoverColor;
+  return selected ? themeValues.focusColor : disabled ? WHITE : themeValues.hoverColor;
 }, function (_ref9) {
   var themeValues = _ref9.themeValues;
   return themeValues.selectedColor;
@@ -23834,7 +23791,7 @@ var DropdownItemWrapper = styled.li.withConfig({
   var selected = _ref10.selected,
       disabled = _ref10.disabled,
       themeValues = _ref10.themeValues;
-  return selected ? darken(themeValues.selectedColor, 0.2) : disabled ? WHITE : themeValues.hoverColor;
+  return selected ? themeValues.focusColor : disabled ? WHITE : themeValues.hoverColor;
 });
 var DropdownItemBorder = styled.div.withConfig({
   displayName: "Dropdown__DropdownItemBorder",