@twreporter/react-components 8.6.0-rc.1 → 8.6.1-rc.0

package/CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.6.1-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.6.0...@twreporter/react-components@8.6.1-rc.0) (2021-10-27)
+
+
+### Bug Fixes
+
+* **react-components:** update footer branding text ([06f7800](https://github.com/twreporter/twreporter-npm-packages/commit/06f780028ba2e2c6442e9f118bc3d2ae525ebae3))
+
+
+
+
+
+# [8.6.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.6.0-rc.3...@twreporter/react-components@8.6.0) (2021-10-26)
+
+**Note:** Version bump only for package @twreporter/react-components
+
+
+
+
+
+# [8.6.0-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.6.0-rc.2...@twreporter/react-components@8.6.0-rc.3) (2021-10-26)
+
+
+### Bug Fixes
+
+* fix defect ([7896d12](https://github.com/twreporter/twreporter-npm-packages/commit/7896d12ca192ea1d552574ca2cccf07990cdffd0)), closes [#170](https://github.com/twreporter/twreporter-npm-packages/issues/170) [#171](https://github.com/twreporter/twreporter-npm-packages/issues/171) [#172](https://github.com/twreporter/twreporter-npm-packages/issues/172) [#173](https://github.com/twreporter/twreporter-npm-packages/issues/173) [#177](https://github.com/twreporter/twreporter-npm-packages/issues/177) [#178](https://github.com/twreporter/twreporter-npm-packages/issues/178) [#179](https://github.com/twreporter/twreporter-npm-packages/issues/179)
+
+
+
+
+
+# [8.6.0-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.6.0-rc.1...@twreporter/react-components@8.6.0-rc.2) (2021-10-25)
+
+
+### Bug Fixes
+
+* **react-components:** fix spec change ([29468e1](https://github.com/twreporter/twreporter-npm-packages/commit/29468e1b10da13a1a506b5625f957bc5280e9960))
+* **react-components, universal-header:** update twreporter logo ([d2324cd](https://github.com/twreporter/twreporter-npm-packages/commit/d2324cd93ea8e66621ce7aa7969e6500ed77c2a3))
+
+
+
+
+
 # [8.6.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.6.0-rc.0...@twreporter/react-components@8.6.0-rc.1) (2021-10-20)
 
 

package/lib/bookmark-list/bookmark.js

@@ -11,20 +11,22 @@ var _date = require("@twreporter/core/lib/utils/date");
 
 var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
 
-var _propTypes = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
-
 var _customizedLink = _interopRequireDefault(require("./customized-link"));
 
 var _imageWrapper = _interopRequireDefault(require("./image-wrapper"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
-var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _color = _interopRequireDefault(require("./constants/color"));
+
+var _propTypes2 = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
+
 var _truncate = _interopRequireDefault(require("@twreporter/core/lib/utils/truncate"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -107,7 +109,7 @@ var styles = {
 var BookmarkIconComp = /*#__PURE__*/(0, _styledComponents["default"])(BookmarkIcon).withConfig({
   displayName: "bookmark__BookmarkIconComp",
   componentId: "sc-1y8p1w5-0"
-})(["&:hover{path{fill:#99000a;transition:fill 200ms linear;}}"]);
+})(["&:hover{path{fill:", ";transition:fill 200ms linear;}}"], _color["default"].darkRed);
 
 var BookmarkFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmark__BookmarkFrame",
@@ -117,7 +119,7 @@ var BookmarkFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var BookmarkContentContainer = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   displayName: "bookmark__BookmarkContentContainer",
   componentId: "sc-1y8p1w5-2"
-})(["position:relative;width:100%;background-color:#ffffff;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;", " margin:0;:last-of-type{margin-bottom:0;}"], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex-direction: column;\n    align-items: center;\n  "]))));
+})(["position:relative;width:100%;background-color:", ";display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;", " margin:0;:last-of-type{margin-bottom:0;}"], _color["default"].white, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex-direction: column;\n    align-items: center;\n  "]))));
 
 var ImageBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmark__ImageBox",
@@ -149,7 +151,7 @@ var TextBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Category = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   displayName: "bookmark__Category",
   componentId: "sc-1y8p1w5-6"
-})(["font-size:16px;", " line-height:1;color:#c4333e;"], _mediaQuery["default"].mobileOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-size: 14px;\n  "]))));
+})(["font-size:16px;", " line-height:1;color:", ";"], _mediaQuery["default"].mobileOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-size: 14px;\n  "]))), _color["default"].red);
 
 var FirstRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmark__FirstRow",
@@ -159,12 +161,12 @@ var FirstRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmark__Title",
   componentId: "sc-1y8p1w5-8"
-})(["font-size:27px;line-height:1.41;margin-bottom:18px;", " font-weight:", ";color:#3e3f3f;flex-basis:auto;flex-grow:0;"], _mediaQuery["default"].mobileOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    font-size: 20px;\n    line-height: 1.55;\n    margin-bottom: 0;\n  "]))), _fontWeight.sourceHanSansTC.bold);
+})(["font-size:27px;line-height:1.41;margin-bottom:18px;", " font-weight:", ";color:", ";flex-basis:auto;flex-grow:0;"], _mediaQuery["default"].mobileOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    font-size: 20px;\n    line-height: 1.55;\n    margin-bottom: 0;\n  "]))), _fontWeight.sourceHanSansTC.bold, _color["default"].darkGray);
 
 var Description = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmark__Description",
   componentId: "sc-1y8p1w5-9"
-})(["width:98%;color:#3e3f3f;font-size:18px;", ";flex-basis:auto;flex-grow:0;", ""], (0, _truncate["default"])('relative', 1.57, 2, '#ffffff', 'justify'), _mediaQuery["default"].mobileOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    flex-basis: 0;\n    display: none;\n  "]))));
+})(["width:98%;color:", ";font-size:18px;", ";flex-basis:auto;flex-grow:0;", ""], _color["default"].darkGray, (0, _truncate["default"])('relative', 1.57, 2, _color["default"].white, 'justify'), _mediaQuery["default"].mobileOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    flex-basis: 0;\n    display: none;\n  "]))));
 
 var LastRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmark__LastRow",
@@ -174,12 +176,12 @@ var LastRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var ReadMore = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmark__ReadMore",
   componentId: "sc-1y8p1w5-11"
-})(["font-size:14px;text-align:left;color:#8c8c8c;cursor:pointer;display:inline-block;"]);
+})(["font-size:14px;text-align:left;color:", ";cursor:pointer;display:inline-block;"], _color["default"].gray);
 
 var Date = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   displayName: "bookmark__Date",
   componentId: "sc-1y8p1w5-12"
