From 46ea9ed32e364de1fff8b9a2bc1788e115a990df Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Tue, 22 Oct 2024 02:41:39 -0700
Subject: [PATCH 1/6] fix(theme): fix

---
 .gitignore                         | 10 ++++++++--
 packages/theme/build/gulp-dist.js  |  4 ++--
 packages/theme/package.json        |  4 ++--
 packages/theme/src/base/index.less |  1 -
 packages/theme/src/base/reset.less |  2 +-
 packages/theme/src/index.less      |  1 -
 packages/theme/src/old-theme.less  |  2 --
 7 files changed, 13 insertions(+), 11 deletions(-)
 delete mode 100644 packages/theme/src/old-theme.less

diff --git a/.gitignore b/.gitignore
index 105939eacb..eddab67b5b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -59,13 +59,18 @@ tgzs
 *.tgz
 
 
+# 以下用不到了
 packages/theme/scripts/theme.json
 packages/theme/scripts/theme-result.txt
 packages/theme/scripts/themeExcel.xlsx
-
 packages/theme/src/theme/*-theme/component.js
 packages/theme/src/aurora-theme
 packages/theme/src/smb-theme
+#------------------------------
+
+# theme 的汇总文件是自动生成的
+packages/theme/src/old-theme-index.less
+packages/theme/src/index.less
 
 pnpm-lock.yaml
 gulp/bundle.json
@@ -79,4 +84,5 @@ test-results
 examples/sites/public/tiny-vue*.js
 examples/sites/public/tiny-vue*.mjs
 examples/sites/public/tailwind.css
-examples/sites/public/index.css
\ No newline at end of file
+examples/sites/public/index.css
+
diff --git a/packages/theme/build/gulp-dist.js b/packages/theme/build/gulp-dist.js
index 35285782c4..9851684595 100644
--- a/packages/theme/build/gulp-dist.js
+++ b/packages/theme/build/gulp-dist.js
@@ -32,7 +32,7 @@ function concatIndex(cb) {
 }
 // 2、拼接所有组件的 old-theme.less 到一起   old-theme-index.less
 function concatOldTheme(cb) {
-  _concatFiles('../src/*/old-theme.less', '../src/old-theme.less')
+  _concatFiles('../src/*/old-theme.less', '../src/old-theme-index.less')
   cb()
 }
 // 3、编译
