From 2c3ba03df533295136122b5abdd2918505446711 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Tue, 31 May 2022 19:03:52 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=85=A8=E9=9D=A2=E5=9F=BA?= =?UTF-8?q?=E4=BA=8ECSS=20Token=E6=94=B9=E9=80=A0=20(#157)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 去除冗余的less vars * 替换less vars为css vars * 统一css vars前缀 --- src/App.vue | 2 +- src/assets/assets-setting-auto.svg | 20 +- src/assets/assets-setting-light.svg | 20 +- src/components/color/index.vue | 2 +- src/components/product-card/index.vue | 4 +- src/components/result/index.vue | 22 +- src/components/thumbnail/index.vue | 2 +- src/components/trend/index.vue | 10 +- src/config/color.ts | 220 +++++------ src/layouts/components/Content.vue | 2 +- src/layouts/components/Footer.vue | 2 +- src/layouts/components/Header.vue | 14 +- src/layouts/components/Notice.vue | 20 +- src/layouts/components/Search.vue | 18 +- src/layouts/setting.vue | 14 +- .../dashboard/base/components/overview.vue | 2 +- .../dashboard/base/components/rank-list.vue | 4 +- .../dashboard/base/components/top-panel.vue | 18 +- src/pages/dashboard/detail/index.vue | 8 +- .../detail/advanced/components/Product.vue | 20 +- src/pages/detail/advanced/index.less | 14 +- src/pages/detail/base/index.less | 28 +- src/pages/detail/secondary/index.less | 16 +- src/pages/form/base/index.less | 10 +- src/pages/form/step/index.less | 2 +- src/pages/list/base/index.vue | 2 +- src/pages/list/components/CommonTable.vue | 4 +- src/pages/list/tree/index.vue | 6 +- src/pages/login/components/Header.vue | 2 +- src/pages/login/index.less | 26 +- .../result/browser-incompatible/index.vue | 6 +- src/pages/result/fail/index.vue | 6 +- src/pages/result/success/index.vue | 6 +- src/pages/user/index.less | 26 +- src/style/index.less | 22 +- src/style/layout.less | 24 +- src/style/variables.less | 368 +++++++++--------- src/utils/color.ts | 4 +- 38 files changed, 499 insertions(+), 497 deletions(-) diff --git a/src/App.vue b/src/App.vue index dbd2a79..5ec3955 100644 --- a/src/App.vue +++ b/src/App.vue @@ -20,6 +20,6 @@ onMounted(() => { @import '@/style/variables.less'; #nprogress .bar { - background: @brand-color !important; + background: var(--tdvns-brand-color) !important; } diff --git a/src/assets/assets-setting-auto.svg b/src/assets/assets-setting-auto.svg index 66f57de..f9049cc 100644 --- a/src/assets/assets-setting-auto.svg +++ b/src/assets/assets-setting-auto.svg @@ -1,13 +1,13 @@ - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/assets-setting-light.svg b/src/assets/assets-setting-light.svg index ffa8f34..5c4de2d 100644 --- a/src/assets/assets-setting-light.svg +++ b/src/assets/assets-setting-light.svg @@ -1,13 +1,13 @@ - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/src/components/color/index.vue b/src/components/color/index.vue index 91c143a..49069e7 100644 --- a/src/components/color/index.vue +++ b/src/components/color/index.vue @@ -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, }; }); diff --git a/src/components/product-card/index.vue b/src/components/product-card/index.vue index 39cd303..017883b 100644 --- a/src/components/product-card/index.vue +++ b/src/components/product-card/index.vue @@ -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; diff --git a/src/components/result/index.vue b/src/components/result/index.vue index 14e2d5a..de2b046 100644 --- a/src/components/result/index.vue +++ b/src/components/result/index.vue @@ -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); } } diff --git a/src/components/thumbnail/index.vue b/src/components/thumbnail/index.vue index e1ed55c..ff0e5f4 100644 --- a/src/components/thumbnail/index.vue +++ b/src/components/thumbnail/index.vue @@ -32,7 +32,7 @@ const className = computed(() => { } &-circle { - border-radius: @border-radius-50; + border-radius: var(--tdvns-border-radius-50); } &-layout { diff --git a/src/components/trend/index.vue b/src/components/trend/index.vue index 3c25f1c..e0387bf 100644 --- a/src/components/trend/index.vue +++ b/src/components/trend/index.vue @@ -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; } } diff --git a/src/config/color.ts b/src/config/color.ts index 79eed1c..897c832 100644 --- a/src/config/color.ts +++ b/src/config/color.ts @@ -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, 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); diff --git a/src/layouts/components/Content.vue b/src/layouts/components/Content.vue index 76cd3a0..a04105f 100644 --- a/src/layouts/components/Content.vue +++ b/src/layouts/components/Content.vue @@ -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 { diff --git a/src/layouts/components/Footer.vue b/src/layouts/components/Footer.vue index 790e439..5b13e4d 100644 --- a/src/layouts/components/Footer.vue +++ b/src/layouts/components/Footer.vue @@ -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; } diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue index 0e2e5ff..2fcd338 100644 --- a/src/layouts/components/Header.vue +++ b/src/layouts/components/Header.vue @@ -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; } } } diff --git a/src/layouts/components/Notice.vue b/src/layouts/components/Notice.vue index d283654..4007a0a 100644 --- a/src/layouts/components/Notice.vue +++ b/src/layouts/components/Notice.vue @@ -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); } } } diff --git a/src/layouts/components/Search.vue b/src/layouts/components/Search.vue index bbef8b1..8eae349 100644 --- a/src/layouts/components/Search.vue +++ b/src/layouts/components/Search.vue @@ -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 { diff --git a/src/layouts/setting.vue b/src/layouts/setting.vue index 1964716..c5b7a7f 100644 --- a/src/layouts/setting.vue +++ b/src/layouts/setting.vue @@ -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); } } diff --git a/src/pages/dashboard/base/components/overview.vue b/src/pages/dashboard/base/components/overview.vue index 6cbf67e..790dd21 100644 --- a/src/pages/dashboard/base/components/overview.vue +++ b/src/pages/dashboard/base/components/overview.vue @@ -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; diff --git a/src/pages/dashboard/base/components/rank-list.vue b/src/pages/dashboard/base/components/rank-list.vue index 0c1588c..e648b0a 100644 --- a/src/pages/dashboard/base/components/rank-list.vue +++ b/src/pages/dashboard/base/components/rank-list.vue @@ -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); } } diff --git a/src/pages/dashboard/base/components/top-panel.vue b/src/pages/dashboard/base/components/top-panel.vue index d11eb40..b40bdc0 100644 --- a/src/pages/dashboard/base/components/top-panel.vue +++ b/src/pages/dashboard/base/components/top-panel.vue @@ -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); } } } diff --git a/src/pages/dashboard/detail/index.vue b/src/pages/dashboard/detail/index.vue index 1822a56..05b4543 100644 --- a/src/pages/dashboard/detail/index.vue +++ b/src/pages/dashboard/detail/index.vue @@ -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; diff --git a/src/pages/detail/advanced/components/Product.vue b/src/pages/detail/advanced/components/Product.vue index 158e747..be71eda 100644 --- a/src/pages/detail/advanced/components/Product.vue +++ b/src/pages/detail/advanced/components/Product.vue @@ -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); } } } diff --git a/src/pages/detail/advanced/index.less b/src/pages/detail/advanced/index.less index fb17f41..42dbb59 100644 --- a/src/pages/detail/advanced/index.less +++ b/src/pages/detail/advanced/index.less @@ -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); } } } diff --git a/src/pages/detail/base/index.less b/src/pages/detail/base/index.less index 22002ad..4bbd463 100644 --- a/src/pages/detail/base/index.less +++ b/src/pages/detail/base/index.less @@ -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); } } } diff --git a/src/pages/detail/secondary/index.less b/src/pages/detail/secondary/index.less index 6971cdd..0dab0c3 100644 --- a/src/pages/detail/secondary/index.less +++ b/src/pages/detail/secondary/index.less @@ -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); } } diff --git a/src/pages/form/base/index.less b/src/pages/form/base/index.less index 106d6a0..9c7d480 100644 --- a/src/pages/form/base/index.less +++ b/src/pages/form/base/index.less @@ -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; } diff --git a/src/pages/form/step/index.less b/src/pages/form/step/index.less index 5875b98..b365029 100644 --- a/src/pages/form/step/index.less +++ b/src/pages/form/step/index.less @@ -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; diff --git a/src/pages/list/base/index.vue b/src/pages/list/base/index.vue index a879cb9..07fd182 100644 --- a/src/pages/list/base/index.vue +++ b/src/pages/list/base/index.vue @@ -210,7 +210,7 @@ const getContainer = () => { .selected-count { display: inline-block; margin-left: 8px; - color: @text-color-secondary; + color: var(--tdvns-text-color-secondary); } } diff --git a/src/pages/list/components/CommonTable.vue b/src/pages/list/components/CommonTable.vue index d0c3667..aaf6028 100644 --- a/src/pages/list/components/CommonTable.vue +++ b/src/pages/list/components/CommonTable.vue @@ -276,9 +276,9 @@ const getContainer = () => { diff --git a/src/pages/login/components/Header.vue b/src/pages/login/components/Header.vue index f5b8d46..5e1e585 100644 --- a/src/pages/login/components/Header.vue +++ b/src/pages/login/components/Header.vue @@ -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; diff --git a/src/pages/login/index.less b/src/pages/login/index.less index 845919f..cbb8e3f 100644 --- a/src/pages/login/index.less +++ b/src/pages/login/index.less @@ -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) { diff --git a/src/pages/result/browser-incompatible/index.vue b/src/pages/result/browser-incompatible/index.vue index a1e80c3..26a975f 100644 --- a/src/pages/result/browser-incompatible/index.vue +++ b/src/pages/result/browser-incompatible/index.vue @@ -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; } diff --git a/src/pages/result/fail/index.vue b/src/pages/result/fail/index.vue index 6fe8763..47a9183 100644 --- a/src/pages/result/fail/index.vue +++ b/src/pages/result/fail/index.vue @@ -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; } } diff --git a/src/pages/result/success/index.vue b/src/pages/result/success/index.vue index bfbcc06..ab34d87 100644 --- a/src/pages/result/success/index.vue +++ b/src/pages/result/success/index.vue @@ -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; } } diff --git a/src/pages/user/index.less b/src/pages/user/index.less index e9e6d9d..5d97793 100644 --- a/src/pages/user/index.less +++ b/src/pages/user/index.less @@ -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 { diff --git a/src/style/index.less b/src/style/index.less index 7705022..1977358 100644 --- a/src/style/index.less +++ b/src/style/index.less @@ -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 { diff --git a/src/style/layout.less b/src/style/layout.less index d3b79a2..a477c7a 100644 --- a/src/style/layout.less +++ b/src/style/layout.less @@ -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; } diff --git a/src/style/variables.less b/src/style/variables.less index a78c537..b5622cd 100644 --- a/src/style/variables.less +++ b/src/style/variables.less @@ -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; +} \ No newline at end of file diff --git a/src/utils/color.ts b/src/utils/color.ts index d01625b..f5c7632 100644 --- a/src/utils/color.ts +++ b/src/utils/color.ts @@ -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',