-})(["vertical-align:top;font-size:16px;font-weight:", ";color:#4a4a4a;float:right;"], _fontWeight.sourceHanSansTC.light);
+})(["vertical-align:top;font-size:16px;font-weight:", ";color:", ";float:right;"], _fontWeight.sourceHanSansTC.light, _color["default"].gray);
 
 var RemoveBookMarkBtn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmark__RemoveBookMarkBtn",
@@ -246,6 +248,6 @@ var Bookmark = /*#__PURE__*/function (_React$PureComponent) {
 exports["default"] = Bookmark;
 
 _defineProperty(Bookmark, "propTypes", {
-  bookmark: _propTypes["default"].bookmark.isRequired,
-  handleDelete: _propTypes2["default"].func.isRequired
+  bookmark: _propTypes2["default"].bookmark.isRequired,
+  handleDelete: _propTypes["default"].func.isRequired
 });

package/lib/bookmark-list/constants/color.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  white: '#ffffff',
+  red: '#c40c23',
+  darkRed: '#99000a',
+  gray: '#9c9c9c',
+  darkGray: '#404040'
+};
+exports["default"] = _default;

package/lib/confirmation/constants/color.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  gray: 'rgba(115, 115, 115, 0.8)',
+  darkGray: '#3e3f3f',
+  lightRed: '#e60013',
+  red: '#c40c23'
+};
+exports["default"] = _default;

package/lib/confirmation/index.js

@@ -15,6 +15,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _color = _interopRequireDefault(require("./constants/color"));
+
 var _templateObject, _templateObject2, _templateObject3;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -44,7 +46,7 @@ WarningSign.defaultProps = {
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "confirmation__Container",
   componentId: "ypuqpw-0"
-})(["width:100%;height:100vh;position:fixed;top:0;left:0;z-index:5;background-color:rgba(115,115,115,0.8);"]);
+})(["width:100%;height:100vh;position:fixed;top:0;left:0;z-index:5;background-color:", ";"], _color["default"].gray);
 
 var Dialog = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "confirmation__Dialog",
@@ -71,11 +73,11 @@ var FunctionButton = /*#__PURE__*/_styledComponents["default"].button.withConfig
 var Cancel = /*#__PURE__*/(0, _styledComponents["default"])(FunctionButton).withConfig({
   displayName: "confirmation__Cancel",
   componentId: "ypuqpw-5"
-})(["border:solid 2px #3e3f3f;margin-right:25px;"]);
+})(["border:solid 2px ", ";margin-right:25px;"], _color["default"].darkGray);
 var Confirm = /*#__PURE__*/(0, _styledComponents["default"])(FunctionButton).withConfig({
   displayName: "confirmation__Confirm",
   componentId: "ypuqpw-6"
-})(["border:solid 2px #e60013;color:#c7000d;"]);
+})(["border:solid 2px ", ";color:", ";"], _color["default"].lightRed, _color["default"].red);
 
 var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "confirmation__IconContainer",

package/lib/error/constants/color.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  black: '#000000',
+  white: '#ffffff'
+};
+exports["default"] = _default;

package/lib/error/message.js

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
+var _color = _interopRequireDefault(require("./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;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -463,7 +465,7 @@ var ErrorMessageBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig
 var ChineseText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "message__ChineseText",
   componentId: "sc-14dhvpe-2"
-})(["position:absolute;", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    top: 0;\n    left: 0;\n    width: 13px;\n    font-size: 13px;\n    line-height: 1.62;\n    text-align: left;\n    color: #000000;\n    font-weight: 900;\n    ::after {\n      content: \"\";\n      display: block;\n      width: 14px;\n      height: 1px;\n      background-color: #000000;\n      position: relative;\n      top: 6px;\n      left: 7px;\n    }\n  "]))), _mediaQuery["default"].tabletAndAbove(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    top: 0;\n    left: 0;\n    width: 18px;\n    font-size: 18px;\n    line-height: 1.5;\n    text-align: left;\n    color: #000000;\n    font-weight: 900;\n    ::after {\n      content: \"\";\n      display: block;\n      width: 20px;\n      height: 1px;\n      background-color: #000000;\n      position: relative;\n      top: 19px;\n      left: 11px;\n    }\n  "]))));
+})(["position:absolute;", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    top: 0;\n    left: 0;\n    width: 13px;\n    font-size: 13px;\n    line-height: 1.62;\n    text-align: left;\n    color: ", ";\n    font-weight: 900;\n    ::after {\n      content: \"\";\n      display: block;\n      width: 14px;\n      height: 1px;\n      background-color: ", ";\n      position: relative;\n      top: 6px;\n      left: 7px;\n    }\n  "])), _color["default"].black, _color["default"].black), _mediaQuery["default"].tabletAndAbove(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    top: 0;\n    left: 0;\n    width: 18px;\n    font-size: 18px;\n    line-height: 1.5;\n    text-align: left;\n    color: ", ";\n    font-weight: 900;\n    ::after {\n      content: \"\";\n      display: block;\n      width: 20px;\n      height: 1px;\n      background-color: ", ";\n      position: relative;\n      top: 19px;\n      left: 11px;\n    }\n  "])), _color["default"].black, _color["default"].black));
 
 var BuildingStyled = /*#__PURE__*/(0, _styledComponents["default"])(Building).withConfig({
   displayName: "message__BuildingStyled",
@@ -482,7 +484,7 @@ var EngishWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var BackToHomeBtn = /*#__PURE__*/_styledComponents["default"].a.withConfig({
   displayName: "message__BackToHomeBtn",
   componentId: "sc-14dhvpe-6"
-})(["display:block;cursor:pointer;text-align:center;background-color:#000000;color:#FFFFFF;text-decoration:none;&:hover,&:active,&:focus,&:visited{color:#FFFFFF;text-decoration:none;}", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    margin: 35px auto;\n    width: 87.5%;\n    height: 76px;\n    line-height: 76px;\n    position: relative;\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 0.2px;\n  "]))), _mediaQuery["default"].tabletAndAbove(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    width: 229px;\n    height: 76px;\n    line-height: 76px;    \n    position: absolute;\n    bottom: 0;\n    left: 55px;\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 0.2px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    left: 120px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    left: 19%;\n  "]))));
+})(["display:block;cursor:pointer;text-align:center;background-color:", ";color:", ";text-decoration:none;&:hover,&:active,&:focus,&:visited{color:", ";text-decoration:none;}", " ", " ", " ", ""], _color["default"].black, _color["default"].white, _color["default"].white, _mediaQuery["default"].mobileOnly(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    margin: 35px auto;\n    width: 87.5%;\n    height: 76px;\n    line-height: 76px;\n    position: relative;\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 0.2px;\n  "]))), _mediaQuery["default"].tabletAndAbove(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    width: 229px;\n    height: 76px;\n    line-height: 76px;    \n    position: absolute;\n    bottom: 0;\n    left: 55px;\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 0.2px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    left: 120px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    left: 19%;\n  "]))));
 
 var NumberImageWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "message__NumberImageWrapper",

