@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/steps/style/index.css CHANGED
@@ -28,86 +28,86 @@
28
28
  margin-right: 0;
29
29
  }
30
30
  .sd-steps-item-active .sd-steps-item-title {
31
- font-weight: 500;
31
+ font-weight: var(--component-steps-steps-circle-font-weight-item-title-active, var(--component-steps-circle-font-weight-item-title-active, var(--font-weight-500, 500)));
32
32
  }
33
33
  .sd-steps-item-node {
34
34
  display: inline-block;
35
35
  margin-right: 12px;
36
36
  font-weight: 500;
37
- font-size: 16px;
37
+ font-size: var(--component-steps-steps-size-default-font-size-title, var(--component-steps-size-default-font-size-title, var(--font-size-title-1, 16px)));
38
38
  vertical-align: top;
39
39
  }
40
40
  .sd-steps-icon {
41
41
  box-sizing: border-box;
42
42
  width: 28px;
43
43
  height: 28px;
44
- font-size: 16px;
44
+ font-size: var(--component-steps-steps-size-default-font-size-icon, var(--component-steps-size-default-font-size-icon, var(--size-4, 16px)));
45
45
  line-height: 26px;
46
46
  text-align: center;
47
- border-radius: var(--sd-border-radius-circle);
47
+ border-radius: var(--component-steps-steps-circle-border-radius-item-icon, var(--component-steps-circle-border-radius-item-icon, var(--sd-border-radius-circle)));
48
48
  }
49
49
  .sd-steps-item-wait .sd-steps-icon {
50
- color: var(--sd-color-text-2);
51
- background-color: var(--sd-color-fill-2);
52
- border: 1px solid transparent;
50
+ color: var(--component-steps-steps-circle-color-item-icon-text-wait, var(--component-steps-circle-color-item-icon-text-wait, var(--sd-color-text-2)));
51
+ background-color: var(--component-steps-steps-circle-color-item-bg-wait, var(--component-steps-circle-color-item-bg-wait, var(--sd-color-fill-2)));
52
+ border: 1px solid var(--component-steps-steps-circle-color-item-border-wait, var(--component-steps-circle-color-item-border-wait, var(--color-transparent, var(--sd-color-transparent, transparent))));
53
53
  }
