@x-plat/design-system 0.1.5 → 0.2.1

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 (178) hide show
  1. package/dist/{colors-BG91q_uV.d.cts → colors-DmMsWD7G.d.cts} +20 -4
  2. package/dist/{colors-BG91q_uV.d.ts → colors-DmMsWD7G.d.ts} +20 -4
  3. package/dist/components/Accordion/index.cjs +25 -14
  4. package/dist/components/Accordion/index.css +6 -6
  5. package/dist/components/Accordion/index.d.cts +16 -3
  6. package/dist/components/Accordion/index.d.ts +16 -3
  7. package/dist/components/Accordion/index.js +25 -14
  8. package/dist/components/Alert/index.cjs +1 -1
  9. package/dist/components/Alert/index.css +16 -16
  10. package/dist/components/Alert/index.js +1 -1
  11. package/dist/components/Avatar/index.cjs +1 -1
  12. package/dist/components/Avatar/index.css +3 -279
  13. package/dist/components/Avatar/index.d.cts +2 -118
  14. package/dist/components/Avatar/index.d.ts +2 -118
  15. package/dist/components/Avatar/index.js +1 -1
  16. package/dist/components/Badge/index.cjs +3 -2
  17. package/dist/components/Badge/index.css +23 -279
  18. package/dist/components/Badge/index.d.cts +4 -118
  19. package/dist/components/Badge/index.d.ts +4 -118
  20. package/dist/components/Badge/index.js +3 -2
  21. package/dist/components/Breadcrumb/index.cjs +1 -1
  22. package/dist/components/Breadcrumb/index.css +4 -4
  23. package/dist/components/Breadcrumb/index.js +1 -1
  24. package/dist/components/Button/index.cjs +3 -2
  25. package/dist/components/Button/index.css +26 -1214
  26. package/dist/components/Button/index.d.cts +4 -118
  27. package/dist/components/Button/index.d.ts +4 -118
  28. package/dist/components/Button/index.js +3 -2
  29. package/dist/components/Card/index.cjs +1 -1
  30. package/dist/components/Card/index.css +3 -3
  31. package/dist/components/Card/index.js +1 -1
  32. package/dist/components/CardTab/index.cjs +124 -0
  33. package/dist/components/CardTab/index.css +78 -0
  34. package/dist/components/CardTab/index.d.cts +44 -0
  35. package/dist/components/CardTab/index.d.ts +44 -0
  36. package/dist/components/CardTab/index.js +87 -0
  37. package/dist/components/Chart/index.cjs +14230 -37
  38. package/dist/components/Chart/index.js +14217 -33
  39. package/dist/components/CheckBox/index.cjs +3 -2
  40. package/dist/components/CheckBox/index.css +27 -563
  41. package/dist/components/CheckBox/index.d.cts +5 -119
  42. package/dist/components/CheckBox/index.d.ts +5 -119
  43. package/dist/components/CheckBox/index.js +3 -2
  44. package/dist/components/Chip/index.cjs +3 -2
  45. package/dist/components/Chip/index.css +21 -1209
  46. package/dist/components/Chip/index.d.cts +4 -118
  47. package/dist/components/Chip/index.d.ts +4 -118
  48. package/dist/components/Chip/index.js +3 -2
  49. package/dist/components/DatePicker/index.cjs +10772 -56
  50. package/dist/components/DatePicker/index.css +802 -1231
  51. package/dist/components/DatePicker/index.d.cts +3 -235
  52. package/dist/components/DatePicker/index.d.ts +3 -235
  53. package/dist/components/DatePicker/index.js +11004 -280
  54. package/dist/components/Divider/index.cjs +1 -1
  55. package/dist/components/Divider/index.css +2 -2
  56. package/dist/components/Divider/index.js +1 -1
  57. package/dist/components/Drawer/index.cjs +1 -1
  58. package/dist/components/Drawer/index.css +5 -5
  59. package/dist/components/Drawer/index.js +1 -1
  60. package/dist/components/Dropdown/index.cjs +1 -1
  61. package/dist/components/Dropdown/index.css +7 -7
  62. package/dist/components/Dropdown/index.js +1 -1
  63. package/dist/components/EmptyState/index.cjs +1 -1
  64. package/dist/components/EmptyState/index.css +3 -3
  65. package/dist/components/EmptyState/index.js +1 -1
  66. package/dist/components/FileUpload/index.cjs +1 -1
  67. package/dist/components/FileUpload/index.css +8 -8
  68. package/dist/components/FileUpload/index.js +1 -1
  69. package/dist/components/HtmlTypeWriter/index.css +1 -1
  70. package/dist/components/ImageSelector/index.css +9 -9
  71. package/dist/components/Input/index.cjs +3 -2
  72. package/dist/components/Input/index.css +21 -10
  73. package/dist/components/Input/index.d.cts +6 -2
  74. package/dist/components/Input/index.d.ts +6 -2
  75. package/dist/components/Input/index.js +3 -2
  76. package/dist/components/Modal/index.cjs +1 -1
  77. package/dist/components/Modal/index.js +1 -1
  78. package/dist/components/Pagination/index.cjs +3 -2
  79. package/dist/components/Pagination/index.css +33 -283
  80. package/dist/components/Pagination/index.d.cts +4 -118
  81. package/dist/components/Pagination/index.d.ts +4 -118
  82. package/dist/components/Pagination/index.js +3 -2
  83. package/dist/components/PopOver/index.cjs +1 -1
  84. package/dist/components/PopOver/index.js +1 -1
  85. package/dist/components/Progress/index.cjs +1 -1
  86. package/dist/components/Progress/index.css +3 -281
  87. package/dist/components/Progress/index.d.cts +2 -118
  88. package/dist/components/Progress/index.d.ts +2 -118
  89. package/dist/components/Progress/index.js +1 -1
  90. package/dist/components/Radio/index.cjs +4 -1
  91. package/dist/components/Radio/index.css +36 -747
  92. package/dist/components/Radio/index.d.cts +6 -119
  93. package/dist/components/Radio/index.d.ts +6 -119
  94. package/dist/components/Radio/index.js +4 -1
  95. package/dist/components/Select/index.cjs +4 -2
  96. package/dist/components/Select/index.css +38 -18
  97. package/dist/components/Select/index.d.cts +3 -0
  98. package/dist/components/Select/index.d.ts +3 -0
  99. package/dist/components/Select/index.js +4 -2
  100. package/dist/components/Skeleton/index.cjs +1 -1
  101. package/dist/components/Skeleton/index.css +1 -1
  102. package/dist/components/Skeleton/index.js +1 -1
  103. package/dist/components/Spinner/index.cjs +1 -1
  104. package/dist/components/Spinner/index.css +2 -280
  105. package/dist/components/Spinner/index.d.cts +2 -118
  106. package/dist/components/Spinner/index.d.ts +2 -118
  107. package/dist/components/Spinner/index.js +1 -1
  108. package/dist/components/Steps/index.cjs +1 -1
  109. package/dist/components/Steps/index.css +14 -846
  110. package/dist/components/Steps/index.d.cts +2 -118
  111. package/dist/components/Steps/index.d.ts +2 -118
  112. package/dist/components/Steps/index.js +1 -1
  113. package/dist/components/Swiper/index.cjs +5874 -18
  114. package/dist/components/Swiper/index.css +229 -0
  115. package/dist/components/Swiper/index.js +5863 -17
  116. package/dist/components/Switch/index.cjs +1 -1
  117. package/dist/components/Switch/index.css +9 -745
  118. package/dist/components/Switch/index.d.cts +2 -118
  119. package/dist/components/Switch/index.d.ts +2 -118
  120. package/dist/components/Switch/index.js +1 -1
  121. package/dist/components/Tab/index.cjs +3 -3
  122. package/dist/components/Tab/index.css +20 -9
  123. package/dist/components/Tab/index.d.cts +2 -0
  124. package/dist/components/Tab/index.d.ts +2 -0
  125. package/dist/components/Tab/index.js +3 -3
  126. package/dist/components/Table/index.cjs +1 -1
  127. package/dist/components/Table/index.css +47 -4003
  128. package/dist/components/Table/index.d.cts +2 -118
  129. package/dist/components/Table/index.d.ts +2 -118
  130. package/dist/components/Table/index.js +1 -1
  131. package/dist/components/Tag/index.cjs +3 -2
  132. package/dist/components/Tag/index.css +27 -467
  133. package/dist/components/Tag/index.d.cts +4 -118
  134. package/dist/components/Tag/index.d.ts +4 -118
  135. package/dist/components/Tag/index.js +3 -2
  136. package/dist/components/TextArea/index.cjs +1 -1
  137. package/dist/components/TextArea/index.css +4 -4
  138. package/dist/components/TextArea/index.js +1 -1
  139. package/dist/components/Toast/index.cjs +1 -1
  140. package/dist/components/Toast/index.css +8 -8
  141. package/dist/components/Toast/index.js +1 -1
  142. package/dist/components/Tooltip/index.cjs +1 -1
  143. package/dist/components/Tooltip/index.css +4 -560
  144. package/dist/components/Tooltip/index.d.cts +2 -118
  145. package/dist/components/Tooltip/index.d.ts +2 -118
  146. package/dist/components/Tooltip/index.js +1 -1
  147. package/dist/components/Video/index.cjs +1 -1
  148. package/dist/components/Video/index.css +3 -3
  149. package/dist/components/Video/index.js +1 -1
  150. package/dist/components/index.cjs +25841 -842
  151. package/dist/components/index.css +1929 -12543
  152. package/dist/components/index.d.cts +2 -1
  153. package/dist/components/index.d.ts +2 -1
  154. package/dist/components/index.js +25836 -841
  155. package/dist/index.cjs +25875 -876
  156. package/dist/index.css +2358 -12598
  157. package/dist/index.d.cts +2 -1
  158. package/dist/index.d.ts +2 -1
  159. package/dist/index.js +25878 -883
  160. package/dist/layout/Grid/FullGrid/index.cjs +1 -1
  161. package/dist/layout/Grid/FullGrid/index.js +1 -1
  162. package/dist/layout/Grid/FullScreen/index.cjs +1 -1
  163. package/dist/layout/Grid/FullScreen/index.js +1 -1
  164. package/dist/layout/Grid/Item/index.cjs +1 -1
  165. package/dist/layout/Grid/Item/index.js +1 -1
  166. package/dist/layout/Grid/index.cjs +1 -1
  167. package/dist/layout/Grid/index.js +1 -1
  168. package/dist/layout/Header/index.css +2 -2
  169. package/dist/layout/Layout/index.css +1 -1
  170. package/dist/layout/SideBar/index.cjs +1 -1
  171. package/dist/layout/SideBar/index.js +1 -1
  172. package/dist/layout/index.cjs +1 -1
  173. package/dist/layout/index.css +3 -3
  174. package/dist/layout/index.js +1 -1
  175. package/dist/tokens/index.d.cts +1 -1
  176. package/dist/tokens/index.d.ts +1 -1
  177. package/package.json +13 -12
  178. package/README.md +0 -123
