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

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.9.1-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.9.1-rc.0...@twreporter/react-article-components@1.9.1-rc.1) (2023-11-13)
+
+
+### Bug Fixes
+
+* use design guideline color in article page ([5d38172](https://github.com/twreporter/twreporter-npm-packages/commit/5d381721915792919d827d5b3a39785aac3b70bf))
+
+
+
+
+
+## [1.9.1-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.9.0...@twreporter/react-article-components@1.9.1-rc.0) (2023-11-13)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
 # [1.9.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.9.0-rc.1...@twreporter/react-article-components@1.9.0) (2023-10-30)
 
 **Note:** Version bump only for package @twreporter/react-article-components

package/lib/components/article-page.js

@@ -39,8 +39,6 @@ var _desktopTools = _interopRequireDefault(require("./aside/desktop-tools"));
 
 var _theme = _interopRequireDefault(require("../constants/theme"));
 
-var _color = _interopRequireDefault(require("../constants/color"));
-
 var _anchor = require("../constants/anchor");
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
@@ -49,6 +47,8 @@ var _propTypes2 = _interopRequireDefault(require("@twreporter/core/lib/constants
 
 var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
 
+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, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
@@ -102,7 +102,7 @@ var SeprationLine = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "article-page__SeprationLine",
   componentId: "sc-1wuywdb-2"
 })(["", ""], _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n  "])), function (props) {
-  return props.visible ? (0, _styledComponents.css)(["width:100%;border-bottom:solid 1px ", ";padding-bottom:60px;"], _color["default"].gray40) : (0, _styledComponents.css)(["padding-bottom:30px;"]);
+  return props.visible ? (0, _styledComponents.css)(["width:100%;border-bottom:solid 1px ", ";padding-bottom:60px;"], _color.colorGrayscale.gray200) : (0, _styledComponents.css)(["padding-bottom:30px;"]);
 }));
 
 var BodyBackground = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -160,14 +160,14 @@ var BackgroundBlock = /*#__PURE__*/(0, _styledComponents["default"])(BorderBox).
 function getBackgroundBlockStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["background-color:", ";", "{background-color:", ";}"], _color["default"].lightPink, BodyBackground, _color["default"].gray20);
+      return (0, _styledComponents.css)(["background-color:", ";", "{background-color:", ";}"], _color.COLOR_PINK_ARTICLE.lightPink, BodyBackground, _color.colorGrayscale.gray100);
 
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["background-color:", ";", "{background-color:", ";}"], _color["default"].darkBlue, BodyBackground, _color["default"].darkBlue);
+      return (0, _styledComponents.css)(["background-color:", ";", "{background-color:", ";}"], _color.COLOR_PINK_ARTICLE.darkBlue, BodyBackground, _color.COLOR_PINK_ARTICLE.darkBlue);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["background-color:", ";", "{background-color:", ";}"], _color["default"].gray30, BodyBackground, _color["default"].gray30);
+      return (0, _styledComponents.css)(["background-color:", ";", "{background-color:", ";}"], _color.colorGrayscale.gray100, BodyBackground, _color.colorGrayscale.gray100);
   }
 }
 

package/lib/components/aside/desktop-tools.js

@@ -96,7 +96,7 @@ var ToolsBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 }), function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["", "{background-color:", ";svg{background-color:", ";}}", ",", ",", ",", "{svg{background-color:", ";}&::after{color:", ";}&:hover svg{background-color:", ";}}"], ShareIconBlock, _color.colorPhoto.heavy, _color.colorGrayscale.gray100, TextIconBlock, BackToTopicBlock, PrintIconBlock, BookmarkIconBlock, _color.colorGrayscale.gray100, _color.colorSupportive.main, _color.colorSupportive.main);
+      return (0, _styledComponents.css)(["", "{background-color:", ";svg{background-color:", ";}}", ",", ",", ",", "{svg{background-color:", ";}&::after{color:", ";}&:hover svg{background-color:", ";}}"], ShareIconBlock, _color.colorPhoto.heavy, _color.colorGrayscale.gray100, TextIconBlock, BackToTopicBlock, PrintIconBlock, BookmarkIconBlock, _color.colorGrayscale.gray100, _color.colorSupportive.pastel, _color.colorSupportive.pastel);
 
     default:
       return '';

