@sdata/web-vue 4.7.1 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (219) hide show
  1. package/dist/sd.css +4004 -3955
  2. package/dist/sd.min.css +13 -13
  3. package/es/_components/input-label/style/index.css +47 -47
  4. package/es/_components/select-view/style/index.css +256 -256
  5. package/es/alert/style/index.css +48 -48
  6. package/es/alert/style/token.scss +257 -0
  7. package/es/anchor/style/index.css +18 -18
  8. package/es/anchor/style/token.scss +74 -0
  9. package/es/auto-complete/style/index.css +18 -18
  10. package/es/auto-complete/style/token.scss +94 -0
  11. package/es/avatar/style/index.css +31 -31
  12. package/es/avatar/style/token.scss +118 -0
  13. package/es/back-top/style/index.css +11 -11
  14. package/es/back-top/style/token.scss +60 -0
  15. package/es/badge/style/index.css +35 -35
  16. package/es/badge/style/token.scss +148 -0
  17. package/es/basic-crud-table/style/index.css +4 -4
  18. package/es/basic-crud-table/style/token.scss +20 -0
  19. package/es/bloom-menu/style/index.css +33 -34
  20. package/es/bloom-menu/style/index.scss +5 -5
  21. package/es/bloom-menu/style/token.scss +99 -0
  22. package/es/border-beam/style/token.scss +28 -0
  23. package/es/breadcrumb/style/index.css +17 -17
  24. package/es/breadcrumb/style/token.scss +97 -0
  25. package/es/button/style/index.css +379 -379
  26. package/es/button/style/index.scss +3 -3
  27. package/es/button/style/token.scss +1604 -0
  28. package/es/card/style/index.css +36 -36
  29. package/es/card/style/token.scss +162 -0
  30. package/es/carousel/style/index.css +41 -41
  31. package/es/carousel/style/token.scss +101 -0
  32. package/es/cascader/style/index.css +58 -58
  33. package/es/cascader/style/token.scss +89 -0
  34. package/es/checkbox/style/index.css +28 -28
  35. package/es/checkbox/style/token.scss +134 -0
  36. package/es/collapse/style/index.css +24 -24
  37. package/es/collapse/style/token.scss +136 -0
  38. package/es/color-picker/style/index.css +50 -50
  39. package/es/color-picker/style/token.scss +200 -0
  40. package/es/comment/style/index.css +15 -15
  41. package/es/comment/style/token.scss +83 -0
  42. package/es/config-provider/algorithms.d.ts +11 -0
  43. package/es/config-provider/algorithms.js +53 -0
  44. package/es/config-provider/global-theme.js +7 -4
  45. package/es/config-provider/theme-config.d.ts +11 -0
  46. package/es/config-provider/theme-config.js +114 -0
  47. package/es/config-provider/theme-provider.vue_vue_type_script_setup_true_lang.js +46 -11
  48. package/es/config-provider/theme.d.ts +4 -1
  49. package/es/config-provider/theme.js +6 -5
  50. package/es/config-provider/token-key.d.ts +1 -0
  51. package/es/config-provider/token-key.js +6 -0
  52. package/es/copy/style/index.css +1 -1
  53. package/es/copy/style/token.scss +9 -0
  54. package/es/cropper/style/index.css +7 -7
  55. package/es/cropper/style/token.scss +24 -0
  56. package/es/date-picker/style/index.css +73 -73
  57. package/es/date-picker/style/token.scss +229 -0
  58. package/es/descriptions/style/index.css +45 -45
  59. package/es/descriptions/style/token.scss +191 -0
  60. package/es/divider/style/index.css +11 -11
  61. package/es/divider/style/token.scss +60 -0
  62. package/es/drawer/style/index.css +13 -13
  63. package/es/drawer/style/token.scss +68 -0
  64. package/es/dropdown/style/index.css +24 -23
  65. package/es/dropdown/style/index.scss +4 -2
  66. package/es/dropdown/style/token.scss +123 -0
  67. package/es/ellipsis/ellipsis.vue_vue_type_script_setup_true_lang.js +3 -3
  68. package/es/ellipsis/interface.d.ts +1 -0
  69. package/es/ellipsis/style/index.css +2 -2
  70. package/es/ellipsis/style/token.scss +5 -0
  71. package/es/empty/style/index.css +7 -7
  72. package/es/empty/style/token.scss +35 -0
  73. package/es/file-previewer/style/index.css +44 -44
  74. package/es/file-previewer/style/token.scss +198 -0
  75. package/es/form/style/index.css +113 -113
  76. package/es/form/style/token.scss +340 -0
  77. package/es/image/style/index.css +83 -83
  78. package/es/image/style/token.scss +451 -0
  79. package/es/index.css +4004 -3955
  80. package/es/index.d.ts +3 -0
  81. package/es/index.js +4 -1
  82. package/es/input/style/index.css +104 -104
  83. package/es/input/style/input.scss +2 -8
  84. package/es/input/style/size.scss +4 -4
  85. package/es/input/style/token.scss +327 -0
  86. package/es/input-mask/style/index.css +1 -1
  87. package/es/input-mask/style/token.scss +8 -0
  88. package/es/input-number/style/index.css +19 -19
  89. package/es/input-number/style/token.scss +82 -0
  90. package/es/input-tag/style/index.css +209 -209
  91. package/es/input-tag/style/token.scss +226 -0
  92. package/es/json-form/style/index.css +2 -2
  93. package/es/json-form/style/token.scss +21 -0
  94. package/es/kv-list/style/index.css +13 -13
  95. package/es/kv-list/style/token.scss +29 -0
  96. package/es/layout/style/index.css +38 -38
  97. package/es/layout/style/token.scss +100 -0
  98. package/es/link/style/index.css +28 -28
  99. package/es/link/style/token.scss +117 -0
  100. package/es/list/style/index.css +27 -27
  101. package/es/list/style/token.scss +178 -0
  102. package/es/mention/style/token.scss +22 -0
  103. package/es/menu/style/index.css +153 -120
  104. package/es/menu/style/index.scss +12 -4
  105. package/es/menu/style/token.scss +390 -0
  106. package/es/message/style/index.css +33 -33
  107. package/es/message/style/token.scss +218 -0
  108. package/es/modal/style/index.css +21 -21
  109. package/es/modal/style/token.scss +115 -0
  110. package/es/model-selector/style/index.css +1 -1
  111. package/es/notification/style/index.css +44 -44
  112. package/es/notification/style/token.scss +241 -0
  113. package/es/number-flow/style/index.css +5 -5
  114. package/es/number-flow/style/token.scss +19 -0
  115. package/es/page-header/style/index.css +25 -25
  116. package/es/page-header/style/token.scss +139 -0
  117. package/es/pagination/style/index.css +85 -85
  118. package/es/pagination/style/token.scss +303 -0
  119. package/es/panel-group/style/index.css +7 -7
  120. package/es/panel-group/style/token.scss +28 -0
  121. package/es/popconfirm/style/index.css +18 -18
  122. package/es/popconfirm/style/token.scss +83 -0
  123. package/es/popover/style/index.css +12 -12
  124. package/es/popover/style/token.scss +58 -0
  125. package/es/progress/style/index.css +55 -55
  126. package/es/progress/style/token.scss +253 -0
  127. package/es/qr-code/style/index.css +18 -21
  128. package/es/qr-code/style/index.scss +4 -6
  129. package/es/qr-code/style/token.scss +59 -0
  130. package/es/radio/style/index.css +45 -44
  131. package/es/radio/style/index.scss +1 -0
  132. package/es/radio/style/token.scss +185 -0
  133. package/es/rate/style/index.css +8 -8
  134. package/es/rate/style/token.scss +19 -0
  135. package/es/regex-vis/style/index.css +51 -51
  136. package/es/regex-vis/style/token.scss +170 -0
  137. package/es/result/style/index.css +26 -26
  138. package/es/result/style/token.scss +139 -0
  139. package/es/rich-text-editor/style/index.css +31 -31
  140. package/es/rich-text-editor/style/token.scss +120 -0
  141. package/es/scrollbar/style/index.css +14 -14
  142. package/es/scrollbar/style/token.scss +33 -0
  143. package/es/secret/style/index.css +6 -6
  144. package/es/secret/style/token.scss +30 -0
  145. package/es/select/style/index.css +27 -27
  146. package/es/select/style/token.scss +151 -0
  147. package/es/selectable-card/style/index.css +53 -51
  148. package/es/selectable-card/style/index.scss +6 -2
  149. package/es/selectable-card/style/token.scss +60 -0
  150. package/es/sender/style/index.css +54 -54
  151. package/es/sender/style/token.scss +155 -0
  152. package/es/skeleton/style/index.css +12 -12
  153. package/es/skeleton/style/token.scss +60 -0
  154. package/es/slider/style/index.css +34 -34
  155. package/es/slider/style/token.scss +144 -0
  156. package/es/spin/style/index.css +11 -11
  157. package/es/spin/style/token.scss +60 -0
  158. package/es/split/style/index.css +2 -2
  159. package/es/split/style/token.scss +18 -0
  160. package/es/statistic/style/index.css +13 -13
  161. package/es/statistic/style/token.scss +73 -0
  162. package/es/steps/style/index.css +98 -98
  163. package/es/steps/style/token.scss +464 -0
  164. package/es/style/color/css-variables.scss +382 -381
  165. package/es/style/theme/css-variables.scss +329 -135
  166. package/es/style/theme/global.scss +5 -5
  167. package/es/style/theme/index.scss +1 -1
  168. package/es/style/theme/runtime.scss +29 -0
  169. package/es/switch/style/index.css +37 -37
  170. package/es/switch/style/token.scss +135 -0
  171. package/es/table/style/index.css +127 -127
  172. package/es/table/style/token.scss +425 -0
  173. package/es/tabs/style/index.css +196 -190
  174. package/es/tabs/style/index.scss +27 -17
  175. package/es/tabs/style/token.scss +534 -0
  176. package/es/tag/index.d.ts +13 -0
  177. package/es/tag/interface.d.ts +1 -0
  178. package/es/tag/style/index.css +159 -159
  179. package/es/tag/style/token.scss +513 -0
  180. package/es/tag/tag.vue.d.ts +13 -3
  181. package/es/tag/tag.vue_vue_type_script_setup_true_lang.js +35 -8
  182. package/es/tag-group/style/index.css +3 -3
  183. package/es/tag-group/style/token.scss +9 -0
  184. package/es/textarea/style/index.css +40 -40
  185. package/es/time-picker/style/index.css +12 -12
  186. package/es/time-picker/style/token.scss +50 -0
  187. package/es/timeline/style/index.css +22 -22
  188. package/es/timeline/style/token.scss +75 -0
  189. package/es/toolbar/style/index.css +6 -6
  190. package/es/toolbar/style/token.scss +45 -0
  191. package/es/tooltip/style/index.css +8 -8
  192. package/es/tooltip/style/token.scss +46 -0
  193. package/es/tour/style/index.css +28 -28
  194. package/es/tour/style/token.scss +65 -0
  195. package/es/transfer/style/index.css +46 -45
  196. package/es/transfer/style/index.scss +4 -1
  197. package/es/transfer/style/token.scss +199 -0
  198. package/es/tree/style/index.css +43 -36
  199. package/es/tree/style/index.scss +10 -0
  200. package/es/tree/style/token.scss +163 -0
  201. package/es/tree-select/style/index.css +9 -9
  202. package/es/tree-select/style/token.scss +21 -0
  203. package/es/trigger/style/index.css +7 -7
  204. package/es/trigger/style/token.scss +19 -0
  205. package/es/typography/style/index.css +40 -40
  206. package/es/typography/style/token.scss +220 -0
  207. package/es/upload/index.d.ts +3 -0
  208. package/es/upload/style/index.css +95 -95
  209. package/es/upload/style/token.scss +470 -0
  210. package/es/upload/upload.vue.d.ts +2 -0
  211. package/es/upload/upload.vue_vue_type_script_setup_true_lang.js +109 -16
  212. package/json/vetur-attributes.json +7 -0
  213. package/json/vetur-tags.json +4 -1
  214. package/json/web-types.json +18 -2
  215. package/package.json +7 -2
  216. package/es/style/color/palette-dark.d.ts +0 -4
  217. package/es/style/color/palette-dark.js +0 -10
  218. package/es/style/color/palette.d.ts +0 -4
  219. package/es/style/color/palette.js +0 -10
