@hsds/utils-mixins - npm Package Compare versions

Comparing version 9.1.8 to 9.1.9-beta.0

CHANGELOG.md

@@ -5,2 +5,11 @@ # Changelog
 
+## [9.1.9-beta.0](https://github.com/helpscout/hsds/compare/utils-mixins-9.1.8...utils-mixins-9.1.9-beta.0) (2024-05-28)
+
+
+### Features
+
+* **utils-mixins:** add calculation to focusring ([3010074](https://github.com/helpscout/hsds/commit/301007476f58e4dbd5be0104a9f5a99e898cce76))
+* **utils-mixins:** improve focusring calculation ([8b41e33](https://github.com/helpscout/hsds/commit/8b41e33ae0c4c70cd4f310f178293192354cee5d))
+* **workspace:** rename focus ring variables ([964735b](https://github.com/helpscout/hsds/commit/964735b1a88f47c9920f8135bdbe284e6c2e138b))
+
 ## [9.1.8](https://github.com/helpscout/hsds/compare/utils-mixins-9.1.7...utils-mixins-9.1.8) (2024-05-24)
@@ -7,0 +16,0 @@

focusRing.styles.js

@@ -8,13 +8,13 @@ "use strict";
 const focusShadow = `
-  0 0 0 var(--focusRingSize, ${(0, _tokens.getToken)('measure.focusRing.innerBoxShadowSize')}) var(--focusRingColor, ${(0, _tokens.getToken)('color.focusRing.default.innerColor')}),
-  0 0 0 var(--focusRingOuterSize, ${(0, _tokens.getToken)('measure.focusRing.outerBoxShadowSize')}) var(--focusRingOuterColor, ${(0, _tokens.getToken)('color.focusRing.default.outerColor')});
+  0 0 0 var(--focusRingSize, ${(0, _tokens.getToken)('measure.focusRing.innerBoxShadowSize')}) var(--hsds-focus-ring-color, ${(0, _tokens.getToken)('color.focusRing.default.innerColor')}),
+  0 0 0 var(--focusRingOuterSize, ${(0, _tokens.getToken)('measure.focusRing.outerBoxShadowSize')}) var(--hsds-focus-ring-outer-color, ${(0, _tokens.getToken)('color.focusRing.default.outerColor')});
 `;
 exports.focusShadow = focusShadow;
 const focusShadowWithInset = `
-  0 0 0 var(--focusRingSize, ${(0, _tokens.getToken)('measure.focusRing.innerBoxShadowSize')}) var(--focusRingColor, ${(0, _tokens.getToken)('color.focusRing.default.innerColor')}),
-  0 0 0 var(--focusRingOuterSize, ${(0, _tokens.getToken)('measure.focusRing.outerBoxShadowSize')}) var(--focusRingOuterColor, ${(0, _tokens.getToken)('color.focusRing.default.outerColor')}),
+  0 0 0 var(--focusRingSize, ${(0, _tokens.getToken)('measure.focusRing.innerBoxShadowSize')}) var(--hsds-focus-ring-color, ${(0, _tokens.getToken)('color.focusRing.default.innerColor')}),
+  0 0 0 var(--focusRingOuterSize, ${(0, _tokens.getToken)('measure.focusRing.outerBoxShadowSize')}) var(--hsds-focus-ring-outer-color, ${(0, _tokens.getToken)('color.focusRing.default.outerColor')}),
   inset 0 0 0 var(--focusRingSize, ${(0, _tokens.getToken)('measure.focusRing.insetBoxShadowSize')}) white;
 `;
 exports.focusShadowWithInset = focusShadowWithInset;
-const focusRing = (0, _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;}}"], (0, _tokens.getToken)('color.focusRing.default.innerColor'), (0, _tokens.getToken)('color.focusRing.default.outerColor'), focusShadow);
+const focusRing = (0, _styledComponents.css)(["--hsds-focus-ring-color:", ";--hsds-focus-ring-outer-color:", ";--hsds-focus-ring-offset:-2px;--hsds-focus-ring-shadow:", ";--hsds-focus-ring-radius:0px;--offsetValue:min(var(--hsds-focus-ring-offset),0px);--gap:calc(max(var(--offsetValue),-1 * var(--offsetValue)) - 1px);outline:none;position:relative;&:before{content:'';border-radius:calc(var(--hsds-focus-ring-radius) + var(--gap));inset:var(--hsds-focus-ring-offset);box-shadow:var(--hsds-focus-ring-shadow);pointer-events:none;position:absolute;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;}}"], (0, _tokens.getToken)('color.focusRing.default.innerColor'), (0, _tokens.getToken)('color.focusRing.default.outerColor'), focusShadow);
 exports.focusRing = focusRing;

package.json

 {
   "name": "@hsds/utils-mixins",
-  "version": "9.1.8",
+  "version": "9.1.9-beta.0",
   "peerDependencies": {
@@ -10,4 +10,4 @@ "styled-components": "6.1.8"
   "dependencies": {
-    "@hsds/tokens": "2.7.0",
-    "@hsds/utils-color": "9.0.11",
+    "@hsds/tokens": "2.7.1-beta.0",
+    "@hsds/utils-color": "9.0.12-beta.0",
     "@hsds/utils-constants": "9.0.2",
@@ -14,0 +14,0 @@ "@hsds/utils-sass": "9.0.2"

src/focusRing.styles.js

@@ -8,6 +8,8 @@ import { css } from 'styled-components'
     'measure.focusRing.innerBoxShadowSize'
-  )}) var(--focusRingColor, ${getToken('color.focusRing.default.innerColor')}),
+  )}) var(--hsds-focus-ring-color, ${getToken(
+  'color.focusRing.default.innerColor'
+)}),
   0 0 0 var(--focusRingOuterSize, ${getToken(
     'measure.focusRing.outerBoxShadowSize'
-  )}) var(--focusRingOuterColor, ${getToken(
+  )}) var(--hsds-focus-ring-outer-color, ${getToken(
   'color.focusRing.default.outerColor'
@@ -20,6 +22,8 @@ )});
     'measure.focusRing.innerBoxShadowSize'
-  )}) var(--focusRingColor, ${getToken('color.focusRing.default.innerColor')}),
+  )}) var(--hsds-focus-ring-color, ${getToken(
+  'color.focusRing.default.innerColor'
+)}),
   0 0 0 var(--focusRingOuterSize, ${getToken(
     'measure.focusRing.outerBoxShadowSize'
-  )}) var(--focusRingOuterColor, ${getToken(
+  )}) var(--hsds-focus-ring-outer-color, ${getToken(
   'color.focusRing.default.outerColor'
@@ -33,7 +37,12 @@ )}),
 export const focusRing = css`
-  --focusRingColor: ${getToken('color.focusRing.default.innerColor')};
-  --focusRingOuterColor: ${getToken('color.focusRing.default.outerColor')};
-  --focusRingOffset: -2px;
-  --focusRingShadow: ${focusShadow};
-  --focusRingRadius: inherit;
+  --hsds-focus-ring-color: ${getToken('color.focusRing.default.innerColor')};
+  --hsds-focus-ring-outer-color: ${getToken(
+    'color.focusRing.default.outerColor'
+  )};
+  --hsds-focus-ring-offset: -2px;
+  --hsds-focus-ring-shadow: ${focusShadow};
+  --hsds-focus-ring-radius: 0px;
+  --offsetValue: min(var(--hsds-focus-ring-offset), 0px);
+  --gap: calc(max(var(--offsetValue), -1 * var(--offsetValue)) - 1px);
+
   outline: none;
@@ -44,10 +53,7 @@ position: relative;
     content: '';
-    border-radius: var(--focusRingRadius);
-    bottom: var(--focusRingOffset);
-    box-shadow: var(--focusRingShadow);
-    left: var(--focusRingOffset);
+    border-radius: calc(var(--hsds-focus-ring-radius) + var(--gap));
+    inset: var(--hsds-focus-ring-offset);
+    box-shadow: var(--hsds-focus-ring-shadow);
     pointer-events: none;
     position: absolute;
-    right: var(--focusRingOffset);
-    top: var(--focusRingOffset);
     opacity: 0;
@@ -54,0 +60,0 @@ background: transparent;

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

Improved metrics

Total package byte prevSize

34685

increased by2.57%

Lines of code

506

increased by1%

Worsened metrics

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@hsds/tokens@2.7.1-beta.0(transitive)

• + Added@hsds/utils-color@9.0.12-beta.0(transitive)

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

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

• Updated@hsds/tokens@2.7.1-beta.0

• Updated@hsds/utils-color@9.0.12-beta.0