image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-11-10 10:58:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 全面基于CSS Token改造 (#157)

Browse Source 
* 去除冗余的less vars

* 替换less vars为css vars

* 统一css vars前缀
This commit is contained in:
Kerwin Bryant 2022-05-31 19:03:52 +08:00 committed by GitHub
parent 474cd2b6ab
commit 2c3ba03df5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
38 changed files with 499 additions and 497 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -20,6 +20,6 @@ onMounted(() => {
@import '@/style/variables.less'; @import '@/style/variables.less';
#nprogress .bar { #nprogress .bar {
background: @brand-color !important; background: var(--tdvns-brand-color) !important;
} }
</style> </style>

20
src/assets/assets-setting-auto.svg
View File

@ -1,13 +1,13 @@
<svg width="88" height="48" viewBox="0 0 88 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="88" height="48" viewBox="0 0 88 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H88V48H0V0Z" fill="var(--td-component-border)"/> <path d="M0 0H88V48H0V0Z" fill="var(--tdvns-component-border)"/>
<path d="M42.8627 14.0518V16.7601H44.4877V14.0518H42.8627Z" fill="var(--td-text-color-primary)"/> <path d="M42.8627 14.0518V16.7601H44.4877V14.0518H42.8627Z" fill="var(--tdvns-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.3488 23.9824C38.3488 21.0407 40.7335 18.656 43.6752 18.656C46.6168 18.656 49.0015 21.0407 49.0015 23.9824C49.0015 26.9241 46.6168 29.3088 43.6752 29.3088C40.7335 29.3088 38.3488 26.9241 38.3488 23.9824ZM43.6752 20.281C41.6309 20.281 39.9738 21.9382 39.9738 23.9824C39.9738 26.0266 41.6309 27.6838 43.6752 27.6838C45.7194 27.6838 47.3766 26.0266 47.3766 23.9824C47.3766 21.9382 45.7194 20.281 43.6752 20.281Z" fill="var(--td-text-color-primary)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M38.3488 23.9824C38.3488 21.0407 40.7335 18.656 43.6752 18.656C46.6168 18.656 49.0015 21.0407 49.0015 23.9824C49.0015 26.9241 46.6168 29.3088 43.6752 29.3088C40.7335 29.3088 38.3488 26.9241 38.3488 23.9824ZM43.6752 20.281C41.6309 20.281 39.9738 21.9382 39.9738 23.9824C39.9738 26.0266 41.6309 27.6838 43.6752 27.6838C45.7194 27.6838 47.3766 26.0266 47.3766 23.9824C47.3766 21.9382 45.7194 20.281 43.6752 20.281Z" fill="var(--tdvns-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M52.208 26.781H49.5867L47.5262 33.48L49.0794 33.9577L49.5903 32.2968H52.2045L52.7154 33.9577L54.2686 33.48L52.208 26.781ZM51.7047 30.6718L51.0077 28.406H50.787L50.0901 30.6718H51.7047Z" fill="var(--td-text-color-primary)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M52.208 26.781H49.5867L47.5262 33.48L49.0794 33.9577L49.5903 32.2968H52.2045L52.7154 33.9577L54.2686 33.48L52.208 26.781ZM51.7047 30.6718L51.0077 28.406H50.787L50.0901 30.6718H51.7047Z" fill="var(--tdvns-text-color-primary)"/>
<path d="M48.2077 18.3009L50.1225 16.3861L51.2715 17.5351L49.3567 19.4499L48.2077 18.3009Z" fill="var(--td-text-color-primary)"/> <path d="M48.2077 18.3009L50.1225 16.3861L51.2715 17.5351L49.3567 19.4499L48.2077 18.3009Z" fill="var(--tdvns-text-color-primary)"/>
<path d="M53.6057 23.1699H50.8974V24.7949H53.6057V23.1699Z" fill="var(--td-text-color-primary)"/> <path d="M53.6057 23.1699H50.8974V24.7949H53.6057V23.1699Z" fill="var(--tdvns-text-color-primary)"/>
<path d="M44.4877 31.2045V33.9129H42.8627V31.2045H44.4877Z" fill="var(--td-text-color-primary)"/> <path d="M44.4877 31.2045V33.9129H42.8627V31.2045H44.4877Z" fill="var(--tdvns-text-color-primary)"/>
<path d="M37.2279 31.5786L39.1427 29.6638L37.9936 28.5147L36.0788 30.4295L37.2279 31.5786Z" fill="var(--td-text-color-primary)"/> <path d="M37.2279 31.5786L39.1427 29.6638L37.9936 28.5147L36.0788 30.4295L37.2279 31.5786Z" fill="var(--tdvns-text-color-primary)"/>
<path d="M36.453 24.7949H33.7446V23.1699H36.453V24.7949Z" fill="var(--td-text-color-primary)"/> <path d="M36.453 24.7949H33.7446V23.1699H36.453V24.7949Z" fill="var(--tdvns-text-color-primary)"/>
<path d="M36.0788 17.5351L37.9936 19.4499L39.1427 18.3009L37.2279 16.3861L36.0788 17.5351Z" fill="var(--td-text-color-primary)"/> <path d="M36.0788 17.5351L37.9936 19.4499L39.1427 18.3009L37.2279 16.3861L36.0788 17.5351Z" fill="var(--tdvns-text-color-primary)"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

20
src/assets/assets-setting-light.svg
View File

@ -1,13 +1,13 @@
<svg width="88" height="48" viewBox="0 0 88 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="88" height="48" viewBox="0 0 88 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="88" height="48" fill="var(--td-component-border)"/> <rect width="88" height="48" fill="var(--tdvns-component-border)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.9999 20.583C42.1129 20.583 40.5832 22.1127 40.5832 23.9997C40.5832 25.8867 42.1129 27.4163 43.9999 27.4163C45.8869 27.4163 47.4166 25.8867 47.4166 23.9997C47.4166 22.1127 45.8869 20.583 43.9999 20.583ZM39.0832 23.9997C39.0832 21.2843 41.2845 19.083 43.9999 19.083C46.7153 19.083 48.9166 21.2843 48.9166 23.9997C48.9166 26.7151 46.7153 28.9163 43.9999 28.9163C41.2845 28.9163 39.0832 26.7151 39.0832 23.9997Z" fill="var(--td-text-color-primary)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M43.9999 20.583C42.1129 20.583 40.5832 22.1127 40.5832 23.9997C40.5832 25.8867 42.1129 27.4163 43.9999 27.4163C45.8869 27.4163 47.4166 25.8867 47.4166 23.9997C47.4166 22.1127 45.8869 20.583 43.9999 20.583ZM39.0832 23.9997C39.0832 21.2843 41.2845 19.083 43.9999 19.083C46.7153 19.083 48.9166 21.2843 48.9166 23.9997C48.9166 26.7151 46.7153 28.9163 43.9999 28.9163C41.2845 28.9163 39.0832 26.7151 39.0832 23.9997Z" fill="var(--tdvns-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.2499 17.333V14.833H44.7499V17.333H43.2499Z" fill="var(--td-text-color-primary)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M43.2499 17.333V14.833H44.7499V17.333H43.2499Z" fill="var(--tdvns-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.1838 18.7552L49.9513 16.9877L51.0119 18.0483L49.2444 19.8158L48.1838 18.7552Z" fill="var(--td-text-color-primary)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M48.1838 18.7552L49.9513 16.9877L51.0119 18.0483L49.2444 19.8158L48.1838 18.7552Z" fill="var(--tdvns-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M50.6666 23.2497H53.1666V24.7497H50.6666V23.2497Z" fill="var(--td-text-color-primary)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M50.6666 23.2497H53.1666V24.7497H50.6666V23.2497Z" fill="var(--tdvns-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.2444 28.1835L51.0119 29.951L49.9513 31.0117L48.1838 29.2442L49.2444 28.1835Z" fill="var(--td-text-color-primary)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M49.2444 28.1835L51.0119 29.951L49.9513 31.0117L48.1838 29.2442L49.2444 28.1835Z" fill="var(--tdvns-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.7499 30.6663V33.1663H43.2499V30.6663H44.7499Z" fill="var(--td-text-color-primary)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M44.7499 30.6663V33.1663H43.2499V30.6663H44.7499Z" fill="var(--tdvns-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.8162 29.2442L38.0487 31.0117L36.988 29.951L38.7555 28.1835L39.8162 29.2442Z" fill="var(--td-text-color-primary)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M39.8162 29.2442L38.0487 31.0117L36.988 29.951L38.7555 28.1835L39.8162 29.2442Z" fill="var(--tdvns-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.3333 24.7497H34.8333V23.2497H37.3333V24.7497Z" fill="var(--td-text-color-primary)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M37.3333 24.7497H34.8333V23.2497H37.3333V24.7497Z" fill="var(--tdvns-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.7555 19.8158L36.988 18.0483L38.0487 16.9877L39.8162 18.7552L38.7555 19.8158Z" fill="var(--td-text-color-primary)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M38.7555 19.8158L36.988 18.0483L38.0487 16.9877L39.8162 18.7552L38.7555 19.8158Z" fill="var(--tdvns-text-color-primary)"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

2
src/components/color/index.vue
View File

@ -21,7 +21,7 @@ const style = computed(() => {
const { value } = props; const { value } = props;
const { colorList } = store; const { colorList } = store;
return { return {
background: value !== 'dynamic' ? getBrandColor(value, colorList)['@brand-color'] : panelColor, background: value !== 'dynamic' ? getBrandColor(value, colorList)['--td-brand-color'] : panelColor,
}; };
}); });
</script> </script>

4
src/components/product-card/index.vue
View File

