feat:暗色主题适配 (#3044)

Author: discreted66

examples/sites/demos/pc/app/image/lazy-composition-api.vue

@@ -23,7 +23,6 @@ const srcList = ref([
 .demo-image__lazy {
   height: 300px;
   overflow-y: auto;
-  background-color: #f5f5f5;
 }
 .demo-image__lazy .tiny-image {
   display: block;

examples/sites/demos/pc/app/image/lazy.vue

@@ -31,7 +31,6 @@ export default {
 .demo-image__lazy {
   height: 300px;
   overflow-y: auto;
-  background-color: #f5f5f5;
 }
 .demo-image__lazy .tiny-image {
   display: block;

examples/sites/demos/pc/app/loading/basic-usage-composition-api.vue

@@ -26,7 +26,6 @@ onMounted(() => {
 #tiny-basic-loading1 {
   width: 100%;
   height: 120px;
-  border: 1px solid beige;
   margin-top: 10px;
 }
 </style>

examples/sites/demos/pc/app/loading/basic-usage.vue

@@ -34,7 +34,6 @@ export default {
 #tiny-basic-loading1 {
   width: 100%;
   height: 120px;
-  border: 1px solid beige;
   margin-top: 10px;
 }
 </style>

examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue

@@ -25,13 +25,13 @@ const statusMap = ref({
   // 对应 status = completed
   completed: '#1890ff',
   // 对应 status = doing
-  doing: '#e8faff',
+  doing: '#86edff',
   // 对应 status = back
-  back: '#edf7df',
+  back: '#93fda6',
   // 对应 status = end
-  end: '#faad14',
+  end: '#faad18',
   // 对应 status = cancel
-  cancel: '#f230301A'
+  cancel: '#f230305A'
 })
 
 // 数据源

examples/sites/demos/pc/app/milestone/basic-usage.spec.ts

@@ -36,15 +36,15 @@ test('基本用法', async ({ page }) => {
       'box-shadow': 'none'
     },
     {
-      'color': 'rgba(242, 48, 48, 0.1)',
+      'color': 'rgba(242, 48, 48, 0.353)',
       'box-shadow': 'none'
     },
     {
-      'color': 'rgb(237, 247, 223)',
+      'color': 'rgb(147, 253, 166)',
       'box-shadow': 'none'
     },
     {
-      'color': 'rgb(250, 173, 20)',
+      'color': 'rgb(250, 173, 24)',
       'box-shadow': 'none'
     }
   ]

examples/sites/demos/pc/app/milestone/show-number.spec.ts

@@ -22,27 +22,27 @@ test('序号显示', async ({ page }) => {
   ]
   const iconStyles = [
     {
-      'color': 'rgb(179, 214, 255)',
+      'color': 'rgb(25, 25, 25)',
       'box-shadow': 'none'
     },
     {
-      'color': 'rgb(179, 214, 255)',
+      'color': 'rgb(25, 25, 25)',
       'box-shadow': 'none'
     },
     {
       'color': 'rgb(255, 255, 255)',
       'box-shadow': 'none'
     },
     {
-      'color': 'rgb(217, 217, 217)',
+      'color': 'rgb(25, 25, 25)',
       'box-shadow': 'none'
     },
     {
-      'color': 'rgb(245, 34, 45)',
+      'color': 'rgb(25, 25, 25)',
       'box-shadow': 'none'
     },
     {
-      'color': 'rgb(250, 173, 20)',
+      'color': 'rgb(25, 25, 25)',
       'box-shadow': 'none'
     }
   ]

examples/sites/demos/pc/app/milestone/solid-style.spec.ts

@@ -22,27 +22,27 @@ test('实心显示', async ({ page }) => {
   ]
   const iconStyles = [
     {
-      'color': 'rgb(179, 214, 255)',
+      'color': 'rgb(25, 25, 25)',
       'box-shadow': 'none'
     },
     {
-      'color': 'rgb(179, 214, 255)',
+      'color': 'rgb(25, 25, 25)',
       'box-shadow': 'none'
     },
     {
       'color': 'rgb(255, 255, 255)',
       'box-shadow': 'none'
     },
     {
-      'color': 'rgb(217, 217, 217)',
+      'color': 'rgb(25, 25, 25)',
       'box-shadow': 'none'
     },
     {
-      'color': 'rgb(245, 34, 45)',
+      'color': 'rgb(25, 25, 25)',
       'box-shadow': 'none'
     },
     {
-      'color': 'rgb(250, 173, 20)',
+      'color': 'rgb(25, 25, 25)',
       'box-shadow': 'none'
     }
   ]

packages/renderless/src/milestone/index.ts

@@ -75,10 +75,10 @@ export const getMileIcon =
     if (statusColor) {
       return {
         'background-color': props.solid || status === constants.STATUS_MAP.DOING ? statusColor : '',
-        color: (props.solid 
-          && status !== constants.STATUS_MAP.COMPLETED 
-          || status === constants.STATUS_MAP.DOING)
-          ? '#FFFFFF' : statusColor,
+        color:
+          (props.solid && status !== constants.STATUS_MAP.COMPLETED) || status === constants.STATUS_MAP.DOING
+            ? '#fff'
+            : statusColor,
         'border-color': statusColor,
         boxShadow: 'unset'
       }

packages/theme/src/calendar-view/index.less

@@ -21,9 +21,10 @@
   width: 100%;
   height: auto;
   padding-top: var(--tv-CalendarView-padding);
-  border: 1px solid #ebebeb;
+  border: 1px solid var(--tv-CalendarView-date-border-color);
   background-color: var(--tv-CalendarView-bg-color);
   overflow: auto;
+  border-bottom: none;
 
   &__header {
     display: flex;
@@ -49,7 +50,7 @@
       height: 32px;
 
       &:hover {
-        background-color: #ededed;
+        background-color: var(--tv-CalendarView-radio-icon-bg-hover);
       }
 
       svg {
@@ -124,7 +125,7 @@
     &__main {
       width: 100%;
       overflow: hidden;
-      border-top: 1px solid #ebebeb;
+      border-top: 1px solid var(--tv-CalendarView-date-border-color);
 
       .main-container {
         width: 100%;
@@ -135,15 +136,15 @@
           width: 100%;
           display: flex;
           justify-content: space-around;
-          border-bottom: 1px solid #ebebeb;
+          border-bottom: 1px solid var(--tv-CalendarView-date-border-color);
 
           > li {
             font-size: var(--tv-CalendarView-main-li-font-size);
             padding: var(--tv-CalendarView-main-li-padding) 0;
             position: relative;
             height: 80px;
             overflow: hidden;
-            border-right: 1px solid #ebebeb;
+            border-right: 1px solid var(--tv-CalendarView-date-border-color);
             background-color: var(--tv-CalendarView-main-li-bg-color);
 
             &.is-selected {
@@ -184,6 +185,10 @@
           }
         }
 
+        ul li:last-of-type {
+          border-right: none;
+        }
+
         .day-selected {
           position: absolute;
           top: 0;