@fox-js/foxui-pad 4.1.5 → 4.1.6

package/dist/style.css

@@ -404,7 +404,7 @@
   min-height: var(--fox-footer-bar-min-height, 50px);
   padding: var(--fox-footer-bar-padding, 7px 0);
   box-sizing: var(--fox-footer-bar-box-sizing, content-box);
-  background-color: var(--fox-footer-background-color, var(--fox-white, var(--el-color-white)));
+  background-color: var(--fox-footer-bar-background-color, var(--fox-white, var(--el-color-white)));
   border: 0;
   flex-flow: row;
   display: flex;
@@ -467,7 +467,7 @@
 }
 
 .fox-group {
-  background: var(--fox-group-background-color, inhert);
+  background: var(--fox-group-background-color, inherit);
   transition: height .3s ease-in-out;
   display: block;
 }
@@ -659,7 +659,7 @@
 }
 
 .fox-item.is-error:before {
-  border-bottom: 1px solid var(--fox-input-item-tip-error-color, var(--fox-color-danger, var(--el-color-danger)));
+  border-bottom: 1px solid var(--fox-input-item-error-line-color, var(--fox-color-danger, var(--el-color-danger)));
   transition: transform .2s cubic-bezier(0, 0, .2, 1);
   transform: scaleX(0);
 }
@@ -890,7 +890,7 @@
 }
 
 .fox-buttons-item__dropdown-item.is-disabled {
-  color: var(--fox-disable-color, var(--el-text-color-disabled));
+  color: var(--fox-disabled-color, var(--el-text-color-disabled));
   cursor: default;
 }
 
@@ -1082,10 +1082,10 @@
 }
 
 .fox-money-item.disabled input:disabled {
-  color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled))));
+  color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disabled-color, var(--el-text-color-disabled))));
   cursor: not-allowed;
   opacity: 1;
-  -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled))));
+  -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disabled-color, var(--el-text-color-disabled))));
   background: none;
 }
 
