@arcteryx/components-button
Advanced tools
@arcteryx/components-button - npm Package Compare versions
Comparing version 1.37.2 to 1.38.0
@@ -9,2 +9,3 @@ 'use strict'; | ||
| var cx = require('classnames'); | ||
| var styledComponentsBreakpoint = require('styled-components-breakpoint'); | ||
@@ -111,2 +112,1282 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
| /****************************************************************************** | ||
| Copyright (c) Microsoft Corporation. | ||
| Permission to use, copy, modify, and/or distribute this software for any | ||
| purpose with or without fee is hereby granted. | ||
| THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH | ||
| REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY | ||
| AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, | ||
| INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM | ||
| LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR | ||
| OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR | ||
| PERFORMANCE OF THIS SOFTWARE. | ||
| ***************************************************************************** */ | ||
| function __rest(s, e) { | ||
| var t = {}; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; | ||
| if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
| if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; | ||
| } | ||
| return t; | ||
| } | ||
| var ScreenSize; | ||
| (function (ScreenSize) { | ||
| ScreenSize[ScreenSize["xs"] = 0] = "xs"; | ||
| ScreenSize[ScreenSize["sm"] = 576] = "sm"; | ||
| ScreenSize[ScreenSize["md"] = 768] = "md"; | ||
| ScreenSize[ScreenSize["lg"] = 992] = "lg"; | ||
| ScreenSize[ScreenSize["xl"] = 1200] = "xl"; | ||
| ScreenSize[ScreenSize["xxl"] = 1440] = "xxl"; | ||
| })(ScreenSize || (ScreenSize = {})); | ||
| styledComponentsBreakpoint.createBreakpoint({ | ||
| xs: ScreenSize.xs, | ||
| sm: ScreenSize.sm, | ||
| md: ScreenSize.md, | ||
| lg: ScreenSize.lg, | ||
| xl: ScreenSize.xl, | ||
| xxl: ScreenSize.xxl | ||
| }); | ||
| var TextAlignment; | ||
| (function (TextAlignment) { | ||
| TextAlignment["LEFT"] = "left"; | ||
| TextAlignment["CENTER"] = "center"; | ||
| TextAlignment["RIGHT"] = "right"; | ||
| TextAlignment["INHERIT"] = "inherit"; | ||
| })(TextAlignment || (TextAlignment = {})); | ||
| var Variant; | ||
| (function (Variant) { | ||
| Variant["SMALL"] = "small"; | ||
| Variant["MEDIUM"] = "medium"; | ||
| Variant["XLARGE"] = "extra-large"; | ||
| Variant["PRIMARY"] = "primary"; | ||
| Variant["LINK"] = "link"; | ||
| })(Variant || (Variant = {})); | ||
| Object.values(TextAlignment); | ||
| Object.values(Variant); | ||
| const H1Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| let desktopFontSize = "3.25rem"; | ||
| let mobileFontSize = "2.625rem"; | ||
| switch (props.variant) { | ||
| case Variant.SMALL: | ||
| desktopFontSize = "1.625rem"; | ||
| mobileFontSize = "1.5rem"; | ||
| break; | ||
| case Variant.MEDIUM: | ||
| desktopFontSize = "2rem"; | ||
| mobileFontSize = "1.75rem"; | ||
| break; | ||
| } | ||
| return styled.css` | ||
| font-family: var(--font-elan); | ||
| font-size: ${desktopFontSize}; | ||
| font-weight: 400; | ||
| line-height: 1; | ||
| text-transform: uppercase; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-bottom: 0; | ||
| @media (max-width: ${ScreenSize.md}px) { | ||
| font-size: ${mobileFontSize}; | ||
| } | ||
| `; | ||
| }; | ||
| styled__default["default"].h1` | ||
| ${H1Styles} | ||
| `; | ||
| const H2Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| const desktopFontSize = props.variant && props.variant === Variant.XLARGE ? "3.25rem" : "2.375rem"; | ||
| const mobileFontSize = props.variant && props.variant === Variant.XLARGE ? "2.25rem" : "1.875rem"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: ${desktopFontSize}; | ||
| font-weight: 300; | ||
| line-height: 1.15; | ||
| letter-spacing: 0.02375rem; | ||
| text-transform: initial; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-bottom: 0; | ||
| @media (max-width: ${ScreenSize.md}px) { | ||
| font-size: ${mobileFontSize}; | ||
| line-height: 1.2; | ||
| } | ||
| `; | ||
| }; | ||
| styled__default["default"].h2` | ||
| ${H2Styles}; | ||
| `; | ||
| const H3Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.75rem; | ||
| font-weight: 400; | ||
| line-height: 1.35; | ||
| text-transform: initial; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-bottom: 0; | ||
| @media (max-width: ${ScreenSize.md}px) { | ||
| font-size: 1.5rem; | ||
| } | ||
| `; | ||
| }; | ||
| styled__default["default"].h3` | ||
| ${H3Styles} | ||
| `; | ||
| const H4Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-elan); | ||
| font-size: 1.375rem; | ||
| font-weight: 400; | ||
| line-height: 1.2; | ||
| text-transform: uppercase; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-bottom: 0; | ||
| @media (max-width: ${ScreenSize.md}px) { | ||
| font-size: 1.25rem; | ||
| line-height: 1.2; | ||
| } | ||
| `; | ||
| }; | ||
| styled__default["default"].h4` | ||
| ${H4Styles}; | ||
| `; | ||
| const H5Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.25rem; | ||
| font-weight: 700; | ||
| line-height: 1.4; | ||
| text-transform: initial; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| // TODO: update with proper screen size breakpoint | ||
| @media (max-width: ${ScreenSize.sm}px) { | ||
| font-size: 1.25rem; | ||
| } | ||
| `; | ||
| }; | ||
| styled__default["default"].h5` | ||
| ${H5Styles} | ||
| `; | ||
| const H6Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.25rem; | ||
| font-weight: 400; | ||
| line-height: 1.2; | ||
| letter-spacing: 0.025rem; | ||
| text-transform: uppercase; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| `; | ||
| }; | ||
| styled__default["default"].h6` | ||
| ${H6Styles} | ||
| `; | ||
| const fontSize = size => { | ||
| if (size === "s") { | ||
| return "0.75rem"; | ||
| } | ||
| if (size === "m") { | ||
| return "1.1rem"; | ||
| } | ||
| if (size === "l") { | ||
| return "1.25rem"; | ||
| } | ||
| return "1rem"; | ||
| }; | ||
| const P = styled__default["default"].p` | ||
| margin: 0 0 1.5rem 0; | ||
| font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif'}; | ||
| font-size: ${props => fontSize(props.size)}; | ||
| font-weight: ${props => props.bold ? `600` : `400`}; | ||
| font-style: ${props => props.italic ? `italic` : `normal`}; | ||
| line-height: ${props => props.size === "s" ? `1rem` : `1.5rem`}; | ||
| color: ${props => props.textColor}; | ||
| text-decoration: ${props => props.textDecoration}; | ||
| strong, | ||
| b { | ||
| font-weight: 500; | ||
| } | ||
| em, | ||
| i { | ||
| font-weight: 400; | ||
| font-style: italic; | ||
| } | ||
| &:last-of-type { | ||
| margin-bottom: 0; | ||
| } | ||
| `; | ||
| P.defaultProps = { | ||
| large: false, | ||
| textColor: "var(--colour-copy)", | ||
| textDecoration: "none", | ||
| market: "outdoor" | ||
| }; | ||
| const DefaultBodyStyles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| max-width: 75ch; | ||
| font-family: var(--font-helvetica); | ||
| text-transform: initial; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin: 0; | ||
| position: relative; | ||
| `; | ||
| }; | ||
| const bodyType = ["body4", "body5", "body6"]; | ||
| const FontLinkAfterStyle = type => { | ||
| return ` | ||
| content: ""; | ||
| position: absolute; | ||
| left: 0; | ||
| width: 0; | ||
| // TODO: use this when we switch to new fonts | ||
| // bottom: ${bodyType.includes(type) ? "5px" : "6px"}; | ||
| bottom: 2px; | ||
| background-color: currentColor; | ||
| height: 1px; | ||
| transition-property: width; | ||
| transition-duration: 0.3s; | ||
| transition-timing-function: ease-out; | ||
| `; | ||
| }; | ||
| const FontLinkHoverStyle = ` | ||
| width: 100%; | ||
| `; | ||
| const FontLinkStyle = type => { | ||
| return ` | ||
| text-decoration: none; | ||
| position: relative; | ||
| display: block; | ||
| width: fit-content; | ||
| &::after { | ||
| ${FontLinkAfterStyle(type)} | ||
| } | ||
| &:hover::after { | ||
| ${FontLinkHoverStyle} | ||
| } | ||
| `; | ||
| }; | ||
| const Body1Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body1"); | ||
| return styled.css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-size: 1rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Body1Styles} | ||
| `; | ||
| const Body2Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body2"); | ||
| return styled.css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-style: italic; | ||
| font-size: 1rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Body2Styles} | ||
| `; | ||
| const Body3Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body3"); | ||
| return styled.css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-size: 1rem; | ||
| font-weight: 700; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Body3Styles} | ||
| `; | ||
| const Body4Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body4"); | ||
| return styled.css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-size: 0.875rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Body4Styles}; | ||
| `; | ||
| const Body5Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body5"); | ||
| return styled.css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-size: 0.875rem; | ||
| font-style: italic; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Body5Styles} | ||
| `; | ||
| const Body6Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body6"); | ||
| return styled.css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-size: 0.875rem; | ||
| font-weight: 700; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Body6Styles}; | ||
| `; | ||
| const Button1Styles = () => { | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1rem; | ||
| font-weight: 700; | ||
| line-height: 1.2; | ||
| text-transform: initial; | ||
| text-align: center; | ||
| margin: 0; | ||
| position: relative; | ||
| `; | ||
| }; | ||
| const StyledButtonText1 = styled__default["default"].span` | ||
| ${Button1Styles} | ||
| `; | ||
| const ButtonText1 = _a => { | ||
| var { | ||
| children | ||
| } = _a, | ||
| props = __rest(_a, ["children"]); | ||
| return /*#__PURE__*/React__default["default"].createElement(StyledButtonText1, Object.assign({}, props, { | ||
| "data-component": "button1" | ||
| }), children); | ||
| }; | ||
| const Button2Styles = () => { | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 0.875rem; | ||
| font-weight: 700; | ||
| line-height: 1.2; | ||
| text-transform: initial; | ||
| text-align: center; | ||
| margin: 0; | ||
| position: relative; | ||
| `; | ||
| }; | ||
| styled__default["default"].span` | ||
| ${Button2Styles} | ||
| `; | ||
| const LinkStyles = props => { | ||
| var _a, _b; | ||
| const fontSize = props.variant === Variant.SMALL ? `0.875rem` : `1rem`; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.INHERIT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: ${fontSize}; | ||
| font-weight: 700; | ||
| line-height: 1.5; | ||
| text-transform: initial; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| word-break: break-word; | ||
| position: relative; | ||
| text-decoration: none; | ||
| width: fit-content; | ||
| &::before { | ||
| content: ""; | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 1px; | ||
| bottom: 2px; | ||
| left: 0; | ||
| background-color: currentColor; | ||
| visibility: visible; | ||
| transition: all 0.3s ease-in-out; | ||
| } | ||
| &:hover { | ||
| text-decoration: none; | ||
| } | ||
| &:hover::before { | ||
| visibility: hidden; | ||
| width: 0; | ||
| } | ||
| `; | ||
| }; | ||
| styled__default["default"].a` | ||
| ${LinkStyles} | ||
| `; | ||
| const CaptionStyles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 0.75rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| letter-spacing: 0; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| text-transform: initial; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${CaptionStyles} | ||
| `; | ||
| const OverlineStyles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 0.75rem; | ||
| font-weight: 400; | ||
| line-height: 1.3; | ||
| letter-spacing: 0.0475rem; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| text-transform: uppercase; | ||
| margin-bottom: 0; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${OverlineStyles} | ||
| `; | ||
| const Subtitle1Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.125rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| text-transform: initial; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Subtitle1Styles} | ||
| `; | ||
| const Subtitle2Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.125rem; | ||
| font-weight: 400; | ||
| font-style: italic; | ||
| line-height: 1.5; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| text-transform: initial; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Subtitle2Styles} | ||
| `; | ||
| const Subtitle3Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.125rem; | ||
| font-weight: 700; | ||
| line-height: 1.5; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| text-transform: initial; | ||
| margin-bottom: 0; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Subtitle3Styles} | ||
| `; | ||
| const Quote = 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'}; | ||
| color: ${props => props.textColor}; | ||
| font-size: 1rem; | ||
| font-weight: 400; | ||
| font-style: italic; | ||
| line-height: 1.2rem; | ||
| padding-left: 2.5rem; | ||
| max-width: 500px; | ||
| `; | ||
| Quote.defaultProps = { | ||
| large: false, | ||
| textColor: "var(--colour-black)", | ||
| market: "outdoor" | ||
| }; | ||
| styled__default["default"].p` | ||
| max-width: none; | ||
| `; | ||
| styled__default["default"].ul` | ||
| max-width: none; | ||
| `; | ||
| styled__default["default"].div` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| `; | ||
| styled__default["default"].div` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: flex-end; | ||
| `; | ||
| const Cube = styled__default["default"].div` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| position: relative; | ||
| margin: 0 1rem; | ||
| font-size: 1rem; | ||
| &:after { | ||
| content: attr(title); | ||
| display: block; | ||
| position: absolute; | ||
| bottom: -3rem; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| } | ||
| `; | ||
| styled__default["default"](Cube)` | ||
| width: var(--space-xs); | ||
| height: var(--space-xs); | ||
| background-color: #EBCC83; | ||
| `; | ||
| styled__default["default"](Cube)` | ||
| width: var(--space-s); | ||
| height: var(--space-s); | ||
| background-color: #A0E6EB; | ||
| `; | ||
| styled__default["default"](Cube)` | ||
| width: var(--space-m); | ||
| height: var(--space-m); | ||
| background-color: #C8EBA0; | ||
| `; | ||
| styled__default["default"](Cube)` | ||
| width: var(--space-l); | ||
| height: var(--space-l); | ||
| background-color: #A0AFEB; | ||
| `; | ||
| styled__default["default"](Cube)` | ||
| width: var(--space-xl); | ||
| height: var(--space-xl); | ||
| background-color: #DBABE9; | ||
| `; | ||
| styled__default["default"](Cube)` | ||
| width: var(--space-xxl); | ||
| height: var(--space-xxl); | ||
| background-color: #EB9595; | ||
| `; | ||
| const Square = styled__default["default"].div` | ||
| width: 1rem; | ||
| height: 1rem; | ||
| display: inline-block; | ||
| margin-right: 5px; | ||
| `; | ||
| styled__default["default"](Square)` | ||
| background-color: #EBCC83; | ||
| `; | ||
| styled__default["default"](Square)` | ||
| background-color: #A0E6EB; | ||
| `; | ||
| styled__default["default"](Square)` | ||
| background-color: #C8EBA0; | ||
| `; | ||
| styled__default["default"](Square)` | ||
| background-color: #A0AFEB; | ||
| `; | ||
| styled__default["default"](Square)` | ||
| background-color: #DBABE9; | ||
| `; | ||
| styled__default["default"](Square)` | ||
| background-color: #EB9595; | ||
| `; | ||
| styled.createGlobalStyle` | ||
| // This is the site-wide root CSS where we define our global variables | ||
| :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; | ||
| --focus-visible: 0.2rem solid #5b9dd9; | ||
| /** | ||
| * Colours | ||
| */ | ||
| --colour-black: #1A1A1A; | ||
| --colour-grey-dark: #333333; | ||
| --colour-grey-medium: #666666; | ||
| --colour-grey-inactive: #b2b2b2; | ||
| --colour-grey-pinline: #cccccc; | ||
| --colour-grey-background: #e9e9e9; | ||
| --colour-grey-item-background: #fafafa; | ||
| --colour-black-gradient: #646464; | ||
| --colour-white: #ffffff; | ||
| /* | ||
| * Feedback Colours | ||
| */ | ||
| --colour-red-3: #990000; | ||
| --colour-red-2: #c86464; | ||
| --colour-red-1: #fbebeb; | ||
| --colour-yellow-3: #785e1c; | ||
| --colour-yellow-2: #ab934f; | ||
| --colour-yellow-1: #f8f2d5; | ||
| --colour-blue-3: #31668f; | ||
| --colour-blue-2: #5b9dd9; | ||
| --colour-blue-1: #e3edf2; | ||
| --colour-green-3: #227733; | ||
| --colour-green-2: #5aab6a; | ||
| --colour-green-1: #dff0d8; | ||
| --gradient-active: linear-gradient(180deg, var(--colour-black) 9.38%, var(--colour-black-gradient) 73.96%), var(--colour-white); | ||
| --gradient-hover: linear-gradient(180deg, var(--colour-black-gradient) 5.21%, var(--colour-black) 87.5%), var(--colour-white); | ||
| /* Why Renaming Base Color Variables? */ | ||
| --colour-copy: var(--colour-black); | ||
| --black: var(--colour-black); | ||
| --dark-grey: var(--colour-grey-dark); | ||
| --medium-grey: var(--colour-grey-medium); | ||
| --inactive-state-grey: var(--colour-grey-inactive); | ||
| --pinline-grey: var(--colour-grey-pinline); | ||
| --background-grey: var(--colour-grey-background); | ||
| --background-gradient: var(--colour-black-gradient); | ||
| --white: var(--colour-white); | ||
| /* WHY Renaming Color Variables in Core-UI? */ | ||
| --warning-red: var(--colour-red-3); | ||
| --medium-red: var(--colour-red-2); | ||
| --background-red: var(--colour-red-1); | ||
| /* WHY Renaming Color Variables in Core-UI? */ | ||
| --caution-yellow: var(--colour-yellow-3); | ||
| --medium-yellow: var(--colour-yellow-2); | ||
| --background-yellow: var(--colour-yellow-1); | ||
| /* WHY Renaming Color Variables in Core-UI? */ | ||
| --info-blue: var(--colour-blue-3); | ||
| --focus-blue: var(--colour-blue-2); | ||
| --background-blue: var(--colour-blue-1); | ||
| /* WHY Renaming Color Variables in Core-UI? */ | ||
| --success-green: var(--colour-green-3); | ||
| --medium-green: var(--colour-green-2); | ||
| --background-green: var(--colour-green-1); | ||
| /** | ||
| * Spacing Units (Deprecated) | ||
| * These tie in directly with the coloured spaces depicted in design mocks | ||
| * Responsiveness is built-in to the variable, so no component-level tweaks needed | ||
| */ | ||
| --space-red: 6rem; | ||
| --space-pink: 4rem; | ||
| --space-purple: 2rem; | ||
| --space-green: 2rem; | ||
| --space-blue: 1rem; | ||
| --space-orange: .5rem; | ||
| @media(min-width: 1024px) { | ||
| --space-purple: 3rem; | ||
| --space-pink: 6rem; | ||
| --space-red: 10rem; | ||
| } | ||
| /** | ||
| * Spacing Units | ||
| * These tie in directly with the spacing units defined in Figma | ||
| * https://www.figma.com/file/xiTC7i82LbrfGrMQRqsxLY/Arc'teryx-Components?type=design&node-id=781-52&mode=design&t=LHI4MFqa1SCYqNKI-0 | ||
| */ | ||
| --desk-mobile05: 0.5rem; | ||
| --desk-mobile1: 1rem; | ||
| --desk-mobile2: 2rem; | ||
| --desk3-mobile2: 2rem; | ||
| --desk6-mobile4: 4rem; | ||
| --desk10-mobile6: 6rem; | ||
| @media(min-width: 992px) { | ||
| --desk3-mobile2: 3rem; | ||
| --desk6-mobile4: 6rem; | ||
| --desk10-mobile6: 10rem; | ||
| } | ||
| // Spacing Units - Aliases | ||
| --space-xs: var(--desk-mobile05); | ||
| --space-s: var(--desk-mobile1); | ||
| --space-m: var(--desk-mobile2); | ||
| --space-l: var(--desk3-mobile2); | ||
| --space-xl: var(--desk6-mobile4); | ||
| --space-xxl: var(--desk10-mobile6); | ||
| /** | ||
| * CatIntro Banners | ||
| */ | ||
| --banner-height-xs: 10rem; /* 150px */ | ||
| --banner-height-sm: 12rem; /* 180px */ | ||
| --banner-height-md: 13.333rem; /* 200px */ | ||
| --banner-height-lg: 16.666rem; /* 250px */ | ||
| --banner-height-xl: 23.333rem; /* 350px */ | ||
| /** | ||
| * Common breakpoints | ||
| */ | ||
| --breakpoint-sm: 576px; | ||
| --breakpoint-md: 768px; | ||
| --breakpoint-lg: 992px; | ||
| --breakpoint-xl: 1200px; | ||
| /** | ||
| * ProductTiles | ||
| */ | ||
| --product-tile-2-col: 50%; | ||
| --product-tile-3-col: 33.33%; | ||
| --product-tile-4-col: 25%; | ||
| } | ||
| html { | ||
| height: 100%; | ||
| height: -webkit-fill-available; | ||
| scroll-behavior: smooth; | ||
| *, | ||
| *::before, | ||
| *::after { | ||
| box-sizing: border-box; | ||
| } | ||
| } | ||
| ul[class], | ||
| ol[class] { | ||
| padding: 0; | ||
| } | ||
| body, | ||
| ul[class], | ||
| ol[class], | ||
| li, | ||
| figure, | ||
| figcaption, | ||
| blockquote, | ||
| dl, | ||
| dd { | ||
| margin: 0; | ||
| } | ||
| body { | ||
| min-height: 100vh; | ||
| min-height: -webkit-fill-available; | ||
| text-rendering: optimizeSpeed; | ||
| font-size: 1rem; | ||
| line-height: 1.5; | ||
| font-family: var(--font-helvetica); | ||
| color: var(--colour-black); | ||
| } | ||
| ol, ul { | ||
| list-style-position: outside; | ||
| margin: 1rem 0 0 0; | ||
| padding: 0 0 0 2rem; | ||
| } | ||
| ul { | ||
| list-style-type: disc; | ||
| } | ||
| li { | ||
| line-height: 1.5rem; | ||
| padding-bottom: 0.5rem; | ||
| } | ||
| ul[class], | ||
| ol[class] { | ||
| list-style: none; | ||
| } | ||
| /* helper class to hide scrollbars */ | ||
| .hide--scrollbar { | ||
| /* Chrome, Safari and Opera */ | ||
| ::-webkit-scrollbar { | ||
| display: none; | ||
| } | ||
| scrollbar-width: none; /* Firefox */ | ||
| } | ||
| a:not([class]) { | ||
| text-decoration: underline; | ||
| text-decoration-skip-ink: auto; | ||
| } | ||
| a:focus, button:focus { | ||
| outline: none; | ||
| } | ||
| a:focus-visible, button:focus-visible { | ||
| outline: var(--focus-visible); | ||
| } | ||
| a:-moz-focus-visible, button:-moz-focus-visible, | ||
| :-moz-focusring { | ||
| outline: var(--focus-visible); | ||
| } | ||
| /** | ||
| * Heading tags; h1, h2, h3, h4 | ||
| * Ideally all Heading tags will use the <H1>, <H2>, <H3>, and <H4> provided by @arcteryx/components-typography | ||
| * but this will help catch any tags that might not be styled-components | ||
| */ | ||
| h1, h2, h3, h4 { | ||
| font-family: urw-din-condensed, arial, sans-serif; | ||
| font-weight: 700; | ||
| line-height: 1.5rem; | ||
| margin-top: 0; | ||
| } | ||
| h1 { | ||
| margin-bottom: 1rem; | ||
| font-size: 1.5rem; | ||
| } | ||
| h2 { | ||
| margin-bottom: 1rem; | ||
| font-size: 1.25rem; | ||
| } | ||
| h3 { | ||
| margin-bottom: 0.5rem; | ||
| font-size: 1.1rem; | ||
| } | ||
| h4 { | ||
| margin-bottom: 0.5rem; | ||
| font-size: 1rem; | ||
| } | ||
| p { | ||
| ${Body1Styles({ | ||
| alignment: TextAlignment.INHERIT | ||
| })}; | ||
| strong, b { | ||
| ${Body3Styles({ | ||
| alignment: TextAlignment.INHERIT | ||
| })} | ||
| } | ||
| em, i { | ||
| ${Body2Styles({ | ||
| alignment: TextAlignment.INHERIT | ||
| })} | ||
| } | ||
| &:last-of-type { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
| strong, b { | ||
| ${Body3Styles({ | ||
| alignment: TextAlignment.INHERIT | ||
| })} | ||
| } | ||
| em, i { | ||
| ${Body2Styles({ | ||
| alignment: TextAlignment.INHERIT | ||
| })} | ||
| } | ||
| img { | ||
| max-width: 100%; | ||
| display: block; | ||
| } | ||
| .lazyload, | ||
| .lazyloading { | ||
| opacity: 0; | ||
| } | ||
| .lazyloaded { | ||
| opacity: 1; | ||
| transition: opacity 200ms; | ||
| } | ||
| /* Legacy class for header nav hover overlay */ | ||
| .overlay-dark--full { | ||
| position: fixed; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| opacity: 1; | ||
| z-index: 250; | ||
| } | ||
| /** | ||
| * a11y | ||
| * For folks who's browser requests reduced motion | ||
| */ | ||
| @media (prefers-reduced-motion: reduce) { | ||
| * { | ||
| animation-duration: 0.01ms !important; | ||
| animation-iteration-count: 1 !important; | ||
| transition-duration: 0.01ms !important; | ||
| scroll-behavior: auto !important; | ||
| } | ||
| } | ||
| /* Helvetica Now Display */ | ||
| @font-face { | ||
| /* Light */ | ||
| font-family: "helvetica-now-display"; | ||
| font-style: normal; | ||
| font-stretch: normal; | ||
| font-display: swap; | ||
| font-weight: 300; | ||
| src: url("https://images.arcteryx.com/fonts/HelveticaNowDisplayLight_normal_normal.woff2") format("woff2"), | ||
| url("https://images.arcteryx.com/fonts/HelveticaNowDisplayLight_normal_normal.woff") format("woff"); | ||
| } | ||
| @font-face { | ||
| /* Italic */ | ||
| font-family: "helvetica-now-display"; | ||
| font-style: italic; | ||
| font-stretch: normal; | ||
| font-display: swap; | ||
| font-weight: 400; | ||
| src: url("https://images.arcteryx.com/fonts/HelveticaNowDisplayItalic_italic_normal.woff2") format("woff2"), | ||
| url("https://images.arcteryx.com/fonts/HelveticaNowDisplayItalic_italic_normal.woff") format("woff"); | ||
| } | ||
| @font-face { | ||
| /* Regular */ | ||
| font-family: "helvetica-now-display"; | ||
| font-style: normal; | ||
| font-stretch: normal; | ||
| font-display: swap; | ||
| font-weight: 400; | ||
| src: url("https://images.arcteryx.com/fonts/HelveticaNowDisplayRegular_normal_normal.woff2") format("woff2"), | ||
| url("https://images.arcteryx.com/fonts/HelveticaNowDisplayRegular_normal_normal.woff") format("woff"); | ||
| } | ||
| @font-face { | ||
| /* Bold */ | ||
| font-family: "helvetica-now-display"; | ||
| font-style: normal; | ||
| font-stretch: normal; | ||
| font-display: swap; | ||
| font-weight: 700; | ||
| src: url("https://images.arcteryx.com/fonts/HelveticaNowDisplayBold_normal_normal.woff2") format("woff2"), | ||
| url("https://images.arcteryx.com/fonts/HelveticaNowDisplayBold_normal_normal.woff") format("woff"); | ||
| } | ||
| /* Elan ITC */ | ||
| @font-face { | ||
| font-family: "elan-itc-pro"; | ||
| font-style: normal; | ||
| font-stretch: normal; | ||
| font-display: swap; | ||
| font-weight: 400; | ||
| src: | ||
| url('https://images.arcteryx.com/fonts/ElanITCPro-Book-Web.woff2') format('woff2'), | ||
| url('https://images.arcteryx.com/fonts/ElanITCPro-Book-Web.woff') format('woff'); | ||
| } | ||
| /* | ||
| * The Typekit service used to deliver this font or fonts for use on websites | ||
| * is provided by Adobe and is subject to these Terms of Use | ||
| * http://www.adobe.com/products/eulas/tou_typekit. For font license | ||
| * information, see the list below. | ||
| * | ||
| * urw-din: | ||
| * - http://typekit.com/eulas/00000000000000007735a839 | ||
| * - http://typekit.com/eulas/00000000000000007735a83d | ||
| * - http://typekit.com/eulas/00000000000000007735a840 | ||
| * - http://typekit.com/eulas/00000000000000007735a843 | ||
| * - http://typekit.com/eulas/00000000000000007735a846 | ||
| * - http://typekit.com/eulas/00000000000000007735a849 | ||
| * - http://typekit.com/eulas/00000000000000007735a84b | ||
| * - http://typekit.com/eulas/00000000000000007735a84f | ||
| * - http://typekit.com/eulas/00000000000000007735a851 | ||
| * - http://typekit.com/eulas/00000000000000007735a855 | ||
| * urw-din-condensed: | ||
| * - http://typekit.com/eulas/00000000000000007735a83b | ||
| * - http://typekit.com/eulas/00000000000000007735a83e | ||
| * - http://typekit.com/eulas/00000000000000007735a841 | ||
| * - http://typekit.com/eulas/00000000000000007735a844 | ||
| * - http://typekit.com/eulas/00000000000000007735a847 | ||
| * - http://typekit.com/eulas/00000000000000007735a84a | ||
| * - http://typekit.com/eulas/00000000000000007735a84d | ||
| * - http://typekit.com/eulas/00000000000000007735a850 | ||
| * - http://typekit.com/eulas/00000000000000007735a853 | ||
| * - http://typekit.com/eulas/00000000000000007735a856 | ||
| * urw-din-semi-condensed: | ||
| * - http://typekit.com/eulas/00000000000000007735a83c | ||
| * - http://typekit.com/eulas/00000000000000007735a83f | ||
| * - http://typekit.com/eulas/00000000000000007735a842 | ||
| * - http://typekit.com/eulas/00000000000000007735a845 | ||
| * - http://typekit.com/eulas/00000000000000007735a848 | ||
| * - http://typekit.com/eulas/00000000000000007735a84c | ||
| * - http://typekit.com/eulas/00000000000000007735a84e | ||
| * - http://typekit.com/eulas/00000000000000007735a852 | ||
| * - http://typekit.com/eulas/00000000000000007735a854 | ||
| * - http://typekit.com/eulas/00000000000000007735a857 | ||
| * | ||
| * © 2009-2023 Adobe Systems Incorporated. All Rights Reserved. | ||
| */ | ||
| /*{"last_published":"2023-09-27 18:05:37 UTC"}*/ | ||
| @import url("https://p.typekit.net/p.css?s=1&k=amb0fbb&ht=tk&f=36601.36602.36603.36604.36605.36606.36607.36608.36609.36610.36617.36618.36619.36620.36621.36622.36623.36624.36625.36626.36633.36634.36635.36636.36637.36638.36639.36640.36641.36642&a=131936418&app=typekit&e=css"); | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/1f0265/00000000000000007735a839/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/1f0265/00000000000000007735a839/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/1f0265/00000000000000007735a839/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/f1d51b/00000000000000007735a83d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/f1d51b/00000000000000007735a83d/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/f1d51b/00000000000000007735a83d/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/5f44f1/00000000000000007735a840/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"),url("https://use.typekit.net/af/5f44f1/00000000000000007735a840/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"),url("https://use.typekit.net/af/5f44f1/00000000000000007735a840/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/d96df7/00000000000000007735a843/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/d96df7/00000000000000007735a843/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/d96df7/00000000000000007735a843/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/caf48f/00000000000000007735a846/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"),url("https://use.typekit.net/af/caf48f/00000000000000007735a846/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"),url("https://use.typekit.net/af/caf48f/00000000000000007735a846/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/b8eeae/00000000000000007735a849/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/b8eeae/00000000000000007735a849/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/b8eeae/00000000000000007735a849/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/1c5092/00000000000000007735a84b/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/1c5092/00000000000000007735a84b/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/1c5092/00000000000000007735a84b/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/cd97e9/00000000000000007735a84f/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/cd97e9/00000000000000007735a84f/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/cd97e9/00000000000000007735a84f/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/fe2f02/00000000000000007735a851/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff2"),url("https://use.typekit.net/af/fe2f02/00000000000000007735a851/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff"),url("https://use.typekit.net/af/fe2f02/00000000000000007735a851/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:900;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/0fba77/00000000000000007735a855/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/0fba77/00000000000000007735a855/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/0fba77/00000000000000007735a855/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:900;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/b27e1e/00000000000000007735a83b/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/b27e1e/00000000000000007735a83b/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/b27e1e/00000000000000007735a83b/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/ba5c17/00000000000000007735a83e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/ba5c17/00000000000000007735a83e/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/ba5c17/00000000000000007735a83e/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/06eb22/00000000000000007735a841/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/06eb22/00000000000000007735a841/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/06eb22/00000000000000007735a841/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/413a03/00000000000000007735a844/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"),url("https://use.typekit.net/af/413a03/00000000000000007735a844/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"),url("https://use.typekit.net/af/413a03/00000000000000007735a844/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/c2cf88/00000000000000007735a847/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/c2cf88/00000000000000007735a847/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/c2cf88/00000000000000007735a847/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/b1d7bd/00000000000000007735a84a/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"),url("https://use.typekit.net/af/b1d7bd/00000000000000007735a84a/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"),url("https://use.typekit.net/af/b1d7bd/00000000000000007735a84a/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/be96d8/00000000000000007735a84d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/be96d8/00000000000000007735a84d/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/be96d8/00000000000000007735a84d/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/3f20e7/00000000000000007735a850/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/3f20e7/00000000000000007735a850/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/3f20e7/00000000000000007735a850/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/5002a8/00000000000000007735a853/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff2"),url("https://use.typekit.net/af/5002a8/00000000000000007735a853/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff"),url("https://use.typekit.net/af/5002a8/00000000000000007735a853/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:900;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/c85988/00000000000000007735a856/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/c85988/00000000000000007735a856/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/c85988/00000000000000007735a856/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:900;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/68a396/00000000000000007735a83c/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/68a396/00000000000000007735a83c/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/68a396/00000000000000007735a83c/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/960873/00000000000000007735a83f/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/960873/00000000000000007735a83f/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/960873/00000000000000007735a83f/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/40dae5/00000000000000007735a842/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"),url("https://use.typekit.net/af/40dae5/00000000000000007735a842/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"),url("https://use.typekit.net/af/40dae5/00000000000000007735a842/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/5788bc/00000000000000007735a845/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/5788bc/00000000000000007735a845/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/5788bc/00000000000000007735a845/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/96cf20/00000000000000007735a848/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"),url("https://use.typekit.net/af/96cf20/00000000000000007735a848/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"),url("https://use.typekit.net/af/96cf20/00000000000000007735a848/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/bd0e8a/00000000000000007735a84c/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/bd0e8a/00000000000000007735a84c/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/bd0e8a/00000000000000007735a84c/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/f61b58/00000000000000007735a84e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/f61b58/00000000000000007735a84e/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/f61b58/00000000000000007735a84e/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/349829/00000000000000007735a852/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/349829/00000000000000007735a852/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/349829/00000000000000007735a852/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/8def5a/00000000000000007735a854/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/8def5a/00000000000000007735a854/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/8def5a/00000000000000007735a854/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:900;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/d4ff8c/00000000000000007735a857/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff2"),url("https://use.typekit.net/af/d4ff8c/00000000000000007735a857/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff"),url("https://use.typekit.net/af/d4ff8c/00000000000000007735a857/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:900;font-stretch:normal; | ||
| } | ||
| .tk-urw-din { font-family: "urw-din",sans-serif; } | ||
| .tk-urw-din-condensed { font-family: "urw-din-condensed",sans-serif; } | ||
| .tk-urw-din-semi-condensed { font-family: "urw-din-semi-condensed",sans-serif; } | ||
| `; | ||
| const _excluded = ["market", "context", "type", "size", "IconButtonLeft", "IconButtonRight", "disabled", "isWaiting", "onClick", "className", "id", "style", "children", "href", "width"]; | ||
@@ -129,6 +1410,2 @@ const ButtonWrapper = styled__default["default"].div` | ||
| border: ${props => [SUBTLE, FINDINSTORE].includes(props.context) ? "1px solid var(--colour-black)" : "1px solid transparent"}; | ||
| font-size: 1rem; | ||
| line-height: 1.1rem; | ||
| font-family: var(--font-urw-din); | ||
| font-weight: 400; | ||
| text-transform: ${props => props.context === STANDARD || !props.href ? "uppercase" : "none"}; | ||
@@ -312,3 +1589,3 @@ word-break: keep-all; | ||
| icon: IconButtonLeft | ||
| }), /*#__PURE__*/React__default["default"].createElement("span", null, children), !isWaiting && hasIconButtonRight && /*#__PURE__*/React__default["default"].createElement(IconButton, { | ||
| }), /*#__PURE__*/React__default["default"].createElement(ButtonText1, null, children), !isWaiting && hasIconButtonRight && /*#__PURE__*/React__default["default"].createElement(IconButton, { | ||
| icon: IconButtonRight | ||
@@ -315,0 +1592,0 @@ })); |
1289
dist/es/index.js
| import React from 'react'; | ||
| import styled, { css } from 'styled-components'; | ||
| import styled, { createGlobalStyle, css } from 'styled-components'; | ||
| import PropTypes from 'prop-types'; | ||
| import cx from 'classnames'; | ||
| import { createBreakpoint } from 'styled-components-breakpoint'; | ||
@@ -99,2 +100,1282 @@ function _extends() { | ||
| /****************************************************************************** | ||
| Copyright (c) Microsoft Corporation. | ||
| Permission to use, copy, modify, and/or distribute this software for any | ||
| purpose with or without fee is hereby granted. | ||
| THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH | ||
| REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY | ||
| AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, | ||
| INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM | ||
| LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR | ||
| OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR | ||
| PERFORMANCE OF THIS SOFTWARE. | ||
| ***************************************************************************** */ | ||
| function __rest(s, e) { | ||
| var t = {}; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; | ||
| if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
| if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; | ||
| } | ||
| return t; | ||
| } | ||
| var ScreenSize; | ||
| (function (ScreenSize) { | ||
| ScreenSize[ScreenSize["xs"] = 0] = "xs"; | ||
| ScreenSize[ScreenSize["sm"] = 576] = "sm"; | ||
| ScreenSize[ScreenSize["md"] = 768] = "md"; | ||
| ScreenSize[ScreenSize["lg"] = 992] = "lg"; | ||
| ScreenSize[ScreenSize["xl"] = 1200] = "xl"; | ||
| ScreenSize[ScreenSize["xxl"] = 1440] = "xxl"; | ||
| })(ScreenSize || (ScreenSize = {})); | ||
| createBreakpoint({ | ||
| xs: ScreenSize.xs, | ||
| sm: ScreenSize.sm, | ||
| md: ScreenSize.md, | ||
| lg: ScreenSize.lg, | ||
| xl: ScreenSize.xl, | ||
| xxl: ScreenSize.xxl | ||
| }); | ||
| var TextAlignment; | ||
| (function (TextAlignment) { | ||
| TextAlignment["LEFT"] = "left"; | ||
| TextAlignment["CENTER"] = "center"; | ||
| TextAlignment["RIGHT"] = "right"; | ||
| TextAlignment["INHERIT"] = "inherit"; | ||
| })(TextAlignment || (TextAlignment = {})); | ||
| var Variant; | ||
| (function (Variant) { | ||
| Variant["SMALL"] = "small"; | ||
| Variant["MEDIUM"] = "medium"; | ||
| Variant["XLARGE"] = "extra-large"; | ||
| Variant["PRIMARY"] = "primary"; | ||
| Variant["LINK"] = "link"; | ||
| })(Variant || (Variant = {})); | ||
| Object.values(TextAlignment); | ||
| Object.values(Variant); | ||
| const H1Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| let desktopFontSize = "3.25rem"; | ||
| let mobileFontSize = "2.625rem"; | ||
| switch (props.variant) { | ||
| case Variant.SMALL: | ||
| desktopFontSize = "1.625rem"; | ||
| mobileFontSize = "1.5rem"; | ||
| break; | ||
| case Variant.MEDIUM: | ||
| desktopFontSize = "2rem"; | ||
| mobileFontSize = "1.75rem"; | ||
| break; | ||
| } | ||
| return css` | ||
| font-family: var(--font-elan); | ||
| font-size: ${desktopFontSize}; | ||
| font-weight: 400; | ||
| line-height: 1; | ||
| text-transform: uppercase; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-bottom: 0; | ||
| @media (max-width: ${ScreenSize.md}px) { | ||
| font-size: ${mobileFontSize}; | ||
| } | ||
| `; | ||
| }; | ||
| styled.h1` | ||
| ${H1Styles} | ||
| `; | ||
| const H2Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| const desktopFontSize = props.variant && props.variant === Variant.XLARGE ? "3.25rem" : "2.375rem"; | ||
| const mobileFontSize = props.variant && props.variant === Variant.XLARGE ? "2.25rem" : "1.875rem"; | ||
| return css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: ${desktopFontSize}; | ||
| font-weight: 300; | ||
| line-height: 1.15; | ||
| letter-spacing: 0.02375rem; | ||
| text-transform: initial; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-bottom: 0; | ||
| @media (max-width: ${ScreenSize.md}px) { | ||
| font-size: ${mobileFontSize}; | ||
| line-height: 1.2; | ||
| } | ||
| `; | ||
| }; | ||
| styled.h2` | ||
| ${H2Styles}; | ||
| `; | ||
| const H3Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.75rem; | ||
| font-weight: 400; | ||
| line-height: 1.35; | ||
| text-transform: initial; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-bottom: 0; | ||
| @media (max-width: ${ScreenSize.md}px) { | ||
| font-size: 1.5rem; | ||
| } | ||
| `; | ||
| }; | ||
| styled.h3` | ||
| ${H3Styles} | ||
| `; | ||
| const H4Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return css` | ||
| font-family: var(--font-elan); | ||
| font-size: 1.375rem; | ||
| font-weight: 400; | ||
| line-height: 1.2; | ||
| text-transform: uppercase; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-bottom: 0; | ||
| @media (max-width: ${ScreenSize.md}px) { | ||
| font-size: 1.25rem; | ||
| line-height: 1.2; | ||
| } | ||
| `; | ||
| }; | ||
| styled.h4` | ||
| ${H4Styles}; | ||
| `; | ||
| const H5Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.25rem; | ||
| font-weight: 700; | ||
| line-height: 1.4; | ||
| text-transform: initial; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| // TODO: update with proper screen size breakpoint | ||
| @media (max-width: ${ScreenSize.sm}px) { | ||
| font-size: 1.25rem; | ||
| } | ||
| `; | ||
| }; | ||
| styled.h5` | ||
| ${H5Styles} | ||
| `; | ||
| const H6Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.25rem; | ||
| font-weight: 400; | ||
| line-height: 1.2; | ||
| letter-spacing: 0.025rem; | ||
| text-transform: uppercase; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| `; | ||
| }; | ||
| styled.h6` | ||
| ${H6Styles} | ||
| `; | ||
| const fontSize = size => { | ||
| if (size === "s") { | ||
| return "0.75rem"; | ||
| } | ||
| if (size === "m") { | ||
| return "1.1rem"; | ||
| } | ||
| if (size === "l") { | ||
| return "1.25rem"; | ||
| } | ||
| return "1rem"; | ||
| }; | ||
| const P = styled.p` | ||
| margin: 0 0 1.5rem 0; | ||
| font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif'}; | ||
| font-size: ${props => fontSize(props.size)}; | ||
| font-weight: ${props => props.bold ? `600` : `400`}; | ||
| font-style: ${props => props.italic ? `italic` : `normal`}; | ||
| line-height: ${props => props.size === "s" ? `1rem` : `1.5rem`}; | ||
| color: ${props => props.textColor}; | ||
| text-decoration: ${props => props.textDecoration}; | ||
| strong, | ||
| b { | ||
| font-weight: 500; | ||
| } | ||
| em, | ||
| i { | ||
| font-weight: 400; | ||
| font-style: italic; | ||
| } | ||
| &:last-of-type { | ||
| margin-bottom: 0; | ||
| } | ||
| `; | ||
| P.defaultProps = { | ||
| large: false, | ||
| textColor: "var(--colour-copy)", | ||
| textDecoration: "none", | ||
| market: "outdoor" | ||
| }; | ||
| const DefaultBodyStyles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return css` | ||
| max-width: 75ch; | ||
| font-family: var(--font-helvetica); | ||
| text-transform: initial; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin: 0; | ||
| position: relative; | ||
| `; | ||
| }; | ||
| const bodyType = ["body4", "body5", "body6"]; | ||
| const FontLinkAfterStyle = type => { | ||
| return ` | ||
| content: ""; | ||
| position: absolute; | ||
| left: 0; | ||
| width: 0; | ||
| // TODO: use this when we switch to new fonts | ||
| // bottom: ${bodyType.includes(type) ? "5px" : "6px"}; | ||
| bottom: 2px; | ||
| background-color: currentColor; | ||
| height: 1px; | ||
| transition-property: width; | ||
| transition-duration: 0.3s; | ||
| transition-timing-function: ease-out; | ||
| `; | ||
| }; | ||
| const FontLinkHoverStyle = ` | ||
| width: 100%; | ||
| `; | ||
| const FontLinkStyle = type => { | ||
| return ` | ||
| text-decoration: none; | ||
| position: relative; | ||
| display: block; | ||
| width: fit-content; | ||
| &::after { | ||
| ${FontLinkAfterStyle(type)} | ||
| } | ||
| &:hover::after { | ||
| ${FontLinkHoverStyle} | ||
| } | ||
| `; | ||
| }; | ||
| const Body1Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body1"); | ||
| return css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-size: 1rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled.p` | ||
| ${Body1Styles} | ||
| `; | ||
| const Body2Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body2"); | ||
| return css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-style: italic; | ||
| font-size: 1rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled.p` | ||
| ${Body2Styles} | ||
| `; | ||
| const Body3Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body3"); | ||
| return css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-size: 1rem; | ||
| font-weight: 700; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled.p` | ||
| ${Body3Styles} | ||
| `; | ||
| const Body4Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body4"); | ||
| return css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-size: 0.875rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled.p` | ||
| ${Body4Styles}; | ||
| `; | ||
| const Body5Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body5"); | ||
| return css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-size: 0.875rem; | ||
| font-style: italic; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled.p` | ||
| ${Body5Styles} | ||
| `; | ||
| const Body6Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body6"); | ||
| return css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-size: 0.875rem; | ||
| font-weight: 700; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled.p` | ||
| ${Body6Styles}; | ||
| `; | ||
| const Button1Styles = () => { | ||
| return css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1rem; | ||
| font-weight: 700; | ||
| line-height: 1.2; | ||
| text-transform: initial; | ||
| text-align: center; | ||
| margin: 0; | ||
| position: relative; | ||
| `; | ||
| }; | ||
| const StyledButtonText1 = styled.span` | ||
| ${Button1Styles} | ||
| `; | ||
| const ButtonText1 = _a => { | ||
| var { | ||
| children | ||
| } = _a, | ||
| props = __rest(_a, ["children"]); | ||
| return /*#__PURE__*/React.createElement(StyledButtonText1, Object.assign({}, props, { | ||
| "data-component": "button1" | ||
| }), children); | ||
| }; | ||
| const Button2Styles = () => { | ||
| return css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 0.875rem; | ||
| font-weight: 700; | ||
| line-height: 1.2; | ||
| text-transform: initial; | ||
| text-align: center; | ||
| margin: 0; | ||
| position: relative; | ||
| `; | ||
| }; | ||
| styled.span` | ||
| ${Button2Styles} | ||
| `; | ||
| const LinkStyles = props => { | ||
| var _a, _b; | ||
| const fontSize = props.variant === Variant.SMALL ? `0.875rem` : `1rem`; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.INHERIT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: ${fontSize}; | ||
| font-weight: 700; | ||
| line-height: 1.5; | ||
| text-transform: initial; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| word-break: break-word; | ||
| position: relative; | ||
| text-decoration: none; | ||
| width: fit-content; | ||
| &::before { | ||
| content: ""; | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 1px; | ||
| bottom: 2px; | ||
| left: 0; | ||
| background-color: currentColor; | ||
| visibility: visible; | ||
| transition: all 0.3s ease-in-out; | ||
| } | ||
| &:hover { | ||
| text-decoration: none; | ||
| } | ||
| &:hover::before { | ||
| visibility: hidden; | ||
| width: 0; | ||
| } | ||
| `; | ||
| }; | ||
| styled.a` | ||
| ${LinkStyles} | ||
| `; | ||
| const CaptionStyles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 0.75rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| letter-spacing: 0; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| text-transform: initial; | ||
| `; | ||
| }; | ||
| styled.p` | ||
| ${CaptionStyles} | ||
| `; | ||
| const OverlineStyles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 0.75rem; | ||
| font-weight: 400; | ||
| line-height: 1.3; | ||
| letter-spacing: 0.0475rem; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| text-transform: uppercase; | ||
| margin-bottom: 0; | ||
| `; | ||
| }; | ||
| styled.p` | ||
| ${OverlineStyles} | ||
| `; | ||
| const Subtitle1Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.125rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| text-transform: initial; | ||
| `; | ||
| }; | ||
| styled.p` | ||
| ${Subtitle1Styles} | ||
| `; | ||
| const Subtitle2Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.125rem; | ||
| font-weight: 400; | ||
| font-style: italic; | ||
| line-height: 1.5; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| text-transform: initial; | ||
| `; | ||
| }; | ||
| styled.p` | ||
| ${Subtitle2Styles} | ||
| `; | ||
| const Subtitle3Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.125rem; | ||
| font-weight: 700; | ||
| line-height: 1.5; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| text-transform: initial; | ||
| margin-bottom: 0; | ||
| `; | ||
| }; | ||
| styled.p` | ||
| ${Subtitle3Styles} | ||
| `; | ||
| const Quote = styled.blockquote` | ||
| position: relative; | ||
| font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif'}; | ||
| color: ${props => props.textColor}; | ||
| font-size: 1rem; | ||
| font-weight: 400; | ||
| font-style: italic; | ||
| line-height: 1.2rem; | ||
| padding-left: 2.5rem; | ||
| max-width: 500px; | ||
| `; | ||
| Quote.defaultProps = { | ||
| large: false, | ||
| textColor: "var(--colour-black)", | ||
| market: "outdoor" | ||
| }; | ||
| styled.p` | ||
| max-width: none; | ||
| `; | ||
| styled.ul` | ||
| max-width: none; | ||
| `; | ||
| styled.div` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| `; | ||
| styled.div` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: flex-end; | ||
| `; | ||
| const Cube = styled.div` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| position: relative; | ||
| margin: 0 1rem; | ||
| font-size: 1rem; | ||
| &:after { | ||
| content: attr(title); | ||
| display: block; | ||
| position: absolute; | ||
| bottom: -3rem; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| } | ||
| `; | ||
| styled(Cube)` | ||
| width: var(--space-xs); | ||
| height: var(--space-xs); | ||
| background-color: #EBCC83; | ||
| `; | ||
| styled(Cube)` | ||
| width: var(--space-s); | ||
| height: var(--space-s); | ||
| background-color: #A0E6EB; | ||
| `; | ||
| styled(Cube)` | ||
| width: var(--space-m); | ||
| height: var(--space-m); | ||
| background-color: #C8EBA0; | ||
| `; | ||
| styled(Cube)` | ||
| width: var(--space-l); | ||
| height: var(--space-l); | ||
| background-color: #A0AFEB; | ||
| `; | ||
| styled(Cube)` | ||
| width: var(--space-xl); | ||
| height: var(--space-xl); | ||
| background-color: #DBABE9; | ||
| `; | ||
| styled(Cube)` | ||
| width: var(--space-xxl); | ||
| height: var(--space-xxl); | ||
| background-color: #EB9595; | ||
| `; | ||
| const Square = styled.div` | ||
| width: 1rem; | ||
| height: 1rem; | ||
| display: inline-block; | ||
| margin-right: 5px; | ||
| `; | ||
| styled(Square)` | ||
| background-color: #EBCC83; | ||
| `; | ||
| styled(Square)` | ||
| background-color: #A0E6EB; | ||
| `; | ||
| styled(Square)` | ||
| background-color: #C8EBA0; | ||
| `; | ||
| styled(Square)` | ||
| background-color: #A0AFEB; | ||
| `; | ||
| styled(Square)` | ||
| background-color: #DBABE9; | ||
| `; | ||
| styled(Square)` | ||
| background-color: #EB9595; | ||
| `; | ||
| createGlobalStyle` | ||
| // This is the site-wide root CSS where we define our global variables | ||
| :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; | ||
| --focus-visible: 0.2rem solid #5b9dd9; | ||
| /** | ||
| * Colours | ||
| */ | ||
| --colour-black: #1A1A1A; | ||
| --colour-grey-dark: #333333; | ||
| --colour-grey-medium: #666666; | ||
| --colour-grey-inactive: #b2b2b2; | ||
| --colour-grey-pinline: #cccccc; | ||
| --colour-grey-background: #e9e9e9; | ||
| --colour-grey-item-background: #fafafa; | ||
| --colour-black-gradient: #646464; | ||
| --colour-white: #ffffff; | ||
| /* | ||
| * Feedback Colours | ||
| */ | ||
| --colour-red-3: #990000; | ||
| --colour-red-2: #c86464; | ||
| --colour-red-1: #fbebeb; | ||
| --colour-yellow-3: #785e1c; | ||
| --colour-yellow-2: #ab934f; | ||
| --colour-yellow-1: #f8f2d5; | ||
| --colour-blue-3: #31668f; | ||
| --colour-blue-2: #5b9dd9; | ||
| --colour-blue-1: #e3edf2; | ||
| --colour-green-3: #227733; | ||
| --colour-green-2: #5aab6a; | ||
| --colour-green-1: #dff0d8; | ||
| --gradient-active: linear-gradient(180deg, var(--colour-black) 9.38%, var(--colour-black-gradient) 73.96%), var(--colour-white); | ||
| --gradient-hover: linear-gradient(180deg, var(--colour-black-gradient) 5.21%, var(--colour-black) 87.5%), var(--colour-white); | ||
| /* Why Renaming Base Color Variables? */ | ||
| --colour-copy: var(--colour-black); | ||
| --black: var(--colour-black); | ||
| --dark-grey: var(--colour-grey-dark); | ||
| --medium-grey: var(--colour-grey-medium); | ||
| --inactive-state-grey: var(--colour-grey-inactive); | ||
| --pinline-grey: var(--colour-grey-pinline); | ||
| --background-grey: var(--colour-grey-background); | ||
| --background-gradient: var(--colour-black-gradient); | ||
| --white: var(--colour-white); | ||
| /* WHY Renaming Color Variables in Core-UI? */ | ||
| --warning-red: var(--colour-red-3); | ||
| --medium-red: var(--colour-red-2); | ||
| --background-red: var(--colour-red-1); | ||
| /* WHY Renaming Color Variables in Core-UI? */ | ||
| --caution-yellow: var(--colour-yellow-3); | ||
| --medium-yellow: var(--colour-yellow-2); | ||
| --background-yellow: var(--colour-yellow-1); | ||
| /* WHY Renaming Color Variables in Core-UI? */ | ||
| --info-blue: var(--colour-blue-3); | ||
| --focus-blue: var(--colour-blue-2); | ||
| --background-blue: var(--colour-blue-1); | ||
| /* WHY Renaming Color Variables in Core-UI? */ | ||
| --success-green: var(--colour-green-3); | ||
| --medium-green: var(--colour-green-2); | ||
| --background-green: var(--colour-green-1); | ||
| /** | ||
| * Spacing Units (Deprecated) | ||
| * These tie in directly with the coloured spaces depicted in design mocks | ||
| * Responsiveness is built-in to the variable, so no component-level tweaks needed | ||
| */ | ||
| --space-red: 6rem; | ||
| --space-pink: 4rem; | ||
| --space-purple: 2rem; | ||
| --space-green: 2rem; | ||
| --space-blue: 1rem; | ||
| --space-orange: .5rem; | ||
| @media(min-width: 1024px) { | ||
| --space-purple: 3rem; | ||
| --space-pink: 6rem; | ||
| --space-red: 10rem; | ||
| } | ||
| /** | ||
| * Spacing Units | ||
| * These tie in directly with the spacing units defined in Figma | ||
| * https://www.figma.com/file/xiTC7i82LbrfGrMQRqsxLY/Arc'teryx-Components?type=design&node-id=781-52&mode=design&t=LHI4MFqa1SCYqNKI-0 | ||
| */ | ||
| --desk-mobile05: 0.5rem; | ||
| --desk-mobile1: 1rem; | ||
| --desk-mobile2: 2rem; | ||
| --desk3-mobile2: 2rem; | ||
| --desk6-mobile4: 4rem; | ||
| --desk10-mobile6: 6rem; | ||
| @media(min-width: 992px) { | ||
| --desk3-mobile2: 3rem; | ||
| --desk6-mobile4: 6rem; | ||
| --desk10-mobile6: 10rem; | ||
| } | ||
| // Spacing Units - Aliases | ||
| --space-xs: var(--desk-mobile05); | ||
| --space-s: var(--desk-mobile1); | ||
| --space-m: var(--desk-mobile2); | ||
| --space-l: var(--desk3-mobile2); | ||
| --space-xl: var(--desk6-mobile4); | ||
| --space-xxl: var(--desk10-mobile6); | ||
| /** | ||
| * CatIntro Banners | ||
| */ | ||
| --banner-height-xs: 10rem; /* 150px */ | ||
| --banner-height-sm: 12rem; /* 180px */ | ||
| --banner-height-md: 13.333rem; /* 200px */ | ||
| --banner-height-lg: 16.666rem; /* 250px */ | ||
| --banner-height-xl: 23.333rem; /* 350px */ | ||
| /** | ||
| * Common breakpoints | ||
| */ | ||
| --breakpoint-sm: 576px; | ||
| --breakpoint-md: 768px; | ||
| --breakpoint-lg: 992px; | ||
| --breakpoint-xl: 1200px; | ||
| /** | ||
| * ProductTiles | ||
| */ | ||
| --product-tile-2-col: 50%; | ||
| --product-tile-3-col: 33.33%; | ||
| --product-tile-4-col: 25%; | ||
| } | ||
| html { | ||
| height: 100%; | ||
| height: -webkit-fill-available; | ||
| scroll-behavior: smooth; | ||
| *, | ||
| *::before, | ||
| *::after { | ||
| box-sizing: border-box; | ||
| } | ||
| } | ||
| ul[class], | ||
| ol[class] { | ||
| padding: 0; | ||
| } | ||
| body, | ||
| ul[class], | ||
| ol[class], | ||
| li, | ||
| figure, | ||
| figcaption, | ||
| blockquote, | ||
| dl, | ||
| dd { | ||
| margin: 0; | ||
| } | ||
| body { | ||
| min-height: 100vh; | ||
| min-height: -webkit-fill-available; | ||
| text-rendering: optimizeSpeed; | ||
| font-size: 1rem; | ||
| line-height: 1.5; | ||
| font-family: var(--font-helvetica); | ||
| color: var(--colour-black); | ||
| } | ||
| ol, ul { | ||
| list-style-position: outside; | ||
| margin: 1rem 0 0 0; | ||
| padding: 0 0 0 2rem; | ||
| } | ||
| ul { | ||
| list-style-type: disc; | ||
| } | ||
| li { | ||
| line-height: 1.5rem; | ||
| padding-bottom: 0.5rem; | ||
| } | ||
| ul[class], | ||
| ol[class] { | ||
| list-style: none; | ||
| } | ||
| /* helper class to hide scrollbars */ | ||
| .hide--scrollbar { | ||
| /* Chrome, Safari and Opera */ | ||
| ::-webkit-scrollbar { | ||
| display: none; | ||
| } | ||
| scrollbar-width: none; /* Firefox */ | ||
| } | ||
| a:not([class]) { | ||
| text-decoration: underline; | ||
| text-decoration-skip-ink: auto; | ||
| } | ||
| a:focus, button:focus { | ||
| outline: none; | ||
| } | ||
| a:focus-visible, button:focus-visible { | ||
| outline: var(--focus-visible); | ||
| } | ||
| a:-moz-focus-visible, button:-moz-focus-visible, | ||
| :-moz-focusring { | ||
| outline: var(--focus-visible); | ||
| } | ||
| /** | ||
| * Heading tags; h1, h2, h3, h4 | ||
| * Ideally all Heading tags will use the <H1>, <H2>, <H3>, and <H4> provided by @arcteryx/components-typography | ||
| * but this will help catch any tags that might not be styled-components | ||
| */ | ||
| h1, h2, h3, h4 { | ||
| font-family: urw-din-condensed, arial, sans-serif; | ||
| font-weight: 700; | ||
| line-height: 1.5rem; | ||
| margin-top: 0; | ||
| } | ||
| h1 { | ||
| margin-bottom: 1rem; | ||
| font-size: 1.5rem; | ||
| } | ||
| h2 { | ||
| margin-bottom: 1rem; | ||
| font-size: 1.25rem; | ||
| } | ||
| h3 { | ||
| margin-bottom: 0.5rem; | ||
| font-size: 1.1rem; | ||
| } | ||
| h4 { | ||
| margin-bottom: 0.5rem; | ||
| font-size: 1rem; | ||
| } | ||
| p { | ||
| ${Body1Styles({ | ||
| alignment: TextAlignment.INHERIT | ||
| })}; | ||
| strong, b { | ||
| ${Body3Styles({ | ||
| alignment: TextAlignment.INHERIT | ||
| })} | ||
| } | ||
| em, i { | ||
| ${Body2Styles({ | ||
| alignment: TextAlignment.INHERIT | ||
| })} | ||
| } | ||
| &:last-of-type { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
| strong, b { | ||
| ${Body3Styles({ | ||
| alignment: TextAlignment.INHERIT | ||
| })} | ||
| } | ||
| em, i { | ||
| ${Body2Styles({ | ||
| alignment: TextAlignment.INHERIT | ||
| })} | ||
| } | ||
| img { | ||
| max-width: 100%; | ||
| display: block; | ||
| } | ||
| .lazyload, | ||
| .lazyloading { | ||
| opacity: 0; | ||
| } | ||
| .lazyloaded { | ||
| opacity: 1; | ||
| transition: opacity 200ms; | ||
| } | ||
| /* Legacy class for header nav hover overlay */ | ||
| .overlay-dark--full { | ||
| position: fixed; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| opacity: 1; | ||
| z-index: 250; | ||
| } | ||
| /** | ||
| * a11y | ||
| * For folks who's browser requests reduced motion | ||
| */ | ||
| @media (prefers-reduced-motion: reduce) { | ||
| * { | ||
| animation-duration: 0.01ms !important; | ||
| animation-iteration-count: 1 !important; | ||
| transition-duration: 0.01ms !important; | ||
| scroll-behavior: auto !important; | ||
| } | ||
| } | ||
| /* Helvetica Now Display */ | ||
| @font-face { | ||
| /* Light */ | ||
| font-family: "helvetica-now-display"; | ||
| font-style: normal; | ||
| font-stretch: normal; | ||
| font-display: swap; | ||
| font-weight: 300; | ||
| src: url("https://images.arcteryx.com/fonts/HelveticaNowDisplayLight_normal_normal.woff2") format("woff2"), | ||
| url("https://images.arcteryx.com/fonts/HelveticaNowDisplayLight_normal_normal.woff") format("woff"); | ||
| } | ||
| @font-face { | ||
| /* Italic */ | ||
| font-family: "helvetica-now-display"; | ||
| font-style: italic; | ||
| font-stretch: normal; | ||
| font-display: swap; | ||
| font-weight: 400; | ||
| src: url("https://images.arcteryx.com/fonts/HelveticaNowDisplayItalic_italic_normal.woff2") format("woff2"), | ||
| url("https://images.arcteryx.com/fonts/HelveticaNowDisplayItalic_italic_normal.woff") format("woff"); | ||
| } | ||
| @font-face { | ||
| /* Regular */ | ||
| font-family: "helvetica-now-display"; | ||
| font-style: normal; | ||
| font-stretch: normal; | ||
| font-display: swap; | ||
| font-weight: 400; | ||
| src: url("https://images.arcteryx.com/fonts/HelveticaNowDisplayRegular_normal_normal.woff2") format("woff2"), | ||
| url("https://images.arcteryx.com/fonts/HelveticaNowDisplayRegular_normal_normal.woff") format("woff"); | ||
| } | ||
| @font-face { | ||
| /* Bold */ | ||
| font-family: "helvetica-now-display"; | ||
| font-style: normal; | ||
| font-stretch: normal; | ||
| font-display: swap; | ||
| font-weight: 700; | ||
| src: url("https://images.arcteryx.com/fonts/HelveticaNowDisplayBold_normal_normal.woff2") format("woff2"), | ||
| url("https://images.arcteryx.com/fonts/HelveticaNowDisplayBold_normal_normal.woff") format("woff"); | ||
| } | ||
| /* Elan ITC */ | ||
| @font-face { | ||
| font-family: "elan-itc-pro"; | ||
| font-style: normal; | ||
| font-stretch: normal; | ||
| font-display: swap; | ||
| font-weight: 400; | ||
| src: | ||
| url('https://images.arcteryx.com/fonts/ElanITCPro-Book-Web.woff2') format('woff2'), | ||
| url('https://images.arcteryx.com/fonts/ElanITCPro-Book-Web.woff') format('woff'); | ||
| } | ||
| /* | ||
| * The Typekit service used to deliver this font or fonts for use on websites | ||
| * is provided by Adobe and is subject to these Terms of Use | ||
| * http://www.adobe.com/products/eulas/tou_typekit. For font license | ||
| * information, see the list below. | ||
| * | ||
| * urw-din: | ||
| * - http://typekit.com/eulas/00000000000000007735a839 | ||
| * - http://typekit.com/eulas/00000000000000007735a83d | ||
| * - http://typekit.com/eulas/00000000000000007735a840 | ||
| * - http://typekit.com/eulas/00000000000000007735a843 | ||
| * - http://typekit.com/eulas/00000000000000007735a846 | ||
| * - http://typekit.com/eulas/00000000000000007735a849 | ||
| * - http://typekit.com/eulas/00000000000000007735a84b | ||
| * - http://typekit.com/eulas/00000000000000007735a84f | ||
| * - http://typekit.com/eulas/00000000000000007735a851 | ||
| * - http://typekit.com/eulas/00000000000000007735a855 | ||
| * urw-din-condensed: | ||
| * - http://typekit.com/eulas/00000000000000007735a83b | ||
| * - http://typekit.com/eulas/00000000000000007735a83e | ||
| * - http://typekit.com/eulas/00000000000000007735a841 | ||
| * - http://typekit.com/eulas/00000000000000007735a844 | ||
| * - http://typekit.com/eulas/00000000000000007735a847 | ||
| * - http://typekit.com/eulas/00000000000000007735a84a | ||
| * - http://typekit.com/eulas/00000000000000007735a84d | ||
| * - http://typekit.com/eulas/00000000000000007735a850 | ||
| * - http://typekit.com/eulas/00000000000000007735a853 | ||
| * - http://typekit.com/eulas/00000000000000007735a856 | ||
| * urw-din-semi-condensed: | ||
| * - http://typekit.com/eulas/00000000000000007735a83c | ||
| * - http://typekit.com/eulas/00000000000000007735a83f | ||
| * - http://typekit.com/eulas/00000000000000007735a842 | ||
| * - http://typekit.com/eulas/00000000000000007735a845 | ||
| * - http://typekit.com/eulas/00000000000000007735a848 | ||
| * - http://typekit.com/eulas/00000000000000007735a84c | ||
| * - http://typekit.com/eulas/00000000000000007735a84e | ||
| * - http://typekit.com/eulas/00000000000000007735a852 | ||
| * - http://typekit.com/eulas/00000000000000007735a854 | ||
| * - http://typekit.com/eulas/00000000000000007735a857 | ||
| * | ||
| * © 2009-2023 Adobe Systems Incorporated. All Rights Reserved. | ||
| */ | ||
| /*{"last_published":"2023-09-27 18:05:37 UTC"}*/ | ||
| @import url("https://p.typekit.net/p.css?s=1&k=amb0fbb&ht=tk&f=36601.36602.36603.36604.36605.36606.36607.36608.36609.36610.36617.36618.36619.36620.36621.36622.36623.36624.36625.36626.36633.36634.36635.36636.36637.36638.36639.36640.36641.36642&a=131936418&app=typekit&e=css"); | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/1f0265/00000000000000007735a839/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/1f0265/00000000000000007735a839/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/1f0265/00000000000000007735a839/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/f1d51b/00000000000000007735a83d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/f1d51b/00000000000000007735a83d/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/f1d51b/00000000000000007735a83d/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/5f44f1/00000000000000007735a840/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"),url("https://use.typekit.net/af/5f44f1/00000000000000007735a840/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"),url("https://use.typekit.net/af/5f44f1/00000000000000007735a840/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/d96df7/00000000000000007735a843/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/d96df7/00000000000000007735a843/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/d96df7/00000000000000007735a843/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/caf48f/00000000000000007735a846/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"),url("https://use.typekit.net/af/caf48f/00000000000000007735a846/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"),url("https://use.typekit.net/af/caf48f/00000000000000007735a846/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/b8eeae/00000000000000007735a849/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/b8eeae/00000000000000007735a849/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/b8eeae/00000000000000007735a849/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/1c5092/00000000000000007735a84b/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/1c5092/00000000000000007735a84b/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/1c5092/00000000000000007735a84b/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/cd97e9/00000000000000007735a84f/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/cd97e9/00000000000000007735a84f/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/cd97e9/00000000000000007735a84f/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/fe2f02/00000000000000007735a851/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff2"),url("https://use.typekit.net/af/fe2f02/00000000000000007735a851/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff"),url("https://use.typekit.net/af/fe2f02/00000000000000007735a851/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:900;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/0fba77/00000000000000007735a855/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/0fba77/00000000000000007735a855/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/0fba77/00000000000000007735a855/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:900;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/b27e1e/00000000000000007735a83b/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/b27e1e/00000000000000007735a83b/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/b27e1e/00000000000000007735a83b/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/ba5c17/00000000000000007735a83e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/ba5c17/00000000000000007735a83e/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/ba5c17/00000000000000007735a83e/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/06eb22/00000000000000007735a841/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/06eb22/00000000000000007735a841/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/06eb22/00000000000000007735a841/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/413a03/00000000000000007735a844/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"),url("https://use.typekit.net/af/413a03/00000000000000007735a844/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"),url("https://use.typekit.net/af/413a03/00000000000000007735a844/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/c2cf88/00000000000000007735a847/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/c2cf88/00000000000000007735a847/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/c2cf88/00000000000000007735a847/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/b1d7bd/00000000000000007735a84a/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"),url("https://use.typekit.net/af/b1d7bd/00000000000000007735a84a/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"),url("https://use.typekit.net/af/b1d7bd/00000000000000007735a84a/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/be96d8/00000000000000007735a84d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/be96d8/00000000000000007735a84d/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/be96d8/00000000000000007735a84d/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/3f20e7/00000000000000007735a850/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/3f20e7/00000000000000007735a850/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/3f20e7/00000000000000007735a850/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/5002a8/00000000000000007735a853/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff2"),url("https://use.typekit.net/af/5002a8/00000000000000007735a853/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff"),url("https://use.typekit.net/af/5002a8/00000000000000007735a853/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:900;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/c85988/00000000000000007735a856/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/c85988/00000000000000007735a856/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/c85988/00000000000000007735a856/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:900;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/68a396/00000000000000007735a83c/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/68a396/00000000000000007735a83c/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/68a396/00000000000000007735a83c/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/960873/00000000000000007735a83f/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/960873/00000000000000007735a83f/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/960873/00000000000000007735a83f/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/40dae5/00000000000000007735a842/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"),url("https://use.typekit.net/af/40dae5/00000000000000007735a842/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"),url("https://use.typekit.net/af/40dae5/00000000000000007735a842/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/5788bc/00000000000000007735a845/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/5788bc/00000000000000007735a845/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/5788bc/00000000000000007735a845/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/96cf20/00000000000000007735a848/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"),url("https://use.typekit.net/af/96cf20/00000000000000007735a848/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"),url("https://use.typekit.net/af/96cf20/00000000000000007735a848/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/bd0e8a/00000000000000007735a84c/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/bd0e8a/00000000000000007735a84c/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/bd0e8a/00000000000000007735a84c/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/f61b58/00000000000000007735a84e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/f61b58/00000000000000007735a84e/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/f61b58/00000000000000007735a84e/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/349829/00000000000000007735a852/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/349829/00000000000000007735a852/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/349829/00000000000000007735a852/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/8def5a/00000000000000007735a854/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/8def5a/00000000000000007735a854/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/8def5a/00000000000000007735a854/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:900;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/d4ff8c/00000000000000007735a857/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff2"),url("https://use.typekit.net/af/d4ff8c/00000000000000007735a857/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff"),url("https://use.typekit.net/af/d4ff8c/00000000000000007735a857/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:900;font-stretch:normal; | ||
| } | ||
| .tk-urw-din { font-family: "urw-din",sans-serif; } | ||
| .tk-urw-din-condensed { font-family: "urw-din-condensed",sans-serif; } | ||
| .tk-urw-din-semi-condensed { font-family: "urw-din-semi-condensed",sans-serif; } | ||
| `; | ||
| const _excluded = ["market", "context", "type", "size", "IconButtonLeft", "IconButtonRight", "disabled", "isWaiting", "onClick", "className", "id", "style", "children", "href", "width"]; | ||
@@ -117,6 +1398,2 @@ const ButtonWrapper = styled.div` | ||
| border: ${props => [SUBTLE, FINDINSTORE].includes(props.context) ? "1px solid var(--colour-black)" : "1px solid transparent"}; | ||
| font-size: 1rem; | ||
| line-height: 1.1rem; | ||
| font-family: var(--font-urw-din); | ||
| font-weight: 400; | ||
| text-transform: ${props => props.context === STANDARD || !props.href ? "uppercase" : "none"}; | ||
@@ -300,3 +1577,3 @@ word-break: keep-all; | ||
| icon: IconButtonLeft | ||
| }), /*#__PURE__*/React.createElement("span", null, children), !isWaiting && hasIconButtonRight && /*#__PURE__*/React.createElement(IconButton, { | ||
| }), /*#__PURE__*/React.createElement(ButtonText1, null, children), !isWaiting && hasIconButtonRight && /*#__PURE__*/React.createElement(IconButton, { | ||
| icon: IconButtonRight | ||
@@ -303,0 +1580,0 @@ })); |
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('prop-types'), require('classnames')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'prop-types', 'classnames'], factory) : | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('prop-types'), require('classnames'), require('styled-components-breakpoint')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'prop-types', 'classnames', 'styled-components-breakpoint'], factory) : | ||
| (global = typeof globalThis !== 'undefined' ? globalThis : global || self, (function () { | ||
| var current = global.ARCTERYX && global.ARCTERYX.componentsbutton; | ||
| var exports = (global.ARCTERYX = global.ARCTERYX || {}, global.ARCTERYX.componentsbutton = {}); | ||
| factory(exports, global.React, global.styled, global.PropTypes, global.cx); | ||
| factory(exports, global.React, global.styled, global.PropTypes, global.cx, global.styledComponentsBreakpoint); | ||
| exports.noConflict = function () { global.ARCTERYX.componentsbutton = current; return exports; }; | ||
| })()); | ||
| })(this, (function (exports, React, styled, PropTypes, cx) { 'use strict'; | ||
| })(this, (function (exports, React, styled, PropTypes, cx, styledComponentsBreakpoint) { 'use strict'; | ||
@@ -112,2 +112,1282 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
| /****************************************************************************** | ||
| Copyright (c) Microsoft Corporation. | ||
| Permission to use, copy, modify, and/or distribute this software for any | ||
| purpose with or without fee is hereby granted. | ||
| THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH | ||
| REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY | ||
| AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, | ||
| INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM | ||
| LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR | ||
| OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR | ||
| PERFORMANCE OF THIS SOFTWARE. | ||
| ***************************************************************************** */ | ||
| function __rest(s, e) { | ||
| var t = {}; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; | ||
| if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
| if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; | ||
| } | ||
| return t; | ||
| } | ||
| var ScreenSize; | ||
| (function (ScreenSize) { | ||
| ScreenSize[ScreenSize["xs"] = 0] = "xs"; | ||
| ScreenSize[ScreenSize["sm"] = 576] = "sm"; | ||
| ScreenSize[ScreenSize["md"] = 768] = "md"; | ||
| ScreenSize[ScreenSize["lg"] = 992] = "lg"; | ||
| ScreenSize[ScreenSize["xl"] = 1200] = "xl"; | ||
| ScreenSize[ScreenSize["xxl"] = 1440] = "xxl"; | ||
| })(ScreenSize || (ScreenSize = {})); | ||
| styledComponentsBreakpoint.createBreakpoint({ | ||
| xs: ScreenSize.xs, | ||
| sm: ScreenSize.sm, | ||
| md: ScreenSize.md, | ||
| lg: ScreenSize.lg, | ||
| xl: ScreenSize.xl, | ||
| xxl: ScreenSize.xxl | ||
| }); | ||
| var TextAlignment; | ||
| (function (TextAlignment) { | ||
| TextAlignment["LEFT"] = "left"; | ||
| TextAlignment["CENTER"] = "center"; | ||
| TextAlignment["RIGHT"] = "right"; | ||
| TextAlignment["INHERIT"] = "inherit"; | ||
| })(TextAlignment || (TextAlignment = {})); | ||
| var Variant; | ||
| (function (Variant) { | ||
| Variant["SMALL"] = "small"; | ||
| Variant["MEDIUM"] = "medium"; | ||
| Variant["XLARGE"] = "extra-large"; | ||
| Variant["PRIMARY"] = "primary"; | ||
| Variant["LINK"] = "link"; | ||
| })(Variant || (Variant = {})); | ||
| Object.values(TextAlignment); | ||
| Object.values(Variant); | ||
| const H1Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| let desktopFontSize = "3.25rem"; | ||
| let mobileFontSize = "2.625rem"; | ||
| switch (props.variant) { | ||
| case Variant.SMALL: | ||
| desktopFontSize = "1.625rem"; | ||
| mobileFontSize = "1.5rem"; | ||
| break; | ||
| case Variant.MEDIUM: | ||
| desktopFontSize = "2rem"; | ||
| mobileFontSize = "1.75rem"; | ||
| break; | ||
| } | ||
| return styled.css` | ||
| font-family: var(--font-elan); | ||
| font-size: ${desktopFontSize}; | ||
| font-weight: 400; | ||
| line-height: 1; | ||
| text-transform: uppercase; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-bottom: 0; | ||
| @media (max-width: ${ScreenSize.md}px) { | ||
| font-size: ${mobileFontSize}; | ||
| } | ||
| `; | ||
| }; | ||
| styled__default["default"].h1` | ||
| ${H1Styles} | ||
| `; | ||
| const H2Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| const desktopFontSize = props.variant && props.variant === Variant.XLARGE ? "3.25rem" : "2.375rem"; | ||
| const mobileFontSize = props.variant && props.variant === Variant.XLARGE ? "2.25rem" : "1.875rem"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: ${desktopFontSize}; | ||
| font-weight: 300; | ||
| line-height: 1.15; | ||
| letter-spacing: 0.02375rem; | ||
| text-transform: initial; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-bottom: 0; | ||
| @media (max-width: ${ScreenSize.md}px) { | ||
| font-size: ${mobileFontSize}; | ||
| line-height: 1.2; | ||
| } | ||
| `; | ||
| }; | ||
| styled__default["default"].h2` | ||
| ${H2Styles}; | ||
| `; | ||
| const H3Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.75rem; | ||
| font-weight: 400; | ||
| line-height: 1.35; | ||
| text-transform: initial; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-bottom: 0; | ||
| @media (max-width: ${ScreenSize.md}px) { | ||
| font-size: 1.5rem; | ||
| } | ||
| `; | ||
| }; | ||
| styled__default["default"].h3` | ||
| ${H3Styles} | ||
| `; | ||
| const H4Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-elan); | ||
| font-size: 1.375rem; | ||
| font-weight: 400; | ||
| line-height: 1.2; | ||
| text-transform: uppercase; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-bottom: 0; | ||
| @media (max-width: ${ScreenSize.md}px) { | ||
| font-size: 1.25rem; | ||
| line-height: 1.2; | ||
| } | ||
| `; | ||
| }; | ||
| styled__default["default"].h4` | ||
| ${H4Styles}; | ||
| `; | ||
| const H5Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.25rem; | ||
| font-weight: 700; | ||
| line-height: 1.4; | ||
| text-transform: initial; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| // TODO: update with proper screen size breakpoint | ||
| @media (max-width: ${ScreenSize.sm}px) { | ||
| font-size: 1.25rem; | ||
| } | ||
| `; | ||
| }; | ||
| styled__default["default"].h5` | ||
| ${H5Styles} | ||
| `; | ||
| const H6Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.25rem; | ||
| font-weight: 400; | ||
| line-height: 1.2; | ||
| letter-spacing: 0.025rem; | ||
| text-transform: uppercase; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| `; | ||
| }; | ||
| styled__default["default"].h6` | ||
| ${H6Styles} | ||
| `; | ||
| const fontSize = size => { | ||
| if (size === "s") { | ||
| return "0.75rem"; | ||
| } | ||
| if (size === "m") { | ||
| return "1.1rem"; | ||
| } | ||
| if (size === "l") { | ||
| return "1.25rem"; | ||
| } | ||
| return "1rem"; | ||
| }; | ||
| const P = styled__default["default"].p` | ||
| margin: 0 0 1.5rem 0; | ||
| font-family: ${props => ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif'}; | ||
| font-size: ${props => fontSize(props.size)}; | ||
| font-weight: ${props => props.bold ? `600` : `400`}; | ||
| font-style: ${props => props.italic ? `italic` : `normal`}; | ||
| line-height: ${props => props.size === "s" ? `1rem` : `1.5rem`}; | ||
| color: ${props => props.textColor}; | ||
| text-decoration: ${props => props.textDecoration}; | ||
| strong, | ||
| b { | ||
| font-weight: 500; | ||
| } | ||
| em, | ||
| i { | ||
| font-weight: 400; | ||
| font-style: italic; | ||
| } | ||
| &:last-of-type { | ||
| margin-bottom: 0; | ||
| } | ||
| `; | ||
| P.defaultProps = { | ||
| large: false, | ||
| textColor: "var(--colour-copy)", | ||
| textDecoration: "none", | ||
| market: "outdoor" | ||
| }; | ||
| const DefaultBodyStyles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| max-width: 75ch; | ||
| font-family: var(--font-helvetica); | ||
| text-transform: initial; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| margin: 0; | ||
| position: relative; | ||
| `; | ||
| }; | ||
| const bodyType = ["body4", "body5", "body6"]; | ||
| const FontLinkAfterStyle = type => { | ||
| return ` | ||
| content: ""; | ||
| position: absolute; | ||
| left: 0; | ||
| width: 0; | ||
| // TODO: use this when we switch to new fonts | ||
| // bottom: ${bodyType.includes(type) ? "5px" : "6px"}; | ||
| bottom: 2px; | ||
| background-color: currentColor; | ||
| height: 1px; | ||
| transition-property: width; | ||
| transition-duration: 0.3s; | ||
| transition-timing-function: ease-out; | ||
| `; | ||
| }; | ||
| const FontLinkHoverStyle = ` | ||
| width: 100%; | ||
| `; | ||
| const FontLinkStyle = type => { | ||
| return ` | ||
| text-decoration: none; | ||
| position: relative; | ||
| display: block; | ||
| width: fit-content; | ||
| &::after { | ||
| ${FontLinkAfterStyle(type)} | ||
| } | ||
| &:hover::after { | ||
| ${FontLinkHoverStyle} | ||
| } | ||
| `; | ||
| }; | ||
| const Body1Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body1"); | ||
| return styled.css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-size: 1rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Body1Styles} | ||
| `; | ||
| const Body2Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body2"); | ||
| return styled.css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-style: italic; | ||
| font-size: 1rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Body2Styles} | ||
| `; | ||
| const Body3Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body3"); | ||
| return styled.css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-size: 1rem; | ||
| font-weight: 700; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Body3Styles} | ||
| `; | ||
| const Body4Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body4"); | ||
| return styled.css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-size: 0.875rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Body4Styles}; | ||
| `; | ||
| const Body5Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body5"); | ||
| return styled.css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-size: 0.875rem; | ||
| font-style: italic; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Body5Styles} | ||
| `; | ||
| const Body6Styles = props => { | ||
| const variantLinkStyles = props.variant === Variant.LINK && FontLinkStyle("body6"); | ||
| return styled.css` | ||
| ${DefaultBodyStyles(props)}; | ||
| font-size: 0.875rem; | ||
| font-weight: 700; | ||
| line-height: 1.5; | ||
| ${variantLinkStyles}; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Body6Styles}; | ||
| `; | ||
| const Button1Styles = () => { | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1rem; | ||
| font-weight: 700; | ||
| line-height: 1.2; | ||
| text-transform: initial; | ||
| text-align: center; | ||
| margin: 0; | ||
| position: relative; | ||
| `; | ||
| }; | ||
| const StyledButtonText1 = styled__default["default"].span` | ||
| ${Button1Styles} | ||
| `; | ||
| const ButtonText1 = _a => { | ||
| var { | ||
| children | ||
| } = _a, | ||
| props = __rest(_a, ["children"]); | ||
| return /*#__PURE__*/React__default["default"].createElement(StyledButtonText1, Object.assign({}, props, { | ||
| "data-component": "button1" | ||
| }), children); | ||
| }; | ||
| const Button2Styles = () => { | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 0.875rem; | ||
| font-weight: 700; | ||
| line-height: 1.2; | ||
| text-transform: initial; | ||
| text-align: center; | ||
| margin: 0; | ||
| position: relative; | ||
| `; | ||
| }; | ||
| styled__default["default"].span` | ||
| ${Button2Styles} | ||
| `; | ||
| const LinkStyles = props => { | ||
| var _a, _b; | ||
| const fontSize = props.variant === Variant.SMALL ? `0.875rem` : `1rem`; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.INHERIT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: ${fontSize}; | ||
| font-weight: 700; | ||
| line-height: 1.5; | ||
| text-transform: initial; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| word-break: break-word; | ||
| position: relative; | ||
| text-decoration: none; | ||
| width: fit-content; | ||
| &::before { | ||
| content: ""; | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 1px; | ||
| bottom: 2px; | ||
| left: 0; | ||
| background-color: currentColor; | ||
| visibility: visible; | ||
| transition: all 0.3s ease-in-out; | ||
| } | ||
| &:hover { | ||
| text-decoration: none; | ||
| } | ||
| &:hover::before { | ||
| visibility: hidden; | ||
| width: 0; | ||
| } | ||
| `; | ||
| }; | ||
| styled__default["default"].a` | ||
| ${LinkStyles} | ||
| `; | ||
| const CaptionStyles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 0.75rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| letter-spacing: 0; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| text-transform: initial; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${CaptionStyles} | ||
| `; | ||
| const OverlineStyles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 0.75rem; | ||
| font-weight: 400; | ||
| line-height: 1.3; | ||
| letter-spacing: 0.0475rem; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| text-transform: uppercase; | ||
| margin-bottom: 0; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${OverlineStyles} | ||
| `; | ||
| const Subtitle1Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.125rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| text-transform: initial; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Subtitle1Styles} | ||
| `; | ||
| const Subtitle2Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.125rem; | ||
| font-weight: 400; | ||
| font-style: italic; | ||
| line-height: 1.5; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| text-transform: initial; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Subtitle2Styles} | ||
| `; | ||
| const Subtitle3Styles = props => { | ||
| var _a, _b; | ||
| const textAlign = (_a = props.alignment) !== null && _a !== void 0 ? _a : TextAlignment.LEFT; | ||
| const color = (_b = props.textColor) !== null && _b !== void 0 ? _b : "var(--colour-black)"; | ||
| return styled.css` | ||
| font-family: var(--font-helvetica); | ||
| font-size: 1.125rem; | ||
| font-weight: 700; | ||
| line-height: 1.5; | ||
| text-align: ${textAlign}; | ||
| color: ${color}; | ||
| text-transform: initial; | ||
| margin-bottom: 0; | ||
| `; | ||
| }; | ||
| styled__default["default"].p` | ||
| ${Subtitle3Styles} | ||
| `; | ||
| const Quote = 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'}; | ||
| color: ${props => props.textColor}; | ||
| font-size: 1rem; | ||
| font-weight: 400; | ||
| font-style: italic; | ||
| line-height: 1.2rem; | ||
| padding-left: 2.5rem; | ||
| max-width: 500px; | ||
| `; | ||
| Quote.defaultProps = { | ||
| large: false, | ||
| textColor: "var(--colour-black)", | ||
| market: "outdoor" | ||
| }; | ||
| styled__default["default"].p` | ||
| max-width: none; | ||
| `; | ||
| styled__default["default"].ul` | ||
| max-width: none; | ||
| `; | ||
| styled__default["default"].div` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| `; | ||
| styled__default["default"].div` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: flex-end; | ||
| `; | ||
| const Cube = styled__default["default"].div` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| position: relative; | ||
| margin: 0 1rem; | ||
| font-size: 1rem; | ||
| &:after { | ||
| content: attr(title); | ||
| display: block; | ||
| position: absolute; | ||
| bottom: -3rem; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| } | ||
| `; | ||
| styled__default["default"](Cube)` | ||
| width: var(--space-xs); | ||
| height: var(--space-xs); | ||
| background-color: #EBCC83; | ||
| `; | ||
| styled__default["default"](Cube)` | ||
| width: var(--space-s); | ||
| height: var(--space-s); | ||
| background-color: #A0E6EB; | ||
| `; | ||
| styled__default["default"](Cube)` | ||
| width: var(--space-m); | ||
| height: var(--space-m); | ||
| background-color: #C8EBA0; | ||
| `; | ||
| styled__default["default"](Cube)` | ||
| width: var(--space-l); | ||
| height: var(--space-l); | ||
| background-color: #A0AFEB; | ||
| `; | ||
| styled__default["default"](Cube)` | ||
| width: var(--space-xl); | ||
| height: var(--space-xl); | ||
| background-color: #DBABE9; | ||
| `; | ||
| styled__default["default"](Cube)` | ||
| width: var(--space-xxl); | ||
| height: var(--space-xxl); | ||
| background-color: #EB9595; | ||
| `; | ||
| const Square = styled__default["default"].div` | ||
| width: 1rem; | ||
| height: 1rem; | ||
| display: inline-block; | ||
| margin-right: 5px; | ||
| `; | ||
| styled__default["default"](Square)` | ||
| background-color: #EBCC83; | ||
| `; | ||
| styled__default["default"](Square)` | ||
| background-color: #A0E6EB; | ||
| `; | ||
| styled__default["default"](Square)` | ||
| background-color: #C8EBA0; | ||
| `; | ||
| styled__default["default"](Square)` | ||
| background-color: #A0AFEB; | ||
| `; | ||
| styled__default["default"](Square)` | ||
| background-color: #DBABE9; | ||
| `; | ||
| styled__default["default"](Square)` | ||
| background-color: #EB9595; | ||
| `; | ||
| styled.createGlobalStyle` | ||
| // This is the site-wide root CSS where we define our global variables | ||
| :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; | ||
| --focus-visible: 0.2rem solid #5b9dd9; | ||
| /** | ||
| * Colours | ||
| */ | ||
| --colour-black: #1A1A1A; | ||
| --colour-grey-dark: #333333; | ||
| --colour-grey-medium: #666666; | ||
| --colour-grey-inactive: #b2b2b2; | ||
| --colour-grey-pinline: #cccccc; | ||
| --colour-grey-background: #e9e9e9; | ||
| --colour-grey-item-background: #fafafa; | ||
| --colour-black-gradient: #646464; | ||
| --colour-white: #ffffff; | ||
| /* | ||
| * Feedback Colours | ||
| */ | ||
| --colour-red-3: #990000; | ||
| --colour-red-2: #c86464; | ||
| --colour-red-1: #fbebeb; | ||
| --colour-yellow-3: #785e1c; | ||
| --colour-yellow-2: #ab934f; | ||
| --colour-yellow-1: #f8f2d5; | ||
| --colour-blue-3: #31668f; | ||
| --colour-blue-2: #5b9dd9; | ||
| --colour-blue-1: #e3edf2; | ||
| --colour-green-3: #227733; | ||
| --colour-green-2: #5aab6a; | ||
| --colour-green-1: #dff0d8; | ||
| --gradient-active: linear-gradient(180deg, var(--colour-black) 9.38%, var(--colour-black-gradient) 73.96%), var(--colour-white); | ||
| --gradient-hover: linear-gradient(180deg, var(--colour-black-gradient) 5.21%, var(--colour-black) 87.5%), var(--colour-white); | ||
| /* Why Renaming Base Color Variables? */ | ||
| --colour-copy: var(--colour-black); | ||
| --black: var(--colour-black); | ||
| --dark-grey: var(--colour-grey-dark); | ||
| --medium-grey: var(--colour-grey-medium); | ||
| --inactive-state-grey: var(--colour-grey-inactive); | ||
| --pinline-grey: var(--colour-grey-pinline); | ||
| --background-grey: var(--colour-grey-background); | ||
| --background-gradient: var(--colour-black-gradient); | ||
| --white: var(--colour-white); | ||
| /* WHY Renaming Color Variables in Core-UI? */ | ||
| --warning-red: var(--colour-red-3); | ||
| --medium-red: var(--colour-red-2); | ||
| --background-red: var(--colour-red-1); | ||
| /* WHY Renaming Color Variables in Core-UI? */ | ||
| --caution-yellow: var(--colour-yellow-3); | ||
| --medium-yellow: var(--colour-yellow-2); | ||
| --background-yellow: var(--colour-yellow-1); | ||
| /* WHY Renaming Color Variables in Core-UI? */ | ||
| --info-blue: var(--colour-blue-3); | ||
| --focus-blue: var(--colour-blue-2); | ||
| --background-blue: var(--colour-blue-1); | ||
| /* WHY Renaming Color Variables in Core-UI? */ | ||
| --success-green: var(--colour-green-3); | ||
| --medium-green: var(--colour-green-2); | ||
| --background-green: var(--colour-green-1); | ||
| /** | ||
| * Spacing Units (Deprecated) | ||
| * These tie in directly with the coloured spaces depicted in design mocks | ||
| * Responsiveness is built-in to the variable, so no component-level tweaks needed | ||
| */ | ||
| --space-red: 6rem; | ||
| --space-pink: 4rem; | ||
| --space-purple: 2rem; | ||
| --space-green: 2rem; | ||
| --space-blue: 1rem; | ||
| --space-orange: .5rem; | ||
| @media(min-width: 1024px) { | ||
| --space-purple: 3rem; | ||
| --space-pink: 6rem; | ||
| --space-red: 10rem; | ||
| } | ||
| /** | ||
| * Spacing Units | ||
| * These tie in directly with the spacing units defined in Figma | ||
| * https://www.figma.com/file/xiTC7i82LbrfGrMQRqsxLY/Arc'teryx-Components?type=design&node-id=781-52&mode=design&t=LHI4MFqa1SCYqNKI-0 | ||
| */ | ||
| --desk-mobile05: 0.5rem; | ||
| --desk-mobile1: 1rem; | ||
| --desk-mobile2: 2rem; | ||
| --desk3-mobile2: 2rem; | ||
| --desk6-mobile4: 4rem; | ||
| --desk10-mobile6: 6rem; | ||
| @media(min-width: 992px) { | ||
| --desk3-mobile2: 3rem; | ||
| --desk6-mobile4: 6rem; | ||
| --desk10-mobile6: 10rem; | ||
| } | ||
| // Spacing Units - Aliases | ||
| --space-xs: var(--desk-mobile05); | ||
| --space-s: var(--desk-mobile1); | ||
| --space-m: var(--desk-mobile2); | ||
| --space-l: var(--desk3-mobile2); | ||
| --space-xl: var(--desk6-mobile4); | ||
| --space-xxl: var(--desk10-mobile6); | ||
| /** | ||
| * CatIntro Banners | ||
| */ | ||
| --banner-height-xs: 10rem; /* 150px */ | ||
| --banner-height-sm: 12rem; /* 180px */ | ||
| --banner-height-md: 13.333rem; /* 200px */ | ||
| --banner-height-lg: 16.666rem; /* 250px */ | ||
| --banner-height-xl: 23.333rem; /* 350px */ | ||
| /** | ||
| * Common breakpoints | ||
| */ | ||
| --breakpoint-sm: 576px; | ||
| --breakpoint-md: 768px; | ||
| --breakpoint-lg: 992px; | ||
| --breakpoint-xl: 1200px; | ||
| /** | ||
| * ProductTiles | ||
| */ | ||
| --product-tile-2-col: 50%; | ||
| --product-tile-3-col: 33.33%; | ||
| --product-tile-4-col: 25%; | ||
| } | ||
| html { | ||
| height: 100%; | ||
| height: -webkit-fill-available; | ||
| scroll-behavior: smooth; | ||
| *, | ||
| *::before, | ||
| *::after { | ||
| box-sizing: border-box; | ||
| } | ||
| } | ||
| ul[class], | ||
| ol[class] { | ||
| padding: 0; | ||
| } | ||
| body, | ||
| ul[class], | ||
| ol[class], | ||
| li, | ||
| figure, | ||
| figcaption, | ||
| blockquote, | ||
| dl, | ||
| dd { | ||
| margin: 0; | ||
| } | ||
| body { | ||
| min-height: 100vh; | ||
| min-height: -webkit-fill-available; | ||
| text-rendering: optimizeSpeed; | ||
| font-size: 1rem; | ||
| line-height: 1.5; | ||
| font-family: var(--font-helvetica); | ||
| color: var(--colour-black); | ||
| } | ||
| ol, ul { | ||
| list-style-position: outside; | ||
| margin: 1rem 0 0 0; | ||
| padding: 0 0 0 2rem; | ||
| } | ||
| ul { | ||
| list-style-type: disc; | ||
| } | ||
| li { | ||
| line-height: 1.5rem; | ||
| padding-bottom: 0.5rem; | ||
| } | ||
| ul[class], | ||
| ol[class] { | ||
| list-style: none; | ||
| } | ||
| /* helper class to hide scrollbars */ | ||
| .hide--scrollbar { | ||
| /* Chrome, Safari and Opera */ | ||
| ::-webkit-scrollbar { | ||
| display: none; | ||
| } | ||
| scrollbar-width: none; /* Firefox */ | ||
| } | ||
| a:not([class]) { | ||
| text-decoration: underline; | ||
| text-decoration-skip-ink: auto; | ||
| } | ||
| a:focus, button:focus { | ||
| outline: none; | ||
| } | ||
| a:focus-visible, button:focus-visible { | ||
| outline: var(--focus-visible); | ||
| } | ||
| a:-moz-focus-visible, button:-moz-focus-visible, | ||
| :-moz-focusring { | ||
| outline: var(--focus-visible); | ||
| } | ||
| /** | ||
| * Heading tags; h1, h2, h3, h4 | ||
| * Ideally all Heading tags will use the <H1>, <H2>, <H3>, and <H4> provided by @arcteryx/components-typography | ||
| * but this will help catch any tags that might not be styled-components | ||
| */ | ||
| h1, h2, h3, h4 { | ||
| font-family: urw-din-condensed, arial, sans-serif; | ||
| font-weight: 700; | ||
| line-height: 1.5rem; | ||
| margin-top: 0; | ||
| } | ||
| h1 { | ||
| margin-bottom: 1rem; | ||
| font-size: 1.5rem; | ||
| } | ||
| h2 { | ||
| margin-bottom: 1rem; | ||
| font-size: 1.25rem; | ||
| } | ||
| h3 { | ||
| margin-bottom: 0.5rem; | ||
| font-size: 1.1rem; | ||
| } | ||
| h4 { | ||
| margin-bottom: 0.5rem; | ||
| font-size: 1rem; | ||
| } | ||
| p { | ||
| ${Body1Styles({ | ||
| alignment: TextAlignment.INHERIT | ||
| })}; | ||
| strong, b { | ||
| ${Body3Styles({ | ||
| alignment: TextAlignment.INHERIT | ||
| })} | ||
| } | ||
| em, i { | ||
| ${Body2Styles({ | ||
| alignment: TextAlignment.INHERIT | ||
| })} | ||
| } | ||
| &:last-of-type { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
| strong, b { | ||
| ${Body3Styles({ | ||
| alignment: TextAlignment.INHERIT | ||
| })} | ||
| } | ||
| em, i { | ||
| ${Body2Styles({ | ||
| alignment: TextAlignment.INHERIT | ||
| })} | ||
| } | ||
| img { | ||
| max-width: 100%; | ||
| display: block; | ||
| } | ||
| .lazyload, | ||
| .lazyloading { | ||
| opacity: 0; | ||
| } | ||
| .lazyloaded { | ||
| opacity: 1; | ||
| transition: opacity 200ms; | ||
| } | ||
| /* Legacy class for header nav hover overlay */ | ||
| .overlay-dark--full { | ||
| position: fixed; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| opacity: 1; | ||
| z-index: 250; | ||
| } | ||
| /** | ||
| * a11y | ||
| * For folks who's browser requests reduced motion | ||
| */ | ||
| @media (prefers-reduced-motion: reduce) { | ||
| * { | ||
| animation-duration: 0.01ms !important; | ||
| animation-iteration-count: 1 !important; | ||
| transition-duration: 0.01ms !important; | ||
| scroll-behavior: auto !important; | ||
| } | ||
| } | ||
| /* Helvetica Now Display */ | ||
| @font-face { | ||
| /* Light */ | ||
| font-family: "helvetica-now-display"; | ||
| font-style: normal; | ||
| font-stretch: normal; | ||
| font-display: swap; | ||
| font-weight: 300; | ||
| src: url("https://images.arcteryx.com/fonts/HelveticaNowDisplayLight_normal_normal.woff2") format("woff2"), | ||
| url("https://images.arcteryx.com/fonts/HelveticaNowDisplayLight_normal_normal.woff") format("woff"); | ||
| } | ||
| @font-face { | ||
| /* Italic */ | ||
| font-family: "helvetica-now-display"; | ||
| font-style: italic; | ||
| font-stretch: normal; | ||
| font-display: swap; | ||
| font-weight: 400; | ||
| src: url("https://images.arcteryx.com/fonts/HelveticaNowDisplayItalic_italic_normal.woff2") format("woff2"), | ||
| url("https://images.arcteryx.com/fonts/HelveticaNowDisplayItalic_italic_normal.woff") format("woff"); | ||
| } | ||
| @font-face { | ||
| /* Regular */ | ||
| font-family: "helvetica-now-display"; | ||
| font-style: normal; | ||
| font-stretch: normal; | ||
| font-display: swap; | ||
| font-weight: 400; | ||
| src: url("https://images.arcteryx.com/fonts/HelveticaNowDisplayRegular_normal_normal.woff2") format("woff2"), | ||
| url("https://images.arcteryx.com/fonts/HelveticaNowDisplayRegular_normal_normal.woff") format("woff"); | ||
| } | ||
| @font-face { | ||
| /* Bold */ | ||
| font-family: "helvetica-now-display"; | ||
| font-style: normal; | ||
| font-stretch: normal; | ||
| font-display: swap; | ||
| font-weight: 700; | ||
| src: url("https://images.arcteryx.com/fonts/HelveticaNowDisplayBold_normal_normal.woff2") format("woff2"), | ||
| url("https://images.arcteryx.com/fonts/HelveticaNowDisplayBold_normal_normal.woff") format("woff"); | ||
| } | ||
| /* Elan ITC */ | ||
| @font-face { | ||
| font-family: "elan-itc-pro"; | ||
| font-style: normal; | ||
| font-stretch: normal; | ||
| font-display: swap; | ||
| font-weight: 400; | ||
| src: | ||
| url('https://images.arcteryx.com/fonts/ElanITCPro-Book-Web.woff2') format('woff2'), | ||
| url('https://images.arcteryx.com/fonts/ElanITCPro-Book-Web.woff') format('woff'); | ||
| } | ||
| /* | ||
| * The Typekit service used to deliver this font or fonts for use on websites | ||
| * is provided by Adobe and is subject to these Terms of Use | ||
| * http://www.adobe.com/products/eulas/tou_typekit. For font license | ||
| * information, see the list below. | ||
| * | ||
| * urw-din: | ||
| * - http://typekit.com/eulas/00000000000000007735a839 | ||
| * - http://typekit.com/eulas/00000000000000007735a83d | ||
| * - http://typekit.com/eulas/00000000000000007735a840 | ||
| * - http://typekit.com/eulas/00000000000000007735a843 | ||
| * - http://typekit.com/eulas/00000000000000007735a846 | ||
| * - http://typekit.com/eulas/00000000000000007735a849 | ||
| * - http://typekit.com/eulas/00000000000000007735a84b | ||
| * - http://typekit.com/eulas/00000000000000007735a84f | ||
| * - http://typekit.com/eulas/00000000000000007735a851 | ||
| * - http://typekit.com/eulas/00000000000000007735a855 | ||
| * urw-din-condensed: | ||
| * - http://typekit.com/eulas/00000000000000007735a83b | ||
| * - http://typekit.com/eulas/00000000000000007735a83e | ||
| * - http://typekit.com/eulas/00000000000000007735a841 | ||
| * - http://typekit.com/eulas/00000000000000007735a844 | ||
| * - http://typekit.com/eulas/00000000000000007735a847 | ||
| * - http://typekit.com/eulas/00000000000000007735a84a | ||
| * - http://typekit.com/eulas/00000000000000007735a84d | ||
| * - http://typekit.com/eulas/00000000000000007735a850 | ||
| * - http://typekit.com/eulas/00000000000000007735a853 | ||
| * - http://typekit.com/eulas/00000000000000007735a856 | ||
| * urw-din-semi-condensed: | ||
| * - http://typekit.com/eulas/00000000000000007735a83c | ||
| * - http://typekit.com/eulas/00000000000000007735a83f | ||
| * - http://typekit.com/eulas/00000000000000007735a842 | ||
| * - http://typekit.com/eulas/00000000000000007735a845 | ||
| * - http://typekit.com/eulas/00000000000000007735a848 | ||
| * - http://typekit.com/eulas/00000000000000007735a84c | ||
| * - http://typekit.com/eulas/00000000000000007735a84e | ||
| * - http://typekit.com/eulas/00000000000000007735a852 | ||
| * - http://typekit.com/eulas/00000000000000007735a854 | ||
| * - http://typekit.com/eulas/00000000000000007735a857 | ||
| * | ||
| * © 2009-2023 Adobe Systems Incorporated. All Rights Reserved. | ||
| */ | ||
| /*{"last_published":"2023-09-27 18:05:37 UTC"}*/ | ||
| @import url("https://p.typekit.net/p.css?s=1&k=amb0fbb&ht=tk&f=36601.36602.36603.36604.36605.36606.36607.36608.36609.36610.36617.36618.36619.36620.36621.36622.36623.36624.36625.36626.36633.36634.36635.36636.36637.36638.36639.36640.36641.36642&a=131936418&app=typekit&e=css"); | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/1f0265/00000000000000007735a839/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/1f0265/00000000000000007735a839/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/1f0265/00000000000000007735a839/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/f1d51b/00000000000000007735a83d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/f1d51b/00000000000000007735a83d/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/f1d51b/00000000000000007735a83d/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/5f44f1/00000000000000007735a840/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"),url("https://use.typekit.net/af/5f44f1/00000000000000007735a840/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"),url("https://use.typekit.net/af/5f44f1/00000000000000007735a840/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/d96df7/00000000000000007735a843/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/d96df7/00000000000000007735a843/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/d96df7/00000000000000007735a843/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/caf48f/00000000000000007735a846/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"),url("https://use.typekit.net/af/caf48f/00000000000000007735a846/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"),url("https://use.typekit.net/af/caf48f/00000000000000007735a846/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/b8eeae/00000000000000007735a849/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/b8eeae/00000000000000007735a849/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/b8eeae/00000000000000007735a849/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/1c5092/00000000000000007735a84b/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/1c5092/00000000000000007735a84b/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/1c5092/00000000000000007735a84b/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/cd97e9/00000000000000007735a84f/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/cd97e9/00000000000000007735a84f/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/cd97e9/00000000000000007735a84f/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/fe2f02/00000000000000007735a851/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff2"),url("https://use.typekit.net/af/fe2f02/00000000000000007735a851/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff"),url("https://use.typekit.net/af/fe2f02/00000000000000007735a851/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:900;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din"; | ||
| src:url("https://use.typekit.net/af/0fba77/00000000000000007735a855/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/0fba77/00000000000000007735a855/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/0fba77/00000000000000007735a855/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:900;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/b27e1e/00000000000000007735a83b/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/b27e1e/00000000000000007735a83b/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/b27e1e/00000000000000007735a83b/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/ba5c17/00000000000000007735a83e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/ba5c17/00000000000000007735a83e/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/ba5c17/00000000000000007735a83e/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/06eb22/00000000000000007735a841/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/06eb22/00000000000000007735a841/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/06eb22/00000000000000007735a841/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/413a03/00000000000000007735a844/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"),url("https://use.typekit.net/af/413a03/00000000000000007735a844/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"),url("https://use.typekit.net/af/413a03/00000000000000007735a844/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/c2cf88/00000000000000007735a847/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/c2cf88/00000000000000007735a847/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/c2cf88/00000000000000007735a847/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/b1d7bd/00000000000000007735a84a/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"),url("https://use.typekit.net/af/b1d7bd/00000000000000007735a84a/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"),url("https://use.typekit.net/af/b1d7bd/00000000000000007735a84a/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/be96d8/00000000000000007735a84d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/be96d8/00000000000000007735a84d/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/be96d8/00000000000000007735a84d/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/3f20e7/00000000000000007735a850/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/3f20e7/00000000000000007735a850/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/3f20e7/00000000000000007735a850/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/5002a8/00000000000000007735a853/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff2"),url("https://use.typekit.net/af/5002a8/00000000000000007735a853/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff"),url("https://use.typekit.net/af/5002a8/00000000000000007735a853/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:900;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-condensed"; | ||
| src:url("https://use.typekit.net/af/c85988/00000000000000007735a856/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/c85988/00000000000000007735a856/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/c85988/00000000000000007735a856/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:900;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/68a396/00000000000000007735a83c/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/68a396/00000000000000007735a83c/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/68a396/00000000000000007735a83c/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/960873/00000000000000007735a83f/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/960873/00000000000000007735a83f/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/960873/00000000000000007735a83f/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:400;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/40dae5/00000000000000007735a842/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"),url("https://use.typekit.net/af/40dae5/00000000000000007735a842/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"),url("https://use.typekit.net/af/40dae5/00000000000000007735a842/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/5788bc/00000000000000007735a845/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/5788bc/00000000000000007735a845/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/5788bc/00000000000000007735a845/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:500;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/96cf20/00000000000000007735a848/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"),url("https://use.typekit.net/af/96cf20/00000000000000007735a848/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"),url("https://use.typekit.net/af/96cf20/00000000000000007735a848/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/bd0e8a/00000000000000007735a84c/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/bd0e8a/00000000000000007735a84c/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/bd0e8a/00000000000000007735a84c/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:600;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/f61b58/00000000000000007735a84e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/f61b58/00000000000000007735a84e/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/f61b58/00000000000000007735a84e/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/349829/00000000000000007735a852/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/349829/00000000000000007735a852/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/349829/00000000000000007735a852/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:700;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/8def5a/00000000000000007735a854/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/8def5a/00000000000000007735a854/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/8def5a/00000000000000007735a854/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype"); | ||
| font-display:auto;font-style:normal;font-weight:900;font-stretch:normal; | ||
| } | ||
| @font-face { | ||
| font-family:"urw-din-semi-condensed"; | ||
| src:url("https://use.typekit.net/af/d4ff8c/00000000000000007735a857/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff2"),url("https://use.typekit.net/af/d4ff8c/00000000000000007735a857/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff"),url("https://use.typekit.net/af/d4ff8c/00000000000000007735a857/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("opentype"); | ||
| font-display:auto;font-style:italic;font-weight:900;font-stretch:normal; | ||
| } | ||
| .tk-urw-din { font-family: "urw-din",sans-serif; } | ||
| .tk-urw-din-condensed { font-family: "urw-din-condensed",sans-serif; } | ||
| .tk-urw-din-semi-condensed { font-family: "urw-din-semi-condensed",sans-serif; } | ||
| `; | ||
| const _excluded = ["market", "context", "type", "size", "IconButtonLeft", "IconButtonRight", "disabled", "isWaiting", "onClick", "className", "id", "style", "children", "href", "width"]; | ||
@@ -130,6 +1410,2 @@ const ButtonWrapper = styled__default["default"].div` | ||
| border: ${props => [SUBTLE, FINDINSTORE].includes(props.context) ? "1px solid var(--colour-black)" : "1px solid transparent"}; | ||
| font-size: 1rem; | ||
| line-height: 1.1rem; | ||
| font-family: var(--font-urw-din); | ||
| font-weight: 400; | ||
| text-transform: ${props => props.context === STANDARD || !props.href ? "uppercase" : "none"}; | ||
@@ -313,3 +1589,3 @@ word-break: keep-all; | ||
| icon: IconButtonLeft | ||
| }), /*#__PURE__*/React__default["default"].createElement("span", null, children), !isWaiting && hasIconButtonRight && /*#__PURE__*/React__default["default"].createElement(IconButton, { | ||
| }), /*#__PURE__*/React__default["default"].createElement(ButtonText1, null, children), !isWaiting && hasIconButtonRight && /*#__PURE__*/React__default["default"].createElement(IconButton, { | ||
| icon: IconButtonRight | ||
@@ -316,0 +1592,0 @@ })); |
| { | ||
| "name": "@arcteryx/components-button", | ||
| "version": "1.37.2", | ||
| "version": "1.38.0", | ||
| "description": "Arcteryx Button", | ||
@@ -19,3 +19,3 @@ "source": "src/index.js", | ||
| "license": "ISC", | ||
| "gitHead": "ed950861ce07adc0d4915895da5a35939e66cb4e", | ||
| "gitHead": "bf8528c55168a6b3c7adb347d88506847fdc82b9", | ||
| "files": [ | ||
@@ -22,0 +22,0 @@ "dist", |
@@ -8,2 +8,3 @@ import React from "react"; | ||
| import { widthValue } from "../helpers"; | ||
| import { ButtonText1 } from "@arcteryx/components-typography"; | ||
@@ -28,6 +29,2 @@ const ButtonWrapper = styled.div` | ||
| [SUBTLE, FINDINSTORE].includes(props.context) ? "1px solid var(--colour-black)" : "1px solid transparent"}; | ||
| font-size: 1rem; | ||
| line-height: 1.1rem; | ||
| font-family: var(--font-urw-din); | ||
| font-weight: 400; | ||
| text-transform: ${(props) => (props.context === STANDARD || !props.href ? "uppercase" : "none")}; | ||
@@ -226,3 +223,3 @@ word-break: keep-all; | ||
| {!isWaiting && hasIconButtonLeft && <IconButton icon={IconButtonLeft} />} | ||
| <span>{children}</span> | ||
| <ButtonText1>{children}</ButtonText1> | ||
| {!isWaiting && hasIconButtonRight && <IconButton icon={IconButtonRight} />} | ||
@@ -229,0 +226,0 @@ </ButtonWrapper> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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 riskPackage 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
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by298.45%
441405
- Lines of code
- increased by216.46%
5402
Worsened metrics
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes