advance-semi-theme 1.0.0

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

@@ -0,0 +1,57 @@
+/**
+ * Carousel 走马灯 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-carousel]) .ant-carousel {
+  color: var(--semi-color-text-0);
+}
+
+/* 指示器 */
+.semi:where([data-semi="all"], [data-semi-carousel]) .ant-carousel .slick-dots li button {
+  background: var(--semi-color-text-3);
+  border-radius: 2px;
+  height: 4px;
+  opacity: 1;
+}
+
+.semi:where([data-semi="all"], [data-semi-carousel]) .ant-carousel .slick-dots li.slick-active button {
+  background: var(--semi-color-primary);
+  width: 24px;
+}
+
+/* 箭头 */
+.semi:where([data-semi="all"], [data-semi-carousel]) .ant-carousel .slick-prev,
+.semi:where([data-semi="all"], [data-semi-carousel]) .ant-carousel .slick-next {
+  color: var(--semi-color-text-0);
+  background: var(--semi-color-bg-0);
+  border-radius: var(--semi-border-radius-full);
+  box-shadow: var(--semi-shadow-elevated);
+  width: 32px;
+  height: 32px;
+  z-index: 1;
+}
+
+.semi:where([data-semi="all"], [data-semi-carousel]) .ant-carousel .slick-prev:hover,
+.semi:where([data-semi="all"], [data-semi-carousel]) .ant-carousel .slick-next:hover {
+  background: var(--semi-color-fill-0);
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-carousel]) .ant-carousel .slick-prev {
+  inset-inline-start: 12px;
+}
+
+.semi:where([data-semi="all"], [data-semi-carousel]) .ant-carousel .slick-next {
+  inset-inline-end: 12px;
+}
+
+/* 垂直指示器 */
+.semi:where([data-semi="all"], [data-semi-carousel]) .ant-carousel-vertical .slick-dots li button {
+  width: 4px;
+  height: 16px;
+}
+
+.semi:where([data-semi="all"], [data-semi-carousel]) .ant-carousel-vertical .slick-dots li.slick-active button {
+  width: 4px;
+  height: 24px;
+}

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

@@ -0,0 +1,99 @@
+/**
+ * Cascader 级联选择 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-cascader]) .ant-cascader .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-cascader]) .ant-cascader .ant-select-selector:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+.semi:where([data-semi="all"], [data-semi-cascader]) .ant-cascader.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-cascader]) .ant-cascader .ant-select-selection-item {
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-cascader]) .ant-cascader .ant-select-selection-placeholder {
+  color: var(--semi-color-text-2);
+}
+
+/* 下拉面板 */
+body.semi .ant-cascader-dropdown {
+  background: #fff;
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+}
+
+body.semi .ant-cascader-menus {
+  background: #fff;
+}
+
+body.semi .ant-cascader-menu {
+  border-right: 1px solid var(--semi-color-border);
+  padding: 4px 0;
+  min-width: 120px;
+  height: auto;
+  max-height: 280px;
+}
+
+body.semi .ant-cascader-menu:last-child {
+  border-right: none;
+}
+
+body.semi .ant-cascader-menu-item {
+  border-radius: 0;
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+  min-height: 36px;
+  padding: 8px 16px;
+  line-height: 20px;
+}
+
+body.semi .ant-cascader-menu-item:hover {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .ant-cascader-menu-item-active {
+  background-color: var(--semi-color-primary-light-default);
+}
+
+body.semi .ant-cascader-menu-item-active:hover {
+  background-color: var(--semi-color-primary-light-hover);
+}
+
+body.semi .ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon {
+  color: var(--semi-color-text-2);
+}
+
+body.semi .ant-cascader-menu-item-disabled {
+  color: var(--semi-color-disabled-text);
+}
+
+/* 选中状态 */
+body.semi .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) {
+  color: var(--semi-color-primary);
+  font-weight: 500;
+}
+
+/* 搜索面板 */
+body.semi .ant-cascader-menu-item-keyword {
+  color: var(--semi-color-danger);
+}
+
+/* 空状态 */
+body.semi .ant-cascader-menu-empty {
+  color: var(--semi-color-text-3);
+  padding: 16px;
+}

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

