fix:暗色主题适配

Author: discreted66

examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue

@@ -19,6 +19,6 @@ const IconMinus = iconMinus()
 }
 
 .my-date-picker {
-  background: var(--tv-color-bg-active-emphasize);
+  background: var(--tv-color-bg-2);
 }
 </style>

examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue

@@ -27,6 +27,6 @@ export default {
 }
 
 .my-date-picker {
-  background: var(--tv-color-bg-active-emphasize);
+  background: var(--tv-color-bg-2);
 }
 </style>

packages/renderless/src/date-range/vue.ts

@@ -131,7 +131,7 @@ const initState = ({ reactive, computed, api, constants, designConfig, props })
     enableYearArrow: computed(() => api.computerEnableYearArrow()),
     // tiny 新增
     confirmButtonProps: {
-      plain: true,
+      plain: false,
       type: 'default',
       ...designConfig?.state?.confirmButtonProps
     }

packages/theme/src/search/index.less

@@ -110,8 +110,8 @@
       transform: translateY(-50%);
       width: 1px;
       height: 16px;
-      background-color: #000000;
-      opacity: 8%;
+      background-color: var(--tv-Search-border-short-color);
+      opacity: 1;
     }
   }
 

packages/theme/src/search/vars.less

@@ -69,4 +69,6 @@
   --tv-Search-list-hover-bg-color: var(--tv-color-bg-hover, #f5f5f5);
   // 搜索下拉框选项水平内边距
   --tv-Search-selector-list-padding-x: 10px;
+  // 搜索图标分割线
+  --tv-Search-border-short-color: var(--tv-color-border-divider-short, #dbdbdb);
 }

packages/theme/src/steps/index.less

@@ -651,10 +651,6 @@
         .left-line {
           border-top: 1px solid var(--tv-Steps-line-active-bg-color);
         }
-
-        .right-line {
-          border-color: var(--tv-Steps-line-doing-border-color);
-        }
       }
 
       &.done {
@@ -703,6 +699,7 @@
         font-size: var(--tv-Steps-font-size);
         margin-left: var(--tv-Steps-text-margin-left);
         font-weight: 500;
+        padding-top: 2px;
         overflow: hidden;
         display: -webkit-box;
         -webkit-box-orient: vertical;
@@ -1028,27 +1025,36 @@
   .@{steps-prefix-cls} {
     &-block.fault {
       & > .block-left .left-dot {
-        border-color: #f23030;
+        border-color: var(--tv-Steps-error-icon-color);
       }
 
       & > .block-right .title-vertical {
-        color: #f23030;
+        color: var(--tv-Steps-error-text-color);
       }
     }
 
-    &-block.disabled {
-      cursor: not-allowed;
+    &-block {
+      display: flex;
 
-      & > .block-right {
-        .title-vertical,
-        .description {
-          color: var(--tv-Steps-disabled-text-color);
+      & > .block-left {
+        margin-top: 6.5px;
+        margin-right: 12px;
+
+        & .left-dot {
+          width: 10px;
+          height: 10px;
+          border: 1px solid var(--tv-Steps-dot-vertical-undo-dot-color);
+          border-radius: 50%;
+          box-sizing: border-box;
         }
-      }
-    }
 
-    &-block {
-      display: flex;
+        & .left-line {
+          margin: 4px auto 0;
+          height: calc(100% - 11.5px);
+          width: 1px;
+          background-color: var(--tv-Steps-dot-vertical-undo-dot-color);
+        }
+      }
 
       &.done,
       &.doing,
@@ -1058,8 +1064,7 @@
         }
       }
 
-      &.done,
-      &.doing {
+      &.done {
         & > .block-left > .left-line {
           background-color: var(--tv-Steps-dot-vertical-current-bg-color);
         }
@@ -1075,33 +1080,13 @@
         }
       }
 
-      & > .block-left {
-        margin-top: 6.5px;
-        margin-right: 12px;
-
-        & .left-dot {
-          width: 10px;
-          height: 10px;
-          border: 1px solid var(--tv-Steps-dot-vertical-current-bg-color);
-          border-radius: 50%;
-          box-sizing: border-box;
-        }
-
-        & .left-line {
-          margin: 4px auto 0;
-          height: calc(100% - 11.5px);
-          width: 1px;
-          background-color: var(--tv-Steps-dot-vertical-current-bg-color);
-        }
-      }
-
       & > .block-right {
         font-size: 14px;
         line-height: 1.5;
         padding-bottom: 12px;
 
         .title-vertical {
-          color: #595959;
+          color: var(--tv-Steps-dot-title-undo-text-color);
         }
 
         .description {
@@ -1116,6 +1101,22 @@
           display: none;
         }
       }
+
+      &.disabled {
+        cursor: not-allowed;
+
+        & .left-dot {
+          background-color: var(--tv-Steps-disabled-icon-bg-color);
+          border-color: var(--tv-Steps-disabled-border-color);
+        }
+
+        & > .block-right {
+          .title-vertical,
+          .description {
+            color: var(--tv-Steps-disabled-text-color);
+          }
+        }
+      }
     }
   }
 }

