fix(grid): [grid] add dark theme

examples/sites/demos/pc/app/grid/drag/row-drag-ctrl-composition-api.vue

@@ -102,7 +102,7 @@ function rowClassName({ rowIndex }) {
   background: red !important;
 }
 .tiny-grid :deep(.row__drag-disable) {
-  background: #f1f1f1 !important;
+  background: var(--tv-color-bg-disabled) !important;
 }
 .only-me-can-drag {
   cursor: move;

examples/sites/demos/pc/app/grid/drag/row-drag-ctrl.vue

@@ -112,7 +112,7 @@ export default {
   background: red !important;
 }
 .tiny-grid :deep(.row__drag-disable) {
-  background: #f1f1f1 !important;
+  background: var(--tv-color-bg-disabled) !important;
 }
 .only-me-can-drag {
   cursor: move;

packages/theme/src/grid/checkbox.less

@@ -73,6 +73,14 @@
         }
       }
     }
+
+    &:not(:checked) + .@{grid-checkbox-prefix-cls}__icon {
+      > svg {
+        path:first-child {
+          fill: transparent;
+        }
+      }
+    }
   }
 
   &.is__indeterminate {
@@ -84,6 +92,10 @@
           > svg {
             fill: var(--tv-Grid-checkbox-icon-color-selected);
             border-radius: var(--tv-Grid-checkbox-border-radius);
+
+            path:first-child {
+              fill: var(--tv-Grid-checkbox-icon-color-selected);
+            }
           }
         }
       }

packages/theme/src/grid/filter.less

@@ -72,7 +72,7 @@
       margin: 0;
       width: 100%;
       padding: 12px 8px 8px;
-      border-bottom: solid 1px var(--tv-Grid-divider-color);
+      border-bottom: solid 1px var(--tv-Grid-border-color-divider);
 
       .@{grid-prefix-cls}__filter-search {
         margin-bottom: 4px;
@@ -208,7 +208,7 @@
           &.filter-option__btns {
             padding: 10px 0;
             margin: 0 10px;
-            border-top: 1px solid var(--tv-Grid-divider-color);
+            border-top: 1px solid var(--tv-Grid-border-color-divider);
             text-align: center;
             height: auto;
           }

packages/theme/src/grid/input.less

@@ -31,7 +31,7 @@
     padding: 4px 8px;
     width: 100%;
     color: var(--tv-Grid-text-color);
-    border: 1px solid var(--tv-Grid-divider-color);
+    border: 1px solid var(--tv-Grid-border-color-divider);
     background-color: #fff;
 
     &:focus {

packages/theme/src/grid/menu.less

@@ -40,7 +40,7 @@
     .@{grid-menu-prefix-cls}__clild-wrapper {
       margin: 0;
       list-style-type: none;
-      border-bottom: 1px solid var(--tv-Grid-divider-color);
+      border-bottom: 1px solid var(--tv-Grid-border-color-divider);
 
       &:last-child {
         border: 0;

packages/theme/src/grid/radio.less

@@ -53,7 +53,7 @@
       margin: 1px;
       border: 1px solid var(--tv-Grid-radio-icon-color-selected);
       border-radius: 100%;
-      background: #fff;
+      background: transparent;
 
       &::after {
         content: '';
@@ -75,12 +75,24 @@
         &.icon-radio-selected {
           display: none;
         }
+
+        path:last-child {
+          fill: transparent;
+        }
       }
 
       & + .@{grid-radio-prefix-cls}__label {
         color: var(--tv-Grid-text-color);
       }
     }
+
+    &:not(:checked) + .@{grid-radio-prefix-cls}__icon {
+      > svg {
+        path:last-child {
+          fill: transparent;
+        }
+      }
+    }
   }
 
   &.is__disabled {

packages/theme/src/grid/table.less

@@ -295,12 +295,12 @@
     &:before {
       top: 0;
       z-index: 2;
-      border-top: 1px solid var(--tv-Grid-divider-color);
+      border-top: 1px solid var(--tv-Grid-border-color-divider);
     }
 
     &:after {
       bottom: 0;
-      border-bottom: 1px solid var(--tv-Grid-divider-color);
+      border-bottom: 1px solid var(--tv-Grid-border-color-divider);
     }
 
     .@{grid-prefix-cls}__header {
@@ -312,8 +312,8 @@
     .@{grid-prefix-cls}-header__column,
     .@{grid-prefix-cls}-body__column,
     .@{grid-prefix-cls}-footer__column {
-      background-image: linear-gradient(-90deg, var(--tv-Grid-divider-color), var(--tv-Grid-divider-color)),
-        linear-gradient(-180deg, var(--tv-Grid-divider-color), var(--tv-Grid-divider-color));
+      background-image: linear-gradient(-90deg, var(--tv-Grid-border-color-divider), var(--tv-Grid-border-color-divider)),
+        linear-gradient(-180deg, var(--tv-Grid-border-color-divider), var(--tv-Grid-border-color-divider));
       background-repeat: no-repeat;
       background-size:
         1px 100%,
@@ -341,12 +341,12 @@
 
       &:before {
         left: 0;
-        border-left: 1px solid var(--tv-Grid-divider-color);
+        border-left: 1px solid var(--tv-Grid-border-color-divider);
       }
 
       &:after {
         right: 0;
-        border-right: 1px solid var(--tv-Grid-divider-color);
+        border-right: 1px solid var(--tv-Grid-border-color-divider);
       }
     }
   }
@@ -390,7 +390,7 @@
   }
 
   & &__footer-wrapper {
-    border-top: 1px solid var(--tv-Grid-divider-color);
+    border-top: 1px solid var(--tv-Grid-border-color-divider);
     border-bottom: none;
     overflow: hidden !important;
 
@@ -444,7 +444,7 @@
   & &-footer__column {
     // 默认文字居左对齐
     text-align: left;
-    border-bottom: 1px solid var(--tv-Grid-divider-color);
+    border-bottom: 1px solid var(--tv-Grid-border-color-divider);
 
     .DefaultTdPadding();
 
@@ -692,7 +692,7 @@
 
   // 展开行td
   & &-body__expanded-column {
-    border-bottom: 1px solid var(--tv-Grid-divider-color);
+    border-bottom: 1px solid var(--tv-Grid-border-color-divider);
   }
 
   & &-body__expanded-cell {
@@ -831,6 +831,7 @@
 
           svg {
             font-size: var(--tv-Grid-icon-size);
+            fill: var(--tv-Grid-text-color);
           }
         }
       }
@@ -952,7 +953,8 @@
       width: 100%;
       color: var(--tv-Grid-text-color);
       border-radius: var(--tv-Grid-input-border-radius);
-      border: 1px solid var(--tv-Grid-divider-color);
+      border: 1px solid var(--tv-Grid-border-color-divider);
+      background-color: var(--tv-Grid-Input-bg-color);
 
       &:focus {
         border: 1px solid var(--tv-Grid-input-border-color-hover);
@@ -964,6 +966,7 @@
       height: var(--tv-Grid-input-height);
       line-height: normal;
       color: var(--tv-Grid-text-color);
+      background-color: var(--tv-Grid-Input-bg-color);
 
       .@{input-prefix-cls} {
         width: 100%;
@@ -1063,7 +1066,7 @@
     margin-right: 1.5rem;
     font-size: 0.875rem;
     cursor: pointer;
-    color: #161e26;
+    color: var(--tv-Grid-column-anchor-text-color);
 
     &:last-child {
       margin-right: 0px;

packages/theme/src/grid/vars.less

@@ -36,7 +36,7 @@
   // 表格图标禁用颜色
   --tv-Grid-icon-color-disabled: var(--tv-color-icon-disabled);
   // 表格分割线颜色
-  --tv-Grid-divider-color: var(--tv-color-border-divider);
+  --tv-Grid-border-color-divider: var(--tv-color-border-divider);
   // 表格边框颜色
   --tv-Grid-border-color: var(--tv-color-border);
   // 表格边框激活态颜色
@@ -154,6 +154,8 @@
   --tv-Grid-toolbar-btn-icon-border-color-hover: var(--tv-color-border-hover);
   // 工具栏图标按钮边框圆角
   --tv-Grid-toolbar-btn-icon-border-radius: var(--tv-border-radius-md);
+  // 工具栏字体颜色
+  --tv-Grid-column-anchor-text-color: var(--tv-color-text);
   // -------mini/small表格-------
   // mini表格表头高度
   --tv-Grid-header-height-mini: var(--tv-size-height-sm);
@@ -176,6 +178,8 @@
   --tv-Grid-tree-expand-icon-padding-right: var(--tv-space-md);
   // 内置输入框高度
   --tv-Grid-input-height: var(--tv-size-height-md);
+  // 内置输入框背景色
+  --tv-Grid-Input-bg-color: var(--tv-color-bg-secondary);
   // 内置输入框边框圆角
   --tv-Grid-input-border-radius: var(--tv-border-radius-md);
   // 内置输入框悬浮边框颜色