package/lib/components/aside/metadata.js

@@ -74,10 +74,10 @@ var _ = {
 };
 
 var createLine = function createLine(topOrBottom, themeName) {
-  var borderColor = _color.COLOR_ARTICLE.gray50;
+  var borderColor = _color.colorGrayscale.gray300;
 
   if (themeName === _theme.ARTICLE_THEME.v2.photo) {
-    borderColor = _color.COLOR_ARTICLE.gray10;
+    borderColor = _color.colorGrayscale.gray400;
   }
 
   return (0, _styledComponents.css)(["position:relative;border-", ":0.5px solid ", ";padding-", ":10px;&::after{content:'';border-right:0.5px solid ", ";width:1px;height:12px;", ":0;right:0;position:absolute;}"], topOrBottom, borderColor, topOrBottom, borderColor, topOrBottom);
@@ -112,7 +112,7 @@ var DateSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "sc-1c3910m-4"
 })(["", " font-size:14px;color:", ";margin-left:5px;margin-top:15px;&::before{content:'\u520A\u51FA\u65E5\u671F';margin-right:10px;}"], function (props) {
   return createLine('top', props.theme.name);
-}, _color.COLOR_ARTICLE.gray70);
+}, _color.colorGrayscale.gray500);
 
 var AuthorSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorSection",
@@ -127,7 +127,7 @@ var AuthorRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var AuthorJobTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorJobTitle",
   componentId: "sc-1c3910m-7"
-})(["font-size:14px;color:", ";margin-left:5px;padding-top:2px;line-height:1;flex-shrink:0;"], _color.COLOR_ARTICLE.gray80);
+})(["font-size:14px;color:", ";margin-left:5px;padding-top:2px;line-height:1;flex-shrink:0;"], _color.colorGrayscale.gray600);
 
 var AuthorNames = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorNames",
@@ -142,7 +142,7 @@ var AuthorName = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var RawAuthorText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__RawAuthorText",
   componentId: "sc-1c3910m-10"
-})(["font-size:14px;color:", ";padding-left:5px;"], _color.COLOR_ARTICLE.gray80);
+})(["font-size:14px;color:", ";padding-left:5px;"], _color.colorGrayscale.gray600);
 
 var AngledSeparationLine = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AngledSeparationLine",