@@ -0,0 +1,26 @@
+/**
+ * CheckableTag 可选择标签 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-checkable {
+  background-color: var(--semi-color-fill-0);
+  border: none;
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-1);
+  padding: 4px 12px;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-checkable:hover {
+  background-color: var(--semi-color-fill-1);
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-checkable-checked {
+  background-color: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag-checkable-checked:hover {
+  background-color: var(--semi-color-primary-light-hover);
+}

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

@@ -0,0 +1,119 @@
+/**
+ * Checkbox 复选框 - Semi Design 风格
+ */
+
+/* ========== 基础样式 ========== */
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-wrapper {
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+  align-items: center;
+}
+
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox {
+  top: 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-inner {
+  width: 16px;
+  height: 16px;
+  border-color: var(--semi-color-text-3);
+  border-radius: var(--semi-border-radius-extra-small);
+  background: transparent;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+/* ========== Hover 状态 ========== */
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-wrapper:hover .ant-checkbox-inner,
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox:hover .ant-checkbox-inner {
+  border-color: var(--semi-color-focus-border);
+  background: var(--semi-color-fill-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-wrapper:active .ant-checkbox-inner,
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox:active .ant-checkbox-inner {
+  background: var(--semi-color-fill-1);
+}
+
+/* ========== 选中状态 ========== */
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-checked .ant-checkbox-inner {
+  background: var(--semi-color-primary);
+  border-color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-checked .ant-checkbox-inner::after {
+  border-color: #fff;
+  border-width: 2px;
+  transform: rotate(45deg) scale(1) translate(-50%, -50%);
+}
+
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-checked:hover .ant-checkbox-inner {
+  background: var(--semi-color-primary-hover);
+  border-color: var(--semi-color-primary-hover);
+}
+
+/* ========== 半选状态 ========== */
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-indeterminate .ant-checkbox-inner {
+  background: var(--semi-color-primary);
+  border-color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-indeterminate .ant-checkbox-inner::after {
+  width: 8px;
+  height: 2px;
+  background: #fff;
+  border: none;
+  transform: translate(-50%, -50%);
+}
+
+/* ========== Focus 状态 ========== */
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-input:focus-visible + .ant-checkbox-inner {
+  outline: 3px solid var(--semi-color-primary-light-default);
+  outline-offset: 0;
+}
+
+/* ========== 禁用状态 ========== */
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-disabled .ant-checkbox-inner {
+  background: var(--semi-color-disabled-fill);
+  border-color: var(--semi-color-border);
+  cursor: not-allowed;
+}
+
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner {
+  background: var(--semi-color-primary-disabled);
+  border-color: var(--semi-color-primary-disabled);
+}
+
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-disabled.ant-checkbox-indeterminate .ant-checkbox-inner {
+  background: var(--semi-color-primary-disabled);
+  border-color: var(--semi-color-primary-disabled);
+}
+
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-disabled + span {
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+
+/* ========== Checkbox Group ========== */
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+}
+
+/* ========== Card 模式（通过 data-card 属性启用） ========== */
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-wrapper[data-card] {
+  background: var(--semi-color-fill-0);
+  border: 1px solid transparent;
+  border-radius: var(--semi-border-radius-medium);
+  padding: 12px 16px;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-wrapper[data-card]:hover {
+  background: var(--semi-color-fill-1);
+}
+
+.semi:where([data-semi="all"], [data-semi-checkbox]) .ant-checkbox-wrapper-checked[data-card] {
+  background: var(--semi-color-primary-light-default);
+  border-color: var(--semi-color-primary);
+}

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

@@ -0,0 +1,74 @@
+/**
+ * Collapse 折叠面板 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-collapse]) .ant-collapse {
+  background: transparent;
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+}
+
+.semi:where([data-semi="all"], [data-semi-collapse]) .ant-collapse > .ant-collapse-item {
+  background: var(--semi-color-bg-0);
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--semi-border-radius-medium);
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.semi:where([data-semi="all"], [data-semi-collapse]) .ant-collapse > .ant-collapse-item:last-child {
+  margin-bottom: 0;
+}
+
+/* 面板头部 */
+.semi:where([data-semi="all"], [data-semi-collapse]) .ant-collapse-header {
+  align-items: center;
+  background: transparent;
+  color: var(--semi-color-text-0);
+  font-weight: 500;
+  padding: 12px 16px;
+  transition: background var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-collapse]) .ant-collapse-header:hover {
+  background: var(--semi-color-fill-0);
+}
+
+/* 展开图标 */
+.semi:where([data-semi="all"], [data-semi-collapse]) .ant-collapse-expand-icon {
+  color: var(--semi-color-text-2);
+  padding-inline-end: 12px;
+}
+
+/* 面板内容 */
+.semi:where([data-semi="all"], [data-semi-collapse]) .ant-collapse-content {
+  background: transparent;
+  border-top: 1px solid var(--semi-color-border);
+  color: var(--semi-color-text-1);
+}
+
+.semi:where([data-semi="all"], [data-semi-collapse]) .ant-collapse-content-box {
+  padding: 16px;
+}
+
+/* 无边框模式 */
+.semi:where([data-semi="all"], [data-semi-collapse]) .ant-collapse-borderless > .ant-collapse-item {
+  border: none;
+  background: var(--semi-color-fill-0);
+}
+
+/* 幽灵模式 */
+.semi:where([data-semi="all"], [data-semi-collapse]) .ant-collapse-ghost > .ant-collapse-item {
+  background: transparent;
+  border: none;
+}
+
+.semi:where([data-semi="all"], [data-semi-collapse]) .ant-collapse-ghost .ant-collapse-content {
+  border-top: none;
+}
+
+/* 禁用状态 */
+.semi:where([data-semi="all"], [data-semi-collapse]) .ant-collapse > .ant-collapse-item-disabled > .ant-collapse-header {
+  color: var(--semi-color-text-3);
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,94 @@
+/**
+ * ColorPicker 颜色选择器 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-colorpicker]) .ant-color-picker-trigger {
+  background-color: var(--semi-color-fill-0);
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--semi-border-radius-small);
+  padding: 4px;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-colorpicker]) .ant-color-picker-trigger:hover {
+  border-color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-colorpicker]) .ant-color-picker-trigger-active {
+  border-color: var(--semi-color-focus-border);
+}
+
+.semi:where([data-semi="all"], [data-semi-colorpicker]) .ant-color-picker-color-block {
+  border-radius: 2px;
+}
+
+/* 面板 */
+body.semi .ant-color-picker {
+  background: #fff;
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+}
+
+body.semi .ant-color-picker-panel {
+  padding: 12px;
+}
+
+body.semi .ant-color-picker-select {
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .ant-color-picker-handler {
+  border: 2px solid #fff;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+}
+
+body.semi .ant-color-picker-slider {
+  border-radius: 100px;
+}
+
+body.semi .ant-color-picker-slider-handle {
+  border: 2px solid #fff;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+  border-radius: 100px;
+}
+
+body.semi .ant-color-picker-input {
+  margin-bottom: 8px;
+}
+
+body.semi .ant-color-picker-input .ant-input {
+  background-color: var(--semi-color-fill-0);
+  border: none;
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .ant-color-picker-input .ant-input:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+body.semi .ant-color-picker-input .ant-input:focus {
+  background-color: var(--semi-color-fill-0);
+  box-shadow: inset 0 0 0 1px var(--semi-color-focus-border);
+}
+
+/* 预设颜色 */
+body.semi .ant-color-picker-presets {
+  border-top: 1px solid var(--semi-color-border);
+  padding-top: 8px;
+}
+
+body.semi .ant-color-picker-presets-label {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+}
+
+body.semi .ant-color-picker-presets-color {
+  border-radius: 2px;
+}
+
+/* 禁用状态 */
+.semi:where([data-semi="all"], [data-semi-colorpicker]) .ant-color-picker-trigger-disabled {
+  background-color: var(--semi-color-disabled-fill);
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,6 @@
+/**
+ * ConfigProvider 全局配置 - Semi Design 风格
+ * ConfigProvider 主要用于全局配置，无需特殊样式
+ */
+
+/* 无需样式 */