packages/theme/src/steps/vars.less

@@ -184,7 +184,10 @@
 
   // 垂直点状形场景
   // 垂直点状形当前节点颜色
-  --tv-Steps-dot-vertical-current-bg-color: var(--tv-color-border, #808080);
+  --tv-Steps-dot-vertical-current-bg-color: var(--tv-color-border-active, #191919);
+  --tv-Steps-dot-vertical-undo-border-color: var(--tv-color-border-disabled, #c2c2c2);
+  --tv-Steps-dot-vertical-undo-dot-color: var(--tv-color-bg-4, #c2c2c2);
+  --tv-Steps-dot-title-undo-text-color: var(--tv-color-text-secondary, #595959);
 
   /** timline场景 */
   // timeline图标字号

packages/theme/src/tabs/index.less

@@ -34,17 +34,13 @@
     overflow: hidden;
   }
 
-  &__nav-scroll {
-    margin-right: 16px;
-  }
 
   /** 头部场景 */
   &__header {
     position: relative;
     margin: 0;
     padding: 0;
     display: flex;
-    justify-content: space-between;
     align-items: center;
 
     .@{tabs-prefix-cls} {
@@ -63,10 +59,9 @@
 
       // 添加按钮
       &__new-tab {
-        margin-left: 16px;
         margin-top: 3px;
         height: 16px;
-        padding: 0 16px;
+        padding-left: 12px;
         font-size: var(--tv-Tabs-header-separator-height);
         display: inline-flex;
         border-left: 1px solid var(--tv-Tabs-border-color);
@@ -78,6 +73,8 @@
 
         svg {
           fill: var(--tv-Tabs-header-icon-color);
+          font-size: var(--tv-Tabs-more-icon-size);
+          padding: 4px;
 
           &:hover {
             fill: var(--tv-Tabs-header-icon-color-hover);
@@ -92,7 +89,6 @@
         display: flex;
         align-items: center;
         position: relative;
-        width: 100%;
 
         &.is-scrollable {
           padding: 0 20px;
@@ -292,8 +288,6 @@
       }
 
       &:hover {
-        background-color: var(--tv-Tabs-icon-close-hover-bg-color);
-
         svg {
           fill: var(--tv-Tabs-icon-close-hover-text-color);
         }
@@ -315,10 +309,11 @@
   // 更多按钮场景
   &__more-container {
     position: absolute;
-    right: 0px;
+    right: 0;
     font-size: var(--tv-Tabs-font-size-base);
     color: var(--tv-Tabs-header-font-normal-text-color);
     line-height: var(--tv-Tabs-height);
+    padding-top: 5px;
 
     .tiny-dropdown__suffix-inner {
       display: none;
@@ -358,6 +353,7 @@
 
         .tiny-svg {
           font-size: var(--tv-Tabs-more-icon-size);
+          padding: 4px;
           vertical-align: middle;
           fill: var(--tv-Tabs-more-icon-color);
 

packages/theme/src/tabs/vars.less

@@ -141,7 +141,7 @@
   // 头部更多图标盒子高度
   --tv-Tabs-more-icon-height: 52px;
   // 头部更多图标尺寸
-  --tv-Tabs-more-icon-size: var(--tv-font-size-heading-xs, 16px);
+  --tv-Tabs-more-icon-size: var(--tv-font-size-heading-lg, 24px);
   // 头部更多图标颜色
   --tv-Tabs-more-icon-color: var(--tv-color-icon-control, #191919);
   // 头部更多按钮左侧盒子阴影高度

packages/vue/src/date-range/src/mobile-first.vue

@@ -267,6 +267,7 @@
           @click="handleConfirm(false)"
         >
           {{ t('ui.datepicker.confirm') }}
+          222
         </tiny-button>
       </div>
     </div>