@twreporter/react-components 8.22.0-rc.0 → 8.22.0-rc.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.22.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.22.0-rc.0...@twreporter/react-components@8.22.0-rc.1) (2023-12-05)
+
+
+### Bug Fixes
+
+* `react-components` use design guideline color ([8715b02](https://github.com/twreporter/twreporter-npm-packages/commit/8715b026c5acda328f465f6985288ff4d5e07639))
+
+
+
+
+
 # [8.22.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.21.1-rc.1...@twreporter/react-components@8.22.0-rc.0) (2023-12-05)
 
 

package/lib/bookmark-list/bookmark.js

@@ -23,12 +23,12 @@ 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 _color = require("@twreporter/core/lib/constants/color");
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
@@ -109,7 +109,7 @@ var styles = {
 var BookmarkIconComp = /*#__PURE__*/(0, _styledComponents["default"])(BookmarkIcon).withConfig({
   displayName: "bookmark__BookmarkIconComp",
   componentId: "sc-1y8p1w5-0"
-})(["&:hover{path{fill:", ";transition:fill 200ms linear;}}"], _color["default"].darkRed);
+})(["&:hover{path{fill:", ";transition:fill 200ms linear;}}"], _color.colorBrand.dark);
 
 var BookmarkFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmark__BookmarkFrame",
@@ -119,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:", ";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  "]))));
+})(["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.colorGrayscale.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",
@@ -151,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:", ";"], _mediaQuery["default"].mobileOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-size: 14px;\n  "]))), _color["default"].red);
+})(["font-size:16px;", " line-height:1;color:", ";"], _mediaQuery["default"].mobileOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-size: 14px;\n  "]))), _color.colorBrand.heavy);
 
 var FirstRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmark__FirstRow",
@@ -161,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:", ";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  "]))), _font.fontWeight.bold, _color["default"].darkGray);
+})(["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  "]))), _font.fontWeight.bold, _color.colorGrayscale.gray800);
 
 var Description = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmark__Description",
   componentId: "sc-1y8p1w5-9"
-})(["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  "]))));
+})(["width:98%;color:", ";font-size:18px;", ";flex-basis:auto;flex-grow:0;", ""], _color.colorGrayscale.gray800, (0, _truncate["default"])('relative', 1.57, 2, _color.colorGrayscale.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",
@@ -176,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:", ";cursor:pointer;display:inline-block;"], _color["default"].gray);
+})(["font-size:14px;text-align:left;color:", ";cursor:pointer;display:inline-block;"], _color.colorGrayscale.gray500);
 
 var Date = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   displayName: "bookmark__Date",
   componentId: "sc-1y8p1w5-12"
-})(["vertical-align:top;font-size:16px;font-weight:", ";color:", ";float:right;"], _font.fontWeight["default"], _color["default"].gray);
+})(["vertical-align:top;font-size:16px;font-weight:", ";color:", ";float:right;"], _font.fontWeight["default"], _color.colorGrayscale.gray500);
 
 var RemoveBookMarkBtn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmark__RemoveBookMarkBtn",

package/lib/confirmation/index.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _font = require("@twreporter/core/lib/constants/font");
-
-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 _color = _interopRequireDefault(require("./constants/color"));
+var _font = require("@twreporter/core/lib/constants/font");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _color = require("@twreporter/core/lib/constants/color");
 
 var _templateObject, _templateObject2, _templateObject3;
 
@@ -23,6 +23,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
+// assets
 var WarningSign = function WarningSign(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("title", null, "deletebm"), /*#__PURE__*/_react["default"].createElement("g", {
     fill: "none",
@@ -41,19 +42,19 @@ WarningSign.defaultProps = {
   height: "30",
   viewBox: "0 0 32 30",
   xmlns: "http://www.w3.org/2000/svg"
-};
+}; // @twreporter
 
 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:", ";"], _color["default"].gray);
+})(["width:100%;height:100vh;position:fixed;top:0;left:0;z-index:5;background-color:", ";"], _color.colorGrayscale.gray600);
 
 var Dialog = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "confirmation__Dialog",
   componentId: "ypuqpw-1"
