feat: add useTDesignDesignTokens

packages/@core/base/shared/src/utils/__tests__/update-css-variables.test.ts

@@ -28,3 +28,21 @@ it('updateCSSVariables should update CSS variables in :root selector', () => {
       updatedStyleContent?.includes('fontSize: 16px;'),
   ).toBe(true);
 });
+
+it('updateCSSVariables should support a custom selector', () => {
+  document.head.innerHTML = `<style id="tdesign-styles"></style>`;
+
+  // 使用自定义选择器（如 TDesign 的 theme-mode 选择器）更新 CSS 变量
+  updateCSSVariables(
+    { '--td-brand-color': 'rgb(0, 82, 217)' },
+    'tdesign-styles',
+    ":root[theme-mode='dark']",
+  );
+
+  const styleElement = document.querySelector('#tdesign-styles');
+  const content = styleElement?.textContent ?? '';
+
+  // 选择器与变量都应正确写入
+  expect(content.startsWith(":root[theme-mode='dark'] {")).toBe(true);
+  expect(content.includes('--td-brand-color: rgb(0, 82, 217);')).toBe(true);
+});

packages/@core/base/shared/src/utils/update-css-variables.ts

@@ -1,10 +1,15 @@
 /**
  * 更新 CSS 变量的函数
  * @param variables 要更新的 CSS 变量与其新值的映射
+ * @param id 内联样式表的 id，便于复用与覆盖
+ * @param selector CSS 变量挂载的选择器，默认 `:root`。
+ *  对于像 TDesign 这种将变量定义在 `:root[theme-mode='dark']` 等更高优先级选择器下的组件库，
+ *  需要传入相同（或更高）优先级的选择器才能正确覆盖。
  */
 function updateCSSVariables(
   variables: { [key: string]: string },
   id = '__vben-styles__',
+  selector = ':root',
 ): void {
   // 获取或创建内联样式表元素
   const styleElement =
@@ -13,7 +18,7 @@ function updateCSSVariables(
   styleElement.id = id;
 
   // 构建要更新的 CSS 变量的样式文本
-  let cssText = ':root {';
+  let cssText = `${selector} {`;
   for (const key in variables) {
     if (Object.prototype.hasOwnProperty.call(variables, key)) {
       cssText += `${key}: ${variables[key]};`;