@@ -1535,17 +1535,17 @@
 .fox-actionsheet__header-icon {
   cursor: pointer;
   top: 50%;
-  right: 12px;
+  left: 12px;
   transform: translateY(-50%);
-  color: var(--fox-actionsheet-header-icon-color, var(--fox-text-color--secondary, var(--el-text-color-secondary))) !important;
-  width: var(--fox-actionsheet-header-icon-size, var(--fox-font-size-medium, var(--el-font-size-medium))) !important;
-  height: var(--fox-actionsheet-header-icon-size, var(--fox-font-size-medium, var(--el-font-size-medium))) !important;
+  color: var(--fox-actionsheet-header-icon-color, var(--fox-text-color-secondary, var(--el-text-color-secondary))) !important;
+  width: var(--fox-actionsheet-header-icon-size, var(--fox-font-size-base, var(--el-font-size-base))) !important;
+  height: var(--fox-actionsheet-header-icon-size, var(--fox-font-size-base, var(--el-font-size-base))) !important;
   position: absolute !important;
 }
 
 .fox-actionsheet__searchbar {
   --fox-searchbar-padding: 0px;
-  --fox-searchbar-input-border-radius: var(--fox-searchbar-border-radius, 12px);
+  --fox-searchbar-input-border-radius: var(--fox-actionsheet-searchbar-border-radius, 12px);
   --fox-searchbar-input-background: var(--fox-actionsheet-searchbar-background, var(--fox-fill-color-base, var(--el-fill-color)));
   --fox-searchbar-input-box-shadow: var(--fox-actionsheet-searchbar-box-shadow, none);
   height: var(--fox-actionsheet-searchbar-height, 40px);
@@ -1577,7 +1577,7 @@
 .fox-actionsheet__tag {
   font-size: var(--fox-actionsheet-tag-font-size, var(--fox-font-size-small, var(--el-font-size-small)));
   color: var(--fox-actionsheet-tag-color, var(--fox-color-primary, var(--el-color-primary)));
-  background: var(--actionsheet-tag-background-color, var(--fox-color-primary-light-9, var(--el-color-primary-light-9)));
+  background: var(--fox-actionsheet-tag-background-color, var(--fox-color-primary-light-9, var(--el-color-primary-light-9)));
   border: var(--fox-actionsheet-tag-border, 1px solid var(--fox-color-primary-light-8, var(--el-color-primary-light-8)));
   border-radius: var(--fox-actionsheet-tag-border-radius, 4px);
   padding: var(--fox-actionsheet-tag-padding, 2px 6px);
@@ -1635,14 +1635,14 @@
 
 .fox-actionsheet__list-item-subtext {
   margin: var(--fox-actionsheet-list-item-subtext-margin, 8px 0 0 0);
-  font-size: var(--fox-actionsheet-list-item-subtext-fox-size, var(--fox-font-size-small, var(--el-font-size-small)));
-  font-weight: var(--fox-actionsheet-list-item-subtext-fox-wieight, 400);
-  color: var(--fox-actionsheet-list-item-subtext-color, var(--fox-text-color--secondary, var(--el-text-color-secondary)));
+  font-size: var(--fox-actionsheet-list-item-subtext-font-size, var(--fox-font-size-small, var(--el-font-size-small)));
+  font-weight: var(--fox-actionsheet-list-item-subtext-font-weight, 400);
+  color: var(--fox-actionsheet-list-item-subtext-color, var(--fox-text-color-secondary, var(--el-text-color-secondary)));
   text-align: left;
 }
 
 .fox-actionsheet__list-item-icon {
-  color: var(--fox-actionsheet-list-item-icon-color, var(--fox-radio-icon-unchecked-color, var(--fox-disable-color, var(--el-text-color-disabled))));
+  color: var(--fox-actionsheet-list-item-icon-color, var(--fox-radio-icon-unchecked-color, var(--fox-disabled-color, var(--el-text-color-disabled))));
   flex: none;
   transition-property: color, border-color, background-color;
   transition-duration: .3s;
@@ -1655,7 +1655,7 @@
 }
 
 .fox-actionsheet__list-item.is-disabled .fox-actionsheet__list-item-icon {
-  color: var(--fox-actionsheet-list-item-icon-color-disable, var(--fox-radio-icon-disable-color, var(--fox-disable-color, var(--el-text-color-disabled))));
+  color: var(--fox-actionsheet-list-item-icon-color-disable, var(--fox-radio-icon-disable-color, var(--fox-disabled-color, var(--el-text-color-disabled))));
 }
 
 .fox-actionsheet__footer {
@@ -1720,11 +1720,11 @@
 .fox-link-item__append .action-icon {
   width: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
   height: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
-  color: var(--fox-input-item-append-action-icon-color, var(--fox-disable-color, var(--el-text-color-disabled)));
+  color: var(--fox-input-item-append-action-icon-color, var(--fox-disabled-color, var(--el-text-color-disabled)));
 }
 
 .fox-link-item__placeholder {
-  color: var(--fox-input-item-placeholder-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled))));
+  color: var(--fox-input-item-placeholder-color, var(--fox-input-disabled-color, var(--fox-disabled-color, var(--el-text-color-disabled))));
 }
 
 .fox-link-item__main {
@@ -1734,11 +1734,11 @@
 .fox-link-item__sub {
   width: 100%;
   font-size: var(--fox-link-item-sub-font-size, var(--fox-font-size-small, var(--el-font-size-small)));
-  color: var(--fox-link-item-sub-color, var(--fox-text-color--secondary, var(--el-text-color-secondary)));
+  color: var(--fox-link-item-sub-color, var(--fox-text-color-secondary, var(--el-text-color-secondary)));
 }
 
 .fox-link-item.disabled .fox-link-item__content {
-  color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled))));
+  color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disabled-color, var(--el-text-color-disabled))));
 }
 
 .fox-tabs-bar {
@@ -1776,7 +1776,7 @@
 }
 
 .fox-tabs-bar__titles-item.disabled {
-  color: var(--fox-tabs-bar-item-color-disable, var(--fox-disable-color, var(--el-text-color-disabled)));
+  color: var(--fox-tabs-bar-item-color-disable, var(--fox-disabled-color, var(--el-text-color-disabled)));
 }
 
 .fox-tabs-bar__titles-item.active {
@@ -1798,7 +1798,7 @@
   width: var(--fox-tabs-bar-item-width-button, 80px);
   height: var(--fox-tabs-bar-item-height-button, 32px);
   background: var(--fox-tabs-bar-item-background-button, var(--fox-white, var(--el-color-white)));
-  color: var(--fox-tabs-bar-item-color-button, var(--fox-title-color2, var(--el-text-color-secondary)));
+  color: var(--fox-tabs-bar-item-color-button, var(--fox-title-color-secondary, var(--el-text-color-secondary)));
   font-size: var(--fox-tabs-bar-item-font-size-button, var(--fox-font-size-small, var(--el-font-size-small)));
   font-weight: var(--fox-tabs-bar-item-font-weight-button, 400);
   border: var(--fox-tabs-bar-item-border-button, 1px solid transparent);
@@ -1859,7 +1859,7 @@
   width: var(--fox-tabs-bar-item-width-capsule, 100px);
   height: var(--fox-tabs-bar-item-height-capsule, 29px);
   background: var(--fox-tabs-bar-item-background-capsule, transparent);
-  color: var(--fox-tabs-bar-item-color-capsule, var(--fox-title-color2, var(--el-text-color-secondary)));
+  color: var(--fox-tabs-bar-item-color-capsule, var(--fox-title-color-secondary, var(--el-text-color-secondary)));
   font-size: var(--fox-tabs-bar-item-font-size-capsule, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-tabs-bar-item-font-weight-capsule, 400);
   border: var(--fox-tabs-bar-item-border-width-capsule, 1px) solid transparent;
@@ -2482,7 +2482,7 @@
 }
 
 .fox-steps-bar__line {
-  background: var(--fox-steps-bar-line-normal-color, var(--fox-disable-color, var(--el-text-color-disabled)));
+  background: var(--fox-steps-bar-line-normal-color, var(--fox-disabled-color, var(--el-text-color-disabled)));
   border-color: inherit;
 }
 
