feat:暗色主题适配

opentiny · Mar 6, 2025 · 21876e0 · 21876e0
1 parent 4492296
commit 21876e0
Show file tree

Hide file tree

Showing 13 changed files with 41 additions and 41 deletions.
diff --git a/examples/sites/demos/pc/app/image/lazy-composition-api.vue b/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;

diff --git a/examples/sites/demos/pc/app/image/lazy.vue b/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;

diff --git a/examples/sites/demos/pc/app/loading/basic-usage-composition-api.vue b/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>
diff --git a/examples/sites/demos/pc/app/loading/basic-usage.vue b/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>
diff --git a/examples/sites/demos/pc/app/milestone/basic-usage.spec.ts b/examples/sites/demos/pc/app/milestone/basic-usage.spec.ts
@@ -24,27 +24,27 @@ test('基本用法', async ({ page }) => {
   ]
   const iconStyles = [
     {
-      'color': 'rgb(24, 144, 255)',
+      'color': 'rgb(25, 25, 25)',
       'box-shadow': 'none'
     },
     {
-      'color': 'rgb(24, 144, 255)',
+      'color': 'rgb(25, 25, 25)',
       'box-shadow': 'none'
     },
     {
       'color': 'rgb(255, 255, 255)',
       'box-shadow': 'none'
     },
     {
-      'color': 'rgba(242, 48, 48, 0.1)',
+      'color': 'rgb(25, 25, 25)',
       'box-shadow': 'none'
     },
     {
-      'color': 'rgb(237, 247, 223)',
+      'color': 'rgb(25, 25, 25)',
       'box-shadow': 'none'
     },
     {
-      'color': 'rgb(250, 173, 20)',
+      'color': 'rgb(25, 25, 25)',
       'box-shadow': 'none'
     }
   ]

diff --git a/examples/sites/demos/pc/app/milestone/show-number.spec.ts b/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'
     }
   ]

diff --git a/examples/sites/demos/pc/app/milestone/solid-style.spec.ts b/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'
     }
   ]

diff --git a/packages/renderless/src/milestone/index.ts b/packages/renderless/src/milestone/index.ts
@@ -75,10 +75,7 @@ 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 ? '#191919' : statusColor,
         'border-color': statusColor,
         boxShadow: 'unset'
       }

diff --git a/packages/theme/src/calendar-view/index.less b/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-hover-color);
       }
 
       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;

diff --git a/packages/theme/src/calendar-view/vars.less b/packages/theme/src/calendar-view/vars.less
@@ -20,8 +20,9 @@
   // radio 文本色、背景色、悬浮色
   --tv-CalendarView-radio-font-size: var(--tv-font-size-lg);
   --tv-CalendarView-radio-icon-color: var(--tv-color-icon);
+  --tv-CalendarView-radio-icon-hover-color: var(--tv-color-bg);
   --tv-CalendarView-radio-active-icon-color: var(--tv-color-text-control);
