mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-09-20 02:34:24 +08:00
refactor: 全面基于CSS Token改造 (#157)
* 去除冗余的less vars * 替换less vars为css vars * 统一css vars前缀
This commit is contained in:
Kerwin Bryant
GitHub
parent
474cd2b6ab
commit
2c3ba03df5
|
|
@ -20,6 +20,6 @@ onMounted(() => {
|
|||
@import '@/style/variables.less';
|
||||
|
||||
#nprogress .bar {
|
||||
background: @brand-color !important;
|
||||
background: var(--tdvns-brand-color) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<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="M42.8627 14.0518V16.7601H44.4877V14.0518H42.8627Z" 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(--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(--td-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="M53.6057 23.1699H50.8974V24.7949H53.6057V23.1699Z" fill="var(--td-text-color-primary)"/>
|
||||
<path d="M44.4877 31.2045V33.9129H42.8627V31.2045H44.4877Z" 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(--td-text-color-primary)"/>
|
||||
<path d="M36.453 24.7949H33.7446V23.1699H36.453V24.7949Z" 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(--td-text-color-primary)"/>
|
||||
<path d="M0 0H88V48H0V0Z" fill="var(--tdvns-component-border)"/>
|
||||
<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(--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(--tdvns-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(--tdvns-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(--tdvns-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(--tdvns-text-color-primary)"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,13 +1,13 @@
|
|||
<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)"/>
|
||||
<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.2499 17.333V14.833H44.7499V17.333H43.2499Z" 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(--td-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="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="M44.7499 30.6663V33.1663H43.2499V30.6663H44.7499Z" 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(--td-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="M38.7555 19.8158L36.988 18.0483L38.0487 16.9877L39.8162 18.7552L38.7555 19.8158Z" fill="var(--td-text-color-primary)"/>
|
||||
<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(--tdvns-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(--tdvns-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(--tdvns-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(--tdvns-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(--tdvns-text-color-primary)"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
|
@ -21,7 +21,7 @@ const style = computed(() => {
|
|||
const { value } = props;
|
||||
const { colorList } = store;
|
||||
return {
|
||||
background: value !== 'dynamic' ? getBrandColor(value, colorList)['@brand-color'] : panelColor,
|
||||
background: value !== 'dynamic' ? getBrandColor(value, colorList)['--td-brand-color'] : panelColor,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -108,11 +108,11 @@ const handleClickDelete = (product: CardProductType) => {
|
|||
margin-bottom: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
}
|
||||
|
||||
&--desc {
|
||||
color: @text-color-secondary;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -48,20 +48,20 @@ const dynamicComponent = computed(() => {
|
|||
|
||||
.result {
|
||||
&-link {
|
||||
color: @brand-color;
|
||||
color: var(--tdvns-brand-color);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @brand-color;
|
||||
color: var(--tdvns-brand-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @brand-color;
|
||||
color: var(--tdvns-brand-color);
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: @brand-color;
|
||||
color: var(--tdvns-brand-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -81,23 +81,23 @@ const dynamicComponent = computed(() => {
|
|||
|
||||
&-bg-img {
|
||||
width: 200px;
|
||||
color: @brand-color;
|
||||
color: var(--tdvns-brand-color);
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
margin-top: 8px;
|
||||
color: @text-color-primary;
|
||||
font-size: @font-size-xl;
|
||||
line-height: @text-line-height-xl;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
font-size: var(--tdvns-font-size-xl);
|
||||
line-height: var(--tdvns-text-line-height-xl);
|
||||
}
|
||||
|
||||
&-tip {
|
||||
margin: 8px 0 32px;
|
||||
font-size: @font-size-base;
|
||||
color: @text-color-secondary;
|
||||
line-height: @text-line-height-base;
|
||||
font-size: var(--tdvns-font-size-base);
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
line-height: var(--tdvns-text-line-height-base);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const className = computed(() => {
|
|||
}
|
||||
|
||||
&-circle {
|
||||
border-radius: @border-radius-50;
|
||||
border-radius: var(--tdvns-border-radius-50);
|
||||
}
|
||||
|
||||
&-layout {
|
||||
|
|
|
|||
|
|
@ -52,25 +52,25 @@ const iconCls = computed(() => ['trend-icon-container']);
|
|||
.trend {
|
||||
&-container {
|
||||
&__up {
|
||||
color: @error-color;
|
||||
color: var(--tdvns-error-color);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.trend-icon-container {
|
||||
background: @error-color-2;
|
||||
background: var(--tdvns-error-color-2);
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__down {
|
||||
color: @success-color;
|
||||
color: var(--tdvns-success-color);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.trend-icon-container {
|
||||
background: @success-color-2;
|
||||
background: var(--tdvns-success-color-2);
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -82,7 +82,7 @@ const iconCls = computed(() => ['trend-icon-container']);
|
|||
justify-content: center;
|
||||
|
||||
.trend-icon-container {
|
||||
background: @brand-color-5;
|
||||
background: var(--tdvns-brand-color-5);
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,109 +27,109 @@ export const defaultDarkColor = [
|
|||
|
||||
export const COLOR_TOKEN: TColorSeries = {
|
||||
DEFAULT: {
|
||||
'@brand-color': '#0052D9',
|
||||
'@brand-color-1': '#e0ebff',
|
||||
'@brand-color-2': '#c0d8ff',
|
||||
'@brand-color-3': '#a1c4ff',
|
||||
'@brand-color-4': '#81b1ff',
|
||||
'@brand-color-5': '#5f9bff',
|
||||
'@brand-color-6': '#3d87ff',
|
||||
'@brand-color-7': '#176eff',
|
||||
'@brand-color-8': '#0052D9',
|
||||
'@brand-color-9': '#0048cd',
|
||||
'@brand-color-10': '#0035b5',
|
||||
'--td-brand-color': '#0052D9',
|
||||
'--td-brand-color-1': '#e0ebff',
|
||||
'--td-brand-color-2': '#c0d8ff',
|
||||
'--td-brand-color-3': '#a1c4ff',
|
||||
'--td-brand-color-4': '#81b1ff',
|
||||
'--td-brand-color-5': '#5f9bff',
|
||||
'--td-brand-color-6': '#3d87ff',
|
||||
'--td-brand-color-7': '#176eff',
|
||||
'--td-brand-color-8': '#0052D9',
|
||||
'--td-brand-color-9': '#0048cd',
|
||||
'--td-brand-color-10': '#0035b5',
|
||||
},
|
||||
|
||||
CYAN: {
|
||||
'@brand-color': '#0594FA',
|
||||
'@brand-color-1': '#d7eefe',
|
||||
'@brand-color-2': '#aeddfd',
|
||||
'@brand-color-3': '#84cafd',
|
||||
'@brand-color-4': '#58b8fc',
|
||||
'@brand-color-5': '#29a4fb',
|
||||
'@brand-color-6': '#0594FA',
|
||||
'@brand-color-7': '#29a4fb',
|
||||
'@brand-color-8': '#0594FA',
|
||||
'@brand-color-9': '#0378df',
|
||||
'@brand-color-10': '#01409b',
|
||||
'--td-brand-color': '#0594FA',
|
||||
'--td-brand-color-1': '#d7eefe',
|
||||
'--td-brand-color-2': '#aeddfd',
|
||||
'--td-brand-color-3': '#84cafd',
|
||||
'--td-brand-color-4': '#58b8fc',
|
||||
'--td-brand-color-5': '#29a4fb',
|
||||
'--td-brand-color-6': '#0594FA',
|
||||
'--td-brand-color-7': '#29a4fb',
|
||||
'--td-brand-color-8': '#0594FA',
|
||||
'--td-brand-color-9': '#0378df',
|
||||
'--td-brand-color-10': '#01409b',
|
||||
},
|
||||
GREEN: {
|
||||
'@brand-color': '#00A870',
|
||||
'@brand-color-1': '#8dffd9',
|
||||
'@brand-color-2': '#00f2a2',
|
||||
'@brand-color-3': '#00dc92',
|
||||
'@brand-color-4': '#00c583',
|
||||
'@brand-color-5': '#00A870',
|
||||
'@brand-color-6': '#009a5d',
|
||||
'@brand-color-7': '#00c583',
|
||||
'@brand-color-8': '#00A870',
|
||||
'@brand-color-9': '#009a5d',
|
||||
'@brand-color-10': '#004a14',
|
||||
'--td-brand-color': '#00A870',
|
||||
'--td-brand-color-1': '#8dffd9',
|
||||
'--td-brand-color-2': '#00f2a2',
|
||||
'--td-brand-color-3': '#00dc92',
|
||||
'--td-brand-color-4': '#00c583',
|
||||
'--td-brand-color-5': '#00A870',
|
||||
'--td-brand-color-6': '#009a5d',
|
||||
'--td-brand-color-7': '#00c583',
|
||||
'--td-brand-color-8': '#00A870',
|
||||
'--td-brand-color-9': '#009a5d',
|
||||
'--td-brand-color-10': '#004a14',
|
||||
},
|
||||
ORANGE: {
|
||||
'@brand-color': '#ED7B2F',
|
||||
'@brand-color-1': '#fce5d7',
|
||||
'@brand-color-2': '#f8cdaf',
|
||||
'@brand-color-3': '#f4b285',
|
||||
'@brand-color-4': '#f19659',
|
||||
'@brand-color-5': '#ED7B2F',
|
||||
'@brand-color-6': '#e75510',
|
||||
'@brand-color-7': '#f19659',
|
||||
'@brand-color-8': '#ED7B2F',
|
||||
'@brand-color-9': '#e75510',
|
||||
'@brand-color-10': '#7f0a02',
|
||||
'--td-brand-color': '#ED7B2F',
|
||||
'--td-brand-color-1': '#fce5d7',
|
||||
'--td-brand-color-2': '#f8cdaf',
|
||||
'--td-brand-color-3': '#f4b285',
|
||||
'--td-brand-color-4': '#f19659',
|
||||
'--td-brand-color-5': '#ED7B2F',
|
||||
'--td-brand-color-6': '#e75510',
|
||||
'--td-brand-color-7': '#f19659',
|
||||
'--td-brand-color-8': '#ED7B2F',
|
||||
'--td-brand-color-9': '#e75510',
|
||||
'--td-brand-color-10': '#7f0a02',
|
||||
},
|
||||
RED: {
|
||||
'@brand-color': '#E34D59',
|
||||
'@brand-color-1': '#fbe5e7',
|
||||
'@brand-color-2': '#f7ccd0',
|
||||
'@brand-color-3': '#f3b2b8',
|
||||
'@brand-color-4': '#ef989f',
|
||||
'@brand-color-5': '#ea7b84',
|
||||
'@brand-color-6': '#E34D59',
|
||||
'@brand-color-7': '#ea7b84',
|
||||
'@brand-color-8': '#E34D59',
|
||||
'@brand-color-9': '#e42c3a',
|
||||
'@brand-color-10': '#8d0309',
|
||||
'--td-brand-color': '#E34D59',
|
||||
'--td-brand-color-1': '#fbe5e7',
|
||||
'--td-brand-color-2': '#f7ccd0',
|
||||
'--td-brand-color-3': '#f3b2b8',
|
||||
'--td-brand-color-4': '#ef989f',
|
||||
'--td-brand-color-5': '#ea7b84',
|
||||
'--td-brand-color-6': '#E34D59',
|
||||
'--td-brand-color-7': '#ea7b84',
|
||||
'--td-brand-color-8': '#E34D59',
|
||||
'--td-brand-color-9': '#e42c3a',
|
||||
'--td-brand-color-10': '#8d0309',
|
||||
},
|
||||
PINK: {
|
||||
'@brand-color': '#ED49B4',
|
||||
'@brand-color-1': '#fce5f4',
|
||||
'@brand-color-2': '#facae9',
|
||||
'@brand-color-3': '#f7aede',
|
||||
'@brand-color-4': '#f491d2',
|
||||
'@brand-color-5': '#f172c5',
|
||||
'@brand-color-6': '#ED49B4',
|
||||
'@brand-color-7': '#f172c5',
|
||||
'@brand-color-8': '#ED49B4',
|
||||
'@brand-color-9': '#e80f9d',
|
||||
'@brand-color-10': '#8f025e',
|
||||
'--td-brand-color': '#ED49B4',
|
||||
'--td-brand-color-1': '#fce5f4',
|
||||
'--td-brand-color-2': '#facae9',
|
||||
'--td-brand-color-3': '#f7aede',
|
||||
'--td-brand-color-4': '#f491d2',
|
||||
'--td-brand-color-5': '#f172c5',
|
||||
'--td-brand-color-6': '#ED49B4',
|
||||
'--td-brand-color-7': '#f172c5',
|
||||
'--td-brand-color-8': '#ED49B4',
|
||||
'--td-brand-color-9': '#e80f9d',
|
||||
'--td-brand-color-10': '#8f025e',
|
||||
},
|
||||
PURPLE: {
|
||||
'@brand-color': '#834EC2',
|
||||
'@brand-color-1': '#eee6f7',
|
||||
'@brand-color-2': '#ddceee',
|
||||
'@brand-color-3': '#ccb6e6',
|
||||
'@brand-color-4': '#bb9edc',
|
||||
'@brand-color-5': '#ab87d5',
|
||||
'@brand-color-6': '#9a6fce',
|
||||
'@brand-color-7': '#9a6fce',
|
||||
'@brand-color-8': '#834EC2',
|
||||
'@brand-color-9': '#783ac3',
|
||||
'@brand-color-10': '#4c1397',
|
||||
'--td-brand-color': '#834EC2',
|
||||
'--td-brand-color-1': '#eee6f7',
|
||||
'--td-brand-color-2': '#ddceee',
|
||||
'--td-brand-color-3': '#ccb6e6',
|
||||
'--td-brand-color-4': '#bb9edc',
|
||||
'--td-brand-color-5': '#ab87d5',
|
||||
'--td-brand-color-6': '#9a6fce',
|
||||
'--td-brand-color-7': '#9a6fce',
|
||||
'--td-brand-color-8': '#834EC2',
|
||||
'--td-brand-color-9': '#783ac3',
|
||||
'--td-brand-color-10': '#4c1397',
|
||||
},
|
||||
YELLOW: {
|
||||
'@brand-color': '#EBB105',
|
||||
'@brand-color-1': '#fde9ab',
|
||||
'@brand-color-2': '#fbd152',
|
||||
'@brand-color-3': '#EBB105',
|
||||
'@brand-color-4': '#dda204',
|
||||
'@brand-color-5': '#ca8d03',
|
||||
'@brand-color-6': '#b67803',
|
||||
'@brand-color-7': '#fbd152',
|
||||
'@brand-color-8': '#EBB105',
|
||||
'@brand-color-9': '#dda204',
|
||||
'@brand-color-10': '#603100',
|
||||
'--td-brand-color': '#EBB105',
|
||||
'--td-brand-color-1': '#fde9ab',
|
||||
'--td-brand-color-2': '#fbd152',
|
||||
'--td-brand-color-3': '#EBB105',
|
||||
'--td-brand-color-4': '#dda204',
|
||||
'--td-brand-color-5': '#ca8d03',
|
||||
'--td-brand-color-6': '#b67803',
|
||||
'--td-brand-color-7': '#fbd152',
|
||||
'--td-brand-color-8': '#EBB105',
|
||||
'--td-brand-color-9': '#dda204',
|
||||
'--td-brand-color-10': '#603100',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -180,17 +180,17 @@ export function generateColorMap(theme: string, colorPalette: Array<string>, mod
|
|||
}
|
||||
|
||||
const colorMap = {
|
||||
'@brand-color': colorPalette[brandColorIdx], // 主题色
|
||||
'@brand-color-1': colorPalette[0], // light
|
||||
'@brand-color-2': colorPalette[1], // focus
|
||||
'@brand-color-3': colorPalette[2], // disabled
|
||||
'@brand-color-4': colorPalette[3],
|
||||
'@brand-color-5': colorPalette[4],
|
||||
'@brand-color-6': colorPalette[5],
|
||||
'@brand-color-7': brandColorIdx > 0 ? colorPalette[brandColorIdx - 1] : theme, // hover
|
||||
'@brand-color-8': colorPalette[brandColorIdx], // 主题色
|
||||
'@brand-color-9': brandColorIdx > 8 ? theme : colorPalette[brandColorIdx + 1], // click
|
||||
'@brand-color-10': colorPalette[9],
|
||||
'--td-brand-color': colorPalette[brandColorIdx], // 主题色
|
||||
'--td-brand-color-1': colorPalette[0], // light
|
||||
'--td-brand-color-2': colorPalette[1], // focus
|
||||
'--td-brand-color-3': colorPalette[2], // disabled
|
||||
'--td-brand-color-4': colorPalette[3],
|
||||
'--td-brand-color-5': colorPalette[4],
|
||||
'--td-brand-color-6': colorPalette[5],
|
||||
'--td-brand-color-7': brandColorIdx > 0 ? colorPalette[brandColorIdx - 1] : theme, // hover
|
||||
'--td-brand-color-8': colorPalette[brandColorIdx], // 主题色
|
||||
'--td-brand-color-9': brandColorIdx > 8 ? theme : colorPalette[brandColorIdx + 1], // click
|
||||
'--td-brand-color-10': colorPalette[9],
|
||||
};
|
||||
return colorMap;
|
||||
}
|
||||
|
|
@ -201,17 +201,17 @@ export function insertThemeStylesheet(theme: string, colorMap: TColorToken, mode
|
|||
const styleSheet = document.createElement('style');
|
||||
styleSheet.type = 'text/css';
|
||||
styleSheet.innerText = `${root}{
|
||||
--td-brand-color: ${colorMap['@brand-color']};
|
||||
--td-brand-color-1: ${colorMap['@brand-color-1']};
|
||||
--td-brand-color-2: ${colorMap['@brand-color-2']};
|
||||
--td-brand-color-3: ${colorMap['@brand-color-3']};
|
||||
--td-brand-color-4: ${colorMap['@brand-color-4']};
|
||||
--td-brand-color-5: ${colorMap['@brand-color-5']};
|
||||
--td-brand-color-6: ${colorMap['@brand-color-6']};
|
||||
--td-brand-color-7: ${colorMap['@brand-color-7']};
|
||||
--td-brand-color-8: ${colorMap['@brand-color-8']};
|
||||
--td-brand-color-9: ${colorMap['@brand-color-9']};
|
||||
--td-brand-color-10: ${colorMap['@brand-color-10']};
|
||||
--td-brand-color: ${colorMap['--td-brand-color']};
|
||||
--td-brand-color-1: ${colorMap['--td-brand-color-1']};
|
||||
--td-brand-color-2: ${colorMap['--td-brand-color-2']};
|
||||
--td-brand-color-3: ${colorMap['--td-brand-color-3']};
|
||||
--td-brand-color-4: ${colorMap['--td-brand-color-4']};
|
||||
--td-brand-color-5: ${colorMap['--td-brand-color-5']};
|
||||
--td-brand-color-6: ${colorMap['--td-brand-color-6']};
|
||||
--td-brand-color-7: ${colorMap['--td-brand-color-7']};
|
||||
--td-brand-color-8: ${colorMap['--td-brand-color-8']};
|
||||
--td-brand-color-9: ${colorMap['--td-brand-color-9']};
|
||||
--td-brand-color-10: ${colorMap['--td-brand-color-10']};
|
||||
}`;
|
||||
|
||||
document.head.appendChild(styleSheet);
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const isRefreshing = computed(() => {
|
|||
|
||||
.fade-leave-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-leave-to {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { prefix } from '@/config/global';
|
|||
@import '@/style/variables';
|
||||
|
||||
.@{prefix}-footer {
|
||||
color: @text-color-placeholder;
|
||||
color: var(--tdvns-text-color-placeholder);
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -236,7 +236,7 @@ const navToHelper = () => {
|
|||
height: 26px;
|
||||
display: flex;
|
||||
margin-left: 24px;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
|
||||
.t-logo {
|
||||
width: 100%;
|
||||
|
|
@ -254,7 +254,7 @@ const navToHelper = () => {
|
|||
.header-user-account {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
.t-icon {
|
||||
margin-left: 4px;
|
||||
font-size: 16px;
|
||||
|
|
@ -262,25 +262,25 @@ const navToHelper = () => {
|
|||
}
|
||||
|
||||
: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 {
|
||||
.header-user-account {
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
}
|
||||
}
|
||||
.t-menu--dark {
|
||||
.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 {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
.t-button {
|
||||
--ripple-color: var(--td-gray-color-10) !important;
|
||||
--ripple-color: var(--tdvns-gray-color-10) !important;
|
||||
&:hover {
|
||||
background: var(--td-gray-color-12) !important;
|
||||
background: var(--tdvns-gray-color-12) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ const goDetail = () => {
|
|||
text-align: center;
|
||||
padding-top: 135px;
|
||||
font-size: 14px;
|
||||
color: @text-color-secondary;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
|
||||
img {
|
||||
width: 63px;
|
||||
|
|
@ -103,10 +103,10 @@ const goDetail = () => {
|
|||
position: relative;
|
||||
height: 56px;
|
||||
font-size: 16px;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
text-align: center;
|
||||
line-height: 56px;
|
||||
border-bottom: 1px solid @component-border;
|
||||
border-bottom: 1px solid var(--tdvns-component-border);
|
||||
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
|
|
@ -124,7 +124,7 @@ const goDetail = () => {
|
|||
&-link {
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
color: @brand-color;
|
||||
color: var(--tdvns-brand-color);
|
||||
line-height: 48px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -138,18 +138,18 @@ const goDetail = () => {
|
|||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
border-radius: @border-radius;
|
||||
border-radius: var(--tdvns-border-radius);
|
||||
font-size: 14px;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
line-height: 22px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transition: background 0.2s ease;
|
||||
background: @bg-color-container-hover;
|
||||
background: var(--tdvns-bg-color-container-hover);
|
||||
|
||||
.msg-content {
|
||||
color: @brand-color-8;
|
||||
color: var(--tdvns-brand-color-8);
|
||||
}
|
||||
|
||||
.t-list-item__action {
|
||||
|
|
@ -170,7 +170,7 @@ const goDetail = () => {
|
|||
}
|
||||
|
||||
.msg-type {
|
||||
color: @text-color-secondary;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
}
|
||||
|
||||
.t-list-item__action {
|
||||
|
|
@ -188,7 +188,7 @@ const goDetail = () => {
|
|||
position: absolute;
|
||||
right: 24px;
|
||||
bottom: 16px;
|
||||
color: @text-color-secondary;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,33 +60,33 @@ const changeSearchFocus = (value: boolean) => {
|
|||
margin-left: 16px;
|
||||
.hover-active {
|
||||
.t-input__inner {
|
||||
background: @bg-color-secondarycontainer;
|
||||
background: var(--tdvns-bg-color-secondarycontainer);
|
||||
}
|
||||
.t-icon {
|
||||
color: @brand-color !important;
|
||||
color: var(--tdvns-brand-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.t-icon {
|
||||
font-size: 20px !important;
|
||||
color: @text-color-primary !important;
|
||||
color: var(--tdvns-text-color-primary) !important;
|
||||
}
|
||||
.header-search {
|
||||
:deep(.t-input) {
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
transition: background @anim-duration-base linear;
|
||||
transition: background var(--tdvns-anim-duration-base) linear;
|
||||
.t-input__inner {
|
||||
transition: background @anim-duration-base linear;
|
||||
transition: background var(--tdvns-anim-duration-base) linear;
|
||||
}
|
||||
.t-input__inner {
|
||||
background: none;
|
||||
}
|
||||
&:hover {
|
||||
background: @bg-color-secondarycontainer;
|
||||
background: var(--tdvns-bg-color-secondarycontainer);
|
||||
.t-input__inner {
|
||||
background: @bg-color-secondarycontainer;
|
||||
background: var(--tdvns-bg-color-secondarycontainer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -95,7 +95,7 @@ const changeSearchFocus = (value: boolean) => {
|
|||
|
||||
.t-button {
|
||||
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 {
|
||||
font-size: 20px;
|
||||
|
|
@ -113,7 +113,7 @@ const changeSearchFocus = (value: boolean) => {
|
|||
|
||||
.header-search {
|
||||
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) {
|
||||
border: 0;
|
||||
&:focus {
|
||||
|
|
|
|||
|
|
@ -262,12 +262,12 @@ watchEffect(() => {
|
|||
font-family: PingFang SC;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
}
|
||||
|
||||
.setting-link {
|
||||
cursor: pointer;
|
||||
color: @brand-color;
|
||||
color: var(--tdvns-brand-color);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -279,9 +279,9 @@ watchEffect(() => {
|
|||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: @text-color-placeholder;
|
||||
color: var(--tdvns-text-color-placeholder);
|
||||
width: 100%;
|
||||
background: @bg-color-container;
|
||||
background: var(--tdvns-bg-color-container);
|
||||
}
|
||||
|
||||
.setting-drawer-container {
|
||||
|
|
@ -306,7 +306,7 @@ watchEffect(() => {
|
|||
display: inline-flex;
|
||||
max-height: 78px;
|
||||
padding: 8px;
|
||||
border-radius: @border-radius;
|
||||
border-radius: var(--tdvns-border-radius);
|
||||
border: 2px solid #e3e6eb;
|
||||
> .t-radio-button__label {
|
||||
display: inline-flex;
|
||||
|
|
@ -314,7 +314,7 @@ watchEffect(() => {
|
|||
}
|
||||
|
||||
:deep(.t-is-checked) {
|
||||
border: 2px solid @brand-color !important;
|
||||
border: 2px solid var(--tdvns-brand-color) !important;
|
||||
}
|
||||
|
||||
:deep(.t-form__controls-content) {
|
||||
|
|
@ -330,7 +330,7 @@ watchEffect(() => {
|
|||
.setting-route-theme {
|
||||
:deep(.t-form__label) {
|
||||
min-width: 310px !important;
|
||||
color: @text-color-secondary;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ const onStokeDataChange = (checkedValues: string[]) => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 22px;
|
||||
color: @text-color-placeholder;
|
||||
color: var(--tdvns-text-color-placeholder);
|
||||
|
||||
.trend-tag {
|
||||
margin-left: 4px;
|
||||
|
|
|
|||
|
|
@ -88,13 +88,13 @@ const getRankClass = (index: number) => {
|
|||
border-radius: 50%;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
background-color: @gray-color-5;
|
||||
background-color: var(--tdvns-gray-color-5);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
|
||||
&--top {
|
||||
background: @brand-color;
|
||||
background: var(--tdvns-brand-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -186,7 +186,7 @@ watch(
|
|||
|
||||
> span {
|
||||
display: inline-block;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
|
@ -208,7 +208,7 @@ watch(
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 22px;
|
||||
color: @text-color-placeholder;
|
||||
color: var(--tdvns-text-color-placeholder);
|
||||
}
|
||||
|
||||
&-trend {
|
||||
|
|
@ -226,34 +226,34 @@ watch(
|
|||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: @brand-color-1;
|
||||
background: var(--tdvns-brand-color-1);
|
||||
border-radius: 50%;
|
||||
|
||||
.t-icon {
|
||||
font-size: 24px;
|
||||
color: @brand-color;
|
||||
color: var(--tdvns-brand-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 针对第一个卡片需要反色处理
|
||||
&--main-color {
|
||||
background: @brand-color;
|
||||
color: @text-color-primary;
|
||||
background: var(--tdvns-brand-color);
|
||||
color: var(--tdvns-text-color-primary);
|
||||
|
||||
:deep(.t-card__title),
|
||||
.dashboard-item-top span,
|
||||
.dashboard-item-bottom {
|
||||
color: @text-color-anti;
|
||||
color: var(--tdvns-text-color-anti);
|
||||
}
|
||||
|
||||
.dashboard-item-block {
|
||||
color: @text-color-anti;
|
||||
color: var(--tdvns-text-color-anti);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.dashboard-item-bottom {
|
||||
color: @text-color-anti;
|
||||
color: var(--tdvns-text-color-anti);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -201,14 +201,14 @@ const onMaterialChange = (value: string[]) => {
|
|||
|
||||
&.dark {
|
||||
&:hover {
|
||||
background: @gray-color-14;
|
||||
background: var(--tdvns-gray-color-14);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.light {
|
||||
&:hover {
|
||||
background: @gray-color-14;
|
||||
background: var(--tdvns-gray-color-14);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -216,7 +216,7 @@ const onMaterialChange = (value: string[]) => {
|
|||
&__number {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
}
|
||||
|
||||
&__text {
|
||||
|
|
@ -225,7 +225,7 @@ const onMaterialChange = (value: string[]) => {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
color: @text-color-placeholder;
|
||||
color: var(--tdvns-text-color-placeholder);
|
||||
text-align: left;
|
||||
line-height: 18px;
|
||||
|
||||
|
|
|
|||
|
|
@ -61,8 +61,8 @@ export default defineComponent({
|
|||
|
||||
.operator-block {
|
||||
position: relative;
|
||||
background-color: @bg-color-container;
|
||||
border: 1px solid @component-border;
|
||||
background-color: var(--tdvns-bg-color-container);
|
||||
border: 1px solid var(--tdvns-component-border);
|
||||
border-radius: 3px;
|
||||
|
||||
.operator-content {
|
||||
|
|
@ -70,8 +70,8 @@ export default defineComponent({
|
|||
height: 256px;
|
||||
|
||||
.operator-title-icon {
|
||||
background: @brand-color-1;
|
||||
color: @brand-color;
|
||||
background: var(--tdvns-brand-color-1);
|
||||
color: var(--tdvns-brand-color);
|
||||
font-size: 56px;
|
||||
padding: 14px;
|
||||
border-radius: 100%;
|
||||
|
|
@ -85,7 +85,7 @@ export default defineComponent({
|
|||
display: inline-block;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
|
|
@ -93,7 +93,7 @@ export default defineComponent({
|
|||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
width: 60%;
|
||||
color: @text-color-placeholder;
|
||||
color: var(--tdvns-text-color-placeholder);
|
||||
}
|
||||
|
||||
&-tag {
|
||||
|
|
@ -111,11 +111,11 @@ export default defineComponent({
|
|||
|
||||
svg {
|
||||
circle {
|
||||
fill: @brand-color-2;
|
||||
fill: var(--tdvns-brand-color-2);
|
||||
}
|
||||
|
||||
path {
|
||||
fill: @brand-color;
|
||||
fill: var(--tdvns-brand-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -130,7 +130,7 @@ export default defineComponent({
|
|||
width: 60%;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
color: @text-color-placeholder;
|
||||
color: var(--tdvns-text-color-placeholder);
|
||||
}
|
||||
|
||||
&-icon {
|
||||
|
|
@ -155,7 +155,7 @@ export default defineComponent({
|
|||
position: absolute;
|
||||
bottom: 15px;
|
||||
right: 32px;
|
||||
color: @text-color-placeholder;
|
||||
color: var(--tdvns-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
.product-block-container {
|
||||
.t-col-xl-4 + .t-col-xl-4 {
|
||||
@media (max-width: @screen-lg-max) {
|
||||
@media (max-width: var(--tdvns-screen-lg-max)) {
|
||||
.operator-gap {
|
||||
margin: 16px 0 0 0;
|
||||
}
|
||||
|
|
@ -34,12 +34,12 @@
|
|||
align-items: center;
|
||||
justify-items: center;
|
||||
padding: 20px 10px 24px 20px;
|
||||
border: dashed 1px @component-border;
|
||||
border: dashed 1px var(--tdvns-component-border);
|
||||
border-radius: 3px;
|
||||
|
||||
.product-sub-icon {
|
||||
background: @brand-color-1;
|
||||
color: @brand-color;
|
||||
background: var(--tdvns-brand-color-1);
|
||||
color: var(--tdvns-brand-color);
|
||||
font-size: 33px;
|
||||
padding: 8px;
|
||||
border-radius: 100%;
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
|
||||
.product-sub {
|
||||
font-size: 14px;
|
||||
color: @text-color-secondary;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
|
|
@ -58,11 +58,11 @@
|
|||
|
||||
svg {
|
||||
rect {
|
||||
fill: @brand-color-1;
|
||||
fill: var(--tdvns-brand-color-1);
|
||||
}
|
||||
|
||||
path {
|
||||
fill: @brand-color;
|
||||
fill: var(--tdvns-brand-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,21 +21,21 @@
|
|||
.info-item {
|
||||
padding: 12px 0;
|
||||
display: flex;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
|
||||
h1 {
|
||||
width: 200px;
|
||||
font-weight: normal;
|
||||
font-size: @font-size-base;
|
||||
color: @text-color-secondary;
|
||||
font-size: var(--tdvns-font-size-base);
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
text-align: left;
|
||||
line-height: 22px;
|
||||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
@media (max-width: var(--tdvns-screen-sm-max)) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -51,16 +51,16 @@
|
|||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: @border-radius-50;
|
||||
background: @success-color-5;
|
||||
border-radius: var(--tdvns-border-radius-50);
|
||||
background: var(--tdvns-success-color-5);
|
||||
}
|
||||
|
||||
.inProgress {
|
||||
color: @success-color-5;
|
||||
color: var(--tdvns-success-color-5);
|
||||
}
|
||||
|
||||
.pdf {
|
||||
color: @brand-color;
|
||||
color: var(--tdvns-brand-color);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
width: 84px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: @text-color-secondary;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
text-align: left;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
|
@ -91,16 +91,16 @@
|
|||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: @border-radius-50;
|
||||
background: @success-color-5;
|
||||
border-radius: var(--tdvns-border-radius-50);
|
||||
background: var(--tdvns-success-color-5);
|
||||
}
|
||||
|
||||
.green {
|
||||
color: @success-color-5;
|
||||
color: var(--tdvns-success-color-5);
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: @brand-color-8;
|
||||
color: var(--tdvns-brand-color-8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
@import '@/style/variables.less';
|
||||
|
||||
.secondary-notification {
|
||||
background-color: @bg-color-container;
|
||||
border-radius: @border-radius;
|
||||
padding: @spacer-3 @spacer-4;
|
||||
background-color: var(--tdvns-bg-color-container);
|
||||
border-radius: var(--tdvns-border-radius);
|
||||
padding: var(--tdvns-spacer-3) var(--tdvns-spacer-4);
|
||||
|
||||
.t-tabs__content {
|
||||
padding-top: 0;
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
padding: 13px 24px 13px 0;
|
||||
|
||||
&:hover {
|
||||
background-color: @bg-color-container-hover;
|
||||
background-color: var(--tdvns-bg-color-container-hover);
|
||||
|
||||
.msg-date {
|
||||
display: none;
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
}
|
||||
|
||||
.t-tag.t-size-s {
|
||||
margin-right: @spacer-1;
|
||||
margin-right: var(--tdvns-spacer-1);
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
.content {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 14px;
|
||||
color: @text-color-placeholder;
|
||||
color: var(--tdvns-text-color-placeholder);
|
||||
text-align: left;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
}
|
||||
|
||||
.unread {
|
||||
color: @brand-color-8;
|
||||
color: var(--tdvns-brand-color-8);
|
||||
}
|
||||
|
||||
.msg-action {
|
||||
|
|
@ -68,6 +68,6 @@
|
|||
min-height: 443px;
|
||||
padding-top: 170px;
|
||||
text-align: center;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: @bg-color-container;
|
||||
background-color: var(--tdvns-bg-color-container);
|
||||
padding: 0 32px 134px;
|
||||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
@media (max-width: var(--tdvns-screen-sm-max)) {
|
||||
padding: 0 32px 67px;
|
||||
|
||||
.form-basic-container-title {
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
.form-basic-container-title {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
margin: 64px 0 32px;
|
||||
}
|
||||
}
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
justify-content: center;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 28px;
|
||||
background-color: @bg-color-component;
|
||||
background-color: var(--tdvns-bg-color-component);
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
.form-submit-upload-span {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: @text-color-placeholder;
|
||||
color: var(--tdvns-text-color-placeholder);
|
||||
padding-top: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import '@/style/variables';
|
||||
|
||||
.form-step-container {
|
||||
background-color: @bg-color-container;
|
||||
background-color: var(--tdvns-bg-color-container);
|
||||
|
||||
.t-card {
|
||||
padding: 8px;
|
||||
|
|
|
|||
|
|
@ -210,7 +210,7 @@ const getContainer = () => {
|
|||
.selected-count {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
color: @text-color-secondary;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -276,9 +276,9 @@ const getContainer = () => {
|
|||
<style lang="less" scoped>
|
||||
@import '@/style/variables.less';
|
||||
.list-common-table {
|
||||
background-color: @bg-color-container;
|
||||
background-color: var(--tdvns-bg-color-container);
|
||||
padding: 30px 32px;
|
||||
border-radius: @border-radius;
|
||||
border-radius: var(--tdvns-border-radius);
|
||||
|
||||
.table-container {
|
||||
margin-top: 30px;
|
||||
|
|
|
|||
|
|
@ -45,8 +45,8 @@ const onInput = () => {
|
|||
<style lang="less" scoped>
|
||||
@import '@/style/variables.less';
|
||||
.table-tree-container {
|
||||
background-color: @bg-color-container;
|
||||
border-radius: @border-radius;
|
||||
background-color: var(--tdvns-bg-color-container);
|
||||
border-radius: var(--tdvns-border-radius);
|
||||
|
||||
.t-tree {
|
||||
margin-top: 24px;
|
||||
|
|
@ -64,7 +64,7 @@ const onInput = () => {
|
|||
}
|
||||
|
||||
.list-tree-content {
|
||||
border-left: 1px solid @border-level-1-color;
|
||||
border-left: 1px solid var(--tdvns-border-level-1-color);
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const navToHelper = () => {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(5px);
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
|
||||
.logo {
|
||||
width: 188px;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
.dark {
|
||||
&.login-wrapper {
|
||||
background-color: @bg-color-page;
|
||||
background-color: var(--tdvns-bg-color-page);
|
||||
background-image: url('@/assets/assets-login-bg-black.png');
|
||||
}
|
||||
}
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
.title {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
margin-top: 4px;
|
||||
|
||||
&.margin-no {
|
||||
|
|
@ -52,11 +52,11 @@
|
|||
font-size: 14px;
|
||||
|
||||
&:first-child {
|
||||
color: @text-color-secondary;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -76,13 +76,13 @@
|
|||
justify-content: space-between;
|
||||
|
||||
.tip {
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
}
|
||||
|
||||
.refresh {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: @brand-color;
|
||||
color: var(--tdvns-brand-color);
|
||||
|
||||
.t-icon {
|
||||
font-size: 14px;
|
||||
|
|
@ -116,11 +116,11 @@
|
|||
}
|
||||
|
||||
:deep(.t-checkbox__label) {
|
||||
color: @text-color-secondary;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
}
|
||||
|
||||
span {
|
||||
color: @brand-color;
|
||||
color: var(--tdvns-brand-color);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
|
@ -154,7 +154,7 @@
|
|||
|
||||
.tip {
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
color: var(--tdvns-brand-color-8);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
display: block;
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background: @gray-color-3;
|
||||
background: var(--tdvns-gray-color-3);
|
||||
margin-left: 14px;
|
||||
}
|
||||
}
|
||||
|
|
@ -179,12 +179,12 @@
|
|||
|
||||
.check-container {
|
||||
font-size: 14px;
|
||||
color: @text-color-secondary;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
|
||||
.tip {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
color: var(--tdvns-brand-color-8);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
position:absolute;
|
||||
left: 5%;
|
||||
bottom: 64px;
|
||||
color: @text-color-secondary;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
}
|
||||
|
||||
@media screen and (max-height: 700px) {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ import Thumbnail from '@/components/thumbnail/index.vue';
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: @text-color-secondary;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
}
|
||||
|
||||
.recommend-container {
|
||||
|
|
@ -48,8 +48,8 @@ import Thumbnail from '@/components/thumbnail/index.vue';
|
|||
top: 175px;
|
||||
padding: 24px 48px;
|
||||
width: 640px;
|
||||
background: @bg-color-container;
|
||||
box-shadow: 0px 1px 2px @shadow-1;
|
||||
background: var(--tdvns-bg-color-container);
|
||||
box-shadow: 0px 1px 2px var(--tdvns-shadow-1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,13 +25,13 @@ export default {
|
|||
height: 75vh;
|
||||
&-icon {
|
||||
font-size: 64px;
|
||||
color: @text-color-secondary;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-top: 16px;
|
||||
font-size: 20px;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
|
|
@ -40,7 +40,7 @@ export default {
|
|||
&-describe {
|
||||
margin: 8px 0 32px;
|
||||
font-size: 14px;
|
||||
color: @text-color-secondary;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,13 +26,13 @@ export default {
|
|||
|
||||
&-icon {
|
||||
font-size: 64px;
|
||||
color: @success-color;
|
||||
color: var(--tdvns-success-color);
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-top: 16px;
|
||||
font-size: 20px;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
|
|
@ -41,7 +41,7 @@ export default {
|
|||
&-describe {
|
||||
margin: 8px 0 32px;
|
||||
font-size: 14px;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
padding: 28px 32px;
|
||||
line-height: 28px;
|
||||
font-size: 20px;
|
||||
background: @bg-color-container;
|
||||
color: @text-color-primary;
|
||||
background: var(--tdvns-bg-color-container);
|
||||
color: var(--tdvns-text-color-primary);
|
||||
text-align: left;
|
||||
border-radius: @border-radius;
|
||||
border-radius: var(--tdvns-border-radius);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
.contract {
|
||||
width: 340px;
|
||||
height: 88px;
|
||||
border-radius: @border-radius;
|
||||
border-radius: var(--tdvns-border-radius);
|
||||
margin: 8px 0;
|
||||
|
||||
&-title {
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
line-height: 24px;
|
||||
margin: 20px 0 6px;
|
||||
font-size: 14px;
|
||||
color: @text-color-placeholder;
|
||||
color: var(--tdvns-text-color-placeholder);
|
||||
}
|
||||
|
||||
&-detail {
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
overflow: hidden;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
color: @text-color-secondary;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -67,9 +67,9 @@
|
|||
|
||||
.user-intro {
|
||||
padding: 32px 24px;
|
||||
background: @brand-color;
|
||||
border-radius: @border-radius;
|
||||
color: @text-color-primary;
|
||||
background: var(--tdvns-brand-color);
|
||||
border-radius: var(--tdvns-border-radius);
|
||||
color: var(--tdvns-text-color-primary);
|
||||
|
||||
.name {
|
||||
line-height: 37px;
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
.user-info {
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
|
||||
.hiredate,
|
||||
.del,
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
|
||||
.product-container {
|
||||
margin-top: 16px;
|
||||
border-radius: @border-radius;
|
||||
border-radius: var(--tdvns-border-radius);
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
|
|
@ -123,8 +123,8 @@
|
|||
|
||||
.content-container {
|
||||
margin-top: 16px;
|
||||
background: @bg-color-container;
|
||||
border-radius: @border-radius;
|
||||
background: var(--tdvns-bg-color-container);
|
||||
border-radius: var(--tdvns-border-radius);
|
||||
}
|
||||
|
||||
.user-team {
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@
|
|||
@import './theme/index.less';
|
||||
|
||||
body {
|
||||
color: @text-color-secondary;
|
||||
font-family: -apple-system, BlinkMacSystemFont, @font-family;
|
||||
font-size: @font-size-base;
|
||||
color: var(--tdvns-text-color-secondary);
|
||||
font-family: -apple-system, BlinkMacSystemFont, var(--tdvns-font-family);
|
||||
font-size: var(--tdvns-font-size-base);
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: @font-family;
|
||||
font-family: var(--tdvns-font-family);
|
||||
}
|
||||
|
||||
ul,
|
||||
|
|
@ -41,22 +41,22 @@ p {
|
|||
}
|
||||
|
||||
.t-button-link {
|
||||
color: @brand-color;
|
||||
color: var(--tdvns-brand-color);
|
||||
text-decoration: none;
|
||||
margin-right: @spacer-3;
|
||||
margin-right: var(--tdvns-spacer-3);
|
||||
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 {
|
||||
color: @brand-color-hover;
|
||||
color: var(--tdvns-brand-color-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @brand-color-active;
|
||||
color: var(--tdvns-brand-color-active);
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: @brand-color-active;
|
||||
color: var(--tdvns-brand-color-active);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -69,7 +69,7 @@ p {
|
|||
}
|
||||
|
||||
.t-button + .t-button {
|
||||
margin-left: @spacer;
|
||||
margin-left: var(--tdvns-spacer);
|
||||
}
|
||||
|
||||
.container-base-margin-top {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
}
|
||||
|
||||
.t-button + .t-button {
|
||||
margin-left: @spacer;
|
||||
margin-left: var(--tdvns-spacer);
|
||||
}
|
||||
|
||||
.t-layout.t-layout--with-sider {
|
||||
|
|
@ -25,13 +25,13 @@
|
|||
}
|
||||
}
|
||||
.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) {
|
||||
background-color: @brand-color-1;
|
||||
color: @brand-color;
|
||||
background-color: var(--tdvns-brand-color-1);
|
||||
color: var(--tdvns-brand-color);
|
||||
.t-icon {
|
||||
color: @brand-color;
|
||||
color: var(--tdvns-brand-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
}
|
||||
|
||||
&-content-layout {
|
||||
padding: @spacer-3;
|
||||
padding: var(--tdvns-spacer-3);
|
||||
}
|
||||
|
||||
&-layout {
|
||||
|
|
@ -68,13 +68,13 @@
|
|||
z-index: 100;
|
||||
}
|
||||
&-tabs-nav + .@{prefix}-content-layout {
|
||||
padding-top: @spacer-3;
|
||||
padding-top: var(--tdvns-spacer-3);
|
||||
}
|
||||
}
|
||||
|
||||
&-footer-layout {
|
||||
padding: 0;
|
||||
margin-bottom: @spacer-2;
|
||||
margin-bottom: var(--tdvns-spacer-2);
|
||||
}
|
||||
|
||||
// slideBar
|
||||
|
|
@ -135,12 +135,12 @@
|
|||
padding: 0 24px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
}
|
||||
|
||||
&-logo-normal {
|
||||
color: @brand-color;
|
||||
font-size: @font-size-l;
|
||||
color: var(--tdvns-brand-color);
|
||||
font-size: var(--tdvns-font-size-l);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
|
|
@ -172,7 +172,7 @@
|
|||
}
|
||||
|
||||
.version-container {
|
||||
color: @text-color-primary;
|
||||
color: var(--tdvns-text-color-primary);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,255 +1,257 @@
|
|||
/** 公共前缀 */
|
||||
@prefix: tdesign-starter;
|
||||
|
||||
:root {
|
||||
|
||||
/* 颜色色板 */
|
||||
|
||||
@brand-color-1: var(--td-brand-color-1);
|
||||
@brand-color-2: var(--td-brand-color-2);
|
||||
@brand-color-3: var(--td-brand-color-3);
|
||||
@brand-color-4: var(--td-brand-color-4);
|
||||
@brand-color-5: var(--td-brand-color-5);
|
||||
@brand-color-6: var(--td-brand-color-6);
|
||||
@brand-color-7: var(--td-brand-color-7);
|
||||
@brand-color-8: var(--td-brand-color-8);
|
||||
@brand-color-9: var(--td-brand-color-9);
|
||||
@brand-color-10: var(--td-brand-color-10);
|
||||
--tdvns-brand-color-1: var(--td-brand-color-1);
|
||||
--tdvns-brand-color-2: var(--td-brand-color-2);
|
||||
--tdvns-brand-color-3: var(--td-brand-color-3);
|
||||
--tdvns-brand-color-4: var(--td-brand-color-4);
|
||||
--tdvns-brand-color-5: var(--td-brand-color-5);
|
||||
--tdvns-brand-color-6: var(--td-brand-color-6);
|
||||
--tdvns-brand-color-7: var(--td-brand-color-7);
|
||||
--tdvns-brand-color-8: var(--td-brand-color-8);
|
||||
--tdvns-brand-color-9: var(--td-brand-color-9);
|
||||
--tdvns-brand-color-10: var(--td-brand-color-10);
|
||||
|
||||
@warning-color-1: var(--td-warning-color-1);
|
||||
@warning-color-2: var(--td-warning-color-2);
|
||||
@warning-color-3: var(--td-warning-color-3);
|
||||
@warning-color-4: var(--td-warning-color-4);
|
||||
@warning-color-5: var(--td-warning-color-5);
|
||||
@warning-color-6: var(--td-warning-color-6);
|
||||
@warning-color-7: var(--td-warning-color-7);
|
||||
@warning-color-8: var(--td-warning-color-8);
|
||||
@warning-color-9: var(--td-warning-color-9);
|
||||
@warning-color-10: var(--td-warning-color-10);
|
||||
--tdvns-warning-color-1: var(--td-warning-color-1);
|
||||
--tdvns-warning-color-2: var(--td-warning-color-2);
|
||||
--tdvns-warning-color-3: var(--td-warning-color-3);
|
||||
--tdvns-warning-color-4: var(--td-warning-color-4);
|
||||
--tdvns-warning-color-5: var(--td-warning-color-5);
|
||||
--tdvns-warning-color-6: var(--td-warning-color-6);
|
||||
--tdvns-warning-color-7: var(--td-warning-color-7);
|
||||
--tdvns-warning-color-8: var(--td-warning-color-8);
|
||||
--tdvns-warning-color-9: var(--td-warning-color-9);
|
||||
--tdvns-warning-color-10: var(--td-warning-color-10);
|
||||
|
||||
@error-color-1: var(--td-error-color-1);
|
||||
@error-color-2: var(--td-error-color-2);
|
||||
@error-color-3: var(--td-error-color-3);
|
||||
@error-color-4: var(--td-error-color-4);
|
||||
@error-color-5: var(--td-error-color-5);
|
||||
@error-color-6: var(--td-error-color-6);
|
||||
@error-color-7: var(--td-error-color-7);
|
||||
@error-color-8: var(--td-error-color-8);
|
||||
@error-color-9: var(--td-error-color-9);
|
||||
@error-color-10: var(--td-error-color-10);
|
||||
--tdvns-error-color-1: var(--td-error-color-1);
|
||||
--tdvns-error-color-2: var(--td-error-color-2);
|
||||
--tdvns-error-color-3: var(--td-error-color-3);
|
||||
--tdvns-error-color-4: var(--td-error-color-4);
|
||||
--tdvns-error-color-5: var(--td-error-color-5);
|
||||
--tdvns-error-color-6: var(--td-error-color-6);
|
||||
--tdvns-error-color-7: var(--td-error-color-7);
|
||||
--tdvns-error-color-8: var(--td-error-color-8);
|
||||
--tdvns-error-color-9: var(--td-error-color-9);
|
||||
--tdvns-error-color-10: var(--td-error-color-10);
|
||||
|
||||
@success-color-1: var(--td-success-color-1);
|
||||
@success-color-2: var(--td-success-color-2);
|
||||
@success-color-3: var(--td-success-color-3);
|
||||
@success-color-4: var(--td-success-color-4);
|
||||
@success-color-5: var(--td-success-color-5);
|
||||
@success-color-6: var(--td-success-color-6);
|
||||
@success-color-7: var(--td-success-color-7);
|
||||
@success-color-8: var(--td-success-color-8);
|
||||
@success-color-9: var(--td-success-color-9);
|
||||
@success-color-10: var(--td-success-color-10);
|
||||
--tdvns-success-color-1: var(--td-success-color-1);
|
||||
--tdvns-success-color-2: var(--td-success-color-2);
|
||||
--tdvns-success-color-3: var(--td-success-color-3);
|
||||
--tdvns-success-color-4: var(--td-success-color-4);
|
||||
--tdvns-success-color-5: var(--td-success-color-5);
|
||||
--tdvns-success-color-6: var(--td-success-color-6);
|
||||
--tdvns-success-color-7: var(--td-success-color-7);
|
||||
--tdvns-success-color-8: var(--td-success-color-8);
|
||||
--tdvns-success-color-9: var(--td-success-color-9);
|
||||
--tdvns-success-color-10: var(--td-success-color-10);
|
||||
|
||||
@gray-color-1: var(--td-gray-color-1);
|
||||
@gray-color-2: var(--td-gray-color-2);
|
||||
@gray-color-3: var(--td-gray-color-3);
|
||||
@gray-color-4: var(--td-gray-color-4);
|
||||
@gray-color-5: var(--td-gray-color-5);
|
||||
@gray-color-6: var(--td-gray-color-6);
|
||||
@gray-color-7: var(--td-gray-color-7);
|
||||
@gray-color-8: var(--td-gray-color-8);
|
||||
@gray-color-9: var(--td-gray-color-9);
|
||||
@gray-color-10: var(--td-gray-color-10);
|
||||
@gray-color-11: var(--td-gray-color-11);
|
||||
@gray-color-12: var(--td-gray-color-12);
|
||||
@gray-color-13: var(--td-gray-color-13);
|
||||
@gray-color-14: var(--td-gray-color-14);
|
||||
--tdvns-gray-color-1: var(--td-gray-color-1);
|
||||
--tdvns-gray-color-2: var(--td-gray-color-2);
|
||||
--tdvns-gray-color-3: var(--td-gray-color-3);
|
||||
--tdvns-gray-color-4: var(--td-gray-color-4);
|
||||
--tdvns-gray-color-5: var(--td-gray-color-5);
|
||||
--tdvns-gray-color-6: var(--td-gray-color-6);
|
||||
--tdvns-gray-color-7: var(--td-gray-color-7);
|
||||
--tdvns-gray-color-8: var(--td-gray-color-8);
|
||||
--tdvns-gray-color-9: var(--td-gray-color-9);
|
||||
--tdvns-gray-color-10: var(--td-gray-color-10);
|
||||
--tdvns-gray-color-11: var(--td-gray-color-11);
|
||||
--tdvns-gray-color-12: var(--td-gray-color-12);
|
||||
--tdvns-gray-color-13: var(--td-gray-color-13);
|
||||
--tdvns-gray-color-14: var(--td-gray-color-14);
|
||||
|
||||
/* 文字 & 图标 颜色 */
|
||||
@font-white-1: var(--td-font-white-1);
|
||||
@font-white-2: var(--td-font-white-2);
|
||||
@font-white-3: var(--td-font-white-3);
|
||||
@font-white-4: var(--td-font-white-4);
|
||||
--tdvns-font-white-1: var(--td-font-white-1);
|
||||
--tdvns-font-white-2: var(--td-font-white-2);
|
||||
--tdvns-font-white-3: var(--td-font-white-3);
|
||||
--tdvns-font-white-4: var(--td-font-white-4);
|
||||
|
||||
@font-gray-1: var(--td-font-gray-1);
|
||||
@font-gray-2: var(--td-font-gray-2);
|
||||
@font-gray-3: var(--td-font-gray-3);
|
||||
@font-gray-4: var(--td-font-gray-4);
|
||||
--tdvns-font-gray-1: var(--td-font-gray-1);
|
||||
--tdvns-font-gray-2: var(--td-font-gray-2);
|
||||
--tdvns-font-gray-3: var(--td-font-gray-3);
|
||||
--tdvns-font-gray-4: var(--td-font-gray-4);
|
||||
|
||||
/* 基础颜色 */
|
||||
@brand-color: var(--td-brand-color); // 色彩-品牌-可操作
|
||||
@warning-color: var(--td-warning-color); // 色彩-功能-警告
|
||||
@error-color: var(--td-error-color); // 色彩-功能-失败
|
||||
@success-color: var(--td-success-color); // 色彩-功能-成功
|
||||
--tdvns-brand-color: var(--td-brand-color); // 色彩-品牌-可操作
|
||||
--tdvns-warning-color: var(--td-warning-color); // 色彩-功能-警告
|
||||
--tdvns-error-color: var(--td-error-color); // 色彩-功能-失败
|
||||
--tdvns-success-color: var(--td-success-color); // 色彩-功能-成功
|
||||
|
||||
|
||||
// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
|
||||
@brand-color-hover: var(--td-brand-color-hover); // hover态
|
||||
@brand-color-focus: var(--td-brand-color-focus); // focus态，包括鼠标和键盘
|
||||
@brand-color-active: var(--td-brand-color-active); // 点击态
|
||||
@brand-color-disabled: var(--td-brand-color-disabled); // 禁用态
|
||||
@brand-color-light: var(--td-brand-color-light); // 浅色的选中态
|
||||
--tdvns-brand-color-hover: var(--td-brand-color-hover); // hover态
|
||||
--tdvns-brand-color-focus: var(--td-brand-color-focus); // focus态，包括鼠标和键盘
|
||||
--tdvns-brand-color-active: var(--td-brand-color-active); // 点击态
|
||||
--tdvns-brand-color-disabled: var(--td-brand-color-disabled); // 禁用态
|
||||
--tdvns-brand-color-light: var(--td-brand-color-light); // 浅色的选中态
|
||||
|
||||
// 警告色扩展
|
||||
@warning-color-hover: var(--td-warning-color-hover);
|
||||
@warning-color-focus: var(--td-warning-color-focus);
|
||||
@warning-color-active: var(--td-warning-color-active);
|
||||
@warning-color-disabled: var(--td-warning-color-disabled);
|
||||
@warning-color-light: var(--td-warning-color-light);
|
||||
--tdvns-warning-color-hover: var(--td-warning-color-hover);
|
||||
--tdvns-warning-color-focus: var(--td-warning-color-focus);
|
||||
--tdvns-warning-color-active: var(--td-warning-color-active);
|
||||
--tdvns-warning-color-disabled: var(--td-warning-color-disabled);
|
||||
--tdvns-warning-color-light: var(--td-warning-color-light);
|
||||
|
||||
// 失败/错误色扩展
|
||||
@error-color-hover: var(--td-error-color-hover);
|
||||
@error-color-focus: var(--td-error-color-focus);
|
||||
@error-color-active: var(--td-error-color-active);
|
||||
@error-color-disabled: var(--td-error-color-disabled);
|
||||
@error-color-light: var(--td-error-color-light);
|
||||
--tdvns-error-color-hover: var(--td-error-color-hover);
|
||||
--tdvns-error-color-focus: var(--td-error-color-focus);
|
||||
--tdvns-error-color-active: var(--td-error-color-active);
|
||||
--tdvns-error-color-disabled: var(--td-error-color-disabled);
|
||||
--tdvns-error-color-light: var(--td-error-color-light);
|
||||
|
||||
// 成功色扩展
|
||||
@success-color-hover: var(--td-success-color-hover);
|
||||
@success-color-focus: var(--td-success-color-focus);
|
||||
@success-color-active: var(--td-success-color-active);
|
||||
@success-color-disabled: var(--td-success-color-disabled);
|
||||
@success-color-light: var(--td-success-color-light);
|
||||
--tdvns-success-color-hover: var(--td-success-color-hover);
|
||||
--tdvns-success-color-focus: var(--td-success-color-focus);
|
||||
--tdvns-success-color-active: var(--td-success-color-active);
|
||||
--tdvns-success-color-disabled: var(--td-success-color-disabled);
|
||||
--tdvns-success-color-light: var(--td-success-color-light);
|
||||
|
||||
// 遮罩
|
||||
@mask-active: var(--td-mask-active); // 遮罩-弹出
|
||||
@mask-disabled: var(--td-mask-disabled); // 遮罩-禁用
|
||||
--tdvns-mask-active: var(--td-mask-active); // 遮罩-弹出
|
||||
--tdvns-mask-disabled: var(--td-mask-disabled); // 遮罩-禁用
|
||||
|
||||
// 背景色
|
||||
@bg-color-page: var(--td-bg-color-page); // 色彩 - page
|
||||
@bg-color-container: var(--td-bg-color-container); // 色彩 - 容器
|
||||
@bg-color-container-hover: var(--td-bg-color-container-hover); // 色彩 - 容器 - hover
|
||||
@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-page: var(--td-bg-color-page); // 色彩 - page
|
||||
--tdvns-bg-color-container: var(--td-bg-color-container); // 色彩 - 容器
|
||||
--tdvns-bg-color-container-hover: var(--td-bg-color-container-hover); // 色彩 - 容器 - hover
|
||||
--tdvns-bg-color-container-active: var(--td-bg-color-container-active); // 色彩 - 容器 - active
|
||||
--tdvns-bg-color-container-select: var(--td-bg-color-container-select); // 色彩 - 容器 - select
|
||||
|
||||
@bg-color-secondarycontainer: var(--td-bg-color-secondarycontainer); // 色彩 - 次级容器
|
||||
@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: var(--td-bg-color-secondarycontainer); // 色彩 - 次级容器
|
||||
--tdvns-bg-color-secondarycontainer-hover: var(--td-bg-color-secondarycontainer-hover); // 色彩 - 次级容器 - hover
|
||||
--tdvns-bg-color-secondarycontainer-active: var(--td-bg-color-secondarycontainer-active); // 色彩 - 次级容器 - active
|
||||
|
||||
@bg-color-component: var(--td-bg-color-component); // 色彩 - 组件
|
||||
@bg-color-component-hover: var(--td-bg-color-component-hover); // 色彩 - 组件 - hover
|
||||
@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: var(--td-bg-color-component); // 色彩 - 组件
|
||||
--tdvns-bg-color-component-hover: var(--td-bg-color-component-hover); // 色彩 - 组件 - hover
|
||||
--tdvns-bg-color-component-active: var(--td-bg-color-component-active); // 色彩 - 组件 - active
|
||||
--tdvns-bg-color-component-disabled: var(--td-bg-color-component-disabled); // 色彩 - 组件 - disabled
|
||||
|
||||
// TODO: 考虑是否在组件内部做判断，不增加额外变量
|
||||
// 特殊组件背景色，目前只用于 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); // 色彩-文字-主要
|
||||
@text-color-secondary: var(--td-text-color-secondary); // 色彩-文字-次要
|
||||
@text-color-placeholder: var(--td-text-color-placeholder); // 色彩-文字-占位符/说明
|
||||
@text-color-disabled: var(--td-text-color-disabled); // 色彩-文字-禁用
|
||||
@text-color-anti: var(--td-text-color-anti); // 色彩-文字-反色
|
||||
@text-color-brand: var(--td-text-color-brand); // 色彩-文字-品牌
|
||||
@text-color-link: var(--td-text-color-link); // 色彩-文字-链接
|
||||
--tdvns-text-color-primary: var(--td-text-color-primary); // 色彩-文字-主要
|
||||
--tdvns-text-color-secondary: var(--td-text-color-secondary); // 色彩-文字-次要
|
||||
--tdvns-text-color-placeholder: var(--td-text-color-placeholder); // 色彩-文字-占位符/说明
|
||||
--tdvns-text-color-disabled: var(--td-text-color-disabled); // 色彩-文字-禁用
|
||||
--tdvns-text-color-anti: var(--td-text-color-anti); // 色彩-文字-反色
|
||||
--tdvns-text-color-brand: var(--td-text-color-brand); // 色彩-文字-品牌
|
||||
--tdvns-text-color-link: var(--td-text-color-link); // 色彩-文字-链接
|
||||
|
||||
// 分割线
|
||||
@border-level-1-color: var(--td-border-level-1-color);
|
||||
@component-stroke: var(--td-component-stroke);
|
||||
--tdvns-border-level-1-color: var(--td-border-level-1-color);
|
||||
--tdvns-component-stroke: var(--td-component-stroke);
|
||||
// 边框
|
||||
@border-level-2-color: var(--td-border-level-2-color);
|
||||
@component-border: var(--td-component-border);
|
||||
--tdvns-border-level-2-color: var(--td-border-level-2-color);
|
||||
--tdvns-component-border: var(--td-component-border);
|
||||
|
||||
// shadow
|
||||
|
||||
// 基础/下层 投影 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);
|
||||
@shadow-inset-right: var(--td-shadow-inset-right);
|
||||
@shadow-inset-bottom: var(--td-shadow-inset-bottom);
|
||||
@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-top: var(--td-shadow-inset-top);
|
||||
--tdvns-shadow-inset-right: var(--td-shadow-inset-right);
|
||||
--tdvns-shadow-inset-bottom: var(--td-shadow-inset-bottom);
|
||||
--tdvns-shadow-inset-left: var(--td-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;
|
||||
@shadow-3-inset: @shadow-3, @shadow-inset;
|
||||
--tdvns-shadow-2-inset: var(--td-shadow-2), var(--td-shadow-inset);
|
||||
--tdvns-shadow-3-inset: var(--td-shadow-3), var(--td-shadow-inset);
|
||||
|
||||
// Spacer
|
||||
@spacer: 8px;
|
||||
@spacer-s: @spacer * .5; // 间距-4
|
||||
@spacer-l: @spacer * 1.5; // 间距-12
|
||||
@spacer-1: @spacer; // 间距-8
|
||||
@spacer-2: @spacer * 2; // 间距-16
|
||||
@spacer-3: @spacer * 3; // 间距-24
|
||||
@spacer-4: @spacer * 4; // 间距-32
|
||||
@spacer-5: @spacer * 5; // 间距-大-40
|
||||
@spacer-6: @spacer * 6; // 间距-大-48
|
||||
@spacer-7: @spacer * 7; // 间距-大-48
|
||||
@spacer-8: @spacer * 8; // 间距-大-48
|
||||
@spacer-9: @spacer * 9; // 间距-大-48
|
||||
@spacer-10: @spacer * 10; // 间距-大-80
|
||||
--tdvns-spacer: 8px;
|
||||
--tdvns-spacer-s: calc(var(--tdvns-spacer) * .5); // 间距-4
|
||||
--tdvns-spacer-l: calc(var(--tdvns-spacer) * 1.5); // 间距-12
|
||||
--tdvns-spacer-1: var(--tdvns-spacer); // 间距-8
|
||||
--tdvns-spacer-2: calc(var(--tdvns-spacer) * 2); // 间距-16
|
||||
--tdvns-spacer-3: calc(var(--tdvns-spacer) * 3); // 间距-24
|
||||
--tdvns-spacer-4: calc(var(--tdvns-spacer) * 4); // 间距-32
|
||||
--tdvns-spacer-5: calc(var(--tdvns-spacer) * 5); // 间距-大-40
|
||||
--tdvns-spacer-6: calc(var(--tdvns-spacer) * 6); // 间距-大-48
|
||||
--tdvns-spacer-7: calc(var(--tdvns-spacer) * 7); // 间距-大-48
|
||||
--tdvns-spacer-8: calc(var(--tdvns-spacer) * 8); // 间距-大-48
|
||||
--tdvns-spacer-9: calc(var(--tdvns-spacer) * 9); // 间距-大-48
|
||||
--tdvns-spacer-10: calc(var(--tdvns-spacer) * 10); // 间距-大-80
|
||||
|
||||
// Font
|
||||
@font-size: 10px;
|
||||
@font-size-s: @font-size * 1.2; // 字号-五级字号
|
||||
@font-size-base: @font-size * 1.4; // 字号-四级字号
|
||||
@font-size-l: @font-size * 1.6; // 字号-三级字号
|
||||
@font-size-xl: @font-size * 2; // 字号-二级字号
|
||||
@font-size-xxl: @font-size * 3.6; // 字号-一级字号
|
||||
--tdvns-font-size: 10px;
|
||||
--tdvns-font-size-s: calc(var(--tdvns-font-size) * 1.2); // 字号-五级字号
|
||||
--tdvns-font-size-base: calc(var(--tdvns-font-size) * 1.4); // 字号-四级字号
|
||||
--tdvns-font-size-l: calc(var(--tdvns-font-size) * 1.6); // 字号-三级字号
|
||||
--tdvns-font-size-xl: calc(var(--tdvns-font-size) * 2); // 字号-二级字号
|
||||
--tdvns-font-size-xxl: calc(var(--tdvns-font-size) * 3.6); // 字号-一级字号
|
||||
|
||||
// Line Height
|
||||
@text-line-height: 1.5; // 行高-常规
|
||||
@text-line-height-s: 20px; // 行高-对应五级文字
|
||||
@text-line-height-base: 22px; // 行高-对应四级文字
|
||||
@text-line-height-l: 24px; // 行高-对应三级文字
|
||||
@text-line-height-xl: 28px; // 行高-对应二级文字
|
||||
@text-line-height-xxl: 44px; //行高-对应一级文字
|
||||
--tdvns-text-line-height: 1.5; // 行高-常规
|
||||
--tdvns-text-line-height-s: 20px; // 行高-对应五级文字
|
||||
--tdvns-text-line-height-base: 22px; // 行高-对应四级文字
|
||||
--tdvns-text-line-height-l: 24px; // 行高-对应三级文字
|
||||
--tdvns-text-line-height-xl: 28px; // 行高-对应二级文字
|
||||
--tdvns-text-line-height-xxl: 44px; //行高-对应一级文字
|
||||
|
||||
@font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规
|
||||
@font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体
|
||||
--tdvns-font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规
|
||||
--tdvns-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体
|
||||
|
||||
// Border Radius
|
||||
@border-radius: 3px; // 圆角-全局
|
||||
@border-radius-50: 50%; // 圆角-全圆角
|
||||
--tdvns-border-radius: 3px; // 圆角-全局
|
||||
--tdvns-border-radius-50: 50%; // 圆角-全圆角
|
||||
|
||||
// 表单相关
|
||||
@form-height: 30px;
|
||||
@form-text-color: @text-color-primary;
|
||||
@form-bg-color: @bg-color-container;
|
||||
@form-border-color: @border-level-2-color;
|
||||
--tdvns-form-height: 30px;
|
||||
--tdvns-form-text-color: var(--td-text-color-primary);
|
||||
--tdvns-form-bg-color: var(--td-bg-color-container);
|
||||
--tdvns-form-border-color: var(--td-border-level-2-color);
|
||||
|
||||
// 图标尺寸
|
||||
@icon-default: 16px;
|
||||
@icon-l: 24px;
|
||||
--tdvns-icon-default: 16px;
|
||||
--tdvns-icon-l: 24px;
|
||||
|
||||
// 滚动条颜色
|
||||
@scrollbar-color: var(--td-scrollbar-color);
|
||||
--tdvns-scrollbar-color: var(--td-scrollbar-color);
|
||||
|
||||
// 响应式断点
|
||||
@screen-sm: 768px;
|
||||
@screen-md: 992px;
|
||||
@screen-lg: 1200px;
|
||||
@screen-xl: 1400px;
|
||||
--tdvns-screen-sm: 768px;
|
||||
--tdvns-screen-md: 992px;
|
||||
--tdvns-screen-lg: 1200px;
|
||||
--tdvns-screen-xl: 1400px;
|
||||
|
||||
@screen-sm-min: @screen-sm;
|
||||
@screen-md-min: @screen-md;
|
||||
@screen-lg-min: @screen-lg;
|
||||
@screen-xl-min: @screen-xl;
|
||||
--tdvns-screen-sm-min: var(--tdvns-screen-sm);
|
||||
--tdvns-screen-md-min: var(--tdvns-screen-md);
|
||||
--tdvns-screen-lg-min: var(--tdvns-screen-lg);
|
||||
--tdvns-screen-xl-min: var(--tdvns-screen-xl);
|
||||
|
||||
@screen-sm-max: (@screen-md-min - 1px);
|
||||
@screen-md-max: (@screen-lg-min - 1px);
|
||||
@screen-lg-max: (@screen-xl-min - 1px);
|
||||
--tdvns-screen-sm-max: calc(var(--tdvns-screen-md-min) - 1px);
|
||||
--tdvns-screen-md-max: calc(var(--tdvns-screen-lg-min) - 1px);
|
||||
--tdvns-screen-lg-max: calc(var(--tdvns-screen-xl-min) - 1px);
|
||||
|
||||
|
||||
// 动画
|
||||
@anim-time-fn-easing: cubic-bezier(.38, 0, .24, 1);
|
||||
@anim-time-fn-ease-out: cubic-bezier(0, 0, .15, 1);
|
||||
@anim-time-fn-ease-in: cubic-bezier(.82, 0, 1, .9);
|
||||
@anim-duration-base: .2s;
|
||||
@anim-duration-moderate: .24s;
|
||||
@anim-duration-slow: .28s;
|
||||
--tdvns-anim-time-fn-easing: cubic-bezier(.38, 0, .24, 1);
|
||||
--tdvns-anim-time-fn-ease-out: cubic-bezier(0, 0, .15, 1);
|
||||
--tdvns-anim-time-fn-ease-in: cubic-bezier(.82, 0, 1, .9);
|
||||
--tdvns-anim-duration-base: .2s;
|
||||
--tdvns-anim-duration-moderate: .24s;
|
||||
--tdvns-anim-duration-slow: .28s;
|
||||
|
||||
// 统一管理各组件层级关系
|
||||
@z-index-affix: 500;
|
||||
@z-index-drawer: 1500;
|
||||
@z-index-dialog: 2500;
|
||||
@z-index-loading: 3500;
|
||||
@z-index-message: 5000;
|
||||
@z-index-Popup: 5500;
|
||||
@z-index-Notification: 6000;
|
||||
|
||||
--tdvns-z-index-affix: 500;
|
||||
--tdvns-z-index-drawer: 1500;
|
||||
--tdvns-z-index-dialog: 2500;
|
||||
--tdvns-z-index-loading: 3500;
|
||||
--tdvns-z-index-message: 5000;
|
||||
--tdvns-z-index-Popup: 5500;
|
||||
--tdvns-z-index-Notification: 6000;
|
||||
|
||||
}
|
||||
|
|
@ -18,14 +18,14 @@ export function getColorFromTheme(theme: string) {
|
|||
const themeColor = getBrandColor(theme, colorList);
|
||||
|
||||
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 defaultGradients = !isDarkMode ? defaultLightColor : defaultDarkColor;
|
||||
|
||||
const spliceThemeList = defaultGradients.slice(0, themIdx);
|
||||
themeColorList = defaultGradients.slice(themIdx, defaultGradients.length).concat(spliceThemeList);
|
||||
} else {
|
||||
theme = themeColor?.['@brand-color'];
|
||||
theme = themeColor?.['--td-brand-color'];
|
||||
themeColorList = Color.getRandomPalette({
|
||||
color: theme,
|
||||
colorGamut: 'bright',
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user