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

package/lib/managers/theme-manager.js

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 
 var _theme2 = _interopRequireDefault(require("../constants/theme"));
 
-var _color = _interopRequireDefault(require("../constants/color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -44,38 +44,37 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  *  @property {ColorSet} base - Base color set
  */
 var secondaryColorSet = {
-  text: _color["default"].brown,
-  accent: _color["default"].brown,
-  support: _color["default"].milkTea,
-  background: _color["default"].lightBrown
+  text: _color.colorSupportive.heavy,
+  accent: _color.colorSupportive.heavy,
+  support: _color.colorSupportive.main,
+  background: _color.colorSupportive.pastel
 };
 var baseColorSet = {
-  text: _color["default"].gray90,
-  lightText: _color["default"].gray80,
+  text: _color.colorGrayscale.gray800,
+  lightText: _color.colorGrayscale.gray600,
   button: {
     text: {
-      color: _color["default"].gray80
+      color: _color.colorGrayscale.gray600
     },
     border: {
-      color: _color["default"].gray80
+      color: _color.colorGrayscale.gray600
     },
     background: {
       color: 'initial'
     },
     hover: {
       text: {
-        color: _color["default"].gray80
+        color: _color.colorGrayscale.gray600
       },
       border: {
-        color: _color["default"].gray80
+        color: _color.colorGrayscale.gray600
       },
       background: {
-        color: _color["default"].white
+        color: _color.colorGrayscale.white
       }
     }
   },
-  line: _color["default"].gray60,
-  background: _color["default"].gray20
+  background: _color.colorGrayscale.gray100
 };
 /**
  *  @class Create a new ThemeManager
@@ -136,79 +135,78 @@ exports["default"] = ThemeManager;
 _defineProperty(ThemeManager, "colors", {
   pink: {
     primary: {
-      text: _color["default"].blue,
-      accent: _color["default"].drakPink,
-      support: _color["default"].pink,
-      background: _color["default"].lightPink
+      text: _color.COLOR_PINK_ARTICLE.blue,
+      accent: _color.COLOR_PINK_ARTICLE.drakPink,
+      support: _color.COLOR_PINK_ARTICLE.pink,
+      background: _color.COLOR_PINK_ARTICLE.lightPink
     },
     secondary: secondaryColorSet,
     base: baseColorSet,
     toc: {
-      text: _color["default"].gray70,
-      accent: _color["default"].darkPink,
-      support: _color["default"].pink,
-      background: _color["default"].lightPink
+      text: _color.colorGrayscale.gray500,
+      accent: _color.COLOR_PINK_ARTICLE.darkPink,
+      support: _color.COLOR_PINK_ARTICLE.pink,
+      background: _color.COLOR_PINK_ARTICLE.lightPink
     }
   },
   "default": {
     primary: {
-      text: _color["default"].brown,
-      accent: _color["default"].brown,
-      support: _color["default"].milkTea,
-      background: _color["default"].gray30
+      text: _color.colorSupportive.heavy,
+      accent: _color.colorSupportive.heavy,
+      support: _color.colorSupportive.main,
+      background: _color.colorGrayscale.gray100
     },
     secondary: secondaryColorSet,
     base: _objectSpread(_objectSpread({}, baseColorSet), {}, {
-      background: _color["default"].gray30
+      background: _color.colorGrayscale.gray100
     }),
     toc: {
-      text: _color["default"].gray60,
-      accent: _color["default"].brown,
-      support: _color["default"].milkTea,
-      background: _color["default"].almostWhite
+      text: _color.colorGrayscale.gray500,
+      accent: _color.colorSupportive.heavy,
+      support: _color.colorSupportive.main,
+      background: _color.colorGrayscale.white
     }
   },
   photo: {
     primary: {
-      text: _color["default"].brown,
-      accent: _color["default"].brown,
-      support: _color["default"].milkTea,
-      background: _color["default"].darkBlue
+      text: _color.colorSupportive.heavy,
+      accent: _color.colorSupportive.heavy,
+      support: _color.colorSupportive.main,
+      background: _color.COLOR_PINK_ARTICLE.darkBlue
     },
     secondary: secondaryColorSet,
     base: {
-      text: _color["default"].notSoWhite,
-      lightText: _color["default"].gray5,
+      text: _color.colorGrayscale.gray300,
+      lightText: _color.colorGrayscale.gray600,
       button: {
         text: {
-          color: _color["default"].gray80
+          color: _color.colorGrayscale.gray600
         },
         border: {
-          color: _color["default"].gray80
+          color: _color.colorGrayscale.gray600
         },
         background: {
           color: 'initial'
         },
         hover: {
           text: {
-            color: _color["default"].white
+            color: _color.colorGrayscale.white
           },
           border: {
-            color: _color["default"].white
+            color: _color.colorGrayscale.white
           },
           background: {
             color: 'initial'
           }
         }
       },
-      line: _color["default"].gray35,
-      background: _color["default"].darkBlue
+      background: _color.COLOR_PINK_ARTICLE.darkBlue
     },
     toc: {
-      text: _color["default"].gray60,
-      accent: _color["default"].brown,
-      support: _color["default"].milkTea,
-      background: _color["default"].almostWhite
+      text: _color.colorGrayscale.gray500,
+      accent: _color.colorSupportive.heavy,
+      support: _color.colorSupportive.main,
+      background: _color.colorGrayscale.white
     }
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.9.0",
+  "version": "1.9.1-rc.1",
   "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.13.0",
-    "@twreporter/react-components": "^8.20.1",
-    "@twreporter/redux": "^7.8.0",
-    "@twreporter/universal-header": "^2.7.3",
+    "@twreporter/core": "^1.13.1-rc.0",
+    "@twreporter/react-components": "^8.21.0-rc.1",
+    "@twreporter/redux": "^7.8.1-rc.0",
+    "@twreporter/universal-header": "^2.7.4-rc.1",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
@@ -40,5 +40,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "8a64673c5043887c270b1f56efb71a4c3ca41cdd"
+  "gitHead": "aa00452ea5c3557c71865aa121dfa630f84e6a04"
 }

package/lib/constants/color.js

@@ -1,43 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-// TODO: remove this constant & use @twreporter/core/lib/constants/color
-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;