@ant-design/agentic-ui 2.31.3 → 2.31.5

package/dist/AILabel/style.js

@@ -76,8 +76,8 @@ var genStyle = function genStyle(token) {
         border: '1px solid var(--color-gray-border-light)',
         backdropFilter: 'blur(40px)'
     })), _define_property(_obj, "&".concat(token.componentCls, "-status-emphasis"), _define_property({}, "".concat(token.componentCls, "-dot"), {
-        background: 'linear-gradient(180deg, #ECF2FF 0%, #F3F7FF 100%)',
-        border: '1px solid #FFFFFF'
+        background: 'linear-gradient(180deg, var(--color-primary-bg-page-light) 0%, var(--color-primary-bg-page) 100%)',
+        border: '1px solid var(--color-gray-bg-card-white)'
     })), _define_property(_obj, "&".concat(token.componentCls, "-with-children"), _define_property({}, "".concat(token.componentCls, "-dot"), {
         position: 'absolute',
         top: 0,
@@ -85,7 +85,7 @@ var genStyle = function genStyle(token) {
         transform: 'translate(50%, -50%)',
         transformOrigin: '100% 0%'
     })), _define_property(_obj, "&".concat(token.componentCls, "-tooltip-visible"), _define_property({}, "".concat(token.componentCls, "-dot"), {
-        background: 'linear-gradient(293deg, #EBECFF 39%, #F0F4FF 62%, #EBF5FF 91%)',
+        background: 'linear-gradient(293deg, var(--color-primary-bg-page-light) 39%, var(--color-primary-bg-page) 62%, var(--color-primary-bg-page-light) 91%)',
         backdropFilter: 'blur(40px)',
         transition: 'all 0.2s ease-in-out'
     })), _obj));

package/dist/AgenticLayout/style.js

