@twreporter/react-article-components 1.4.2-rc.1 → 1.4.2-rc.2

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.2-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.4.2-rc.1...@twreporter/react-article-components@1.4.2-rc.2) (2021-10-25)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
 ## [1.4.2-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.4.2-rc.0...@twreporter/react-article-components@1.4.2-rc.1) (2021-10-20)
 
 **Note:** Version bump only for package @twreporter/react-article-components

package/lib/components/article-page.js

@@ -13,8 +13,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _body = _interopRequireDefault(require("./body"));
@@ -41,6 +39,12 @@ var _tools = _interopRequireDefault(require("./aside/tools"));
 
 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 _map = _interopRequireDefault(require("lodash/map"));
@@ -87,7 +91,7 @@ var _ = {
   merge: _merge["default"],
   throttle: _throttle["default"]
 };
-var fontFamilyCss = /*#__PURE__*/(0, _styledComponents.css)(["font-family:ff-tisa-web-pro,source-han-sans-traditional,sans-serif;"]);
+var fontFamilyCss = /*#__PURE__*/(0, _styledComponents.css)(["font-family:", ";"], _typography["default"].font.family["default"]);
 var shiftLeftCss = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;width:calc(100% + 20px);left:-10px;"]);
 
 var BorderBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -104,7 +108,7 @@ var SeprationLine = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "article-page__SeprationLine",
   componentId: "sc-1wuywdb-2"
 })(["", ""], _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n  "])), function (props) {
-  return props.visible ? (0, _styledComponents.css)(["width:100%;border-bottom:solid 1px #e2e2e2;padding-bottom:60px;"]) : (0, _styledComponents.css)(["padding-bottom:30px;"]);
+  return props.visible ? (0, _styledComponents.css)(["width:100%;border-bottom:solid 1px ", ";padding-bottom:60px;"], _color["default"].gray40) : (0, _styledComponents.css)(["padding-bottom:30px;"]);
 }));
 
 var BodyBackground = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -157,14 +161,14 @@ var BackgroundBlock = /*#__PURE__*/(0, _styledComponents["default"])(BorderBox).
 function getBackgroundBlockStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["background-color:#fadaf5;", "{background-color:#f4f4f4;}"], BodyBackground);
+      return (0, _styledComponents.css)(["background-color:", ";", "{background-color:", ";}"], _color["default"].lightPink, BodyBackground, _color["default"].gray20);
 
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["background-color:#08192d;", "{background-color:#08192d;}"], BodyBackground);
+      return (0, _styledComponents.css)(["background-color:", ";", "{background-color:", ";}"], _color["default"].darkBlue, BodyBackground, _color["default"].darkBlue);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["background-color:#f1f1f1;", "{background-color:#f1f1f1;}"], BodyBackground);
+      return (0, _styledComponents.css)(["background-color:", ";", "{background-color:", ";}"], _color["default"].gray30, BodyBackground, _color["default"].gray30);
   }
 }
 

package/lib/components/aside/metadata.js

@@ -25,6 +25,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 _category = require("../../constants/category");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
@@ -66,10 +70,10 @@ var _ = {
 };
 
 var createLine = function createLine(topOrBottom, themeName) {
-  var borderColor = '#d8d8d8';
+  var borderColor = _color["default"].gray50;
 
   if (themeName === _theme["default"].article.v2.photo) {
-    borderColor = 'rgba(255, 255, 255, 0.2)';
+    borderColor = _color["default"].gray10;
   }
 
   return (0, _styledComponents.css)(["position:relative;border-", ":0.5px solid ", ";padding-", ":10px;&::after{content:'';border-right:0.5px solid ", ";width:1px;height:12px;", ":0;right:0;position:absolute;}"], topOrBottom, borderColor, topOrBottom, borderColor, topOrBottom);
@@ -97,9 +101,9 @@ var CategoryText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var DateSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__DateSection",
   componentId: "sc-1c3910m-3"
-})(["", " font-size:14px;color:#9c9c9c;margin-left:5px;margin-top:15px;&::before{content:'\u520A\u51FA\u65E5\u671F';margin-right:10px;}"], function (props) {
+})(["", " font-size:14px;color:", ";margin-left:5px;margin-top:15px;&::before{content:'\u520A\u51FA\u65E5\u671F';margin-right:10px;}"], function (props) {
   return createLine('top', props.theme.name);
-});
+}, _color["default"].gray70);
 
 var AuthorSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorSection",
@@ -114,7 +118,7 @@ var AuthorRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var AuthorJobTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorJobTitle",
   componentId: "sc-1c3910m-6"
-})(["font-size:14px;color:#808080;margin-left:5px;padding-top:2px;line-height:1;flex-shrink:0;"]);
+})(["font-size:14px;color:", ";margin-left:5px;padding-top:2px;line-height:1;flex-shrink:0;"], _color["default"].gray80);
 
 var AuthorNames = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorNames",
@@ -129,7 +133,7 @@ var AuthorName = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var RawAuthorText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__RawAuthorText",
   componentId: "sc-1c3910m-9"
-})(["font-size:14px;color:#808080;padding-left:5px;"]);
+})(["font-size:14px;color:", ";padding-left:5px;"], _color["default"].gray80);
 
 var AngledSeparationLine = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AngledSeparationLine",
@@ -139,7 +143,7 @@ var AngledSeparationLine = /*#__PURE__*/_styledComponents["default"].div.withCon
 var TagButton = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__TagButton",
   componentId: "sc-1c3910m-11"
-})(["border-style:solid;border-width:1px;border-radius:50px;padding:5px 10px 5px 10px;font-size:14px;font-weight:normal;margin-bottom:10px;margin-right:10px;&:before{content:'#';}"]);
+})(["border-style:solid;border-width:1px;border-radius:50px;padding:5px 10px 5px 10px;font-size:14px;font-weight:", ";margin-bottom:10px;margin-right:10px;&:before{content:'#';}"], _typography["default"].font.weight.normal);
 
 var TagsSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__TagsSection",
@@ -158,14 +162,14 @@ var MetadataContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig
 function getMetadataContainerStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["", ",", "{color:#d0a67d;&:hover{border-color:#d0a67d;}}", "{border-color:#a67a44;}", "{border-color:#808080;color:#808080;&:hover{color:#fff;border-color:#fff;}}"], CategoryText, AuthorName, AngledSeparationLine, TagButton);
+      return (0, _styledComponents.css)(["", ",", "{color:", ";&:hover{border-color:", ";}}", "{border-color:", ";}", "{border-color:", ";color:", ";&:hover{color:", ";border-color:", ";}}"], CategoryText, AuthorName, _color["default"].milkTea, _color["default"].milkTea, AngledSeparationLine, _color["default"].brown, TagButton, _color["default"].gray80, _color["default"].gray80, _color["default"].white, _color["default"].white);
 
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["", ",", "{color:#355ed3;&:hover{border-color:#355ed3;}}", "{border-color:#fbafef;}", "{border-color:#808080;color:#808080;&:hover{background-color:#fff;}}"], CategoryText, AuthorName, AngledSeparationLine, TagButton);
+      return (0, _styledComponents.css)(["", ",", "{color:", ";&:hover{border-color:", ";}}", "{border-color:", ";}", "{border-color:", ";color:", ";&:hover{background-color:", ";}}"], CategoryText, AuthorName, _color["default"].blue, _color["default"].blue, AngledSeparationLine, _color["default"].pink, TagButton, _color["default"].gray80, _color["default"].gray80, _color["default"].white);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["", ",", "{color:#a67a44;&:hover{border-color:#a67a44;}}", "{border-color:#d0a67d;}", "{border-color:#808080;color:#808080;&:hover{background-color:#fff;}}"], CategoryText, AuthorName, AngledSeparationLine, TagButton);
+      return (0, _styledComponents.css)(["", ",", "{color:", ";&:hover{border-color:", ";}}", "{border-color:", ";}", "{border-color:", ";color:", ";&:hover{background-color:", ";}}"], CategoryText, AuthorName, _color["default"].brown, _color["default"].brown, AngledSeparationLine, _color["default"].milkTea, TagButton, _color["default"].gray80, _color["default"].gray80, _color["default"].white);
   }
 }
 

