advance-semi-theme 1.0.0

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

@@ -0,0 +1,109 @@
+/**
+ * List 列表 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list {
+  color: var(--semi-color-text-0);
+}
+
+/* 列表项 */
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-item {
+  border-bottom: 1px solid var(--semi-color-border);
+  padding: 12px 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-item:last-child {
+  border-bottom: none;
+}
+
+/* 列表项内容 */
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-item-meta-title {
+  color: var(--semi-color-text-0);
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-item-meta-title > a {
+  color: var(--semi-color-text-0);
+  transition: color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-item-meta-title > a:hover {
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-item-meta-description {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-regular);
+}
+
+/* 操作区 */
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-item-action {
+  margin-inline-start: 24px;
+}
+
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-item-action > li {
+  color: var(--semi-color-text-2);
+  padding: 0 8px;
+}
+
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-item-action > li:hover {
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-item-action-split {
+  background: var(--semi-color-border);
+}
+
+/* 头部和底部 */
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-header {
+  border-bottom: 1px solid var(--semi-color-border);
+  padding: 12px 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-footer {
+  border-top: 1px solid var(--semi-color-border);
+  padding: 12px 0;
+}
+
+/* 加载更多 */
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-load-more {
+  text-align: center;
+  padding: 12px 0;
+}
+
+/* 边框模式 */
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-bordered {
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--semi-border-radius-medium);
+}
+
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-bordered .ant-list-item {
+  padding: 12px 16px;
+}
+
+/* 分割线模式 */
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-split .ant-list-item {
+  border-bottom: 1px solid var(--semi-color-border);
+}
+
+/* 网格模式 */
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-grid .ant-list-item {
+  border-bottom: none;
+}
+
+/* 尺寸 */
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-sm .ant-list-item {
+  padding: 8px 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-lg .ant-list-item {
+  padding: 16px 0;
+}
+
+/* 空状态 */
+.semi:where([data-semi="all"], [data-semi-list]) .ant-list-empty-text {
+  color: var(--semi-color-text-2);
+  padding: 32px 0;
+  text-align: center;
+}

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

@@ -0,0 +1,84 @@
+/**
+ * Mentions 提及 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-mentions]) .ant-mentions {
+  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-mentions]) .ant-mentions:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+.semi:where([data-semi="all"], [data-semi-mentions]) .ant-mentions-focused {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+  box-shadow: none;
+}
+
+.semi:where([data-semi="all"], [data-semi-mentions]) .ant-mentions > textarea {
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-mentions]) .ant-mentions > textarea::placeholder {
+  color: var(--semi-color-text-2);
+}
+
+/* 下拉面板 */
+body.semi .ant-mentions-dropdown {
+  background: #fff;
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+  padding: 4px 0;
+}
+
+body.semi .ant-mentions-dropdown-menu-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-mentions-dropdown-menu-item:hover {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .ant-mentions-dropdown-menu-item-active {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .ant-mentions-dropdown-menu-item-selected {
+  background-color: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+  font-weight: 500;
+}
+
+body.semi .ant-mentions-dropdown-menu-item-disabled {
+  color: var(--semi-color-disabled-text);
+}
+
+/* 状态 */
+.semi:where([data-semi="all"], [data-semi-mentions]) .ant-mentions-status-error {
+  border-color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-mentions]) .ant-mentions-status-warning {
+  border-color: var(--semi-color-warning);
+}
+
+/* 禁用状态 */
+.semi:where([data-semi="all"], [data-semi-mentions]) .ant-mentions-disabled {
+  background-color: var(--semi-color-disabled-fill);
+  color: var(--semi-color-disabled-text);
+}
+
+/* 加载状态 */
+body.semi .ant-mentions-dropdown-menu-item-loading {
+  color: var(--semi-color-primary);
+}

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

@@ -0,0 +1,190 @@
+/**
+ * Menu 菜单 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu {
+  background: transparent;
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+}
+
+/* 菜单项 */
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-item {
+  border-radius: var(--semi-border-radius-small);
+  margin: 2px 0;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-item:hover {
+  background: var(--semi-color-fill-0);
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-item-selected {
+  background: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+  font-weight: 500;
+}
+
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-item-selected:hover {
+  background: var(--semi-color-primary-light-hover);
+}
+
+/* 子菜单 */
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-submenu-title {
+  border-radius: var(--semi-border-radius-small);
+  margin: 2px 0;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-submenu-title:hover {
+  background: var(--semi-color-fill-0);
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-submenu-selected > .ant-menu-submenu-title {
+  color: var(--semi-color-primary);
+}
+
+/* 展开图标 */
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-submenu-arrow {
+  color: var(--semi-color-text-2);
+}
+
+/* 分组标题 */
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-item-group-title {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+  padding: 8px 16px 4px;
+}
+
+/* 分割线 */
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-item-divider {
+  background: var(--semi-color-border);
+  margin: 4px 0;
+}
+
+/* 禁用状态 */
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-item-disabled {
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+
+/* 水平菜单 */
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-horizontal {
+  border-bottom: 1px solid var(--semi-color-border);
+}
+
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-horizontal > .ant-menu-item,
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-horizontal > .ant-menu-submenu {
+  border-bottom: 2px solid transparent;
+  margin: 0;
+  padding: 0 16px;
+}
+
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-horizontal > .ant-menu-item:hover,
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-horizontal > .ant-menu-submenu:hover {
+  background: transparent;
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-horizontal > .ant-menu-item-selected,
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-horizontal > .ant-menu-submenu-selected {
+  background: transparent;
+  border-bottom-color: var(--semi-color-primary);
+  color: var(--semi-color-primary);
+}
+
+/* 内联菜单 */
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-inline .ant-menu-item,
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-inline .ant-menu-submenu-title {
+  padding: 0 16px;
+  height: 40px;
+  line-height: 40px;
+}
+
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-inline .ant-menu-sub.ant-menu-inline {
+  background: transparent;
+}
+
+/* 暗色模式 */
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-dark {
+  background: var(--semi-color-bg-1);
+}
+
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-dark .ant-menu-item:hover {
+  background: var(--semi-color-fill-1);
+}
+
+.semi:where([data-semi="all"], [data-semi-menu]) .ant-menu-dark .ant-menu-item-selected {
+  background: var(--semi-color-primary);
+  color: #fff;
+}
+
+/* ==========================================================================
+   弹出子菜单 (Portal 组件 - 渲染在 body 下)
+   ========================================================================== */
+
+body.semi .ant-menu-submenu-popup,
+.semi .ant-menu-submenu-popup {
+  z-index: 1050;
+}
+
+body.semi .ant-menu-submenu-popup > .ant-menu,
+.semi .ant-menu-submenu-popup > .ant-menu {
+  background: var(--semi-color-bg-0);
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+  padding: 4px;
+}
+
+body.semi .ant-menu-submenu-popup .ant-menu-item,
+.semi .ant-menu-submenu-popup .ant-menu-item {
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-0);
+  margin: 2px 4px;
+  padding: 8px 12px;
+}
+
+body.semi .ant-menu-submenu-popup .ant-menu-item:hover,
+.semi .ant-menu-submenu-popup .ant-menu-item:hover {
+  background: var(--semi-color-fill-0);
+}
+
+body.semi .ant-menu-submenu-popup .ant-menu-item-selected,
+.semi .ant-menu-submenu-popup .ant-menu-item-selected {
+  background: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+  font-weight: 500;
+}
+
+body.semi .ant-menu-submenu-popup .ant-menu-submenu-title,
+.semi .ant-menu-submenu-popup .ant-menu-submenu-title {
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-0);
+  margin: 2px 4px;
+  padding: 8px 12px;
+}
+
+body.semi .ant-menu-submenu-popup .ant-menu-submenu-title:hover,
+.semi .ant-menu-submenu-popup .ant-menu-submenu-title:hover {
+  background: var(--semi-color-fill-0);
+}
+
+body.semi .ant-menu-submenu-popup .ant-menu-item-divider,
+.semi .ant-menu-submenu-popup .ant-menu-item-divider {
+  background: var(--semi-color-border);
+  margin: 4px 8px;
+}
+
+body.semi .ant-menu-submenu-popup .ant-menu-item-disabled,
+.semi .ant-menu-submenu-popup .ant-menu-item-disabled {
+  color: var(--semi-color-disabled-text);
+}
+
+body.semi .ant-menu-submenu-popup .ant-menu-item-group-title,
+.semi .ant-menu-submenu-popup .ant-menu-item-group-title {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+  padding: 8px 12px 4px;
+}

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

@@ -0,0 +1,68 @@
+/**
+ * Message 消息提示 - Semi Design 风格
+ * Portal 组件 - 渲染在 body 下
+ */
+
+/* ========== 消息容器 ========== */
+body.semi .ant-message-notice-content,
+.semi .ant-message-notice-content {
+  background: #fff;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+  padding: 10px 16px;
+}
+
+/* ========== 消息内容 ========== */
+body.semi .ant-message-custom-content,
+.semi .ant-message-custom-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+body.semi .ant-message-custom-content > span:last-child,
+.semi .ant-message-custom-content > span:last-child {
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+}
+
+/* ========== 图标颜色 ========== */
+body.semi .ant-message-info .anticon,
+.semi .ant-message-info .anticon {
+  color: var(--semi-color-primary);
+}
+
+body.semi .ant-message-success .anticon,
+.semi .ant-message-success .anticon {
+  color: var(--semi-color-success);
+}
+
+body.semi .ant-message-warning .anticon,
+.semi .ant-message-warning .anticon {
+  color: var(--semi-color-warning);
+}
+
+body.semi .ant-message-error .anticon,
+.semi .ant-message-error .anticon {
+  color: var(--semi-color-danger);
+}
+
+body.semi .ant-message-loading .anticon,
+.semi .ant-message-loading .anticon {
+  color: var(--semi-color-primary);
+}
+
+/* ========== 动画 ========== */
+body.semi .ant-message-move-up-appear,
+body.semi .ant-message-move-up-enter,
+.semi .ant-message-move-up-appear,
+.semi .ant-message-move-up-enter {
+  animation-duration: 0.2s;
+  animation-timing-function: var(--semi-transition-timing);
+}
+
+body.semi .ant-message-move-up-leave,
+.semi .ant-message-move-up-leave {
+  animation-duration: 0.15s;
+  animation-timing-function: var(--semi-transition-timing);
+}

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

@@ -0,0 +1,124 @@
+/**
+ * Modal 对话框 - Semi Design 风格
+ * Portal 组件 - 渲染在 body 下
+ */
+
+/* ========== 遮罩层 ========== */
+body.semi .ant-modal-mask,
+.semi .ant-modal-mask {
+  background: rgba(0, 0, 0, 0.6);
+}
+
+/* ========== 对话框容器 ========== */
+body.semi .ant-modal-content,
+.semi .ant-modal-content {
+  background: var(--semi-color-bg-0);
+  border-radius: var(--semi-border-radius-large);
+  box-shadow: var(--semi-shadow-floating);
+  padding: 0;
+}
+
+/* ========== 标题栏 ========== */
+body.semi .ant-modal-header,
+.semi .ant-modal-header {
+  background: transparent;
+  border-bottom: none;
+  padding: 20px 24px 12px;
+  margin-bottom: 0;
+}
+
+body.semi .ant-modal-title,
+.semi .ant-modal-title {
+  color: var(--semi-color-text-0);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+/* ========== 关闭按钮 ========== */
+body.semi .ant-modal-close,
+.semi .ant-modal-close {
+  top: 16px;
+  inset-inline-end: 16px;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--semi-border-radius-medium);
+  transition: background var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .ant-modal-close:hover,
+.semi .ant-modal-close:hover {
+  background: var(--semi-color-fill-0);
+}
+
+body.semi .ant-modal-close-x,
+.semi .ant-modal-close-x {
+  font-size: 16px;
+  color: var(--semi-color-text-2);
+}
+
+/* ========== 内容区 ========== */
+body.semi .ant-modal-body,
+.semi .ant-modal-body {
+  padding: 12px 24px 20px;
+  color: var(--semi-color-text-1);
+  font-size: var(--semi-font-size-regular);
+  line-height: 1.6;
+}
+
+/* ========== 底部按钮区 ========== */
+body.semi .ant-modal-footer,
+.semi .ant-modal-footer {
+  border-top: none;
+  padding: 12px 24px 20px;
+  text-align: right;
+}
+
+body.semi .ant-modal-footer .ant-btn + .ant-btn,
+.semi .ant-modal-footer .ant-btn + .ant-btn {
+  margin-inline-start: 8px;
+}
+
+/* ========== 确认对话框 ========== */
+body.semi .ant-modal-confirm .ant-modal-body,
+.semi .ant-modal-confirm .ant-modal-body {
+  padding: 24px;
+}
+
+body.semi .ant-modal-confirm-title,
+.semi .ant-modal-confirm-title {
+  color: var(--semi-color-text-0);
+  font-weight: 600;
+}
+
+body.semi .ant-modal-confirm-content,
+.semi .ant-modal-confirm-content {
+  color: var(--semi-color-text-1);
+  margin-top: 8px;
+}
+
+body.semi .ant-modal-confirm-btns,
+.semi .ant-modal-confirm-btns {
+  margin-top: 24px;
+}
+
+/* ========== 图标 ========== */
+body.semi .ant-modal-confirm-info .anticon,
+.semi .ant-modal-confirm-info .anticon {
+  color: var(--semi-color-primary);
+}
+
+body.semi .ant-modal-confirm-success .anticon,
+.semi .ant-modal-confirm-success .anticon {
+  color: var(--semi-color-success);
+}
+
+body.semi .ant-modal-confirm-warning .anticon,
+.semi .ant-modal-confirm-warning .anticon {
+  color: var(--semi-color-warning);
+}
+
+body.semi .ant-modal-confirm-error .anticon,
+.semi .ant-modal-confirm-error .anticon {
+  color: var(--semi-color-danger);
+}

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

@@ -0,0 +1,89 @@
+/**
+ * Notification 通知提醒 - Semi Design 风格
+ * Portal 组件 - 渲染在 body 下
+ */
+
+/* ========== 通知容器 ========== */
+body.semi .ant-notification-notice,
+.semi .ant-notification-notice {
+  background: #fff;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-floating);
+  padding: 16px 20px;
+}
+
+/* ========== 图标 ========== */
+body.semi .ant-notification-notice-icon,
+.semi .ant-notification-notice-icon {
+  font-size: 24px;
+}
+
+body.semi .ant-notification-notice-icon-info,
+.semi .ant-notification-notice-icon-info {
+  color: var(--semi-color-primary);
+}
+
+body.semi .ant-notification-notice-icon-success,
+.semi .ant-notification-notice-icon-success {
+  color: var(--semi-color-success);
+}
+
+body.semi .ant-notification-notice-icon-warning,
+.semi .ant-notification-notice-icon-warning {
+  color: var(--semi-color-warning);
+}
+
+body.semi .ant-notification-notice-icon-error,
+.semi .ant-notification-notice-icon-error {
+  color: var(--semi-color-danger);
+}
+
+/* ========== 标题和内容 ========== */
+body.semi .ant-notification-notice-message,
+.semi .ant-notification-notice-message {
+  color: var(--semi-color-text-0);
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+body.semi .ant-notification-notice-description,
+.semi .ant-notification-notice-description {
+  color: var(--semi-color-text-1);
+  font-size: var(--semi-font-size-regular);
+  line-height: 1.6;
+}
+
+/* ========== 关闭按钮 ========== */
+body.semi .ant-notification-notice-close,
+.semi .ant-notification-notice-close {
+  color: var(--semi-color-text-2);
+  top: 16px;
+  inset-inline-end: 16px;
+}
+
+body.semi .ant-notification-notice-close:hover,
+.semi .ant-notification-notice-close:hover {
+  color: var(--semi-color-text-0);
+}
+
+/* ========== 按钮区 ========== */
+body.semi .ant-notification-notice-btn,
+.semi .ant-notification-notice-btn {
+  margin-top: 12px;
+}
+
+/* ========== 动画 ========== */
+body.semi .ant-notification-fade-appear,
+body.semi .ant-notification-fade-enter,
+.semi .ant-notification-fade-appear,
+.semi .ant-notification-fade-enter {
+  animation-duration: 0.2s;
+  animation-timing-function: var(--semi-transition-timing);
+}
+
+body.semi .ant-notification-fade-leave,
+.semi .ant-notification-fade-leave {
+  animation-duration: 0.15s;
+  animation-timing-function: var(--semi-transition-timing);
+}