@@ -176,14 +176,14 @@ var MetadataContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig
 function getMetadataContainerStyles(themeName) {
   switch (themeName) {
     case _theme.ARTICLE_THEME.v2.photo:
-      return (0, _styledComponents.css)(["", ",", "{color:", ";&:hover{border-color:", ";}}", "{border-color:", ";}", "{border-color:", ";color:", ";&:hover{color:", ";border-color:", ";}}", "{color:", ";}"], CategoryText, AuthorName, _color.COLOR_ARTICLE.milkTea, _color.COLOR_ARTICLE.milkTea, AngledSeparationLine, _color.COLOR_ARTICLE.brown, TagButton, _color.COLOR_ARTICLE.gray80, _color.COLOR_ARTICLE.gray80, _color.COLOR_ARTICLE.white, _color.COLOR_ARTICLE.white, TextLink, _color.COLOR_ARTICLE.milkTea);
+      return (0, _styledComponents.css)(["", ",", "{color:", ";&:hover{border-color:", ";}}", "{border-color:", ";}", "{border-color:", ";color:", ";&:hover{color:", ";border-color:", ";}}", "{color:", ";}"], CategoryText, AuthorName, _color.colorSupportive.main, _color.colorSupportive.main, AngledSeparationLine, _color.colorSupportive.heavy, TagButton, _color.colorGrayscale.gray600, _color.colorGrayscale.gray600, _color.colorGrayscale.white, _color.colorGrayscale.white, TextLink, _color.colorSupportive.main);
 
     case _theme.ARTICLE_THEME.v2.pink:
-      return (0, _styledComponents.css)(["", ",", "{color:", ";&:hover{border-color:", ";}}", "{border-color:", ";}", "{border-color:", ";color:", ";&:hover{background-color:", ";}}", "{color:", ";}"], CategoryText, AuthorName, _color.COLOR_ARTICLE.blue, _color.COLOR_ARTICLE.blue, AngledSeparationLine, _color.COLOR_ARTICLE.pink, TagButton, _color.COLOR_ARTICLE.gray80, _color.COLOR_ARTICLE.gray80, _color.COLOR_ARTICLE.white, TextLink, _color.COLOR_ARTICLE.blue);
+      return (0, _styledComponents.css)(["", ",", "{color:", ";&:hover{border-color:", ";}}", "{border-color:", ";}", "{border-color:", ";color:", ";&:hover{background-color:", ";}}", "{color:", ";}"], CategoryText, AuthorName, _color.COLOR_PINK_ARTICLE.blue, _color.COLOR_PINK_ARTICLE.blue, AngledSeparationLine, _color.COLOR_PINK_ARTICLE.pink, TagButton, _color.colorGrayscale.gray600, _color.colorGrayscale.gray600, _color.colorGrayscale.white, TextLink, _color.COLOR_PINK_ARTICLE.blue);
 
     case _theme.ARTICLE_THEME.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["", ",", "{color:", ";&:hover{border-color:", ";}}", "{border-color:", ";}", "{border-color:", ";color:", ";&:hover{background-color:", ";}}", "{color:", ";}"], CategoryText, AuthorName, _color.COLOR_ARTICLE.brown, _color.COLOR_ARTICLE.brown, AngledSeparationLine, _color.COLOR_ARTICLE.milkTea, TagButton, _color.COLOR_ARTICLE.gray80, _color.COLOR_ARTICLE.gray80, _color.COLOR_ARTICLE.white, TextLink, _color.COLOR_ARTICLE.brown);
+      return (0, _styledComponents.css)(["", ",", "{color:", ";&:hover{border-color:", ";}}", "{border-color:", ";}", "{border-color:", ";color:", ";&:hover{background-color:", ";}}", "{color:", ";}"], CategoryText, AuthorName, _color.colorSupportive.heavy, _color.colorSupportive.heavy, AngledSeparationLine, _color.colorSupportive.main, TagButton, _color.colorGrayscale.gray600, _color.colorGrayscale.gray600, _color.colorGrayscale.white, TextLink, _color.colorSupportive.heavy);
   }
 }
 

package/lib/components/body/annotation.js

