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

package/lib/components/related/list.js

@@ -7,25 +7,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context"));
 
-var _card = _interopRequireDefault(require("./card"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context"));
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _mockup = _interopRequireDefault(require("./mockup"));
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+var _card = _interopRequireDefault(require("./card"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _theme = _interopRequireDefault(require("../../constants/theme"));
 
-var _related = _interopRequireDefault(require("../../constants/prop-types/related"));
+var _color = _interopRequireDefault(require("../../constants/color"));
 
-var _react = _interopRequireDefault(require("react"));
+var _related = _interopRequireDefault(require("../../constants/prop-types/related"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _typography = _interopRequireDefault(require("../../constants/typography"));
 
-var _theme = _interopRequireDefault(require("../../constants/theme"));
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
@@ -74,19 +76,19 @@ var fadeIn = /*#__PURE__*/(0, _styledComponents.keyframes)(["from{opacity:0;}to{
 var selectButtonColors = function selectButtonColors(theme) {
   switch (theme) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["color:rgba(255,255,255,0.8);background-color:rgba(255,255,255,0.1);&:hover{color:#ffffff;background-color:rgba(255,255,255,0.15);}"]);
+      return (0, _styledComponents.css)(["color:", ";background-color:", ";&:hover{color:", ";background-color:", ";}"], _color["default"].notSoWhite, _color["default"].gray25, _color["default"].white, _color["default"].gray10);
 
     case _theme["default"].article.v2.pink:
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["color:#808080;background-color:rgba(0,0,0,0.08);&:hover{color:#404040;background-color:rgba(0,0,0,0.13);}"]);
+      return (0, _styledComponents.css)(["color:", ";background-color:", ";&:hover{color:", ";background-color:", ";}"], _color["default"].gray80, _color["default"].gray45, _color["default"].gray90, _color["default"].gray53);
   }
 };
 
 var LoadMoreButton = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list__LoadMoreButton",
   componentId: "uykdc6-0"
-})(["text-align:center;font-size:14px;letter-spacing:0.4px;padding-top:26px;border-radius:4px;height:72px;font-weight:", ";cursor:pointer;", " transition:color 100ms ease;", " ", " ", " ", ""], _fontWeight.sourceHanSansTC.bold, function (props) {
+})(["text-align:center;font-size:14px;letter-spacing:0.4px;padding-top:26px;border-radius:4px;height:72px;font-weight:", ";cursor:pointer;", " transition:color 100ms ease;", " ", " ", " ", ""], _typography["default"].font.weight.bold, function (props) {
   return selectButtonColors(props.theme.name);
 }, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", ";\n    margin: 30px auto;\n  "])), _mockup["default"].mobile.item.width), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n    margin: 40px auto;\n  "])), _mockup["default"].tablet.item.width), _mediaQuery["default"].desktopOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "px;\n    margin: 30px 0;\n  "])), _mockup["default"].desktop.item.width * 3 + _mockup["default"].desktop.item.margin.right * 2 + 3), _mediaQuery["default"].hdOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: ", "px;\n    margin: 30px 0;\n  "])), _mockup["default"].hd.item.width * 3 + _mockup["default"].hd.item.margin.right * 2 + 3));
 
@@ -103,10 +105,10 @@ var Item = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 })(["border-style:solid;border-width:0 0.5px 0.5px 0;border-color:", ";margin-bottom:40px;animation:", " 400ms ease-in-out;", " ", " ", " ", " ", ""], function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      return 'rgba(255, 255, 255, 0.2)';
+      return _color["default"].gray10;
 
     default:
-      return '#d8d8d8';
+      return _color["default"].gray50;
   }
 }, fadeIn, _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    border-width: 0 0 0.5px 0;\n    margin: 0 auto;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    flex: 0 0 ", ";\n  "])), _mockup["default"].mobile.item.width), _mediaQuery["default"].tabletOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    flex: 0 0 ", "px;\n  "])), _mockup["default"].tablet.item.width), _mediaQuery["default"].desktopOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    margin-right: ", "px;\n    flex: 0 0 ", "px;\n  "])), _mockup["default"].desktop.item.margin.right, _mockup["default"].desktop.item.width), _mediaQuery["default"].hdOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    margin-right: ", "px;\n    flex: 0 0 ", "px;\n  "])), _mockup["default"].hd.item.margin.right, _mockup["default"].hd.thumbnail.width));
 

