advance-semi-theme 1.0.0

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

@@ -0,0 +1,63 @@
+/**
+ * Result 结果 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-result]) .ant-result {
+  padding: 48px 32px;
+}
+
+/* 图标 */
+.semi:where([data-semi="all"], [data-semi-result]) .ant-result-icon {
+  margin-bottom: 24px;
+}
+
+.semi:where([data-semi="all"], [data-semi-result]) .ant-result-icon > .anticon {
+  font-size: 72px;
+}
+
+.semi:where([data-semi="all"], [data-semi-result]) .ant-result-success .ant-result-icon > .anticon {
+  color: var(--semi-color-success);
+}
+
+.semi:where([data-semi="all"], [data-semi-result]) .ant-result-error .ant-result-icon > .anticon {
+  color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-result]) .ant-result-info .ant-result-icon > .anticon {
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-result]) .ant-result-warning .ant-result-icon > .anticon {
+  color: var(--semi-color-warning);
+}
+
+/* 标题 */
+.semi:where([data-semi="all"], [data-semi-result]) .ant-result-title {
+  color: var(--semi-color-text-0);
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+/* 副标题 */
+.semi:where([data-semi="all"], [data-semi-result]) .ant-result-subtitle {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-regular);
+}
+
+/* 额外内容 */
+.semi:where([data-semi="all"], [data-semi-result]) .ant-result-extra {
+  margin-top: 24px;
+}
+
+.semi:where([data-semi="all"], [data-semi-result]) .ant-result-extra > * {
+  margin-inline-end: 8px;
+}
+
+/* 内容区 */
+.semi:where([data-semi="all"], [data-semi-result]) .ant-result-content {
+  background: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-medium);
+  margin-top: 24px;
+  padding: 24px;
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Scrollbar 滚动条 - Semi Design 风格
+ * 用于自定义滚动条样式
+ */
+
+.semi:where([data-semi="all"]) ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.semi:where([data-semi="all"]) ::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.semi:where([data-semi="all"]) ::-webkit-scrollbar-thumb {
+  background-color: var(--semi-color-fill-2);
+  border-radius: 100px;
+}
+
+.semi:where([data-semi="all"]) ::-webkit-scrollbar-thumb:hover {
+  background-color: var(--semi-color-fill-3);
+}

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

@@ -0,0 +1,75 @@
+/**
+ * Segmented 分段控制器 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-segmented]) .ant-segmented {
+  background-color: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-small);
+  padding: 2px;
+}
+
+.semi:where([data-semi="all"], [data-semi-segmented]) .ant-segmented-group {
+  gap: 2px;
+}
+
+.semi:where([data-semi="all"], [data-semi-segmented]) .ant-segmented-item {
+  border-radius: calc(var(--semi-border-radius-small) - 2px);
+  color: var(--semi-color-text-1);
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-segmented]) .ant-segmented-item:hover:not(.ant-segmented-item-selected):not(.ant-segmented-item-disabled) {
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-segmented]) .ant-segmented-item-selected {
+  background-color: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-segmented]) .ant-segmented-item-disabled {
+  color: var(--semi-color-disabled-text);
+}
+
+.semi:where([data-semi="all"], [data-semi-segmented]) .ant-segmented-item-label {
+  min-height: 28px;
+  line-height: 28px;
+  padding: 0 12px;
+}
+
+.semi:where([data-semi="all"], [data-semi-segmented]) .ant-segmented-item-icon {
+  margin-right: 6px;
+}
+
+/* 大尺寸 */
+.semi:where([data-semi="all"], [data-semi-segmented]) .ant-segmented-lg .ant-segmented-item-label {
+  min-height: 36px;
+  line-height: 36px;
+  padding: 0 16px;
+  font-size: 16px;
+}
+
+/* 小尺寸 */
+.semi:where([data-semi="all"], [data-semi-segmented]) .ant-segmented-sm .ant-segmented-item-label {
+  min-height: 24px;
+  line-height: 24px;
+  padding: 0 8px;
+  font-size: var(--semi-font-size-small);
+}
+
+/* Block 模式 */
+.semi:where([data-semi="all"], [data-semi-segmented]) .ant-segmented-block {
+  width: 100%;
+}
+
+.semi:where([data-semi="all"], [data-semi-segmented]) .ant-segmented-block .ant-segmented-item {
+  flex: 1;
+}
+
+/* 滑块动画 */
+.semi:where([data-semi="all"], [data-semi-segmented]) .ant-segmented-thumb {
+  background-color: #fff;
+  border-radius: calc(var(--semi-border-radius-small) - 2px);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}

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

