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

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.25.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.25.0-rc.0...@twreporter/react-components@8.25.0-rc.1) (2024-02-07)
+
+
+### Features
+
+* add more PillButton theme color ([6e28d07](https://github.com/twreporter/twreporter-npm-packages/commit/6e28d079c9c54cd60d75c8fac453ff5d378aece9))
+* add more TextButton theme color & loading ([d72c845](https://github.com/twreporter/twreporter-npm-packages/commit/d72c845e4f73857ff10d6a0293d37402c0d29775))
+* iconWithTextButton P3 => P4 ([27caf83](https://github.com/twreporter/twreporter-npm-packages/commit/27caf832bf455be2d139aa55adfecc9996700596))
+
+
+
+
+
 # [8.25.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.24.1-rc.1...@twreporter/react-components@8.25.0-rc.0) (2024-02-07)
 
 

package/lib/button/components/iconWithTextButton.js

@@ -40,8 +40,8 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   return props.hoverColor;
 }));
 
-var StyledP3 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P3).withConfig({
-  displayName: "iconWithTextButton__StyledP3",
+var StyledP4 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P4).withConfig({
+  displayName: "iconWithTextButton__StyledP4",
   componentId: "sc-1f9d1q4-1"
 })(["margin-top:2px;max-height:", ";opacity:", ";transition:opacity 100ms;"], function (props) {
   return props.hideText ? '0px' : 'none';
@@ -70,9 +70,9 @@ var IconWithTextButton = function IconWithTextButton(_ref) {
     color: color,
     hoverColor: hoverColor,
     disabled: disabled
-  }, iconComponent, /*#__PURE__*/_react["default"].createElement(StyledP3, {
+  }, iconComponent, /*#__PURE__*/_react["default"].createElement(StyledP4, {
     text: text,
-    weight: _paragraph.P3.Weight.NORMAL,
+    weight: _paragraph.P4.Weight.NORMAL,
     hideText: hideText
   }));
 };

package/lib/button/components/textButton.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _theme = require("../utils/theme");
 
@@ -25,10 +27,16 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _theme2 = require("@twreporter/core/lib/constants/theme");
 
-var _excluded = ["text", "leftIconComponent", "rightIconComponent", "size", "theme", "type", "style", "active", "disabled"];
+var _color = require("@twreporter/core/lib/constants/color");
+
+var _excluded = ["text", "leftIconComponent", "rightIconComponent", "size", "theme", "style", "active", "disabled", "loading"];
 
 var _templateObject;
 
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -65,6 +73,31 @@ var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   return props.isLeft ? '0 4px 0 0' : '0 0 0 4px';
 });
 
+var HideOnLoading = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "textButton__HideOnLoading",
+  componentId: "sc-1lwyrq5-2"
+})(["opacity:", ";display:flex;align-items:center;justify-content:center;"], function (props) {
+  return props.show ? 1 : 0;
+});
+
+var RelativeParent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "textButton__RelativeParent",
+  componentId: "sc-1lwyrq5-3"
+})(["position:relative;display:flex;align-items:center;justify-content:center;"]);
+
+var spin = /*#__PURE__*/(0, _styledComponents.keyframes)(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]);
+
+var Loader = /*#__PURE__*/_styledComponents["default"].span.withConfig({
+  displayName: "textButton__Loader",
+  componentId: "sc-1lwyrq5-4"
+})(["position:absolute;opacity:", ";width:", "px;height:", "px;border:2px solid ", ";border-top-color:", ";border-radius:50%;display:inline-block;box-sizing:border-box;animation:", " 1s linear infinite;"], function (props) {
+  return props.show ? 1 : 0;
+}, function (props) {
+  return props.size;
+}, function (props) {
+  return props.size;
+}, _color.colorGrayscale.gray400, _color.colorGrayscale.gray600, spin);
+
 var TextButton = function TextButton(_ref) {
   var _ref$text = _ref.text,
       text = _ref$text === void 0 ? '' : _ref$text,
@@ -76,14 +109,14 @@ var TextButton = function TextButton(_ref) {
       size = _ref$size === void 0 ? _sharedEnum.Size.S : _ref$size,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? _theme2.THEME.normal : _ref$theme,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? _enums.Type.PRIMARY : _ref$type,
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? _enums.Style.DARK : _ref$style,
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var themeFunc;
@@ -93,7 +126,7 @@ var TextButton = function TextButton(_ref) {
   } else if (active) {
     themeFunc = _theme.getActiveTextButtonTheme;
   } else {
-    themeFunc = type === _enums.Type.PRIMARY ? _theme.getPrimaryTextButtonTheme : _theme.getSecondaryTextButtonTheme;
+    themeFunc = _theme.getTextButtonTheme;
   }
 
   var _themeFunc = themeFunc(theme, style),
@@ -115,9 +148,14 @@ var TextButton = function TextButton(_ref) {
     hoverColor: hoverColor,
     iconSize: iconSize,
     disabled: disabled
-  }, props), /*#__PURE__*/_react["default"].createElement(IconContainer, {
+  }, props), /*#__PURE__*/_react["default"].createElement(RelativeParent, null, /*#__PURE__*/_react["default"].createElement(HideOnLoading, {
+    show: !loading
+  }, /*#__PURE__*/_react["default"].createElement(IconContainer, {
     isLeft: true
-  }, leftIconComponent), textJSX, /*#__PURE__*/_react["default"].createElement(IconContainer, null, rightIconComponent));
+  }, leftIconComponent), textJSX, /*#__PURE__*/_react["default"].createElement(IconContainer, null, rightIconComponent)), /*#__PURE__*/_react["default"].createElement(Loader, {
+    show: loading,
+    size: size === _sharedEnum.Size.S ? 18 : 24
+  })));
 };
 
 TextButton.propTypes = {
@@ -126,14 +164,13 @@ TextButton.propTypes = {
   text: _propTypes["default"].string,
   size: _propTypes["default"].oneOf(Object.values(_sharedEnum.Size)),
   theme: _propTypes["default"].oneOf(Object.values(_theme2.THEME)),
-  type: _propTypes["default"].oneOf(Object.values(_enums.Type)),
   style: _propTypes["default"].oneOf(Object.values(_enums.Style)),
   active: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool
+  disabled: _propTypes["default"].bool,
+  loading: _propTypes["default"].bool
 };
 TextButton.THEME = _theme2.THEME;
 TextButton.Size = _sharedEnum.Size;
-TextButton.Type = _enums.Type;
 TextButton.Style = _enums.Style;
 var _default = TextButton;
 exports["default"] = _default;

package/lib/button/stories/textButton.stories.js

@@ -25,7 +25,6 @@ var _default = {
   component: _textButton["default"],
   argTypes: {
     theme: _constants.THEME_STORYBOOK_ARG_TYPE,
-    type: (0, _getEnumArg.getRadioArg)(_enums.Type, _enums.Type.PRIMARY),
     style: (0, _getEnumArg.getRadioArg)(_enums.Style, _enums.Style.DARK),
     size: _constants.SIZE_STORYBOOK_ARG_TYPE,
     // showLeft & showRight args are only for storybook check
@@ -49,10 +48,10 @@ var textButton = {
     text: '文字',
     size: _textButton["default"].Size.S,
     theme: _textButton["default"].THEME.normal,
-    type: _textButton["default"].Type.PRIMARY,
     style: _textButton["default"].Style.DARK,
     active: false,
     disabled: false,
+    loading: false,
     leftIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
       direction: "left"
     }),
@@ -83,10 +82,10 @@ var toggleIconDisplay = {
     text: '文字',
     size: _textButton["default"].Size.S,
     theme: _textButton["default"].THEME.normal,
-    type: _textButton["default"].Type.PRIMARY,
     style: _textButton["default"].Style.DARK,
     active: false,
-    disabled: false
+    disabled: false,
+    loading: false
   },
   parameters: {
     controls: {

package/lib/button/utils/theme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSecondaryTextButtonTheme = exports.getSecondaryIconButtonTheme = exports.getPrimaryTextButtonTheme = exports.getPrimaryIconButtonTheme = exports.getOutlinePillButtonTheme = exports.getIconWithTextButtonTheme = exports.getFilledPillButtonTheme = exports.getDisabledTextButtonTheme = exports.getActiveTextButtonTheme = exports["default"] = void 0;
+exports.getTextButtonTheme = exports.getSecondaryIconButtonTheme = exports.getPrimaryIconButtonTheme = exports.getOutlinePillButtonTheme = exports.getIconWithTextButtonTheme = exports.getFilledPillButtonTheme = exports.getDisabledTextButtonTheme = exports.getActiveTextButtonTheme = exports["default"] = void 0;
 
 var _color = require("@twreporter/core/lib/constants/color");
 
@@ -16,11 +16,30 @@ var getFilledPillButtonTheme = function getFilledPillButtonTheme(theme, disabled
   if (disabled) {
     switch (theme) {
       case _theme.THEME.transparent:
+        switch (style) {
+          case _enums.Style.LIGHT:
+            return {
+              color: _color.colorGrayscale.white,
+              bgColor: _color.colorGrayscale.gray400,
+              hoverColor: _color.colorGrayscale.white,
+              hoverBgColor: _color.colorGrayscale.gray400
+            };
+
+          default:
+            return {
+              color: _color.colorGrayscale.gray700,
+              bgColor: _color.colorGrayscale.gray500,
+              hoverColor: _color.colorGrayscale.gray700,
+              hoverBgColor: _color.colorGrayscale.gray500
+            };
+        }
+
+      case _theme.THEME.photography:
         return {
-          color: _color.colorGrayscale.white,
-          bgColor: _color.colorGrayscale.gray200,
-          hoverColor: _color.colorGrayscale.white,
-          hoverBgColor: _color.colorGrayscale.gray200
+          color: _color.colorGrayscale.gray700,
+          bgColor: _color.colorGrayscale.gray500,
+          hoverColor: _color.colorGrayscale.gray700,
+          hoverBgColor: _color.colorGrayscale.gray500
         };
 
       default:
@@ -35,20 +54,60 @@ var getFilledPillButtonTheme = function getFilledPillButtonTheme(theme, disabled
 
   switch (theme) {
     case _theme.THEME.photography:
-      return {
-        color: _color.colorPhoto.dark,
-        bgColor: _color.colorSupportive.pastel,
-        hoverColor: _color.colorGrayscale.white,
-        hoverBgColor: _color.colorSupportive.heavy
-      };
+      switch (style) {
+        case _enums.Style.DARK:
+          return {
+            color: _color.colorPhoto.dark,
+            bgColor: _color.colorGrayscale.white,
+            hoverColor: _color.colorPhoto.dark,
+            hoverBgColor: _color.colorGrayscale.gray200
+          };
+
+        case _enums.Style.LIGHT:
+          return {
+            color: _color.colorPhoto.dark,
+            bgColor: _color.colorGrayscale.gray300,
+            hoverColor: _color.colorPhoto.dark,
+            hoverBgColor: _color.colorGrayscale.gray400
+          };
+
+        case _enums.Style.BRAND:
+        default:
+          return {
+            color: _color.colorPhoto.dark,
+            bgColor: _color.colorSupportive.faded,
+            hoverColor: _color.colorPhoto.dark,
+            hoverBgColor: _color.colorSupportive.pastel
+          };
+      }
 
     case _theme.THEME.transparent:
-      return {
-        color: _color.colorGrayscale.gray600,
-        bgColor: _color.colorGrayscale.white,
-        hoverColor: _color.colorGrayscale.white,
-        hoverBgColor: _color.colorGrayscale.gray400
-      };
+      switch (style) {
+        case _enums.Style.DARK:
+          return {
+            color: _color.colorGrayscale.gray800,
+            bgColor: _color.colorGrayscale.gray300,
+            hoverColor: _color.colorGrayscale.gray800,
+            hoverBgColor: _color.colorGrayscale.gray400
+          };
+
+        case _enums.Style.LIGHT:
+          return {
+            color: _color.colorGrayscale.white,
+            bgColor: _color.colorGrayscale.gray800,
+            hoverColor: _color.colorGrayscale.white,
+            hoverBgColor: _color.colorGrayscale.black
+          };
+
+        case _enums.Style.BRAND:
+        default:
+          return {
+            color: _color.colorGrayscale.gray800,
+            bgColor: _color.colorGrayscale.white,
+            hoverColor: _color.colorGrayscale.gray800,
+            hoverBgColor: _color.colorGrayscale.gray200
+          };
+      }
 
     case _theme.THEME.normal:
     case _theme.THEME.index:
@@ -89,19 +148,30 @@ var getOutlinePillButtonTheme = function getOutlinePillButtonTheme(theme, disabl
   if (disabled) {
     switch (theme) {
       case _theme.THEME.transparent:
-        return {
-          color: _color.colorGrayscale.gray200,
-          bgColor: _color.colorGrayscale.gray200,
-          hoverColor: _color.colorGrayscale.gray200,
-          hoverBgColor: _color.colorGrayscale.gray200
-        };
+        switch (style) {
+          case _enums.Style.LIGHT:
+            return {
+              color: _color.colorGrayscale.gray400,
+              bgColor: _color.colorGrayscale.gray400,
+              hoverColor: _color.colorGrayscale.gray400,
+              hoverBgColor: _color.colorGrayscale.gray400
+            };
+
+          default:
+            return {
+              color: _color.colorGrayscale.gray500,
+              bgColor: _color.colorGrayscale.gray500,
+              hoverColor: _color.colorGrayscale.gray500,
+              hoverBgColor: _color.colorGrayscale.gray500
+            };
+        }
 
       case _theme.THEME.photography:
         return {
-          color: _color.colorGrayscale.gray600,
-          bgColor: _color.colorGrayscale.gray200,
-          hoverColor: _color.colorGrayscale.gray600,
-          hoverBgColor: _color.colorGrayscale.gray200
+          color: _color.colorGrayscale.gray500,
+          bgColor: _color.colorGrayscale.gray500,
+          hoverColor: _color.colorGrayscale.gray500,
+          hoverBgColor: _color.colorGrayscale.gray500
         };
 
       default:
@@ -116,20 +186,60 @@ var getOutlinePillButtonTheme = function getOutlinePillButtonTheme(theme, disabl
 
   switch (theme) {
     case _theme.THEME.photography:
-      return {
-        color: _color.colorSupportive.pastel,
-        bgColor: _color.colorSupportive.pastel,
-        hoverColor: _color.colorSupportive.heavy,
-        hoverBgColor: _color.colorSupportive.heavy
-      };
+      switch (style) {
+        case _enums.Style.DARK:
+          return {
+            color: _color.colorGrayscale.white,
+            bgColor: _color.colorGrayscale.white,
+            hoverColor: _color.colorGrayscale.gray200,
+            hoverBgColor: _color.colorGrayscale.gray200
+          };
+
+        case _enums.Style.LIGHT:
+          return {
+            color: _color.colorGrayscale.gray300,
+            bgColor: _color.colorGrayscale.gray300,
+            hoverColor: _color.colorGrayscale.gray400,
+            hoverBgColor: _color.colorGrayscale.gray400
+          };
+
+        case _enums.Style.BRAND:
+        default:
+          return {
+            color: _color.colorSupportive.faded,
+            bgColor: _color.colorSupportive.faded,
+            hoverColor: _color.colorSupportive.pastel,
+            hoverBgColor: _color.colorSupportive.pastel
+          };
+      }
 
     case _theme.THEME.transparent:
-      return {
-        color: _color.colorGrayscale.white,
-        bgColor: _color.colorGrayscale.white,
-        hoverColor: _color.colorGrayscale.gray600,
-        hoverBgColor: _color.colorGrayscale.gray600
-      };
+      switch (style) {
+        case _enums.Style.DARK:
+          return {
+            color: _color.colorGrayscale.gray300,
+            bgColor: _color.colorGrayscale.gray300,
+            hoverColor: _color.colorGrayscale.gray400,
+            hoverBgColor: _color.colorGrayscale.gray400
+          };
+
+        case _enums.Style.LIGHT:
+          return {
+            color: _color.colorGrayscale.gray800,
+            bgColor: _color.colorGrayscale.gray800,
+            hoverColor: _color.colorGrayscale.black,
+            hoverBgColor: _color.colorGrayscale.black
+          };
+
+        case _enums.Style.BRAND:
+        default:
+          return {
+            color: _color.colorGrayscale.white,
+            bgColor: _color.colorGrayscale.white,
+            hoverColor: _color.colorGrayscale.gray200,
+            hoverBgColor: _color.colorGrayscale.gray200
+          };
+      }
 
     case _theme.THEME.normal:
     case _theme.THEME.index:
@@ -322,61 +432,44 @@ var getIconWithTextButtonTheme = function getIconWithTextButtonTheme(theme, isAc
 
 exports.getIconWithTextButtonTheme = getIconWithTextButtonTheme;
 
-var getPrimaryTextButtonTheme = function getPrimaryTextButtonTheme(theme, style) {
+var getTextButtonTheme = function getTextButtonTheme(theme, style) {
   switch (theme) {
     case _theme.THEME.photography:
-      return {
-        color: _color.colorGrayscale.white,
-        hoverColor: _color.colorSupportive.pastel
-      };
-
-    case _theme.THEME.transparent:
-      return {
-        color: _color.colorGrayscale.white,
-        hoverColor: _color.colorGrayscale.gray800
-      };
-
-    case _theme.THEME.normal:
-    default:
       switch (style) {
         case _enums.Style.DARK:
           return {
-            color: _color.colorGrayscale.gray800,
-            hoverColor: _color.colorBrand.heavy
+            color: _color.colorGrayscale.white,
+            hoverColor: _color.colorSupportive.pastel
           };
 
         case _enums.Style.LIGHT:
           return {
-            color: _color.colorGrayscale.gray600,
-            hoverColor: _color.colorGrayscale.gray800
+            color: _color.colorGrayscale.gray300,
+            hoverColor: _color.colorGrayscale.gray400
           };
 
-        case _enums.Style.BRAND:
         default:
+        case _enums.Style.BRAND:
           return {
-            color: _color.colorBrand.heavy,
-            hoverColor: _color.colorBrand.dark
+            color: _color.colorSupportive.faded,
+            hoverColor: _color.colorSupportive.pastel
           };
       }
 
-  }
-};
-
-exports.getPrimaryTextButtonTheme = getPrimaryTextButtonTheme;
-
-var getSecondaryTextButtonTheme = function getSecondaryTextButtonTheme(theme, style) {
-  switch (theme) {
-    case _theme.THEME.photography:
-      return {
-        color: _color.colorGrayscale.gray400,
-        hoverColor: _color.colorSupportive.pastel
-      };
-
     case _theme.THEME.transparent:
-      return {
-        color: _color.colorGrayscale.gray600,
-        hoverColor: _color.colorGrayscale.gray800
-      };
+      switch (style) {
+        case _enums.Style.LIGHT:
+          return {
+            color: _color.colorGrayscale.gray800,
+            hoverColor: _color.colorGrayscale.black
+          };
+
+        default:
+          return {
+            color: _color.colorGrayscale.white,
+            hoverColor: _color.colorGrayscale.gray200
+          };
+      }
 
     case _theme.THEME.normal:
     default:
@@ -404,20 +497,20 @@ var getSecondaryTextButtonTheme = function getSecondaryTextButtonTheme(theme, st
   }
 };
 
-exports.getSecondaryTextButtonTheme = getSecondaryTextButtonTheme;
+exports.getTextButtonTheme = getTextButtonTheme;
 
 var getDisabledTextButtonTheme = function getDisabledTextButtonTheme(theme) {
   switch (theme) {
     case _theme.THEME.photography:
       return {
-        color: _color.colorGrayscale.gray600,
-        hoverColor: _color.colorGrayscale.gray600
+        color: _color.colorGrayscale.gray500,
+        hoverColor: _color.colorGrayscale.gray500
       };
 
     case _theme.THEME.transparent:
       return {
-        color: _color.colorGrayscale.gray200,
-        hoverColor: _color.colorGrayscale.gray200
+        color: _color.colorGrayscale.gray500,
+        hoverColor: _color.colorGrayscale.gray500
       };
 
     case _theme.THEME.normal:
@@ -434,16 +527,34 @@ exports.getDisabledTextButtonTheme = getDisabledTextButtonTheme;
 var getActiveTextButtonTheme = function getActiveTextButtonTheme(theme, style) {
   switch (theme) {
     case _theme.THEME.photography:
-      return {
-        color: _color.colorSupportive.pastel,
-        hoverColor: _color.colorSupportive.pastel
-      };
+      switch (style) {
+        case _enums.Style.LIGHT:
+          return {
+            color: _color.colorGrayscale.gray400,
+            hoverColor: _color.colorGrayscale.gray400
+          };
+
+        default:
+          return {
+            color: _color.colorSupportive.pastel,
+            hoverColor: _color.colorSupportive.pastel
+          };
+      }
 
     case _theme.THEME.transparent:
-      return {
-        color: _color.colorGrayscale.white,
-        hoverColor: _color.colorGrayscale.white
-      };
+      switch (style) {
+        case _enums.Style.LIGHT:
+          return {
+            color: _color.colorGrayscale.black,
+            hoverColor: _color.colorGrayscale.black
+          };
+
+        default:
+          return {
+            color: _color.colorGrayscale.gray200,
+            hoverColor: _color.colorGrayscale.gray200
+          };
+      }
 
     case _theme.THEME.normal:
     default:
@@ -478,8 +589,7 @@ var _default = {
   getPrimaryIconButtonTheme: getPrimaryIconButtonTheme,
   getSecondaryIconButtonTheme: getSecondaryIconButtonTheme,
   getIconWithTextButtonTheme: getIconWithTextButtonTheme,
-  getPrimaryTextButtonTheme: getPrimaryTextButtonTheme,
-  getSecondaryTextButtonTheme: getSecondaryTextButtonTheme,
+  getTextButtonTheme: getTextButtonTheme,
   getDisabledTextButtonTheme: getDisabledTextButtonTheme,
   getActiveTextButtonTheme: getActiveTextButtonTheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.25.0-rc.0",
+  "version": "8.25.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": "42b025c9e74ea6697305ccabfa5dada913efc099"
+  "gitHead": "05f6618e9155fe4a2918fc0363d43172b9c7857c"
 }