package/lib/components/separation-curve.js

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _theme = _interopRequireDefault(require("../constants/theme"));
 
+var _color = _interopRequireDefault(require("../constants/color"));
+
 var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -27,14 +29,14 @@ var Separation = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 })(["width:192px;margin:40px auto;", " >svg>path{fill:", ";}"], _mediaQuery["default"].hdOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 270px;\n  "]))), function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.pink:
-      return '#fbafef';
+      return _color["default"].pink;
 
     case _theme["default"].article.v2.photo:
-      return '#a67a44';
+      return _color["default"].brown;
 
     case _theme["default"].article.v2["default"]:
     default:
-      return '#d0a67d';
+      return _color["default"].milkTea;
   }
 });
 

package/lib/components/table-of-contents/styled.js

@@ -11,6 +11,8 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _positionZIndex = _interopRequireDefault(require("../../constants/position-z-index"));
 
+var _typography = _interopRequireDefault(require("../../constants/typography"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -29,7 +31,7 @@ exports.TOCBlock = TOCBlock;
 var TOCText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "styled__TOCText",
   componentId: "sc-1guo9zm-1"
-})(["font-size:14px;font-weight:500;line-height:1.29;letter-spacing:0.1px;color:", ";&:hover{color:", ";}margin-left:5px;margin-right:auto;max-width:150px;"], function (props) {
+})(["font-size:14px;font-weight:", ";line-height:1.29;letter-spacing:0.1px;color:", ";&:hover{color:", ";}margin-left:5px;margin-right:auto;max-width:150px;"], _typography["default"].font.weight.normal, function (props) {
   return props.toHighlight ? props.theme.colors.toc.accent : props.theme.colors.toc.text;
 }, function (props) {
   return props.theme.colors.toc.accent;

package/lib/constants/color.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  transparent: 'rgba(0, 0, 0, 0)',
+  white: '#ffffff',
+  almostWhite: '#fefefe',
+  notSoWhite: 'rgba(255, 255, 255, 0.8)',
+  gray5: 'rgba(255, 255, 255, 0.4)',
+  gray10: 'rgba(255, 255, 255, 0.2)',
+  gray20: '#f4f4f4',
+  gray25: 'rgba(255, 255, 255, 0.08)',
+  gray30: '#f1f1f1',
+  gray35: 'rgba(216, 216, 216, 0.2)',
+  gray40: '#e2e2e2',
+  gray45: 'rgba(0, 0, 0, 0.08)',
+  gray50: '#d8d8d8',
+  gray53: 'rgba(0, 0, 0, 0.13)',
+  gray55: '#cccccc',
+  gray60: '#afafaf',
+  gray70: '#9c9c9c',
+  gray75: 'rgba(0, 0, 0, 0.5)',
+  gray80: '#808080',
+  gray85: '#494949',
+  gray90: '#404040',
+  gray95: '#262626',
+  black: '#000000',
+  lightBlue: '#2440fb',
+  blue: '#355ed3',
+  darkBlue: '#08192d',
+  lightPink: '#fadaf5',
+  pink: '#fbafef',
+  darkPink: '#ef7ede',
+  paleBrown: 'rgba(166, 122, 68, 0.55)',
+  lightBrown: '#c9af8e',
+  brown: '#a67a44',
+  milkTea: '#d0a67d'
+};
+exports["default"] = _default;

package/lib/constants/css.js

@@ -11,17 +11,19 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _typography = _interopRequireDefault(require("./typography"));
 
+var _color = _interopRequireDefault(require("./color"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function getParagraphTextStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["color:rgba(255,255,255,0.7);"]);
+      return (0, _styledComponents.css)(["color:", ";"], _color["default"].notSoWhite);
 
     case _theme["default"].article.v2.pink:
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["color:#404040;"]);
+      return (0, _styledComponents.css)(["color:", ";"], _color["default"].gray90);
   }
 }
 