-})(["width:", ";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:75px 60px 58px 60px;background-color:white;text-align:center;", ""], function (props) {
+})(["width:", ";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:75px 60px 58px 60px;background-color:", ";text-align:center;", ""], function (props) {
   return props.width;
-}, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 100%;\n    padding: 47px 17px 37px 17px;\n  "]))));
+}, _color.colorGrayscale.white, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 100%;\n    padding: 47px 17px 37px 17px;\n  "]))));
 
 var Content = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "confirmation__Content",
@@ -68,16 +69,16 @@ var FuncitonArea = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var FunctionButton = /*#__PURE__*/_styledComponents["default"].button.withConfig({
   displayName: "confirmation__FunctionButton",
   componentId: "ypuqpw-4"
-})(["cursor:pointer;font-weight:", ";font-size:18px;width:127px;height:46.7px;border-radius:40px;background-color:Transparent;outline:0;", " letter-spacing:1.6px;"], _font.fontWeight.bold, _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 16px;\n  "]))));
+})(["cursor:pointer;font-weight:", ";font-size:18px;width:127px;height:46.7px;border-radius:40px;background-color:transparent;outline:0;", " letter-spacing:1.6px;"], _font.fontWeight.bold, _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 16px;\n  "]))));
 
 var Cancel = /*#__PURE__*/(0, _styledComponents["default"])(FunctionButton).withConfig({
   displayName: "confirmation__Cancel",
   componentId: "ypuqpw-5"
-})(["border:solid 2px ", ";margin-right:25px;"], _color["default"].darkGray);
+})(["border:solid 2px ", ";margin-right:25px;"], _color.colorGrayscale.gray900);
 var Confirm = /*#__PURE__*/(0, _styledComponents["default"])(FunctionButton).withConfig({
   displayName: "confirmation__Confirm",
   componentId: "ypuqpw-6"
-})(["border:solid 2px ", ";color:", ";"], _color["default"].lightRed, _color["default"].red);
+})(["border:solid 2px currentcolor;color:", ";"], _color.colorBrand.heavy);
 
 var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "confirmation__IconContainer",

package/lib/error/message.js

