advance-semi-theme 1.0.0

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

@@ -0,0 +1,459 @@
+/**
+ * Input 输入框 - Semi Design 风格
+ * 
+ * 基于 Semi Design 源码: packages/semi-foundation/input/input.scss
+ * 
+ * 状态说明:
+ * - 默认: fill-0 背景 + 透明边框
+ * - 悬浮: fill-1 背景 + 透明边框
+ * - 聚焦: fill-0 背景 + focus-border 边框
+ * - 按下: fill-2 背景
+ */
+
+/* ========== 基础样式 ========== */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input {
+  background-color: var(--semi-color-fill-0);
+  border: 1px solid transparent;
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+  padding: 0 12px;
+  height: 32px;
+  line-height: 30px;
+  transition: background-color 0.1s ease, border 0.1s ease;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input::placeholder {
+  color: var(--semi-color-text-2);
+}
+
+/* 悬浮状态 */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input:hover:not(:disabled):not(:focus):not(.ant-input-status-error):not(.ant-input-status-warning) {
+  background-color: var(--semi-color-fill-1);
+  border-color: transparent;
+}
+
+/* 聚焦状态 - 背景保持 fill-0，边框变成 focus-border */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input:focus {
+  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-input]) .ant-input:active:not(:disabled) {
+  background-color: var(--semi-color-fill-2);
+}
+
+/* ========== Affix Wrapper (带前缀/后缀图标的输入框) ========== */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-affix-wrapper {
+  background-color: var(--semi-color-fill-0);
+  border: 1px solid transparent;
+  border-radius: var(--semi-border-radius-small);
+  padding: 0 12px;
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  transition: background-color 0.1s ease, border 0.1s ease;
+}
+
+/* 悬浮状态 */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-affix-wrapper:hover:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-focused):not(.ant-input-affix-wrapper-status-error):not(.ant-input-affix-wrapper-status-warning) {
+  background-color: var(--semi-color-fill-1);
+  border-color: transparent;
+}
+
+/* 聚焦状态 */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-affix-wrapper:focus-within,
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-affix-wrapper-focused {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+  box-shadow: none;
+}
+
+/* 内部的 input */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-affix-wrapper > .ant-input {
+  background: transparent;
+  border: none;
+  padding: 0;
+  height: auto;
+  line-height: 30px;
+  flex: 1;
+  min-width: 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-affix-wrapper > .ant-input:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+/* 前缀/后缀图标 */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-prefix {
+  color: var(--semi-color-text-2);
+  margin-inline-end: 8px;
+  display: flex;
+  align-items: center;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-suffix {
+  color: var(--semi-color-text-2);
+  margin-inline-start: 8px;
+  display: flex;
+  align-items: center;
+}
+
+/* ========== Input Group Wrapper (带 addon 的输入框) ========== */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-group-wrapper {
+  display: inline-block;
+  width: 100%;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-wrapper.ant-input-group {
+  display: inline-flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--semi-border-radius-small);
+}
+
+/* Addon 标签 - prepend/append */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-group-addon {
+  background-color: var(--semi-color-fill-0);
+  border: none;
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-regular);
+  font-weight: 600;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* prepend (第一个 addon) */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-group-addon:first-child {
+  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+  border-right: 1px solid var(--semi-color-border);
+}
+
+/* append (最后一个 addon) */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-group-addon:last-child {
+  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+  border-left: 1px solid var(--semi-color-border);
+}
+
+/* Group 内的 Input */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-wrapper.ant-input-group > .ant-input {
+  flex: 1;
+  min-width: 0;
+  border-radius: 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-wrapper.ant-input-group > .ant-input:last-child {
+  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-wrapper.ant-input-group > .ant-input:first-child {
+  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+}
+
+/* 当 input 在 addon 之间时 */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-group-addon + .ant-input {
+  border-radius: 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-group-addon:first-child + .ant-input:last-child {
+  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+}
+
+/* Group 内 Input 聚焦时的边框 */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-wrapper.ant-input-group > .ant-input:focus {
+  border-color: var(--semi-color-focus-border);
+  z-index: 1;
+  position: relative;
+}
+
+/* ========== 尺寸 ========== */
+/* Large */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-lg {
+  height: 40px;
+  line-height: 38px;
+  font-size: var(--semi-font-size-regular);
+  border-radius: var(--semi-border-radius-small);
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-affix-wrapper-lg {
+  height: 40px;
+  border-radius: var(--semi-border-radius-small);
+}
+
+/* Small */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-sm {
+  height: 24px;
+  line-height: 22px;
+  padding: 0 8px;
+  font-size: var(--semi-font-size-regular);
+  border-radius: var(--semi-border-radius-small);
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-affix-wrapper-sm {
+  height: 24px;
+  padding: 0 8px;
+  border-radius: var(--semi-border-radius-small);
+}
+
+/* ========== 状态 - Error ========== */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-status-error:not(:disabled) {
+  background-color: var(--semi-color-danger-light-default);
+  border-color: var(--semi-color-danger-light-default);
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled) {
+  background-color: var(--semi-color-danger-light-default);
+  border-color: var(--semi-color-danger-light-default);
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-status-error:not(:disabled):hover,
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):hover {
+  background-color: var(--semi-color-danger-light-hover);
+  border-color: var(--semi-color-danger-light-hover);
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-status-error:not(:disabled):focus,
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):focus-within {
+  background-color: var(--semi-color-danger-light-default);
+  border-color: var(--semi-color-danger);
+}
+
+/* ========== 状态 - Warning ========== */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-status-warning:not(:disabled) {
+  background-color: var(--semi-color-warning-light-default);
+  border-color: var(--semi-color-warning-light-default);
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled) {
+  background-color: var(--semi-color-warning-light-default);
+  border-color: var(--semi-color-warning-light-default);
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-status-warning:not(:disabled):hover,
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled):hover {
+  background-color: var(--semi-color-warning-light-hover);
+  border-color: var(--semi-color-warning-light-hover);
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-status-warning:not(:disabled):focus,
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled):focus-within {
+  background-color: var(--semi-color-warning-light-default);
+  border-color: var(--semi-color-warning);
+}
+
+/* ========== 禁用状态 ========== */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input:disabled,
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input[disabled] {
+  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-input]) .ant-input-affix-wrapper-disabled {
+  background-color: var(--semi-color-disabled-fill);
+  border-color: transparent;
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+
+/* ========== TextArea 文本域 ========== */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-textarea .ant-input {
+  height: auto;
+  min-height: 60px;
+  padding: 5px 12px;
+  line-height: 1.5;
+  resize: vertical;
+}
+
+.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);
+}
+
+/* ========== Input Search ========== */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-search .ant-input-group-addon {
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-search .ant-input-affix-wrapper {
+  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-search .ant-input {
+  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-search .ant-btn {
+  height: 32px;
+  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-search-lg .ant-btn {
+  height: 40px;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-search-sm .ant-btn {
+  height: 24px;
+}
+
+/* ========== Input Password ========== */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-password .ant-input-suffix {
+  cursor: pointer;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-password .ant-input-suffix:hover {
+  color: var(--semi-color-primary-hover);
+}
+
+/* ========== Input Number ========== */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-number,
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number {
+  background-color: var(--semi-color-fill-0);
+  border: 1px solid transparent;
+  border-radius: var(--semi-border-radius-small);
+  transition: background-color 0.1s ease, border 0.1s ease;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-number:hover:not(.ant-input-number-disabled):not(.ant-input-number-focused),
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number:hover:not(.ant-input-number-disabled):not(.ant-input-number-focused) {
+  background-color: var(--semi-color-fill-1);
+  border-color: transparent;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-number:focus-within,
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-number-focused,
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number:focus-within,
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-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-input]) .ant-input-number-input,
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-input {
+  padding: 0 12px;
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-number-handler-wrap,
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-handler-wrap {
+  background: transparent;
+  border-left: 1px solid var(--semi-color-border);
+  opacity: 1;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-number-handler,
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-handler {
+  border-color: var(--semi-color-border);
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-number-handler:hover,
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-handler:hover {
+  background: var(--semi-color-fill-0);
+  color: var(--semi-color-primary);
+}
+
+/* ========== 清除按钮 ========== */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-clear-icon {
+  color: var(--semi-color-text-2);
+  transition: color 0.1s ease;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-clear-icon:hover {
+  color: var(--semi-color-primary-hover);
+}
+
+/* ========== Compact Space 紧凑组合 ========== */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-space-compact .ant-input {
+  border-radius: 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-space-compact .ant-input:first-child,
+.semi:where([data-semi="all"], [data-semi-input]) .ant-space-compact > *:first-child .ant-input {
+  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-space-compact .ant-input:last-child,
+.semi:where([data-semi="all"], [data-semi-input]) .ant-space-compact > *:last-child .ant-input {
+  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-space-compact .ant-input-affix-wrapper {
+  border-radius: 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-space-compact .ant-input-affix-wrapper:first-child {
+  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-space-compact .ant-input-affix-wrapper:last-child {
+  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+}
+
+/* ==========================================================================
+   全局 Input Focus 覆盖规则
+   确保在所有组件内的输入框都能正确应用 Semi Design focus 样式
+   ========================================================================== */
+
+/* 通用 input focus */
+.semi .ant-input:focus,
+.semi .ant-input:focus-visible {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+  box-shadow: none;
+  outline: none;
+}
+
+/* 通用 affix-wrapper focus */
+.semi .ant-input-affix-wrapper:focus-within,
+.semi .ant-input-affix-wrapper-focused,
+.semi .ant-input-affix-wrapper:focus {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+  box-shadow: none;
+  outline: none;
+}
+
+.semi .ant-input-affix-wrapper .ant-input:focus,
+.semi .ant-input-affix-wrapper .ant-input:focus-visible {
+  background: transparent;
+  box-shadow: none;
+  outline: none;
+}
+
+/* Portal 组件中的 Input (渲染在 body 下) */
+body.semi .ant-input:focus,
+body.semi .ant-input:focus-visible {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+  box-shadow: none;
+  outline: none;
+}
+
+body.semi .ant-input-affix-wrapper:focus-within,
+body.semi .ant-input-affix-wrapper-focused,
+body.semi .ant-input-affix-wrapper:focus {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+  box-shadow: none;
+  outline: none;
+}
+
+body.semi .ant-input-affix-wrapper .ant-input:focus,
+body.semi .ant-input-affix-wrapper .ant-input:focus-visible {
+  background: transparent;
+  box-shadow: none;
+  outline: none;
+}

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

@@ -0,0 +1,102 @@
+/**
+ * InputNumber 数字输入框 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number {
+  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-inputnumber]) .ant-input-number:hover {
+  background-color: var(--semi-color-fill-1);
+  border-color: transparent;
+}
+
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number:focus,
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-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-inputnumber]) .ant-input-number-input {
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-input::placeholder {
+  color: var(--semi-color-text-2);
+}
+
+/* 控制按钮 */
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-handler-wrap {
+  background: transparent;
+  border-left: 1px solid var(--semi-color-border);
+  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+  opacity: 0;
+  transition: opacity var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number:hover .ant-input-number-handler-wrap {
+  opacity: 1;
+}
+
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-handler {
+  border: none;
+  color: var(--semi-color-text-2);
+}
+
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-handler:hover {
+  color: var(--semi-color-primary);
+  background: var(--semi-color-fill-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-handler-up {
+  border-radius: 0 var(--semi-border-radius-small) 0 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-handler-down {
+  border-top: 1px solid var(--semi-color-border);
+  border-radius: 0 0 var(--semi-border-radius-small) 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-handler-up-disabled,
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-handler-down-disabled {
+  color: var(--semi-color-disabled-text);
+}
+
+/* 禁用状态 */
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-disabled {
+  background-color: var(--semi-color-disabled-fill);
+  border-color: transparent;
+  color: var(--semi-color-disabled-text);
+}
+
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-disabled .ant-input-number-input {
+  color: var(--semi-color-disabled-text);
+}
+
+/* 状态 */
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-status-error {
+  border-color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-status-warning {
+  border-color: var(--semi-color-warning);
+}
+
+/* 边框模式 */
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-borderless {
+  background-color: transparent;
+}
+
+/* 尺寸 */
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-sm {
+  border-radius: var(--semi-border-radius-small);
+}
+
+.semi:where([data-semi="all"], [data-semi-inputnumber]) .ant-input-number-lg {
+  border-radius: var(--semi-border-radius-small);
+}

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

@@ -0,0 +1,63 @@
+/**
+ * Layout 布局 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-layout]) .ant-layout {
+  background: var(--semi-color-bg-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-layout]) .ant-layout-header {
+  background: var(--semi-color-bg-0);
+  padding: 0 24px;
+  line-height: 64px;
+}
+
+.semi:where([data-semi="all"], [data-semi-layout]) .ant-layout-sider {
+  background: var(--semi-color-bg-1);
+}
+
+.semi:where([data-semi="all"], [data-semi-layout]) .ant-layout-sider-light {
+  background: #fff;
+  border-right: 1px solid var(--semi-color-border);
+}
+
+.semi:where([data-semi="all"], [data-semi-layout]) .ant-layout-sider-dark {
+  background: #001529;
+}
+
+.semi:where([data-semi="all"], [data-semi-layout]) .ant-layout-content {
+  background: var(--semi-color-bg-2);
+}
+
+.semi:where([data-semi="all"], [data-semi-layout]) .ant-layout-footer {
+  background: var(--semi-color-bg-0);
+  color: var(--semi-color-text-1);
+  padding: 24px 50px;
+}
+
+/* 侧边栏触发器 */
+.semi:where([data-semi="all"], [data-semi-layout]) .ant-layout-sider-trigger {
+  background: var(--semi-color-fill-1);
+  color: var(--semi-color-text-1);
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-layout]) .ant-layout-sider-trigger:hover {
+  background: var(--semi-color-fill-2);
+}
+
+.semi:where([data-semi="all"], [data-semi-layout]) .ant-layout-sider-light .ant-layout-sider-trigger {
+  background: var(--semi-color-fill-0);
+  border-top: 1px solid var(--semi-color-border);
+}
+
+/* 折叠按钮 */
+.semi:where([data-semi="all"], [data-semi-layout]) .ant-layout-sider-zero-width-trigger {
+  background: var(--semi-color-primary);
+  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-layout]) .ant-layout-sider-zero-width-trigger:hover {
+  background: var(--semi-color-primary-hover);
+}