@arcblock/ux 1.16.69 → 1.17.1

package/lib/Tag/index.js

@@ -13,6 +13,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
+var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+
 var _Util = require("../Util");
 
 var _Colors = _interopRequireDefault(require("../Colors"));
@@ -27,20 +29,20 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 const types = {
   error: {
-    color: _Colors.default.error.main,
-    backgroundColor: 'rgba(227, 91, 84, 0.2)'
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.error.main
   },
   warning: {
-    color: _Colors.default.warning.main,
-    backgroundColor: 'rgba(247, 208, 64, 0.2)'
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.warning.main
   },
   success: {
-    color: _Colors.default.success.main,
-    backgroundColor: '#eafbd9'
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.success.main
   },
   primary: {
-    color: _Colors.default.primary.main,
-    backgroundColor: '#ECEFFF'
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.primary.main
   },
   reverse: {
     color: '#fff',
@@ -61,7 +63,18 @@ function Tag(props) {
   } = newProps,
         rest = _objectWithoutProperties(newProps, _excluded);
 
+  const {
+    palette
+  } = (0, _useTheme.default)();
   const styles = Object.assign({}, types[type] || types.primary, style);
+
+  if (palette[type]) {
+    Object.assign(styles, {
+      color: palette[type].contrastText || _Colors.default.common.white,
+      backgroundColor: palette[type].main
+    });
+  }
+
   return /*#__PURE__*/_react.default.createElement(Span, Object.assign({
     ref: forwardedRef,
     component: "span",
@@ -92,4 +105,4 @@ exports.default = _default;
 const Span = (0, _styledComponents.default)(_Typography.default).withConfig({
   displayName: "Tag__Span",
   componentId: "sc-wqpeo3-0"
-})(["&&{display:inline-flex;justify-content:center;align-items:center;padding:2px 10px;height:20px;line-height:20px;font-size:12px;font-weight:500;}"]);
+})(["&&{display:inline-flex;justify-content:center;align-items:center;padding:2px 10px;height:20px;line-height:20px;font-size:12px;font-weight:500;border-radius:4px;}"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.16.69",
+  "version": "1.17.1",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "703c02798936b92e8c17a9134c6983443901afb3",
+  "gitHead": "15216877acda2cceaeb7a30cf199fbc363206b98",
   "dependencies": {
-    "@arcblock/icons": "^1.16.69",
-    "@arcblock/react-hooks": "^1.16.69",
+    "@arcblock/icons": "^1.17.1",
+    "@arcblock/react-hooks": "^1.17.1",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/lato": "^4.5.3",
     "@material-ui/core": "^4.12.3",

package/src/Tag/index.js

@@ -3,26 +3,27 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import Typography from '@material-ui/core/Typography';
+import useTheme from '@material-ui/core/styles/useTheme';
 
 import { mergeProps } from '../Util';
 import colors from '../Colors';
 
 const types = {
   error: {
-    color: colors.error.main,
-    backgroundColor: 'rgba(227, 91, 84, 0.2)',
+    color: colors.common.white,
+    backgroundColor: colors.error.main,
   },
   warning: {
-    color: colors.warning.main,
-    backgroundColor: 'rgba(247, 208, 64, 0.2)',
+    color: colors.common.white,
+    backgroundColor: colors.warning.main,
   },
   success: {
-    color: colors.success.main,
-    backgroundColor: '#eafbd9',
+    color: colors.common.white,
+    backgroundColor: colors.success.main,
   },
   primary: {
-    color: colors.primary.main,
-    backgroundColor: '#ECEFFF',
+    color: colors.common.white,
+    backgroundColor: colors.primary.main,
   },
   reverse: {
     color: '#fff',
@@ -33,8 +34,18 @@ const types = {
 function Tag(props) {
   const newProps = mergeProps(props, Tag, ['style']);
   const { type, content, children, style, className, forwardedRef, ...rest } = newProps;
+
+  const { palette } = useTheme();
+
   const styles = Object.assign({}, types[type] || types.primary, style);
 
+  if (palette[type]) {
+    Object.assign(styles, {
+      color: palette[type].contrastText || colors.common.white,
+      backgroundColor: palette[type].main,
+    });
+  }
+
   return (
     <Span ref={forwardedRef} component="span" className={className} style={styles} {...rest}>
       {content || children}
@@ -69,5 +80,6 @@ const Span = styled(Typography)`
     line-height: 20px;
     font-size: 12px;
     font-weight: 500;
+    border-radius: 4px;
   }
 `;