fix(list, list-picker, select, cascader): add deps style

src/cascader/style/index.less

@@ -1,21 +1,21 @@
-@import '../../stylesheet/variables/index.less';
-@import '~@gio-design/utils/lib/less/mixins.less';
+@import (reference) '../../stylesheet/variables/index.less';
+
 @cascader-prefix-cls: ~'@{component-prefix}-cascader';
-@list-item-prefix-cls: ~'@{component-prefix}-list--item';
-.@{cascader-prefix-cls} {
-  &--content {
-    z-index: 100;
-  }
 
+.cascader-list-style() {
+  box-sizing: border-box;
+  min-width: 120px;
+  height: auto;
+  max-height: 520px;
+  background: @gray-0;
+
+  .border(4, @gray-2);
+  .elevation(2);
+  .scrollbar(@x: hidden, @y: overlay);
+}
+
+.@{cascader-prefix-cls} {
   &--list {
-    box-sizing: border-box;
-    min-width: 120px;
-    height: auto;
-    max-height: 520px;
-    background: @gray-0;
-    border: 1px solid #dfe4ee;
-    border-radius: 8px;
-    box-shadow: 0 8px 24px rgba(36, 46, 89, 0.1);
-    .scrollbar(@x: hidden, @y: overlay);
+    .cascader-list-style();
   }
 }

src/list-picker/style/index.less

@@ -1,11 +1,11 @@
-@import '../../stylesheet/variables/index.less';
-@import '~@gio-design/utils/lib/less/mixins.less';
+@import (reference) '../../stylesheet/variables/index.less';
+@import (reference) '../../tabs/style/index.less';
+@import (reference) '../../cascader/style/index.less';
+@import (reference) '../../list/style/index.less';
+
 @list-picker-prefix-cls: ~'@{component-prefix}-list-picker';
-@selection-prefix-cls: ~'@{component-prefix}-list--selection';
-@tab-panel-cls: ~'@{component-prefix}-tabs-tabpanel';
-@cascader-prefix-cls: ~'@{component-prefix}-cascader';
+@list-picker-selection-prefix-cls: ~'@{component-prefix}-list--selection';
 
-@list-prefix-cls: ~'@{component-prefix}-list';
 .@{list-picker-prefix-cls} {
   box-sizing: border-box;
   min-width: 120px;
@@ -33,7 +33,7 @@
   & .@{cascader-prefix-cls}--list {
     padding: 8px;
   }
-  & .@{selection-prefix-cls} {
+  & .@{list-picker-selection-prefix-cls} {
     height: auto;
     max-height: 360px;
     padding: 0;
@@ -45,13 +45,13 @@
     }
   }
 
-  & .@{tab-panel-cls} {
+  & .@{tabs-prefix-cls}-tabpanel {
     & > .@{list-prefix-cls} {
       height: auto;
       max-height: 360px;
       padding-top: 8px;
     }
-    .@{selection-prefix-cls} {
+    .@{list-picker-selection-prefix-cls} {
       height: auto;
       max-height: 360px;
       padding-top: 8px;

src/list-picker/style/index.ts

@@ -1 +1,6 @@
+import '../../popover/style';
+import '../../button/style';
+import '../../list/style';
+import '../../input/style';
+
 import './index.less';

src/list/List.tsx

@@ -7,7 +7,6 @@ import { PREFIX } from './constants';
 import Item from './Item';
 import { convertChildrenToData, convertOptions, getResultValue } from './util';
 import WithRef from '../utils/withRef';
-import './style';
 import { ListContext } from './context';
 import useValue from './hooks/useValue';
 import useCacheOptions from './hooks/useCacheOptions';

src/list/style/index.less

@@ -1,35 +1,28 @@
-@import '../../stylesheet/variables/index.less';
-@import '~@gio-design/utils/lib/less/mixins.less';
+@import (reference) '../../stylesheet/variables/index.less';
+@import (reference) '../../cascader/style/index.less';
+@import (reference) '../../popover/style/index.less';
+
 @list-prefix-cls: ~'@{component-prefix}-list';
-@cascader-prefix-cls: ~'@{component-prefix}-cascader';
-@cascader-content-prefix-cls: ~'@{cascader-prefix-cls}--cascader--content';
-@popover__popcorn-prefix-cls: ~'@{component-prefix}-popover__popcorn';
 
 .@{list-prefix-cls} {
   display: flex;
   flex-flow: column;
   margin: 0;
   padding: 8px;
   row-gap: 4px;
+
+  // 下面这个样式是不是没有用了？
   &--preview {
     &--overlay {
       &[data-popper-placement^='right'] {
         margin-left: 12px !important;
       }
     }
   }
-  .@{cascader-prefix-cls} {
-    box-sizing: border-box;
-    min-width: 120px;
-    height: auto;
-    max-height: 520px;
-    background: @gray-0;
-    border: 1px solid #dfe4ee;
-    border-radius: 8px;
-    box-shadow: 0 8px 24px rgba(36, 46, 89, 0.1);
-    .scrollbar(@x: hidden, @y: overlay);
+  &.@{cascader-prefix-cls} {
+    .cascader-list-style();
     &--item {
-      .@{popover__popcorn-prefix-cls} {
+      .@{popover-prefix-cls}__popcorn {
         display: inherit;
       }
     }
@@ -44,10 +37,7 @@
       margin-bottom: 4px;
       padding-left: 12px;
       color: @gray-4;
-      font-weight: 500;
-      font-size: 12px;
-      font-style: normal;
-      line-height: 20px;
+      .text-h5();
     }
     &--item {
       & > .@{list-prefix-cls} {
@@ -79,10 +69,7 @@
     justify-content: space-between;
     padding: 7px 12px;
     color: @gray-5;
-    font-weight: normal;
-    font-size: 14px;
-    font-style: normal;
-    line-height: 22px;
+    .text-body1();
     vertical-align: middle;
     border-radius: 4px;
     cursor: pointer;
@@ -152,9 +139,6 @@
     &--text {
       flex-grow: 1;
     }
-    > span > .gio-text--black {
-      color: inherit;
-    }
 
     &--checkbox {
       font-size: 0;

src/list/style/index.ts

@@ -1 +1,6 @@
+import '../../tooltip/style';
+import '../../popover/style';
+import '../../checkbox/style';
+import '../../page/style';
+
 import './index.less';

src/select/Select.tsx

@@ -7,7 +7,6 @@ import Popover from '../popover';
 import Trigger from '../list-picker/Trigger';
 import List, { OptionProps } from '../list';
 import useControlledState from '../utils/hooks/useControlledState';
-import './style/index';
 import { ListContext } from '../list/context';
 import { convertChildrenToData, convertOptions } from '../list/util';
 import useCacheOptions from '../list/hooks/useCacheOptions';

src/select/style/index.less

@@ -1,11 +1,8 @@
-@import '../../stylesheet/variables/index.less';
-@import '~@gio-design/utils/lib/less/mixins.less';
+@import (reference) '../../stylesheet/variables/index.less';
+
 @select-prefix-cls: ~'@{component-prefix}-select';
 
 .@{select-prefix-cls} {
-  &--content {
-    z-index: 100;
-  }
   &--list {
     box-sizing: border-box;
     min-width: 120px;
@@ -14,8 +11,7 @@
     padding: 8px;
     .scrollbar();
     background: @gray-0;
-    border: 1px solid #dfe4ee;
-    border-radius: 8px;
-    box-shadow: 0 8px 24px rgba(36, 46, 89, 0.1);
+    .border(4, @gray-2);
+    .elevation(2);
   }
 }

src/select/style/index.ts

@@ -1,4 +1,6 @@
+import '../../popover/style';
+import '../../list/style';
+import '../../list-picker/style';
+import '../../input/style';
+
 import './index.less';
-import '../../popover/style'
-import '../../list/style'
-import '../../input/style'