@twreporter/react-article-components 1.9.0 → 1.9.1-rc.1

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

@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _color = _interopRequireDefault(require("../../../constants/color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -42,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:", ";position:relative;cursor:", ";"], _color["default"].gray55, function (props) {
+})(["width:100%;height:100%;background:", ";position:relative;cursor:", ";"], _color.colorGrayscale.gray400, function (props) {
   return props.isHeld ? 'grabbing' : 'pointer';
 });
 
@@ -72,7 +72,7 @@ var Indicator = /*#__PURE__*/_styledComponents["default"].div.attrs(function (_r
 }).withConfig({
   displayName: "slider__Indicator",
   componentId: "sc-1pt06t8-2"
-})(["width:10px;height:100%;background:black;position:absolute;top:0;cursor:", ";"], function (props) {
+})(["width:10px;height:100%;background:", ";position:absolute;top:0;cursor:", ";"], _color.colorGrayscale.black, function (props) {
   return props.isHeld ? 'grabbing' : 'grab';
 });
 

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

@@ -27,10 +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 _color = require("@twreporter/core/lib/constants/color");
+
 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); }
@@ -274,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:", ";}", "{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);
+      return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}", "{background-color:", ";}"], PrevButton, _color.colorGrayscale.gray400, ImageNumberCircle, _color.colorSupportive.main, _color.COLOR_PINK_ARTICLE.darkBlue, ImageNumber, _color.COLOR_PINK_ARTICLE.darkBlue, SlideMask, _color.colorSupportive.main);
 
     case _theme["default"].article.v2.pink:
-      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);
+      return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}", "{background-color:", ";}"], PrevButton, _color.colorGrayscale.gray300, ImageNumberCircle, _color.COLOR_PINK_ARTICLE.pink, _color.colorGrayscale.white, ImageNumber, _color.colorGrayscale.white, SlideMask, _color.COLOR_PINK_ARTICLE.lightBlue);
 
     case _theme["default"].article.v2["default"]:
     default:
-      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);
+      return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}", "{background-color:", ";}"], PrevButton, _color.colorGrayscale.gray300, ImageNumberCircle, _color.colorSupportive.main, _color.colorGrayscale.white, ImageNumber, _color.colorGrayscale.white, SlideMask, _color.colorSupportive.main);
   }
 }
 /**

package/lib/components/donation-box.js

@@ -17,12 +17,12 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _donationLinkAnchor = require("@twreporter/core/lib/constants/donation-link-anchor");
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 var _css = _interopRequireDefault(require("../constants/css"));
 
 var _typography = _interopRequireDefault(require("../constants/typography"));
 
-var _color = _interopRequireDefault(require("../constants/color"));
-
 var _templateObject, _templateObject2, _templateObject3;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -62,7 +62,7 @@ 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:", ";border-left:solid 1px ", ";", ""], _color["default"].white, function (props) {
+})(["margin:60px auto 55px auto;padding:40px 30px 30px 30px;width:502px;min-height:284px;background:", ";border-left:solid 1px ", ";", ""], _color.colorGrayscale.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  "]))));
 
@@ -71,17 +71,17 @@ var Title = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   componentId: "sc-1uszvr7-1"
 })(["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;
-}, _color["default"].white, _typography["default"].font.weight.bold, _color["default"].gray95, _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin-bottom: 18px;\n  "]))));
+}, _color.colorGrayscale.white, _typography["default"].font.weight.bold, _color.colorGrayscale.gray900, _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:", ";margin-bottom:0.5em;&:last-of-type{margin-bottom:0;}", ""], _color["default"].gray95, _css["default"].linkChildren);
+})(["font-size:16px;line-height:1.75;color:", ";margin-bottom:0.5em;&:last-of-type{margin-bottom:0;}", ""], _color.colorGrayscale.gray900, _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:", ";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) {
+})(["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.colorGrayscale.black, _color.colorGrayscale.white, _typography["default"].font.weight.normal, function (props) {
   return props.theme.colors.secondary.accent;
 });
 

package/lib/components/leading/fullscreen.js

@@ -15,14 +15,14 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _imgWithPlaceholder = _interopRequireDefault(require("../img-with-placeholder"));
 
-var _color = _interopRequireDefault(require("../../constants/color"));
-
 var _leading = _interopRequireDefault(require("../../constants/prop-types/leading"));
 
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
@@ -70,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:", ";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  "]))));
+})(["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.colorGrayscale.white, _color.colorOpacity['black_0.5'], _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:", ";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  "]))));
+})(["color:", ";text-shadow:0 2px 4px ", ";font-size:40px;font-weight:", ";", " ", ""], _color.colorGrayscale.white, _color.colorOpacity['black_0.5'], _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:", ";color:", ";font-size:16px;font-weight:", ";"], _color["default"].paleBrown, _color["default"].white, _typography["default"].font.weight.bold);
+})(["display:inline-block;padding:5px;background-color:", "7f;color:", ";font-size:16px;font-weight:", ";"], _color.colorSupportive.heavy, _color.colorGrayscale.white, _typography["default"].font.weight.bold);
 
 var RightArrow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "fullscreen__RightArrow",
   componentId: "sc-63dapi-5"
-})(["border:solid ", ";border-width:0 2px 2px 0;display:inline-block;padding:4px;transform:rotate(-45deg);margin:0 10px 1px 3px;"], _color["default"].white);
+})(["border:solid ", ";border-width:0 2px 2px 0;display:inline-block;padding:4px;transform:rotate(-45deg);margin:0 10px 1px 3px;"], _color.colorGrayscale.white);
 
 var FigureBlock = /*#__PURE__*/_styledComponents["default"].figure.withConfig({
   displayName: "fullscreen__FigureBlock",
@@ -95,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,", ",", " );"], _color["default"].transparent, _color["default"].black);
+})(["position:absolute;height:50%;width:100%;bottom:0;background-image:linear-gradient( to bottom,transparent,", " );"], _color.colorGrayscale.black);
 
 var DisplayOnPortrait = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "fullscreen__DisplayOnPortrait",

package/lib/components/leading/normal.js

@@ -19,12 +19,12 @@ var _leading = _interopRequireDefault(require("../../constants/prop-types/leadin
 
 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 _color = require("@twreporter/core/lib/constants/color");
+
 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, _templateObject20, _templateObject21, _templateObject22;
@@ -110,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:", ";", "{color:", ";}", "{color:", ";border-color:", ";}", ",", "{color:", ";}"], _color["default"].darkBlue, FigCaption, _color["default"].gray5, Topic, _color["default"].milkTea, _color["default"].brown, Subtitle, Title, _color["default"].notSoWhite);
+      return (0, _styledComponents.css)(["background-color:", ";", "{color:", ";}", "{color:", ";border-color:", ";}", ",", "{color:", ";}"], _color.COLOR_PINK_ARTICLE.darkBlue, FigCaption, _color.colorGrayscale.gray600, Topic, _color.colorSupportive.main, _color.colorSupportive.heavy, Subtitle, Title, _color.colorGrayscale.gray300);
 
     case _theme["default"].article.v2["default"]:
     default:
-      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);
+      return (0, _styledComponents.css)(["background-color:", ";", "{color:", ";}", "{color:", ";border-color:", ";}", ",", "{color:", ";}"], _color.colorGrayscale.gray100, FigCaption, _color.colorGrayscale.gray600, Topic, _color.colorSupportive.heavy, _color.colorSupportive.main, Subtitle, Title, _color.colorGrayscale.gray800);
   }
 }
 

package/lib/components/leading/pink.js