package/lib/components/aside/tools.js

@@ -7,14 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _bookmarkWidget = _interopRequireDefault(require("@twreporter/react-components/lib/bookmark-widget"));
-
 var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context"));
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
-
-var _aside = _interopRequireDefault(require("../../constants/prop-types/aside"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -23,6 +17,14 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _theme = _interopRequireDefault(require("../../constants/theme"));
 
+var _color = _interopRequireDefault(require("../../constants/color"));
+
+var _aside = _interopRequireDefault(require("../../constants/prop-types/aside"));
+
+var _bookmarkWidget = _interopRequireDefault(require("@twreporter/react-components/lib/bookmark-widget"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 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); }
@@ -206,7 +208,7 @@ var AddedBookmarkIcon = function AddedBookmarkIcon(props) {
 AddedBookmarkIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 36 36"
-};
+}; // @twreporter
 
 function changeFontSizeOffsetToPct(fontSizeOffset) {
   switch (fontSizeOffset) {
@@ -228,7 +230,7 @@ function changeFontSizeOffsetToPct(fontSizeOffset) {
   }
 }
 
-var iconBlockCSS = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;cursor:pointer;line-height:1;svg{width:36px;height:36px;}&::after{position:absolute;top:5px;color:#262626;font-size:14px;line-height:23px;visibility:hidden;width:100px;}&:hover{&::after{visibility:visible;}}", ""], _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &::after {\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      text-align: center;\n    }\n  "]))));
+var iconBlockCSS = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;cursor:pointer;line-height:1;svg{width:36px;height:36px;}&::after{position:absolute;top:5px;color:", ";font-size:14px;line-height:23px;visibility:hidden;width:100px;}&:hover{&::after{visibility:visible;}}", ""], _color["default"].gray95, _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &::after {\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      text-align: center;\n    }\n  "]))));
 
 var TextIconBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "tools__TextIconBlock",
@@ -267,7 +269,7 @@ var ToolsBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 }), function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["", "{svg circle:first-child{fill:rgba(255,255,255,0.08);}svg path{fill:rgba(255,255,255,0.8);}}", ",", ",", ",", "{svg circle:first-child{fill:#08192d;}svg path{fill:rgba(255,255,255,0.8);}&::after{color:rgba(255,255,255,0.8);}}", "{svg circle:not(:first-child){fill:rgba(255,255,255,0.8);}}"], ShareIconBlock, TextIconBlock, BackToTopicBlock, PrintIconBlock, BookmarkIconBlock, BackToTopicBlock);
+      return (0, _styledComponents.css)(["", "{svg circle:first-child{fill:", ";}svg path{fill:", ";}}", ",", ",", ",", "{svg circle:first-child{fill:", ";}svg path{fill:", ";}&::after{color:", ";}}", "{svg circle:not(:first-child){fill:", ";}}"], ShareIconBlock, _color["default"].gray25, _color["default"].notSoWhite, TextIconBlock, BackToTopicBlock, PrintIconBlock, BookmarkIconBlock, _color["default"].darkBlue, _color["default"].notSoWhite, _color["default"].notSoWhite, BackToTopicBlock, _color["default"].notSoWhite);
 
     default:
       return '';

package/lib/components/body/annotation.js

@@ -21,6 +21,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"));
 
 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); }