package/dist/components/Steps/index.css CHANGED
@@ -50,869 +50,37 @@
50
50
  .lib-xplat-steps .step-title {
51
51
  font-size: 13px;
52
52
  font-weight: 500;
53
- color: #171717;
53
+ color: var(--xplat-neutral-900);
54
54
  }
55
55
  .lib-xplat-steps .step-description {
56
56
  font-size: 12px;
57
- color: #737373;
57
+ color: var(--xplat-neutral-500);
58
58
  margin-top: 2px;
59
59
  }
60
60
  .lib-xplat-steps .step-item.completed .step-circle {
61
- color: #FFFFFF;
61
+ color: var(--xplat-white);
62
+ background-color: var(--ds-color);
62
63
  }
63
- .lib-xplat-steps .step-item.completed .step-circle.xplat-red-50 {
64
- background-color: #FFF0F0;
65
- }
66
- .lib-xplat-steps .step-item.completed .step-circle.xplat-red-100 {
67
- background-color: #FFDDDE;
68
- }
69
- .lib-xplat-steps .step-item.completed .step-circle.xplat-red-200 {
70
- background-color: #FFC1C2;
71
- }
72
- .lib-xplat-steps .step-item.completed .step-circle.xplat-red-300 {
73
- background-color: #FF9698;
74
- }
75
- .lib-xplat-steps .step-item.completed .step-circle.xplat-red-400 {
76
- background-color: #FF5A5D;
77
- }
78
- .lib-xplat-steps .step-item.completed .step-circle.xplat-red-500 {
79
- background-color: #FF272B;
80
- }
81
- .lib-xplat-steps .step-item.completed .step-circle.xplat-red-600 {
82
- background-color: #F80409;
83
- }
84
- .lib-xplat-steps .step-item.completed .step-circle.xplat-red-700 {
85
- background-color: #D40105;
86
- }
87
- .lib-xplat-steps .step-item.completed .step-circle.xplat-red-800 {
88
- background-color: #AE0609;
89
- }
90
- .lib-xplat-steps .step-item.completed .step-circle.xplat-red-900 {
91
- background-color: #900C0F;
92
- }
93
- .lib-xplat-steps .step-item.completed .step-circle.xplat-green-50 {
94
- background-color: #E5F6EA;
95
- }
96
- .lib-xplat-steps .step-item.completed .step-circle.xplat-green-100 {
97
- background-color: #C1E7CC;
98
- }
99
- .lib-xplat-steps .step-item.completed .step-circle.xplat-green-200 {
100
- background-color: #98D8AC;
101
- }
102
- .lib-xplat-steps .step-item.completed .step-circle.xplat-green-300 {
103
- background-color: #6CCA8B;
104
- }
105
- .lib-xplat-steps .step-item.completed .step-circle.xplat-green-400 {
106
- background-color: #47BE72;
107
- }
108
- .lib-xplat-steps .step-item.completed .step-circle.xplat-green-500 {
109
- background-color: #10B259;
110
- }
111
- .lib-xplat-steps .step-item.completed .step-circle.xplat-green-600 {
112
- background-color: #00A34F;
113
- }
114
- .lib-xplat-steps .step-item.completed .step-circle.xplat-green-700 {
115
- background-color: #009143;
116
- }
117
- .lib-xplat-steps .step-item.completed .step-circle.xplat-green-800 {
118
- background-color: #007F38;
119
- }
120
- .lib-xplat-steps .step-item.completed .step-circle.xplat-green-900 {
121
- background-color: #006024;
122
- }
123
- .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-50 {
124
- background-color: #FFF8EC;
125
- }
126
- .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-100 {
127
- background-color: #FFF0D3;
128
- }
129
- .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-200 {
130
- background-color: #FFDDA5;
131
- }
132
- .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-300 {
133
- background-color: #FFC46D;
134
- }
135
- .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-400 {
136
- background-color: #FF9F32;
137
- }
138
- .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-500 {
139
- background-color: #FF820A;
140
- }
141
- .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-600 {
142
- background-color: #FF6900;
143
- }
144
- .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-700 {
145
- background-color: #CC4B02;
146
- }
147
- .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-800 {
148
- background-color: #A13A0B;
149
- }
150
- .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-900 {
151
- background-color: #82320C;
152
- }
153
- .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-50 {
154
- background-color: #FFFDE7;
155
- }
156
- .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-100 {
157
- background-color: #FFFAC1;
158
- }
159
- .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-200 {
160
- background-color: #FFF186;
161
- }
162
- .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-300 {
163
- background-color: #FFE041;
164
- }
165
- .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-400 {
166
- background-color: #FFCC0D;
167
- }
168
- .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-500 {
169
- background-color: #F0B100;
170
- }
171
- .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-600 {
172
- background-color: #D18800;
173
- }
174
- .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-700 {
175
- background-color: #A66002;
176
- }
177
- .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-800 {
178
- background-color: #894B0A;
179
- }
180
- .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-900 {
181
- background-color: #743D0F;
182
- }
183
- .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-50 {
184
- background-color: #F1F4FD;
185
- }
186
- .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-100 {
187
- background-color: #DFE7FA;
188
- }
189
- .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-200 {
190
- background-color: #C5D4F8;
191
- }
192
- .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-300 {
193
- background-color: #9EB8F2;
194
- }
195
- .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-400 {
196
- background-color: #7093EA;
197
- }
198
- .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-500 {
199
- background-color: #4D6DE3;
200
- }
201
- .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-600 {
202
- background-color: #3950D7;
203
- }
204
- .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-700 {
205
- background-color: #303EC5;
206
- }
207
- .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-800 {
208
- background-color: #2D35A0;
209
- }
210
- .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-900 {
211
- background-color: #29317F;
212
- }
213
- .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-50 {
214
- background-color: #EEFAFF;
215
- }
216
- .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-100 {
217
- background-color: #D9F4FF;
218
- }
219
- .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-200 {
220
- background-color: #BBEDFF;
221
- }
222
- .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-300 {
223
- background-color: #8DE3FF;
224
- }
225
- .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-400 {
226
- background-color: #57D0FF;
227
- }
228
- .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-500 {
229
- background-color: #30B6FF;
230
- }
231
- .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-600 {
232
- background-color: #1999F7;
233
- }
234
- .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-700 {
235
- background-color: #1280E3;
236
- }
237
- .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-800 {
238
- background-color: #1566B8;
239
- }
240
- .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-900 {
241
- background-color: #175791;
242
- }
243
- .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-50 {
244
- background-color: #FBF6FE;
245
- }
246
- .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-100 {
247
- background-color: #F5EAFD;
248
- }
249
- .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-200 {
250
- background-color: #EDD8FC;
251
- }
252
- .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-300 {
253
- background-color: #E0BAF8;
254
- }
255
- .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-400 {
256
- background-color: #CD8DF3;
257
- }
258
- .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-500 {
259
- background-color: #B961EB;
260
- }
261
- .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-600 {
262
- background-color: #A541DC;
263
- }
264
- .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-700 {
265
- background-color: #9230C5;
266
- }
267
- .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-800 {
268
- background-color: #782B9E;
269
- }
270
- .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-900 {
271
- background-color: #62247F;
272
- }
273
- .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-50 {
274
- background-color: #FFF4FE;
275
- }
276
- .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-100 {
277
- background-color: #FFE7FD;
278
- }
279
- .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-200 {
280
- background-color: #FFCFFA;
281
- }
282
- .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-300 {
283
- background-color: #FEA9F1;
284
- }
285
- .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-400 {
286
- background-color: #FD75E7;
287
- }
288
- .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-500 {
289
- background-color: #F553DA;
290
- }
291
- .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-600 {
292
- background-color: #D821B6;
293
- }
294
- .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-700 {
295
- background-color: #B31892;
296
- }
297
- .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-800 {
298
- background-color: #921676;
299
- }
300
- .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-900 {
301
- background-color: #781761;
302
- }
303
- .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-50 {
304
- background-color: #FAFAFA;
305
- }
306
- .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-100 {
307
- background-color: #F5F5F5;
308
- }
309
- .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-200 {
310
- background-color: #E5E5E5;
311
- }
312
- .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-300 {
313
- background-color: #D4D4D4;
314
- }
315
- .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-400 {
316
- background-color: #A1A1A1;
317
- }
318
- .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-500 {
319
- background-color: #737373;
320
- }
321
- .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-600 {
322
- background-color: #525252;
323
- }
324
- .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-700 {
325
- background-color: #404040;
326
- }
327
- .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-800 {
328
- background-color: #262626;
329
- }
330
- .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-900 {
331
- background-color: #171717;
332
- }
333
- .lib-xplat-steps .step-item.completed .step-circle.xplat-black {
334
- background-color: #000000;
335
- }
336
- .lib-xplat-steps .step-item.completed .step-circle.xplat-white {
337
- background-color: #FFFFFF;
338
- }
339
- .lib-xplat-steps .step-item.completed .step-circle.test-default {
340
- background-color: #ffffff;
341
- }
342
- .lib-xplat-steps .step-item.completed .step-line.xplat-red-50 {
343
- background-color: #FFF0F0;
344
- }
345
- .lib-xplat-steps .step-item.completed .step-line.xplat-red-100 {
346
- background-color: #FFDDDE;
347
- }
348
- .lib-xplat-steps .step-item.completed .step-line.xplat-red-200 {
349
- background-color: #FFC1C2;
350
- }
351
- .lib-xplat-steps .step-item.completed .step-line.xplat-red-300 {
352
- background-color: #FF9698;
353
- }
354
- .lib-xplat-steps .step-item.completed .step-line.xplat-red-400 {
355
- background-color: #FF5A5D;
356
- }
357
- .lib-xplat-steps .step-item.completed .step-line.xplat-red-500 {
358
- background-color: #FF272B;
359
- }
360
- .lib-xplat-steps .step-item.completed .step-line.xplat-red-600 {
361
- background-color: #F80409;
362
- }
363
- .lib-xplat-steps .step-item.completed .step-line.xplat-red-700 {
364
- background-color: #D40105;
365
- }
366
- .lib-xplat-steps .step-item.completed .step-line.xplat-red-800 {
367
- background-color: #AE0609;
368
- }
369
- .lib-xplat-steps .step-item.completed .step-line.xplat-red-900 {
370
- background-color: #900C0F;
371
- }
372
- .lib-xplat-steps .step-item.completed .step-line.xplat-green-50 {
373
- background-color: #E5F6EA;
374
- }
375
- .lib-xplat-steps .step-item.completed .step-line.xplat-green-100 {
376
- background-color: #C1E7CC;
377
- }
378
- .lib-xplat-steps .step-item.completed .step-line.xplat-green-200 {
379
- background-color: #98D8AC;
380
- }
381
- .lib-xplat-steps .step-item.completed .step-line.xplat-green-300 {
382
- background-color: #6CCA8B;
383
- }
384
- .lib-xplat-steps .step-item.completed .step-line.xplat-green-400 {
385
- background-color: #47BE72;
386
- }
387
- .lib-xplat-steps .step-item.completed .step-line.xplat-green-500 {
388
- background-color: #10B259;
389
- }
390
- .lib-xplat-steps .step-item.completed .step-line.xplat-green-600 {
391
- background-color: #00A34F;
392
- }
393
- .lib-xplat-steps .step-item.completed .step-line.xplat-green-700 {
394
- background-color: #009143;
395
- }
396
- .lib-xplat-steps .step-item.completed .step-line.xplat-green-800 {
397
- background-color: #007F38;
398
- }
399
- .lib-xplat-steps .step-item.completed .step-line.xplat-green-900 {
400
- background-color: #006024;
401
- }
402
- .lib-xplat-steps .step-item.completed .step-line.xplat-orange-50 {
403
- background-color: #FFF8EC;
404
- }
405
- .lib-xplat-steps .step-item.completed .step-line.xplat-orange-100 {
406
- background-color: #FFF0D3;
407
- }
408
- .lib-xplat-steps .step-item.completed .step-line.xplat-orange-200 {
409
- background-color: #FFDDA5;
410
- }
411
- .lib-xplat-steps .step-item.completed .step-line.xplat-orange-300 {
412
- background-color: #FFC46D;
413
- }
414
- .lib-xplat-steps .step-item.completed .step-line.xplat-orange-400 {
415
- background-color: #FF9F32;
416
- }
417
- .lib-xplat-steps .step-item.completed .step-line.xplat-orange-500 {
418
- background-color: #FF820A;
419
- }
420
- .lib-xplat-steps .step-item.completed .step-line.xplat-orange-600 {
421
- background-color: #FF6900;
422
- }
423
- .lib-xplat-steps .step-item.completed .step-line.xplat-orange-700 {
424
- background-color: #CC4B02;
425
- }
426
- .lib-xplat-steps .step-item.completed .step-line.xplat-orange-800 {
427
- background-color: #A13A0B;
428
- }
429
- .lib-xplat-steps .step-item.completed .step-line.xplat-orange-900 {
430
- background-color: #82320C;
431
- }
432
- .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-50 {
433
- background-color: #FFFDE7;
434
- }
435
- .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-100 {
436
- background-color: #FFFAC1;
437
- }
438
- .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-200 {
439
- background-color: #FFF186;
440
- }
441
- .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-300 {
442
- background-color: #FFE041;
443
- }
444
- .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-400 {
445
- background-color: #FFCC0D;
446
- }
447
- .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-500 {
448
- background-color: #F0B100;
449
- }
450
- .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-600 {
451
- background-color: #D18800;
452
- }
453
- .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-700 {
454
- background-color: #A66002;
455
- }
456
- .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-800 {
457
- background-color: #894B0A;
458
- }
459
- .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-900 {
460
- background-color: #743D0F;
461
- }
462
- .lib-xplat-steps .step-item.completed .step-line.xplat-blue-50 {
463
- background-color: #F1F4FD;
464
- }
465
- .lib-xplat-steps .step-item.completed .step-line.xplat-blue-100 {
466
- background-color: #DFE7FA;
467
- }
468
- .lib-xplat-steps .step-item.completed .step-line.xplat-blue-200 {
469
- background-color: #C5D4F8;
470
- }
471
- .lib-xplat-steps .step-item.completed .step-line.xplat-blue-300 {
472
- background-color: #9EB8F2;
473
- }
474
- .lib-xplat-steps .step-item.completed .step-line.xplat-blue-400 {
475
- background-color: #7093EA;
476
- }
477
- .lib-xplat-steps .step-item.completed .step-line.xplat-blue-500 {
478
- background-color: #4D6DE3;
479
- }
480
- .lib-xplat-steps .step-item.completed .step-line.xplat-blue-600 {
481
- background-color: #3950D7;
482
- }
483
- .lib-xplat-steps .step-item.completed .step-line.xplat-blue-700 {
484
- background-color: #303EC5;
485
- }
486
- .lib-xplat-steps .step-item.completed .step-line.xplat-blue-800 {
487
- background-color: #2D35A0;
488
- }
489
- .lib-xplat-steps .step-item.completed .step-line.xplat-blue-900 {
490
- background-color: #29317F;
491
- }
492
- .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-50 {
493
- background-color: #EEFAFF;
494
- }
495
- .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-100 {
496
- background-color: #D9F4FF;
497
- }
498
- .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-200 {
499
- background-color: #BBEDFF;
500
- }
501
- .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-300 {
502
- background-color: #8DE3FF;
503
- }
504
- .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-400 {
505
- background-color: #57D0FF;
506
- }
507
- .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-500 {
508
- background-color: #30B6FF;
509
- }
510
- .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-600 {
511
- background-color: #1999F7;
512
- }
513
- .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-700 {
514
- background-color: #1280E3;
515
- }
516
- .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-800 {
517
- background-color: #1566B8;
518
- }
519
- .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-900 {
520
- background-color: #175791;
521
- }
522
- .lib-xplat-steps .step-item.completed .step-line.xplat-purple-50 {
523
- background-color: #FBF6FE;
524
- }
525
- .lib-xplat-steps .step-item.completed .step-line.xplat-purple-100 {
526
- background-color: #F5EAFD;
527
- }
528
- .lib-xplat-steps .step-item.completed .step-line.xplat-purple-200 {
529
- background-color: #EDD8FC;
530
- }
531
- .lib-xplat-steps .step-item.completed .step-line.xplat-purple-300 {
532
- background-color: #E0BAF8;
533
- }
534
- .lib-xplat-steps .step-item.completed .step-line.xplat-purple-400 {
535
- background-color: #CD8DF3;
536
- }
537
- .lib-xplat-steps .step-item.completed .step-line.xplat-purple-500 {
538
- background-color: #B961EB;
539
- }
540
- .lib-xplat-steps .step-item.completed .step-line.xplat-purple-600 {
541
- background-color: #A541DC;
542
- }
543
- .lib-xplat-steps .step-item.completed .step-line.xplat-purple-700 {
544
- background-color: #9230C5;
545
- }
546
- .lib-xplat-steps .step-item.completed .step-line.xplat-purple-800 {
547
- background-color: #782B9E;
548
- }
549
- .lib-xplat-steps .step-item.completed .step-line.xplat-purple-900 {
550
- background-color: #62247F;
551
- }
552
- .lib-xplat-steps .step-item.completed .step-line.xplat-pink-50 {
553
- background-color: #FFF4FE;
554
- }
555
- .lib-xplat-steps .step-item.completed .step-line.xplat-pink-100 {
556
- background-color: #FFE7FD;
557
- }
558
- .lib-xplat-steps .step-item.completed .step-line.xplat-pink-200 {
559
- background-color: #FFCFFA;
560
- }
561
- .lib-xplat-steps .step-item.completed .step-line.xplat-pink-300 {
562
- background-color: #FEA9F1;
563
- }
564
- .lib-xplat-steps .step-item.completed .step-line.xplat-pink-400 {
565
- background-color: #FD75E7;
566
- }
567
- .lib-xplat-steps .step-item.completed .step-line.xplat-pink-500 {
568
- background-color: #F553DA;
569
- }
570
- .lib-xplat-steps .step-item.completed .step-line.xplat-pink-600 {
571
- background-color: #D821B6;
572
- }
573
- .lib-xplat-steps .step-item.completed .step-line.xplat-pink-700 {
574
- background-color: #B31892;
575
- }
576
- .lib-xplat-steps .step-item.completed .step-line.xplat-pink-800 {
577
- background-color: #921676;
578
- }
579
- .lib-xplat-steps .step-item.completed .step-line.xplat-pink-900 {
580
- background-color: #781761;
581
- }
582
- .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-50 {
583
- background-color: #FAFAFA;
584
- }
585
- .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-100 {
586
- background-color: #F5F5F5;
587
- }
588
- .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-200 {
589
- background-color: #E5E5E5;
590
- }
591
- .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-300 {
592
- background-color: #D4D4D4;
593
- }
594
- .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-400 {
595
- background-color: #A1A1A1;
596
- }
597
- .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-500 {
598
- background-color: #737373;
599
- }
600
- .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-600 {
601
- background-color: #525252;
602
- }
603
- .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-700 {
604
- background-color: #404040;
605
- }
606
- .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-800 {
607
- background-color: #262626;
608
- }
609
- .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-900 {
610
- background-color: #171717;
611
- }
612
- .lib-xplat-steps .step-item.completed .step-line.xplat-black {
613
- background-color: #000000;
614
- }
615
- .lib-xplat-steps .step-item.completed .step-line.xplat-white {
616
- background-color: #FFFFFF;
617
- }
618
- .lib-xplat-steps .step-item.completed .step-line.test-default {
619
- background-color: #ffffff;
64
+ .lib-xplat-steps .step-item.completed .step-line {
65
+ background-color: var(--ds-color);
620
66
  }
621
67
  .lib-xplat-steps .step-item.active .step-circle {
622
- color: #FFFFFF;
623
- }
624
- .lib-xplat-steps .step-item.active .step-circle.xplat-red-50 {
625
- background-color: #FFF0F0;
626
- }
627
- .lib-xplat-steps .step-item.active .step-circle.xplat-red-100 {
628
- background-color: #FFDDDE;
629
- }
630
- .lib-xplat-steps .step-item.active .step-circle.xplat-red-200 {
631
- background-color: #FFC1C2;
632
- }
633
- .lib-xplat-steps .step-item.active .step-circle.xplat-red-300 {
634
- background-color: #FF9698;
635
- }
636
- .lib-xplat-steps .step-item.active .step-circle.xplat-red-400 {
637
- background-color: #FF5A5D;
638
- }
639
- .lib-xplat-steps .step-item.active .step-circle.xplat-red-500 {
640
- background-color: #FF272B;
641
- }
642
- .lib-xplat-steps .step-item.active .step-circle.xplat-red-600 {
643
- background-color: #F80409;
644
- }
645
- .lib-xplat-steps .step-item.active .step-circle.xplat-red-700 {
646
- background-color: #D40105;
647
- }
648
- .lib-xplat-steps .step-item.active .step-circle.xplat-red-800 {
649
- background-color: #AE0609;
650
- }
651
- .lib-xplat-steps .step-item.active .step-circle.xplat-red-900 {
652
- background-color: #900C0F;
653
- }
654
- .lib-xplat-steps .step-item.active .step-circle.xplat-green-50 {
655
- background-color: #E5F6EA;
656
- }
657
- .lib-xplat-steps .step-item.active .step-circle.xplat-green-100 {
658
- background-color: #C1E7CC;
659
- }
660
- .lib-xplat-steps .step-item.active .step-circle.xplat-green-200 {
661
- background-color: #98D8AC;
662
- }
663
- .lib-xplat-steps .step-item.active .step-circle.xplat-green-300 {
664
- background-color: #6CCA8B;
665
- }
666
- .lib-xplat-steps .step-item.active .step-circle.xplat-green-400 {
667
- background-color: #47BE72;
668
- }
669
- .lib-xplat-steps .step-item.active .step-circle.xplat-green-500 {
670
- background-color: #10B259;
671
- }
672
- .lib-xplat-steps .step-item.active .step-circle.xplat-green-600 {
673
- background-color: #00A34F;
674
- }
675
- .lib-xplat-steps .step-item.active .step-circle.xplat-green-700 {
676
- background-color: #009143;
677
- }
678
- .lib-xplat-steps .step-item.active .step-circle.xplat-green-800 {
679
- background-color: #007F38;
680
- }
681
- .lib-xplat-steps .step-item.active .step-circle.xplat-green-900 {
682
- background-color: #006024;
683
- }
684
- .lib-xplat-steps .step-item.active .step-circle.xplat-orange-50 {
685
- background-color: #FFF8EC;
686
- }
687
- .lib-xplat-steps .step-item.active .step-circle.xplat-orange-100 {
688
- background-color: #FFF0D3;
689
- }
690
- .lib-xplat-steps .step-item.active .step-circle.xplat-orange-200 {
691
- background-color: #FFDDA5;
692
- }
693
- .lib-xplat-steps .step-item.active .step-circle.xplat-orange-300 {
694
- background-color: #FFC46D;
695
- }
696
- .lib-xplat-steps .step-item.active .step-circle.xplat-orange-400 {
697
- background-color: #FF9F32;
698
- }
699
- .lib-xplat-steps .step-item.active .step-circle.xplat-orange-500 {
700
- background-color: #FF820A;
701
- }
702
- .lib-xplat-steps .step-item.active .step-circle.xplat-orange-600 {
703
- background-color: #FF6900;
704
- }
705
- .lib-xplat-steps .step-item.active .step-circle.xplat-orange-700 {
706
- background-color: #CC4B02;
707
- }
708
- .lib-xplat-steps .step-item.active .step-circle.xplat-orange-800 {
709
- background-color: #A13A0B;
710
- }
711
- .lib-xplat-steps .step-item.active .step-circle.xplat-orange-900 {
712
- background-color: #82320C;
713
- }
714
- .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-50 {
715
- background-color: #FFFDE7;
716
- }
717
- .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-100 {
718
- background-color: #FFFAC1;
719
- }
720
- .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-200 {
721
- background-color: #FFF186;
722
- }
723
- .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-300 {
724
- background-color: #FFE041;
725
- }
726
- .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-400 {
727
- background-color: #FFCC0D;
728
- }
729
- .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-500 {
730
- background-color: #F0B100;
731
- }
732
- .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-600 {
733
- background-color: #D18800;
734
- }
735
- .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-700 {
736
- background-color: #A66002;
737
- }
738
- .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-800 {
739
- background-color: #894B0A;
740
- }
741
- .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-900 {
742
- background-color: #743D0F;
743
- }
744
- .lib-xplat-steps .step-item.active .step-circle.xplat-blue-50 {
745
- background-color: #F1F4FD;
746
- }
747
- .lib-xplat-steps .step-item.active .step-circle.xplat-blue-100 {
748
- background-color: #DFE7FA;
749
- }
750
- .lib-xplat-steps .step-item.active .step-circle.xplat-blue-200 {
751
- background-color: #C5D4F8;
752
- }
753
- .lib-xplat-steps .step-item.active .step-circle.xplat-blue-300 {
754
- background-color: #9EB8F2;
755
- }
756
- .lib-xplat-steps .step-item.active .step-circle.xplat-blue-400 {
757
- background-color: #7093EA;
758
- }
759
- .lib-xplat-steps .step-item.active .step-circle.xplat-blue-500 {
760
- background-color: #4D6DE3;
761
- }
762
- .lib-xplat-steps .step-item.active .step-circle.xplat-blue-600 {
763
- background-color: #3950D7;
764
- }
765
- .lib-xplat-steps .step-item.active .step-circle.xplat-blue-700 {
766
- background-color: #303EC5;
767
- }
768
- .lib-xplat-steps .step-item.active .step-circle.xplat-blue-800 {
769
- background-color: #2D35A0;
770
- }
771
- .lib-xplat-steps .step-item.active .step-circle.xplat-blue-900 {
772
- background-color: #29317F;
773
- }
774
- .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-50 {
775
- background-color: #EEFAFF;
776
- }
777
- .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-100 {
778
- background-color: #D9F4FF;
779
- }
780
- .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-200 {
781
- background-color: #BBEDFF;
782
- }
783
- .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-300 {
784
- background-color: #8DE3FF;
785
- }
786
- .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-400 {
787
- background-color: #57D0FF;
788
- }
789
- .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-500 {
790
- background-color: #30B6FF;
791
- }
792
- .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-600 {
793
- background-color: #1999F7;
794
- }
795
- .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-700 {
796
- background-color: #1280E3;
797
- }
798
- .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-800 {
799
- background-color: #1566B8;
800
- }
801
- .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-900 {
802
- background-color: #175791;
803
- }
804
- .lib-xplat-steps .step-item.active .step-circle.xplat-purple-50 {
805
- background-color: #FBF6FE;
806
- }
807
- .lib-xplat-steps .step-item.active .step-circle.xplat-purple-100 {
808
- background-color: #F5EAFD;
809
- }
810
- .lib-xplat-steps .step-item.active .step-circle.xplat-purple-200 {
811
- background-color: #EDD8FC;
812
- }
813
- .lib-xplat-steps .step-item.active .step-circle.xplat-purple-300 {
814
- background-color: #E0BAF8;
815
- }
816
- .lib-xplat-steps .step-item.active .step-circle.xplat-purple-400 {
817
- background-color: #CD8DF3;
818
- }
819
- .lib-xplat-steps .step-item.active .step-circle.xplat-purple-500 {
820
- background-color: #B961EB;
821
- }
822
- .lib-xplat-steps .step-item.active .step-circle.xplat-purple-600 {
823
- background-color: #A541DC;
824
- }
825
- .lib-xplat-steps .step-item.active .step-circle.xplat-purple-700 {
826
- background-color: #9230C5;
827
- }
828
- .lib-xplat-steps .step-item.active .step-circle.xplat-purple-800 {
829
- background-color: #782B9E;
830
- }
831
- .lib-xplat-steps .step-item.active .step-circle.xplat-purple-900 {
832
- background-color: #62247F;
833
- }
834
- .lib-xplat-steps .step-item.active .step-circle.xplat-pink-50 {
835
- background-color: #FFF4FE;
836
- }
837
- .lib-xplat-steps .step-item.active .step-circle.xplat-pink-100 {
838
- background-color: #FFE7FD;
839
- }
840
- .lib-xplat-steps .step-item.active .step-circle.xplat-pink-200 {
841
- background-color: #FFCFFA;
842
- }
843
- .lib-xplat-steps .step-item.active .step-circle.xplat-pink-300 {
844
- background-color: #FEA9F1;
845
- }
846
- .lib-xplat-steps .step-item.active .step-circle.xplat-pink-400 {
847
- background-color: #FD75E7;
848
- }
849
- .lib-xplat-steps .step-item.active .step-circle.xplat-pink-500 {
850
- background-color: #F553DA;
851
- }
852
- .lib-xplat-steps .step-item.active .step-circle.xplat-pink-600 {
853
- background-color: #D821B6;
854
- }
855
- .lib-xplat-steps .step-item.active .step-circle.xplat-pink-700 {
856
- background-color: #B31892;
857
- }
858
- .lib-xplat-steps .step-item.active .step-circle.xplat-pink-800 {
859
- background-color: #921676;
860
- }
861
- .lib-xplat-steps .step-item.active .step-circle.xplat-pink-900 {
862
- background-color: #781761;
863
- }
864
- .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-50 {
865
- background-color: #FAFAFA;
866
- }
867
- .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-100 {
868
- background-color: #F5F5F5;
869
- }
870
- .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-200 {
871
- background-color: #E5E5E5;
872
- }
873
- .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-300 {
874
- background-color: #D4D4D4;
875
- }
876
- .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-400 {
877
- background-color: #A1A1A1;
878
- }
879
- .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-500 {
880
- background-color: #737373;
881
- }
882
- .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-600 {
883
- background-color: #525252;
884
- }
885
- .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-700 {
886
- background-color: #404040;
887
- }
888
- .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-800 {
889
- background-color: #262626;
890
- }
891
- .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-900 {
892
- background-color: #171717;
893
- }
894
- .lib-xplat-steps .step-item.active .step-circle.xplat-black {
895
- background-color: #000000;
896
- }
897
- .lib-xplat-steps .step-item.active .step-circle.xplat-white {
898
- background-color: #FFFFFF;
899
- }
900
- .lib-xplat-steps .step-item.active .step-circle.test-default {
901
- background-color: #ffffff;
68
+ color: var(--xplat-white);
69
+ background-color: var(--ds-color);
902
70
  }
903
71
  .lib-xplat-steps .step-item.active .step-line {
904
- background-color: #E5E5E5;
72
+ background-color: var(--xplat-neutral-200);
905
73
  }
906
74
  .lib-xplat-steps .step-item.pending .step-circle {
907
- background-color: #E5E5E5;
908
- color: #737373;
75
+ background-color: var(--xplat-neutral-200);
76
+ color: var(--xplat-neutral-500);
909
77
  }
910
78
  .lib-xplat-steps .step-item.pending .step-line {
911
- background-color: #E5E5E5;
79
+ background-color: var(--xplat-neutral-200);
912
80
  }
913
81
  .lib-xplat-steps .step-item.pending .step-title {
914
- color: #A1A1A1;
82
+ color: var(--xplat-neutral-400);
915
83
  }
916
84
  .lib-xplat-steps .step-item.pending .step-description {
917
- color: #D4D4D4;
85
+ color: var(--xplat-neutral-300);
918
86
  }