@tendaui/components 1.0.0

package/styles/_vars.scss

@@ -0,0 +1,386 @@
+// 公共前缀
+$prefix: t;
+
+// 颜色色板
+
+$brand-color-1: var(--td-brand-color-1);
+$brand-color-2: var(--td-brand-color-2);
+$brand-color-3: var(--td-brand-color-3);
+$brand-color-4: var(--td-brand-color-4);
+$brand-color-5: var(--td-brand-color-5);
+$brand-color-6: var(--td-brand-color-6);
+$brand-color-7: var(--td-brand-color-7);
+$brand-color-8: var(--td-brand-color-8);
+$brand-color-9: var(--td-brand-color-9);
+$brand-color-10: var(--td-brand-color-10);
+
+$warning-color-1: var(--td-warning-color-1);
+$warning-color-2: var(--td-warning-color-2);
+$warning-color-3: var(--td-warning-color-3);
+$warning-color-4: var(--td-warning-color-4);
+$warning-color-5: var(--td-warning-color-5);
+$warning-color-6: var(--td-warning-color-6);
+$warning-color-7: var(--td-warning-color-7);
+$warning-color-8: var(--td-warning-color-8);
+$warning-color-9: var(--td-warning-color-9);
+$warning-color-10: var(--td-warning-color-10);
+
+$error-color-1: var(--td-error-color-1);
+$error-color-2: var(--td-error-color-2);
+$error-color-3: var(--td-error-color-3);
+$error-color-4: var(--td-error-color-4);
+$error-color-5: var(--td-error-color-5);
+$error-color-6: var(--td-error-color-6);
+$error-color-7: var(--td-error-color-7);
+$error-color-8: var(--td-error-color-8);
+$error-color-9: var(--td-error-color-9);
+$error-color-10: var(--td-error-color-10);
+
+$success-color-1: var(--td-success-color-1);
+$success-color-2: var(--td-success-color-2);
+$success-color-3: var(--td-success-color-3);
+$success-color-4: var(--td-success-color-4);
+$success-color-5: var(--td-success-color-5);
+$success-color-6: var(--td-success-color-6);
+$success-color-7: var(--td-success-color-7);
+$success-color-8: var(--td-success-color-8);
+$success-color-9: var(--td-success-color-9);
+$success-color-10: var(--td-success-color-10);
+
+$gray-color-1: var(--td-gray-color-1);
+$gray-color-2: var(--td-gray-color-2);
+$gray-color-3: var(--td-gray-color-3);
+$gray-color-4: var(--td-gray-color-4);
+$gray-color-5: var(--td-gray-color-5);
+$gray-color-6: var(--td-gray-color-6);
+$gray-color-7: var(--td-gray-color-7);
+$gray-color-8: var(--td-gray-color-8);
+$gray-color-9: var(--td-gray-color-9);
+$gray-color-10: var(--td-gray-color-10);
+$gray-color-11: var(--td-gray-color-11);
+$gray-color-12: var(--td-gray-color-12);
+$gray-color-13: var(--td-gray-color-13);
+$gray-color-14: var(--td-gray-color-14);
+
+// 文字 & 图标 颜色
+$font-white-1: var(--td-font-white-1);
+$font-white-2: var(--td-font-white-2);
+$font-white-3: var(--td-font-white-3);
+$font-white-4: var(--td-font-white-4);
+
+$font-gray-1: var(--td-font-gray-1);
+$font-gray-2: var(--td-font-gray-2);
+$font-gray-3: var(--td-font-gray-3);
+$font-gray-4: var(--td-font-gray-4);
+
+// 基础颜色
+$brand-color: var(--td-brand-color); // 色彩-品牌-可操作
+$warning-color: var(--td-warning-color); // 色彩-功能-警告
+$error-color: var(--td-error-color); // 色彩-功能-失败
+$success-color: var(--td-success-color); // 色彩-功能-成功
+
+// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
+$brand-color-hover: var(--td-brand-color-hover); // hover态
+$brand-color-focus: var(--td-brand-color-focus); // focus态，包括鼠标和键盘
+$brand-color-active: var(--td-brand-color-active); // 点击态
+$brand-color-disabled: var(--td-brand-color-disabled); // 禁用态
+$brand-color-light: var(--td-brand-color-light); // 浅色的选中态
+$brand-color-light-hover: var(--td-brand-color-light-hover);
+
+// 警告色扩展
+$warning-color-hover: var(--td-warning-color-hover);
+$warning-color-focus: var(--td-warning-color-focus);
+$warning-color-active: var(--td-warning-color-active);
+$warning-color-disabled: var(--td-warning-color-disabled);
+$warning-color-light: var(--td-warning-color-light);
+$warning-color-light-hover: var(--td-warning-color-light-hover);
+
+// 失败/错误色扩展
+$error-color-hover: var(--td-error-color-hover);
+$error-color-focus: var(--td-error-color-focus);
+$error-color-active: var(--td-error-color-active);
+$error-color-disabled: var(--td-error-color-disabled);
+$error-color-light: var(--td-error-color-light);
+$error-color-light-hover: var(--td-error-color-light-hover);
+
+// 成功色扩展
+$success-color-hover: var(--td-success-color-hover);
+$success-color-focus: var(--td-success-color-focus);
+$success-color-active: var(--td-success-color-active);
+$success-color-disabled: var(--td-success-color-disabled);
+$success-color-light: var(--td-success-color-light);
+$success-color-light-hover: var(--td-success-color-light-hover);
+
+// 遮罩
+$mask-active: var(--td-mask-active); // 遮罩-弹出
+$mask-disabled: var(--td-mask-disabled); // 遮罩-禁用
+$mask-bg: var(--td-mask-background); // 二维码遮罩
+
+// 背景色
+$bg-color-page: var(--td-bg-color-page); // 色彩 - page
+$bg-color-container: var(--td-bg-color-container); // 色彩 - 容器
+$bg-color-container-hover: var(
+  --td-bg-color-container-hover
+); // 色彩 - 容器 - hover
+$bg-color-container-active: var(
+  --td-bg-color-container-active
+); // 色彩 - 容器 - active
+$bg-color-container-select: var(
+  --td-bg-color-container-select
+); // 色彩 - 容器 - select
+
+$bg-color-secondarycontainer: var(
+  --td-bg-color-secondarycontainer
+); // 色彩 - 次级容器
+$bg-color-secondarycontainer-hover: var(
+  --td-bg-color-secondarycontainer-hover
+); // 色彩 - 次级容器 - hover
+$bg-color-secondarycontainer-active: var(
+  --td-bg-color-secondarycontainer-active
+); // 色彩 - 次级容器 - active
+
+$bg-color-component: var(--td-bg-color-component); // 色彩  - 组件
+$bg-color-component-hover: var(
+  --td-bg-color-component-hover
+); // 色彩 - 组件 - hover
+$bg-color-component-active: var(
+  --td-bg-color-component-active
+); // 色彩 - 组件 - active
+
+$bg-color-secondarycomponent: var(
+  --td-bg-color-secondarycomponent
+); // 色彩 - 次级组件
+$bg-color-secondarycomponent-hover: var(
+  --td-bg-color-secondarycomponent-hover
+); // 色彩 - 次级组件 - hover
+$bg-color-secondarycomponent-active: var(
+  --td-bg-color-secondarycomponent-active
+); // 色彩 - 次级组件 - active
+
+$bg-color-component-disabled: var(
+  --td-bg-color-component-disabled
+); // 色彩 - 组件 - disabled
+
+// TODO: 考虑是否在组件内部做判断，不增加额外变量
+// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
+$bg-color-specialcomponent: var(--td-bg-color-specialcomponent);
+
+// 文本颜色
+$text-color-primary: var(--td-text-color-primary); // 色彩-文字-主要
+$text-color-secondary: var(--td-text-color-secondary); // 色彩-文字-次要
+$text-color-placeholder: var(
+  --td-text-color-placeholder
+); // 色彩-文字-占位符/说明
+$text-color-disabled: var(--td-text-color-disabled); // 色彩-文字-禁用
+$text-color-anti: var(--td-text-color-anti); // 色彩-文字-反色
+$text-color-brand: var(--td-text-color-brand); // 色彩-文字-品牌
+$text-color-link: var(--td-text-color-link); // 色彩-文字-链接
+
+// 分割线
+$border-level-1-color: var(--td-border-level-1-color);
+$component-stroke: var(--td-component-stroke);
+// 边框
+$border-level-2-color: var(--td-border-level-2-color);
+$component-border: var(--td-component-border);
+
+// shadow
+
+// 基础/下层 投影 hover 使用的组件包括：表格 /
+$shadow-1: var(--td-shadow-1);
+// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
+$shadow-2: var(--td-shadow-2);
+// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
+$shadow-3: var(--td-shadow-3);
+
+// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
+$shadow-inset-top: var(--td-shadow-inset-top);
+$shadow-inset-right: var(--td-shadow-inset-right);
+$shadow-inset-bottom: var(--td-shadow-inset-bottom);
+$shadow-inset-left: var(--td-shadow-inset-left);
+$shadow-inset:
+  $shadow-inset-top, $shadow-inset-right, $shadow-inset-bottom,
+  $shadow-inset-left;
+
+// 融合阴影
+$shadow-2-inset: $shadow-2, $shadow-inset;
+$shadow-3-inset: $shadow-3, $shadow-inset;
+
+$size-1: var(--td-size-1);
+$size-2: var(--td-size-2);
+$size-3: var(--td-size-3);
+$size-4: var(--td-size-4);
+$size-5: var(--td-size-5);
+$size-6: var(--td-size-6);
+$size-7: var(--td-size-7);
+$size-8: var(--td-size-8);
+$size-9: var(--td-size-9);
+$size-10: var(--td-size-10);
+$size-11: var(--td-size-11);
+$size-12: var(--td-size-12);
+$size-13: var(--td-size-13);
+$size-14: var(--td-size-14);
+$size-15: var(--td-size-15);
+$size-16: var(--td-size-16);
+
+// component 组件尺寸高度相关 token
+$comp-size-xxxs: var(--td-comp-size-xxxs);
+$comp-size-xxs: var(--td-comp-size-xxs);
+$comp-size-xs: var(--td-comp-size-xs);
+$comp-size-s: var(--td-comp-size-s);
+$comp-size-m: var(--td-comp-size-m);
+$comp-size-l: var(--td-comp-size-l);
+$comp-size-xl: var(--td-comp-size-xl);
+$comp-size-xxl: var(--td-comp-size-xxl);
+$comp-size-xxxl: var(--td-comp-size-xxxl);
+$comp-size-xxxxl: var(--td-comp-size-xxxxl);
+$comp-size-xxxxxl: var(--td-comp-size-xxxxxl);
+
+// popup 弹出层整体边距 token
+$pop-padding-s: var(--td-pop-padding-s);
+$pop-padding-m: var(--td-pop-padding-m);
+$pop-padding-l: var(--td-pop-padding-l);
+$pop-padding-xl: var(--td-pop-padding-xl);
+$pop-padding-xxl: var(--td-pop-padding-xxl);
+
+// component 组件左右边距 token
+$comp-paddingLR-xxs: var(--td-comp-paddingLR-xxs);
+$comp-paddingLR-xs: var(--td-comp-paddingLR-xs);
+$comp-paddingLR-s: var(--td-comp-paddingLR-s);
+$comp-paddingLR-m: var(--td-comp-paddingLR-m);
+$comp-paddingLR-l: var(--td-comp-paddingLR-l);
+$comp-paddingLR-xl: var(--td-comp-paddingLR-xl);
+$comp-paddingLR-xxl: var(--td-comp-paddingLR-xxl);
+
+// component 组件上下边距 token
+$comp-paddingTB-xxs: var(--td-comp-paddingTB-xxs);
+$comp-paddingTB-xs: var(--td-comp-paddingTB-xs);
+$comp-paddingTB-s: var(--td-comp-paddingTB-s);
+$comp-paddingTB-m: var(--td-comp-paddingTB-m);
+$comp-paddingTB-l: var(--td-comp-paddingTB-l);
+$comp-paddingTB-xl: var(--td-comp-paddingTB-xl);
+$comp-paddingTB-xxl: var(--td-comp-paddingTB-xxl);
+
+// component 组件间距 token
+$comp-margin-xxs: var(--td-comp-margin-xxs);
+$comp-margin-xs: var(--td-comp-margin-xs);
+$comp-margin-s: var(--td-comp-margin-s);
+$comp-margin-m: var(--td-comp-margin-m);
+$comp-margin-l: var(--td-comp-margin-l);
+$comp-margin-xl: var(--td-comp-margin-xl);
+$comp-margin-xxl: var(--td-comp-margin-xxl);
+$comp-margin-xxxl: var(--td-comp-margin-xxxl);
+$comp-margin-xxxxl: var(--td-comp-margin-xxxxl);
+
+// Spacer 【deprecated】
+$spacer: 8px;
+$spacer-s: $spacer * 0.5; // 间距-4
+$spacer-m: $spacer * 0.75; // 间距-6
+$spacer-l: $spacer * 1.5; // 间距-12
+$spacer-1: $spacer; // 间距-8
+$spacer-2: $spacer * 2; // 间距-16
+$spacer-3: $spacer * 3; // 间距-24
+$spacer-4: $spacer * 4; // 间距-32
+$spacer-5: $spacer * 5; // 间距-大-40
+$spacer-6: $spacer * 6; // 间距-大-48
+$spacer-7: $spacer * 7; // 间距-大-48
+$spacer-8: $spacer * 8; // 间距-大-48
+$spacer-9: $spacer * 9; // 间距-大-48
+$spacer-10: $spacer * 10; // 间距-大-80
+
+$text-line-height-s: var(--td-line-height-body-small);
+$text-line-height-base: var(--td-line-height-body-medium);
+$text-line-height-l: var(--td-line-height-body-large);
+$text-line-height-xl: var(--td-line-height-title-large);
+$text-line-height-xxl: var(--td-line-height-headline-large);
+
+// Font
+$font-size: 10px;
+$font-size-s: var(--td-font-size-body-small);
+$font-size-base: var(--td-font-size-body-medium);
+$font-size-l: var(--td-font-size-body-large);
+$font-size-xl: var(--td-font-size-title-large);
+$font-size-xxl: var(--td-font-size-headline-large);
+
+$font-family: var(--td-font-family); // 字体-磅数-常规
+$font-family-medium: var(--td-font-family-medium); // 字体-磅数-粗体
+
+// 使用以下与Design Token对应的font token开发组件对应字体、行高
+$font-link-small: var(--td-font-link-small);
+$font-link-medium: var(--td-font-link-medium);
+$font-link-large: var(--td-font-link-large);
+$font-mark-small: var(--td-font-mark-small);
+$font-mark-medium: var(--td-font-mark-medium);
+$font-body-small: var(--td-font-body-small);
+$font-body-medium: var(--td-font-body-medium);
+$font-body-large: var(--td-font-body-large);
+$font-title-small: var(--td-font-title-small);
+$font-title-medium: var(--td-font-title-medium);
+$font-title-large: var(--td-font-title-large);
+$font-title-extraLarge: var(--td-font-title-extraLarge);
+$font-headline-small: var(--td-font-headline-small);
+$font-headline-medium: var(--td-font-headline-medium);
+$font-headline-large: var(--td-font-headline-large);
+$font-display-medium: var(--td-font-display-medium);
+$font-display-large: var(--td-font-display-large);
+
+// Border Radius
+$border-radius-small: var(--td-radius-small); // 圆角-2
+$border-radius-default: var(--td-radius-default); // 圆角-3
+$border-radius-medium: var(--td-radius-medium); // 圆角-6
+$border-radius-large: var(--td-radius-large); // 圆角-9
+$border-radius-extraLarge: var(--td-radius-extraLarge); // 圆角-12
+$border-radius-round: var(--td-radius-round); // 圆角-999
+$border-radius-circle: var(--td-radius-circle); // 圆角-全圆角
+
+// 表单相关
+$form-height: 30px;
+$form-text-color: $text-color-primary;
+$form-bg-color: $bg-color-container;
+$form-border-color: $border-level-2-color;
+
+// 图标尺寸
+$icon-default: 16px;
+$icon-l: 24px;
+
+// 滚动条颜色
+$scrollbar-color: var(--td-scrollbar-color);
+// 滚动条悬浮颜色
+$scrollbar-hover-color: var(--td-scrollbar-hover-color);
+// 滚动条轨道颜色
+$scroll-track-color: var(--td-scroll-track-color);
+
+// 响应式断点
+$screen-xs: 320px;
+$screen-xs-min: $screen-xs;
+$screen-sm: 768px;
+$screen-sm-min: $screen-sm;
+$screen-md: 992px;
+$screen-md-min: $screen-md;
+$screen-lg: 1200px;
+$screen-lg-min: $screen-lg;
+$screen-xl: 1400px;
+$screen-xl-min: $screen-xl;
+$screen-xxl: 1880px;
+$screen-xxl-min: $screen-xxl;
+
+// 动画
+$anim-time-fn-easing: cubic-bezier(0.38, 0, 0.24, 1);
+$anim-time-fn-ease-out: cubic-bezier(0, 0, 0.15, 1);
+$anim-time-fn-ease-in: cubic-bezier(0.82, 0, 1, 0.9);
+$anim-duration-base: 0.2s;
+$anim-duration-moderate: 0.24s;
+$anim-duration-slow: 0.28s;
+
+// 统一管理各组件层级关系
+$z-index-back-top: 300;
+$z-index-affix: 500;
+$z-index-drawer: 1500;
+$z-index-dialog: 2500;
+$z-index-image-viewer: 3000;
+$z-index-loading: 3500;
+$z-index-message: 5000;
+$z-index-Popup: 5500;
+$z-index-Tooltip: 5600;
+$z-index-Notification: 6000;
+$z-index-dragging: 6500;
+$z-index-guide: 999999;

