@hsu-react/ui 2.2.1 → 2.2.3

package/es/layout/Header/index.js

@@ -153,10 +153,7 @@ var Header = observer(function (props) {
         children: /*#__PURE__*/_jsxs(Space, {
           className: styles.user,
           children: [/*#__PURE__*/_jsx(Avatar, {
-            style: {
-              backgroundColor: "#1677ff",
-              verticalAlign: "middle"
-            },
+            className: styles.avatar,
             icon: nickname ? undefined : /*#__PURE__*/_jsx(UserOutlined, {}),
             children: nickname === null || nickname === void 0 || (_nickname$ = nickname[0]) === null || _nickname$ === void 0 ? void 0 : _nickname$.toUpperCase()
           }), nickname]

package/es/layout/Header/index.module.scss

@@ -91,6 +91,12 @@
 
     font-size: 16px;
 
+    .avatar {
+      background: var(--vita-primary);
+      color: var(--vita-primary-foreground);
+      vertical-align: middle;
+    }
+
     .user {
       width: max-content;
       min-width: max-content;

package/es/layout/NavTabBar/index.module.scss

@@ -66,8 +66,11 @@
             }
           }
 
+          // 悬浮态用 --vita-hover，不要用 --vita-border-weak：后者是**边框**色，
+          // 消费方换配色时会连着边框一起调，没法单独把悬浮底改暖/改冷。默认值也不合适
+          // ——它比 --vita-hover 更实，压在自定义底色上会显出一块异色方块。
           &:hover {
-            background: var(--vita-border-weak);
+            background: var(--vita-hover);
           }
 
           &:global(.ant-tabs-tab-active) {

package/es/styles/tokens.js

@@ -117,7 +117,12 @@ export var toAntdTheme = function toAntdTheme(options) {
     colorBgContainer: t.surface,
     colorBgElevated: t.surface,
     colorBgLayout: t.background,
-    colorBgSpotlight: t.muted,
+    // `colorBgSpotlight` 故意不接管。它只服务 Tooltip，而 antd 把 Tooltip 的文字色写死成
+    // `colorTextLightSolid`（白），底色必须是深色才读得出来——把它指到 `muted` 这种浅色
+    // 中性面，亮色下就成了白字打在近白底上，整条提示语看不见。
+    // antd 两套算法给的默认值本来就是深的（亮色 rgba(0,0,0,.85)、暗色抬亮的深灰），
+    // 交回给它。
+
     // antd paints table headers / filled controls from the Fill ramp; pointing the top of it at
     // `muted` is what keeps those surfaces on the zinc scale instead of antd's default greys.
     colorFillAlter: t.muted,

package/lib/layout/Header/index.js

@@ -158,10 +158,7 @@ const Header = (0, _mobxReactLite.observer)(props => {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
           className: _indexModule.default.user,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Avatar, {
-            style: {
-              backgroundColor: "#1677ff",
-              verticalAlign: "middle"
-            },
+            className: _indexModule.default.avatar,
             icon: nickname ? undefined : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.UserOutlined, {}),
             children: nickname?.[0]?.toUpperCase()
           }), nickname]

package/lib/layout/Header/index.module.scss

@@ -91,6 +91,12 @@
 
     font-size: 16px;
 
+    .avatar {
+      background: var(--vita-primary);
+      color: var(--vita-primary-foreground);
+      vertical-align: middle;
+    }
+
     .user {
       width: max-content;
       min-width: max-content;

package/lib/layout/NavTabBar/index.module.scss

@@ -66,8 +66,11 @@
             }
           }
 
+          // 悬浮态用 --vita-hover，不要用 --vita-border-weak：后者是**边框**色，
+          // 消费方换配色时会连着边框一起调，没法单独把悬浮底改暖/改冷。默认值也不合适
+          // ——它比 --vita-hover 更实，压在自定义底色上会显出一块异色方块。
           &:hover {
-            background: var(--vita-border-weak);
+            background: var(--vita-hover);
           }
 
           &:global(.ant-tabs-tab-active) {

package/lib/styles/tokens.js

@@ -102,7 +102,12 @@ const toAntdTheme = options => {
     colorBgContainer: t.surface,
     colorBgElevated: t.surface,
     colorBgLayout: t.background,
-    colorBgSpotlight: t.muted,
+    // `colorBgSpotlight` 故意不接管。它只服务 Tooltip，而 antd 把 Tooltip 的文字色写死成
+    // `colorTextLightSolid`（白），底色必须是深色才读得出来——把它指到 `muted` 这种浅色
+    // 中性面，亮色下就成了白字打在近白底上，整条提示语看不见。
+    // antd 两套算法给的默认值本来就是深的（亮色 rgba(0,0,0,.85)、暗色抬亮的深灰），
+    // 交回给它。
+
     // antd paints table headers / filled controls from the Fill ramp; pointing the top of it at
     // `muted` is what keeps those surfaces on the zinc scale instead of antd's default greys.
     colorFillAlter: t.muted,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/layout/Header/index.module.scss

@@ -91,6 +91,12 @@
 
     font-size: 16px;
 
+    .avatar {
+      background: var(--vita-primary);
+      color: var(--vita-primary-foreground);
+      vertical-align: middle;
+    }
+
     .user {
       width: max-content;
       min-width: max-content;

package/src/layout/Header/index.tsx

@@ -192,8 +192,10 @@ const Header: React.FC<HeaderProps> = observer((props) => {
           }
         >
           <Space className={styles.user}>
+            {/* 底色跟随主色。从前这里写死 antd 蓝 #1677ff，而且是**行内样式**——
+                换过品牌色的项目连用 CSS 都盖不住，一颗蓝点钉在整套配色里 */}
             <Avatar
-              style={{ backgroundColor: "#1677ff", verticalAlign: "middle" }}
+              className={styles.avatar}
               icon={nickname ? undefined : <UserOutlined />}
             >
               {nickname?.[0]?.toUpperCase()}

package/src/layout/NavTabBar/index.module.scss

@@ -66,8 +66,11 @@
             }
           }
 
+          // 悬浮态用 --vita-hover，不要用 --vita-border-weak：后者是**边框**色，
+          // 消费方换配色时会连着边框一起调，没法单独把悬浮底改暖/改冷。默认值也不合适
+          // ——它比 --vita-hover 更实，压在自定义底色上会显出一块异色方块。
           &:hover {
-            background: var(--vita-border-weak);
+            background: var(--vita-hover);
           }
 
           &:global(.ant-tabs-tab-active) {

package/src/styles/tokens.ts

@@ -149,7 +149,12 @@ export const toAntdTheme = (options?: {
     colorBgContainer: t.surface,
     colorBgElevated: t.surface,
     colorBgLayout: t.background,
-    colorBgSpotlight: t.muted,
+
+    // `colorBgSpotlight` 故意不接管。它只服务 Tooltip，而 antd 把 Tooltip 的文字色写死成
+    // `colorTextLightSolid`（白），底色必须是深色才读得出来——把它指到 `muted` 这种浅色
+    // 中性面，亮色下就成了白字打在近白底上，整条提示语看不见。
+    // antd 两套算法给的默认值本来就是深的（亮色 rgba(0,0,0,.85)、暗色抬亮的深灰），
+    // 交回给它。
 
     // antd paints table headers / filled controls from the Fill ramp; pointing the top of it at
     // `muted` is what keeps those surfaces on the zinc scale instead of antd's default greys.