package/lib/footer/constants/color.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  white: '#ffffff',
+  red: '#c40c23',
+  lightGray: '#d8d8d8',
+  gray: '#9c9c9c',
+  notSoBlack: '#262626',
+  gold: '#a67a44'
+};
+exports["default"] = _default;

package/lib/footer/constants/font.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  weight: {
+    normal: 400,
+    bold: 700
+  },
+  family: {
+    title: 'merriweather, source-han-serif-tc, serif',
+    "default": 'rosario, source-han-sans-traditional, sans-serif'
+  }
+};
+exports["default"] = _default;

package/lib/footer/constants/styles.js

@@ -7,9 +7,9 @@ exports["default"] = void 0;
 var _default = {
   reporterLogo: {
     width: {
-      mobile: 300,
+      mobile: 250,
       // px
-      desktop: 258,
+      desktop: 210,
       // px
       hd: 300 // px
 

package/lib/footer/content.js

@@ -19,9 +19,11 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styles = _interopRequireDefault(require("./constants/styles"));
 
-var _siteMeta = require("@twreporter/core/lib/constants/site-meta");
+var _color = _interopRequireDefault(require("./constants/color"));
+
+var _font = _interopRequireDefault(require("./constants/font"));
 
-var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+var _siteMeta = require("@twreporter/core/lib/constants/site-meta");
 
 var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
 
@@ -31,7 +33,7 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+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;
 
 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); }
 
@@ -92,11 +94,6 @@ function getItemGroups(mainOrigin) {
     link: "".concat(mainOrigin).concat(_entityPath["default"].article, "about-us-questions"),
     target: '_blank'
   }], [{
-    slug: 'media-center',
-    text: '最新消息',
-    link: "".concat(mainOrigin).concat(_entityPath["default"].topics, "media-center"),
-    target: '_blank'
-  }, {
     slug: 'privacy',
     text: '隱私政策',
     link: "".concat(mainOrigin).concat(_entityPath["default"].article, "privacy-footer"),
@@ -111,6 +108,11 @@ function getItemGroups(mainOrigin) {
     text: '許可協議',
     link: "".concat(mainOrigin).concat(_entityPath["default"].article, "license-footer"),
     target: '_blank'
+  }, {
+    slug: 'media-center',
+    text: '基金會新聞',
+    link: "".concat(mainOrigin).concat(_entityPath["default"].topics, "media-center"),
+    target: '_blank'
   }, {
     slug: 'impact-and-annual-report',
     text: '影響力報告',
@@ -128,12 +130,12 @@ function getItemGroups(mainOrigin) {
     target: '_blank'
   }, {
     slug: 'twreporter-lab',
-    text: '開放實驗室',
+    text: '報導者開放實驗室',
     link: 'https://medium.com/twreporter',
     target: '_blank'
   }, {
     slug: 'branding-design',
-    text: '品牌辨識系統',
+    text: '品牌設計規範',
     link: 'https://twreporter.gitbook.io/the-reporter-brand-guidelines/-Mkp5ci3KEsre0wOPYer/',
     target: '_blank',
     newFlag: true
@@ -143,7 +145,7 @@ function getItemGroups(mainOrigin) {
 var Intro = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   displayName: "content__Intro",
   componentId: "sc-12bve65-0"
-})(["width:100%;font-size:12px;font-weight:", ";line-height:1.5;letter-spacing:0.4px;color:#9c9c9c;", ""], _fontWeight.sourceHanSansTC.medium, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-size: 16px;\n    line-height: 1.63;\n    letter-spacing: 0.6px;\n  "]))));
+})(["width:100%;font-size:12px;font-weight:", ";line-height:1.5;letter-spacing:0.4px;color:", ";", ""], _font["default"].weight.normal, _color["default"].gray, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-size: 16px;\n    line-height: 1.63;\n    letter-spacing: 0.6px;\n  "]))));
 
 var ContentRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "content__ContentRow",
@@ -162,31 +164,31 @@ var IntroColumn = /*#__PURE__*/(0, _styledComponents["default"])(Column).withCon
 var LinksColumn = /*#__PURE__*/(0, _styledComponents["default"])(Column).withConfig({
   displayName: "content__LinksColumn",
   componentId: "sc-12bve65-4"
-})(["padding-left:40px;", " ", " ", " ", " ", ""], _mediaQuery["default"].hdOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    width: 397px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    width: 392px;\n  "]))), _mediaQuery["default"].tabletAndAbove(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    float: right;\n    border-left: solid 0.25px #d8d8d8;\n    margin-bottom: 50px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    width: 270px;\n    padding-left: 31px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    margin-top: 60px;\n    padding-left: 0;\n  "]))));
+})(["padding-left:40px;", " ", " ", " ", " ", " ", ""], _mediaQuery["default"].hdOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    width: 397px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    width: 392px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    padding-left: 80px;\n  "]))), _mediaQuery["default"].tabletAndAbove(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    float: right;\n    border-left: solid 0.25px ", ";\n    margin-bottom: 50px;\n  "])), _color["default"].lightGray), _mediaQuery["default"].tabletOnly(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    width: 270px;\n    padding-left: 31px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    margin-top: 60px;\n    padding-left: 0;\n  "]))));
 
 var ItemList = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "content__ItemList",
   componentId: "sc-12bve65-5"
-})(["width:100%;"]);
+})(["width:100%;", " ", ""], _mediaQuery["default"].hdOnly(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    width: 397px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    width: 380px;\n  "]))));
 
 var ItemGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "content__ItemGroup",
   componentId: "sc-12bve65-6"
-})(["display:inline-block;width:calc(100% / 3);white-space:nowrap;", " ", ""], _mediaQuery["default"].desktopAndAbove(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    float: left;\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    width: calc(100% / 2);\n    &:last-child{\n      margin-top: 35px;\n    }\n  "]))));
+})(["display:inline-block;width:calc(100% / 3);white-space:nowrap;", " ", ""], _mediaQuery["default"].desktopAndAbove(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    float: left;\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    width: calc(100% / 2);\n    &:last-child{\n      margin-top: 35px;\n    }\n  "]))));
 
 var flickerAnimation = /*#__PURE__*/(0, _styledComponents.keyframes)(["0%,100%{opacity:1;}50%{opacity:.6;}"]);
 
 var Item = /*#__PURE__*/_styledComponents["default"].a.withConfig({
   displayName: "content__Item",
   componentId: "sc-12bve65-7"
-})(["text-decoration:none !important;display:block;width:100%;p{display:inline;font-size:14px;font-family:ff-tisa-web-pro,source-han-sans-traditional,sans-serif;font-weight:", ";letter-spacing:1.3px;color:#9c9c9c;}span{visibility:", ";background:#c7000a;color:#ffffff;font-size:9px;font-family:Roboto;margin-left:5px;padding:2px 5px;vertical-align:middle;animation:", " 0.7s infinite;}&:hover{p{color:#262626;}}", " ", ""], _fontWeight.sourceHanSansTC.medium, function (props) {
+})(["text-decoration:none !important;display:block;width:100%;p{display:inline;font-size:14px;font-family:", ";font-weight:", ";letter-spacing:1.3px;color:", ";}span{visibility:", ";background:", ";color:", ";font-size:9px;font-family:", ";margin-left:5px;padding:2px 5px;vertical-align:middle;animation:", " 0.7s infinite;}&:hover{p{color:", ";}}", " ", ""], _font["default"].family["default"], _font["default"].weight.normal, _color["default"].gray, function (props) {
   return props.visible ? 'visible' : 'hidden';
-}, flickerAnimation, _mediaQuery["default"].desktopAndAbove(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    height: calc(", "px / 3);\n  "])), _styles["default"].contentRow.height.hd), _mediaQuery["default"].mobileOnly(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    p {\n      font-size: 18px;\n      letter-spacing: 1.6px;\n      line-height: 2;\n    }\n  "]))));
+}, _color["default"].red, _color["default"].white, _font["default"].family["default"], flickerAnimation, _color["default"].notSoBlack, _mediaQuery["default"].desktopAndAbove(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    height: calc(", "px / 3);\n  "])), _styles["default"].contentRow.height.hd), _mediaQuery["default"].mobileOnly(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    p {\n      font-size: 18px;\n      letter-spacing: 1.6px;\n      line-height: 2;\n    }\n  "]))));
 
 var DonateButton = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "content__DonateButton",
   componentId: "sc-12bve65-8"
