advance-semi-theme 1.0.0

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

@@ -0,0 +1,212 @@
+/**
+ * Tabs 标签页 - Semi Design 风格
+ * 参考 semi-foundation/tabs/variables.scss
+ */
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs {
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+}
+
+/* 标签导航 */
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-nav {
+  margin-bottom: 5px;
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-nav::before {
+  border-bottom: 1px solid var(--semi-color-border);
+}
+
+/* 标签项 - 线条式 */
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-tab {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-regular);
+  font-weight: 400;
+  padding: 12px 4px;
+  margin-right: 24px;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-tab:hover {
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-tab:active {
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-tab-active .ant-tabs-tab-btn {
+  color: var(--semi-color-text-0);
+  font-weight: 600;
+}
+
+/* 禁用标签 */
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-tab-disabled {
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-tab-disabled:hover {
+  color: var(--semi-color-disabled-text);
+}
+
+/* 指示条 */
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-ink-bar {
+  background: var(--semi-color-primary);
+  height: 2px;
+}
+
+/* ========== 卡片类型 ========== */
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-card > .ant-tabs-nav::before {
+  border-bottom: 1px solid var(--semi-color-border);
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
+  background: transparent;
+  border: 1px solid var(--semi-color-border);
+  border-bottom: none;
+  border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0;
+  margin-inline-end: 8px;
+  margin-bottom: -1px;
+  padding: 8px 12px;
+  color: var(--semi-color-text-2);
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab:hover {
+  background: var(--semi-color-fill-0);
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab:active {
+  background: var(--semi-color-fill-1);
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active {
+  background: var(--semi-color-bg-1);
+  border-color: var(--semi-color-border);
+  border-bottom-color: var(--semi-color-bg-1);
+  color: var(--semi-color-text-0);
+}
+
+/* ========== 按钮类型 ========== */
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs[class*="pills"] > .ant-tabs-nav::before,
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-button > .ant-tabs-nav::before {
+  border-bottom: none;
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs[class*="pills"] > .ant-tabs-nav .ant-tabs-tab,
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-button > .ant-tabs-nav .ant-tabs-tab {
+  background: transparent;
+  border: none;
+  border-radius: var(--semi-border-radius-small);
+  margin-inline-end: 8px;
+  padding: 8px 12px;
+  color: var(--semi-color-text-2);
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs[class*="pills"] > .ant-tabs-nav .ant-tabs-tab:hover,
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-button > .ant-tabs-nav .ant-tabs-tab:hover {
+  background: var(--semi-color-fill-0);
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs[class*="pills"] > .ant-tabs-nav .ant-tabs-tab:active,
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-button > .ant-tabs-nav .ant-tabs-tab:active {
+  background: var(--semi-color-fill-1);
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs[class*="pills"] > .ant-tabs-nav .ant-tabs-tab-active,
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-button > .ant-tabs-nav .ant-tabs-tab-active {
+  background: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs[class*="pills"] .ant-tabs-ink-bar,
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-button .ant-tabs-ink-bar {
+  display: none;
+}
+
+/* 可编辑卡片 */
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-editable-card .ant-tabs-tab-remove {
+  color: var(--semi-color-text-2);
+  font-size: 12px;
+  margin-inline-start: 8px;
+  transition: color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-editable-card .ant-tabs-tab-remove:hover {
+  color: var(--semi-color-danger);
+}
+
+/* 新增按钮 */
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-nav-add {
+  background: var(--semi-color-fill-0);
+  border: 1px dashed var(--semi-color-border);
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-2);
+  margin-inline-start: 2px;
+  padding: 0 8px;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-nav-add:hover {
+  border-color: var(--semi-color-primary);
+  color: var(--semi-color-primary);
+}
+
+/* 内容区 */
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-content {
+  color: var(--semi-color-text-0);
+}
+
+/* 导航操作 */
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-nav-operations {
+  color: var(--semi-color-text-1);
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-nav-more {
+  color: var(--semi-color-text-1);
+  padding: 8px 16px;
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-nav-more:hover {
+  color: var(--semi-color-primary);
+}
+
+/* 下拉菜单 (Portal 组件) */
+body.semi .ant-tabs-dropdown,
+.semi .ant-tabs-dropdown {
+  background: var(--semi-color-bg-0);
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+  padding: 4px;
+}
+
+body.semi .ant-tabs-dropdown-menu,
+.semi .ant-tabs-dropdown-menu {
+  background: transparent;
+  box-shadow: none;
+}
+
+body.semi .ant-tabs-dropdown-menu-item,
+.semi .ant-tabs-dropdown-menu-item {
+  color: var(--semi-color-text-0);
+  padding: 8px 12px;
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .ant-tabs-dropdown-menu-item:hover,
+.semi .ant-tabs-dropdown-menu-item:hover {
+  background: var(--semi-color-fill-0);
+}
+
+/* 尺寸 */
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-small > .ant-tabs-nav .ant-tabs-tab {
+  font-size: var(--semi-font-size-small);
+  padding: 8px 12px;
+}
+
+.semi:where([data-semi="all"], [data-semi-tabs]) .ant-tabs-large > .ant-tabs-nav .ant-tabs-tab {
+  font-size: 16px;
+  padding: 16px 20px;
+}

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

@@ -0,0 +1,286 @@
+/**
+ * Tag 标签 - Semi Design 风格
+ * 
+ * 无感映射：Ant Design Vue 的 color 属性自动映射到 Semi Design 风格
+ * 
+ * ┌────────────────────────────────┬──────────────────────────────────────┐
+ * │ Ant Design Vue API             │ Semi Design 风格                      │
+ * ├────────────────────────────────┼──────────────────────────────────────┤
+ * │ 默认                           │ 灰色 Light 标签                       │
+ * │ color="success"                │ 绿色 Light 标签                       │
+ * │ color="processing"             │ 蓝色 Light 标签                       │
+ * │ color="error"                  │ 红色 Light 标签                       │
+ * │ color="warning"                │ 橙色 Light 标签                       │
+ * │ color="default"                │ 灰色 Light 标签                       │
+ * └────────────────────────────────┴──────────────────────────────────────┘
+ * 
+ * 扩展能力：通过 data-theme 属性可设置 solid/light/ghost
+ */
+
+/* ========== 基础样式 ========== */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag {
+  border: none;
+  border-radius: var(--semi-border-radius-small);
+  font-size: var(--semi-font-size-small);
+  font-weight: 500;
+  line-height: 20px;
+  padding: 2px 8px;
+  margin-inline-end: 8px;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+/* ========== 默认标签 → Grey Light ========== */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag:not(.ant-tag-success):not(.ant-tag-processing):not(.ant-tag-error):not(.ant-tag-warning):not(.ant-tag-has-color) {
+  background: var(--semi-color-fill-0);
+  color: var(--semi-color-text-1);
+}
+
+/* ========== color="success" → Green Light ========== */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-success {
+  background: var(--semi-color-success-light-default);
+  color: var(--semi-color-success);
+}
+
+/* ========== color="processing" → Blue Light ========== */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-processing {
+  background: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+}
+
+/* ========== color="error" → Red Light ========== */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-error {
+  background: var(--semi-color-danger-light-default);
+  color: var(--semi-color-danger);
+}
+
+/* ========== color="warning" → Orange Light ========== */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-warning {
+  background: var(--semi-color-warning-light-default);
+  color: var(--semi-color-warning);
+}
+
+/* ========== color="default" → Grey Light ========== */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-default {
+  background: var(--semi-color-fill-0);
+  color: var(--semi-color-text-1);
+}
+
+/* ========== 预设颜色标签 ========== */
+/* Antd Vue 4.x 使用 .ant-tag-has-color + style 属性，需要覆盖 */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-blue,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[color="blue"] {
+  background: rgba(0, 100, 250, 0.1) !important;
+  color: #0064FA !important;
+  border-color: transparent !important;
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-green,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[color="green"] {
+  background: rgba(59, 179, 70, 0.1) !important;
+  color: #3BB346 !important;
+  border-color: transparent !important;
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-red,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[color="red"] {
+  background: rgba(249, 57, 32, 0.1) !important;
+  color: #F93920 !important;
+  border-color: transparent !important;
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-orange,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[color="orange"] {
+  background: rgba(252, 136, 0, 0.1) !important;
+  color: #FC8800 !important;
+  border-color: transparent !important;
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-purple,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[color="purple"] {
+  background: rgba(166, 71, 255, 0.1) !important;
+  color: #A647FF !important;
+  border-color: transparent !important;
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-cyan,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[color="cyan"] {
+  background: rgba(0, 149, 238, 0.1) !important;
+  color: #0095EE !important;
+  border-color: transparent !important;
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-magenta,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-pink,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[color="magenta"],
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[color="pink"] {
+  background: rgba(255, 100, 150, 0.1) !important;
+  color: #FF6496 !important;
+  border-color: transparent !important;
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-gold,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-yellow,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[color="gold"],
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[color="yellow"] {
+  background: rgba(250, 200, 0, 0.1) !important;
+  color: #D4A00A !important;
+  border-color: transparent !important;
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-lime,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[color="lime"] {
+  background: rgba(150, 200, 0, 0.1) !important;
+  color: #7CB305 !important;
+  border-color: transparent !important;
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-volcano,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[color="volcano"] {
+  background: rgba(255, 85, 0, 0.1) !important;
+  color: #FA541C !important;
+  border-color: transparent !important;
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-geekblue,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[color="geekblue"] {
+  background: rgba(47, 84, 235, 0.1) !important;
+  color: #2F54EB !important;
+  border-color: transparent !important;
+}
+
+/* ========== 可关闭标签 ========== */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-close-icon {
+  color: var(--semi-color-text-2);
+  margin-inline-start: 4px;
+  font-size: 10px;
+  cursor: pointer;
+  transition: color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-close-icon:hover {
+  color: var(--semi-color-text-1);
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-close-icon:active {
+  color: var(--semi-color-text-0);
+}
+
+/* Solid 主题的关闭图标 */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[data-theme="solid"] .ant-tag-close-icon,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-success[data-theme="solid"] .ant-tag-close-icon,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-processing[data-theme="solid"] .ant-tag-close-icon,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-error[data-theme="solid"] .ant-tag-close-icon,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-warning[data-theme="solid"] .ant-tag-close-icon {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[data-theme="solid"] .ant-tag-close-icon:hover,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-success[data-theme="solid"] .ant-tag-close-icon:hover,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-processing[data-theme="solid"] .ant-tag-close-icon:hover,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-error[data-theme="solid"] .ant-tag-close-icon:hover,
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-warning[data-theme="solid"] .ant-tag-close-icon:hover {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* ========== 可选择标签 ========== */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-checkable {
+  background: transparent;
+  border: 1px solid var(--semi-color-border);
+  cursor: pointer;
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-checkable:hover {
+  background: var(--semi-color-fill-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-checkable-checked {
+  background: var(--semi-color-primary-light-default);
+  border-color: transparent;
+  color: var(--semi-color-primary);
+}
+
+/* ========== 状态点标签 ========== */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag .ant-tag-status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-inline-end: 6px;
+}
+
+/* ========== 扩展：data-theme 属性 ========== */
+/* Solid 主题 */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[data-theme="solid"] {
+  background: var(--semi-color-tertiary);
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-success[data-theme="solid"] {
+  background: var(--semi-color-success);
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-processing[data-theme="solid"] {
+  background: var(--semi-color-primary);
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-error[data-theme="solid"] {
+  background: var(--semi-color-danger);
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-warning[data-theme="solid"] {
+  background: var(--semi-color-warning);
+  color: #fff;
+}
+
+/* Ghost 主题 (透明背景 + 边框) */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[data-theme="ghost"] {
+  background: transparent;
+  border: 1px solid var(--semi-color-border);
+  color: var(--semi-color-text-1);
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-success[data-theme="ghost"] {
+  background: transparent;
+  border: 1px solid var(--semi-color-success);
+  color: var(--semi-color-success);
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-processing[data-theme="ghost"] {
+  background: transparent;
+  border: 1px solid var(--semi-color-primary);
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-error[data-theme="ghost"] {
+  background: transparent;
+  border: 1px solid var(--semi-color-danger);
+  color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-warning[data-theme="ghost"] {
+  background: transparent;
+  border: 1px solid var(--semi-color-warning);
+  color: var(--semi-color-warning);
+}
+
+/* ========== 无边框 ========== */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-borderless {
+  border: none;
+}
+
+/* ========== 尺寸 ========== */
+/* 小尺寸 (默认) */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag {
+  height: 20px;
+  line-height: 16px;
+  padding: 2px 8px;
+}
+
+/* 大尺寸 */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-lg {
+  height: 24px;
+  line-height: 16px;
+  padding: 4px 8px;
+}

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

@@ -0,0 +1,40 @@
+/**
+ * TextArea 文本域 - Semi Design 风格
+ * Input.TextArea 样式在 input.css 中定义
+ */
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-textarea .ant-input {
+  background-color: var(--semi-color-fill-0);
+  border: 1px solid transparent;
+  border-radius: var(--semi-border-radius-small);
+  box-shadow: none;
+  color: var(--semi-color-text-0);
+  resize: vertical;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-textarea .ant-input:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-textarea .ant-input:focus {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+  box-shadow: none;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-textarea .ant-input::placeholder {
+  color: var(--semi-color-text-2);
+}
+
+/* 字数统计 */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-textarea-show-count::after {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+}
+
+/* 禁用状态 */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-textarea .ant-input:disabled {
+  background-color: var(--semi-color-disabled-fill);
+  color: var(--semi-color-disabled-text);
+}

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

@@ -0,0 +1,106 @@
+/**
+ * Timeline 时间轴 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline {
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+}
+
+/* 时间线项目 */
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-item {
+  padding-bottom: 20px;
+}
+
+/* 时间点 */
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-item-head {
+  background: var(--semi-color-bg-0);
+  border: 2px solid var(--semi-color-fill-1);
+  border-radius: var(--semi-border-radius-full);
+  height: 10px;
+  width: 10px;
+}
+
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-item-head-blue {
+  border-color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-item-head-green {
+  border-color: var(--semi-color-success);
+}
+
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-item-head-red {
+  border-color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-item-head-gray {
+  border-color: var(--semi-color-fill-1);
+}
+
+/* 自定义图标节点 */
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-item-head-custom {
+  background: transparent;
+  border: none;
+  height: auto;
+  width: auto;
+}
+
+/* 连接线 */
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-item-tail {
+  border-inline-start: 2px solid var(--semi-color-border);
+  inset-inline-start: 4px;
+}
+
+/* 内容 */
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-item-content {
+  color: var(--semi-color-text-0);
+  inset-block-start: -4px;
+  margin-inline-start: 20px;
+}
+
+/* 标签 */
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-item-label {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+}
+
+/* 待定状态 */
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-item-pending .ant-timeline-item-head {
+  background: transparent;
+  font-size: 12px;
+}
+
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-item-pending .ant-timeline-item-tail {
+  border-style: dashed;
+}
+
+/* 交替模式 */
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-alternate .ant-timeline-item-tail,
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-right .ant-timeline-item-tail,
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-label .ant-timeline-item-tail {
+  inset-inline-start: 50%;
+}
+
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-alternate .ant-timeline-item-head,
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-right .ant-timeline-item-head,
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-label .ant-timeline-item-head {
+  inset-inline-start: 50%;
+  margin-inline-start: -5px;
+}
+
+/* 右侧时间轴 */
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-right .ant-timeline-item-tail {
+  inset-inline-start: auto;
+  inset-inline-end: 4px;
+}
+
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-right .ant-timeline-item-head {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline-right .ant-timeline-item-content {
+  margin-inline-start: 0;
+  margin-inline-end: 20px;
+  text-align: end;
+}