feat: replace duplicated token (#202)

* feat: replace duplicate token

* feat: optimize layout scroll bar style
This commit is contained in:
yuyang 2022-06-30 19:08:21 +08:00 committed by GitHub
parent 1fa7740e92
commit b8997d206c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 332 additions and 508 deletions

View File

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

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">
<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)"/>
<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)"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

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">
<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)"/>
<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)"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -9,8 +9,8 @@ import { prefix } from '@/config/global';
<style lang="less" scoped>
@import '@/style/variables';
.@{prefix}-footer {
color: var(--tdvns-text-color-placeholder);
.@{starter-prefix}-footer {
color: var(--td-text-color-placeholder);
line-height: 20px;
text-align: center;
}

View File

@ -156,7 +156,7 @@ const navToHelper = () => {
</script>
<style lang="less" scoped>
@import '@/style/variables.less';
.@{prefix}-header {
.@{starter-prefix}-header {
&-layout {
height: 64px;
}
@ -236,7 +236,7 @@ const navToHelper = () => {
height: 26px;
display: flex;
margin-left: 24px;
color: var(--tdvns-text-color-primary);
color: var(--td-text-color-primary);
.t-logo {
width: 100%;
@ -254,7 +254,7 @@ const navToHelper = () => {
.header-user-account {
display: inline-flex;
align-items: center;
color: var(--tdvns-text-color-primary);
color: var(--td-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 var(--tdvns-border-level-1-color);
border-bottom: 1px solid var(--td-border-level-1-color);
}
.t-menu--light {
.header-user-account {
color: var(--tdvns-text-color-primary);
color: var(--td-text-color-primary);
}
}
.t-menu--dark {
.t-head-menu__inner {
border-bottom: 1px solid var(--tdvns-gray-color-10);
border-bottom: 1px solid var(--td-gray-color-10);
}
.header-user-account {
color: rgba(255, 255, 255, 0.55);
}
.t-button {
--ripple-color: var(--tdvns-gray-color-10) !important;
--ripple-color: var(--td-gray-color-10) !important;
&:hover {
background: var(--tdvns-gray-color-12) !important;
background: var(--td-gray-color-12) !important;
}
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -4,10 +4,10 @@
display: flex;
align-items: center;
justify-content: center;
background-color: var(--tdvns-bg-color-container);
background-color: var(--td-bg-color-container);
padding: 0 32px 134px;
@media (max-width: var(--tdvns-screen-sm-max)) {
@media (max-width: @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: var(--tdvns-text-color-primary);
color: var(--td-text-color-primary);
margin: 64px 0 32px;
}
}
@ -34,7 +34,7 @@
justify-content: center;
padding-top: 30px;
padding-bottom: 28px;
background-color: var(--tdvns-bg-color-component);
background-color: var(--td-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: var(--tdvns-text-color-placeholder);
color: var(--td-text-color-placeholder);
padding-top: 8px;
display: inline-block;
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -25,13 +25,13 @@ export default {
height: 75vh;
&-icon {
font-size: 64px;
color: var(--tdvns-text-color-secondary);
color: var(--td-text-color-secondary);
}
&-title {
margin-top: 16px;
font-size: 20px;
color: var(--tdvns-text-color-primary);
color: var(--td-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: var(--tdvns-text-color-secondary);
color: var(--td-text-color-secondary);
line-height: 22px;
}
}

View File

@ -26,13 +26,13 @@ export default {
&-icon {
font-size: 64px;
color: var(--tdvns-success-color);
color: var(--td-success-color);
}
&-title {
margin-top: 16px;
font-size: 20px;
color: var(--tdvns-text-color-primary);
color: var(--td-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: var(--tdvns-text-color-primary);
color: var(--td-text-color-primary);
line-height: 22px;
}
}

View File

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

View File

@ -1,74 +1,4 @@
@import './variables.less';
@import './font-family.less';
@import './theme/index.less';
body {
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;
margin: 0;
}
pre {
font-family: var(--tdvns-font-family);
}
ul,
dl,
li,
dd,
dt {
margin: 0;
padding: 0;
list-style: none;
}
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
}
* {
box-sizing: border-box;
}
.t-button-link, a {
color: var(--tdvns-brand-color);
text-decoration: none;
margin-right: var(--tdvns-spacer-3);
cursor: pointer;
transition: color var(--tdvns-anim-duration-base) var(--tdvns-anim-time-fn-easing);
&:hover {
color: var(--tdvns-brand-color-hover);
}
&:active {
color: var(--tdvns-brand-color-active);
}
&--active {
color: var(--tdvns-brand-color-active);
}
&:focus {
text-decoration: none;
}
&:last-child {
margin-right: 0;
}
}
.container-base-margin-top {
margin-top: 16px;
}
@import './reset.less';

View File

@ -8,7 +8,7 @@
}
.t-button + .t-button {
margin-left: var(--tdvns-spacer);
margin-left: @spacer;
}
.t-jumper-jumper {
@ -27,7 +27,7 @@
.left-operation-container,
.operation-container {
.t-button + .t-button {
margin-left: var(--tdvns-spacer);
margin-left: @spacer;
}
}
@ -44,18 +44,20 @@
cursor: pointer;
}
}
.t-default-menu.t-menu--dark {
background: var(--tdvns-gray-color-13);
background: var(--td-gray-color-13);
}
.t-default-menu:not(.t-menu--dark) .t-menu__item.t-is-active:not(.t-is-opened) {
background-color: var(--tdvns-brand-color-1);
color: var(--tdvns-brand-color);
background-color: var(--td-brand-color-1);
color: var(--td-brand-color);
.t-icon {
color: var(--tdvns-brand-color);
color: var(--td-brand-color);
}
}
.@{prefix} {
.@{starter-prefix} {
// 布局元素调整
&-wrapper {
height: 100vh;
@ -75,7 +77,7 @@
}
&-content-layout {
padding: var(--tdvns-spacer-3);
padding: @spacer-3;
}
&-layout {
@ -87,14 +89,26 @@
overflow: visible;
z-index: 100;
}
&-tabs-nav + .@{prefix}-content-layout {
padding-top: var(--tdvns-spacer-3);
&-tabs-nav + .@{starter-prefix}-content-layout {
padding-top: @spacer-3;
}
&::-webkit-scrollbar {
width: 8px;
background: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 6px;
border: 2px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
}
}
&-footer-layout {
padding: 0;
margin-bottom: var(--tdvns-spacer-2);
margin-bottom: @spacer-2;
}
// slideBar
@ -155,12 +169,12 @@
padding: 0 24px;
height: 32px;
width: 100%;
color: var(--tdvns-text-color-primary);
color: var(--td-text-color-primary);
}
&-logo-normal {
color: var(--tdvns-brand-color);
font-size: var(--tdvns-font-size-l);
color: var(--td-brand-color);
font-size: @font-size-l;
transition: all 0.3s;
}
}
@ -192,7 +206,7 @@
}
.version-container {
color: var(--tdvns-text-color-primary);
color: var(--td-text-color-primary);
opacity: 0.4;
}
@ -200,3 +214,6 @@
z-index: 1000;
}
.container-base-margin-top {
margin-top: 16px;
}

68
src/style/reset.less Normal file
View File

@ -0,0 +1,68 @@
// 对部分样式进行重置
body {
color: var(--td-text-color-secondary);
font-family: -apple-system, BlinkMacSystemFont, @font-family;
font-size: @font-size-base;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
padding: 0;
margin: 0;
}
pre {
font-family: @font-family;
}
ul,
dl,
li,
dd,
dt {
margin: 0;
padding: 0;
list-style: none;
}
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
}
* {
box-sizing: border-box;
}
.t-button-link,
a {
color: var(--td-brand-color);
text-decoration: none;
margin-right: @spacer-3;
cursor: pointer;
transition: color @anim-duration-base @anim-time-fn-easing;
&:hover {
color: var(--td-brand-color-hover);
}
&:active {
color: var(--td-brand-color-active);
}
&--active {
color: var(--td-brand-color-active);
}
&:focus {
text-decoration: none;
}
&:last-child {
margin-right: 0;
}
}

View File

@ -1,257 +1,66 @@
/** 公共前缀 */
@prefix: tdesign-starter;
@starter-prefix: tdesign-starter;
:root {
/* 颜色色板 */
--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);
--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);
--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);
--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);
--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);
/* 文字 & 图标 颜色 */
--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);
--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);
/* 基础颜色 */
--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 / 聚焦 / 禁用 / 点击 等状态
--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); // 浅色的选中态
// 警告色扩展
--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);
// 失败/错误色扩展
--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);
// 成功色扩展
--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);
// 遮罩
--tdvns-mask-active: var(--td-mask-active); // 遮罩-弹出
--tdvns-mask-disabled: var(--td-mask-disabled); // 遮罩-禁用
// 背景色
--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
--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
--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 适配背景颜色
--tdvns-bg-color-specialcomponent: var(--td-bg-color-specialcomponent);
// 文本颜色
--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); // 色彩-文字-链接
// 分割线
--tdvns-border-level-1-color: var(--td-border-level-1-color);
--tdvns-component-stroke: var(--td-component-stroke);
// 边框
--tdvns-border-level-2-color: var(--td-border-level-2-color);
--tdvns-component-border: var(--td-component-border);
// shadow
// 基础/下层 投影 hover 使用的组件包括:表格 /
--tdvns-shadow-1: var(--td-shadow-1);
// 中层投影 下拉 使用的组件包括:下拉菜单 / 气泡确认框 / 选择器 /
--tdvns-shadow-2: var(--td-shadow-2);
// 上层投影(警示/弹窗)使用的组件包括:全局提示 / 消息通知
--tdvns-shadow-3: var(--td-shadow-3);
// 内投影 用于弹窗类组件(气泡确认框 / 全局提示 / 消息通知)的内描边
--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);
// 融合阴影
--tdvns-shadow-2-inset: var(--td-shadow-2), var(--td-shadow-inset);
--tdvns-shadow-3-inset: var(--td-shadow-3), var(--td-shadow-inset);
// 组件库本身只有色彩相关的css token 扩展其他css token使用 待组件库扩充其他token后再做替换 这里使用less vars 避免两种css token让使用者混淆
// tdesign 只保持一套token即可
// Spacer
--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
@spacer: 8px;
@spacer-s: calc(@spacer * 0.5); // 间距-4
@spacer-l: calc(@spacer * 1.5); // 间距-12
@spacer-1: @spacer; // 间距-8
@spacer-2: calc(@spacer * 2); // 间距-16
@spacer-3: calc(@spacer * 3); // 间距-24
@spacer-4: calc(@spacer * 4); // 间距-32
@spacer-5: calc(@spacer * 5); // 间距-大-40
@spacer-6: calc(@spacer * 6); // 间距-大-48
@spacer-7: calc(@spacer * 7); // 间距-大-48
@spacer-8: calc(@spacer * 8); // 间距-大-48
@spacer-9: calc(@spacer * 9); // 间距-大-48
@spacer-10: calc(@spacer * 10); // 间距-大-80
// Font
--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); // 字号-一级字号
@font-size: 10px;
@font-size-s: calc(@font-size * 1.2); // 字号-五级字号
@font-size-base: calc(@font-size * 1.4); // 字号-四级字号
@font-size-l: calc(@font-size * 1.6); // 字号-三级字号
@font-size-xl: calc(@font-size * 2); // 字号-二级字号
@font-size-xxl: calc(@font-size * 3.6); // 字号-一级字号
// Line Height
--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; //行高-对应一级文字
@line-height: 1.5; // 行高-常规
@line-height-s: 20px; // 行高-对应五级文字
@line-height-base: 22px; // 行高-对应四级文字
@line-height-l: 24px; // 行高-对应三级文字
@line-height-xl: 28px; // 行高-对应二级文字
@line-height-xxl: 44px; //行高-对应一级文字
--tdvns-font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规
--tdvns-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体
@font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规
@font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体
// Border Radius
--tdvns-border-radius: 3px; // 圆角-全局
--tdvns-border-radius-50: 50%; // 圆角-全圆角
// 表单相关
--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);
// 图标尺寸
--tdvns-icon-default: 16px;
--tdvns-icon-l: 24px;
// 滚动条颜色
--tdvns-scrollbar-color: var(--td-scrollbar-color);
@border-radius: 3px; // 圆角-全局
@border-radius-50: 50%; // 圆角-全圆角
// 响应式断点
--tdvns-screen-sm: 768px;
--tdvns-screen-md: 992px;
--tdvns-screen-lg: 1200px;
--tdvns-screen-xl: 1400px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;
@screen-xl: 1400px;
--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);
--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);
@screen-sm-min: @screen-sm;
@screen-md-min: @screen-md;
@screen-lg-min: @screen-lg;
@screen-xl-min: @screen-xl;
@screen-sm-max: calc(@screen-md-min - 1px);
@screen-md-max: calc(@screen-lg-min - 1px);
@screen-lg-max: calc(@screen-xl-min - 1px);
// 动画
--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;
// 统一管理各组件层级关系
--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;
}
@anim-time-fn-easing: cubic-bezier(0.38, 0, 0.24, 1);
@anim-time-fn-ease-out: cubic-bezier(0, 0, 0.15, 1);
@anim-time-fn-ease-in: cubic-bezier(0.82, 0, 1, 0.9);
@anim-duration-base: 0.2s;
@anim-duration-moderate: 0.24s;
@anim-duration-slow: 0.28s;