@@ -0,0 +1,282 @@
+/**
+ * Select 选择器 - Semi Design 风格
+ * 
+ * 基于 Semi Design 源码: packages/semi-foundation/select/select.scss
+ * 
+ * 状态说明:
+ * - 默认: fill-0 背景 + 透明边框
+ * - 悬浮: fill-1 背景 + 透明边框  
+ * - 聚焦/打开: fill-0 背景 + focus-border 边框
+ */
+
+/* ========== 基础样式 ========== */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select:not(.ant-select-customize-input) .ant-select-selector {
+  background-color: var(--semi-color-fill-0);
+  border: 1px solid transparent;
+  border-radius: var(--semi-border-radius-small);
+  height: 32px;
+  padding: 0 12px;
+  transition: background-color 0.1s ease, border 0.1s ease;
+}
+
+/* 悬浮状态 */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-select-focused):not(.ant-select-open):hover .ant-select-selector {
+  background-color: var(--semi-color-fill-1);
+  border-color: transparent;
+}
+
+/* 聚焦/打开状态 */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input).ant-select-focused .ant-select-selector,
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input).ant-select-open .ant-select-selector {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+  box-shadow: none;
+  outline: none;
+}
+
+/* ========== 选中值显示 ========== */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-selection-item {
+  color: var(--semi-color-text-0);
+  line-height: 30px;
+}
+
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-selection-placeholder {
+  color: var(--semi-color-text-2);
+}
+
+/* ========== 箭头图标 ========== */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-arrow {
+  color: var(--semi-color-text-2);
+  transition: transform 0.15s ease;
+}
+
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-open .ant-select-arrow {
+  transform: rotate(180deg);
+}
+
+/* ========== 清除按钮 ========== */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-clear {
+  background: transparent;
+  color: var(--semi-color-text-2);
+}
+
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-clear:hover {
+  color: var(--semi-color-primary-hover);
+}
+
+/* ========== 尺寸 ========== */
+/* Large */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-lg:not(.ant-select-customize-input) .ant-select-selector {
+  height: 40px;
+  border-radius: var(--semi-border-radius-small);
+}
+
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-lg .ant-select-selection-item {
+  line-height: 38px;
+}
+
+/* Small */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-sm:not(.ant-select-customize-input) .ant-select-selector {
+  height: 24px;
+  padding: 0 8px;
+  border-radius: var(--semi-border-radius-small);
+}
+
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-sm .ant-select-selection-item {
+  line-height: 22px;
+}
+
+/* ========== 多选模式 ========== */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-multiple .ant-select-selector {
+  padding: 2px 4px;
+  min-height: 32px;
+  height: auto;
+}
+
+/* 多选标签样式 - Semi Design Tag Light 风格 */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-multiple .ant-select-selection-item {
+  background: rgba(46, 50, 56, 0.09);
+  border: none;
+  border-radius: 3px;
+  color: var(--semi-color-text-0);
+  height: 24px;
+  line-height: 24px;
+  margin-inline-end: 4px;
+  margin-block: 1px;
+  padding-inline-start: 8px;
+  padding-inline-end: 4px;
+  font-size: 12px;
+}
+
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-multiple .ant-select-selection-item-content {
+  margin-inline-end: 4px;
+  line-height: 24px;
+}
+
+/* 删除按钮 */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-multiple .ant-select-selection-item-remove {
+  color: var(--semi-color-text-2);
+  font-size: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-multiple .ant-select-selection-item-remove:hover {
+  color: var(--semi-color-text-0);
+}
+
+/* 多选搜索 */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-multiple .ant-select-selection-search {
+  margin-inline-start: 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-multiple .ant-select-selection-search-input {
+  height: 24px;
+}
+
+/* 多选溢出容器 */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-multiple .ant-select-selection-overflow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-multiple .ant-select-selection-overflow-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ========== 状态 - Error ========== */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-status-error:not(.ant-select-disabled) .ant-select-selector {
+  background-color: var(--semi-color-danger-light-default);
+  border-color: var(--semi-color-danger-light-default);
+}
+
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-status-error:not(.ant-select-disabled):not(.ant-select-focused):hover .ant-select-selector {
+  background-color: var(--semi-color-danger-light-hover);
+  border-color: var(--semi-color-danger-light-hover);
+}
+
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-status-error:not(.ant-select-disabled).ant-select-focused .ant-select-selector {
+  background-color: var(--semi-color-danger-light-default);
+  border-color: var(--semi-color-danger);
+  box-shadow: none;
+  outline: none;
+}
+
+/* ========== 状态 - Warning ========== */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-status-warning:not(.ant-select-disabled) .ant-select-selector {
+  background-color: var(--semi-color-warning-light-default);
+  border-color: var(--semi-color-warning-light-default);
+}
+
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-status-warning:not(.ant-select-disabled):not(.ant-select-focused):hover .ant-select-selector {
+  background-color: var(--semi-color-warning-light-hover);
+  border-color: var(--semi-color-warning-light-hover);
+}
+
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-status-warning:not(.ant-select-disabled).ant-select-focused .ant-select-selector {
+  background-color: var(--semi-color-warning-light-default);
+  border-color: var(--semi-color-warning);
+  box-shadow: none;
+  outline: none;
+}
+
+/* ========== 禁用状态 ========== */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-disabled .ant-select-selector {
+  background-color: var(--semi-color-disabled-fill);
+  border-color: transparent;
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-disabled .ant-select-selection-item,
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-disabled .ant-select-selection-placeholder {
+  color: var(--semi-color-disabled-text);
+}
+
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-disabled .ant-select-arrow {
+  color: var(--semi-color-disabled-text);
+}
+
+/* ========== 搜索 ========== */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-selection-search-input {
+  color: var(--semi-color-text-0);
+}
+
+/* ========== 无边框模式 ========== */
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-borderless .ant-select-selector {
+  background: transparent;
+  border: none;
+}
+
+.semi:where([data-semi="all"], [data-semi-select]) .ant-select-borderless:not(.ant-select-focused):not(.ant-select-open):hover .ant-select-selector {
+  background-color: var(--semi-color-fill-0);
+}
+
+/* ==========================================================================
+   下拉菜单 (Portal 组件 - 渲染在 body 下)
+   使用 body.semi 选择器确保样式生效
+   ========================================================================== */
+
+/* 下拉面板容器 */
+body.semi .ant-select-dropdown,
+.semi .ant-select-dropdown {
+  background-color: var(--semi-color-bg-0);
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+  padding: 4px;
+}
+
+/* 下拉选项 */
+body.semi .ant-select-item,
+.semi .ant-select-item {
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-0);
+  min-height: 32px;
+  padding: 8px 12px;
+  transition: background-color 0.1s ease;
+}
+
+/* 选项悬浮 */
+body.semi .ant-select-item-option-active:not(.ant-select-item-option-disabled),
+.semi .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+  background-color: var(--semi-color-fill-0);
+}
+
+/* 选项选中 */
+body.semi .ant-select-item-option-selected:not(.ant-select-item-option-disabled),
+.semi .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+  background-color: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+  font-weight: 600;
+}
+
+body.semi .ant-select-item-option-selected:not(.ant-select-item-option-disabled):hover,
+.semi .ant-select-item-option-selected:not(.ant-select-item-option-disabled):hover {
+  background-color: var(--semi-color-primary-light-hover);
+}
+
+/* 选项禁用 */
+body.semi .ant-select-item-option-disabled,
+.semi .ant-select-item-option-disabled {
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+
+/* 分组标题 */
+body.semi .ant-select-item-group,
+.semi .ant-select-item-group {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+  padding: 8px 12px 4px;
+}
+
+/* 空状态 */
+body.semi .ant-select-item-empty,
+.semi .ant-select-item-empty {
+  color: var(--semi-color-text-2);
+  text-align: center;
+  padding: 16px;
+}

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

@@ -0,0 +1,96 @@
+/**
+ * Skeleton 骨架屏 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton {
+  display: table;
+  width: 100%;
+}
+
+/* 头像骨架 */
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-avatar {
+  background: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-full);
+}
+
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-avatar-square {
+  border-radius: var(--semi-border-radius-medium);
+}
+
+/* 标题骨架 */
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-title {
+  background: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-small);
+  height: 16px;
+  margin-bottom: 16px;
+}
+
+/* 段落骨架 */
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-paragraph > li {
+  background: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-small);
+  height: 16px;
+  margin-top: 12px;
+}
+
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-paragraph > li:first-child {
+  margin-top: 0;
+}
+
+/* 按钮骨架 */
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-button {
+  background: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-medium);
+  height: 32px;
+  min-width: 64px;
+}
+
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-button-round {
+  border-radius: 32px;
+}
+
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-button-circle {
+  border-radius: var(--semi-border-radius-full);
+  min-width: 32px;
+}
+
+/* 输入框骨架 */
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-input {
+  background: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-medium);
+  height: 32px;
+  min-width: 200px;
+}
+
+/* 图片骨架 */
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-image {
+  background: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-medium);
+}
+
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-image-svg {
+  fill: var(--semi-color-fill-1);
+}
+
+/* 动画效果 */
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-active .ant-skeleton-avatar,
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-active .ant-skeleton-title,
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-active .ant-skeleton-paragraph > li,
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-active .ant-skeleton-button,
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-active .ant-skeleton-input,
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-active .ant-skeleton-image {
+  background: linear-gradient(
+    90deg,
+    var(--semi-color-fill-0) 25%,
+    var(--semi-color-fill-1) 37%,
+    var(--semi-color-fill-0) 63%
+  );
+  background-size: 400% 100%;
+  animation: ant-skeleton-loading 1.4s ease infinite;
+}
+
+/* 节点骨架 */
+.semi:where([data-semi="all"], [data-semi-skeleton]) .ant-skeleton-element {
+  display: inline-block;
+  width: auto;
+}

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

