feat: 完善黑暗模式UI (#9443)

* feat: 支持黑暗模式

* 升级发布脚本版本

---------

Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>

examples/components/App.tsx

@@ -58,6 +58,11 @@ const themes = [
     label: 'ang',
     ns: 'a-',
     value: 'ang'
+  },
+  {
+    label: '暗黑',
+    ns: 'dark-',
+    value: 'dark'
   }
 ];
 

examples/doc.css

@@ -471,11 +471,7 @@
 }
 
 .markdown-body table:not(.table) tr:nth-child(2n) {
-  background-color: #f8f8f8;
-}
-
-body.dark .markdown-body table:not(.table) tr:nth-child(2n) {
-  background: none;
+  background-color: var(--colors-neutral-fill-9);
 }
 
 .markdown-body table td:first-child,
@@ -483,7 +479,7 @@ body.dark .markdown-body table:not(.table) tr:nth-child(2n) {
   position: sticky;
   left: 0;
   z-index: 10;
-  background-color: #fff;
+  background-color: var(--colors-neutral-fill-11);
   border-left: 0px !important;
 }
 
@@ -502,7 +498,7 @@ body.dark .markdown-body table:not(.table) tr:nth-child(2n) {
 }
 
 .markdown-body table tr:nth-child(2n) td:first-child {
-  background-color: #f8f8f8;
+  background-color: var(--colors-neutral-fill-9);
 }
 
 /* modified by zhangjun08

examples/style.scss

@@ -5,8 +5,7 @@
 body {
   background-color: #fff !important;
   &.dark {
-    background-color: #333538 !important;
-
+    background-color: var(--colors-neutral-fill-11) !important;
     pre {
       color: #fff;
     }
@@ -140,10 +139,10 @@ body {
         right: 20px;
         top: 15px;
         font-size: 22px;
-        color: #333;
+        color: var(--colors-neutral-text-3);
 
         &:hover {
-          color: #333;
+          color: var(--colors-neutral-text-3);
         }
       }
     }
@@ -210,7 +209,7 @@ body {
         display: inline-block;
         padding: 20px;
         cursor: pointer;
-        color: #666;
+        color: var(--colors-neutral-text-3);
 
         > svg {
           width: 14px;
@@ -282,7 +281,7 @@ body {
 
   > a {
     display: inline-block;
-    color: #333;
+    color: var(--colors-neutral-text-3);
     padding: 0px 5px;
     margin: 0 5px;
     font-weight: 500;

index.html

@@ -43,7 +43,7 @@
         theme = 'cxd';
       }
 
-      ['ang', 'cxd', 'antd'].forEach(key => {
+      ['ang', 'cxd', 'antd', 'dark'].forEach(key => {
         const link = document.createElement('link');
         link.setAttribute('rel', 'stylesheet');
         link.setAttribute('title', key);

package.json

@@ -60,7 +60,7 @@
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "@vitejs/plugin-react": "^2.2.0",
-    "amis-publish": "^1.0.0",
+    "amis-publish": "^1.0.1",
     "copy-to-clipboard": "3.3.1",
     "echarts": "5.4.0",
     "express": "^4.18.2",

packages/amis-theme-editor-helper/src/helper/ColorGenerator.ts

@@ -4,8 +4,10 @@ export class ColorGenerator {
   color = '';
   //十六进制颜色值的正则表达式
   reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
-  constructor(color: string) {
+  isDark = false;
+  constructor(color: string, isDark: boolean = false) {
     this.setPrimaryColor(color);
+    this.isDark = isDark;
   }
   /**
    * 生成衍生色
@@ -29,14 +31,26 @@ export class ColorGenerator {
       let sh, ss, sv;
       if (h > 60 && h < 300) {
         // 冷色
-        sh = h + index * 2;
-        ss = s + index * 5;
-        sv = v - index * 15;
+        if (this.isDark) {
+          sh = h - index * 2;
+          ss = s - index * 5;
+          sv = v;
+        } else {
+          sh = h + index * 2;
+          ss = s + index * 5;
+          sv = v - index * 15;
+        }
       } else {
         // 暖色
-        sh = h - index * 2;
-        ss = s + index * 5;
-        sv = v - index * 15;
+        if (this.isDark) {
+          sh = h + index * 2;
+          ss = s - index * 5;
+          sv = v + index * 15;
+        } else {
+          sh = h - index * 2;
+          ss = s + index * 5;
+          sv = v - index * 15;
+        }
       }
       const shsv = hsvCorrection([sh, ss, sv]);
       const srgb = ColorGenerator.hsvToRgb(shsv);
@@ -49,14 +63,26 @@ export class ColorGenerator {
       let wh, ws, wv;
       if (h > 60 && h < 300) {
         // 冷色
-        wh = h - index * 1;
-        ws = s - index * (s / 5);
-        wv = v + index * 5;
+        if (this.isDark) {
+          wh = h + index * 1;
+          ws = s + index * (s / 5);
+          wv = v - index * 5;
+        } else {
+          wh = h - index * 1;
+          ws = s - index * (s / 5);
+          wv = v + index * 5;
+        }
       } else {
         // 暖色
-        wh = h + index * 1;
-        ws = s - index * (s / 5);
-        wv = v + index * (100 - v) * 5;
+        if (this.isDark) {
+          wh = h - index * 1;
+          ws = s + index * (s / 5);
+          wv = v - index * (100 - v) * 2;
+        } else {
+          wh = h + index * 1;
+          ws = s - index * (s / 5);
+          wv = v + index * (100 - v) * 5;
+        }
       }
       const whsv = hsvCorrection([wh, ws, wv]);
       const wrgb = ColorGenerator.hsvToRgb(whsv);
@@ -76,8 +102,12 @@ export class ColorGenerator {
   getNeutralColor() {
     const rgb = ColorGenerator.hexToRgb(this.color);
     const [h, ,] = ColorGenerator.rgbToHsv(rgb);
-    const S = [65, 45, 25, 10, 6, 4, 2, 1, 1, 1, 0];
-    const V = [8, 15, 25, 40, 55, 75, 85, 92, 96, 98, 100];
+    let S = [65, 45, 25, 10, 6, 4, 2, 1, 1, 1, 0];
+    let V = [8, 15, 25, 40, 55, 75, 85, 92, 96, 98, 100];
+    if (this.isDark) {
+      S = S.reverse();
+      V = V.reverse();
+    }
     const colors: ResColor = [];
     for (let i = 0; i < 11; i++) {
       const newHsv = ColorGenerator.hsvCorrection([h, S[i], V[i]]);

packages/amis-theme-editor-helper/src/helper/declares.ts

@@ -57,6 +57,7 @@ export interface ThemeDefinition {
     name: string;
     key: string;
     description: string;
+    isDark?: boolean;
   };
   global: {
     colors: {

packages/amis-ui/scss/_properties.scss

@@ -113,8 +113,8 @@ $Table-strip-bg: transparent;
   --label--warning-bg: var(--warning);
   --label--danger-bg: var(--danger);
 
-  --label-color: var(--colors-neutral-text-11);
-  --label-link--hover-color: var(--colors-neutral-text-11);
+  --label-color: #fff;
+  --label-link--hover-color: #fff;
 
   --scrollbar-width: #{px2rem(17px)};
 
@@ -161,7 +161,7 @@ $Table-strip-bg: transparent;
   --Avatar-icon-size-small: #{px2rem(12px)};
 
   --Badge-size: var(--gap-md);
-  --Badge-color: var(--colors-neutral-fill-11);
+  --Badge-color: #fff;
   --Badge--success-bg: var(--success);
   --Badge--info-bg: var(--info);
   --Badge--warning-bg: var(--warning);
@@ -183,7 +183,7 @@ $Table-strip-bg: transparent;
   --Breadcrumb-item-default-color: var(--colors-neutral-text-5);
   --Breadcrumb-item-hover-color: var(--colors-brand-5);
   --Breadcrumb-item-active-color: var(--colors-brand-4);
-  --Breadcrumb-item-last-color: #151a26;
+  --Breadcrumb-item-last-color: var(--colors-neutral-text-2);
   --BreadcrumbDropdown-item-default-color: var(--colors-neutral-text-2);
   --BreadcrumbDropdown-item-default-bg: var(--colors-neutral-text-11);
   --BreadcrumbDropdown-item-hover-bg: var(--colors-brand-10);
@@ -472,7 +472,7 @@ $Table-strip-bg: transparent;
   --ListControl-item-borderWidth: var(--borders-width-2);
   --ListControl-item-borderRadius: var(--borders-radius-3);
   --ListControl-item-color: var(--colors-neutral-text-2);
-  --ListControl-item-onActive-after-borderColor: var(--colors-neutral-line-11);
+  --ListControl-item-onActive-after-borderColor: #fff;
   --ListControl-item-onActive-before-bg: var(--colors-brand-5);
   --ListControl-item-onActive-bg: var(--colors-neutral-fill-11);
   --ListControl-item-onActive-borderColor: var(--colors-brand-4);
@@ -606,7 +606,7 @@ $Table-strip-bg: transparent;
   --Pagination-onDisabled-backgroundColor: var(--colors-neutral-fill-10);
   --Pagination-padding: 0 #{px2rem(8px)};
   --Pagination-padding-sm: 0 #{px2rem(4px)};
-  --Pagination-light-color: #84868c;
+  --Pagination-light-color: var(--colors-neutral-text-4);
 
   --Panel--default-badgeBg: var(--colors-neutral-fill-3);
   --Panel--default-badgeColor: var(--colors-neutral-fill-10);
@@ -636,8 +636,8 @@ $Table-strip-bg: transparent;
   --PopUp-cancelAction-color: #666;
   --PopUp-confirmAction-color: var(--primary);
 
-  --Property-title-bg: #f2f2f2;
-  --Property-label-bg: #f7f7f7;
+  --Property-title-bg: var(--colors-neutral-fill-10);
+  --Property-label-bg: var(--colors-neutral-fill-10);
 
   --Portlet-borderColor: var(--borderColor);
   --Portlet-borderStyle: solid;
@@ -696,7 +696,7 @@ $Table-strip-bg: transparent;
   --Tooltip--attr-borderRadius: var(--borderRadius);
   --Tooltip--attr-borderWidth: 0;
   --Tooltip--attr-boxShadow: var(--shadows-shadow-normal);
-  --Tooltip--attr-color: var(--background);
+  --Tooltip--attr-color: #fff;
   --Tooltip--attr-fontSize: var(--fontSizeSm);
   --Tooltip--attr-gap: var(--gap-sm);
   --Tooltip--attr-lineHeigt: var(--lineHeightBase);
@@ -711,7 +711,7 @@ $Table-strip-bg: transparent;
   --Tooltip-bg: var(--background);
   --Tooltip-bg--dark: rgba(7, 12, 20, 0.85);
   --Tooltip-body-color: var(--text-color);
-  --Tooltip-body-color--dark: var(--colors-neutral-fill-11);
+  --Tooltip-body-color--dark: #fff;
   --Tooltip-body-paddingX: var(--gap-base);
   --Tooltip-body-paddingY: var(--gap-sm);
   --Tooltip-borderColor: var(--borderColor);
@@ -727,7 +727,7 @@ $Table-strip-bg: transparent;
   --Tooltip-title-bg: #{darken($white, 3%)};
   --Tooltip-title-borderBottom-color: #{darken(darken($white, 3%), 5%)};
   --Tooltip-title-color: var(--text--loud-color);
-  --Tooltip-title-color--dark: var(--colors-neutral-fill-11);
+  --Tooltip-title-color--dark: #fff;
   --Tooltip-title-paddingX: var(--gap-base);
   --Tooltip-title-paddingY: var(--gap-sm);
 
@@ -737,8 +737,8 @@ $Table-strip-bg: transparent;
   --TransferSelect--normal-heading-bg: var(--colors-neutral-fill-10);
   --TransferSelect-heading-borderBottom: var(--borders-width-1);
 
-  --TabsTransfer-title-bg: #f7f7f9;
-  --TabsTransfer-border-color: #e8e9eb;
+  --TabsTransfer-title-bg: var(--colors-neutral-fill-10);
+  --TabsTransfer-border-color: var(--colors-neutral-fill-8);
 
   --AnchorNav-links-container-borderRight: #{px2rem(2px)} solid #d3dae0;
   --AnchorNav-onActive-borderWidth: 0 0 0 #{px2rem(2px)};
@@ -755,7 +755,7 @@ $Table-strip-bg: transparent;
   --ColumnToggler-item-margin: #{px2rem(4px)};
   --ColumnToggler-item-dragBar-color: #d8d8d8;
 
-  --InputFormula-header-bgColor: #fafafa;
+  --InputFormula-header-bgColor: var(--colors-neutral-fill-10);
   --InputFormula-icon-size: #{px2rem(18px)};
   --InputFormula-icon-color-onActive: var(--colors-brand-5);
   --InputFormula-code-bgColor: var(--colors-neutral-fill-10);
@@ -819,7 +819,7 @@ $Table-strip-bg: transparent;
   --SearchBox-hover-color: var(--colors-brand-5);
   --SearchBox-focus-color: var(--colors-brand-4);
   --SearchBox-search-icon-color: var(--colors-neutral-text-5);
-  --SearchBox-enhonce-icon-color: var(--colors-neutral-text-11);
+  --SearchBox-enhonce-icon-color: var(--button-default-default-font-color);
   --SearchBox-clearable-icon-color: var(--colors-neutral-text-7);
   --SearchBox-clearable-icon-size: var(--sizes-size-9);
   --SearchBox-height: var(--sizes-base-15);

packages/amis-ui/scss/components/_array-input.scss

@@ -31,7 +31,7 @@
       var(--Combo-addBtn-bg),
       var(--Combo-addBtn-border),
       var(--Combo-addBtn-color),
-      var(--Combo-addBtn-onHover-bg),
+      var(--combo-multi-addBtn-hover-bg-color),
       var(--Combo-addBtn-onHover-border),
       var(--Combo-addBtn-onHover-color),
       var(--Combo-addBtn-onActive-bg),

packages/amis-ui/scss/components/_breadcrumb.scss

@@ -47,11 +47,10 @@
       cursor: pointer;
       display: inline-block;
       transition: transform var(--animation-duration) ease;
-  
       > svg {
         width: px2rem(10px);
         height: px2rem(10px);
-        top: px2rem(1px);
+        top: px2rem(-2px);
       }
     }
 
@@ -60,7 +59,7 @@
       color: var(--Breadcrumb-item-hover-color);
     }
 
-    &.is-opened &-default{
+    &.is-opened &-default {
       color: var(--Breadcrumb-item-hover-color);
     }
   }
@@ -81,7 +80,8 @@
     background: var(--DropDown-menu-bg);
     list-style: none;
     padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX);
-    border: var(--DropDown-menu-borderWidth) solid var(--DropDown-menu-borderColor);
+    border: var(--DropDown-menu-borderWidth) solid
+      var(--DropDown-menu-borderColor);
     border-radius: var(--DropDown-menu-borderRadius);
     box-shadow: var(--DropDown-menu-boxShadow);
     min-width: 100%;
@@ -90,7 +90,8 @@
   }
 
   &-dropdown > li {
-    padding: var(--BreadcrumbDropdown-item-paddingX) var(--BreadcrumbDropdown-item-paddingY);
+    padding: var(--BreadcrumbDropdown-item-paddingX)
+      var(--BreadcrumbDropdown-item-paddingY);
     white-space: nowrap;
     box-sizing: border-box;
     padding-left: px2rem(12px);

packages/amis-ui/scss/components/_drawer.scss

@@ -266,6 +266,7 @@
     transform: translate3d(0, -100%, 0);
     box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2);
     min-height: 120px;
+    border-bottom: var(--common-popover-border);
   }
 
   .#{$ns}Drawer-resizeCtrl {
@@ -294,6 +295,7 @@
     transform: translate3d(100%, 0, 0);
     box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.2);
     min-width: 120px;
+    border-left: var(--common-popover-border);
   }
 
   .#{$ns}Drawer-footer {
@@ -343,6 +345,7 @@
     transform: translate3d(0, 100%, 0);
     box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.2);
     min-height: 120px;
+    border-top: var(--common-popover-border);
   }
 
   .#{$ns}Drawer-resizeCtrl {
@@ -372,6 +375,7 @@
     box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.2);
     border-width: 0 var(--Drawer-content-borderWidth) 0 0;
     min-width: 120px;
+    border-right: var(--common-popover-border);
   }
 
   .#{$ns}Drawer-resizeCtrl {

packages/amis-ui/scss/components/_dropdown.scss

@@ -50,7 +50,8 @@
       top: 100%;
       left: 0;
       margin: px2rem(1px) 0 0;
-      border: none;
+      border: var(--Form-select-outer-borderWidth) solid
+        var(--Form-select-outer-borderColor);
       border-radius: var(--DropDown-menu-borderRadius);
       box-shadow: var(--DropDown-menu-boxShadow);
       min-width: var(--DropDown-menu-minWidth);

packages/amis-ui/scss/components/_formula.scss

@@ -265,8 +265,8 @@
         text-align: center;
         padding: 0 #{px2rem(8px)};
         border-radius: var(--borderRadius);
-        background: #f5f5f5;
-        color: var(--black);
+        background: var(--colors-neutral-fill-10);
+        color: var(--colors-neutral-text-2);
         font-size: var(--fontSizeSm);
         line-height: #{px2rem(24px)};
         height: #{px2rem(24px)};
@@ -479,9 +479,6 @@
     }
 
     &.is-filled {
-      fill: var(--InputFormula-icon-color-onActive);
-      color: var(--InputFormula-icon-color-onActive);
-
       &.icon-function.icon {
         font-size: var(--InputFormula-icon-size) !important;
       }
@@ -514,7 +511,7 @@
   border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
   padding: 0 var(--Form-input-paddingX) 0 0;
   border-radius: var(--borderRadius);
-  background-color: #fff;
+  background-color: var(--colors-neutral-fill-11);
   height: var(--Form-input-height);
 
   &.#{$ns}FormulaPicker--text {
@@ -563,6 +560,7 @@
   }
 
   .#{$ns}FormulaPicker-toggler {
+    color: var(--colors-neutral-text-2);
     .icon-function {
       transform: scale(1.3);
     }
@@ -573,6 +571,7 @@
 
     &:hover {
       cursor: pointer;
+      color: var(--colors-brand-5);
     }
   }
 }

packages/amis-ui/scss/components/_menu.scss

@@ -433,6 +433,8 @@
       background-color: var(--Layout-light-backgroundColor);
       line-height: var(--Nav-Item-height);
       cursor: pointer;
+      border: var(--Form-select-outer-borderWidth) solid
+        var(--Form-select-outer-borderColor);
       border-radius: px2rem(2px);
       max-height: px2rem(400px);
       overflow-y: auto;
@@ -614,6 +616,7 @@
       svg {
         transition: transform 0.3s;
         transform: rotate(90deg);
+        color: var(--colors-neutral-text-2);
       }
     }
 
@@ -694,7 +697,7 @@
   font-size: var(--Layout-tooltip-fontSize);
   color: var(--Layout-light-fontColor);
   background: var(--Layout-light-backgroundColor);
-  border: none;
+  border: var(--common-popover-border);
   border-radius: var(--Tooltip--attr-borderRadius);
   box-shadow: 0 px2rem(4px) px2rem(6px) 0 rgb(8 14 26 / 6%),
     0 px2rem(1px) px2rem(10px) 0 rgb(8 14 26 / 5%),

packages/amis-ui/scss/components/_modal.scss

@@ -191,7 +191,6 @@
 @include media-breakpoint-up(sm) {
   .#{$ns}Modal-content:not(.#{$ns}Modal-content-custom) {
     max-width: var(--dialog-size-normal-width);
-    border-width: var(--dialog-default-border-width);
   }
 
   .#{$ns}Modal--sm .#{$ns}Modal-content {

packages/amis-ui/scss/components/_pagination.scss

@@ -21,7 +21,7 @@
       line-height: var(--Pagination-height);
       padding: var(--Pagination-padding);
       text-align: center;
-      color: #666666;
+      color: var(--Pagination-light-color);
       border-radius: 0;
       margin-left: 0;
       font-size: var(--Pagination-fontSize);
@@ -116,6 +116,8 @@
       border: var(--borderWidth) solid var(--borderColor);
       border-radius: var(--borderRadius) 0 0 var(--borderRadius);
       padding: var(--Pagination-padding);
+      background-color: var(--colors-neutral-fill-11);
+      color: var(--Pagination-light-color);
       margin-left: px2rem(8px);
       text-align: center;
 
@@ -137,11 +139,11 @@
       border-left: none;
       border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
       font-size: var(--fontSizeSm);
+      margin-left: -1px;
       &:hover {
         color: var(--primary);
         border-color: var(--primary);
         border-left: var(--borderWidth) solid var(--primary);
-        margin-left: -1px;
       }
     }
   }
@@ -161,6 +163,8 @@
       border: var(--borderWidth) solid var(--borderColor);
       border-radius: var(--borderRadius);
       padding: var(--Pagination-padding);
+      background-color: var(--colors-neutral-fill-11);
+      color: var(--Pagination-light-color);
       margin-right: px2rem(8px);
       text-align: center;
 

packages/amis-ui/scss/components/_popover.scss

@@ -21,7 +21,7 @@
   word-wrap: normal;
   font-size: var(--fontSizeBase);
   box-shadow: var(--boxShadow);
-  border: var(--borderWidth) solid var(--borderColor);
+  border: var(--common-popover-border);
   border-radius: var(--borderRadius);
 
   & > * {

packages/amis-ui/scss/components/_search-box.scss

@@ -59,7 +59,7 @@
     cursor: pointer;
     color: var(--SearchBox-search-icon-color);
     svg {
-      top: 1px;
+      top: px2rem(2px);
     }
 
     &:hover {
@@ -125,7 +125,7 @@
     color: var(--SearchBox-enhonce-icon-color);
     background: var(--SearchBox-hover-color);
     svg {
-      top: 0;
+      top: px2rem(2px);
     }
 
     &:hover {

packages/amis-ui/scss/components/_tooltip.scss

@@ -12,6 +12,7 @@
   word-wrap: break-word;
   background: var(--Tooltip-bg);
   box-shadow: var(--Tooltip-boxShadow);
+  border: var(--common-popover-border);
 
   &-arrow {
     position: absolute;
@@ -178,7 +179,7 @@
 
   &--dark {
     background: var(--Tooltip-bg--dark);
-    border: none;
+    border: var(--common-popover-border);
     box-shadow: var(--Tooltip-boxShadow--dark);
 
     .#{$ns}Tooltip-title {

packages/amis-ui/scss/components/form/_checks.scss

@@ -271,7 +271,7 @@
         &:before {
           width: var(--Checkbox--full-inner-size);
           height: calc(var(--Checkbox--full-inner-size) / 2);
-          border-color: var(--Checkbox-gb);
+          border-color: #fff;
         }
       }
 

packages/amis-ui/scss/components/form/_date-range.scss

@@ -258,7 +258,7 @@
 
 .#{$ns}DateRangePicker-popover {
   border: var(--Form-select-outer-borderWidth) solid
-    var(--Form-input-onFocused-borderColor);
+    var(--Form-select-outer-borderColor);
   box-shadow: var(--Form-select-outer-boxShadow);
 }
 

packages/amis-ui/scss/components/form/_date.scss

@@ -201,7 +201,7 @@
 .#{$ns}DatePicker-popover {
   margin: px2rem(2px) 0 0;
   border: var(--Form-select-outer-borderWidth) solid
-    var(--Form-input-onFocused-borderColor);
+    var(--Form-select-outer-borderColor);
   box-shadow: var(--Form-select-outer-boxShadow);
 }
 

packages/amis-ui/scss/components/form/_editor.scss

@@ -82,7 +82,6 @@
     flex-flow: row nowrap;
     justify-content: center;
     align-items: center;
-    background: var(--Modal-header-bg);
     box-sizing: border-box;
   }
 

packages/amis-ui/scss/components/form/_form.scss

@@ -413,7 +413,7 @@
 .#{$ns}Form--debug {
   padding: var(--gap-sm);
   margin-bottom: var(--gap-sm);
-  background-color: rgb(250, 250, 250);
+  background-color: var(--colors-neutral-fill-11);
   border-radius: var(--borderRadius);
   position: relative;
   word-wrap: break-word;

packages/amis-ui/scss/components/form/_nested-select.scss

@@ -65,7 +65,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     border: var(--Form-select-outer-borderWidth) solid
-      var(--Form-input-onFocused-borderColor);
+      var(--Form-select-outer-borderColor);
     &:not(:first-child) {
       border-left: 0;
       margin-left: px2rem(4px);

packages/amis-ui/scss/components/form/_number.scss

@@ -426,9 +426,6 @@
       var(--inputNumber-enhance-hover-top-right-border-radius)
       var(--inputNumber-enhance-hover-bottom-right-border-radius)
       var(--inputNumber-enhance-hover-bottom-left-border-radius);
-    .#{$ns}Number-input {
-      padding-right: var(--inputNumber-base-default-paddingRight);
-    }
     .#{$ns}Number--enhance-input {
       background: var(--inputNumber-enhance-hover-bg-color);
     }

packages/amis-ui/scss/components/form/_select.scss

@@ -588,7 +588,7 @@
   background: var(--Form-select-menu-bg);
   color: var(--Form-select-menu-color);
   border: var(--Form-select-outer-borderWidth) solid
-    var(--Form-input-onFocused-borderColor);
+    var(--Form-select-outer-borderColor);
   box-shadow: var(--Form-select-outer-boxShadow);
   // min-width: px2rem(100px);
 

packages/amis-ui/scss/components/form/_text.scss

@@ -322,7 +322,7 @@
     border-radius: px2rem(2px);
     box-shadow: var(--Form-select-outer-boxShadow);
     border: var(--Form-select-outer-borderWidth) solid
-      var(--Form-input-onFocused-borderColor);
+      var(--Form-select-outer-borderColor);
     padding: px2rem(4px) 0;
   }
 

packages/amis-ui/scss/components/form/_textarea.scss

@@ -43,7 +43,7 @@
     bottom: 1px;
     right: var(--scrollbar-width);
     padding-bottom: var(--Form-input-paddingY);
-    background-color: #fff;
+    background-color: var(--Form-input-bg);
     text-align: right;
     border-radius: 3px;
     color: var(--input-count-multi-color);

packages/amis-ui/scss/components/form/_tree-select.scss

@@ -8,7 +8,8 @@
     box-shadow: var(--boxShadow);
     .#{$ns}Tree {
       border-radius: var(--borders-radius-3);
-      border: none;
+      border: var(--Form-select-outer-borderWidth) solid
+        var(--Form-select-outer-borderColor);
     }
   }
 }

packages/amis-ui/scss/components/react-datetime.scss

@@ -56,7 +56,7 @@
   }
   .headerTable {
     border-spacing: 0;
-    border-bottom: 1px solid #e8e9eb;
+    border-bottom: 1px solid var(--colors-neutral-line-8);
   }
 }
 .rdtPicker td,

packages/amis-ui/scss/themes/_dark-variables.scss

@@ -6,62 +6,59 @@
 $ns: 'dark-';
 
 :root {
-  --colors-neutral-fill-none: translate;
-  --colors-error-main: #dc3545;
-  --colors-error-1: #420312;
-  --colors-error-2: #69091c;
-  --colors-error-3: #8f1428;
-  --colors-error-4: #b52236;
-  --colors-error-5: #dc3545;
-  --colors-error-6: #ff6471;
-  --colors-error-7: #ff8b92;
-  --colors-error-8: #ffb1b5;
-  --colors-error-9: #ffd8da;
-  --colors-error-10: #ffe6e6;
-  --colors-warning-main: #ff9f0b;
-  --colors-warning-1: #663000;
-  --colors-warning-2: #8c4600;
-  --colors-warning-3: #b35f00;
-  --colors-warning-4: #d97b00;
-  --colors-warning-5: #ff9f0b;
-  --colors-warning-6: #ffb43b;
-  --colors-warning-7: #ffc96c;
-  --colors-warning-8: #ffdd9d;
-  --colors-warning-9: #ffefce;
-  --colors-warning-10: #fff7e6;
-  --colors-success-main: #32d74b;
-  --colors-success-1: #023d13;
-  --colors-success-2: #08631f;
-  --colors-success-3: #128a2c;
-  --colors-success-4: #20b03a;
-  --colors-success-5: #32d74b;
-  --colors-success-6: #57e36a;
-  --colors-success-7: #81f08e;
-  --colors-success-8: #affcb6;
-  --colors-success-9: #d8ffdb;
-  --colors-success-10: #e6ffe7;
-  --colors-link-main: #2296f3;
-  --colors-link-1: #002559;
-  --colors-link-2: #003980;
-  --colors-link-3: #0754a6;
-  --colors-link-4: #1272cc;
-  --colors-link-5: #2296f3;
-  --colors-link-6: #50b3ff;
-  --colors-link-7: #7bc8ff;
-  --colors-link-8: #a7dcff;
-  --colors-link-9: #d3eeff;
-  --colors-link-10: #e6f6ff;
-  --colors-info-main: #2296f3;
-  --colors-info-1: #002559;
-  --colors-info-2: #003980;
-  --colors-info-3: #0754a6;
-  --colors-info-4: #1272cc;
-  --colors-info-5: #2296f3;
-  --colors-info-6: #50b3ff;
-  --colors-info-7: #7bc8ff;
-  --colors-info-8: #a7dcff;
-  --colors-info-9: #d3eeff;
-  --colors-info-10: #e6f6ff;
+  --colors-error-main: #ff4242;
+  --colors-error-1: #ff8875;
+  --colors-error-2: #ff7869;
+  --colors-error-3: #ff675c;
+  --colors-error-4: #ff554f;
+  --colors-error-5: #ff4242;
+  --colors-error-6: #ff1d20;
+  --colors-error-7: #ff0008;
+  --colors-error-8: #ff000d;
+  --colors-error-9: #ff0011;
+  --colors-error-10: #ff0015;
+  --colors-warning-main: #ff9326;
+  --colors-warning-1: #ffc259;
+  --colors-warning-2: #ffb84d;
+  --colors-warning-3: #ffac40;
+  --colors-warning-4: #ffa033;
+  --colors-warning-5: #ff9326;
+  --colors-warning-6: #ff7b00;
+  --colors-warning-7: #ff7700;
+  --colors-warning-8: #ff7300;
+  --colors-warning-9: #ff6f00;
+  --colors-warning-10: #ff6a00;
+  --colors-success-main: #2fc40e;
+  --colors-success-1: #62c435;
+  --colors-success-2: #57c42b;
+  --colors-success-3: #4ac421;
+  --colors-success-4: #3dc418;
+  --colors-success-5: #2fc40e;
+  --colors-success-6: #1fb800;
+  --colors-success-7: #1aab00;
+  --colors-success-8: #159e00;
+  --colors-success-9: #119100;
+  --colors-success-10: #0d8500;
+  --colors-link-1: #001259;
+  --colors-link-2: #001e80;
+  --colors-link-3: #0832a6;
+  --colors-link-4: #144bcc;
+  --colors-link-5: #2468f2;
+  --colors-link-6: #528eff;
+  --colors-link-7: #7dadff;
+  --colors-link-8: #a8caff;
+  --colors-link-9: #d4e5ff;
+  --colors-link-10: #e6f0ff;
+  --colors-info-1: #001259;
+  --colors-info-2: #001e80;
+  --colors-info-3: #0832a6;
+  --colors-info-4: #144bcc;
+  --colors-info-5: #2468f2;
+  --colors-info-6: #528eff;
+  --colors-info-7: #7dadff;
+  --colors-info-8: #a8caff;
+  --colors-info-9: #d4e5ff;
+  --colors-info-10: #e6f0ff;
   --colors-other-main: #2468f2;
   --colors-other-1: #001259;
   --colors-other-2: #001e80;
@@ -73,50 +70,50 @@ $ns: 'dark-';
   --colors-other-8: #a8caff;
   --colors-other-9: #d4e5ff;
   --colors-other-10: #e6f0ff;
-  --colors-brand-1: #002566;
-  --colors-brand-2: #00388c;
-  --colors-brand-3: #004db3;
-  --colors-brand-4: #0065d9;
-  --colors-brand-5: #0983ff;
-  --colors-brand-6: #3ba0ff;
-  --colors-brand-7: #6cbaff;
-  --colors-brand-8: #9dd3ff;
-  --colors-brand-9: #ceeaff;
-  --colors-brand-10: #e6f4ff;
-  --colors-neutral-text-1: #070e14;
-  --colors-neutral-text-2: #f3f1f1;
-  --colors-neutral-text-3: #303840;
-  --colors-neutral-text-4: #6c6c6c;
-  --colors-neutral-text-5: #84888c;
+  --colors-brand-main: #1677ff;
+  --colors-brand-1: #4aaeff;
+  --colors-brand-2: #3da1ff;
+  --colors-brand-3: #3094ff;
+  --colors-brand-4: #2486ff;
+  --colors-brand-5: #1677ff;
+  --colors-brand-6: #0061f2;
+  --colors-brand-7: #0058e6;
+  --colors-brand-8: #004fd9;
+  --colors-brand-9: #0047cc;
+  --colors-brand-10: #0040bf;
+  --colors-neutral-text-1: #ffffff;
+  --colors-neutral-text-2: #f7f8fa;
+  --colors-neutral-text-3: #f2f3f5;
+  --colors-neutral-text-4: #e8e9eb;
+  --colors-neutral-text-5: #d4d6d9;
   --colors-neutral-text-6: #b8bbbf;
-  --colors-neutral-text-7: #d4d7d9;
-  --colors-neutral-text-8: #e8e9eb;
-  --colors-neutral-text-9: #f2f4f5;
-  --colors-neutral-text-10: #f7f9fa;
-  --colors-neutral-text-11: #ffffff;
-  --colors-neutral-fill-none: transparent;
-  --colors-neutral-fill-1: #070e14;
-  --colors-neutral-fill-2: #151e26;
-  --colors-neutral-fill-3: #303840;
-  --colors-neutral-fill-4: #5c6166;
-  --colors-neutral-fill-5: #84888c;
+  --colors-neutral-text-7: #84878c;
+  --colors-neutral-text-8: #5c6066;
+  --colors-neutral-text-9: #303640;
+  --colors-neutral-text-10: #151c26;
+  --colors-neutral-text-11: #070d14;
+  --colors-neutral-fill-1: #ffffff;
+  --colors-neutral-fill-2: #f7f8fa;
+  --colors-neutral-fill-3: #f2f3f5;
+  --colors-neutral-fill-4: #e8e9eb;
+  --colors-neutral-fill-5: #d4d6d9;
   --colors-neutral-fill-6: #b8bbbf;
-  --colors-neutral-fill-7: #d4d7d9;
-  --colors-neutral-fill-8: #e8e9eb;
-  --colors-neutral-fill-9: #f2f4f5;
-  --colors-neutral-fill-10: #f7f9fa;
-  --colors-neutral-fill-11: #ffffff;
-  --colors-neutral-line-1: #070e14;
-  --colors-neutral-line-2: #151e26;
-  --colors-neutral-line-3: #303840;
-  --colors-neutral-line-4: #5c6166;
-  --colors-neutral-line-5: #84888c;
+  --colors-neutral-fill-7: #84878c;
+  --colors-neutral-fill-8: #5c6066;
+  --colors-neutral-fill-9: #303640;
+  --colors-neutral-fill-10: #151c26;
+  --colors-neutral-fill-11: #070d14;
+  --colors-neutral-line-1: #ffffff;
+  --colors-neutral-line-2: #f7f8fa;
+  --colors-neutral-line-3: #f2f3f5;
+  --colors-neutral-line-4: #e8e9eb;
+  --colors-neutral-line-5: #d4d6d9;
   --colors-neutral-line-6: #b8bbbf;
-  --colors-neutral-line-7: #d4d7d9;
-  --colors-neutral-line-8: #e8e9eb;
-  --colors-neutral-line-9: #f2f4f5;
-  --colors-neutral-line-10: #f7f9fa;
-  --colors-neutral-line-11: #ffffff;
+  --colors-neutral-line-7: #84878c;
+  --colors-neutral-line-8: #5c6066;
+  --colors-neutral-line-9: #303640;
+  --colors-neutral-line-10: #151c26;
+  --colors-neutral-line-11: #070d14;
   --fonts-base-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica,
     'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB',
     'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN',

packages/amis-ui/scss/themes/dark.scss

@@ -2,3 +2,26 @@
 @import '../components';
 @import './dark-variables';
 @import './common';
+
+:root,
+.AMISCSSWrapper {
+  --switch-text-on-color: var(--colors-neutral-text-2);
+  --switch-text-off-color: var(--colors-neutral-text-2);
+  --switch-default-on-slider-color: var(--colors-neutral-fill-2);
+  --switch-default-off-slider-color: var(--colors-neutral-fill-2);
+  --button-primary-default-font-color: var(--colors-neutral-text-2);
+  --button-primary-hover-font-color: var(--colors-neutral-text-2);
+  --button-primary-active-font-color: var(--colors-neutral-text-2);
+  --button-info-default-font-color: var(--colors-neutral-text-2);
+  --button-info-hover-font-color: var(--colors-neutral-text-2);
+  --button-info-active-font-color: var(--colors-neutral-text-2);
+  --button-success-default-font-color: var(--colors-neutral-text-2);
+  --button-success-hover-font-color: var(--colors-neutral-text-2);
+  --button-success-active-font-color: var(--colors-neutral-text-2);
+  --button-warning-default-font-color: var(--colors-neutral-text-2);
+  --button-warning-hover-font-color: var(--colors-neutral-text-2);
+  --button-warning-active-font-color: var(--colors-neutral-text-2);
+  --button-danger-default-font-color: var(--colors-neutral-text-2);
+  --button-danger-hover-font-color: var(--colors-neutral-text-2);
+  --button-danger-active-font-color: var(--colors-neutral-text-2);
+}

packages/amis-ui/src/components/PickerContainer.tsx

@@ -131,6 +131,7 @@ export class PickerContainer extends React.Component<
       showTitle,
       headerClassName,
       bodyClassName,
+      className,
       translate: __,
       size,
       showFooter,
@@ -157,6 +158,7 @@ export class PickerContainer extends React.Component<
           showTitle={showTitle}
           headerClassName={headerClassName}
           bodyClassName={bodyClassName}
+          className={className}
           showFooter={showFooter}
           beforeConfirm={this.confirm}
           popOverContainer={popOverContainer}

packages/amis-ui/src/icons/function.svg

@@ -1,10 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>fx</title>
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="fx">
-            <rect x="0" y="0" width="16" height="16"></rect>
-            <path d="M6.85458095,1.4369501 C7.71952092,0.883033689 9.14623722,0.984136878 9.82754043,1.06050205 C10.1144049,1.09276903 10.7457242,1.15084958 10.6805277,1.77252664 C10.6294571,2.26943806 9.89599674,2.21888646 9.7014939,2.21888646 C9.48535769,2.21888646 9.2659886,2.19876183 9.04755999,2.18089337 L8.82959943,2.1646059 C7.92402473,2.10678268 7.05892911,2.21764793 6.53620481,4.11618461 L6.21348223,5.68866187 L7.84556744,5.68866187 C8.14547125,5.68866187 8.38887144,5.92958862 8.38887144,6.22644479 C8.38887144,6.52330096 8.14547125,6.76422771 7.84556744,6.76422771 L5.98203473,6.76422771 L4.51511393,13.8963048 C4.51511393,13.8963048 4.37385489,15.042858 3.66212666,14.9987598 C3.63797714,14.9972618 3.61487053,14.9948005 3.5927662,14.9914342 C3.56428372,14.9965963 3.53191413,15 3.49937138,15 L1.46666667,15 C1.20893378,15 1,14.7910662 1,14.5333333 L1,14.5005208 C0.999354255,14.259116 1.18292475,14.0570646 1.42329087,14.0346853 C1.93951851,13.9857578 2.38825526,13.9043655 2.76950112,13.7905085 C2.88970413,13.7546105 2.99265144,13.7126424 3.07834304,13.6646043 C3.13612492,13.6324776 3.19778289,13.6139204 3.25964158,13.6078865 L4.67484531,6.76422771 L2.46685786,6.76422771 C2.18325317,6.76422771 1.95723871,6.54696341 1.93333333,6.27269412 L1.945,6.342 L1.95324336,6.32324571 C1.96746558,6.3067537 1.99022114,6.29312987 1.99875447,6.27376968 C1.98595447,6.2576362 1.94115447,6.24365384 1.94115447,6.22644479 L1.941,6.319 L1.93333333,6.27269412 C1.95524659,5.81127637 2.14698763,5.70504184 2.39724012,5.69054037 L2.46685786,5.68866187 L4.90846603,5.68866187 L5.24857433,4.08391763 C5.48980131,2.9481201 5.98746777,1.99301764 6.85458095,1.4369501 Z M14.7335755,5.87796146 C14.9009132,5.96723342 14.9878418,6.07048774 14.9987079,6.18664885 C15.0084874,6.30280996 14.9628498,6.41681994 14.8585355,6.52975435 L12.8950348,8.6378634 L14.8324569,11.2676219 C14.8933069,11.3461382 14.9085194,11.440788 14.873748,11.5440423 C14.8433229,11.6494478 14.7064103,11.7225862 14.5249468,11.8193872 C14.3282708,11.9215659 14.1576733,11.9118858 14.0359732,11.8785433 C13.9175329,11.8441252 13.8110453,11.7666844 13.7219435,11.6494478 L12.0876851,9.50907173 L10.1046255,11.6386921 C9.86774493,11.8925256 9.59935275,11.9301704 9.2929293,11.7505509 C9.16688277,11.6774125 8.93652187,11.4063699 8.90935667,11.2837554 C8.88327808,11.1622164 8.93217544,11.0342241 9.05822197,10.8976272 L11.2509969,8.53568465 L9.65368315,6.44370909 C9.58740006,6.34798373 9.58088042,6.23612488 9.6330376,6.10920811 C9.68302157,5.98229134 9.80146184,5.90700173 9.92750837,5.83278769 C10.1089719,5.7316845 10.2752229,5.7284578 10.3980096,5.7381379 C10.5218829,5.74566686 10.6338036,5.81557864 10.7370313,5.94464654 L12.0648663,7.65802292 L13.6719595,5.92528635 C13.8110453,5.772556 13.9686035,5.71877771 14.1207286,5.67575508 C14.2717671,5.63273244 14.5705843,5.78761392 14.7335755,5.87796146 Z" id="形状结合备份" fill="#2C313C" fill-rule="nonzero"></path>
-        </g>
-    </g>
-</svg>
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path
+        d="M6.85458095,1.4369501 C7.71952092,0.883033689 9.14623722,0.984136878 9.82754043,1.06050205 C10.1144049,1.09276903 10.7457242,1.15084958 10.6805277,1.77252664 C10.6294571,2.26943806 9.89599674,2.21888646 9.7014939,2.21888646 C9.48535769,2.21888646 9.2659886,2.19876183 9.04755999,2.18089337 L8.82959943,2.1646059 C7.92402473,2.10678268 7.05892911,2.21764793 6.53620481,4.11618461 L6.21348223,5.68866187 L7.84556744,5.68866187 C8.14547125,5.68866187 8.38887144,5.92958862 8.38887144,6.22644479 C8.38887144,6.52330096 8.14547125,6.76422771 7.84556744,6.76422771 L5.98203473,6.76422771 L4.51511393,13.8963048 C4.51511393,13.8963048 4.37385489,15.042858 3.66212666,14.9987598 C3.63797714,14.9972618 3.61487053,14.9948005 3.5927662,14.9914342 C3.56428372,14.9965963 3.53191413,15 3.49937138,15 L1.46666667,15 C1.20893378,15 1,14.7910662 1,14.5333333 L1,14.5005208 C0.999354255,14.259116 1.18292475,14.0570646 1.42329087,14.0346853 C1.93951851,13.9857578 2.38825526,13.9043655 2.76950112,13.7905085 C2.88970413,13.7546105 2.99265144,13.7126424 3.07834304,13.6646043 C3.13612492,13.6324776 3.19778289,13.6139204 3.25964158,13.6078865 L4.67484531,6.76422771 L2.46685786,6.76422771 C2.18325317,6.76422771 1.95723871,6.54696341 1.93333333,6.27269412 L1.945,6.342 L1.95324336,6.32324571 C1.96746558,6.3067537 1.99022114,6.29312987 1.99875447,6.27376968 C1.98595447,6.2576362 1.94115447,6.24365384 1.94115447,6.22644479 L1.941,6.319 L1.93333333,6.27269412 C1.95524659,5.81127637 2.14698763,5.70504184 2.39724012,5.69054037 L2.46685786,5.68866187 L4.90846603,5.68866187 L5.24857433,4.08391763 C5.48980131,2.9481201 5.98746777,1.99301764 6.85458095,1.4369501 Z M14.7335755,5.87796146 C14.9009132,5.96723342 14.9878418,6.07048774 14.9987079,6.18664885 C15.0084874,6.30280996 14.9628498,6.41681994 14.8585355,6.52975435 L12.8950348,8.6378634 L14.8324569,11.2676219 C14.8933069,11.3461382 14.9085194,11.440788 14.873748,11.5440423 C14.8433229,11.6494478 14.7064103,11.7225862 14.5249468,11.8193872 C14.3282708,11.9215659 14.1576733,11.9118858 14.0359732,11.8785433 C13.9175329,11.8441252 13.8110453,11.7666844 13.7219435,11.6494478 L12.0876851,9.50907173 L10.1046255,11.6386921 C9.86774493,11.8925256 9.59935275,11.9301704 9.2929293,11.7505509 C9.16688277,11.6774125 8.93652187,11.4063699 8.90935667,11.2837554 C8.88327808,11.1622164 8.93217544,11.0342241 9.05822197,10.8976272 L11.2509969,8.53568465 L9.65368315,6.44370909 C9.58740006,6.34798373 9.58088042,6.23612488 9.6330376,6.10920811 C9.68302157,5.98229134 9.80146184,5.90700173 9.92750837,5.83278769 C10.1089719,5.7316845 10.2752229,5.7284578 10.3980096,5.7381379 C10.5218829,5.74566686 10.6338036,5.81557864 10.7370313,5.94464654 L12.0648663,7.65802292 L13.6719595,5.92528635 C13.8110453,5.772556 13.9686035,5.71877771 14.1207286,5.67575508 C14.2717671,5.63273244 14.5705843,5.78761392 14.7335755,5.87796146 Z"
+        fill="currentColor" fill-rule="nonzero"></path>
+</svg>

packages/amis-ui/src/icons/search.svg

@@ -1,4 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" 
+<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18" version="1.1">
-    <path d="M2,8 C2,4.691 4.691,2 8,2 C11.309,2 14,4.691 14,8 C14,11.309 11.309,14 8,14 C4.691,14 2,11.309 2,8 L2,8 Z M18,16.586 L14.314,12.9 C15.367,11.545 16,9.849 16,8 C16,3.582 12.418,0 8,0 C3.582,0 0,3.582 0,8 C0,12.418 3.582,16 8,16 C9.849,16 11.545,15.367 12.9,14.314 L16.586,18 L18,16.586 Z"></path>
+    <path fill="currentColor"
+        d="M2,8 C2,4.691 4.691,2 8,2 C11.309,2 14,4.691 14,8 C14,11.309 11.309,14 8,14 C4.691,14 2,11.309 2,8 L2,8 Z M18,16.586 L14.314,12.9 C15.367,11.545 16,9.849 16,8 C16,3.582 12.418,0 8,0 C3.582,0 0,3.582 0,8 C0,12.418 3.582,16 8,16 C9.849,16 11.545,15.367 12.9,14.314 L16.586,18 L18,16.586 Z"></path>
 </svg>

packages/amis-ui/src/icons/trash.svg

@@ -1,8 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg  viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-     
-    <g  stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect  stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
-        <path d="M14,3.499 L14,4.5 L12.497,4.5 L12.498,14.5 L3.498,14.5 L3.497,4.5 L2,4.5 L2,3.499 L14,3.499 Z M11.498,4.5 L4.497,4.5 L4.497,13.5 L11.498,13.5 L11.498,4.5 Z M6.998,7.499 L6.998,11.499 L5.998,11.499 L5.998,7.499 L6.998,7.499 Z M9.998,7.499 L9.998,11.499 L8.998,11.499 L8.998,7.499 L9.998,7.499 Z M9.999,1.5 L9.999,2.499 L5.998,2.499 L5.998,1.5 L9.999,1.5 Z"  fill="#151B26"></path>
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path
+            d="M14,3.499 L14,4.5 L12.497,4.5 L12.498,14.5 L3.498,14.5 L3.497,4.5 L2,4.5 L2,3.499 L14,3.499 Z M11.498,4.5 L4.497,4.5 L4.497,13.5 L11.498,13.5 L11.498,4.5 Z M6.998,7.499 L6.998,11.499 L5.998,11.499 L5.998,7.499 L6.998,7.499 Z M9.998,7.499 L9.998,11.499 L8.998,11.499 L8.998,7.499 L9.998,7.499 Z M9.999,1.5 L9.999,2.499 L5.998,2.499 L5.998,1.5 L9.999,1.5 Z"
+            fill="currentColor"></path>
     </g>
 </svg>