@@ -21,7 +21,7 @@ var _theme = _interopRequireDefault(require("../../constants/theme"));
 
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
-var _color = _interopRequireDefault(require("../../constants/color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
@@ -84,9 +84,9 @@ var AnnotationContent = /*#__PURE__*/_styledComponents["default"].div.withConfig
   componentId: "sc-5e8oaw-3"
 })(["display:", ";background:", ";font-size:", "px;line-height:2.11;letter-spacing:0.5px;color:", ";font-weight:", ";border-width:2px 0 0 0;border-style:solid;padding:25px 11px;margin-bottom:10px;animation:", " 300ms ease;"], function (props) {
   return props.isExpanded ? 'block' : 'none';
-}, _color["default"].white, function (props) {
+}, _color.colorGrayscale.white, function (props) {
   return props.theme.fontSizeOffset + 16;
-}, _color["default"].gray85, _typography["default"].font.weight.normal, slideDownAndFadeIn);
+}, _color.colorGrayscale.gray700, _typography["default"].font.weight.normal, slideDownAndFadeIn);
 
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "annotation__Container",
@@ -98,14 +98,14 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 function getContainerStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["", "{color:", ";}", "{border-color:", ";&::before,&::after{background-color:", ";}}", "{border-color:", ";}"], AnnotatedText, _color["default"].blue, Indicator, _color["default"].blue, _color["default"].blue, AnnotationContent, _color["default"].pink);
+      return (0, _styledComponents.css)(["", "{color:", ";}", "{border-color:", ";&::before,&::after{background-color:", ";}}", "{border-color:", ";}"], AnnotatedText, _color.COLOR_PINK_ARTICLE.blue, Indicator, _color.COLOR_PINK_ARTICLE.blue, _color.COLOR_PINK_ARTICLE.blue, AnnotationContent, _color.COLOR_PINK_ARTICLE.pink);
 
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["", "{color:", ";}", "{border-color:", ";&::before,&::after{background-color:", ";}}", "{border-color:", ";}"], AnnotatedText, _color["default"].milkTea, Indicator, _color["default"].milkTea, _color["default"].milkTea, AnnotationContent, _color["default"].milkTea);
+      return (0, _styledComponents.css)(["", "{color:", ";}", "{border-color:", ";&::before,&::after{background-color:", ";}}", "{border-color:", ";}"], AnnotatedText, _color.colorSupportive.main, Indicator, _color.colorSupportive.main, _color.colorSupportive.main, AnnotationContent, _color.colorSupportive.main);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["", "{color:", ";}", "{border-color:", ";&::before,&::after{background-color:", ";}}", "{border-color:", ";}"], AnnotatedText, _color["default"].brown, Indicator, _color["default"].milkTea, _color["default"].milkTea, AnnotationContent, _color["default"].milkTea);
+      return (0, _styledComponents.css)(["", "{color:", ";}", "{border-color:", ";&::before,&::after{background-color:", ";}}", "{border-color:", ";}"], AnnotatedText, _color.colorSupportive.heavy, Indicator, _color.colorSupportive.main, _color.colorSupportive.main, AnnotationContent, _color.colorSupportive.main);
   }
 }
 

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

@@ -17,7 +17,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _theme = _interopRequireDefault(require("../../../constants/theme"));
 
-var _color = _interopRequireDefault(require("../../../constants/color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 var _templateObject, _templateObject2;
 
@@ -66,28 +66,28 @@ PlayIcon.defaultProps = {
 function getIconColor(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return _color["default"].milkTea;
+      return _color.colorSupportive.main;
 
     case _theme["default"].article.v2.pink:
-      return _color["default"].darkPink;
+      return _color.COLOR_PINK_ARTICLE.darkPink;
 
     case _theme["default"].article.v2["default"]:
     default:
-      return _color["default"].brown;
+      return _color.colorSupportive.heavy;
   }
 }
 
 function getIconWrapperStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["background-color:", ";border-color:", ";"], _color["default"].darkBlue, _color["default"].gray10);
+      return (0, _styledComponents.css)(["background-color:", ";border-color:", ";"], _color.COLOR_PINK_ARTICLE.darkBlue, _color.colorGrayscale.gray400);
 
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["background-color:", ";border-color:", ";"], _color["default"].gray20, _color["default"].gray50);
+      return (0, _styledComponents.css)(["background-color:", ";border-color:", ";"], _color.colorGrayscale.gray100, _color.colorGrayscale.gray300);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["background-color:", ";border-color:", ";"], _color["default"].gray30, _color["default"].gray50);
+      return (0, _styledComponents.css)(["background-color:", ";border-color:", ";"], _color.colorGrayscale.gray100, _color.colorGrayscale.gray300);
   }
 }
 

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

@@ -29,7 +29,7 @@ var _theme = _interopRequireDefault(require("../../../constants/theme"));
 
 var _typography = _interopRequireDefault(require("../../../constants/typography"));
 
-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;
 
