chore: merge main

Author: novlan1

.github/workflows/pkg-pr-new.yml

@@ -0,0 +1,26 @@
+name: Publish_Any_Commit
+on:
+  push:
+    branches: [develop]
+  pull_request:
+    branches: [develop]
+
+jobs:
+  build:
+    if: ${{ github.repository == 'Tencent/tdesign-mobile-react' && !startsWith(github.head_ref, 'release/') }}
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: recursive
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - run: npm install
+
+      - run: npm run build
+
+      - run: npx pkg-pr-new publish --compact

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tdesign-mobile-react",
-  "version": "0.12.0",
+  "version": "0.13.0-beta",
   "description": "TDesign Component for Mobile React",
   "title": "tdesign-mobile-react",
   "main": "cjs/index.js",
@@ -150,8 +150,9 @@
     "rollup-plugin-styles": "^3.14.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
-    "tdesign-icons-view": "^0.3.4",
+    "tdesign-icons-view": "^0.3.5",
     "tdesign-site-components": "^0.15.6",
+    "tdesign-theme-generator": "^1.1.0",
     "typescript": "^4.5.3",
     "vite": "^2.7.0",
     "vite-plugin-pwa": "^0.11.11",
@@ -171,7 +172,7 @@
     "react-spring": "9.6.1",
     "react-transition-group": "^4.4.2",
     "smoothscroll-polyfill": "^0.4.4",
-    "tdesign-icons-react": "^0.4.3",
+    "tdesign-icons-react": "^0.4.4",
     "tinycolor2": "^1.6.0"
   },
   "config": {

site/mobile/App.jsx

@@ -30,7 +30,6 @@ function Components() {
   const location = useLocation();
   const name = location.pathname.slice(1);
   const title = getCurrentRoute(siteConfig.docs, name)?.title;
-  console.log('title', title)
 
   return (
     <>

site/style/mobile/demo.less

@@ -1,5 +1,5 @@
 .tdesign-mobile-demo {
-  background-color: #f6f6f6;
+  background-color: var(--bg-color-demo);
   font-family: 'PingFang SC';
   padding-bottom: 28px;
   box-sizing: border-box;
@@ -9,21 +9,19 @@
     font-weight: 700;
     line-height: 32px;
     padding: 24px 16px 0;
-    color: rgba(0, 0, 0, 0.9);
   }
 
   .summary {
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.6);
     margin: 8px 16px 0;
     line-height: 22px;
   }
 
   &-block {
     margin: 32px 0 0;
+    color: var(--text-primary);
 
     &__header {
-      color: #000;
       margin: 0 16px;
     }
 
@@ -37,7 +35,7 @@
       margin-top: 8px;
       font-size: 14px;
       white-space: pre-line;
-      color: rgba(0, 0, 0, 0.6);
+      color: var(--text-secondary);
       line-height: 22px;
     }
 
@@ -65,13 +63,13 @@
     font-weight: 700;
     line-height: 32px;
     padding: 24px 16px 0;
-    color: rgba(0, 0, 0, 0.9);
+    color: var(--text-primary);
   }
 
   &__summary {
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.6);
     margin: 8px 16px 0;
     line-height: 22px;
+    color: var(--text-secondary);
   }
 }

site/style/mobile/index.less

@@ -1,8 +1,17 @@
 @import '../vars.less';
 @import './demo.less';
 
-body {
-  background-color: #f5f5f5;
+:root,
+:root[theme-mode='light'] {
+  --bg-color-demo: #fff;
+  --text-primary: #181818;
+  --text-secondary: #181818;
+}
+
+:root[theme-mode='dark'] {
+  --bg-color-demo: #181818;
+  --text-primary: rgba(255, 255, 255, 0.9);
+  --text-secondary: rgba(255, 255, 255, .55);
 }
 
 .tdesign-demo-topnav {
@@ -11,7 +20,8 @@ body {
   align-items: center;
   justify-content: center;
   height: 50px;
-  background-color: #fff;
+  background-color: var(--bg-color-demo);
+  color: var(--text-primary);
   box-shadow: @shadow-level-1;
   &-title {
     font-size: 18px;

site/web/App.jsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useRef, useState, lazy, Suspense } from 'react';
-import { BrowserRouter, Routes, Navigate, Route, useLocation, useNavigate, Outlet } from 'react-router-dom';
-import siteConfig from './site.config';
-import { getRoute, filterVersions } from './utils';
+import React, { lazy, Suspense, useEffect, useRef, useState } from 'react';
+import { BrowserRouter, Navigate, Outlet, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+
 import packageJson from '@/package.json';
+import siteConfig from './site.config';
+import { filterVersions, getRoute } from './utils';
 
 const LazyDemo = lazy(() => import('./Demo'));
 
@@ -114,6 +115,8 @@ function Components() {
         <Outlet />
         <td-doc-footer slot="doc-footer" platform="mobile"></td-doc-footer>
       </td-doc-content>
+
+      <td-theme-generator device="mobile" />
     </td-doc-layout>
   );
 }

site/web/main.jsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { registerLocaleChange } from 'tdesign-site-components';
-import App from './App';
-
-import '../style/web/index.less';
 
-import 'tdesign-site-components/lib/styles/style.css';
-import 'tdesign-site-components/lib/styles/prism-theme.less';
+import { registerLocaleChange } from 'tdesign-site-components';
 import 'tdesign-site-components/lib/styles/prism-theme-dark.less';
+import 'tdesign-site-components/lib/styles/prism-theme.less';
+import 'tdesign-site-components/lib/styles/style.css';
 
-// import icons webcomponents
 import 'tdesign-icons-view';
+import 'tdesign-theme-generator';
+
+import App from './App';
+import '../style/web/index.less';
 
 registerLocaleChange();
 ReactDOM.render(

src/avatar/_example/style/index.less

@@ -39,7 +39,3 @@
   margin-left: 16px;
   margin-bottom: 16px;
 }
-
-.tdesign-mobile-demo {
-  background-color: var(--bg-color-demo, #fff);
-}

src/button/_example/style/index.less

@@ -1,5 +1,4 @@
 .tdesign-mobile-demo {
-  background-color: #ffffff;
   padding-bottom: 28px;
   box-sizing: border-box;
 

src/count-down/_example/style/index.less

@@ -1,7 +1,3 @@
-.tdesign-mobile-demo {
-  background-color: #fff;
-}
-
 .demo-count-down-desc {
   color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
   font-size: 14px;