@arcteryx/components-typography - npm Package Compare versions

Comparing version 1.28.1 to 1.28.2

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## 1.28.2 (2020-07-28)
+
+**Note:** Version bump only for package @arcteryx/components-typography
+
+
+
+
+
 ## [1.28.1](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-typography@1.28.0...@arcteryx/components-typography@1.28.1) (2020-03-05)
@@ -8,0 +16,0 @@

dist/cjs/index.js

@@ -8,2 +8,3 @@ 'use strict';
 var styled = _interopDefault(require('styled-components'));
+var React = _interopDefault(require('react'));
 
@@ -23,3 +24,3 @@ function _taggedTemplateLiteral(strings, raw) {
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  margin-bottom: 0.5em;\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: 1.5rem;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: ", ";\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -35,22 +36,20 @@ _templateObject = function _templateObject() {
   if (large) {
-    return "29px";
+    return "2rem";
   }
 
   if (loud) {
-    return "36px";
+    return "2.5rem";
   }
 
-  return "20px";
+  return "1.5rem";
 };
 
 var H1 = styled.h1(_templateObject(), function (props) {
-  return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
 }, function (props) {
   return fontSize(props.large, props.loud);
 }, function (props) {
-  return props.large ? "700" : "normal";
+  return fontSize(props.large, props.loud);
 }, function (props) {
-  return props.color;
-}, function (props) {
-  return props.large ? "1.0em" : "1.1em";
+  return props.textColor;
 });
@@ -60,7 +59,8 @@ H1.defaultProps = {
   loud: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$1() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -74,19 +74,18 @@ _templateObject$1 = function _templateObject() {
 var H2 = styled.h2(_templateObject$1(), function (props) {
-  return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+  return props.large ? "1.5rem" : "1rem";
 }, function (props) {
-  return props.large ? "22px" : "18px";
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
 }, function (props) {
-  return props.large ? "700" : "normal";
+  return props.large ? "1.5rem" : "1.25rem";
 }, function (props) {
-  return props.large ? "1em" : "1.1em";
-}, function (props) {
-  return props.color;
+  return props.textColor;
 });
 H2.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$2() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -100,19 +99,18 @@ _templateObject$2 = function _templateObject() {
 var H3 = styled.h3(_templateObject$2(), function (props) {
-  return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+  return props.large ? "1rem" : "0.5rem";
 }, function (props) {
-  return props.color;
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
 }, function (props) {
-  return props.large ? "18px" : "16px";
+  return props.large ? "1.25rem" : "1.1rem";
 }, function (props) {
-  return props.large ? "700" : "normal";
-}, function (props) {
-  return props.large ? "1em" : "1.1em";
+  return props.textColor;
 });
 H3.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$3() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: 0.5rem;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -126,19 +124,16 @@ _templateObject$3 = function _templateObject() {
 var H4 = styled.h4(_templateObject$3(), function (props) {
-  return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
 }, function (props) {
-  return props.color;
+  return props.large ? "1.1rem" : "1rem";
 }, function (props) {
-  return props.large ? "16px" : "15px";
-}, function (props) {
-  return props.large ? "700" : "normal";
-}, function (props) {
-  return props.large ? "1em" : "1.1em";
+  return props.textColor;
 });
 H4.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$4() {
-  var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 55 Roman\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 1.5em;\n  margin: 0 0 1em 0;\n  max-width: 650px;\n  color: ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin: 0 0 1.5rem 0;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  line-height: ", ";\n  max-width: 78ch;\n  color: ", ";\n\n  strong,\n  b {\n    font-weight: 500;\n  }\n\n  em,\n  i {\n    font-weight: 400;\n    font-style: italic;\n  }\n\n  &:last-of-type {\n    margin-bottom: 0;\n  }\n"]);
 
@@ -151,12 +146,40 @@ _templateObject$4 = function _templateObject() {
 }
+
+var fontSize$1 = function fontSize(size) {
+  if (size === "s") {
+    return "0.75rem";
+  }
+
+  if (size === "m") {
+    return "1.1rem";
+  }
+
+  if (size === "l") {
+    return "1.25rem";
+  }
+
+  return "1rem";
+};
+
 var P = styled.p(_templateObject$4(), function (props) {
-  return props.color;
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif';
+}, function (props) {
+  return fontSize$1(props.size);
+}, function (props) {
+  return props.bold ? "500" : "400";
+}, function (props) {
+  return props.italic ? "italic" : "normal";
+}, function (props) {
+  return props.size === "s" ? "1rem" : "1.5rem";
+}, function (props) {
+  return props.textColor;
 });
 P.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$5() {
-  var data = _taggedTemplateLiteral(["\n  font-family: \"AvenirLTW01-55Oblique\", arial, sans-serif;\n  color: ", ";\n  font-size: 16px;\n  font-style: italic;\n  line-height: 1.4em;\n  padding: 15px;\n  margin: 0;\n  max-width: 650px;\n  align-self: center;\n  background: url(\"https://images.arcteryx.com/misc/quotation-marks-left.png\") no-repeat;\n  background-size: 46px;\n  margin-bottom: 1em;\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  font-family: ", ";\n  color: ", ";\n  font-size: 1.1rem;\n  font-weight: 400;\n  line-height: 1.5rem;\n  padding: 1rem 1rem 1rem 5rem;\n  margin: 0 0 1rem 0;\n  max-width: calc(31rem + 8.4rem);\n  align-self: center;\n\n  &:before {\n    content: \"\u201C\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    font-family: \"urw-din\", arial, sans-serif;\n    font-size: 8.4rem;\n    font-weight: 700;\n    line-height: 8.4rem;\n  }\n"]);
 
@@ -170,9 +193,127 @@ _templateObject$5 = function _templateObject() {
 var Blockquote = styled.blockquote(_templateObject$5(), function (props) {
-  return props.color;
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif';
+}, function (props) {
+  return props.textColor;
 });
 Blockquote.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
+function _templateObject9() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-red);\n  height: var(--space-red);\n  background-color: #eb9595;\n"]);
+
+  _templateObject9 = function _templateObject9() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject8() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-pink);\n  height: var(--space-pink);\n  background-color: #dbabe9;\n"]);
+
+  _templateObject8 = function _templateObject8() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject7() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-purple);\n  height: var(--space-purple);\n  background-color: #a0afeb;\n"]);
+
+  _templateObject7 = function _templateObject7() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject6() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-green);\n  height: var(--space-green);\n  background-color: #c8eba0;\n"]);
+
+  _templateObject6 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject5() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-blue);\n  height: var(--space-blue);\n  background-color: #a0e6eb;\n"]);
+
+  _templateObject5 = function _templateObject5() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject4() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-orange);\n  height: var(--space-orange);\n  background-color: #ebcc83;\n"]);
+
+  _templateObject4 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  margin: 0 1rem;\n  font-size: 1rem;\n\n  &:after {\n    content: attr(title);\n    display: block;\n    position: absolute;\n    bottom: -3rem;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n"]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$6() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n"]);
+
+  _templateObject$6 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var CubeWrap = styled.div(_templateObject$6());
+var Cubes = styled.div(_templateObject2());
+var Cube = styled.div(_templateObject3());
+var CubeOrange = styled(Cube)(_templateObject4());
+var CubeBlue = styled(Cube)(_templateObject5());
+var CubeGreen = styled(Cube)(_templateObject6());
+var CubePurple = styled(Cube)(_templateObject7());
+var CubePink = styled(Cube)(_templateObject8());
+var CubeRed = styled(Cube)(_templateObject9());
+
+var Spacing = function Spacing() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CubeWrap, null, /*#__PURE__*/React.createElement(Cubes, null, /*#__PURE__*/React.createElement(CubeOrange, {
+    title: "XS"
+  }), /*#__PURE__*/React.createElement(CubeBlue, {
+    title: "S"
+  }), /*#__PURE__*/React.createElement(CubeGreen, {
+    title: "M"
+  }), /*#__PURE__*/React.createElement(CubePurple, {
+    title: "L"
+  }), /*#__PURE__*/React.createElement(CubePink, {
+    title: "XL"
+  }), /*#__PURE__*/React.createElement(CubeRed, {
+    title: "XXL"
+  }))));
+};
+
 exports.H1 = H1;
