lingxiao/mini-yu
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
lingxiao865
2026-02-10 08:05:03 +08:00
commit c5af079d8c
1094 changed files with 97530 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
uni_modules/tdesign-uniapp/components/common/style/_variables.less Normal file
View File

@@ -0,0 +1,232 @@
// 公共前缀
@prefix: t;
@primary-color-1: var(--td-primary-color-1, #f2f3ff);
@primary-color-2: var(--td-primary-color-2, #d9e1ff);
@primary-color-3: var(--td-primary-color-3, #b5c7ff);
@primary-color-4: var(--td-primary-color-4, #8eabff);
@primary-color-5: var(--td-primary-color-5, #618dff);
@primary-color-6: var(--td-primary-color-6, #366ef4);
@primary-color-7: var(--td-primary-color-7, #0052d9);
@primary-color-8: var(--td-primary-color-8, #003cab);
@primary-color-9: var(--td-primary-color-9, #002a7c);
@primary-color-10: var(--td-primary-color-10, #001a57);
@error-color-1: var(--td-error-color-1, #fff0ed);
@error-color-2: var(--td-error-color-2, #ffd8d2);
@error-color-3: var(--td-error-color-3, #ffb9b0);
@error-color-4: var(--td-error-color-4, #ff9285);
@error-color-5: var(--td-error-color-5, #f6685d);
@error-color-6: var(--td-error-color-6, #d54941);
@error-color-7: var(--td-error-color-7, #ad352f);
@error-color-8: var(--td-error-color-8, #881f1c);
@error-color-9: var(--td-error-color-9, #68070a);
@error-color-10: var(--td-error-color-10, #490002);
@warning-color-1: var(--td-warning-color-1, #fff1e9);
@warning-color-2: var(--td-warning-color-2, #ffd9c2);
@warning-color-3: var(--td-warning-color-3, #ffb98c);
@warning-color-4: var(--td-warning-color-4, #fa9550);
@warning-color-5: var(--td-warning-color-5, #e37318);
@warning-color-6: var(--td-warning-color-6, #be5a00);
@warning-color-7: var(--td-warning-color-7, #954500);
@warning-color-8: var(--td-warning-color-8, #713300);
@warning-color-9: var(--td-warning-color-9, #532300);
@warning-color-10: var(--td-warning-color-10, #3b1700);
@success-color-1: var(--td-success-color-1, #e3f9e9);
@success-color-2: var(--td-success-color-2, #c6f3d7);
@success-color-3: var(--td-success-color-3, #92dab2);
@success-color-4: var(--td-success-color-4, #56c08d);
@success-color-5: var(--td-success-color-5, #2ba471);
@success-color-6: var(--td-success-color-6, #008858);
@success-color-7: var(--td-success-color-7, #006c45);
@success-color-8: var(--td-success-color-8, #005334);
@success-color-9: var(--td-success-color-9, #003b23);
@success-color-10: var(--td-success-color-10, #002515);
@gray-color-1: var(--td-gray-color-1, #f3f3f3);
@gray-color-2: var(--td-gray-color-2, #eeeeee);
@gray-color-3: var(--td-gray-color-3, #e7e7e7);
@gray-color-4: var(--td-gray-color-4, #dcdcdc);
@gray-color-5: var(--td-gray-color-5, #c5c5c5);
@gray-color-6: var(--td-gray-color-6, #a6a6a6);
@gray-color-7: var(--td-gray-color-7, #8b8b8b);
@gray-color-8: var(--td-gray-color-8, #777777);
@gray-color-9: var(--td-gray-color-9, #5e5e5e);
@gray-color-10: var(--td-gray-color-10, #4b4b4b);
@gray-color-11: var(--td-gray-color-11, #383838);
@gray-color-12: var(--td-gray-color-12, #2c2c2c);
@gray-color-13: var(--td-gray-color-13, #242424);
@gray-color-14: var(--td-gray-color-14, #181818);
@font-gray-1: var(--td-font-gray-1, rgba(0, 0, 0, 0.9));
@font-gray-2: var(--td-font-gray-2, rgba(0, 0, 0, 0.6));
@font-gray-3: var(--td-font-gray-3, rgba(0, 0, 0, 0.4));
@font-gray-4: var(--td-font-gray-4, rgba(0, 0, 0, 0.26));
@font-white-1: var(--td-font-white-1, rgba(255, 255, 255, 1));
@font-white-2: var(--td-font-white-2, rgba(255, 255, 255, 0.55));
@font-white-3: var(--td-font-white-3, rgba(255, 255, 255, 0.35));
@font-white-4: var(--td-font-white-4, rgba(255, 255, 255, 0.22));
// 边框色
@border-color: var(--td-border-color, @gray-color-3);
// Spacer
@spacer: var(--td-spacer, 16rpx);
@spacer-1: var(--td-spacer-1, 24rpx); // 间距-小-x
@spacer-2: var(--td-spacer-2, 32rpx); // 间距-小
@spacer-3: var(--td-spacer-3, 48rpx); // 间距-中
@spacer-4: var(--td-spacer-4, 64rpx); // 间距-大
@spacer-5: var(--td-spacer-5, 96rpx); // 间距-大-x
@spacer-6: var(--td-spacer-6, 160rpx); // 间距-大-xx
@text-line-height: var(--td-line-height-body-extraSmall, 16px);
@text-line-height-xs: var(--td-line-height-body-extraSmall, @text-line-height);
@text-line-height-s: var(--td-line-height-body-small, 20px);
@text-line-height-base: var(--td-line-height-title-small, 22px);
@text-line-height-m: var(--td-line-height-title-medium, 24px);
@text-line-height-l: var(--td-line-height-title-large, 26px);
@text-line-height-xl: var(--td-line-height-title-extraLarge, 28px);
@text-line-height-xxl: var(--td-line-height-headline-large, 44px);
// Font
@font-size: var(--td-font-size, 20rpx);
@font-size-xs: var(--td-font-size-xs, @font-size); // 字号-一级字号
@font-size-s: var(--td-font-size-s, 24rpx); // 字号-二级字号
@font-size-base: var(--td-font-size-base, 28rpx); // 字号-三级字号
@font-size-m: var(--td-font-size-m, 32rpx); // 字号-二级字号
@font-size-l: var(--td-font-size-l, 36rpx); // 字号-四级字号
@font-size-xl: var(--td-font-size-xl, 40rpx); // 字号-五级字号
@font-size-xxl: var(--td-font-size-xxl, 72rpx);
@font-family: var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular); // 字体-磅数-常规
@font-family-medium: var(--td-font-family-medium, PingFang SC, Microsoft YaHei, Arial Medium); // 字体-磅数-粗体
// 使用以下与Design Token对应的font token开发组件对应字体、行高
@font-link-small: var(--td-font-link-small, 24rpx / 40rpx @font-family);
@font-link-medium: var(--td-font-link-medium, 28rpx / 44rpx @font-family);
@font-link-large: var(--td-font-link-large, 32rpx / 48rpx @font-family);
@font-mark-extraSmall: var(--td-font-mark-extraSmall, 600 20rpx / 32rpx @font-family);
@font-mark-small: var(--td-font-mark-small, 600 24rpx / 40rpx @font-family);
@font-mark-medium: var(--td-font-mark-medium, 600 28rpx / 44rpx @font-family);
@font-mark-large: var(--td-font-mark-large, 600 32rpx / 48rpx @font-family);
@font-body-extraSmall: var(--td-font-body-extraSmall, 20rpx / 32rpx @font-family);
@font-body-small: var(--td-font-body-small, 24rpx / 40rpx @font-family);
@font-body-medium: var(--td-font-body-medium, 28rpx / 44rpx @font-family);
@font-body-large: var(--td-font-body-large, 32rpx / 48rpx @font-family);
@font-title-small: var(--td-font-title-small, 600 28rpx / 44rpx @font-family);
@font-title-medium: var(--td-font-title-medium, 600 32rpx / 48rpx @font-family);
@font-title-large: var(--td-font-title-large, 600 36rpx / 52rpx @font-family);
@font-title-extraLarge: var(--td-font-title-extraLarge, 600 40rpx / 56rpx @font-family);
@font-headline-small: var(--td-font-headline-small, 600 48rpx / 64rpx @font-family);
@font-headline-medium: var(--td-font-headline-medium, 600 56rpx / 72rpx @font-family);
@font-headline-large: var(--td-font-headline-large, 600 72rpx / 88rpx @font-family);
@font-display-medium: var(--td-font-display-medium, 600 96rpx / 112rpx @font-family);
@font-display-large: var(--td-font-display-large, 600 128rpx / 144rpx @font-family);
// 圆角
@radius-small: var(--td-radius-small, 6rpx);
@radius-default: var(--td-radius-default, 12rpx);
@radius-large: var(--td-radius-large, 18rpx);
@radius-extraLarge: var(--td-radius-extraLarge, 24rpx);
@radius-round: var(--td-radius-round, 999px);
@radius-circle: var(--td-radius-circle, 50%);
// 阴影
@shadow-1: var(
--td-shadow-1,
0 1px 10px rgba(0, 0, 0, 5%),
0 4px 5px rgba(0, 0, 0, 8%),
0 2px 4px -1px rgba(0, 0, 0, 12%)
);
@shadow-2: var(
--td-shadow-2,
0 3px 14px 2px rgba(0, 0, 0, 5%),
0 8px 10px 1px rgba(0, 0, 0, 6%),
0 5px 5px -3px rgba(0, 0, 0, 10%)
);
@shadow-3: var(
--td-shadow-3,
0 6px 30px 5px rgba(0, 0, 0, 5%),
0 16px 24px 2px rgba(0, 0, 0, 4%),
0 8px 10px -5px rgba(0, 0, 0, 8%)
);
@shadow-4: var(--td-shadow-4, 0 2px 8px 0 rgba(0, 0, 0, 0.06));
// 动画
@anim-time-fn-easing: var(--td-anim-time-fn-easing, cubic-bezier(0.38, 0, 0.24, 1));
@anim-time-fn-ease-out: var(--td-anim-time-fn-ease-out, cubic-bezier(0, 0, 0.15, 1));
@anim-time-fn-ease-in: var(--td-anim-time-fn-ease-in, cubic-bezier(0.82, 0, 1, 0.9));
@anim-duration-base: var(--td-anim-duration-base, 0.2s);
@anim-duration-moderate: var(--td-anim-duration-moderate, 0.24s);
@anim-duration-slow: var(--td-anim-duration-slow, 0.28s);
// 容器
@bg-color-page: var(--td-bg-color-page, @gray-color-1);
@bg-color-container: var(--td-bg-color-container, @font-white-1);
@bg-color-container-active: var(--td-bg-color-container-active, @gray-color-3);
@bg-color-secondarycontainer: var(--td-bg-color-secondarycontainer, @gray-color-1);
@bg-color-secondarycontainer-active: var(--td-bg-color-secondarycontainer-active, @gray-color-4);
@bg-color-component: var(--td-bg-color-component, @gray-color-3);
@bg-color-component-active: var(--td-bg-color-component-active, @gray-color-6);
@bg-color-component-disabled: var(--td-bg-color-component-disabled, @gray-color-2);
@bg-color-secondarycomponent: var(--td-bg-color-secondarycomponent, @gray-color-4);
@bg-color-secondarycomponent-active: var(--td-bg-color-secondarycomponent-active, @gray-color-6);
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
@bg-color-specialcomponent: var(--td-bg-color-specialcomponent, #fff);
@component-stroke: var(--td-component-stroke, @gray-color-3);
@border-level-1-color: var(--td-border-level-1-color, @gray-color-3);
@component-border: var(--td-component-border, @gray-color-4);
@border-level-2-color: var(--td-border-level-2-color, @gray-color-4);
// 主题
@brand-color: var(--td-brand-color, @primary-color-7);
@brand-color-active: var(--td-brand-color-active, @primary-color-8);
@brand-color-disabled: var(--td-brand-color-disabled, @primary-color-3);
@brand-color-focus: var(--td-brand-color-focus, @primary-color-1);
@brand-color-light: var(--td-brand-color-light, @primary-color-1);
@brand-color-light-active: var(--td-brand-color-light-active, @primary-color-2);
@error-color: var(--td-error-color, @error-color-6);
@error-color-active: var(--td-error-color-active, @error-color-7);
@error-color-disabled: var(--td-error-color-disabled, @error-color-3);
@error-color-focus: var(--td-error-color-focus, @error-color-2);
@error-color-light: var(--td-error-color-light, @error-color-1);
@warning-color: var(--td-warning-color, @warning-color-5);
@warning-color-active: var(--td-warning-color-active, @warning-color-6);
@warning-color-disabled: var(--td-warning-color-disabled, @warning-color-3);
@warning-color-focus: var(--td-warning-color-focus, @warning-color-2);
@warning-color-light: var(--td-warning-color-light, @warning-color-1);
@success-color: var(--td-success-color, @success-color-5);
@success-color-active: var(--td-success-color-active, @success-color-6);
@success-color-disabled: var(--td-success-color-disabled, @success-color-3);
@success-color-focus: var(--td-success-color-focus, @success-color-2);
@success-color-light: var(--td-success-color-light, @success-color-1);
// 文字
@text-color-primary: var(--td-text-color-primary, @font-gray-1);
@text-color-secondary: var(--td-text-color-secondary, @font-gray-2);
@text-color-placeholder: var(--td-text-color-placeholder, @font-gray-3);
@text-color-disabled: var(--td-text-color-disabled, @font-gray-4);
@text-color-anti: var(--td-text-color-anti, @font-white-1);
@text-color-brand: var(--td-text-color-brand, @brand-color);
@text-color-link: var(--td-text-color-link, @brand-color);
// 定位
@position-fixed-top: var(--td-position-fixed-top, 0);
// 遮罩
@mask-active: var(--td-mask-active, rgba(0, 0, 0, 0.6)); // 遮罩-弹出
@mask-disabled: var(--td-mask-disabled, rgba(255, 255, 255, 0.6)); // 遮罩-禁用
@mask-bg: var(--td-mask-background, rgba(255, 255, 255, 0.96)); // 二维码遮罩
@text-line-height: 1.5;

4
uni_modules/tdesign-uniapp/components/common/style/base.less Normal file
View File

@@ -0,0 +1,4 @@
// 变量
@import './_variables.less';
@import './mixins/_index.less';

0
uni_modules/tdesign-uniapp/components/common/style/icons.css Normal file
View File

13
uni_modules/tdesign-uniapp/components/common/style/index.css Normal file
View File

@@ -0,0 +1,13 @@
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}

34
uni_modules/tdesign-uniapp/components/common/style/mixins/_border.less Normal file
View File

@@ -0,0 +1,34 @@
@import '../_variables.less';
.border(@position: bottom, @border-color: @component-border) {
position: relative;
&::after {
content: '';
display: block;
position: absolute;
top: if(@position = top, 0, unset);
bottom: if(@position = bottom, 0, unset);
left: if(@position = left, 0, unset);
right: if(@position = right, 0, unset);
background-color: @border-color;
}
}
.border(@position: bottom, @border-color: @gray-color-1) when(@position = bottom) , (@position = top) {
&::after {
height: 1px;
left: 0;
right: 0;
transform: scaleY(0.5);
}
}
.border(@position: bottom, @border-color: @gray-color-1) when(@position = left),(@position = right) {
&::after {
width: 1px;
top: 0;
bottom: 0;
transform: scaleX(0.5);
}
}

7
uni_modules/tdesign-uniapp/components/common/style/mixins/_clearfix.less Normal file
View File

@@ -0,0 +1,7 @@
.clearfix() {
&::after {
display: table;
clear: both;
content: '';
}
}

6
uni_modules/tdesign-uniapp/components/common/style/mixins/_cursor.less Normal file
View File

@@ -0,0 +1,6 @@
.cursor-pointer() {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
}

15
uni_modules/tdesign-uniapp/components/common/style/mixins/_ellipsis.less Normal file
View File

@@ -0,0 +1,15 @@
.ellipsis(@w:auto) {
width: @w;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
.ellipsisLn(@line) {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: @line;
display: -webkit-box;
-webkit-box-orient: vertical;
}

55
uni_modules/tdesign-uniapp/components/common/style/mixins/_hairline.less Normal file
View File

@@ -0,0 +1,55 @@
@import '../_variables.less';
.hairline-base() {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
}
.hairline(@color: @border-level-1-color) {
.hairline-base();
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: 1px solid @color;
transform: scale(0.5);
}
.hairline-top(@color: @border-level-1-color) {
.hairline-base();
right: 0;
left: 0;
top: 0;
border-top: 1px solid @color;
transform: scaleY(0.5);
transform-origin: 0 0;
}
.hairline-bottom(@color: @border-level-1-color, @width: 1px) {
.hairline-base();
right: 0;
left: 0;
bottom: 0;
border-bottom: @width solid @color;
transform: scaleY(0.5);
}
.hairline-left(@color: @border-level-1-color) {
.hairline-base();
top: 0;
bottom: 0;
left: 0;
border-left: 1px solid @color;
transform: scaleX(0.5);
}
.hairline-right(@color: @border-level-1-color) {
.hairline-base();
top: 0;
bottom: 0;
right: 0;
border-right: 1px solid @color;
transform: scaleX(0.5);
}

6
uni_modules/tdesign-uniapp/components/common/style/mixins/_index.less Normal file
View File

@@ -0,0 +1,6 @@
@import './_clearfix.less';
@import './_hairline.less';
@import './_ellipsis.less';
@import './_cursor.less';
@import './_border.less';
@import './_other.less';

14
uni_modules/tdesign-uniapp/components/common/style/mixins/_other.less Normal file
View File

@@ -0,0 +1,14 @@
// 屏幕中不显示, 但可被读屏
.sr-only() {
&--sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
clip-path: inset(50%);
border: 0;
}
}

519
uni_modules/tdesign-uniapp/components/common/style/theme/index.css Normal file
View File

@@ -0,0 +1,519 @@
/* ./raw/_light.less */
@media (prefers-color-scheme: light) {
/* #ifdef H5 */
:root,
/* #endif */
page,
.page {
--td-brand-color-1: #f2f3ff;
--td-brand-color-2: #d9e1ff;
--td-brand-color-3: #b5c7ff;
--td-brand-color-4: #8eabff;
--td-brand-color-5: #618dff;
--td-brand-color-6: #366ef4;
--td-brand-color-7: #0052d9;
--td-brand-color-8: #003cab;
--td-brand-color-9: #002a7c;
--td-brand-color-10: #001a57;
--td-primary-color-1: var(--td-brand-color-1);
--td-primary-color-2: var(--td-brand-color-2);
--td-primary-color-3: var(--td-brand-color-3);
--td-primary-color-4: var(--td-brand-color-4);
--td-primary-color-5: var(--td-brand-color-5);
--td-primary-color-6: var(--td-brand-color-6);
--td-primary-color-7: var(--td-brand-color-7);
--td-primary-color-8: var(--td-brand-color-8);
--td-primary-color-9: var(--td-brand-color-9);
--td-primary-color-10: var(--td-brand-color-10);
--td-warning-color-1: #fff1e9;
--td-warning-color-2: #ffd9c2;
--td-warning-color-3: #ffb98c;
--td-warning-color-4: #fa9550;
--td-warning-color-5: #e37318;
--td-warning-color-6: #be5a00;
--td-warning-color-7: #954500;
--td-warning-color-8: #713300;
--td-warning-color-9: #532300;
--td-warning-color-10: #3b1700;
--td-error-color-1: #fff0ed;
--td-error-color-2: #ffd8d2;
--td-error-color-3: #ffb9b0;
--td-error-color-4: #ff9285;
--td-error-color-5: #f6685d;
--td-error-color-6: #d54941;
--td-error-color-7: #ad352f;
--td-error-color-8: #881f1c;
--td-error-color-9: #68070a;
--td-error-color-10: #490002;
--td-success-color-1: #e3f9e9;
--td-success-color-2: #c6f3d7;
--td-success-color-3: #92dab2;
--td-success-color-4: #56c08d;
--td-success-color-5: #2ba471;
--td-success-color-6: #008858;
--td-success-color-7: #006c45;
--td-success-color-8: #005334;
--td-success-color-9: #003b23;
--td-success-color-10: #002515;
--td-gray-color-1: #f3f3f3;
--td-gray-color-2: #eeeeee;
--td-gray-color-3: #e7e7e7;
--td-gray-color-4: #dcdcdc;
--td-gray-color-5: #c5c5c5;
--td-gray-color-6: #a6a6a6;
--td-gray-color-7: #8b8b8b;
--td-gray-color-8: #777777;
--td-gray-color-9: #5e5e5e;
--td-gray-color-10: #4b4b4b;
--td-gray-color-11: #383838;
--td-gray-color-12: #2c2c2c;
--td-gray-color-13: #242424;
--td-gray-color-14: #181818;
// 文字 & 图标 颜色
--td-font-white-1: rgba(255, 255, 255, 1);
--td-font-white-2: rgba(255, 255, 255, 0.55);
--td-font-white-3: rgba(255, 255, 255, 0.35);
--td-font-white-4: rgba(255, 255, 255, 0.22);
--td-font-gray-1: rgba(0, 0, 0, 0.9);
--td-font-gray-2: rgba(0, 0, 0, 0.6);
--td-font-gray-3: rgba(0, 0, 0, 0.4);
--td-font-gray-4: rgba(0, 0, 0, 0.26);
// 基础颜色
--td-brand-color: var(--td-primary-color-7);
--td-warning-color: var(--td-warning-color-5);
--td-error-color: var(--td-error-color-6);
--td-success-color: var(--td-success-color-5);
// 基础颜色的扩展 用于 聚焦 / 禁用 / 点击 等状态
--td-brand-color-focus: var(--td-primary-color-1);
--td-brand-color-active: var(--td-primary-color-8);
--td-brand-color-disabled: var(--td-primary-color-3);
--td-brand-color-light: var(--td-primary-color-1);
--td-brand-color-light-active: var(--td-primary-color-2);
// 警告色扩展
--td-warning-color-active: var(--td-warning-color-6);
--td-warning-color-disabled: var(--td-warning-color-3);
--td-warning-color-focus: var(--td-warning-color-2);
--td-warning-color-light: var(--td-warning-color-1);
--td-warning-color-light-active: var(--td-warning-color-2);
// 失败/错误色扩展
--td-error-color-focus: var(--td-error-color-2);
--td-error-color-active: var(--td-error-color-7);
--td-error-color-disabled: var(--td-error-color-3);
--td-error-color-light: var(--td-error-color-1);
--td-error-color-light-active: var(--td-error-color-2);
// 成功色扩展
--td-success-color-focus: var(--td-success-color-2);
--td-success-color-active: var(--td-success-color-6);
--td-success-color-disabled: var(--td-success-color-3);
--td-success-color-light: var(--td-success-color-1);
--td-success-color-light-active: var(--td-success-color-2);
// 遮罩
--td-mask-active: rgba(0, 0, 0, 60%); // 遮罩-弹出
--td-mask-disabled: rgba(255, 255, 255, 60%); // 遮罩-禁用
--td-mask-background: rgba(255, 255, 255, 96%); // 二维码遮罩
// 背景色
--td-bg-color-page: var(--td-gray-color-1);
--td-bg-color-container: var(--td-font-white-1);
--td-bg-color-container-active: var(--td-gray-color-3);
--td-bg-color-secondarycontainer: var(--td-gray-color-1);
--td-bg-color-secondarycontainer-active: var(--td-gray-color-4);
--td-bg-color-component: var(--td-gray-color-3);
--td-bg-color-component-active: var(--td-gray-color-6);
--td-bg-color-component-disabled: var(--td-gray-color-2);
--td-bg-color-secondarycomponent: var(--td-gray-color-4);
--td-bg-color-secondarycomponent-active: var(--td-gray-color-6);
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
--td-bg-color-specialcomponent: #fff;
// 文本颜色
--td-text-color-primary: var(--td-font-gray-1);
--td-text-color-secondary: var(--td-font-gray-2);
--td-text-color-placeholder: var(--td-font-gray-3);
--td-text-color-disabled: var(--td-font-gray-4);
--td-text-color-anti: var(--td-font-white-1);
--td-text-color-brand: var(--td-brand-color);
--td-text-color-link: var(--td-brand-color);
// 分割线
--td-border-level-1-color: var(--td-gray-color-3);
--td-component-stroke: var(--td-gray-color-3);
// 边框
--td-border-level-2-color: var(--td-gray-color-4);
--td-component-border: var(--td-gray-color-4);
// 基础/下层 投影 hover 使用的组件包括：表格 /
--td-shadow-1: 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
--td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
--td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%),
0 8px 10px -5px rgba(0, 0, 0, 8%);
--td-shadow-4: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
--td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
--td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
--td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
--td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
// table 特定阴影
--td-table-shadow-color: rgba(0, 0, 0, 8%);
// 滚动条颜色
--td-scrollbar-color: rgba(0, 0, 0, 10%);
// 滚动条悬浮颜色（ hover ）
--td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
// 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
--td-scroll-track-color: #fff;
}
}
/* ./raw/_dark.less */
@media (prefers-color-scheme: dark) {
/* #ifdef H5 */
:root,
/* #endif */
page,
.page {
--td-brand-color-1: #1b2f51;
--td-brand-color-2: #173463;
--td-brand-color-3: #143975;
--td-brand-color-4: #103d88;
--td-brand-color-5: #0d429a;
--td-brand-color-6: #054bbe;
--td-brand-color-7: #2667d4;
--td-brand-color-8: #4582e6;
--td-brand-color-9: #699ef5;
--td-brand-color-10: #96bbf8;
--td-primary-color-1: var(--td-brand-color-1);
--td-primary-color-2: var(--td-brand-color-2);
--td-primary-color-3: var(--td-brand-color-3);
--td-primary-color-4: var(--td-brand-color-4);
--td-primary-color-5: var(--td-brand-color-5);
--td-primary-color-6: var(--td-brand-color-6);
--td-primary-color-7: var(--td-brand-color-7);
--td-primary-color-8: var(--td-brand-color-8);
--td-primary-color-9: var(--td-brand-color-9);
--td-primary-color-10: var(--td-brand-color-10);
--td-warning-color-1: #4f2a1d;
--td-warning-color-2: #582f21;
--td-warning-color-3: #733c23;
--td-warning-color-4: #a75d2b;
--td-warning-color-5: #cf6e2d;
--td-warning-color-6: #dc7633;
--td-warning-color-7: #e8935c;
--td-warning-color-8: #ecbf91;
--td-warning-color-9: #eed7bf;
--td-warning-color-10: #f3e9dc;
--td-error-color-1: #472324;
--td-error-color-2: #5e2a2d;
--td-error-color-3: #703439;
--td-error-color-4: #83383e;
--td-error-color-5: #a03f46;
--td-error-color-6: #c64751;
--td-error-color-7: #de6670;
--td-error-color-8: #ec888e;
--td-error-color-9: #edb1b6;
--td-error-color-10: #eeced0;
--td-success-color-1: #193a2a;
--td-success-color-2: #1a4230;
--td-success-color-3: #17533d;
--td-success-color-4: #0d7a55;
--td-success-color-5: #059465;
--td-success-color-6: #43af8a;
--td-success-color-7: #46bf96;
--td-success-color-8: #80d2b6;
--td-success-color-9: #b4e1d3;
--td-success-color-10: #deede8;
--td-gray-color-1: #f3f3f3;
--td-gray-color-2: #eee;
--td-gray-color-3: #e8e8e8;
--td-gray-color-4: #ddd;
--td-gray-color-5: #c6c6c6;
--td-gray-color-6: #a6a6a6;
--td-gray-color-7: #8b8b8b;
--td-gray-color-8: #777;
--td-gray-color-9: #5e5e5e;
--td-gray-color-10: #4b4b4b;
--td-gray-color-11: #383838;
--td-gray-color-12: #2c2c2c;
--td-gray-color-13: #242424;
--td-gray-color-14: #181818;
// 文字 & 图标 颜色
--td-font-white-1: rgba(255, 255, 255, 90%);
--td-font-white-2: rgba(255, 255, 255, 55%);
--td-font-white-3: rgba(255, 255, 255, 35%);
--td-font-white-4: rgba(255, 255, 255, 22%);
--td-font-gray-1: rgba(0, 0, 0, 90%);
--td-font-gray-2: rgba(0, 0, 0, 60%);
--td-font-gray-3: rgba(0, 0, 0, 40%);
--td-font-gray-4: rgba(0, 0, 0, 26%);
// 基础颜色
--td-brand-color: var(--td-primary-color-8); // 色彩-品牌-可操作
--td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
--td-error-color: var(--td-error-color-6); // 色彩-功能-失败
--td-success-color: var(--td-success-color-5); // 色彩-功能-成功
// 基础颜色的扩展 用于 聚焦 / 禁用 / 点击 等状态
--td-brand-color-focus: var(--td-primary-color-1); // focus态，包括鼠标和键盘
--td-brand-color-active: var(--td-primary-color-9); // 点击态
--td-brand-color-disabled: var(--td-primary-color-3); // 禁用态
--td-brand-color-light: var(--td-primary-color-1); // 浅色的选中态
--td-brand-color-light-active: var(--td-primary-color-2); // 浅色的选中态
// 警告色扩展
--td-warning-color-focus: var(--td-warning-color-2);
--td-warning-color-active: var(--td-warning-color-4);
--td-warning-color-disabled: var(--td-warning-color-3);
--td-warning-color-light: var(--td-warning-color-1);
--td-warning-color-light-active: var(--td-warning-color-2);
// 失败/错误色扩展
--td-error-color-focus: var(--td-error-color-2);
--td-error-color-active: var(--td-error-color-5);
--td-error-color-disabled: var(--td-error-color-3);
--td-error-color-light: var(--td-error-color-1);
--td-error-color-light-active: var(--td-error-color-2);
// 成功色扩展
--td-success-color-focus: var(--td-success-color-2);
--td-success-color-active: var(--td-success-color-4);
--td-success-color-disabled: var(--td-success-color-3);
--td-success-color-light: var(--td-success-color-1);
--td-success-color-light-active: var(--td-success-color-2);
// 遮罩
--td-mask-active: rgba(0, 0, 0, 40%); // 遮罩-弹出
--td-mask-disabled: rgba(0, 0, 0, 60%); // 遮罩-禁用
--td-mask-background: rgba(36, 36, 36, 96%); // 二维码遮罩
// 背景色
--td-bg-color-page: var(--td-gray-color-14); // 色彩 - page
--td-bg-color-container: var(--td-gray-color-13); // 色彩 - 容器
--td-bg-color-secondarycontainer: var(--td-gray-color-12); // 色彩 - 次级容器
--td-bg-color-component: var(--td-gray-color-11); // 色彩 - 组件
--td-bg-color-container-active: var(--td-gray-color-12); // 色彩 - 容器 - active
--td-bg-color-secondarycontainer-active: var(--td-gray-color-11); // 色彩 - 次级容器 - active
--td-bg-color-component-active: var(--td-gray-color-10); // 色彩 - 组件 - active
--td-bg-color-component-disabled: var(--td-gray-color-12); // 色彩 - 组件 - disabled
--td-bg-color-secondarycomponent: var(--td-gray-color-10); // 色彩 - 次级组件
--td-bg-color-secondarycomponent-active: var(--td-gray-color-8); // 色彩 - 次级组件 - active
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
--td-bg-color-specialcomponent: transparent;
// 文本颜色
--td-text-color-primary: var(--td-font-white-1); // 色彩-文字-主要
--td-text-color-secondary: var(--td-font-white-2); // 色彩-文字-次要
--td-text-color-placeholder: var(--td-font-white-3); // 色彩-文字-占位符/说明
--td-text-color-disabled: var(--td-font-white-4); // 色彩-文字-禁用
--td-text-color-anti: var(--td-font-white-1); // 色彩-文字-反色
--td-text-color-brand: var(--td-primary-color-8); // 色彩-文字-品牌
--td-text-color-link: var(--td-primary-color-8); // 色彩-文字-链接
// 分割线
--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);
// 基础/下层 投影 hover 使用的组件包括：表格 /
--td-shadow-1: 0 4px 6px rgba(0, 0, 0, 6%), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
--td-shadow-2: 0 8px 10px rgba(0, 0, 0, 12%), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
--td-shadow-3: 0 16px 24px rgba(0, 0, 0, 14%), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
--td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
--td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
--td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
--td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
// table 特定阴影
--td-table-shadow-color: rgba(0, 0, 0, 55%);
// 滚动条颜色
--td-scrollbar-color: rgba(255, 255, 255, 10%);
// 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
--td-scroll-track-color: #333;
}
}
/* ./raw/_radius.less */
page,
.page {
// 圆角
--td-radius-small: 12px;
--td-radius-default: 24px;
--td-radius-large: 36px;
--td-radius-extraLarge: 48px;
--td-radius-round: 999px;
--td-radius-circle: 50%;
}
/* ./raw/_font.less */
page,
.page {
// 字体family token
--td-font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规
--td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体
--td-font-size-link-small: 48px;
--td-font-size-link-medium: 56px;
--td-font-size-link-large: 64px;
--td-font-size-mark-extraSmall: 40px;
--td-font-size-mark-small: 48px;
--td-font-size-mark-medium: 56px;
--td-font-size-mark-large: 64px;
--td-font-size-body-extraSmall: 40px;
--td-font-size-body-small: 48px;
--td-font-size-body-medium: 56px;
--td-font-size-body-large: 64px;
--td-font-size-title-small: 56px;
--td-font-size-title-medium: 64px;
--td-font-size-title-large: 72px;
--td-font-size-title-extraLarge: 80px;
--td-font-size-headline-small: 96px;
--td-font-size-headline-medium: 112px;
--td-font-size-headline-large: 144px;
--td-font-size-display-medium: 192px;
--td-font-size-display-large: 256px;
// 字体行高 token
--td-line-height-link-small: 80px;
--td-line-height-link-medium: 88px;
--td-line-height-link-large: 96px;
--td-line-height-mark-extraSmall: 64px;
--td-line-height-mark-small: 80px;
--td-line-height-mark-medium: 88px;
--td-line-height-mark-large: 96px;
--td-line-height-body-extraSmall: 64px;
--td-line-height-body-small: 80px;
--td-line-height-body-medium: 88px;
--td-line-height-body-large: 96px;
--td-line-height-title-small: 88px;
--td-line-height-title-medium: 96px;
--td-line-height-title-large: 104px;
--td-line-height-title-extraLarge: 112px;
--td-line-height-headline-small: 128px;
--td-line-height-headline-medium: 144px;
--td-line-height-headline-large: 176px;
--td-line-height-display-medium: 224px;
--td-line-height-display-large: 288px;
// font token
--td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);
--td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);
--td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family);
--td-font-mark-extraSmall: 600 var(--td-font-size-mark-extraSmall) / var(--td-line-height-mark-extraSmall)
var(--td-font-family);
--td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family);
--td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family);
--td-font-mark-large: 600 var(--td-font-size-mark-large) / var(--td-line-height-mark-large) var(--td-font-family);
--td-font-body-extraSmall: var(--td-font-size-body-extraSmall) / var(--td-line-height-body-extraSmall)
var(--td-font-family);
--td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family);
--td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family);
--td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family);
--td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family);
--td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium)
var(--td-font-family);
--td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family);
--td-font-title-extraLarge: 600 var(--td-font-size-title-extraLarge) / var(--td-line-height-title-extraLarge)
var(--td-font-family);
--td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small)
var(--td-font-family);
--td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium)
var(--td-font-family);
--td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large)
var(--td-font-family);
--td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium)
var(--td-font-family);
--td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large)
var(--td-font-family);
// 字体大小 token
--td-font-size: 40px;
--td-font-size-xs: var(--td-font-size-body-extraSmall);
--td-font-size-s: var(--td-font-size-body-small);
--td-font-size-base: var(--td-font-size-title-small);
--td-font-size-m: var(--td-font-size-title-medium);
--td-font-size-l: var(--td-font-size-title-large);
--td-font-size-xl: var(--td-font-size-title-extraLarge);
--td-font-size-xxl: var(--td-font-size-headline-large);
}
/* ./raw/_spacer.less */
page,
.page {
// Spacer
--td-spacer: 32px;
--td-spacer-1: 48px; // 间距-小-x
--td-spacer-2: 64px; // 间距-小
--td-spacer-3: 96px; // 间距-中
--td-spacer-4: 128px; // 间距-大
--td-spacer-5: 192px; // 间距-大-x
--td-spacer-6: 320px; // 间距-大-xx
}
/* ./raw/_components.less */
// 部分特殊处理的组件级 token
@media (prefers-color-scheme: light) {
page,
.page {
--td-picker-transparent-color: rgba(255, 255, 255, 0);
--td-switch-dot-disabled-color: var(--td-font-white-1);
--td-switch-loading-color: var(--td-brand-color);
}
}
@media (prefers-color-scheme: dark) {
page,
.page {
--td-button-primary-disabled-color: var(--td-font-white-4);
--td-skeleton-animation-gradient: rgba(255, 255, 255, 6%);
--td-slider-dot-bg-color: var(--td-gray-color-4);
--td-slider-dot-disabled-bg-color: var(--td-gray-color-11);
--td-slider-dot-disabled-border-color: var(--td-gray-color-12);
--td-picker-transparent-color: transparent;
--td-switch-dot-disabled-color: var(--td-font-white-2);
--td-switch-loading-color: var(--td-font-white-1);
--td-progress-circle-inner-bg-color: var(--bg-color-page);
}
}

11
uni_modules/tdesign-uniapp/components/common/style/theme/index.less Normal file
View File

@@ -0,0 +1,11 @@
@import './raw/_light.less';
@import './raw/_dark.less';
@import './raw/_radius.less';
@import './raw/_font.less';
@import './raw/_spacer.less';
@import './raw/_components.less';

30
uni_modules/tdesign-uniapp/components/common/style/theme/raw/_components.less Normal file
View File

@@ -0,0 +1,30 @@
// 部分特殊处理的组件级 token
@media (prefers-color-scheme: light) {
page,
.page {
--td-picker-transparent-color: rgba(255, 255, 255, 0);
--td-switch-dot-disabled-color: var(--td-font-white-1);
--td-switch-loading-color: var(--td-brand-color);
}
}
@media (prefers-color-scheme: dark) {
page,
.page {
--td-button-primary-disabled-color: var(--td-font-white-4);
--td-skeleton-animation-gradient: rgba(255, 255, 255, 6%);
--td-slider-dot-bg-color: var(--td-gray-color-4);
--td-slider-dot-disabled-bg-color: var(--td-gray-color-11);
--td-slider-dot-disabled-border-color: var(--td-gray-color-12);
--td-picker-transparent-color: transparent;
--td-switch-dot-disabled-color: var(--td-font-white-2);
--td-switch-loading-color: var(--td-font-white-1);
--td-progress-circle-inner-bg-color: var(--bg-color-page);
}
}

178
uni_modules/tdesign-uniapp/components/common/style/theme/raw/_dark.less Normal file
View File

@@ -0,0 +1,178 @@
@media (prefers-color-scheme: dark) {
/* #ifdef H5 */
:root,
/* #endif */
page,
.page {
--td-brand-color-1: #1b2f51;
--td-brand-color-2: #173463;
--td-brand-color-3: #143975;
--td-brand-color-4: #103d88;
--td-brand-color-5: #0d429a;
--td-brand-color-6: #054bbe;
--td-brand-color-7: #2667d4;
--td-brand-color-8: #4582e6;
--td-brand-color-9: #699ef5;
--td-brand-color-10: #96bbf8;
--td-primary-color-1: var(--td-brand-color-1);
--td-primary-color-2: var(--td-brand-color-2);
--td-primary-color-3: var(--td-brand-color-3);
--td-primary-color-4: var(--td-brand-color-4);
--td-primary-color-5: var(--td-brand-color-5);
--td-primary-color-6: var(--td-brand-color-6);
--td-primary-color-7: var(--td-brand-color-7);
--td-primary-color-8: var(--td-brand-color-8);
--td-primary-color-9: var(--td-brand-color-9);
--td-primary-color-10: var(--td-brand-color-10);
--td-warning-color-1: #4f2a1d;
--td-warning-color-2: #582f21;
--td-warning-color-3: #733c23;
--td-warning-color-4: #a75d2b;
--td-warning-color-5: #cf6e2d;
--td-warning-color-6: #dc7633;
--td-warning-color-7: #e8935c;
--td-warning-color-8: #ecbf91;
--td-warning-color-9: #eed7bf;
--td-warning-color-10: #f3e9dc;
--td-error-color-1: #472324;
--td-error-color-2: #5e2a2d;
--td-error-color-3: #703439;
--td-error-color-4: #83383e;
--td-error-color-5: #a03f46;
--td-error-color-6: #c64751;
--td-error-color-7: #de6670;
--td-error-color-8: #ec888e;
--td-error-color-9: #edb1b6;
--td-error-color-10: #eeced0;
--td-success-color-1: #193a2a;
--td-success-color-2: #1a4230;
--td-success-color-3: #17533d;
--td-success-color-4: #0d7a55;
--td-success-color-5: #059465;
--td-success-color-6: #43af8a;
--td-success-color-7: #46bf96;
--td-success-color-8: #80d2b6;
--td-success-color-9: #b4e1d3;
--td-success-color-10: #deede8;
--td-gray-color-1: #f3f3f3;
--td-gray-color-2: #eee;
--td-gray-color-3: #e8e8e8;
--td-gray-color-4: #ddd;
--td-gray-color-5: #c6c6c6;
--td-gray-color-6: #a6a6a6;
--td-gray-color-7: #8b8b8b;
--td-gray-color-8: #777;
--td-gray-color-9: #5e5e5e;
--td-gray-color-10: #4b4b4b;
--td-gray-color-11: #383838;
--td-gray-color-12: #2c2c2c;
--td-gray-color-13: #242424;
--td-gray-color-14: #181818;
// 文字 & 图标 颜色
--td-font-white-1: rgba(255, 255, 255, 90%);
--td-font-white-2: rgba(255, 255, 255, 55%);
--td-font-white-3: rgba(255, 255, 255, 35%);
--td-font-white-4: rgba(255, 255, 255, 22%);
--td-font-gray-1: rgba(0, 0, 0, 90%);
--td-font-gray-2: rgba(0, 0, 0, 60%);
--td-font-gray-3: rgba(0, 0, 0, 40%);
--td-font-gray-4: rgba(0, 0, 0, 26%);
// 基础颜色
--td-brand-color: var(--td-primary-color-8); // 色彩-品牌-可操作
--td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
--td-error-color: var(--td-error-color-6); // 色彩-功能-失败
--td-success-color: var(--td-success-color-5); // 色彩-功能-成功
// 基础颜色的扩展 用于 聚焦 / 禁用 / 点击 等状态
--td-brand-color-focus: var(--td-primary-color-1); // focus态，包括鼠标和键盘
--td-brand-color-active: var(--td-primary-color-9); // 点击态
--td-brand-color-disabled: var(--td-primary-color-3); // 禁用态
--td-brand-color-light: var(--td-primary-color-1); // 浅色的选中态
--td-brand-color-light-active: var(--td-primary-color-2); // 浅色的选中态
// 警告色扩展
--td-warning-color-focus: var(--td-warning-color-2);
--td-warning-color-active: var(--td-warning-color-4);
--td-warning-color-disabled: var(--td-warning-color-3);
--td-warning-color-light: var(--td-warning-color-1);
--td-warning-color-light-active: var(--td-warning-color-2);
// 失败/错误色扩展
--td-error-color-focus: var(--td-error-color-2);
--td-error-color-active: var(--td-error-color-5);
--td-error-color-disabled: var(--td-error-color-3);
--td-error-color-light: var(--td-error-color-1);
--td-error-color-light-active: var(--td-error-color-2);
// 成功色扩展
--td-success-color-focus: var(--td-success-color-2);
--td-success-color-active: var(--td-success-color-4);
--td-success-color-disabled: var(--td-success-color-3);
--td-success-color-light: var(--td-success-color-1);
--td-success-color-light-active: var(--td-success-color-2);
// 遮罩
--td-mask-active: rgba(0, 0, 0, 40%); // 遮罩-弹出
--td-mask-disabled: rgba(0, 0, 0, 60%); // 遮罩-禁用
--td-mask-background: rgba(36, 36, 36, 96%); // 二维码遮罩
// 背景色
--td-bg-color-page: var(--td-gray-color-14); // 色彩 - page
--td-bg-color-container: var(--td-gray-color-13); // 色彩 - 容器
--td-bg-color-secondarycontainer: var(--td-gray-color-12); // 色彩 - 次级容器
--td-bg-color-component: var(--td-gray-color-11); // 色彩 - 组件
--td-bg-color-container-active: var(--td-gray-color-12); // 色彩 - 容器 - active
--td-bg-color-secondarycontainer-active: var(--td-gray-color-11); // 色彩 - 次级容器 - active
--td-bg-color-component-active: var(--td-gray-color-10); // 色彩 - 组件 - active
--td-bg-color-component-disabled: var(--td-gray-color-12); // 色彩 - 组件 - disabled
--td-bg-color-secondarycomponent: var(--td-gray-color-10); // 色彩 - 次级组件
--td-bg-color-secondarycomponent-active: var(--td-gray-color-8); // 色彩 - 次级组件 - active
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
--td-bg-color-specialcomponent: transparent;
// 文本颜色
--td-text-color-primary: var(--td-font-white-1); // 色彩-文字-主要
--td-text-color-secondary: var(--td-font-white-2); // 色彩-文字-次要
--td-text-color-placeholder: var(--td-font-white-3); // 色彩-文字-占位符/说明
--td-text-color-disabled: var(--td-font-white-4); // 色彩-文字-禁用
--td-text-color-anti: var(--td-font-white-1); // 色彩-文字-反色
--td-text-color-brand: var(--td-primary-color-8); // 色彩-文字-品牌
--td-text-color-link: var(--td-primary-color-8); // 色彩-文字-链接
// 分割线
--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);
// 基础/下层 投影 hover 使用的组件包括：表格 /
--td-shadow-1: 0 4px 6px rgba(0, 0, 0, 6%), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
--td-shadow-2: 0 8px 10px rgba(0, 0, 0, 12%), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
--td-shadow-3: 0 16px 24px rgba(0, 0, 0, 14%), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
--td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
--td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
--td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
--td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
// table 特定阴影
--td-table-shadow-color: rgba(0, 0, 0, 55%);
// 滚动条颜色
--td-scrollbar-color: rgba(255, 255, 255, 10%);
// 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
--td-scroll-track-color: #333;
}
}

90
uni_modules/tdesign-uniapp/components/common/style/theme/raw/_font.less Normal file
View File

@@ -0,0 +1,90 @@
page,
.page {
// 字体family token
--td-font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规
--td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体
--td-font-size-link-small: 24rpx;
--td-font-size-link-medium: 28rpx;
--td-font-size-link-large: 32rpx;
--td-font-size-mark-extraSmall: 20rpx;
--td-font-size-mark-small: 24rpx;
--td-font-size-mark-medium: 28rpx;
--td-font-size-mark-large: 32rpx;
--td-font-size-body-extraSmall: 20rpx;
--td-font-size-body-small: 24rpx;
--td-font-size-body-medium: 28rpx;
--td-font-size-body-large: 32rpx;
--td-font-size-title-small: 28rpx;
--td-font-size-title-medium: 32rpx;
--td-font-size-title-large: 36rpx;
--td-font-size-title-extraLarge: 40rpx;
--td-font-size-headline-small: 48rpx;
--td-font-size-headline-medium: 56rpx;
--td-font-size-headline-large: 72rpx;
--td-font-size-display-medium: 96rpx;
--td-font-size-display-large: 128rpx;
// 字体行高 token
--td-line-height-link-small: 40rpx;
--td-line-height-link-medium: 44rpx;
--td-line-height-link-large: 48rpx;
--td-line-height-mark-extraSmall: 32rpx;
--td-line-height-mark-small: 40rpx;
--td-line-height-mark-medium: 44rpx;
--td-line-height-mark-large: 48rpx;
--td-line-height-body-extraSmall: 32rpx;
--td-line-height-body-small: 40rpx;
--td-line-height-body-medium: 44rpx;
--td-line-height-body-large: 48rpx;
--td-line-height-title-small: 44rpx;
--td-line-height-title-medium: 48rpx;
--td-line-height-title-large: 52rpx;
--td-line-height-title-extraLarge: 56rpx;
--td-line-height-headline-small: 64rpx;
--td-line-height-headline-medium: 72rpx;
--td-line-height-headline-large: 88rpx;
--td-line-height-display-medium: 112rpx;
--td-line-height-display-large: 144rpx;
// font token
--td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);
--td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);
--td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family);
--td-font-mark-extraSmall: 600 var(--td-font-size-mark-extraSmall) / var(--td-line-height-mark-extraSmall)
var(--td-font-family);
--td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family);
--td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family);
--td-font-mark-large: 600 var(--td-font-size-mark-large) / var(--td-line-height-mark-large) var(--td-font-family);
--td-font-body-extraSmall: var(--td-font-size-body-extraSmall) / var(--td-line-height-body-extraSmall)
var(--td-font-family);
--td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family);
--td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family);
--td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family);
--td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family);
--td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium)
var(--td-font-family);
--td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family);
--td-font-title-extraLarge: 600 var(--td-font-size-title-extraLarge) / var(--td-line-height-title-extraLarge)
var(--td-font-family);
--td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small)
var(--td-font-family);
--td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium)
var(--td-font-family);
--td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large)
var(--td-font-family);
--td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium)
var(--td-font-family);
--td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large)
var(--td-font-family);
// 字体大小 token
--td-font-size: 20rpx;
--td-font-size-xs: var(--td-font-size-body-extraSmall);
--td-font-size-s: var(--td-font-size-body-small);
--td-font-size-base: var(--td-font-size-title-small);
--td-font-size-m: var(--td-font-size-title-medium);
--td-font-size-l: var(--td-font-size-title-large);
--td-font-size-xl: var(--td-font-size-title-extraLarge);
--td-font-size-xxl: var(--td-font-size-headline-large);
}

182
uni_modules/tdesign-uniapp/components/common/style/theme/raw/_light.less Normal file
View File

@@ -0,0 +1,182 @@
@media (prefers-color-scheme: light) {
/* #ifdef H5 */
:root,
/* #endif */
page,
.page {
--td-brand-color-1: #f2f3ff;
--td-brand-color-2: #d9e1ff;
--td-brand-color-3: #b5c7ff;
--td-brand-color-4: #8eabff;
--td-brand-color-5: #618dff;
--td-brand-color-6: #366ef4;
--td-brand-color-7: #0052d9;
--td-brand-color-8: #003cab;
--td-brand-color-9: #002a7c;
--td-brand-color-10: #001a57;
--td-primary-color-1: var(--td-brand-color-1);
--td-primary-color-2: var(--td-brand-color-2);
--td-primary-color-3: var(--td-brand-color-3);
--td-primary-color-4: var(--td-brand-color-4);
--td-primary-color-5: var(--td-brand-color-5);
--td-primary-color-6: var(--td-brand-color-6);
--td-primary-color-7: var(--td-brand-color-7);
--td-primary-color-8: var(--td-brand-color-8);
--td-primary-color-9: var(--td-brand-color-9);
--td-primary-color-10: var(--td-brand-color-10);
--td-warning-color-1: #fff1e9;
--td-warning-color-2: #ffd9c2;
--td-warning-color-3: #ffb98c;
--td-warning-color-4: #fa9550;
--td-warning-color-5: #e37318;
--td-warning-color-6: #be5a00;
--td-warning-color-7: #954500;
--td-warning-color-8: #713300;
--td-warning-color-9: #532300;
--td-warning-color-10: #3b1700;
--td-error-color-1: #fff0ed;
--td-error-color-2: #ffd8d2;
--td-error-color-3: #ffb9b0;
--td-error-color-4: #ff9285;
--td-error-color-5: #f6685d;
--td-error-color-6: #d54941;
--td-error-color-7: #ad352f;
--td-error-color-8: #881f1c;
--td-error-color-9: #68070a;
--td-error-color-10: #490002;
--td-success-color-1: #e3f9e9;
--td-success-color-2: #c6f3d7;
--td-success-color-3: #92dab2;
--td-success-color-4: #56c08d;
--td-success-color-5: #2ba471;
--td-success-color-6: #008858;
--td-success-color-7: #006c45;
--td-success-color-8: #005334;
--td-success-color-9: #003b23;
--td-success-color-10: #002515;
--td-gray-color-1: #f3f3f3;
--td-gray-color-2: #eeeeee;
--td-gray-color-3: #e7e7e7;
--td-gray-color-4: #dcdcdc;
--td-gray-color-5: #c5c5c5;
--td-gray-color-6: #a6a6a6;
--td-gray-color-7: #8b8b8b;
--td-gray-color-8: #777777;
--td-gray-color-9: #5e5e5e;
--td-gray-color-10: #4b4b4b;
--td-gray-color-11: #383838;
--td-gray-color-12: #2c2c2c;
--td-gray-color-13: #242424;
--td-gray-color-14: #181818;
// 文字 & 图标 颜色
--td-font-white-1: rgba(255, 255, 255, 1);
--td-font-white-2: rgba(255, 255, 255, 0.55);
--td-font-white-3: rgba(255, 255, 255, 0.35);
--td-font-white-4: rgba(255, 255, 255, 0.22);
--td-font-gray-1: rgba(0, 0, 0, 0.9);
--td-font-gray-2: rgba(0, 0, 0, 0.6);
--td-font-gray-3: rgba(0, 0, 0, 0.4);
--td-font-gray-4: rgba(0, 0, 0, 0.26);
// 基础颜色
--td-brand-color: var(--td-primary-color-7);
--td-warning-color: var(--td-warning-color-5);
--td-error-color: var(--td-error-color-6);
--td-success-color: var(--td-success-color-5);
// 基础颜色的扩展 用于 聚焦 / 禁用 / 点击 等状态
--td-brand-color-focus: var(--td-primary-color-1);
--td-brand-color-active: var(--td-primary-color-8);
--td-brand-color-disabled: var(--td-primary-color-3);
--td-brand-color-light: var(--td-primary-color-1);
--td-brand-color-light-active: var(--td-primary-color-2);
// 警告色扩展
--td-warning-color-active: var(--td-warning-color-6);
--td-warning-color-disabled: var(--td-warning-color-3);
--td-warning-color-focus: var(--td-warning-color-2);
--td-warning-color-light: var(--td-warning-color-1);
--td-warning-color-light-active: var(--td-warning-color-2);
// 失败/错误色扩展
--td-error-color-focus: var(--td-error-color-2);
--td-error-color-active: var(--td-error-color-7);
--td-error-color-disabled: var(--td-error-color-3);
--td-error-color-light: var(--td-error-color-1);
--td-error-color-light-active: var(--td-error-color-2);
// 成功色扩展
--td-success-color-focus: var(--td-success-color-2);
--td-success-color-active: var(--td-success-color-6);
--td-success-color-disabled: var(--td-success-color-3);
--td-success-color-light: var(--td-success-color-1);
--td-success-color-light-active: var(--td-success-color-2);
// 遮罩
--td-mask-active: rgba(0, 0, 0, 60%); // 遮罩-弹出
--td-mask-disabled: rgba(255, 255, 255, 60%); // 遮罩-禁用
--td-mask-background: rgba(255, 255, 255, 96%); // 二维码遮罩
// 背景色
--td-bg-color-page: var(--td-gray-color-1);
--td-bg-color-container: var(--td-font-white-1);
--td-bg-color-container-active: var(--td-gray-color-3);
--td-bg-color-secondarycontainer: var(--td-gray-color-1);
--td-bg-color-secondarycontainer-active: var(--td-gray-color-4);
--td-bg-color-component: var(--td-gray-color-3);
--td-bg-color-component-active: var(--td-gray-color-6);
--td-bg-color-component-disabled: var(--td-gray-color-2);
--td-bg-color-secondarycomponent: var(--td-gray-color-4);
--td-bg-color-secondarycomponent-active: var(--td-gray-color-6);
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
--td-bg-color-specialcomponent: #fff;
// 文本颜色
--td-text-color-primary: var(--td-font-gray-1);
--td-text-color-secondary: var(--td-font-gray-2);
--td-text-color-placeholder: var(--td-font-gray-3);
--td-text-color-disabled: var(--td-font-gray-4);
--td-text-color-anti: var(--td-font-white-1);
--td-text-color-brand: var(--td-brand-color);
--td-text-color-link: var(--td-brand-color);
// 分割线
--td-border-level-1-color: var(--td-gray-color-3);
--td-component-stroke: var(--td-gray-color-3);
// 边框
--td-border-level-2-color: var(--td-gray-color-4);
--td-component-border: var(--td-gray-color-4);
// 基础/下层 投影 hover 使用的组件包括：表格 /
--td-shadow-1: 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
--td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
--td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%),
0 8px 10px -5px rgba(0, 0, 0, 8%);
--td-shadow-4: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
--td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
--td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
--td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
--td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
// table 特定阴影
--td-table-shadow-color: rgba(0, 0, 0, 8%);
// 滚动条颜色
--td-scrollbar-color: rgba(0, 0, 0, 10%);
// 滚动条悬浮颜色（ hover ）
--td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
// 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
--td-scroll-track-color: #fff;
}
}

10
uni_modules/tdesign-uniapp/components/common/style/theme/raw/_radius.less Normal file
View File

@@ -0,0 +1,10 @@
page,
.page {
// 圆角
--td-radius-small: 6rpx;
--td-radius-default: 12rpx;
--td-radius-large: 18rpx;
--td-radius-extraLarge: 24rpx;
--td-radius-round: 999px;
--td-radius-circle: 50%;
}

11
uni_modules/tdesign-uniapp/components/common/style/theme/raw/_spacer.less Normal file
View File

@@ -0,0 +1,11 @@
page,
.page {
// Spacer
--td-spacer: 16rpx;
--td-spacer-1: 24rpx; // 间距-小-x
--td-spacer-2: 32rpx; // 间距-小
--td-spacer-3: 48rpx; // 间距-中
--td-spacer-4: 64rpx; // 间距-大
--td-spacer-5: 96rpx; // 间距-大-x
--td-spacer-6: 160rpx; // 间距-大-xx
}

13
uni_modules/tdesign-uniapp/components/common/style/utilities/index.css Normal file
View File

@@ -0,0 +1,13 @@
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}