-  --tv-CalendarView-radio-active-inner-bg-color: var(--tv-color-bg-inverse);
+  --tv-CalendarView-radio-active-inner-bg-color: var(--tv-color-bg-3, #fff);
   --tv-CalendarView-radio-active-border-color: var(--tv-color-border-active);
   --tv-CalendarView-header-main-font-size: var(--tv-font-size-default);
   --tv-CalendarView-header-main-text-color: var(--tv-color-text-weaken);
@@ -31,6 +32,7 @@
   --tv-CalendarView-main-li-font-size: var(--tv-font-size-default);
   --tv-CalendarView-date-margin-left: var(--tv-space-xl);
   --tv-CalendarView-date-text-color: var(--tv-color-text);
+  --tv-CalendarView-date-border-color: var(--tv-color-border);
   --tv-CalendarView-date-weaken-text-color: var(--tv-color-text-weaken);
   --tv-CalendarView-main-li-padding: var(--tv-space-xs);
   --tv-CalendarView-main-li-bg-color: var(--tv-color-bg-secondary);

diff --git a/packages/theme/src/milestone/vars.less b/packages/theme/src/milestone/vars.less
@@ -62,13 +62,13 @@
   // 旗子圆角
   --tv-Milestone-flag-border-radius: 0 var(--tv-border-radius-lg, 8px) var(--tv-border-radius-lg, 8px) 0;
   // 旗子文本色
-  --tv-Milestone-text-color: var(--tv-color-text-active-1, #191919);
+  --tv-Milestone-text-color: var(--tv-color-text-inverse-black, #191919);
   // 旗子背景色
   --tv-Milestone-flag-bg-color: var(--tv-color-bg, #f5f5f5);
   // 旗子标题字重
   --tv-Milestone-flag-name-font-weight: var(--tv-font-weight-bold, 600);
   // 旗子描述文本色
-  --tv-Milestone-flag-desc-text-color: var(--tv-color-text-active-1, #191919);
+  --tv-Milestone-flag-desc-text-color: var(--tv-color-text-inverse-black, #191919);
   // 旗子描述字号大小
   --tv-Milestone-flag-desc-font-size: var(--tv-font-size-sm, 12px);
 

diff --git a/packages/theme/src/steps/index.less b/packages/theme/src/steps/index.less
@@ -230,6 +230,7 @@
     align-items: center;
     justify-content: center;
     overflow: hidden;
+    border: solid 1px var(--tv-Steps-advance-border-color);
 
     &:hover .@{steps-prefix-cls}-icon.doing {
       background-color: #fff;
@@ -245,7 +246,7 @@
       align-items: center;
       justify-content: center;
       border-radius: 9999px;
-      border: 1px solid var(--tv-Steps-advance-node-disable-bg-color);
+      border: 1px solid var(--tv-Steps-node-done-border-color);
 
       &.done,
       &.doing {
@@ -875,7 +876,7 @@
         .label {
           font-weight: bold;
           background: var(--tv-Steps-node-bg-color-active);
-          color: var(--tv-Steps-advance-li-text-color);
+          color: var(--tv-Steps-line-doing-active-icon-color);
 
           &::after {
             border-left-color: var(--tv-Steps-node-bg-color-active);
@@ -892,7 +893,6 @@
         text-align: center;
         text-decoration: none;
         white-space: nowrap;
-        color: var(--tv-Steps-advance-text-color);
 
         &::after {
           content: '';
@@ -1210,11 +1210,11 @@
     .icon {
       font-size: var(--tv-Steps-font-size);
       border-color: var(--tv-Steps-advance-active-border-color);
-      color: var(--tv-Steps-advance-li-text-color);
+      color: var(--tv-Steps-line-doing-active-icon-color);
       background: var(--tv-Steps-node-bg-color-active);
 
       .fixicons {
-        fill: var(--tv-Steps-advance-li-text-color);
+        fill: var(--tv-Steps-line-doing-active-icon-color);
       }
     }
 

diff --git a/packages/theme/src/steps/vars.less b/packages/theme/src/steps/vars.less
@@ -26,7 +26,7 @@
   // 已完成节点边框色
   --tv-Steps-node-done-border-color: var(--tv-color-border-active, #191919);
   // 已完成节点背景色
-  --tv-Steps-node-done-bg-color: var(--tv-color-bg-active-secondary, #ffffff);
+  --tv-Steps-node-done-bg-color: var(--tv-color-text-inverse-black, #191919);
   // 高级向导当前项和计数标记点的文本色
   --tv-Steps-advance-li-text-color: var(--tv-color-text-inverse, #fff);
 
@@ -50,7 +50,7 @@
   // 已完成节点线条色
   --tv-Steps-line-active-bg-color: var(--tv-color-bg-active-primary, #191919);
   // 已完成节点图标色
-  --tv-Steps-done-icon-color: var(--tv-color-icon-active, #191919);
+  --tv-Steps-done-icon-color: var(--tv-color-icon-inverse, #191919);
   // 未完成的线条色
   --tv-Steps-line-bg-color: var(--tv-color-border-divider, #f0f0f0);
   // 未完成节点的背景色
@@ -96,7 +96,7 @@
   // 高级向导已完成节点悬浮背景色
   --tv-Steps-advance-node-done-bg-color-hover: var(--tv-color-bg-disabled, #f0f0f0);
   // 高级向导进行中节点背景色
-  --tv-Steps-advance-node-doing-bg-color: var(--tv-color-bg-header, #f0f0f0);
+  --tv-Steps-advance-node-doing-bg-color: var(--tv-color-bg-3, #f0f0f0);
   // 高级向导已完成节点悬浮背景色
   --tv-Steps-advance-node-doing-bg-color-hover: var(--tv-color-bg-disabled, #f0f0f0);
   // 高级向导异常节点背景色
@@ -160,7 +160,7 @@
   // 高级向导边框色
   --tv-Steps-advance-border-color: var(--tv-color-border, #c2c2c2);
   // 高级向导未选中项文本色
-  --tv-Steps-advance-text-color: var(--tv-color-text, #191919);
+  --tv-Steps-advance-text-color: var(--tv-color-text-inverse, #191919);
   // 高级向导节点悬浮背景色
   --tv-Steps-advance-li-hover-bg-color: var(--tv-color-bg-header, #f0f0f0);
   // 高级向导节点悬浮文本色
@@ -260,5 +260,5 @@
   // mini尺寸节点内容字号
   --tv-Steps-mini-font-size-base: var(--tv-font-size-sm, 12px);
   // 条状进度条角标背景色
-  --tv-Steps-border-left-color: var(--tv-color-act-primary-text-inverse-tint);
+  --tv-Steps-border-left-color: var(--tv-color-bg-active-dark, #f5f5f5);
 }