advance-semi-theme 1.0.0

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

@@ -0,0 +1,346 @@
+/**
+ * DatePicker 日期选择器 - Semi Design 风格
+ */
+
+/* ========== 输入框基础样式 ========== */
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker {
+  background: var(--semi-color-fill-0);
+  border: 1px solid transparent;
+  border-radius: var(--semi-border-radius-small);
+  padding: 4px 12px;
+  height: 32px;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker:hover:not(.ant-picker-disabled):not(.ant-picker-status-error):not(.ant-picker-status-warning):not(.ant-picker-focused) {
+  background: var(--semi-color-fill-1);
+  border-color: transparent;
+}
+
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-input > input,
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-input > input:focus {
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+/* ========== Focus 样式 (高优先级) ========== */
+.semi .ant-picker.ant-picker-focused,
+.semi .ant-picker:focus,
+.semi .ant-picker:focus-within {
+  background: var(--semi-color-fill-0) !important;
+  border-color: var(--semi-color-focus-border) !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+.semi .ant-picker-range.ant-picker-focused,
+.semi .ant-picker-range:focus,
+.semi .ant-picker-range:focus-within {
+  background: var(--semi-color-fill-0) !important;
+  border-color: var(--semi-color-focus-border) !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+/* 范围选择器 */
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-range {
+  background: var(--semi-color-fill-0);
+  border: 1px solid transparent;
+}
+
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-range:hover:not(.ant-picker-disabled):not(.ant-picker-status-error):not(.ant-picker-status-warning):not(.ant-picker-focused) {
+  background: var(--semi-color-fill-1);
+  border-color: transparent;
+}
+
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-range .ant-picker-active-bar {
+  background: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-range .ant-picker-input > input,
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-range .ant-picker-input > input:focus {
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-input > input {
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-input > input::placeholder {
+  color: var(--semi-color-text-2);
+}
+
+/* 图标 */
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-suffix,
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-clear {
+  color: var(--semi-color-text-2);
+}
+
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-clear:hover {
+  color: var(--semi-color-text-1);
+}
+
+/* 分隔符 */
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-separator {
+  color: var(--semi-color-text-2);
+}
+
+/* 尺寸 */
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-large {
+  height: 40px;
+  padding: 8px 12px;
+  border-radius: var(--semi-border-radius-small);
+}
+
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-small {
+  height: 24px;
+  padding: 0 8px;
+  border-radius: var(--semi-border-radius-small);
+}
+
+/* 状态 - Error */
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-status-error {
+  background: var(--semi-color-danger-light-default);
+  border-color: var(--semi-color-danger-light-default);
+}
+
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-status-error:hover:not(.ant-picker-focused) {
+  background: var(--semi-color-danger-light-hover);
+  border-color: var(--semi-color-danger-light-hover);
+}
+
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-status-error.ant-picker-focused {
+  background: var(--semi-color-danger-light-default);
+  border-color: var(--semi-color-danger);
+}
+
+/* 状态 - Warning */
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-status-warning {
+  background: var(--semi-color-warning-light-default);
+  border-color: var(--semi-color-warning-light-default);
+}
+
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-status-warning:hover:not(.ant-picker-focused) {
+  background: var(--semi-color-warning-light-hover);
+  border-color: var(--semi-color-warning-light-hover);
+}
+
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-status-warning.ant-picker-focused {
+  background: var(--semi-color-warning-light-default);
+  border-color: var(--semi-color-warning);
+}
+
+/* 禁用 */
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-disabled {
+  background: var(--semi-color-disabled-fill);
+  border-color: transparent;
+  cursor: not-allowed;
+}
+
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-disabled .ant-picker-input > input,
+.semi:where([data-semi="all"], [data-semi-datepicker]) .ant-picker-disabled .ant-picker-suffix {
+  color: var(--semi-color-disabled-text);
+}
+
+/* ==========================================================================
+   下拉面板 (Portal 组件 - 渲染在 body 下)
+   ========================================================================== */
+
+body.semi .ant-picker-dropdown,
+.semi .ant-picker-dropdown {
+  font-size: var(--semi-font-size-regular);
+}
+
+body.semi .ant-picker-panel-container,
+.semi .ant-picker-panel-container {
+  background: #fff !important;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+}
+
+body.semi .ant-picker-panel,
+.semi .ant-picker-panel {
+  background: #fff;
+}
+
+body.semi .ant-picker-content,
+.semi .ant-picker-content {
+  background: #fff;
+}
+
+body.semi .ant-picker-body,
+.semi .ant-picker-body {
+  background: #fff;
+}
+
+body.semi .ant-picker-date-panel,
+body.semi .ant-picker-datetime-panel,
+body.semi .ant-picker-time-panel,
+body.semi .ant-picker-month-panel,
+body.semi .ant-picker-year-panel,
+body.semi .ant-picker-quarter-panel,
+body.semi .ant-picker-week-panel,
+.semi .ant-picker-date-panel,
+.semi .ant-picker-datetime-panel,
+.semi .ant-picker-time-panel,
+.semi .ant-picker-month-panel,
+.semi .ant-picker-year-panel,
+.semi .ant-picker-quarter-panel,
+.semi .ant-picker-week-panel {
+  background: #fff;
+}
+
+/* 头部 */
+body.semi .ant-picker-header,
+.semi .ant-picker-header {
+  background: #fff;
+  border-bottom: 1px solid var(--semi-color-border);
+  color: var(--semi-color-text-0);
+}
+
+body.semi .ant-picker-header button,
+.semi .ant-picker-header button {
+  color: var(--semi-color-text-2);
+}
+
+body.semi .ant-picker-header button:hover,
+.semi .ant-picker-header button:hover {
+  color: var(--semi-color-primary);
+}
+
+body.semi .ant-picker-header-view button,
+.semi .ant-picker-header-view button {
+  color: var(--semi-color-text-0);
+  font-weight: 600;
+}
+
+/* 日期单元格 */
+body.semi .ant-picker-cell,
+.semi .ant-picker-cell {
+  color: var(--semi-color-text-2);
+}
+
+body.semi .ant-picker-cell-in-view,
+.semi .ant-picker-cell-in-view {
+  color: var(--semi-color-text-0);
+}
+
+body.semi .ant-picker-cell-inner,
+.semi .ant-picker-cell-inner {
+  border-radius: var(--semi-border-radius-small);
+  transition: background var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-disabled) .ant-picker-cell-inner,
+.semi .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-disabled) .ant-picker-cell-inner {
+  background: var(--semi-color-fill-0);
+}
+
+body.semi .ant-picker-cell-selected .ant-picker-cell-inner,
+body.semi .ant-picker-cell-range-start .ant-picker-cell-inner,
+body.semi .ant-picker-cell-range-end .ant-picker-cell-inner,
+.semi .ant-picker-cell-selected .ant-picker-cell-inner,
+.semi .ant-picker-cell-range-start .ant-picker-cell-inner,
+.semi .ant-picker-cell-range-end .ant-picker-cell-inner {
+  background: var(--semi-color-primary);
+  color: #fff;
+}
+
+body.semi .ant-picker-cell-in-range::before,
+.semi .ant-picker-cell-in-range::before {
+  background: var(--semi-color-primary-light-default);
+}
+
+body.semi .ant-picker-cell-today .ant-picker-cell-inner::before,
+.semi .ant-picker-cell-today .ant-picker-cell-inner::before {
+  border-color: var(--semi-color-primary);
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .ant-picker-cell-disabled,
+.semi .ant-picker-cell-disabled {
+  color: var(--semi-color-disabled-text);
+}
+
+body.semi .ant-picker-cell-disabled::before,
+.semi .ant-picker-cell-disabled::before {
+  background: transparent;
+}
+
+/* 底部 */
+body.semi .ant-picker-footer,
+.semi .ant-picker-footer {
+  background: #fff;
+  border-top: 1px solid var(--semi-color-border);
+}
+
+body.semi .ant-picker-today-btn,
+.semi .ant-picker-today-btn {
+  color: var(--semi-color-primary);
+}
+
+body.semi .ant-picker-today-btn:hover,
+.semi .ant-picker-today-btn:hover {
+  color: var(--semi-color-primary-hover);
+}
+
+/* 时间面板 */
+body.semi .ant-picker-time-panel,
+.semi .ant-picker-time-panel {
+  background: transparent;
+}
+
+body.semi .ant-picker-time-panel-column,
+.semi .ant-picker-time-panel-column {
+  background: #fff;
+}
+
+body.semi .ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner,
+.semi .ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner {
+  color: var(--semi-color-text-0);
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .ant-picker-time-panel-column > li.ant-picker-time-panel-cell:hover .ant-picker-time-panel-cell-inner,
+.semi .ant-picker-time-panel-column > li.ant-picker-time-panel-cell:hover .ant-picker-time-panel-cell-inner {
+  background: var(--semi-color-fill-0);
+}
+
+body.semi .ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner,
+.semi .ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
+  background: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+}
+
+body.semi .ant-picker-time-panel-column > li.ant-picker-time-panel-cell-disabled .ant-picker-time-panel-cell-inner,
+.semi .ant-picker-time-panel-column > li.ant-picker-time-panel-cell-disabled .ant-picker-time-panel-cell-inner {
+  color: var(--semi-color-disabled-text);
+}
+
+/* 预设范围 */
+body.semi .ant-picker-presets,
+.semi .ant-picker-presets {
+  border-inline-end: 1px solid var(--semi-color-border);
+}
+
+body.semi .ant-picker-presets li,
+.semi .ant-picker-presets li {
+  color: var(--semi-color-text-0);
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .ant-picker-presets li:hover,
+.semi .ant-picker-presets li:hover {
+  background: var(--semi-color-fill-0);
+}
+
+/* 年/月/季度面板 */
+body.semi .ant-picker-year-panel .ant-picker-cell-inner,
+body.semi .ant-picker-quarter-panel .ant-picker-cell-inner,
+body.semi .ant-picker-month-panel .ant-picker-cell-inner,
+.semi .ant-picker-year-panel .ant-picker-cell-inner,
+.semi .ant-picker-quarter-panel .ant-picker-cell-inner,
+.semi .ant-picker-month-panel .ant-picker-cell-inner {
+  padding: 0 8px;
+}

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

@@ -0,0 +1,63 @@
+/**
+ * Descriptions 描述列表 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-descriptions]) .ant-descriptions {
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-descriptions]) .ant-descriptions-title {
+  color: var(--semi-color-text-0);
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+
+.semi:where([data-semi="all"], [data-semi-descriptions]) .ant-descriptions-extra {
+  color: var(--semi-color-text-1);
+}
+
+/* 标签和内容 */
+.semi:where([data-semi="all"], [data-semi-descriptions]) .ant-descriptions-item-label {
+  color: var(--semi-color-text-2);
+  font-weight: 400;
+}
+
+.semi:where([data-semi="all"], [data-semi-descriptions]) .ant-descriptions-item-content {
+  color: var(--semi-color-text-0);
+}
+
+/* 边框模式 */
+.semi:where([data-semi="all"], [data-semi-descriptions]) .ant-descriptions-bordered .ant-descriptions-view {
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--semi-border-radius-medium);
+}
+
+.semi:where([data-semi="all"], [data-semi-descriptions]) .ant-descriptions-bordered .ant-descriptions-item-label,
+.semi:where([data-semi="all"], [data-semi-descriptions]) .ant-descriptions-bordered .ant-descriptions-item-content {
+  border-inline-end: 1px solid var(--semi-color-border);
+  padding: 12px 16px;
+}
+
+.semi:where([data-semi="all"], [data-semi-descriptions]) .ant-descriptions-bordered .ant-descriptions-item-label {
+  background: var(--semi-color-fill-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-descriptions]) .ant-descriptions-bordered .ant-descriptions-row {
+  border-bottom: 1px solid var(--semi-color-border);
+}
+
+.semi:where([data-semi="all"], [data-semi-descriptions]) .ant-descriptions-bordered .ant-descriptions-row:last-child {
+  border-bottom: none;
+}
+
+/* 尺寸 */
+.semi:where([data-semi="all"], [data-semi-descriptions]) .ant-descriptions-small .ant-descriptions-item-label,
+.semi:where([data-semi="all"], [data-semi-descriptions]) .ant-descriptions-small .ant-descriptions-item-content {
+  padding: 8px 12px;
+}
+
+.semi:where([data-semi="all"], [data-semi-descriptions]) .ant-descriptions-middle .ant-descriptions-item-label,
+.semi:where([data-semi="all"], [data-semi-descriptions]) .ant-descriptions-middle .ant-descriptions-item-content {
+  padding: 10px 14px;
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Divider 分割线 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-divider]) .ant-divider {
+  border-color: var(--semi-color-border);
+  margin: 16px 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-divider]) .ant-divider-horizontal {
+  border-top-width: 1px;
+}
+
+.semi:where([data-semi="all"], [data-semi-divider]) .ant-divider-vertical {
+  border-inline-start-width: 1px;
+  margin: 0 8px;
+}
+
+/* 带文字 */
+.semi:where([data-semi="all"], [data-semi-divider]) .ant-divider-inner-text {
+  color: var(--semi-color-text-1);
+  font-size: var(--semi-font-size-regular);
+  padding: 0 16px;
+}
+
+.semi:where([data-semi="all"], [data-semi-divider]) .ant-divider-with-text::before,
+.semi:where([data-semi="all"], [data-semi-divider]) .ant-divider-with-text::after {
+  border-color: var(--semi-color-border);
+}
+
+/* 虚线 */
+.semi:where([data-semi="all"], [data-semi-divider]) .ant-divider-dashed {
+  border-style: dashed;
+}

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

@@ -0,0 +1,71 @@
+/**
+ * Drawer 抽屉 - Semi Design 风格
+ * Portal 组件 - 渲染在 body 下
+ */
+
+/* 遮罩 */
+body.semi .ant-drawer-mask,
+.semi .ant-drawer-mask {
+  background: rgba(0, 0, 0, 0.6);
+}
+
+/* 抽屉容器 */
+body.semi .ant-drawer-content,
+.semi .ant-drawer-content {
+  background: var(--semi-color-bg-0);
+}
+
+/* 头部 */
+body.semi .ant-drawer-header,
+.semi .ant-drawer-header {
+  background: transparent;
+  border-bottom: 1px solid var(--semi-color-border);
+  padding: 16px 24px;
+}
+
+body.semi .ant-drawer-title,
+.semi .ant-drawer-title {
+  color: var(--semi-color-text-0);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+/* 关闭按钮 */
+body.semi .ant-drawer-close,
+.semi .ant-drawer-close {
+  color: var(--semi-color-text-2);
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--semi-border-radius-medium);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .ant-drawer-close:hover,
+.semi .ant-drawer-close:hover {
+  background: var(--semi-color-fill-0);
+  color: var(--semi-color-text-0);
+}
+
+/* 内容区 */
+body.semi .ant-drawer-body,
+.semi .ant-drawer-body {
+  padding: 24px;
+  color: var(--semi-color-text-1);
+}
+
+/* 底部 */
+body.semi .ant-drawer-footer,
+.semi .ant-drawer-footer {
+  border-top: 1px solid var(--semi-color-border);
+  padding: 16px 24px;
+}
+
+/* 无遮罩 */
+body.semi .ant-drawer-inline .ant-drawer-content,
+.semi .ant-drawer-inline .ant-drawer-content {
+  box-shadow: var(--semi-shadow-floating);
+}

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

@@ -0,0 +1,94 @@
+/**
+ * Dropdown 下拉菜单 - Semi Design 风格
+ * Portal 组件 - 渲染在 body 下
+ */
+
+body.semi .ant-dropdown,
+.semi .ant-dropdown {
+  font-size: var(--semi-font-size-regular);
+}
+
+body.semi .ant-dropdown-menu,
+.semi .ant-dropdown-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-dropdown-menu-item,
+.semi .ant-dropdown-menu-item {
+  border-radius: 0;
+  color: var(--semi-color-text-0);
+  padding: 8px 12px;
+  transition: background var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .ant-dropdown-menu-item:hover,
+.semi .ant-dropdown-menu-item:hover {
+  background: var(--semi-color-fill-0);
+}
+
+body.semi .ant-dropdown-menu-item-selected,
+.semi .ant-dropdown-menu-item-selected {
+  background: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+}
+
+body.semi .ant-dropdown-menu-item-selected:hover,
+.semi .ant-dropdown-menu-item-selected:hover {
+  background: var(--semi-color-primary-light-hover);
+}
+
+/* 危险项 */
+body.semi .ant-dropdown-menu-item-danger,
+.semi .ant-dropdown-menu-item-danger {
+  color: var(--semi-color-danger);
+}
+
+body.semi .ant-dropdown-menu-item-danger:hover,
+.semi .ant-dropdown-menu-item-danger:hover {
+  background: var(--semi-color-danger-light-default);
+  color: var(--semi-color-danger);
+}
+
+/* 禁用项 */
+body.semi .ant-dropdown-menu-item-disabled,
+.semi .ant-dropdown-menu-item-disabled {
+  color: var(--semi-color-text-3);
+  cursor: not-allowed;
+}
+
+/* 分组标题 */
+body.semi .ant-dropdown-menu-item-group-title,
+.semi .ant-dropdown-menu-item-group-title {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+  padding: 8px 12px 4px;
+}
+
+/* 分割线 */
+body.semi .ant-dropdown-menu-item-divider,
+.semi .ant-dropdown-menu-item-divider {
+  background: var(--semi-color-border);
+  margin: 4px 0;
+}
+
+/* 子菜单 */
+body.semi .ant-dropdown-menu-submenu-title,
+.semi .ant-dropdown-menu-submenu-title {
+  border-radius: 0;
+  padding: 8px 12px;
+}
+
+body.semi .ant-dropdown-menu-submenu-expand-icon,
+.semi .ant-dropdown-menu-submenu-expand-icon {
+  color: var(--semi-color-text-2);
+}
+
+/* 图标 */
+body.semi .ant-dropdown-menu-item .anticon,
+.semi .ant-dropdown-menu-item .anticon {
+  margin-inline-end: 8px;
+}

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

@@ -0,0 +1,40 @@
+/**
+ * Empty 空状态 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-empty]) .ant-empty {
+  color: var(--semi-color-text-2);
+  padding: 32px 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-empty]) .ant-empty-image {
+  height: 100px;
+  margin-bottom: 16px;
+}
+
+.semi:where([data-semi="all"], [data-semi-empty]) .ant-empty-image svg {
+  fill: var(--semi-color-text-3);
+}
+
+.semi:where([data-semi="all"], [data-semi-empty]) .ant-empty-description {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-regular);
+}
+
+.semi:where([data-semi="all"], [data-semi-empty]) .ant-empty-footer {
+  margin-top: 16px;
+}
+
+/* 小尺寸 */
+.semi:where([data-semi="all"], [data-semi-empty]) .ant-empty-small {
+  padding: 16px 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-empty]) .ant-empty-small .ant-empty-image {
+  height: 64px;
+  margin-bottom: 8px;
+}
+
+.semi:where([data-semi="all"], [data-semi-empty]) .ant-empty-small .ant-empty-description {
+  font-size: var(--semi-font-size-small);
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Flex 弹性布局 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-flex]) .ant-flex {
+  gap: 8px;
+}
+
+.semi:where([data-semi="all"], [data-semi-flex]) .ant-flex-gap-small {
+  gap: 8px;
+}
+
+.semi:where([data-semi="all"], [data-semi-flex]) .ant-flex-gap-middle {
+  gap: 16px;
+}
+
+.semi:where([data-semi="all"], [data-semi-flex]) .ant-flex-gap-large {
+  gap: 24px;
+}