-})(["a{text-decoration:none !important;width:140px;height:55px;background-color:#ffffff;border:solid 0.5px #a67a44;display:table;&:hover{background-color:#a67a44;}p{display:table-cell;text-align:center;vertical-align:middle;color:#a67a44;font-size:14px;font-weight:", ";letter-spacing:1.3px;&:hover{color:#ffffff;}}", " ", " ", " ", "}"], _fontWeight.sourceHanSansTC.medium, _mediaQuery["default"].tabletAndAbove(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      position: absolute;\n      right: 0;\n      top: 0;\n    "]))), _mediaQuery["default"].desktopAndAbove(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      margin-top: ", "px;\n      margin-right: ", "px;\n    "])), _styles["default"].footerContentPadding.desktop[0], _styles["default"].footerContentPadding.desktop[1]), _mediaQuery["default"].tabletOnly(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n      margin-top: ", "px;\n      margin-right: ", "px;\n    "])), _styles["default"].footerContentPadding.tablet[0], _styles["default"].footerContentPadding.tablet[1]), _mediaQuery["default"].mobileOnly(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n      width: 100%;\n      margin: 60px auto 40px auto;\n    "]))));
+})(["a{text-decoration:none !important;width:140px;height:55px;background-color:", ";border:solid 0.5px ", ";display:table;&:hover{background-color:", ";}p{display:table-cell;text-align:center;vertical-align:middle;color:", ";font-size:14px;font-weight:", ";letter-spacing:1.3px;&:hover{color:", ";}}", " ", " ", " ", "}"], _color["default"].white, _color["default"].gold, _color["default"].gold, _color["default"].gold, _font["default"].weight.normal, _color["default"].white, _mediaQuery["default"].tabletAndAbove(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n      position: absolute;\n      right: 0;\n      top: 0;\n    "]))), _mediaQuery["default"].desktopAndAbove(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n      margin-top: ", "px;\n      margin-right: ", "px;\n    "])), _styles["default"].footerContentPadding.desktop[0], _styles["default"].footerContentPadding.desktop[1]), _mediaQuery["default"].tabletOnly(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n      margin-top: ", "px;\n      margin-right: ", "px;\n    "])), _styles["default"].footerContentPadding.tablet[0], _styles["default"].footerContentPadding.tablet[1]), _mediaQuery["default"].mobileOnly(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n      width: 100%;\n      margin: 60px auto 40px auto;\n    "]))));
 
 var buildList = function buildList(itemGroups) {
   return _.map(itemGroups, function (items, indexofGroup) {

package/lib/footer/index.js

@@ -7,22 +7,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _styles = _interopRequireDefault(require("./constants/styles"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _content = _interopRequireDefault(require("./content"));
 
 var _iconList = _interopRequireDefault(require("./icon-list"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = _interopRequireDefault(require("./constants/styles"));
 
-var _react = _interopRequireDefault(require("react"));
+var _color = _interopRequireDefault(require("./constants/color"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _font = _interopRequireDefault(require("./constants/font"));
 
 var _css = require("@twreporter/core/lib/utils/css");
 
-var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
-
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _requestOrigins = _interopRequireDefault(require("@twreporter/core/lib/constants/request-origins"));
@@ -60,7 +62,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var FooterContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "footer__FooterContainer",
   componentId: "d1uef9-0"
-})(["border-top:solid 0.5px #d8d8d8;width:100%;background-color:", ";padding:0;", " *{box-sizing:border-box;}"], function (props) {
+})(["border-top:solid 0.5px ", ";width:100%;background-color:", ";padding:0;", " *{box-sizing:border-box;}"], _color["default"].lightGray, function (props) {
   return props.bgColor;
 }, _mediaQuery["default"].tabletAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    min-height: ", "px;\n  "])), _styles["default"].footerHeight.desktop));
 
@@ -72,7 +74,7 @@ var FooterContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var CopyRight = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   displayName: "footer__CopyRight",
   componentId: "d1uef9-2"
-})(["font-size:12px;font-weight:", ";letter-spacing:0.4px;color:#9c9c9c;", " ", " ", "  "], _fontWeight.sourceHanSansTC.medium, _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    text-align: center;\n    margin-top: 10px;\n  "]))), _mediaQuery["default"].tabletAndAbove(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    margin-top: 40px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    margin-top: 60px;\n  "]))));
+})(["font-size:12px;font-weight:", ";letter-spacing:0.4px;color:", ";", " ", " ", "  "], _font["default"].weight.normal, _color["default"].gray, _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    text-align: center;\n    margin-top: 10px;\n  "]))), _mediaQuery["default"].tabletAndAbove(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    margin-top: 40px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    margin-top: 60px;\n  "]))));
 
 var Footer = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(Footer, _React$PureComponent);