@@ -103,14 +103,14 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 function getContainerStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["border-color:", ";", "{color:", ";}", "{color:", ";}", "{color:", ";}"], _color["default"].gray10, TimeRow, _color["default"].notSoWhite, Title, _color["default"].white, Desc, _color["default"].notSoWhite);
+      return (0, _styledComponents.css)(["border-color:", ";", "{color:", ";}", "{color:", ";}", "{color:", ";}"], _color.colorGrayscale.gray400, TimeRow, _color.colorGrayscale.gray300, Title, _color.colorGrayscale.white, Desc, _color.colorGrayscale.gray300);
 
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["border-color:", ";", "{color:", ";}", ",", "{color:", ";}"], _color["default"].gray50, TimeRow, _color["default"].gray80, Title, Desc, _color["default"].gray85);
+      return (0, _styledComponents.css)(["border-color:", ";", "{color:", ";}", ",", "{color:", ";}"], _color.colorGrayscale.gray300, TimeRow, _color.colorGrayscale.gray600, Title, Desc, _color.colorGrayscale.gray700);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["border-color:", ";", "{color:", ";}", ",", "{color:", ";}"], _color["default"].gray50, TimeRow, _color["default"].gray80, Title, Desc, _color["default"].gray90);
+      return (0, _styledComponents.css)(["border-color:", ";", "{color:", ";}", ",", "{color:", ";}"], _color.colorGrayscale.gray300, TimeRow, _color.colorGrayscale.gray600, Title, Desc, _color.colorGrayscale.gray800);
   }
 }
 

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

@@ -17,7 +17,7 @@ var _slider = _interopRequireWildcard(require("../slider"));
 
 var _theme = _interopRequireDefault(require("../../../constants/theme"));
 
-var _color = _interopRequireDefault(require("../../../constants/color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -28,14 +28,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 function getContainerStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["", "{background-color:", ";}", "{background-color:", ";}"], _slider.Indicator, _color["default"].darkPink, _slider.Progress, _color["default"].pink);
+      return (0, _styledComponents.css)(["", "{background-color:", ";}", "{background-color:", ";}"], _slider.Indicator, _color.COLOR_PINK_ARTICLE.darkPink, _slider.Progress, _color.COLOR_PINK_ARTICLE.pink);
 
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["", "{background-color:", ";}", "{background-color:", ";}"], _slider.Indicator, _color["default"].brown, _slider.Progress, _color["default"].milkTea);
+      return (0, _styledComponents.css)(["", "{background-color:", ";}", "{background-color:", ";}"], _slider.Indicator, _color.colorSupportive.heavy, _slider.Progress, _color.colorSupportive.main);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["", "{background-color:", ";}", "{background-color:", ";}"], _slider.Indicator, _color["default"].brown, _slider.Progress, _color["default"].milkTea);
+      return (0, _styledComponents.css)(["", "{background-color:", ";}", "{background-color:", ";}"], _slider.Indicator, _color.colorSupportive.heavy, _slider.Progress, _color.colorSupportive.main);
   }
 }
 
@@ -44,7 +44,7 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "prkj1w-0"
 })(["", " width:100%;height:4px;border-radius:2px;position:relative;", "{width:8px;height:8px;border-radius:50%;top:50%;transform:translateY(-50%);}", "{background:", ";}"], function (props) {
   return getContainerStyles(props.theme.name);
-}, _slider.Indicator, _slider.Rail, _color["default"].gray50);
+}, _slider.Indicator, _slider.Rail, _color.colorGrayscale.gray300);
 
 var resumePlayingAfterSeek = false;
 

package/lib/components/body/blockquote.js

@@ -23,7 +23,7 @@ var _theme = _interopRequireDefault(require("../../constants/theme"));
 
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
-var _color = _interopRequireDefault(require("../../constants/color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
@@ -66,12 +66,12 @@ var _ = {
 function getQuoteStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["color:", ";border-left:", ";"], _color["default"].gray5, _color["default"].gray10);
+      return (0, _styledComponents.css)(["color:", ";border-left:", ";"], _color.colorGrayscale.gray600, _color.colorGrayscale.gray400);
 
     case _theme["default"].article.v2.pink:
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["color:", ";border-left:", ";"], _color["default"].gray80, _color["default"].gray60);
+      return (0, _styledComponents.css)(["color:", ";border-left:", ";"], _color.colorGrayscale.gray600, _color.colorGrayscale.gray500);
   }
 }
 

package/lib/components/body/brief.js

