@hsds/utils-color - npm Package Compare versions

Comparing version 7.1.1 to 7.1.2-alpha.0

CHANGELOG.md

@@ -5,8 +5,44 @@ # 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-alpha.0](https://github.com/helpscout/hsds/compare/utils-color-7.1.1...utils-color-7.1.2-alpha.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.2-beta.0](https://github.com/helpscout/hsds/compare/utils-color-7.1.1...utils-color-7.1.2-beta.0) (2023-07-11)
+
+
+### 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 +49,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-alpha.0",
   "main": "./index.cjs",
@@ -9,5 +9,6 @@ "type": "commonjs",
     "lodash.get": "4.4.2",
+    "@hsds/tokens": "0.0.1-alpha.0",
     "lodash.isplainobject": "4.0.6"
   },
   "peerDependencies": {}
-}
+}

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

33335

decreased by-4.44%

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.1-alpha.0

• + Added@ampproject/remapping@2.3.0(transitive)

• + Added@babel/code-frame@7.24.7(transitive)

• + Added@babel/compat-data@7.25.4(transitive)

• + Added@babel/core@7.25.2(transitive)

• + Added@babel/generator@7.25.6(transitive)

• + Added@babel/helper-annotate-as-pure@7.24.7(transitive)

• + Added@babel/helper-compilation-targets@7.25.2(transitive)

• + Added@babel/helper-module-imports@7.24.7(transitive)

• + Added@babel/helper-module-transforms@7.25.2(transitive)

• + Added@babel/helper-plugin-utils@7.24.8(transitive)

• + Added@babel/helper-simple-access@7.24.7(transitive)

• + Added@babel/helper-string-parser@7.24.8(transitive)

• + Added@babel/helper-validator-identifier@7.24.7(transitive)

• + Added@babel/helper-validator-option@7.24.8(transitive)

• + Added@babel/helpers@7.25.6(transitive)

• + Added@babel/highlight@7.24.7(transitive)

• + Added@babel/parser@7.25.6(transitive)

• + Added@babel/plugin-syntax-jsx@7.24.7(transitive)

• + Added@babel/template@7.25.0(transitive)

• + Added@babel/traverse@7.25.6(transitive)

• + Added@babel/types@7.25.6(transitive)

• + Added@emotion/is-prop-valid@0.8.8(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Added@emotion/stylis@0.8.5(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

• + Added@hsds/tokens@0.0.1-alpha.0(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Addedansi-styles@3.2.1(transitive)

• + Addedbabel-plugin-styled-components@2.1.4(transitive)

• + Addedbrowserslist@4.24.0(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcaniuse-lite@1.0.30001663(transitive)

• + Addedchalk@2.4.2(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedconvert-source-map@2.0.0(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@3.2.0(transitive)

• + Addeddebug@4.3.7(transitive)

• + Addedelectron-to-chromium@1.5.28(transitive)

• + Addedescalade@3.2.0(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedgensync@1.0.0-beta.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjsesc@2.5.2(transitive)

• + Addedjson5@2.2.3(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedlru-cache@5.1.1(transitive)

• + Addedms@2.1.3(transitive)

• + Addednode-releases@2.0.18(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedpicocolors@1.1.0(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedprop-types@15.7.2(transitive)

• + Addedreact@17.0.2(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedscheduler@0.20.2(transitive)

• + Addedsemver@6.3.1(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedstyled-components@5.1.1(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedto-fast-properties@2.0.0(transitive)

• + Addedupdate-browserslist-db@1.1.0(transitive)

• + Addedyallist@3.1.1(transitive)