x-star-design 0.0.45 → 0.0.46

package/dist/styles/index.css

@@ -387,20 +387,6 @@
   margin: 15px 10px 20px 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
-.x-star-design-titleSection img {
-  width: 1em;
-  height: 1em;
-  display: inline-flex;
-  align-items: center;
-  color: inherit;
-  font-style: normal;
-  line-height: 0;
-  text-align: center;
-  text-transform: none;
-  vertical-align: -0.125em;
-  text-rendering: optimizelegibility;
-  -webkit-font-smoothing: antialiased;
-}
 .x-star-design-titleSection .x-star-design-title {
   color: #000;
   margin: 0 10px;
@@ -472,29 +458,37 @@
 }
 .x-star-design-XTabs .x-star-design-tabs-nav-wrap,
 .x-star-design-XTabs .ant-tabs-nav-wrap {
-  background-color: #e3ecff;
+  background-color: var(--xtabs-secondary-color);
 }
 .x-star-design-XTabs.x-star-design-tabs-card > .x-star-design-tabs-nav .x-star-design-tabs-tab, .x-star-design-XTabs.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
   width: 130px;
   height: 130px;
-  background-color: #e3ecff;
+  background-color: unset;
   display: flex;
   align-content: center;
   align-items: center;
   justify-content: center;
   border: 0;
+  color: #9e9e9e;
 }
 .x-star-design-XTabs.x-star-design-tabs-card > .x-star-design-tabs-nav .x-star-design-tabs-tab-active, .x-star-design-XTabs.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active {
-  border-left: 6px solid #1890ff;
+  border-left: 6px solid var(--xtabs-primary-color);
   background-color: #fff;
   transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
   border-radius: 0;
 }
+.x-star-design-XTabs.x-star-design-tabs .x-star-design-tabs-tab:hover, .x-star-design-XTabs.ant-tabs .ant-tabs-tab:hover {
+  color: var(--xtabs-primary-color);
+}
 .x-star-design-XTabs .x-star-design-tabs-tab-btn,
 .x-star-design-XTabs .ant-tabs-tab-btn {
   text-align: center;
   white-space: normal;
 }