@@ -17,12 +17,12 @@ var _imgWithPlaceholder = _interopRequireDefault(require("../img-with-placeholde
 
 var _leading = _interopRequireDefault(require("../../constants/prop-types/leading"));
 
-var _color = _interopRequireDefault(require("../../constants/color"));
-
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
@@ -99,23 +99,23 @@ var TopicTextBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "sc-1gnwclr-3"
 })(["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;
-}, _color["default"].white, function (props) {
+}, _color.colorGrayscale.white, function (props) {
   return props.theme.colors.primary.text;
-}, _typography["default"].font.weight.bold, _color["default"].white);
+}, _typography["default"].font.weight.bold, _color.colorGrayscale.white);
 
 var TitleTextBlock = /*#__PURE__*/_styledComponents["default"].h1.withConfig({
   displayName: "pink__TitleTextBlock",
   componentId: "sc-1gnwclr-4"
 })(["color:", ";font-weight:", ";font-family:", ";padding-left:10px;margin:0;", " ", " ", ""], function (props) {
   return props.theme.colors.primary.text;
-}, _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));
+}, _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.colorGrayscale.white, _color.colorGrayscale.white, _color.colorGrayscale.white));
 
 var SubtitleTextBlock = /*#__PURE__*/_styledComponents["default"].h2.withConfig({
   displayName: "pink__SubtitleTextBlock",
   componentId: "sc-1gnwclr-5"
 })(["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;
-}, _typography["default"].font.weight.bold, _mediaQuery["default"].desktopAndAbove(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    > span {\n      background-color: ", ";\n    }\n  "])), _color["default"].white));
+}, _typography["default"].font.weight.bold, _mediaQuery["default"].desktopAndAbove(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    > span {\n      background-color: ", ";\n    }\n  "])), _color.colorGrayscale.white));
 
 var FigureBlock = /*#__PURE__*/_styledComponents["default"].figure.withConfig({
   displayName: "pink__FigureBlock",

package/lib/components/license.js

@@ -13,9 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _theme = _interopRequireDefault(require("../constants/theme"));
-
-var _color = _interopRequireDefault(require("../constants/color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -44,17 +42,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var Text = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   displayName: "license__Text",
   componentId: "sc-1vtq5dr-0"
-})(["margin:0;color:", ";font-size:16px;line-height:1.38;"], function (props) {
-  switch (props.theme.name) {
-    case _theme["default"].article.v2.photo:
-      return _color["default"].gray5;
-
-    case _theme["default"].article.v2.pink:
-    case _theme["default"].article.v2["default"]:
-    default:
-      return _color["default"].gray80;
-  }
-});
+})(["margin:0;color:", ";font-size:16px;line-height:1.38;"], _color.colorGrayscale.gray600);
 
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "license__Container",

package/lib/components/related/card.js

@@ -25,7 +25,7 @@ var _theme = _interopRequireDefault(require("../../constants/theme"));
 
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
-var _color = _interopRequireDefault(require("../../constants/color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
@@ -82,7 +82,7 @@ var Desc = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   return props.isHovered ? 'visible' : 'hidden';
 }, function (props) {
   return props.isHovered ? 'static' : 'absolute';
-}, _color["default"].gray80);
+}, _color.colorGrayscale.gray600);
 
 var Thumbnail = /*#__PURE__*/_styledComponents["default"].figure.withConfig({
   displayName: "card__Thumbnail",
@@ -112,7 +112,7 @@ var Title = /*#__PURE__*/_styledComponents["default"].h3.withConfig({
 var PublishedDate = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   displayName: "card__PublishedDate",
   componentId: "uveoih-8"
-})(["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  "]))));
+})(["margin:0;font-size:12px;line-height:2;color:", ";", " ", ""], _color.colorGrayscale.gray500, _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",
@@ -126,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:", ";}", "{color:", ";}", "{background-color:", ";}"], Category, _color["default"].milkTea, Title, _color["default"].notSoWhite, StyledImg, _color["default"].gray10);
+      return (0, _styledComponents.css)(["", "{color:", ";}", "{color:", ";}", "{background-color:", ";}"], Category, _color.colorSupportive.main, Title, _color.colorGrayscale.gray300, StyledImg, _color.colorGrayscale.gray400);
 
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["", "{color:", ";}", "{color:", ";}", "{background-color:", ";}"], Category, _color["default"].darkPink, Title, _color["default"].gray90, StyledImg, _color["default"].gray40);
+      return (0, _styledComponents.css)(["", "{color:", ";}", "{color:", ";}", "{background-color:", ";}"], Category, _color.COLOR_PINK_ARTICLE.darkPink, Title, _color.colorGrayscale.gray800, StyledImg, _color.colorGrayscale.gray200);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["", "{color:", ";}", "{color:", ";}", "{background-color:", ";}"], Category, _color["default"].brown, Title, _color["default"].gray90, StyledImg, _color["default"].gray40);
+      return (0, _styledComponents.css)(["", "{color:", ";}", "{color:", ";}", "{background-color:", ";}"], Category, _color.colorSupportive.heavy, Title, _color.colorGrayscale.gray800, StyledImg, _color.colorGrayscale.gray200);
   }
 }
 

package/lib/components/related/index.js

@@ -19,10 +19,10 @@ 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 _color = require("@twreporter/core/lib/constants/color");
+
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -84,12 +84,12 @@ var Descriptor = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 })(["", " ", " ", " ", " ", " ", " ", ""], function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      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));
+      return (0, _styledComponents.css)(["color:", ";", ""], _color.colorGrayscale.gray600, _mediaQuery["default"].desktopAndAbove(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            border-color: ", ";\n            &::after {\n              border-color: ", ";\n            }\n          "])), _color.colorGrayscale.gray400, _color.colorGrayscale.gray400));
 
     case _theme["default"].article.v2.pink:
     case _theme["default"].article.v2["default"]:
     default:
-      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));
+      return (0, _styledComponents.css)(["color:", ";", ""], _color.colorGrayscale.gray600, _mediaQuery["default"].desktopAndAbove(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            border-color: ", ";\n            &::after {\n              border-color: ", ";\n            }\n          "])), _color.colorGrayscale.gray300, _color.colorGrayscale.gray300));
   }
 }, _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  "]))));
 

package/lib/components/related/list.js

@@ -21,14 +21,14 @@ var _card = _interopRequireDefault(require("./card"));
 
 var _theme = _interopRequireDefault(require("../../constants/theme"));
 
-var _color = _interopRequireDefault(require("../../constants/color"));
-
 var _related = _interopRequireDefault(require("../../constants/prop-types/related"));
 
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
@@ -76,12 +76,12 @@ var fadeIn = /*#__PURE__*/(0, _styledComponents.keyframes)(["from{opacity:0;}to{
 var selectButtonColors = function selectButtonColors(theme) {
   switch (theme) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["color:", ";background-color:", ";&:hover{color:", ";background-color:", ";}"], _color["default"].notSoWhite, _color["default"].gray25, _color["default"].white, _color["default"].gray10);
+      return (0, _styledComponents.css)(["color:", ";background-color:", ";&:hover{color:", ";background-color:", ";}"], _color.colorGrayscale.gray300, _color.colorGrayscale.gray200, _color.colorGrayscale.white, _color.colorGrayscale.gray400);
 
     case _theme["default"].article.v2.pink:
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["color:", ";background-color:", ";&:hover{color:", ";background-color:", ";}"], _color["default"].gray80, _color["default"].gray45, _color["default"].gray90, _color["default"].gray53);
+      return (0, _styledComponents.css)(["color:", ";background-color:", ";&:hover{color:", ";background-color:", ";}"], _color.colorGrayscale.gray600, _color.colorGrayscale.gray300, _color.colorGrayscale.gray800, _color.colorGrayscale.gray400);
   }
 };
 
@@ -105,10 +105,10 @@ var Item = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 })(["border-style:solid;border-width:0 0.5px 0.5px 0;border-color:", ";margin-bottom:40px;animation:", " 400ms ease-in-out;", " ", " ", " ", " ", ""], function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      return _color["default"].gray10;
+      return _color.colorGrayscale.gray400;
 
     default:
-      return _color["default"].gray50;
+      return _color.colorGrayscale.gray300;
   }
 }, fadeIn, _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    border-width: 0 0 0.5px 0;\n    margin: 0 auto;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    flex: 0 0 ", ";\n  "])), _mockup["default"].mobile.item.width), _mediaQuery["default"].tabletOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    flex: 0 0 ", "px;\n  "])), _mockup["default"].tablet.item.width), _mediaQuery["default"].desktopOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    margin-right: ", "px;\n    flex: 0 0 ", "px;\n  "])), _mockup["default"].desktop.item.margin.right, _mockup["default"].desktop.item.width), _mediaQuery["default"].hdOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    margin-right: ", "px;\n    flex: 0 0 ", "px;\n  "])), _mockup["default"].hd.item.margin.right, _mockup["default"].hd.thumbnail.width));
 

package/lib/components/separation-curve.js

@@ -15,7 +15,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _theme = _interopRequireDefault(require("../constants/theme"));
 
-var _color = _interopRequireDefault(require("../constants/color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 var _templateObject;
 
@@ -29,14 +29,14 @@ var Separation = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 })(["width:192px;margin:40px auto;", " >svg>path{fill:", ";}"], _mediaQuery["default"].hdOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 270px;\n  "]))), function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.pink:
-      return _color["default"].pink;
+      return _color.COLOR_PINK_ARTICLE.pink;
 
     case _theme["default"].article.v2.photo:
-      return _color["default"].brown;
+      return _color.colorSupportive.heavy;
 
     case _theme["default"].article.v2["default"]:
     default:
-      return _color["default"].milkTea;
+      return _color.colorSupportive.main;
   }
 });
 

package/lib/constants/css.js

@@ -11,19 +11,19 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _typography = _interopRequireDefault(require("./typography"));
 
-var _color = _interopRequireDefault(require("./color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function getParagraphTextStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["color:", ";"], _color["default"].notSoWhite);
+      return (0, _styledComponents.css)(["color:", ";"], _color.colorGrayscale.gray300);
 
     case _theme["default"].article.v2.pink:
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["color:", ";"], _color["default"].gray90);
+      return (0, _styledComponents.css)(["color:", ";"], _color.colorGrayscale.gray800);
   }
 }
 
@@ -36,14 +36,14 @@ var paragraphText = /*#__PURE__*/(0, _styledComponents.css)(["", " font-size:",
 function getLinkChildrenStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:", ";text-decoration:none;border-bottom:1px solid ", ";}a:hover{border-color:", ";}"], _color["default"].milkTea, _color["default"].gray10, _color["default"].milkTea);
+      return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:", ";text-decoration:none;border-bottom:1px solid ", ";}a:hover{border-color:", ";}"], _color.colorSupportive.main, _color.colorGrayscale.gray400, _color.colorSupportive.main);
 
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:", ";text-decoration:none;border-bottom:1px solid ", ";}a:hover{border-color:", ";}"], _color["default"].blue, _color["default"].gray50, _color["default"].blue);
+      return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:", ";text-decoration:none;border-bottom:1px solid ", ";}a:hover{border-color:", ";}"], _color.COLOR_PINK_ARTICLE.blue, _color.colorGrayscale.gray300, _color.COLOR_PINK_ARTICLE.blue);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:", ";text-decoration:none;border-bottom:1px solid ", ";}a:hover{border-color:", ";}"], _color["default"].brown, _color["default"].gray50, _color["default"].brown);
+      return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:", ";text-decoration:none;border-bottom:1px solid ", ";}a:hover{border-color:", ";}"], _color.colorSupportive.heavy, _color.colorGrayscale.gray300, _color.colorSupportive.heavy);
   }
 }