@@ -2500,7 +2500,7 @@
 
 .fox-steps-bar__icon {
   color: var(--fox-steps-bar-icon-normal-color, var(--fox-white, var(--el-color-white)));
-  background: var(--fox-steps-bar-icon-bg-normal-color, var(--fox-disable-color, var(--el-text-color-disabled)));
+  background: var(--fox-steps-bar-icon-bg-normal-color, var(--fox-disabled-color, var(--el-text-color-disabled)));
   cursor: pointer;
   border: var(--fox-steps-bar-icon-border, none);
   box-sizing: border-box;
@@ -2527,7 +2527,7 @@
 }
 
 .fox-steps-bar__main {
-  color: var(--fox-steps-bar-text-normal-color, var(--fox-disable-color, var(--el-text-color-disabled)));
+  color: var(--fox-steps-bar-text-normal-color, var(--fox-disabled-color, var(--el-text-color-disabled)));
   font-size: var(--fox-steps-bar-text-font-size, var(--fox-steps-bar-font-size, var(--fox-font-size-base, var(--el-font-size-base))));
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2539,8 +2539,8 @@
   border-radius: var(--fox-floating-window-border-radius, 4px);
   box-shadow: var(--fox-floating-window-box-shadow, var(--fox-box-shadow, var(--el-box-shadow)));
   box-sizing: border-box;
-  top: var(--fox-floating-window-width, 15dvh);
-  left: var(--fox-floating-window-width, 25dvw);
+  top: var(--fox-floating-window-top, 15dvh);
+  left: var(--fox-floating-window-left, 25dvw);
   width: var(--fox-floating-window-width, 50dvw);
   z-index: var(--fox-floating-window-z-index, 2001);
   outline: none;
@@ -2609,7 +2609,7 @@
 }
 
 .fox-floating-window__close:hover {
-  color: var(--fox-floating-window-close-color, var(--fox-color-primary, var(--el-color-primary)));
+  color: var(--fox-floating-window-close-hover-color, var(--fox-color-primary, var(--el-color-primary)));
 }
 
 .fox-floating-window__close {
@@ -2626,8 +2626,8 @@
   z-index: var(--fox-floating-window-fixednav-z-index, 2000);
   color: var(--fox-floating-window-fixednav-color, var(--fox-white, var(--el-color-white)));
   background: var(--fox-floating-window-fixednav-bg, var(--fox-color-primary, var(--el-color-primary)));
-  width: var(--floating-window-fixednav-width, 80px);
-  height: var(--floating-window-fixednav-height, 50px);
+  width: var(--fox-floating-window-fixednav-width, 80px);
+  height: var(--fox-floating-window-fixednav-height, 50px);
   align-items: center;
   display: flex;
   position: fixed;
@@ -2804,7 +2804,7 @@
 }
 
 .fox-popover-dialog.is-dark {
-  color: var(--fox-popover-dialog-dark-color, var(--fox-white, var(--el-color-white)));
+  color: var(--fox-popover-dialog-color-dark, var(--fox-white, var(--el-color-white)));
   background: var(--fox-popover-dialog-background-color-dark, var(--fox-title-color, var(--el-text-color-primary)));
   border: 1px solid var(--fox-border-color-light, var(--el-border-color-light));
 }
@@ -2877,6 +2877,11 @@
   font-size: var(--fox-picker-bar-cancel-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
 }
 
+.fox-picker__left svg {
+  width: var(--fox-picker-bar-cancel-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
+  height: var(--fox-picker-bar-cancel-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
+}
+
 .fox-picker__right {
   float: right;
   color: var(--fox-picker-ok-color, var(--fox-color-primary, var(--el-color-primary)));
@@ -3185,7 +3190,7 @@
 }
 
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--disabled {
-  color: var(--fox-calendar-disable-color, var(--fox-disable-color, var(--el-text-color-disabled))) !important;
+  color: var(--fox-calendar-disable-color, var(--fox-disabled-color, var(--el-text-color-disabled))) !important;
 }
 
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--choose {
@@ -3284,11 +3289,23 @@
   line-height: var(--fox-cascader-bar-title-line-height, 1.5);
   color: var(--fox-cascader-bar-title-color, var(--fox-title-color, var(--el-text-color-primary)));
   font-size: var(--fox-cascader-bar-title-font-size, var(--fox-font-size-large, var(--el-font-size-large)));
+  position: relative;
+}
+
+.fox-cascader__bar-title-icon {
+  cursor: pointer;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  color: var(--fox-cascader-bar-title-icon-color, var(--fox-text-color-secondary, var(--el-text-color-secondary))) !important;
+  width: var(--fox-cascader-bar-title-icon-size, var(--fox-font-size-base, var(--el-font-size-base))) !important;
+  height: var(--fox-cascader-bar-title-icon-size, var(--fox-font-size-base, var(--el-font-size-base))) !important;
+  position: absolute !important;
 }
 
 .fox-cascader__bar-search {
   --fox-searchbar-padding: 0px;
-  --fox-searchbar-input-border-radius: var(--fox-cascader-bar-border-radius, 12px);
+  --fox-searchbar-input-border-radius: var(--fox-cascader-bar-searchbar-border-radius, 12px);
   --fox-searchbar-input-background: var(--fox-cascader-bar-searchbar-background, var(--fox-fill-color-base, var(--el-fill-color)));
   --fox-searchbar-input-box-shadow: var(--fox-cascader-bar-searchbar-box-shadow, none);
 }
@@ -3296,7 +3313,7 @@
 .fox-cascader__bar-search-icon {
   width: var(--fox-cascader-bar-searchbar-icon-size, 16px) !important;
   height: var(--fox-cascader-bar-searchbar-icon-size, 16px) !important;
-  color: var(--fox-cascader-bar-searchbar-background, var(--fox-text-color--secondary, var(--el-text-color-secondary))) !important;
+  color: var(--fox-cascader-bar-searchbar-background, var(--fox-text-color-secondary, var(--el-text-color-secondary))) !important;
 }
 
 .fox-cascader__pane {
@@ -3478,7 +3495,7 @@
 
 .fox-popup__close-icon {
   z-index: 1;
-  color: var(--fox-popup-close-icon-color, var(--fox-text-color--secondary, var(--el-text-color-secondary)));
+  color: var(--fox-popup-close-icon-color, var(--fox-text-color-secondary, var(--el-text-color-secondary)));
   font-size: var(--fox-font-size-large, var(--el-font-size-large));
   cursor: pointer;
   text-align: center;
@@ -3735,7 +3752,7 @@
   height: 50px;
   line-height: 50px;
   font-size: var(--fox-font-size-small, var(--el-font-size-small));
-  color: var(--fox-infiniteloading-bottom-color, var(--fox-disable-color, var(--el-text-color-disabled)));
+  color: var(--fox-infiniteloading-bottom-color, var(--fox-disabled-color, var(--el-text-color-disabled)));
   text-align: center;
   display: block;
 }
@@ -3831,7 +3848,7 @@
 }
 
 .fox-more-button--disabled {
-  color: var(--fox-disable-color, var(--el-text-color-disabled));
+  color: var(--fox-disabled-color, var(--el-text-color-disabled));
 }
 
 .fox-more-button__icon {
@@ -4297,7 +4314,7 @@
   box-sizing: content-box;
   height: var(--fox-numberkeyboard-header-height, 34px);
   padding: var(--fox-numberkeyboard-header-padding, 6px 0 0 0);
-  color: var(--fox-numberkeyboard-header-color, var(--fox-title-color2, var(--el-text-color-secondary)));
+  color: var(--fox-numberkeyboard-header-color, var(--fox-title-color-secondary, var(--el-text-color-secondary)));
   font-size: var(--fox-numberkeyboard-header-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
   justify-content: center;
   align-items: center;
@@ -4311,7 +4328,7 @@
 
 .fox-number-keyboard .fox-number-keyboard__header .fox-number-keyboard__close {
   padding: var(--fox-numberkeyboard-header-close-padding, 0 16px);
-  color: var(--fox-numberkeyboard-header-close-color, var(--fox-text-color--secondary, var(--el-text-color-secondary)));
+  color: var(--fox-numberkeyboard-header-close-color, var(--fox-text-color-secondary, var(--el-text-color-secondary)));
   font-size: var(--fox-numberkeyboard-header-close-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   background-color: var(--fox-numberkeyboard-header-close-background-color, transparent);
   cursor: pointer;

package/dist/style.js

@@ -1,3 +1,3 @@
 /*!
-* @fox-js/foxui-desktop v4.0.0 2026-08-29T03:47:08.446Z
+* @fox-js/foxui-desktop v4.0.0 2026-09-06T15:15:17.884Z
 */

package/dist/theme/common/base.scss

@@ -0,0 +1,44 @@
+@use 'color' as *;
+
+// ---- Font ----
+// 字号(委托 element-plus 字号变量)
+$font-size-extra-small: var(--el-font-size-extra-small) !default;
+$font-size-small: var(--el-font-size-small) !default;
+$font-size-base: var(--el-font-size-base) !default;
+$font-size-medium: var(--el-font-size-medium) !default;
+$font-size-large: var(--el-font-size-large) !default;
+$font-size-extra-large: var(--el-font-size-extra-large) !default;
+
+// 字重/行高(委托 element-plus 变量)
+$font-weight-bold: var(--el-font-weight-primary) !default;
+$line-height-base: var(--el-font-line-height-primary) !default;
+
+// 字体族
+$font-family:
+  'Helvetica Neue',
+  Helvetica,
+  'PingFang SC',
+  'Hiragino Sans GB',
+  'Microsoft YaHei',
+  Arial,
+  sans-serif !default;
+
+// ---- Animation ----
+$animation-duration: var(--el-transition-duration) !default;
+$animation-timing-fun: cubic-bezier(0.55, 0.085, 0.68, 0.53) !default;
+
+// ---- Overlay ----
+// 遮罩(委托 element-plus 遮罩颜色变量)
+$overlay-bg-color: var(--el-overlay-color-light) !default;
+$overlay-text-bg-color: var(--el-overlay-color) !default;
+
+// ---- 暗黑风格(fox 独有) ----
+$dark-background: #131313 !default;
+$dark-background-2: #1b1b1b !default;
+$dark-background-3: #141414 !default;
+$dark-background-4: #323233 !default;
+$dark-background-5: #646566 !default;
+$dark-color: $white !default;
+$dark-color-2: #f2270c !default;
+$dark-color-gray: var(--el-text-color-regular) !default;
+$dark-calendar-choose-color: rgba(227, 227, 227, 0.2) !default;

package/dist/theme/common/border.scss

@@ -0,0 +1,25 @@
+@use 'sass:map';
+
+// 边框颜色系统
+// foxui-desktop 基于 element-plus 二次封装, 边框颜色默认委托 element-plus 的 CSS 变量,
+// element-plus 主题(含暗黑模式)变化时 fox 主题自动跟随
+$border-color: () !default;
+$border-color: map.deep-merge(
+  (
+    'base': var(--el-border-color),
+    'light': var(--el-border-color-light),
+    'lighter': var(--el-border-color-lighter),
+    'extra-light': var(--el-border-color-extra-light),
+    'dark': var(--el-border-color-dark),
+    'darker': var(--el-border-color-darker)
+  ),
+  $border-color
+);
+
+// 快捷变量
+$border-color-base: map.get($border-color, 'base') !default;
+$border-color-light: map.get($border-color, 'light') !default;
+$border-color-lighter: map.get($border-color, 'lighter') !default;
+$border-color-extra-light: map.get($border-color, 'extra-light') !default;
+$border-color-dark: map.get($border-color, 'dark') !default;
+$border-color-darker: map.get($border-color, 'darker') !default;

package/dist/theme/common/color.scss

@@ -0,0 +1,143 @@
+@use 'sass:map';
+
+// 颜色系统
+// foxui-desktop 基于 element-plus 二次封装, 颜色默认委托 element-plus 的 CSS 变量,
+// element-plus 主题(含暗黑模式)变化时 fox 主题自动跟随
+$colors: () !default;
+
+$colors: map.deep-merge(
+  (
+    'white': var(--el-color-white),
+    'black': var(--el-color-black),
+    'primary': (
+      'base': var(--el-color-primary),
+      'light-1': var(--el-color-primary-light-1),
+      'light-2': var(--el-color-primary-light-2),
+      'light-3': var(--el-color-primary-light-3),
+      'light-4': var(--el-color-primary-light-4),
+      'light-5': var(--el-color-primary-light-5),
+      'light-6': var(--el-color-primary-light-6),
+      'light-7': var(--el-color-primary-light-7),
+      'light-8': var(--el-color-primary-light-8),
+      'light-9': var(--el-color-primary-light-9),
+      'dark-2': var(--el-color-primary-dark-2)
+    ),
+    'success': (
+      'base': var(--el-color-success),
+      'light-1': var(--el-color-success-light-1),
+      'light-2': var(--el-color-success-light-2),
+      'light-3': var(--el-color-success-light-3),
+      'light-4': var(--el-color-success-light-4),
+      'light-5': var(--el-color-success-light-5),
+      'light-6': var(--el-color-success-light-6),
+      'light-7': var(--el-color-success-light-7),
+      'light-8': var(--el-color-success-light-8),
+      'light-9': var(--el-color-success-light-9),
+      'dark-2': var(--el-color-success-dark-2)
+    ),
+    'warning': (
+      'base': var(--el-color-warning),
+      'light-1': var(--el-color-warning-light-1),
+      'light-2': var(--el-color-warning-light-2),
+      'light-3': var(--el-color-warning-light-3),
+      'light-4': var(--el-color-warning-light-4),
+      'light-5': var(--el-color-warning-light-5),
+      'light-6': var(--el-color-warning-light-6),
+      'light-7': var(--el-color-warning-light-7),
+      'light-8': var(--el-color-warning-light-8),
+      'light-9': var(--el-color-warning-light-9),
+      'dark-2': var(--el-color-warning-dark-2)
+    ),
+    'danger': (
+      'base': var(--el-color-danger),
+      'light-1': var(--el-color-danger-light-1),
+      'light-2': var(--el-color-danger-light-2),
+      'light-3': var(--el-color-danger-light-3),
+      'light-4': var(--el-color-danger-light-4),
+      'light-5': var(--el-color-danger-light-5),
+      'light-6': var(--el-color-danger-light-6),
+      'light-7': var(--el-color-danger-light-7),
+      'light-8': var(--el-color-danger-light-8),
+      'light-9': var(--el-color-danger-light-9),
+      'dark-2': var(--el-color-danger-dark-2)
+    ),
+    'info': (
+      'base': var(--el-color-info),
+      'light-1': var(--el-color-info-light-1),
+      'light-2': var(--el-color-info-light-2),
+      'light-3': var(--el-color-info-light-3),
+      'light-4': var(--el-color-info-light-4),
+      'light-5': var(--el-color-info-light-5),
+      'light-6': var(--el-color-info-light-6),
+      'light-7': var(--el-color-info-light-7),
+      'light-8': var(--el-color-info-light-8),
+      'light-9': var(--el-color-info-light-9),
+      'dark-2': var(--el-color-info-dark-2)
+    )
+  ),
+  $colors
+);
+
+// 快捷变量
+$color-primary: map.get(map.get($colors, 'primary'), 'base') !default;
+$color-primary-light-1: map.get(map.get($colors, 'primary'), 'light-1') !default;
+$color-primary-light-2: map.get(map.get($colors, 'primary'), 'light-2') !default;
+$color-primary-light-3: map.get(map.get($colors, 'primary'), 'light-3') !default;
+$color-primary-light-4: map.get(map.get($colors, 'primary'), 'light-4') !default;
+$color-primary-light-5: map.get(map.get($colors, 'primary'), 'light-5') !default;
+$color-primary-light-6: map.get(map.get($colors, 'primary'), 'light-6') !default;
+$color-primary-light-7: map.get(map.get($colors, 'primary'), 'light-7') !default;
+$color-primary-light-8: map.get(map.get($colors, 'primary'), 'light-8') !default;
+$color-primary-light-9: map.get(map.get($colors, 'primary'), 'light-9') !default;
+$color-primary-dark-2: map.get(map.get($colors, 'primary'), 'dark-2') !default;
+
+$color-success: map.get(map.get($colors, 'success'), 'base') !default;
+$color-success-light-1: map.get(map.get($colors, 'success'), 'light-1') !default;
+$color-success-light-2: map.get(map.get($colors, 'success'), 'light-2') !default;
+$color-success-light-3: map.get(map.get($colors, 'success'), 'light-3') !default;
+$color-success-light-4: map.get(map.get($colors, 'success'), 'light-4') !default;
+$color-success-light-5: map.get(map.get($colors, 'success'), 'light-5') !default;
+$color-success-light-6: map.get(map.get($colors, 'success'), 'light-6') !default;
+$color-success-light-7: map.get(map.get($colors, 'success'), 'light-7') !default;
+$color-success-light-8: map.get(map.get($colors, 'success'), 'light-8') !default;
+$color-success-light-9: map.get(map.get($colors, 'success'), 'light-9') !default;
+$color-success-dark-2: map.get(map.get($colors, 'success'), 'dark-2') !default;
+
+$color-warning: map.get(map.get($colors, 'warning'), 'base') !default;
+$color-warning-light-1: map.get(map.get($colors, 'warning'), 'light-1') !default;
+$color-warning-light-2: map.get(map.get($colors, 'warning'), 'light-2') !default;
+$color-warning-light-3: map.get(map.get($colors, 'warning'), 'light-3') !default;
+$color-warning-light-4: map.get(map.get($colors, 'warning'), 'light-4') !default;
+$color-warning-light-5: map.get(map.get($colors, 'warning'), 'light-5') !default;
+$color-warning-light-6: map.get(map.get($colors, 'warning'), 'light-6') !default;
+$color-warning-light-7: map.get(map.get($colors, 'warning'), 'light-7') !default;
+$color-warning-light-8: map.get(map.get($colors, 'warning'), 'light-8') !default;
+$color-warning-light-9: map.get(map.get($colors, 'warning'), 'light-9') !default;
+$color-warning-dark-2: map.get(map.get($colors, 'warning'), 'dark-2') !default;
+
+$color-danger: map.get(map.get($colors, 'danger'), 'base') !default;
+$color-danger-light-1: map.get(map.get($colors, 'danger'), 'light-1') !default;
+$color-danger-light-2: map.get(map.get($colors, 'danger'), 'light-2') !default;
+$color-danger-light-3: map.get(map.get($colors, 'danger'), 'light-3') !default;
+$color-danger-light-4: map.get(map.get($colors, 'danger'), 'light-4') !default;
+$color-danger-light-5: map.get(map.get($colors, 'danger'), 'light-5') !default;
+$color-danger-light-6: map.get(map.get($colors, 'danger'), 'light-6') !default;
+$color-danger-light-7: map.get(map.get($colors, 'danger'), 'light-7') !default;
+$color-danger-light-8: map.get(map.get($colors, 'danger'), 'light-8') !default;
+$color-danger-light-9: map.get(map.get($colors, 'danger'), 'light-9') !default;
+$color-danger-dark-2: map.get(map.get($colors, 'danger'), 'dark-2') !default;
+
+$color-info: map.get(map.get($colors, 'info'), 'base') !default;
+$color-info-light-1: map.get(map.get($colors, 'info'), 'light-1') !default;
+$color-info-light-2: map.get(map.get($colors, 'info'), 'light-2') !default;
+$color-info-light-3: map.get(map.get($colors, 'info'), 'light-3') !default;
+$color-info-light-4: map.get(map.get($colors, 'info'), 'light-4') !default;
+$color-info-light-5: map.get(map.get($colors, 'info'), 'light-5') !default;
+$color-info-light-6: map.get(map.get($colors, 'info'), 'light-6') !default;
+$color-info-light-7: map.get(map.get($colors, 'info'), 'light-7') !default;
+$color-info-light-8: map.get(map.get($colors, 'info'), 'light-8') !default;
+$color-info-light-9: map.get(map.get($colors, 'info'), 'light-9') !default;
+$color-info-dark-2: map.get(map.get($colors, 'info'), 'dark-2') !default;
+
+$white: map.get($colors, 'white') !default;
+$black: map.get($colors, 'black') !default;

package/dist/theme/common/fill.scss

@@ -0,0 +1,38 @@
+@use 'sass:map';
+
+// 填充色系统(委托 element-plus 填充颜色变量)
+$fill-color: () !default;
+$fill-color: map.deep-merge(
+  (
+    'base': var(--el-fill-color),
+    'light': var(--el-fill-color-light),
+    'lighter': var(--el-fill-color-lighter),
+    'extra-light': var(--el-fill-color-extra-light),
+    'dark': var(--el-fill-color-dark),
+    'darker': var(--el-fill-color-darker),
+    'blank': var(--el-bg-color)
+  ),
+  $fill-color
+);
+
+// 背景色系统(委托 element-plus 背景颜色变量)
+$bg-color: () !default;
+$bg-color: map.deep-merge(
+  (
+    'base': var(--el-bg-color),
+    'page': var(--el-bg-color-page),
+    'overlay': var(--el-bg-color-overlay)
+  ),
+  $bg-color
+);
+
+// 快捷变量
+$fill-color-base: map.get($fill-color, 'base') !default;
+$fill-color-light: map.get($fill-color, 'light') !default;
+$fill-color-lighter: map.get($fill-color, 'lighter') !default;
+$fill-color-extra-light: map.get($fill-color, 'extra-light') !default;
+$fill-color-dark: map.get($fill-color, 'dark') !default;
+$fill-color-darker: map.get($fill-color, 'darker') !default;
+$fill-color-blank: map.get($fill-color, 'blank') !default;
+
+$background-color: map.get($bg-color, 'base') !default;

package/dist/theme/common/shadow.scss

@@ -0,0 +1,19 @@
+@use 'sass:map';
+
+// 阴影系统(委托 element-plus 阴影变量)
+$shadow: () !default;
+$shadow: map.deep-merge(
+  (
+    'base': var(--el-box-shadow),
+    'light': var(--el-box-shadow-light),
+    'lighter': var(--el-box-shadow-lighter),
+    'dark': var(--el-box-shadow-dark)
+  ),
+  $shadow
+);
+
+// 快捷变量
+$box-shadow: map.get($shadow, 'base') !default;
+$box-shadow-light: map.get($shadow, 'light') !default;
+$box-shadow-lighter: map.get($shadow, 'lighter') !default;
+$box-shadow-dark: map.get($shadow, 'dark') !default;

package/dist/theme/common/typography.scss

@@ -0,0 +1,34 @@
+@use 'sass:map';
+
+// 文字颜色系统(委托 element-plus 文字颜色变量)
+$text-color: () !default;
+$text-color: map.deep-merge(
+  (
+    // 标题
+    'primary': var(--el-text-color-primary),
+    // 副标题
+    'title-secondary': var(--el-text-color-secondary),
+    // 正文
+    'regular': var(--el-text-color-regular),
+    // 次级文字
+    'secondary': var(--el-text-color-secondary),
+    // 禁用
+    'disabled': var(--el-text-color-disabled),
+    // 只读(fox 独有, 无 element-plus 对应)
+    'readonly': #808080,
+    // 必输标识
+    'required': var(--el-color-error)
+  ),
+  $text-color
+);
+
+// 快捷变量
+$title-color: map.get($text-color, 'primary') !default;
+$title-color-secondary: map.get($text-color, 'title-secondary') !default;
+
+$text-color-regular: map.get($text-color, 'regular') !default;
+$text-color-secondary: map.get($text-color, 'secondary') !default;
+
+$disabled-color: map.get($text-color, 'disabled') !default;
+$readonly-color: map.get($text-color, 'readonly') !default;
+$required-color: map.get($text-color, 'required') !default;

package/dist/theme/common/var.scss

@@ -0,0 +1,7 @@
+// 基础 Design Token 统一导出
+@forward 'color';
+@forward 'typography';
+@forward 'border';
+@forward 'fill';
+@forward 'shadow';
+@forward 'base';