package/es/upload/style/index.css CHANGED
@@ -24,10 +24,10 @@
24
24
  width: 100%;
25
25
  }
26
26
  .sd-upload-tip {
27
- margin-top: 4px;
27
+ margin-top: var(--component-upload-upload-tip-margin-top, var(--component-upload-tip-margin-top, var(--spacing-2, 4px)));
28
28
  overflow: hidden;
29
- color: var(--sd-color-text-3);
30
- font-size: 12px;
29
+ color: var(--component-upload-upload-tip-color-text, var(--component-upload-tip-color-text, var(--sd-color-text-3)));
30
+ font-size: var(--component-upload-upload-tip-font-size, var(--component-upload-tip-font-size, var(--font-size-body-1, 12px)));
31
31
  line-height: 1.5;
32
32
  white-space: nowrap;
33
33
  text-overflow: ellipsis;
@@ -36,63 +36,63 @@
36
36
  display: flex;
37
37
  flex-direction: column;
38
38
  justify-content: center;
39
- min-width: 80px;
40
- height: 80px;
39
+ min-width: var(--component-upload-upload-picture-item-width, var(--component-upload-picture-item-width, var(--size-20, 80px)));
40
+ height: var(--component-upload-upload-picture-item-width, var(--component-upload-picture-item-width, var(--size-20, 80px)));
41
41
  margin-bottom: 0;
42
- color: var(--sd-color-text-2);
42
+ color: var(--component-upload-upload-picture-color-text, var(--component-upload-picture-color-text, var(--sd-color-text-2)));
43
43
  text-align: center;
44
- background: var(--sd-color-fill-2);
45
- border: 1px dashed var(--sd-color-neutral-3);
46
- border-radius: var(--sd-border-radius-small);
44
+ background: var(--component-upload-upload-picture-color-bg, var(--component-upload-picture-color-bg, var(--sd-color-fill-2)));
45
+ border: var(--component-upload-upload-picture-border-width, var(--component-upload-picture-border-width, var(--border-1, 1px))) var(--component-upload-upload-picture-border-style, var(--component-upload-picture-border-style, var(--border-dashed, dashed))) var(--component-upload-upload-picture-color-border, var(--component-upload-picture-color-border, var(--sd-color-neutral-3)));
46
+ border-radius: var(--component-upload-upload-picture-border-radius, var(--component-upload-picture-border-radius, var(--sd-border-radius-small)));
47
47
  transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
48
48
  }
