@hsds/utils-color - npm Package Compare versions

Comparing version 7.1.1 to 7.1.2-beta.0

CHANGELOG.md

@@ -5,8 +5,24 @@ # Changelog
 
-### [7.1.1](https://github.com/helpscout/hsds/compare/utils-color-7.1.1-beta.1...utils-color-7.1.1) (2023-01-27)
+### [7.1.2-beta.0](https://github.com/helpscout/hsds/compare/utils-color-7.1.1...utils-color-7.1.2-beta.0) (2023-07-11)
 
-## [7.1.1](https://github.com/helpscout/hsds/compare/v7.1.1-beta.1...v7.1.1) (2023-01-27)
 
+### Features
 
+* **utils-color:** activate tokens for colors ([f00515e](https://github.com/helpscout/hsds/commit/f00515e22701ae7d4a51a6569ef984d512dcc089))
+* **utils-color:** bring back old getcolor function for now ([d49a9b4](https://github.com/helpscout/hsds/commit/d49a9b44b38c28020d7adb31be21c6015ca22860))
+* **utils-color:** change color import ([b010ace](https://github.com/helpscout/hsds/commit/b010ace791f992c571c3cd08f71229fce2d79871))
+* **utils-color:** implements css variable in getColor ([c4b681e](https://github.com/helpscout/hsds/commit/c4b681e5b61ebc05255e6f035d66f6798a145e9a))
+* **utils-color:** import colors from token directly ([1c4a827](https://github.com/helpscout/hsds/commit/1c4a827e53977ab47e5d35dbfb47dba3ea505244))
+* **utils-color:** pull theme from tokens ([b0a799a](https://github.com/helpscout/hsds/commit/b0a799aee2f93b01e5dfd377560993dc81893c2a))
+* **utils-color:** use hsds/tokens for mapping colors ([9612cfe](https://github.com/helpscout/hsds/commit/9612cfebf99f554d2e018a501f8a4baeaa3b3257))
+* **workspace:** migrate all old format getColor leftover ([baf9bb1](https://github.com/helpscout/hsds/commit/baf9bb1ed64ad67267340aab3674124d7e4ea40f))
 
+
+### Bug Fixes
+
+* **utils-color:** dont break the code if the color doesn't exists ([ff43eb9](https://github.com/helpscout/hsds/commit/ff43eb9ff66a85aff7b7c0a23b5b08391a7e21df))
+* **workspace:** fixing color tests ([fa57f89](https://github.com/helpscout/hsds/commit/fa57f899ac3217a5d633f55fecfc5cb7cc5d66fb))
+
+### [7.1.1](https://github.com/helpscout/hsds/compare/utils-color-7.1.0...utils-color-7.1.1) (2023-01-27)
+
 ### [7.1.1-beta.1](https://github.com/helpscout/hsds/compare/utils-color-7.1.1-beta.0...utils-color-7.1.1-beta.1) (2023-01-26)
@@ -13,0 +29,0 @@

color.config.js

@@ -5,19 +5,20 @@ "use strict";
 exports.default = void 0;
-var _colorway = _interopRequireDefault(require("./colorway"));
+var _lodash = _interopRequireDefault(require("lodash.get"));
+var _tokens = require("@hsds/tokens");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const palette = _colorway.default;
+const color = _tokens.defaultTheme.color;
 const text = {
   default: 'currentColor',
-  subtle: palette.charcoal['500'],
-  slightlyMuted: palette.charcoal['400'],
-  muted: palette.charcoal['300'],
-  faint: palette.charcoal['200'],
-  extraMuted: palette.grey['600']
+  subtle: (0, _lodash.default)(color, 'charcoal.500'),
+  slightlyMuted: (0, _lodash.default)(color, 'charcoal.400'),
+  muted: (0, _lodash.default)(color, 'charcoal.300'),
+  faint: (0, _lodash.default)(color, 'charcoal.200'),
+  extraMuted: (0, _lodash.default)(color, 'grey.600')
 };
 const border = {
-  default: palette.grey['400'],
-  divider: palette.grey['300'],
+  default: (0, _lodash.default)(color, 'grey.400'),
+  divider: (0, _lodash.default)(color, 'grey.300'),
   ui: {
-    default: palette.grey['500'],
-    dark: palette.grey['600']
+    default: (0, _lodash.default)(color, 'grey.500'),
+    dark: (0, _lodash.default)(color, 'grey.600')
   }
@@ -27,30 +28,30 @@ };
   danger: {
-    default: palette.red['500'],
-    backgroundColor: palette.red['200'],
-    borderColor: palette.red['500'],
-    color: palette.red['800']
+    default: (0, _lodash.default)(color, 'red.500'),
+    backgroundColor: (0, _lodash.default)(color, 'red.200'),
+    borderColor: (0, _lodash.default)(color, 'red.500'),
+    color: (0, _lodash.default)(color, 'red.800')
   },
   error: {
-    default: palette.red['500'],
-    backgroundColor: palette.red['200'],
-    borderColor: palette.red['500'],
-    color: palette.red['800']
+    default: (0, _lodash.default)(color, 'red.500'),
+    backgroundColor: (0, _lodash.default)(color, 'red.200'),
+    borderColor: (0, _lodash.default)(color, 'red.500'),
+    color: (0, _lodash.default)(color, 'red.800')
   },
   info: {
-    default: palette.blue['500'],
-    backgroundColor: palette.blue['200'],
-    borderColor: palette.blue['500'],
-    color: palette.blue['800']
+    default: (0, _lodash.default)(color, 'blue.500'),
+    backgroundColor: (0, _lodash.default)(color, 'blue.200'),
+    borderColor: (0, _lodash.default)(color, 'blue.500'),
+    color: (0, _lodash.default)(color, 'blue.800')
   },
   success: {
-    default: palette.green['500'],
-    backgroundColor: palette.green['200'],
-    borderColor: palette.green['500'],
-    color: palette.green['800']
+    default: (0, _lodash.default)(color, 'green.500'),
+    backgroundColor: (0, _lodash.default)(color, 'green.200'),
+    borderColor: (0, _lodash.default)(color, 'green.500'),
+    color: (0, _lodash.default)(color, 'green.800')
   },
   warning: {
-    default: palette.yellow['500'],
-    backgroundColor: palette.yellow['200'],
-    borderColor: palette.yellow['500'],
-    color: palette.yellow['800']
+    default: (0, _lodash.default)(color, 'yellow.500'),
+    backgroundColor: (0, _lodash.default)(color, 'yellow.200'),
+    borderColor: (0, _lodash.default)(color, 'yellow.500'),
+    color: (0, _lodash.default)(color, 'yellow.800')
   }
@@ -66,10 +67,10 @@ };
 const link = {
-  default: palette.blue['600'],
-  base: palette.blue['600'],
-  hover: palette.blue['500'],
-  active: palette.blue['500'],
-  focus: palette.blue['500']
+  default: (0, _lodash.default)(color, 'blue.600'),
+  base: (0, _lodash.default)(color, 'blue.600'),
+  hover: (0, _lodash.default)(color, 'blue.500'),
+  active: (0, _lodash.default)(color, 'blue.500'),
+  focus: (0, _lodash.default)(color, 'blue.500')
 };
 var _default = {
-  ...palette,
+  ...color,
   border,
@@ -79,4 +80,6 @@ text,
   osx,
-  link
+  link,
+  defaultTheme: _tokens.defaultTheme.color,
+  newBrandTheme: _tokens.newBrandTheme.color
 };
 exports.default = _default;

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.getColor = exports.defaultBrandColor = exports.darken = void 0;
+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.rgba = rgba;
 var _lodash = _interopRequireDefault(require("lodash.get"));
 var _lodash2 = _interopRequireDefault(require("lodash.isplainobject"));
-var _color = _interopRequireDefault(require("./color.config"));
+var _tokens = require("@hsds/tokens");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -165,2 +165,15 @@ const isHex = hex => hex && typeof hex === 'string';
 }
+const getColor = function (colorPath, alpha) {
+  if (alpha === void 0) {
+    alpha = null;
+  }
+  if (!colorPath) return 'currentColor';
+  if (!colorPath.includes('.')) colorPath += '.default';
+  const tokenName = `color.${colorPath}${alpha ? `.rgb` : ''}`;
+  const token = (0, _tokens.getToken)(tokenName);
+  if (alpha) {
+    return `rgba(${token}, ${alpha})`;
+  }
+  return token;
+};
 
@@ -172,26 +185,25 @@ /**
  */
-const getColor = function () {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
+exports.getColor = getColor;
+const getColorHex = function (colorCode, theme) {
+  if (theme === void 0) {
+    theme = 'default';
   }
-  let path = args.map(arg => typeof arg === 'number' ? arg.toString() : arg);
+  const colorScheme = theme === 'newBrand' ? _tokens.newBrandTheme.color : _tokens.defaultTheme.color;
   const defaultColor = 'currentColor';
-  const firstArg = path[0];
 
   // Defaults to Blue "500"
-  if (path.length === 0) {
+  if (!colorCode) {
     return defaultColor;
   }
   // Dot notation
-  if (firstArg.indexOf('.') >= 0) {
-    path = firstArg.split('.');
-  }
+  colorCode = colorCode.split('.');
+
   // Default to shade "default"
-  if (path.length === 1) {
-    path.push('default');
+  if (colorCode.length === 1) {
+    colorCode.push('default');
   }
   let index = 0;
-  let color = _color.default;
-  while (color != null && index < path.length) {
-    color = color[path[index++]];
+  let color = colorScheme;
+  while (color != null && index < colorCode.length) {
+    color = color[colorCode[index++]];
   }
@@ -211,3 +223,3 @@ if ((0, _lodash2.default)(color)) {
  */
-exports.getColor = getColor;
+exports.getColorHex = getColorHex;
 const getThemeBrandProp = function (props, path, fallback) {
@@ -214,0 +226,0 @@ if (props === void 0) {

package.json

 {
   "name": "@hsds/utils-color",
-  "version": "7.1.1",
+  "version": "7.1.2-beta.0",
   "main": "./index.cjs",
@@ -9,2 +9,3 @@ "type": "commonjs",
     "lodash.get": "4.4.2",
+    "@hsds/tokens": "0.0.0",
     "lodash.isplainobject": "4.0.6"
@@ -11,0 +12,0 @@ },

src/color.config.js

@@ -1,20 +0,22 @@
-import colorway from './colorway'
+import get from 'lodash.get'
 
-const palette = colorway
+import { defaultTheme, newBrandTheme } from '@hsds/tokens'
 
+const color = defaultTheme.color
+
 const text = {
   default: 'currentColor',
-  subtle: palette.charcoal['500'],
-  slightlyMuted: palette.charcoal['400'],
-  muted: palette.charcoal['300'],
-  faint: palette.charcoal['200'],
-  extraMuted: palette.grey['600'],
+  subtle: get(color, 'charcoal.500'),
+  slightlyMuted: get(color, 'charcoal.400'),
+  muted: get(color, 'charcoal.300'),
+  faint: get(color, 'charcoal.200'),
+  extraMuted: get(color, 'grey.600'),
 }
 
 const border = {
-  default: palette.grey['400'],
-  divider: palette.grey['300'],
+  default: get(color, 'grey.400'),
+  divider: get(color, 'grey.300'),
   ui: {
-    default: palette.grey['500'],
-    dark: palette.grey['600'],
+    default: get(color, 'grey.500'),
+    dark: get(color, 'grey.600'),
   },
@@ -25,30 +27,30 @@ }
   danger: {
-    default: palette.red['500'],
-    backgroundColor: palette.red['200'],
-    borderColor: palette.red['500'],
-    color: palette.red['800'],
+    default: get(color, 'red.500'),
+    backgroundColor: get(color, 'red.200'),
+    borderColor: get(color, 'red.500'),
+    color: get(color, 'red.800'),
   },
   error: {
-    default: palette.red['500'],
-    backgroundColor: palette.red['200'],
-    borderColor: palette.red['500'],
-    color: palette.red['800'],
+    default: get(color, 'red.500'),
+    backgroundColor: get(color, 'red.200'),
+    borderColor: get(color, 'red.500'),
+    color: get(color, 'red.800'),
   },
   info: {
-    default: palette.blue['500'],
-    backgroundColor: palette.blue['200'],
-    borderColor: palette.blue['500'],
-    color: palette.blue['800'],
+    default: get(color, 'blue.500'),
+    backgroundColor: get(color, 'blue.200'),
+    borderColor: get(color, 'blue.500'),
+    color: get(color, 'blue.800'),
   },
   success: {
-    default: palette.green['500'],
-    backgroundColor: palette.green['200'],
-    borderColor: palette.green['500'],
-    color: palette.green['800'],
+    default: get(color, 'green.500'),
+    backgroundColor: get(color, 'green.200'),
+    borderColor: get(color, 'green.500'),
+    color: get(color, 'green.800'),
   },
   warning: {
-    default: palette.yellow['500'],
-    backgroundColor: palette.yellow['200'],
-    borderColor: palette.yellow['500'],
-    color: palette.yellow['800'],
+    default: get(color, 'yellow.500'),
+    backgroundColor: get(color, 'yellow.200'),
+    borderColor: get(color, 'yellow.500'),
+    color: get(color, 'yellow.800'),
   },
@@ -66,11 +68,11 @@ }
 const link = {
-  default: palette.blue['600'],
-  base: palette.blue['600'],
-  hover: palette.blue['500'],
-  active: palette.blue['500'],
-  focus: palette.blue['500'],
+  default: get(color, 'blue.600'),
+  base: get(color, 'blue.600'),
+  hover: get(color, 'blue.500'),
+  active: get(color, 'blue.500'),
+  focus: get(color, 'blue.500'),
 }
 
 export default {
-  ...palette,
+  ...color,
   border,
@@ -81,2 +83,4 @@ text,
   link,
+  defaultTheme: defaultTheme.color,
+  newBrandTheme: newBrandTheme.color,
 }

src/color.js

 import get from 'lodash.get'
 import isPlainObject from 'lodash.isplainobject'
 
-import colorScheme from './color.config'
+import { defaultTheme, getToken, newBrandTheme } from '@hsds/tokens'
 
@@ -169,2 +169,16 @@ const isHex = hex => hex && typeof hex === 'string'
 
+export const getColor = (colorPath, alpha = null) => {
+  if (!colorPath) return 'currentColor'
+
+  if (!colorPath.includes('.')) colorPath += '.default'
+
+  const tokenName = `color.${colorPath}${alpha ? `.rgb` : ''}`
+  const token = getToken(tokenName)
+  if (alpha) {
+    return `rgba(${token}, ${alpha})`
+  }
+
+  return token
+}
+
 /**
@@ -175,18 +189,18 @@ * Retrieves a color/shade from the Color palette
  */
-export const getColor = (...args) => {
-  let path = args.map(arg => (typeof arg === 'number' ? arg.toString() : arg))
+export const getColorHex = (colorCode, theme = 'default') => {
+  const colorScheme =
+    theme === 'newBrand' ? newBrandTheme.color : defaultTheme.color
+
   const defaultColor = 'currentColor'
-  const firstArg = path[0]
 
   // Defaults to Blue "500"
-  if (path.length === 0) {
+  if (!colorCode) {
     return defaultColor
   }
   // Dot notation
-  if (firstArg.indexOf('.') >= 0) {
-    path = firstArg.split('.')
-  }
+  colorCode = colorCode.split('.')
+
   // Default to shade "default"
-  if (path.length === 1) {
-    path.push('default')
+  if (colorCode.length === 1) {
+    colorCode.push('default')
   }
@@ -197,4 +211,4 @@
 
-  while (color != null && index < path.length) {
-    color = color[path[index++]]
+  while (color != null && index < colorCode.length) {
+    color = color[colorCode[index++]]
   }
@@ -201,0 +215,0 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

31711

decreased by-9.1%

Dependency count

3

increased by50%

Number of package files

8

decreased by-20%

Lines of code

800

decreased by-27.73%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@hsds/tokens@0.0.0