@@ -41,7 +41,7 @@ gulp.task('compile', () => {
     .src([
       `${source}/**/index.less`, // 编译默认主题
       `${source}/index.less`,
-      `${source}/old-theme.less` // 编译旧主题
+      `${source}/old-theme-index.less` // 编译旧主题
     ])
     .pipe(svgInline(svgInlineOption))
     .pipe(less())
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 132f127e8e..5c7475d3d0 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -29,11 +29,11 @@
   },
   "main": "index.css",
   "scripts": {
-    "clean": "rimraf dist src/aurora-theme src/smb-theme",
+    "clean": "rimraf dist",
     "build:theme": "gulp build --gulpfile build/gulp-dist.js",
     "build": "npm run clean && npm run build:theme",
-    "release": "node build/release.js",
     "build:fast": "npm run build && npm run release",
+    "release": "node build/release.js",
     "build:copy-remote": "npm run build:theme && cp-cli dist ../tiny-vue/node_modules/@opentiny/vue-theme",
     "publishTgz": "node .cloudbuild/publish-tgzs.js",
     "postversion": "pnpm build",
diff --git a/packages/theme/src/base/index.less b/packages/theme/src/base/index.less
index de126e6fa2..2dc81e10d7 100644
--- a/packages/theme/src/base/index.less
+++ b/packages/theme/src/base/index.less
@@ -13,4 +13,3 @@
 @import './reset.less';
 @import './vars.less';
 @import './transition.less';
-@import '../svg/index.less';
diff --git a/packages/theme/src/base/reset.less b/packages/theme/src/base/reset.less
index 479e10d531..ffd6b6e4ae 100644
--- a/packages/theme/src/base/reset.less
+++ b/packages/theme/src/base/reset.less
@@ -11,7 +11,7 @@
 */
 
 @import '../custom.less';
-@import './basic-var.less';
+@import './vars.less';
 
 // .tiny-icon-loading 类名的动画效果。 它出现在多个组件中，故抽取到一起。
 .@{css-prefix-iconfont}-loading {
diff --git a/packages/theme/src/index.less b/packages/theme/src/index.less
index 7c51b3a2c4..fad9264dd6 100644
--- a/packages/theme/src/index.less
+++ b/packages/theme/src/index.less
@@ -123,7 +123,6 @@
 @import './statistic/index.less';
 @import './steps/index.less';
 @import './sticky/index.less';
-@import './svg/index.less';
 @import './switch/index.less';
 @import './table/index.less';
 @import './tabs/index.less';
diff --git a/packages/theme/src/old-theme.less b/packages/theme/src/old-theme.less
deleted file mode 100644
index fd371fa279..0000000000
--- a/packages/theme/src/old-theme.less
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './base/old-theme.less';
-@import './button/old-theme.less';
\ No newline at end of file

From 73c9891ff623cdd6915ef00b97c0e8055bef1f69 Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Wed, 23 Oct 2024 01:32:22 -0700
Subject: [PATCH 2/6] refactor(theme-tool): refactor theme-tool Class, adopt
 style by adoptedStyleSheets

---
 packages/theme/build/release.js          | 19 +++++++++++++++----
 packages/theme/old-theme-index.js        |  6 ++++++
 packages/theme/src/theme-tool.js         |  1 -
 packages/theme/{src => }/theme-tool.d.ts |  6 +-----
 packages/theme/theme-tool.js             | 22 ++++++++++++++++++++++
 5 files changed, 44 insertions(+), 10 deletions(-)
 create mode 100644 packages/theme/old-theme-index.js
 delete mode 100644 packages/theme/src/theme-tool.js
 rename packages/theme/{src => }/theme-tool.d.ts (52%)
 create mode 100644 packages/theme/theme-tool.js

diff --git a/packages/theme/build/release.js b/packages/theme/build/release.js
index b6b6c70269..3525be7968 100644
--- a/packages/theme/build/release.js
+++ b/packages/theme/build/release.js
@@ -1,12 +1,23 @@
 import fs from 'node:fs'
 import path from 'node:path'
 
-// 复制package.json/README.md到dist目录
+const root = path.resolve('./')
+
+// 1、复制 theme-tool.js /README.md 到dist目录
 fs.copyFileSync('README.md', path.join('dist', 'README.md'))
+fs.copyFileSync('theme-tool.js', path.join('dist', 'theme-tool.js'))
+fs.copyFileSync('theme-tool.d.ts', path.join('dist', 'theme-tool.d.ts'))
 
-const root = path.resolve('./')
-const content = await fs.promises.readFile(path.resolve(root, 'package.json'), 'utf8')
+// 2、读取 old-theme-index.js , dist/old-theme-index.less， 合并后写入 dist/ old-theme-index.js
+let jsStr = fs.readFileSync(path.resolve(root, 'old-theme-index.js'), 'utf8')
+let cssStr = fs.readFileSync(path.resolve(root, 'dist/old-theme-index.css'), 'utf8')
+
+jsStr = jsStr.replace('#CSS#', cssStr)
+fs.writeFileSync(path.resolve(root, 'dist/old-theme-index.js'), jsStr)
+
+// 3、复制 package.json
+const content = fs.readFileSync(path.resolve(root, 'package.json'), 'utf8')
 const packageJson = JSON.parse(content)
 delete packageJson.exports
 delete packageJson.private
-await fs.promises.writeFile(path.resolve(root, 'dist/package.json'), JSON.stringify(packageJson, null, 2))
+fs.writeFileSync(path.resolve(root, 'dist/package.json'), JSON.stringify(packageJson, null, 2))
diff --git a/packages/theme/old-theme-index.js b/packages/theme/old-theme-index.js
new file mode 100644
index 0000000000..9d8107c9af
--- /dev/null
+++ b/packages/theme/old-theme-index.js
@@ -0,0 +1,6 @@
+export default {
+  id: 'tiny-old-theme',
+  name: 'OldTheme',
+  cnName: '旧的主题',
+  data: `#CSS#`
+}
diff --git a/packages/theme/src/theme-tool.js b/packages/theme/src/theme-tool.js
deleted file mode 100644
index b804ddec04..0000000000
--- a/packages/theme/src/theme-tool.js
+++ /dev/null
@@ -1 +0,0 @@
-export default class TinyThemeTool {}
diff --git a/packages/theme/src/theme-tool.d.ts b/packages/theme/theme-tool.d.ts
similarity index 52%
rename from packages/theme/src/theme-tool.d.ts
rename to packages/theme/theme-tool.d.ts
index 44255ec113..70b021cba4 100644
--- a/packages/theme/src/theme-tool.d.ts
+++ b/packages/theme/theme-tool.d.ts
@@ -6,10 +6,6 @@ interface ThemeData {
 }
 
 export default class TinyThemeTool {
-  currentTheme: string
-  contentElement: HTMLElement
-  styleSheetId: string
-  defaultTheme: object
   changeTheme: (theme: ThemeData) => void
-  constructor(theme: ThemeData, styleSheetId: string)
+  constructor(theme: ThemeData)
 }
diff --git a/packages/theme/theme-tool.js b/packages/theme/theme-tool.js
new file mode 100644
index 0000000000..b316273b54
--- /dev/null
+++ b/packages/theme/theme-tool.js
@@ -0,0 +1,22 @@
+import OldTheme from './old-theme-index.js'
+
+export { OldTheme }
+
+export default class TinyThemeTool {
+  constructor(theme) {
+    this._loadedSheet = theme
+    this.changeTheme(theme)
+  }
+
+  changeTheme(theme) {
+    if (this._loadedSheet) {
+      document.adoptedStyleSheets = document.adoptedStyleSheets.filter((t) => t !== this._loadedSheet)
+    }
+
+    const sheet = new CSSStyleSheet()
+    sheet.replaceSync(theme.data)
+
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]
+    this._loadedSheet = sheet
+  }
+}

From b1e6e754ce84e71fc46d37fe2faf00d605cae5c5 Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Wed, 23 Oct 2024 01:33:00 -0700
Subject: [PATCH 3/6] fix(theme): fix

---
 .eslintrc.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 86bb789d60..d1be1e9942 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -50,6 +50,7 @@ module.exports = {
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/restrict-template-expressions': 'off',
     '@typescript-eslint/no-invalid-this': 'off',
-    'vue/no-deprecated-dollar-scopedslots-api': 'off'
+    'vue/no-deprecated-dollar-scopedslots-api': 'off',
+    '@typescript-eslint/lines-between-class-members': 'off'
   }
 }

From 9a61f5b358c733674d88dc0b7e4e3e050fdc5757 Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Wed, 23 Oct 2024 02:24:34 -0700
Subject: [PATCH 4/6] refactor(theme-tool): refactor theme-tool done

---
 examples/sites/src/tools/useTheme.js     |  3 ++
 packages/theme/build/release.js          | 14 +++++++--
 packages/theme/old-theme-index.js        |  6 ----
 packages/theme/src/button/old-theme.less |  2 +-
 packages/theme/src/old-theme-index.js    |  6 ++++
 packages/theme/{ => src}/theme-tool.d.ts |  3 ++
 packages/theme/src/theme-tool.js         | 37 ++++++++++++++++++++++++
 packages/theme/theme-tool.js             | 22 --------------
 8 files changed, 61 insertions(+), 32 deletions(-)
 delete mode 100644 packages/theme/old-theme-index.js
 create mode 100644 packages/theme/src/old-theme-index.js
 rename packages/theme/{ => src}/theme-tool.d.ts (59%)
 create mode 100644 packages/theme/src/theme-tool.js
 delete mode 100644 packages/theme/theme-tool.js

diff --git a/examples/sites/src/tools/useTheme.js b/examples/sites/src/tools/useTheme.js
index c04c37e967..028acf6f44 100644
--- a/examples/sites/src/tools/useTheme.js
+++ b/examples/sites/src/tools/useTheme.js
@@ -24,6 +24,7 @@ import oceanicIcon from '@/assets/images/oceanic-icon.png'
 
 import starrySky from '@/assets/images/starry-sky.png'
 import starrySkyIcon from '@/assets/images/starry-sky-icon.png'
+import { OldTheme } from '@opentiny/vue-theme/theme-tool'
 
 const themeMap = {
   [DEFAULT_THEME]: null,
@@ -73,6 +74,8 @@ const designConfigMap = {
 }
 
 const theme = new TinyThemeTool()
+window.tt = theme
+window.OldTheme = OldTheme
 
 const defaultThemeKey = DEFAULT_THEME
 const currentThemeKey = hooks.ref(defaultThemeKey)
diff --git a/packages/theme/build/release.js b/packages/theme/build/release.js
index 3525be7968..144cc1c4ff 100644
--- a/packages/theme/build/release.js
+++ b/packages/theme/build/release.js
@@ -5,14 +5,22 @@ const root = path.resolve('./')
 
 // 1、复制 theme-tool.js /README.md 到dist目录
 fs.copyFileSync('README.md', path.join('dist', 'README.md'))
-fs.copyFileSync('theme-tool.js', path.join('dist', 'theme-tool.js'))
-fs.copyFileSync('theme-tool.d.ts', path.join('dist', 'theme-tool.d.ts'))
+fs.copyFileSync('src/theme-tool.js', path.join('dist', 'theme-tool.js'))
+fs.copyFileSync('src/theme-tool.d.ts', path.join('dist', 'theme-tool.d.ts'))
 
 // 2、读取 old-theme-index.js , dist/old-theme-index.less， 合并后写入 dist/ old-theme-index.js
-let jsStr = fs.readFileSync(path.resolve(root, 'old-theme-index.js'), 'utf8')
+let jsStr = `
+export default {
+  id: 'tiny-old-theme',
+  name: 'OldTheme',
+  cnName: '旧的主题',
+  css: \`#CSS#\`
+}
+`
 let cssStr = fs.readFileSync(path.resolve(root, 'dist/old-theme-index.css'), 'utf8')
 
 jsStr = jsStr.replace('#CSS#', cssStr)
+fs.writeFileSync(path.resolve(root, 'src/old-theme-index.js'), jsStr) // 供开发时(pnpm site)， 可以访问到最新的定制主题变量
 fs.writeFileSync(path.resolve(root, 'dist/old-theme-index.js'), jsStr)
 
 // 3、复制 package.json
diff --git a/packages/theme/old-theme-index.js b/packages/theme/old-theme-index.js
deleted file mode 100644
index 9d8107c9af..0000000000
--- a/packages/theme/old-theme-index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  id: 'tiny-old-theme',
-  name: 'OldTheme',
-  cnName: '旧的主题',
-  data: `#CSS#`
-}
diff --git a/packages/theme/src/button/old-theme.less b/packages/theme/src/button/old-theme.less
index ab9ee735ab..e76d17243a 100644
--- a/packages/theme/src/button/old-theme.less
+++ b/packages/theme/src/button/old-theme.less
@@ -3,5 +3,5 @@
 
 .@{button-prefix-cls} {
   // 默认时按钮字重
-  --tv-Button-font-weight: var(--tv-font-weight-thin);
+  --tv-Button-border-radius: 6px;
 }
diff --git a/packages/theme/src/old-theme-index.js b/packages/theme/src/old-theme-index.js
new file mode 100644
index 0000000000..d9a09fba81
--- /dev/null
+++ b/packages/theme/src/old-theme-index.js
@@ -0,0 +1,6 @@
+export default {
+  id: 'tiny-old-theme',
+  name: 'OldTheme',
+  cnName: '旧的主题',
+  css: `:root{--tv-base-color-brand:#191919;--tv-base-color-brand-1:#f0f7ff;--tv-base-color-brand-2:#deecff;--tv-base-color-brand-3:#b3d6ff;--tv-base-color-brand-4:#7eb7fc;--tv-base-color-brand-5:#4191fa;--tv-base-color-brand-6:#1476ff;--tv-base-color-brand-7:#0f5ed4;--tv-base-color-brand-8:#0845a6;--tv-base-color-brand-9:#022e7a;--tv-base-color-brand-10:#001a4a;--tv-base-color-brand-11:#3d6899;--tv-base-color-brand-12:#7fa6d4;--tv-base-color-brand-13:#b6d4f2;--tv-base-color-common-1:#ffffff;--tv-base-color-common-2:#fafafa;--tv-base-color-common-3:#f5f5f5;--tv-base-color-common-4:#f0f0f0;--tv-base-color-common-5:#e6e6e6;--tv-base-color-common-6:#dbdbdb;--tv-base-color-common-7:#c2c2c2;--tv-base-color-common-8:#808080;--tv-base-color-common-9:#595959;--tv-base-color-common-10:#333333;--tv-base-color-common-11:#191919;--tv-base-color-common-12:#000000;--tv-base-color-success-1:#edf7df;--tv-base-color-success-2:#daf2bb;--tv-base-color-success-3:#b9e683;--tv-base-color-success-4:#9edb58;--tv-base-color-success-5:#7dcc29;--tv-base-color-success-6:#5cb300;--tv-base-color-success-7:#4b9902;--tv-base-color-success-8:#3c8001;--tv-base-color-success-9:#2e6600;--tv-base-color-success-10:#1f4700;--tv-base-color-success-11:#628c38;--tv-base-color-success-12:#a2c777;--tv-base-color-success-13:#d2e6b8;--tv-base-color-success-14:#e6f2d5;--tv-base-color-error-1:#fff1f0;--tv-base-color-error-2:#fce2e0;--tv-base-color-error-3:#faa7a3;--tv-base-color-error-4:#fa8682;--tv-base-color-error-5:#f76360;--tv-base-color-error-6:#f23030;--tv-base-color-error-7:#bf0a1c;--tv-base-color-error-8:#a3171c;--tv-base-color-error-9:#78080e;--tv-base-color-error-10:#4d0005;--tv-base-color-error-11:#a64242;--tv-base-color-error-12:#f2c5c2;--tv-base-color-error-13:#fce3e1;--tv-base-color-warn-1:#fff4e8;--tv-base-color-warn-2:#ffebd1;--tv-base-color-warn-3:#fcd5a4;--tv-base-color-warn-4:#fcbc72;--tv-base-color-warn-5:#ff9a2e;--tv-base-color-warn-6:#ff8800;--tv-base-color-warn-7:#d96900;--tv-base-color-warn-8:#a64d00;--tv-base-color-warn-9:#733400;--tv-base-color-warn-10:#4d2201;--tv-base-color-warn-11:#9e6d3f;--tv-base-color-warn-12:#d6a981;--tv-base-color-warn-13:#f2d8c2;--tv-base-color-warn-secondary-1:#ffb700;--tv-base-color-info-1:#f0f7ff;--tv-base-color-info-2:#deecff;--tv-base-color-info-3:#b3d6ff;--tv-base-color-info-4:#7eb7fc;--tv-base-color-info-5:#4191fa;--tv-base-color-info-6:#1476ff;--tv-base-color-info-7:#0f5ed4;--tv-base-color-info-8:#0845a6;--tv-base-color-info-9:#022e7a;--tv-base-color-info-10:#001a4a;--tv-base-color-info-11:#3d6899;--tv-base-color-info-12:#7fa6d4;--tv-base-color-info-13:#b6d4f2;--tv-color-success-text:var(--tv-base-color-success-6);--tv-color-success-text-primary:var(--tv-base-color-common-11);--tv-color-success-text-white:var(--tv-base-color-common-1);--tv-color-success-bg:var(--tv-base-color-success-6);--tv-color-success-bg-light:var(--tv-base-color-success-14);--tv-color-success-bg-white:var(--tv-base-color-common-1);--tv-color-success-border:var(--tv-base-color-success-6);--tv-color-success-border-light:var(--tv-base-color-success-14);--tv-color-success-icon:var(--tv-base-color-success-6);--tv-color-error-text:var(--tv-base-color-error-6);--tv-color-error-text-primary:var(--tv-base-color-common-11);--tv-color-error-text-white:var(--tv-base-color-common-1);--tv-color-error-bg:var(--tv-base-color-error-6);--tv-color-error-bg-light:var(--tv-base-color-error-13);--tv-color-error-bg-white:var(--tv-base-color-common-1);--tv-color-error-border:var(--tv-base-color-error-6);--tv-color-error-border-light:var(--tv-base-color-error-13);--tv-color-error-icon:var(--tv-base-color-error-6);--tv-color-warn-text:var(--tv-base-color-warn-6);--tv-color-warn-text-primary:var(--tv-base-color-common-11);--tv-color-warn-text-white:var(--tv-base-color-common-1);--tv-color-warn-bg:var(--tv-base-color-warn-6);--tv-color-warn-bg-light:var(--tv-base-color-warn-2);--tv-color-warn-bg-white:var(--tv-base-color-common-1);--tv-color-warn-border:var(--tv-base-color-warn-6);--tv-color-warn-border-light:var(--tv-base-color-warn-2);--tv-color-warn-icon:var(--tv-base-color-warn-6);--tv-color-info-text:var(--tv-base-color-info-6);--tv-color-info-text-primary:var(--tv-base-color-common-11);--tv-color-info-text-white:var(--tv-base-color-common-1);--tv-color-info-bg:var(--tv-base-color-info-6);--tv-color-info-bg-light:var(--tv-base-color-info-2);--tv-color-info-bg-white:var(--tv-base-color-common-1);--tv-color-info-border:var(--tv-base-color-info-6);--tv-color-info-border-light:var(--tv-base-color-info-2);--tv-color-info-icon:var(--tv-base-color-info-6);--tv-color-act-primary-text:var(--tv-base-color-brand);--tv-color-act-primary-text-hover:var(--tv-base-color-brand);--tv-color-act-primary-text-active:var(--tv-base-color-brand);--tv-color-act-primary-text-white:var(--tv-base-color-common-1);--tv-color-act-primary-text-white-hover:var(--tv-base-color-common-1);--tv-color-act-primary-text-white-active:var(--tv-base-color-common-1);--tv-color-act-primary-bg:var(--tv-base-color-brand);--tv-color-act-primary-bg-hover:var(--tv-base-color-common-9);--tv-color-act-primary-bg-active:var(--tv-base-color-common-9);--tv-color-act-primary-bg-white:var(--tv-base-color-common-1);--tv-color-act-primary-bg-white-hover:var(--tv-base-color-common-1);--tv-color-act-primary-bg-white-active:var(--tv-base-color-common-1);--tv-color-act-primary-border:var(--tv-base-color-brand);--tv-color-act-primary-border-hover:var(--tv-base-color-common-9);--tv-color-act-primary-border-active:var(--tv-base-color-common-9);--tv-color-act-primary-border-light:var(--tv-base-color-common-9);--tv-color-act-primary-border-light-hover:var(--tv-base-color-common-1);--tv-color-act-primary-border-light-active:var(--tv-base-color-common-1);--tv-color-act-primary-border-light-hover-1:var(--tv-base-color-common-7);--tv-color-act-primary-border-light-active-1:var(--tv-base-color-common-7);--tv-color-act-success-text:var(--tv-base-color-success-6);--tv-color-act-success-text-hover:var(--tv-base-color-success-6);--tv-color-act-success-text-active:var(--tv-base-color-success-6);--tv-color-act-success-text-white:var(--tv-base-color-common-1);--tv-color-act-success-text-white-hover:var(--tv-base-color-common-1);--tv-color-act-success-text-white-active:var(--tv-base-color-common-1);--tv-color-act-success-bg:var(--tv-base-color-success-6);--tv-color-act-success-bg-hover:var(--tv-base-color-success-5);--tv-color-act-success-bg-active:var(--tv-base-color-success-5);--tv-color-act-success-bg-light:var(--tv-base-color-success-1);--tv-color-act-success-bg-light-hover:var(--tv-base-color-success-1);--tv-color-act-success-bg-light-active:var(--tv-base-color-success-1);--tv-color-act-success-border:var(--tv-base-color-success-6);--tv-color-act-success-border-hover:var(--tv-base-color-success-5);--tv-color-act-success-border-active:var(--tv-base-color-success-5);--tv-color-act-success-border-hover-1:var(--tv-base-color-success-2);--tv-color-act-success-border-active-1:var(--tv-base-color-success-2);--tv-color-act-success-border-light:var(--tv-base-color-success-2);--tv-color-act-success-border-light-hover:var(--tv-base-color-success-1);--tv-color-act-success-border-light-active:var(--tv-base-color-success-1);--tv-color-act-warning-text:var(--tv-base-color-warn-6);--tv-color-act-warning-text-hover:var(--tv-base-color-warn-6);--tv-color-act-warning-text-active:var(--tv-base-color-warn-6);--tv-color-act-warning-text-white:var(--tv-base-color-common-1);--tv-color-act-warning-text-white-hover:var(--tv-base-color-common-1);--tv-color-act-warning-text-white-active:var(--tv-base-color-common-1);--tv-color-act-warning-bg:var(--tv-base-color-warn-6);--tv-color-act-warning-bg-hover:var(--tv-base-color-warn-5);--tv-color-act-warning-bg-active:var(--tv-base-color-warn-5);--tv-color-act-warning-bg-light:var(--tv-base-color-warn-1);--tv-color-act-warning-bg-light-hover:var(--tv-base-color-warn-1);--tv-color-act-warning-bg-light-active:var(--tv-base-color-warn-1);--tv-color-act-warning-border:var(--tv-base-color-warn-6);--tv-color-act-warning-border-hover:var(--tv-base-color-warn-5);--tv-color-act-warning-border-active:var(--tv-base-color-warn-5);--tv-color-act-warning-border-hover-1:var(--tv-base-color-warn-2);--tv-color-act-warning-border-active-1:var(--tv-base-color-warn-2);--tv-color-act-warning-border-light:var(--tv-base-color-warn-2);--tv-color-act-warning-border-light-hover:var(--tv-base-color-warn-1);--tv-color-act-warning-border-light-active:var(--tv-base-color-warn-1);--tv-color-act-danger-text:var(--tv-base-color-error-6);--tv-color-act-danger-text-hover:var(--tv-base-color-error-6);--tv-color-act-danger-text-active:var(--tv-base-color-error-6);--tv-color-act-danger-text-white:var(--tv-base-color-common-1);--tv-color-act-danger-text-white-hover:var(--tv-base-color-common-1);--tv-color-act-danger-text-white-active:var(--tv-base-color-common-1);--tv-color-act-danger-bg:var(--tv-base-color-error-6);--tv-color-act-danger-bg-hover:var(--tv-base-color-error-5);--tv-color-act-danger-bg-active:var(--tv-base-color-error-5);--tv-color-act-danger-bg-light:var(--tv-base-color-error-1);--tv-color-act-danger-bg-light-hover:var(--tv-base-color-error-1);--tv-color-act-danger-bg-light-active:var(--tv-base-color-error-1);--tv-color-act-danger-border:var(--tv-base-color-error-6);--tv-color-act-danger-border-hover:var(--tv-base-color-error-5);--tv-color-act-danger-border-active:var(--tv-base-color-error-5);--tv-color-act-danger-border-hover-1:var(--tv-base-color-error-2);--tv-color-act-danger-border-active-1:var(--tv-base-color-error-2);--tv-color-act-danger-border-light:var(--tv-base-color-error-2);--tv-color-act-danger-border-light-hover:var(--tv-base-color-error-1);--tv-color-act-danger-border-light-active:var(--tv-base-color-error-1);--tv-color-act-info-text:var(--tv-base-color-info-6);--tv-color-act-info-text-hover:var(--tv-base-color-info-6);--tv-color-act-info-text-active:var(--tv-base-color-info-6);--tv-color-act-info-text-white:var(--tv-base-color-common-1);--tv-color-act-info-text-white-hover:var(--tv-base-color-common-1);--tv-color-act-info-text-white-active:var(--tv-base-color-common-1);--tv-color-act-info-bg:var(--tv-base-color-info-6);--tv-color-act-info-bg-hover:var(--tv-base-color-info-5);--tv-color-act-info-bg-active:var(--tv-base-color-info-5);--tv-color-act-info-bg-light:var(--tv-base-color-info-1);--tv-color-act-info-bg-light-hover:var(--tv-base-color-info-1);--tv-color-act-info-bg-light-active:var(--tv-base-color-info-1);--tv-color-act-info-border:var(--tv-base-color-info-6);--tv-color-act-info-border-hover:var(--tv-base-color-info-5);--tv-color-act-info-border-active:var(--tv-base-color-info-5);--tv-color-act-info-border-hover-1:var(--tv-base-color-info-2);--tv-color-act-info-border-active-1:var(--tv-base-color-info-2);--tv-color-act-info-border-light:var(--tv-base-color-info-2);--tv-color-act-info-border-light-hover:var(--tv-base-color-info-1);--tv-color-act-info-border-light-active:var(--tv-base-color-info-1);--tv-color-text:var(--tv-base-color-common-11);--tv-color-text-secondary:var(--tv-base-color-common-9);--tv-color-text-weaken:var(--tv-base-color-common-8);--tv-color-text-placeholder:var(--tv-base-color-common-8);--tv-color-text-disabled:var(--tv-base-color-common-7);--tv-color-text-active:var(--tv-base-color-brand-6);--tv-color-text-important:var(--tv-base-color-common-11);--tv-color-text-white:var(--tv-base-color-common-1);--tv-color-text-link:var(--tv-base-color-brand-6);--tv-color-text-link-hover:var(--tv-base-color-brand-6);--tv-color-icon:var(--tv-base-color-common-8);--tv-color-icon-hover:var(--tv-base-color-common-11);--tv-color-icon-active:var(--tv-base-color-common-11);--tv-color-icon-disabled:var(--tv-base-color-common-7);--tv-color-icon-checked-disabled:var(--tv-base-color-common-6);--tv-color-icon-control:var(--tv-base-color-brand);--tv-color-icon-control-active:var(--tv-base-color-brand-6);--tv-color-icon-control-disabled:var(--tv-base-color-common-6);--tv-color-icon-white:var(--tv-base-color-common-1);--tv-color-icon-link:var(--tv-base-color-brand-6);--tv-color-icon-warn-secondary:var(--tv-base-color-warn-secondary-1);--tv-color-bg:var(--tv-base-color-common-3);--tv-color-bg-primary:var(--tv-base-color-brand);--tv-color-bg-secondary:var(--tv-base-color-common-1);--tv-color-bg-control:var(--tv-base-color-common-7);--tv-color-bg-control-unactive:var(--tv-base-color-common-7);--tv-color-bg-gray-1:var(--tv-base-color-common-2);--tv-color-bg-gray-2:var(--tv-base-color-common-5);--tv-color-bg-header:var(--tv-base-color-common-4);--tv-color-bg-mask:rgba(0, 0, 0, 0.3);--tv-color-bg-disabled:var(--tv-base-color-common-4);--tv-color-bg-disabled-control-checked:var(--tv-base-color-common-6);--tv-color-bg-disabled-control-unactive:var(--tv-base-color-common-6);--tv-color-bg-disabled-control-active:var(--tv-base-color-brand-3);--tv-color-bg-hover:var(--tv-base-color-common-3);--tv-color-bg-hover-primary:var(--tv-base-color-common-9);--tv-color-bg-hover-secondary:var(--tv-base-color-common-1);--tv-color-bg-hover-1:var(--tv-base-color-brand-2);--tv-color-bg-hover-2:var(--tv-base-color-common-5);--tv-color-bg-hover-3:var(--tv-base-color-brand-1);--tv-color-bg-active:var(--tv-base-color-common-3);--tv-color-bg-active-control:var(--tv-base-color-brand-6);--tv-color-bg-active-primary:var(--tv-base-color-brand);--tv-color-bg-active-secondary:var(--tv-base-color-common-1);--tv-color-bg-active-emphasize:var(--tv-base-color-brand-2);--tv-color-bg-active-emphasize-light:var(--tv-base-color-brand-1);--tv-color-border:var(--tv-base-color-common-7);--tv-color-border-hover:var(--tv-base-color-brand);--tv-color-border-active:var(--tv-base-color-brand);--tv-color-border-active-control:var(--tv-base-color-brand-6);--tv-color-border-disabled:var(--tv-base-color-common-6);--tv-color-border-secondary:var(--tv-base-color-common-9);--tv-color-border-ghost:var(--tv-base-color-common-8);--tv-color-border-ghost-active:var(--tv-base-color-common-6);--tv-color-border-divider:var(--tv-base-color-common-4);--tv-color-border-divider-short:var(--tv-base-color-common-6);--tv-font-family:'Helvetica','Arial','PingFangSC-Regular','Hiragino Sans GB','Microsoft YaHei','微软雅黑','Microsoft JhengHei';--tv-font-family-1:'Arial','San Francisco','Helvetica';--tv-font-size-sm:12px;--tv-font-size-md:14px;--tv-font-size-lg:16px;--tv-font-size-xl:18px;--tv-font-size-xxl:20px;--tv-font-size-heading-xs:16px;--tv-font-size-heading-sm:18px;--tv-font-size-heading-md:20px;--tv-font-size-heading-lg:24px;--tv-font-size-heading-xl:32px;--tv-line-height-number:1.5;--tv-font-weight-thin:200;--tv-font-weight-regular:400;--tv-font-weight-bold:600;--tv-border-radius-xs:2px;--tv-border-radius-sm:4px;--tv-border-radius-md:6px;--tv-border-radius-lg:8px;--tv-border-radius-round:999px;--tv-border-width:1px;--tv-space-base:4px;--tv-space-xs:2px;--tv-space-sm:var(--tv-space-base);--tv-space-md:calc(var(--tv-space-base) * 2);--tv-space-lg:calc(var(--tv-space-base) * 3);--tv-space-xl:calc(var(--tv-space-base) * 4);--tv-size-base:4px;--tv-size-height-xs:24px;--tv-size-height-sm:28px;--tv-size-height-md:32px;--tv-size-height-lg:40px;--tv-size-height-xl:48px;--tv-icon-size:16px;--tv-shadow-0:0 4px 16px 0 rgba(0, 0, 0, 0.08);--tv-shadow-1:0 0 0 0 rgba(0, 0, 0, 0);--tv-shadow-1-up:0 -1px 4px 0 rgba(0, 0, 0, 0.08);--tv-shadow-1-down:0 1px 4px 0 rgba(0, 0, 0, 0.08);--tv-shadow-1-left:-1px 0 4px 0 rgba(0, 0, 0, 0.08);--tv-shadow-1-right:1px 0 4px 0 rgba(0, 0, 0, 0.08);--tv-shadow-2-up:0 -2px 12px 0 rgba(0, 0, 0, 0.16);--tv-shadow-2-down:0 2px 12px 0 rgba(0, 0, 0, 0.16);--tv-shadow-2-left:-2px 0 12px 0 rgba(0, 0, 0, 0.16);--tv-shadow-2-right:2px 0 12px 0 rgba(0, 0, 0, 0.16);--tv-shadow-3-up:0 -4px 16px 0 rgba(0, 0, 0, 0.08);--tv-shadow-3-down:0 4px 16px 0 rgba(0, 0, 0, 0.08);--tv-shadow-3-left:-4px 0 16px 0 rgba(0, 0, 0, 0.08);--tv-shadow-3-right:4px 0 16px 0 rgba(0, 0, 0, 0.08);--tv-shadow-4-up:0 -8px 24px 0 rgba(0, 0, 0, 0.16);--tv-shadow-4-down:0 8px 24px 0 rgba(0, 0, 0, 0.16);--tv-shadow-4-left:-8px 0 24px 0 rgba(0, 0, 0, 0.16);--tv-shadow-4-right:8px 0 24px 0 rgba(0, 0, 0, 0.16);--tv-size-scrollbar-width:8px;--tv-size-scrollbar-height:8px;--tv-border-radius-scrollbar-thumb:4px;--tv-color-bg-scrollbar-thumb:var(--tv-base-color-common-6);--tv-color-bg-scrollbar-thumb-hover:var(--tv-base-color-common-6);--tv-color-bg-scrollbar-thumb-active:var(--tv-base-color-common-6);--tv-color-bg-scrollbar-track:var(--tv-base-color-common-1)}.tiny-button{--tv-Button-border-radius:6px}`
+}
diff --git a/packages/theme/theme-tool.d.ts b/packages/theme/src/theme-tool.d.ts
similarity index 59%
rename from packages/theme/theme-tool.d.ts
rename to packages/theme/src/theme-tool.d.ts
index 70b021cba4..5479404a34 100644
--- a/packages/theme/theme-tool.d.ts
+++ b/packages/theme/src/theme-tool.d.ts
@@ -2,7 +2,10 @@ interface ThemeData {
   id: string
   name: string
   cnName: string
+  /** 全局css变量覆盖的对象，比如： { 'tv-base-color-brand' : '#1476ff' }*/
   data: object
+  /** 需要追加的样式表 */
+  css: string
 }
 
 export default class TinyThemeTool {
diff --git a/packages/theme/src/theme-tool.js b/packages/theme/src/theme-tool.js
new file mode 100644
index 0000000000..45c18763c2
--- /dev/null
+++ b/packages/theme/src/theme-tool.js
@@ -0,0 +1,37 @@
+import OldTheme from './old-theme-index.js'
+
+export { OldTheme }
+
+export default class TinyThemeTool {
+  constructor(theme) {
+    if (theme) {
+      this.changeTheme(theme)
+    }
+  }
+
+  changeTheme(theme) {
+    if (this._loadedSheet) {
+      document.adoptedStyleSheets = document.adoptedStyleSheets.filter((t) => t !== this._loadedSheet)
+    }
+
+    if (theme && (theme.data || theme.css)) {
+      let cssContent = ''
+      if (theme.data && typeof theme.data === 'object') {
+        cssContent = Object.keys(theme.data)
+          .map((key) => `--${key}: ${theme.data[key]}; `)
+          .join('')
+
+        cssContent = `:root{${cssContent}}`
+      }
+      if (theme.css && typeof theme.css === 'string') {
+        cssContent += theme.css
+      }
+
+      const sheet = new CSSStyleSheet()
+      sheet.replaceSync(cssContent)
+
+      document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]
+      this._loadedSheet = sheet
+    }
+  }
+}
diff --git a/packages/theme/theme-tool.js b/packages/theme/theme-tool.js
deleted file mode 100644
index b316273b54..0000000000
--- a/packages/theme/theme-tool.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import OldTheme from './old-theme-index.js'
-
-export { OldTheme }
-
-export default class TinyThemeTool {
-  constructor(theme) {
-    this._loadedSheet = theme
-    this.changeTheme(theme)
-  }
-
-  changeTheme(theme) {
-    if (this._loadedSheet) {
-      document.adoptedStyleSheets = document.adoptedStyleSheets.filter((t) => t !== this._loadedSheet)
-    }
-
-    const sheet = new CSSStyleSheet()
-    sheet.replaceSync(theme.data)
-
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]
-    this._loadedSheet = sheet
-  }
-}