49
49
  .sd-upload-picture-card:hover {
50
- color: var(--sd-color-text-2);
51
- background-color: var(--sd-color-fill-3);
52
- border-color: var(--sd-color-neutral-4);
50
+ color: var(--component-upload-upload-picture-color-text-hover, var(--component-upload-picture-color-text-hover, var(--sd-color-text-2)));
51
+ background-color: var(--component-upload-upload-picture-color-bg-hover, var(--component-upload-picture-color-bg-hover, var(--sd-color-fill-3)));
52
+ border-color: var(--component-upload-upload-picture-color-border-hover, var(--component-upload-picture-color-border-hover, var(--sd-color-neutral-4)));
53
53
  }
54
54
  .sd-upload-drag {
55
55
  width: 100%;
56
- padding: 50px 0;
57
- color: var(--sd-color-text-1);
56
+ padding: var(--component-upload-upload-drag-padding-vertical, var(--component-upload-drag-padding-vertical, 50px)) 0;
57
+ color: var(--component-upload-upload-drag-color-text, var(--component-upload-drag-color-text, var(--sd-color-text-1)));
58
58
  text-align: center;
59
- background-color: var(--sd-color-fill-1);
60
- border: 1px dashed var(--sd-color-neutral-3);
61
- border-radius: var(--sd-border-radius-small);
59
+ background-color: var(--component-upload-upload-drag-color-bg, var(--component-upload-drag-color-bg, var(--sd-color-fill-1)));
60
+ border: var(--component-upload-upload-drag-border-width, var(--component-upload-drag-border-width, var(--border-1, 1px))) var(--component-upload-upload-drag-border-style, var(--component-upload-drag-border-style, var(--border-dashed, dashed))) var(--component-upload-upload-drag-color-border, var(--component-upload-drag-color-border, var(--sd-color-neutral-3)));
61
+ border-radius: var(--component-upload-upload-drag-border-radius, var(--component-upload-drag-border-radius, var(--sd-border-radius-small)));
62
62
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
63
63
  }
