@arcteryx/components-button - npm Package Compare versions

Comparing version 1.38.0 to 1.38.1

dist/cjs/index.js

@@ -207,2 +207,4 @@ 'use strict';
   const mobileFontSize = props.variant && props.variant === Variant.XLARGE ? "2.25rem" : "1.875rem";
+  const desktopLetterSpacing = props.variant && props.variant === Variant.XLARGE ? "0.0325rem" : "0.02375rem";
+  const mobileLetterSpacing = props.variant && props.variant === Variant.XLARGE ? "0.0225rem " : "0.01875rem";
   return styled.css`
@@ -213,3 +215,3 @@ font-family: var(--font-helvetica);
     line-height: 1.15;
-    letter-spacing: 0.02375rem;
+    letter-spacing: ${desktopLetterSpacing};
     text-transform: initial;
@@ -223,2 +225,3 @@ text-align: ${textAlign};
       line-height: 1.2;
+      letter-spacing: ${mobileLetterSpacing};
     }
@@ -307,3 +310,3 @@ `;
     line-height: 1.2;
-    letter-spacing: 0.025rem;
+    letter-spacing: 0.0375rem;
     text-transform: uppercase;
@@ -314,2 +317,7 @@ text-align: ${textAlign};
     margin-bottom: 0;
+
+    @media (max-width: ${ScreenSize.md}px) {
+      font-size: 1.125rem;
+      letter-spacing: 0.03375rem;
+    }
   `;
@@ -422,3 +430,4 @@ };
     line-height: 1.5;
-
+    letter-spacing: 0.02rem;
+    
     ${variantLinkStyles};
@@ -452,2 +461,3 @@ `;
     line-height: 1.5;
+    letter-spacing: 0.02rem;
 
@@ -467,3 +477,4 @@ ${variantLinkStyles};
     line-height: 1.5;
-
+    letter-spacing: 0.0175rem;
+    
     ${variantLinkStyles};
@@ -483,3 +494,4 @@ `;
     line-height: 1.5;
-
+    letter-spacing: 0.0175rem;
+    
     ${variantLinkStyles};
@@ -498,3 +510,4 @@ `;
     line-height: 1.5;
-
+    letter-spacing: 0.0175rem;
+    
     ${variantLinkStyles};
@@ -512,2 +525,3 @@ `;
     line-height: 1.2;
+    letter-spacing: 0.02rem;
     text-transform: initial;
@@ -537,2 +551,3 @@ text-align: center;
     line-height: 1.2;
+    letter-spacing: 0.0175rem;
     text-transform: initial;
@@ -550,2 +565,3 @@ text-align: center;
   const fontSize = props.variant === Variant.SMALL ? `0.875rem` : `1rem`;
+  const letterSpacing = props.variant === Variant.SMALL ? "0.0175rem" : "0.02rem";
   const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.INHERIT;
@@ -558,2 +574,3 @@ const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)";
     line-height: 1.5;
+    letter-spacing: ${letterSpacing};
     text-transform: initial;
@@ -601,3 +618,3 @@ text-align: ${textAlign};
     line-height: 1.5;
-    letter-spacing: 0;
+    letter-spacing: 0.015rem;
     text-align: ${textAlign};
@@ -620,3 +637,3 @@ color: ${color};
     line-height: 1.3;
-    letter-spacing: 0.0475rem;
+    letter-spacing: 0.03rem;
     text-align: ${textAlign};
@@ -640,2 +657,3 @@ color: ${color};
     line-height: 1.5;
+    letter-spacing: 0.0225rem;
     text-align: ${textAlign};
@@ -659,2 +677,3 @@ color: ${color};
     line-height: 1.5;
+    letter-spacing: 0.0225rem;
     text-align: ${textAlign};
@@ -677,2 +696,3 @@ color: ${color};
     line-height: 1.5;
+    letter-spacing: 0.0225rem;
     text-align: ${textAlign};
@@ -687,5 +707,5 @@ color: ${color};
 `;