@@ -34,14 +36,14 @@ var paragraphText = /*#__PURE__*/(0, _styledComponents.css)(["", " font-size:",
 function getLinkChildrenStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:#d0a67d;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.2);}a:hover{border-color:#d0a67d;}"]);
+      return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:", ";text-decoration:none;border-bottom:1px solid ", ";}a:hover{border-color:", ";}"], _color["default"].milkTea, _color["default"].gray10, _color["default"].milkTea);
 
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:#355ed3;text-decoration:none;border-bottom:1px solid #d8d8d8;}a:hover{border-color:#355ed3;}"]);
+      return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:", ";text-decoration:none;border-bottom:1px solid ", ";}a:hover{border-color:", ";}"], _color["default"].blue, _color["default"].gray50, _color["default"].blue);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:#a67a44;text-decoration:none;border-bottom:1px solid #d8d8d8;}a:hover{border-color:#a67a44;}"]);
+      return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:", ";text-decoration:none;border-bottom:1px solid ", ";}a:hover{border-color:", ";}"], _color["default"].brown, _color["default"].gray50, _color["default"].brown);
   }
 }
 

package/lib/constants/typography.js

@@ -10,14 +10,12 @@ var _default = {
       base: '18px'
     },
     weight: {
-      extraLight: '100',
-      light: '200',
-      normal: '300',
-      regular: '400',
-      medium: '500',
-      semiBold: '600',
-      bold: '700',
-      heavy: '900'
+      normal: '400',
+      bold: '700'
+    },
+    family: {
+      title: 'merriweather, source-han-serif-tc, serif',
+      "default": 'rosario, source-han-sans-traditional, sans-serif'
     }
   }
 };

package/lib/managers/theme-manager.js

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _theme2 = _interopRequireDefault(require("../constants/theme"));
 