@@ -114,7 +116,7 @@ Footer.propTypes = {
   pathname: _propTypes["default"].string
 };
 Footer.defaultProps = {
-  bgColor: '#ffffff',
+  bgColor: _color["default"].white,
   releaseBranch: _releaseBranch["default"].release,
   host: '',
   pathname: ''

package/lib/footer/logo.js

@@ -53,7 +53,7 @@ var Link = /*#__PURE__*/_styledComponents["default"].a.withConfig({
 var StyledReporterLogo = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "logo__StyledReporterLogo",
   componentId: "sc-1lniyyi-1"
-})(["transform:translateX(-22px);width:", "px;height:", "px;img{width:100%;filter:grayscale(100%);opacity:", ";}img:hover{filter:none;opacity:1;}", " ", ""], _styles["default"].reporterLogo.width.mobile, _styles["default"].reporterLogo.height.mobile, _styles["default"].grayScaleOpacity.pureBlackWhiteSrc, _mediaQuery["default"].tabletAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n    height: ", "px;\n  "])), _styles["default"].reporterLogo.width.desktop, _styles["default"].reporterLogo.height.desktop), _mediaQuery["default"].hdOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transform: translateX(-25px);\n    width: ", "px;\n    height: ", "px;\n  "])), _styles["default"].reporterLogo.width.hd, _styles["default"].reporterLogo.height.hd));
+})(["width:", "px;height:", "px;img{width:100%;filter:grayscale(100%);opacity:", ";}img:hover{filter:none;opacity:1;}", " ", ""], _styles["default"].reporterLogo.width.mobile, _styles["default"].reporterLogo.height.mobile, _styles["default"].grayScaleOpacity.pureBlackWhiteSrc, _mediaQuery["default"].tabletAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n    height: ", "px;\n  "])), _styles["default"].reporterLogo.width.desktop, _styles["default"].reporterLogo.height.desktop), _mediaQuery["default"].hdOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n    height: ", "px;\n  "])), _styles["default"].reporterLogo.width.hd, _styles["default"].reporterLogo.height.hd));
 
 var Logo = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(Logo, _React$PureComponent);
@@ -74,7 +74,7 @@ var Logo = /*#__PURE__*/function (_React$PureComponent) {
         href: mainOrigin
       }, /*#__PURE__*/_react["default"].createElement(StyledReporterLogo, null, /*#__PURE__*/_react["default"].createElement("img", {
         alt: "The Reporter Logo",
-        src: "".concat(_paths.assets, "logo-horizontal02.svg")
+        src: "".concat(_paths.assets, "logo-horizontal.svg")
       })));
     }
   }]);

package/lib/listing-page/components/image.js

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _storageUrlProcessor = require("@twreporter/core/lib/utils/storage-url-processor");
 
+var _color = _interopRequireDefault(require("../constants/color"));
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -78,7 +80,7 @@ var ImgFallback = /*#__PURE__*/(0, _styledComponents["default"])(ImgContainer).w
 var LogoCenteringBlock = /*#__PURE__*/(0, _styledComponents["default"])(ImgContainer).withConfig({
   displayName: "image__LogoCenteringBlock",
   componentId: "iof1ou-3"
-})(["position:absolute;justify-content:center;align-items:center;background-color:#fff;display:", ";"], function (props) {
+})(["position:absolute;justify-content:center;align-items:center;background-color:", ";display:", ";"], _color["default"].white, function (props) {
   return props.display;
 });
 

package/lib/listing-page/components/list-item.js

@@ -7,23 +7,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
+var _reactRouterDom = require("react-router-dom");
 
-var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _image = _interopRequireDefault(require("./image"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _reactRouterDom = require("react-router-dom");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _image = _interopRequireDefault(require("./image"));
 
 var _mockupSpec = _interopRequireDefault(require("../constants/mockup-spec"));
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+var _color = _interopRequireDefault(require("../constants/color"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _font = _interopRequireDefault(require("../constants/font"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _forEach = _interopRequireDefault(require("lodash/forEach"));
 
@@ -67,7 +69,7 @@ var _ = {
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list-item__Container",
   componentId: "sc-1dx5lew-0"
-})(["width:", "px;", " ", " ", " a{color:#4a4949;}"], _mockupSpec["default"].hd.cardWidth, _mediaQuery["default"].desktopOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].desktop.cardWidth), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].tablet.cardWidth), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "%;\n  "])), _mockupSpec["default"].mobile.cardWidth / _mockupSpec["default"].mobile.maxWidth * 100));
+})(["width:", "px;", " ", " ", " a{color:", ";}"], _mockupSpec["default"].hd.cardWidth, _mediaQuery["default"].desktopOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].desktop.cardWidth), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].tablet.cardWidth), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "%;\n  "])), _mockupSpec["default"].mobile.cardWidth / _mockupSpec["default"].mobile.maxWidth * 100), _color["default"].darkGray);
 
 var HoverEffect = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list-item__HoverEffect",
@@ -87,12 +89,12 @@ var TextBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Category = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list-item__Category",
   componentId: "sc-1dx5lew-4"
-})(["color:#c4333e;font-size:12px;line-height:1.33;margin-bottom:10px;"]);
+})(["color:", ";font-size:12px;line-height:1.33;margin-bottom:10px;"], _color["default"].red);
 
 var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list-item__Title",
   componentId: "sc-1dx5lew-5"
-})(["font-size:20px;font-weight:", ";line-height:1.4;color:#4a4949;margin-bottom:10px;"], _fontWeight.sourceHanSansTC.bold);
+})(["font-size:20px;font-weight:", ";font-family:", ";line-height:1.4;color:", ";margin-bottom:10px;"], _font["default"].weight.bold, _font["default"].family.title, _color["default"].darkGray);
 
 var Desc = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list-item__Desc",
@@ -112,11 +114,11 @@ var PubDate = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Tag = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   displayName: "list-item__Tag",
   componentId: "sc-1dx5lew-9"