64
64
  .sd-upload-drag .sd-icon-plus {
65
- margin-bottom: 24px;
66
- color: var(--sd-color-text-2);
67
- font-size: 14px;
65
+ margin-bottom: var(--component-upload-upload-drag-margin-icon-bottom, var(--component-upload-drag-margin-icon-bottom, 24px));
66
+ color: var(--component-upload-upload-drag-color-icon, var(--component-upload-drag-color-icon, var(--sd-color-text-2)));
67
+ font-size: var(--component-upload-upload-drag-size-icon, var(--component-upload-drag-size-icon, 14px));
68
68
  }
69
69
  .sd-upload-drag:hover {
70
- background-color: var(--sd-color-fill-3);
71
- border-color: var(--sd-color-neutral-4);
70
+ background-color: var(--component-upload-upload-drag-color-bg-hover, var(--component-upload-drag-color-bg-hover, var(--sd-color-fill-3)));
71
+ border-color: var(--component-upload-upload-drag-color-border-hover, var(--component-upload-drag-color-border-hover, var(--sd-color-neutral-4)));
72
72
  }
73
73
  .sd-upload-drag:hover .sd-upload-drag-text {
74
- color: var(--sd-color-text-1);
74
+ color: var(--component-upload-upload-drag-color-text-hover, var(--component-upload-drag-color-text-hover, var(--sd-color-text-1)));
75
75
  }
76
76
  .sd-upload-drag:hover .sd-icon-plus {
77
- color: var(--sd-color-text-2);
77
+ color: var(--component-upload-upload-drag-color-icon-hover, var(--component-upload-drag-color-icon-hover, var(--sd-color-text-2)));
78
78
  }