@@ -80,11 +82,11 @@ var Indicator = /*#__PURE__*/_styledComponents["default"].span.withConfig({
 var AnnotationContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "annotation__AnnotationContent",
   componentId: "sc-5e8oaw-3"
-})(["display:", ";background:#fff;font-size:", "px;line-height:2.11;letter-spacing:0.5px;color:#494949;font-weight:", ";border-width:2px 0 0 0;border-style:solid;padding:25px 11px;margin-bottom:10px;animation:", " 300ms ease;"], function (props) {
+})(["display:", ";background:", ";font-size:", "px;line-height:2.11;letter-spacing:0.5px;color:", ";font-weight:", ";border-width:2px 0 0 0;border-style:solid;padding:25px 11px;margin-bottom:10px;animation:", " 300ms ease;"], function (props) {
   return props.isExpanded ? 'block' : 'none';
-}, function (props) {
+}, _color["default"].white, function (props) {
   return props.theme.fontSizeOffset + 16;
-}, _typography["default"].font.weight.normal, slideDownAndFadeIn);
+}, _color["default"].gray85, _typography["default"].font.weight.normal, slideDownAndFadeIn);
 
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "annotation__Container",
@@ -96,14 +98,14 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 function getContainerStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["", "{color:#355ed3;}", "{border-color:#355ed3;&::before,&::after{background-color:#355ed3;}}", "{border-color:#fbafef;}"], AnnotatedText, Indicator, AnnotationContent);
+      return (0, _styledComponents.css)(["", "{color:", ";}", "{border-color:", ";&::before,&::after{background-color:", ";}}", "{border-color:", ";}"], AnnotatedText, _color["default"].blue, Indicator, _color["default"].blue, _color["default"].blue, AnnotationContent, _color["default"].pink);
 
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["", "{color:#d0a67d;}", "{border-color:#d0a67d;&::before,&::after{background-color:#d0a67d;}}", "{border-color:#d0a67d;}"], AnnotatedText, Indicator, AnnotationContent);
+      return (0, _styledComponents.css)(["", "{color:", ";}", "{border-color:", ";&::before,&::after{background-color:", ";}}", "{border-color:", ";}"], AnnotatedText, _color["default"].milkTea, Indicator, _color["default"].milkTea, _color["default"].milkTea, AnnotationContent, _color["default"].milkTea);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["", "{color:#a67a44;}", "{border-color:#d0a67d;&::before,&::after{background-color:#d0a67d;}}", "{border-color:#d0a67d;}"], AnnotatedText, Indicator, AnnotationContent);
+      return (0, _styledComponents.css)(["", "{color:", ";}", "{border-color:", ";&::before,&::after{background-color:", ";}}", "{border-color:", ";}"], AnnotatedText, _color["default"].brown, Indicator, _color["default"].milkTea, _color["default"].milkTea, AnnotationContent, _color["default"].milkTea);
   }
 }
 

package/lib/components/body/audio/control-button.js

@@ -17,6 +17,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _theme = _interopRequireDefault(require("../../../constants/theme"));
 
+var _color = _interopRequireDefault(require("../../../constants/color"));
+
 var _templateObject, _templateObject2;
 
 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); }
@@ -64,28 +66,28 @@ PlayIcon.defaultProps = {
 function getIconColor(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return '#d0a67d';
+      return _color["default"].milkTea;
 
     case _theme["default"].article.v2.pink:
-      return '#ef7ede';
+      return _color["default"].darkPink;
 
     case _theme["default"].article.v2["default"]:
     default:
-      return '#a67a44';
+      return _color["default"].brown;
   }
 }
 
 function getIconWrapperStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["background-color:#08192d;border-color:rgba(255,255,255,0.25);"]);
+      return (0, _styledComponents.css)(["background-color:", ";border-color:", ";"], _color["default"].darkBlue, _color["default"].gray10);
 
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["background-color:#f4f4f4;border-color:#d8d8d8;"]);
+      return (0, _styledComponents.css)(["background-color:", ";border-color:", ";"], _color["default"].gray20, _color["default"].gray50);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["background-color:#f1f1f1;border-color:#d8d8d8;"]);
+      return (0, _styledComponents.css)(["background-color:", ";border-color:", ";"], _color["default"].gray30, _color["default"].gray50);
   }
 }
 

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

@@ -29,6 +29,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;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -84,7 +86,7 @@ var Info = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "audio__Title",
   componentId: "sc-3l8jnv-4"
-})(["font-size:16px;font-weight:", ";line-height:1.5;letter-spacing:0.4px;", ""], _typography["default"].font.weight.bold, _mediaQuery["default"].desktopAndAbove(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    margin-top: 11px;\n  "]))));
+})(["font-size:16px;font-weight:", ";font-family:", ";line-height:1.5;letter-spacing:0.4px;", ""], _typography["default"].font.weight.bold, _typography["default"].font.family.title, _mediaQuery["default"].desktopAndAbove(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    margin-top: 11px;\n  "]))));
 
 var Desc = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "audio__Desc",
@@ -101,14 +103,14 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 function getContainerStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["border-color:rgba(255,255,255,0.2);", "{color:rgba(255,255,255,0.8);}", "{color:#fff;}", "{color:rgba(255,255,255,0.8);}"], TimeRow, Title, Desc);
+      return (0, _styledComponents.css)(["border-color:", ";", "{color:", ";}", "{color:", ";}", "{color:", ";}"], _color["default"].gray10, TimeRow, _color["default"].notSoWhite, Title, _color["default"].white, Desc, _color["default"].notSoWhite);
 
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["border-color:#d8d8d8;", "{color:#808080;}", ",", "{color:#494949;}"], TimeRow, Title, Desc);
+      return (0, _styledComponents.css)(["border-color:", ";", "{color:", ";}", ",", "{color:", ";}"], _color["default"].gray50, TimeRow, _color["default"].gray80, Title, Desc, _color["default"].gray85);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["border-color:#d8d8d8;", "{color:#808080;}", ",", "{color:#404040;}"], TimeRow, Title, Desc);
+      return (0, _styledComponents.css)(["border-color:", ";", "{color:", ";}", ",", "{color:", ";}"], _color["default"].gray50, TimeRow, _color["default"].gray80, Title, Desc, _color["default"].gray90);
   }
 }
 

package/lib/components/body/audio/seek-bar.js

@@ -17,6 +17,8 @@ var _slider = _interopRequireWildcard(require("../slider"));
 
 var _theme = _interopRequireDefault(require("../../../constants/theme"));
 
+var _color = _interopRequireDefault(require("../../../constants/color"));
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -26,23 +28,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 function getContainerStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["", "{background-color:#ef7ede;}", "{background-color:#fbafef;}"], _slider.Indicator, _slider.Progress);
+      return (0, _styledComponents.css)(["", "{background-color:", ";}", "{background-color:", ";}"], _slider.Indicator, _color["default"].darkPink, _slider.Progress, _color["default"].pink);
 
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["", "{background-color:#a67a44;}", "{background-color:#d0a67d;}"], _slider.Indicator, _slider.Progress);
+      return (0, _styledComponents.css)(["", "{background-color:", ";}", "{background-color:", ";}"], _slider.Indicator, _color["default"].brown, _slider.Progress, _color["default"].milkTea);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["", "{background-color:#a67a44;}", "{background-color:#d0a67d;}"], _slider.Indicator, _slider.Progress);
+      return (0, _styledComponents.css)(["", "{background-color:", ";}", "{background-color:", ";}"], _slider.Indicator, _color["default"].brown, _slider.Progress, _color["default"].milkTea);
   }
 }
 
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "seek-bar__Container",
   componentId: "prkj1w-0"
-})(["", " width:100%;height:4px;border-radius:2px;position:relative;", "{width:8px;height:8px;border-radius:50%;top:50%;transform:translateY(-50%);}", "{background:#d8d8d8;}"], function (props) {
+})(["", " width:100%;height:4px;border-radius:2px;position:relative;", "{width:8px;height:8px;border-radius:50%;top:50%;transform:translateY(-50%);}", "{background:", ";}"], function (props) {
   return getContainerStyles(props.theme.name);
-}, _slider.Indicator, _slider.Rail);
+}, _slider.Indicator, _slider.Rail, _color["default"].gray50);
 
 var resumePlayingAfterSeek = false;
 

package/lib/components/body/blockquote.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;
@@ -64,12 +66,12 @@ var _ = {
 function getQuoteStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["color:rgba(255,255,255,0.4);border-left:rgba(255,255,255,0.2);"]);
+      return (0, _styledComponents.css)(["color:", ";border-left:", ";"], _color["default"].gray5, _color["default"].gray10);
 
     case _theme["default"].article.v2.pink:
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["color:#808080;border-left:#afafaf;"]);
+      return (0, _styledComponents.css)(["color:", ";border-left:", ";"], _color["default"].gray80, _color["default"].gray60);
   }
 }
 

package/lib/components/body/brief.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 _map = _interopRequireDefault(require("lodash/map"));
@@ -63,17 +65,17 @@ var _ = {
 var Content = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "brief__Content",
   componentId: "sc-1fo44gc-0"
-})(["font-family:ff-tisa-web-pro,source-han-serif-tc,serif;p{color:", ";line-height:1.7;letter-spacing:0.7px;font-weight:", ";font-size:", "px;margin:0 0 1em 0;&:last-child{margin:0;}}", ""], function (props) {
+})(["font-family:", ";p{color:", ";line-height:1.7;letter-spacing:0.7px;font-weight:", ";font-size:", "px;margin:0 0 1em 0;&:last-child{margin:0;}}", ""], _typography["default"].font.family.title, function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      return 'rgba(255, 255, 255, 0.9)';
+      return _color["default"].notSoWhite;
 
     case _theme["default"].article.v2.pink:
     case _theme["default"].article.v2["default"]:
     default:
-      return '#808080';
+      return _color["default"].gray80;
   }
-}, _typography["default"].font.weight.semiBold, function (props) {
+}, _typography["default"].font.weight.bold, function (props) {
   return props.theme.fontSizeOffset + 20;
 }, _css["default"].linkChildren);
 

package/lib/components/body/centered-quote.js

@@ -21,6 +21,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"));
 
 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); }
@@ -84,14 +86,14 @@ var QuoteContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 function getQuoteContainerStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["", ",", "{color:#404040;}", "{background-color:#fbafef;}"], QuoteContent, QuoteBy, VerticalLine);
+      return (0, _styledComponents.css)(["", ",", "{color:", ";}", "{background-color:", ";}"], QuoteContent, QuoteBy, _color["default"].gray90, VerticalLine, _color["default"].pink);
 
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["", ",", "{color:rgba(255,255,255,0.7);}", "{background-color:#a67a44;}"], QuoteContent, QuoteBy, VerticalLine);
+      return (0, _styledComponents.css)(["", ",", "{color:", ";}", "{background-color:", ";}"], QuoteContent, QuoteBy, _color["default"].notSoWhite, VerticalLine, _color["default"].brown);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["", ",", "{color:#404040;}", "{background-color:#d0a67d;}"], QuoteContent, QuoteBy, VerticalLine);
+      return (0, _styledComponents.css)(["", ",", "{color:", ";}", "{background-color:", ";}"], QuoteContent, QuoteBy, _color["default"].gray90, VerticalLine, _color["default"].milkTea);
   }
 }
 

package/lib/components/body/embedded-code.js

@@ -17,6 +17,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _theme = _interopRequireDefault(require("../../constants/theme"));
 
+var _color = _interopRequireDefault(require("../../constants/color"));
+
 var _forEach = _interopRequireDefault(require("lodash/forEach"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -66,12 +68,12 @@ var Caption = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 })(["line-height:1.43;letter-spacing:0.4px;font-size:14px;color:", ";padding:15px 15px 0 15px;"], function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      return 'rgba(255, 255, 255, 0.7)';
+      return _color["default"].notSoWhite;
 
     case _theme["default"].article.v2.pink:
     case _theme["default"].article.v2["default"]:
     default:
-      return '#808080';
+      return _color["default"].gray80;
   }
 });
 

package/lib/components/body/headings.js

@@ -17,6 +17,8 @@ var _theme = _interopRequireDefault(require("../../constants/theme"));
 
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
+var _color = _interopRequireDefault(require("../../constants/color"));
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -29,12 +31,12 @@ var _ = {
 var heading = /*#__PURE__*/(0, _styledComponents.css)(["margin:0;font-weight:", ";color:", ";"], _typography["default"].font.weight.bold, function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      return 'rgba(255, 255, 255, 0.9)';
+      return _color["default"].notSoWhite;
 
     case _theme["default"].article.v2.pink:
     case _theme["default"].article.v2["default"]:
     default:
-      return '#404040';
+      return _color["default"].gray90;
   }
 });
 

package/lib/components/body/image-diff.js

@@ -21,6 +21,8 @@ var _slider = _interopRequireWildcard(require("./slider"));
 
 var _theme = _interopRequireDefault(require("../../constants/theme"));
 
+var _color = _interopRequireDefault(require("../../constants/color"));
+
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -88,26 +90,26 @@ var getResponsiveBackground = function getResponsiveBackground(imageSetPropKey)
   }));
 };
 
-var sharedStyleOfIndicatorPointer = /*#__PURE__*/(0, _styledComponents.css)(["padding-top:4px;text-align:center;font-size:12px;font-family:arial,sans-serif;display:block;position:absolute;top:0;width:24px;height:24px;background:#fff;color:", ";"], function (props) {
+var sharedStyleOfIndicatorPointer = /*#__PURE__*/(0, _styledComponents.css)(["padding-top:4px;text-align:center;font-size:12px;display:block;position:absolute;top:0;width:24px;height:24px;background:", ";color:", ";"], _color["default"].white, function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      return '#a67a44';
+      return _color["default"].brown;
 
     case _theme["default"].article.v2.pink:
-      return '#fbafef';
+      return _color["default"].pink;
 
     case _theme["default"].article.v2["default"]:
     default:
-      return '#d0a67d';
+      return _color["default"].milkTea;
   }
 });
 
 var Image = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "image-diff__Image",
   componentId: "sc-1y1eq1w-0"
-})(["overflow:hidden;position:relative;width:100%;padding-bottom:", ";>div{position:absolute;top:0;left:0;width:100%;height:100%;}", ",", "{background-repeat:no-repeat;background-size:auto 100%;background-position:left center;}", "{", "}", "{", "}", "{width:3px;background:#fff;&::after{content:\"", "\";", " left:0;transform:translateX(-100%);border-radius:0 0 0 100%;text-align:right;padding-right:3px;}&::before{content:\"", "\";", " right:0;transform:translateX(100%);border-radius:0 0 100% 0;text-align:left;padding-left:3px;}}"], function (props) {
+})(["overflow:hidden;position:relative;width:100%;padding-bottom:", ";>div{position:absolute;top:0;left:0;width:100%;height:100%;}", ",", "{background-repeat:no-repeat;background-size:auto 100%;background-position:left center;}", "{", "}", "{", "}", "{width:3px;background:", ";&::after{content:\"", "\";", " left:0;transform:translateX(-100%);border-radius:0 0 0 100%;text-align:right;padding-right:3px;}&::before{content:\"", "\";", " right:0;transform:translateX(100%);border-radius:0 0 100% 0;text-align:left;padding-left:3px;}}"], function (props) {
   return "".concat(100 * props.heightWidthRatio, "%");
-}, _slider.Progress, _slider.Rail, _slider.Progress, getResponsiveBackground('leftImageSet'), _slider.Rail, getResponsiveBackground('rightImageSet'), _slider.Indicator, unicodeToString('25C4'), sharedStyleOfIndicatorPointer, unicodeToString('25BA'), sharedStyleOfIndicatorPointer);
+}, _slider.Progress, _slider.Rail, _slider.Progress, getResponsiveBackground('leftImageSet'), _slider.Rail, getResponsiveBackground('rightImageSet'), _slider.Indicator, _color["default"].white, unicodeToString('25C4'), sharedStyleOfIndicatorPointer, unicodeToString('25BA'), sharedStyleOfIndicatorPointer);
 
 var ImageDiff = /*#__PURE__*/function (_PureComponent) {
   _inherits(ImageDiff, _PureComponent);