@@ -184,2 +325,3 @@ exports.H2 = H2;
 exports.Blockquote = Blockquote;
+exports.Spacing = Spacing;
 //# sourceMappingURL=index.js.map

dist/es/index.js

 import styled from 'styled-components';
+import React from 'react';
 
@@ -16,3 +17,3 @@ function _taggedTemplateLiteral(strings, raw) {
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  margin-bottom: 0.5em;\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: 1.5rem;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: ", ";\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -28,22 +29,20 @@ _templateObject = function _templateObject() {
   if (large) {
-    return "29px";
+    return "2rem";
   }
 
   if (loud) {
-    return "36px";
+    return "2.5rem";
   }
 
-  return "20px";
+  return "1.5rem";
 };
 
 var H1 = styled.h1(_templateObject(), function (props) {
-  return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
 }, function (props) {
   return fontSize(props.large, props.loud);
 }, function (props) {
-  return props.large ? "700" : "normal";
+  return fontSize(props.large, props.loud);
 }, function (props) {
-  return props.color;
-}, function (props) {
-  return props.large ? "1.0em" : "1.1em";
+  return props.textColor;
 });
@@ -53,7 +52,8 @@ H1.defaultProps = {
   loud: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$1() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -67,19 +67,18 @@ _templateObject$1 = function _templateObject() {
 var H2 = styled.h2(_templateObject$1(), function (props) {
-  return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+  return props.large ? "1.5rem" : "1rem";
 }, function (props) {
-  return props.large ? "22px" : "18px";
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
 }, function (props) {
-  return props.large ? "700" : "normal";
+  return props.large ? "1.5rem" : "1.25rem";
 }, function (props) {
-  return props.large ? "1em" : "1.1em";
-}, function (props) {
-  return props.color;
+  return props.textColor;
 });
 H2.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$2() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -93,19 +92,18 @@ _templateObject$2 = function _templateObject() {
 var H3 = styled.h3(_templateObject$2(), function (props) {
-  return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+  return props.large ? "1rem" : "0.5rem";
 }, function (props) {
-  return props.color;
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
 }, function (props) {
-  return props.large ? "18px" : "16px";
+  return props.large ? "1.25rem" : "1.1rem";
 }, function (props) {
-  return props.large ? "700" : "normal";
-}, function (props) {
-  return props.large ? "1em" : "1.1em";
+  return props.textColor;
 });
 H3.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$3() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: 0.5rem;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -119,19 +117,16 @@ _templateObject$3 = function _templateObject() {
 var H4 = styled.h4(_templateObject$3(), function (props) {
-  return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
 }, function (props) {
-  return props.color;
+  return props.large ? "1.1rem" : "1rem";
 }, function (props) {
-  return props.large ? "16px" : "15px";
-}, function (props) {
-  return props.large ? "700" : "normal";
-}, function (props) {
-  return props.large ? "1em" : "1.1em";
+  return props.textColor;
 });
 H4.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$4() {
-  var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 55 Roman\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 1.5em;\n  margin: 0 0 1em 0;\n  max-width: 650px;\n  color: ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin: 0 0 1.5rem 0;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  line-height: ", ";\n  max-width: 78ch;\n  color: ", ";\n\n  strong,\n  b {\n    font-weight: 500;\n  }\n\n  em,\n  i {\n    font-weight: 400;\n    font-style: italic;\n  }\n\n  &:last-of-type {\n    margin-bottom: 0;\n  }\n"]);
 
@@ -144,12 +139,40 @@ _templateObject$4 = function _templateObject() {
 }
+
+var fontSize$1 = function fontSize(size) {
+  if (size === "s") {
+    return "0.75rem";
+  }
+
+  if (size === "m") {
+    return "1.1rem";
+  }
+
+  if (size === "l") {
+    return "1.25rem";
+  }
+
+  return "1rem";
+};
+
 var P = styled.p(_templateObject$4(), function (props) {
-  return props.color;
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif';
+}, function (props) {
+  return fontSize$1(props.size);
+}, function (props) {
+  return props.bold ? "500" : "400";
+}, function (props) {
+  return props.italic ? "italic" : "normal";
+}, function (props) {
+  return props.size === "s" ? "1rem" : "1.5rem";
+}, function (props) {
+  return props.textColor;
 });
 P.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
 function _templateObject$5() {
-  var data = _taggedTemplateLiteral(["\n  font-family: \"AvenirLTW01-55Oblique\", arial, sans-serif;\n  color: ", ";\n  font-size: 16px;\n  font-style: italic;\n  line-height: 1.4em;\n  padding: 15px;\n  margin: 0;\n  max-width: 650px;\n  align-self: center;\n  background: url(\"https://images.arcteryx.com/misc/quotation-marks-left.png\") no-repeat;\n  background-size: 46px;\n  margin-bottom: 1em;\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  font-family: ", ";\n  color: ", ";\n  font-size: 1.1rem;\n  font-weight: 400;\n  line-height: 1.5rem;\n  padding: 1rem 1rem 1rem 5rem;\n  margin: 0 0 1rem 0;\n  max-width: calc(31rem + 8.4rem);\n  align-self: center;\n\n  &:before {\n    content: \"\u201C\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    font-family: \"urw-din\", arial, sans-serif;\n    font-size: 8.4rem;\n    font-weight: 700;\n    line-height: 8.4rem;\n  }\n"]);
 
@@ -163,10 +186,128 @@ _templateObject$5 = function _templateObject() {
 var Blockquote = styled.blockquote(_templateObject$5(), function (props) {
-  return props.color;
+  return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif';
+}, function (props) {
+  return props.textColor;
 });
 Blockquote.defaultProps = {
   large: false,
-  color: "#000"
+  textColor: "#000",
+  market: "outdoor"
 };
 
-export { H1, H2, H3, H4, P, Blockquote };
+function _templateObject9() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-red);\n  height: var(--space-red);\n  background-color: #eb9595;\n"]);
+
+  _templateObject9 = function _templateObject9() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject8() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-pink);\n  height: var(--space-pink);\n  background-color: #dbabe9;\n"]);
+
+  _templateObject8 = function _templateObject8() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject7() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-purple);\n  height: var(--space-purple);\n  background-color: #a0afeb;\n"]);
+
+  _templateObject7 = function _templateObject7() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject6() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-green);\n  height: var(--space-green);\n  background-color: #c8eba0;\n"]);
+
+  _templateObject6 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject5() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-blue);\n  height: var(--space-blue);\n  background-color: #a0e6eb;\n"]);
+
+  _templateObject5 = function _templateObject5() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject4() {
+  var data = _taggedTemplateLiteral(["\n  width: var(--space-orange);\n  height: var(--space-orange);\n  background-color: #ebcc83;\n"]);
+
+  _templateObject4 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  margin: 0 1rem;\n  font-size: 1rem;\n\n  &:after {\n    content: attr(title);\n    display: block;\n    position: absolute;\n    bottom: -3rem;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n"]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$6() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n"]);
+
+  _templateObject$6 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var CubeWrap = styled.div(_templateObject$6());
+var Cubes = styled.div(_templateObject2());
+var Cube = styled.div(_templateObject3());
+var CubeOrange = styled(Cube)(_templateObject4());
+var CubeBlue = styled(Cube)(_templateObject5());
+var CubeGreen = styled(Cube)(_templateObject6());
+var CubePurple = styled(Cube)(_templateObject7());
+var CubePink = styled(Cube)(_templateObject8());
+var CubeRed = styled(Cube)(_templateObject9());
+
+var Spacing = function Spacing() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CubeWrap, null, /*#__PURE__*/React.createElement(Cubes, null, /*#__PURE__*/React.createElement(CubeOrange, {
+    title: "XS"
+  }), /*#__PURE__*/React.createElement(CubeBlue, {
+    title: "S"
+  }), /*#__PURE__*/React.createElement(CubeGreen, {
+    title: "M"
+  }), /*#__PURE__*/React.createElement(CubePurple, {
+    title: "L"
+  }), /*#__PURE__*/React.createElement(CubePink, {
+    title: "XL"
+  }), /*#__PURE__*/React.createElement(CubeRed, {
+    title: "XXL"
+  }))));
+};
+
+export { H1, H2, H3, H4, P, Blockquote, Spacing };
 //# sourceMappingURL=index.js.map

dist/umd/index.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('styled-components')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'styled-components'], factory) :
-  (factory((global.ARCTERYX = {}),global.styled));
-}(this, (function (exports,styled) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('styled-components'), require('react')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'styled-components', 'react'], factory) :
+  (function() {
+    var current = global.ARCTERYX && global.ARCTERYX.componentstypography;
+    var exports = (global.ARCTERYX = global.ARCTERYX || {}, global.ARCTERYX.componentstypography = {});
+    factory(exports,global.styled,global.React);
+    global.ARCTERYX.componentstypography = exports;
+    exports.noConflict = function() { global.ARCTERYX.componentstypography = current; return exports; };
+  })();
+}(this, (function (exports,styled,React) { 'use strict';
 
   styled = styled && styled.hasOwnProperty('default') ? styled['default'] : styled;
+  React = React && React.hasOwnProperty('default') ? React['default'] : React;
 
@@ -22,3 +29,3 @@ function _taggedTemplateLiteral(strings, raw) {
   function _templateObject() {
-    var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  margin-bottom: 0.5em;\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+    var data = _taggedTemplateLiteral(["\n  margin-bottom: 1.5rem;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: ", ";\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -34,22 +41,20 @@ _templateObject = function _templateObject() {
     if (large) {
-      return "29px";
+      return "2rem";
     }
 
     if (loud) {
-      return "36px";
+      return "2.5rem";
     }
 
-    return "20px";
+    return "1.5rem";
   };
 
   var H1 = styled.h1(_templateObject(), function (props) {
-    return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+    return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
   }, function (props) {
     return fontSize(props.large, props.loud);
   }, function (props) {
-    return props.large ? "700" : "normal";
+    return fontSize(props.large, props.loud);
   }, function (props) {
-    return props.color;
-  }, function (props) {
-    return props.large ? "1.0em" : "1.1em";
+    return props.textColor;
   });
@@ -59,7 +64,8 @@ H1.defaultProps = {
     loud: false,
-    color: "#000"
+    textColor: "#000",
+    market: "outdoor"
   };
 
   function _templateObject$1() {
-    var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: uppercase;\n"]);
+    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -73,19 +79,18 @@ _templateObject$1 = function _templateObject() {
   var H2 = styled.h2(_templateObject$1(), function (props) {
-    return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+    return props.large ? "1.5rem" : "1rem";
   }, function (props) {
-    return props.large ? "22px" : "18px";
+    return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
   }, function (props) {
-    return props.large ? "700" : "normal";
+    return props.large ? "1.5rem" : "1.25rem";
   }, function (props) {
-    return props.large ? "1em" : "1.1em";
-  }, function (props) {
-    return props.color;
+    return props.textColor;
   });
   H2.defaultProps = {
     large: false,
-    color: "#000"
+    textColor: "#000",
+    market: "outdoor"
   };
 
   function _templateObject$2() {
-    var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -99,19 +104,18 @@ _templateObject$2 = function _templateObject() {
   var H3 = styled.h3(_templateObject$2(), function (props) {
-    return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+    return props.large ? "1rem" : "0.5rem";
   }, function (props) {
-    return props.color;
+    return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
   }, function (props) {
-    return props.large ? "18px" : "16px";
+    return props.large ? "1.25rem" : "1.1rem";
   }, function (props) {
-    return props.large ? "700" : "normal";
-  }, function (props) {
-    return props.large ? "1em" : "1.1em";
+    return props.textColor;
   });
   H3.defaultProps = {
     large: false,
-    color: "#000"
+    textColor: "#000",
+    market: "outdoor"
   };
 
   function _templateObject$3() {
-    var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+    var data = _taggedTemplateLiteral(["\n  margin-bottom: 0.5rem;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -125,19 +129,16 @@ _templateObject$3 = function _templateObject() {
   var H4 = styled.h4(_templateObject$3(), function (props) {
-    return props.large ? "\"Avenir LT W01 95 Black\", arial, sans-serif" : "\"Avenir LT W01 85 Heavy\", arial, sans-serif";
+    return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din-condensed", arial, sans-serif';
   }, function (props) {
-    return props.color;
+    return props.large ? "1.1rem" : "1rem";
   }, function (props) {
-    return props.large ? "16px" : "15px";
-  }, function (props) {
-    return props.large ? "700" : "normal";
-  }, function (props) {
-    return props.large ? "1em" : "1.1em";
+    return props.textColor;
   });
   H4.defaultProps = {
     large: false,
-    color: "#000"
+    textColor: "#000",
+    market: "outdoor"
   };
 
   function _templateObject$4() {
-    var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 55 Roman\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 1.5em;\n  margin: 0 0 1em 0;\n  max-width: 650px;\n  color: ", ";\n"]);
+    var data = _taggedTemplateLiteral(["\n  margin: 0 0 1.5rem 0;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  line-height: ", ";\n  max-width: 78ch;\n  color: ", ";\n\n  strong,\n  b {\n    font-weight: 500;\n  }\n\n  em,\n  i {\n    font-weight: 400;\n    font-style: italic;\n  }\n\n  &:last-of-type {\n    margin-bottom: 0;\n  }\n"]);
 
@@ -150,12 +151,40 @@ _templateObject$4 = function _templateObject() {
   }
+
+  var fontSize$1 = function fontSize(size) {
+    if (size === "s") {
+      return "0.75rem";
+    }
+
+    if (size === "m") {
+      return "1.1rem";
+    }
+
+    if (size === "l") {
+      return "1.25rem";
+    }
+
+    return "1rem";
+  };
+
   var P = styled.p(_templateObject$4(), function (props) {
-    return props.color;
+    return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif';
+  }, function (props) {
+    return fontSize$1(props.size);
+  }, function (props) {
+    return props.bold ? "500" : "400";
+  }, function (props) {
+    return props.italic ? "italic" : "normal";
+  }, function (props) {
+    return props.size === "s" ? "1rem" : "1.5rem";
+  }, function (props) {
+    return props.textColor;
   });
   P.defaultProps = {
     large: false,
-    color: "#000"
+    textColor: "#000",
+    market: "outdoor"
   };
 
   function _templateObject$5() {
-    var data = _taggedTemplateLiteral(["\n  font-family: \"AvenirLTW01-55Oblique\", arial, sans-serif;\n  color: ", ";\n  font-size: 16px;\n  font-style: italic;\n  line-height: 1.4em;\n  padding: 15px;\n  margin: 0;\n  max-width: 650px;\n  align-self: center;\n  background: url(\"https://images.arcteryx.com/misc/quotation-marks-left.png\") no-repeat;\n  background-size: 46px;\n  margin-bottom: 1em;\n"]);
+    var data = _taggedTemplateLiteral(["\n  position: relative;\n  font-family: ", ";\n  color: ", ";\n  font-size: 1.1rem;\n  font-weight: 400;\n  line-height: 1.5rem;\n  padding: 1rem 1rem 1rem 5rem;\n  margin: 0 0 1rem 0;\n  max-width: calc(31rem + 8.4rem);\n  align-self: center;\n\n  &:before {\n    content: \"\u201C\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    font-family: \"urw-din\", arial, sans-serif;\n    font-size: 8.4rem;\n    font-weight: 700;\n    line-height: 8.4rem;\n  }\n"]);
 
@@ -169,9 +198,127 @@ _templateObject$5 = function _templateObject() {
   var Blockquote = styled.blockquote(_templateObject$5(), function (props) {
-    return props.color;
+    return ["urban", "veilance"].includes(props.market.toLowerCase()) ? '"Suisse Intl Regular", arial, sans-serif' : '"urw-din", arial, sans-serif';
+  }, function (props) {
+    return props.textColor;
   });
   Blockquote.defaultProps = {
     large: false,
-    color: "#000"
+    textColor: "#000",
+    market: "outdoor"
   };
 
+  function _templateObject9() {
+    var data = _taggedTemplateLiteral(["\n  width: var(--space-red);\n  height: var(--space-red);\n  background-color: #eb9595;\n"]);
+
+    _templateObject9 = function _templateObject9() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject8() {
+    var data = _taggedTemplateLiteral(["\n  width: var(--space-pink);\n  height: var(--space-pink);\n  background-color: #dbabe9;\n"]);
+
+    _templateObject8 = function _templateObject8() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject7() {
+    var data = _taggedTemplateLiteral(["\n  width: var(--space-purple);\n  height: var(--space-purple);\n  background-color: #a0afeb;\n"]);
+
+    _templateObject7 = function _templateObject7() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject6() {
+    var data = _taggedTemplateLiteral(["\n  width: var(--space-green);\n  height: var(--space-green);\n  background-color: #c8eba0;\n"]);
+
+    _templateObject6 = function _templateObject6() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject5() {
+    var data = _taggedTemplateLiteral(["\n  width: var(--space-blue);\n  height: var(--space-blue);\n  background-color: #a0e6eb;\n"]);
+
+    _templateObject5 = function _templateObject5() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject4() {
+    var data = _taggedTemplateLiteral(["\n  width: var(--space-orange);\n  height: var(--space-orange);\n  background-color: #ebcc83;\n"]);
+
+    _templateObject4 = function _templateObject4() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject3() {
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  margin: 0 1rem;\n  font-size: 1rem;\n\n  &:after {\n    content: attr(title);\n    display: block;\n    position: absolute;\n    bottom: -3rem;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n"]);
+
+    _templateObject3 = function _templateObject3() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject2() {
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n"]);
+
+    _templateObject2 = function _templateObject2() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject$6() {
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n"]);
+
+    _templateObject$6 = function _templateObject() {
+      return data;
+    };
+
+    return data;
+  }
+  var CubeWrap = styled.div(_templateObject$6());
+  var Cubes = styled.div(_templateObject2());
+  var Cube = styled.div(_templateObject3());
+  var CubeOrange = styled(Cube)(_templateObject4());
+  var CubeBlue = styled(Cube)(_templateObject5());
+  var CubeGreen = styled(Cube)(_templateObject6());
+  var CubePurple = styled(Cube)(_templateObject7());
+  var CubePink = styled(Cube)(_templateObject8());
+  var CubeRed = styled(Cube)(_templateObject9());
+
+  var Spacing = function Spacing() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CubeWrap, null, /*#__PURE__*/React.createElement(Cubes, null, /*#__PURE__*/React.createElement(CubeOrange, {
+      title: "XS"
+    }), /*#__PURE__*/React.createElement(CubeBlue, {
+      title: "S"
+    }), /*#__PURE__*/React.createElement(CubeGreen, {
+      title: "M"
+    }), /*#__PURE__*/React.createElement(CubePurple, {
+      title: "L"
+    }), /*#__PURE__*/React.createElement(CubePink, {
+      title: "XL"
+    }), /*#__PURE__*/React.createElement(CubeRed, {
+      title: "XXL"
+    }))));
+  };
+
   exports.H1 = H1;
@@ -183,2 +330,3 @@ exports.H2 = H2;
   exports.Blockquote = Blockquote;
+  exports.Spacing = Spacing;
 
@@ -185,0 +333,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

package.json

 {
   "name": "@arcteryx/components-typography",
-  "version": "1.28.1",
+  "version": "1.28.2",
   "description": "Arcteryx Typography",
@@ -14,3 +14,3 @@ "main": "src/index.js",
   "license": "ISC",
-  "gitHead": "531ab111333cf1e210ac88101a83b03958085201",
+  "gitHead": "8dd376202767eb8d09b5c7ae696713f3e4f80be1",
   "files": [
@@ -17,0 +17,0 @@ "dist",

README.md

@@ -11,5 +11,12 @@ # `components-typography`
 const LoudRedHeading = () => (
-    <H1 loud color="#ff0000">
+    <H1 loud textColor="#ff0000">
 );
 
 ```
+
+### A note on the colour attribute
+
+Styled components (SC) strips out all non-standard HTML attributes so as to keep
+markup valid. The color attribute is an old school (now defunct) attribute
+that SC doesn't strip out, and is therefore giving us validation errors. Using
+`textColor` avoids this.

src/components/blockquote.js

 import styled from "styled-components";
 
 const Blockquote = styled.blockquote`
-  font-family: "AvenirLTW01-55Oblique", arial, sans-serif;
-  color: ${props => props.color};
-  font-size: 16px;
-  font-style: italic;
-  line-height: 1.4em;
-  padding: 15px;
-  margin: 0;
-  max-width: 650px;
+  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: 1.1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  padding: 1rem 1rem 1rem 5rem;
+  margin: 0 0 1rem 0;
+  max-width: calc(31rem + 8.4rem);
   align-self: center;
-  background: url("https://images.arcteryx.com/misc/quotation-marks-left.png") no-repeat;
-  background-size: 46px;
-  margin-bottom: 1em;
+
+  &:before {
+    content: "“";
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-family: "urw-din", arial, sans-serif;
+    font-size: 8.4rem;
+    font-weight: 700;
+    line-height: 8.4rem;
+  }
 `;
@@ -20,4 +32,5 @@
   large: false,
-  color: "#000",
+  textColor: "#000",
+  market: "outdoor",
 };
 export default Blockquote;

src/components/headings/h1.js

@@ -5,18 +5,20 @@ import styled from "styled-components";
   if (large) {
-    return "29px";
+    return "2rem";
   }
   if (loud) {
-    return "36px";
+    return "2.5rem";
   }
-  return "20px";
+  return "1.5rem";
 };
 
 export const H1 = styled.h1`
+  margin-bottom: 1.5rem;
   font-family: ${props =>
-    props.large ? `"Avenir LT W01 95 Black", arial, sans-serif` : `"Avenir LT W01 85 Heavy", arial, sans-serif`};
+    ["urban", "veilance"].includes(props.market.toLowerCase())
+      ? '"Suisse Intl Regular", arial, sans-serif'
+      : '"urw-din-condensed", arial, sans-serif'};
   font-size: ${props => fontSize(props.large, props.loud)};
-  font-weight: ${props => (props.large ? "700" : "normal")};
-  margin-bottom: 0.5em;
-  color: ${props => props.color};
-  line-height: ${props => (props.large ? "1.0em" : "1.1em")};
+  font-weight: 700;
+  line-height: ${props => fontSize(props.large, props.loud)};
+  color: ${props => props.textColor};
   text-transform: uppercase;
@@ -28,4 +30,5 @@ `;
   loud: false,
-  color: "#000",
+  textColor: "#000",
+  market: "outdoor",
 };
 export default H1;

src/components/headings/h2.js

 import styled from "styled-components";
 
 const H2 = styled.h2`
+  margin-bottom: ${props => (props.large ? "1.5rem" : "1rem")};
   font-family: ${props =>
-    props.large ? `"Avenir LT W01 95 Black", arial, sans-serif` : `"Avenir LT W01 85 Heavy", arial, sans-serif`};
-  font-size: ${props => (props.large ? "22px" : "18px")};
-  font-weight: ${props => (props.large ? "700" : "normal")};
-  line-height: ${props => (props.large ? "1em" : "1.1em")};
-  color: ${props => props.color};
+    ["urban", "veilance"].includes(props.market.toLowerCase())
+      ? '"Suisse Intl Regular", arial, sans-serif'
+      : '"urw-din-condensed", arial, sans-serif'};
+  font-size: ${props => (props.large ? "1.5rem" : "1.25rem")};
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: ${props => props.textColor};
   text-transform: uppercase;
@@ -15,4 +18,5 @@ `;
   large: false,
-  color: "#000",
+  textColor: "#000",
+  market: "outdoor",
 };
 export default H2;

src/components/headings/h3.js

 import styled from "styled-components";
 
 const H3 = styled.h3`
+  margin-bottom: ${props => (props.large ? "1rem" : "0.5rem")};
   font-family: ${props =>
-    props.large ? `"Avenir LT W01 95 Black", arial, sans-serif` : `"Avenir LT W01 85 Heavy", arial, sans-serif`};
-  color: ${props => props.color};
-  font-size: ${props => (props.large ? "18px" : "16px")};
-  font-weight: ${props => (props.large ? "700" : "normal")};
-  line-height: ${props => (props.large ? "1em" : "1.1em")};
+    ["urban", "veilance"].includes(props.market.toLowerCase())
+      ? '"Suisse Intl Regular", arial, sans-serif'
+      : '"urw-din-condensed", arial, sans-serif'};
+  font-size: ${props => (props.large ? "1.25rem" : "1.1rem")};
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: ${props => props.textColor};
   text-transform: uppercase;
@@ -15,4 +18,5 @@ `;
   large: false,
-  color: "#000",
+  textColor: "#000",
+  market: "outdoor",
 };
 export default H3;

src/components/headings/h4.js

 import styled from "styled-components";
 
 const H4 = styled.h4`
+  margin-bottom: 0.5rem;
   font-family: ${props =>
-    props.large ? `"Avenir LT W01 95 Black", arial, sans-serif` : `"Avenir LT W01 85 Heavy", arial, sans-serif`};
-  color: ${props => props.color};
-  font-size: ${props => (props.large ? "16px" : "15px")};
-  font-weight: ${props => (props.large ? "700" : "normal")};
-  line-height: ${props => (props.large ? "1em" : "1.1em")};
+    ["urban", "veilance"].includes(props.market.toLowerCase())
+      ? '"Suisse Intl Regular", arial, sans-serif'
+      : '"urw-din-condensed", arial, sans-serif'};
+  font-size: ${props => (props.large ? "1.1rem" : "1rem")};
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: ${props => props.textColor};
   text-transform: uppercase;
@@ -15,4 +18,5 @@ `;
   large: false,
-  color: "#000",
+  textColor: "#000",
+  market: "outdoor",
 };
 export default H4;

src/components/p.js

 import styled from "styled-components";
 
+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`
-  font-family: "Avenir LT W01 55 Roman", arial, sans-serif;
-  font-size: 15px;
-  line-height: 1.5em;
-  margin: 0 0 1em 0;
-  max-width: 650px;
-  color: ${props => props.color};
+  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 ? `500` : `400`)};
+  font-style: ${props => (props.italic ? `italic` : `normal`)};
+  line-height: ${props => (props.size === "s" ? `1rem` : `1.5rem`)};
+  max-width: 78ch;
+  color: ${props => props.textColor};
+
+  strong,
+  b {
+    font-weight: 500;
+  }
+
+  em,
+  i {
+    font-weight: 400;
+    font-style: italic;
+  }
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 `;
@@ -14,4 +47,5 @@
   large: false,
-  color: "#000",
+  textColor: "#000",
+  market: "outdoor",
 };
 export default P;

src/index.js

@@ -7,2 +7,3 @@ import H1 from "./components/headings/h1";
 import Blockquote from "./components/blockquote";
-export { H1, H2, H3, H4, P, Blockquote };
+import Spacing from "./components/spacing";
+export { H1, H2, H3, H4, P, Blockquote, Spacing };

src/Typography.stories.js

 import React from "react";
-import { H1, H2, H3, P, Blockquote } from "./index.js";
+import { storiesOf } from "@storybook/react";
 
-export default {
-  title: "Typography",
-  component: Standard,
-};
+import { H1, H2, H3, H4, P, Blockquote } from "./index.js";
 
-export const Standard = () => (
-  <>
-    <span className="sb-context">LARGE HEADINGS</span>
-    <H1 loud>h1.loud - Avenir LT Pro 95 Black (36px/1.0em)</H1>
-    <H1 large>h1 - Avenir LT Pro 95 Black (30px/1.0em)</H1>
-    <H2 large>h2 - Avenir LT Pro 95 Black (22.5px/1.0em)</H2>
-    <H3 large>h3 - Avenir LT Pro 95 Black (16px/1.0em)</H3>
+const stories = storiesOf("Typography", module);
 
-    <span className="sb-context">LARGE HEADINGS</span>
-    <H1>h1 - Avenir LT Pro 85 Black (20px/1.1em)</H1>
-    <H2>h2 - Avenir LT Pro 85 Black (18px/1.1em)</H2>
-    <H3 color="#000">h3 - Avenir LT Pro 85 Black (15px/1.1em)</H3>
+stories
+  .add("Large Headlines", () => {
+    return (
+      <>
+        <H1 loud>Together For What's To Come (Loud)</H1>
+        <H1 large>Together For What's To Come</H1>
+        <H2 large>Together For What's To Come</H2>
+        <H3 large>Together For What's To Come</H3>
+        <H4 large>Together For What's To Come</H4>
+      </>
+    );
+  })
 
-    <span className="sb-context">PARAGRAPH COPY</span>
-    <P>
-      Lorem ipsum dolor sit amet, vel accumsan liberavisse ex, ea nec elaboraret interpretaris, sed diceret no. Verear
-      habemus sea ut. His nibh scripta in. In sea vocibus facilisis. In detraxit eleifend duo, alterum iudicabit
-      consectetuer per ad. Qui case possit omittam an, everti expetenda ut usu. Pro discere graecis liberavisse in. Ne
-      docendi corpora quaestio eum, has vivendo suavitate accommodare an. Mei commune detraxit intellegebat ea, duo
-      malis mundi abhorreant ei, cu mentitum recusabo elaboraret eos. Debitis temporibus sit an, eam at alterum
-      efficiantur philosophia.
-    </P>
+  .add("Standard Headlines", () => {
+    return (
+      <>
+        <H1>Together For What's To Come</H1>
+        <H2>Together For What's To Come</H2>
+        <H3>Together For What's To Come</H3>
+        <H4>Together For What's To Come</H4>
+      </>
+    );
+  })
 
-    <span className="sb-context">QUOTATION</span>
-    <Blockquote>
-      Lorem ipsum dolor sit amet, vel accumsan liberavisse ex, ea nec elaboraret interpretaris, sed diceret
-      concludaturque no. Verear habemus sea ut. His nibh scripta in. In sea vocib.
-    </Blockquote>
-  </>
-);
+  .add("Body Copy", () => {
+    return (
+      <>
+        <H3>Body Copy</H3>
+        <P>
+          Lorem ipsum dolor sit amet, vel accumsan liberavisse ex, ea nec elaboraret interpretaris, sed diceret no.
+          Verear habemus sea ut. His nibh scripta in. In sea vocibus facilisis. In detraxit eleifend duo, alterum
+          iudicabit consectetuer per ad. Qui case possit omittam an, everti expetenda ut usu. Pro discere graecis
+          liberavisse in. Ne docendi corpora quaestio eum, has vivendo suavitate accommodare an. Mei commune detraxit
+          intellegebat ea, duo malis mundi abhorreant ei, cu mentitum recusabo elaboraret eos. Debitis temporibus sit
+          an, eam at alterum efficiantur philosophia.
+        </P>
+
+        <H3>Body Copy - Bold</H3>
+        <P bold>
+          Lorem ipsum dolor sit amet, vel accumsan liberavisse ex, ea nec elaboraret interpretaris, sed diceret no.
+          Verear habemus sea ut. His nibh scripta in. In sea vocibus facilisis. In detraxit eleifend duo, alterum
+          iudicabit consectetuer per ad. Qui case possit omittam an, everti expetenda ut usu. Pro discere graecis
+          liberavisse in. Ne docendi corpora quaestio eum, has vivendo suavitate accommodare an. Mei commune detraxit
+          intellegebat ea, duo malis mundi abhorreant ei, cu mentitum recusabo elaboraret eos. Debitis temporibus sit
+          an, eam at alterum efficiantur philosophia.
+        </P>
+
+        <H3>Body Copy - Italic</H3>
+        <P italic>
+          Lorem ipsum dolor sit amet, vel accumsan liberavisse ex, ea nec elaboraret interpretaris, sed diceret no.
+          Verear habemus sea ut. His nibh scripta in. In sea vocibus facilisis. In detraxit eleifend duo, alterum
+          iudicabit consectetuer per ad. Qui case possit omittam an, everti expetenda ut usu. Pro discere graecis
+          liberavisse in. Ne docendi corpora quaestio eum, has vivendo suavitate accommodare an. Mei commune detraxit
+          intellegebat ea, duo malis mundi abhorreant ei, cu mentitum recusabo elaboraret eos. Debitis temporibus sit
+          an, eam at alterum efficiantur philosophia.
+        </P>
+
+        <H3>Body Copy - Sub Heading</H3>
+        <P size="m">
+          Lorem ipsum dolor sit amet, vel accumsan liberavisse ex, ea nec elaboraret interpretaris, sed diceret no.
+          Verear habemus sea ut. His nibh scripta in. In sea vocibus facilisis. In detraxit eleifend duo, alterum
+          iudicabit consectetuer per ad. Qui case possit omittam an, everti expetenda ut usu. Pro discere graecis
+          liberavisse in. Ne docendi corpora quaestio eum, has vivendo suavitate accommodare an. Mei commune detraxit
+          intellegebat ea, duo malis mundi abhorreant ei, cu mentitum recusabo elaboraret eos. Debitis temporibus sit
+          an, eam at alterum efficiantur philosophia.
+        </P>
+
+        <H3>Body Copy - Sub Heading Large</H3>
+        <P size="l">
+          Lorem ipsum dolor sit amet, vel accumsan liberavisse ex, ea nec elaboraret interpretaris, sed diceret no.
+          Verear habemus sea ut. His nibh scripta in. In sea vocibus facilisis. In detraxit eleifend duo, alterum
+          iudicabit consectetuer per ad. Qui case possit omittam an, everti expetenda ut usu. Pro discere graecis
+          liberavisse in. Ne docendi corpora quaestio eum, has vivendo suavitate accommodare an. Mei commune detraxit
+          intellegebat ea, duo malis mundi abhorreant ei, cu mentitum recusabo elaboraret eos. Debitis temporibus sit
+          an, eam at alterum efficiantur philosophia.
+        </P>
+
+        <H3>Body Copy - Mice</H3>
+        <P size="s">
+          Lorem ipsum dolor sit amet, vel accumsan liberavisse ex, ea nec elaboraret interpretaris, sed diceret no.
+          Verear habemus sea ut. His nibh scripta in. In sea vocibus facilisis. In detraxit eleifend duo, alterum
+          iudicabit consectetuer per ad. Qui case possit omittam an, everti expetenda ut usu. Pro discere graecis
+          liberavisse in. Ne docendi corpora quaestio eum, has vivendo suavitate accommodare an. Mei commune detraxit
+          intellegebat ea, duo malis mundi abhorreant ei, cu mentitum recusabo elaboraret eos. Debitis temporibus sit
+          an, eam at alterum efficiantur philosophia.
+        </P>
+      </>
+    );
+  })
+
+  .add("Blockquote", () => {
+    return (
+      <Blockquote>
+        We are a Canadian company based in the Coast Mountains. Our design process is connected to the real world,
+        focused on delivering durable, unrivaled performance. We are a problem solvers, always evolving and searching
+        for a better way to deliver resolved, minimalist designs. Design is everywhere. But good design that matters
+        makes lives better.
+      </Blockquote>
+    );
+  })
+
+  .add("Lists", () => {
+    return (
+      <>
+        <ul>
+          <li>TODO</li>
+          <li>TODO</li>
+          <li>TODO</li>
+        </ul>
+        <ol>
+          <li>TODO</li>
+          <li>TODO</li>
+          <li>TODO</li>
+        </ol>
+      </>
+    );
+  })
+
+  .add("Veilance", () => {
+    return (
+      <>
+        <H1 market="veilance">Together For What's To Come</H1>
+        <H2 market="veilance">Together For What's To Come</H2>
+        <H3 market="veilance">Together For What's To Come</H3>
+        <H4 market="veilance">Together For What's To Come</H4>
+
+        <P market="veilance">
+          Lorem ipsum dolor sit amet, vel accumsan liberavisse ex, ea nec elaboraret interpretaris, sed diceret no.
+          Verear habemus sea ut. His nibh scripta in. In sea vocibus facilisis. In detraxit eleifend duo, alterum
+          iudicabit consectetuer per ad. Qui case possit omittam an, everti expetenda ut usu. Pro discere graecis
+          liberavisse in. Ne docendi corpora quaestio eum, has vivendo suavitate accommodare an. Mei commune detraxit
+          intellegebat ea, duo malis mundi abhorreant ei, cu mentitum recusabo elaboraret eos. Debitis temporibus sit
+          an, eam at alterum efficiantur philosophia.
+        </P>
+      </>
+    );
+  });

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

80770

increased by91.63%

Number of package files

19

increased by11.76%

Lines of code

1159

increased by98.12%

Number of lines in readme file

22

increased by46.67%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes