@douyinfe/semi-foundation 2.1.0 → 2.1.4

package/lib/cjs/steps/steps.css

@@ -0,0 +1,444 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-steps .semi-col {
+  flex: 1;
+}
+.semi-steps-vertical .semi-row-flex {
+  flex-direction: column;
+}
+.semi-steps .semi-steps-item {
+  box-sizing: border-box;
+  display: flex;
+  height: 72px;
+  position: relative;
+  overflow: hidden;
+  margin-right: 16px;
+  border: 1px solid transparent;
+  border-radius: var(--semi-border-radius-medium);
+  padding: 12px 16px;
+}
+.semi-steps .semi-steps-item .semi-steps-item-title {
+  position: relative;
+  font-size: 18px;
+  line-height: 24px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 600;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-0);
+}
+.semi-steps .semi-steps-item .semi-steps-item-description {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: var(--semi-color-text-2);
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.semi-steps .semi-steps-item-process {
+  background-color: var(--semi-color-primary-light-default);
+}
+.semi-steps .semi-steps-item-process .semi-steps-item-left:not(.semi-steps-item-icon) {
+  background: var(--semi-color-primary);
+}
+.semi-steps .semi-steps-item-process .semi-steps-item-title,
+.semi-steps .semi-steps-item-process .semi-steps-item-icon {
+  color: var(--semi-color-primary);
+}
+.semi-steps .semi-steps-item-wait .semi-steps-item-left:not(.semi-steps-item-icon) {
+  background: var(--semi-color-text-2);
+}
+.semi-steps .semi-steps-item-wait .semi-steps-item-icon {
+  color: var(--semi-color-text-2);
+}
+.semi-steps .semi-steps-item-finish .semi-icon,
+.semi-steps .semi-steps-item-finish .semi-steps-item-title {
+  color: var(--semi-color-success);
+}
+.semi-steps .semi-steps-item-finish:hover {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-steps .semi-steps-item-finish:hover .semi-icon,
+.semi-steps .semi-steps-item-finish:hover .semi-steps-item-title {
+  color: var(--semi-color-success-hover);
+}
+.semi-steps .semi-steps-item-finish:active {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-steps .semi-steps-item-finish:active .semi-icon,
+.semi-steps .semi-steps-item-finish:active .semi-steps-item-title {
+  color: var(--semi-color-success-active);
+}
+.semi-steps .semi-steps-item-error .semi-icon,
+.semi-steps .semi-steps-item-error .semi-steps-item-title {
+  color: var(--semi-color-danger);
+}
+.semi-steps .semi-steps-item-error:hover {
+  background: var(--semi-color-fill-0);
+}
+.semi-steps .semi-steps-item-error:hover .semi-icon,
+.semi-steps .semi-steps-item-error:hover .semi-steps-item-title {
+  color: var(--semi-color-danger-hover);
+}
+.semi-steps .semi-steps-item-error:active {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-steps .semi-steps-item-error:active .semi-icon,
+.semi-steps .semi-steps-item-error:active .semi-steps-item-title {
+  color: var(--semi-color-danger-active);
+}
+.semi-steps .semi-steps-item-warning .semi-steps-item-title,
+.semi-steps .semi-steps-item-warning .semi-icon {
+  color: var(--semi-color-warning);
+}
+.semi-steps .semi-steps-item-warning:hover {
+  background: var(--semi-color-fill-0);
+}
+.semi-steps .semi-steps-item-warning:hover .semi-steps-item-title,
+.semi-steps .semi-steps-item-warning:hover .semi-icon {
+  color: var(--semi-color-warning-hover);
+}
+.semi-steps .semi-steps-item-warning:active {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-steps .semi-steps-item-warning:active .semi-steps-item-title,
+.semi-steps .semi-steps-item-warning:active .semi-icon {
+  color: var(--semi-color-warning-active);
+}
+.semi-steps .semi-steps-item-clickable {
+  cursor: pointer;
+}
+.semi-steps .semi-steps-item-left {
+  width: 24px;
+  height: 24px;
+  line-height: 32px;
+  text-align: center;
+  border-radius: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  line-height: 28px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 600;
+  flex-grow: 0;
+}
+.semi-steps .semi-steps-item-left.semi-steps-item-plain {
+  color: white;
+}
+.semi-steps .semi-steps-item-left-process {
+  background: var(--semi-color-primary-light-default);
+}
+.semi-steps .semi-steps-item-content {
+  margin-left: 16px;
+  flex: 1;
+  overflow: hidden;
+}
+
+.semi-steps-basic.semi-steps-horizontal {
+  display: flex;
+  flex-flow: row nowrap;
+}
+.semi-steps-basic.semi-steps-horizontal.semi-steps-hasline .semi-steps-item-title::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 100%;
+  display: block;
+  width: 9999px;
+  height: 1px;
+  background: var(--semi-color-fill-2);
+}
+.semi-steps-basic.semi-steps-horizontal .semi-steps-item {
+  padding-left: 16px;
+}
+.semi-steps-basic.semi-steps-horizontal .semi-steps-item:first-child {
+  padding-left: 0;
+}
+.semi-steps-basic.semi-steps-horizontal .semi-steps-item:last-child {
+  flex: none;
+}
+.semi-steps-basic.semi-steps-horizontal .semi-steps-item:last-child .semi-steps-item-title {
+  max-width: 100%;
+  padding-right: 0;
+}
+.semi-steps-basic.semi-steps-horizontal .semi-steps-item:last-child .semi-steps-item-title::after {
+  display: none;
+}
+.semi-steps-basic.semi-steps-horizontal .semi-steps-item-done .semi-steps-item-container .semi-steps-item-title::after {
+  background: var(--semi-color-primary);
+}
+.semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-content {
+  flex: 1;
+}
+.semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-description {
+  font-size: 12px;
+  line-height: 16px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: var(--semi-color-text-2);
+  width: 100%;
+  max-width: 268px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title {
+  max-width: 80%;
+}
+.semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title .semi-steps-item-title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.semi-steps-basic.semi-steps-vertical {
+  display: flex;
+  flex-flow: column nowrap;
+}
+.semi-steps-basic.semi-steps-vertical.semi-steps-small .semi-steps-item .semi-steps-item-content {
+  min-height: 40px;
+}
+.semi-steps-basic.semi-steps-vertical.semi-steps-hasline .semi-steps-item-icon::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  display: block;
+  width: 1px;
+  height: 9999px;
+  background: var(--semi-color-fill-2);
+}
+.semi-steps-basic.semi-steps-vertical .semi-steps-item {
+  padding-top: 9px;
+}
+.semi-steps-basic.semi-steps-vertical .semi-steps-item:first-child {
+  padding-top: 0;
+}
+.semi-steps-basic.semi-steps-vertical .semi-steps-item:last-child .semi-steps-item-icon::after {
+  display: none;
+}
+.semi-steps-basic.semi-steps-vertical .semi-steps-item-done .semi-steps-item-icon::after {
+  background: var(--semi-color-primary);
+}
+.semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-content {
+  min-height: 42px;
+  padding-bottom: 22px;
+}
+.semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-icon {
+  display: inline-flex;
+  position: relative;
+  padding-bottom: 9px;
+}
+.semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-description {
+  font-size: 12px;
+  line-height: 16px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: var(--semi-color-text-2);
+  width: 100%;
+}
+.semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-title {
+  max-width: 100%;
+}
+.semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-title .semi-steps-item-title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.semi-steps-basic .semi-steps-item {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  overflow: hidden;
+  flex: 1;
+  cursor: pointer;
+}
+.semi-steps-basic .semi-steps-item:hover .semi-steps-item-title {
+  color: var(--semi-color-focus-border);
+}
+.semi-steps-basic .semi-steps-item:hover .semi-steps-item-description {
+  color: var(--semi-color-focus-border);
+}
+.semi-steps-basic .semi-steps-item .semi-steps-item-container {
+  display: flex;
+  align-items: flex-start;
+}
+.semi-steps-basic .semi-steps-item .semi-steps-item-left {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 8px;
+}
+.semi-steps-basic .semi-steps-item .semi-steps-item-left .semi-steps-item-icon {
+  display: flex;
+  height: 24px;
+  align-items: center;
+}
+.semi-steps-basic .semi-steps-item .semi-steps-item-left .semi-steps-item-number-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 16px;
+  line-height: 22px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 600;
+  background: var(--semi-color-primary);
+  border-radius: var(--semi-border-radius-circle);
+  color: var(--semi-color-white);
+}
+.semi-steps-basic .semi-steps-item .semi-steps-item-title {
+  position: relative;
+  display: inline-block;
+  font-size: 16px;
+  line-height: 22px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  line-height: 24px;
+  font-weight: 600;
+  color: var(--semi-color-text-0);
+  vertical-align: top;
+  padding-right: 16px;
+  padding-bottom: 4px;
+}
+.semi-steps-basic .semi-steps-item-finish .semi-steps-item-left .semi-steps-item-icon {
+  color: var(--semi-color-primary);
+}
+.semi-steps-basic .semi-steps-item-finish .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
+  color: var(--semi-color-white);
+}
+.semi-steps-basic .semi-steps-item-wait .semi-steps-item-title {
+  color: var(--semi-color-text-2);
+}
+.semi-steps-basic .semi-steps-item-wait .semi-steps-item-left .semi-steps-item-icon {
+  color: var(--semi-color-text-2);
+}
+.semi-steps-basic .semi-steps-item-wait .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
+  background: var(--semi-color-fill-0);
+  color: var(--semi-color-text-2);
+}
+.semi-steps-basic .semi-steps-item-wait:hover .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
+  background: var(--semi-color-secondary-light-default);
+  color: var(--semi-color-focus-border);
+}
+.semi-steps-basic .semi-steps-item-process .semi-steps-item-left .semi-steps-item-icon {
+  color: var(--semi-color-primary);
+}
+.semi-steps-basic .semi-steps-item-process .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
+  color: var(--semi-color-white);
+}
+.semi-steps-basic .semi-steps-item-error .semi-steps-item-left .semi-steps-item-icon {
+  color: var(--semi-color-danger);
+}
+.semi-steps-basic .semi-steps-item-error .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
+  color: var(--semi-color-primary);
+}
+.semi-steps-basic .semi-steps-item-warning .semi-steps-item-left .semi-steps-item-icon {
+  color: var(--semi-color-warning);
+}
+.semi-steps-basic .semi-steps-item-warning .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
+  color: var(--semi-color-white);
+}
+.semi-steps-basic.semi-steps-small .semi-steps-item .semi-steps-item-title {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+.semi-steps-basic.semi-steps-small .semi-steps-item .semi-steps-item-left .semi-steps-item-icon {
+  height: 20px;
+}
+.semi-steps-basic.semi-steps-small .semi-steps-item .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
+  font-size: 12px;
+  line-height: 16px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  width: 20px;
+  height: 20px;
+}
+
+.semi-steps-nav {
+  display: inline-flex;
+  flex-flow: row nowrap;
+}
+.semi-steps-nav .semi-steps-item {
+  box-sizing: border-box;
+}
+.semi-steps-nav .semi-steps-item:last-child {
+  flex: none;
+}
+.semi-steps-nav .semi-steps-item:last-child .semi-steps-item-content {
+  width: auto;
+}
+.semi-steps-nav .semi-steps-item .semi-steps-item-container {
+  display: flex;
+  align-items: center;
+  color: var(--semi-color-text-2);
+}
+.semi-steps-nav .semi-steps-item .semi-steps-item-container .semi-steps-item-icon {
+  display: inline-flex;
+  flex: 1;
+  justify-content: center;
+  color: var(--semi-grey-3);
+  min-width: 60px;
+}
+.semi-steps-nav .semi-steps-item .semi-steps-item-content {
+  flex: 1;
+  display: inline-block;
+}
+.semi-steps-nav .semi-steps-item .semi-steps-item-title {
+  font-size: 16px;
+  line-height: 22px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  max-width: 17em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 400;
+}
+.semi-steps-nav .semi-steps-item-active .semi-steps-item-title {
+  color: var(--semi-color-text-0);
+  font-weight: 600;
+}
+.semi-steps-nav.semi-steps-small .semi-steps-item .semi-steps-item-title {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.semi-rtl .semi-steps,
+.semi-portal-rtl .semi-steps {
+  direction: rtl;
+}
+.semi-rtl .semi-steps-item,
+.semi-portal-rtl .semi-steps-item {
+  margin-right: auto;
+  margin-left: 16px;
+}
+.semi-rtl .semi-steps-item-content,
+.semi-portal-rtl .semi-steps-item-content {
+  margin-left: auto;
+  margin-right: 16px;
+}
+.semi-rtl .semi-steps-basic,
+.semi-portal-rtl .semi-steps-basic {
+  direction: rtl;
+}
+.semi-rtl .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title,
+.semi-portal-rtl .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title {
+  padding-left: 16px;
+}
+.semi-rtl .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title::after,
+.semi-portal-rtl .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title::after {
+  right: 100%;
+}
+.semi-rtl .semi-steps-basic.semi-steps-vertical .semi-steps-item,
+.semi-portal-rtl .semi-steps-basic.semi-steps-vertical .semi-steps-item {
+  margin: 0;
+}
+.semi-rtl .semi-steps-nav,
+.semi-portal-rtl .semi-steps-nav {
+  direction: rtl;
+}

package/lib/cjs/steps/steps.scss

@@ -0,0 +1,9 @@
+// @import '../theme/variables.scss';
+// @import '../theme/mixin.scss';
+// @import '../theme/font.scss';
+@import "./variables.scss";
+@import "./fillSteps.scss";
+@import "./bacisSteps.scss";
+@import "./navSteps.scss";
+
+@import "./rtl.scss";

package/lib/cjs/steps/variables.scss

@@ -0,0 +1,104 @@
+// Color
+$color-steps-bg-active: var(--semi-color-fill-1); // 步骤条背景 - 按下态
+$color-steps-bg-default: var(--semi-color-text-2); // 未到达步骤条图标背景
+$color-steps-bg-hover: var(--semi-color-fill-0); // 步骤条背景 - 悬浮态
+$color-steps-border-default: transparent; // 步骤条描边 - 默认
+$color-steps-icon-default: var(--semi-color-text-2); // 未到达步骤条图标背景
+$color-steps-text-default: white; // 步骤条图标默认文本颜色
+$color-steps_danger-text-active: var(--semi-color-danger-active); // 错误步骤条文本颜色 - 按下态
+$color-steps_danger-text-default: var(--semi-color-danger); // 错误步骤条文本颜色 - 默认态
+$color-steps_danger-text-hover: var(--semi-color-danger-hover); // 错误步骤条文本颜色 - 悬浮态
+$color-steps_icon_after-bg: var(--semi-color-fill-2);
+$color-steps_item_description-text-hover: var(--semi-color-focus-border); // 步骤条辅助描述文本颜色 - 悬浮态
+$color-steps_item_done_after-bg: var(--semi-color-primary); // 完成步骤条尾部连接线颜色
+$color-steps_item_done_icon_after-bg: var(--semi-color-primary);
+$color-steps_item_error_left-icon: var(--semi-color-danger); // 错误步骤条图标颜色
+$color-steps_item_error_left_number-icon: var(--semi-color-primary); // 错误步骤条数字序号文本颜色
+$color-steps_item_finish-icon: var(--semi-color-primary); // 已完成步骤条图标颜色
+$color-steps_item_finish_number-icon: var(--semi-color-white); // 已完成步骤条对勾图标颜色
+$color-steps_item_left_number_icon-bg: var(--semi-color-primary); // 已完成步骤条图标背景颜色
+$color-steps_item_left_number_icon-icon: var(--semi-color-white); // 已完成步骤条图标文字颜色
+$color-steps_item_process_left-icon: var(--semi-color-primary); // 进行中步骤条对勾图标颜色
+$color-steps_item_process_left_number-icon: var(--semi-color-white); // 进行中步骤条对勾图标颜色
+$color-steps_item_title-text-hover: var(--semi-color-focus-border); // 步骤条标题文字悬停颜色
+$color-steps_item_wait_left_icon-icon: var(--semi-color-text-2); // 未到达步骤条图标颜色
+$color-steps_item_wait_left_number_icon-bg-hover: var(--semi-color-secondary-light-default); // 未到达步骤条图标背景颜色 - 悬浮态
+$color-steps_item_wait_left_number_icon-bg: var(--semi-color-fill-0); // 未到达步骤条图标背景颜色
+$color-steps_item_wait_left_number_icon-icon-hover: var(--semi-color-focus-border); // 未到达步骤条图标颜色 - 悬浮态
+$color-steps_item_wait_left_number_icon-icon: var(--semi-color-text-2); // 未到达步骤条内部图标颜色
+$color-steps_item_wait_title-text: var(--semi-color-text-2); // 未到达步骤条标题文字颜色
+$color-steps_item_warning_left-icon: var(--semi-color-warning); // 警告步骤条图标颜色
+$color-steps_item_warning_left_number-icon: var(--semi-color-white); // 警告步骤条数字序号文本颜色
+$color-steps_main-text-default: var(--semi-color-text-0); // 步骤条标题文本颜色
+$color-steps_minor-text-default: var(--semi-color-text-2); // 步骤条辅助描述文本颜色
+$color-steps_nav_item_container-text: var(--semi-color-text-2); // 步骤条容器内文本颜色
+$color-steps_nav_item-icon: var(--semi-grey-3);
+$color-steps_nav_item_title-text-active: var(--semi-color-text-0); // 步骤条标题颜色 - 按下态
+$color-steps_primary-bg-default: var(--semi-color-primary); // 旧版进行中步骤条背景色 - 默认
+$color-steps_primary-icon-default: var(--semi-color-primary); // 旧版进行中步骤条图标色 - 默认
+$color-steps_process-bg-default: var(--semi-color-primary-light-default); // 旧版进行中步骤条背景色 - 默认
+$color-steps_success-text-active: var(--semi-color-success-active); // 旧版已完成步骤条文字颜色 - 按下态
+$color-steps_success-text-default: var(--semi-color-success); // 旧版已完成步骤条文字颜色 - 默认态
+$color-steps_success-text-hover: var(--semi-color-success-hover); // 旧版已完成步骤条文字颜色 - 悬浮态
+$color-steps_title_after-bg: var(--semi-color-fill-2); // 旧版步骤条连线颜色
+$color-steps_warning-text-active: var(--semi-color-warning-active); // 旧版警告步骤条文字颜色 - 按下态
+$color-steps_warning-text-default: var(--semi-color-warning); // 旧版警告步骤条文字颜色 - 默认态
+$color-steps_warning-text-hover: var(--semi-color-warning-hover); // 旧版警告步骤条文字颜色 - 悬浮态
+
+// Width/Height
+$width-steps_basic_item_description: 100%; // 步骤条辅助描述文本宽度
+$width-steps_basic_item_description-maxWidth: 268px; // 步骤条辅助描述文本最大宽度
+$width-steps_basic_item_title-maxWidth: 80%; // 步骤条标题宽度
+$height-steps_basic_vertical_icon_content-minHeight: 42px; // 垂直步骤条图标+内容最小高度
+$width-steps_basic_vertical_item_title-maxWidth: 100%; // 垂直步骤条标题最大宽度
+$width-steps_basic_vertical_item_description: 100%; // 垂直步骤条辅助描述文本最大宽度
+$height-steps_basic_vertical_small_item_content-minHeight: 40px; // 小尺寸垂直步骤条内容最小高度
+$height-steps_basic_item_left-icon: 24px; // 步骤条左侧图标高度
+$width-steps_basic_item_left_number-icon: 24px; // 步骤条左侧图标宽度
+$height-steps_basic_item_left_number-icon: 24px; // 步骤条左侧图标高度
+$height-steps_basic_small_item_left-icon: 20px; // 小尺寸步骤条左侧图标高度
+$width-steps_basic_small_item_left_number-icon: 20px; // 小尺寸步骤条左侧数字图标高度
+$height-steps_basic_item: 72px; // 简易版步骤条高度
+$height-steps_item: 72px; // 旧版步骤条高度
+$width-steps_item-border: 1px; // 旧版步骤条高度
+$width-steps_item_title: 100%; // 步骤条标题宽度
+$width-steps_item_description: 100%; // 步骤条辅助描述文本宽度
+$width-steps_item_left_icon: 24px; // 步骤条左侧图标宽度
+$width-steps_item_left: 24px; // 步骤条左侧图标容器宽度
+$height-steps_item_left: 24px; // 步骤条左侧图标容器高度
+$width-steps_title_after: 9999px; // 步骤条连接线长度
+$height-steps_title_after: 1px; // 步骤条连接线高度
+$width-steps_vertical_icon_after: 1px;
+$height-steps_vertical_icon_after: 9999px; // 垂直步骤条连接线长度
+$width-steps_nav_item_icon-minWidth: 60px; // 导航型步骤条图标最小宽度
+$width-steps_nav_item_title-maxWidth: 17em; // 导航型步骤条标题最大宽度
+
+// Spacing
+$spacing-steps_basic_item-paddingLeft: 16px; // 简版步骤条左侧内边距
+$spacing-steps_basic_vertical_item-paddingTop: 9px; // 简版垂直步骤条顶部内边距
+$spacing-steps_basic_vertical_item_content-paddingBottom: 22px; // 简版垂直步骤条内容区底部内边距
+$spacing-steps_basic_vertical_item_icon-paddingBottom: 9px; // 简版垂直步骤条图标底部内边距
+$spacing-steps_basic_item_left-marginRight: 8px; // 简版步骤条图标右侧外边距
+$spacing-steps_basic_item_title-paddingRight: 16px; // 简版步骤条标题右侧内边距
+$spacing-steps_basic_item_title-paddingBottom: 4px; // 简版步骤条标题底部内边距
+$spacing-steps_basic_item-marginRight: 16px; // 简版步骤条标题右侧外边距
+$spacing-steps_item-marginRight: 16px; // 旧版步骤条右侧外边距
+$spacing-steps_item-paddingY: $spacing-base-tight; // 旧版步骤条垂直方向内边距
+$spacing-steps_item-paddingX: $spacing-base; // 旧版步骤条水平方向内边距
+$spacing-steps_item_content-marginLeft: $spacing-base; // 旧版步骤条水平内容区左侧外边距
+
+// Radius
+$radius-steps_basic_item_left_number_icon: var(--semi-border-radius-circle); // 步骤条左侧图标圆角
+$radius-steps_item: var(--semi-border-radius-medium); // 步骤条整体圆角
+$radius-steps_item_left: 32px; // 步骤条左侧距离
+
+
+// Font
+$font-steps_basic_item_left_number_icon-fontWeight: 600; // 步骤条数字图标文本字重
+$font-steps_basic_item_title-fontWeight: 600; // 步骤条标题文本字重
+$font-steps_basic_item_title-lineHeight: 24px; // 步骤条标题文本行高
+$font-steps_item_title-fontWeight: $font-weight-bold; // 步骤条标题文本字重
+$font-steps_item_left-fontWeight: $font-weight-bold; // 步骤条标题左侧图标内部文本字重
+$font-steps_item_left-lineHeight: 32px; // 步骤条标题左侧图标内部文本行高
+$font-steps_nav_item_title-fontWeight: $font-weight-regular; // 导航型步骤条标题文本字重 - 默认态
+$font-steps_nav_item_title_active-fontWeight: 600; // 导航型步骤条标题文本字重 - 激活态

package/lib/cjs/switch/constants.d.ts

@@ -0,0 +1,18 @@
+declare const cssClasses: {
+    PREFIX: string;
+    LARGE: string;
+    SMALL: string;
+    CHECKED: string;
+    DISABLED: string;
+    ACTIVE: string;
+    KNOB: string;
+    NATIVE_CONTROL: string;
+    CHECKED_TEXT: string;
+    UNCHECKED_TEXT: string;
+    LOADING_SPIN: string;
+    LOADING: string;
+};
+declare const strings: {
+    readonly SIZE_MAP: readonly ["default", "small", "large"];
+};
+export { cssClasses, strings };

package/lib/cjs/switch/constants.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-switch"),
+  LARGE: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-large"),
+  SMALL: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-small"),
+  CHECKED: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-checked"),
+  DISABLED: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-disabled"),
+  ACTIVE: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-active"),
+  KNOB: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-knob"),
+  NATIVE_CONTROL: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-native-control"),
+  CHECKED_TEXT: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-checked-text"),
+  UNCHECKED_TEXT: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-unchecked-text"),
+  LOADING_SPIN: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-loading-spin"),
+  LOADING: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-loading")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  SIZE_MAP: ['default', 'small', 'large']
+};
+exports.strings = strings;

package/lib/cjs/switch/foundation.d.ts

@@ -0,0 +1,14 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface SwitchAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    setNativeControlChecked: (nativeControlChecked: boolean | undefined) => void;
+    setNativeControlDisabled: (nativeControlDisabled: boolean | undefined) => void;
+    notifyChange: (checked: boolean, e: any) => void;
+}
+export default class SwitchFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<SwitchAdapter<P, S>, P, S> {
+    constructor(adapter: SwitchAdapter<P, S>);
+    init(): void;
+    setChecked(checked: boolean | undefined): void;
+    setDisabled(disabled: boolean | undefined): void;
+    handleChange(checked: boolean, e: any): void;
+    destroy(): void;
+}

package/lib/cjs/switch/foundation.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+class SwitchFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, adapter));
+  }
+
+  init() {
+    const {
+      defaultChecked,
+      checked,
+      disabled
+    } = this.getProps();
+    this.setChecked(defaultChecked || checked);
+    this.setDisabled(disabled);
+  }
+
+  setChecked(checked) {
+    this._adapter.setNativeControlChecked(checked);
+  }
+
+  setDisabled(disabled) {
+    this._adapter.setNativeControlDisabled(disabled);
+  }
+
+  handleChange(checked, e) {
+    const propChecked = this.getProps().checked;
+    const isControledComponent = typeof propChecked !== 'undefined';
+
+    if (isControledComponent) {
+      this._adapter.notifyChange(checked, e);
+    } else {
+      this._adapter.setNativeControlChecked(checked);
+
+      this._adapter.notifyChange(checked, e);
+    }
+  } // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  destroy() {}
+
+}
+
+exports.default = SwitchFoundation;