package/styles/components/alert/_index.scss

@@ -0,0 +1,175 @@
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@import '../../_vars.scss';
+
+@import './_vars.scss';
+
+@import '../../mixins/_reset.scss';
+
+/* Alert */
+.#{$prefix}-alert {
+  @include reset;
+
+  display: flex;
+  align-items: flex-start;
+  padding: $alert-padding;
+  opacity: 1;
+  transition: opacity 0.2s;
+  border-radius: $border-radius-medium;
+
+  &.#{$prefix}-is-hidden {
+    /* 隐藏 */
+    display: none;
+  }
+
+  &--closing {
+    opacity: 0;
+  }
+
+  &--info {
+    background-color: $alert-info-bg-color;
+
+    .#{$prefix}-alert__icon {
+      color: $alert-info-icon-color;
+    }
+
+    .#{$prefix}-alert__swiper-trigger-wrap {
+      color: $alert-info-trigger-color;
+    }
+
+    .#{$prefix}-alert__swiper-trigger--active {
+      color: $alert-info-trigger-active-color;
+    }
+  }
+
+  &--success {
+    background-color: $alert-success-bg-color;
+
+    .#{$prefix}-alert__icon {
+      color: $alert-success-icon-color;
+    }
+
+    .#{$prefix}-alert__swiper-trigger-wrap {
+      color: $alert-success-trigger-color;
+    }
+
+    .#{$prefix}-alert__swiper-trigger--active {
+      color: $alert-success-trigger-active-color;
+    }
+  }
+
+  &--warning {
+    background-color: $alert-warning-bg-color;
+
+    .#{$prefix}-alert__icon {
+      color: $alert-warning-icon-color;
+    }
+
+    .#{$prefix}-alert__swiper-trigger-wrap {
+      color: $alert-warning-trigger-color;
+    }
+
+    .#{$prefix}-alert__swiper-trigger--active {
+      color: $alert-warning-trigger-active-color;
+    }
+  }
+
+  &--error {
+    background-color: $alert-error-bg-color;
+
+    .#{$prefix}-alert__icon {
+      color: $alert-error-icon-color;
+    }
+
+    .#{$prefix}-alert__swiper-trigger-wrap {
+      color: $alert-error-trigger-color;
+    }
+
+    .#{$prefix}-alert__swiper-trigger--active {
+      color: $alert-error-trigger-active-color;
+    }
+  }
+}
+
+.#{$prefix}-alert__icon {
+  font-size: $alert-icon-size;
+  display: inherit;
+}
+
+.#{$prefix}-alert__icon,
+.#{$prefix}-alert__close {
+  flex: 0 0 auto;
+  line-height: $text-line-height-s;
+}
+
+.#{$prefix}-alert__content {
+  flex: 1 1 0;
+  font-size: $alert-font-size;
+  line-height: $alert-line-height;
+  overflow: hidden;
+}
+
+.#{$prefix}-alert__title,
+.#{$prefix}-alert__message {
+  width: 100%;
+  display: flex;
+}
+
+.#{$prefix}-alert__title {
+  color: $alert-title-color;
+  font-weight: bold;
+
+  + .#{$prefix}-alert__message {
+    margin-top: $alert-description-margin-top;
+  }
+}
+
+.#{$prefix}-alert__description {
+  color: $alert-description-color;
+  flex: 0 1 auto;
+  transition: height $anim-duration-base;
+}
+
+.#{$prefix}-alert__operation {
+  flex: 0 0 auto;
+  padding: $alert-operation-padding;
+  color: $brand-color;
+  cursor: pointer;
+  transition: color $anim-duration-base;
+
+  &:hover {
+    color: $brand-color-hover;
+  }
+
+  &:active {
+    color: $brand-color-active;
+  }
+}
+
+.#{$prefix}-alert__icon + .#{$prefix}-alert__content {
+  margin-left: $alert-margin-left;
+}
+
+.#{$prefix}-alert__collapse {
+  margin-top: $alert-collapse-margin-top;
+  color: $brand-color;
+  cursor: pointer;
+}
+
+.#{$prefix}-alert__close {
+  display: inline-flex;
+  align-items: center;
+  margin-left: $alert-close-margin-left;
+  color: $alert-close-color;
+  cursor: pointer;
+  transition: color $anim-duration-base;
+
+  &:hover {
+    color: $alert-close-color-hover;
+  }
+
+  > .t-icon {
+    font-size: $alert-close-size;
+    padding: $alert-close-padding;
+  }
+}