@@ -23,7 +23,7 @@ var _theme = _interopRequireDefault(require("../../constants/theme"));
 
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
-var _color = _interopRequireDefault(require("../../constants/color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
@@ -68,12 +68,12 @@ var Content = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 })(["font-family:", ";p{color:", ";line-height:1.7;letter-spacing:0.7px;font-weight:", ";font-size:", "px;margin:0 0 1em 0;&:last-child{margin:0;}}", ""], _typography["default"].font.family.title, function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      return _color["default"].notSoWhite;
+      return _color.colorGrayscale.gray300;
 
     case _theme["default"].article.v2.pink:
     case _theme["default"].article.v2["default"]:
     default:
-      return _color["default"].gray80;
+      return _color.colorGrayscale.gray600;
   }
 }, _typography["default"].font.weight.bold, function (props) {
   return props.theme.fontSizeOffset + 20;

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

@@ -21,7 +21,7 @@ var _theme = _interopRequireDefault(require("../../constants/theme"));
 
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
-var _color = _interopRequireDefault(require("../../constants/color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
@@ -86,14 +86,14 @@ var QuoteContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 function getQuoteContainerStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["", ",", "{color:", ";}", "{background-color:", ";}"], QuoteContent, QuoteBy, _color["default"].gray90, VerticalLine, _color["default"].pink);
+      return (0, _styledComponents.css)(["", ",", "{color:", ";}", "{background-color:", ";}"], QuoteContent, QuoteBy, _color.colorGrayscale.gray800, VerticalLine, _color.COLOR_PINK_ARTICLE.pink);
 
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["", ",", "{color:", ";}", "{background-color:", ";}"], QuoteContent, QuoteBy, _color["default"].notSoWhite, VerticalLine, _color["default"].brown);
+      return (0, _styledComponents.css)(["", ",", "{color:", ";}", "{background-color:", ";}"], QuoteContent, QuoteBy, _color.colorGrayscale.gray300, VerticalLine, _color.colorSupportive.heavy);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["", ",", "{color:", ";}", "{background-color:", ";}"], QuoteContent, QuoteBy, _color["default"].gray90, VerticalLine, _color["default"].milkTea);
+      return (0, _styledComponents.css)(["", ",", "{color:", ";}", "{background-color:", ";}"], QuoteContent, QuoteBy, _color.colorGrayscale.gray800, VerticalLine, _color.colorSupportive.main);
   }
 }
 

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

@@ -21,14 +21,14 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _merge = _interopRequireDefault(require("lodash/merge"));
 
-var _color = _interopRequireDefault(require("../../constants/color"));
-
 var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
 
 var _theme = _interopRequireDefault(require("../../constants/theme"));
 
 var _positionZIndex = _interopRequireDefault(require("../../constants/position-z-index"));
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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); }
@@ -96,12 +96,12 @@ var Caption = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 })(["line-height:1.43;letter-spacing:0.4px;font-size:14px;color:", ";padding:15px 15px 0 15px;"], function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      return _color["default"].notSoWhite;
+      return _color.colorGrayscale.gray300;
 
     case _theme["default"].article.v2.pink:
     case _theme["default"].article.v2["default"]:
     default:
-      return _color["default"].gray80;
+      return _color.colorGrayscale.gray600;
   }
 });
 

package/lib/components/body/headings.js

@@ -17,7 +17,7 @@ var _theme = _interopRequireDefault(require("../../constants/theme"));
 
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
-var _color = _interopRequireDefault(require("../../constants/color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -31,12 +31,12 @@ var _ = {
 var heading = /*#__PURE__*/(0, _styledComponents.css)(["margin:0;font-weight:", ";color:", ";"], _typography["default"].font.weight.bold, function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      return _color["default"].notSoWhite;
+      return _color.colorGrayscale.gray300;
 
     case _theme["default"].article.v2.pink:
     case _theme["default"].article.v2["default"]:
     default:
-      return _color["default"].gray90;
+      return _color.colorGrayscale.gray800;
   }
 });
 

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