@@ -15,7 +15,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
-var _color = _interopRequireDefault(require("./constants/color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
 
@@ -465,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: ", ";\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));
+})(["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.colorGrayscale.black, _color.colorGrayscale.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.colorGrayscale.black, _color.colorGrayscale.black));
 
 var BuildingStyled = /*#__PURE__*/(0, _styledComponents["default"])(Building).withConfig({
   displayName: "message__BuildingStyled",
@@ -484,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:", ";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  "]))));
+})(["display:block;cursor:pointer;text-align:center;background-color:", ";color:", ";text-decoration:none;&:hover,&:active,&:focus,&:visited{color:", ";text-decoration:none;}", " ", " ", " ", ""], _color.colorGrayscale.black, _color.colorGrayscale.white, _color.colorGrayscale.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/content.js

@@ -17,8 +17,6 @@ var _logo = _interopRequireDefault(require("./logo"));
 
 var _styles = _interopRequireDefault(require("./constants/styles"));
 
-var _color = _interopRequireDefault(require("./constants/color"));
-
 var _siteMeta = require("@twreporter/core/lib/constants/site-meta");
 
 var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
@@ -33,6 +31,8 @@ var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/consta
 
 var _font = require("@twreporter/core/lib/constants/font");
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 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, _templateObject23, _templateObject24, _templateObject25;
@@ -126,7 +126,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:", ";", ""], _font.fontWeight.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  "]))));
+})(["width:100%;font-size:12px;font-weight:", ";line-height:1.5;letter-spacing:0.4px;color:", ";", ""], _font.fontWeight.normal, _color.colorGrayscale.gray500, _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",
@@ -145,7 +145,7 @@ 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"].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  "]))));
+})(["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.colorGrayscale.gray300), _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",
@@ -162,14 +162,14 @@ var flickerAnimation = /*#__PURE__*/(0, _styledComponents.keyframes)(["0%,100%{o
 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:", ";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.fontFamily["default"], _font.fontWeight.normal, _color["default"].gray, 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.fontFamily["default"], _font.fontWeight.normal, _color.colorGrayscale.gray500, function (props) {
   return props.visible ? 'visible' : 'hidden';
-}, _color["default"].red, _color["default"].white, _font.fontFamily["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  "]))));
+}, _color.colorBrand.heavy, _color.colorGrayscale.white, _font.fontFamily["default"], flickerAnimation, _color.colorGrayscale.gray900, _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:", ";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.fontWeight.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    "]))));
+})(["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.colorGrayscale.white, _color.colorSupportive.heavy, _color.colorSupportive.heavy, _color.colorSupportive.heavy, _font.fontWeight.normal, _color.colorGrayscale.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

@@ -19,8 +19,6 @@ var _iconList = _interopRequireDefault(require("./icon-list"));
 
 var _styles = _interopRequireDefault(require("./constants/styles"));
 
-var _color = _interopRequireDefault(require("./constants/color"));
-
 var _css = require("@twreporter/core/lib/utils/css");
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
@@ -33,6 +31,8 @@ var _font = require("@twreporter/core/lib/constants/font");
 
 var _fundraising = _interopRequireDefault(require("@twreporter/core/lib/constants/fundraising"));
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -62,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 ", ";width:100%;background-color:", ";padding:0;", " *{box-sizing:border-box;}"], _color["default"].lightGray, function (props) {
+})(["border-top:solid 0.5px ", ";width:100%;background-color:", ";padding:0;", " *{box-sizing:border-box;}"], _color.colorGrayscale.gray300, function (props) {
   return props.bgColor;
 }, _mediaQuery["default"].tabletAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    min-height: ", "px;\n  "])), _styles["default"].footerHeight.desktop));
 
@@ -79,7 +79,7 @@ var CompanyInfo = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var InfoContainer = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   displayName: "footer__InfoContainer",
   componentId: "d1uef9-3"
-})(["font-size:12px;font-weight:", ";letter-spacing:0.4px;color:", ";", ""], _font.fontWeight.normal, _color["default"].gray, _mediaQuery["default"].mobileOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    text-align: center;\n  "]))));
+})(["font-size:12px;font-weight:", ";letter-spacing:0.4px;color:", ";", ""], _font.fontWeight.normal, _color.colorGrayscale.gray500, _mediaQuery["default"].mobileOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    text-align: center;\n  "]))));
 
 var Copyright = function Copyright() {
   var currentYear = new Date().getFullYear();
@@ -130,7 +130,7 @@ Footer.propTypes = {
   pathname: _propTypes["default"].string
 };
 Footer.defaultProps = {
-  bgColor: _color["default"].white,
+  bgColor: _color.colorGrayscale.white,
   releaseBranch: _releaseBranch["default"].release,
   host: '',
   pathname: ''

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

@@ -15,7 +15,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _storageUrlProcessor = require("@twreporter/core/lib/utils/storage-url-processor");
 
-var _color = _interopRequireDefault(require("../constants/color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
@@ -83,7 +83,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:", ";display:", ";"], _color["default"].white, function (props) {
+})(["position:absolute;justify-content:center;align-items:center;background-color:", ";display:", ";"], _color.colorGrayscale.white, function (props) {
   return props.display;
 });
 

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

@@ -19,14 +19,14 @@ var _image = _interopRequireDefault(require("./image"));
 
 var _mockupSpec = _interopRequireDefault(require("../constants/mockup-spec"));
 
-var _color = _interopRequireDefault(require("../constants/color"));
-
 var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _font = require("@twreporter/core/lib/constants/font");
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 var _forEach = _interopRequireDefault(require("lodash/forEach"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -69,7 +69,7 @@ var _ = {
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list-item__Container",
   componentId: "sc-1dx5lew-0"
-})(["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: 100%;\n  "]))), _color["default"].darkGray);
+})(["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: 100%;\n  "]))), _color.colorGrayscale.gray900);
 
 var HoverEffect = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list-item__HoverEffect",