+var _color = _interopRequireDefault(require("../constants/color"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -42,38 +44,38 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  *  @property {ColorSet} base - Base color set
  */
 var secondaryColorSet = {
-  text: '#a67a44',
-  accent: '#a67a44',
-  support: '#d0a67d',
-  background: '#c9af8e'
+  text: _color["default"].brown,
+  accent: _color["default"].brown,
+  support: _color["default"].milkTea,
+  background: _color["default"].lightBrown
 };
 var baseColorSet = {
-  text: '#404040',
-  lightText: '#808080',
+  text: _color["default"].gray90,
+  lightText: _color["default"].gray80,
   button: {
     text: {
-      color: '#808080'
+      color: _color["default"].gray80
     },
     border: {
-      color: '#808080'
+      color: _color["default"].gray80
     },
     background: {
       color: 'initial'
     },
     hover: {
       text: {
-        color: '#808080'
+        color: _color["default"].gray80
       },
       border: {
-        color: '#808080'
+        color: _color["default"].gray80
       },
       background: {
-        color: '#fff'
+        color: _color["default"].white
       }
     }
   },
-  line: '#afafaf',
-  background: '#f4f4f4'
+  line: _color["default"].gray60,
+  background: _color["default"].gray20
 };
 /**
  *  @class Create a new ThemeManager
@@ -134,79 +136,79 @@ exports["default"] = ThemeManager;
 _defineProperty(ThemeManager, "colors", {
   pink: {
     primary: {
-      text: '#355ed3',
-      accent: '#ef7ede',
-      support: '#fbafef',
-      background: '#fadaf5'
+      text: _color["default"].blue,
+      accent: _color["default"].drakPink,
+      support: _color["default"].pink,
+      background: _color["default"].lightPink
     },
     secondary: secondaryColorSet,
     base: baseColorSet,
     toc: {
-      text: '#9c9c9c',
-      accent: '#ef7ede',
-      support: '#fbafef',
-      background: '#fadaf5'
+      text: _color["default"].gray70,
+      accent: _color["default"].darkPink,
+      support: _color["default"].pink,
+      background: _color["default"].lightPink
     }
   },
   "default": {
     primary: {
-      text: '#a67a44',
-      accent: '#a67a44',
-      support: '#d0a67d',
-      background: '#f1f1f1'
+      text: _color["default"].brown,
+      accent: _color["default"].brown,
+      support: _color["default"].milkTea,
+      background: _color["default"].gray30
     },
     secondary: secondaryColorSet,
     base: _objectSpread(_objectSpread({}, baseColorSet), {}, {
-      background: '#f1f1f1'
+      background: _color["default"].gray30
     }),
     toc: {
-      text: '#afafaf',
-      accent: '#a67a44',
-      support: '#d0a67d',
-      background: '#fefefe'
+      text: _color["default"].gray60,
+      accent: _color["default"].brown,
+      support: _color["default"].milkTea,
+      background: _color["default"].almostWhite
     }
   },
   photo: {
     primary: {
-      text: '#a67a44',
-      accent: '#a67a44',
-      support: '#d0a67d',
-      background: '#08192d'
+      text: _color["default"].brown,
+      accent: _color["default"].brown,
+      support: _color["default"].milkTea,
+      background: _color["default"].darkBlue
     },
     secondary: secondaryColorSet,
     base: {
-      text: 'rgba(255, 255, 255, 0.8)',
-      lightText: 'rgba(255, 255, 255, 0.5)',
+      text: _color["default"].notSoWhite,
+      lightText: _color["default"].gray5,
       button: {
         text: {
-          color: '#808080'
+          color: _color["default"].gray80
         },
         border: {
-          color: '#808080'
+          color: _color["default"].gray80
         },
         background: {
           color: 'initial'
         },
         hover: {
           text: {
-            color: '#fff'
+            color: _color["default"].white
           },
           border: {
-            color: '#fff'
+            color: _color["default"].white
           },
           background: {
             color: 'initial'
           }
         }
       },
-      line: 'rgba(216, 216, 216, 0.2)',
-      background: '#08192d'
+      line: _color["default"].gray35,
+      background: _color["default"].darkBlue
     },
     toc: {
-      text: '#afafaf',
-      accent: '#a67a44',
-      support: '#d0a67d',
-      background: '#fefefe'
+      text: _color["default"].gray60,
+      accent: _color["default"].brown,
+      support: _color["default"].milkTea,
+      background: _color["default"].almostWhite
     }
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.4.1",
+  "version": "1.4.2-rc.3",
   "description": "The Reporter react article components, which are used in article page",
   "main": "lib/components/article-page.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
@@ -24,10 +24,10 @@
     "webpack-dev-server": "^3.7.2"
   },
   "dependencies": {
-    "@twreporter/core": "^1.2.1",
-    "@twreporter/react-components": "^8.5.0",
+    "@twreporter/core": "^1.3.0-rc.1",
+    "@twreporter/react-components": "^8.6.0-rc.3",
     "@twreporter/redux": "^7.2.0",
-    "@twreporter/universal-header": "^2.2.1",
+    "@twreporter/universal-header": "^2.2.2-rc.3",
     "howler": "^2.1.1",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
@@ -39,5 +39,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "d84885c4a94a4a4669c69c9c7329c5fbb477031c"
+  "gitHead": "d66a4b232464636ca6f36fd8821b1da7a84645d7"
 }