54
54
  .sd-steps-item-process .sd-steps-icon {
55
- color: var(--sd-color-white);
56
- background-color: rgb(var(--sd-primary-6));
57
- border: 1px solid transparent;
55
+ color: var(--component-steps-steps-circle-color-item-icon-text-process, var(--component-steps-circle-color-item-icon-text-process, var(--sd-color-white)));
56
+ background-color: var(--component-steps-steps-circle-color-item-bg-process, var(--component-steps-circle-color-item-bg-process, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
57
+ border: 1px solid var(--component-steps-steps-circle-color-item-border-process, var(--component-steps-circle-color-item-border-process, var(--color-transparent, var(--sd-color-transparent, transparent))));
58
58
  }
59
59
  .sd-steps-item-finish .sd-steps-icon {
60
- color: rgb(var(--sd-primary-6));
61
- background-color: var(--sd-color-primary-light-1);
62
- border: 1px solid transparent;
60
+ color: var(--component-steps-steps-circle-color-item-icon-text-finish, var(--component-steps-circle-color-item-icon-text-finish, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
61
+ background-color: var(--component-steps-steps-circle-color-item-bg-finish, var(--component-steps-circle-color-item-bg-finish, var(--sd-color-primary-light-1)));
62
+ border: 1px solid var(--component-steps-steps-circle-color-item-border-finish, var(--component-steps-circle-color-item-border-finish, var(--color-transparent, var(--sd-color-transparent, transparent))));
63
63
  }
64
64
  .sd-steps-item-error .sd-steps-icon {
65
- color: var(--sd-color-white);
66
- background-color: rgb(var(--sd-danger-6));
67
- border: 1px solid transparent;
65
+ color: var(--component-steps-steps-circle-color-item-icon-text-error, var(--component-steps-circle-color-item-icon-text-error, var(--sd-color-white)));
66
+ background-color: var(--component-steps-steps-circle-color-item-bg-error, var(--component-steps-circle-color-item-bg-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
67
+ border: 1px solid var(--component-steps-steps-circle-color-item-border-error, var(--component-steps-circle-color-item-border-error, var(--color-transparent, var(--sd-color-transparent, transparent))));
68
68
  }
69
69
  .sd-steps-item-title {
70
70
  position: relative;
71
71
  display: inline-block;
72
72
  padding-right: 12px;
73
- color: var(--sd-color-text-2);
74
- font-size: 16px;
73
+ color: var(--component-steps-steps-circle-color-item-title-wait, var(--component-steps-circle-color-item-title-wait, var(--sd-color-text-2)));
74
+ font-size: var(--component-steps-steps-size-default-font-size-title, var(--component-steps-size-default-font-size-title, var(--font-size-title-1, 16px)));
75
75
  line-height: 28px;
76
76
  white-space: nowrap;
77
77
  }
78
78
  .sd-steps-item-wait .sd-steps-item-title {
79
- color: var(--sd-color-text-2);
79
+ color: var(--component-steps-steps-circle-color-item-title-wait, var(--component-steps-circle-color-item-title-wait, var(--sd-color-text-2)));
80
80
  }
81
81
  .sd-steps-item-process .sd-steps-item-title {
82
- color: var(--sd-color-text-1);
82
+ color: var(--component-steps-steps-circle-color-item-title-process, var(--component-steps-circle-color-item-title-process, var(--sd-color-text-1)));
83
83
  }
84
84
  .sd-steps-item-finish .sd-steps-item-title {
85
- color: var(--sd-color-text-1);
85
+ color: var(--component-steps-steps-circle-color-item-title-finish, var(--component-steps-circle-color-item-title-finish, var(--sd-color-text-1)));
86
86
  }
87
87
  .sd-steps-item-error .sd-steps-item-title {
88
- color: var(--sd-color-text-1);
88
+ color: var(--component-steps-steps-circle-color-item-title-error, var(--component-steps-circle-color-item-title-error, var(--sd-color-text-1)));
89
89
  }
90
90
  .sd-steps-item-content {
91
91
  display: inline-block;
92
92
  }
93
93
  .sd-steps-item-description {
94
- max-width: 140px;
95
- margin-top: 2px;
96
- color: var(--sd-color-text-3);
97
- font-size: 12px;
94
+ max-width: var(--component-steps-steps-direction-horizontal-description-width, var(--component-steps-direction-horizontal-description-width, 140px));
95
+ margin-top: var(--component-steps-steps-circle-horizontal-item-description-margin-top, var(--component-steps-circle-horizontal-item-description-margin-top, var(--spacing-1, 2px)));
96
+ color: var(--component-steps-steps-circle-color-item-description-wait, var(--component-steps-circle-color-item-description-wait, var(--sd-color-text-3)));
97
+ font-size: var(--component-steps-steps-size-default-font-size-description, var(--component-steps-size-default-font-size-description, var(--font-size-body-1, 12px)));
98
98
  white-space: normal;
99
99
  }
100
100
  .sd-steps-item-wait .sd-steps-item-description {
101
- color: var(--sd-color-text-3);
101
+ color: var(--component-steps-steps-circle-color-item-description-wait, var(--component-steps-circle-color-item-description-wait, var(--sd-color-text-3)));
102
102
  }
103
103
  .sd-steps-item-process .sd-steps-item-description {
104
- color: var(--sd-color-text-3);
104
+ color: var(--component-steps-steps-circle-color-item-description-process, var(--component-steps-circle-color-item-description-process, var(--sd-color-text-3)));
105
105
  }
106
106
  .sd-steps-item-finish .sd-steps-item-description {
107
- color: var(--sd-color-text-3);
107
+ color: var(--component-steps-steps-circle-color-item-description-finish, var(--component-steps-circle-color-item-description-finish, var(--sd-color-text-3)));
108
108
  }
109
109
  .sd-steps-item-error .sd-steps-item-description {
110
- color: var(--sd-color-text-3);
110
+ color: var(--component-steps-steps-circle-color-item-description-error, var(--component-steps-circle-color-item-description-error, var(--sd-color-text-3)));
111
111
  }
112
112
  .sd-steps-label-horizontal .sd-steps-item:not(:last-child) .sd-steps-item-title::after {
113
113
  position: absolute;
@@ -117,17 +117,17 @@
117
117
  box-sizing: border-box;
118
118
  width: 5000px;
119
119
  height: 1px;
120
- background-color: var(--sd-color-neutral-3);
120
+ background-color: var(--component-steps-steps-circle-color-item-tail-wait, var(--component-steps-circle-color-item-tail-wait, var(--sd-color-neutral-3)));
121
121
  content: "";
122
122
  }
123
123
  .sd-steps-label-horizontal .sd-steps-item.sd-steps-item-process .sd-steps-item-title::after {
124
- background-color: var(--sd-color-neutral-3);
124
+ background-color: var(--component-steps-steps-circle-color-item-tail-wait, var(--component-steps-circle-color-item-tail-wait, var(--sd-color-neutral-3)));
125
125
  }
126
126
  .sd-steps-label-horizontal .sd-steps-item.sd-steps-item-finish .sd-steps-item-title::after {
127
- background-color: rgb(var(--sd-primary-6));
127
+ background-color: var(--component-steps-steps-circle-color-item-tail-process, var(--component-steps-circle-color-item-tail-process, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
128
128
  }
129
129
  .sd-steps-label-horizontal .sd-steps-item.sd-steps-item-next-error .sd-steps-item-title::after {
130
- background-color: rgb(var(--sd-danger-6));
130
+ background-color: var(--component-steps-steps-circle-color-item-tail-error, var(--component-steps-circle-color-item-tail-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
131
131
  }
132
132
  .sd-steps-item:not(:last-child) .sd-steps-item-tail {
133
133
  position: absolute;
@@ -140,7 +140,7 @@
140
140
  display: block;
141
141
  width: 100%;
142
142
  height: 100%;
143
- background-color: var(--sd-color-neutral-3);
143
+ background-color: var(--component-steps-steps-circle-color-item-tail-wait, var(--component-steps-circle-color-item-tail-wait, var(--sd-color-neutral-3)));
144
144
  content: "";
145
145
  }
146
146
  .sd-steps-vertical .sd-steps-item:not(:last-child) .sd-steps-item-tail {
@@ -156,7 +156,7 @@
156
156
  display: block;
157
157
  width: 100%;
158
158
  height: 100%;
159
- background-color: var(--sd-color-neutral-3);
159
+ background-color: var(--component-steps-steps-circle-color-item-tail-wait, var(--component-steps-circle-color-item-tail-wait, var(--sd-color-neutral-3)));
160
160
  content: "";
161
161
  }
162
162
  .sd-steps-size-small.sd-steps-vertical .sd-steps-item:not(:last-child) .sd-steps-item-tail {
@@ -164,28 +164,28 @@
164
164
  padding: 30px 0 6px;
165
165
  }
166
166
  .sd-steps-item:not(:last-child).sd-steps-item-finish .sd-steps-item-tail::after {
167
- background-color: rgb(var(--sd-primary-6));
167
+ background-color: var(--component-steps-steps-circle-color-item-tail-process, var(--component-steps-circle-color-item-tail-process, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
168
168
  }
169
169
  .sd-steps-item:not(:last-child).sd-steps-item-next-error .sd-steps-item-tail::after {
170
- background-color: rgb(var(--sd-danger-6));
170
+ background-color: var(--component-steps-steps-circle-color-item-tail-error, var(--component-steps-circle-color-item-tail-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
171
171
  }
172
172
  .sd-steps-size-small:not(.sd-steps-vertical) .sd-steps-item:not(:last-child) .sd-steps-item-tail {
173
173
  top: 11.5px;
174
174
  }
175
175
  .sd-steps-size-small .sd-steps-item-node {
176
- font-size: 14px;
176
+ font-size: var(--component-steps-steps-size-small-font-size-title, var(--component-steps-size-small-font-size-title, var(--font-size-body-3, 14px)));
177
177
  }
178
178
  .sd-steps-size-small .sd-steps-item-title {
179
- font-size: 14px;
179
+ font-size: var(--component-steps-steps-size-small-font-size-title, var(--component-steps-size-small-font-size-title, var(--font-size-body-3, 14px)));
180
180
  line-height: 24px;
181
181
  }
182
182
  .sd-steps-size-small .sd-steps-item-description {
183
- font-size: 12px;
183
+ font-size: var(--component-steps-steps-size-small-font-size-description, var(--component-steps-size-small-font-size-description, var(--font-size-body-1, 12px)));
184
184
  }
185
185
  .sd-steps-size-small .sd-steps-icon {
186
186
  width: 24px;
187
187
  height: 24px;
188
- font-size: 14px;
188
+ font-size: var(--component-steps-steps-size-small-font-size-icon, var(--component-steps-size-small-font-size-icon, 14px));
189
189
  line-height: 22px;
190
190
  }
191
191
  .sd-steps-size-small.sd-steps-label-horizontal .sd-steps-item:not(:last-child) .sd-steps-item-title::after {
@@ -195,7 +195,7 @@
195
195
  overflow: visible;
196
196
  }
197
197
  .sd-steps-label-vertical .sd-steps-item-title {
198
- margin-top: 2px;
198
+ margin-top: var(--component-steps-steps-circle-vertical-item-description-margin-top, var(--component-steps-circle-vertical-item-description-margin-top, var(--spacing-1, 2px)));
199
199
  padding-right: 0;
200
200
  }
201
201
  .sd-steps-label-vertical .sd-steps-item-node {
@@ -226,7 +226,7 @@
226
226
  margin-right: 0;
227
227
  }
228
228
  .sd-steps-mode-dot .sd-steps-item-active .sd-steps-item-title {
229
- font-weight: 500;
229
+ font-weight: var(--component-steps-steps-dot-font-weight-item-title-active, var(--component-steps-dot-font-weight-item-title-active, var(--font-weight-500, 500)));
230
230
  }
231
231
  .sd-steps-mode-dot .sd-steps-item-node {
232
232
  display: inline-block;
@@ -234,27 +234,27 @@
234
234
  width: 8px;
235
235
  height: 8px;
236
236
  vertical-align: top;
237
- border-radius: var(--sd-border-radius-circle);
237
+ border-radius: var(--component-steps-steps-dot-border-radius-item-icon, var(--component-steps-dot-border-radius-item-icon, var(--sd-border-radius-circle)));
238
238
  }
239
239
  .sd-steps-mode-dot .sd-steps-item-active .sd-steps-item-node {
240
240
  width: 10px;
241
241
  height: 10px;
242
242
  }
243
243
  .sd-steps-mode-dot .sd-steps-item-wait .sd-steps-item-node {
244
- background-color: var(--sd-color-fill-4);
245
- border-color: var(--sd-color-fill-4);
244
+ background-color: var(--component-steps-steps-dot-color-item-bg-wait, var(--component-steps-dot-color-item-bg-wait, var(--sd-color-fill-4)));
245
+ border-color: var(--component-steps-steps-dot-color-item-border-wait, var(--component-steps-dot-color-item-border-wait, var(--sd-color-fill-4)));
246
246
  }
247
247
  .sd-steps-mode-dot .sd-steps-item-process .sd-steps-item-node {
248
- background-color: rgb(var(--sd-primary-6));
249
- border-color: rgb(var(--sd-primary-6));
248
+ background-color: var(--component-steps-steps-dot-color-item-bg-process, var(--component-steps-dot-color-item-bg-process, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
249
+ border-color: var(--component-steps-steps-dot-color-item-border-process, var(--component-steps-dot-color-item-border-process, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
250
250
  }
251
251
  .sd-steps-mode-dot .sd-steps-item-finish .sd-steps-item-node {
252
- background-color: rgb(var(--sd-primary-6));
253
- border-color: rgb(var(--sd-primary-6));
252
+ background-color: var(--component-steps-steps-dot-color-item-bg-finish, var(--component-steps-dot-color-item-bg-finish, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
253
+ border-color: var(--component-steps-steps-dot-color-item-border-finish, var(--component-steps-dot-color-item-border-finish, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
254
254
  }
255
255
  .sd-steps-mode-dot .sd-steps-item-error .sd-steps-item-node {
256
- background-color: rgb(var(--sd-danger-6));
257
- border-color: rgb(var(--sd-danger-6));
256
+ background-color: var(--component-steps-steps-dot-color-item-bg-error, var(--component-steps-dot-color-item-bg-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
257
+ border-color: var(--component-steps-steps-dot-color-item-border-error, var(--component-steps-dot-color-item-border-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
258
258
  }
259
259
  .sd-steps-mode-dot.sd-steps-horizontal .sd-steps-item-node {
260
260
  margin-left: 66px;
@@ -269,37 +269,37 @@
269
269
  .sd-steps-mode-dot .sd-steps-item-title {
270
270
  position: relative;
271
271
  display: inline-block;
272
- margin-top: 4px;
273
- font-size: 16px;
272
+ margin-top: var(--component-steps-steps-dot-horizontal-item-title-margin-top, var(--component-steps-dot-horizontal-item-title-margin-top, var(--spacing-2, 4px)));
273
+ font-size: var(--component-steps-steps-size-default-font-size-title, var(--component-steps-size-default-font-size-title, var(--font-size-title-1, 16px)));
274
274
  }
275
275
  .sd-steps-mode-dot .sd-steps-item-wait .sd-steps-item-title {
276
- color: var(--sd-color-text-2);
276
+ color: var(--component-steps-steps-dot-color-item-title-wait, var(--component-steps-dot-color-item-title-wait, var(--sd-color-text-2)));
277
277
  }
278
278
  .sd-steps-mode-dot .sd-steps-item-process .sd-steps-item-title {
279
- color: var(--sd-color-text-1);
279
+ color: var(--component-steps-steps-dot-color-item-title-process, var(--component-steps-dot-color-item-title-process, var(--sd-color-text-1)));
280
280
  }
281
281
  .sd-steps-mode-dot .sd-steps-item-finish .sd-steps-item-title {
282
- color: var(--sd-color-text-1);
282
+ color: var(--component-steps-steps-dot-color-item-title-finish, var(--component-steps-dot-color-item-title-finish, var(--sd-color-text-1)));
283
283
  }
284
284
  .sd-steps-mode-dot .sd-steps-item-error .sd-steps-item-title {
285
- color: var(--sd-color-text-1);
285
+ color: var(--component-steps-steps-dot-color-item-title-error, var(--component-steps-dot-color-item-title-error, var(--sd-color-text-1)));
286
286
  }
287
287
  .sd-steps-mode-dot .sd-steps-item-description {
288
- margin-top: 4px;
289
- font-size: 12px;
288
+ margin-top: var(--component-steps-steps-dot-horizontal-item-description-margin-top, var(--component-steps-dot-horizontal-item-description-margin-top, var(--spacing-2, 4px)));
289
+ font-size: var(--component-steps-steps-size-default-font-size-description, var(--component-steps-size-default-font-size-description, var(--font-size-body-1, 12px)));
290
290
  white-space: normal;
291
291
  }
292
292
  .sd-steps-mode-dot .sd-steps-item-wait .sd-steps-item-description {
293
- color: var(--sd-color-text-3);
293
+ color: var(--component-steps-steps-dot-color-item-description-wait, var(--component-steps-dot-color-item-description-wait, var(--sd-color-text-3)));
294
294
  }
295
295
  .sd-steps-mode-dot .sd-steps-item-process .sd-steps-item-description {
296
- color: var(--sd-color-text-3);
296
+ color: var(--component-steps-steps-dot-color-item-description-process, var(--component-steps-dot-color-item-description-process, var(--sd-color-text-3)));
297
297
  }
298
298
  .sd-steps-mode-dot .sd-steps-item-finish .sd-steps-item-description {
299
- color: var(--sd-color-text-3);
299
+ color: var(--component-steps-steps-dot-color-item-description-finish, var(--component-steps-dot-color-item-description-finish, var(--sd-color-text-3)));
300
300
  }
301
301
  .sd-steps-mode-dot .sd-steps-item-error .sd-steps-item-description {
302
- color: var(--sd-color-text-3);
302
+ color: var(--component-steps-steps-dot-color-item-description-error, var(--component-steps-dot-color-item-description-error, var(--sd-color-text-3)));
303
303
  }
304
304
  .sd-steps-mode-dot .sd-steps-item:not(:last-child) .sd-steps-item-tail {
305
305
  position: absolute;
@@ -308,19 +308,19 @@
308
308
  box-sizing: border-box;
309
309
  width: 100%;
310
310
  height: 1px;
311
- background-color: var(--sd-color-neutral-3);
311
+ background-color: var(--component-steps-steps-dot-color-item-tail-wait, var(--component-steps-dot-color-item-tail-wait, var(--sd-color-neutral-3)));
312
312
  }
313
313
  .sd-steps-mode-dot .sd-steps-item:not(:last-child).sd-steps-item-process .sd-steps-item-tail {
314
- background-color: var(--sd-color-neutral-3);
314
+ background-color: var(--component-steps-steps-dot-color-item-tail-wait, var(--component-steps-dot-color-item-tail-wait, var(--sd-color-neutral-3)));
315
315
  }
316
316
  .sd-steps-mode-dot .sd-steps-item:not(:last-child).sd-steps-item-finish .sd-steps-item-tail {
317
- background-color: rgb(var(--sd-primary-6));
317
+ background-color: var(--component-steps-steps-dot-color-item-tail-process, var(--component-steps-dot-color-item-tail-process, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
318
318
  }
319
319
  .sd-steps-mode-dot .sd-steps-item:not(:last-child).sd-steps-item-next-error .sd-steps-item-tail {
320
- background-color: rgb(var(--sd-danger-6));
320
+ background-color: var(--component-steps-steps-dot-color-item-tail-error, var(--component-steps-dot-color-item-tail-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
321
321
  }
322
322
  .sd-steps-mode-dot.sd-steps-vertical .sd-steps-item-node {
323
- margin-right: 16px;
323
+ margin-right: var(--component-steps-steps-dot-vertical-item-icon-margin-right, var(--component-steps-dot-vertical-item-icon-margin-right, var(--spacing-7, 16px)));
324
324
  }
325
325
  .sd-steps-mode-dot.sd-steps-vertical .sd-steps-item-content {
326
326
  overflow: hidden;
@@ -329,7 +329,7 @@
329
329
  margin-top: -2px;
330
330
  }
331
331
  .sd-steps-mode-dot.sd-steps-vertical .sd-steps-item-description {
332
- margin-top: 4px;
332
+ margin-top: var(--component-steps-steps-dot-vertical-item-description-margin-top, var(--component-steps-dot-vertical-item-description-margin-top, var(--spacing-2, 4px)));
333
333
  }
334
334
  .sd-steps-mode-dot.sd-steps-vertical .sd-steps-item:not(:last-child) .sd-steps-item-tail {
335
335
  position: absolute;
@@ -347,17 +347,17 @@
347
347
  display: block;
348
348
  width: 100%;
349
349
  height: 100%;
350
- background-color: var(--sd-color-neutral-3);
350
+ background-color: var(--component-steps-steps-dot-color-item-tail-wait, var(--component-steps-dot-color-item-tail-wait, var(--sd-color-neutral-3)));
351
351
  content: "";
352
352
  }
353
353
  .sd-steps-mode-dot.sd-steps-vertical .sd-steps-item:not(:last-child).sd-steps-item-process .sd-steps-item-tail::after {
354
- background-color: var(--sd-color-neutral-3);
354
+ background-color: var(--component-steps-steps-dot-color-item-tail-wait, var(--component-steps-dot-color-item-tail-wait, var(--sd-color-neutral-3)));
355
355
  }
356
356
  .sd-steps-mode-dot.sd-steps-vertical .sd-steps-item:not(:last-child).sd-steps-item-finish .sd-steps-item-tail::after {
357
- background-color: rgb(var(--sd-primary-6));
357
+ background-color: var(--component-steps-steps-dot-color-item-tail-process, var(--component-steps-dot-color-item-tail-process, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
358
358
  }
359
359
  .sd-steps-mode-dot.sd-steps-vertical .sd-steps-item:not(:last-child).sd-steps-item-next-error .sd-steps-item-tail::after {
360
- background-color: rgb(var(--sd-danger-6));
360
+ background-color: var(--component-steps-steps-dot-color-item-tail-error, var(--component-steps-dot-color-item-tail-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
361
361
  }
362
362
  .sd-steps-mode-dot.sd-steps-vertical .sd-steps-item .sd-steps-item-node {
363
363
  margin-top: 8px;
@@ -377,7 +377,7 @@
377
377
  white-space: nowrap;
378
378
  }
379
379
  .sd-steps-mode-arrow .sd-steps-item:not(:last-child) {
380
- margin-right: 4px;
380
+ margin-right: var(--component-steps-steps-arrow-size-item-gap, var(--component-steps-arrow-size-item-gap, var(--spacing-2, 4px)));
381
381
  }
382
382
  .sd-steps-mode-arrow .sd-steps-item-wait {
383
383
  background-color: var(--sd-color-fill-1);
@@ -404,44 +404,44 @@
404
404
  .sd-steps-mode-arrow .sd-steps-item-title {
405
405
  position: relative;
406
406
  display: inline-block;
407
- font-size: 16px;
407
+ font-size: var(--component-steps-steps-size-default-font-size-title, var(--component-steps-size-default-font-size-title, var(--font-size-title-1, 16px)));
408
408
  white-space: nowrap;
409
409
  }
410
410
  .sd-steps-mode-arrow .sd-steps-item-title::after {
411
411
  display: none !important;
412
412
  }
413
413
  .sd-steps-mode-arrow .sd-steps-item-wait .sd-steps-item-title {
414
- color: var(--sd-color-text-2);
414
+ color: var(--component-steps-steps-arrow-color-item-title-wait, var(--component-steps-arrow-color-item-title-wait, var(--sd-color-text-2)));
415
415
  }
416
416
  .sd-steps-mode-arrow .sd-steps-item-process .sd-steps-item-title {
417
- color: var(--sd-color-white);
417
+ color: var(--component-steps-steps-arrow-color-item-title-process, var(--component-steps-arrow-color-item-title-process, var(--sd-color-white)));
418
418
  }
419
419
  .sd-steps-mode-arrow .sd-steps-item-finish .sd-steps-item-title {
420
- color: var(--sd-color-text-1);
420
+ color: var(--component-steps-steps-arrow-color-item-title-finish, var(--component-steps-arrow-color-item-title-finish, var(--sd-color-text-1)));
421
421
  }
422
422
  .sd-steps-mode-arrow .sd-steps-item-error .sd-steps-item-title {
423
- color: var(--sd-color-white);
423
+ color: var(--component-steps-steps-arrow-color-item-title-error, var(--component-steps-arrow-color-item-title-error, var(--sd-color-white)));
424
424
  }
425
425
  .sd-steps-mode-arrow .sd-steps-item-active .sd-steps-item-title {
426
- font-weight: 500;
426
+ font-weight: var(--component-steps-steps-arrow-font-weight-item-title-active, var(--component-steps-arrow-font-weight-item-title-active, var(--font-weight-500, 500)));
427
427
  }
428
428
  .sd-steps-mode-arrow .sd-steps-item-description {
429
429
  max-width: none;
430
- margin-top: 0;
431
- font-size: 12px;
430
+ margin-top: var(--component-steps-steps-arrow-item-description-margin-top, var(--component-steps-arrow-item-description-margin-top, 0));
431
+ font-size: var(--component-steps-steps-size-default-font-size-description, var(--component-steps-size-default-font-size-description, var(--font-size-body-1, 12px)));
432
432
  white-space: nowrap;
433
433
  }
434
434
  .sd-steps-mode-arrow .sd-steps-item-wait .sd-steps-item-description {
435
- color: var(--sd-color-text-3);
435
+ color: var(--component-steps-steps-arrow-color-item-description-wait, var(--component-steps-arrow-color-item-description-wait, var(--sd-color-text-3)));
436
436
  }
437
437
  .sd-steps-mode-arrow .sd-steps-item-process .sd-steps-item-description {
438
- color: var(--sd-color-white);
438
+ color: var(--component-steps-steps-arrow-color-item-description-process, var(--component-steps-arrow-color-item-description-process, var(--sd-color-white)));
439
439
  }
440
440
  .sd-steps-mode-arrow .sd-steps-item-finish .sd-steps-item-description {
441
- color: var(--sd-color-text-3);
441
+ color: var(--component-steps-steps-arrow-color-item-description-finish, var(--component-steps-arrow-color-item-description-finish, var(--sd-color-text-3)));
442
442
  }
443
443
  .sd-steps-mode-arrow .sd-steps-item-error .sd-steps-item-description {
444
- color: var(--sd-color-white);
444
+ color: var(--component-steps-steps-arrow-color-item-description-error, var(--component-steps-arrow-color-item-description-error, var(--sd-color-white)));
445
445
  }
446
446
  .sd-steps-mode-arrow .sd-steps-item:not(:first-child)::before {
447
447
  position: absolute;
@@ -485,7 +485,7 @@
485
485
  height: 40px;
486
486
  }
487
487
  .sd-steps-mode-arrow.sd-steps-size-small .sd-steps-item-title {
488
- font-size: 14px;
488
+ font-size: var(--component-steps-steps-size-small-font-size-title, var(--component-steps-size-small-font-size-title, var(--font-size-body-3, 14px)));
489
489
  }
490
490
  .sd-steps-mode-arrow.sd-steps-size-small .sd-steps-item-description {
491
491
  display: none;
@@ -524,9 +524,9 @@
524
524
  display: none;
525
525
  }
526
526
  .sd-steps-mode-navigation .sd-steps-item {
527
- margin-right: 32px;
528
- padding-right: 10px;
529
- padding-left: 20px;
527
+ margin-right: var(--component-steps-steps-navigation-margin-right, var(--component-steps-navigation-margin-right, var(--spacing-10, 32px)));
528
+ padding-right: var(--component-steps-steps-navigation-spacing-arrow-right, var(--component-steps-navigation-spacing-arrow-right, var(--spacing-5, 10px)));
529
+ padding-left: var(--component-steps-steps-navigation-padding-left, var(--component-steps-navigation-padding-left, var(--spacing-8, 20px)));
530
530
  }
531
531
  .sd-steps-mode-navigation .sd-steps-item:last-child {
532
532
  flex: 1;
@@ -539,9 +539,9 @@
539
539
  }
540
540
  .sd-steps-mode-navigation .sd-steps-item-active::after {
541
541
  position: absolute;
542
- right: 30px;
542
+ right: var(--component-steps-steps-navigation-spacing-ink-right, var(--component-steps-navigation-spacing-ink-right, 30px));
543
543
  bottom: 0;
544
- left: 0;
544
+ left: var(--component-steps-steps-navigation-spacing-ink-left, var(--component-steps-navigation-spacing-ink-left, var(--spacing-none, 0)));
545
545
  display: block;
546
546
  height: 2px;
547
547
  background-color: rgb(var(--sd-primary-6));
@@ -552,13 +552,13 @@
552
552
  }
553
553
  .sd-steps-mode-navigation .sd-steps-item:not(:last-child) .sd-steps-item-content::after {
554
554
  position: absolute;
555
- top: 10px;
555
+ top: var(--component-steps-steps-navigation-size-arrow-top, var(--component-steps-navigation-size-arrow-top, var(--spacing-5, 10px)));
556
556
  right: 30px;
557
557
  display: inline-block;
558
- width: 6px;
559
- height: 6px;
558
+ width: var(--component-steps-steps-navigation-size-arrow, var(--component-steps-navigation-size-arrow, 6px));
559
+ height: var(--component-steps-steps-navigation-size-arrow, var(--component-steps-navigation-size-arrow, 6px));
560
560
  background-color: var(--sd-color-bg-2);
561
- border: 2px solid var(--sd-color-text-4);
561
+ border: var(--component-steps-steps-navigation-size-arrow-line-width, var(--component-steps-navigation-size-arrow-line-width, 2px)) solid var(--component-steps-steps-navigation-color-arrow, var(--component-steps-navigation-color-arrow, var(--sd-color-text-4)));
562
562
  border-bottom: none;
563
563
  border-left: none;
564
564
  transform: rotate(45deg);