advance-semi-theme 1.0.0

package/dist/antd/styles/components/alert.css

@@ -0,0 +1,149 @@
+/**
+ * Alert 警告提示 - Semi Design 风格
+ * 
+ * 无感映射：
+ * ┌────────────────────────────────┬──────────────────────────────────────┐
+ * │ Ant Design Vue API             │ Semi Design 风格                      │
+ * ├────────────────────────────────┼──────────────────────────────────────┤
+ * │ type="info"                    │ 蓝色背景 Light 风格                   │
+ * │ type="success"                 │ 绿色背景 Light 风格                   │
+ * │ type="warning"                 │ 橙色背景 Light 风格                   │
+ * │ type="error"                   │ 红色背景 Light 风格                   │
+ * └────────────────────────────────┴──────────────────────────────────────┘
+ */
+
+/* ========== 基础样式 ========== */
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert {
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  padding: 12px 16px;
+}
+
+/* ========== type="info" ========== */
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-info {
+  background: var(--semi-color-primary-light-default);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-info .ant-alert-icon {
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-info .ant-alert-message {
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-info .ant-alert-description {
+  color: var(--semi-color-text-1);
+}
+
+/* ========== type="success" ========== */
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-success {
+  background: var(--semi-color-success-light-default);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-success .ant-alert-icon {
+  color: var(--semi-color-success);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-success .ant-alert-message {
+  color: var(--semi-color-success);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-success .ant-alert-description {
+  color: var(--semi-color-text-1);
+}
+
+/* ========== type="warning" ========== */
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-warning {
+  background: var(--semi-color-warning-light-default);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-warning .ant-alert-icon {
+  color: var(--semi-color-warning);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-warning .ant-alert-message {
+  color: var(--semi-color-warning);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-warning .ant-alert-description {
+  color: var(--semi-color-text-1);
+}
+
+/* ========== type="error" ========== */
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-error {
+  background: var(--semi-color-danger-light-default);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-error .ant-alert-icon {
+  color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-error .ant-alert-message {
+  color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-error .ant-alert-description {
+  color: var(--semi-color-text-1);
+}
+
+/* ========== 关闭按钮 ========== */
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-close-icon {
+  color: var(--semi-color-text-2);
+  transition: color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-close-icon:hover {
+  color: var(--semi-color-text-0);
+}
+
+/* ========== 带图标 ========== */
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-with-description .ant-alert-icon {
+  font-size: 24px;
+}
+
+/* ========== Banner 模式 ========== */
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-banner {
+  border-radius: 0;
+}
+
+/* ========== 扩展：data-theme="solid" ========== */
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-info[data-theme="solid"] {
+  background: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-info[data-theme="solid"] .ant-alert-icon,
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-info[data-theme="solid"] .ant-alert-message,
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-info[data-theme="solid"] .ant-alert-description {
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-success[data-theme="solid"] {
+  background: var(--semi-color-success);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-success[data-theme="solid"] .ant-alert-icon,
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-success[data-theme="solid"] .ant-alert-message,
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-success[data-theme="solid"] .ant-alert-description {
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-warning[data-theme="solid"] {
+  background: var(--semi-color-warning);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-warning[data-theme="solid"] .ant-alert-icon,
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-warning[data-theme="solid"] .ant-alert-message,
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-warning[data-theme="solid"] .ant-alert-description {
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-error[data-theme="solid"] {
+  background: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-error[data-theme="solid"] .ant-alert-icon,
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-error[data-theme="solid"] .ant-alert-message,
+.semi:where([data-semi="all"], [data-semi-alert]) .ant-alert-error[data-theme="solid"] .ant-alert-description {
+  color: #fff;
+}

package/dist/antd/styles/components/anchor.css

@@ -0,0 +1,40 @@
+/**
+ * Anchor 锚点 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-anchor]) .ant-anchor {
+  font-size: var(--semi-font-size-regular);
+}
+
+.semi:where([data-semi="all"], [data-semi-anchor]) .ant-anchor-ink {
+  background: var(--semi-color-primary);
+  width: 2px;
+}
+
+.semi:where([data-semi="all"], [data-semi-anchor]) .ant-anchor-link {
+  padding: 4px 0 4px 16px;
+}
+
+.semi:where([data-semi="all"], [data-semi-anchor]) .ant-anchor-link-title {
+  color: var(--semi-color-text-1);
+  transition: color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-anchor]) .ant-anchor-link-title:hover {
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-anchor]) .ant-anchor-link-active > .ant-anchor-link-title {
+  color: var(--semi-color-primary);
+  font-weight: 500;
+}
+
+/* 水平锚点 */
+.semi:where([data-semi="all"], [data-semi-anchor]) .ant-anchor-horizontal .ant-anchor-ink {
+  height: 2px;
+  width: auto;
+}
+
+.semi:where([data-semi="all"], [data-semi-anchor]) .ant-anchor-horizontal .ant-anchor-link {
+  padding: 8px 16px;
+}

package/dist/antd/styles/components/app.css

@@ -0,0 +1,9 @@
+/**
+ * App 包裹组件 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-app]) .ant-app {
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+  line-height: 1.5715;
+}

package/dist/antd/styles/components/autocomplete.css

@@ -0,0 +1,56 @@
+/**
+ * AutoComplete 自动完成 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-autocomplete]) .ant-select-auto-complete .ant-select-selector {
+  background-color: var(--semi-color-fill-0);
+  border: 1px solid transparent;
+  border-radius: var(--semi-border-radius-small);
+  box-shadow: none;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-autocomplete]) .ant-select-auto-complete .ant-select-selector:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+.semi:where([data-semi="all"], [data-semi-autocomplete]) .ant-select-auto-complete.ant-select-focused .ant-select-selector {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+  box-shadow: none;
+}
+
+.semi:where([data-semi="all"], [data-semi-autocomplete]) .ant-select-auto-complete .ant-select-selection-search-input {
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-autocomplete]) .ant-select-auto-complete .ant-select-selection-placeholder {
+  color: var(--semi-color-text-2);
+}
+
+/* 下拉面板 */
+body.semi .ant-select-auto-complete .ant-select-dropdown {
+  background: #fff;
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+  padding: 4px 0;
+}
+
+body.semi .ant-select-auto-complete .ant-select-item {
+  border-radius: 0;
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+  min-height: 36px;
+  padding: 8px 16px;
+}
+
+body.semi .ant-select-auto-complete .ant-select-item-option-active {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .ant-select-auto-complete .ant-select-item-option-selected {
+  background-color: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+  font-weight: 500;
+}

package/dist/antd/styles/components/avatar.css

@@ -0,0 +1,37 @@
+/**
+ * Avatar 头像 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-avatar]) .ant-avatar {
+  background: var(--semi-color-fill-1);
+  color: var(--semi-color-text-1);
+  font-weight: 500;
+  border-radius: 3px;
+}
+
+/* 尺寸对应圆角 */
+.semi:where([data-semi="all"], [data-semi-avatar]) .ant-avatar-lg {
+  border-radius: 6px;
+}
+
+.semi:where([data-semi="all"], [data-semi-avatar]) .ant-avatar-circle {
+  border-radius: var(--semi-border-radius-full);
+}
+
+.semi:where([data-semi="all"], [data-semi-avatar]) .ant-avatar-icon {
+  font-size: 18px;
+}
+
+/* 头像组 */
+.semi:where([data-semi="all"], [data-semi-avatar]) .ant-avatar-group .ant-avatar {
+  border: 2px solid var(--semi-color-bg-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-avatar]) .ant-avatar-group .ant-avatar:not(:first-child) {
+  margin-inline-start: -8px;
+}
+
+/* 字号 */
+.semi:where([data-semi="all"], [data-semi-avatar]) .ant-avatar-sm {
+  font-size: 12px;
+}

package/dist/antd/styles/components/backtop.css

@@ -0,0 +1,106 @@
+/**
+ * BackTop 回到顶部 / FloatButton 悬浮按钮 - Semi Design 风格
+ * Portal 组件 - 渲染在 body 下
+ */
+
+/* BackTop (旧版 API，内部渲染在 body 下) */
+body.semi .ant-back-top,
+.semi .ant-back-top {
+  right: 24px;
+  bottom: 24px;
+}
+
+body.semi .ant-back-top-content,
+.semi .ant-back-top-content {
+  background: var(--semi-color-bg-0);
+  border-radius: var(--semi-border-radius-full);
+  box-shadow: var(--semi-shadow-elevated);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .ant-back-top-content:hover,
+.semi .ant-back-top-content:hover {
+  background: var(--semi-color-fill-0);
+}
+
+body.semi .ant-back-top-icon,
+.semi .ant-back-top-icon {
+  color: var(--semi-color-text-1);
+  font-size: 16px;
+}
+
+/* Float Button 悬浮按钮 */
+body.semi .ant-float-btn,
+.semi .ant-float-btn {
+  background: var(--semi-color-bg-0);
+  box-shadow: var(--semi-shadow-elevated);
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .ant-float-btn:hover,
+.semi .ant-float-btn:hover {
+  background: var(--semi-color-fill-0);
+}
+
+body.semi .ant-float-btn-body,
+.semi .ant-float-btn-body {
+  background: transparent;
+}
+
+body.semi .ant-float-btn-icon,
+.semi .ant-float-btn-icon {
+  color: var(--semi-color-text-1);
+}
+
+body.semi .ant-float-btn-description,
+.semi .ant-float-btn-description {
+  color: var(--semi-color-text-1);
+}
+
+/* 主按钮 */
+body.semi .ant-float-btn-primary,
+.semi .ant-float-btn-primary {
+  background: var(--semi-color-primary);
+}
+
+body.semi .ant-float-btn-primary:hover,
+.semi .ant-float-btn-primary:hover {
+  background: var(--semi-color-primary-hover);
+}
+
+body.semi .ant-float-btn-primary .ant-float-btn-icon,
+body.semi .ant-float-btn-primary .ant-float-btn-description,
+.semi .ant-float-btn-primary .ant-float-btn-icon,
+.semi .ant-float-btn-primary .ant-float-btn-description {
+  color: #fff;
+}
+
+/* 按钮组 */
+body.semi .ant-float-btn-group,
+.semi .ant-float-btn-group {
+  box-shadow: none;
+}
+
+body.semi .ant-float-btn-group .ant-float-btn,
+.semi .ant-float-btn-group .ant-float-btn {
+  box-shadow: none;
+}
+
+body.semi .ant-float-btn-group-wrap,
+.semi .ant-float-btn-group-wrap {
+  background: var(--semi-color-bg-0);
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+}
+
+/* 徽标 */
+body.semi .ant-float-btn .ant-badge-count,
+.semi .ant-float-btn .ant-badge-count {
+  background: var(--semi-color-danger);
+  box-shadow: 0 0 0 2px var(--semi-color-bg-0);
+}

package/dist/antd/styles/components/badge.css

@@ -0,0 +1,76 @@
+/**
+ * Badge 徽标 - Semi Design 风格
+ * 参考 semi-foundation/badge/variables.scss
+ */
+
+.semi:where([data-semi="all"], [data-semi-badge]) .ant-badge-count {
+  background: var(--semi-color-danger);
+  border-radius: var(--semi-border-radius-circle, 9px);
+  border: 1px solid var(--semi-color-bg-1);
+  box-shadow: none;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  height: 18px;
+  min-width: 18px;
+  line-height: 16px;
+  padding: 0 4px;
+  z-index: 1;
+}
+
+/* 多位数时调整圆角 */
+.semi:where([data-semi="all"], [data-semi-badge]) .ant-badge-multiple-words .ant-badge-count,
+.semi:where([data-semi="all"], [data-semi-badge]) .ant-badge-count-multiple-words {
+  border-radius: 9px;
+}
+
+.semi:where([data-semi="all"], [data-semi-badge]) .ant-badge-dot {
+  background: var(--semi-color-danger);
+  border: none;
+  box-shadow: none;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--semi-border-radius-circle, 50%);
+  z-index: 1;
+}
+
+/* 状态点 */
+.semi:where([data-semi="all"], [data-semi-badge]) .ant-badge-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--semi-border-radius-circle, 50%);
+}
+
+.semi:where([data-semi="all"], [data-semi-badge]) .ant-badge-status-success {
+  background: var(--semi-color-success);
+}
+
+.semi:where([data-semi="all"], [data-semi-badge]) .ant-badge-status-processing {
+  background: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-badge]) .ant-badge-status-error {
+  background: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-badge]) .ant-badge-status-warning {
+  background: var(--semi-color-warning);
+}
+
+.semi:where([data-semi="all"], [data-semi-badge]) .ant-badge-status-default {
+  background: var(--semi-color-text-2);
+}
+
+.semi:where([data-semi="all"], [data-semi-badge]) .ant-badge-status-text {
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+  margin-inline-start: 8px;
+}
+
+/* 缎带 */
+.semi:where([data-semi="all"], [data-semi-badge]) .ant-ribbon {
+  background: var(--semi-color-primary);
+  border-radius: 0 0 var(--semi-border-radius-small) 0;
+  font-size: var(--semi-font-size-small);
+  padding: 0 8px;
+}

package/dist/antd/styles/components/breadcrumb.css

@@ -0,0 +1,37 @@
+/**
+ * Breadcrumb 面包屑 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-breadcrumb]) .ant-breadcrumb {
+  font-size: var(--semi-font-size-regular);
+  color: var(--semi-color-text-2);
+}
+
+.semi:where([data-semi="all"], [data-semi-breadcrumb]) .ant-breadcrumb-link {
+  color: var(--semi-color-text-2);
+  transition: color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-breadcrumb]) .ant-breadcrumb-link:hover {
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-breadcrumb]) .ant-breadcrumb a {
+  color: var(--semi-color-text-2);
+  transition: color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-breadcrumb]) .ant-breadcrumb a:hover {
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-breadcrumb]) .ant-breadcrumb-separator {
+  color: var(--semi-color-text-3);
+  margin: 0 8px;
+}
+
+.semi:where([data-semi="all"], [data-semi-breadcrumb]) .ant-breadcrumb > span:last-child .ant-breadcrumb-link,
+.semi:where([data-semi="all"], [data-semi-breadcrumb]) .ant-breadcrumb-item:last-child {
+  color: var(--semi-color-text-0);
+  font-weight: 500;
+}