Skip to content

Commit 90e8193

Browse files
RylanBotRylanBot
authored
feat(site): support theme generator (#604)
* style(site): add CSS variables to support dark mode * chore: remove useless log * feat(site): support theme generator
1 parent 28607df commit 90e8193

File tree

27 files changed

+46
-101
lines changed

27 files changed

+46
-101
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,7 @@
152152
"rollup-plugin-typescript2": "^0.31.2",
153153
"tdesign-icons-view": "^0.3.5",
154154
"tdesign-site-components": "^0.15.6",
155+
"tdesign-theme-generator": "^1.1.0",
155156
"typescript": "^4.5.3",
156157
"vite": "^2.7.0",
157158
"vite-plugin-pwa": "^0.11.11",

‎site/mobile/App.jsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ function Components() {
3030
const location = useLocation();
3131
const name = location.pathname.slice(1);
3232
const title = getCurrentRoute(siteConfig.docs, name)?.title;
33-
console.log('title', title)
3433

3534
return (
3635
<>

‎site/style/mobile/demo.less

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.tdesign-mobile-demo {
2-
background-color: #f6f6f6;
2+
background-color: var(--bg-color-demo);
33
font-family: 'PingFang SC';
44
padding-bottom: 28px;
55
box-sizing: border-box;
@@ -9,21 +9,19 @@
99
font-weight: 700;
1010
line-height: 32px;
1111
padding: 24px 16px 0;
12-
color: rgba(0, 0, 0, 0.9);
1312
}
1413

1514
.summary {
1615
font-size: 14px;
17-
color: rgba(0, 0, 0, 0.6);
1816
margin: 8px 16px 0;
1917
line-height: 22px;
2018
}
2119

2220
&-block {
2321
margin: 32px 0 0;
22+
color: var(--text-primary);
2423

2524
&__header {
26-
color: #000;
2725
margin: 0 16px;
2826
}
2927

@@ -37,7 +35,7 @@
3735
margin-top: 8px;
3836
font-size: 14px;
3937
white-space: pre-line;
40-
color: rgba(0, 0, 0, 0.6);
38+
color: var(--text-secondary);
4139
line-height: 22px;
4240
}
4341

@@ -65,13 +63,13 @@
6563
font-weight: 700;
6664
line-height: 32px;
6765
padding: 24px 16px 0;
68-
color: rgba(0, 0, 0, 0.9);
66+
color: var(--text-primary);
6967
}
7068

7169
&__summary {
7270
font-size: 14px;
73-
color: rgba(0, 0, 0, 0.6);
7471
margin: 8px 16px 0;
7572
line-height: 22px;
73+
color: var(--text-secondary);
7674
}
7775
}

‎site/style/mobile/index.less

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
@import '../vars.less';
22
@import './demo.less';
33

4-
body {
5-
background-color: #f5f5f5;
4+
:root,
5+
:root[theme-mode='light'] {
6+
--bg-color-demo: #fff;
7+
--text-primary: #181818;
8+
--text-secondary: #181818;
9+
}
10+
11+
:root[theme-mode='dark'] {
12+
--bg-color-demo: #181818;
13+
--text-primary: rgba(255, 255, 255, 0.9);
14+
--text-secondary: rgba(255, 255, 255, .55);
615
}
716

817
.tdesign-demo-topnav {
@@ -11,7 +20,8 @@ body {
1120
align-items: center;
1221
justify-content: center;
1322
height: 50px;
14-
background-color: #fff;
23+
background-color: var(--bg-color-demo);
24+
color: var(--text-primary);
1525
box-shadow: @shadow-level-1;
1626
&-title {
1727
font-size: 18px;

‎site/web/App.jsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import React, { useEffect, useRef, useState, lazy, Suspense } from 'react';
2-
import { BrowserRouter, Routes, Navigate, Route, useLocation, useNavigate, Outlet } from 'react-router-dom';
3-
import siteConfig from './site.config';
4-
import { getRoute, filterVersions } from './utils';
1+
import React, { lazy, Suspense, useEffect, useRef, useState } from 'react';
2+
import { BrowserRouter, Navigate, Outlet, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
3+
54
import packageJson from '@/package.json';
5+
import siteConfig from './site.config';
6+
import { filterVersions, getRoute } from './utils';
67

78
const LazyDemo = lazy(() => import('./Demo'));
89

@@ -114,6 +115,8 @@ function Components() {
114115
<Outlet />
115116
<td-doc-footer slot="doc-footer" platform="mobile"></td-doc-footer>
116117
</td-doc-content>
118+
119+
<td-theme-generator device="mobile" />
117120
</td-doc-layout>
118121
);
119122
}

‎site/web/main.jsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import { registerLocaleChange } from 'tdesign-site-components';
4-
import App from './App';
5-
6-
import '../style/web/index.less';
73

8-
import 'tdesign-site-components/lib/styles/style.css';
9-
import 'tdesign-site-components/lib/styles/prism-theme.less';
4+
import { registerLocaleChange } from 'tdesign-site-components';
105
import 'tdesign-site-components/lib/styles/prism-theme-dark.less';
6+
import 'tdesign-site-components/lib/styles/prism-theme.less';
7+
import 'tdesign-site-components/lib/styles/style.css';
118

12-
// import icons webcomponents
139
import 'tdesign-icons-view';
10+
import 'tdesign-theme-generator';
11+
12+
import App from './App';
13+
import '../style/web/index.less';
1414

1515
registerLocaleChange();
1616
ReactDOM.render(

‎src/avatar/_example/style/index.less

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,3 @@
3939
margin-left: 16px;
4040
margin-bottom: 16px;
4141
}
42-
43-
.tdesign-mobile-demo {
44-
background-color: var(--bg-color-demo, #fff);
45-
}

‎src/button/_example/style/index.less

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.tdesign-mobile-demo {
2-
background-color: #ffffff;
32
padding-bottom: 28px;
43
box-sizing: border-box;
54

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
.tdesign-mobile-demo {
2-
background-color: #fff;
3-
}
4-
51
.demo-count-down-desc {
62
color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
73
font-size: 14px;

‎src/dialog/_example/style/index.less

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
.tdesign-mobile-demo {
2-
background-color: #fff;
3-
42
.btn-gap {
53
width: 100%;
64
height: 16px;

‎src/divider/_example/style/index.less

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
.tdesign-mobile-demo {
2-
background-color: #fff;
3-
}
4-
51
.divider-demo__title {
62
font-size: 14px;
73
color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));

‎src/drawer/_example/style/index.less

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
.tdesign-mobile-demo {
2-
background-color: #fff;
3-
}
4-
51
.button-host {
62
margin: 0 16px;
73
margin-top: auto;

‎src/fab/_example/style/index.less

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
.tdesign-mobile-demo {
2-
background-color: #f6f6f6;
3-
}
4-
51
.fab-container {
62
li {
73
display: flex;

‎src/indexes/_example/style/index.less

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,6 @@
2222
border: 1px solid #e7e7e7;
2323
}
2424

25-
#app,
26-
.tdesign-mobile-demo {
27-
background-color: #fff;
28-
}
29-
3025
.tdesign-demo-topnav {
3126
z-index: 2;
3227
}

‎src/layout/_example/style/index.less

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
}
1717

1818
.tdesign-mobile-demo {
19-
// background-color: #fff;
2019
min-height: 100%;
2120
box-sizing: border-box;
2221
}

‎src/message/_example/style/index.less

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
#app, .tdesign-mobile-demo {
2-
background-color: #fff;
3-
}
4-
51
.container {
62
display: flex;
73
flex-direction: column;

‎src/notice-bar/_example/style/index.less

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,3 @@
1717
.notice-bar-demo-block {
1818
margin-bottom: 16px;
1919
}
20-
21-
.tdesign-mobile-demo {
22-
background-color: var(--bg-color-demo, #fff);
23-
}

‎src/overlay/_example/style/index.less

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +0,0 @@
1-
.tdesign-mobile-demo {
2-
background-color: #fff;
3-
}

‎src/picker/_example/style/index.less

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,21 @@
1-
.tdesign-mobile-demo-block{
2-
.t-cell__title{
1+
.tdesign-mobile-demo-block {
2+
.t-cell__title {
33
flex: none;
44
width: 80px;
55
}
66
.cell-container {
77
margin-top: 16px;
88
}
9-
.t-cell__note{
10-
flex:1;
11-
.note-panel{
12-
color: #000;
9+
.t-cell__note {
10+
flex: 1;
11+
.note-panel {
1312
opacity: 0.9;
1413
width: 100%;
1514
padding-left: 16px;
1615
text-align: left;
17-
&.empty{
16+
&.empty {
1817
opacity: 0.26;
1918
}
2019
}
2120
}
2221
}
23-
24-
25-

‎src/pull-down-refresh/_example/style/index.less

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@
55
}
66

77
.tdesign-mobile-demo {
8-
background: #fff;
9-
108
.tdesign-mobile-block {
119
box-sizing: border-box;
1210
background-color: rgba(243, 243, 243, 1);;

‎src/result/_example/style/index.less

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
}
88

99
.tdesign-mobile-demo {
10-
background-color: var(--bg-color-demo, #fff);
11-
1210
.padding {
1311
padding: 0 16px 16px;
1412
}

‎src/side-bar/_example/style/index.less

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.tdesign-mobile-demo {
2-
background-color: #ffffff;
32
padding-bottom: 28px;
43

54
.t-button {

‎src/skeleton/_example/style/index.less

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
.tdesign-mobile-demo {
2-
background-color: #fff;
3-
}
4-
51
.demo-section__desc {
62
font-size: 14px;
73
color: var(--td-text-color-disabled, rgba(0, 0, 0, 0.4));

‎src/slider/_example/style/index.less

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,3 @@
1717
margin-top: 16px;
1818
}
1919
}
20-
21-
.tdesign-mobile-demo {
22-
background: #f6f6f6;
23-
}

‎src/swiper/_example/style/index.less

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.tdesign-mobile-demo {
2-
background-color: #ffffff;
32
padding-bottom: 62px;
43
.tdesign-demo-block-wrap {
54
padding: 0 16px;
@@ -33,21 +32,21 @@
3332
padding-top: 16px;
3433
display: flex;
3534
align-items: baseline;
36-
.t-slider{
35+
.t-slider {
3736
flex: 1;
3837
font-size: 12px;
3938
}
40-
.__label{
39+
.__label {
4140
color: #00000066;
42-
font-family: "PingFang SC";
41+
font-family: 'PingFang SC';
4342
font-size: 10px;
4443
font-style: normal;
4544
line-height: 16px;
46-
}
45+
}
4746
}
4847

4948
.card-height {
50-
.t-swiper-item--image-host{
49+
.t-swiper-item--image-host {
5150
height: 128px;
5251
&--active {
5352
height: 192px;
@@ -57,10 +56,10 @@
5756

5857
.card-prev-next {
5958
.t-swiper-item--image-host {
60-
&--prev{
59+
&--prev {
6160
right: -36px;
6261
}
63-
&--next{
62+
&--next {
6463
left: -36px;
6564
}
6665
}

‎src/tag/_example/style/index.less

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
.tdesign-mobile-demo {
2-
background-color: var(--bg-color-demo, #fff)
3-
}
4-
51
.tag-demo {
62
background-color: #fff;
73
padding: 16px;

‎src/toast/_example/style/index.less

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
.tdesign-mobile-demo {
2-
background-color: #fff;
3-
}
4-
51
.toast-demo {
62
> .t-button + .t-button {
73
margin-top: 16px;

0 commit comments

Comments
 (0)