From 6796ae4cec4f6b6c0a4877990b77d06f2a25b025 Mon Sep 17 00:00:00 2001 From: "Y." Date: Tue, 6 Aug 2024 11:11:36 +0800 Subject: [PATCH] fix(Demo): fix design token error for dark mode (#3049) * fix(Demo): fix design token error for dark mode * test: update snapshots --- example/app.less | 45 +++++----------- site/theme/dark.ts | 43 +++------------ src/action-sheet/_example/action-sheet.less | 2 +- src/action-sheet/_example/action-sheet.wxml | 2 +- src/avatar/_example/avatar.less | 2 +- src/avatar/_example/avatar.wxml | 2 +- src/back-top/_example/back-top.less | 2 +- src/back-top/_example/back-top.wxml | 2 +- src/back-top/_example/skyline/back-top.less | 2 +- src/button/_example/button.less | 2 +- src/button/_example/button.wxml | 2 +- src/button/_example/skyline/button.less | 2 +- src/count-down/_example/count-down.less | 2 +- src/count-down/_example/count-down.wxml | 2 +- .../_example/skyline/count-down.less | 2 +- src/dialog/_example/dialog.less | 2 +- src/dialog/_example/dialog.wxml | 2 +- src/dialog/_example/skyline/dialog.less | 2 +- src/dialog/_example/skyline/dialog.wxml | 2 +- src/divider/_example/divider.less | 2 +- src/divider/_example/divider.wxml | 2 +- src/divider/_example/skyline/divider.less | 2 +- src/divider/_example/skyline/divider.wxml | 2 +- src/drawer/_example/drawer.less | 2 +- src/drawer/_example/drawer.wxml | 2 +- src/drawer/_example/skyline/drawer.less | 1 - src/empty/_example/empty.less | 2 +- src/empty/_example/empty.wxml | 2 +- src/empty/_example/skyline/empty.less | 2 +- src/fab/_example/fab.less | 2 +- src/fab/_example/fab.wxml | 2 +- src/fab/_example/skyline/fab.less | 2 +- src/footer/_example/footer.less | 2 +- src/footer/_example/footer.wxml | 2 +- src/footer/_example/skyline/footer.less | 2 +- src/footer/_example/skyline/footer.wxml | 2 +- src/guide/_example/guide.less | 2 +- src/guide/_example/guide.wxml | 5 +- src/icon/_example/base/index.wxss | 1 + src/icon/_example/icon.less | 2 +- src/icon/_example/icon.wxml | 2 +- src/icon/_example/skyline/icon.less | 2 +- src/icon/_example/skyline/icon.wxml | 2 +- src/image-viewer/_example/image-viewer.less | 2 +- src/image-viewer/_example/image-viewer.wxml | 2 +- .../_example/skyline/image-viewer.less | 3 ++ src/image/_example/image.less | 2 +- src/image/_example/image.wxml | 2 +- src/image/_example/skyline/image.less | 2 +- src/indexes/_example/indexes.less | 2 +- src/indexes/_example/indexes.wxml | 2 +- .../__test__/__snapshots__/demo.test.js.snap | 2 +- src/input/_example/bordered/index.js | 2 +- src/loading/_example/loading.less | 2 +- src/loading/_example/loading.wxml | 2 +- src/loading/_example/skyline/loading.less | 2 +- src/message-item/message-item.less | 2 +- src/message/_example/message.less | 10 ++-- src/message/_example/message.wxml | 2 +- src/navbar/_example/navbar.less | 4 +- src/navbar/_example/skyline/navbar.less | 4 +- src/navbar/navbar.less | 2 +- src/notice-bar/_example/custom/index.wxss | 4 +- src/notice-bar/_example/notice-bar.less | 2 +- src/notice-bar/_example/notice-bar.wxml | 2 +- src/overlay/_example/overlay.less | 2 +- src/overlay/_example/overlay.wxml | 2 +- src/overlay/_example/skyline/overlay.less | 2 +- src/popup/_example/popup.less | 2 +- src/popup/_example/popup.wxml | 2 +- src/progress/_example/progress.less | 2 +- src/progress/_example/progress.wxml | 2 +- src/progress/_example/skyline/progress.less | 2 +- .../_example/pull-down-refresh.less | 2 +- .../_example/pull-down-refresh.wxml | 2 +- .../_example/skyline/pull-down-refresh.wxml | 2 +- src/rate/_example/action/index.wxss | 2 - src/rate/_example/base/index.wxss | 2 - src/rate/_example/color/index.wxss | 2 - src/rate/_example/count/index.wxss | 2 - src/rate/_example/custom-prefix/index.wxss | 2 - src/rate/_example/custom/index.wxss | 2 - src/rate/_example/show-text/index.wxss | 2 - src/rate/_example/size/index.wxss | 2 - src/rate/_example/special/index.wxss | 2 - src/result/_example/result-page.less | 2 +- src/result/_example/result-page.wxml | 2 +- src/result/_example/result.less | 2 +- src/result/_example/result.wxml | 2 +- src/result/_example/skyline/result.less | 2 +- src/result/_example/skyline/result.wxml | 2 +- .../__test__/__snapshots__/demo.test.js.snap | 52 +++++++------------ src/side-bar/_example/base/index.wxml | 5 +- src/side-bar/_example/base/index.wxss | 2 +- src/side-bar/_example/custom/index.wxml | 5 +- src/side-bar/_example/custom/index.wxss | 2 +- src/side-bar/_example/side-bar.less | 7 +++ src/side-bar/_example/side-bar.wxml | 3 +- src/side-bar/_example/side-bar.wxss | 7 --- src/side-bar/_example/switch/index.wxml | 5 +- src/side-bar/_example/switch/index.wxss | 2 +- src/side-bar/_example/with-icon/index.wxml | 5 +- src/side-bar/_example/with-icon/index.wxss | 2 +- src/skeleton/_example/skeleton.less | 2 +- src/skeleton/_example/skeleton.wxml | 2 +- src/skeleton/_example/skyline/skeleton.less | 2 +- src/stepper/_example/base/index.wxss | 2 +- src/stepper/_example/min-max/index.wxss | 2 +- src/stepper/_example/size/index.wxss | 2 +- src/stepper/_example/status/index.wxss | 2 +- src/stepper/_example/theme/index.wxss | 2 +- src/swiper/_example/skyline/swiper.less | 2 +- src/swiper/_example/swiper.less | 2 +- src/swiper/_example/swiper.wxml | 2 +- src/tag/_example/skyline/tag.less | 2 +- src/tag/_example/skyline/tag.wxml | 2 +- src/tag/_example/tag.less | 2 +- src/tag/_example/tag.wxml | 2 +- src/textarea/_example/card/index.wxss | 1 - src/textarea/_example/custom/index.wxss | 2 +- src/toast/_example/skyline/toast.less | 2 +- src/toast/_example/skyline/toast.wxml | 2 +- src/toast/_example/toast.less | 4 ++ src/toast/_example/toast.wxml | 2 +- src/upload/_example/upload.less | 5 -- 125 files changed, 171 insertions(+), 256 deletions(-) create mode 100644 src/image-viewer/_example/skyline/image-viewer.less create mode 100644 src/side-bar/_example/side-bar.less delete mode 100644 src/side-bar/_example/side-bar.wxss diff --git a/example/app.less b/example/app.less index 3a94c53e6..50b65a081 100644 --- a/example/app.less +++ b/example/app.less @@ -11,39 +11,15 @@ } page { - background-color: #f6f6f6; - --bg-color-demo-desc: #0009; - --bg-color-demo-title: #000000e6; - --bg-color-demo: #fff; - --bg-color-demo-border: #e7e7e7; - --bg-color-demo-secondary: #fff; - --td-navbar-bg-color: #f6f6f6; - --td-navbar-color: black; - --td-color-demo-notice-icon: rgba(0, 0, 0, 0.9); - --td-avatar-border-color: var(--bg-color-demo); + background-color: var(--td-bg-color-page); + + --bg-color-demo-desc: var(--td-text-color-secondary); + --bg-color-demo-title: var(--td-text-color-primary); + --bg-color-demo: var(--td-bg-color-container); + --bg-color-demo-secondary: var(--td-bg-color-container); + --td-navbar-bg-color: var(--td-bg-color-page); + --td-navbar-color: var(--td-text-color-primary); --td-progress-circle-inner-bg-color: var(--bg-color-demo); - --td-navbar-bg-color-example: @bg-color-container; - --td-navbar-color-example: @text-color-primary; - --td-grid-bg-color-example: @bg-color-container; - --td-grid-item-bg-color-example: @bg-color-container; - --td-input-border-color-example: rgba(220, 220, 220, 1); -} - -@media (prefers-color-scheme: dark) { - page { - background: #181818 !important; - --bg-color-demo-title: #fff; - --bg-color-demo-desc: #fff; - --bg-color-demo: #181818; - --bg-color-demo-border: #383838; - --bg-color-demo-secondary: #2c2c2c; - --td-navbar-bg-color: #181818; - --td-navbar-color: white; - --td-color-demo-notice-icon: rgba(255, 255, 255, 0.9); - --td-grid-bg-color-example: transparent; - --td-grid-item-bg-color-example: transparent; - --td-input-border-color-example: #5e5e5e; - } } .skyline { @@ -60,6 +36,11 @@ page { .demo { padding-bottom: 56rpx; + &-navbar { + --td-navbar-bg-color: var(--td-bg-color-container); + --td-navbar-color: var(--td-text-color-primary); + } + &-title { font-size: 48rpx; font-weight: 700; diff --git a/site/theme/dark.ts b/site/theme/dark.ts index 747c6a600..8ce200c98 100644 --- a/site/theme/dark.ts +++ b/site/theme/dark.ts @@ -2,7 +2,6 @@ const DARK_MODE_NAME = 'dark'; const darkModeCss = ` body { - background: #181818; --td-primary-color-1: #1b2f51; --td-primary-color-2: #173463; --td-primary-color-3: #143975; @@ -137,22 +136,6 @@ const darkModeCss = ` --td-scrollbar-color: rgba(255, 255, 255, 10%); --td-scroll-track-color: #333; - --bg-color-demo-home-text: rgba(255, 255, 255, 0.9); - --bg-color-demo-home: #4f4e4e; - --bg-color-demo-title: #fff; - --bg-color-demo-desc: #fff; - --bg-color-demo: #181818; - --bg-color-demo-border: #5e5e5e; - --bg-color-demo-secondary: #2c2c2c; - --td-navbar-bg-color: #181818; - --td-navbar-color: white; - --td-border-level-1-color: var(--td-gray-color-11); - --td-component-stroke: var(--td-gray-color-11); - --td-border-level-2-color: var(--td-gray-color-9); - --td-component-border: var(--td-gray-color-9); - --td-grid-bg-color-example: transparent; - --td-grid-item-bg-color-example: transparent; - --td-input-border-color-example: #5e5e5e; } `; @@ -300,21 +283,7 @@ const lightModeCss = ` --td-scrollbar-color: rgba(0, 0, 0, 10%); --td-scrollbar-hover-color: rgba(0, 0, 0, 30%); --td-scroll-track-color: #fff; - --bg-color-demo-desc: #0009; - --bg-color-demo-title: #000000e6; - --bg-color-demo: #fff; - --bg-color-demo-border: #e7e7e7; - --bg-color-demo-secondary: #fff; - --td-navbar-bg-color: #f6f6f6; - --td-navbar-color: black; - --td-color-demo-notice-icon: rgba(0, 0, 0, 0.9); - --td-avatar-border-color: var(--bg-color-demo); - --td-progress-circle-inner-bg-color: var(--bg-color-demo); - --td-navbar-bg-color-example: var(--td-bg-color-container); - --td-navbar-color-example: var(--td-text-color-primary); - --td-grid-bg-color-example: var(--td-bg-color-container); - --td-grid-item-bg-color-example: var(--td-bg-color-container); - --td-input-border-color-example: rgba(220, 220, 220, 1); + } `; @@ -341,11 +310,12 @@ const LIGHT_WHITE_BACKGROUND_COMPONENTS = [ 'action-sheet', 'dialog', 'loading', - 'message', 'notice-bar', 'overlay', 'popup', 'pull-down-refresh', + 'toast', + 'guide', ]; function getCurComponentBackground() { @@ -354,17 +324,16 @@ function getCurComponentBackground() { const lastSegment = url.substring(lastUnderscoreIndex + 1); let backgroundCss = ''; if (LIGHT_WHITE_BACKGROUND_COMPONENTS.includes(lastSegment)) { - backgroundCss = 'body{ background: #fff !important; }'; - } else { - backgroundCss = 'body{ background: #f6f6f6 !important; }'; + backgroundCss = 'body{ background-color: var(--td-bg-color-container); }'; } return backgroundCss; } function getDarkStyle() { + const curComponentBackground = getCurComponentBackground(); const styleElement = document.createElement('style'); styleElement.type = 'text/css'; - styleElement.textContent = darkModeCss; + styleElement.textContent = darkModeCss + curComponentBackground; styleElement.id = 'dark'; return styleElement; } diff --git a/src/action-sheet/_example/action-sheet.less b/src/action-sheet/_example/action-sheet.less index 4bd49f1ef..3071191bf 100644 --- a/src/action-sheet/_example/action-sheet.less +++ b/src/action-sheet/_example/action-sheet.less @@ -1,5 +1,5 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); .t-button { margin-top: 32rpx; diff --git a/src/action-sheet/_example/action-sheet.wxml b/src/action-sheet/_example/action-sheet.wxml index b82e16514..60a6cc21b 100644 --- a/src/action-sheet/_example/action-sheet.wxml +++ b/src/action-sheet/_example/action-sheet.wxml @@ -1,4 +1,4 @@ - + ActionSheet 动作面板 从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。 diff --git a/src/avatar/_example/avatar.less b/src/avatar/_example/avatar.less index 62af19de8..9b62ea8f4 100644 --- a/src/avatar/_example/avatar.less +++ b/src/avatar/_example/avatar.less @@ -1,5 +1,5 @@ page { - background: #fff; + background-color: var(--td-bg-color-container); } .demo-avatar { diff --git a/src/avatar/_example/avatar.wxml b/src/avatar/_example/avatar.wxml index 84037577b..1bdd75d89 100644 --- a/src/avatar/_example/avatar.wxml +++ b/src/avatar/_example/avatar.wxml @@ -1,5 +1,5 @@ - + Avatar 头像 diff --git a/src/back-top/_example/back-top.less b/src/back-top/_example/back-top.less index 08665091e..aa2e97f3d 100644 --- a/src/back-top/_example/back-top.less +++ b/src/back-top/_example/back-top.less @@ -1,5 +1,5 @@ page { - background: #fff; + background-color: var(--td-bg-color-container); .skeleton-item { padding-bottom: 48rpx; diff --git a/src/back-top/_example/back-top.wxml b/src/back-top/_example/back-top.wxml index fc4f29fa0..4bae1dec6 100644 --- a/src/back-top/_example/back-top.wxml +++ b/src/back-top/_example/back-top.wxml @@ -1,4 +1,4 @@ - + BackTop 返回顶部 用于当页面过长往下滑动时，帮助用户快速回到页面顶部。 diff --git a/src/back-top/_example/skyline/back-top.less b/src/back-top/_example/skyline/back-top.less index 08665091e..aa2e97f3d 100644 --- a/src/back-top/_example/skyline/back-top.less +++ b/src/back-top/_example/skyline/back-top.less @@ -1,5 +1,5 @@ page { - background: #fff; + background-color: var(--td-bg-color-container); .skeleton-item { padding-bottom: 48rpx; diff --git a/src/button/_example/button.less b/src/button/_example/button.less index 3b782f198..c8d2d650a 100644 --- a/src/button/_example/button.less +++ b/src/button/_example/button.less @@ -1,5 +1,5 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } .t-button { diff --git a/src/button/_example/button.wxml b/src/button/_example/button.wxml index 3a8d42744..f31ef3779 100644 --- a/src/button/_example/button.wxml +++ b/src/button/_example/button.wxml @@ -1,4 +1,4 @@ - + Button 按钮 用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。 diff --git a/src/button/_example/skyline/button.less b/src/button/_example/skyline/button.less index 7a284e8b9..6aabfe1ad 100644 --- a/src/button/_example/skyline/button.less +++ b/src/button/_example/skyline/button.less @@ -1,5 +1,5 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } .button-example { diff --git a/src/count-down/_example/count-down.less b/src/count-down/_example/count-down.less index 66ce489d9..ab4769fac 100644 --- a/src/count-down/_example/count-down.less +++ b/src/count-down/_example/count-down.less @@ -1,7 +1,7 @@ @gray: rgba(0, 0, 0, 0.4); page { - background: #fff; + background-color: var(--td-bg-color-container); } .flex { diff --git a/src/count-down/_example/count-down.wxml b/src/count-down/_example/count-down.wxml index abdd27106..72970c52b 100644 --- a/src/count-down/_example/count-down.wxml +++ b/src/count-down/_example/count-down.wxml @@ -1,4 +1,4 @@ - + CountDown 倒计时 用于实时展示倒计时数值。 diff --git a/src/count-down/_example/skyline/count-down.less b/src/count-down/_example/skyline/count-down.less index e81280cfe..2b200c211 100644 --- a/src/count-down/_example/skyline/count-down.less +++ b/src/count-down/_example/skyline/count-down.less @@ -1,3 +1,3 @@ page { - background: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/dialog/_example/dialog.less b/src/dialog/_example/dialog.less index 23062cc7e..2b200c211 100644 --- a/src/dialog/_example/dialog.less +++ b/src/dialog/_example/dialog.less @@ -1,3 +1,3 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/dialog/_example/dialog.wxml b/src/dialog/_example/dialog.wxml index 2cae6ae82..4e90dc01d 100644 --- a/src/dialog/_example/dialog.wxml +++ b/src/dialog/_example/dialog.wxml @@ -1,4 +1,4 @@ - + Dialog 对话框 用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。 diff --git a/src/dialog/_example/skyline/dialog.less b/src/dialog/_example/skyline/dialog.less index 23062cc7e..2b200c211 100644 --- a/src/dialog/_example/skyline/dialog.less +++ b/src/dialog/_example/skyline/dialog.less @@ -1,3 +1,3 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/dialog/_example/skyline/dialog.wxml b/src/dialog/_example/skyline/dialog.wxml index c5ba30b0f..da4da2700 100644 --- a/src/dialog/_example/skyline/dialog.wxml +++ b/src/dialog/_example/skyline/dialog.wxml @@ -1,5 +1,5 @@ - + Dialog 对话框 diff --git a/src/divider/_example/divider.less b/src/divider/_example/divider.less index 23062cc7e..2b200c211 100644 --- a/src/divider/_example/divider.less +++ b/src/divider/_example/divider.less @@ -1,3 +1,3 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/divider/_example/divider.wxml b/src/divider/_example/divider.wxml index 843292b2d..3ef7db7c0 100644 --- a/src/divider/_example/divider.wxml +++ b/src/divider/_example/divider.wxml @@ -1,4 +1,4 @@ - + Divider 分割线 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。 diff --git a/src/divider/_example/skyline/divider.less b/src/divider/_example/skyline/divider.less index 23062cc7e..2b200c211 100644 --- a/src/divider/_example/skyline/divider.less +++ b/src/divider/_example/skyline/divider.less @@ -1,3 +1,3 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/divider/_example/skyline/divider.wxml b/src/divider/_example/skyline/divider.wxml index f514aaab9..8b60a94db 100644 --- a/src/divider/_example/skyline/divider.wxml +++ b/src/divider/_example/skyline/divider.wxml @@ -1,5 +1,5 @@ - + Divider 分割线 diff --git a/src/drawer/_example/drawer.less b/src/drawer/_example/drawer.less index 23062cc7e..2b200c211 100644 --- a/src/drawer/_example/drawer.less +++ b/src/drawer/_example/drawer.less @@ -1,3 +1,3 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/drawer/_example/drawer.wxml b/src/drawer/_example/drawer.wxml index e7d047ce7..fc606e474 100644 --- a/src/drawer/_example/drawer.wxml +++ b/src/drawer/_example/drawer.wxml @@ -1,4 +1,4 @@ - + Drawer 抽屉 用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。 diff --git a/src/drawer/_example/skyline/drawer.less b/src/drawer/_example/skyline/drawer.less index 23062cc7e..88f6ee6b3 100644 --- a/src/drawer/_example/skyline/drawer.less +++ b/src/drawer/_example/skyline/drawer.less @@ -1,3 +1,2 @@ page { - background-color: #fff; } diff --git a/src/empty/_example/empty.less b/src/empty/_example/empty.less index e81280cfe..2b200c211 100644 --- a/src/empty/_example/empty.less +++ b/src/empty/_example/empty.less @@ -1,3 +1,3 @@ page { - background: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/empty/_example/empty.wxml b/src/empty/_example/empty.wxml index db300d45e..447aadd39 100644 --- a/src/empty/_example/empty.wxml +++ b/src/empty/_example/empty.wxml @@ -1,4 +1,4 @@ - + Empty 空状态 用于空状态时的占位提示。 diff --git a/src/empty/_example/skyline/empty.less b/src/empty/_example/skyline/empty.less index e81280cfe..2b200c211 100644 --- a/src/empty/_example/skyline/empty.less +++ b/src/empty/_example/skyline/empty.less @@ -1,3 +1,3 @@ page { - background: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/fab/_example/fab.less b/src/fab/_example/fab.less index 8bdd50599..ef3fc22dd 100644 --- a/src/fab/_example/fab.less +++ b/src/fab/_example/fab.less @@ -1,5 +1,5 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } .wrapper { diff --git a/src/fab/_example/fab.wxml b/src/fab/_example/fab.wxml index 20b8ff31e..208e0dd59 100644 --- a/src/fab/_example/fab.wxml +++ b/src/fab/_example/fab.wxml @@ -1,4 +1,4 @@ - + Fab 悬浮按钮 当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布 diff --git a/src/fab/_example/skyline/fab.less b/src/fab/_example/skyline/fab.less index 8bdd50599..ef3fc22dd 100644 --- a/src/fab/_example/skyline/fab.less +++ b/src/fab/_example/skyline/fab.less @@ -1,5 +1,5 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } .wrapper { diff --git a/src/footer/_example/footer.less b/src/footer/_example/footer.less index e81280cfe..2b200c211 100644 --- a/src/footer/_example/footer.less +++ b/src/footer/_example/footer.less @@ -1,3 +1,3 @@ page { - background: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/footer/_example/footer.wxml b/src/footer/_example/footer.wxml index fa7f5f896..ca26ed447 100644 --- a/src/footer/_example/footer.wxml +++ b/src/footer/_example/footer.wxml @@ -1,4 +1,4 @@ - + Footer 页脚 用于基础列表展示，可附带文字、品牌logo、操作，常用商详、个人中心、设置等页面。 diff --git a/src/footer/_example/skyline/footer.less b/src/footer/_example/skyline/footer.less index e81280cfe..2b200c211 100644 --- a/src/footer/_example/skyline/footer.less +++ b/src/footer/_example/skyline/footer.less @@ -1,3 +1,3 @@ page { - background: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/footer/_example/skyline/footer.wxml b/src/footer/_example/skyline/footer.wxml index 498a42fdb..52ad497e8 100644 --- a/src/footer/_example/skyline/footer.wxml +++ b/src/footer/_example/skyline/footer.wxml @@ -1,5 +1,5 @@ - + Footer 页脚 用于基础列表展示，可附带文字、品牌logo、操作，常用商详、个人中心、设置等页面。 diff --git a/src/guide/_example/guide.less b/src/guide/_example/guide.less index e81280cfe..2b200c211 100644 --- a/src/guide/_example/guide.less +++ b/src/guide/_example/guide.less @@ -1,3 +1,3 @@ page { - background: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/guide/_example/guide.wxml b/src/guide/_example/guide.wxml index a78a8c88b..b79675ec8 100644 --- a/src/guide/_example/guide.wxml +++ b/src/guide/_example/guide.wxml @@ -1,6 +1,5 @@ - - - + + Guide 引导 逐步骤进行指引或解释说明的组件，常用于用户不熟悉的或需进行特别强调的页面。 diff --git a/src/icon/_example/base/index.wxss b/src/icon/_example/base/index.wxss index dc9f7c439..803b42569 100644 --- a/src/icon/_example/base/index.wxss +++ b/src/icon/_example/base/index.wxss @@ -8,6 +8,7 @@ flex: 0 0 25%; text-align: center; margin-bottom: 30rpx; + color: var(--td-text-color-primary); } .demo__card-name { diff --git a/src/icon/_example/icon.less b/src/icon/_example/icon.less index 45092da14..130876120 100644 --- a/src/icon/_example/icon.less +++ b/src/icon/_example/icon.less @@ -1,5 +1,5 @@ @import './iconfont.wxss'; page { - background: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/icon/_example/icon.wxml b/src/icon/_example/icon.wxml index f60347ced..97003ca8a 100644 --- a/src/icon/_example/icon.wxml +++ b/src/icon/_example/icon.wxml @@ -1,4 +1,4 @@ - + Icon 图标 - + Icon 图标 diff --git a/src/image-viewer/_example/image-viewer.less b/src/image-viewer/_example/image-viewer.less index 23062cc7e..2b200c211 100644 --- a/src/image-viewer/_example/image-viewer.less +++ b/src/image-viewer/_example/image-viewer.less @@ -1,3 +1,3 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/image-viewer/_example/image-viewer.wxml b/src/image-viewer/_example/image-viewer.wxml index f0ba503aa..1a41a7e3d 100644 --- a/src/image-viewer/_example/image-viewer.wxml +++ b/src/image-viewer/_example/image-viewer.wxml @@ -1,4 +1,4 @@ - + ImageViewer 图片预览 用于图片内容的缩略展示与查看。 diff --git a/src/image-viewer/_example/skyline/image-viewer.less b/src/image-viewer/_example/skyline/image-viewer.less new file mode 100644 index 000000000..2b200c211 --- /dev/null +++ b/src/image-viewer/_example/skyline/image-viewer.less @@ -0,0 +1,3 @@ +page { + background-color: var(--td-bg-color-container); +} diff --git a/src/image/_example/image.less b/src/image/_example/image.less index f6468968a..7d0d1ef1f 100644 --- a/src/image/_example/image.less +++ b/src/image/_example/image.less @@ -1,5 +1,5 @@ page { - background: #fff; + background-color: var(--td-bg-color-container); } .title { diff --git a/src/image/_example/image.wxml b/src/image/_example/image.wxml index e69b988c4..a2b5fa9dd 100644 --- a/src/image/_example/image.wxml +++ b/src/image/_example/image.wxml @@ -1,4 +1,4 @@ - + Image 图片 用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。 diff --git a/src/image/_example/skyline/image.less b/src/image/_example/skyline/image.less index e81280cfe..2b200c211 100644 --- a/src/image/_example/skyline/image.less +++ b/src/image/_example/skyline/image.less @@ -1,3 +1,3 @@ page { - background: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/indexes/_example/indexes.less b/src/indexes/_example/indexes.less index c6f5637c0..dfbaa38bd 100644 --- a/src/indexes/_example/indexes.less +++ b/src/indexes/_example/indexes.less @@ -1,5 +1,5 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } .t-button { diff --git a/src/indexes/_example/indexes.wxml b/src/indexes/_example/indexes.wxml index f4ee201d1..61f609296 100644 --- a/src/indexes/_example/indexes.wxml +++ b/src/indexes/_example/indexes.wxml @@ -1,4 +1,4 @@ - + Indexes 索引 用于页面中信息快速检索，可以根据目录中的页码快速找到所需的内容。 diff --git a/src/input/__test__/__snapshots__/demo.test.js.snap b/src/input/__test__/__snapshots__/demo.test.js.snap index dc35fdc0d..9df490d04 100644 --- a/src/input/__test__/__snapshots__/demo.test.js.snap +++ b/src/input/__test__/__snapshots__/demo.test.js.snap @@ -67,7 +67,7 @@ exports[`Input Input bordered demo works fine 1`] = ` - + Loading 加载 diff --git a/src/loading/_example/skyline/loading.less b/src/loading/_example/skyline/loading.less index 23062cc7e..2b200c211 100644 --- a/src/loading/_example/skyline/loading.less +++ b/src/loading/_example/skyline/loading.less @@ -1,3 +1,3 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/message-item/message-item.less b/src/message-item/message-item.less index 9468961bd..60dd90951 100644 --- a/src/message-item/message-item.less +++ b/src/message-item/message-item.less @@ -10,7 +10,7 @@ @message-content-font-size: @font-size-base; @message-bg-color: var(--td-message-bg-color, @bg-color-container); // 消息通知背景颜色 -@message-box-shadow: var(--td-message-box-shadow, @shadow-4); // 消息通知阴影 +@message-box-shadow: var(--td-message-box-shadow, @shadow-1); // 消息通知阴影 @message-border-radius: var(--td-message-border-radius, @radius-default); // 消息通知圆角大小 @message-content-font-color: var(--td-message-content-font-color, @text-color-primary); // 内容文本颜色 @message-info-color: var(--td-message-info-color, @brand-color); // 'info'主题色 diff --git a/src/message/_example/message.less b/src/message/_example/message.less index f599b59be..9eb308835 100644 --- a/src/message/_example/message.less +++ b/src/message/_example/message.less @@ -1,7 +1,5 @@ -page { - background: #fff; -} - -.demo-block__oper { - padding: 0 32rpx; +.message-example { + .t-button { + background-color: transparent; + } } diff --git a/src/message/_example/message.wxml b/src/message/_example/message.wxml index 8fc6a01ca..2da61c277 100644 --- a/src/message/_example/message.wxml +++ b/src/message/_example/message.wxml @@ -1,5 +1,5 @@ - + Message 消息通知 用于轻量级反馈或提示，不会打断用户操作。 diff --git a/src/navbar/_example/navbar.less b/src/navbar/_example/navbar.less index 81647d295..a0092e1ba 100644 --- a/src/navbar/_example/navbar.less +++ b/src/navbar/_example/navbar.less @@ -17,6 +17,6 @@ } .demo { - --td-navbar-bg-color: var(--td-navbar-bg-color-example); - --td-navbar-color: var(--td-navbar-color-example); + --td-navbar-bg-color: var(--td-bg-color-container); + --td-navbar-color: var(--text-color-primary); } diff --git a/src/navbar/_example/skyline/navbar.less b/src/navbar/_example/skyline/navbar.less index 333dad0ff..3d9ca2368 100644 --- a/src/navbar/_example/skyline/navbar.less +++ b/src/navbar/_example/skyline/navbar.less @@ -16,6 +16,6 @@ } .demo { - --td-navbar-bg-color: var(--td-navbar-bg-color-example); - --td-navbar-color: var(--td-navbar-color-example); + --td-navbar-bg-color: var(--td-bg-color-container); + --td-navbar-color: var(--text-color-primary); } diff --git a/src/navbar/navbar.less b/src/navbar/navbar.less index acec88717..34e590b0b 100644 --- a/src/navbar/navbar.less +++ b/src/navbar/navbar.less @@ -69,7 +69,7 @@ padding-right: @navbar-right; padding-top: @navbar-padding-top; color: @navbar-color; - background: @navbar-bg-color; + background-color: @navbar-bg-color; display: flex; align-items: center; box-sizing: content-box; diff --git a/src/notice-bar/_example/custom/index.wxss b/src/notice-bar/_example/custom/index.wxss index 1b20ca61f..4d9c75f21 100644 --- a/src/notice-bar/_example/custom/index.wxss +++ b/src/notice-bar/_example/custom/index.wxss @@ -4,5 +4,5 @@ page .external-class { } page .external-class-prefix-icon { - color: var(--td-color-demo-notice-icon) -} \ No newline at end of file + color: var(--td-text-color-primary); +} diff --git a/src/notice-bar/_example/notice-bar.less b/src/notice-bar/_example/notice-bar.less index 500d7d9e2..66a988ecd 100644 --- a/src/notice-bar/_example/notice-bar.less +++ b/src/notice-bar/_example/notice-bar.less @@ -1,5 +1,5 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } .t-notice-bar { diff --git a/src/notice-bar/_example/notice-bar.wxml b/src/notice-bar/_example/notice-bar.wxml index c096b19e9..297ad80b4 100644 --- a/src/notice-bar/_example/notice-bar.wxml +++ b/src/notice-bar/_example/notice-bar.wxml @@ -1,4 +1,4 @@ - + NoticeBar 公告栏 在导航栏下方，用于给用户显示提示消息。 diff --git a/src/overlay/_example/overlay.less b/src/overlay/_example/overlay.less index 23062cc7e..2b200c211 100644 --- a/src/overlay/_example/overlay.less +++ b/src/overlay/_example/overlay.less @@ -1,3 +1,3 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/overlay/_example/overlay.wxml b/src/overlay/_example/overlay.wxml index 2d5cdd8bd..93a5de617 100644 --- a/src/overlay/_example/overlay.wxml +++ b/src/overlay/_example/overlay.wxml @@ -1,4 +1,4 @@ - + Overlay 遮罩层 通过遮罩层，可以强调部分内容 diff --git a/src/overlay/_example/skyline/overlay.less b/src/overlay/_example/skyline/overlay.less index 23062cc7e..2b200c211 100644 --- a/src/overlay/_example/skyline/overlay.less +++ b/src/overlay/_example/skyline/overlay.less @@ -1,3 +1,3 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/popup/_example/popup.less b/src/popup/_example/popup.less index 4d5e5909c..1837d8a94 100644 --- a/src/popup/_example/popup.less +++ b/src/popup/_example/popup.less @@ -1,4 +1,4 @@ page { - background: #fff; + background-color: var(--td-bg-color-container); padding-bottom: 48rpx; } diff --git a/src/popup/_example/popup.wxml b/src/popup/_example/popup.wxml index e014d8de4..24d850449 100644 --- a/src/popup/_example/popup.wxml +++ b/src/popup/_example/popup.wxml @@ -1,4 +1,4 @@ - + Popup 弹出层 由其他控件触发，屏幕滑出或弹出一块自定义内容区域。 diff --git a/src/progress/_example/progress.less b/src/progress/_example/progress.less index c268ac9f1..f85042ab2 100644 --- a/src/progress/_example/progress.less +++ b/src/progress/_example/progress.less @@ -1,5 +1,5 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } .t-progress { diff --git a/src/progress/_example/progress.wxml b/src/progress/_example/progress.wxml index f10d27f12..5cc392188 100644 --- a/src/progress/_example/progress.wxml +++ b/src/progress/_example/progress.wxml @@ -1,5 +1,5 @@ - + Progress 进度条 diff --git a/src/progress/_example/skyline/progress.less b/src/progress/_example/skyline/progress.less index c268ac9f1..f85042ab2 100644 --- a/src/progress/_example/skyline/progress.less +++ b/src/progress/_example/skyline/progress.less @@ -1,5 +1,5 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } .t-progress { diff --git a/src/pull-down-refresh/_example/pull-down-refresh.less b/src/pull-down-refresh/_example/pull-down-refresh.less index 23062cc7e..2b200c211 100644 --- a/src/pull-down-refresh/_example/pull-down-refresh.less +++ b/src/pull-down-refresh/_example/pull-down-refresh.less @@ -1,3 +1,3 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/pull-down-refresh/_example/pull-down-refresh.wxml b/src/pull-down-refresh/_example/pull-down-refresh.wxml index a85ec4387..9a9b2d095 100644 --- a/src/pull-down-refresh/_example/pull-down-refresh.wxml +++ b/src/pull-down-refresh/_example/pull-down-refresh.wxml @@ -1,2 +1,2 @@ - + diff --git a/src/pull-down-refresh/_example/skyline/pull-down-refresh.wxml b/src/pull-down-refresh/_example/skyline/pull-down-refresh.wxml index 88ab9229b..d2d517bc7 100644 --- a/src/pull-down-refresh/_example/skyline/pull-down-refresh.wxml +++ b/src/pull-down-refresh/_example/skyline/pull-down-refresh.wxml @@ -1,2 +1,2 @@ - + diff --git a/src/rate/_example/action/index.wxss b/src/rate/_example/action/index.wxss index ebc9c1884..e61dcfa93 100644 --- a/src/rate/_example/action/index.wxss +++ b/src/rate/_example/action/index.wxss @@ -6,8 +6,6 @@ align-items: center; justify-content: space-between; padding: 0 32rpx; - border-bottom: solid 1rpx var(--bg-color-demo-border); - border-top: solid 1rpx var(--bg-color-demo-border); margin-top: 32rpx; margin-bottom: 32rpx; } diff --git a/src/rate/_example/base/index.wxss b/src/rate/_example/base/index.wxss index c505204a6..6da1ccce9 100644 --- a/src/rate/_example/base/index.wxss +++ b/src/rate/_example/base/index.wxss @@ -6,8 +6,6 @@ align-items: center; justify-content: space-between; padding: 0 32rpx; - border-bottom: solid 1rpx var(--bg-color-demo-border); - border-top: solid 1rpx var(--bg-color-demo-border); margin-top: 32rpx; margin-bottom: 32rpx; } diff --git a/src/rate/_example/color/index.wxss b/src/rate/_example/color/index.wxss index 9726872dd..a1337675b 100644 --- a/src/rate/_example/color/index.wxss +++ b/src/rate/_example/color/index.wxss @@ -11,8 +11,6 @@ align-items: center; justify-content: space-between; padding: 0 32rpx; - border-bottom: solid 1rpx var(--bg-color-demo-border); - border-top: solid 1rpx var(--bg-color-demo-border); margin-top: 32rpx; margin-bottom: 32rpx; } diff --git a/src/rate/_example/count/index.wxss b/src/rate/_example/count/index.wxss index ebc9c1884..e61dcfa93 100644 --- a/src/rate/_example/count/index.wxss +++ b/src/rate/_example/count/index.wxss @@ -6,8 +6,6 @@ align-items: center; justify-content: space-between; padding: 0 32rpx; - border-bottom: solid 1rpx var(--bg-color-demo-border); - border-top: solid 1rpx var(--bg-color-demo-border); margin-top: 32rpx; margin-bottom: 32rpx; } diff --git a/src/rate/_example/custom-prefix/index.wxss b/src/rate/_example/custom-prefix/index.wxss index c505204a6..6da1ccce9 100644 --- a/src/rate/_example/custom-prefix/index.wxss +++ b/src/rate/_example/custom-prefix/index.wxss @@ -6,8 +6,6 @@ align-items: center; justify-content: space-between; padding: 0 32rpx; - border-bottom: solid 1rpx var(--bg-color-demo-border); - border-top: solid 1rpx var(--bg-color-demo-border); margin-top: 32rpx; margin-bottom: 32rpx; } diff --git a/src/rate/_example/custom/index.wxss b/src/rate/_example/custom/index.wxss index c505204a6..6da1ccce9 100644 --- a/src/rate/_example/custom/index.wxss +++ b/src/rate/_example/custom/index.wxss @@ -6,8 +6,6 @@ align-items: center; justify-content: space-between; padding: 0 32rpx; - border-bottom: solid 1rpx var(--bg-color-demo-border); - border-top: solid 1rpx var(--bg-color-demo-border); margin-top: 32rpx; margin-bottom: 32rpx; } diff --git a/src/rate/_example/show-text/index.wxss b/src/rate/_example/show-text/index.wxss index c505204a6..6da1ccce9 100644 --- a/src/rate/_example/show-text/index.wxss +++ b/src/rate/_example/show-text/index.wxss @@ -6,8 +6,6 @@ align-items: center; justify-content: space-between; padding: 0 32rpx; - border-bottom: solid 1rpx var(--bg-color-demo-border); - border-top: solid 1rpx var(--bg-color-demo-border); margin-top: 32rpx; margin-bottom: 32rpx; } diff --git a/src/rate/_example/size/index.wxss b/src/rate/_example/size/index.wxss index c505204a6..6da1ccce9 100644 --- a/src/rate/_example/size/index.wxss +++ b/src/rate/_example/size/index.wxss @@ -6,8 +6,6 @@ align-items: center; justify-content: space-between; padding: 0 32rpx; - border-bottom: solid 1rpx var(--bg-color-demo-border); - border-top: solid 1rpx var(--bg-color-demo-border); margin-top: 32rpx; margin-bottom: 32rpx; } diff --git a/src/rate/_example/special/index.wxss b/src/rate/_example/special/index.wxss index 6a3249302..b4844dc98 100644 --- a/src/rate/_example/special/index.wxss +++ b/src/rate/_example/special/index.wxss @@ -2,8 +2,6 @@ background-color: var(--bg-color-demo); color: var(--td-text-color-primary); padding: 32rpx; - border-bottom: solid 1rpx var(--bg-color-demo-border); - border-top: solid 1rpx var(--bg-color-demo-border); margin-top: 32rpx; margin-bottom: 32rpx; } diff --git a/src/result/_example/result-page.less b/src/result/_example/result-page.less index c61baf41d..1aa1a7f19 100644 --- a/src/result/_example/result-page.less +++ b/src/result/_example/result-page.less @@ -1,5 +1,5 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); .demo-section__wrapper { padding: 48rpx 32rpx; diff --git a/src/result/_example/result-page.wxml b/src/result/_example/result-page.wxml index b1683ea1a..ad72d5be5 100644 --- a/src/result/_example/result-page.wxml +++ b/src/result/_example/result-page.wxml @@ -1,4 +1,4 @@ - + diff --git a/src/result/_example/result.less b/src/result/_example/result.less index 986597745..88b1501bd 100644 --- a/src/result/_example/result.less +++ b/src/result/_example/result.less @@ -1,5 +1,5 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); .demo-section__wrapper { padding: 0 32rpx; diff --git a/src/result/_example/result.wxml b/src/result/_example/result.wxml index 8e7163676..cc0c4bbc6 100644 --- a/src/result/_example/result.wxml +++ b/src/result/_example/result.wxml @@ -1,4 +1,4 @@ - + Result 结果 用于反馈不同结果的展示。 diff --git a/src/result/_example/skyline/result.less b/src/result/_example/skyline/result.less index 986597745..88b1501bd 100644 --- a/src/result/_example/skyline/result.less +++ b/src/result/_example/skyline/result.less @@ -1,5 +1,5 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); .demo-section__wrapper { padding: 0 32rpx; diff --git a/src/result/_example/skyline/result.wxml b/src/result/_example/skyline/result.wxml index 5393550db..e5963c195 100644 --- a/src/result/_example/skyline/result.wxml +++ b/src/result/_example/skyline/result.wxml @@ -1,5 +1,5 @@ - + Result 结果 diff --git a/src/side-bar/__test__/__snapshots__/demo.test.js.snap b/src/side-bar/__test__/__snapshots__/demo.test.js.snap index a72011dec..edac3ed2e 100644 --- a/src/side-bar/__test__/__snapshots__/demo.test.js.snap +++ b/src/side-bar/__test__/__snapshots__/demo.test.js.snap @@ -2,14 +2,11 @@ exports[`SideBar SideBar base demo works fine 1`] = ` - - - + - - - + - - - + - - - + - - + + - - + + + + SideBar 侧边栏 用于内容分类后的展示切换。 diff --git a/src/side-bar/_example/side-bar.wxss b/src/side-bar/_example/side-bar.wxss deleted file mode 100644 index c6f5637c0..000000000 --- a/src/side-bar/_example/side-bar.wxss +++ /dev/null @@ -1,7 +0,0 @@ -page { - background-color: #fff; -} - -.t-button { - margin-top: 32rpx; -} diff --git a/src/side-bar/_example/switch/index.wxml b/src/side-bar/_example/switch/index.wxml index 06f984297..d0b15930d 100644 --- a/src/side-bar/_example/switch/index.wxml +++ b/src/side-bar/_example/switch/index.wxml @@ -1,6 +1,5 @@ - - - + + - - + + + Skeleton 骨架屏 用于等待加载内容所展示的占位图形组合，有动态效果加载效果，减少用户等待焦虑。 diff --git a/src/skeleton/_example/skyline/skeleton.less b/src/skeleton/_example/skyline/skeleton.less index 23062cc7e..2b200c211 100644 --- a/src/skeleton/_example/skyline/skeleton.less +++ b/src/skeleton/_example/skyline/skeleton.less @@ -1,3 +1,3 @@ page { - background-color: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/stepper/_example/base/index.wxss b/src/stepper/_example/base/index.wxss index 42a47b548..ed3e73319 100644 --- a/src/stepper/_example/base/index.wxss +++ b/src/stepper/_example/base/index.wxss @@ -1,4 +1,4 @@ .stepper-example { padding: 32rpx; - background-color: var(--bg-demo-color); + background-color: var(--bg-color-demo); } diff --git a/src/stepper/_example/min-max/index.wxss b/src/stepper/_example/min-max/index.wxss index d3c3d57e2..c6a55693a 100644 --- a/src/stepper/_example/min-max/index.wxss +++ b/src/stepper/_example/min-max/index.wxss @@ -1,6 +1,6 @@ .stepper-example { padding: 32rpx; display: flex; - background-color: var(--bg-demo-color); + background-color: var(--bg-color-demo); justify-content: space-between; } diff --git a/src/stepper/_example/size/index.wxss b/src/stepper/_example/size/index.wxss index d3c3d57e2..c6a55693a 100644 --- a/src/stepper/_example/size/index.wxss +++ b/src/stepper/_example/size/index.wxss @@ -1,6 +1,6 @@ .stepper-example { padding: 32rpx; display: flex; - background-color: var(--bg-demo-color); + background-color: var(--bg-color-demo); justify-content: space-between; } diff --git a/src/stepper/_example/status/index.wxss b/src/stepper/_example/status/index.wxss index 42a47b548..ed3e73319 100644 --- a/src/stepper/_example/status/index.wxss +++ b/src/stepper/_example/status/index.wxss @@ -1,4 +1,4 @@ .stepper-example { padding: 32rpx; - background-color: var(--bg-demo-color); + background-color: var(--bg-color-demo); } diff --git a/src/stepper/_example/theme/index.wxss b/src/stepper/_example/theme/index.wxss index d3c3d57e2..c6a55693a 100644 --- a/src/stepper/_example/theme/index.wxss +++ b/src/stepper/_example/theme/index.wxss @@ -1,6 +1,6 @@ .stepper-example { padding: 32rpx; display: flex; - background-color: var(--bg-demo-color); + background-color: var(--bg-color-demo); justify-content: space-between; } diff --git a/src/swiper/_example/skyline/swiper.less b/src/swiper/_example/skyline/swiper.less index e81280cfe..2b200c211 100644 --- a/src/swiper/_example/skyline/swiper.less +++ b/src/swiper/_example/skyline/swiper.less @@ -1,3 +1,3 @@ page { - background: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/swiper/_example/swiper.less b/src/swiper/_example/swiper.less index e81280cfe..2b200c211 100644 --- a/src/swiper/_example/swiper.less +++ b/src/swiper/_example/swiper.less @@ -1,3 +1,3 @@ page { - background: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/swiper/_example/swiper.wxml b/src/swiper/_example/swiper.wxml index 65e4bfd23..7a492ed7f 100644 --- a/src/swiper/_example/swiper.wxml +++ b/src/swiper/_example/swiper.wxml @@ -1,4 +1,4 @@ - + Swiper 轮播图 用于循环轮播一组图片或内容，也可以滑动进行切换，轮播动效时间可以设置。 diff --git a/src/tag/_example/skyline/tag.less b/src/tag/_example/skyline/tag.less index e81280cfe..2b200c211 100644 --- a/src/tag/_example/skyline/tag.less +++ b/src/tag/_example/skyline/tag.less @@ -1,3 +1,3 @@ page { - background: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/tag/_example/skyline/tag.wxml b/src/tag/_example/skyline/tag.wxml index 853d9b468..628d6ed1e 100644 --- a/src/tag/_example/skyline/tag.wxml +++ b/src/tag/_example/skyline/tag.wxml @@ -1,5 +1,5 @@ - + Tag 标签 diff --git a/src/tag/_example/tag.less b/src/tag/_example/tag.less index e81280cfe..2b200c211 100644 --- a/src/tag/_example/tag.less +++ b/src/tag/_example/tag.less @@ -1,3 +1,3 @@ page { - background: #fff; + background-color: var(--td-bg-color-container); } diff --git a/src/tag/_example/tag.wxml b/src/tag/_example/tag.wxml index 3044d7afd..76367dda8 100644 --- a/src/tag/_example/tag.wxml +++ b/src/tag/_example/tag.wxml @@ -1,4 +1,4 @@ - + Tag 标签 用于表明主体的类目，属性或状态。 diff --git a/src/textarea/_example/card/index.wxss b/src/textarea/_example/card/index.wxss index 3ec1bd25b..f4b44e596 100644 --- a/src/textarea/_example/card/index.wxss +++ b/src/textarea/_example/card/index.wxss @@ -1,6 +1,5 @@ .textarea-example { margin: 0 32rpx; - background-color: #fff; border-radius: 18rpx; } diff --git a/src/textarea/_example/custom/index.wxss b/src/textarea/_example/custom/index.wxss index 4e8ad5bf9..d9accce43 100644 --- a/src/textarea/_example/custom/index.wxss +++ b/src/textarea/_example/custom/index.wxss @@ -1,6 +1,6 @@ .textarea-example { padding: 32rpx 32rpx 48rpx; - background-color: var(--bg-demo-color); + background-color: var(--bg-color-demo); } .external-class { diff --git a/src/toast/_example/skyline/toast.less b/src/toast/_example/skyline/toast.less index 6b203f4a1..bfac79041 100644 --- a/src/toast/_example/skyline/toast.less +++ b/src/toast/_example/skyline/toast.less @@ -11,5 +11,5 @@ } page { - background-color: #fff !important; + background-color: var(--td-bg-color-container); } diff --git a/src/toast/_example/skyline/toast.wxml b/src/toast/_example/skyline/toast.wxml index c948d9273..1681c5257 100644 --- a/src/toast/_example/skyline/toast.wxml +++ b/src/toast/_example/skyline/toast.wxml @@ -1,5 +1,5 @@ - + Toast 轻提示 diff --git a/src/toast/_example/toast.less b/src/toast/_example/toast.less index 25f6c51e5..aea4174fb 100644 --- a/src/toast/_example/toast.less +++ b/src/toast/_example/toast.less @@ -1,3 +1,7 @@ +page { + background-color: var(--td-bg-color-container); +} + .demo { .t-button { margin-bottom: 32rpx; diff --git a/src/toast/_example/toast.wxml b/src/toast/_example/toast.wxml index ea754fcdb..5b7d04150 100644 --- a/src/toast/_example/toast.wxml +++ b/src/toast/_example/toast.wxml @@ -1,4 +1,4 @@ - + Toast 轻提示 用于轻量级反馈或提示，不会打断用户操作。 diff --git a/src/upload/_example/upload.less b/src/upload/_example/upload.less index 538f48909..56497ae55 100644 --- a/src/upload/_example/upload.less +++ b/src/upload/_example/upload.less @@ -9,8 +9,3 @@ padding-bottom: 32rpx; } } - -.demo { - --td-grid-bg-color: var(--td-grid-bg-color-example); - --td-grid-item-bg-color: var(--td-grid-item-bg-color-example); -}