@@ -89,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:", ";font-size:12px;line-height:1.33;margin-bottom:10px;"], _color["default"].red);
+})(["color:", ";font-size:12px;line-height:1.33;margin-bottom:10px;"], _color.colorBrand.heavy);
 
 var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list-item__Title",
   componentId: "sc-1dx5lew-5"
-})(["font-size:20px;font-weight:", ";font-family:", ";line-height:1.4;color:", ";margin-bottom:10px;"], _font.fontWeight.bold, _font.fontFamily.title, _color["default"].darkGray);
+})(["font-size:20px;font-weight:", ";font-family:", ";line-height:1.4;color:", ";margin-bottom:10px;"], _font.fontWeight.bold, _font.fontFamily.title, _color.colorGrayscale.gray900);
 
 var Desc = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list-item__Desc",
@@ -115,9 +115,9 @@ var Tag = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   displayName: "list-item__Tag",
   componentId: "sc-1dx5lew-9"
 })(["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;
+  return props.selected ? _color.colorBrand.heavy : _color.colorGrayscale.gray100;
+}, _color.colorBrand.dark, function (props) {
+  return props.selected ? _color.colorGrayscale.white : _color.colorBrand.heavy;
 }, _font.fontWeight.bold);
 
 var ListItem = /*#__PURE__*/function (_PureComponent) {

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

@@ -25,12 +25,12 @@ var _section = require("./section");
 
 var _topics = require("../../constants/topics");
 
-var _color = _interopRequireDefault(require("../../constants/color"));
-
 var _font = require("@twreporter/core/lib/constants/font");
 
 var _titleBar = require("@twreporter/react-components/lib/title-bar");
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
@@ -71,7 +71,7 @@ var _ = {
 var NoData = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "topics__NoData",
   componentId: "sc-1n6udj1-0"
-})(["width:100%;font-size:16px;color:", ";font-weight:", ";text-align:center;"], _color["default"].darkGray, _font.fontWeight.normal);
+})(["width:100%;font-size:16px;color:", ";font-weight:", ";text-align:center;"], _color.colorGrayscale.gray900, _font.fontWeight.normal);
 
 var Topics = /*#__PURE__*/function (_Component) {
   _inherits(Topics, _Component);

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

@@ -19,14 +19,14 @@ var _image = _interopRequireDefault(require("../image"));
 
 var _predefinedCss = require("../../constants/predefined-css");
 
-var _color = _interopRequireDefault(require("../../constants/color"));
-
 var _css = require("@twreporter/core/lib/utils/css");
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _font = require("@twreporter/core/lib/constants/font");
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 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); }
@@ -84,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 ", ";\n    overflow: hidden;\n    flex-direction: column;\n  "])), _color["default"].gray), _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.colorGrayscale.gray300), _predefinedCss.resetLinkStyle, _predefinedCss.linkHoverFadeOut);
 
 var PostImage = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "post-item__PostImage",