package/styles/components/alert/_vars.scss

@@ -0,0 +1,39 @@
+$alert-success-bg-color: $success-color-focus;
+$alert-info-bg-color: $brand-color-focus;
+$alert-warning-bg-color: $warning-color-focus;
+$alert-error-bg-color: $error-color-focus;
+$alert-title-color: $text-color-primary;
+$alert-description-color: $text-color-secondary;
+
+$alert-success-icon-color: $success-color;
+$alert-info-icon-color: $brand-color;
+$alert-warning-icon-color: $warning-color;
+$alert-error-icon-color: $error-color;
+
+$alert-close-color: $text-color-secondary;
+$alert-close-color-hover: $text-color-primary;
+
+$alert-success-trigger-color: $success-color-focus;
+$alert-info-trigger-color: $brand-color;
+$alert-warning-trigger-color: $warning-color-focus;
+$alert-error-trigger-color: $error-color-focus;
+
+$alert-success-trigger-active-color: $success-color;
+$alert-info-trigger-active-color: $brand-color;
+$alert-warning-trigger-active-color: $warning-color;
+$alert-error-trigger-active-color: $error-color;
+
+// size
+$alert-font-size: $font-size-base;
+$alert-line-height: $text-line-height-base;
+$alert-icon-size: $alert-line-height;
+$alert-close-size: calc($alert-line-height - 2px);
+
+// 间距
+$alert-padding: $comp-paddingTB-l $comp-paddingLR-xl;
+$alert-operation-padding: 0 $comp-paddingLR-s;
+$alert-margin-left: $comp-margin-s;
+$alert-close-margin-left: $comp-margin-l;
+$alert-close-padding: calc(($alert-line-height - $alert-close-size) / 2 ) 0;
+$alert-description-margin-top: $comp-margin-s;
+$alert-collapse-margin-top: $comp-margin-s;