@@ -21,10 +21,10 @@ var _slider = _interopRequireWildcard(require("./slider"));
 
 var _theme = _interopRequireDefault(require("../../constants/theme"));
 
-var _color = _interopRequireDefault(require("../../constants/color"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _templateObject, _templateObject2, _templateObject3;
@@ -92,17 +92,17 @@ var getResponsiveBackground = function getResponsiveBackground(imageSetPropKey)
   });
 };
 
-var sharedStyleOfIndicatorPointer = /*#__PURE__*/(0, _styledComponents.css)(["padding-top:4px;text-align:center;font-size:12px;display:block;position:absolute;top:0;width:24px;height:24px;background:", ";color:", ";"], _color["default"].white, function (props) {
+var sharedStyleOfIndicatorPointer = /*#__PURE__*/(0, _styledComponents.css)(["padding-top:4px;text-align:center;font-size:12px;display:block;position:absolute;top:0;width:24px;height:24px;background:", ";color:", ";"], _color.colorGrayscale.white, function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      return _color["default"].brown;
+      return _color.colorSupportive.heavy;
 
     case _theme["default"].article.v2.pink:
-      return _color["default"].pink;
+      return _color.COLOR_PINK_ARTICLE.pink;
 
     case _theme["default"].article.v2["default"]:
     default:
-      return _color["default"].milkTea;
+      return _color.colorSupportive.main;
   }
 });
 
@@ -111,7 +111,7 @@ var ImageContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "sc-1y1eq1w-0"
 })(["overflow:hidden;position:relative;width:100%;padding-bottom:", ";>div{position:absolute;top:0;left:0;width:100%;height:100%;}", ",", "{background-repeat:no-repeat;background-size:auto 100%;background-position:left center;}", "{", "}", "{", "}", "{width:3px;background:", ";&::after{content:\"", "\";", " left:0;transform:translateX(-100%);border-radius:0 0 0 100%;text-align:right;padding-right:3px;}&::before{content:\"", "\";", " right:0;transform:translateX(100%);border-radius:0 0 100% 0;text-align:left;padding-left:3px;}}"], function (props) {
   return "".concat(100 * props.heightWidthRatio, "%");
-}, _slider.Progress, _slider.Rail, _slider.Progress, getResponsiveBackground('leftImageSet'), _slider.Rail, getResponsiveBackground('rightImageSet'), _slider.Indicator, _color["default"].white, unicodeToString('25C4'), sharedStyleOfIndicatorPointer, unicodeToString('25BA'), sharedStyleOfIndicatorPointer);
+}, _slider.Progress, _slider.Rail, _slider.Progress, getResponsiveBackground('leftImageSet'), _slider.Rail, getResponsiveBackground('rightImageSet'), _slider.Indicator, _color.colorGrayscale.white, unicodeToString('25C4'), sharedStyleOfIndicatorPointer, unicodeToString('25BA'), sharedStyleOfIndicatorPointer);
 
 var ImageDiff = /*#__PURE__*/function (_PureComponent) {
   _inherits(ImageDiff, _PureComponent);

package/lib/components/body/infobox.js

@@ -15,8 +15,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
-
 var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
 
 var _css = _interopRequireDefault(require("../../constants/css"));
@@ -25,10 +23,12 @@ var _theme = _interopRequireDefault(require("../../constants/theme"));
 
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
-var _color = _interopRequireDefault(require("../../constants/color"));
-
 var _anchor = require("../../constants/anchor");
 
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _color = require("@twreporter/core/lib/constants/color");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -69,28 +69,28 @@ var widthCSS = /*#__PURE__*/(0, _styledComponents.css)(["", " ", " ", " ", ""],
 var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infobox__Title",
   componentId: "sc-1rp3uhy-0"
-})(["", " color:", ";line-height:1.9;letter-spacing:0.7px;font-weight:", ";font-size:", "px;margin:0 auto 21px auto;"], widthCSS, _color["default"].gray85, _typography["default"].font.weight.bold, function (props) {
+})(["", " color:", ";line-height:1.9;letter-spacing:0.7px;font-weight:", ";font-size:", "px;margin:0 auto 21px auto;"], widthCSS, _color.colorGrayscale.gray700, _typography["default"].font.weight.bold, function (props) {
   return props.theme.fontSizeOffset + 20;
 });
 
 var Content = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infobox__Content",
   componentId: "sc-1rp3uhy-1"
