@hsds/utils-mixins - npm Package Compare versions

Comparing version 8.2.0 to 8.2.1

CHANGELOG.md

@@ -5,2 +5,15 @@ # Changelog
 
+## [8.2.1](https://github.com/helpscout/hsds/compare/utils-mixins-8.2.0...utils-mixins-8.2.1) (2023-10-23)
+
+### Dependency Updates
+
+* `utils-color` updated to version `8.2.1`
+* `tokens` updated to version `1.3.1`
+* `utils-constants` updated to version `8.1.1`
+* `utils-sass` updated to version `8.1.1`
+
+### Bug Fixes
+
+* **workspace:** updates babelize target ([d5c720e](https://github.com/helpscout/hsds/commit/d5c720ea4da26f3c5d55ac0c6acc508722716c7c))
+
 ## [8.2.0](https://github.com/helpscout/hsds/compare/utils-mixins-8.1.2...utils-mixins-8.2.0) (2023-10-23)
@@ -7,0 +20,0 @@

index.cjs.js

@@ -1,209 +0,45 @@
-'use strict';
+"use strict";
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var utilsColor = require('@hsds/utils-color');
-var styledComponents = require('styled-components');
-var tokens = require('@hsds/tokens');
-var utilsConstants = require('@hsds/utils-constants');
-var utilsSass = require('@hsds/utils-sass');
-
-const breakpoints = {
-  xs: 0,
-  sm: '544px',
-  md: '768px',
-  lg: '992px'
-};
-
-// type BreakpointValue = number | 'xs' | 'sm' | 'md' | 'lg'
-
-// type BreakpointStyles = string | (() => string)
-
-/**
- * Generates a mobile-first @media query CSS rule.
- *
- * @param   {number|string} value Min-width value.
- * @param   {Function|string} styles The styles to render.
- * @returns {string} The compiled @media query rule.
- */
-function generateBreakPoint(value = 'md', styles) {
-  if (typeof value !== 'string' && typeof value !== 'number') return '';
-
-  // eslint-disable-next-line no-prototype-builtins
-  const minWidth = breakpoints.hasOwnProperty(value) ? breakpoints[value] : typeof value === 'number' ? `${value}px` : value;
-  const compiledStyles = typeof styles === 'function' ? styles() : styles;
-  return `@media (min-width: ${minWidth}) {
-    ${compiledStyles}
-  }`;
-}
-function breakpointAll(content) {
-  return `
-    ${content}
-
-    @media (min-width: ${breakpoints.sm}) {
-      ${content}
-    }
-    @media (min-width: ${breakpoints.md}) {
-      ${content}
-    }
-    @media (min-width: ${breakpoints.lg}) {
-      ${content}
-    }
-  `;
-}
-
-const common = `
-  background-color: #fff;
-  transition: all 0.16s;
-  will-change: box-shadow;
-`;
-const d100 = `
-  ${common}
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-`;
-const d200 = `
-  ${common}
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-`;
-const d200Effect = `
-  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
-`;
-const d300 = `
-  ${common}
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04),
-                  0 2px 8px rgba(0, 0, 0, 0.04),
-                  0 5px 8px rgba(99, 116, 134, 0.03);
-`;
-const d300Effect = `
-  box-shadow: 0 0 0 1px ${utilsColor.getColor('grey.500')},
-                  0 2px 8px rgba(0, 0, 0, 0.04),
-                  0 5px 8px rgba(99, 116, 134, 0.03);
-`;
-const d400 = `
-  ${common}
-  box-shadow: 0 0 0 1px rgba(197, 206, 214, 0.7),
-                  0 1px 0 0 ${utilsColor.getColor('ash.700')},
-                  0 1px 3px rgba(0, 0, 0, 0.1);
-`;
-const d400Effect = `
-  box-shadow: 0 0 0 1px rgba(197, 206, 214, 0.7),
-                  0 1px 0 0 ${utilsColor.getColor('ash.700')},
-                  0 4px 20px rgba(0, 0, 0, 0.1);
-`;
-const d500 = `
-  ${common}
-  box-shadow: inset 0 0 0 1px ${utilsColor.getColor('grey.600')},
-                            0 1px 7px rgba(0, 0, 0, 0.08);
-`;
-const d500Effect = `
-  box-shadow: inset 0 0 0 1px ${utilsColor.getColor('grey.700')},
-                        0 30px 60px rgba(0, 0, 0, 0.15);
-`;
-const d600 = `
-  ${common}
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1),
-                  0 4px 6px rgba(0, 0, 0, 0.15);
-`;
-const d600Effect = `
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1),
-                  0 4px 6px rgba(0, 0, 0, 0.15);
-`;
-const d700 = `
-  ${common}
-  box-shadow: 0 2px 3px rgba(64, 82, 97, 0.2),
-                  0 10px 40px rgba(64, 82, 97, 0.3);
-`;
-const depthLevels = {
-  d100,
-  d200,
-  d200Effect,
-  d300,
-  d300Effect,
-  d400,
-  d400Effect,
-  d500,
-  d500Effect,
-  d600,
-  d700
-};
-
-const focusShadow = `
-  0 0 0 var(--focusRingSize, ${tokens.getToken('measure.focusRing.innerBoxShadowSize')}) var(--focusRingColor, ${tokens.getToken('color.focusRing.default.innerColor')}),
-  0 0 0 var(--focusRingOuterSize, ${tokens.getToken('measure.focusRing.outerBoxShadowSize')}) var(--focusRingOuterColor, ${tokens.getToken('color.focusRing.default.outerColor')});
-`;
-const focusShadowWithInset = `
-  0 0 0 var(--focusRingSize, ${tokens.getToken('measure.focusRing.innerBoxShadowSize')}) var(--focusRingColor, ${tokens.getToken('color.focusRing.default.innerColor')}),
-  0 0 0 var(--focusRingOuterSize, ${tokens.getToken('measure.focusRing.outerBoxShadowSize')}) var(--focusRingOuterColor, ${tokens.getToken('color.focusRing.default.outerColor')}),
-  inset 0 0 0 var(--focusRingSize, ${tokens.getToken('measure.focusRing.insetBoxShadowSize')}) white;
-`;
-const focusRing = styledComponents.css(["--focusRingColor:", ";--focusRingOuterColor:", ";--focusRingOffset:-2px;--focusRingShadow:", ";--focusRingRadius:inherit;outline:none;position:relative;&:before{content:'';border-radius:var(--focusRingRadius);bottom:var(--focusRingOffset);box-shadow:var(--focusRingShadow);left:var(--focusRingOffset);pointer-events:none;position:absolute;right:var(--focusRingOffset);top:var(--focusRingOffset);opacity:0;background:transparent;z-index:3;}&:focus,&.is-focused{&:before{opacity:1;}}&:focus:not(:focus-visible){&:before{opacity:0;}}&:focus-visible{&:before{opacity:1 !important;transition:opacity ease 0.2s;}}"], tokens.getToken('color.focusRing.default.innerColor'), tokens.getToken('color.focusRing.default.outerColor'), focusShadow);
-
-const generateLinkStyles = () => styledComponents.css(["color:", ";cursor:pointer;text-decoration:none;&:hover{color:", ";outline-width:0;text-decoration:underline;}&:active{color:", ";outline-width:0;}"], utilsColor.getColor('link.base'), utilsColor.getColor('link.hover'), utilsColor.getColor('link.active'));
-
-/**
- * Generates the color CSS property for various states.
- *
- * @returns The compiled CSS styles.
- */
-const generateStateColorStyles = (prop = 'color') => {
-  return utilsSass.forEach(utilsConstants.STATES, state => `
-    &.is-${state} {
-      color: ${utilsColor.getColor(`state.${state}.${prop}`)};
-    }
-  `);
-};
-
-const noteBoxShadow = () => `
-  box-shadow:
-    0px 1px 3px 0px rgba(0, 0, 0, 0),
-    inset 0px 0px 0px 1px ${utilsColor.getColor('yellow.400')};
-`;
-const noteBoxShadowHover = () => `
-  box-shadow:
-    0 3px 12px 0 rgba(0, 0, 0, 0.1),
-    inset 0px 0px 0px 1px ${utilsColor.getColor('yellow.400')};
-`;
-const noteBoxShadowWithHover = () => `
-  ${noteBoxShadow()}
-  &:hover {
-    ${noteBoxShadowHover()}
-  }
-`;
-
-const generateVisuallyHiddenStyles = () => `
-  border: 0!important;
-  box-sizing: border-box;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  height: 1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  top: 0;
-  width: 1px !important;
-`;
-
-exports.breakpointAll = breakpointAll;
-exports.breakpoints = breakpoints;
-exports.d100 = d100;
-exports.d200 = d200;
-exports.d200Effect = d200Effect;
-exports.d300 = d300;
-exports.d300Effect = d300Effect;
-exports.d400 = d400;
-exports.d400Effect = d400Effect;
-exports.d500 = d500;
-exports.d500Effect = d500Effect;
-exports.d600 = d600;
-exports.d600Effect = d600Effect;
-exports.d700 = d700;
-exports.depthLevels = depthLevels;
-exports.focusRing = focusRing;
-exports.focusShadow = focusShadow;
-exports.focusShadowWithInset = focusShadowWithInset;
-exports.generateBreakPoint = generateBreakPoint;
-exports.generateLinkStyles = generateLinkStyles;
-exports.generateStateColorStyles = generateStateColorStyles;
-exports.generateVisuallyHiddenStyles = generateVisuallyHiddenStyles;
-exports.noteBoxShadow = noteBoxShadow;
-exports.noteBoxShadowHover = noteBoxShadowHover;
-exports.noteBoxShadowWithHover = noteBoxShadowWithHover;
+exports.__esModule = true;
+var _breakpoints = require("./breakpoints.styles");
+Object.keys(_breakpoints).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _breakpoints[key]) return;
+  exports[key] = _breakpoints[key];
+});
+var _depth = require("./depth.styles");
+Object.keys(_depth).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _depth[key]) return;
+  exports[key] = _depth[key];
+});
+var _focusRing = require("./focusRing.styles");
+Object.keys(_focusRing).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _focusRing[key]) return;
+  exports[key] = _focusRing[key];
+});
+var _linkStyles = require("./linkStyles.styles");
+Object.keys(_linkStyles).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _linkStyles[key]) return;
+  exports[key] = _linkStyles[key];
+});
+var _stateStyles = require("./stateStyles.styles");
+Object.keys(_stateStyles).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _stateStyles[key]) return;
+  exports[key] = _stateStyles[key];
+});
+var _noteStyles = require("./noteStyles.styles");
+Object.keys(_noteStyles).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _noteStyles[key]) return;
+  exports[key] = _noteStyles[key];
+});
+var _visuallyHidden = require("./visuallyHidden.styles");
+Object.keys(_visuallyHidden).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _visuallyHidden[key]) return;
+  exports[key] = _visuallyHidden[key];
+});