-const Quote = styled__default["default"].blockquote`
+styled__default["default"].blockquote`
   position: relative;
-  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif'};
+  font-family: ${props => props.market && ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : 'var(--font-helvetica)'};
   color: ${props => props.textColor};
@@ -699,7 +719,2 @@ font-size: 1rem;
 `;
-Quote.defaultProps = {
-  large: false,
-  textColor: "var(--colour-black)",
-  market: "outdoor"
-};
 styled__default["default"].p`
@@ -797,8 +812,5 @@ max-width: none;
 :root {
-  // TODO: switch to new fonts
-  //--font-elan: "elan-itc-pro", sans-serif;
-  --font-elan: "urw-din-condensed",arial,sans-serif;
-  //--font-helvetica: "helvetica-now-display", sans-serif;
-  --font-helvetica: "urw-din", sans-serif;
-  --font-urw: "urw-din", sans-serif;
+  --font-elan: "elan-itc-pro", sans-serif;
+  --font-helvetica: "helvetica-now-display", sans-serif;
+  --font-urw:  "helvetica-now-display", sans-serif;
   --focus-visible: 0.2rem solid #5b9dd9;
@@ -805,0 +817,0 @@

dist/es/index.js

@@ -196,2 +196,4 @@ import React from 'react';
   const mobileFontSize = props.variant && props.variant === Variant.XLARGE ? "2.25rem" : "1.875rem";
+  const desktopLetterSpacing = props.variant && props.variant === Variant.XLARGE ? "0.0325rem" : "0.02375rem";
+  const mobileLetterSpacing = props.variant && props.variant === Variant.XLARGE ? "0.0225rem " : "0.01875rem";
   return css`
@@ -202,3 +204,3 @@ font-family: var(--font-helvetica);
     line-height: 1.15;
-    letter-spacing: 0.02375rem;
+    letter-spacing: ${desktopLetterSpacing};
     text-transform: initial;
@@ -212,2 +214,3 @@ text-align: ${textAlign};
       line-height: 1.2;
+      letter-spacing: ${mobileLetterSpacing};
     }
@@ -296,3 +299,3 @@ `;
     line-height: 1.2;
-    letter-spacing: 0.025rem;
+    letter-spacing: 0.0375rem;
     text-transform: uppercase;
@@ -303,2 +306,7 @@ text-align: ${textAlign};
     margin-bottom: 0;
+
+    @media (max-width: ${ScreenSize.md}px) {
+      font-size: 1.125rem;
+      letter-spacing: 0.03375rem;
+    }
   `;
@@ -411,3 +419,4 @@ };
     line-height: 1.5;
-
+    letter-spacing: 0.02rem;
+    
     ${variantLinkStyles};
@@ -441,2 +450,3 @@ `;
     line-height: 1.5;
+    letter-spacing: 0.02rem;
 
@@ -456,3 +466,4 @@ ${variantLinkStyles};
     line-height: 1.5;
-
+    letter-spacing: 0.0175rem;
+    
     ${variantLinkStyles};
@@ -472,3 +483,4 @@ `;
     line-height: 1.5;
-
+    letter-spacing: 0.0175rem;
+    
     ${variantLinkStyles};
@@ -487,3 +499,4 @@ `;
     line-height: 1.5;
-
+    letter-spacing: 0.0175rem;
+    
     ${variantLinkStyles};
@@ -501,2 +514,3 @@ `;
     line-height: 1.2;
+    letter-spacing: 0.02rem;
     text-transform: initial;
@@ -526,2 +540,3 @@ text-align: center;
     line-height: 1.2;
+    letter-spacing: 0.0175rem;
     text-transform: initial;
@@ -539,2 +554,3 @@ text-align: center;
   const fontSize = props.variant === Variant.SMALL ? `0.875rem` : `1rem`;
+  const letterSpacing = props.variant === Variant.SMALL ? "0.0175rem" : "0.02rem";
   const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.INHERIT;
@@ -547,2 +563,3 @@ const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)";
     line-height: 1.5;
+    letter-spacing: ${letterSpacing};
     text-transform: initial;
@@ -590,3 +607,3 @@ text-align: ${textAlign};
     line-height: 1.5;
-    letter-spacing: 0;
+    letter-spacing: 0.015rem;
     text-align: ${textAlign};
@@ -609,3 +626,3 @@ color: ${color};
     line-height: 1.3;
-    letter-spacing: 0.0475rem;
+    letter-spacing: 0.03rem;
     text-align: ${textAlign};
@@ -629,2 +646,3 @@ color: ${color};
     line-height: 1.5;
+    letter-spacing: 0.0225rem;
     text-align: ${textAlign};
@@ -648,2 +666,3 @@ color: ${color};
     line-height: 1.5;
+    letter-spacing: 0.0225rem;
     text-align: ${textAlign};
@@ -666,2 +685,3 @@ color: ${color};
     line-height: 1.5;
+    letter-spacing: 0.0225rem;
     text-align: ${textAlign};
@@ -676,5 +696,5 @@ color: ${color};
 `;
-const Quote = styled.blockquote`
+styled.blockquote`
   position: relative;
-  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif'};
+  font-family: ${props => props.market && ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : 'var(--font-helvetica)'};
   color: ${props => props.textColor};
@@ -688,7 +708,2 @@ font-size: 1rem;
 `;
-Quote.defaultProps = {
-  large: false,
-  textColor: "var(--colour-black)",
-  market: "outdoor"
-};
 styled.p`
@@ -786,8 +801,5 @@ max-width: none;
 :root {
-  // TODO: switch to new fonts
-  //--font-elan: "elan-itc-pro", sans-serif;
-  --font-elan: "urw-din-condensed",arial,sans-serif;
-  //--font-helvetica: "helvetica-now-display", sans-serif;
-  --font-helvetica: "urw-din", sans-serif;
-  --font-urw: "urw-din", sans-serif;
+  --font-elan: "elan-itc-pro", sans-serif;
+  --font-helvetica: "helvetica-now-display", sans-serif;
+  --font-urw:  "helvetica-now-display", sans-serif;
   --focus-visible: 0.2rem solid #5b9dd9;
@@ -794,0 +806,0 @@

dist/umd/index.js

@@ -208,2 +208,4 @@ (function (global, factory) {
     const mobileFontSize = props.variant && props.variant === Variant.XLARGE ? "2.25rem" : "1.875rem";
+    const desktopLetterSpacing = props.variant && props.variant === Variant.XLARGE ? "0.0325rem" : "0.02375rem";
+    const mobileLetterSpacing = props.variant && props.variant === Variant.XLARGE ? "0.0225rem " : "0.01875rem";
     return styled.css`
@@ -214,3 +216,3 @@ font-family: var(--font-helvetica);
     line-height: 1.15;
-    letter-spacing: 0.02375rem;
+    letter-spacing: ${desktopLetterSpacing};
     text-transform: initial;
@@ -224,2 +226,3 @@ text-align: ${textAlign};
       line-height: 1.2;
+      letter-spacing: ${mobileLetterSpacing};
     }
@@ -308,3 +311,3 @@ `;
     line-height: 1.2;
-    letter-spacing: 0.025rem;
+    letter-spacing: 0.0375rem;
     text-transform: uppercase;
@@ -315,2 +318,7 @@ text-align: ${textAlign};
     margin-bottom: 0;
+
+    @media (max-width: ${ScreenSize.md}px) {
+      font-size: 1.125rem;
+      letter-spacing: 0.03375rem;
+    }
   `;
@@ -423,3 +431,4 @@ };
     line-height: 1.5;
-
+    letter-spacing: 0.02rem;
+    
     ${variantLinkStyles};
@@ -453,2 +462,3 @@ `;
     line-height: 1.5;
+    letter-spacing: 0.02rem;
 
@@ -468,3 +478,4 @@ ${variantLinkStyles};
     line-height: 1.5;
-
+    letter-spacing: 0.0175rem;
+    
     ${variantLinkStyles};
@@ -484,3 +495,4 @@ `;
     line-height: 1.5;
-
+    letter-spacing: 0.0175rem;
+    
     ${variantLinkStyles};
@@ -499,3 +511,4 @@ `;
     line-height: 1.5;
-
+    letter-spacing: 0.0175rem;
+    
     ${variantLinkStyles};
@@ -513,2 +526,3 @@ `;
     line-height: 1.2;
+    letter-spacing: 0.02rem;
     text-transform: initial;
@@ -538,2 +552,3 @@ text-align: center;
     line-height: 1.2;
+    letter-spacing: 0.0175rem;
     text-transform: initial;
@@ -551,2 +566,3 @@ text-align: center;
     const fontSize = props.variant === Variant.SMALL ? `0.875rem` : `1rem`;
+    const letterSpacing = props.variant === Variant.SMALL ? "0.0175rem" : "0.02rem";
     const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.INHERIT;
@@ -559,2 +575,3 @@ const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)";
     line-height: 1.5;
+    letter-spacing: ${letterSpacing};
     text-transform: initial;
@@ -602,3 +619,3 @@ text-align: ${textAlign};
     line-height: 1.5;
-    letter-spacing: 0;
+    letter-spacing: 0.015rem;
     text-align: ${textAlign};
@@ -621,3 +638,3 @@ color: ${color};
     line-height: 1.3;
-    letter-spacing: 0.0475rem;
+    letter-spacing: 0.03rem;
     text-align: ${textAlign};
@@ -641,2 +658,3 @@ color: ${color};
     line-height: 1.5;
+    letter-spacing: 0.0225rem;
     text-align: ${textAlign};
@@ -660,2 +678,3 @@ color: ${color};
     line-height: 1.5;
+    letter-spacing: 0.0225rem;
     text-align: ${textAlign};
@@ -678,2 +697,3 @@ color: ${color};
     line-height: 1.5;
+    letter-spacing: 0.0225rem;
     text-align: ${textAlign};
@@ -688,5 +708,5 @@ color: ${color};
 `;
-  const Quote = styled__default["default"].blockquote`
+  styled__default["default"].blockquote`
   position: relative;
-  font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif'};
+  font-family: ${props => props.market && ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : 'var(--font-helvetica)'};
   color: ${props => props.textColor};
@@ -700,7 +720,2 @@ font-size: 1rem;
 `;
-  Quote.defaultProps = {
-    large: false,
-    textColor: "var(--colour-black)",
-    market: "outdoor"
-  };
   styled__default["default"].p`
@@ -798,8 +813,5 @@ max-width: none;
 :root {
-  // TODO: switch to new fonts
-  //--font-elan: "elan-itc-pro", sans-serif;
-  --font-elan: "urw-din-condensed",arial,sans-serif;
-  //--font-helvetica: "helvetica-now-display", sans-serif;
-  --font-helvetica: "urw-din", sans-serif;
-  --font-urw: "urw-din", sans-serif;
+  --font-elan: "elan-itc-pro", sans-serif;
+  --font-helvetica: "helvetica-now-display", sans-serif;
+  --font-urw:  "helvetica-now-display", sans-serif;
   --focus-visible: 0.2rem solid #5b9dd9;
@@ -806,0 +818,0 @@

package.json

 {
   "name": "@arcteryx/components-button",
-  "version": "1.38.0",
+  "version": "1.38.1",
   "description": "Arcteryx Button",
@@ -19,3 +19,3 @@ "source": "src/index.js",
   "license": "ISC",
-  "gitHead": "bf8528c55168a6b3c7adb347d88506847fdc82b9",
+  "gitHead": "922ff5997000958bfc8e029c9e65018438a85a3f",
   "files": [
@@ -26,4 +26,4 @@ "dist",
   "devDependencies": {
-    "@arcteryx/components-icons": "^0.25.0"
+    "@arcteryx/components-icons": "^0.26.0"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

445661

increased by0.96%

Lines of code

5435

increased by0.61%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes