@twreporter/react-article-components 1.4.1 → 1.4.2-rc.3

package/lib/components/body/infobox.js

@@ -23,6 +23,8 @@ var _theme = _interopRequireDefault(require("../../constants/theme"));
 
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
+var _color = _interopRequireDefault(require("../../constants/color"));
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
@@ -65,37 +67,37 @@ var widthCSS = /*#__PURE__*/(0, _styledComponents.css)(["", " ", " ", " ", ""],
 var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infobox__Title",
   componentId: "sc-1rp3uhy-0"
-})(["", " color:#494949;line-height:1.9;letter-spacing:0.7px;font-weight:", ";font-size:", "px;margin:0 auto 21px auto;"], widthCSS, _typography["default"].font.weight.bold, function (props) {
+})(["", " color:", ";line-height:1.9;letter-spacing:0.7px;font-weight:", ";font-size:", "px;margin:0 auto 21px auto;"], widthCSS, _color["default"].gray85, _typography["default"].font.weight.bold, function (props) {
   return props.theme.fontSizeOffset + 20;
 });
 
 var Content = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infobox__Content",
   componentId: "sc-1rp3uhy-1"
-})(["", " color:#494949;line-height:1.75;letter-spacing:0.5px;font-weight:", ";font-size:", "px;margin:0 auto;"], widthCSS, _typography["default"].font.weight.normal, function (props) {
+})(["", " color:", ";line-height:1.75;letter-spacing:0.5px;font-weight:", ";font-size:", "px;margin:0 auto;"], widthCSS, _color["default"].gray85, _typography["default"].font.weight.normal, function (props) {
   return props.theme.fontSizeOffset + 16;
 });
 
 function getContainerStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["&::before,&::after{background:#a67a44;}"]);
+      return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color["default"].brown);
 
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["&::before,&::after{background:#fbafef;}"]);
+      return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color["default"].pink);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["&::before,&::after{background:#d0a67d;}"]);
+      return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color["default"].milkTea);
   }
 }
 
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infobox__Container",
   componentId: "sc-1rp3uhy-2"
-})(["", " ", " white-space:pre-wrap;background:#fff;position:relative;margin:60px auto 0 auto;", " ", " &::before{content:'';display:block;width:58px;height:1px;transform:rotate(34.51deg);transform-origin:right center;position:absolute;right:-15px;top:28px;}&::after{content:'';display:block;width:58px;height:1px;transform:rotate(34.51deg);transform-origin:left center;position:absolute;left:-6px;bottom:22px;}"], function (props) {
+})(["", " ", " white-space:pre-wrap;background:", ";position:relative;margin:60px auto 0 auto;", " ", " &::before{content:'';display:block;width:58px;height:1px;transform:rotate(34.51deg);transform-origin:right center;position:absolute;right:-15px;top:28px;}&::after{content:'';display:block;width:58px;height:1px;transform:rotate(34.51deg);transform-origin:left center;position:absolute;left:-6px;bottom:22px;}"], function (props) {
   return getContainerStyles(props.theme.name);
-}, _css["default"].linkChildren, _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-top: 30px;\n    padding-bottom: 30px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding-top: 40px;\n    padding-bottom: 40px;\n  "]))));
+}, _css["default"].linkChildren, _color["default"].white, _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-top: 30px;\n    padding-bottom: 30px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding-top: 40px;\n    padding-bottom: 40px;\n  "]))));
 
 var Infobox = /*#__PURE__*/function (_PureComponent) {
   _inherits(Infobox, _PureComponent);

package/lib/components/body/multimedia.js

@@ -15,6 +15,8 @@ var _theme = _interopRequireDefault(require("../../constants/theme"));
 
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
+var _color = _interopRequireDefault(require("../../constants/color"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -77,14 +79,14 @@ var mockup = {
 function getCaptionStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["color:rgba(255,255,255,0.7);&::after{border-color:rgba(255,255,255,0.2);}"]);
+      return (0, _styledComponents.css)(["color:", ";&::after{border-color:", ";}"], _color["default"].notSoWhite, _color["default"].gray10);
 
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["color:#494949;&::after{border-color:#fbafef;}"]);
+      return (0, _styledComponents.css)(["color:", ";&::after{border-color:", ";}"], _color["default"].gray85, _color["default"].pink);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["color:#494949;&::after{border-color:#d0a67d;}"]);
+      return (0, _styledComponents.css)(["color:", ";&::after{border-color:", ";}"], _color["default"].gray85, _color["default"].milkTea);
   }
 }
 

package/lib/components/body/paragraph.js

@@ -19,6 +19,8 @@ var _css = _interopRequireDefault(require("../../constants/css"));
 
 var _theme = _interopRequireDefault(require("../../constants/theme"));
 
+var _color = _interopRequireDefault(require("../../constants/color"));
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -38,7 +40,7 @@ var P = /*#__PURE__*/_styledComponents["default"].p.withConfig({
 })(["", " ", " ", ""], _css["default"].paragraphText, _css["default"].linkChildren, function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["strong{color:rgba(255,255,255,0.9);}"]);
+      return (0, _styledComponents.css)(["strong{color:", ";}"], _color["default"].notSoWhite);
 
     default:
       return '';

package/lib/components/body/slider/index.js

@@ -13,6 +13,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _color = _interopRequireDefault(require("../../../constants/color"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -40,7 +42,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var Rail = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "slider__Rail",
   componentId: "sc-1pt06t8-0"
-})(["width:100%;height:100%;background:#ccc;position:relative;cursor:", ";"], function (props) {
+})(["width:100%;height:100%;background:", ";position:relative;cursor:", ";"], _color["default"].gray55, function (props) {
   return props.isHeld ? 'grabbing' : 'pointer';
 });
 

package/lib/components/body/slideshow/index.js

@@ -27,6 +27,10 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _theme = _interopRequireDefault(require("../../../constants/theme"));
 
+var _color = _interopRequireDefault(require("../../../constants/color"));
+
+var _typography = _interopRequireDefault(require("../../../constants/typography"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -209,7 +213,7 @@ var ImageNumberCircle = /*#__PURE__*/_styledComponents["default"].div.withConfig
 var ImageNumber = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   displayName: "slideshow__ImageNumber",
   componentId: "sc-1skir21-5"
-})(["position:absolute;top:25px;left:9px;font-size:24px;font-family:BioRhyme;font-weight:bold;line-height:0.79;", ""], _mediaQuery["default"].hdOnly(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    top: 35px;\n    left: 10px;\n  "]))));
+})(["position:absolute;top:25px;left:9px;font-size:24px;font-weight:", ";line-height:0.79;", ""], _typography["default"].font.weight.bold, _mediaQuery["default"].hdOnly(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    top: 35px;\n    left: 10px;\n  "]))));
 
 var ImageTotal = /*#__PURE__*/(0, _styledComponents["default"])(ImageNumber).withConfig({
   displayName: "slideshow__ImageTotal",
@@ -270,14 +274,14 @@ var SlideshowFlexBox = /*#__PURE__*/_styledComponents["default"].div.withConfig(
 function getSlideshowFlexBoxStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["", "{border-color:rgba(255,255,255,0.2);}", "{background-color:#d0a67d;&::after{border-color:#08192d;}}", "{color:#08192d;}", "{background-color:#d0a67d;}"], PrevButton, ImageNumberCircle, ImageNumber, SlideMask);
+      return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}", "{background-color:", ";}"], PrevButton, _color["default"].gray10, ImageNumberCircle, _color["default"].milkTea, _color["default"].darkBlue, ImageNumber, _color["default"].darkBlue, SlideMask, _color["default"].milkTea);
 
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["", "{border-color:#d8d8d8;}", "{background-color:#fbafef;&::after{border-color:#fff;}}", "{color:#fff;}", "{background-color:#2440fb;}"], PrevButton, ImageNumberCircle, ImageNumber, SlideMask);
+      return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}", "{background-color:", ";}"], PrevButton, _color["default"].gray50, ImageNumberCircle, _color["default"].pink, _color["default"].white, ImageNumber, _color["default"].white, SlideMask, _color["default"].lightBlue);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["", "{border-color:#d8d8d8;}", "{background-color:#d0a67d;&::after{border-color:#fff;}}", "{color:#fff;}", "{background-color:#d0a67d;}"], PrevButton, ImageNumberCircle, ImageNumber, SlideMask);
+      return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}", "{background-color:", ";}"], PrevButton, _color["default"].gray50, ImageNumberCircle, _color["default"].milkTea, _color["default"].white, ImageNumber, _color["default"].white, SlideMask, _color["default"].milkTea);
   }
 }
 /**

package/lib/components/donation-box.js

@@ -19,6 +19,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _typography = _interopRequireDefault(require("../constants/typography"));
 
+var _color = _interopRequireDefault(require("../constants/color"));
+
 var _templateObject, _templateObject2, _templateObject3;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -58,26 +60,26 @@ var _content = {
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "donation-box__Container",
   componentId: "sc-1uszvr7-0"
-})(["margin:60px auto 55px auto;padding:40px 30px 30px 30px;width:502px;min-height:284px;background:#fff;border-left:solid 1px ", ";", ""], function (props) {
+})(["margin:60px auto 55px auto;padding:40px 30px 30px 30px;width:502px;min-height:284px;background:", ";border-left:solid 1px ", ";", ""], _color["default"].white, function (props) {
   return props.theme.colors.secondary.support;
 }, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin: 40px auto;\n    width: 100%;\n    min-height: 335px;\n  "]))));
 
 var Title = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   displayName: "donation-box__Title",
   componentId: "sc-1uszvr7-1"
-})(["display:inline-block;background:", ";padding-right:2px;box-shadow:5px 15px 0 #fff inset;font-size:22px;font-weight:", ";color:#262626;margin-bottom:15px;", ""], function (props) {
+})(["display:inline-block;background:", ";padding-right:2px;box-shadow:5px 15px 0 ", " inset;font-size:22px;font-weight:", ";color:", ";margin-bottom:15px;", ""], function (props) {
   return props.theme.colors.secondary.background;
-}, _typography["default"].font.weight.bold, _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin-bottom: 18px;\n  "]))));
+}, _color["default"].white, _typography["default"].font.weight.bold, _color["default"].gray95, _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin-bottom: 18px;\n  "]))));
 
 var Text = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   displayName: "donation-box__Text",
   componentId: "sc-1uszvr7-2"
-})(["font-size:16px;line-height:1.75;color:#262626;margin-bottom:0.5em;&:last-of-type{margin-bottom:0;}", ""], _css["default"].linkChildren);
+})(["font-size:16px;line-height:1.75;color:", ";margin-bottom:0.5em;&:last-of-type{margin-bottom:0;}", ""], _color["default"].gray95, _css["default"].linkChildren);
 
 var Donate = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "donation-box__Donate",
   componentId: "sc-1uszvr7-3"
-})(["width:100%;height:55px;margin-top:50px;", " a{width:140px;height:55px;background:#000;display:table;float:right;cursor:pointer;text-decoration:none;p{display:table-cell;text-align:center;vertical-align:middle;font-size:14px;color:#fff;font-weight:500;letter-spacing:1.3px;}&:hover{background:", ";}}"], _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-top: 40px;\n  "]))), function (props) {
+})(["width:100%;height:55px;margin-top:50px;", " a{width:140px;height:55px;background:", ";display:table;float:right;cursor:pointer;text-decoration:none;p{display:table-cell;text-align:center;vertical-align:middle;font-size:14px;color:", ";font-weight:", ";letter-spacing:1.3px;}&:hover{background:", ";}}"], _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-top: 40px;\n  "]))), _color["default"].black, _color["default"].white, _typography["default"].font.weight.normal, function (props) {
   return props.theme.colors.secondary.accent;
 });
 

package/lib/components/leading/fullscreen.js

@@ -9,17 +9,21 @@ exports["default"] = void 0;
 
 var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context"));
 
-var _imgWithPlaceholder = _interopRequireDefault(require("../img-with-placeholder"));
-
 var _react = _interopRequireDefault(require("react"));
 
-var _get = _interopRequireDefault(require("lodash/get"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+var _imgWithPlaceholder = _interopRequireDefault(require("../img-with-placeholder"));
+
+var _color = _interopRequireDefault(require("../../constants/color"));
 
 var _leading = _interopRequireDefault(require("../../constants/prop-types/leading"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _typography = _interopRequireDefault(require("../../constants/typography"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
@@ -66,22 +70,22 @@ var TextBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Title = /*#__PURE__*/_styledComponents["default"].h1.withConfig({
   displayName: "fullscreen__Title",
   componentId: "sc-63dapi-2"
-})(["margin:0;font-weight:bold;line-height:1.4;color:#fff;font-size:50px;text-shadow:0 2px 4px rgba(0,0,0,0.5);", ""], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 32px;\n  "]))));
+})(["margin:0;font-weight:", ";font-family:", ";line-height:1.4;color:", ";font-size:50px;text-shadow:0 2px 4px ", ";", ""], _typography["default"].font.weight.bold, _typography["default"].font.family.title, _color["default"].white, _color["default"].gray75, _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 32px;\n  "]))));
 
 var Subtitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "fullscreen__Subtitle",
   componentId: "sc-63dapi-3"
-})(["color:#fff;text-shadow:0 2px 4px rgba(0,0,0,0.5);font-size:40px;font-weight:100;", " ", ""], _mediaQuery["default"].tabletAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: 40px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    font-size: 26px;\n  "]))));
+})(["color:", ";text-shadow:0 2px 4px ", ";font-size:40px;font-weight:", ";", " ", ""], _color["default"].white, _color["default"].gray75, _typography["default"].font.weight.normal, _mediaQuery["default"].tabletAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: 40px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    font-size: 26px;\n  "]))));
 
 var Topic = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "fullscreen__Topic",
   componentId: "sc-63dapi-4"
-})(["display:inline-block;padding:5px;background-color:rgba(166,122,68,0.55);color:#fff;font-size:16px;font-weight:bold;"]);
+})(["display:inline-block;padding:5px;background-color:", ";color:", ";font-size:16px;font-weight:", ";"], _color["default"].paleBrown, _color["default"].white, _typography["default"].font.weight.bold);
 
 var RightArrow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "fullscreen__RightArrow",
   componentId: "sc-63dapi-5"
-})(["border:solid #fff;border-width:0 2px 2px 0;display:inline-block;padding:4px;transform:rotate(-45deg);margin:0 10px 1px 3px;"]);
+})(["border:solid ", ";border-width:0 2px 2px 0;display:inline-block;padding:4px;transform:rotate(-45deg);margin:0 10px 1px 3px;"], _color["default"].white);
 
 var FigureBlock = /*#__PURE__*/_styledComponents["default"].figure.withConfig({
   displayName: "fullscreen__FigureBlock",
@@ -91,7 +95,7 @@ var FigureBlock = /*#__PURE__*/_styledComponents["default"].figure.withConfig({
 var FigureOverlayMask = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "fullscreen__FigureOverlayMask",
   componentId: "sc-63dapi-7"
-})(["position:absolute;height:50%;width:100%;bottom:0;background-image:linear-gradient(to bottom,rgba(0,0,0,0),#000000);"]);
+})(["position:absolute;height:50%;width:100%;bottom:0;background-image:linear-gradient( to bottom,", ",", " );"], _color["default"].transparent, _color["default"].black);
 
 var DisplayOnPortrait = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "fullscreen__DisplayOnPortrait",

package/lib/components/leading/normal.js

@@ -11,18 +11,22 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context"));
 
-var _imgWithPlaceholder = _interopRequireDefault(require("../img-with-placeholder"));
-
 var _react = _interopRequireDefault(require("react"));
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
-
-var _get = _interopRequireDefault(require("lodash/get"));
+var _imgWithPlaceholder = _interopRequireDefault(require("../img-with-placeholder"));
 
 var _leading = _interopRequireDefault(require("../../constants/prop-types/leading"));
 
 var _theme = _interopRequireDefault(require("../../constants/theme"));
 
+var _color = _interopRequireDefault(require("../../constants/color"));
+
+var _typography = _interopRequireDefault(require("../../constants/typography"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -72,12 +76,12 @@ var TextBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Title = /*#__PURE__*/_styledComponents["default"].h1.withConfig({
   displayName: "normal__Title",
   componentId: "qpgeb2-2"
-})(["letter-spacing:0.4px;font-weight:bold;margin:0 0 40px 0;", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 34px;\n  "]))), _mediaQuery["default"].tabletAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: 42px;\n    line-height: 1.38;\n  "]))));
+})(["letter-spacing:0.4px;font-weight:", ";font-family:", ";margin:0 0 40px 0;", " ", ""], _typography["default"].font.weight.bold, _typography["default"].font.family.title, _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 34px;\n  "]))), _mediaQuery["default"].tabletAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: 42px;\n    line-height: 1.38;\n  "]))));
 
 var Subtitle = /*#__PURE__*/_styledComponents["default"].h2.withConfig({
   displayName: "normal__Subtitle",
   componentId: "qpgeb2-3"
-})(["font-weight:bold;margin:0 0 10px 0;", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    font-size: 16px;\n  "]))), _mediaQuery["default"].tabletAndAbove(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    line-height: 2.1;\n    font-size: 20px;\n  "]))));
+})(["font-weight:", ";margin:0 0 10px 0;", " ", ""], _typography["default"].font.weight.bold, _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    font-size: 16px;\n  "]))), _mediaQuery["default"].tabletAndAbove(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    line-height: 2.1;\n    font-size: 20px;\n  "]))));
 
 var Topic = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "normal__Topic",
@@ -106,11 +110,11 @@ var BackgroundBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 function getBackgroundBlockStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["background-color:#08192d;", "{color:rgba(255,255,255,0.4);}", "{color:#d0a67d;border-color:#a67a44;}", ",", "{color:rgba(255,255,255,0.9);}"], FigCaption, Topic, Subtitle, Title);
+      return (0, _styledComponents.css)(["background-color:", ";", "{color:", ";}", "{color:", ";border-color:", ";}", ",", "{color:", ";}"], _color["default"].darkBlue, FigCaption, _color["default"].gray5, Topic, _color["default"].milkTea, _color["default"].brown, Subtitle, Title, _color["default"].notSoWhite);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["background-color:#f1f1f1;", "{color:#808080;}", "{color:#a67a44;border-color:#d0a67d;}", ",", "{color:#404040;}"], FigCaption, Topic, Subtitle, Title);
+      return (0, _styledComponents.css)(["background-color:", ";", "{color:", ";}", "{color:", ";border-color:", ";}", ",", "{color:", ";}"], _color["default"].gray30, FigCaption, _color["default"].gray80, Topic, _color["default"].brown, _color["default"].milkTea, Subtitle, Title, _color["default"].gray90);
   }
 }
 

package/lib/components/leading/pink.js

@@ -9,17 +9,21 @@ exports["default"] = void 0;
 
 var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context"));
 
-var _imgWithPlaceholder = _interopRequireDefault(require("../img-with-placeholder"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _get = _interopRequireDefault(require("lodash/get"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+var _imgWithPlaceholder = _interopRequireDefault(require("../img-with-placeholder"));
 
 var _leading = _interopRequireDefault(require("../../constants/prop-types/leading"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _color = _interopRequireDefault(require("../../constants/color"));
+
+var _typography = _interopRequireDefault(require("../../constants/typography"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
@@ -93,25 +97,25 @@ var TextBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var TopicTextBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "pink__TopicTextBlock",
   componentId: "sc-1gnwclr-3"
-})(["background-color:", ";border:solid 2px #fff;display:inline-block;position:relative;padding-left:10px;padding-right:10px;margin-bottom:30px;color:", ";font-size:20px;font-weight:bold;line-height:1.8;letter-spacing:0.4px;box-shadow:5px 5px #fff;"], function (props) {
+})(["background-color:", ";border:solid 2px ", ";display:inline-block;position:relative;padding-left:10px;padding-right:10px;margin-bottom:30px;color:", ";font-size:20px;font-weight:", ";line-height:1.8;letter-spacing:0.4px;box-shadow:5px 5px ", ";"], function (props) {
   return props.theme.colors.primary.support;
-}, function (props) {
+}, _color["default"].white, function (props) {
   return props.theme.colors.primary.text;
-});
+}, _typography["default"].font.weight.bold, _color["default"].white);
 
 var TitleTextBlock = /*#__PURE__*/_styledComponents["default"].h1.withConfig({
   displayName: "pink__TitleTextBlock",
   componentId: "sc-1gnwclr-4"
-})(["color:", ";font-weight:bold;padding-left:10px;margin:0;", " ", " ", ""], function (props) {
+})(["color:", ";font-weight:", ";font-family:", ";padding-left:10px;margin:0;", " ", " ", ""], function (props) {
   return props.theme.colors.primary.text;
-}, _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: 28px;\n    > span {\n      line-height: 1.29;\n    }\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    font-size: 42px;\n    > span {\n      line-height: 1.38;\n    }\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: ", "px;\n    font-size: 34px;\n    > span {\n      line-height: 1.6;\n      background-color: #fff;\n      box-shadow: 10px 0 0 #fff, -10px 0 0 #fff;\n    }\n  "])), mockup.desktop.title.width));
+}, _typography["default"].font.weight.bold, _typography["default"].font.family.title, _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: 28px;\n    > span {\n      line-height: 1.29;\n    }\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    font-size: 42px;\n    > span {\n      line-height: 1.38;\n    }\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: ", "px;\n    font-size: 34px;\n    > span {\n      line-height: 1.6;\n      background-color: ", ";\n      box-shadow: 10px 0 0 ", ", -10px 0 0 ", ";\n    }\n  "])), mockup.desktop.title.width, _color["default"].white, _color["default"].white, _color["default"].white));
 
 var SubtitleTextBlock = /*#__PURE__*/_styledComponents["default"].h2.withConfig({
   displayName: "pink__SubtitleTextBlock",
   componentId: "sc-1gnwclr-5"
-})(["color:", ";display:block;font-size:20px;font-weight:bold;margin:0 0 10px 0;> span{line-height:2.1;padding:6px 12px;}", ""], function (props) {
+})(["color:", ";display:block;font-size:20px;font-weight:", ";margin:0 0 10px 0;> span{line-height:2.1;padding:6px 12px;}", ""], function (props) {
   return props.theme.colors.primary.text;
-}, _mediaQuery["default"].desktopAndAbove(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    > span {\n      background-color: #fff;\n    }\n  "]))));
+}, _typography["default"].font.weight.bold, _mediaQuery["default"].desktopAndAbove(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    > span {\n      background-color: ", ";\n    }\n  "])), _color["default"].white));
 
 var FigureBlock = /*#__PURE__*/_styledComponents["default"].figure.withConfig({
   displayName: "pink__FigureBlock",

package/lib/components/license.js

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _theme = _interopRequireDefault(require("../constants/theme"));
 
+var _color = _interopRequireDefault(require("../constants/color"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -45,12 +47,12 @@ var Text = /*#__PURE__*/_styledComponents["default"].p.withConfig({
 })(["margin:0;color:", ";font-size:16px;line-height:1.38;"], function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      return 'rgba(255, 255, 255, 0.4)';
+      return _color["default"].gray5;
 
     case _theme["default"].article.v2.pink:
     case _theme["default"].article.v2["default"]:
     default:
-      return '#808080';
+      return _color["default"].gray80;
   }
 });
 

package/lib/components/related/card.js

@@ -25,6 +25,8 @@ var _theme = _interopRequireDefault(require("../../constants/theme"));
 
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
+var _color = _interopRequireDefault(require("../../constants/color"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -74,13 +76,13 @@ var DescBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Desc = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   displayName: "card__Desc",
   componentId: "uveoih-2"
-})(["opacity:", ";visibility:", ";position:", ";margin:0px;width:100%;display:block;font-size:14px;line-height:1.43;color:#808080;padding:15px 0 15px 0;transition:opacity 200ms ease 100ms;"], function (props) {
+})(["opacity:", ";visibility:", ";position:", ";margin:0px;width:100%;display:block;font-size:14px;line-height:1.43;color:", ";padding:15px 0 15px 0;transition:opacity 200ms ease 100ms;"], function (props) {
   return props.isHovered ? '1' : '0';
 }, function (props) {
   return props.isHovered ? 'visible' : 'hidden';
 }, function (props) {
   return props.isHovered ? 'static' : 'absolute';
-});
+}, _color["default"].gray80);
 
 var Thumbnail = /*#__PURE__*/_styledComponents["default"].figure.withConfig({
   displayName: "card__Thumbnail",
@@ -105,12 +107,12 @@ var Category = /*#__PURE__*/_styledComponents["default"].span.withConfig({
 var Title = /*#__PURE__*/_styledComponents["default"].h3.withConfig({
   displayName: "card__Title",
   componentId: "uveoih-7"
-})(["font-size:16px;font-weight:", ";line-height:1.5;margin:5px 0 10px 0;", ""], _typography["default"].font.weight.bold, _mediaQuery["default"].tabletAndBelow(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    order: 2;\n    margin-bottom: 15px;\n  "]))));
+})(["font-size:16px;font-weight:", ";font-family:", ";line-height:1.5;margin:5px 0 10px 0;", ""], _typography["default"].font.weight.bold, _typography["default"].font.family.title, _mediaQuery["default"].tabletAndBelow(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    order: 2;\n    margin-bottom: 15px;\n  "]))));
 
 var PublishedDate = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   displayName: "card__PublishedDate",
   componentId: "uveoih-8"
-})(["margin:0;font-size:12px;line-height:2;color:#afafaf;", " ", ""], _mediaQuery["default"].desktopAndAbove(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    position: absolute;\n    left: 5px;\n    bottom: 15px;\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    order: 3;\n  "]))));
+})(["margin:0;font-size:12px;line-height:2;color:", ";", " ", ""], _color["default"].gray60, _mediaQuery["default"].desktopAndAbove(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    position: absolute;\n    left: 5px;\n    bottom: 15px;\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    order: 3;\n  "]))));
 
 var Block = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "card__Block",
@@ -124,14 +126,14 @@ var Block = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 function getBlockStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["", "{color:#d0a67d;}", "{color:rgba(255,255,255,0.9);}", "{background-color:rgba(255,255,255,0.2);}"], Category, Title, StyledImg);
+      return (0, _styledComponents.css)(["", "{color:", ";}", "{color:", ";}", "{background-color:", ";}"], Category, _color["default"].milkTea, Title, _color["default"].notSoWhite, StyledImg, _color["default"].gray10);
 
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["", "{color:#ef7ede;}", "{color:#404040;}", "{background-color:#e2e2e2;}"], Category, Title, StyledImg);
+      return (0, _styledComponents.css)(["", "{color:", ";}", "{color:", ";}", "{background-color:", ";}"], Category, _color["default"].darkPink, Title, _color["default"].gray90, StyledImg, _color["default"].gray40);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["", "{color:#a67a44;}", "{color:#404040;}", "{background-color:#e2e2e2;}"], Category, Title, StyledImg);
+      return (0, _styledComponents.css)(["", "{color:", ";}", "{color:", ";}", "{background-color:", ";}"], Category, _color["default"].brown, Title, _color["default"].gray90, StyledImg, _color["default"].gray40);
   }
 }
 

package/lib/components/related/index.js

@@ -7,27 +7,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _list = _interopRequireDefault(require("./list"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _get = _interopRequireDefault(require("lodash/get"));
+var _list = _interopRequireDefault(require("./list"));
 
-var _map = _interopRequireDefault(require("lodash/map"));
+var _theme = _interopRequireDefault(require("../../constants/theme"));
+
+var _typography = _interopRequireDefault(require("../../constants/typography"));
+
+var _color = _interopRequireDefault(require("../../constants/color"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
-var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _get = _interopRequireDefault(require("lodash/get"));
 
-var _theme = _interopRequireDefault(require("../../constants/theme"));
+var _map = _interopRequireDefault(require("lodash/map"));
 
-var _typography = _interopRequireDefault(require("../../constants/typography"));
+var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
@@ -82,14 +84,14 @@ var Descriptor = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 })(["", " ", " ", " ", " ", " ", " ", ""], function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["color:rgba(255,255,255,0.4);", ""], _mediaQuery["default"].desktopAndAbove(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            border-color: rgba(255, 255, 255, 0.2);\n            &::after {\n              border-color: rgba(255, 255, 255, 0.2);\n            }\n          "]))));
+      return (0, _styledComponents.css)(["color:", ";", ""], _color["default"].gray5, _mediaQuery["default"].desktopAndAbove(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            border-color: ", ";\n            &::after {\n              border-color: ", ";\n            }\n          "])), _color["default"].gray10, _color["default"].gray10));
 
     case _theme["default"].article.v2.pink:
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["color:#808080;", ""], _mediaQuery["default"].desktopAndAbove(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            border-color: #d8d8d8;\n            &::after {\n              border-color: #d8d8d8;\n            }\n          "]))));
+      return (0, _styledComponents.css)(["color:", ";", ""], _color["default"].gray80, _mediaQuery["default"].desktopAndAbove(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            border-color: ", ";\n            &::after {\n              border-color: ", ";\n            }\n          "])), _color["default"].gray50, _color["default"].gray50));
   }
-}, _mediaQuery["default"].tabletAndBelow(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    margin: 0 auto 40px auto;\n    font-size: 20px;\n    font-weigth: ", ";\n\n    &:before {\n      content: '\u76F8\u95DC\u6587\u7AE0';\n    }\n  "])), _typography["default"].font.weight.bold), _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: calc(309/355*100%);\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: 513px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    flex-shrink: 0;\n    font-size: 16px;\n    font-weight: bold;\n    line-height: 1.5;\n    letter-spacing: 0.4px;\n    margin-right: auto;\n    padding-top: 5px;\n    border-width: 0.5px 0 0 0;\n    border-style: solid;\n    position: relative;\n\n    &::before {\n      content: '\u76F8\u95DC\u6587\u7AE0';\n      margin-left: 5px;\n      margin-top: 5px;\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: 0;\n      width: 1px;\n      height: 12px;\n      border-width: 0 0.5px 0 0;\n      border-style: solid;\n    }\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    width: 180px;\n    margin-right: 15px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    width: 250px;\n    margin-right: 12px;\n  "]))));
+}, _mediaQuery["default"].tabletAndBelow(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    margin: 0 auto 40px auto;\n    font-size: 20px;\n    font-weigth: ", ";\n\n    &:before {\n      content: '\u76F8\u95DC\u6587\u7AE0';\n    }\n  "])), _typography["default"].font.weight.bold), _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: calc(309/355*100%);\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: 513px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    flex-shrink: 0;\n    font-size: 16px;\n    font-weigth: ", ";\n    line-height: 1.5;\n    letter-spacing: 0.4px;\n    margin-right: auto;\n    padding-top: 5px;\n    border-width: 0.5px 0 0 0;\n    border-style: solid;\n    position: relative;\n\n    &::before {\n      content: '\u76F8\u95DC\u6587\u7AE0';\n      margin-left: 5px;\n      margin-top: 5px;\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: 0;\n      width: 1px;\n      height: 12px;\n      border-width: 0 0.5px 0 0;\n      border-style: solid;\n    }\n  "])), _typography["default"].font.weight.bold), _mediaQuery["default"].desktopOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    width: 180px;\n    margin-right: 15px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    width: 250px;\n    margin-right: 12px;\n  "]))));
 
 var screen = {
   mobile: 768,