-})(["", " color:", ";line-height:1.75;letter-spacing:0.5px;font-weight:", ";font-size:", "px;margin:0 auto;"], widthCSS, _color["default"].gray85, _typography["default"].font.weight.normal, function (props) {
+})(["", " color:", ";line-height:1.75;letter-spacing:0.5px;font-weight:", ";font-size:", "px;margin:0 auto;"], widthCSS, _color.colorGrayscale.gray700, _typography["default"].font.weight.normal, function (props) {
   return props.theme.fontSizeOffset + 16;
 });
 
 function getContainerStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color["default"].brown);
+      return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color.colorSupportive.heavy);
 
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color["default"].pink);
+      return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color.COLOR_PINK_ARTICLE.pink);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color["default"].milkTea);
+      return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color.colorSupportive.main);
   }
 }
 
@@ -99,7 +99,7 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "sc-1rp3uhy-2"
 })(["", " ", " white-space:pre-wrap;background:", ";position:relative;margin:60px auto 0 auto;", " ", " &::before{content:'';display:block;width:58px;height:1px;transform:rotate(34.51deg);transform-origin:right center;position:absolute;right:-15px;top:28px;}&::after{content:'';display:block;width:58px;height:1px;transform:rotate(34.51deg);transform-origin:left center;position:absolute;left:-6px;bottom:22px;}"], function (props) {
   return getContainerStyles(props.theme.name);
-}, _css["default"].linkChildren, _color["default"].white, _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-top: 30px;\n    padding-bottom: 30px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding-top: 40px;\n    padding-bottom: 40px;\n  "]))));
+}, _css["default"].linkChildren, _color.colorGrayscale.white, _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-top: 30px;\n    padding-bottom: 30px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding-top: 40px;\n    padding-bottom: 40px;\n  "]))));
 
 var Infobox = /*#__PURE__*/function (_PureComponent) {
   _inherits(Infobox, _PureComponent);

package/lib/components/body/multimedia.js

@@ -15,7 +15,7 @@ var _theme = _interopRequireDefault(require("../../constants/theme"));
 
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
-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;
 
@@ -79,14 +79,14 @@ var mockup = {
 function getCaptionStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["color:", ";&::after{border-color:", ";}"], _color["default"].notSoWhite, _color["default"].gray10);
+      return (0, _styledComponents.css)(["color:", ";&::after{border-color:", ";}"], _color.colorGrayscale.gray300, _color.colorGrayscale.gray400);
 
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["color:", ";&::after{border-color:", ";}"], _color["default"].gray85, _color["default"].pink);
+      return (0, _styledComponents.css)(["color:", ";&::after{border-color:", ";}"], _color.colorGrayscale.gray700, _color.COLOR_PINK_ARTICLE.pink);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["color:", ";&::after{border-color:", ";}"], _color["default"].gray85, _color["default"].milkTea);
+      return (0, _styledComponents.css)(["color:", ";&::after{border-color:", ";}"], _color.colorGrayscale.gray700, _color.colorSupportive.main);
   }
 }
 

package/lib/components/body/paragraph.js

@@ -19,7 +19,7 @@ var _css = _interopRequireDefault(require("../../constants/css"));
 
 var _theme = _interopRequireDefault(require("../../constants/theme"));
 
-var _color = _interopRequireDefault(require("../../constants/color"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
@@ -40,7 +40,7 @@ var P = /*#__PURE__*/_styledComponents["default"].p.withConfig({
 })(["", " ", " ", ""], _css["default"].paragraphText, _css["default"].linkChildren, function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["strong{color:", ";}"], _color["default"].notSoWhite);
+      return (0, _styledComponents.css)(["strong{color:", ";}"], _color.colorGrayscale.gray300);
 
     default:
       return '';