package.json

 {
   "name": "@hsds/utils-mixins",
-  "version": "8.2.0",
+  "version": "8.2.1",
   "peerDependencies": {
@@ -10,7 +10,7 @@ "styled-components": "5.1.1"
   "dependencies": {
-    "@hsds/tokens": "1.3.0",
-    "@hsds/utils-color": "8.2.0",
-    "@hsds/utils-constants": "8.1.0",
-    "@hsds/utils-sass": "8.1.0"
+    "@hsds/tokens": "1.3.1",
+    "@hsds/utils-color": "8.2.1",
+    "@hsds/utils-constants": "8.1.1",
+    "@hsds/utils-sass": "8.1.1"
   }
 }

No alert changes

Worsened metrics

Total package byte prevSize

26568

decreased by-20.29%

Number of package files

18

decreased by-5.26%

Lines of code

501

decreased by-28.22%

Dependency changes

• + Added@hsds/tokens@1.3.1(transitive)

• + Added@hsds/utils-color@8.2.1(transitive)

• + Added@hsds/utils-constants@8.1.1(transitive)

• + Added@hsds/utils-sass@8.1.1(transitive)

• - Removed@hsds/tokens@1.3.0(transitive)

• - Removed@hsds/utils-color@8.2.0(transitive)

• - Removed@hsds/utils-constants@8.1.0(transitive)

• - Removed@hsds/utils-sass@8.1.0(transitive)

• Updated@hsds/tokens@1.3.1

• Updated@hsds/utils-color@8.2.1

• Updated@hsds/utils-constants@8.1.1

• Updated@hsds/utils-sass@8.1.1