+.x-star-design-XTabs .x-star-design-tabs-content-holder,
+.x-star-design-XTabs .ant-tabs-content-holder {
+  border-left: 0;
+}
 .x-star-design-XTabs .x-star-design-tabs-content,
 .x-star-design-XTabs .ant-tabs-content {
   display: flex;

package/dist/title-with-icon/index.js

@@ -1,19 +1,25 @@
+import { RightSquareFilled } from '@ant-design/icons';
+import { ConfigContext } from 'antd/es/config-provider';
 import classNames from 'classnames';
-import React from 'react';
-import rightSvg from "../assets/title-with-icon/right.svg";
+import React, { useContext } from 'react';
 import { prefix } from "../utils/global";
 var TitleWithIcon = function TitleWithIcon(_ref) {
   var className = _ref.className,
     title = _ref.title,
     description = _ref.description,
     id = _ref.id;
+  var _useContext = useContext(ConfigContext),
+    theme = _useContext.theme;
+  var _ref2 = (theme === null || theme === void 0 ? void 0 : theme.token) || {},
+    colorPrimary = _ref2.colorPrimary;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "wrapper",
     className: classNames(className, "".concat(prefix, "-titleSection")),
     id: id
-  }, /*#__PURE__*/React.createElement("img", {
-    src: rightSvg,
-    alt: ""
+  }, /*#__PURE__*/React.createElement(RightSquareFilled, {
+    style: {
+      color: colorPrimary || '#1990fe'
+    }
   }), /*#__PURE__*/React.createElement("span", {
     "data-testid": "title",
     className: "".concat(prefix, "-title")

package/dist/xtabs/index.js

@@ -3,12 +3,46 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["items"];
 import { Tabs } from 'antd';
-import React, { useMemo } from 'react';
+import { ConfigContext } from 'antd/es/config-provider';
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import ConfigProviderWrapper from "../config-provider-wrapper";
 import { prefix } from "../utils/global";
+//hash颜色转换rgba
+function hexToRGBA(hex, alpha) {
+  var r = '',
+    g = '',
+    b = '';
+  if (hex.length === 4) {
+    r = '0x' + hex[1] + hex[1];
+    g = '0x' + hex[2] + hex[2];
+    b = '0x' + hex[3] + hex[3];
+  } else {
+    r = '0x' + hex[1] + hex[2];
+    g = '0x' + hex[3] + hex[4];
+    b = '0x' + hex[5] + hex[6];
+  }
+  return "rgba(".concat(+r, ",").concat(+g, ",").concat(+b, ",").concat(alpha, ")");
+}
 var XTabs = function XTabs(_ref) {
   var items = _ref.items,
     props = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(ConfigContext),
+    theme = _useContext.theme;
+  var _ref2 = (theme === null || theme === void 0 ? void 0 : theme.token) || {},
+    _ref2$colorPrimary = _ref2.colorPrimary,
+    colorPrimary = _ref2$colorPrimary === void 0 ? '#1990fe' : _ref2$colorPrimary;
+  var colorThemeRef = useRef(null);
+  useEffect(function () {
+    var _colorThemeRef$curren, _colorThemeRef$curren2;
+    //设置主题色
+    (_colorThemeRef$curren = colorThemeRef.current) === null || _colorThemeRef$curren === void 0 ? void 0 : _colorThemeRef$curren.style.setProperty('--xtabs-primary-color', colorPrimary);
+    (_colorThemeRef$curren2 = colorThemeRef.current) === null || _colorThemeRef$curren2 === void 0 ? void 0 : _colorThemeRef$curren2.style.setProperty('--xtabs-secondary-color', hexToRGBA(colorPrimary, 0.15));
+    return function () {
+      var _colorThemeRef$curren3, _colorThemeRef$curren4;
+      (_colorThemeRef$curren3 = colorThemeRef.current) === null || _colorThemeRef$curren3 === void 0 ? void 0 : _colorThemeRef$curren3.style.removeProperty('--xtabs-primary-color');
+      (_colorThemeRef$curren4 = colorThemeRef.current) === null || _colorThemeRef$curren4 === void 0 ? void 0 : _colorThemeRef$curren4.style.removeProperty('--xtabs-secondary-color');
+    };
+  }, []);
   var newItems = useMemo(function () {
     return items === null || items === void 0 ? void 0 : items.map(function (item) {
       return _objectSpread(_objectSpread({}, item), {}, {
@@ -22,13 +56,16 @@ var XTabs = function XTabs(_ref) {
       });
     });
   }, [items]);
-  return /*#__PURE__*/React.createElement(ConfigProviderWrapper, null, /*#__PURE__*/React.createElement(Tabs, _extends({
+  return /*#__PURE__*/React.createElement(ConfigProviderWrapper, null, /*#__PURE__*/React.createElement("div", {
+    ref: colorThemeRef,
+    "data-testid": 'xtabsColorTheme'
+  }, /*#__PURE__*/React.createElement(Tabs, _extends({
     className: "".concat(prefix, "-XTabs"),
     tabPosition: 'left',
     size: "large",
     type: "card",
     destroyInactiveTabPane: true,
     items: newItems
-  }, props)));
+  }, props))));
 };
 export default XTabs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-star-design",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "description": "A react component library developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",
@@ -82,7 +82,7 @@
     "@types/react-dom": "^18.0.0",
     "@types/react-window": "^1.8.5",
     "@umijs/lint": "^4.0.0",
-    "antd": "5.2.2",
+    "antd": "5.10.0",
     "babel-plugin-inline-import-data-uri": "^1.0.1",
     "dumi": "^2.2.0",
     "eslint": "^8.23.0",