@ -108,11 +108,11 @@ const handleClickDelete = (product: CardProductType) => {
margin-bottom: 8px; margin-bottom: 8px;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
} }
&--desc { &--desc {
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
overflow: hidden; overflow: hidden;

22
src/components/result/index.vue
View File

@ -48,20 +48,20 @@ const dynamicComponent = computed(() => {
.result { .result {
&-link { &-link {
color: @brand-color; color: var(--tdvns-brand-color);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: @brand-color; color: var(--tdvns-brand-color);
} }
&:active { &:active {
color: @brand-color; color: var(--tdvns-brand-color);
} }
&--active { &--active {
color: @brand-color; color: var(--tdvns-brand-color);
} }
&:focus { &:focus {
@ -81,23 +81,23 @@ const dynamicComponent = computed(() => {
&-bg-img { &-bg-img {
width: 200px; width: 200px;
color: @brand-color; color: var(--tdvns-brand-color);
} }
&-title { &-title {
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
margin-top: 8px; margin-top: 8px;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
font-size: @font-size-xl; font-size: var(--tdvns-font-size-xl);
line-height: @text-line-height-xl; line-height: var(--tdvns-text-line-height-xl);
} }
&-tip { &-tip {
margin: 8px 0 32px; margin: 8px 0 32px;
font-size: @font-size-base; font-size: var(--tdvns-font-size-base);
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
line-height: @text-line-height-base; line-height: var(--tdvns-text-line-height-base);
} }
} }
</style> </style>

2
src/components/thumbnail/index.vue
View File

@ -32,7 +32,7 @@ const className = computed(() => {
} }
&-circle { &-circle {
border-radius: @border-radius-50; border-radius: var(--tdvns-border-radius-50);
} }
&-layout { &-layout {

10
src/components/trend/index.vue
View File

@ -52,25 +52,25 @@ const iconCls = computed(() => ['trend-icon-container']);
.trend { .trend {
&-container { &-container {
&__up { &__up {
color: @error-color; color: var(--tdvns-error-color);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.trend-icon-container { .trend-icon-container {
background: @error-color-2; background: var(--tdvns-error-color-2);
margin-right: 8px; margin-right: 8px;
} }
} }
&__down { &__down {
color: @success-color; color: var(--tdvns-success-color);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.trend-icon-container { .trend-icon-container {
background: @success-color-2; background: var(--tdvns-success-color-2);
margin-right: 8px; margin-right: 8px;
} }
} }
@ -82,7 +82,7 @@ const iconCls = computed(() => ['trend-icon-container']);
justify-content: center; justify-content: center;
.trend-icon-container { .trend-icon-container {
background: @brand-color-5; background: var(--tdvns-brand-color-5);
margin-right: 8px; margin-right: 8px;
} }
} }

220
src/config/color.ts
View File

@ -27,109 +27,109 @@ export const defaultDarkColor = [
export const COLOR_TOKEN: TColorSeries = { export const COLOR_TOKEN: TColorSeries = {
DEFAULT: { DEFAULT: {
'@brand-color': '#0052D9', '--td-brand-color': '#0052D9',
'@brand-color-1': '#e0ebff', '--td-brand-color-1': '#e0ebff',
'@brand-color-2': '#c0d8ff', '--td-brand-color-2': '#c0d8ff',
'@brand-color-3': '#a1c4ff', '--td-brand-color-3': '#a1c4ff',
'@brand-color-4': '#81b1ff', '--td-brand-color-4': '#81b1ff',
'@brand-color-5': '#5f9bff', '--td-brand-color-5': '#5f9bff',
'@brand-color-6': '#3d87ff', '--td-brand-color-6': '#3d87ff',
'@brand-color-7': '#176eff', '--td-brand-color-7': '#176eff',
'@brand-color-8': '#0052D9', '--td-brand-color-8': '#0052D9',
'@brand-color-9': '#0048cd', '--td-brand-color-9': '#0048cd',
'@brand-color-10': '#0035b5', '--td-brand-color-10': '#0035b5',
}, },
CYAN: { CYAN: {
'@brand-color': '#0594FA', '--td-brand-color': '#0594FA',
'@brand-color-1': '#d7eefe', '--td-brand-color-1': '#d7eefe',
'@brand-color-2': '#aeddfd', '--td-brand-color-2': '#aeddfd',
'@brand-color-3': '#84cafd', '--td-brand-color-3': '#84cafd',
'@brand-color-4': '#58b8fc', '--td-brand-color-4': '#58b8fc',
'@brand-color-5': '#29a4fb', '--td-brand-color-5': '#29a4fb',
'@brand-color-6': '#0594FA', '--td-brand-color-6': '#0594FA',
'@brand-color-7': '#29a4fb', '--td-brand-color-7': '#29a4fb',
'@brand-color-8': '#0594FA', '--td-brand-color-8': '#0594FA',
'@brand-color-9': '#0378df', '--td-brand-color-9': '#0378df',
'@brand-color-10': '#01409b', '--td-brand-color-10': '#01409b',
}, },
GREEN: { GREEN: {
'@brand-color': '#00A870', '--td-brand-color': '#00A870',
'@brand-color-1': '#8dffd9', '--td-brand-color-1': '#8dffd9',
'@brand-color-2': '#00f2a2', '--td-brand-color-2': '#00f2a2',
'@brand-color-3': '#00dc92', '--td-brand-color-3': '#00dc92',
'@brand-color-4': '#00c583', '--td-brand-color-4': '#00c583',
'@brand-color-5': '#00A870', '--td-brand-color-5': '#00A870',
'@brand-color-6': '#009a5d', '--td-brand-color-6': '#009a5d',
'@brand-color-7': '#00c583', '--td-brand-color-7': '#00c583',
'@brand-color-8': '#00A870', '--td-brand-color-8': '#00A870',
'@brand-color-9': '#009a5d', '--td-brand-color-9': '#009a5d',
'@brand-color-10': '#004a14', '--td-brand-color-10': '#004a14',
}, },
ORANGE: { ORANGE: {
'@brand-color': '#ED7B2F', '--td-brand-color': '#ED7B2F',
'@brand-color-1': '#fce5d7', '--td-brand-color-1': '#fce5d7',
'@brand-color-2': '#f8cdaf', '--td-brand-color-2': '#f8cdaf',
'@brand-color-3': '#f4b285', '--td-brand-color-3': '#f4b285',
'@brand-color-4': '#f19659', '--td-brand-color-4': '#f19659',
'@brand-color-5': '#ED7B2F', '--td-brand-color-5': '#ED7B2F',
'@brand-color-6': '#e75510', '--td-brand-color-6': '#e75510',
'@brand-color-7': '#f19659', '--td-brand-color-7': '#f19659',
'@brand-color-8': '#ED7B2F', '--td-brand-color-8': '#ED7B2F',
'@brand-color-9': '#e75510', '--td-brand-color-9': '#e75510',
'@brand-color-10': '#7f0a02', '--td-brand-color-10': '#7f0a02',
}, },
RED: { RED: {
'@brand-color': '#E34D59', '--td-brand-color': '#E34D59',
'@brand-color-1': '#fbe5e7', '--td-brand-color-1': '#fbe5e7',
'@brand-color-2': '#f7ccd0', '--td-brand-color-2': '#f7ccd0',
'@brand-color-3': '#f3b2b8', '--td-brand-color-3': '#f3b2b8',
'@brand-color-4': '#ef989f', '--td-brand-color-4': '#ef989f',
'@brand-color-5': '#ea7b84', '--td-brand-color-5': '#ea7b84',
'@brand-color-6': '#E34D59', '--td-brand-color-6': '#E34D59',
'@brand-color-7': '#ea7b84', '--td-brand-color-7': '#ea7b84',
'@brand-color-8': '#E34D59', '--td-brand-color-8': '#E34D59',
'@brand-color-9': '#e42c3a', '--td-brand-color-9': '#e42c3a',
'@brand-color-10': '#8d0309', '--td-brand-color-10': '#8d0309',
}, },
PINK: { PINK: {
'@brand-color': '#ED49B4', '--td-brand-color': '#ED49B4',
'@brand-color-1': '#fce5f4', '--td-brand-color-1': '#fce5f4',
'@brand-color-2': '#facae9', '--td-brand-color-2': '#facae9',
'@brand-color-3': '#f7aede', '--td-brand-color-3': '#f7aede',
'@brand-color-4': '#f491d2', '--td-brand-color-4': '#f491d2',
'@brand-color-5': '#f172c5', '--td-brand-color-5': '#f172c5',
'@brand-color-6': '#ED49B4', '--td-brand-color-6': '#ED49B4',
'@brand-color-7': '#f172c5', '--td-brand-color-7': '#f172c5',
'@brand-color-8': '#ED49B4', '--td-brand-color-8': '#ED49B4',
'@brand-color-9': '#e80f9d', '--td-brand-color-9': '#e80f9d',
'@brand-color-10': '#8f025e', '--td-brand-color-10': '#8f025e',
}, },
PURPLE: { PURPLE: {
'@brand-color': '#834EC2', '--td-brand-color': '#834EC2',
'@brand-color-1': '#eee6f7', '--td-brand-color-1': '#eee6f7',
'@brand-color-2': '#ddceee', '--td-brand-color-2': '#ddceee',
'@brand-color-3': '#ccb6e6', '--td-brand-color-3': '#ccb6e6',
'@brand-color-4': '#bb9edc', '--td-brand-color-4': '#bb9edc',
'@brand-color-5': '#ab87d5', '--td-brand-color-5': '#ab87d5',
'@brand-color-6': '#9a6fce', '--td-brand-color-6': '#9a6fce',
'@brand-color-7': '#9a6fce', '--td-brand-color-7': '#9a6fce',
'@brand-color-8': '#834EC2', '--td-brand-color-8': '#834EC2',
'@brand-color-9': '#783ac3', '--td-brand-color-9': '#783ac3',
'@brand-color-10': '#4c1397', '--td-brand-color-10': '#4c1397',
}, },
YELLOW: { YELLOW: {
'@brand-color': '#EBB105', '--td-brand-color': '#EBB105',
'@brand-color-1': '#fde9ab', '--td-brand-color-1': '#fde9ab',
'@brand-color-2': '#fbd152', '--td-brand-color-2': '#fbd152',
'@brand-color-3': '#EBB105', '--td-brand-color-3': '#EBB105',
'@brand-color-4': '#dda204', '--td-brand-color-4': '#dda204',
'@brand-color-5': '#ca8d03', '--td-brand-color-5': '#ca8d03',
'@brand-color-6': '#b67803', '--td-brand-color-6': '#b67803',
'@brand-color-7': '#fbd152', '--td-brand-color-7': '#fbd152',
'@brand-color-8': '#EBB105', '--td-brand-color-8': '#EBB105',
'@brand-color-9': '#dda204', '--td-brand-color-9': '#dda204',
'@brand-color-10': '#603100', '--td-brand-color-10': '#603100',
}, },
}; };
@ -180,17 +180,17 @@ export function generateColorMap(theme: string, colorPalette: Array<string>, mod
} }
const colorMap = { const colorMap = {
'@brand-color': colorPalette[brandColorIdx], // 主题色 '--td-brand-color': colorPalette[brandColorIdx], // 主题色
'@brand-color-1': colorPalette[0], // light '--td-brand-color-1': colorPalette[0], // light
'@brand-color-2': colorPalette[1], // focus '--td-brand-color-2': colorPalette[1], // focus
'@brand-color-3': colorPalette[2], // disabled '--td-brand-color-3': colorPalette[2], // disabled
'@brand-color-4': colorPalette[3], '--td-brand-color-4': colorPalette[3],
'@brand-color-5': colorPalette[4], '--td-brand-color-5': colorPalette[4],
'@brand-color-6': colorPalette[5], '--td-brand-color-6': colorPalette[5],
'@brand-color-7': brandColorIdx > 0 ? colorPalette[brandColorIdx - 1] : theme, // hover '--td-brand-color-7': brandColorIdx > 0 ? colorPalette[brandColorIdx - 1] : theme, // hover
'@brand-color-8': colorPalette[brandColorIdx], // 主题色 '--td-brand-color-8': colorPalette[brandColorIdx], // 主题色
'@brand-color-9': brandColorIdx > 8 ? theme : colorPalette[brandColorIdx + 1], // click '--td-brand-color-9': brandColorIdx > 8 ? theme : colorPalette[brandColorIdx + 1], // click
'@brand-color-10': colorPalette[9], '--td-brand-color-10': colorPalette[9],
}; };
return colorMap; return colorMap;
} }
@ -201,17 +201,17 @@ export function insertThemeStylesheet(theme: string, colorMap: TColorToken, mode
const styleSheet = document.createElement('style'); const styleSheet = document.createElement('style');
styleSheet.type = 'text/css'; styleSheet.type = 'text/css';
styleSheet.innerText = `${root}{ styleSheet.innerText = `${root}{
--td-brand-color: ${colorMap['@brand-color']}; --td-brand-color: ${colorMap['--td-brand-color']};
--td-brand-color-1: ${colorMap['@brand-color-1']}; --td-brand-color-1: ${colorMap['--td-brand-color-1']};
--td-brand-color-2: ${colorMap['@brand-color-2']}; --td-brand-color-2: ${colorMap['--td-brand-color-2']};
--td-brand-color-3: ${colorMap['@brand-color-3']}; --td-brand-color-3: ${colorMap['--td-brand-color-3']};
--td-brand-color-4: ${colorMap['@brand-color-4']}; --td-brand-color-4: ${colorMap['--td-brand-color-4']};
--td-brand-color-5: ${colorMap['@brand-color-5']}; --td-brand-color-5: ${colorMap['--td-brand-color-5']};
--td-brand-color-6: ${colorMap['@brand-color-6']}; --td-brand-color-6: ${colorMap['--td-brand-color-6']};
--td-brand-color-7: ${colorMap['@brand-color-7']}; --td-brand-color-7: ${colorMap['--td-brand-color-7']};
--td-brand-color-8: ${colorMap['@brand-color-8']}; --td-brand-color-8: ${colorMap['--td-brand-color-8']};
--td-brand-color-9: ${colorMap['@brand-color-9']}; --td-brand-color-9: ${colorMap['--td-brand-color-9']};
--td-brand-color-10: ${colorMap['@brand-color-10']}; --td-brand-color-10: ${colorMap['--td-brand-color-10']};
}`; }`;
document.head.appendChild(styleSheet); document.head.appendChild(styleSheet);

2
src/layouts/components/Content.vue
View File

@ -30,7 +30,7 @@ const isRefreshing = computed(() => {
.fade-leave-active, .fade-leave-active,
.fade-enter-active { .fade-enter-active {
transition: opacity @anim-duration-slow @anim-time-fn-easing; transition: opacity var(--tdvns-anim-duration-slow) var(--tdvns-anim-time-fn-easing);
} }
.fade-enter, .fade-enter,
.fade-leave-to { .fade-leave-to {

2
src/layouts/components/Footer.vue
View File

@ -10,7 +10,7 @@ import { prefix } from '@/config/global';
@import '@/style/variables'; @import '@/style/variables';
.@{prefix}-footer { .@{prefix}-footer {
color: @text-color-placeholder; color: var(--tdvns-text-color-placeholder);
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
} }

14
src/layouts/components/Header.vue
View File

@ -236,7 +236,7 @@ const navToHelper = () => {
height: 26px; height: 26px;
display: flex; display: flex;
margin-left: 24px; margin-left: 24px;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
.t-logo { .t-logo {
width: 100%; width: 100%;
@ -254,7 +254,7 @@ const navToHelper = () => {
.header-user-account { .header-user-account {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
.t-icon { .t-icon {
margin-left: 4px; margin-left: 4px;
font-size: 16px; font-size: 16px;
@ -262,25 +262,25 @@ const navToHelper = () => {
} }
:deep(.t-head-menu__inner) { :deep(.t-head-menu__inner) {
border-bottom: 1px solid @border-level-1-color; border-bottom: 1px solid var(--tdvns-border-level-1-color);
} }
.t-menu--light { .t-menu--light {
.header-user-account { .header-user-account {
color: @text-color-primary; color: var(--tdvns-text-color-primary);
} }
} }
.t-menu--dark { .t-menu--dark {
.t-head-menu__inner { .t-head-menu__inner {
border-bottom: 1px solid var(--td-gray-color-10); border-bottom: 1px solid var(--tdvns-gray-color-10);
} }
.header-user-account { .header-user-account {
color: rgba(255, 255, 255, 0.55); color: rgba(255, 255, 255, 0.55);
} }
.t-button { .t-button {
--ripple-color: var(--td-gray-color-10) !important; --ripple-color: var(--tdvns-gray-color-10) !important;
&:hover { &:hover {
background: var(--td-gray-color-12) !important; background: var(--tdvns-gray-color-12) !important;
} }
} }
} }

20
src/layouts/components/Notice.vue
View File

@ -88,7 +88,7 @@ const goDetail = () => {
text-align: center; text-align: center;
padding-top: 135px; padding-top: 135px;
font-size: 14px; font-size: 14px;
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
img { img {
width: 63px; width: 63px;
@ -103,10 +103,10 @@ const goDetail = () => {
position: relative; position: relative;
height: 56px; height: 56px;
font-size: 16px; font-size: 16px;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
text-align: center; text-align: center;
line-height: 56px; line-height: 56px;
border-bottom: 1px solid @component-border; border-bottom: 1px solid var(--tdvns-component-border);
.clear-btn { .clear-btn {
position: absolute; position: absolute;
@ -124,7 +124,7 @@ const goDetail = () => {
&-link { &-link {
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
color: @brand-color; color: var(--tdvns-brand-color);
line-height: 48px; line-height: 48px;
cursor: pointer; cursor: pointer;
} }
@ -138,18 +138,18 @@ const goDetail = () => {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
padding: 16px 24px; padding: 16px 24px;
border-radius: @border-radius; border-radius: var(--tdvns-border-radius);
font-size: 14px; font-size: 14px;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
line-height: 22px; line-height: 22px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
transition: background 0.2s ease; transition: background 0.2s ease;
background: @bg-color-container-hover; background: var(--tdvns-bg-color-container-hover);
.msg-content { .msg-content {
color: @brand-color-8; color: var(--tdvns-brand-color-8);
} }
.t-list-item__action { .t-list-item__action {
@ -170,7 +170,7 @@ const goDetail = () => {
} }
.msg-type { .msg-type {
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
} }
.t-list-item__action { .t-list-item__action {
@ -188,7 +188,7 @@ const goDetail = () => {
position: absolute; position: absolute;
right: 24px; right: 24px;
bottom: 16px; bottom: 16px;
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
} }
} }
} }

18
src/layouts/components/Search.vue
View File

@ -60,33 +60,33 @@ const changeSearchFocus = (value: boolean) => {
margin-left: 16px; margin-left: 16px;
.hover-active { .hover-active {
.t-input__inner { .t-input__inner {
background: @bg-color-secondarycontainer; background: var(--tdvns-bg-color-secondarycontainer);
} }
.t-icon { .t-icon {
color: @brand-color !important; color: var(--tdvns-brand-color) !important;
} }
} }
.t-icon { .t-icon {
font-size: 20px !important; font-size: 20px !important;
color: @text-color-primary !important; color: var(--tdvns-text-color-primary) !important;
} }
.header-search { .header-search {
:deep(.t-input) { :deep(.t-input) {
border: none; border: none;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
transition: background @anim-duration-base linear; transition: background var(--tdvns-anim-duration-base) linear;
.t-input__inner { .t-input__inner {
transition: background @anim-duration-base linear; transition: background var(--tdvns-anim-duration-base) linear;
} }
.t-input__inner { .t-input__inner {
background: none; background: none;
} }
&:hover { &:hover {
background: @bg-color-secondarycontainer; background: var(--tdvns-bg-color-secondarycontainer);
.t-input__inner { .t-input__inner {
background: @bg-color-secondarycontainer; background: var(--tdvns-bg-color-secondarycontainer);
} }
} }
} }
@ -95,7 +95,7 @@ const changeSearchFocus = (value: boolean) => {
.t-button { .t-button {
margin: 0 8px; margin: 0 8px;
transition: opacity @anim-duration-base @anim-time-fn-easing; transition: opacity var(--tdvns-anim-duration-base) var(--tdvns-anim-time-fn-easing);
.t-icon { .t-icon {
font-size: 20px; font-size: 20px;
@ -113,7 +113,7 @@ const changeSearchFocus = (value: boolean) => {
.header-search { .header-search {
width: 200px; width: 200px;
transition: width @anim-duration-base @anim-time-fn-easing; transition: width var(--tdvns-anim-duration-base) var(--tdvns-anim-time-fn-easing);
:deep(.t-input) { :deep(.t-input) {
border: 0; border: 0;
&:focus { &:focus {

14
src/layouts/setting.vue
View File

@ -262,12 +262,12 @@ watchEffect(() => {
font-family: PingFang SC; font-family: PingFang SC;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
} }
.setting-link { .setting-link {
cursor: pointer; cursor: pointer;
color: @brand-color; color: var(--tdvns-brand-color);
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -279,9 +279,9 @@ watchEffect(() => {
line-height: 20px; line-height: 20px;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
color: @text-color-placeholder; color: var(--tdvns-text-color-placeholder);
width: 100%; width: 100%;
background: @bg-color-container; background: var(--tdvns-bg-color-container);
} }
.setting-drawer-container { .setting-drawer-container {
@ -306,7 +306,7 @@ watchEffect(() => {
display: inline-flex; display: inline-flex;
max-height: 78px; max-height: 78px;
padding: 8px; padding: 8px;
border-radius: @border-radius; border-radius: var(--tdvns-border-radius);
border: 2px solid #e3e6eb; border: 2px solid #e3e6eb;
> .t-radio-button__label { > .t-radio-button__label {
display: inline-flex; display: inline-flex;
@ -314,7 +314,7 @@ watchEffect(() => {
} }
:deep(.t-is-checked) { :deep(.t-is-checked) {
border: 2px solid @brand-color !important; border: 2px solid var(--tdvns-brand-color) !important;
} }
:deep(.t-form__controls-content) { :deep(.t-form__controls-content) {
@ -330,7 +330,7 @@ watchEffect(() => {
.setting-route-theme { .setting-route-theme {
:deep(.t-form__label) { :deep(.t-form__label) {
min-width: 310px !important; min-width: 310px !important;
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
} }
} }

2
src/pages/dashboard/base/components/overview.vue
View File

@ -194,7 +194,7 @@ const onStokeDataChange = (checkedValues: string[]) => {
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 22px; line-height: 22px;
color: @text-color-placeholder; color: var(--tdvns-text-color-placeholder);
.trend-tag { .trend-tag {
margin-left: 4px; margin-left: 4px;

4
src/pages/dashboard/base/components/rank-list.vue
View File

@ -88,13 +88,13 @@ const getRankClass = (index: number) => {
border-radius: 50%; border-radius: 50%;
color: white; color: white;
font-size: 14px; font-size: 14px;
background-color: @gray-color-5; background-color: var(--tdvns-gray-color-5);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 700; font-weight: 700;
&--top { &--top {
background: @brand-color; background: var(--tdvns-brand-color);
} }
} }
</style> </style>

18
src/pages/dashboard/base/components/top-panel.vue
View File

@ -186,7 +186,7 @@ watch(
> span { > span {
display: inline-block; display: inline-block;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
font-size: 36px; font-size: 36px;
line-height: 44px; line-height: 44px;
} }
@ -208,7 +208,7 @@ watch(
align-items: center; align-items: center;
justify-content: center; justify-content: center;
line-height: 22px; line-height: 22px;
color: @text-color-placeholder; color: var(--tdvns-text-color-placeholder);
} }
&-trend { &-trend {
@ -226,34 +226,34 @@ watch(
justify-content: center; justify-content: center;
width: 56px; width: 56px;
height: 56px; height: 56px;
background: @brand-color-1; background: var(--tdvns-brand-color-1);
border-radius: 50%; border-radius: 50%;
.t-icon { .t-icon {
font-size: 24px; font-size: 24px;
color: @brand-color; color: var(--tdvns-brand-color);
} }
} }
} }
// 针对第一个卡片需要反色处理 // 针对第一个卡片需要反色处理
&--main-color { &--main-color {
background: @brand-color; background: var(--tdvns-brand-color);
color: @text-color-primary; color: var(--tdvns-text-color-primary);
:deep(.t-card__title), :deep(.t-card__title),
.dashboard-item-top span, .dashboard-item-top span,
.dashboard-item-bottom { .dashboard-item-bottom {
color: @text-color-anti; color: var(--tdvns-text-color-anti);
} }
.dashboard-item-block { .dashboard-item-block {
color: @text-color-anti; color: var(--tdvns-text-color-anti);
opacity: 0.6; opacity: 0.6;
} }
.dashboard-item-bottom { .dashboard-item-bottom {
color: @text-color-anti; color: var(--tdvns-text-color-anti);
} }
} }
} }

8
src/pages/dashboard/detail/index.vue
View File

@ -201,14 +201,14 @@ const onMaterialChange = (value: string[]) => {
&.dark { &.dark {
&:hover { &:hover {
background: @gray-color-14; background: var(--tdvns-gray-color-14);
cursor: pointer; cursor: pointer;
} }
} }
&.light { &.light {
&:hover { &:hover {
background: @gray-color-14; background: var(--tdvns-gray-color-14);
cursor: pointer; cursor: pointer;
} }
} }
@ -216,7 +216,7 @@ const onMaterialChange = (value: string[]) => {
&__number { &__number {
font-size: 36px; font-size: 36px;
line-height: 44px; line-height: 44px;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
} }
&__text { &__text {
@ -225,7 +225,7 @@ const onMaterialChange = (value: string[]) => {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 14px; font-size: 14px;
color: @text-color-placeholder; color: var(--tdvns-text-color-placeholder);
text-align: left; text-align: left;
line-height: 18px; line-height: 18px;

20
src/pages/detail/advanced/components/Product.vue
View File

@ -61,8 +61,8 @@ export default defineComponent({
.operator-block { .operator-block {
position: relative; position: relative;
background-color: @bg-color-container; background-color: var(--tdvns-bg-color-container);
border: 1px solid @component-border; border: 1px solid var(--tdvns-component-border);
border-radius: 3px; border-radius: 3px;
.operator-content { .operator-content {
@ -70,8 +70,8 @@ export default defineComponent({
height: 256px; height: 256px;
.operator-title-icon { .operator-title-icon {
background: @brand-color-1; background: var(--tdvns-brand-color-1);
color: @brand-color; color: var(--tdvns-brand-color);
font-size: 56px; font-size: 56px;
padding: 14px; padding: 14px;
border-radius: 100%; border-radius: 100%;
@ -85,7 +85,7 @@ export default defineComponent({
display: inline-block; display: inline-block;
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 24px;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
} }
&-subtitle { &-subtitle {
@ -93,7 +93,7 @@ export default defineComponent({
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
width: 60%; width: 60%;
color: @text-color-placeholder; color: var(--tdvns-text-color-placeholder);
} }
&-tag { &-tag {
@ -111,11 +111,11 @@ export default defineComponent({
svg { svg {
circle { circle {
fill: @brand-color-2; fill: var(--tdvns-brand-color-2);
} }
path { path {
fill: @brand-color; fill: var(--tdvns-brand-color);
} }
} }
} }
@ -130,7 +130,7 @@ export default defineComponent({
width: 60%; width: 60%;
text-align: left; text-align: left;
font-size: 14px; font-size: 14px;
color: @text-color-placeholder; color: var(--tdvns-text-color-placeholder);
} }
&-icon { &-icon {
@ -155,7 +155,7 @@ export default defineComponent({
position: absolute; position: absolute;
bottom: 15px; bottom: 15px;
right: 32px; right: 32px;
color: @text-color-placeholder; color: var(--tdvns-text-color-placeholder);
} }
} }
} }

14
src/pages/detail/advanced/index.less
View File

@ -20,7 +20,7 @@
.product-block-container { .product-block-container {
.t-col-xl-4 + .t-col-xl-4 { .t-col-xl-4 + .t-col-xl-4 {
@media (max-width: @screen-lg-max) { @media (max-width: var(--tdvns-screen-lg-max)) {
.operator-gap { .operator-gap {
margin: 16px 0 0 0; margin: 16px 0 0 0;
} }
@ -34,12 +34,12 @@
align-items: center; align-items: center;
justify-items: center; justify-items: center;
padding: 20px 10px 24px 20px; padding: 20px 10px 24px 20px;
border: dashed 1px @component-border; border: dashed 1px var(--tdvns-component-border);
border-radius: 3px; border-radius: 3px;
.product-sub-icon { .product-sub-icon {
background: @brand-color-1; background: var(--tdvns-brand-color-1);
color: @brand-color; color: var(--tdvns-brand-color);
font-size: 33px; font-size: 33px;
padding: 8px; padding: 8px;
border-radius: 100%; border-radius: 100%;
@ -47,7 +47,7 @@
.product-sub { .product-sub {
font-size: 14px; font-size: 14px;
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
line-height: 22px; line-height: 22px;
@ -58,11 +58,11 @@
svg { svg {
rect { rect {
fill: @brand-color-1; fill: var(--tdvns-brand-color-1);
} }
path { path {
fill: @brand-color; fill: var(--tdvns-brand-color);
} }
} }
} }

28
src/pages/detail/base/index.less
View File

@ -21,21 +21,21 @@
.info-item { .info-item {
padding: 12px 0; padding: 12px 0;
display: flex; display: flex;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
h1 { h1 {
width: 200px; width: 200px;
font-weight: normal; font-weight: normal;
font-size: @font-size-base; font-size: var(--tdvns-font-size-base);
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
text-align: left; text-align: left;
line-height: 22px; line-height: 22px;
@media (max-width: @screen-sm-max) { @media (max-width: var(--tdvns-screen-sm-max)) {
width: 100px; width: 100px;
} }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @media (min-width: var(--tdvns-screen-md-min)) and (max-width: var(--tdvns-screen-md-max)) {
width: 120px; width: 120px;
} }
} }
@ -51,16 +51,16 @@
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: @border-radius-50; border-radius: var(--tdvns-border-radius-50);
background: @success-color-5; background: var(--tdvns-success-color-5);
} }
.inProgress { .inProgress {
color: @success-color-5; color: var(--tdvns-success-color-5);
} }
.pdf { .pdf {
color: @brand-color; color: var(--tdvns-brand-color);
&:hover { &:hover {
cursor: pointer; cursor: pointer;
@ -78,7 +78,7 @@
width: 84px; width: 84px;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
text-align: left; text-align: left;
line-height: 22px; line-height: 22px;
} }
@ -91,16 +91,16 @@
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: @border-radius-50; border-radius: var(--tdvns-border-radius-50);
background: @success-color-5; background: var(--tdvns-success-color-5);
} }
.green { .green {
color: @success-color-5; color: var(--tdvns-success-color-5);
} }
.blue { .blue {
color: @brand-color-8; color: var(--tdvns-brand-color-8);
} }
} }
} }

16
src/pages/detail/secondary/index.less
View File

@ -1,9 +1,9 @@
@import '@/style/variables.less'; @import '@/style/variables.less';
.secondary-notification { .secondary-notification {
background-color: @bg-color-container; background-color: var(--tdvns-bg-color-container);
border-radius: @border-radius; border-radius: var(--tdvns-border-radius);
padding: @spacer-3 @spacer-4; padding: var(--tdvns-spacer-3) var(--tdvns-spacer-4);
.t-tabs__content { .t-tabs__content {
padding-top: 0; padding-top: 0;
@ -18,7 +18,7 @@
padding: 13px 24px 13px 0; padding: 13px 24px 13px 0;
&:hover { &:hover {
background-color: @bg-color-container-hover; background-color: var(--tdvns-bg-color-container-hover);
.msg-date { .msg-date {
display: none; display: none;
@ -36,7 +36,7 @@
} }
.t-tag.t-size-s { .t-tag.t-size-s {
margin-right: @spacer-1; margin-right: var(--tdvns-spacer-1);
margin-left: 0; margin-left: 0;
} }
} }
@ -44,7 +44,7 @@
.content { .content {
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-size: 14px; font-size: 14px;
color: @text-color-placeholder; color: var(--tdvns-text-color-placeholder);
text-align: left; text-align: left;
line-height: 22px; line-height: 22px;
overflow: hidden; overflow: hidden;
@ -53,7 +53,7 @@
} }
.unread { .unread {
color: @brand-color-8; color: var(--tdvns-brand-color-8);
} }
.msg-action { .msg-action {
@ -68,6 +68,6 @@
min-height: 443px; min-height: 443px;
padding-top: 170px; padding-top: 170px;
text-align: center; text-align: center;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
} }
} }

10
src/pages/form/base/index.less
View File

@ -4,10 +4,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: @bg-color-container; background-color: var(--tdvns-bg-color-container);
padding: 0 32px 134px; padding: 0 32px 134px;
@media (max-width: @screen-sm-max) { @media (max-width: var(--tdvns-screen-sm-max)) {
padding: 0 32px 67px; padding: 0 32px 67px;
.form-basic-container-title { .form-basic-container-title {
@ -21,7 +21,7 @@
.form-basic-container-title { .form-basic-container-title {
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
margin: 64px 0 32px; margin: 64px 0 32px;
} }
} }
@ -34,7 +34,7 @@
justify-content: center; justify-content: center;
padding-top: 30px; padding-top: 30px;
padding-bottom: 28px; padding-bottom: 28px;
background-color: @bg-color-component; background-color: var(--tdvns-bg-color-component);
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
@ -48,7 +48,7 @@
.form-submit-upload-span { .form-submit-upload-span {
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
color: @text-color-placeholder; color: var(--tdvns-text-color-placeholder);
padding-top: 8px; padding-top: 8px;
display: inline-block; display: inline-block;
} }

2
src/pages/form/step/index.less
View File

@ -1,7 +1,7 @@
@import '@/style/variables'; @import '@/style/variables';
.form-step-container { .form-step-container {
background-color: @bg-color-container; background-color: var(--tdvns-bg-color-container);
.t-card { .t-card {
padding: 8px; padding: 8px;

2
src/pages/list/base/index.vue
View File

@ -210,7 +210,7 @@ const getContainer = () => {
.selected-count { .selected-count {
display: inline-block; display: inline-block;
margin-left: 8px; margin-left: 8px;
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
} }
} }

4
src/pages/list/components/CommonTable.vue
View File

@ -276,9 +276,9 @@ const getContainer = () => {
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/variables.less'; @import '@/style/variables.less';
.list-common-table { .list-common-table {
background-color: @bg-color-container; background-color: var(--tdvns-bg-color-container);
padding: 30px 32px; padding: 30px 32px;
border-radius: @border-radius; border-radius: var(--tdvns-border-radius);
.table-container { .table-container {
margin-top: 30px; margin-top: 30px;

6
src/pages/list/tree/index.vue
View File

@ -45,8 +45,8 @@ const onInput = () => {
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/variables.less'; @import '@/style/variables.less';
.table-tree-container { .table-tree-container {
background-color: @bg-color-container; background-color: var(--tdvns-bg-color-container);
border-radius: @border-radius; border-radius: var(--tdvns-border-radius);
.t-tree { .t-tree {
margin-top: 24px; margin-top: 24px;
@ -64,7 +64,7 @@ const onInput = () => {
} }
.list-tree-content { .list-tree-content {
border-left: 1px solid @border-level-1-color; border-left: 1px solid var(--tdvns-border-level-1-color);
overflow: auto; overflow: auto;
} }
</style> </style>

2
src/pages/login/components/Header.vue
View File

@ -44,7 +44,7 @@ const navToHelper = () => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
color: @text-color-primary; color: var(--tdvns-text-color-primary);
.logo { .logo {
width: 188px; width: 188px;

26
src/pages/login/index.less
View File

@ -9,7 +9,7 @@
.dark { .dark {
&.login-wrapper { &.login-wrapper {
background-color: @bg-color-page; background-color: var(--tdvns-bg-color-page);
background-image: url('@/assets/assets-login-bg-black.png'); background-image: url('@/assets/assets-login-bg-black.png');
} }
} }
@ -35,7 +35,7 @@
.title { .title {
font-size: 36px; font-size: 36px;
line-height: 44px; line-height: 44px;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
margin-top: 4px; margin-top: 4px;
&.margin-no { &.margin-no {
@ -52,11 +52,11 @@
font-size: 14px; font-size: 14px;
&:first-child { &:first-child {
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
} }
&:last-child { &:last-child {
color: @text-color-primary; color: var(--tdvns-text-color-primary);
cursor: pointer; cursor: pointer;
} }
} }
@ -76,13 +76,13 @@
justify-content: space-between; justify-content: space-between;
.tip { .tip {
color: @text-color-primary; color: var(--tdvns-text-color-primary);
} }
.refresh { .refresh {
display: flex; display: flex;
align-items: center; align-items: center;
color: @brand-color; color: var(--tdvns-brand-color);
.t-icon { .t-icon {
font-size: 14px; font-size: 14px;
@ -116,11 +116,11 @@
} }
:deep(.t-checkbox__label) { :deep(.t-checkbox__label) {
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
} }
span { span {
color: @brand-color; color: var(--tdvns-brand-color);
&:hover { &:hover {
cursor: pointer; cursor: pointer;
@ -154,7 +154,7 @@
.tip { .tip {
font-size: 14px; font-size: 14px;
color: @brand-color-8; color: var(--tdvns-brand-color-8);
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -171,7 +171,7 @@
display: block; display: block;
width: 1px; width: 1px;
height: 12px; height: 12px;
background: @gray-color-3; background: var(--tdvns-gray-color-3);
margin-left: 14px; margin-left: 14px;
} }
} }
@ -179,12 +179,12 @@
.check-container { .check-container {
font-size: 14px; font-size: 14px;
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
.tip { .tip {
float: right; float: right;
font-size: 14px; font-size: 14px;
color: @brand-color-8; color: var(--tdvns-brand-color-8);
} }
} }
@ -193,7 +193,7 @@
position:absolute; position:absolute;
left: 5%; left: 5%;
bottom: 64px; bottom: 64px;
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
} }
@media screen and (max-height: 700px) { @media screen and (max-height: 700px) {

6
src/pages/result/browser-incompatible/index.vue
View File

@ -37,7 +37,7 @@ import Thumbnail from '@/components/thumbnail/index.vue';
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
} }
.recommend-container { .recommend-container {
@ -48,8 +48,8 @@ import Thumbnail from '@/components/thumbnail/index.vue';
top: 175px; top: 175px;
padding: 24px 48px; padding: 24px 48px;
width: 640px; width: 640px;
background: @bg-color-container; background: var(--tdvns-bg-color-container);
box-shadow: 0px 1px 2px @shadow-1; box-shadow: 0px 1px 2px var(--tdvns-shadow-1);
border-radius: 3px; border-radius: 3px;
} }

6
src/pages/result/fail/index.vue
View File

@ -25,13 +25,13 @@ export default {
height: 75vh; height: 75vh;
&-icon { &-icon {
font-size: 64px; font-size: 64px;
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
} }
&-title { &-title {
margin-top: 16px; margin-top: 16px;
font-size: 20px; font-size: 20px;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
text-align: center; text-align: center;
line-height: 22px; line-height: 22px;
font-weight: 500; font-weight: 500;
@ -40,7 +40,7 @@ export default {
&-describe { &-describe {
margin: 8px 0 32px; margin: 8px 0 32px;
font-size: 14px; font-size: 14px;
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
line-height: 22px; line-height: 22px;
} }
} }

6
src/pages/result/success/index.vue
View File

@ -26,13 +26,13 @@ export default {
&-icon { &-icon {
font-size: 64px; font-size: 64px;
color: @success-color; color: var(--tdvns-success-color);
} }
&-title { &-title {
margin-top: 16px; margin-top: 16px;
font-size: 20px; font-size: 20px;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
text-align: center; text-align: center;
line-height: 22px; line-height: 22px;
font-weight: 500; font-weight: 500;
@ -41,7 +41,7 @@ export default {
&-describe { &-describe {
margin: 8px 0 32px; margin: 8px 0 32px;
font-size: 14px; font-size: 14px;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
line-height: 22px; line-height: 22px;
} }
} }

26
src/pages/user/index.less
View File

@ -9,10 +9,10 @@
padding: 28px 32px; padding: 28px 32px;
line-height: 28px; line-height: 28px;
font-size: 20px; font-size: 20px;
background: @bg-color-container; background: var(--tdvns-bg-color-container);
color: @text-color-primary; color: var(--tdvns-text-color-primary);
text-align: left; text-align: left;
border-radius: @border-radius; border-radius: var(--tdvns-border-radius);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -37,7 +37,7 @@
.contract { .contract {
width: 340px; width: 340px;
height: 88px; height: 88px;
border-radius: @border-radius; border-radius: var(--tdvns-border-radius);
margin: 8px 0; margin: 8px 0;
&-title { &-title {
@ -47,7 +47,7 @@
line-height: 24px; line-height: 24px;
margin: 20px 0 6px; margin: 20px 0 6px;
font-size: 14px; font-size: 14px;
color: @text-color-placeholder; color: var(--tdvns-text-color-placeholder);
} }
&-detail { &-detail {
@ -56,7 +56,7 @@
overflow: hidden; overflow: hidden;
line-height: 40px; line-height: 40px;
font-size: 14px; font-size: 14px;
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
} }
} }
@ -67,9 +67,9 @@
.user-intro { .user-intro {
padding: 32px 24px; padding: 32px 24px;
background: @brand-color; background: var(--tdvns-brand-color);
border-radius: @border-radius; border-radius: var(--tdvns-border-radius);
color: @text-color-primary; color: var(--tdvns-text-color-primary);
.name { .name {
line-height: 37px; line-height: 37px;
@ -88,7 +88,7 @@
.user-info { .user-info {
line-height: 24px; line-height: 24px;
font-size: 14px; font-size: 14px;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
.hiredate, .hiredate,
.del, .del,
@ -109,7 +109,7 @@
.product-container { .product-container {
margin-top: 16px; margin-top: 16px;
border-radius: @border-radius; border-radius: var(--tdvns-border-radius);
.content { .content {
width: 100%; width: 100%;
@ -123,8 +123,8 @@
.content-container { .content-container {
margin-top: 16px; margin-top: 16px;
background: @bg-color-container; background: var(--tdvns-bg-color-container);
border-radius: @border-radius; border-radius: var(--tdvns-border-radius);
} }
.user-team { .user-team {

22
src/style/index.less
View File

@ -3,16 +3,16 @@
@import './theme/index.less'; @import './theme/index.less';
body { body {
color: @text-color-secondary; color: var(--tdvns-text-color-secondary);
font-family: -apple-system, BlinkMacSystemFont, @font-family; font-family: -apple-system, BlinkMacSystemFont, var(--tdvns-font-family);
font-size: @font-size-base; font-size: var(--tdvns-font-size-base);
line-height: 1.5; line-height: 1.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
padding: 0; padding: 0;
} }
pre { pre {
font-family: @font-family; font-family: var(--tdvns-font-family);
} }
ul, ul,
@ -41,22 +41,22 @@ p {
} }
.t-button-link { .t-button-link {
color: @brand-color; color: var(--tdvns-brand-color);
text-decoration: none; text-decoration: none;
margin-right: @spacer-3; margin-right: var(--tdvns-spacer-3);
cursor: pointer; cursor: pointer;
transition: color @anim-duration-base @anim-time-fn-easing; transition: color var(--tdvns-anim-duration-base) var(--tdvns-anim-time-fn-easing);
&:hover { &:hover {
color: @brand-color-hover; color: var(--tdvns-brand-color-hover);
} }
&:active { &:active {
color: @brand-color-active; color: var(--tdvns-brand-color-active);
} }
&--active { &--active {
color: @brand-color-active; color: var(--tdvns-brand-color-active);
} }
&:focus { &:focus {
@ -69,7 +69,7 @@ p {
} }
.t-button + .t-button { .t-button + .t-button {
margin-left: @spacer; margin-left: var(--tdvns-spacer);
} }
.container-base-margin-top { .container-base-margin-top {

24
src/style/layout.less
View File

@ -8,7 +8,7 @@
} }
.t-button + .t-button { .t-button + .t-button {
margin-left: @spacer; margin-left: var(--tdvns-spacer);
} }
.t-layout.t-layout--with-sider { .t-layout.t-layout--with-sider {
@ -25,13 +25,13 @@
} }
} }
.t-default-menu.t-menu--dark { .t-default-menu.t-menu--dark {
background: var(--td-gray-color-13); background: var(--tdvns-gray-color-13);
} }
.t-default-menu:not(.t-menu--dark) .t-menu__item.t-is-active:not(.t-is-opened) { .t-default-menu:not(.t-menu--dark) .t-menu__item.t-is-active:not(.t-is-opened) {
background-color: @brand-color-1; background-color: var(--tdvns-brand-color-1);
color: @brand-color; color: var(--tdvns-brand-color);
.t-icon { .t-icon {
color: @brand-color; color: var(--tdvns-brand-color);
} }
} }
@ -55,7 +55,7 @@
} }
&-content-layout { &-content-layout {
padding: @spacer-3; padding: var(--tdvns-spacer-3);
} }
&-layout { &-layout {
@ -68,13 +68,13 @@
z-index: 100; z-index: 100;
} }
&-tabs-nav + .@{prefix}-content-layout { &-tabs-nav + .@{prefix}-content-layout {
padding-top: @spacer-3; padding-top: var(--tdvns-spacer-3);
} }
} }
&-footer-layout { &-footer-layout {
padding: 0; padding: 0;
margin-bottom: @spacer-2; margin-bottom: var(--tdvns-spacer-2);
} }
// slideBar // slideBar
@ -135,12 +135,12 @@
padding: 0 24px; padding: 0 24px;
height: 32px; height: 32px;
width: 100%; width: 100%;
color: @text-color-primary; color: var(--tdvns-text-color-primary);
} }
&-logo-normal { &-logo-normal {
color: @brand-color; color: var(--tdvns-brand-color);
font-size: @font-size-l; font-size: var(--tdvns-font-size-l);
transition: all 0.3s; transition: all 0.3s;
} }
} }
@ -172,7 +172,7 @@
} }
.version-container { .version-container {
color: @text-color-primary; color: var(--tdvns-text-color-primary);
opacity: 0.4; opacity: 0.4;
} }

368
src/style/variables.less
View File

@ -1,255 +1,257 @@
/** 公共前缀 */ /** 公共前缀 */
@prefix: tdesign-starter; @prefix: tdesign-starter;
:root {
/* 颜色色板 */ /* 颜色色板 */
@brand-color-1: var(--td-brand-color-1); --tdvns-brand-color-1: var(--td-brand-color-1);
@brand-color-2: var(--td-brand-color-2); --tdvns-brand-color-2: var(--td-brand-color-2);
@brand-color-3: var(--td-brand-color-3); --tdvns-brand-color-3: var(--td-brand-color-3);
@brand-color-4: var(--td-brand-color-4); --tdvns-brand-color-4: var(--td-brand-color-4);
@brand-color-5: var(--td-brand-color-5); --tdvns-brand-color-5: var(--td-brand-color-5);
@brand-color-6: var(--td-brand-color-6); --tdvns-brand-color-6: var(--td-brand-color-6);
@brand-color-7: var(--td-brand-color-7); --tdvns-brand-color-7: var(--td-brand-color-7);
@brand-color-8: var(--td-brand-color-8); --tdvns-brand-color-8: var(--td-brand-color-8);
@brand-color-9: var(--td-brand-color-9); --tdvns-brand-color-9: var(--td-brand-color-9);
@brand-color-10: var(--td-brand-color-10); --tdvns-brand-color-10: var(--td-brand-color-10);
@warning-color-1: var(--td-warning-color-1); --tdvns-warning-color-1: var(--td-warning-color-1);
@warning-color-2: var(--td-warning-color-2); --tdvns-warning-color-2: var(--td-warning-color-2);
@warning-color-3: var(--td-warning-color-3); --tdvns-warning-color-3: var(--td-warning-color-3);
@warning-color-4: var(--td-warning-color-4); --tdvns-warning-color-4: var(--td-warning-color-4);
@warning-color-5: var(--td-warning-color-5); --tdvns-warning-color-5: var(--td-warning-color-5);
@warning-color-6: var(--td-warning-color-6); --tdvns-warning-color-6: var(--td-warning-color-6);
@warning-color-7: var(--td-warning-color-7); --tdvns-warning-color-7: var(--td-warning-color-7);
@warning-color-8: var(--td-warning-color-8); --tdvns-warning-color-8: var(--td-warning-color-8);
@warning-color-9: var(--td-warning-color-9); --tdvns-warning-color-9: var(--td-warning-color-9);
@warning-color-10: var(--td-warning-color-10); --tdvns-warning-color-10: var(--td-warning-color-10);
@error-color-1: var(--td-error-color-1); --tdvns-error-color-1: var(--td-error-color-1);
@error-color-2: var(--td-error-color-2); --tdvns-error-color-2: var(--td-error-color-2);
@error-color-3: var(--td-error-color-3); --tdvns-error-color-3: var(--td-error-color-3);
@error-color-4: var(--td-error-color-4); --tdvns-error-color-4: var(--td-error-color-4);
@error-color-5: var(--td-error-color-5); --tdvns-error-color-5: var(--td-error-color-5);
@error-color-6: var(--td-error-color-6); --tdvns-error-color-6: var(--td-error-color-6);
@error-color-7: var(--td-error-color-7); --tdvns-error-color-7: var(--td-error-color-7);
@error-color-8: var(--td-error-color-8); --tdvns-error-color-8: var(--td-error-color-8);
@error-color-9: var(--td-error-color-9); --tdvns-error-color-9: var(--td-error-color-9);
@error-color-10: var(--td-error-color-10); --tdvns-error-color-10: var(--td-error-color-10);
@success-color-1: var(--td-success-color-1); --tdvns-success-color-1: var(--td-success-color-1);
@success-color-2: var(--td-success-color-2); --tdvns-success-color-2: var(--td-success-color-2);
@success-color-3: var(--td-success-color-3); --tdvns-success-color-3: var(--td-success-color-3);
@success-color-4: var(--td-success-color-4); --tdvns-success-color-4: var(--td-success-color-4);
@success-color-5: var(--td-success-color-5); --tdvns-success-color-5: var(--td-success-color-5);
@success-color-6: var(--td-success-color-6); --tdvns-success-color-6: var(--td-success-color-6);
@success-color-7: var(--td-success-color-7); --tdvns-success-color-7: var(--td-success-color-7);
@success-color-8: var(--td-success-color-8); --tdvns-success-color-8: var(--td-success-color-8);
@success-color-9: var(--td-success-color-9); --tdvns-success-color-9: var(--td-success-color-9);
@success-color-10: var(--td-success-color-10); --tdvns-success-color-10: var(--td-success-color-10);
@gray-color-1: var(--td-gray-color-1); --tdvns-gray-color-1: var(--td-gray-color-1);
@gray-color-2: var(--td-gray-color-2); --tdvns-gray-color-2: var(--td-gray-color-2);
@gray-color-3: var(--td-gray-color-3); --tdvns-gray-color-3: var(--td-gray-color-3);
@gray-color-4: var(--td-gray-color-4); --tdvns-gray-color-4: var(--td-gray-color-4);
@gray-color-5: var(--td-gray-color-5); --tdvns-gray-color-5: var(--td-gray-color-5);
@gray-color-6: var(--td-gray-color-6); --tdvns-gray-color-6: var(--td-gray-color-6);
@gray-color-7: var(--td-gray-color-7); --tdvns-gray-color-7: var(--td-gray-color-7);
@gray-color-8: var(--td-gray-color-8); --tdvns-gray-color-8: var(--td-gray-color-8);
@gray-color-9: var(--td-gray-color-9); --tdvns-gray-color-9: var(--td-gray-color-9);
@gray-color-10: var(--td-gray-color-10); --tdvns-gray-color-10: var(--td-gray-color-10);
@gray-color-11: var(--td-gray-color-11); --tdvns-gray-color-11: var(--td-gray-color-11);
@gray-color-12: var(--td-gray-color-12); --tdvns-gray-color-12: var(--td-gray-color-12);
@gray-color-13: var(--td-gray-color-13); --tdvns-gray-color-13: var(--td-gray-color-13);
@gray-color-14: var(--td-gray-color-14); --tdvns-gray-color-14: var(--td-gray-color-14);
/* 文字 & 图标 颜色 */ /* 文字 & 图标 颜色 */
@font-white-1: var(--td-font-white-1); --tdvns-font-white-1: var(--td-font-white-1);
@font-white-2: var(--td-font-white-2); --tdvns-font-white-2: var(--td-font-white-2);
@font-white-3: var(--td-font-white-3); --tdvns-font-white-3: var(--td-font-white-3);
@font-white-4: var(--td-font-white-4); --tdvns-font-white-4: var(--td-font-white-4);
@font-gray-1: var(--td-font-gray-1); --tdvns-font-gray-1: var(--td-font-gray-1);
@font-gray-2: var(--td-font-gray-2); --tdvns-font-gray-2: var(--td-font-gray-2);
@font-gray-3: var(--td-font-gray-3); --tdvns-font-gray-3: var(--td-font-gray-3);
@font-gray-4: var(--td-font-gray-4); --tdvns-font-gray-4: var(--td-font-gray-4);
/* 基础颜色 */ /* 基础颜色 */
@brand-color: var(--td-brand-color); // 色彩-品牌-可操作 --tdvns-brand-color: var(--td-brand-color); // 色彩-品牌-可操作
@warning-color: var(--td-warning-color); // 色彩-功能-警告 --tdvns-warning-color: var(--td-warning-color); // 色彩-功能-警告
@error-color: var(--td-error-color); // 色彩-功能-失败 --tdvns-error-color: var(--td-error-color); // 色彩-功能-失败
@success-color: var(--td-success-color); // 色彩-功能-成功 --tdvns-success-color: var(--td-success-color); // 色彩-功能-成功
// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态 // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
@brand-color-hover: var(--td-brand-color-hover); // hover态 --tdvns-brand-color-hover: var(--td-brand-color-hover); // hover态
@brand-color-focus: var(--td-brand-color-focus); // focus态，包括鼠标和键盘 --tdvns-brand-color-focus: var(--td-brand-color-focus); // focus态，包括鼠标和键盘
@brand-color-active: var(--td-brand-color-active); // 点击态 --tdvns-brand-color-active: var(--td-brand-color-active); // 点击态
@brand-color-disabled: var(--td-brand-color-disabled); // 禁用态 --tdvns-brand-color-disabled: var(--td-brand-color-disabled); // 禁用态
@brand-color-light: var(--td-brand-color-light); // 浅色的选中态 --tdvns-brand-color-light: var(--td-brand-color-light); // 浅色的选中态
// 警告色扩展 // 警告色扩展
@warning-color-hover: var(--td-warning-color-hover); --tdvns-warning-color-hover: var(--td-warning-color-hover);
@warning-color-focus: var(--td-warning-color-focus); --tdvns-warning-color-focus: var(--td-warning-color-focus);
@warning-color-active: var(--td-warning-color-active); --tdvns-warning-color-active: var(--td-warning-color-active);
@warning-color-disabled: var(--td-warning-color-disabled); --tdvns-warning-color-disabled: var(--td-warning-color-disabled);
@warning-color-light: var(--td-warning-color-light); --tdvns-warning-color-light: var(--td-warning-color-light);
// 失败/错误色扩展 // 失败/错误色扩展
@error-color-hover: var(--td-error-color-hover); --tdvns-error-color-hover: var(--td-error-color-hover);
@error-color-focus: var(--td-error-color-focus); --tdvns-error-color-focus: var(--td-error-color-focus);
@error-color-active: var(--td-error-color-active); --tdvns-error-color-active: var(--td-error-color-active);
@error-color-disabled: var(--td-error-color-disabled); --tdvns-error-color-disabled: var(--td-error-color-disabled);
@error-color-light: var(--td-error-color-light); --tdvns-error-color-light: var(--td-error-color-light);
// 成功色扩展 // 成功色扩展
@success-color-hover: var(--td-success-color-hover); --tdvns-success-color-hover: var(--td-success-color-hover);
@success-color-focus: var(--td-success-color-focus); --tdvns-success-color-focus: var(--td-success-color-focus);
@success-color-active: var(--td-success-color-active); --tdvns-success-color-active: var(--td-success-color-active);
@success-color-disabled: var(--td-success-color-disabled); --tdvns-success-color-disabled: var(--td-success-color-disabled);
@success-color-light: var(--td-success-color-light); --tdvns-success-color-light: var(--td-success-color-light);
// 遮罩 // 遮罩
@mask-active: var(--td-mask-active); // 遮罩-弹出 --tdvns-mask-active: var(--td-mask-active); // 遮罩-弹出
@mask-disabled: var(--td-mask-disabled); // 遮罩-禁用 --tdvns-mask-disabled: var(--td-mask-disabled); // 遮罩-禁用
// 背景色 // 背景色
@bg-color-page: var(--td-bg-color-page); // 色彩 - page --tdvns-bg-color-page: var(--td-bg-color-page); // 色彩 - page
@bg-color-container: var(--td-bg-color-container); // 色彩 - 容器 --tdvns-bg-color-container: var(--td-bg-color-container); // 色彩 - 容器
@bg-color-container-hover: var(--td-bg-color-container-hover); // 色彩 - 容器 - hover --tdvns-bg-color-container-hover: var(--td-bg-color-container-hover); // 色彩 - 容器 - hover
@bg-color-container-active: var(--td-bg-color-container-active); // 色彩 - 容器 - active --tdvns-bg-color-container-active: var(--td-bg-color-container-active); // 色彩 - 容器 - active
@bg-color-container-select: var(--td-bg-color-container-select); // 色彩 - 容器 - select --tdvns-bg-color-container-select: var(--td-bg-color-container-select); // 色彩 - 容器 - select
@bg-color-secondarycontainer: var(--td-bg-color-secondarycontainer); // 色彩 - 次级容器 --tdvns-bg-color-secondarycontainer: var(--td-bg-color-secondarycontainer); // 色彩 - 次级容器
@bg-color-secondarycontainer-hover: var(--td-bg-color-secondarycontainer-hover); // 色彩 - 次级容器 - hover --tdvns-bg-color-secondarycontainer-hover: var(--td-bg-color-secondarycontainer-hover); // 色彩 - 次级容器 - hover
@bg-color-secondarycontainer-active: var(--td-bg-color-secondarycontainer-active); // 色彩 - 次级容器 - active --tdvns-bg-color-secondarycontainer-active: var(--td-bg-color-secondarycontainer-active); // 色彩 - 次级容器 - active
@bg-color-component: var(--td-bg-color-component); // 色彩 - 组件 --tdvns-bg-color-component: var(--td-bg-color-component); // 色彩 - 组件
@bg-color-component-hover: var(--td-bg-color-component-hover); // 色彩 - 组件 - hover --tdvns-bg-color-component-hover: var(--td-bg-color-component-hover); // 色彩 - 组件 - hover
@bg-color-component-active: var(--td-bg-color-component-active); // 色彩 - 组件 - active --tdvns-bg-color-component-active: var(--td-bg-color-component-active); // 色彩 - 组件 - active
@bg-color-component-disabled: var(--td-bg-color-component-disabled); // 色彩 - 组件 - disabled --tdvns-bg-color-component-disabled: var(--td-bg-color-component-disabled); // 色彩 - 组件 - disabled
// TODO: 考虑是否在组件内部做判断，不增加额外变量 // TODO: 考虑是否在组件内部做判断，不增加额外变量
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色 // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
@bg-color-specialcomponent: var(--td-bg-color-specialcomponent); --tdvns-bg-color-specialcomponent: var(--td-bg-color-specialcomponent);
// 文本颜色 // 文本颜色
@text-color-primary: var(--td-text-color-primary); // 色彩-文字-主要 --tdvns-text-color-primary: var(--td-text-color-primary); // 色彩-文字-主要
@text-color-secondary: var(--td-text-color-secondary); // 色彩-文字-次要 --tdvns-text-color-secondary: var(--td-text-color-secondary); // 色彩-文字-次要
@text-color-placeholder: var(--td-text-color-placeholder); // 色彩-文字-占位符/说明 --tdvns-text-color-placeholder: var(--td-text-color-placeholder); // 色彩-文字-占位符/说明
@text-color-disabled: var(--td-text-color-disabled); // 色彩-文字-禁用 --tdvns-text-color-disabled: var(--td-text-color-disabled); // 色彩-文字-禁用
@text-color-anti: var(--td-text-color-anti); // 色彩-文字-反色 --tdvns-text-color-anti: var(--td-text-color-anti); // 色彩-文字-反色
@text-color-brand: var(--td-text-color-brand); // 色彩-文字-品牌 --tdvns-text-color-brand: var(--td-text-color-brand); // 色彩-文字-品牌
@text-color-link: var(--td-text-color-link); // 色彩-文字-链接 --tdvns-text-color-link: var(--td-text-color-link); // 色彩-文字-链接
// 分割线 // 分割线
@border-level-1-color: var(--td-border-level-1-color); --tdvns-border-level-1-color: var(--td-border-level-1-color);
@component-stroke: var(--td-component-stroke); --tdvns-component-stroke: var(--td-component-stroke);
// 边框 // 边框
@border-level-2-color: var(--td-border-level-2-color); --tdvns-border-level-2-color: var(--td-border-level-2-color);
@component-border: var(--td-component-border); --tdvns-component-border: var(--td-component-border);
// shadow // shadow
// 基础/下层 投影 hover 使用的组件包括：表格 / // 基础/下层 投影 hover 使用的组件包括：表格 /
@shadow-1: var(--td-shadow-1); --tdvns-shadow-1: var(--td-shadow-1);
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 / // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
@shadow-2: var(--td-shadow-2); --tdvns-shadow-2: var(--td-shadow-2);
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知 // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
@shadow-3: var(--td-shadow-3); --tdvns-shadow-3: var(--td-shadow-3);
// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边 // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
@shadow-inset-top: var(--td-shadow-inset-top); --tdvns-shadow-inset-top: var(--td-shadow-inset-top);
@shadow-inset-right: var(--td-shadow-inset-right); --tdvns-shadow-inset-right: var(--td-shadow-inset-right);
@shadow-inset-bottom: var(--td-shadow-inset-bottom); --tdvns-shadow-inset-bottom: var(--td-shadow-inset-bottom);
@shadow-inset-left: var(--td-shadow-inset-left); --tdvns-shadow-inset-left: var(--td-shadow-inset-left);
@shadow-inset: @shadow-inset-top, @shadow-inset-right, @shadow-inset-bottom, @shadow-inset-left; --tdvns-shadow-inset: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
// 融合阴影 // 融合阴影
@shadow-2-inset: @shadow-2, @shadow-inset; --tdvns-shadow-2-inset: var(--td-shadow-2), var(--td-shadow-inset);
@shadow-3-inset: @shadow-3, @shadow-inset; --tdvns-shadow-3-inset: var(--td-shadow-3), var(--td-shadow-inset);
// Spacer // Spacer
@spacer: 8px; --tdvns-spacer: 8px;
@spacer-s: @spacer * .5; // 间距-4 --tdvns-spacer-s: calc(var(--tdvns-spacer) * .5); // 间距-4
@spacer-l: @spacer * 1.5; // 间距-12 --tdvns-spacer-l: calc(var(--tdvns-spacer) * 1.5); // 间距-12
@spacer-1: @spacer; // 间距-8 --tdvns-spacer-1: var(--tdvns-spacer); // 间距-8
@spacer-2: @spacer * 2; // 间距-16 --tdvns-spacer-2: calc(var(--tdvns-spacer) * 2); // 间距-16
@spacer-3: @spacer * 3; // 间距-24 --tdvns-spacer-3: calc(var(--tdvns-spacer) * 3); // 间距-24
@spacer-4: @spacer * 4; // 间距-32 --tdvns-spacer-4: calc(var(--tdvns-spacer) * 4); // 间距-32
@spacer-5: @spacer * 5; // 间距-大-40 --tdvns-spacer-5: calc(var(--tdvns-spacer) * 5); // 间距-大-40
@spacer-6: @spacer * 6; // 间距-大-48 --tdvns-spacer-6: calc(var(--tdvns-spacer) * 6); // 间距-大-48
@spacer-7: @spacer * 7; // 间距-大-48 --tdvns-spacer-7: calc(var(--tdvns-spacer) * 7); // 间距-大-48
@spacer-8: @spacer * 8; // 间距-大-48 --tdvns-spacer-8: calc(var(--tdvns-spacer) * 8); // 间距-大-48
@spacer-9: @spacer * 9; // 间距-大-48 --tdvns-spacer-9: calc(var(--tdvns-spacer) * 9); // 间距-大-48
@spacer-10: @spacer * 10; // 间距-大-80 --tdvns-spacer-10: calc(var(--tdvns-spacer) * 10); // 间距-大-80
// Font // Font
@font-size: 10px; --tdvns-font-size: 10px;
@font-size-s: @font-size * 1.2; // 字号-五级字号 --tdvns-font-size-s: calc(var(--tdvns-font-size) * 1.2); // 字号-五级字号
@font-size-base: @font-size * 1.4; // 字号-四级字号 --tdvns-font-size-base: calc(var(--tdvns-font-size) * 1.4); // 字号-四级字号
@font-size-l: @font-size * 1.6; // 字号-三级字号 --tdvns-font-size-l: calc(var(--tdvns-font-size) * 1.6); // 字号-三级字号
@font-size-xl: @font-size * 2; // 字号-二级字号 --tdvns-font-size-xl: calc(var(--tdvns-font-size) * 2); // 字号-二级字号
@font-size-xxl: @font-size * 3.6; // 字号-一级字号 --tdvns-font-size-xxl: calc(var(--tdvns-font-size) * 3.6); // 字号-一级字号
// Line Height // Line Height
@text-line-height: 1.5; // 行高-常规 --tdvns-text-line-height: 1.5; // 行高-常规
@text-line-height-s: 20px; // 行高-对应五级文字 --tdvns-text-line-height-s: 20px; // 行高-对应五级文字
@text-line-height-base: 22px; // 行高-对应四级文字 --tdvns-text-line-height-base: 22px; // 行高-对应四级文字
@text-line-height-l: 24px; // 行高-对应三级文字 --tdvns-text-line-height-l: 24px; // 行高-对应三级文字
@text-line-height-xl: 28px; // 行高-对应二级文字 --tdvns-text-line-height-xl: 28px; // 行高-对应二级文字
@text-line-height-xxl: 44px; //行高-对应一级文字 --tdvns-text-line-height-xxl: 44px; //行高-对应一级文字
@font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规 --tdvns-font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规
@font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体 --tdvns-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体
// Border Radius // Border Radius
@border-radius: 3px; // 圆角-全局 --tdvns-border-radius: 3px; // 圆角-全局
@border-radius-50: 50%; // 圆角-全圆角 --tdvns-border-radius-50: 50%; // 圆角-全圆角
// 表单相关 // 表单相关
@form-height: 30px; --tdvns-form-height: 30px;
@form-text-color: @text-color-primary; --tdvns-form-text-color: var(--td-text-color-primary);
@form-bg-color: @bg-color-container; --tdvns-form-bg-color: var(--td-bg-color-container);
@form-border-color: @border-level-2-color; --tdvns-form-border-color: var(--td-border-level-2-color);
// 图标尺寸 // 图标尺寸
@icon-default: 16px; --tdvns-icon-default: 16px;
@icon-l: 24px; --tdvns-icon-l: 24px;
// 滚动条颜色 // 滚动条颜色
@scrollbar-color: var(--td-scrollbar-color); --tdvns-scrollbar-color: var(--td-scrollbar-color);
// 响应式断点 // 响应式断点
@screen-sm: 768px; --tdvns-screen-sm: 768px;
@screen-md: 992px; --tdvns-screen-md: 992px;
@screen-lg: 1200px; --tdvns-screen-lg: 1200px;
@screen-xl: 1400px; --tdvns-screen-xl: 1400px;
@screen-sm-min: @screen-sm; --tdvns-screen-sm-min: var(--tdvns-screen-sm);
@screen-md-min: @screen-md; --tdvns-screen-md-min: var(--tdvns-screen-md);
@screen-lg-min: @screen-lg; --tdvns-screen-lg-min: var(--tdvns-screen-lg);
@screen-xl-min: @screen-xl; --tdvns-screen-xl-min: var(--tdvns-screen-xl);
@screen-sm-max: (@screen-md-min - 1px); --tdvns-screen-sm-max: calc(var(--tdvns-screen-md-min) - 1px);
@screen-md-max: (@screen-lg-min - 1px); --tdvns-screen-md-max: calc(var(--tdvns-screen-lg-min) - 1px);
@screen-lg-max: (@screen-xl-min - 1px); --tdvns-screen-lg-max: calc(var(--tdvns-screen-xl-min) - 1px);
// 动画 // 动画
@anim-time-fn-easing: cubic-bezier(.38, 0, .24, 1); --tdvns-anim-time-fn-easing: cubic-bezier(.38, 0, .24, 1);
@anim-time-fn-ease-out: cubic-bezier(0, 0, .15, 1); --tdvns-anim-time-fn-ease-out: cubic-bezier(0, 0, .15, 1);
@anim-time-fn-ease-in: cubic-bezier(.82, 0, 1, .9); --tdvns-anim-time-fn-ease-in: cubic-bezier(.82, 0, 1, .9);
@anim-duration-base: .2s; --tdvns-anim-duration-base: .2s;
@anim-duration-moderate: .24s; --tdvns-anim-duration-moderate: .24s;
@anim-duration-slow: .28s; --tdvns-anim-duration-slow: .28s;
// 统一管理各组件层级关系 // 统一管理各组件层级关系
@z-index-affix: 500; --tdvns-z-index-affix: 500;
@z-index-drawer: 1500; --tdvns-z-index-drawer: 1500;
@z-index-dialog: 2500; --tdvns-z-index-dialog: 2500;
@z-index-loading: 3500; --tdvns-z-index-loading: 3500;
@z-index-message: 5000; --tdvns-z-index-message: 5000;
@z-index-Popup: 5500; --tdvns-z-index-Popup: 5500;
@z-index-Notification: 6000; --tdvns-z-index-Notification: 6000;
}

4
src/utils/color.ts
View File

@ -18,14 +18,14 @@ export function getColorFromTheme(theme: string) {
const themeColor = getBrandColor(theme, colorList); const themeColor = getBrandColor(theme, colorList);
if (!/^#[A-F\d]{6}$/i.test(theme)) { if (!/^#[A-F\d]{6}$/i.test(theme)) {
theme = themeColor?.['@brand-color'] || '#0052D9'; theme = themeColor?.['--td-brand-color'] || '#0052D9';
const themIdx = defaultLightColor.indexOf(theme.toLocaleLowerCase()); const themIdx = defaultLightColor.indexOf(theme.toLocaleLowerCase());
const defaultGradients = !isDarkMode ? defaultLightColor : defaultDarkColor; const defaultGradients = !isDarkMode ? defaultLightColor : defaultDarkColor;
const spliceThemeList = defaultGradients.slice(0, themIdx); const spliceThemeList = defaultGradients.slice(0, themIdx);
themeColorList = defaultGradients.slice(themIdx, defaultGradients.length).concat(spliceThemeList); themeColorList = defaultGradients.slice(themIdx, defaultGradients.length).concat(spliceThemeList);
} else { } else {
theme = themeColor?.['@brand-color']; theme = themeColor?.['--td-brand-color'];
themeColorList = Color.getRandomPalette({ themeColorList = Color.getRandomPalette({
color: theme, color: theme,
colorGamut: 'bright', colorGamut: 'bright',