-})(["background-color:", ";border:2px solid #c4333e;border-radius:68px;color:", ";display:inline-block;text-decoration:none;line-height:1.45;font-size:12px;font-weight:", ";padding:2px 10px;margin-right:13px;margin-bottom:10px;"], function (props) {
-  return props.selected ? '#c4333e' : '#f1f1f1';
-}, function (props) {
-  return props.selected ? '#ffffff' : '#c4333e';
-}, _fontWeight.sourceHanSansTC.bold);
+})(["background-color:", ";border:2px solid ", ";border-radius:68px;color:", ";display:inline-block;text-decoration:none;line-height:1.45;font-size:12px;font-weight:", ";padding:2px 10px;margin-right:13px;margin-bottom:10px;"], function (props) {
+  return props.selected ? _color["default"].red : _color["default"].lightGray;
+}, _color["default"].darkRed, function (props) {
+  return props.selected ? _color["default"].white : _color["default"].red;
+}, _font["default"].weight.bold);
 
 var ListItem = /*#__PURE__*/function (_PureComponent) {
   _inherits(ListItem, _PureComponent);

package/lib/listing-page/components/list.js

@@ -7,25 +7,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _date = require("@twreporter/core/lib/utils/date");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
 
-var _isFetchingWrapper = _interopRequireDefault(require("../../is-fetching-wrapper"));
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
-var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+var _date = require("@twreporter/core/lib/utils/date");
 
-var _listItem = _interopRequireDefault(require("./list-item"));
+var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
 
 var _mockupSpec = _interopRequireDefault(require("../constants/mockup-spec"));
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _color = _interopRequireDefault(require("../constants/color"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _listItem = _interopRequireDefault(require("./list-item"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _isFetchingWrapper = _interopRequireDefault(require("../../is-fetching-wrapper"));
 
 var _forEach = _interopRequireDefault(require("lodash/forEach"));
 
@@ -77,7 +79,7 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Header = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list__Header",
   componentId: "sc-1olquk4-1"
-})(["font-size:36px;font-weight:", ";color:#404040;margin:0 auto 45px auto;text-align:center;", ""], _fontWeight.sourceHanSansTC.bold, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "%;\n    text-align: left;\n  "])), _mockupSpec["default"].mobile.cardWidth / _mockupSpec["default"].mobile.maxWidth * 100));
+})(["font-size:36px;font-weight:", ";color:", ";margin:0 auto 45px auto;text-align:center;", ""], _fontWeight.sourceHanSansTC.bold, _color["default"].darkDarkGray, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "%;\n    text-align: left;\n  "])), _mockupSpec["default"].mobile.cardWidth / _mockupSpec["default"].mobile.maxWidth * 100));
 
 var FlexItems = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list__FlexItems",

package/lib/listing-page/components/topics/index.js

@@ -5,27 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _topics = require("../../constants/topics");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _section = require("./section");
+var _react = _interopRequireWildcard(require("react"));
 
-var _isFetchingWrapper = _interopRequireDefault(require("../../../is-fetching-wrapper"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+var _isFetchingWrapper = _interopRequireDefault(require("../../../is-fetching-wrapper"));
 
-var _pageContent = _interopRequireDefault(require("./page-content"));
+var _posts = _interopRequireDefault(require("./posts"));
 
 var _postItem = _interopRequireDefault(require("./post-item"));
 
-var _posts = _interopRequireDefault(require("./posts"));
+var _topicItem = _interopRequireDefault(require("./topic-item"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _pageContent = _interopRequireDefault(require("./page-content"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _section = require("./section");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _topics = require("../../constants/topics");
 
-var _topicItem = _interopRequireDefault(require("./topic-item"));
+var _color = _interopRequireDefault(require("../../constants/color"));
+
+var _font = _interopRequireDefault(require("../../constants/font"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
@@ -67,7 +69,7 @@ var _ = {
 var NoData = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "topics__NoData",
   componentId: "sc-1n6udj1-0"
-})(["width:100%;font-size:16px;color:#4a4949;font-weight:", ";text-align:center;"], _fontWeight.sourceHanSansTC.normal);
+})(["width:100%;font-size:16px;color:", ";font-weight:", ";text-align:center;"], _color["default"].darkGray, _font["default"].weight.normal);
 
 var Topics = /*#__PURE__*/function (_Component) {
   _inherits(Topics, _Component);

package/lib/listing-page/components/topics/post-item.js

@@ -11,8 +11,6 @@ var _css = require("@twreporter/core/lib/utils/css");
 
 var _predefinedCss = require("../../constants/predefined-css");
 
-var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
-
 var _image = _interopRequireDefault(require("../image"));
 
 var _reactRouterDom = require("react-router-dom");
@@ -25,6 +23,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _color = _interopRequireDefault(require("../../constants/color"));
+
+var _font = _interopRequireDefault(require("../../constants/font"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
 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); }
@@ -82,7 +84,7 @@ var styles = {
 var PostBox = /*#__PURE__*/(0, _styledComponents["default"])(_reactRouterDom.Link).withConfig({
   displayName: "post-item__PostBox",
   componentId: "d3t92f-0"
-})(["display:flex;", " ", " ", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: ", ";\n    width: 100%;\n  "])), (0, _css.arrayToCssShorthand)(styles.postBoxPadding.mobile)), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), styles.imgLandscape.tablet.width), _mediaQuery["default"].desktopAndAbove(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), styles.imgLandscape.desktop.width), _mediaQuery["default"].tabletAndAbove(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border: solid .5px #d8d8d8;\n    overflow: hidden;\n    flex-direction: column;\n  "]))), _predefinedCss.resetLinkStyle, _predefinedCss.linkHoverFadeOut);
+})(["display:flex;", " ", " ", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: ", ";\n    width: 100%;\n  "])), (0, _css.arrayToCssShorthand)(styles.postBoxPadding.mobile)), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), styles.imgLandscape.tablet.width), _mediaQuery["default"].desktopAndAbove(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), styles.imgLandscape.desktop.width), _mediaQuery["default"].tabletAndAbove(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border: solid .5px ", ";\n    overflow: hidden;\n    flex-direction: column;\n  "])), _color["default"].gray), _predefinedCss.resetLinkStyle, _predefinedCss.linkHoverFadeOut);
 
 var PostImage = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "post-item__PostImage",
@@ -92,7 +94,7 @@ var PostImage = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var PostText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "post-item__PostText",
   componentId: "d3t92f-2"
-})(["color:#4a4949;font-weight:", ";font-size:16px;line-height:1.5;flex:1 1 auto;white-space:normal;order:2;", " padding:", ";", " ", ""], _fontWeight.sourceHanSansTC.bold, _mediaQuery["default"].tabletAndAbove(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    order: 1;\n  "]))), (0, _css.arrayToCssShorthand)(styles.textBlockPadding.mobile), _mediaQuery["default"].tabletOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    padding: ", ";\n    line-height: 1.33;\n  "])), (0, _css.arrayToCssShorthand)(styles.textBlockPadding.tablet)), _mediaQuery["default"].desktopAndAbove(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    padding: ", ";\n    line-height: 1.25;\n  "])), (0, _css.arrayToCssShorthand)(styles.textBlockPadding.desktop)));
+})(["color:", ";font-weight:", ";font-family:", ";font-size:16px;line-height:1.5;flex:1 1 auto;white-space:normal;order:2;", " padding:", ";", " ", ""], _color["default"].darkGray, _font["default"].weight.bold, _font["default"].family.title, _mediaQuery["default"].tabletAndAbove(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    order: 1;\n  "]))), (0, _css.arrayToCssShorthand)(styles.textBlockPadding.mobile), _mediaQuery["default"].tabletOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    padding: ", ";\n    line-height: 1.33;\n  "])), (0, _css.arrayToCssShorthand)(styles.textBlockPadding.tablet)), _mediaQuery["default"].desktopAndAbove(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    padding: ", ";\n    line-height: 1.25;\n  "])), (0, _css.arrayToCssShorthand)(styles.textBlockPadding.desktop)));
 
 var PostItem = /*#__PURE__*/function (_PureComponent) {
   _inherits(PostItem, _PureComponent);

package/lib/listing-page/components/topics/posts.js

@@ -9,6 +9,8 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _color = _interopRequireDefault(require("../../constants/color"));
+
 var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -18,7 +20,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var PostsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "posts__PostsContainer",
   componentId: "sc-16za9fh-0"
-})(["display:flex;justify-content:space-between;align-items:stretch;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex-direction: column;\n    justify-content: flex-start;\n    a {\n      border-bottom: solid 1px #d8d8d8;\n    }\n    a:last-child {\n      border-bottom: medium none currentcolor;\n    }\n  "]))));
+})(["display:flex;justify-content:space-between;align-items:stretch;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex-direction: column;\n    justify-content: flex-start;\n    a {\n      border-bottom: solid 1px ", ";\n    }\n    a:last-child {\n      border-bottom: medium none currentcolor;\n    }\n  "])), _color["default"].gray));
 
 var _default = PostsContainer;
 exports["default"] = _default;

package/lib/listing-page/components/topics/section.js

@@ -5,28 +5,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SectionTitle = exports.ListSectionContent = exports.TopSectionContent = void 0;
 
-var _css = require("@twreporter/core/lib/utils/css");
-
-var _predefinedCss = require("../../constants/predefined-css");
-
-var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
-
 var _reactRouterDom = require("react-router-dom");
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _predefinedCss = require("../../constants/predefined-css");
+
+var _color = _interopRequireDefault(require("../../constants/color"));
+
+var _font = _interopRequireDefault(require("../../constants/font"));
+
+var _css = require("@twreporter/core/lib/utils/css");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
+// assets
 var RightArrowIcon = function RightArrowIcon(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
     d: "M1 1l7 7.007L1.013 15",
@@ -41,7 +44,8 @@ RightArrowIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
   fillRule: "evenodd",
   clipRule: "evenodd"
-};
+}; // constants
+
 var styles = {
   goToTopicMargin: [20, 'auto', 0, 'auto'],
   goToTopicPadding: [14, 0, 14, 0],
@@ -64,7 +68,7 @@ var StyledLink = /*#__PURE__*/(0, _styledComponents["default"])(_reactRouterDom.
 var SectionTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "section__SectionTitle",
   componentId: "sc-125nvxn-1"
-})(["width:100%;border-bottom:2px solid #d8d8d8;padding:", ";color:#4a4949;font-size:18px;font-weight:", ";line-height:1;margin:", ";", ""], (0, _css.arrayToCssShorthand)(styles.titlePadding), _fontWeight.sourceHanSansTC.bold, (0, _css.arrayToCssShorthand)(styles.titleMargin.mobile), _mediaQuery["default"].tabletAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.titleMargin.tablet)));
+})(["width:100%;border-bottom:2px solid ", ";padding:", ";color:", ";font-size:18px;font-weight:", ";line-height:1;margin:", ";", ""], _color["default"].gray, (0, _css.arrayToCssShorthand)(styles.titlePadding), _color["default"].darkGray, _font["default"].weight.bold, (0, _css.arrayToCssShorthand)(styles.titleMargin.mobile), _mediaQuery["default"].tabletAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.titleMargin.tablet)));
 
 exports.SectionTitle = SectionTitle;
 
@@ -76,7 +80,7 @@ var SectionContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var GoToTopic = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "section__GoToTopic",
   componentId: "sc-125nvxn-3"
-})(["color:#5eb2fd;text-align:center;line-height:1;padding:", ";span{display:inline-block;max-width:400px;", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0.1px;font-size:16px;font-weight:", ";}svg{height:16px;vertical-align:baseline;margin-left:0.5em;}"], (0, _css.arrayToCssShorthand)(styles.goToTopicPadding), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      max-width: 290px;\n    "]))), _fontWeight.sourceHanSansTC.normal);
+})(["color:", ";text-align:center;line-height:1;padding:", ";span{display:inline-block;max-width:400px;", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0.1px;font-size:16px;font-weight:", ";}svg{height:16px;vertical-align:baseline;margin-left:0.5em;}"], _color["default"].blue, (0, _css.arrayToCssShorthand)(styles.goToTopicPadding), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      max-width: 290px;\n    "]))), _font["default"].weight.normal);
 
 var TopSectionContent = function TopSectionContent(props) {
   return /*#__PURE__*/_react["default"].createElement(SectionContent, null, props.children, !props.topicName ? null : /*#__PURE__*/_react["default"].createElement(StyledLink, {

package/lib/listing-page/components/topics/topic-item.js

@@ -11,7 +11,9 @@ var _predefinedCss = require("../../constants/predefined-css");
 
 var _topics = require("../../constants/topics");
 
-var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+var _color = _interopRequireDefault(require("../../constants/color"));
+
+var _font = _interopRequireDefault(require("../../constants/font"));
 
 var _image = _interopRequireDefault(require("../image"));
 
@@ -128,17 +130,17 @@ var ImageBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var TextBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "topic-item__TextBlock",
   componentId: "sc-1tffa4f-4"
-})(["padding-left:", "px;", " ", " flex:1 1 auto;display:flex;flex-direction:column;color:#4a4949;"], styles.textBlock.mobile.paddingLeft, _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-left: ", "px;\n    padding-bottom: ", "px;\n  "])), styles.textBlock.tablet.paddingLeft, styles.textBlock.tablet.paddingBottom), _mediaQuery["default"].desktopAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding-left: ", "px;\n    padding-bottom: ", "px;\n  "])), styles.textBlock.desktop.paddingLeft, styles.textBlock.desktop.paddingBottom));
+})(["padding-left:", "px;", " ", " flex:1 1 auto;display:flex;flex-direction:column;color:", ";"], styles.textBlock.mobile.paddingLeft, _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-left: ", "px;\n    padding-bottom: ", "px;\n  "])), styles.textBlock.tablet.paddingLeft, styles.textBlock.tablet.paddingBottom), _mediaQuery["default"].desktopAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding-left: ", "px;\n    padding-bottom: ", "px;\n  "])), styles.textBlock.desktop.paddingLeft, styles.textBlock.desktop.paddingBottom), _color["default"].darkGray);
 
 var TopicTitle = /*#__PURE__*/_styledComponents["default"].h2.withConfig({
   displayName: "topic-item__TopicTitle",
   componentId: "sc-1tffa4f-5"
-})(["margin:0;", " font-size:", "px;font-weight:", ";letter-spacing:.2px;line-height:1.43;", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    margin-bottom: ", "px;\n  "])), styles.textBlock.mobile.titleMarginBottom), styles.fontSize.title.mobile, _fontWeight.sourceHanSansTC.bold, _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-size: ", "px;\n  "])), styles.fontSize.title.tablet), _mediaQuery["default"].desktopAndAbove(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    font-size: ", "px;\n  "])), styles.fontSize.title.desktop));
+})(["margin:0;", " font-size:", "px;font-weight:", ";font-family:", ";letter-spacing:.2px;line-height:1.43;", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    margin-bottom: ", "px;\n  "])), styles.textBlock.mobile.titleMarginBottom), styles.fontSize.title.mobile, _font["default"].weight.bold, _font["default"].family.title, _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-size: ", "px;\n  "])), styles.fontSize.title.tablet), _mediaQuery["default"].desktopAndAbove(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    font-size: ", "px;\n  "])), styles.fontSize.title.desktop));
 
 var TopicDate = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "topic-item__TopicDate",
   componentId: "sc-1tffa4f-6"
-})(["padding-top:15px;padding-bottom:15px;", " font-size:14px;font-weight:", ";letter-spacing:0.5px;"], _mediaQuery["default"].tabletOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    padding-top: 12px;\n    padding-bottom: 12px;\n  "]))), _fontWeight.sourceHanSansTC.bold);
+})(["padding-top:15px;padding-bottom:15px;", " font-size:14px;font-weight:", ";letter-spacing:0.5px;"], _mediaQuery["default"].tabletOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    padding-top: 12px;\n    padding-bottom: 12px;\n  "]))), _font["default"].weight.bold);
 
 var TopicDescription = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "topic-item__TopicDescription",

package/lib/listing-page/constants/color.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  white: '#ffffff',
+  red: '#c40c23',
+  drakRed: '#c4333e',
+  lightGray: '#f1f1f1',
+  gray: '#d8d8d8',
+  darkGray: '#4a4949',
+  darkDarkGray: '#404040',
+  blue: '#5eb2fd'
+};
+exports["default"] = _default;