From b025277315851f1e511158772a44d51ca8bf0c69 Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Wed, 23 Oct 2024 02:27:35 -0700
Subject: [PATCH 5/6] fix(theme): fix

---
 examples/sites/src/tools/useTheme.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/examples/sites/src/tools/useTheme.js b/examples/sites/src/tools/useTheme.js
index 028acf6f44..c04c37e967 100644
--- a/examples/sites/src/tools/useTheme.js
+++ b/examples/sites/src/tools/useTheme.js
@@ -24,7 +24,6 @@ import oceanicIcon from '@/assets/images/oceanic-icon.png'
 
 import starrySky from '@/assets/images/starry-sky.png'
 import starrySkyIcon from '@/assets/images/starry-sky-icon.png'
-import { OldTheme } from '@opentiny/vue-theme/theme-tool'
 
 const themeMap = {
   [DEFAULT_THEME]: null,
@@ -74,8 +73,6 @@ const designConfigMap = {
 }
 
 const theme = new TinyThemeTool()
-window.tt = theme
-window.OldTheme = OldTheme
 
 const defaultThemeKey = DEFAULT_THEME
 const currentThemeKey = hooks.ref(defaultThemeKey)

From 4684771702ee66952bc926ea45d47fe74c1b8f55 Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Wed, 23 Oct 2024 18:56:48 -0700
Subject: [PATCH 6/6] fix(theme-tool): support multi target

---
 packages/theme/src/theme-tool.d.ts | 36 ++++++++++++++++++++++--------
 packages/theme/src/theme-tool.js   | 19 +++++++++-------
 2 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/packages/theme/src/theme-tool.d.ts b/packages/theme/src/theme-tool.d.ts
index 5479404a34..ca68473f7b 100644
--- a/packages/theme/src/theme-tool.d.ts
+++ b/packages/theme/src/theme-tool.d.ts
@@ -1,14 +1,32 @@
 interface ThemeData {
-  id: string
-  name: string
-  cnName: string
-  /** 全局css变量覆盖的对象，比如： { 'tv-base-color-brand' : '#1476ff' }*/
-  data: object
-  /** 需要追加的样式表 */
-  css: string
+  id?: string
+  name?: string
+  cnName?: string
+  /**
+   * 需要追加的全局css变量的对象。
+   * 比如： { 'tv-base-color-brand' : '#1476ff' } 会追加到 :root { --tv-base....... }
+   * */
+  data?: Record<string, string>
+  /**
+   * 需要追加的样式规则, 以覆盖或扩充组件的样式。
+   * 比如： .tiny-button { border:none;  }
+   * */
+  css?: string
 }
 
+/**
+ * 动态切换文档或影子根节点的样式类
+ * @example
+ * const themeTool= new TinyThemeTool();
+ * themeTool.changeTheme(xxx)
+ */
 export default class TinyThemeTool {
-  changeTheme: (theme: ThemeData) => void
-  constructor(theme: ThemeData)
+  constructor(theme?: ThemeData)
+  /**
+   * 变更目标上的主题。
+   * 它会汇总 theme 下 data 和 css 属性的有效样式，挂载到target 节点下
+   * @param {ThemeData} theme - 变量的主题数据
+   * @param {Document | ShadowRoot} target - 变量的挂载点，不指定时默认为 document
+   */
+  changeTheme: (theme: ThemeData, target?: Document | ShadowRoot) => void
 }
diff --git a/packages/theme/src/theme-tool.js b/packages/theme/src/theme-tool.js
index 45c18763c2..04972414a5 100644
--- a/packages/theme/src/theme-tool.js
+++ b/packages/theme/src/theme-tool.js
@@ -2,16 +2,23 @@ import OldTheme from './old-theme-index.js'
 
 export { OldTheme }
 
+/**
+ * 动态切换文档或影子根节点的样式类
+ */
 export default class TinyThemeTool {
   constructor(theme) {
+    this.loaded = {} // 缓存已加载的样式
     if (theme) {
       this.changeTheme(theme)
     }
   }
 
-  changeTheme(theme) {
-    if (this._loadedSheet) {
-      document.adoptedStyleSheets = document.adoptedStyleSheets.filter((t) => t !== this._loadedSheet)
+  changeTheme(theme, target = document) {
+    let loadedSheet = this.loaded[target]
+    if (!loadedSheet) {
+      loadedSheet = new CSSStyleSheet()
+      target.adoptedStyleSheets = [...target.adoptedStyleSheets, loadedSheet]
+      this.loaded[target] = loadedSheet
     }
 
     if (theme && (theme.data || theme.css)) {
@@ -27,11 +34,7 @@ export default class TinyThemeTool {
         cssContent += theme.css
       }
 
-      const sheet = new CSSStyleSheet()
-      sheet.replaceSync(cssContent)
-
-      document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]
-      this._loadedSheet = sheet
+      loadedSheet.replaceSync(cssContent)
     }
   }
 }