@hsds/utils-color - npm Package Compare versions

Comparing version 8.0.1 to 8.1.0

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+## [8.1.0](https://github.com/helpscout/hsds/compare/utils-color-8.0.1...utils-color-8.1.0) (2023-09-13)
+
+
+### Features
+
+* **utils-color:** updates makeBrandColor ([693e4a8](https://github.com/helpscout/hsds/commit/693e4a8bf472068781806719c06dbdf54ee5a2a7))
+
 ### [8.0.1](https://github.com/helpscout/hsds/compare/utils-color-8.0.0...utils-color-8.0.1) (2023-09-08)
@@ -7,0 +14,0 @@

color.js

 "use strict";
 
 exports.__esModule = true;
-exports.rgbToHsl = exports.optimalTextColor = exports.makeBrandColors = exports.lightenDarkenColor = exports.lighten = exports.hexToRgb = exports.hexToHsl = exports.getThemeBrandProp = exports.getColorShade = exports.getColorHex = exports.getColor = exports.defaultBrandColor = exports.darken = void 0;
+exports.rgbToHsl = exports.optimalTextColor = exports.makeBrandColors = exports.lightenDarkenColor = exports.lighten = exports.isHex = exports.hexToRgb = exports.hexToHsl = exports.getThemeBrandProp = exports.getColorShade = exports.getColorHex = exports.getColor = exports.defaultBrandColor = exports.darken = void 0;
 exports.rgba = rgba;
@@ -10,3 +10,4 @@ var _lodash = _interopRequireDefault(require("lodash.get"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const isHex = hex => hex && typeof hex === 'string';
+const isHex = hex => /^#(([A-F0-9]{2}){3,4}|[A-F0-9]{3})$/i.test(hex);
+exports.isHex = isHex;
 const lightThreshold = 0.61;
@@ -135,3 +136,2 @@ const optimalTextColorValues = {
   }
-  if (!isHex(hex)) return null;
   const hsl = hexToHsl(hex);
@@ -247,12 +247,22 @@ const l = hsl.l;
 exports.defaultBrandColor = defaultBrandColor;
-const makeBrandColors = function (brandColor) {
-  if (brandColor === void 0) {
-    brandColor = defaultBrandColor;
+const makeBrandColors = brandColor => {
+  if (brandColor == null) {
+    throw new Error('You should give me something to work with');
   }
+  // If a css custom property passed, throw error
+  if (typeof brandColor === 'string' && brandColor.startsWith('--')) {
+    throw new Error('A CSS custom property was passed, please use valid HEX value');
+  }
+  if (!isHex(brandColor)) {
+    throw new Error('Please use a valid HEX value');
+  }
+
+  // Let's remove the alpha channel in case is present
+  const hexBrandColor = brandColor.slice(0, 7);
   // Possible Values: Darkest, Dark, Light, Lightest
-  const colorShade = getColorShade(brandColor);
-  const isWhite = brandColor.toLowerCase() === '#fff' || brandColor.toLowerCase() === '#ffffff';
+  const colorShade = getColorShade(hexBrandColor);
+  const isWhite = hexBrandColor.toLowerCase() === '#fff' || hexBrandColor.toLowerCase() === '#ffffff';
 
   // Setup and adjust props based on theme color choice
-  // These colors need to be adjusted based on the brandColor's shade.
+  // These colors need to be adjusted based on the hexBrandColor's shade.
   let backgroundColorInteractive;
@@ -273,18 +283,18 @@ let backgroundColorHover;
   if (colorShade === 'lightest' || colorShade === 'light') {
-    backgroundColorHover = darken(brandColor, 3);
-    backgroundColorActive = darken(brandColor, 5);
-    backgroundColorUI = brandColor;
-    backgroundColorUIMuted = darken(brandColor, 10);
-    backgroundColorUIHover = darken(brandColor, 3);
-    backgroundColorUIActive = darken(brandColor, 6);
-    backgroundColorUIFocus = darken(brandColor, 10);
-    svgPathPrimary = darken(brandColor, 30);
+    backgroundColorHover = darken(hexBrandColor, 3);
+    backgroundColorActive = darken(hexBrandColor, 5);
+    backgroundColorUI = hexBrandColor;
+    backgroundColorUIMuted = darken(hexBrandColor, 10);
+    backgroundColorUIHover = darken(hexBrandColor, 3);
+    backgroundColorUIActive = darken(hexBrandColor, 6);
+    backgroundColorUIFocus = darken(hexBrandColor, 10);
+    svgPathPrimary = darken(hexBrandColor, 30);
     svgPathSecondary = 'white';
   }
   if (colorShade === 'lightest') {
-    backgroundColorInteractive = darken(brandColor, 5);
-    textColor = darken(brandColor, 70);
-    textColorInteractive = darken(brandColor, 70);
-    textColorInactive = darken(brandColor, 35);
-    textColorMuted = darken(brandColor, 10);
+    backgroundColorInteractive = darken(hexBrandColor, 5);
+    textColor = darken(hexBrandColor, 70);
+    textColorInteractive = darken(hexBrandColor, 70);
+    textColorInactive = darken(hexBrandColor, 35);
+    textColorMuted = darken(hexBrandColor, 10);
     if (isWhite) {
@@ -296,34 +306,34 @@ textColor = '#394956';
   if (colorShade === 'light') {
-    backgroundColorInteractive = darken(brandColor, 8);
-    textColor = darken(brandColor, 55);
-    textColorInteractive = darken(brandColor, 55);
-    textColorInactive = darken(brandColor, 35);
-    textColorMuted = darken(brandColor, 10);
+    backgroundColorInteractive = darken(hexBrandColor, 8);
+    textColor = darken(hexBrandColor, 55);
+    textColorInteractive = darken(hexBrandColor, 55);
+    textColorInactive = darken(hexBrandColor, 35);
+    textColorMuted = darken(hexBrandColor, 10);
   }
   if (colorShade === 'dark' || colorShade === 'darkest') {
-    backgroundColorHover = lighten(brandColor, 3);
-    backgroundColorActive = lighten(brandColor, 5);
-    backgroundColorUI = brandColor;
+    backgroundColorHover = lighten(hexBrandColor, 3);
+    backgroundColorActive = lighten(hexBrandColor, 5);
+    backgroundColorUI = hexBrandColor;
     textColor = 'white';
     textColorInteractive = 'white';
-    textColorInactive = lighten(brandColor, 35);
-    textColorMuted = lighten(brandColor, 10);
+    textColorInactive = lighten(hexBrandColor, 35);
+    textColorMuted = lighten(hexBrandColor, 10);
   }
   if (colorShade === 'dark') {
-    backgroundColorInteractive = darken(brandColor, 8);
-    backgroundColorUIHover = darken(brandColor, 3);
-    backgroundColorUIActive = darken(brandColor, 6);
-    backgroundColorUIFocus = darken(brandColor, 10);
-    backgroundColorUIMuted = darken(brandColor, 6);
-    svgPathPrimary = darken(brandColor, 30);
+    backgroundColorInteractive = darken(hexBrandColor, 8);
+    backgroundColorUIHover = darken(hexBrandColor, 3);
+    backgroundColorUIActive = darken(hexBrandColor, 6);
+    backgroundColorUIFocus = darken(hexBrandColor, 10);
+    backgroundColorUIMuted = darken(hexBrandColor, 6);
+    svgPathPrimary = darken(hexBrandColor, 30);
     svgPathSecondary = 'white';
   }
   if (colorShade === 'darkest') {
-    backgroundColorInteractive = lighten(brandColor, 16);
-    backgroundColorUIHover = lighten(brandColor, 3);
-    backgroundColorUIActive = lighten(brandColor, 6);
-    backgroundColorUIFocus = lighten(brandColor, 10);
-    backgroundColorUIMuted = lighten(brandColor, 10);
-    svgPathPrimary = lighten(brandColor, 60);
-    svgPathSecondary = lighten(brandColor, 40);
+    backgroundColorInteractive = lighten(hexBrandColor, 16);
+    backgroundColorUIHover = lighten(hexBrandColor, 3);
+    backgroundColorUIActive = lighten(hexBrandColor, 6);
+    backgroundColorUIFocus = lighten(hexBrandColor, 10);
+    backgroundColorUIMuted = lighten(hexBrandColor, 10);
+    svgPathPrimary = lighten(hexBrandColor, 60);
+    svgPathSecondary = lighten(hexBrandColor, 40);
   }
@@ -341,3 +351,3 @@
     backgroundColorUIMuted,
-    brandColor,
+    brandColor: hexBrandColor,
     colorShade,
@@ -344,0 +354,0 @@ isWhite,

package.json

 {
   "name": "@hsds/utils-color",
-  "version": "8.0.1",
+  "version": "8.1.0",
   "main": "./index.cjs",
@@ -5,0 +5,0 @@ "type": "commonjs",

src/color.js

@@ -6,3 +6,3 @@ import get from 'lodash.get'
 
-const isHex = hex => hex && typeof hex === 'string'
+export const isHex = hex => /^#(([A-F0-9]{2}){3,4}|[A-F0-9]{3})$/i.test(hex)
 const lightThreshold = 0.61
@@ -146,3 +146,2 @@ const optimalTextColorValues = {
 export const getColorShade = (hex, propValues = optimalTextColorValues) => {
-  if (!isHex(hex)) return null
   const hsl = hexToHsl(hex)
@@ -242,11 +241,26 @@
  */
-export const makeBrandColors = (brandColor = defaultBrandColor) => {
+export const makeBrandColors = brandColor => {
+  if (brandColor == null) {
+    throw new Error('You should give me something to work with')
+  }
+  // If a css custom property passed, throw error
+  if (typeof brandColor === 'string' && brandColor.startsWith('--')) {
+    throw new Error(
+      'A CSS custom property was passed, please use valid HEX value'
+    )
+  }
+  if (!isHex(brandColor)) {
+    throw new Error('Please use a valid HEX value')
+  }
+
+  // Let's remove the alpha channel in case is present
+  const hexBrandColor = brandColor.slice(0, 7)
   // Possible Values: Darkest, Dark, Light, Lightest
-  const colorShade = getColorShade(brandColor)
+  const colorShade = getColorShade(hexBrandColor)
   const isWhite =
-    brandColor.toLowerCase() === '#fff' ||
-    brandColor.toLowerCase() === '#ffffff'
+    hexBrandColor.toLowerCase() === '#fff' ||
+    hexBrandColor.toLowerCase() === '#ffffff'
 
   // Setup and adjust props based on theme color choice
-  // These colors need to be adjusted based on the brandColor's shade.
+  // These colors need to be adjusted based on the hexBrandColor's shade.
   let backgroundColorInteractive
@@ -268,10 +282,10 @@ let backgroundColorHover
   if (colorShade === 'lightest' || colorShade === 'light') {
-    backgroundColorHover = darken(brandColor, 3)
-    backgroundColorActive = darken(brandColor, 5)
-    backgroundColorUI = brandColor
-    backgroundColorUIMuted = darken(brandColor, 10)
-    backgroundColorUIHover = darken(brandColor, 3)
-    backgroundColorUIActive = darken(brandColor, 6)
-    backgroundColorUIFocus = darken(brandColor, 10)
-    svgPathPrimary = darken(brandColor, 30)
+    backgroundColorHover = darken(hexBrandColor, 3)
+    backgroundColorActive = darken(hexBrandColor, 5)
+    backgroundColorUI = hexBrandColor
+    backgroundColorUIMuted = darken(hexBrandColor, 10)
+    backgroundColorUIHover = darken(hexBrandColor, 3)
+    backgroundColorUIActive = darken(hexBrandColor, 6)
+    backgroundColorUIFocus = darken(hexBrandColor, 10)
+    svgPathPrimary = darken(hexBrandColor, 30)
     svgPathSecondary = 'white'
@@ -281,7 +295,7 @@ }
   if (colorShade === 'lightest') {
-    backgroundColorInteractive = darken(brandColor, 5)
-    textColor = darken(brandColor, 70)
-    textColorInteractive = darken(brandColor, 70)
-    textColorInactive = darken(brandColor, 35)
-    textColorMuted = darken(brandColor, 10)
+    backgroundColorInteractive = darken(hexBrandColor, 5)
+    textColor = darken(hexBrandColor, 70)
+    textColorInteractive = darken(hexBrandColor, 70)
+    textColorInactive = darken(hexBrandColor, 35)
+    textColorMuted = darken(hexBrandColor, 10)
 
@@ -295,26 +309,26 @@ if (isWhite) {
   if (colorShade === 'light') {
-    backgroundColorInteractive = darken(brandColor, 8)
-    textColor = darken(brandColor, 55)
-    textColorInteractive = darken(brandColor, 55)
-    textColorInactive = darken(brandColor, 35)
-    textColorMuted = darken(brandColor, 10)
+    backgroundColorInteractive = darken(hexBrandColor, 8)
+    textColor = darken(hexBrandColor, 55)
+    textColorInteractive = darken(hexBrandColor, 55)
+    textColorInactive = darken(hexBrandColor, 35)
+    textColorMuted = darken(hexBrandColor, 10)
   }
 
   if (colorShade === 'dark' || colorShade === 'darkest') {
-    backgroundColorHover = lighten(brandColor, 3)
-    backgroundColorActive = lighten(brandColor, 5)
-    backgroundColorUI = brandColor
+    backgroundColorHover = lighten(hexBrandColor, 3)
+    backgroundColorActive = lighten(hexBrandColor, 5)
+    backgroundColorUI = hexBrandColor
     textColor = 'white'
     textColorInteractive = 'white'
-    textColorInactive = lighten(brandColor, 35)
-    textColorMuted = lighten(brandColor, 10)
+    textColorInactive = lighten(hexBrandColor, 35)
+    textColorMuted = lighten(hexBrandColor, 10)
   }
 
   if (colorShade === 'dark') {
-    backgroundColorInteractive = darken(brandColor, 8)
-    backgroundColorUIHover = darken(brandColor, 3)
-    backgroundColorUIActive = darken(brandColor, 6)
-    backgroundColorUIFocus = darken(brandColor, 10)
-    backgroundColorUIMuted = darken(brandColor, 6)
-    svgPathPrimary = darken(brandColor, 30)
+    backgroundColorInteractive = darken(hexBrandColor, 8)
+    backgroundColorUIHover = darken(hexBrandColor, 3)
+    backgroundColorUIActive = darken(hexBrandColor, 6)
+    backgroundColorUIFocus = darken(hexBrandColor, 10)
+    backgroundColorUIMuted = darken(hexBrandColor, 6)
+    svgPathPrimary = darken(hexBrandColor, 30)
     svgPathSecondary = 'white'
@@ -324,9 +338,9 @@ }
   if (colorShade === 'darkest') {
-    backgroundColorInteractive = lighten(brandColor, 16)
-    backgroundColorUIHover = lighten(brandColor, 3)
-    backgroundColorUIActive = lighten(brandColor, 6)
-    backgroundColorUIFocus = lighten(brandColor, 10)
-    backgroundColorUIMuted = lighten(brandColor, 10)
-    svgPathPrimary = lighten(brandColor, 60)
-    svgPathSecondary = lighten(brandColor, 40)
+    backgroundColorInteractive = lighten(hexBrandColor, 16)
+    backgroundColorUIHover = lighten(hexBrandColor, 3)
+    backgroundColorUIActive = lighten(hexBrandColor, 6)
+    backgroundColorUIFocus = lighten(hexBrandColor, 10)
+    backgroundColorUIMuted = lighten(hexBrandColor, 10)
+    svgPathPrimary = lighten(hexBrandColor, 60)
+    svgPathSecondary = lighten(hexBrandColor, 40)
   }
@@ -344,3 +358,3 @@
     backgroundColorUIMuted,
-    brandColor,
+    brandColor: hexBrandColor,
     colorShade,
@@ -347,0 +361,0 @@ isWhite,

No alert changes

Improved metrics

Total package byte prevSize

34796

increased by4.35%

Lines of code

822

increased by2.75%

No dependency changes