fix(grid): [grid] update dark theme

examples/sites/demos/pc/app/grid/custom-style/class-name-composition-api.vue

@@ -75,6 +75,6 @@ const tableData = ref([
 
 <style>
 .gridClassName {
-  background: #e6f7ff;
+  background-color: #2db7f5;
 }
 </style>

examples/sites/demos/pc/app/grid/custom-style/class-name.spec.js

@@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
 test('自定义列样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-custom-style#custom-style-class-name')
-  await expect(page.locator('.gridClassName').first()).toHaveCSS('background-color', 'rgb(230, 247, 255)')
+  await expect(page.locator('.gridClassName').first()).toHaveCSS('background-color', 'rgb(45, 183, 245)')
 })

examples/sites/demos/pc/app/grid/custom-style/class-name.vue

@@ -84,6 +84,6 @@ export default {
 
 <style>
 .gridClassName {
-  background: #e6f7ff;
+  background-color: #2db7f5;
 }
 </style>

examples/sites/demos/pc/app/grid/editor/active-strictly-composition-api.vue

@@ -78,6 +78,6 @@ function cellClassName({ row, column }) {
 
 <style>
 .disable-cell-edit {
-  background-color: #e8ebef;
+  background-color: var(--tv-color-bg-disabled);
 }
 </style>

examples/sites/demos/pc/app/grid/editor/active-strictly.vue

@@ -87,6 +87,6 @@ export default {
 
 <style>
 .disable-cell-edit {
-  background-color: #e8ebef;
+  background-color: var(--tv-color-bg-disabled);
 }
 </style>

examples/sites/demos/pc/app/grid/editor/editor-bg-composition-api.vue

@@ -73,6 +73,6 @@ function cellClassName({ row, column }) {
 
 <style>
 .disable-cell-edit {
-  background-color: #e8ebef;
+  background-color: var(--tv-color-bg-disabled);
 }
 </style>

examples/sites/demos/pc/app/grid/editor/editor-bg.vue

@@ -82,6 +82,6 @@ export default {
 
 <style>
 .disable-cell-edit {
-  background-color: #e8ebef;
+  background-color: var(--tv-color-bg-disabled);
 }
 </style>

examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue

@@ -70,6 +70,6 @@ const loadingComponent = () => (
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--tv-color-bg-mask);
 }
 </style>

examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue

@@ -83,6 +83,6 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--tv-color-bg-mask);
 }
 </style>

packages/theme/src/grid/filter.less

@@ -62,12 +62,57 @@
   }
 
   .@{grid-prefix-cls}__filter-body {
-    padding: 0;
+    padding: 10px;
     list-style-type: none;
-    background-color: #fff;
+    background-color: var(--tv-Grid-bg-color);
     overflow-x: hidden;
     overflow-y: auto;
 
+    input:not([type='radio']) {
+      border: 1px solid var(--tv-Grid-input-border-color);
+      border-radius: var(--tv-Grid-input-border-radius);
+      color: var(--tv-Grid-input-text-color);
+      background-color: var(--tv-Grid-input-bg-color);
+      font-size: var(--tv-Grid-input-font-size);
+      height: var(--tv-Grid-input-height);
+      line-height: var(--tv-Grid-input-height);
+      padding: var(--tv-Grid-input-padding-x) var(--tv-Grid-input-padding-y);
+      outline: 0;
+      display: inline-block;
+      box-sizing: border-box;
+      appearance: none;
+      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+      margin-right: 24px;
+
+      &:hover,
+      &:focus,
+      &:active {
+        outline: 0;
+        border-color: var(--tv-Grid-input-border-color-hover);
+      }
+    }
+
+    button {
+      font-weight: var(--tv-Grid-button-font-weight);
+      border: 1px solid var(--tv-Grid-button-border-color-default);
+      line-height: var(--tv-Grid-button-line-height);
+      border-radius: var(--tv-Grid-button-border-radius);
+      font-size: var(--tv-Grid-button-font-size);
+      height: var(--tv-Grid-button-height);
+      color: var(--tv-Grid-button-text-color-default);
+      padding: 0 var(--tv-Grid-button-padding-x);
+      background-color: var(--tv-Grid-button-bg-color-default);
+      margin-left: 0;
+      margin-right: 24px;
+
+      &:hover,
+      &:active {
+        border-color: var(--tv-Grid-button-border-color-active-default);
+      }
+    }
+
+
+
     .@{grid-prefix-cls}__filter-panel {
       margin: 0;
       width: 100%;
@@ -114,6 +159,7 @@
           .@{grid-prefix-cls}__filter-empty {
             text-align: center;
             line-height: 30px;
+            color: var(--tv-Grid-text-color);
           }
 
           .@{grid-prefix-cls}__filter-option {
@@ -138,12 +184,24 @@
               outline: none;
               vertical-align: middle;
 
-              &:hover {
-                fill: var(--tv-Grid-checkbox-icon-color-hover);
+              path:first-child {
+                fill: transparent;
               }
 
               &.is-checked {
                 fill: var(--tv-Grid-checkbox-icon-color-selected);
+
+                path:first-child {
+                  fill: var(--tv-Grid-checkbox-icon-color-selected);
+                }
+
+                path:last-child {
+                  fill: #fff;
+                }
+              }
+
+              &:hover {
+                fill: var(--tv-Grid-checkbox-icon-color-hover);
               }
             }
           }
@@ -181,7 +239,7 @@
               max-width: 80%;
             }
 
-            & + .@{grid-radio-prefix-cls} {
+            &+.@{grid-radio-prefix-cls} {
               margin-left: 0;
             }
 
@@ -216,7 +274,7 @@
       }
     }
 
-    .filter-option__input > input {
+    .filter-option__input>input {
       width: 100%;
       border: solid 1px var(--tv-Grid-border-color);
       border-radius: var(--tv-Grid-filter-input-border-radius);
@@ -225,6 +283,7 @@
       box-sizing: border-box;
       line-height: inherit;
       height: 30px;
+      background: var(--tv-Grid-filter-input-bg-color);
 
       &:focus {
         border: 1px solid var(--tv-Grid-filter-input-border-color-hover);
@@ -250,6 +309,7 @@
       .@{grid-prefix-cls}__filter-date {
         padding: 0 10px;
         min-width: 270px;
+
         .@{grid-prefix-cls}__filter-date-item {
           display: flex;
           justify-content: space-between;
@@ -270,4 +330,4 @@
       }
     }
   }
-}
+}

packages/theme/src/grid/loading.less

@@ -24,7 +24,7 @@
   top: 0;
   left: 0;
   z-index: 99;
-  background-color: rgba(255, 255, 255, 0.67);
+  background-color: var(--tv-Grid-loading-mask-bg-color);
 
   & &__wrap {
     position: absolute;

packages/theme/src/grid/menu.less

@@ -25,7 +25,7 @@
     left: 0;
     z-index: 5000;
     font-size: var(--tv-Grid-font-size);
-    background-color: #fff;
+    background-color: var(--tv-Grid-bg-color);
     box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.2);
     padding: 8px 0;
     color: var(--tv-Grid-text-color);

packages/theme/src/grid/table.less

@@ -430,7 +430,7 @@
     }
   }
 
-  &.row__highlight &-body__row:hover {
+  &.row__highlight &-body__row:not(.row__selected):hover {
     background-color: var(--tv-Grid-bg-color-hover);
 
     .fixed__column {
@@ -954,19 +954,23 @@
       color: var(--tv-Grid-text-color);
       border-radius: var(--tv-Grid-input-border-radius);
       border: 1px solid var(--tv-Grid-border-color-divider);
-      background-color: var(--tv-Grid-Input-bg-color);
+      background-color: var(--tv-Grid-input-bg-color);
 
       &:focus {
         border: 1px solid var(--tv-Grid-input-border-color-hover);
       }
     }
 
+    select.@{grid-prefix-cls}-default-select option {
+      background-color: var(--tv-Grid-select-option-bg-color);
+    }
+
     .@{grid-prefix-cls}-editor {
       width: 100%;
       height: var(--tv-Grid-input-height);
       line-height: normal;
       color: var(--tv-Grid-text-color);
-      background-color: var(--tv-Grid-Input-bg-color);
+      background-color: var(--tv-Grid-input-bg-color);
 
       .@{input-prefix-cls} {
         width: 100%;

packages/theme/src/grid/toolbar.less

@@ -57,7 +57,7 @@
       width: 100%;
       height: 100%;
       z-index: 1;
-      background-color: rgba(255, 255, 255, 0.67);
+      background-color: var(--tv-Grid-loading-mask-bg-color);
     }
   }
 

packages/theme/src/grid/vars.less

@@ -139,6 +139,8 @@
   --tv-Grid-filter-input-border-color-hover: var(--tv-color-border-hover);
   // 筛选输入框边框圆角
   --tv-Grid-filter-input-border-radius: var(--tv-border-radius-md);
+  // 筛选输入框边框背景
+  --tv-Grid-filter-input-bg-color: var(--tv-color-bg-secondary);
   // -------工具栏相关样式-------
   // 工具栏垂直边距
   --tv-Grid-toolbar-padding-y: var(--tv-space-xl);
@@ -178,12 +180,44 @@
   --tv-Grid-tree-expand-icon-padding-right: var(--tv-space-md);
   // 内置输入框高度
   --tv-Grid-input-height: var(--tv-size-height-md);
+  // 内置输入框垂直方向内边距
+  --tv-Grid-input-padding-x: 0;
+  // 内置输入框水平方向内边距
+  --tv-Grid-input-padding-y: 12px;
+  // 内置输入框文本颜色
+  --tv-Grid-input-text-color: var(--tv-color-text);
+  // 内置输入框边框色
+  --tv-Grid-input-border-color: var(--tv-color-border);
+  // 内置输入框框字体大小
+  --tv-Grid-input-font-size: var(--tv-font-size-default);
   // 内置输入框背景色
-  --tv-Grid-Input-bg-color: var(--tv-color-bg-secondary);
+  --tv-Grid-input-bg-color: var(--tv-color-bg-3);
   // 内置输入框边框圆角
   --tv-Grid-input-border-radius: var(--tv-border-radius-md);
   // 内置输入框悬浮边框颜色
   --tv-Grid-input-border-color-hover: var(--tv-color-border-hover);
+  // 内置按钮背景色
+  --tv-Grid-button-bg-color-default: var(--tv-color-bg-secondary);
+  // 内置按钮行号
+  --tv-Grid-button-line-height: var(--tv-line-height-number);
+  // 内置按钮高度
+  --tv-Grid-button-height: var(--tv-size-height-md);
+  // 内置按钮边框色
+  --tv-Grid-button-border-color-default: var(--tv-color-border-secondary);
+  // 内置按钮文字色
+  --tv-Grid-button-text-color-default: var(--tv-color-text);
+  // 内置按钮文字色
+  --tv-Grid-button-border-radius: var(--tv-border-radius-md);
+  // 内置按钮激活状态边框色
+  --tv-Grid-button-border-color-active-default: var(--tv-color-border-secondary-hover);
+  // 内置按钮padding
+  --tv-Grid-button-padding-x: 24px;
+  // 内置select的下拉框背景色
+  --tv-Grid-select-option-bg-color: var(--tv-color-bg-2);
+  // 内置select的下拉框选中状态背景色
+  --tv-Grid-select-option-bg-color-hover: var(--tv-color-bg-hover);
+  // 加载中背景色
+  --tv-Grid-loading-mask-bg-color: var(--tv-color-bg-mask);
   // 表格无数据背景图片
   --tv-Grid-empty-img: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAiIGQ9Ik0wIDBoODB2ODBIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik01Ni45MiAyNXY0NS4wNmMwIDIuMTctMS43NyAzLjkzLTMuOTUgMy45M0gxMC45NEEzLjk0IDMuOTQgMCAwIDEgNyA3MC4wNlYzOS4zOWguODh2MzAuNjdhMy4wNiAzLjA2IDAgMCAwIDMuMDYgMy4wNmg0Mi4wM2MxLjcgMCAzLjA3LTEuMzcgMy4wNy0zLjA2VjI1Ljg3SDEwLjY3VjI1aDQ2LjI1eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik05LjQzIDI1Yy0uNiAwLTEuMTUuMzEtMS40Ni44MkwuMTMgMzguNjRjLS4yNi40Mi0uMTMuOTYuMjcgMS4yMi4xNC4wOS4yOS4xNC40Ni4xNGg0NC44MmMxLjE3IDAgMi4yNi0uNjEgMi45LTEuNjJMNTcuMDQgMjVIOS40M3ptLjIyIDFoNDUuNTJsLTcuNTIgMTEuODFjLS40Ny43NC0xLjI4IDEuMTktMi4xNCAxLjE5SDEuMTdsNy43NS0xMi42Yy4xNi0uMjUuNDMtLjQuNzMtLjR6IiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTcwLjc1IDI1Yy41NiAwIDEuMDguMyAxLjM5LjhsNy43MiAxMi43MmMuMjUuNDEuMTQuOTUtLjI1IDEuMjEtLjEzLjA5LS4yOC4xNC0uNDQuMTRINjYuMTRjLTEuMTcgMC0yLjI1LS42Ni0yLjg1LTEuNzNMNTUuOTggMjVoMTQuNzd6bS0uMDMgMUg1Ny44bDYuMzggMTEuNzFjLjQzLjggMS4yMiAxLjI5IDIuMDggMS4yOWgxMi42M0w3MS40IDI2LjM5YS44MDIuODAyIDAgMCAwLS42OC0uMzl6IiBmaWxsPSJncmF5Ii8+PHJlY3QgeD0iMTMuNSIgeT0iNTYiIHJ4PSIxLjg4NiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjQiIGZpbGw9IiMxNDc2RkYiLz48cGF0aCBkPSJNMjMuNTYgNjNjLjI0IDAgLjQ0LjIyLjQ0LjUgMCAuMjctLjIuNS0uNDQuNWgtOS42M2MtLjI0IDAtLjQzLS4yMy0uNDMtLjUgMC0uMjguMTktLjUuNDMtLjVoOS42M3oiIGZpbGw9ImdyYXkiLz48cmVjdCB4PSIxMy41IiB5PSI2NiIgcng9Ii41IiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTQwIDZjLjI3IDAgLjUuMTkuNS40NHY2LjE2YzAgLjI1LS4yMy40NC0uNS40NC0uMjggMC0uNTEtLjE5LS41MS0uNDRWNi40NGMwLS4yNS4yMy0uNDQuNTEtLjQ0ek01Ni41NSA4LjY0Yy4yNC4xNC4zMy40Mi4yMS42M2wtMy4wOCA1LjM0Yy0uMTIuMjEtLjQyLjI3LS42Ni4xMy0uMjQtLjE0LS4zMy0uNDItLjIxLS42M2wzLjA4LTUuMzRjLjEyLS4yMS40Mi0uMjcuNjYtLjEzek0yMy40NCA4LjY0Yy4yNC0uMTQuNTQtLjA4LjY2LjEzbDMuMDggNS4zNGMuMTIuMjEuMDMuNDktLjIxLjYzcy0uNTQuMDgtLjY2LS4xM2wtMy4wOC01LjM0Yy0uMTItLjIxLS4wMy0uNDkuMjEtLjYzeiIgZmlsbD0iZ3JheSIvPjwvZz48L3N2Zz4=');
 }

packages/theme/src/loading/vars.less

@@ -16,7 +16,7 @@
   // 加载文本色
   --tv-Loading-text-color: var(--tv-color-text-secondary);
   // 加载背景色
-  --tv-Loading-mask-bg-color: var(--tv-color-bg-active-dark);
+  --tv-Loading-mask-bg-color: var(--tv-color-bg-mask);
   // 加载文本字号
   --tv-Loading-text-font-size: var(--tv-font-size-lg);
   // 加载图标文本垂直方向外边距