feat(dark-mode): add dark mode for mobile

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 {

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));

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;
   }
 }

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);

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

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();
 

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);

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;
 

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);

style/mobile/components/cell/v2/_index.less

@@ -43,6 +43,10 @@
     font-size: @cell-note-font-size;
   }
 
+  &__title {
+    color: @cell-title-color;
+  }
+
   &__title,
   &__note {
     flex: 1 1 auto;

style/mobile/components/cell/v2/_var.less

@@ -5,18 +5,18 @@
 @cell-bg-color: var(--td-cell-bg-color, @bg-color-container);
 @cell-hover-color: var(--td-cell-hover-color, @bg-color-secondarycontainer);
 @cell-border-color: var(--td-cell-border-color, @component-stroke);
-@cell-border-left-space: var(--td-cell-border-left-space, @cell-horizontal-padding);
+@cell-border-left-space: var(--td-border-left-space, @cell-horizontal-padding);
 @cell-border-right-space: var(--td-cell-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);

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);
 

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 {

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);

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-disabled-color: var(--td-collapse-header-text-disabled-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-disabled-color: var(--td-collapse-header-text-disabled-color, @text-color-disabled);
 
 // font-size
 @collapse-title-font-size: var(--td-collapse-title-font-size, @font-size-m);

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);
 // 带方形底倒计时圆角大小

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);

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);

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 {

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);

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);
 

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);

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 {

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);

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);

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);