package/lib/listing-page/constants/font.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  weight: {
+    normal: 400,
+    bold: 700
+  },
+  family: {
+    title: 'merriweather, source-han-serif-tc, serif',
+    "default": 'rosario, source-han-sans-traditional, sans-serif'
+  }
+};
+exports["default"] = _default;

package/lib/pagination/constants/color.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  white: '#ffffff',
+  brown: '#a67a44'
+};
+exports["default"] = _default;

package/lib/pagination/index.js

@@ -7,10 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _predefinedCss = require("@twreporter/core/lib/constants/predefined-css");
-
-var _css = require("@twreporter/core/lib/utils/css");
-
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -19,6 +15,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _color = _interopRequireDefault(require("./constants/color"));
+
+var _predefinedCss = require("@twreporter/core/lib/constants/predefined-css");
+
+var _css = require("@twreporter/core/lib/utils/css");
+
 var _concat = _interopRequireDefault(require("lodash/concat"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -49,6 +51,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
+// assets
 var PageDownIcon = function PageDownIcon(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("title", null, "pagedown"), /*#__PURE__*/_react["default"].createElement("path", {
     stroke: "#3E3F3F",
@@ -81,7 +84,8 @@ PageUpIcon.defaultProps = {
   height: "11",
   viewBox: "0 0 9 11",
   xmlns: "http://www.w3.org/2000/svg"
-};
+}; // constants
+
 var _ = {
   concat: _concat["default"],
   get: _get["default"]
@@ -109,15 +113,15 @@ var Boxes = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Box = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "pagination__Box",
   componentId: "sc-17bqftr-2"
-})(["margin:0 5px 0 5px;width:", "px;height:", "px;box-sizing:border-box;user-select:none;display:inline-block;font-size:14px;cursor:pointer;color:#a67a44;position:relative;>:first-child{", "}"], styles.btnBoxSize.desktop, styles.btnBoxSize.desktop, _predefinedCss.absoluteCentering);
+})(["margin:0 5px 0 5px;width:", "px;height:", "px;box-sizing:border-box;user-select:none;display:inline-block;font-size:14px;cursor:pointer;color:", ";position:relative;>:first-child{", "}"], styles.btnBoxSize.desktop, styles.btnBoxSize.desktop, _color["default"].brown, _predefinedCss.absoluteCentering);
 
 var PageNumberBox = /*#__PURE__*/(0, _styledComponents["default"])(Box).withConfig({
   displayName: "pagination__PageNumberBox",
   componentId: "sc-17bqftr-3"
-})(["border:solid 1px #a67a44;border-radius:50%;line-height:", "px;background-color:", ";> span{color:", ";}", ""], styles.btnBoxSize.desktop, function (props) {
-  return props.isCurrent ? '#a67a44' : 'transparent';
+})(["border:solid 1px ", ";border-radius:50%;line-height:", "px;background-color:", ";> span{color:", ";}", ""], _color["default"].brown, styles.btnBoxSize.desktop, function (props) {
+  return props.isCurrent ? _color["default"].brown : 'transparent';
 }, function (props) {
-  return props.isCurrent ? '#ffffff' : '#a67a44';
+  return props.isCurrent ? _color["default"].white : _color["default"].brown;
 }, _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: ", ";\n  "])), function (props) {
   return props.isCurrent ? '' : 'none';
 }));
@@ -128,7 +132,7 @@ var EllipsisBox = /*#__PURE__*/(0, _styledComponents["default"])(Box).withConfig
 var PrevNextBtn = /*#__PURE__*/(0, _styledComponents["default"])(Box).withConfig({
   displayName: "pagination__PrevNextBtn",
   componentId: "sc-17bqftr-5"
-})(["padding:", ";cursor:pointer;path{stroke:#a67a44;}"], (0, _css.arrayToCssShorthand)(styles.prevNextBtnPadding));
+})(["padding:", ";cursor:pointer;path{stroke:", ";}"], (0, _css.arrayToCssShorthand)(styles.prevNextBtnPadding), _color["default"].brown);
 /*
 Pages Array:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.6.0-rc.1",
+  "version": "8.6.1-rc.0",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -12,7 +12,7 @@
     "prepublishOnly": "make build"
   },
   "dependencies": {
-    "@twreporter/core": "^1.3.0-rc.0",
+    "@twreporter/core": "^1.3.0",
     "@twreporter/redux": "^7.2.0",
     "hoist-non-react-statics": "^2.3.1",
     "lodash": "^4.0.0",
@@ -29,5 +29,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "9bd2f809839da73e85f60f2979fe20addf426cd5"
+  "gitHead": "28bf0e4498a738b2b62796d162879301374f2af0"
 }