@@ -129,7 +129,7 @@ var genStyle = function genStyle(token) {
             transition: 'background-color 0.2s ease'
         },
         '&:hover::before': {
-            backgroundColor: 'var(--color-primary-9, #1d7afc)'
+            backgroundColor: 'var(--color-primary-control-fill-primary)'
         }
     }), // 侧边栏内容
     _define_property(_obj, "&-sidebar-content", {

package/dist/AnswerAlert/style.js

@@ -124,11 +124,11 @@ var genStyle = function genStyle(token) {
             backgroundColor: 'var(--color-green-control-fill-active)'
         }
     })), _define_property(_obj1, "".concat(token.componentCls, "-warning"), _define_property({
-        color: 'var(--color-yellow-text-secondary, #ad6800)',
+        color: 'var(--color-yellow-text-secondary)',
         backgroundColor: 'var(--color-yellow-bg-tip, rgba(250, 173, 20, 0.08))',
         boxShadow: 'none'
     }, "".concat(token.componentCls, "-close-icon"), {
-        color: 'var(--color-yellow-text-secondary, #ad6800)',
+        color: 'var(--color-yellow-text-secondary)',
         '&:hover': {
             backgroundColor: 'var(--color-yellow-control-fill-active)'
         }

package/dist/Bubble/MessagesContent/VoiceButton/style.js

@@ -79,7 +79,7 @@ var genStyle = function genStyle(token) {
             alignItems: 'center',
             justifyContent: 'space-between',
             borderRadius: 6,
-            background: '#FFFFFF',
+            background: 'var(--color-gray-bg-card-white)',
             boxShadow: 'var(--shadow-control-base)',
             width: 86,
             height: 28,

package/dist/Bubble/MessagesContent/index.js

@@ -266,7 +266,8 @@ import classNames from "clsx";
 import React, { useCallback, useContext, useMemo } from "react";
 import { ActionIconBox } from "../../Components/ActionIconBox";
 import { I18nContext } from "../../I18n";
-import { MarkdownEditor, useRefFunction } from "../../index";
+import { MarkdownEditor } from "../../MarkdownEditor";
+import { useRefFunction } from "../../Hooks/useRefFunction";
 import { BubbleConfigContext } from "../BubbleConfigProvide";
 import { BubbleExtra } from "./BubbleExtra";
 import { DocInfoList } from "./DocInfo";

package/dist/Bubble/MessagesContent/style.js

@@ -97,7 +97,7 @@ var genStyle = function genStyle(token) {
         lineHeight: '24px'
     }), // 用户消息文本颜色
     _define_property(_obj1, "".concat(token.componentCls, "-messages-content-user-text"), {
-        color: '#343A45'
+        color: 'var(--color-gray-text-default)'
     }), // Popover 标题容器
     _define_property(_obj1, "".concat(token.componentCls, "-messages-content-popover-title"), {
         display: 'flex',
@@ -132,7 +132,7 @@ var genStyle = function genStyle(token) {
         padding: 'var(--padding-2x) var(--padding-3x)',
         gap: 'var(--padding-2x)',
         alignSelf: 'stretch',
-        background: '#FBFCFD',
+        background: 'var(--color-gray-bg-page-light)',
         cursor: 'pointer',
         zIndex: 1
     }), // 文档标签图标

package/dist/Components/ActionIconBox/style.js

@@ -81,9 +81,9 @@ var genStyle = function genStyle(token) {
             }
         },
         '&-dark': {
-            color: '#fff',
+            color: 'var(--color-gray-bg-card-white)',
             '&:hover': {
-                background: '#444',
+                background: 'var(--color-gray-text-secondary)',
                 boxSizing: 'border-box'
             }
         },
@@ -98,7 +98,7 @@ var genStyle = function genStyle(token) {
             minHeight: 'inherit',
             maxHeight: 'inherit',
             padding: '8px 12px',
-            color: '#000000',
+            color: 'var(--color-gray-text-default)',
             borderRadius: 18,
             border: '1px solid var(--color-gray-border-light)',
             background: "radial-gradient(22% 66% at 96% 113%, rgba(255, 255, 245, 0.52) 0%, rgba(230, 238, 255, 0) 100%),radial-gradient(14% 234% at 100% 50%, rgba(162, 255, 255, 0.28) 0%, rgba(153, 202, 255, 0.1193) 13%, rgba(229, 189, 255, 0.0826) 38%, rgba(231, 211, 252, 0.0544) 59%, rgba(235, 255, 245, 0) 100%)"

package/dist/Components/ActionItemBox/style.js

@@ -63,7 +63,7 @@ var genStyle = function genStyle(token) {
         gap: '12px',
         justifyContent: 'space-between',
         transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        backgroundColor: 'var(--color-gray-bg-card-white, #ffffff)',
+        backgroundColor: 'var(--color-gray-bg-card-white)',
         boxShadow: 'var(--shadow-border-base)',
         minHeight: 32,
         '&-overflow-container': {
@@ -72,7 +72,7 @@ var genStyle = function genStyle(token) {
             top: 0,
             bottom: 0,
             pointerEvents: 'none',
-            background: "linear-gradient(to right, transparent 0%, var(--color-gray-bg-card-white, #ffffff) 100%)",
+            background: "linear-gradient(to right, transparent 0%, var(--color-gray-bg-card-white) 100%)",
             borderRadius: 12,
             width: 72,
             height: '100%',
@@ -83,7 +83,7 @@ var genStyle = function genStyle(token) {
             '&-placeholder': {
                 width: 40,
                 height: '100%',
-                backgroundColor: 'linear-gradient(270deg, #F7F8F9 57%, rgba(255, 255, 255, 0) 100%)'
+                backgroundColor: 'linear-gradient(270deg, var(--color-gray-bg-page-light) 57%, rgba(255, 255, 255, 0) 100%)'
             },
             '&-indicator': {
                 flex: 1,
@@ -94,7 +94,7 @@ var genStyle = function genStyle(token) {
                 width: 32,
                 height: 32,
                 zIndex: 10,
-                background: 'linear-gradient(270deg, #FFFFFF 57%, rgba(255, 255, 255, 0) 100%)',
+                background: 'linear-gradient(270deg, var(--color-gray-bg-card-white) 57%, rgba(255, 255, 255, 0) 100%)',
                 border: 'none',
                 boxShadow: 'none',
                 borderRadius: 0
@@ -103,7 +103,7 @@ var genStyle = function genStyle(token) {
                 width: 32,
                 height: 32,
                 borderRadius: 'var(--radius-control-base)',
-                background: '#FFFFFF',
+                background: 'var(--color-gray-bg-card-white)',
                 boxShadow: 'inset 0px 0px 1px 0px rgba(0, 19, 41, 0.15)',
                 color: 'var(--color-gray-text-secondary)',
                 display: 'flex',
@@ -120,18 +120,18 @@ var genStyle = function genStyle(token) {
                     backgroundImage: 'none'
                 },
                 '&-disabled': {
-                    backgroundColor: 'var(--color-gray-bg-card-white, #ffffff)',
+                    backgroundColor: 'var(--color-gray-bg-card-white)',
                     color: 'var(--color-gray-text-disabled)',
                     cursor: 'not-allowed',
                     backgroundImage: 'none',
                     boxShadow: 'var(--shadow-border-base)'
                 },
                 '&-disabled:hover': {
-                    backgroundColor: 'var(--color-gray-bg-card-white, #ffffff)',
+                    backgroundColor: 'var(--color-gray-bg-card-white)',
                     backgroundImage: 'none'
                 },
                 '&-disabled:active': {
-                    backgroundColor: 'var(--color-gray-bg-card-white, #ffffff)',
+                    backgroundColor: 'var(--color-gray-bg-card-white)',
                     backgroundImage: 'none'
                 },
                 '& svg': {
@@ -147,7 +147,7 @@ var genStyle = function genStyle(token) {
                 overscrollBehaviorY: 'contain',
                 touchAction: 'pan-y',
                 WebkitOverflowScrolling: 'touch',
-                background: 'var(--color-gray-bg-card-white, #ffffff)',
+                background: 'var(--color-gray-bg-card-white)',
                 borderRadius: 'var(--radius-card-base)',
                 marginBottom: 8,
                 zIndex: 1000,
@@ -242,7 +242,7 @@ var genStyle = function genStyle(token) {
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-                color: '#505C71',
+                color: 'var(--color-gray-text-secondary)',
                 opacity: 0.6,
                 cursor: 'grab',
                 userSelect: 'none'
@@ -253,7 +253,7 @@ var genStyle = function genStyle(token) {
                 width: 20,
                 height: 20,
                 borderRadius: 6,
-                backgroundColor: '#F7F9FC'
+                backgroundColor: 'var(--color-gray-bg-page-light)'
             }), _define_property(_obj1, "".concat(token.componentCls, "-content-description"), {
                 display: 'none'
             }), _define_property(_obj1, "".concat(token.componentCls, "-content-title"), {
@@ -264,7 +264,7 @@ var genStyle = function genStyle(token) {
         '&-container': {
             borderRadius: 'var(--radius-control-base)',
             position: 'relative',
-            backgroundColor: 'var(--color-gray-bg-card-white, #ffffff)',
+            backgroundColor: 'var(--color-gray-bg-card-white)',
             alignItems: 'center',
             width: '100%',
             cursor: 'pointer',
@@ -317,19 +317,19 @@ var genStyle = function genStyle(token) {
         backgroundImage: 'none'
     }), // disabled state: base + suppress hover/active
     _define_property(_obj2, '&-disabled', {
-        backgroundColor: 'var(--color-gray-bg-card-white, #ffffff)',
+        backgroundColor: 'var(--color-gray-bg-card-white)',
         color: 'var(--color-gray-text-disabled)',
         cursor: 'not-allowed',
         backgroundImage: 'none'
     }), _define_property(_obj2, '&-disabled:hover', {
-        backgroundColor: 'var(--color-gray-bg-card-white, #ffffff)',
+        backgroundColor: 'var(--color-gray-bg-card-white)',
         backgroundImage: 'none'
     }), _define_property(_obj2, '&-disabled:active', {
-        backgroundColor: 'var(--color-gray-bg-card-white, #ffffff)',
+        backgroundColor: 'var(--color-gray-bg-card-white)',
         backgroundImage: 'none'
     }), // when container is active but inner item is disabled, keep disabled bg
     _define_property(_obj2, '&-container-hover-bg:active ' + token.componentCls + '-disabled', {
-        backgroundColor: 'var(--color-gray-bg-card-white, #ffffff)',
+        backgroundColor: 'var(--color-gray-bg-card-white)',
         backgroundImage: 'none'
     }), // disabled text color for inner content
     _define_property(_obj2, "&-disabled ".concat(token.componentCls, "-content-title"), {

package/dist/Components/Button/IconButton/style.js

@@ -191,42 +191,42 @@ var genStyle = function genStyle(token) {
         },
         // Primary 变体 - 主要按钮
         '&-primary': {
-            backgroundColor: 'var(--color-blue-primary, #1677ff)',
-            color: 'var(--color-white, #ffffff)',
+            backgroundColor: 'var(--color-primary-control-fill-primary)',
+            color: 'var(--color-gray-bg-card-white)',
             boxShadow: 'var(--shadow-control-base, 0 1px 2px rgba(0, 0, 0, 0.1))',
             '&:hover:not(&-disabled)': {
-                backgroundColor: 'var(--color-blue-primary-hover, #4096ff)',
+                backgroundColor: 'var(--color-primary-control-fill-primary-hover)',
                 boxShadow: 'var(--shadow-control-hover, 0 2px 4px rgba(0, 0, 0, 0.15))',
                 transform: 'translateY(-1px)'
             },
             '&:active:not(&-disabled)': {
-                backgroundColor: 'var(--color-blue-primary-active, #0958d9)',
+                backgroundColor: 'var(--color-primary-control-fill-primary-active)',
                 boxShadow: 'var(--shadow-control-active, 0 1px 2px rgba(0, 0, 0, 0.2))',
                 transform: 'translateY(0)'
             },
             '&:focus-visible': {
-                boxShadow: '0 0 0 2px var(--color-blue-primary-light, #d6eeff)'
+                boxShadow: '0 0 0 2px var(--color-primary-bg-page-light)'
             }
         },
         // Secondary 变体 - 次要按钮
         '&-secondary': {
-            backgroundColor: 'var(--color-gray-bg-card-white, #ffffff)',
+            backgroundColor: 'var(--color-gray-bg-card-white)',
             color: 'var(--color-gray-text-default, #343a45)',
-            border: '1px solid var(--color-gray-border, #e6ecf4)',
+            border: '1px solid var(--color-gray-border-light)',
             boxShadow: 'var(--shadow-control-base, 0 1px 2px rgba(0, 0, 0, 0.1))',
             '&:hover:not(&-disabled)': {
                 backgroundColor: 'var(--color-gray-bg-card-light, #fbfcfd)',
-                borderColor: 'var(--color-blue-primary, #1677ff)',
-                color: 'var(--color-blue-primary, #1677ff)',
+                borderColor: 'var(--color-primary-control-fill-primary)',
+                color: 'var(--color-primary-control-fill-primary)',
                 boxShadow: 'var(--shadow-control-hover, 0 2px 4px rgba(0, 0, 0, 0.15))'
             },
             '&:active:not(&-disabled)': {
-                backgroundColor: 'var(--color-gray-control-fill-active, #f0f0f0)',
-                borderColor: 'var(--color-blue-primary-active, #0958d9)',
-                color: 'var(--color-blue-primary-active, #0958d9)'
+                backgroundColor: 'var(--color-gray-control-fill-active)',
+                borderColor: 'var(--color-primary-control-fill-primary-active)',
+                color: 'var(--color-primary-control-fill-primary-active)'
             },
             '&:focus-visible': {
-                boxShadow: '0 0 0 2px var(--color-blue-primary-light, #d6eeff)'
+                boxShadow: '0 0 0 2px var(--color-primary-bg-page-light)'
             }
         },
         // Ghost 变体 - 幽灵按钮
@@ -235,16 +235,16 @@ var genStyle = function genStyle(token) {
             color: 'var(--color-gray-text-default, #343a45)',
             border: '1px solid transparent',
             '&:hover:not(&-disabled)': {
-                backgroundColor: 'var(--color-gray-control-fill-hover, #f5f5f5)',
-                color: 'var(--color-blue-primary, #1677ff)'
+                backgroundColor: 'var(--color-gray-control-fill-hover)',
+                color: 'var(--color-primary-control-fill-primary)'
             },
             '&:active:not(&-disabled)': {
                 backgroundColor: 'var(--color-gray-control-fill-active, #e6f7ff)',
-                color: 'var(--color-blue-primary-active, #0958d9)'
+                color: 'var(--color-primary-control-fill-primary-active)'
             },
             '&:focus-visible': {
-                backgroundColor: 'var(--color-gray-control-fill-hover, #f5f5f5)',
-                boxShadow: '0 0 0 2px var(--color-blue-primary-light, #d6eeff)'
+                backgroundColor: 'var(--color-gray-control-fill-hover)',
+                boxShadow: '0 0 0 2px var(--color-primary-bg-page-light)'
             }
         },
         // No-border 变体 - 无边框按钮
@@ -254,22 +254,22 @@ var genStyle = function genStyle(token) {
             border: 'none',
             boxShadow: 'none',
             '&:hover:not(&-disabled)': {
-                backgroundColor: 'var(--color-gray-control-fill-hover, #f5f5f5)',
-                color: 'var(--color-blue-primary, #1677ff)'
+                backgroundColor: 'var(--color-gray-control-fill-hover)',
+                color: 'var(--color-primary-control-fill-primary)'
             },
             '&:active:not(&-disabled)': {
                 backgroundColor: 'var(--color-gray-control-fill-active, #e6f7ff)',
-                color: 'var(--color-blue-primary-active, #0958d9)'
+                color: 'var(--color-primary-control-fill-primary-active)'
             },
             '&:focus-visible': {
-                backgroundColor: 'var(--color-gray-control-fill-hover, #f5f5f5)',
-                boxShadow: '0 0 0 2px var(--color-blue-primary-light, #d6eeff)'
+                backgroundColor: 'var(--color-gray-control-fill-hover)',
+                boxShadow: '0 0 0 2px var(--color-primary-bg-page-light)'
             }
         },
         // Float 变体 - 浮动按钮
         '&-float': {
-            backgroundColor: 'var(--color-blue-primary, #1677ff)',
-            color: 'var(--color-white, #ffffff)',
+            backgroundColor: 'var(--color-primary-control-fill-primary)',
+            color: 'var(--color-gray-bg-card-white)',
             borderRadius: '50%',
             width: 'var(--height-control-large, 40px)',
             height: 'var(--height-control-large, 40px)',
@@ -277,23 +277,23 @@ var genStyle = function genStyle(token) {
             minWidth: 'auto',
             boxShadow: 'var(--shadow-float, 0 4px 12px rgba(22, 119, 255, 0.4))',
             '&:hover:not(&-disabled)': {
-                backgroundColor: 'var(--color-blue-primary-hover, #4096ff)',
+                backgroundColor: 'var(--color-primary-control-fill-primary-hover)',
                 boxShadow: 'var(--shadow-float-hover, 0 6px 16px rgba(22, 119, 255, 0.5))',
                 transform: 'translateY(-2px) scale(1.05)'
             },
             '&:active:not(&-disabled)': {
-                backgroundColor: 'var(--color-blue-primary-active, #0958d9)',
+                backgroundColor: 'var(--color-primary-control-fill-primary-active)',
                 boxShadow: 'var(--shadow-float-active, 0 2px 8px rgba(22, 119, 255, 0.3))',
                 transform: 'translateY(0) scale(1)'
             },
             '&:focus-visible': {
-                boxShadow: '0 0 0 2px var(--color-blue-primary-light, #d6eeff)'
+                boxShadow: '0 0 0 2px var(--color-primary-bg-page-light)'
             }
         },
         // CTA 变体 - 行动号召按钮
         '&-cta': {
-            backgroundColor: 'var(--color-green-success, #52c41a)',
-            color: 'var(--color-white, #ffffff)',
+            backgroundColor: 'var(--color-green-control-fill-primary)',
+            color: 'var(--color-gray-bg-card-white)',
             fontWeight: 'var(--font-weight-semibold, 600)',
             boxShadow: 'var(--shadow-cta, 0 2px 8px rgba(82, 196, 26, 0.3))',
             position: 'relative',
@@ -309,7 +309,7 @@ var genStyle = function genStyle(token) {
                 transition: 'left 0.5s cubic-bezier(0.645, 0.045, 0.355, 1)'
             },
             '&:hover:not(&-disabled)': {
-                backgroundColor: 'var(--color-green-success-hover, #73d13d)',
+                backgroundColor: 'var(--color-green-control-fill-primary-hover)',
                 boxShadow: 'var(--shadow-cta-hover, 0 4px 12px rgba(82, 196, 26, 0.4))',
                 transform: 'translateY(-1px)',
                 '&::before': {
@@ -317,12 +317,12 @@ var genStyle = function genStyle(token) {
                 }
             },
             '&:active:not(&-disabled)': {
-                backgroundColor: 'var(--color-green-success-active, #389e0d)',
+                backgroundColor: 'var(--color-green-control-fill-primary-active)',
                 boxShadow: 'var(--shadow-cta-active, 0 1px 4px rgba(82, 196, 26, 0.2))',
                 transform: 'translateY(0)'
             },
             '&:focus-visible': {
-                boxShadow: '0 0 0 2px var(--color-green-success-light, #f6ffed)'
+                boxShadow: '0 0 0 2px var(--color-green-bg-page-light)'
             }
         },
         // 禁用状态

package/dist/Components/Button/ToggleButton/style.js

@@ -110,42 +110,42 @@ var genStyle = function genStyle(token) {
         },
         // Primary 变体 - 主要按钮
         '&-primary': {
-            backgroundColor: 'var(--color-blue-primary, #1677ff)',
-            color: 'var(--color-white, #ffffff)',
+            backgroundColor: 'var(--color-primary-control-fill-primary)',
+            color: 'var(--color-gray-bg-card-white)',
             boxShadow: 'var(--shadow-control-base, 0 1px 2px rgba(0, 0, 0, 0.1))',
             '&:hover:not(&-disabled)': {
-                backgroundColor: 'var(--color-blue-primary-hover, #4096ff)',
+                backgroundColor: 'var(--color-primary-control-fill-primary-hover)',
                 boxShadow: 'var(--shadow-control-hover, 0 2px 4px rgba(0, 0, 0, 0.15))',
                 transform: 'translateY(-1px)'
             },
             '&:active:not(&-disabled)': {
-                backgroundColor: 'var(--color-blue-primary-active, #0958d9)',
+                backgroundColor: 'var(--color-primary-control-fill-primary-active)',
                 boxShadow: 'var(--shadow-control-active, 0 1px 2px rgba(0, 0, 0, 0.2))',
                 transform: 'translateY(0)'
             },
             '&:focus-visible': {
-                boxShadow: '0 0 0 2px var(--color-blue-primary-light, #d6eeff)'
+                boxShadow: '0 0 0 2px var(--color-primary-bg-page-light)'
             }
         },
         // Secondary 变体 - 次要按钮
         '&-secondary': {
-            backgroundColor: 'var(--color-gray-bg-card-white, #ffffff)',
+            backgroundColor: 'var(--color-gray-bg-card-white)',
             color: 'var(--color-gray-text-default, #343a45)',
-            border: '1px solid var(--color-gray-border, #e6ecf4)',
+            border: '1px solid var(--color-gray-border-light)',
             boxShadow: 'var(--shadow-control-base, 0 1px 2px rgba(0, 0, 0, 0.1))',
             '&:hover:not(&-disabled)': {
                 backgroundColor: 'var(--color-gray-bg-card-light, #fbfcfd)',
-                borderColor: 'var(--color-blue-primary, #1677ff)',
-                color: 'var(--color-blue-primary, #1677ff)',
+                borderColor: 'var(--color-primary-control-fill-primary)',
+                color: 'var(--color-primary-control-fill-primary)',
                 boxShadow: 'var(--shadow-control-hover, 0 2px 4px rgba(0, 0, 0, 0.15))'
             },
             '&:active:not(&-disabled)': {
-                backgroundColor: 'var(--color-gray-control-fill-active, #f0f0f0)',
-                borderColor: 'var(--color-blue-primary-active, #0958d9)',
-                color: 'var(--color-blue-primary-active, #0958d9)'
+                backgroundColor: 'var(--color-gray-control-fill-active)',
+                borderColor: 'var(--color-primary-control-fill-primary-active)',
+                color: 'var(--color-primary-control-fill-primary-active)'
             },
             '&:focus-visible': {
-                boxShadow: '0 0 0 2px var(--color-blue-primary-light, #d6eeff)'
+                boxShadow: '0 0 0 2px var(--color-primary-bg-page-light)'
             }
         },
         // Ghost 变体 - 幽灵按钮
@@ -154,16 +154,16 @@ var genStyle = function genStyle(token) {
             color: 'var(--color-gray-text-default, #343a45)',
             border: '1px solid transparent',
             '&:hover:not(&-disabled)': {
-                backgroundColor: 'var(--color-gray-control-fill-hover, #f5f5f5)',
-                color: 'var(--color-blue-primary, #1677ff)'
+                backgroundColor: 'var(--color-gray-control-fill-hover)',
+                color: 'var(--color-primary-control-fill-primary)'
             },
             '&:active:not(&-disabled)': {
                 backgroundColor: 'var(--color-gray-control-fill-active, #e6f7ff)',
-                color: 'var(--color-blue-primary-active, #0958d9)'
+                color: 'var(--color-primary-control-fill-primary-active)'
             },
             '&:focus-visible': {
-                backgroundColor: 'var(--color-gray-control-fill-hover, #f5f5f5)',
-                boxShadow: '0 0 0 2px var(--color-blue-primary-light, #d6eeff)'
+                backgroundColor: 'var(--color-gray-control-fill-hover)',
+                boxShadow: '0 0 0 2px var(--color-primary-bg-page-light)'
             }
         },
         // No-border 变体 - 无边框按钮
@@ -173,22 +173,22 @@ var genStyle = function genStyle(token) {
             border: 'none',
             boxShadow: 'none',
             '&:hover:not(&-disabled)': {
-                backgroundColor: 'var(--color-gray-control-fill-hover, #f5f5f5)',
-                color: 'var(--color-blue-primary, #1677ff)'
+                backgroundColor: 'var(--color-gray-control-fill-hover)',
+                color: 'var(--color-primary-control-fill-primary)'
             },
             '&:active:not(&-disabled)': {
                 backgroundColor: 'var(--color-gray-control-fill-active, #e6f7ff)',
-                color: 'var(--color-blue-primary-active, #0958d9)'
+                color: 'var(--color-primary-control-fill-primary-active)'
             },
             '&:focus-visible': {
-                backgroundColor: 'var(--color-gray-control-fill-hover, #f5f5f5)',
-                boxShadow: '0 0 0 2px var(--color-blue-primary-light, #d6eeff)'
+                backgroundColor: 'var(--color-gray-control-fill-hover)',
+                boxShadow: '0 0 0 2px var(--color-primary-bg-page-light)'
             }
         },
         // Float 变体 - 浮动按钮
         '&-float': {
-            backgroundColor: 'var(--color-blue-primary, #1677ff)',
-            color: 'var(--color-white, #ffffff)',
+            backgroundColor: 'var(--color-primary-control-fill-primary)',
+            color: 'var(--color-gray-bg-card-white)',
             borderRadius: '50%',
             width: 'var(--height-control-large, 40px)',
             height: 'var(--height-control-large, 40px)',
@@ -196,23 +196,23 @@ var genStyle = function genStyle(token) {
             minWidth: 'auto',
             boxShadow: 'var(--shadow-float, 0 4px 12px rgba(22, 119, 255, 0.4))',
             '&:hover:not(&-disabled)': {
-                backgroundColor: 'var(--color-blue-primary-hover, #4096ff)',
+                backgroundColor: 'var(--color-primary-control-fill-primary-hover)',
                 boxShadow: 'var(--shadow-float-hover, 0 6px 16px rgba(22, 119, 255, 0.5))',
                 transform: 'translateY(-2px) scale(1.05)'
             },
             '&:active:not(&-disabled)': {
-                backgroundColor: 'var(--color-blue-primary-active, #0958d9)',
+                backgroundColor: 'var(--color-primary-control-fill-primary-active)',
                 boxShadow: 'var(--shadow-float-active, 0 2px 8px rgba(22, 119, 255, 0.3))',
                 transform: 'translateY(0) scale(1)'
             },
             '&:focus-visible': {
-                boxShadow: '0 0 0 2px var(--color-blue-primary-light, #d6eeff)'
+                boxShadow: '0 0 0 2px var(--color-primary-bg-page-light)'
             }
         },
         // CTA 变体 - 行动号召按钮
         '&-cta': {
-            backgroundColor: 'var(--color-green-success, #52c41a)',
-            color: 'var(--color-white, #ffffff)',
+            backgroundColor: 'var(--color-green-control-fill-primary)',
+            color: 'var(--color-gray-bg-card-white)',
             fontWeight: 'var(--font-weight-semibold, 600)',
             boxShadow: 'var(--shadow-cta, 0 2px 8px rgba(82, 196, 26, 0.3))',
             position: 'relative',
@@ -228,7 +228,7 @@ var genStyle = function genStyle(token) {
                 transition: 'left 0.5s cubic-bezier(0.645, 0.045, 0.355, 1)'
             },
             '&:hover:not(&-disabled)': {
-                backgroundColor: 'var(--color-green-success-hover, #73d13d)',
+                backgroundColor: 'var(--color-green-control-fill-primary-hover)',
                 boxShadow: 'var(--shadow-cta-hover, 0 4px 12px rgba(82, 196, 26, 0.4))',
                 transform: 'translateY(-1px)',
                 '&::before': {
@@ -236,12 +236,12 @@ var genStyle = function genStyle(token) {
                 }
             },
             '&:active:not(&-disabled)': {
-                backgroundColor: 'var(--color-green-success-active, #389e0d)',
+                backgroundColor: 'var(--color-green-control-fill-primary-active)',
                 boxShadow: 'var(--shadow-cta-active, 0 1px 4px rgba(82, 196, 26, 0.2))',
                 transform: 'translateY(0)'
             },
             '&:focus-visible': {
-                boxShadow: '0 0 0 2px var(--color-green-success-light, #f6ffed)'
+                boxShadow: '0 0 0 2px var(--color-green-bg-page-light)'
             }
         },
         // 禁用状态

package/dist/Components/Loading/style.js

@@ -100,7 +100,7 @@ var genStyle = function genStyle(token) {
     }), _obj)), _define_property(_obj3, "".concat(token.componentCls, "-nested-pattern"), (_obj2 = {
         position: 'relative'
     }, _define_property(_obj2, "&".concat(token.componentCls, "-spinning"), _define_property({
-        background: 'var(--color-primary-bg-page, #f5f9ff)',
+        background: 'var(--color-primary-bg-page)',
         borderRadius: 'var(--radius-card-lg, 22px)',
         overflow: 'hidden',
         '&:before, &:after': {
@@ -115,7 +115,7 @@ var genStyle = function genStyle(token) {
             height: '160%',
             top: '-30%',
             left: '-40%',
-            background: 'radial-gradient(ellipse 70% 60% at 50% 50%, var(--color-sub2-2, #f0fbfe) 0%, transparent 70%)',
+            background: 'radial-gradient(ellipse 70% 60% at 50% 50%, var(--color-sub2-2) 0%, transparent 70%)',
             animationName: beforeAnimation,
             animationDuration: '6s',
             animationTimingFunction: 'ease-in-out',
@@ -126,7 +126,7 @@ var genStyle = function genStyle(token) {
             height: '140%',
             top: '-30%',
             right: '-40%',
-            background: 'radial-gradient(ellipse 70% 60% at 50% 50%, var(--color-sub1-2, #f1f0ff) 0%, transparent 60%)',
+            background: 'radial-gradient(ellipse 70% 60% at 50% 50%, var(--color-sub1-2) 0%, transparent 60%)',
             filter: 'blur(60px)',
             animationName: afterAnimation,
             animationDuration: '7s',
@@ -147,7 +147,7 @@ var genStyle = function genStyle(token) {
         height: '100%'
     })), _define_property(_obj2, // Dark theme
     '&-dark', (_obj1 = {}, _define_property(_obj1, "&".concat(token.componentCls, "-spinning"), {
-        background: 'var(--color-gray-bg-page-dark, #141414)',
+        background: 'var(--color-gray-bg-page-dark)',
         '&::before': {
             background: 'radial-gradient(ellipse 70% 60% at 50% 50%, rgba(22, 96, 255, 0.15) 0%, transparent 70%)'
         },
@@ -155,7 +155,7 @@ var genStyle = function genStyle(token) {
             background: 'radial-gradient(ellipse 70% 60% at 50% 50%, rgba(135, 87, 255, 0.15) 0%, transparent 60%)'
         }
     }), _define_property(_obj1, "".concat(token.componentCls, "-tip"), {
-        color: 'rgba(255, 255, 255, 0.65)'
+        color: 'var(--color-gray-text-light)'
     }), _obj1)), _obj2)), _obj3;
 };
 export var prefixCls = 'loading';