From 78140cb62809dca1d415ebf341d0427a8db3aced Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Tue, 22 Aug 2023 15:56:39 +0800 Subject: [PATCH 01/12] feat(dark-mode): add dark mode for mobile --- .../components/action-sheet/v2/_index.less | 4 +- .../components/action-sheet/v2/_var.less | 11 +- style/mobile/components/badge/v2/_index.less | 5 + style/mobile/components/badge/v2/_var.less | 1 + style/mobile/components/button/v2/_var.less | 6 +- .../mobile/components/calendar/v2/_index.less | 2 + style/mobile/components/calendar/v2/_var.less | 11 +- .../mobile/components/cascader/v2/_index.less | 2 +- style/mobile/components/cascader/v2/_var.less | 9 +- style/mobile/components/cell/v2/_index.less | 4 + style/mobile/components/cell/v2/_var.less | 10 +- .../mobile/components/check-tag/v2/_var.less | 4 +- .../mobile/components/checkbox/v2/_index.less | 2 +- style/mobile/components/checkbox/v2/_var.less | 11 +- style/mobile/components/collapse/v2/_var.less | 6 +- .../mobile/components/count-down/v2/_var.less | 6 +- style/mobile/components/dialog/v2/_var.less | 6 +- style/mobile/components/divider/v2/_var.less | 2 +- style/mobile/components/drawer/v2/_index.less | 3 +- style/mobile/components/drawer/v2/_var.less | 2 +- .../components/dropdown-menu/v2/_var.less | 4 +- style/mobile/components/empty/_var.less | 4 +- style/mobile/components/footer/_index.less | 1 + style/mobile/components/footer/_var.less | 5 +- .../mobile/components/grid-item/v2/_var.less | 4 +- style/mobile/components/image/v2/_var.less | 4 +- .../components/indexes-anchor/v2/_var.less | 2 +- style/mobile/components/indexes/v2/_var.less | 4 +- style/mobile/components/input/v2/_var.less | 12 +- style/mobile/components/loading/_index.less | 2 +- style/mobile/components/loading/_var.less | 1 + .../mobile/components/loading/v2/_index.less | 2 +- style/mobile/components/loading/v2/_var.less | 1 + style/mobile/components/message/v2/_var.less | 4 +- style/mobile/components/navbar/v2/_var.less | 2 +- .../mobile/components/notice-bar/v2/_var.less | 4 +- style/mobile/components/overlay/v2/_var.less | 2 +- style/mobile/components/picker/v2/_index.less | 4 +- style/mobile/components/picker/v2/_var.less | 8 +- style/mobile/components/popover/_var.less | 4 +- .../components/pull-down-refresh/v2/_var.less | 2 +- style/mobile/components/radio/v2/_var.less | 4 +- style/mobile/components/rate/v2/_var.less | 4 +- style/mobile/components/result/v2/_var.less | 4 +- style/mobile/components/search/v2/_var.less | 10 +- style/mobile/components/side-bar/v2/_var.less | 4 +- style/mobile/components/skeleton/v2/_var.less | 4 +- style/mobile/components/slider/v2/_index.less | 4 +- style/mobile/components/slider/v2/_var.less | 4 +- .../mobile/components/step-item/v2/_var.less | 12 +- style/mobile/components/stepper/v2/_var.less | 4 +- style/mobile/components/switch/v2/_var.less | 4 +- .../components/tab-bar-item/v2/_var.less | 2 +- style/mobile/components/table/_var.less | 2 +- style/mobile/components/tabs/v2/_var.less | 4 +- style/mobile/components/tag/v2/_var.less | 6 +- style/mobile/components/textarea/v2/_var.less | 10 +- style/mobile/components/upload/v2/_var.less | 4 +- style/mobile/theme/_dark.less | 167 ++++++++++++++++++ style/mobile/theme/_index.less | 1 + 60 files changed, 314 insertions(+), 123 deletions(-) create mode 100644 style/mobile/theme/_dark.less diff --git a/style/mobile/components/action-sheet/v2/_index.less b/style/mobile/components/action-sheet/v2/_index.less index 7530db5b36..72493238ef 100644 --- a/style/mobile/components/action-sheet/v2/_index.less +++ b/style/mobile/components/action-sheet/v2/_index.less @@ -120,12 +120,12 @@ &__gap-list { height: 8px; - background-color: @action-sheet-border-color; + background-color: @action-sheet-gap-color; } &__gap-grid { height: .5px; - background-color: @action-sheet-border-color; + background-color: @action-sheet-gap-color; } &__cancel { diff --git a/style/mobile/components/action-sheet/v2/_var.less b/style/mobile/components/action-sheet/v2/_var.less index 9aae72c47e..46feb4994b 100644 --- a/style/mobile/components/action-sheet/v2/_var.less +++ b/style/mobile/components/action-sheet/v2/_var.less @@ -1,14 +1,15 @@ @action-sheet: ~"@{prefix}-action-sheet"; @action-sheet-list-item-height: var(--td-action-sheet-list-item-height, 56px); -@action-sheet-list-item-disabled-color: var(--td-action-sheet-list-item-disabled-color, @font-gray-4); -@action-sheet-border-color: var(--td-action-sheet-border-color, @gray-color-1); -@action-sheet-color: var(--td-action-sheet-color, @font-gray-1); +@action-sheet-list-item-disabled-color: var(--td-action-sheet-list-item-disabled-color, @text-color-disabled); +@action-sheet-border-color: var(--td-action-sheet-border-color, @component-stroke); +@action-sheet-color: var(--td-action-sheet-color, @text-color-primary); @action-sheet-border-radius: var(--td-action-sheet-border-radius, @radius-extra-large); -@action-sheet-description-color: var(--td-action-sheet-description-color, @font-gray-3); +@action-sheet-description-color: var(--td-action-sheet-description-color, @text-color-placeholder); @action-sheet-text-align: var(--td-action-sheet-text-align, center); @action-sheet-cancel-height: var(--td-action-sheet-cancel-height, 48px); @action-sheet-dot-size: var(--td-action-sheet-dot-size, 8px); -@action-sheet-dot-color: var(--td-action-sheet-dot-color, @font-gray-4); +@action-sheet-dot-color: var(--td-action-sheet-dot-color, @text-color-disabled); @action-sheet-dot-active-color: var(--td-action-sheet-dot-active-color, @brand-color); @action-sheet-text-weight: var(--td-action-sheet-text-weight, 400); +@action-sheet-gap-color: var(--td-action-sheet-gap-color, var(--td-bg-color-page, @component-stroke)); \ No newline at end of file diff --git a/style/mobile/components/badge/v2/_index.less b/style/mobile/components/badge/v2/_index.less index 20c2b6ac78..0a063fe690 100644 --- a/style/mobile/components/badge/v2/_index.less +++ b/style/mobile/components/badge/v2/_index.less @@ -89,6 +89,10 @@ border-radius: calc(@badge-large-height / 2); } + &__content { + color: @badge-context-text-color; + } + &__content:not(:empty) + .t-has-count { transform: translate(50%, -50%); position: absolute; @@ -99,5 +103,6 @@ &__content-text { display: block; line-height: 24px; + color: @badge-context-text-color; } } diff --git a/style/mobile/components/badge/v2/_var.less b/style/mobile/components/badge/v2/_var.less index f1f9d04c3e..854c7728fc 100644 --- a/style/mobile/components/badge/v2/_var.less +++ b/style/mobile/components/badge/v2/_var.less @@ -8,6 +8,7 @@ @badge-border-radius: var(--td-badge-border-radius, 2px); @border-bubble-border-radius: var(--td-badge-bubble-border-radius, 10px 10px 10px 1px); @badge-dot-size: var(--td-badge-dot-size, 8px); +@badge-context-text-color: var(--td-badge-context-text-color, @text-color-primary); // large @badge-large-font-size: var(--td-badge-large-font-size, @font-size-s); diff --git a/style/mobile/components/button/v2/_var.less b/style/mobile/components/button/v2/_var.less index 2a79ecd803..45a0296fcd 100644 --- a/style/mobile/components/button/v2/_var.less +++ b/style/mobile/components/button/v2/_var.less @@ -29,10 +29,10 @@ @button-large-icon-font-size: var(--td-button-large-icon-font-size, 24px); // default -@button-default-color: var(--td-button-default-color, @font-gray-1); +@button-default-color: var(--td-button-default-color, @text-color-primary); @button-default-bg-color: var(--td-button-default-bg-color, @bg-color-component); @button-default-border-color: var(--td-button-default-border-color, @bg-color-component); -@button-default-disabled-color: var(--td-button-default-disabled-color, @font-gray-4); +@button-default-disabled-color: var(--td-button-default-disabled-color, @text-color-disabled); @button-default-disabled-bg: var(--td-button-default-disabled-bg, @bg-color-component-disabled); @button-default-disabled-border-color: var(--td-button-default-disabled-border-color, @bg-color-component-disabled); // primary @@ -57,7 +57,7 @@ @button-danger-disabled-bg: var(--td-button-danger-disabled-bg, @error-color-3); @button-danger-disabled-border-color: var(--td-button-danger-disabled-border-color, @error-color-3); // default + outline -@button-default-outline-color: var(--td-button-default-outline-color, @font-gray-1); +@button-default-outline-color: var(--td-button-default-outline-color, @text-color-primary); @button-default-outline-border-color: var(--td-button-default-outline-border-color, @component-border); @button-default-outline-disabled-color: var(--td-button-default-outline-disabled-color, @component-border); // primary + outline diff --git a/style/mobile/components/calendar/v2/_index.less b/style/mobile/components/calendar/v2/_index.less index 6648975e0c..8836ce700f 100644 --- a/style/mobile/components/calendar/v2/_index.less +++ b/style/mobile/components/calendar/v2/_index.less @@ -36,6 +36,7 @@ right: 16px; margin: -12px; padding: 12px; + color: @calendar-title-color; } &__days { @@ -93,6 +94,7 @@ line-height: 24px; font-weight: 600; margin-top: 8px; + color: @calendar-dates-color; .cursor-pointer(); diff --git a/style/mobile/components/calendar/v2/_var.less b/style/mobile/components/calendar/v2/_var.less index dd10ae09b2..01e308e811 100644 --- a/style/mobile/components/calendar/v2/_var.less +++ b/style/mobile/components/calendar/v2/_var.less @@ -1,10 +1,11 @@ @calendar-radius: var(--td-calendar-radius, 12px); @calendar-bg-color: var(--td-calendar-bg-color, @bg-color-container); @calendar-active-color: var(--td-calendar-active-color, @brand-color); -@calendar-selected-color: var(--td-calendar-selected-color, @font-white-1); +@calendar-selected-color: var(--td-calendar-selected-color, @text-color-anti); @calendar-title-font-size: var(--td-calendar-title-font-size, 18px); -@calendar-title-color: var(--td-calendar-title-color, @font-gray-1); -@calendar-days-color: var(--td-calendar-days-color, @font-gray-2); -@calendar-item-suffix-color: var(--td-calendar-item-suffix-color, @font-gray-3); +@calendar-title-color: var(--td-calendar-title-color, @text-color-primary); +@calendar-dates-color: var(--td-calendar-dates-color, @text-color-primary); +@calendar-days-color: var(--td-calendar-days-color, @text-color-secondary); +@calendar-item-suffix-color: var(--td-calendar-item-suffix-color, @text-color-placeholder); @calendar-item-centre-color: var(--td-calendar-item-centre-color, @brand-color-light); -@calendar-item-disabled-color: var(--td-calendar-item-disabled-color, @font-gray-4); +@calendar-item-disabled-color: var(--td-calendar-item-disabled-color, @text-color-disabled); diff --git a/style/mobile/components/cascader/v2/_index.less b/style/mobile/components/cascader/v2/_index.less index cd82d09bad..a213fba909 100644 --- a/style/mobile/components/cascader/v2/_index.less +++ b/style/mobile/components/cascader/v2/_index.less @@ -5,7 +5,7 @@ .@{cascader} { display: flex; flex-direction: column; - background-color: #fff; + background-color: @cascader-bg-color; color: @cascader-title-color; border-radius: 12px 12px 0 0; diff --git a/style/mobile/components/cascader/v2/_var.less b/style/mobile/components/cascader/v2/_var.less index 420b7b5e5d..15bfbe129a 100644 --- a/style/mobile/components/cascader/v2/_var.less +++ b/style/mobile/components/cascader/v2/_var.less @@ -1,9 +1,10 @@ @cascader: ~"@{prefix}-cascader"; +@cascader-bg-color: var(--td-cascader-bg-color, @bg-color-container); @cascader-active-color: var(--td-cascader-active-color, @brand-color); -@cascader-disabled-color: var(--td-cascader-disabled-color, @font-gray-4); -@cascader-title-color: var(--td-cascader-title-color, @font-gray-1); -@cascader-options-title-color: var(--td-cascader-options-title-color, @font-gray-3); +@cascader-disabled-color: var(--td-cascader-disabled-color, @text-color-disabled); +@cascader-title-color: var(--td-cascader-title-color, @text-color-primary); +@cascader-options-title-color: var(--td-cascader-options-title-color, @text-color-placeholder); @cascader-border-color: var(--td-cascader-border-color, @border-color); @cascader-options-height: var(--td-cascader-options-height, 320px); @@ -12,4 +13,4 @@ // steps @cascader-step-height: var(--td-cascader-step-height, 44px); @cascader-step-dot-size: var(--td-cascader-step-dot-size, 8px); -@cascader-step-arrow-color: var(--td-cascader-step-arrow-color, @font-gray-3); +@cascader-step-arrow-color: var(--td-cascader-step-arrow-color, @text-color-placeholder); diff --git a/style/mobile/components/cell/v2/_index.less b/style/mobile/components/cell/v2/_index.less index 1787e75703..b208a816c4 100644 --- a/style/mobile/components/cell/v2/_index.less +++ b/style/mobile/components/cell/v2/_index.less @@ -42,6 +42,10 @@ font-size: @cell-note-font-size; } + &__title { + color: @cell-title-color; + } + &__title, &__note { flex: 1 1 auto; diff --git a/style/mobile/components/cell/v2/_var.less b/style/mobile/components/cell/v2/_var.less index a44c940ee8..9b272c23f0 100644 --- a/style/mobile/components/cell/v2/_var.less +++ b/style/mobile/components/cell/v2/_var.less @@ -7,16 +7,16 @@ @cell-border-color: var(--td-cell-border-color, @component-stroke); @cell-border-left-space: var(--td-border-left-space, @cell-horizontal-padding); @cell-border-right-space: var(--td-border-right-space, 0); -@cell-description-color: var(--td-cell-description-color, @font-gray-2); +@cell-description-color: var(--td-cell-description-color, @text-color-secondary); @cell-description-font-size: var(--td-cell-description-font-size, @font-size-base); @cell-description-line-height: var(--td-cell-description-line-height, 22px); -@cell-note-color: var(--td-cell-note-color, @font-gray-3); +@cell-note-color: var(--td-cell-note-color, @text-color-placeholder); @cell-note-font-size: var(--td-cell-note-font-size, @font-size-m); -@cell-title-color: var(--td-cell-title-color, @font-gray-1); +@cell-title-color: var(--td-cell-title-color, @text-color-primary); @cell-title-font-size: var(--td-cell-title-font-size, @font-size-m); @cell-left-icon-color: var(--td-cell-left-icon-color, @brand-color); @cell-left-icon-font-size: var(--td-cell-left-icon-font-size, 24px); -@cell-right-icon-color: var(--td-cell-right-icon-color, @font-gray-3); +@cell-right-icon-color: var(--td-cell-right-icon-color, @text-color-placeholder); @cell-right-icon-font-size: var(--td-cell-right-icon-font-size, 24px); @cell-required-color: var(--td-cell-required-color, @error-color-6); @cell-required-font-size: var(--td-cell-required-font-size, @font-size-m); @@ -28,5 +28,5 @@ @cell-group-title-line-height: var(--td-cell-group-title-line-height, 45px); @cell-group-title-padding-left: var(--td-cell-group-title-padding-left, 16px); @cell-group-title-bg-color: var(--td-cell-group-title-bg-color, @bg-color-secondarycontainer); -@cell-group-title-color: var(--td-cell-group-title-color, @font-gray-3); +@cell-group-title-color: var(--td-cell-group-title-color, @text-color-placeholder); @cell-group-border-color: var(--td-cell-group-border-color, @border-color); diff --git a/style/mobile/components/check-tag/v2/_var.less b/style/mobile/components/check-tag/v2/_var.less index 727630ee9d..231ab99466 100644 --- a/style/mobile/components/check-tag/v2/_var.less +++ b/style/mobile/components/check-tag/v2/_var.less @@ -12,10 +12,10 @@ // variant @tag-outline-bg-color: var(--td-tag-outline-bg-color, @bg-color-container); -@tag-default-font-color: var(--td-tag-default-font-color, @font-gray-1); +@tag-default-font-color: var(--td-tag-default-font-color, @text-color-primary); // status -@tag-disabled-color: var(--td-tag-disabled-color, @font-gray-4); +@tag-disabled-color: var(--td-tag-disabled-color, @text-color-disabled); @tag-disabled-background-color: var(--td-tag-disabled-background-color, @bg-color-component-disabled); @tag-disabled-border-color: var(--td-tag-disabled-border-color, @component-border); diff --git a/style/mobile/components/checkbox/v2/_index.less b/style/mobile/components/checkbox/v2/_index.less index 613ae62ead..d5676cea46 100644 --- a/style/mobile/components/checkbox/v2/_index.less +++ b/style/mobile/components/checkbox/v2/_index.less @@ -197,7 +197,7 @@ padding-top: 8px; padding-bottom: 8px; text-align: center; - background-color: #f3f3f3; + background-color: @checkbox-tag-bg-color; border-radius: 6px; &.@{checkbox}--checked { diff --git a/style/mobile/components/checkbox/v2/_var.less b/style/mobile/components/checkbox/v2/_var.less index fb696b21ca..b9b36b6526 100644 --- a/style/mobile/components/checkbox/v2/_var.less +++ b/style/mobile/components/checkbox/v2/_var.less @@ -8,13 +8,14 @@ @checkbox-vertical-padding: var(--td-checkbox-vertical-padding, 16px); @checkbox-bg-color: var(--td-checkbox-bg-color, @bg-color-container); @checkbox-border-color: var(--td-checkbox-border-color, @component-stroke); -@checkbox-title-color: var(--td-checkbox-title-color, @font-gray-1); -@checkbox-title-disabled-color: var(--td-checkbox-title-disabled-color, @font-gray-4); -@checkbox-description-color: var(--td-checkbox-description-color, @font-gray-2); -@checkbox-description-disabled-color: var(--td-checkbox-description-disabled-color, @font-gray-4); -@checkbox-icon-color: var(--td-checkbox-icon-color, @gray-color-4); +@checkbox-title-color: var(--td-checkbox-title-color, @text-color-primary); +@checkbox-title-disabled-color: var(--td-checkbox-title-disabled-color, @text-color-disabled); +@checkbox-description-color: var(--td-checkbox-description-color, @text-color-secondary); +@checkbox-description-disabled-color: var(--td-checkbox-description-disabled-color, @text-color-disabled); +@checkbox-icon-color: var(--td-checkbox-icon-color, var(--td-border-level-2-color, @gray-color-4)); @checkbox-icon-disabled-color: var(--td-checkbox-icon-disabled-color, @brand-color-disabled); @checkbox-icon-disabled-bg-color: var(--td-checkbox-icon-disabled-bg-color, @bg-color-component-disabled); @checkbox-icon-checked-color: var(--td-checkbox-icon-checked-color, @brand-color); @checkbox-tag-active-bg-color: var(--td-checkbox-tag-active-bg-color, @brand-color-light); @checkbox-tag-active-color: var(--td-checkbox-tag-active-color, @brand-color); +@checkbox-tag-bg-color: var(--td-checkbox-tag-bg-color, @bg-color-component); diff --git a/style/mobile/components/collapse/v2/_var.less b/style/mobile/components/collapse/v2/_var.less index a7f77b324e..1d2073256f 100644 --- a/style/mobile/components/collapse/v2/_var.less +++ b/style/mobile/components/collapse/v2/_var.less @@ -1,6 +1,6 @@ -@collapse-header-text-color: var(--td-collapse-header-text-color, @font-gray-1); -@collapse-content-text-color: var(--td-collapse-content-text-color, @font-gray-1); -@collapse-header-text-diabled-color: var(--td-collapse-header-text-diabled-color, @font-gray-4); +@collapse-header-text-color: var(--td-collapse-header-text-color, @text-color-primary); +@collapse-content-text-color: var(--td-collapse-content-text-color, @text-color-primary); +@collapse-header-text-diabled-color: var(--td-collapse-header-text-diabled-color, @text-color-disabled); // font-size @collapse-title-font-size: var(--td-collapse-title-font-size, @font-size-m); diff --git a/style/mobile/components/count-down/v2/_var.less b/style/mobile/components/count-down/v2/_var.less index 942a6d3cc8..f5429ff9cf 100644 --- a/style/mobile/components/count-down/v2/_var.less +++ b/style/mobile/components/count-down/v2/_var.less @@ -1,7 +1,7 @@ @countdown-small-unit-margin: 4px; // 'small'尺寸单位分割文本左右间距 @countdown-medium-unit-margin: 5px; // 'medium'尺寸单位分割文本左右间距 @countdown-large-unit-margin: 6px; // 'large'尺寸单位分割文本左右间距 -@countdown-unit-color: @font-gray-1; // 带单位分割线文本颜色 +@countdown-unit-color: @text-color-primary; // 带单位分割线文本颜色 @countdown-no-unit-color: @error-color-6; // 无单位分割线文本颜色 @countdown-large-no-unit-margin: 6px; // 'large'尺寸无单位分割文本左右间距 @countdown-medium-no-unit-margin: 3px; // 'medium'尺寸无单位分割文本左右间距 @@ -26,9 +26,9 @@ @countdown-large-no-unit-font-size: 18px; // 'large'尺寸无单位分割文本大小 // 纯数字倒计时文本颜色 -@countdown-default-text-color: var(--td-countdown-default-color, @font-gray-1); +@countdown-default-text-color: var(--td-countdown-default-color, @text-color-primary); // 方形/圆形底倒计时文本颜色 -@countdown-text-color: var(--td-countdown-round-color, @font-white-1); +@countdown-text-color: var(--td-countdown-round-color, @text-color-anti); // 方形/圆形底背景颜色 @countdown-bg-color: var(--td-countdown-bg-color, @error-color-6); // 带方形底倒计时圆角大小 diff --git a/style/mobile/components/dialog/v2/_var.less b/style/mobile/components/dialog/v2/_var.less index b4d8a9d4b8..8cd5d10110 100644 --- a/style/mobile/components/dialog/v2/_var.less +++ b/style/mobile/components/dialog/v2/_var.less @@ -8,12 +8,12 @@ // color @dialog-title-font-size: var(--td-dialog-title-font-size, 18px); -@dialog-title-color: var(--td-dialog-title-color, @font-gray-1); +@dialog-title-color: var(--td-dialog-title-color, @text-color-primary); @dialog-title-line-height: var(--td-dialog-title-line-height, 26px); @dialog-content-font-size: var(--td-dialog-content-font-size, 16px); -@dialog-content-color: var(--td-dialog-content-color, @font-gray-2); +@dialog-content-color: var(--td-dialog-content-color, @text-color-secondary); @dialog-content-line-height: var(--td-dialog-content-line-height, 24px); @dialog-close-font-size: var(--td-dialog-close-font-size, 22px); -@dialog-close-color: var(--td-dialog-close-color, @font-gray-3); +@dialog-close-color: var(--td-dialog-close-color, @text-color-placeholder); diff --git a/style/mobile/components/divider/v2/_var.less b/style/mobile/components/divider/v2/_var.less index ff548a1269..5e77f5529b 100644 --- a/style/mobile/components/divider/v2/_var.less +++ b/style/mobile/components/divider/v2/_var.less @@ -1,5 +1,5 @@ @divider-color: var(--td-divider-color, @bg-color-component); -@divider-content-color: var(--td-divider-content-color, @font-gray-3); +@divider-content-color: var(--td-divider-content-color, @text-color-placeholder); @divider-content-font-size: var(--td-divider-content-font-size, 12px); @divider-content-line-height: var(--td-divider-content-line-height, 20px); @divider-content-line-style: var(--td-divider-content-line-style, solid); diff --git a/style/mobile/components/drawer/v2/_index.less b/style/mobile/components/drawer/v2/_index.less index ecdaa83664..da7b6534eb 100644 --- a/style/mobile/components/drawer/v2/_index.less +++ b/style/mobile/components/drawer/v2/_index.less @@ -17,6 +17,7 @@ font-weight: 600; font-size: @drawer-title-font-size; padding: 24px 16px 8px; + color: @drawer-title-color; } &__sidebar { @@ -37,7 +38,7 @@ &-title { flex: 1; - color: var(--td-drawer-title-color); + color: @drawer-title-color; } &-icon { diff --git a/style/mobile/components/drawer/v2/_var.less b/style/mobile/components/drawer/v2/_var.less index 543147deb8..b333f1a9c6 100644 --- a/style/mobile/components/drawer/v2/_var.less +++ b/style/mobile/components/drawer/v2/_var.less @@ -3,7 +3,7 @@ @drawer-title-padding: var(--td-drawer-title-padding, 24px 16px 8px); @drawer-bg-color: var(--td-drawer-bg-color, @bg-color-container); @drawer-border-color: var(--td-drawer-border-color, @border-color); -@drawer-title-color: var(--td-drawer-title-color, @font-gray-1); +@drawer-title-color: var(--td-drawer-title-color, @text-color-primary); @drawer-icon-color: var(--td-drawer-title-color, @drawer-title-color); @drawer-item-padding: var(--td-drawer-item-padding, 16px); @drawer-item-height: var(--td-drawer-item-height, 24px); diff --git a/style/mobile/components/dropdown-menu/v2/_var.less b/style/mobile/components/dropdown-menu/v2/_var.less index 4843ea3699..99eada9085 100644 --- a/style/mobile/components/dropdown-menu/v2/_var.less +++ b/style/mobile/components/dropdown-menu/v2/_var.less @@ -1,7 +1,7 @@ @dropdown-menu-bg-color: var(--td-dropdown-menu-bg-colorm, @bg-color-container); -@dropdown-menu-color: var(--td-dropdown-menu-colorm, @font-gray-1); +@dropdown-menu-color: var(--td-dropdown-menu-colorm, @text-color-primary); @dropdown-menu-active-color: var(--td-dropdown-menu-active-colorm, @brand-color); -@dropdown-menu-disabled-color: var(--td-dropdown-menu-disabled-colorm, @font-gray-4); +@dropdown-menu-disabled-color: var(--td-dropdown-menu-disabled-colorm, @text-color-disabled); @dropdown-menu-font-size: var(--td-dropdown-menu-font-sizem, 14px); @dropdown-menu-icon-size: var(--td-dropdown-menu-icon-sizem, 24px); diff --git a/style/mobile/components/empty/_var.less b/style/mobile/components/empty/_var.less index 2441f32e28..b6e0e5ff05 100644 --- a/style/mobile/components/empty/_var.less +++ b/style/mobile/components/empty/_var.less @@ -1,7 +1,7 @@ @empty-icon-font-size: 96px; -@empty-description-color: var(--td-empty-description-color, @font-gray-3); -@empty-icon-color: var(--td-empty-icon-color, @font-gray-3); +@empty-description-color: var(--td-empty-description-color, @text-color-placeholder); +@empty-icon-color: var(--td-empty-icon-color, @text-color-placeholder); @empty-description-font-size: var(--td-empty-description-font-size, @font-size-base); @empty-description-line-height: var(--td-empty-description-line-height, 44rpx); @empty-description-margin-top: var(--td-empty-description-margin-top, @spacer-2); diff --git a/style/mobile/components/footer/_index.less b/style/mobile/components/footer/_index.less index 86b47aeb6b..648154b7a5 100644 --- a/style/mobile/components/footer/_index.less +++ b/style/mobile/components/footer/_index.less @@ -55,6 +55,7 @@ font-size: @footer-logo-title-font-size; // 图标配置，标题文本大小 line-height: @footer-logo-title-line-height; // 图标配置，标题文本行高 font-style: italic; + color: @footer-title-color; } &__title-url { diff --git a/style/mobile/components/footer/_var.less b/style/mobile/components/footer/_var.less index 70b513ce9c..3a73168c31 100644 --- a/style/mobile/components/footer/_var.less +++ b/style/mobile/components/footer/_var.less @@ -1,13 +1,14 @@ -@footer-text-color: var(--td-footer-text-color, @font-gray-3); +@footer-text-color: var(--td-footer-text-color, @text-color-placeholder); @footer-text-font-size: var(--td-footer-text-font-size, @font-size-s); @footer-text-line-height: var(--td-footer-text-line-height, 20px); @footer-text-margin-top: var(--td-footer-text-margin-top, 4px); @footer-link-color: var(--td-footer-link-color, @brand-color); @footer-link-font-size: var(--td-footer-link-font-size, @font-size-s); @footer-link-line-height: var(--td-footer-link-line-height, 20px); +@footer-title-color: var(--td-footer-title-color, @text-color-primary); @footer-link-dividing-line-padding: var(--td-footer-link-dividing-line-padding, @spacer-1); -@footer-link-dividing-line-color: var(--td-footer-link-dividing-line-color, @font-gray-3); +@footer-link-dividing-line-color: var(--td-footer-link-dividing-line-color, @text-color-placeholder); @footer-logo-icon-width: var(--td-footer-logo-icon-width, 24px); @footer-logo-icon-height: var(--td-footer-logo-icon-height, 24px); @footer-logo-icon-margin-right: var(--td-footer-logo-icon-margin-right, @spacer); diff --git a/style/mobile/components/grid-item/v2/_var.less b/style/mobile/components/grid-item/v2/_var.less index ce65adf3a0..59b8ff883d 100644 --- a/style/mobile/components/grid-item/v2/_var.less +++ b/style/mobile/components/grid-item/v2/_var.less @@ -10,13 +10,13 @@ @grid-item-image-width: var(--td-grid-item-image-width, 48px); @grid-item-image-small-width: var(--td-grid-item-image-small-width, 32px); @grid-item-image-middle-width: var(--td-grid-item-image-middle-width, 40px); -@grid-item-text-color: var(--td-grid-item-text-color, @font-gray-1); +@grid-item-text-color: var(--td-grid-item-text-color, @text-color-primary); @grid-item-text-font-size: var(--td-grid-item-text-font-size, 14px); @grid-item-text-line-height: var(--td-grid-item-text-line-height, 22px); @grid-item-text-padding-top: var(--td-grid-item-text-padding-top, 8px); @grid-item-description-font-size: var(--td-grid-item-description-font-size, 12px); @grid-item-description-line-height: var(--td-grid-item-description-line-height, 20px); -@grid-item-description-color: var(--td-grid-item-description-color, @font-gray-3); +@grid-item-description-color: var(--td-grid-item-description-color, @text-color-placeholder); @grid-item-description-padding-top: var(--td-grid-item-description-padding-top, 4px); @grid-item-hover-bg-color: var(--td-grid-item-hover-bg-color, @bg-color-secondarycontainer); @grid-item-horizontal-text-padding-left: var(--td-grid-item-horizontal-text-padding-left, 12px); diff --git a/style/mobile/components/image/v2/_var.less b/style/mobile/components/image/v2/_var.less index 9957952e1d..a018cde3df 100644 --- a/style/mobile/components/image/v2/_var.less +++ b/style/mobile/components/image/v2/_var.less @@ -1,4 +1,4 @@ -@image-color: var(--td-image-color, @font-gray-3); +@image-color: var(--td-image-color, @text-color-placeholder); @image-loading-bg-color: var(--td-image-loading-bg-color, @bg-color-secondarycontainer); -@image-loading-color: var(--td-image-loading-color, @font-gray-3); +@image-loading-color: var(--td-image-loading-color, @text-color-placeholder); @image-round-radius: var(--td-image-round-radius, @radius-default); diff --git a/style/mobile/components/indexes-anchor/v2/_var.less b/style/mobile/components/indexes-anchor/v2/_var.less index 69220c4391..e811a17e80 100644 --- a/style/mobile/components/indexes-anchor/v2/_var.less +++ b/style/mobile/components/indexes-anchor/v2/_var.less @@ -1,4 +1,4 @@ -@indexes-anchor-color: var(--td-indexes-anchor-color, @font-gray-1); +@indexes-anchor-color: var(--td-indexes-anchor-color, @text-color-primary); @indexes-anchor-active-color: var(--td-indexes-anchor-active-color, @brand-color); @indexes-anchor-bg-color: var(--td-indexes-anchor-bg-color, @bg-color-secondarycontainer); @indexes-anchor-active-bg-color: var(--td-indexes-anchor-active-bg-color, @bg-color-container); diff --git a/style/mobile/components/indexes/v2/_var.less b/style/mobile/components/indexes/v2/_var.less index 4a6370b79d..3d58fcbdcc 100644 --- a/style/mobile/components/indexes/v2/_var.less +++ b/style/mobile/components/indexes/v2/_var.less @@ -1,8 +1,8 @@ -@indexes-sidebar-color: var(--td-indexes-sidebar-color, @font-gray-1); +@indexes-sidebar-color: var(--td-indexes-sidebar-color, @text-color-primary); @indexes-sidebar-item-size: var(--td-indexes-sidebar-item-size, 20px); @indexes-sidebar-font-size: var(--td-indexes-sidebar-font-size, 12px); @indexes-sidebar-line-height: var(--td-indexes-sidebar-line-height, 20px); -@indexes-sidebar-active-color: var(--td-indexes-sidebar-active-color, @font-white-1); +@indexes-sidebar-active-color: var(--td-indexes-sidebar-active-color, @text-color-anti); @indexes-sidebar-active-bg-color: var(--td-indexes-sidebar-active-bg-color, @brand-color); @indexes-sidebar-right: var(--td-indexes-sidebar-right, 8px); diff --git a/style/mobile/components/input/v2/_var.less b/style/mobile/components/input/v2/_var.less index af3e0f0669..fb9f3d372e 100644 --- a/style/mobile/components/input/v2/_var.less +++ b/style/mobile/components/input/v2/_var.less @@ -1,11 +1,11 @@ @input-vertical-padding: var(--td-input-vertical-padding, 16px); //输入框垂直方向内间距 -@input-default-text-color: var(--td-input-default-text-color, @font-gray-1); // 'default' 状态输入框文本颜色 +@input-default-text-color: var(--td-input-default-text-color, @text-color-primary); // 'default' 状态输入框文本颜色 @input-success-text-color: var(--td-input-success-text-color, @success-color); // 'success' 状态输入框文本颜色 @input-warning-text-color: var(--td-input-warning-text-color, @warning-color); // 'warning' 状态输入框文本颜色 @input-error-text-color: var(--td-input-error-text-color, @error-color); // 'error' 状态输入框文本颜色 -@input-default-tips-color: var(--td-input-default-tips-color, @font-gray-3); // 'default' 状态辅助文本颜色 +@input-default-tips-color: var(--td-input-default-tips-color, @text-color-placeholder); // 'default' 状态辅助文本颜色 @input-success-tips-color: var(--td-input-success-tips-color, @success-color); // 'success' 状态辅助文本颜色 @input-warning-tips-color: var(--td-input-warning-tips-color, @warning-color); // 'warning' 状态辅助文本颜色 @input-error-tips-color: var(--td-input-error-tips-color, @error-color); // 'error' 状态辅助文本颜色 @@ -15,9 +15,9 @@ @input-border-left-space: var(--td-input-border-left-space, 16px); @input-border-right-space: var(--td-input-border-right-space, 0); @input-placeholder-text-color: var(--td-input-placeholder-text-color, @text-color-placeholder); // 输入框占位符文本颜色 -@input-prefix-icon-color: var(--td-input-prefix-icon-color, @font-gray-1); // // 输入框前缀图标颜色 -@input-suffix-icon-color: var(--td-input-suffix-icon-color, @font-gray-3); // 输入框后缀图标颜色 -@input-label-text-color: var(--td-input-label-text-color, @font-gray-1); // 左侧文本颜色 -@input-suffix-text-color: var(--td-input-suffix-text-color, @font-gray-1); // 后置图标前的后置内容文本颜色 +@input-prefix-icon-color: var(--td-input-prefix-icon-color, @text-color-primary); // // 输入框前缀图标颜色 +@input-suffix-icon-color: var(--td-input-suffix-icon-color, @text-color-placeholder); // 输入框后缀图标颜色 +@input-label-text-color: var(--td-input-label-text-color, @text-color-primary); // 左侧文本颜色 +@input-suffix-text-color: var(--td-input-suffix-text-color, @text-color-primary); // 后置图标前的后置内容文本颜色 @input-disabled-text-color: var(--td-input-disabled-text-color, @text-color-disabled); // 输入框禁用态文本颜色 @input-border-radius: var(--td-input-border-radius, @radius-default); // 边框圆角大小 diff --git a/style/mobile/components/loading/_index.less b/style/mobile/components/loading/_index.less index 9c21f0529d..c3f291fcec 100644 --- a/style/mobile/components/loading/_index.less +++ b/style/mobile/components/loading/_index.less @@ -82,7 +82,7 @@ width: 2px; height: 25%; margin: 0 auto; - background-color: #0b0b0b; + background-color: @loading-line-bg-color; border-radius: 40%; content: " "; } diff --git a/style/mobile/components/loading/_var.less b/style/mobile/components/loading/_var.less index 1ea28a7e0d..5b46a18964 100644 --- a/style/mobile/components/loading/_var.less +++ b/style/mobile/components/loading/_var.less @@ -6,3 +6,4 @@ @loading-text-font-size: var(--td-loading-text-font-size, 12px); @loading-text-line-height: var(--td-loading-text-line-height, 20px); @loading-dot-size: var(--td-loading-dot-size, 8px); +@loading-line-bg-color: var(--td-loading-line-bg-color, @text-color-primary); diff --git a/style/mobile/components/loading/v2/_index.less b/style/mobile/components/loading/v2/_index.less index 08b48d97f8..b95bded20f 100644 --- a/style/mobile/components/loading/v2/_index.less +++ b/style/mobile/components/loading/v2/_index.less @@ -24,7 +24,7 @@ &--spinner { animation-timing-function: steps(12); - color: @font-gray-1; + color: @loading-spinner-color; .@{loading}__dot { position: absolute; diff --git a/style/mobile/components/loading/v2/_var.less b/style/mobile/components/loading/v2/_var.less index 5fea0e575d..d587aad1eb 100644 --- a/style/mobile/components/loading/v2/_var.less +++ b/style/mobile/components/loading/v2/_var.less @@ -3,3 +3,4 @@ @loading-color: var(--td-loading-color, @brand-color); @loading-text-font-size: var(--td-loading-text-font-size, 12px); @loading-text-line-height: var(--td-loading-text-line-height, 20px); +@loading-spinner-color: var(--td-loading-spinner-color, @text-color-anti); diff --git a/style/mobile/components/message/v2/_var.less b/style/mobile/components/message/v2/_var.less index 419652bcc2..206bfa7f4c 100644 --- a/style/mobile/components/message/v2/_var.less +++ b/style/mobile/components/message/v2/_var.less @@ -10,11 +10,11 @@ @message-bg-color: var(--td-message-bg-color, @bg-color-container); // 消息通知背景颜色 @message-box-shadow: var(--td-message-box-shadow, @shadow-4); // 消息通知阴影 @message-border-radius: var(--td-message-border-radius, @radius-default); // 消息通知圆角大小 -@message-content-font-color: var(--td-message-content-font-color, @font-gray-1); // 内容文本颜色 +@message-content-font-color: var(--td-message-content-font-color, @text-color-primary); // 内容文本颜色 @message-info-color: var(--td-message-info-color, @brand-color); // 'info'主题色 @message-success-color: var(--td-message-success-color, @success-color); // 'success'主题色 @message-warning-color: var(--td-message-warning-color, @warning-color); // 'warning'主题色 @message-error-color: var(--td-message-error-color, @error-color); // 'error'主题色 -@message-close-icon-color: var(--td-message-close-icon-color, @font-gray-3); // 关闭按钮图标颜色 +@message-close-icon-color: var(--td-message-close-icon-color, @text-color-placeholder); // 关闭按钮图标颜色 @message: ~"@{prefix}-message"; diff --git a/style/mobile/components/navbar/v2/_var.less b/style/mobile/components/navbar/v2/_var.less index 02bcd33ad2..c813ed9289 100644 --- a/style/mobile/components/navbar/v2/_var.less +++ b/style/mobile/components/navbar/v2/_var.less @@ -1,4 +1,4 @@ -@navbar-color: var(--td-navbar-color, @font-gray-1); +@navbar-color: var(--td-navbar-color, @text-color-primary); @navbar-bg-color: var(--td-navbar-bg-color, @bg-color-container); @navbar-height: var(--td-navbar-height, 48px); @navbar-right: var(--td-navbar-right, 95px); // 默认右上角胶囊按钮宽度，组件会在初始化时尝试自动获取胶囊按钮宽度并覆写该值 diff --git a/style/mobile/components/notice-bar/v2/_var.less b/style/mobile/components/notice-bar/v2/_var.less index aa00e59f3d..98b2c2b7f3 100644 --- a/style/mobile/components/notice-bar/v2/_var.less +++ b/style/mobile/components/notice-bar/v2/_var.less @@ -4,7 +4,7 @@ @notice-bar-line-height: 22px; @notice-bar-icon-font-size: 22px; -@notice-bar-font-color: var(--td-notice-bar-font-color, @font-gray-1); // 公告栏文本颜色 +@notice-bar-font-color: var(--td-notice-bar-font-color, @text-color-primary); // 公告栏文本颜色 @notice-bar-info-color: var(--td-notice-bar-info-color, @brand-color); // 'info' 主题色 @notice-bar-info-bg-color: var(--td-notice-bar-info-bg-color, @brand-color-light); // 'info' 主题背景色 @notice-bar-success-color: var(--td-notice-bar-success-color, @success-color); // 'success' 主题色 @@ -13,7 +13,7 @@ @notice-bar-warning-bg-color: var(--td-notice-bar-warning-bg-color, @warning-color-1); // 'warning' 主题背景色 @notice-bar-error-color: var(--td-notice-bar-error-color, @error-color-6); // 'error' 主题色 @notice-bar-error-bg-color: var(--td-notice-bar-error-bg-color, @error-color-1); // 'error' 主题背景色 -@notice-bar-suffix-icon-color: var(--td-notice-bar-suffix-icon-color, @font-gray-3); // 后缀图标颜色 +@notice-bar-suffix-icon-color: var(--td-notice-bar-suffix-icon-color, @text-color-placeholder); // 后缀图标颜色 @notice-bar-operation-font-color: var(--td-notice-bar-operation-font-color, @brand-color); // 额外信息文本颜色 @notice-bar: ~"@{prefix}-notice-bar"; diff --git a/style/mobile/components/overlay/v2/_var.less b/style/mobile/components/overlay/v2/_var.less index 62c33856ac..d0ceec4c76 100644 --- a/style/mobile/components/overlay/v2/_var.less +++ b/style/mobile/components/overlay/v2/_var.less @@ -1,3 +1,3 @@ @overlay: ~"@{prefix}-overlay"; -@overlay-bg-color: var(--td-overlay-bg-color, @font-gray-2); +@overlay-bg-color: var(--td-overlay-bg-color, @text-color-secondary); @overlay-transition-duration: var(--td-overlay-transition-duration, 300ms); diff --git a/style/mobile/components/picker/v2/_index.less b/style/mobile/components/picker/v2/_index.less index 08c02f92f9..47f1104529 100644 --- a/style/mobile/components/picker/v2/_index.less +++ b/style/mobile/components/picker/v2/_index.less @@ -66,12 +66,12 @@ &--top { top: 0; - background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0%) 100%); + background: linear-gradient(180deg, @bg-color-container 0%, rgba(255, 255, 255, 0%) 100%); } &--bottom { bottom: 0; - background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0%) 100%); + background: linear-gradient(180deg, @bg-color-container 0%, rgba(255, 255, 255, 0%) 100%); transform: matrix(1, 0, 0, -1, 0, 0); } } diff --git a/style/mobile/components/picker/v2/_var.less b/style/mobile/components/picker/v2/_var.less index d2a98bad10..a657be591c 100644 --- a/style/mobile/components/picker/v2/_var.less +++ b/style/mobile/components/picker/v2/_var.less @@ -4,14 +4,14 @@ @picker-border-radius: var(--td-picker-border-radius, 12px); @picker-toolbar-height: var(--td-picker-toolbar-height, 58px); -@picker-cancel-color: var(--td-picker-cancel-color, @font-gray-2); +@picker-cancel-color: var(--td-picker-cancel-color, @text-color-secondary); @picker-confirm-color: var(--td-picker-confirm-color, @brand-color); @picker-button-font-size: var(--td-picker-button-font-size, 16px); @picker-title-font-size: var(--td-picker-title-font-size, 18px); @picker-title-font-weight: var(--td-picker-title-font-weight, 600); @picker-title-line-height: var(--td-picker-title-line-height, 26px); -@picker-title-color: var(--td-picker-title-color, @font-gray-1); +@picker-title-color: var(--td-picker-title-color, @text-color-primary); @picker-item-height: var(--td-picker-item-height, 40px); @picker-bg-color: var(--td-picker-bg-color, @bg-color-container); @@ -23,5 +23,5 @@ @picker-group-height: var(--td-picker-group-height, 200px); @picker-item-height: var(--td-picker-item-height, 40px); -@picker-item-color: var(--td-picker-item-color, @font-gray-2); -@picker-item-active-color: var(--td-picker-item-active-color, @font-gray-1); +@picker-item-color: var(--td-picker-item-color, @text-color-secondary); +@picker-item-active-color: var(--td-picker-item-active-color, @text-color-primary); diff --git a/style/mobile/components/popover/_var.less b/style/mobile/components/popover/_var.less index 10c0066b66..ed276a4fa8 100644 --- a/style/mobile/components/popover/_var.less +++ b/style/mobile/components/popover/_var.less @@ -33,8 +33,8 @@ @popover-dark-color: #fff; @popover-dark-bg-color: @font-gray-1; -@popover-light-color: @font-gray-1; -@popover-light-bg-color: #fff; +@popover-light-color: @text-color-primary; +@popover-light-bg-color: @bg-color-container; @popover-brand-color: @brand-color-7; @popover-brand-bg-color: @brand-color-1; diff --git a/style/mobile/components/pull-down-refresh/v2/_var.less b/style/mobile/components/pull-down-refresh/v2/_var.less index 0e9e993a4d..82e380cc7e 100644 --- a/style/mobile/components/pull-down-refresh/v2/_var.less +++ b/style/mobile/components/pull-down-refresh/v2/_var.less @@ -1,4 +1,4 @@ -@pull-down-refresh-color: var(--td-pull-down-refresh-color, @font-gray-3); +@pull-down-refresh-color: var(--td-pull-down-refresh-color, @text-color-placeholder); // 文案颜色 @pull-down-refresh-text-color: @text-color-disabled; diff --git a/style/mobile/components/radio/v2/_var.less b/style/mobile/components/radio/v2/_var.less index d0dd6129ff..a20a6a7508 100644 --- a/style/mobile/components/radio/v2/_var.less +++ b/style/mobile/components/radio/v2/_var.less @@ -5,9 +5,9 @@ @radio-vertical-padding: var(--td-radio-vertical-padding, 16px); @radio-bg-color: var(--td-radio-bg-color, @bg-color-container); @radio-border-color: var(--td-radio-border-color, @component-stroke); -@radio-label-color: var(--td-radio-label-color, @font-gray-1); +@radio-label-color: var(--td-radio-label-color, @text-color-primary); @radio-label-disabled-color: var(--td-radio-label-disabled-color, @text-color-disabled); -@radio-content-color: var(--td-radio-content-color, @font-gray-2); +@radio-content-color: var(--td-radio-content-color, @text-color-secondary); @radio-content-disabled-color: var(--td-radio-content-disabled-color, @text-color-disabled); @radio-icon-color: var(--td-radio-icon-color, @component-border); @radio-icon-disabled-color: var(--td-radio-icon-disabled-color, @brand-color-disabled); diff --git a/style/mobile/components/rate/v2/_var.less b/style/mobile/components/rate/v2/_var.less index db3236db9b..dc04bbc9c6 100644 --- a/style/mobile/components/rate/v2/_var.less +++ b/style/mobile/components/rate/v2/_var.less @@ -1,6 +1,6 @@ @rate-text-font-size: var(--td-rate-text-font-size, @font-size-m); -@rate-text-color: var(--td-rate-text-color, @font-gray-4); -@rate-text-active-color: var(--td-rate-text-active-color, @font-gray-1); +@rate-text-color: var(--td-rate-text-color, @text-color-disabled); +@rate-text-active-color: var(--td-rate-text-active-color, @text-color-primary); @rate-disabled-selected-color: var(--td-rate-disabled-selected-color, @warning-color-3); @rate-disabled-unselected-color: var(--td-rate-disabled-unselected-color, @gray-color-2); @rate-selected-color: var(--td-rate-selected-color, @warning-color); diff --git a/style/mobile/components/result/v2/_var.less b/style/mobile/components/result/v2/_var.less index ea73a42d14..8f0316c71c 100644 --- a/style/mobile/components/result/v2/_var.less +++ b/style/mobile/components/result/v2/_var.less @@ -2,11 +2,11 @@ @result-title-font-size: var(--td-result-title-font-size, @font-size-l); @result-title-line-height: var(--td-result-title-line-height, 28px); -@result-title-color: var(--td-result-title-color, @font-gray-1); +@result-title-color: var(--td-result-title-color, @text-color-primary); @result-description-font-size: var(--td-result-description-font-size, @font-size-base); @result-description-line-height: var(--td-result-description-line-height, 22px); -@result-description-color: var(--td-result-description-color, @font-gray-2); +@result-description-color: var(--td-result-description-color, @text-color-secondary); @result-icon-default-color: var(--td-result-icon-default-color, @brand-color); @result-icon-success-color: var(--td-result-icon-success-color, @success-color); diff --git a/style/mobile/components/search/v2/_var.less b/style/mobile/components/search/v2/_var.less index 8462a6d075..98986464a9 100644 --- a/style/mobile/components/search/v2/_var.less +++ b/style/mobile/components/search/v2/_var.less @@ -1,12 +1,12 @@ @search-bg-color: var(--td-search-bg-color, @bg-color-secondarycontainer); -@search-text-color: var(--td-search-text-color, @font-gray-1); -@search-label-color: var(--search-label-color, @font-gray-1); +@search-text-color: var(--td-search-text-color, @text-color-primary); +@search-label-color: var(--search-label-color, @text-color-primary); @search-font-size: var(--td-search-font-size, @font-size-m); @search-height: var(--td-search-height, 40px); @search-padding: var(--td-search-padding, 8px 12px); -@search-placeholder-color: var(--td-search-placeholder-color, @font-gray-3); -@search-icon-color: var(--td-search-icon-color, @font-gray-3); +@search-placeholder-color: var(--td-search-placeholder-color, @text-color-placeholder); +@search-icon-color: var(--td-search-icon-color, @text-color-placeholder); @search-square-radius: var(--td-search-square-radius, @radius-default); @search-round-radius: calc(@search-height / 2); @search-action-color: var(--td-search-action-color, @brand-color); -@search-clear-icon-color: var(--td-search-clear-icon-color, @font-gray-3); +@search-clear-icon-color: var(--td-search-clear-icon-color, @text-color-placeholder); diff --git a/style/mobile/components/side-bar/v2/_var.less b/style/mobile/components/side-bar/v2/_var.less index dc0450c5a9..88d4509f30 100644 --- a/style/mobile/components/side-bar/v2/_var.less +++ b/style/mobile/components/side-bar/v2/_var.less @@ -2,12 +2,12 @@ @side-bar-height: var(--td-side-bar-height, 100%); @side-bar-bg-color: var(--td-side-bar-bg-color, @bg-color-secondarycontainer); -@side-bar-color: var(--td-side-bar-color, @font-gray-1); +@side-bar-color: var(--td-side-bar-color, @text-color-primary); @side-bar-font-size: var(--td-side-bar-font-size, 16px); @side-bar-item-height: var(--td-side-bar-item-height, 56px); @side-bar-item-line-height: var(--td-side-bar-item-line-height, 24px); @side-bar-bg-color: var(--td-side-bar-bg-color, @bg-color-secondarycontainer); -@side-bar-disabled-color: var(--td-side-bar-disabled-color, @font-gray-4); +@side-bar-disabled-color: var(--td-side-bar-disabled-color, @text-color-disabled); @side-bar-active-color: var(--td-side-bar-active-color, @brand-color); @side-bar-border-radius: var(--td-side-bar-border-radius, 9px); @side-bar-icon-size: var(--td-side-bar-icon-size, 20px); diff --git a/style/mobile/components/skeleton/v2/_var.less b/style/mobile/components/skeleton/v2/_var.less index b2f02bb1e9..9f1e5d4c89 100644 --- a/style/mobile/components/skeleton/v2/_var.less +++ b/style/mobile/components/skeleton/v2/_var.less @@ -1,6 +1,6 @@ -@skeleton-animation-gradient: var(--td-skeleton-animation-gradient, rgba(0, 0, 0, 4%)); +@skeleton-animation-gradient: var(--td-skeleton-animation-gradient, @text-color-disabled); @skeleton-animation-flashed: var(--td-skeleton-animation-flashed, rgba(90%, 90%, 90%, .3)); -@skeleton-bg-color: var(--td-skeleton-bg-color, @bg-color-page); +@skeleton-bg-color: var(--td-skeleton-bg-color, @bg-color-secondarycontainer); @skeleton-row-spacing: var(--td-skeleton-row-spacing, @spacer-2); @skeleton-text-height: var(--td-skeleton-text-height, 16px); @skeleton-rect-height: var(--td-skeleton-rect-height, 16px); diff --git a/style/mobile/components/slider/v2/_index.less b/style/mobile/components/slider/v2/_index.less index cc5229b3cb..8e627f36be 100644 --- a/style/mobile/components/slider/v2/_index.less +++ b/style/mobile/components/slider/v2/_index.less @@ -75,7 +75,7 @@ &__value, &__range-extreme, &__dot-value { - color: rgba(0, 0, 0, 90%); + color: @slider-dot-color; &--sr-only { position: absolute; @@ -192,7 +192,7 @@ &-desc { position: absolute; left: 50%; - color: rgba(0, 0, 0, 90%); + color: @slider-scale-desc-color; transform: translateX(-50%); bottom: 16px; diff --git a/style/mobile/components/slider/v2/_var.less b/style/mobile/components/slider/v2/_var.less index 63e97413eb..daf33c49bd 100644 --- a/style/mobile/components/slider/v2/_var.less +++ b/style/mobile/components/slider/v2/_var.less @@ -7,7 +7,9 @@ @slider-default-disabled-color: var(--td-slider-default-color, @bg-color-component-disabled); @slider-active-color: var(--td-slider-active-color, @brand-color); @slider-active-disabled-color: var(--td-slider-disabled-color, @brand-color-disabled); -@slider-disabled-text-color: var(--td-slider-disabled-text-color, @font-gray-4); +@slider-disabled-text-color: var(--td-slider-disabled-text-color, @text-color-disabled); +@slider-scale-desc-color: var(--td-slider-scale-desc-color, @text-color-primary); +@slider-dot-color: var(--td-slider-dot-color, @text-color-primary); // capsule @slider-capsule-bar-heihgt: var(--td-slider-capsule-bar-heihgt, 24px); diff --git a/style/mobile/components/step-item/v2/_var.less b/style/mobile/components/step-item/v2/_var.less index e7a994a1ed..75b80905f8 100644 --- a/style/mobile/components/step-item/v2/_var.less +++ b/style/mobile/components/step-item/v2/_var.less @@ -1,15 +1,15 @@ @step-item-dot-size: var(--td-step-item-dot-size, 8px); @step-item-circle-size: var(--td-step-item-circle-size, 22px); @step-item-circle-font-size: var(--td-step-item-circle-font-size, 14px); -@step-item-descrition-color: var(--td-step-item-descrition-color, @font-gray-3); +@step-item-descrition-color: var(--td-step-item-descrition-color, @text-color-placeholder); @step-item-default-circle-bg: var(--td-step-item-default-circle-bg, @bg-color-secondarycontainer); -@step-item-default-circle-color: var(--td-step-item-default-circle-color, @font-gray-3); -@step-item-default-title-color: var(--td-step-item-default-title-color, @font-gray-3); -@step-item-default-icon-color: var(--td-step-item-default-icon-color, @font-gray-3); +@step-item-default-circle-color: var(--td-step-item-default-circle-color, @text-color-placeholder); +@step-item-default-title-color: var(--td-step-item-default-title-color, @text-color-placeholder); +@step-item-default-icon-color: var(--td-step-item-default-icon-color, @text-color-placeholder); @step-item-default-dot-border-color: var(--td-step-item-default-dot-border-color, @component-border); -@step-item-process-circle-color: var(--td-step-item-process-circle-color, @font-white-1); +@step-item-process-circle-color: var(--td-step-item-process-circle-color, @text-color-primary); @step-item-process-circle-bg: var(--td-step-item-process-circle-bg, @brand-color); @step-item-process-title-color: var(--td-step-item-process-title-color, @brand-color); @step-item-process-icon-color: var(--td-step-item-process-icon-color, @brand-color); @@ -17,7 +17,7 @@ @step-item-finish-circle-color: var(--td-step-item-finish-circle-color, @brand-color); @step-item-finish-circle-bg: var(--td-step-item-finish-circle-bg, @brand-color-light); -@step-item-finish-title-color: var(--td-step-item-finish-title-color, @font-gray-1); +@step-item-finish-title-color: var(--td-step-item-finish-title-color, @text-color-primary); @step-item-finish-icon-color: var(--td-step-item-finish-icon-color, @brand-color); @step-item-finish-dot-border-color: var(--td-step-item-finish-dot-border-color, @brand-color); diff --git a/style/mobile/components/stepper/v2/_var.less b/style/mobile/components/stepper/v2/_var.less index dc41909fed..e045e19d7a 100644 --- a/style/mobile/components/stepper/v2/_var.less +++ b/style/mobile/components/stepper/v2/_var.less @@ -14,6 +14,6 @@ @stepper-border-radius: var(--td-stepper-border-radius, @radius-small); @stepper-border-color: var(--td-stepper-border-color, @component-border); -@stepper-input-color: var(--td-stepper-input-color, @font-gray-1); -@stepper-input-disabled-color: var(--td-stepper-input-disabled-color, @font-gray-4); +@stepper-input-color: var(--td-stepper-input-color, @text-color-primary); +@stepper-input-disabled-color: var(--td-stepper-input-disabled-color, @text-color-disabled); @stepper-input-disabled-bg: var(--td-stepper-input-disabled-bg, @bg-color-component-disabled); diff --git a/style/mobile/components/switch/v2/_var.less b/style/mobile/components/switch/v2/_var.less index 1c88c734ed..159465c38a 100644 --- a/style/mobile/components/switch/v2/_var.less +++ b/style/mobile/components/switch/v2/_var.less @@ -1,6 +1,6 @@ @switch-checked-color: var(--td-switch-checked-color, @brand-color); @switch-checked-disabled-color: var(--td-switch-checked-disabled-color, @brand-color-disabled); -@switch-unchecked-color: var(--td-switch-unchecked-color, @font-gray-4); +@switch-unchecked-color: var(--td-switch-unchecked-color, @text-color-disabled); @switch-unchecked-disabled-color: var(--td-switch-unchecked-disabled-color, @bg-color-component-disabled); @switch-width: var(--td-switch-width, 45px); @@ -36,7 +36,7 @@ @swtich-label-large-font-size: var(--td-swtich-label-font-size, 16px); @swtich-label-small-font-size: var(--td-swtich-label-font-size, 12px); -@switch-label-color: var(--td-switch-label-color, @font-gray-4); +@switch-label-color: var(--td-switch-label-color, @text-color-disabled); @switch-label-checked-color: var(--td-switch-label-checked-color, @switch-checked-color); // icon diff --git a/style/mobile/components/tab-bar-item/v2/_var.less b/style/mobile/components/tab-bar-item/v2/_var.less index c2a0b70d7d..78bc3aab7b 100644 --- a/style/mobile/components/tab-bar-item/v2/_var.less +++ b/style/mobile/components/tab-bar-item/v2/_var.less @@ -1,7 +1,7 @@ @item: ~"@{prefix}-tab-bar-item"; @tab-bar-height: var(--td-tab-bar-height, 40px); -@tab-bar-color: var(--td-tab-bar-color, @font-gray-1); +@tab-bar-color: var(--td-tab-bar-color, @text-color-primary); @tab-bar-bg-color: var(--td-tab-bar-bg-color, @bg-color-container); @tab-bar-border-color: var(--td-tab-bar-border-color, @border-color); @tab-bar-hover-bg-color: var(--td-tab-bar-hover-bg-color, rgba(0, 0, 0, .05)); diff --git a/style/mobile/components/table/_var.less b/style/mobile/components/table/_var.less index 4ba1b23835..254f0b6014 100644 --- a/style/mobile/components/table/_var.less +++ b/style/mobile/components/table/_var.less @@ -38,7 +38,7 @@ @scroll-track-color: #fff; @border-radius-default: 0; @border-radius-circle: 50%; -@table-header-bg-color: #fff; +@table-header-bg-color: @bg-color-container; @table-bg: @bg-color-container; @table--text-color: @text-color-primary; @table-head-text-color: @text-color-placeholder; diff --git a/style/mobile/components/tabs/v2/_var.less b/style/mobile/components/tabs/v2/_var.less index 68520109ae..30681b7d9d 100644 --- a/style/mobile/components/tabs/v2/_var.less +++ b/style/mobile/components/tabs/v2/_var.less @@ -11,9 +11,9 @@ @tab-item-vertical-height: var(--td-tab-item-vertical-height, 54px); @tab-item-vertical-width: var(--td-tab-item-vertical-width, 104px); -@tab-item-color: var(--td-tab-item-color, @font-gray-1); +@tab-item-color: var(--td-tab-item-color, @text-color-primary); @tab-item-active-color: var(--td-tab-item-active-color, @brand-color); -@tab-item-disabled-color: var(--td-tab-item-disabled-color, @font-gray-4); +@tab-item-disabled-color: var(--td-tab-item-disabled-color, @text-color-disabled); @tab-border-color: var(--td-tab-border-color, @component-stroke); // track diff --git a/style/mobile/components/tag/v2/_var.less b/style/mobile/components/tag/v2/_var.less index c0c0b887e4..52948e1a9b 100644 --- a/style/mobile/components/tag/v2/_var.less +++ b/style/mobile/components/tag/v2/_var.less @@ -12,10 +12,10 @@ // variant @tag-outline-bg-color: var(--td-tag-outline-bg-color, @bg-color-container); -@tag-default-font-color: var(--td-tag-default-font-color, @font-gray-1); +@tag-default-font-color: var(--td-tag-default-font-color, @text-color-primary); // status -@tag-disabled-color: var(--td-tag-disabled-color, @font-gray-4); +@tag-disabled-color: var(--td-tag-disabled-color, @text-color-disabled); @tag-disabled-background-color: var(--td-tag-disabled-background-color, @bg-color-component-disabled); @tag-disabled-border-color: var(--td-tag-disabled-border-color, @component-border); @@ -44,4 +44,4 @@ @tag-round-border-radius: var(--td-tag-round-border-radius, 999px); @tag-mark-border-radius: var(--td-tag-mark-border-radius, @tag-round-border-radius); -@tag-close-icon-color: var(--td-tag-close-icon-color, @font-gray-3); +@tag-close-icon-color: var(--td-tag-close-icon-color, @text-color-placeholder); diff --git a/style/mobile/components/textarea/v2/_var.less b/style/mobile/components/textarea/v2/_var.less index e1fd686771..f604a9d1ba 100644 --- a/style/mobile/components/textarea/v2/_var.less +++ b/style/mobile/components/textarea/v2/_var.less @@ -15,16 +15,16 @@ // 文本框背景颜色 @textarea-background-color: var(--td-textarea-background-color, @bg-color-container); // 占位符文本颜色 -@textarea-placeholder-color: var(--td-textarea-placeholder-color, @font-gray-3); +@textarea-placeholder-color: var(--td-textarea-placeholder-color, @text-color-placeholder); // 输入框文本颜色 -@textarea-text-color: var(--td-textarea-text-color, @font-gray-1); +@textarea-text-color: var(--td-textarea-text-color, @text-color-primary); // 标签文本颜色 -@textarea-label-color: var(--td-textarea-label-color, @font-gray-1); +@textarea-label-color: var(--td-textarea-label-color, @text-color-primary); // 计数器文本颜色 -@textarea-indicator-text-color: var(--td-textarea-indicator-text-color, @font-gray-3); +@textarea-indicator-text-color: var(--td-textarea-indicator-text-color, @text-color-placeholder); // 文本框圆角大小 @textarea-border-radius: var(--td-textarea-border-radius, @radius-default); // 文本框边框颜色 @textarea-border-color: var(--td-textarea-border-color, rgba(220, 220, 220, 1)); // 文本框禁用状态时的输入文本颜色 -@textarea-disabled-text-color: var(--td-textarea-disabled-text-color, @font-gray-4); +@textarea-disabled-text-color: var(--td-textarea-disabled-text-color, @text-color-disabled); diff --git a/style/mobile/components/upload/v2/_var.less b/style/mobile/components/upload/v2/_var.less index 86d7663bde..acbc227506 100644 --- a/style/mobile/components/upload/v2/_var.less +++ b/style/mobile/components/upload/v2/_var.less @@ -1,6 +1,6 @@ @upload-width: var(--td-upload-width, 80px); @upload-height: var(--td-upload-height, 80px); -@upload-add-color: var(--td-upload-add-color, @font-gray-3); +@upload-add-color: var(--td-upload-add-color, @text-color-placeholder); @upload-add-bg-color: var( --td-upload-add-bg-color, @bg-color-secondarycontainer @@ -8,5 +8,5 @@ @upload-background: var(--td-upload-background, @upload-add-bg-color); @upload-radius: var(--td-upload-radius, @radius-default); @upload-add-icon-font-size: var(--td-upload-add-icon-font-size, 28px); -@upload-delete-icon-color: var(--td-upload-delete-icon-color, @font-white-1); +@upload-delete-icon-color: var(--td-upload-delete-icon-color, @text-color-anti); @upload-grid-columns: var(--td-upload-grid-columns, 4); diff --git a/style/mobile/theme/_dark.less b/style/mobile/theme/_dark.less new file mode 100644 index 0000000000..58ca691d5e --- /dev/null +++ b/style/mobile/theme/_dark.less @@ -0,0 +1,167 @@ +:root[theme-mode="dark"] { + --td-brand-color-1: #1b2f51; + --td-brand-color-2: #173463; + --td-brand-color-3: #143975; + --td-brand-color-4: #103d88; + --td-brand-color-5: #0d429a; + --td-brand-color-6: #054bbe; + --td-brand-color-7: #2667d4; + --td-brand-color-8: #4582e6; + --td-brand-color-9: #699ef5; + --td-brand-color-10: #96bbf8; + --td-warning-color-1: #4f2a1d; + --td-warning-color-2: #582f21; + --td-warning-color-3: #733c23; + --td-warning-color-4: #a75d2b; + --td-warning-color-5: #cf6e2d; + --td-warning-color-6: #dc7633; + --td-warning-color-7: #e8935c; + --td-warning-color-8: #ecbf91; + --td-warning-color-9: #eed7bf; + --td-warning-color-10: #f3e9dc; + --td-error-color-1: #472324; + --td-error-color-2: #5e2a2d; + --td-error-color-3: #703439; + --td-error-color-4: #83383e; + --td-error-color-5: #a03f46; + --td-error-color-6: #c64751; + --td-error-color-7: #de6670; + --td-error-color-8: #ec888e; + --td-error-color-9: #edb1b6; + --td-error-color-10: #eeced0; + --td-success-color-1: #193a2a; + --td-success-color-2: #1a4230; + --td-success-color-3: #17533d; + --td-success-color-4: #0d7a55; + --td-success-color-5: #059465; + --td-success-color-6: #43af8a; + --td-success-color-7: #46bf96; + --td-success-color-8: #80d2b6; + --td-success-color-9: #b4e1d3; + --td-success-color-10: #deede8; + --td-gray-color-1: #f3f3f3; + --td-gray-color-2: #eee; + --td-gray-color-3: #e8e8e8; + --td-gray-color-4: #ddd; + --td-gray-color-5: #c6c6c6; + --td-gray-color-6: #a6a6a6; + --td-gray-color-7: #8b8b8b; + --td-gray-color-8: #777; + --td-gray-color-9: #5e5e5e; + --td-gray-color-10: #4b4b4b; + --td-gray-color-11: #383838; + --td-gray-color-12: #2c2c2c; + --td-gray-color-13: #242424; + --td-gray-color-14: #181818; + + // 文字 & 图标 颜色 + --td-font-white-1: rgba(255, 255, 255, 90%); + --td-font-white-2: rgba(255, 255, 255, 55%); + --td-font-white-3: rgba(255, 255, 255, 35%); + --td-font-white-4: rgba(255, 255, 255, 22%); + --td-font-gray-1: rgba(0, 0, 0, 90%); + --td-font-gray-2: rgba(0, 0, 0, 60%); + --td-font-gray-3: rgba(0, 0, 0, 40%); + --td-font-gray-4: rgba(0, 0, 0, 26%); + + // 基础颜色 + --td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作 + --td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告 + --td-error-color: var(--td-error-color-6); // 色彩-功能-失败 + --td-success-color: var(--td-success-color-5); // 色彩-功能-成功 + + // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态 + --td-brand-color-hover: var(--td-brand-color-7); // hover态 + --td-brand-color-focus: var(--td-brand-color-2); // focus态，包括鼠标和键盘 + --td-brand-color-active: var(--td-brand-color-9); // 点击态 + --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态 + --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态 + --td-brand-color-light-hover: var(--td-brand-color-2); + + // 警告色扩展 + --td-warning-color-hover: var(--td-warning-color-4); + --td-warning-color-focus: var(--td-warning-color-2); + --td-warning-color-active: var(--td-warning-color-6); + --td-warning-color-disabled: var(--td-warning-color-3); + --td-warning-color-light: var(--td-warning-color-1); + --td-warning-color-light-hover: var(--td-warning-color-2); + + // 失败/错误色扩展 + --td-error-color-hover: var(--td-error-color-5); + --td-error-color-focus: var(--td-error-color-2); + --td-error-color-active: var(--td-error-color-7); + --td-error-color-disabled: var(--td-error-color-3); + --td-error-color-light: var(--td-error-color-1); + --td-error-color-light-hover: var(--td-error-color-2); + + // 成功色扩展 + --td-success-color-hover: var(--td-success-color-4); + --td-success-color-focus: var(--td-success-color-2); + --td-success-color-active: var(--td-success-color-6); + --td-success-color-disabled: var(--td-success-color-3); + --td-success-color-light: var(--td-success-color-1); + --td-success-color-light-hover: var(--td-success-color-2); + + // 遮罩 + --td-mask-active: rgba(0, 0, 0, 40%); // 遮罩-弹出 + --td-mask-disabled: rgba(0, 0, 0, 60%); // 遮罩-禁用 + + // 背景色 + --td-bg-color-page: var(--td-gray-color-14); // 色彩 - page + --td-bg-color-container: var(--td-gray-color-13); // 色彩 - 容器 + --td-bg-color-container-hover: var(--td-gray-color-12); // 色彩 - 容器 - hover + --td-bg-color-container-active: var(--td-gray-color-10); // 色彩 - 容器 - active + --td-bg-color-container-select: var(--td-gray-color-9); // 色彩 - 容器 - select + --td-bg-color-secondarycontainer: var(--td-gray-color-12); // 色彩 - 次级容器 + --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11); // 色彩 - 次级容器 - hover + --td-bg-color-secondarycontainer-active: var(--td-gray-color-9); // 色彩 - 次级容器 - active + --td-bg-color-component: var(--td-gray-color-11); // 色彩 - 组件 + --td-bg-color-component-hover: var(--td-gray-color-10); // 色彩 - 组件 - hover + --td-bg-color-component-active: var(--td-gray-color-9); // 色彩 - 组件 - active + --td-bg-color-secondarycomponent: var(--td-gray-color-10); // 色彩 - 次级组件 + --td-bg-color-secondarycomponent-hover: var(--td-gray-color-9); // 色彩 - 次级组件 - hover + --td-bg-color-secondarycomponent-active: var(--td-gray-color-8); // 色彩 - 次级组件 - active + --td-bg-color-component-disabled: var(--td-gray-color-12); // 色彩 - 组件 - disabled + + // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色 + --td-bg-color-specialcomponent: transparent; + + // 文本颜色 + --td-text-color-primary: var(--td-font-white-1); // 色彩-文字-主要 + --td-text-color-secondary: var(--td-font-white-2); // 色彩-文字-次要 + --td-text-color-placeholder: var(--td-font-white-3); // 色彩-文字-占位符/说明 + --td-text-color-disabled: var(--td-font-white-4); // 色彩-文字-禁用 + --td-text-color-anti: #fff; // 色彩-文字-反色 + --td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌 + --td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接 + + // 分割线 + --td-border-level-1-color: var(--td-gray-color-11); + --td-component-stroke: var(--td-gray-color-11); + // 边框 + --td-border-level-2-color: var(--td-gray-color-9); + --td-component-border: var(--td-gray-color-9); + + // 基础/下层 投影 hover 使用的组件包括：表格 / + --td-shadow-1: 0 4px 6px rgba(0, 0, 0, 6%), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%); + // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 / + --td-shadow-2: 0 8px 10px rgba(0, 0, 0, 12%), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%); + // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知 + --td-shadow-3: 0 16px 24px rgba(0, 0, 0, 14%), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%); + // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边 + + --td-shadow-inset-top: inset 0 .5px 0 #5e5e5e; + --td-shadow-inset-right: inset .5px 0 0 #5e5e5e; + --td-shadow-inset-bottom: inset 0 -.5px 0 #5e5e5e; + --td-shadow-inset-left: inset -.5px 0 0 #5e5e5e; + + // table 特定阴影 + --td-table-shadow-color: rgba(0, 0, 0, 55%); + + // 滚动条颜色 + --td-scrollbar-color: rgba(255, 255, 255, 10%); + // 滚动条悬浮颜色（ hover ） + --td-scrollbar-hover-color: rgba(255, 255, 255, 30%); + // 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透 + --td-scroll-track-color: #333; +} diff --git a/style/mobile/theme/_index.less b/style/mobile/theme/_index.less index e69de29bb2..404d74cd81 100644 --- a/style/mobile/theme/_index.less +++ b/style/mobile/theme/_index.less @@ -0,0 +1 @@ +@import "./_dark.less"; From e1ede3b9b72150f20e49c7692b37cb4bd4f2c6a0 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Tue, 22 Aug 2023 16:49:54 +0800 Subject: [PATCH 02/12] style(side-bar): update sidebar prefix bg color --- style/mobile/components/side-bar/v2/_index.less | 2 +- style/mobile/components/side-bar/v2/_var.less | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/style/mobile/components/side-bar/v2/_index.less b/style/mobile/components/side-bar/v2/_index.less index 22b6d0c0cc..524dc0222c 100644 --- a/style/mobile/components/side-bar/v2/_index.less +++ b/style/mobile/components/side-bar/v2/_index.less @@ -44,7 +44,7 @@ right: 0; width: calc(@side-bar-border-radius * 2); height: calc(@side-bar-border-radius * 2); - background: #fff; + background: @side-bar-prefix-bg-color; &::after { content: ""; diff --git a/style/mobile/components/side-bar/v2/_var.less b/style/mobile/components/side-bar/v2/_var.less index 88d4509f30..4efc878278 100644 --- a/style/mobile/components/side-bar/v2/_var.less +++ b/style/mobile/components/side-bar/v2/_var.less @@ -11,3 +11,4 @@ @side-bar-active-color: var(--td-side-bar-active-color, @brand-color); @side-bar-border-radius: var(--td-side-bar-border-radius, 9px); @side-bar-icon-size: var(--td-side-bar-icon-size, 20px); +@side-bar-prefix-bg-color: var(--td-side-bar-prefix-bg-color, @bg-color-container); \ No newline at end of file From 19be7ba39c33646514df507c380ac899ed041d24 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Tue, 22 Aug 2023 17:25:28 +0800 Subject: [PATCH 03/12] chore: lint less files --- style/mobile/components/action-sheet/v2/_var.less | 2 +- style/mobile/components/side-bar/v2/_var.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/style/mobile/components/action-sheet/v2/_var.less b/style/mobile/components/action-sheet/v2/_var.less index 46feb4994b..820ccf6094 100644 --- a/style/mobile/components/action-sheet/v2/_var.less +++ b/style/mobile/components/action-sheet/v2/_var.less @@ -12,4 +12,4 @@ @action-sheet-dot-color: var(--td-action-sheet-dot-color, @text-color-disabled); @action-sheet-dot-active-color: var(--td-action-sheet-dot-active-color, @brand-color); @action-sheet-text-weight: var(--td-action-sheet-text-weight, 400); -@action-sheet-gap-color: var(--td-action-sheet-gap-color, var(--td-bg-color-page, @component-stroke)); \ No newline at end of file +@action-sheet-gap-color: var(--td-action-sheet-gap-color, var(--td-bg-color-page, @component-stroke)); diff --git a/style/mobile/components/side-bar/v2/_var.less b/style/mobile/components/side-bar/v2/_var.less index 4efc878278..05ddd0df87 100644 --- a/style/mobile/components/side-bar/v2/_var.less +++ b/style/mobile/components/side-bar/v2/_var.less @@ -11,4 +11,4 @@ @side-bar-active-color: var(--td-side-bar-active-color, @brand-color); @side-bar-border-radius: var(--td-side-bar-border-radius, 9px); @side-bar-icon-size: var(--td-side-bar-icon-size, 20px); -@side-bar-prefix-bg-color: var(--td-side-bar-prefix-bg-color, @bg-color-container); \ No newline at end of file +@side-bar-prefix-bg-color: var(--td-side-bar-prefix-bg-color, @bg-color-container); From 7d612491caf06e767817b5db31f794bacb5f90b7 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Sat, 9 Sep 2023 11:34:06 +0800 Subject: [PATCH 04/12] fix: fix dark mode tokens of mobile --- style/mobile/components/badge/v2/_index.less | 4 +- style/mobile/components/badge/v2/_var.less | 2 +- style/mobile/components/table/_var.less | 2 +- style/mobile/theme/_dark.less | 45 +++++++------------- 4 files changed, 20 insertions(+), 33 deletions(-) diff --git a/style/mobile/components/badge/v2/_index.less b/style/mobile/components/badge/v2/_index.less index 0a063fe690..0c22633769 100644 --- a/style/mobile/components/badge/v2/_index.less +++ b/style/mobile/components/badge/v2/_index.less @@ -90,7 +90,7 @@ } &__content { - color: @badge-context-text-color; + color: @badge-content-text-color; } &__content:not(:empty) + .t-has-count { @@ -103,6 +103,6 @@ &__content-text { display: block; line-height: 24px; - color: @badge-context-text-color; + color: @badge-content-text-color; } } diff --git a/style/mobile/components/badge/v2/_var.less b/style/mobile/components/badge/v2/_var.less index 854c7728fc..c47535415f 100644 --- a/style/mobile/components/badge/v2/_var.less +++ b/style/mobile/components/badge/v2/_var.less @@ -8,7 +8,7 @@ @badge-border-radius: var(--td-badge-border-radius, 2px); @border-bubble-border-radius: var(--td-badge-bubble-border-radius, 10px 10px 10px 1px); @badge-dot-size: var(--td-badge-dot-size, 8px); -@badge-context-text-color: var(--td-badge-context-text-color, @text-color-primary); +@badge-content-text-color: var(--td-badge-content-text-color, @text-color-primary); // large @badge-large-font-size: var(--td-badge-large-font-size, @font-size-s); diff --git a/style/mobile/components/table/_var.less b/style/mobile/components/table/_var.less index 254f0b6014..4ba1b23835 100644 --- a/style/mobile/components/table/_var.less +++ b/style/mobile/components/table/_var.less @@ -38,7 +38,7 @@ @scroll-track-color: #fff; @border-radius-default: 0; @border-radius-circle: 50%; -@table-header-bg-color: @bg-color-container; +@table-header-bg-color: #fff; @table-bg: @bg-color-container; @table--text-color: @text-color-primary; @table-head-text-color: @text-color-placeholder; diff --git a/style/mobile/theme/_dark.less b/style/mobile/theme/_dark.less index 58ca691d5e..03204d1b54 100644 --- a/style/mobile/theme/_dark.less +++ b/style/mobile/theme/_dark.less @@ -56,9 +56,9 @@ // 文字 & 图标 颜色 --td-font-white-1: rgba(255, 255, 255, 90%); - --td-font-white-2: rgba(255, 255, 255, 55%); - --td-font-white-3: rgba(255, 255, 255, 35%); - --td-font-white-4: rgba(255, 255, 255, 22%); + --td-font-white-2: rgba(255, 255, 255, 60%); + --td-font-white-3: rgba(255, 255, 255, 40%); + --td-font-white-4: rgba(255, 255, 255, 26%); --td-font-gray-1: rgba(0, 0, 0, 90%); --td-font-gray-2: rgba(0, 0, 0, 60%); --td-font-gray-3: rgba(0, 0, 0, 40%); @@ -70,37 +70,33 @@ --td-error-color: var(--td-error-color-6); // 色彩-功能-失败 --td-success-color: var(--td-success-color-5); // 色彩-功能-成功 - // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态 - --td-brand-color-hover: var(--td-brand-color-7); // hover态 - --td-brand-color-focus: var(--td-brand-color-2); // focus态，包括鼠标和键盘 + // 基础颜色的扩展 用于 聚焦 / 禁用 / 点击 等状态 + --td-brand-color-focus: var(--td-brand-color-1); // focus态，包括鼠标和键盘 --td-brand-color-active: var(--td-brand-color-9); // 点击态 --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态 --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态 - --td-brand-color-light-hover: var(--td-brand-color-2); + --td-brand-color-light-active: var(--td-brand-color-2); // 浅色的选中态 // 警告色扩展 - --td-warning-color-hover: var(--td-warning-color-4); --td-warning-color-focus: var(--td-warning-color-2); - --td-warning-color-active: var(--td-warning-color-6); + --td-warning-color-active: var(--td-warning-color-4); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); - --td-warning-color-light-hover: var(--td-warning-color-2); + --td-warning-color-light-active: var(--td-warning-color-2); // 失败/错误色扩展 - --td-error-color-hover: var(--td-error-color-5); --td-error-color-focus: var(--td-error-color-2); - --td-error-color-active: var(--td-error-color-7); + --td-error-color-active: var(--td-error-color-5); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); - --td-error-color-light-hover: var(--td-error-color-2); + --td-error-color-light-active: var(--td-error-color-2); // 成功色扩展 - --td-success-color-hover: var(--td-success-color-4); --td-success-color-focus: var(--td-success-color-2); - --td-success-color-active: var(--td-success-color-6); + --td-success-color-active: var(--td-success-color-4); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); - --td-success-color-light-hover: var(--td-success-color-2); + --td-success-color-light-active: var(--td-success-color-2); // 遮罩 --td-mask-active: rgba(0, 0, 0, 40%); // 遮罩-弹出 @@ -109,18 +105,11 @@ // 背景色 --td-bg-color-page: var(--td-gray-color-14); // 色彩 - page --td-bg-color-container: var(--td-gray-color-13); // 色彩 - 容器 - --td-bg-color-container-hover: var(--td-gray-color-12); // 色彩 - 容器 - hover - --td-bg-color-container-active: var(--td-gray-color-10); // 色彩 - 容器 - active - --td-bg-color-container-select: var(--td-gray-color-9); // 色彩 - 容器 - select --td-bg-color-secondarycontainer: var(--td-gray-color-12); // 色彩 - 次级容器 - --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11); // 色彩 - 次级容器 - hover - --td-bg-color-secondarycontainer-active: var(--td-gray-color-9); // 色彩 - 次级容器 - active --td-bg-color-component: var(--td-gray-color-11); // 色彩 - 组件 - --td-bg-color-component-hover: var(--td-gray-color-10); // 色彩 - 组件 - hover - --td-bg-color-component-active: var(--td-gray-color-9); // 色彩 - 组件 - active - --td-bg-color-secondarycomponent: var(--td-gray-color-10); // 色彩 - 次级组件 - --td-bg-color-secondarycomponent-hover: var(--td-gray-color-9); // 色彩 - 次级组件 - hover - --td-bg-color-secondarycomponent-active: var(--td-gray-color-8); // 色彩 - 次级组件 - active + --td-bg-color-container-active: var(--td-gray-color-12); // 色彩 - 容器 - active + --td-bg-color-secondarycontainer-active: var(--td-gray-color-9); // 色彩 - 次级容器 - active + --td-bg-color-component-active: var(--td-gray-color-10); // 色彩 - 组件 - active --td-bg-color-component-disabled: var(--td-gray-color-12); // 色彩 - 组件 - disabled // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色 @@ -131,7 +120,7 @@ --td-text-color-secondary: var(--td-font-white-2); // 色彩-文字-次要 --td-text-color-placeholder: var(--td-font-white-3); // 色彩-文字-占位符/说明 --td-text-color-disabled: var(--td-font-white-4); // 色彩-文字-禁用 - --td-text-color-anti: #fff; // 色彩-文字-反色 + --td-text-color-anti: var(--td-font-gray-1); // 色彩-文字-反色 --td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌 --td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接 @@ -160,8 +149,6 @@ // 滚动条颜色 --td-scrollbar-color: rgba(255, 255, 255, 10%); - // 滚动条悬浮颜色（ hover ） - --td-scrollbar-hover-color: rgba(255, 255, 255, 30%); // 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透 --td-scroll-track-color: #333; } From d25b433a669382d422a7a45d062ed24215af7bad Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Sat, 9 Sep 2023 11:54:18 +0800 Subject: [PATCH 05/12] fix: fix dark mode tokens of mobile --- style/mobile/theme/_dark.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/mobile/theme/_dark.less b/style/mobile/theme/_dark.less index 03204d1b54..02c6ecad74 100644 --- a/style/mobile/theme/_dark.less +++ b/style/mobile/theme/_dark.less @@ -108,7 +108,7 @@ --td-bg-color-secondarycontainer: var(--td-gray-color-12); // 色彩 - 次级容器 --td-bg-color-component: var(--td-gray-color-11); // 色彩 - 组件 --td-bg-color-container-active: var(--td-gray-color-12); // 色彩 - 容器 - active - --td-bg-color-secondarycontainer-active: var(--td-gray-color-9); // 色彩 - 次级容器 - active + --td-bg-color-secondarycontainer-active: var(--td-gray-color-11); // 色彩 - 次级容器 - active --td-bg-color-component-active: var(--td-gray-color-10); // 色彩 - 组件 - active --td-bg-color-component-disabled: var(--td-gray-color-12); // 色彩 - 组件 - disabled From 2e2f724b8ecd24c805d631e8a0ca78948389c537 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Mon, 11 Sep 2023 10:23:41 +0800 Subject: [PATCH 06/12] feat: resume table header backgroun color token --- style/mobile/components/table/_var.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/mobile/components/table/_var.less b/style/mobile/components/table/_var.less index 4ba1b23835..254f0b6014 100644 --- a/style/mobile/components/table/_var.less +++ b/style/mobile/components/table/_var.less @@ -38,7 +38,7 @@ @scroll-track-color: #fff; @border-radius-default: 0; @border-radius-circle: 50%; -@table-header-bg-color: #fff; +@table-header-bg-color: @bg-color-container; @table-bg: @bg-color-container; @table--text-color: @text-color-primary; @table-head-text-color: @text-color-placeholder; From f478091a0a6020843e0450771c6c7e9b9f3c01aa Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Wed, 13 Sep 2023 21:58:37 +0800 Subject: [PATCH 07/12] fix(dark-mode): update dark tokens for mobile --- style/mobile/components/avatar/v2/_var.less | 2 +- style/mobile/components/badge/v2/_index.less | 4 ---- style/mobile/components/badge/v2/_var.less | 1 - style/mobile/components/collapse/v2/_index.less | 2 +- style/mobile/components/collapse/v2/_var.less | 1 + style/mobile/components/slider/v2/_index.less | 2 +- style/mobile/components/slider/v2/_var.less | 1 - style/mobile/components/step-item/v2/_var.less | 2 +- style/mobile/components/switch/v2/_index.less | 2 +- 9 files changed, 6 insertions(+), 11 deletions(-) diff --git a/style/mobile/components/avatar/v2/_var.less b/style/mobile/components/avatar/v2/_var.less index 0b632b067f..e22ff80a77 100644 --- a/style/mobile/components/avatar/v2/_var.less +++ b/style/mobile/components/avatar/v2/_var.less @@ -15,7 +15,7 @@ @avatar-border-width-small: var(--td-avatar-border-width-small, 2px); @avatar-border-width-medium: var(--td-avatar-border-width-medium, 3px); @avatar-border-width-large: var(--td-avatar-border-width-large, 4px); -@avatar-border-color: var(--td-avatar-border-color, #fff); +@avatar-border-color: var(--td-avatar-border-color, @bg-color-container); @avatar-circle-border-radius: var(--td-avatar-circle-border-radius, @radius-circle); @avatar-round-border-radius: var(--td-avatar-round-border-radius, @radius-default); diff --git a/style/mobile/components/badge/v2/_index.less b/style/mobile/components/badge/v2/_index.less index 0c22633769..d9126fdb74 100644 --- a/style/mobile/components/badge/v2/_index.less +++ b/style/mobile/components/badge/v2/_index.less @@ -89,9 +89,6 @@ border-radius: calc(@badge-large-height / 2); } - &__content { - color: @badge-content-text-color; - } &__content:not(:empty) + .t-has-count { transform: translate(50%, -50%); @@ -103,6 +100,5 @@ &__content-text { display: block; line-height: 24px; - color: @badge-content-text-color; } } diff --git a/style/mobile/components/badge/v2/_var.less b/style/mobile/components/badge/v2/_var.less index c47535415f..f1f9d04c3e 100644 --- a/style/mobile/components/badge/v2/_var.less +++ b/style/mobile/components/badge/v2/_var.less @@ -8,7 +8,6 @@ @badge-border-radius: var(--td-badge-border-radius, 2px); @border-bubble-border-radius: var(--td-badge-bubble-border-radius, 10px 10px 10px 1px); @badge-dot-size: var(--td-badge-dot-size, 8px); -@badge-content-text-color: var(--td-badge-content-text-color, @text-color-primary); // large @badge-large-font-size: var(--td-badge-large-font-size, @font-size-s); diff --git a/style/mobile/components/collapse/v2/_index.less b/style/mobile/components/collapse/v2/_index.less index 7690d7cbd5..10c3694dc8 100644 --- a/style/mobile/components/collapse/v2/_index.less +++ b/style/mobile/components/collapse/v2/_index.less @@ -62,7 +62,7 @@ } .@{cell}__right-icon { - color: var(--td-collapse-icon-color, @font-gray-3); + color: @collapse-icon-color; } } diff --git a/style/mobile/components/collapse/v2/_var.less b/style/mobile/components/collapse/v2/_var.less index 66051affeb..aed90b2f6f 100644 --- a/style/mobile/components/collapse/v2/_var.less +++ b/style/mobile/components/collapse/v2/_var.less @@ -1,6 +1,7 @@ @collapse-header-text-color: var(--td-collapse-header-text-color, @text-color-primary); @collapse-content-text-color: var(--td-collapse-content-text-color, @text-color-primary); @collapse-header-text-disabled-color: var(--td-collapse-header-text-disabled-color, @text-color-disabled); +@collapse-icon-color: var(--td-collapse-icon-color, @text-color-placeholder); // font-size @collapse-title-font-size: var(--td-collapse-title-font-size, @font-size-m); diff --git a/style/mobile/components/slider/v2/_index.less b/style/mobile/components/slider/v2/_index.less index 8e627f36be..f6b2b84996 100644 --- a/style/mobile/components/slider/v2/_index.less +++ b/style/mobile/components/slider/v2/_index.less @@ -75,7 +75,7 @@ &__value, &__range-extreme, &__dot-value { - color: @slider-dot-color; + color: @slider-scale-desc-color; &--sr-only { position: absolute; diff --git a/style/mobile/components/slider/v2/_var.less b/style/mobile/components/slider/v2/_var.less index daf33c49bd..0671c81cc9 100644 --- a/style/mobile/components/slider/v2/_var.less +++ b/style/mobile/components/slider/v2/_var.less @@ -9,7 +9,6 @@ @slider-active-disabled-color: var(--td-slider-disabled-color, @brand-color-disabled); @slider-disabled-text-color: var(--td-slider-disabled-text-color, @text-color-disabled); @slider-scale-desc-color: var(--td-slider-scale-desc-color, @text-color-primary); -@slider-dot-color: var(--td-slider-dot-color, @text-color-primary); // capsule @slider-capsule-bar-heihgt: var(--td-slider-capsule-bar-heihgt, 24px); diff --git a/style/mobile/components/step-item/v2/_var.less b/style/mobile/components/step-item/v2/_var.less index 0f64f0e89d..aba07dec52 100644 --- a/style/mobile/components/step-item/v2/_var.less +++ b/style/mobile/components/step-item/v2/_var.less @@ -9,7 +9,7 @@ @step-item-default-icon-color: var(--td-step-item-default-icon-color, @text-color-placeholder); @step-item-default-dot-border-color: var(--td-step-item-default-dot-border-color, @component-border); -@step-item-process-circle-color: var(--td-step-item-process-circle-color, @text-color-primary); +@step-item-process-circle-color: var(--td-step-item-process-circle-color, @font-white-1); @step-item-process-circle-bg: var(--td-step-item-process-circle-bg, @brand-color); @step-item-process-title-color: var(--td-step-item-process-title-color, @brand-color); @step-item-process-icon-color: var(--td-step-item-process-icon-color, @brand-color); diff --git a/style/mobile/components/switch/v2/_index.less b/style/mobile/components/switch/v2/_index.less index ab4e98e682..43a69c0bea 100644 --- a/style/mobile/components/switch/v2/_index.less +++ b/style/mobile/components/switch/v2/_index.less @@ -100,7 +100,7 @@ width: @switch-dot-size; height: @switch-dot-size; border-radius: 50%; - background-color: @bg-color-container; + background-color: @font-white-1; transition: all .3s; transform: translateY(-50%); box-shadow: @switch-dot-shadow; From 136a38bb35dff07200f5b7815c155109d5a888b5 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Wed, 13 Sep 2023 22:07:12 +0800 Subject: [PATCH 08/12] fix(dark-mode): update dark tokens for mobile --- style/mobile/components/skeleton/v2/_var.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/mobile/components/skeleton/v2/_var.less b/style/mobile/components/skeleton/v2/_var.less index 9f1e5d4c89..92b9b38497 100644 --- a/style/mobile/components/skeleton/v2/_var.less +++ b/style/mobile/components/skeleton/v2/_var.less @@ -1,4 +1,4 @@ -@skeleton-animation-gradient: var(--td-skeleton-animation-gradient, @text-color-disabled); +@skeleton-animation-gradient: var(--td-skeleton-animation-gradient, @text-color-placeholder); @skeleton-animation-flashed: var(--td-skeleton-animation-flashed, rgba(90%, 90%, 90%, .3)); @skeleton-bg-color: var(--td-skeleton-bg-color, @bg-color-secondarycontainer); @skeleton-row-spacing: var(--td-skeleton-row-spacing, @spacer-2); From 6bd8b7a4036de95ad6f750e0a8af123cd07b4543 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Wed, 13 Sep 2023 22:43:38 +0800 Subject: [PATCH 09/12] refactor: fix stylelint --- style/mobile/components/badge/v2/_index.less | 1 - 1 file changed, 1 deletion(-) diff --git a/style/mobile/components/badge/v2/_index.less b/style/mobile/components/badge/v2/_index.less index d9126fdb74..20c2b6ac78 100644 --- a/style/mobile/components/badge/v2/_index.less +++ b/style/mobile/components/badge/v2/_index.less @@ -89,7 +89,6 @@ border-radius: calc(@badge-large-height / 2); } - &__content:not(:empty) + .t-has-count { transform: translate(50%, -50%); position: absolute; From 97ddc38f8cb756e2a6ff0c0af2cf9ecd7b830b06 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Wed, 13 Sep 2023 23:11:57 +0800 Subject: [PATCH 10/12] feat(dark-mode): add dark mode for mobile form --- style/mobile/components/form/_index.less | 6 +++--- style/mobile/components/link/v2/_var.less | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/style/mobile/components/form/_index.less b/style/mobile/components/form/_index.less index 15fa4b97cb..350c8cf162 100644 --- a/style/mobile/components/form/_index.less +++ b/style/mobile/components/form/_index.less @@ -3,7 +3,7 @@ @import "./_var.less"; .@{prefix}-form { - background-color: #fff; + background-color: @bg-color-container; .@{prefix}-form__item { display: flex; @@ -30,7 +30,7 @@ } &-help { - color: @font-gray-4; + color: @text-color-disabled; } &--error { @@ -60,7 +60,7 @@ padding-right: 16px; vertical-align: middle; line-height: 24px; - color: @font-gray-1; + color: @text-color-primary; box-sizing: border-box; word-break: break-all; diff --git a/style/mobile/components/link/v2/_var.less b/style/mobile/components/link/v2/_var.less index 73a36aa275..985be39913 100644 --- a/style/mobile/components/link/v2/_var.less +++ b/style/mobile/components/link/v2/_var.less @@ -1,6 +1,6 @@ // 状态色 - 默认色 -@link-default-color: var(--td-link-default-color, @font-gray-1); // default 主题默认态颜色 +@link-default-color: var(--td-link-default-color, @text-color-primary); // default 主题默认态颜色 @link-default-active-color: var(--td-link-default-active-color, @brand-color-active); // default 主题激活态颜色 @link-default-disabled-color: var(--td-link-default-disabled-color, @text-color-disabled); // default 主题禁用态颜色 From bb5d79c1813b238b461b01ff3eb69c0560b5cfb8 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Thu, 14 Sep 2023 10:21:44 +0800 Subject: [PATCH 11/12] fix(tabs): fix tabs suffix bg color --- style/mobile/components/tabs/v2/_index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/mobile/components/tabs/v2/_index.less b/style/mobile/components/tabs/v2/_index.less index d9e46fbb4f..85b837570c 100644 --- a/style/mobile/components/tabs/v2/_index.less +++ b/style/mobile/components/tabs/v2/_index.less @@ -111,7 +111,7 @@ bottom: 0; width: 18px; height: 18px; - background: #fff; + background: @bg-color-container; &::after { content: ""; From ff4a5800ffaa7faaf360de0e2ab8a0dc09e81efa Mon Sep 17 00:00:00 2001 From: anlyyao Date: Thu, 14 Sep 2023 11:24:07 +0800 Subject: [PATCH 12/12] fix(Slider): resolved dot bg-color error --- style/mobile/components/slider/v2/_var.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/mobile/components/slider/v2/_var.less b/style/mobile/components/slider/v2/_var.less index 0671c81cc9..aaedbea1f0 100644 --- a/style/mobile/components/slider/v2/_var.less +++ b/style/mobile/components/slider/v2/_var.less @@ -1,6 +1,6 @@ @slider: ~"@{prefix}-slider"; @slider-bar-height: var(--td-slider-bar-height, 4px); -@slider-dot-bg-color: var(--td-slider-dot-bg-color, @bg-color-container); +@slider-dot-bg-color: var(--td-slider-dot-bg-color, #fff); @slider-dot-size: var(--td-slider-dot-size, 20px); @slider-dot-color: var(--td-slider-dot-color, @bg-color-secondarycontainer); @slider-default-color: var(--td-slider-default-color, @bg-color-secondarycomponent);