package/styles/components/badge/_index.scss

@@ -0,0 +1,70 @@
+// 组件允许单个组件打包，因此默认引入公共基础样式.#{$prefix}
+
+@import '../../_vars.scss';
+
+@import './_vars.scss';
+
+@import '../../mixins/_reset.scss';
+
+// Badge
+.#{$prefix}-badge {
+  @include reset;
+
+  position: relative;
+  display: inline-block;
+
+  &--dot,
+  &--circle,
+  &--round {
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: $badge-text-color;
+    text-align: center;
+    font: $badge-font;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0;
+    box-sizing: content-box;
+  }
+
+  &--static {
+    position: static;
+    display: inline-block;
+    transform: none;
+  }
+
+  &--dot {
+    right: 1px;
+    margin-top: 1px;
+    width: $badge-dot-size;
+    height: $badge-dot-size;
+    border-radius: $border-radius-circle;
+    background-color: $badge-color;
+  }
+
+  &--circle,
+  &--round {
+    padding-right: $badge-padding;
+    padding-left: $badge-padding;
+    min-width: $badge-min-width;
+    height: $badge-height;
+    background-color: $badge-color;
+    line-height: $badge-height;
+
+    &.#{$prefix}-size-s {
+      padding-right: $badge-padding-s;
+      padding-left: $badge-padding-s;
+      min-width: $badge-min-width;
+      height: $badge-height-s;
+      line-height: $badge-height-s;
+    }
+  }
+
+  &--circle {
+    border-radius: $badge-shape-circle;
+  }
+
+  &--round {
+    border-radius: $badge-shape-round;
+  }
+}

package/styles/components/badge/_vars.scss

@@ -0,0 +1,25 @@
+$badge-text-color: $text-color-anti;
+$badge-color: $error-color;
+
+// 尺寸
+// 默认尺寸 circle/round 高度
+$badge-height: $comp-size-xxs;
+// 小尺寸 circle/round 高度
+$badge-height-s: $comp-size-xxxs;
+// dot 宽/高
+$badge-dot-size: 6px;
+// $badge-status-size: 6px;
+$badge-min-width: 8px;
+
+// 字体
+$badge-font: $font-body-small;
+
+// 间距
+// 默认尺寸circle/round 左右padding
+$badge-padding: calc(($badge-height - $badge-min-width) / 2);
+// 小尺寸circle/round 左右padding
+$badge-padding-s: calc(($badge-height-s - $badge-min-width) / 2);
+
+//边框
+$badge-shape-circle: calc($badge-height / 2);
+$badge-shape-round: $border-radius-default;