79
79
  .sd-upload-drag-active {
80
- color: var(--sd-color-text-1);
81
- background-color: var(--sd-color-primary-light-1);
82
- border-color: rgb(var(--sd-primary-6));
80
+ color: var(--component-upload-upload-drag-color-text-active, var(--component-upload-drag-color-text-active, var(--sd-color-text-1)));
81
+ background-color: var(--component-upload-upload-drag-color-bg-active, var(--component-upload-drag-color-bg-active, var(--sd-color-primary-light-1)));
82
+ border-color: var(--component-upload-upload-drag-color-border-active, var(--component-upload-drag-color-border-active, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
83
83
  }
84
84
  .sd-upload-drag-active .sd-upload-drag-text {
85
- color: var(--sd-color-text-1);
85
+ color: var(--component-upload-upload-drag-color-text-active, var(--component-upload-drag-color-text-active, var(--sd-color-text-1)));
86
86
  }
87
87
  .sd-upload-drag-active .sd-icon-plus {
88
- color: rgb(var(--sd-primary-6));
88
+ color: var(--component-upload-upload-drag-color-icon-active, var(--component-upload-drag-color-icon-active, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
89
89
  }
90
90
  .sd-upload-drag .sd-upload-tip {
91
- margin-top: 0;
91
+ margin-top: var(--component-upload-upload-drag-tip-margin-top, var(--component-upload-drag-tip-margin-top, 0));
92
92
  }
93
93
  .sd-upload-drag-text {
94
- color: var(--sd-color-text-1);
95
- font-size: 14px;
94
+ color: var(--component-upload-upload-drag-color-text, var(--component-upload-drag-color-text, var(--sd-color-text-1)));
95
+ font-size: var(--component-upload-upload-drag-font-size, var(--component-upload-drag-font-size, var(--font-size-body-3, 14px)));
96
96
  line-height: 1.5;
97
97
  }
98
98
  .sd-upload-wrapper {
@@ -110,59 +110,59 @@
110
110
  }
111
111
  .sd-upload-disabled .sd-upload-picture-card,
112
112
  .sd-upload-disabled .sd-upload-picture-card:hover {
113
- color: var(--sd-color-text-4);
114
- background-color: var(--sd-color-fill-1);
115
- border-color: var(--sd-color-neutral-4);
113
+ color: var(--component-upload-upload-picture-color-text-disabled, var(--component-upload-picture-color-text-disabled, var(--sd-color-text-4)));
114
+ background-color: var(--component-upload-upload-picture-color-bg-disabled, var(--component-upload-picture-color-bg-disabled, var(--sd-color-fill-1)));
115
+ border-color: var(--component-upload-upload-picture-color-border-disabled, var(--component-upload-picture-color-border-disabled, var(--sd-color-neutral-4)));
116
116
  cursor: not-allowed;
117
117
  }
118
118
  .sd-upload-disabled .sd-upload-drag,
119
119
  .sd-upload-disabled .sd-upload-drag:hover {
120
- background-color: var(--sd-color-fill-1);
121
- border-color: var(--sd-color-text-4);
120
+ background-color: var(--component-upload-upload-drag-color-bg-disabled, var(--component-upload-drag-color-bg-disabled, var(--component-upload-upload-drag-color-bg, var(--component-upload-drag-color-bg, var(--sd-color-fill-1)))));
121
+ border-color: var(--component-upload-upload-drag-color-border-disabled, var(--component-upload-drag-color-border-disabled, var(--sd-color-text-4)));
122
122
  cursor: not-allowed;
123
123
  }
124
124
  .sd-upload-disabled .sd-upload-drag .sd-icon-plus,
125
125
  .sd-upload-disabled .sd-upload-drag .sd-upload-drag-text,
126
126
  .sd-upload-disabled .sd-upload-drag:hover .sd-icon-plus,
127
127
  .sd-upload-disabled .sd-upload-drag:hover .sd-upload-drag-text {
128
- color: var(--sd-color-text-4);
128
+ color: var(--component-upload-upload-drag-color-text-disabled, var(--component-upload-drag-color-text-disabled, var(--sd-color-text-4)));
129
129
  }
130
130
  .sd-upload-disabled .sd-upload-tip {
131
- color: var(--sd-color-text-4);
131
+ color: var(--component-upload-upload-drag-color-text-disabled, var(--component-upload-drag-color-text-disabled, var(--sd-color-text-4)));
132
132
  }
133
133
 
134
134
  .sd-upload-icon {
135
135
  cursor: pointer;
136
136
  }
137
137
  .sd-upload-icon-error {
138
- margin-left: 4px;
139
- color: rgb(var(--sd-danger-6));
138
+ margin-left: var(--component-upload-upload-text-item-margin-error-icon-left, var(--component-upload-text-item-margin-error-icon-left, var(--spacing-2, 4px)));
139
+ color: var(--component-upload-upload-text-item-color-error-icon, var(--component-upload-text-item-color-error-icon, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
140
140
  }
141
141
  .sd-upload-icon-success {
142
- color: rgb(var(--sd-success-6));
143
- font-size: 14px;
144
- line-height: 14px;
142
+ color: var(--component-upload-upload-text-item-color-success-icon, var(--component-upload-text-item-color-success-icon, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
143
+ font-size: var(--component-upload-upload-text-item-size-success-icon, var(--component-upload-text-item-size-success-icon, 14px));
144
+ line-height: var(--component-upload-upload-text-item-size-success-icon, var(--component-upload-text-item-size-success-icon, 14px));
145
145
  }
146
146
  .sd-upload-icon-remove {
147
147
  position: relative;
148
- font-size: 14px;
148
+ font-size: var(--component-upload-upload-picture-item-size-operation-icon, var(--component-upload-picture-item-size-operation-icon, 14px));
149
149
  }
150
150
  .sd-upload-icon-start, .sd-upload-icon-cancel {
151
151
  position: absolute;
152
152
  top: 50%;
153
153
  left: 50%;
154
- color: var(--sd-color-white);
155
- font-size: 12px;
154
+ color: var(--component-upload-upload-text-item-color-status-icon, var(--component-upload-text-item-color-status-icon, var(--sd-color-white)));
155
+ font-size: var(--component-upload-upload-text-item-size-status-icon, var(--component-upload-text-item-size-status-icon, var(--size-3, 12px)));
156
156
  transform: translateX(-50%) translateY(-50%);
157
157
  }
158
158
  .sd-upload-icon-upload {
159
- color: rgb(var(--sd-primary-6));
160
- font-size: 14px;
159
+ color: var(--component-upload-upload-text-item-color-reupload-icon, var(--component-upload-text-item-color-reupload-icon, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
160
+ font-size: var(--component-upload-upload-text-item-size-reupload-icon, var(--component-upload-text-item-size-reupload-icon, 14px));
161
161
  cursor: pointer;
162
162
  transition: color 0.2s ease;
163
163
  }
164
164
  .sd-upload-icon-upload:active, .sd-upload-icon-upload:hover {
165
- color: rgb(var(--sd-primary-7));
165
+ color: var(--component-upload-upload-text-item-color-reupload-icon-hover, var(--component-upload-text-item-color-reupload-icon-hover, var(--color-primary-7, var(--sd-color-primary-7, rgb(var(--sd-primary-7))))));
166
166
  }
167
167
 
168
168
  .sd-upload-list {
@@ -174,20 +174,20 @@
174
174
  width: 100%;
175
175
  }
176
176
  .sd-upload-list.sd-upload-list-type-text .sd-upload-list-item:first-of-type, .sd-upload-list.sd-upload-list-type-picture .sd-upload-list-item:first-of-type {
177
- margin-top: 24px;
177
+ margin-top: var(--component-upload-upload-list-margin-top, var(--component-upload-list-margin-top, var(--spacing-9, 24px)));
178
178
  }
179
179
  .sd-upload-list {
180
180
  /*** listtype is text ****/
181
181
  }
182
182
  .sd-upload-list-item-done .sd-upload-list-item-file-icon {
183
- color: rgb(var(--sd-primary-6));
183
+ color: var(--component-upload-upload-text-item-color-file-icon-success, var(--component-upload-text-item-color-file-icon-success, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
184
184
  }
185
185
  .sd-upload-list-item {
186
186
  position: relative;
187
187
  display: flex;
188
188
  align-items: center;
189
189
  box-sizing: border-box;
190
- margin-top: 12px;
190
+ margin-top: var(--component-upload-upload-text-item-margin-top, var(--component-upload-text-item-margin-top, var(--spacing-6, 12px)));
191
191
  }
192
192
  .sd-upload-list-item-content {
193
193
  display: flex;
@@ -196,26 +196,26 @@
196
196
  align-items: center;
197
197
  box-sizing: border-box;
198
198
  width: 100%;
199
- padding: 8px 0;
200
- padding-right: 10px;
201
- padding-left: 12px;
199
+ padding: var(--component-upload-upload-text-item-padding-vertical, var(--component-upload-text-item-padding-vertical, var(--spacing-4, 8px))) 0;
200
+ padding-right: var(--component-upload-upload-text-item-padding-right, var(--component-upload-text-item-padding-right, var(--spacing-5, 10px)));
201
+ padding-left: var(--component-upload-upload-text-item-padding-left, var(--component-upload-text-item-padding-left, var(--spacing-6, 12px)));
202
202
  overflow: hidden;
203
- font-size: 14px;
204
- background-color: var(--sd-color-fill-1);
205
- border-radius: var(--sd-border-radius-small);
203
+ font-size: var(--component-upload-upload-text-item-font-size, var(--component-upload-text-item-font-size, var(--font-size-body-3, 14px)));
204
+ background-color: var(--component-upload-upload-text-item-color-bg, var(--component-upload-text-item-color-bg, var(--sd-color-fill-1)));
205
+ border-radius: var(--component-upload-upload-text-item-border-radius, var(--component-upload-text-item-border-radius, var(--sd-border-radius-small)));
206
206
  transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
207
207
  }
208
208
  .sd-upload-list-item-file-icon {
209
- margin-right: 12px;
210
- color: rgb(var(--sd-primary-6));
211
- font-size: 16px;
212
- line-height: 16px;
209
+ margin-right: var(--component-upload-upload-text-item-margin-file-icon-right, var(--component-upload-text-item-margin-file-icon-right, var(--spacing-6, 12px)));
210
+ color: var(--component-upload-upload-text-item-color-file-icon, var(--component-upload-text-item-color-file-icon, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
211
+ font-size: var(--component-upload-upload-text-item-size-file-icon, var(--component-upload-text-item-size-file-icon, var(--size-4, 16px)));
212
+ line-height: var(--component-upload-upload-text-item-size-file-icon, var(--component-upload-text-item-size-file-icon, var(--size-4, 16px)));
213
213
  }
214
214
  .sd-upload-list-item-thumbnail {
215
215
  flex-shrink: 0;
216
- width: 40px;
217
- height: 40px;
218
- margin-right: 12px;
216
+ width: var(--component-upload-upload-text-item-thumbnail-width, var(--component-upload-text-item-thumbnail-width, var(--size-10, 40px)));
217
+ height: var(--component-upload-upload-text-item-thumbnail-width, var(--component-upload-text-item-thumbnail-width, var(--size-10, 40px)));
218
+ margin-right: var(--component-upload-upload-text-item-margin-thumbnail-right, var(--component-upload-text-item-margin-thumbnail-right, var(--spacing-6, 12px)));
219
219
  }
220
220
  .sd-upload-list-item-thumbnail img {
221
221
  width: 100%;
@@ -225,17 +225,17 @@
225
225
  display: flex;
226
226
  flex: 1;
227
227
  align-items: center;
228
- margin-right: 10px;
228
+ margin-right: var(--component-upload-upload-text-item-margin-status-left, var(--component-upload-text-item-margin-status-left, var(--spacing-5, 10px)));
229
229
  overflow: hidden;
230
- color: var(--sd-color-text-1);
231
- font-size: 14px;
230
+ color: var(--component-upload-upload-text-item-color-text, var(--component-upload-text-item-color-text, var(--sd-color-text-1)));
231
+ font-size: var(--component-upload-upload-text-item-font-size, var(--component-upload-text-item-font-size, var(--font-size-body-3, 14px)));
232
232
  line-height: 1.4286;
233
233
  white-space: nowrap;
234
234
  text-overflow: ellipsis;
235
235
  }
236
236
  .sd-upload-list-item-name-link {
237
237
  overflow: hidden;
238
- color: rgb(var(--sd-link-6));
238
+ color: var(--component-upload-upload-text-item-color-link, var(--component-upload-text-item-color-link, var(--color-link-6, var(--sd-color-link-6, rgb(var(--sd-link-6))))));
239
239
  text-decoration: none;
240
240
  text-overflow: ellipsis;
241
241
  cursor: pointer;
@@ -248,18 +248,18 @@
248
248
  .sd-upload-list-item .sd-upload-progress {
249
249
  position: relative;
250
250
  margin-left: auto;
251
- line-height: 12px;
251
+ line-height: var(--component-upload-upload-text-item-size-status-icon, var(--component-upload-text-item-size-status-icon, var(--size-3, 12px)));
252
252
  }
253
253
  .sd-upload-list-item .sd-upload-progress:hover .sd-progress-circle-bg {
254
- stroke: rgb(var(--sd-gray-10), 0.2);
254
+ stroke: var(--component-upload-upload-text-item-color-progress-bg-hover, var(--component-upload-text-item-color-progress-bg-hover, rgb(var(--sd-gray-10), 0.2)));
255
255
  }
256
256
  .sd-upload-list-item .sd-upload-progress:hover .sd-progress-circle-bar {
257
- stroke: rgb(var(--sd-primary-7));
257
+ stroke: var(--component-upload-upload-text-item-color-progress-bg-hover-active, var(--component-upload-text-item-color-progress-bg-hover-active, var(--color-primary-7, var(--sd-color-primary-7, rgb(var(--sd-primary-7))))));
258
258
  }
259
259
  .sd-upload-list-item-operation {
260
- margin-left: 12px;
261
- color: var(--sd-color-text-2);
262
- font-size: 12px;
260
+ margin-left: var(--component-upload-upload-text-item-margin-remove-icon-left, var(--component-upload-text-item-margin-remove-icon-left, var(--spacing-6, 12px)));
261
+ color: var(--component-upload-upload-text-item-color-remove-icon, var(--component-upload-text-item-color-remove-icon, var(--sd-color-text-2)));
262
+ font-size: var(--component-upload-upload-text-item-size-operation-icon, var(--component-upload-text-item-size-operation-icon, var(--size-3, 12px)));
263
263
  }
264
264
  .sd-upload-list-item-operation .sd-upload-icon-remove {
265
265
  font-size: inherit;
@@ -269,7 +269,7 @@
269
269
  }
270
270
  .sd-upload-list-type-text .sd-upload-list-item-error .sd-upload-list-item-name-link,
271
271
  .sd-upload-list-type-text .sd-upload-list-item-error .sd-upload-list-item-name {
272
- color: rgb(var(--sd-danger-6));
272
+ color: var(--component-upload-upload-text-item-color-text-error, var(--component-upload-text-item-color-text-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
273
273
  }
274
274
  .sd-upload-list {
275
275
  /*** end ****/
@@ -287,8 +287,8 @@
287
287
  .sd-upload-list-picture {
288
288
  display: inline-block;
289
289
  margin-top: 0;
290
- margin-right: 8px;
291
- margin-bottom: 8px;
290
+ margin-right: var(--component-upload-upload-picture-item-margin-right, var(--component-upload-picture-item-margin-right, var(--spacing-4, 8px)));
291
+ margin-bottom: var(--component-upload-upload-picture-item-margin-bottom, var(--component-upload-picture-item-margin-bottom, var(--spacing-4, 8px)));
292
292
  padding-right: 0;
293
293
  overflow: hidden;
294
294
  vertical-align: top;
@@ -300,13 +300,13 @@
300
300
  .sd-upload-list-picture {
301
301
  position: relative;
302
302
  box-sizing: border-box;
303
- width: 80px;
304
- height: 80px;
303
+ width: var(--component-upload-upload-picture-item-size-width, var(--component-upload-picture-item-size-width, var(--size-20, 80px)));
304
+ height: var(--component-upload-upload-picture-item-size-width, var(--component-upload-picture-item-size-width, var(--size-20, 80px)));
305
305
  overflow: hidden;
306
- line-height: 80px;
306
+ line-height: var(--component-upload-upload-picture-item-size-width, var(--component-upload-picture-item-size-width, var(--size-20, 80px)));
307
307
  text-align: center;
308
308
  vertical-align: top;
309
- border-radius: var(--sd-border-radius-small);
309
+ border-radius: var(--component-upload-upload-picture-item-border-radius, var(--component-upload-picture-item-border-radius, var(--sd-border-radius-small)));
310
310
  }
311
311
  .sd-upload-list-picture img {
312
312
  width: 100%;
@@ -315,11 +315,11 @@
315
315
  .sd-upload-list-picture-mask {
316
316
  position: absolute;
317
317
  inset: 0;
318
- color: var(--sd-color-white);
319
- font-size: 16px;
320
- line-height: 80px;
318
+ color: var(--component-upload-upload-picture-item-color-operation-icon, var(--component-upload-picture-item-color-operation-icon, var(--sd-color-white)));
319
+ font-size: var(--component-upload-upload-picture-item-size-mask-icon, var(--component-upload-picture-item-size-mask-icon, var(--size-4, 16px)));
320
+ line-height: var(--component-upload-upload-picture-item-size-width, var(--component-upload-picture-item-size-width, var(--size-20, 80px)));
321
321
  text-align: center;
322
- background: rgba(0, 0, 0, 0.5);
322
+ background: var(--component-upload-upload-picture-item-color-operation-bg, var(--component-upload-picture-item-color-operation-bg, rgba(0, 0, 0, 0.5)));
323
323
  cursor: pointer;
324
324
  opacity: 0;
325
325
  transition: opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
@@ -327,16 +327,16 @@
327
327
  .sd-upload-list-picture-operation {
328
328
  display: flex;
329
329
  justify-content: space-evenly;
330
- font-size: 14px;
330
+ font-size: var(--component-upload-upload-picture-item-size-operation-icon, var(--component-upload-picture-item-size-operation-icon, 14px));
331
331
  opacity: 0;
332
332
  pointer-events: none;
333
333
  }
334
334
  .sd-upload-list-picture-operation .sd-upload-icon-retry {
335
- color: var(--sd-color-white);
335
+ color: var(--component-upload-upload-picture-item-color-operation-icon, var(--component-upload-picture-item-color-operation-icon, var(--sd-color-white)));
336
336
  }
337
337
  .sd-upload-list-picture-error-tip .sd-upload-icon-error {
338
- color: var(--sd-color-white);
339
- font-size: 26px;
338
+ color: var(--component-upload-upload-picture-item-color-error-icon, var(--component-upload-picture-item-color-error-icon, var(--sd-color-white)));
339
+ font-size: var(--component-upload-upload-picture-item-size-error-icon, var(--component-upload-picture-item-size-error-icon, 26px));
340
340
  }
341
341
  .sd-upload-list-picture-mask:hover, .sd-upload-list-picture-mask:focus-within {
342
342
  opacity: 1;
@@ -349,15 +349,15 @@
349
349
  display: none;
350
350
  }
351
351
  .sd-upload-list-type-picture .sd-upload-list-item-content {
352
- padding-top: 8px;
353
- padding-bottom: 8px;
352
+ padding-top: var(--component-upload-upload-picture-text-item-padding-vertical, var(--component-upload-picture-text-item-padding-vertical, var(--spacing-4, 8px)));
353
+ padding-bottom: var(--component-upload-upload-picture-text-item-padding-vertical, var(--component-upload-picture-text-item-padding-vertical, var(--spacing-4, 8px)));
354
354
  }
355
355
  .sd-upload-list-type-picture .sd-upload-list-item-error .sd-upload-list-item-content {
356
- background-color: var(--sd-color-danger-light-1);
356
+ background-color: var(--component-upload-upload-picture-text-item-color-bg-error, var(--component-upload-picture-text-item-color-bg-error, var(--sd-color-danger-light-1)));
357
357
  }
358
358
  .sd-upload-list-type-picture .sd-upload-list-item-error .sd-upload-list-item-name-link,
359
359
  .sd-upload-list-type-picture .sd-upload-list-item-error .sd-upload-list-item-name {
360
- color: rgb(var(--sd-danger-6));
360
+ color: var(--component-upload-upload-picture-text-item-color-text-error, var(--component-upload-picture-text-item-color-text-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
361
361
  }
362
362
 
363
363
  .sd-upload-hide + .sd-upload-list .sd-upload-list-item:first-of-type {