@@ -94,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:", ";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.fontWeight.bold, _font.fontFamily.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)));
+})(["color:", ";font-weight:", ";font-family:", ";font-size:16px;line-height:1.5;flex:1 1 auto;white-space:normal;order:2;", " padding:", ";", " ", ""], _color.colorGrayscale.gray900, _font.fontWeight.bold, _font.fontFamily.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,7 +9,7 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _color = _interopRequireDefault(require("../../constants/color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 var _templateObject;
 
@@ -20,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 ", ";\n    }\n    a:last-child {\n      border-bottom: medium none currentcolor;\n    }\n  "])), _color["default"].gray));
+})(["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.colorGrayscale.gray300));
 
 var _default = PostsContainer;
 exports["default"] = _default;

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

@@ -15,14 +15,14 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _predefinedCss = require("../../constants/predefined-css");
 
-var _color = _interopRequireDefault(require("../../constants/color"));
-
 var _css = require("@twreporter/core/lib/utils/css");
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _font = require("@twreporter/core/lib/constants/font");
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -74,7 +74,7 @@ var SectionContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var GoToTopic = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "section__GoToTopic",
   componentId: "sc-125nvxn-2"
-})(["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.fontWeight.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;path{stroke:currentcolor;}}"], _color.colorSupportive.heavy, (0, _css.arrayToCssShorthand)(styles.goToTopicPadding), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      max-width: 290px;\n    "]))), _font.fontWeight.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

@@ -21,12 +21,12 @@ var _predefinedCss = require("../../constants/predefined-css");
 
 var _topics = require("../../constants/topics");
 
-var _color = _interopRequireDefault(require("../../constants/color"));
-
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _font = require("@twreporter/core/lib/constants/font");
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 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); }
@@ -130,7 +130,7 @@ 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:", ";"], 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);
+})(["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.colorGrayscale.gray900);
 
 var TopicTitle = /*#__PURE__*/_styledComponents["default"].h2.withConfig({
   displayName: "topic-item__TopicTitle",

package/lib/pagination/index.js

@@ -15,12 +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 _color = require("@twreporter/core/lib/constants/color");
+
 var _concat = _interopRequireDefault(require("lodash/concat"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -84,7 +84,7 @@ PageUpIcon.defaultProps = {
   height: "11",
   viewBox: "0 0 9 11",
   xmlns: "http://www.w3.org/2000/svg"
-}; // constants
+}; // @twreporter
 
 var _ = {
   concat: _concat["default"],
@@ -116,15 +116,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:", ";position:relative;>:first-child{", "}"], styles.btnBoxSize.desktop, styles.btnBoxSize.desktop, _color["default"].brown, _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.colorSupportive.heavy, _predefinedCss.absoluteCentering);
 
 var PageNumberBox = /*#__PURE__*/(0, _styledComponents["default"])(Box).withConfig({
   displayName: "pagination__PageNumberBox",
   componentId: "sc-17bqftr-3"
-})(["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';
+})(["border:solid 1px ", ";border-radius:50%;line-height:", "px;background-color:", ";> span{color:", ";}", ""], _color.colorSupportive.heavy, styles.btnBoxSize.desktop, function (props) {
+  return props.isCurrent ? _color.colorSupportive.heavy : 'transparent';
 }, function (props) {
-  return props.isCurrent ? _color["default"].white : _color["default"].brown;
+  return props.isCurrent ? _color.colorGrayscale.white : _color.colorSupportive.heavy;
 }, _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: ", ";\n  "])), function (props) {
   return props.isCurrent ? '' : 'none';
 }));
@@ -135,7 +135,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:", ";}"], (0, _css.arrayToCssShorthand)(styles.prevNextBtnPadding), _color["default"].brown);
+})(["padding:", ";cursor:pointer;path{stroke:", ";}"], (0, _css.arrayToCssShorthand)(styles.prevNextBtnPadding), _color.colorSupportive.heavy);
 /*
 Pages Array:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.22.0-rc.0",
+  "version": "8.22.0-rc.1",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -51,5 +51,5 @@
     "react-dom": "^16.0.0",
     "storybook": "^7.5.2"
   },
-  "gitHead": "11d31bc72b486f38fd486f792c7cdd466ce21ce0"
+  "gitHead": "80e49951ecff649c6a8048d53719e3c35c8c0ca8"
 }

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

@@ -1,14 +0,0 @@
-"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

@@ -1,13 +0,0 @@
-"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/error/constants/color.js

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

package/lib/footer/constants/color.js

@@ -1,15 +0,0 @@
-"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/listing-page/constants/color.js

@@ -1,17 +0,0 @@
-"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/pagination/constants/color.js

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