@@ -0,0 +1,119 @@
+/**
+ * Slider 滑动输入条 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider {
+  margin: 10px 0;
+}
+
+/* 轨道 */
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-rail {
+  background: var(--semi-color-fill-0);
+  border-radius: 100px;
+  height: 4px;
+}
+
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider:hover .ant-slider-rail {
+  background: var(--semi-color-fill-1);
+}
+
+/* 已选择轨道 */
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-track {
+  background: var(--semi-color-primary);
+  border-radius: 100px;
+  height: 4px;
+}
+
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider:hover .ant-slider-track {
+  background: var(--semi-color-primary-hover);
+}
+
+/* 滑块 */
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-handle {
+  background: #fff;
+  border: 2px solid var(--semi-color-primary);
+  border-radius: var(--semi-border-radius-full);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  height: 14px;
+  width: 14px;
+  margin-top: -5px;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-handle::after {
+  display: none;
+}
+
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-handle:hover,
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-handle:focus {
+  border-color: var(--semi-color-primary);
+  box-shadow: 0 0 0 4px var(--semi-color-primary-light-default);
+}
+
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-handle-dragging {
+  border-color: var(--semi-color-primary);
+  box-shadow: 0 0 0 4px var(--semi-color-primary-light-default);
+}
+
+/* 刻度标记 */
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-mark-text {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+}
+
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-mark-text-active {
+  color: var(--semi-color-text-0);
+}
+
+/* 刻度点 */
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-dot {
+  background: #fff;
+  border: 2px solid var(--semi-color-fill-1);
+  border-radius: var(--semi-border-radius-full);
+  height: 8px;
+  width: 8px;
+}
+
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-dot-active {
+  border-color: var(--semi-color-primary);
+}
+
+/* 提示 */
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-tooltip .ant-tooltip-inner {
+  background: var(--semi-color-bg-0);
+  border-radius: var(--semi-border-radius-small);
+  box-shadow: var(--semi-shadow-elevated);
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-small);
+  min-height: auto;
+  padding: 4px 8px;
+}
+
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-tooltip .ant-tooltip-arrow::before {
+  background: var(--semi-color-bg-0);
+}
+
+/* 禁用状态 */
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-disabled .ant-slider-rail {
+  background: var(--semi-color-fill-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-disabled .ant-slider-track {
+  background: var(--semi-color-fill-1);
+}
+
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-disabled .ant-slider-handle {
+  background: #fff;
+  border-color: var(--semi-color-fill-1);
+  cursor: not-allowed;
+}
+
+/* 垂直滑块 */
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-vertical .ant-slider-rail,
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-vertical .ant-slider-track {
+  width: 4px;
+}
+
+.semi:where([data-semi="all"], [data-semi-slider]) .ant-slider-vertical .ant-slider-handle {
+  margin-left: -5px;
+}